CREATING A MOBILE APP

using HTML5, CSS3 and JavaScript with PhoneGap Build

Introduction

Why should you take THIS course compared to other courses on the same topic? Because we respect YOUR TIME!

  • We optimized content to avoid rambling.
  • We separated vital few content from the trival many.
  • We simplified content so that it can be easily understood.
  • We provided optional content that can be skipped or done later.
  • We avoid repeating content that has already been discussed.
  • We categorized content from simple to complex.
  • We provided shortcuts to code content.
  • We separated theory from content application wherever possible.
  • Important concepts are highlighted to bring attention to them.
  • We not only provide the "how to" steps on a given concept but tell you "why" you need to do it.
  • We present concepts in a systematic manner from non-technical (e.g., XML) to technical (e.g., Java) to flatten the learning curve and to promote retention.
  • We present generic concepts so that you can apply your own specific content.
  • We use analogies to convey complex concepts so that the can be related to real world objects.
  • To progressively “see” content, we provide Check Points along the way to make is easy to process information without going too long to show results.
  • Lastly, we use humor to make learning concepts a fun-filled and rewarding experience with many promising results.

Besides, there is a host of ways to make money with app development:

  1. Create apps for yourself (e.g., start with a free versions and then monetize pro versions)
  2. Create apps for others (e.g., create pro bono (free) apps to build a portfolio or simple apps for money)
  3. Teach other how to create apps at a local training company or university.
  4. Create online training on how to create apps (e.g., Linda.com, Udemy.com, teachable.com, etc.)
  5. Create advanced apps once you are proficient for small to large companies.

Below are some links to general information about these tutorials:

Tools

Below is a list of tools that can be used. Other than Dreamweaver, all of the tools are open source (FREE):

PhoneGap Build status page: (http://status.build.phonegap.com). Check on status of PhoneGap Build service.

Community forum: (http://community.phonegap.com/nitobi). Ask specific questions about PhoneGap Build.

PhoneGap blog: (http://phonegap.com/blog).

Google group: (https://groups.google.com/forum/#!forum/phonegap) Forum for asking and answering questions about the PhoneGap.

Lynda.com: (http://www.lynda.com) Training resources for learning mobile app development:

Net Market Share: (http://www.netmarketshare.com) - review trends for browsers, platforms, etc.

Assets Framework: (http://assets.cms.gov/resources/framework/3.4.1/Pages/#) The Section 508 Compliant Responsive Framework for Front-End Development



HTML 5, CSS3 and jQueryMobile Tutorial

Below are steps to create a simple mobile app:

  • jQuery Mobile App (Intro)
  • CREATE:
    • Themes
    • Site/App Definition
    • Template
    • Home Page
    • First Page
    • Home Button
    • Other Pages
  • OPTIONAL:
    • Control Group
    • Dialog Boxes
    • Tooltip
    • Fixed Header And Footer
    • Modify Header And Footer
    • Replace Home Page Title With Logo

Resource Links

Below is a list of resource links for the tutorial:

Tutorial CheatSheet
Images Used In Tutorial (Zip file)
jQuery Framework (Zip file: may not be latest versions)
Final Project (Zip file) Preview Final Project



Mobile App Development

There are six major steps in developing a mobile app:

  1. Prep for IT
  2. Create IT
  3. Test IT
  4. Deploy IT
  5. Market IT
  6. Update IT

Create debug version using various technologies or tools:

PLATFORM TECHNOLOGIES NATIVE LANG.
Android
or iOS		 HTML5, CSS3 and JS N/A
NOTE: There are other tools that can create mobile apps (e.g., Appcelerator Titanium, Iconic, jQuery Mobile, Sencha Touch, Enyo, Kendo UI, Onsen UI, etc.).

Test debug version using PhoneGap:

PLATFORM WHAT’S NEEDED
Android using HTML5, CSS3 and JS Zip HTML5, CSS3, JS, graphics & config.xml files
iOS using HTML5, CSS3 and JS Zip HTML5, CSS3, JS, graphics & config.xml files and two keys

Test debug version using browsers:

PLATFORM MAIN TESTING TOOL
Android or iOS Browsers (Chrome, FF & IE)

Create released version with PhoneGap:

PLATFORM WHAT’S NEEDED
Android using HTML5, CSS3 and JS Zip file including HTML, CSS JS, graphics and config.xml files
iOS using HTML5, CSS3 and JS Zip file including HTML, CSS, JS, graphics, config.xml files and two keys

Market released version on app store:

PLATFORM APP STORE
Android Google Play Store, Amazon Appstore and others
iOS Apple App Store

1. Prep For App

Before you start, you may need to prep for app development:

  • Download and install framework (e.g., jQueryMobile, BootStrap)

2. Create App

Create app using HTML5, CSS3 and JavaScript*:

  • *JavaScript can be in the form of jQuery, jQuery UI, jQueryMobile, Bootstrap, etc.

3. Test App

It is important to test an app using a various of tools and techniques before publishing it:

  • TEST #1: In Browsers (e.g., Firefox, Chrome, Internet Explorer)
  • TEST #2: Debug Version on Devices
    • Using Dreamweaver, scan QR code to test a debug version of the app on real device(s)

4. Deploy App

If you want to, you can deploy an app on one or more app store:

  • Create KeyStore (Android only)
  • Assign Key (Android only)
  • Create config.xml file manually or using ConfiGap*
  • Zip all files (HTML, CSS, JavaScript, graphics, config.xml, etc.)
  • Upload zip file to PhoneGap Build using *.zip file or GitHub
  • Use Debug, Hydra and Plugins*

    *Optional for prototype or simple apps

  • Distribution Options:
    • Google Play Store
    • Apple App Store
    • Amazon Appstore
  • TEST #3: Released Version on Real Devices

5. Market App

Once you create, test and deploy an app, you may want to market it for free or for money:

  • App stores
  • Social Media (e.g., Facebook, Twitter)
  • Advertisements
  • Third Parties
  • QR codes, etc.

6. Redo (Update) App

If you need to make changes to an app, you will have to:

  • Redo (Update) IT
  • Retest IT
  • Redeploy IT
  • Re-market IT