Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hybrid Mobile
Applications
Introduction to Apache
Cordova
Ruwan Ranganath
Dell / Mozilla / HackerRank Ambassador
FOSS Advo...
What we're covering ?
What is Cordova/PhoneGap
Hybrid in a nutshell
Simple Hello World
Example
Submit to Play Store
WRITE ONCE RUN
ANYWHERE
A WORA Dream
A WORA Dream
EVERY SMARTPHONE HAS A
BROWSER
Every mobile OS has a
native UI component that
allows one to integrate a
web b...
http://cordova.apache.org/
Who love
history ?
• Started by Nitobi
• Built at an iPhoneDevCamp in 2009
• Adobe bought Nitobi (2011)
• Adobe/Nitobi don...
What it does
learn more..
• Creates "Hybrid" applications
• Native wrapper around a web view
• HTML (CSS,JS) handles layout
• Cordova "bridges the g...
Supported
Platforms
iOS
Android
Windows Phone
8
BlackBerry 10
Firefox OS
Amazon Fire OS
Ubuntu
Tizen
Windows 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 javasc...
Hybrid App Logical
Architecture
Development
Paths
Two basic workflows to create a mobile application
• Cross-platform (CLI) workflow
• Platform-centered w...
• CLI = Command-Line Interface
1. create new projects
2. add platforms
3. build a project w.r.t. different platforms
4. em...
Extra
• Cordova CLI is distributed by NPM (Node Package Manager)
• NPM is one of the package managers for node.js.
• Node....
Demo App
Hello Hack@Ranabima
Magical Commands
npm install -g cordova
cordova create HelloWorld
cd HelloWorld
cordova platform add android
cordova build...
The folder containing the application source code and assets (HTML, CSS,
JavaScript, Images, ...)
•
A global configuration...
Thanks you
@ruwan_ranganath
ruwanranganathz@gmail.com
Upcoming SlideShare
Loading in …5
×

Hybrid Mobile Applications

600 views

Published on

Successfully concluded first Hybrid Cross platform mobile application development sesison in Hack at Ranabima Workshop + Hackathon.

Published in: Mobile
  • Be the first to comment

Hybrid Mobile Applications

  1. 1. Hybrid Mobile Applications Introduction to Apache Cordova Ruwan Ranganath Dell / Mozilla / HackerRank Ambassador FOSS Advocate , Dreamer Building Cross-Platform applications using web technologies
  2. 2. What we're covering ? What is Cordova/PhoneGap Hybrid in a nutshell Simple Hello World Example Submit to Play Store
  3. 3. WRITE ONCE RUN ANYWHERE A WORA Dream
  4. 4. A WORA Dream EVERY SMARTPHONE HAS A BROWSER Every mobile OS has a native UI component that allows one to integrate a web browser inside an application (WebView). If our application is built with standard web technologies we just need to pack it inside a native application that loads it into a full screen browser.
  5. 5. http://cordova.apache.org/
  6. 6. 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
  7. 7. What it does learn more..
  8. 8. • 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
  9. 9. Supported Platforms iOS Android Windows Phone 8 BlackBerry 10 Firefox OS Amazon Fire OS Ubuntu Tizen Windows 8
  10. 10. • Adobe PhoneGap • Ionic • Monaca • Telerik • Intel XDK • Cocoon • Framework7 • WebRatio Distributions
  11. 11. 1.Use any of the 10 million JavaScript libraries 2.Use any of the 10 million APIs 3.Deploy to app store
  12. 12. Advantages over Native Development • single codebase to fix bugs • Write Code Using HTML5/ CSS3 / JavaScript Single javascript API providing cross platform access to: Accelerometer Camera Compass Contacts File Geolocation Media Network Notifications (alert, sound, vibration) Storage
  13. 13. Hybrid App Logical Architecture
  14. 14. Development Paths Two basic workflows to create a mobile application • Cross-platform (CLI) workflow • Platform-centered workflow
  15. 15. • CLI = Command-Line Interface 1. create new projects 2. add platforms 3. build a project w.r.t. different platforms 4. emulate a project on platform-specific emulators 5. run a project on device 6.include specific plugins into a project Cordova CLI
  16. 16. 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.
  17. 17. Demo App Hello Hack@Ranabima
  18. 18. Magical Commands npm install -g cordova cordova create HelloWorld cd HelloWorld cordova platform add android cordova build cordova run android
  19. 19. The folder containing the application source code and assets (HTML, CSS, JavaScript, Images, ...) • A global configuration file • The folder containing platform dependent assets. It contains the platform specific temporary project files used during the building process. • The folder containing platform dependent files. Every subfolder will be merged to the www during the build phase, adding additional files or overriding some of them. • The folder containing plugins Project Structure
  20. 20. Thanks you @ruwan_ranganath ruwanranganathz@gmail.com

×