Responsive Web Design - Jump Start

Android Development

Philippine IT careers and Trends

Philippine IT Careers and Trends from John Mark ジョンマーク

Installing PhoneGap/Cordova from Scratch

If you're going to develop mobile apps using web technologies such as HTML, CSS and Javascript. Then this is the right place for you to begin with.

Easy tiger! for some good reason I feel you are in hurry to start things recklessly (e.g. you're gonna Google it find phonegap.com and then read all tutorials, hey Sherlock I just told you, you are already in the right place), but you gotta know what you need to know first.

OK, what is phonegap and cordova? both are tools with the same framework that will allow you to use web technologies in developing platform independent mobile apps, when i say platform independent it means you don't have to worry about the Operating System; iOS, android, windows 8 etc. The term Phonegap and Cordova are used interchangeably and there's a confusion between them that I will totally wreck right now (yeah the accent, I know!). Despite of so many complex explanation out there here’s my enlightening idea about it; “Phonegap is also Cordova with additional features from Adobe”. I don’t think I should explain more on this since it won’t matter anymore once we start installing Phonegap using nodes (that I’ll explain later).

Phonegap has richer features so I’m going to discuss Phonegap in this blog;

Requirements:
I assume you have nothing installed on your computer related to web development you must also know how to use cmd prompt

Here's the Steps

1ST MAJOR STEP: Installing a globalize JDK (refere to the corresponding images while following the steps)

1. Install the latest JDK from Java JDK
2. The file jdk-7<version>-windows-i586-i.exe is the JDK installer for 32-bit systems. The file jdk-7<version>-windows-x64.exe is the JDK installer for 64-bit systems. If you downloaded either file instead of running it directly from the web site, double-click the installer's icon. Then, follow the instructions the installer provides. The installer may ask you to reboot your computer. When finished with the installation, you can delete the downloaded file to recover disk space.
3. Set the PATH variable permanently, add the full path of the jdk1.7.0\bin directory to the PATH variable. Typically, this full path looks something like C:\Program Files\Java\jdk1.7.0\bin. Set the PATH variable as follows on Microsoft Windows (take note that there are minor difference of steps if you are using windows 8, now if you're using windows XP, wait, what!?):
   

   

1. Click Start, then Control Panel, then System.Click Advanced, then Environment Variables.
2. From the Desktop, right-click My Computer and click Properties.
3. Click Advanced System Settings link in the left column.
4. In the System Properties window click the Environment Variables button.
5. Select the Path variable from the System variables section.
6. Select the Edit button.
7. Add the location of the bin folder of the JDK installation for the Path variable 
8. in System Variables. The following is a typical (depending on your jdk version) value for the Path variable:C:\Program Files\Java\jdk1.7.0\bin;C:\WINDOWS\system32;C:\WINDOWS;


• NOTE: we are refering to "Path" in the System Variables not "PATH" in the User Variables
• NOTE: It is very important that you must insert "C:\Program Files\Java\jdk1.7.0\bin" in the beginning (pinaka umpisang umpisa) of the variable value then terminate it with ";" otherwise it will affect your compilation of phonegap apps and will lead to java not being found refer to this image below
  
9. Click OK, OK and OK

2ND MAJOR STEP: installing globalize SDK

1. Download the SDK ADT bundle from SDK ADT Bundle
   
   
   
   
   
   
2. Choose between 32 bit or 64 bit leave check "I have read.."
   
3. Unpack upack the ZIP file (named adt-bundle-<your_platform>.zip) and save it to an appropriate location, such as a "Development" directory in your home directory.
4. Open the unpacked directory and you should see the contents, something like this;
   
5. Now, open the SDK folder inside the unpacked zip adt bundle and check if the folders "tools" and "platform-tools" are there.
6. Copy and take note of their directory path, put it in a notepad or where ever you want to insert
   it, for example I will insert the following directory path in a notepad
• D:/directory_of_your_unpacked_zip/adt-bundle-<your_platform>/sdk/tools
• D:/directory_of_your_unpacked_zip/adt-bundle<your_platform>/sdk/platform-tools
7. Let's add some changes to your system variables again
   
   
1. From the Desktop, right-click My Computer and click Properties.
2. Click Advanced System Settings link in the left column.
3. In the System Properties window click the Environment Variables button.
4. Select the Path variable from the System variables section.
5. Select the Edit button.
6. You need to add the path to your Android SDK platform-tools and tools directory. In my example I will use the two directories in step 5 as the directory the SDK is installed in. Append the following text into the text box labeled "Variable value"
• note: in appending variable value ";" sign indicates a terminator of a value therefore put ";" sign then paste your directory path at the end
7. Click OK, OK and OK

3RD MAJOR STEP: Installing a globalized Apache Ant (/bin)

1. Download Apache ant zip archive binary distribution from Apache-Ant.zip or from Apache Ant
2. Extract the file
3. Put it in a directory
4. Copy the bin directory path, w/c looks like C:/apache-ant-1.9.3/bin
5. Just like the other 2 major steps in this tutorial add its directory in the System Variables, this time it's Ok where ever you want to insert it, just make sure it's terminated by ";" sign if it's not in the end of the Variable Value.
   

4TH MAJOR STEP

1. Install node.js from node.js
2. Choose if you want 32 or 64 bit windows installer msi (if you're using windows)
3. Double Click the installer and just install following your IT instinct
4. Open cmd and type npm something must happen when you do it refer to the image below
   

FINALLY YOU ARE READY TO INSTALL PHONEGAP! YIPPEEE Clap! Clap!

1. Warning: You must have an internet connection!
2. open cmd prompt and type npm install -g phonegap (no need to worry about directories just type it!)
• Note: -g means 'global' meaning it will install phonegap as a global variable so you can call "phonegap" command anytime anywhere in your cmd prompt
3. You will see IP adresess during installation this is an indication that phonegap is installing properly
4. When done, type phonegap in your cmd prompt and you should see something like below
   
5. If you have plans on exploring how to use it (since you installed it!) understand how CLI works here's the link CLI for Phonegap