makzan.

I build utilities and games.
I share know-how via books, classes and essays.

Mobile web app dev with PhoneGap

This course material is written by makzan.

Start Reading →

Table of Content

Prefix

This is the handout for my mobile web app dev course hosted in Macao. It focuses on jQuery mobile and PhoneGap.

The type of the course handout uses examples approach. Using step-by-step guide to let readers learn by archiving several projects.

Make sure you check the code example while reading the book.

You can find the course code examples (and handouts from my previous PhoneGap course) in this github page. And you may need some diff tools to compare between steps of the code examples.

If you need reference on using the web standards, I recommend checking the Mozilla Developer Network for reference and StackOverflow for questions and issues.

At the end of the course, you’ll need to deliver and demonstrate a project. Here is the project requirement.

Before getting start, you might want to check a list of learning resources.

Introduction

Getting ready.

  1. Entering the era of mobile app
  2. Client-side technology
  3. Server-side technology
  4. Web app and Software-as-a-Service
  5. The modern web
  6. What is PhoneGap?
  7. The use of PhoneGap
  8. Write once & run everywhere?
  9. The tools we need in this course
  10. App categories
  11. Knowing javascript
  12. Choosing javascript ui frameworks
  13. Going MVC
  14. Idea and execution
  15. jQuery project boilerplate

Note. If you find boring setting up a new jQuery mobile project each time, you may start with this starter kit.

Project 1

Getting started.

  1. Twenty five timer
  2. Linking pages
  3. Timer logic — Entry point
  4. Timer logic — Timer ticker
  5. Timer logic — Core
  6. Timer logic — Time’s up
  7. About function context
  8. TouchStart and TouchEnd event

Project 2

Customize page transition.

  1. Transition
  2. Customize page transition
  3. Page transition — The CSS part
  4. Sequential and simultaneous
  5. Enhance the transition with blur filter
  6. Exercises
  7. Quiz time

Project 3

Welcome screen.

  1. Changing the app style
  2. Adding tutorial page at the beginning
  3. Adding SwipeJS to welcome page
  4. Welcome tutorial with style
  5. The done button

Project 4

Rain or not.

  1. Example weather app for Macao
  2. The OpenWeatherMap
  3. $.getJSON
  4. Parse JSON
  5. Code for rain
  6. JSON with padding
  7. Preparing graphics
  8. Crafting our Rain-or-Not app
  9. Refactoring
  10. Refactoring again
  11. Getting weather from location
  12. Getting user location
  13. Fetch weather from location
  14. Integrating location into our app

Project 5

Exchange rate.

  1. Exchange rate example – Planning
  2. Exchange rate example – API
  3. Exchange rate example – Exchange function
  4. Exchange rate example – Full example
  5. Challenges

Project 6

HTML5 cheatsheet.

  1. Example: HTML5 Cheatsheet – List view in jQuery mobile
  2. Example: HTML5 Cheatsheet – Moving data from HTML to Javascript
  3. Example: HTML5 Cheatsheet – Showing more detail
  4. Challenges
  5. Refractoring
  6. Obsolated tags
  7. Adding links
  8. Adding an icon
  9. Divider
  10. Filtering
  11. Listview exercise
  12. Nested list
  13. List with tabs

Project 7

Books wishlist example.

  1. Example: Books to buy
  2. Books-to-buy Mockup
  3. Model for adding book
  4. View for adding book
  5. Cloning with data
  6. Remove book entry
  7. Taking the inputs data
  8. Introducing LocalStorage
  9. Converting Objects into JSON String
  10. More Complex Keys
  11. Complex Keys – Hands On Exercise
  12. Saving the book list
  13. Adding tags as string
  14. Refractoring the LocalStorage module
  15. Planning the tags data structure
  16. Introducing Lo-Dash
  17. Listing all the tags
  18. Know which checkboxes are checked
  19. Adding the ISBNs to tag data
  20. Getting the book list from tag
  21. Render book list with argument
  22. Reseting all data
  23. Optional – Panel
  24. Adding Amazon link
  25. Enhance the remove button in list item
  26. Books-to-buy challenge

Project 8

Setup PhoneGap.

  1. When we need PhoneGap?
  2. Setting up the PhoneGap environment
  3. Testing on emulator
  4. Creating Android PhoneGap project
  5. The node.js approach

Project 9

Company informative app.

  1. Building a company app
  2. jQuery Google map
  3. News page
  4. News content
  5. MomentJS
  6. Gallery
  7. View photo
  8. Setup Mongolab
  9. Feedback form – HTML
  10. Feedback form – Model
  11. Feedback form – View
  12. More controls
  13. Input range

Project 10

Canvas drawing.

  1. Canvas drawing
  2. Using canvas
  3. Drawing with touch
  4. Mirror drawing
  5. Challenge kaleidoscope
  6. Base64 encode
  7. List of drawings
  8. Introducing websql
  9. Storing drawings in websql
  10. Phonegap device ready event
  11. Challenge – Adding Color
  12. Challenge – Replay Drawing
  13. Drawing pad future plan

Project 11

Accessing device resources.

  1. Photo capture
  2. Capture video
  3. Capture audio
  4. Video audio playback
  5. Inspecting the accelerometer sensor
  6. Accelerometer value bar chart
  7. Inspecting the gyroscope sensor

Project 12

Distribution channels.

  1. Testing web app on devices in local network
  2. App distribution
  3. Distributing to the web
  4. Minify your code
  5. Adding the web app to iOS home screen
  6. Phonegap Build
  7. Publish to App Store
  8. Publish to Google Play
  9. Distribution is just the beginning
  10. Some more tips

Appendix

Misc resources.

  1. Codes example
  2. Online learning resources
  3. Course code example bundle
  4. Extra – SublimeText tips
  5. Extra: Priority of CSS selectors
overlaied image when clicked on thumbnail
Mz square