Download Mastering PhoneGap Mobile Application Development - Sample Chapter PDF

TitleMastering PhoneGap Mobile Application Development - Sample Chapter
File Size7.8 MB
Total Pages46
Document Text Contents
Page 1


C o m m u n i t y E x p e r i e n c e D i s t i l l e d

Take your PhoneGap experience to the next level and create
engaging real-world applications

Mastering PhoneGap Mobile
Application DevelopmentKerri S


Mastering PhoneGap Mobile
Application Development

This book will guide you through the process of creating
a complex data-driven hybrid mobile application using
PhoneGap, web technologies, and third-party plugins.

You will fi rst learn how to create a useful workfl ow to
make development easier. From there, the next version
of JavaScript (ES6) and the CSS pre-processor SASS
are introduced to simplify creating the look of the mobile
application. Responsive design techniques are also
covered, including the fl exbox layout module. As many
apps are data-driven, you'll build an application that
relies upon IndexedDB and SQLite. You'll also
learn how to transfer fi les to and from external
servers. When the app is complete, the book will
guide you through the steps necessary to submit your app
to the Google Play and Apple iTunes stores.

Who this book is written for
If you have created simple applications using
PhoneGap in the past and now want to take your
workfl ow and apps to the next level, this book will help
you reach your goals. You should have a good working
knowledge of HTML, CSS, and JavaScript, and prior
experience with PhoneGap.

$ 49.99 US
£ 31.99 UK

Prices do not include
local sales tax or VAT
where applicable

Kerri Shotts

What you will learn from this book

Construct build workfl ows that simplify
complex application development

Integrate the next version of JavaScript to
simplify your code

Create accessible hybrid applications

Get to grips with various responsive
design techniques

Build an application that relies upon
IndexedDB and SQLite

Persist and query data using third-party
database plugins

Learn how to transfer fi les to and from
external servers

Create icons and splash screens suitable for
submission to app stores

Publish your app to the Google Play and Apple
iTunes stores

astering P

ap M


pplication D


community experience dist i l led

Visit for books, eBooks,
code, downloads, and PacktLib.

Free Sam

Page 2

In this package, you will find:
 The author biography

 A preview chapter from the book, Chapter 1 'Task Automation'

 More information on Mastering PhoneGap Mobile Application Development

Page 23

Chapter 1

[ 17 ]

Finally, we need to create the actual gulpfile.js fi le that kicks everything off. It
doesn't do much on its own; instead it loads everything else in and confi gures any
available tasks with Gulp:

require ("babel/register"); // [1]
var gulp = require("gulp"),
tasks = require("./gulp/tasks"); // [2]
Object.keys(tasks).forEach(function(taskName) { // [3]
var taskOpts = tasks[taskName];
if (typeof taskOpts === "function") {
gulp.task(taskName, taskOpts); // [4]
} else {
gulp.task(taskName, taskOpts.deps, taskOpts.task); // [5]

The fi rst line ([1]) imports Babel so that we can use ES2015 code in our tasks should
we choose to. The third line ([2]) imports all the tasks that are available. Right now
this will be an empty object, but as we add tasks, it will contain more and more
functions that Gulp can use to copy and transform fi les.

The code starting at [3] just takes all the available tasks and creates a corresponding
Gulp task. Each task can either be a function, or it can be an object that specifi es
dependencies (and more), hence the two different method invocations at [4] and [5].

Copying assets
Now that we've created the basic Gulp confi guration structure, let's create our fi rst
task to copy our app's assets from the source path to the destination path.

We can call this fi le gulp/tasks/copy-assets.js, and it should look like this:

var merge = require("merge-stream"),
gulp = require("gulp"),
config = require("../config"),
paths = require("../utils/paths");

function copyAssets() {
return merge.apply(merge,
var fqSourcePath = paths.makeFullPath(asset.src, paths.SRC);
var fqTargetPath = paths.makeFullPath(asset.dest, paths.DEST);
return gulp.src([fqSourcePath])

Page 24

Task Automation

[ 18 ]


module.exports = {
task: copyAssets

The method, copyAssets simply copies a lot of fi les based upon the project's fi le
structure as specifi ed in gulp/config.js. The code here could be simpler, but you
may fi nd that you need to change which fi les need and don't need substitutions
later. So, we've made it confi gurable. All you need to do is to change the fi les and
destinations within config.assets.copy in gulp/config.js and this task will
react accordingly.

Let's go over what this task is really doing:

• We're using our utility method paths.makeFullPath (which uses path.
join) to ensure that our configuration works across multiple platforms. On
Unix-like systems, the path separator is /; but on Windows systems, the
path separator is actually \. In order to simplify the configuration, however,
we're using / in config.assets.copy. makeFullPathsplits (/)each one of
the strings into arrays, and uses path.join (which knows the correct path
separator) to create the final path.

• map iterates over an array and returns a new array using a given
transformation. For example, [1, 2, 3].map(function(x) {return
x*2;}) will return a new array of [2, 4, 6]. In our case, we're returning an
array of gulp.src(…).pipe(gulp.dest(…)) chains. We can then apply the
array to merge in order to combine all the tasks together.

• apply is a way to call a function that accepts multiple arguments using an
array instead. For example, console.log.apply(console,[1,2,3]) will
log 1 2 3. This is different from console.log([1,2,3]) which instead will
log [1, 2, 3].

At this point, you can type the following on the command line and copy the project
assets from their source location to their destination:

$ gulp copy-assets

Performing substitutions
Many times, we need to convert certain keywords in a Gulp stream into some
other values. A simple example is to transform {{{VERSION}}} your app's version
number—for example, into 1.23.4456. Doing this is pretty simple, but it opens up a
large number of possibilities.

Page 45

Chapter 1

[ 39 ]

In this chapter, you've learned why a task runner is useful and how to install Gulp
and create several tasks of varying complexity to automate the building process of
your project and other useful tasks. We're not yet done with Gulp, though. In the
next chapter, we'll talk about modularization using Browserify and how to integrate
it within our build tasks.

Page 46

Where to buy this book
You can buy Mastering PhoneGap Mobile Application Development from the

Packt Publishing website.

Alternatively, you can buy the book from Amazon,, Computer Manuals and most internet

book retailers.

Click here for ordering and shipping details.

Stay Connected:

Get more information Mastering PhoneGap Mobile Application Development

Similer Documents