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.
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:
- Android SDK Tools
Type the following in the Terminal:
sudo apt-get install nodejs
To see if nodejs works type this into the terminal:
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
Type this in the Terminal:
sudo apt-get install npm
To see if NPM is installed:
To install GIT on Ubuntu type the following:
Sudo apt-get install git
Bored yet? Don’t worry were almost done…
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:
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:
into your terminal. This should return a list with the following:
- Android SDK
So let’s keep at it.
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
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:
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!
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 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
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”.
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.
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:
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:
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.
echo $JAVA_HOME echo $ANT_HOME
With the latest Cordova updated a few small changes have to be made
First, lets update Cordova
Sudo npm –g cordova
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>