My Cordova Environment

For this blog post, I will be covering the do’s and didn’t do’s for my Cordova Environment which was operating on a Ubuntu 16.01 on a virtual machine.

Minor Details:

Originally I had intended on using my windows laptop to build my app however from all the junk that had been downloaded, installed, accumulated over previous projects, I have decided to us a Virtual Machine running Ubuntu on it to use as my App development Environment, however, due to hardware issues (my computer being not simply powerful enough) I had to return to my old web developing friend my MacBook Pro. Thankfully it is powerful enough run a fast Ubuntu build. Moving on.

Apache Cordova is a Mobile Application Framework that allows software programmers to build mobile applications using a web stack (HTML5, CSS3, JS) instead of using platform-specific APIs for Android, IOS, or Windows which would be three or more different software. It reduces it to one framework that allows you to build apps towards the platform of choice with plugins eg. IOS or Android.

This creates a hybrid application that neither native mobile (due to rendering done via web views) nor is purely web-based (they are not viewed on a browser though packed as standard mobile apps via installing platform e.g. IOS App Store or Google Play Store).

Environment Build (WARNING!! This may get tedious and boring)

Just to warn anyone who is following this example of mine, I had originally started with 15Gb for my Ubuntu OS running on my virtual machine, now this was expanded first to 20Gb and then 100Gb. This was done by using the following command on the terminal (note: my operating system is OSx).  Also before typing the code below make sure to be in the directory of the file. If anyone is wondering what is using most of this disk space, it is the Android SDK. And for anyone who is curious, the total amount of disk space that was the Ubuntu environment used about 23GB.

 


               Mac Terminal: VBoxManage modifyhd “<vdi_file_full_path_and_name>” –resize 40000

A list of Things to Install:

  • NodeJS
  • NPM
  • GIT
  • Cordova
  • Java
  • JavaC
  • Ant
  • Android SDK Tools

NodeJS

Type the following in the Terminal:


               sudo apt-get install nodejs

To see if nodejs works type this into the terminal:


nodejs --version

If Nodejs is installed, the latest version should show up in the terminal.

Next, in order for Cordova to work, Nodejs needs to have an alias “node”.


               sudo ln -s /usr/bin/nodejs /usr/bin/node

 

NPM

Type this in the Terminal:


               sudo apt-get install npm

To see if NPM is installed:


               npm --version

GIT

To install GIT on Ubuntu type the following:


               Sudo apt-get install git

Bored yet? Don’t worry were almost done…


 

Cordova

Cordova yay! type this into the terminal:


               Sudo npm install -g cordova

And lastly to see if Cordova was installed properly do type the following in the terminal:


               cordova --version

Now Apache Cordova is fully installed however in order to start building apps another few pieces needs to be installed and set to PATH in order for the web stack to be converted into an App. and if you don’t believe me do type:


               cordova requirements

into your terminal. This should return a list with the following:

  • Java
  • Javac
  • Ant
  • Android SDK

So let’s keep at it.


 

Java

In order for the Android SDK to be installed, the Java Development Kit (JDK) needs to be installed.  To check if the JDK is already installed type the following into the terminal:


java -version

javac -version

If a version does pop up, that means Java is already installed, however, that Java is an OpenJDK rather than the Oracle JDK which is needed for signing Android apps.

The following steps show the process in installing the Oracle JDK.

First: We need to remove the OpenJDK by typing the following commands into the terminal:


sudo apt-get purge openjdk-\*

sudo apt-get autoremove

 

Next, we need to install a 32-bit library since were using a 64-bit Linux machine by typing the following:

Note some examples may say install the “ia32-libs” however that library isn’t available anymore, and running that command will direct you to lib32z1 unless it has been updated again.


               sudo apt-get lib32z1

 

Next the JDK “Java SE Development Kit” needs to be downloaded from the oracle website.

 

 

If using a 32 Bit system, make sure to download the Linux x86 and for 64 bit systems do make sure to download Linux x64. Also, make sure to download the “.tar.gz”.

Note: please do know whatEverYourFileNameIs.tar.gz will be replaced by whatever the real name of your downloaded file is.

 

 


mkdir -p ~/java 

cd ~/Downloads 

mv whatEverYourFileNameIs.tar.gz ~/java 

cd ~/java 

tar xvzf whatEverYourFileNameIs.tar.gz

rm whatEverYourFileNameIs.tar.gz

 

Now we must check the name of the JDK install directory with:


ls

 

The path to the JDK will be displayed in the terminal, and will look something like “~/java/jdk1.8.0_11”. Copy whatever directory the terminal has produced.

 

Now to add the JDK to bath we ned to edit the .bashrc in our home directory. To do this you can either use “nano” or “gedit”, I used gedit as I’m used to that method, however both work accordingly.

 


nano ~/.bashrc

or:

gedit ~/.bashrc

 

Add the following lines to the end of the code, which you might have copied in the last step.

 

 

 

 

 


JAVA_HOME=~/java/”FolderName”     PATH=$PATH:~/java/”FolderName”/bin 

               export JAVA_HOME

               export PATH

 

Now we must edit the .bash_profile in the terminal(make sure it’s in the home directory).

 

