Since NativeScript managed to create a basic app using Vue.js, I wanted to give it a try via hyperHTML or, in case there’s not real-world DOM in NativeScript bindings, using viperHTML goodness right away.
… but setup first !
As usual, the documentation would target Ubuntu only, pretending that’s “the meaning of Linux” and while there are good instructions there for such distribution, those won’t work on ArchLinux.
However, the following command will do the trick, simplifying most steps:
$ bash <(curl -s archibold.io/install/android)
Once installed “all the things”, you’ll still need to add Android SDK 25+ tools using the command provided by NativeScript page, only after reloading current terminal/shell (exit and reopen it or simply type
ctr + shift + t)
$ sudo $ANDROID_HOME/tools/bin/sdkmanager "tools" "platform-tools" "build-tools;25.0.3" "extras;android;m2repository" "extras;google;m2repository"
A long Terms And Conditions for usage will be displayed, and after reading it, you’ll have to accept it or you won’t be able to move on: it’s your call 😊
Installing NativeScript via npm
If everything went fine so far, you can now install globally nativescript:
$ npm install -g nativescript --unsafe-perm
--unsafe-perm flag is suggested in the NativeScript page, while the global installation might require
sudo privileges too, it really depends on how you configured your node and npm env.
If you don’t have node or npm at all, the following command should help you as well as the android one:
$ bash <(curl -s archibold.io/install/node)
To verify that everything is fine you can simply type
tns doctor and in case there is an update you should type
tns update which might take a little while but it should give you all the latest things.
Installing an Android Virtual Device
You might want to skip this step if you have an Android phone but I’ve forgotten to bring one with me and I usually have an iPhone (quite pointless when your main OS is Linux but … hey … I can test Web stuff there anyway), so here I am with solutions.
Genymotion is honestly the deadly-simplest way to bring a usable AVD to your system. unfortunately it’s based on Qt, rather than Gtk+, so it’ll take a little while to install it on GNOME and on top of that, the UI won’t be HiDPi friendly, but it’ll just work™, which is the most important thing.
You need to create a free account, in case you don’t have one already, and you can install it via yaourt, a package already brought in via previoust archibold android installer.
$ yaourt -S --needed genymotion
Once you have it installed, you can start it simply typing
genymotion and, after logging in with your free developer account, selecting an API 25 compatible device, in my case a Custom Phone — 7.1.0 API 25.
Once installed, you can start the emulator and after that you can double check it’s available to NativeScript simply typing the following:
$ tns device android --available-devices
Testing the Vue example
Since everything started from me trying to bring vue-like features, via viperHTML, and to NativeScript, I’ve used the same repository to test this configuration.
The TL;DR version of their instructions page is the following one:
$ git clone https://github.com/rigor789/nativescript-vue.git
$ cd nativescript-vue/nativescript-vue
$ npm install
$ npm link
$ cd ../vue-sample
$ npm link nativescript-vue
$ tns run android --device DEVICE_IDENTIFIER
DEVICE_IDENTIFIER is what the command
tns device android --available-devices shows under the Device Identifier field.
If everything goes OK, you’ll find yourself with the sample up and running on the emulated Android 7.10 🎉
Best thing of all? If you have a HiDPi screen with touch screen enabled you’ll find yourself testing NativeScript apps, without a phone, and like you had one for real. Pretty awesome so far, now I just need some time to understand which tech-stack between hyper and viper HTML would fit more on NativeScript apps.