Building native mobile apps with Ionic Framework and Drupal back-end: Setup Development Environment

Today, a large amount of web traffic comes from mobile device users. For this reason, responsive websites – those with great adaptation for smartphones, tablets and even watches and TVs – are a must-have for any company or startup. However, browser web-applications have a lot of limitations and some performance issues on devices. If you want a prime user experience for customers who use gadgets to interact with your services, a native mobile app is the best choice. It will give you an opportunity to use all native APIs, which use device hardware resources to communicate with users. In most cases web-apps don’t have that capability.

Technology introduction

There are currently two popular platforms for mobile devices: Android and iOS. Each relies on a specific language for applications – Android uses Java as its main programming language, and iOS uses Swift in its latest version. But it is possible to make apps for these and other platforms, without needing to learn each language (or having a different developer for each). This is done through hybrid applications: you can write simple HTML + CSS + JavaScript web-apps, and then convert them to native apps. There a few pros and cons to using hybrid apps instead of native ones:

Pros:

• No need for developers to learn new programming languages
• One codebase for all mobile platforms
• Can use almost all native API’s
• Can use the same content as your web-app

Cons:

• A little bit slower than native, but not critical
• Output files have a bigger size

Why Ionic?

In this tutorial series, I will use Ionic Framework to build our native app. Ionic Framework is an open-source project that works under the Apache Cordova platform and has AngularJS under the hood. The Cordova platform functions as a bridge between our HTML5 application and native device APIs; it has a base functionality for building, and many more available plugins. In addition, it works with a dozen mobile operating systems such as: Android, iOS, Windows Phone, FirefoxOS and more. Ionic provides us with an opportunity to write an app with all capabilities of AngularJS and its modules, along with a design starting point and UI elements. It has a NodeJS CLI to control building processes and a couple of boilerplates to make project starts immediate and simple.

Environment Setup

At this point we have a choice of how to build our development process. The first option is to use a preconfigured Vagrant install called Ionic Box - if you aren’t familiar with Vagrant you can read the following tutorial series. Ionic Box is a Windows virtual machine with all the software you’ll need to develop Android native apps. In this post, I will build an Android application because I’m working on Windows, but I will show how to add iOS support to your project if you are on Mac. The second option is to install all programs manually on your system. For this, I made a step-by-step plan to set up your Windows environment:

Install Java:

1. Go to Oracle Java downloads page and click on the JDK download link.
2. On the JDK download page, accept license agreement, choose and download the distributive for your operating system.
3. Run installer with default options
4. Configure Environment Variables in system
   - Go to Control Panel -> System and Security -> System
   - Click on Advanced system settings
   - Click Environment Variables button
   - Click New button in System variables fieldset and add JAVA_HOME variable with value being the path to your jdk folder.

Install Apache Ant

1. Download distributive from here
2. Run installer
3. Configure Environment Variables in system
   - Go to Control Panel -> System and Security -> System
   - Click on Advanced system settings
   - Click Environment Variables button
   - Click New button in System variables fieldset and add ANT_HOME variable with value being the path to your ant/bin folder

Install Android SDK

1. Go to the Android SDK download page
2. Click on “Other Download Options” link
3. Download distributive for your system
4. Run installer with default options
5. In command prompt, run command: android
   This will start Android SDK Manager Tool, which allows you to download all packages that you need
6. Check all Tools, Extras, and APIs 14 and higher, then click Install Packages button
7. Configure Environment Variables in system
   - Go to Control Panel -> System and Security -> System
   - Click on Advanced system settings
   - Click Environment Variables button
   - Click New button in System variables fieldset and add ANDROID_HOME variable with value being the path to your sdk folder

Install NodeJS:

1. Go to the NodeJS web-site.
2. Click on “Install” link, and it will start downloading the distributive for your operating system automatically
3. Run installer with default options

Install Cordova and Ionic:

1. Open NodeJS command prompt
2. Run the following command: npm install -g cordova ionic
   This will install Cordova and Ionic globally in your system, so you can access their commands from command prompt.

Congratulations - you have setup your environment to build hybrid mobile applications for Android with Ionic Framework! Check back in tomorrow and we’ll continue this process. Or, contact us if you have questions about this process or anything else, we'd like to help.