-
Notifications
You must be signed in to change notification settings - Fork 6
Mobile Dev
This page has initially been drafted to support a workshop event for Ionic 2, but you may find it interesting for a hack night as well.
Developing with Ionic Framework
Ionic is a framework and set of tools for building hybrid mobile apps for the major platforms utilizing native features, leveraging familiar web technologies. Here we cover how to get a development environment set up for Ionic 2, the next generation of the SDK built upon Angular 2.
The Ionic installation documentation should be considered the authoritative source of information, but we provide some expanded info here. You can go a long way developing an Ionic app with only a browser, before ever needing additional tools for native platform builds, so we'll start with that:
-
Node.js, which includes the npm package manager. Ionic docs recommend Node version 5, which you can get here, though any version from 4.x and up should work if more conveniently available from your OS package manager.
-
The
ioniccommand line tool, which you can install as an npm package after you've installed Node:$ npm install -g ionic@beta -
You can use practically any text editor you prefer—Atom, Sublime, Vim, whatever—Ionic builds are driven primarily by the command line tool and no particular IDE is needed. Ionic 2 apps are usually written with TypeScript so you may wish to set up your editor with plugins for TypeScript support. Because of Microsoft's backing of TypeScript, Visual Studio Code has many features for the language that you may like if you're a fan of VSC.
As a developer working on a Mac, you're probably familiar with Homebrew, and it is recommended for making things easy:
$ brew install node
$ npm install -g ionic@beta
Done. You may need Xcode at this stage, and you will certainly need it if you want to build your app for iOS and develop with native Apple device features (more about this below).
You can also get a Mac .pkg installer from the Node.js downloads page if you don't use Homebrew or prefer the installer for some reason.
You'll most likely prefer to install Node through your distribution's package manager (e.g. apt). Check the official docs for Linux packages to find instructions and recommended package repositories for your distro.
Get the Node.js installer package from the Node.js downloads page and run the installer. Accept the defaults in the installer to install npm and modify your PATH. The node and npm commands should then be available at the Windows command prompt.
To develop with platform-native features in your app and to test on real devices or simulators, you'll need some additional components, namely the platform SDKs. The ionic CLI often wraps these so you can use them more conveniently, but you need to have them installed.
One component is needed for any of the device platforms, Cordova:
$ npm install -g cordova
You'll need a Mac and Xcode. As if that enormous Xcode download wasn't enough, there is one more: the iOS simulator. Run Xcode.app, open Preferences… from the Xcode menu in the menubar, click the Downloads tab, and install a simulator from this view. You can now quit Xcode.
Then in your project:
$ ionic platform add ios
$ ionic emulate ios
This should run your app in the iOS simulator. It may unhelpfully launch in the background behind other apps. To customize what type of device is simulated, try this.
Warning: things get a bit messy from here. The Android toolchain is kind of a shitshow.
You will need the Android SDK. Note that you do not need the complete Android Studio if you don't want it (the IntelliJ-based IDE, targeting Java development), you can scroll to the bottom of the download page to find the section "Get just the command line tools" and install only the SDK.
For Windows, get and run the installer. If you're on a Mac using Homebrew, it's convenient to use:
$ brew install android-sdk
Then you'll need to run the Android SDK Manager GUI and install a few of its packages. You should be able to start this by running the command android after the installation above. From there, select and install the following:
- Tools > Android SDK Platform-tools
- Tools > Android SDK Build-tools
You have a couple of choices for an emulator: the standard Android SDK emulators, or Ionic supports the third-party Genymotion emulator because the standard one is often very slow. Genymotion is a commercial tool; there is a free developer version available that you can try, it has many limitations but is easier to use and faster. The choice is up to you.
Standard Android emulators are installed through the same SDK Manager GUI as above. Run android and select and install these:
- Android 6.0 (API 23) > SDK Platfrom (Ionic/Cordova currently needs this version for emulating)
- Android 6.0 (API 23) > Intel x86 Atom System Image (or Atom_64)
You can use any system image if you're targeting an exotic type of device, but emulation performance will be best with an Intel image. You can optionally take these steps to further improve performance:
- Extras > Intel x86 Emulator Accelerator (HAXM installer) in the SDK Manager
- That doesn't actually install the accelerator, it installs its installer… (I told you this was a shitshow). See Intel's official HAXM docs for your platform, they show what to run after using Android SDK Manager in order to complete the installation.
Finally for Ionic:
$ ionic platform add android
$ ionic emulate android
If you missed any of the package installations, the ionic emulate command should output an error telling you exactly what's missing. See the official user guide for the Android Emulator for more details on using it.
Download the free personal edition of Genymotion from the website. Once installed, run the Genymotion app, open Settings and select the ADB tab. Set it not to use Genymotion Android tools—point it to your Android SDK installation as described here. On my OS X system with version current as of writing, the SDK path to enter here is /usr/local/Cellar/android-sdk/24.4.1_1—adjust for your platform.
Now, close the settings, click Add to create a new virtual device (using one with Android API 23), then start it. When you use Genymotion, it will be treated as an actual connected device so you'll use the ionic run command instead of emulate:
$ ionic platform add android
$ ionic run android
This should launch your app in the running Genymotion device.
This is supported by Ionic 2, but it's poorly documented so far and we haven't tried it. Can you help with this section?
That's it for development environment setup, carry on with the tutorial to learn how to build apps!