Getting Started With PhoneGap - Installation Process Using PhoneGap Archives

Hey in this article I will explain how to get started with PhoneGap. In my previous article, I explained what PhoneGap is, its advantages and disadvantages in brief. As I mentioned in my previous article, we can create cross-platform apps using PhoneGap. In this article I will explain the setup process to quickly get started with app development using PhoneGap.

For the app development, I am going to use Windows Phone 8 as my platform. The following is the procedure for PhoneGap setup.

• Basically there are 2 ways to install PhoneGap. One is by using the Command Line and the other one is by using the PhoneGap Archives. In this article, I will be performing the setup using the PhoneGap Archives.
   
• So for installing the archives, go to this link and download the latest archive. Currently the latest version is PhoneGap 2.9.0.
  
   
  
  
• Download this archive and extract the files to your desired directory/folder. Once the files are extracted, you will see 2 main folders, "doc" and "lib".
  
   
  
  
• But the real stuff is inside the "lib" folder. With PhoneGap v2.9.0 you should be able to see all these folders as shown in the image below. This basically represents the platforms it covers. "Android", "BlackBerry", "iOS", "osx", "Windows8", "Windows Phone 7" and "Windows Phone 8"
  
   
  
  
• Since I am going to develop a Windows Phone 8 app, hence the next step will be to install the Windows Phone 8 SDK, that basically installs the WP8 Emulator and a few important stuff. Please note that through PhoneGap, we can develop apps using HTML, CSS and JavaScript whereas through the WP 8 SDK, we get the Windows Phone environment and its templates. You can download the SDK from here or directly from here.
  
   
• Once you start the SDK installation, the process looks something like this:
  
  
  
  
• Since I am using Visual Studio 2012 as my development platform, I want a template as my starting point to develop "Windows Phone 8" (WP8) app. So for this purpose, we just need to go to the location where we extracted the PhoneGap 2.9.0 archive. Go exactly to this location "phonegap-2.9.0\lib\windows-phone-8".
  
  
  
  
• Now to get the templates, we simply need to run the "createTemplates" batch file. This will open a command prompt and will gradually create templates for WP7 and WP8 respective.
  
  
  
  
• The final output is basically the creation of our required templates. These templates are zipped.
  
   
  
  
• If the "Silverlight for Windows Phone" folder does not exist in the Project Template folder, then simply create a new one at "C:\Users\Username\Documents\Visual Studio 2012\Templates\ProjectTemplates" location. Note: we do not need to extract these zipped archives. Also note that the folder name that you created needs to be exactly the same case and spelling.
  
  
   
• If you look into the Zipped folder, it contains the basic template content as shown below in the image.
  
  
   
• We are done with the setup!!! Now if you open Visual Studio 2012, you should be able to see the "Cordova 2.9.0" template under the "Silverlight for Windows Phone" section, as shown in the image below.
  
  
  

Please note that the same process needs to be followed, if you are planning to develop a Windows Phone 7 app. Also note that the WP8 apps do not run under WP7 devices whereas WP7 apps do run on WP8 devices.

So in this article you basically learned about setting up PhoneGap in your machine and setting up the template in Visual Studio 2012 for the development process. In my next article, I will try to explain the basic structure of our PhoneGap template and we will try to develop a simple "Hello World" app for Windows Phone 8. Thank you!!!