PhoneGap Training Course

Training » All Courses » Mobile » PhoneGap

Course Summary

This is a hands-on class introducing you to developing mobile applications using HTML5 with the PhoneGap and jQuery Mobile frameworks. In this class, you will learn how to develop mobile applications for smart phones and tablets. While the course will cover web apps for any mobile platform, the hands-on exercises will target Android devices.

[top] Duration

1 day.

[top] Objectives

By the end of the training, you will be able to use PhoneGap to create HTML5 apps with relatively complex user interfaces for mobile devices. You’ll know how to deploy, debug, and package these apps for Android devices and the Android markets.

[top] Audience

Web developers interested in using JavaScript, HTML, and CSS to create cross-platform mobile apps.

[top] Prerequisites

  • Basic HTML and JavaScript 
  • jQuery basic preferred 
  • CSS basic preferred 
  • Recommended to bring an Android device. The Android emulator is the fall-back option

[top] Instructors

Photo
HTML5, CSS3, JavaScript, Node.js, MongoDB, Redis and System Admin (AWS) Rick has been a freelance software engineer since he graduated in the early 2000's. He has worked in the UK and America both as a freelance consultant and as a freelance developer. He is a very passionate and seasoned full stack developer, specializing in advanced front end user interface(UI) and user experience(UX). Having worked as lead CSS3/HTML5 developer for a start up in the Bay area, Rick has bleeding edge experience in ensuring extremely complex systems have simple to use and intuitive interfaces. Having worked with nearly all web technologies over the last decade he believes that there is no one size fits all technology. However, he is an advocate for using open source wherever possible and admittedly has an affinity for curly brackets. Rick has a passion for CSS and UX. You will also often find him talking about JavaScript being a 'real' language, or that JavaScript on the server is “what the world has been missing”. Between hitting up Las Vegas on the weekends and playing Magic the Gathering with his other coder friends, Rick is currently developing amongst other apps; a real-time unified social network for the trade show industry based in Las Vegas and a bidding platform for a crowdfunding app based in San Francisco.

More about Rick Hurst...

[top] Outline

Mobile Web Overview

  • Mobile Web Landscape
  • Why PhoneGap?
  • Web Apps versus Native Apps versus Hybrid Apps
  • Web -> native conversion
  • Device APIs
  • PhoneGap Implementation
  • PhoneGap and Appcelerator Titanium
  • What is the “gap” in “PhoneGap”?
  • Phonegap and Apache
  • Exercise
    • Create, deploy and run a PhoneGap app

PhoneGap APIs

  • Accelerometer
  • Compass
  • Device
  • Geolocation
  • Storage
  • Camera
  • Connection
  • Events
  • Media
  • Capture
  • Contacts
  • File 
  • Notification
  • Exercise:
    • Implement an app that uses at least one PhoneGap API

UI Frameworks

  • Mobile overview
  • jQuery Mobile intro
  • jQuery Mobile Theme Roller
  • Media Queries
  • Exercise
    • Implement a PhoneGap app that uses jQuery Mobile and change the theme

Simulation/Emulation

  • Desktop Browsers
  • Ripple
  • Exercise:
    • Use Ripple Accelerometer and Location controls to send input to app

Debug

  • console debugging with LogCat
  • Weinre
  • debug.phonegap.com
  • Exercise:
    • Use weinre to modify DOM and call a function in the app

Deployment/Distribution

  • Android file structure
  • Manifest and icon configurations
  • Signing Applications
  • Building for Release
  • Setting up the emulator
  • Exercise:
    • Market ready app

Tools

  • Eclipse
  • Command Line
  • Cloud
  • JSLint
  • Cloud-base Services
  • Commercial PhoneGap add-ons

IOS PhoneGap Overview

  • XCode Setup
  • Project Creation, Build and Simulation
  • Console

PhoneGap Plugins 

  • Purpose
  • Simple example
  • ChildBrowser
  • Exercise:
    • Use Barcode Scanner Plugin to implement a barcode scanner app

Additional Hands-on Exercises

  • PhoneGap API Sample
  • Develop a Media Player
  • OAuth Twitter App