Ionic Tutorial

Installing Ionic

Ionic CLI and Cordova

With Node and NPM setup, let’s install the Ionic and Cordova CLI.

npm install -g ionic cordova

Note: The -g means this is a global install, so for Window’s you will need to open an Admin command prompt. For Mac/Linux, you’ll need to run the command with sudo.

Once that’s done, create your first Ionic app:

ionic start helloWorld blank

To run your app, cd into the directory that was created and then run the ionic serve command to test your app right in the browser!

cd helloWorld

ionic serve

Browser Support

Ionic is focused on building both native/hybrid apps through Cordova

The following OSs and browsers are supported:

Mobile OSs

• iOS 8+
• Windows 10 Universal App
• Android 4.4+
• Support can be pushed back to 4.1 if Crosswalk is used with Cordova

Browser

• Safari
• Chrome
• Edge

Deploying to a Device

Testing your app in the browser with ionic serve or with an emulator is fast, easy and convenient when your app is in development, but eventually you’re going to have to test on a device. Not only is it the only way to accurately test how your app will behave and perform, many Ionic Native plugins will only work when they are run on actual hardware.

Android Devices

Deploying to an Android device is a fairly straightforward process. If you have a working Android development environment, you’re ready to go.

Requirements

• Java JDK
• Android Studio
• Updated Android SDK tools, platform and component dependencies. Available through Android Studio’s SDK Manager

Running Your App

To run your app, all you have to do is enable USB debugging and Developer Mode on your Android device, then run ionic cordova run android --devicefrom the command line.

This will produce a debug build of your app, both in terms of Android and Ionic’s code

Enabling USB debugging and Developer Mode can vary between devices, but is easy to look up with a Google search.

Production Builds

To run or build your app for production, run

ionic cordova run android --prod --release # or 

ionic cordova build android --prod --release 

This will minify your app’s code as Ionic’s source and also remove any debugging capabilities from the APK. This is generally used when deploying an app to the Google Play Store.

Sign Android APK

If you want to release your app in the Google Play Store, you have to sign your APK file. To do this, you have to create a new certificate/keystore.

Let’s generate your private key using the keytool command that comes with the JDK:

keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias 

You’ll first be prompted to create a password for the keystore. Then, answer the rest of the nice tools’s questions and when it’s all done, you should have a file called my-release-key.jks created in the current directory.

Note: Make sure to save this file somewhere safe, if you lose it you won’t be able to submit updates to your app!

To sign the unsigned APK, run the jarsigner tool which is also included in the JDK:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks android-release-unsigned.apk my-alias 

This signs the APK in place. Finally, we need to run the zip align tool to optimize the APK. The zipalign tool can be found in /path/to/Android/sdk/build-tools/VERSION/zipalign. For example, on OS X with Android Studio installed, zipalign is in ~/Library/Android/sdk/build-tools/VERSION/zipalign:

zipalign -v 4 android-release-unsigned.apk HelloWorld.apk 

To verify that your apk is signed run apksigner. The apksigner can be also found in the same path as the zipalign tool:

apksigner verify HelloWorld.apk 

Now we have our final release binary called HelloWorld.apk and we can release this on the Google Play Store for all the world to enjoy!

IOS Devices

Unlike Android, iOS developers need to generate a provisioning profile to code sign their apps for testing. The good news is that, as of iOS9, you can develop and test your apps on your iOS device without a paid Apple Developer account. This is particularly great for developers who want to try out mobile development with Ionic, since it saves the cost but still provides a lot of the features of having a full Apple Developer account. For a full breakdown of the features included.

Requirements

• Xcode 7 or higher
• iOS 9
• A free Apple ID or paid Apple Developer account

Creating a Provisioning Profile

To start, you’ll need to set up a provisioning profile to code sign your apps.

Using an Apple ID

1.    Open Xcode preferences (Xcode > Preferences…)

2.    Click the ‘Accounts’ tab

3.    Login with your Apple ID (+ > Add Apple ID…)

Using an Apple Developer Account

Creating a provisioning profile with a paid Apple Developer account is a little bit more involved. For full instructions, check out Launching Your App on Devices in the Apple Developer docs.

Running Your App

1.    Run a production build of your app with ionic cordova build ios --prod

2.    Open the .xcodeproj file in platforms/ios/ in Xcode

3.    Connect your phone via USB and select it as the run target

4.    Click the play button in Xcode to try to run your app

Oops, code signing error! No problem.

Code Signing Your App

Next, you’ll need to code sign your app. How you do this will depend on if you are running Xcode 8 or an earlier version.

Xcode 7 and Earlier

If you are running Xcode 7 or earlier, you’ll get a code signing error that looks like this when you try to run the app:

To select the certificate to sign your app with, do the following:

1.    Go to the ‘Project Editor’ by clicking the name or your project in the ‘Project Navigator’

2.    Select the ‘General’ section

3.    Select the team associate with your signing certificate from the ‘Team’ dropdown in the ‘Signing’ section

Trusting the Certificate

Once you’ve code signed your app, you should get a launch error that looks like this. On Xcode 7 and below you’ll see this automatically. On Xcode 8 it will appear the next time you try to run the app:

To get past this, we have to tell our iOS device to trust the certificate we code signed our app with:

1.    Open the ‘Settings’ app on your iOS device

2.    Go to ‘General > Device Management’. You’ll see the email address associated with the Apple ID or Apple Developer account you used to code sign your app.

3.    Tap the email address

4.    Tap ‘Trust <your_email>’:

Now, go back to Xcode and hit that play button or run ionic cordova run ios --device from the command line to install and launch your app on your iOS device.