Part 3: How to setup an environment for Cordova

Complete Cordova App with Angular JS tutorial

In part 1 we setup Angular, build the views and route to navigate through pages with a menu.
In part 2 we continue with controllers and services to show data from a backend.

This part covers set up an environment to build the app.
Building an app for iOS, Android or Windows can be done with Cordova.
To use Cordova it needs to be installed with NodeJS.
Because Cordova uses Git, we need to install this too.

To build an app for Android the Android SDK is needed.
Cordova and the Android SDK need Java and Ant.
Ant can be installed with Homebrew.

For iOS only Xcode is needed. An iOS app can only be build on OS X system, so if you have a Windows computer, you can not build an app for iOS.
Let’s start installing…

Install NodeJS

To install Cordova, we need NodeJS. Download NodeJS install package from http://nodejs.org and run the installer.

After the NodeJS installation is complete, open a terminal on OS X or a command line on Windows and execute the following command:

If the installation was successful this command shows the version of NodeJS that is installed on your system.

Install Git

Git is a version control system that is used by Cordova. Download an installation package from https://git-scm.com/downloads and run the installer.

Install Cordova

With the Node Package Manager (NPM) we can install Cordova.

on OS X
To install Cordova globally with -g, sudo is required.

on Windows
To install Cordova globally use the -g.

If the installation was successful the next command should give the installed version of Cordova:

Install Java

The Android SDK needs Java to be installed. The minimal version of Java to be installed is 1.6. Check your version:

If no version or a lower version is installed, download and install the latest Java version

on OS X
Download and install from https://support.apple.com/downloads/java

on Windows
Download and install from https://www.oracle.com/technetwork/java/javase/downloads/
Find the installer file for your system. If you run a 32-bit Windows, download the Java SE JDK x86 installer. If you run a 64-bit Windows version, download the 64-bit installer and execute it.

Next update your PATH variable for JDK on Windows. Open the Control Panel, click System and Security, click System, click Change settings, which will open the System Properties window. Select the Advanced tab, then click the Environment Variables button.
In the User variables, choose PATH and click edit, or create a new one. At the end of the field Variable value add the next line (including the semicolon as first character):

Make sure the path is correct for your machine.
If all is set, click OK.
Then add a new variable, if not already exists, by clicking ‘new’. Enter ‘JAVA_HOME’ as the name and as value:

Then click OK.
Open a new command line and check if java is installed:

Install Ant on OS X

Install Homebrew to install Ant

Check the version of Hombrew with:

If Homebrew is installed, update to the latest version:

If Homebrew is not yet installed, download and install from http://brew.sh/.

Install Ant with Homebrew

Install Ant on Windows

Download Ant from http://ant.apache.org/bindownload.cgi.
Unpack the zip file where you want Ant to be installed. For example

The files of the zip should go directly to this folder.

Ant also needs to be added to the PATH variable.
Open the Control Panel, click System and Security, click System, click Change settings, which will open the System Properties window. Select the Advanced tab, then click the Environment Variables button.

In the User variables, choose PATH and click edit.
At the end of the field Variable value add the next line (including the semicolon as first character):

Make sure the path is correct for your machine. If all is set, click OK.

Then add a new variable, of not already exists, by clicking ‘new’. Enter ‘ANT_HOME’ as the name and as value:

Then click OK, and click OK again to close the Environment Variables window.

Check if installation was successful

Install the SDK to build an app for Android

on OS X

Download the Android Developer Tools (Eclipse ADT) from developer.android.com/sdk and unpack to a location of your choice. For example in

Add the path of the location to your .bash_profile in your home folder. Put the next command in a terminal to go to your home folder

Open this folder with

Search for the file called .bash_profile and open it in your favorite editor. If it does not exist, create a new file and add the following line

If the .bash_profile file already exists, open it and add the path where the ADT is unpacked to the PATH variable at the end of the file. Leave the existing lines as is. This is needed for Cordova to find the Android SDK

Now check if installation was successful, run the following in your terminal

Open the SDK manager with

To install the required Android versions for Cordova, leave all selected presets as is and, depending on the Cordova version you use and the Android versions your app should support, select the required Android versions to install.

on Windows

Goto developer.android.com/sdk and search for SDK tools package and download Android SDK for Windows (The complete studio is not needed, downloading only the installer_r24.4.1-windows.exe file will do). During installation copy the path where the SDK is installed, to add to your PATH variable.

Open the Control Panel, click System and Security, click System, click Change settings, which will open the System Properties window. Select the Advanced tab, then click the Environment Variables button.

In the User variables, choose PATH and click edit.
At the end of the field Variable value add the next line (including the semicolon as first character):

Make sure the paths are set correct (the code example is fictional).

Now check if installation was successful, run the following in a new command line window

Open the SDK manager with

To install the required Android versions for Cordova, leave all selected presets as is and, depending on the Cordova version you use and the Android versions your app should support, select the required Android versions to install.

Install the SDK to build an app for iOS

Building iOS apps on Windows is not supported by Windows.
On OS X, download Xcode from the iStore, install it.

Result, so far…

We have an Angular JS app, with a menu with which we can navigate (route) to 3 different pages.

We can get data with AJAX from a server backend and show this in a page.

And we now have an environment to build apps with Cordova

What’s left to do:

  • Build an Android and an iOS app with Cordova

« Part 2: How to use Angular controllers and services
Part 4: How to build an app with Cordova »

Tweet about this on TwitterShare on LinkedIn

Reacties

Het e-mailadres wordt niet gepubliceerd.

*