hybrid mobile applications
TRANSCRIPT
Hybrid Mobile Applications
Introduction to Apache Cordova
Ruwan RanganathDell / Mozilla / HackerRank Ambassador FOSS Advocate , Dreamer
Building Cross-Platform applications using web technologies
What we're covering ?
1. What is Cordova/PhoneGap2. Hybrid in a nutshell 3. Simple Hello World Example4. Submit to Play Store
WRITE ONCE RUN ANYWHERE
A WORA Dream
A WORA Dream
EVERY SMARTPHONE HAS A BROWSEREvery mobile OS has anative UI component thatallows one to integrate aweb browser inside anapplication (WebView).
If our application is built withstandard web technologieswe just need to pack itinside a native applicationthat loads it into a full screenbrowser.
http://cordova.apache.org/
Who love history ?
• Started by Nitobi• Built at an iPhoneDevCamp in 2009• Adobe bought Nitobi (2011)• Adobe/Nitobi donated the PhoneGap codebase to the
Apache Software Foundation (ASF)• First they called it Apache Callback
What it does learn more..
• Creates "Hybrid" applications• Native wrapper around a web view• HTML (CSS,JS) handles layout• Cordova "bridges the gap" to native capabilities
LET'S GET TECHY
Supported Platforms
iOSAndroidWindows Phone 8BlackBerry 10
Firefox OSAmazon Fire OSUbuntuTizenWindows 8
• Adobe PhoneGap• Ionic• Monaca• Telerik• Intel XDK• Cocoon• Framework7• WebRatio
Distributions
1.Use any of the 10 million JavaScript libraries
2.Use any of the 10 million APIs
3.Deploy to app store
Advantages over Native Development
• single codebase to fix bugs• Write Code Using HTML5/ CSS3 / JavaScript
Single javascript API providing cross platform access to:
AccelerometerCameraCompassContactsFileGeolocationMediaNetworkNotifications (alert, sound, vibration)Storage
Hybrid App Logical Architecture
Development Paths
Two basic workflows to create a mobile application
• Cross-platform (CLI) workflow
• Platform-centered workflow
• CLI = Command-Line Interface
1. create new projects2. add platforms3. build a project w.r.t. different platforms4. emulate a project on platform-specific emulators5. run a project on device6.include specific plugins into a project
Cordova CLI
Extra• Cordova CLI is distributed by NPM (Node Package Manager)
• NPM is one of the package managers for node.js.
• Node.js is a JavaScript runtime that allows one to build cross-platform applications.
Demo AppHello Hack@Ranabima
Magical Commands
npm install -g cordova
cordova create HelloWorld
cd HelloWorld
cordova platform add android
cordova build
cordova run android
• wwwThe folder containing the application source code and assets (HTML, CSS,JavaScript, Images, ...)
• config.xmlA global configuration file
• platformsThe folder containing platform dependent assets. It contains the platformspecific temporary project files used during the building process.
• mergesThe folder containing platform dependent files. Every subfolder will bemerged to the www during the build phase, adding additional files oroverriding some of them.
• pluginsThe folder containing plugins
Project Structure
