PhoneGap 3 CLI Setup on Mac & Windows

Tweet about this on TwitterShare on LinkedIn2Share on Google+3Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

PhoneGap 3 CLI Setup on Mac & Windows

In this post, I will help you set up PhoneGap Command Line Interface on Mac as well as Windows. I will try my very best to cover all the aspects. If you are facing any issues while setting up, do drop a comment & I can take a look at the issue.

Contents

PhoneGap + Cordova

PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari. (Browser geeks, please allow me the affordance of this analogy and I’ll buy you a beer later.)


More here..

Mac Setup

Step 1:Install Nodejs. You can find a tutorial here on how to setup Node. We will leverage Node Package Manager to setup Cordova & PhoneGap
Step 2: Install PhoneGap – Run sudo npm install -g phonegap
Step 3: Install Cordova Command Line tools – Run sudo npm install -g cordova
Step 4: Install HomeBrew. We will use HomeBrew to setup Ant on our system. If you don’t have HomeBrew, run ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" at your terminal.
Step 5: Install Apache-Ant. Run brew update & then install ant brew install ant
Step 6: For iOS development, Run to the App Store & Download the latest version of XCode. After the installation is completed, launch the application & accept the license, terms.
Step 7: For Android development, Navigate here & download the ADT bundle for MAC. After the download is completed, unzip the file. Navigate inside the eclipse folder and run Eclipse.app. Once eclipse loads up, You will see a menu bar on the top left hand corner Screen Shot 2014-03-01 at 10.36.17 AM
Click on the 3rd icon from right (in the above image). This will launch the Android SDK Manager. You can select the targeted Android version from the list.
Screen Shot 2014-03-01 at 10.41.33 AM
Step 8: Configure Android SDK. We need to hook up the SDK path.

  • In your terminal, Run cd ~
  • Remember where you have downloaded the ADT Eclipse? We need to head back to the unzipped folder & then into SDK & then into tools folder. Right click & click Get Info.. You should see a path.
  • Copy the path and update this line export PATH=<<path to tools>>:<<path to sdk>>:$PATH. On my mac, this is how it will look export PATH=/Users/me/Development/adt-bundle-mac-x86_64-20130917/sdk/tools:/Users/me/Development/adt-bundle-mac-x86_64-20130917/sdk:$PATH
  • Next, lets edit the .bash_profile & add the SDK instance open -e .bash_profile & add the above line to the top of the file. Save and close .bash_profile

Validation Mac setup

iOS setup

Step 1: Create a new folder and name myApp.
Step 2: Open terminal here & Run phonegap create myFirstApp. This will setup the required files for a startup project.
Step 3: cd myFirstApp
Step 4: Then lets add a iOS platform instance. Run cordova platform add ios
Step 5: Build the iOS project. Run cordova build ios After a stream of messages, you should see something like this

** BUILD SUCCEEDED **

If you see any other message than above, please recheck your setup. If the error still persists drop a comment.
Step 6: Navigate to myFirstApp/platforms/ios. You will see a myFirstApp.xcodeproj. Double click it to launch the project in Xcode.
Step 7: Once the project is loaded, lets Build the project. From the top Menu, Product > Build for > Testing. You should a Build Succeeded message.
Step 8: Click on the Play button on the top left hand of the screen. Wait for a few moments for the iOS simulator to launch & you should see a Device Ready message like this
Screen Shot 2014-03-01 at 11.42.27 AM

Android Setup

Step 1: Follow Steps 1, 2 & 3 from above.
Step 2: Run cordova platform add android to add Android dev platform to our app. You should not see any errors. If you see any, please check the setup again & if issue still persists, drop a comment.
Step 3: Build the Android project. Run cordova build android After a stream of messages, you should see something like this

BUILD SUCCESSFUL

Step 4: Open Eclipse ADT. Click on File > Import. Then select “Existing Android Project”

Screen Shot 2014-03-01 at 11.51.33 AM

Click next, Browse to the location where you created myApp folder. Then Navigate to myFirstApp/platforms/android, Then click Ok. You should see 2 projects listed

Screen Shot 2014-03-01 at 11.56.24 AM

Click finish. If you have all the required SDK’s set up your app should load up happily!

Step 5: Setup a emulator. On the top left hand site, you will see a menu bar like

Screen Shot 2014-03-01 at 10.36.17 AM

Click on the 2nd icon from right (in the above image) & you should see a window like

Screen Shot 2014-03-01 at 11.59.29 AM

Click on New & fill up the form like this

Screen Shot 2014-03-01 at 12.13.50 PM

Now, click OK. This will take a couple of mins and setup your AVD (Android Virtual Device).

Step 6: Clean and rebuild the project, by navigating to Menu > Project > Clean > (select myFirstApp) click Ok

Step 7: Close the AVD manager window (Now you should see the newly created AVD here) & then Right Click on myFirstApp & Run as > Android Application. This will take up to 10 mins depending on the config of your system for the AVD to load up.

Step 8: Your AVD should launch the app automatically & should look something like

Screen Shot 2014-03-01 at 12.18.10 PMThis completes our validation on Mac!

Windows Setup

