What is a Hybrid Mobile Application?

Hybrid mobile apps are applications the combine the flexibility and speed of web development and allow you to run those web sites inside a native device such as an iPhone or Android phone. They install like a regular native app, however behind the scenes are running a Single Page Web application.

What is Apache Cordova and what is it used for?

Apache Cordova allows you to take one codebase written in Angular 2+ and generate multiple destination platforms to run them on. In this example we will walk through what it takes to build an hybrid mobile app for IOS and Android.

Before we get started you’ll need to set up your local development environment.

This setup assumes you are using a MacOS system. You’ll be using the terminal command line run these steps.

1. Homebrew

This is a great tool for MacOS users to download and install application libraries quickly. Check out https://brew.sh/ for more details.

$ brew —version // make sure Homebrew is installed to help download apps

Use this command if you want to install Homebrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Node JS

Node is needed to install and run JavaScript based libraries

Check to see if Node is already installed.

$ node -v // make sure node is 8.6.0+ 
$ npm -v // make sure node is 6.0.0+

Node and NPM can be downloaded from  https://nodejs.org/

Or you can install using homebrew

$ brew install node

3. Java

Install the Java Development Kit (JDK) and make sure JAVA_HOME is setup properly

At the time of writing, Cordova only works with Java8

$ brew cask install caskroom/versions/java8 

Verify Java8 is installed

$ which java
$ java -version

Now we need to set the Java Home directory

You can check if the java home is already set using this command

$ echo $JAVA_HOME 

Now add the Java Home to your bash profile

$ echo 'export JAVA_HOME=/Library/Java/Home' >> ~/.bash_profile

4. Android Studio

Download and Install the latest Android Studio https://developer.android.com/studio/

Check that Android Home is set

$ echo $ANDROID_HOME 

If set add the Android home to your bash profile

$ echo 'export ANDROID_HOME=~/Library/Android/sdk' >> ~/.bash_profile

Check if PATH includes the Android folders …/sdk/platform-tools and …sdk/tools folders

$ echo $PATH

If PATH does not include …/sdk/platform-tools and …sdk/tools add them to your bash profile

$ echo 'export PATH=${PATH}:~/Library/Android/sdk/platform-tools:~/Library/Android/sdk/tools' >> ~/.bash_profile

5. xCode

xCode is only available on a MacOS system and can be installed from the App Store.

Once installed run this command to set the current version of xcode

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

6. Cordova

Check if Cordova v8.0.0 or latest cordova version is installed

$ cordova -v 

If cordova is not installed or you have an older version, run this command

$ npm install -g cordova 

Run this command to check  if cordova app is properly installed

$ cordova requirements

If Gradle is mentioned as missing install it

$ brew install gradle

7. Angular 6

Cordova will work with many JavaScript frameworks. In this tutorial we will use Angular 6.

Start by installing Angular CLI. This command line tool lets you generate and run commands specific to Angular.

$ npm install -g @angular/cli

8. ios-deploy

This is needed to install and debug ios apps from the command line. Read more here: https://github.com/ios-control/ios-deploy

$ npm install -g ios-deploy

9. Cocoa Pods

Dependency manager for ios apps. Used by cordova when generating ios applications.

$ sudo gem install cocoapods
$ pod setup

Create a new Angular “Hello World” app

$ ng new hybridapp
$ cd hybridapp

To view the generated app run

$ ng serve

From here you can customize the app as you see fit or leave it as is for now

Build the app

$ ng build --prod

This will package the code into a dist folder

Within your Angular app ‘hybridapp’ folder use cordova to generate a boilerplate project

$ cordova create mobile

Once app is created, browse into new app folder

$ cd mobile 

Remove the existing www folder. We will use our Angular app instead.

$ rm -rf www

Instead we are going to create a link to the dist folder where Angular will do a build

$ ln -s ../dist www

This minimizes any changes to your existing Angular app instead of trying to shoehorn it into Cordova

Edit the www/index.html <base href=”/”> and add a . Before the forward slash.
<base href=”./”>
We do this because on your mobile device you will be serving the app from a file system as opposed to an existing domain.

Under mobile folder

1. Update the config.xml
2. Update the id to something unique EX. com.yourdomain.appname
3. Update the name of the app, description, email, and author details.

List all platforms that are installed and available to be installed

$ cordova platform ls

Add the platforms that your app will support

$ cordova platform add browser // add platform browser
$ cordova platform add android // add platform android
$ cordova platform add ios // add platform ios

If it’s the first time performing development in IOS add your apple user account and generate a team certificate.

Under the General settings for the project, set the Team to the certificate you just made.

Run your app

$ cordova run browser 
$ cordova run android
$ cordova run ios

As you can see getting up and running is most of the heavy lifting. Once you’re set up with the pre-requisites, building applications is pretty quick and straightforward.