Learning Path: Build PhoneGap Apps with JavaScript & jQuery
3.7 (11 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
64 students enrolled

Learning Path: Build PhoneGap Apps with JavaScript & jQuery

Develop cross-platform PhoneGap apps with JavaScript and jQuery
3.7 (11 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
64 students enrolled
Created by Packt Publishing
Last updated 5/2017
English [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn the basic syntax of JavaScript and how to declare variables and create functions.
  • Learn to write loops in JavaScript functions.
  • Unleash the power of jQuery in your applications.
  • Explore Document Object Model and how to manipulate it with JavaScript and jQuery.
  • Work on setting up the PhoneGap environment for building hybrid applications.
  • Create a simple but useful productivity app.
  • Interfacing with native device features, including the camera, microphone, file system, and more.
  • Learn how to interact with the database using PhoneGap.
  • Learn to secure mobile applications.
Course content
Expand all 64 lectures 08:42:28
+ Beginning JavaScript and jQuery
21 lectures 02:54:44

This video will give an overview of entire course.

Preview 05:32

How do we get started with JavaScript?

Introduction to JavaScript

What is the syntax of the JavaScript language?

Basic JavaScript Syntax

You need to store the data in the script and use it at various points.


So far, you have learned how to store data to use again, but what about a series of statements that we may use over and over again?


How can I make certain parts of my code execute a given number of times?

Preview 05:36

Is there an alternative to the for loop?

While and Do While Loops

There could be times when you need to execute your code only if certain conditions are true.

if Statement

After seeing how the if statement, there could be a requirement where you need to check multiple conditions and each condition has its own code execution.

Switch Statement

The Document Object Model DOM is a critical component of the JavaScript language. You need to learn what it is before you can use it.

Preview 07:46

The DOM seems so daunting; how can we get the pieces we need to use?

Accessing the DOM

Being able to select nodes is fun but not very productive on its own. You need to learn how to make changes to the DOM after you select the element.

Manipulating the DOM

What is jQuery and how can it be used in the place of traditional JavaScript?

Preview 06:55

jQuery can be used from the local file system or via a Content Delivery Network CDN. What is the difference between the two, and which is better?

Using jQuery: Local Versus CDN

We have been talking about jQuery and the power behind it, but we have not seen it in action yet.

Basic jQuery Example

We know how to access the different elements of the DOM with JavaScript, but it seems clunky. Can jQuery make it easier?

Preview 07:12

It is easier to select the nodes of the DOM with jQuery, but just selecting them is no fun. How can we manipulate them?

Updating the Elements and Content

The final piece we need to manipulate the DOM is to add elements as needed.

Inserting the Elements and Content

jQuery is very powerful, but it seems to be lacking in form validation. How can we use jQuery to validate web forms?

Preview 09:50

You have learned how to change HTML or the text of DOM elements; can we change the CSS? Also, it would be nice to add some neat effects to elements.


jQuery events look much simpler to use compared with JavaScript events. How can we use them?

A Quick Look at Events
+ Getting Started with PhoneGap
43 lectures 05:47:44

This is give you brief information about the course.

Preview 04:28

Mobile hybrid app technologies like PhoneGap allow the developer to re-use many of their web-based skills. But just how is that possible? In this video, we'll address just that.

Leveraging Web Technologies

Using web technologies is great, but the system web view only provides so many features. In order to fit in on a mobile platform, our app needs also to interface with native technologies.

Interfacing with Native Features

Apps built against a native SDK often need to be rewritten when one desires to port them to another platform. Mobile hybrid apps using web technologies can avoid that problem, but how?

Cross Platform

It's important to understand the basics of how PhoneGap came to be and how it has evolved over the years. We'll cover this in this video.

Preview 07:12

PhoneGap is but one of many distributions that rely upon the Cordova project, which was donated to the Apache Software Foundation when Adobe purchased PhoneGap. Most of the times, the two can be used interchangeably, but not always.

Cordova Versus PhoneGap

The success of your app development depends upon understanding how PhoneGap works at a fundamental level.

How Does PhoneGap Work?

The PhoneGap CLI is the most flexible and complex face. It's what we'll be using for the rest of the videos in this course.

Preview 08:31

Not everyone wants to manage local SDKs and compilers on their machines. For those people, PhoneGap Build offers compilation as a service in the cloud.

PhoneGap Build

For those just getting their feet wet, the PhoneGap Desktop/Developer app combination can be a useful tool. It's also great for rapid iteration.

PhoneGap Desktop/Developer App

In this video, we'll cover the steps necessary to install Node.js on macOS.

Preview 08:27

In this video, we'll cover the steps necessary to install Node.js on Linux.

Downloading and Installing Node.js – Linux

In this video, we'll cover the steps necessary to install Node.js on Windows.

Downloading and Installing Node.js – Windows

Xcode is necessary in order to create iOS apps. There are two ways you can download it, and this video shows both. Note that you'll need an Apple ID in order to complete this process.

Preview 04:32

Now that Xcode is installed, there are a few more things we need to do in order to make it work for app development.

Configuring Xcode

In this video, we'll cover the necessary steps to install Android Studio on macOS.

Preview 11:48

In this video, we'll cover the necessary steps to install Android Studio on Linux.

Downloading and Installing Android Studio – Linux

In this video, we'll cover the steps necessary to install Android Studio on Windows.

Downloading and Installing Android Studio – Windows

In this video we'll cover the steps necessary to install the PhoneGap and Cordova CLIs. Note that you only need one or the other, but you can have both installed on the same system if you wish.

Preview 02:45

Now that we have the CLI installed, we need to know how to manage projects with it.

Project Management

PhoneGap uses config.xml to manage preferences, plugins, and platforms. Most projects will require some editing of the defaults.

Editing config.xml

When you create a project with the PhoneGap CLI, you'll typically do so using a template. In this video, we'll examine three, and go over the commonalities.

Investigating the Initial Template

In this video, we're going to make sure that you can run an app on an iOS device.

Preview 02:47

In this video we're going to make sure that you can run an app on an Android device.

Running on Android

A framework provides a foundation upon which we can build our app. But it may not always be obvious why we would want to select a framework instead of writing all the code ourselves, or why we might choose to use one framework over another.

Preview 07:42

There are a lot of frameworks around, and many of them have different opinions about how apps should be structured. How can you make an educated choice?

Choosing a Framework

In this video we'll reveal the framework we chose to use for our app—Filer.

Our Frameworkl

The user interface includes how the app looks and how the user interacts with the app. In this video we'll discuss both appearance and interaction flow.

Preview 07:51

A user interface without data is not of much use, so we need to design our app's data structures and identify how they will relate to each other.

Designing Filer's Models

In this video we'll discuss some important terms as they relate to both the project structure for our app and our chosen framework.

Preview 09:18

We want our app to "fit in" with operating system on which the app finds itself running. To do that we can provide two different themes, one for Android and another for iOS.

Supporting Android and iOS Themes

Most frameworks come with a smattering of useful icons, but rarely will those icons match the needs of our app completely.

Additional Image Assets

If our app doesn't persist the data that the user adds, it is useless. In this video, we'll discuss how to persist our user's data.

Preview 10:38

All of our app's data structures will have a base class: Entity.

Entity Model

Now that we've built our base class, we can build on that to handle parts of notes.

Piece and Text Piece Models

A note is a collection of pieces. In this video we'll create the code to handle that collection.

Text Note Model

The Notes model is of the highest level in our app's data structure, since it stores all the individual note objects and corresponding pieces.

Notes Model

In this video, we'll build the visual representation of our list of notes.

Preview 06:34

Now that we have the visual representation, we need to write the code that makes it all work.

Writing the JavaScript for Notes

In this video, we'll build the visual representation of our note and the corresponding text editor for note pieces.

Preview 08:38

Now that we have the visual representation, we need to write the code that makes it all work.

Writing the JavaScript

There are a few things we need to discuss before we're done with the app.

Preview 09:36

In this video, you'll get to see a demonstration of the app we've built. There are ways it could be improved, though—consider our suggestions a challenge!

Demonstration and Ideas for Improvement
  • Basic knowledge of HTML.
  • Basic knowledge of CSS.

Are you a developer who wants to build mobile applications with the help of web technologies? Do you want to develop a cross-platform mobile applications using Adobe PhoneGap? If yes, this Learning Path is for you.

Adobe PhoneGap is a mobile application development framework that is used for developing hybrid mobile applications. It allows you to develop  mobile applications that run on all popular mobile OS platforms, such as iOS, Android, BlackBerry, and Windows. PhoneGap apps are developed using web technologies such as HTML, CSS, and JavaScript. So, with the help of these web technologies, one can build amazing cross-platform mobile applications.

Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

This Learning Path starts with an introduction to JavaScript wherein you will learn basic the JavaScript syntax such as comments, operators, and more. You will also learn to declare functions and write different loops inside it. Then, you will learn about Document Object Model (DOM) in JavaScript. Next, you will be familiar with jQuery, a JavaScript library and the use of jQuery in your projects. As the Learning Path progresses, you will be introduced to the concept of mobile hybrid applications and how PhoneGap can help you create applications that can function on different platforms. You will also learn to set up the PhoneGap development environment and will be guided through creating a simple application that uses some of the core features of PhoneGap. Finally, you will learn the complex uses of PhoneGap such as, interacting with external servers, dealing with security, testing, and automation.

By the end of this Learning Path, you will be able to utilize your learnings effectively to develop cross-platform PhoneGap applications.

About the Authors:

For this course, we have combined the best works of these esteemed authors:

Chip Lambert has been developing websites and web applications for almost 20 years. He has authored two other books for Packt Publishing: Instant RESS Implementation How-To and Mastering jQuery Mobile. He is currently a software engineer for Jenzabar Inc. and an online instructor for Bluefield College, teaching courses in web and mobile application development.

Kerri Shotts has worked with computers for nearly twenty-four years. Her love for technology and programming started when she was introduced to her first computer: a Commodore 64. She obtained a degree in Computer Science. Now she works as a Technology Consultant thereby creating, designing, and maintaining custom applications (both desktop and mobile), websites, graphics and logos, and more for her clients. She is the author of five prior books published by Packt.

Who this course is for:
  • This Learning Path is for mobile developers who want to develop hybrid mobile applications using PhoneGap. Also, web developers who wish to learn hybrid mobile application development will find the Learning Path useful.