Step 1: Download git from here. We will use Git to run our NPM commands. Its more of a preference and is very helpful if you are planning to use a GitHub repo. You can run these commands via Command Prompt too. Click here to know more about Git.
Step 2: Install Nodejs. You can find a tutorial here on how to setup Node. We will leverage Node Package Manager to setup Cordova & PhoneGap
Step 3: Install PhoneGap – Run npm install -g phonegap in either Git Bash or command prompt.
Step 4: Install Cordova Command Line tools – Run npm install -g cordova in either Git Bash or command prompt.
Step 5: Install Apache-Ant. Navigate here & download the binaries zip file under Current releases of Ant section. Or click here  to download the zip (Ant 1.9.3) file. Save the file to your favorite location & unzip it. We will use these files in a moment  .
Step 6: Navigate here & download the Eclipse ADT. Unzip it & open the unzipped folder.
Step 7: You should see a SDK Manager.exe inside. Run the file. Here Install all the required tools & SDK.
Screen Shot 2014-03-01 at 10.41.33 AM
Step 8:After the SDKs are installed, navigate to sdk/tools/ant folder. Copy the contents of Ant folder we have unzipped earlier
ant-folder-contents
to sdk/tools/ant folder.
Step 9: We need to setup the path for the following components

  • Java home : If don’t know where Java is installed on your machine, open command prompt & run where java. This will spit out a path like C:\Program Files\Java\jdk1.7.0_25\bin\java.exe. We will use this path till jdk1.7.0_25.
  • Android Platform Tools : Android ADT downloaded & Unzipped folder\sdk\platform-tools
  • Android Tools : Android ADT downloaded & Unzipped folder\sdk\tools
  • Ant : Android ADT downloaded & Unzipped folder\sdk\tools\ant\bin

Step 10: Lets add these to our environment variables. Open windows prompt & run the following

  • Set JAVA_HOME path:  setx JAVA_HOME "C:\Program Files\Java\jdk1.7.0_25"
  • Set Android tools & Ant path. We will concatenate all of them in one line, like this
    ;c:\Development\ADT\sdk\platform-tools;c:\Development\ADT\sdk\tools;c:\Development\ADT\sdk\tools\ant\bin
  • Then our set path command will become like this
    setx PATH "%PATH%;c:\Development\ADT\sdk\platform-tools;c:\Development\ADT\sdk\tools;c:\Development\ADT\sdk\tools\ant\bin"

If you see a WARNING: The data being saved is truncated to 1024 characters.,  we need to follow approach B.

Right click on my computer > Properties. On Windows 7, click on Advanced System Settings on the left hand panel. Then click on Advanced tab on the popup that appears. Click on the Environment Variables button & you should see the JAVA_HOME path set in the User variables section. (If that variable is missing, click on New & add Name as JAVA_HOME and path as we did above.).

Double click on the PATH

envi-1And then APPEND the path we have built above. Append, not replace! Click Ok to close all the popups. Now fire up a new command prompt, and run  echo %PATH% if you don’t see the added path in the response, restart your PC (yes, a very microsofty solution).

Step 11: Open a new prompt & run echo %JAVA_HOME%  this should show up the Java home path & echo %PATH%  this should show up the appended SDK tools & ANT path.

Validate Windows Setup

Android setup

Step 1: Create a new folder and name myApp.
Step 2: Open prompt here & Run phonegap create myFirstApp  This will setup the required files for a startup project.
Step 3cd myFirstApp
Step 4: Then lets add an Android platform instance. Run  cordova platform add android
Step 5: Build the Android project. Run cordova build android . After a stream of messages, you should see something like this
** BUILD SUCCESSFUL **
If you see any other message than above, please recheck your setup. If the error still persists drop a comment.
Step 6: Open Eclipse ADT. Click on File > Import. Then select “Existing Android Project”

eclipse-import

Click next, Browse to the location where you created myApp folder. Then Navigate to myFirstApp/platforms/android, Then click Ok. You should see 2 projects listed

eclipse-import-2

Click finish. If you have all the required SDK’s set up your app should load up happily!

Step 7: Setup a emulator. On the top left hand site, you will see a menu bar like

Screen Shot 2014-03-01 at 10.36.17 AM

Click on the 2nd icon from right (in the above image) & you should see a window like

AVD

Click on New & fill up the form like this

AVD-2

Now, click OK. This will take a couple of mins and setup your AVD (Android Virtual Device).

Step 8: Clean and rebuild the project, by navigating to Menu > Project > Clean > (select myFirstApp) click Ok

Step 9: Close the AVD manager window (Now you should see the newly created AVD here) & then Right Click on myFirstApp & Run as > Android Application. This will take up to 10 mins depending on the config of your system for the AVD to load up.
Your AVD should launch the app automatically & should look something like

avd-helloworld

This completes our validation on Windows!

Important Changes

If you have worked with any of the earlier versions of PhoneGap, the Architecture for PhoneGap 3.x will be quite different to you. Some of the changes I found are

  • PhoneGap installation happens via a Node Package Manager
  • The new plugin architecture will not include any default APIs like Camera or Contacts

    cordova_plugin_diagram source

  • You can use PlugMan – A Plugin Manager to add new Plugins
  • Support for new Platforms has been added
  • Two new API’s added InAppBrowser (formerly known as the ChildBrowser plugin) and Globalization API.

There are Platform specific development folders, which we created using Cordova. When I first started developing an App with this new architecture, I did not understand what was going on. This is what I figured out

  • All development SHOULD happen in the www folder inside the root folder
  • The config.xml SHOULD be inside the www folder at the same level as index.html
  • You need not include phonegap.js or cordova.js. When PhoneGap build runs, it will take care of these files.
  • The same goes for Plugin related JS files. PG Build will add them for you
  • None of the folders apart from www are needed for PG Build to work
  • Unless, you have built an App for Android platform only and want to deploy these changes. You will run an Android Build & navigate to the bin folder & pick the apk file.
  • The above step is for platform dependent development.

Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn2Share on Google+3Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page