The Smarter Everyday project is owned and operated by CTE Solutions Inc.

Mobile Development with HTML5

Jean-Francois BilodeauSenior Instructor – CTE Solutions

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 cordovaDone!

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 impactTECHNICAL MANAGEMENT BUSINESS

MicrosoftCertified VMwareCloud ComputingIT and Cyber SecurityCompTIAJava Programming-LanguagesNovell & UNIX

TOGAFEnterprise ArchitectureITIL & COBiTLean ITAgile and ScrumBusiness AnalysisProject Management PRINCE 2

Change ManagementCommunication SkillsLeadership SkillsNegotiation SkillsProblem Solving SkillsFacilitation Skillsand many more…

CTE Solutions Inc. - Ottawa11 Holland Avenue, Suite 100Ottawa, Ontario, K1Y 4S1 Tel: (613) 798-5353Toll Free: 1 (866) 635-5353Fax: (613) 798-5574  CTE Solutions Inc. - Toronto77 Bloor St. West, Suite 1406Toronto, Ontario M5S 1M2 Tel: (416) 284-2700Toll Free: 1 (866) 635-5353Fax: (416) 284-6797

For Free Training Resources