Setting Up Android Emulators for NativeScript Development
Sometimes you write a blogpost to get your thoughts sorted. This post is a perfect example.
I hereby present a collection of commands for very impatient people to get a NativeScript project up and running. If you execute all of them you will be able to start any NativeScript demo, e.g. the great Groceries sample. We will set up an Android AVD and Genymotion.
On Windows systems, you can develop, build, and deploy NativeScript projects that target Android.
On OS X systems, you can develop, build, and deploy NativeScript projects that target iOS and Android.
For a detailed instruction see the getting started guide.
Make sure that you have node.js installed, then follow these steps:
1. Install JDK, Android SDK & HAXM
The Java SE Development Kit (JDK) is required for the Android SDK.
On windows
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/NativeScript/nativescript-cli/production/setup/native-script.ps1'))"`
On OS X
sudo ruby -e "$(curl -fsSL https://raw.githubusercontent.com/NativeScript/nativescript-cli/production/setup/native-script.rb)"
For both
The Android x86 emulator will be much more faster if you install the "Intel® Hardware Accelerated Execution Manager" (HAXM). You definitely want to install it to speed up Android app emulation on your host machine. A chipset with Intel VT is required, of course.
2. Install packages for the Android SDK
Locate the android
executable and call:
android update sdk --filter tools,platform-tools,android-23,build-tools-23.0.2,sys-img-x86-android-22,extra-android-m2repository,extra-google-m2repository,extra-android-support --all --no-ui
Skip the --no-ui
parameter if you prefer a graphical user interface.
3. Android SDK Tools: Create an AVD
The AVD Manager provides a graphical user interface to create and manage Android Virtual Devices (AVDs).
AVD files are executed by the Android Emulator. Launch the AVD Manager, configure a device and start it.
4. Start the Demo
Everything up to this point was not specific to NativeScript.
We need a starting point, for example the groceries demo:
git clone https://github.com/NativeScript/sample-Groceries.git
Change into the cloned directory and add some useful npm-scripts to the package.json
:
"scripts": {
"postinstall": "tns platform add android",
"start": "tns run android --emulator",
"start-geny": "tns run android --emulator --geny=\"DEVICE_NAME_HERE\"",
"doctor": "tns doctor"
},
Lets install the nativescript-cli and angular2 via NPM.
npm install
npm start
If something goes wrong, type the following command:
npm run doctor
5. Highly recommended: Genymotion
Soon you will find out that the Android Emulator still very slow and tricky to set up.
You should give Genymotion a try! The solution works on top of Oracle VM VirtualBox and is a breeze compared to the normal emulator.
- Register at genymotion.com, chose the free license (Free for personal use only).
- Download and install Genymotion and Oracle VM VirtualBox.
- At the installation directory of Genymotion to the PATH environment variable.
- Add and configure a device with the Genymotion graphical user interface.
- Start the device.
- Verify in the "Genymotion shell" the name of the created device:
devices list
-
Start the demo:
npm install -g nativescript genyshell -c "devices list" tns run android --emulator --geny="device name"
We use the genyshell to figure out the exact name of the device.
Then we instruct the tns
command to use the given Genymotion device instead of the normal Android emulator.
Previously we also defined an NPM script for that: npm run start-geny
. Keep in mind that you have to adjust the device name in the package.json
first.
6. Happy hacking!
Now we can play around with the emulator and the NativeScript code.
You should start something amazing today!