Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • PhoneGap By Example
  • Toc
  • feedback
PhoneGap By Example

PhoneGap By Example

By : Andrew Kovalenko
close
PhoneGap By Example

PhoneGap By Example

By: Andrew Kovalenko

Overview of this book

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. It is one of the first and fastest spreading tools to develop hybrid applications using CSS, JavaScript, and HTML, without losing the advantages of native applications. If you are already a web developer, this book will provide you with the skills you need to create, customize, test, and deploy hybrid mobile applications. Starting from the beginning, this book will cover how to set up your PhoneGap development environment, add mobile web frameworks and plugins, design and customize the application layout, and utilize the embedded features of the PhoneGap framework. By working through the steps in each chapter, you will quickly master a variety of mobile applications with totally different approaches. You will then learn how to develop a PhoneGap plugin with native interfaces for iOS and Android, as well as common approaches to test PhoneGap applications. With ample screenshots that show you how to build a phenomenal application, PhoneGap by Example will ensure your success with this cutting-edge mobile development framework for hybrid applications.
Table of Contents (12 chapters)
close
11
Index

Creating an application

Now, let's create our first application. Let's name it Travelly. It will be just a PhoneGap application scaffolding, and we will continue to develop it in the next chapter. So, to create an application, let's run the following command:

$ cordova create travelly com.cybind.travelly Travelly

We need to wait until this command is executed. The Cordova CLI refers to the external storage to extract all the files needed for the project:

  • The first argument, travelly, is the folder where our project was generated.
  • The second argument, com.cybind.travelly, provides our project with a reverse domain-style identifier. It is an optional argument, if we omit the third argument as well. We can edit this value later in config.xml. However, let's make it right from the beginning so that it is properly configured in the generated code as well. If we do not specify the identifier, it will be defaulted to io.cordova.hellocordova, which we do not want.
  • The third argument, Travelly, provides the application's display title. It is an optional parameter, and the default value is HelloCordova.

Once the command execution is completed, a folder will appear with the following content:

$ ls
config.xml  hooks/     platforms/  plugins/    www/

Where:

  • config.xml: This is the configuration file that contains important metadata needed to generate and distribute the application.
  • hooks/: This is the folder for hooks and pieces of code that Cordova CLI executes at certain points in our Cordova application build.
  • platforms/: This directory is for native code for each of the supported platforms. By default, this is empty, and we need to add the required platforms, which we will see later.
  • plugins/: In this directory, we will place the plugins that provide extra support to the interface with each of the native platforms.
  • www/: This directory houses our application's home page, along with various resources under css, js, and img, which follow common web development file-naming conventions. This gets copied into each of the platform-specific projects in platforms' folder whenever a build is performed. So, this is where our core development will happen and all our cross-platform code will live in.

You can see that all these folders are empty or contain just a basic set of files. The config.xml file contains minimum information. The folder will get full, and config.xml will grow as we continue our development. So, get ready.

bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete