Mobile Development with HTML5
Jean-Francois Bilodeau
Senior Instructor – CTE Solutions
The Smarter Everyday project is owned and operated by CTE Solutions Inc.
Mobile Development with HTML5
•
•
Using the Technologies you are already
Familiar with:
•
HTML
•
JavaScript
•
CSS
Develop on your favourite platform:
•
Linux
•
Mac
•
Windows





Top-level Apache project

http://cordova.apache.org/
Originally created by Adobe and known as
PhoneGap
PhoneGap still exists, but relies on the work
done by Apache
Supports most mobile OS

Android, iOS and Windows Phone are
100% supported
Support also exists for Blackberry, webOS,
Symbian and Tizen
Installing Apache Cordova
Instruction are at
http://cordova.apache.org/
Install Node.js (nodejs.org)
Run:
npm install -g cordova
Done!
Creating a Cordova Project
•
•
•
•
•
Run: cordova create myproject
com.cte.example MyProject
Project directory is created (/myproject)
Add platforms are desired :
•
cordova platform add ios (Mac only)
•
cordova platform add android
•
cordova platform add wp8 (Windows only)
•
etc.
View your platforms: cordova platforms ls
Remove a platform : cordova platforms rm
Creating the UI





Pages are views
HTML for structure
CSS for presentation
JavaScript for behaviour
(sounds familiar?)
Publishing to a Device


First, build the project:

Cordova build
Test on your emulator :

Cordova emulate android
Plugins





Apache Cordova has a rich set of plugins (600+)
To install plugins:

cordova plugin add <<plugin name>>
To list your plugins:

cordova plugin ls
To remove a plugin:

cordova plugin rm <<plugin name>>
For complete list of plugins:

http://plugins.cordova.io/
Persisting Information

You can use:

HTML5 LocalStorage

Text-only storage

Universal

WebSQL

Relational database

Limited platform support

IndexDB

Not as rich as WebSQL

Limited platform support
Development Environment





Any text editor (Notepad, vi, etc...)
Eclipse IDE
IntelliJ IDEA
NetBeans
Visual Studio 2015
Limitations



Performance remains an issue
Does not use native look-and-feel

But can use Javascript libraries such as
jQuery Mobile
Code is easily viewable

Minimizer can help obfuscate the code
Alternatives
•
•
•
•
Embarcadero RADStudio XE
•
C++
•
Delphi
•
Native Peformance!
Xamarin Studio
•
C#
Qt SDK
•
C++
Appcelerator
•
JavaScript compiled to native code
Training with impact
TECHNICAL
MANAGEMENT
BUSINESS
Microsoft
Certified VMware
Cloud Computing
IT and Cyber Security
CompTIA
Java ProgrammingLanguages
Novell & UNIX
TOGAF
Enterprise
Architecture
ITIL & COBiT
Lean IT
Agile and Scrum
Business Analysis
Project Management
PRINCE 2
Change Management
Communication Skills
Leadership Skills
Negotiation Skills
Problem Solving Skills
Facilitation Skills
and many more…
CTE Solutions Inc. - Ottawa
11 Holland Avenue, Suite 100
Ottawa, Ontario, K1Y 4S1
Tel: (613) 798-5353
Toll Free: 1 (866) 635-5353
Fax: (613) 798-5574
For Free Training
Resources
CTE Solutions Inc. - Toronto
77 Bloor St. West, Suite 1406
Toronto, Ontario M5S 1M2
Tel: (416) 284-2700
Toll Free: 1 (866) 635-5353
Fax: (416) 284-6797