Simply type again I prefer the gedit.

 


nano ~/.bash_profile

or:

gedit ~/.bash_profile

 

 

Once gedit is opened paste the following in the file and save it.

 


               if [ -f ~/.bashrc ]; then   

                               source ~/.bashrc

               fi

 

now that should be everything. To see if its working type the following in the terminal


               javac -version 

               java -version

If version info has displayed you are done with the JDK install!

 

 

 

 

Ant

 

Apache Ant is a build system for Java, which is used by both Cordova and the Android SDK. Click here to get to the link and download the stable version. Be sure to downlaod the “apache-ant-whateverVersion-bin.zip” file


mkdir -p ~/ant 

cd ~/ant 

unzip apache-ant-1.9.4-bin.zip 

rm apache-ant-1.9.4-bin.zip 

 

now a familiar process will take place, we need to add Ant to PATH we do this again by editing the .bashrc file by first typing. Again I use the gedit method.

 


nano ~/.bash_profile

or:

gedit ~/.bash_profile

 

and just underneath your Java export and before “export PATH” and the bottom of the file add the following

 

</strong>

ANT_HOME=~/ant/apache-ant-1.9.4 PATH=$PATH:~/ant/apache-ant-1.9.4/bin

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; export ANT_HOME

<strong>

 

 

 

 

The code should look like this:

 


JAVA_HOME=~/java/jdk1.8.0_11 PATH=$PATH:~/java/jdk1.8.0_11/bin

export JAVA_HOME 

ANT_HOME=~/ant/apache-ant-1.9.4 

PATH=$PATH:~/ant/apache-ant-1.9.4/bin 

export ANT_HOME 

export PATH

 

Now to test to see if the install worked simply type in the terminal

 


ant –version

 

If a version number shows up, that shows Ant has been installed successfully.

 

 

 

Lastly the android SDK Tools

Android SDK Tools are used by Cordova to build Android apps.

 

First you need to download the SDK tools which will be located at the bottom of their downloads page. Downlaod the zip file.

Now follow the next set of steps:

 


mkdir –p ~/android-sdk

cd mv ~/Downloads/android-sdk_whatEverVersion-linux.zip

unzip android-sdk_r23.0.2-linux.zip

rm android-sdk_r23.0.2-linux.zip

 

now that the files are inplace we have to add this to PATH.

 

Add the following two lines to the .bashrc that can be accessed in the terminal by typing :


nano ~/.bash_profile

or:

gedit ~/.bash_profile

 

 

 

 

 

 

Again I like to use gedit, now add this code before the “export PATH” and after the export “ANT_HOME”.

 


PATH=$PATH:~/android-sdk-linux/platform-tools 

PATH=$PATH:~/android-sdk-linux/tools

 

Now your .bashrc should look a lot more like this.

 


JAVA_HOME=~/java/jdk1.8.0_11 PATH=$PATH:~/java/jdk1.8.0_11/bin 

export JAVA_HOME

ANT_HOME=~/ant/apache-ant-1.9.4 

PATH=$PATH:~/ant/apache-ant-1.9.4/bin 

export ANT_HOME 

PATH=$PATH:~/android-sdk-linux/platform-tools 

PATH=$PATH:~/android-sdk-linux/tools

export PATH

 

Note: the Android-SDK tools may not come with the platform-tools component, if the “Platform-tools” are not seen in your “Android-SDK” after you have unzipped the Android-SDK, the platform-tools component is available here. And to add the platform-tools component to path follow the steps above on how the Android SDK was installed.
Final Steps
Now that everything is almost fully installed we just need to use the Android-SDK-manager to download the necessary API in order to make Android apps build correctly. To open the Android-SDK-manager simply type the following into the terminal:


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Android

 

Now the software should pop up and give you a list of Android-API’s that is installed. As stated in the Apache Cordova website link, the version of Cordova you should have installed is 6. Version 6 requires API levels between 14 – 23. So it’s safe to select API 23 in the SDK-Manager, however for future references if something is not working correctly within your app build it maybe safe to assume that if you fall back on to a previous API build eg. API 14 – 22, it may fix the problem. Just to warn you the API’s were the everything that filled up my hard disk space within my virtual machine.

 

Now just to see if everything installed properly. Let’s open up the terminal and type:


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; adb version

 

Which will display the version of the Android debug bridge.

 

 

 

Now type in the terminal after everything has finally been installed and updated. Just to be sure the “PATH”ed files are working which should both display two directories.

 


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; echo $JAVA_HOME

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; echo $ANT_HOME

 

 

 

Updated 25/5/17

 

With the latest Cordova updated a few small changes have to be made

 

First, lets update Cordova


Sudo npm –g cordova

Ok

Next Gradle has to be installed separately.

Download the latest build here: https://gradle.org/releases

Download the zip file, and create a folder called “gradle” in “home” directory

Move the zip file into the gradle filder, and then unzip it, then remove it

Open up gedit ~/.bashrc and add a new file to %PATH by typing the following

 


GRADLE_HOME=~/gradle/gradle.ver

PATH=$PATH:~/gralde/gradle.ver/bin

EXPORT GRADL
<pre>
Advertisements