Book Image

PhoneGap 3 Beginner's Guide

By : Giorgio Natili
Book Image

PhoneGap 3 Beginner's Guide

By: Giorgio Natili

Overview of this book

<p>You don’t have to know complex languages like Objective C to compete in the ever-growing mobile market place. The PhoneGap framework lets you use your web development skills to build HTML and JavaScript-based mobile applications with native wrappers that run on all the major mobile platforms, including Android, iOS, and Windows Phone 8.</p> <p>"PhoneGap 3 Beginner's Guide" will help you break into the world of mobile application development. You will learn how to set up and configure your mobile development environment, implement the most common features of modern mobile apps, and build rich, native-style applications. The examples in this book deal with real use case scenarios, which will help you develop your own apps, and then publish them on the most popular app stores.</p> <p>Dive deep into PhoneGap and refine your skills by learning how to build the main features of a real world app.</p> <p>"PhoneGap 3 Beginner's Guide" will guide you through the building blocks of a mobile application that lets users plan a trip and share their trip information. With the help of this app, you will learn how to work with key PhoneGap tools and APIs, extend the framework’s functionality with plug-ins, and integrate device features such as the camera, contacts, storage, and more. By the time you’re finished, you will have a solid understanding of the common challenges mobile app developers face, and you will know how to solve them.</p>
Table of Contents (22 chapters)
PhoneGap 3 Beginner's Guide
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action – setting up Android using PhoneGap 2.x


Get ready to set up the Android development environment and to create a PhoneGap app using Android as target platform. Follow these steps:

  1. Open the folder in which you unpacked the PhoneGap distribution, launch a command-line tool (Terminal on OS X or DOS Prompt on Windows) and change directories to the bin directory for Android:

    $ cd PHONEGAP_ROOT/lib/android/bin
    
  2. In order to run the Android SKD tools, you must add them to the path where the Android tools reside. Use the command-line tool and mount the path (the paths vary depending on the location of the Android SDK):

    $ export PATH=$PATH:~android-sdks/tools/$ export PATH=$PATH:~/android-sdks/platform-tools/
    
  3. In order to create a PhoneGap project, all you have to do is run the tool ./create from the bin directory of android:

    $ ./create ~/PhoneGapProjects/PGGettinStarted/ch01/android com.gnstudio.samples.cordova.hello HelloPG
    

    The tool actually needs three parameters: the path of the project files, the package of the project, and the name of the project. The tool creates an Android project including the folders and the files needed to debug, emulate, and build the PhoneGap app:

       |-assets
       |---www
       |-bin
       |---res
       |-cordova
       |-gen
       |-libs
       |-res
       |-src
  4. The root folder contains the AndroidManifest.xml file; it's important that the package name and the activity name defined in the files match the arguments used when launching the ./create command:

    <manifest xmlns:android="http: //schemas.android.com/apk/res/android" android:windowSoftInputMode="adjustPan"    package="com.gnstudio.samples.cordova.hello" android:versionName="1.1" android:versionCode="5">
    <activity android:name="HelloPG" android:label="@string/app_name"                   android:configChanges="orientation|keyboardHidden">

    Note

    The AndroidManifest.xml file windowSoftInputMode attribute value is adjustPan because the default behavior of Android is to resize the web view when the soft keyboard is displayed.

  5. In the www folder you'll find the HTML/JS/CSS files needed to run the sample PhoneGap app bundled with the binary of the distribution. In order to run the application on the emulator, it's enough to run the app. Open a command-line tool and point to the cordova folder, define the path to the Android SDK tools, and launch the ./emulate command-line tool:

    $ cd ~/the/path/to/your/source/code/ch01/android/cordova$ export PATH=$PATH:~/android-sdks/tools/$ export PATH=$PATH:~/android-sdks/platform-tools/
    $ ./emulate
    

The tool will check whether some virtual devices are already defined and prompt the user to define one if not. If there is more than one device already defined the tool will ask which one to use. When the selected device is loaded into the emulator you can debug the application; when launching the ./debug tool the app is installed and can be launched from the control panel of the emulator.

What just happened?

You created a PhoneGap project and emulated the HelloPG app in one of the testing devices configured within your Android SDK.

Tip

In order to correctly emulate the app on Windows you have to install the latest Android JDK, the Apache Ant binary, and the Android SDK. After all of those are installed add the path C:\Program Files\Java\jdk1.7.0_09\bin;C:\Users\YOUR_USER\Documents\apache-ant-1.8.4\bin;C:\Program Files (x86)\Android\android-sdk\tools to your path system variable. You can access the path system variable by navigating to Control Panel | System | Advanced System Settings | Advanced | Environment Variables | System Variables.