Book Image

PhoneGap 3.x Mobile Application Development HOTSHOT

By : Kerri Shotts
Book Image

PhoneGap 3.x Mobile Application Development HOTSHOT

By: Kerri Shotts

Overview of this book

<p>PhoneGap allows you to use your existing knowledge of HTML, CSS, and JavaScript to create useful and exciting mobile applications.<br /><br />This book will present you with 12 exciting projects that will introduce you to the dynamic world of app development in PhoneGap. Starting with their design and following through to their completion, you will develop real-world mobile applications. Each app uses a combination of core PhoneGap technologies, plugins, and various frameworks covering the necessary concepts you can use to create many more great apps for mobile devices.</p>
Table of Contents (21 chapters)
PhoneGap 3.x Mobile Application Development HOTSHOT
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating your first project


A project contains your code, other platform-specific code, and other assets required to generate an app ready for you to run on a simulator or device. All of this information is stored within a project directory. When you create a project, the command-line interface generates this directory structure for you and generates a basic app, which allows you to verify that you can get a Hello World style app built.

Getting ready

It is important to note that the installation process requires that your computer be connected to the Internet as the project creation step may need to download information.

Getting on with it

Creating a project is really simple regardless of which command-line interface is being used. Let's create a project first with the Cordova command line.

Creating a project with the Cordova CLI

First, open your terminal or command prompt and navigate to wherever you want to store your project.

Tip

I highly suggest that you create your projects in a directory where there are no spaces in the path. For example, storing all your projects in /users/yourname/my projects/ would be a bad idea since the CLIs tend to have problems handling paths with spaces in them.

Then, type the following command:

cordova create ./HelloWorld com.phonegaphotshot.helloworld HelloWorld

The first parameter indicates to Cordova that it should create a project in specific directory specified by the second parameter. The third parameter is the project's ID ; these should always be unique and specified in reverse domain name order. The final parameter is the name of the project.

This command may take a few seconds to complete if anything needs to be downloaded, but when done, you should see something like this:

Creating a new cordova project with name "HelloWorld" and id "com.phonegaphotshot.helloworld" at location "/Users/You/HelloWorld".

Once done, though, you should have a new project in the HelloWorld directory and you should have several new folders and files in that directory. While each is important, we will only really focus on the merges and www directories in this book.

Creating a project with the PhoneGap CLI

To create a project with the PhoneGap CLI, open your command prompt or terminal, navigate to the location you want your project to be stored, and type this:

phonegap create ./PGHelloWorld com.phonegaphotshot.pghelloworld PGHelloWorld

As with the Cordova CLI, the first parameter indicates that a project should be created in a directory specified by the second parameter. The third parameter is the project ID, which must be unique and should be specified in reverse domain-name order. The final parameter is the name of the project.

Tip

I highly suggest that you create your projects in a directory where there are no spaces in the path. For example, storing all your projects in /users/yourname/my projects/ would be a bad idea since the CLIs tend to have problems handling paths with spaces in them.

The PhoneGap CLI is a little more verbose than the Cordova CLI, and so you should see output similar to the following:

[phonegap] missing library phonegap/www/3.1.0
[phonegap] downloading https://github.com/phonegap/phonegap-app-hello-world/archive/3.1.0.tar.gz...
[phonegap] created project at /Users/You/…/PGHelloWorld

If you compare the two structures, you'll find that they are very similar. Because they share the same structure, it's fully possible to use the Cordova CLI within this book's project.

What did we do?

In this step, we created two projects, one using the Cordova CLI and the other using the PhoneGap CLI. We compared the structures created by both and found them similar.

What else do I need to know?

It's possible that at some point the PhoneGap distribution will deploy different sample code than the Cordova distribution. As such, the structures under the www folder may not always be identical.