hybrid mobile applications
TRANSCRIPT
![Page 1: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/1.jpg)
Hybrid Mobile Applications
Introduction to Apache Cordova
Ruwan RanganathDell / Mozilla / HackerRank Ambassador FOSS Advocate , Dreamer
Building Cross-Platform applications using web technologies
![Page 2: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/2.jpg)
What we're covering ?
1. What is Cordova/PhoneGap2. Hybrid in a nutshell 3. Simple Hello World Example4. Submit to Play Store
![Page 3: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/3.jpg)
WRITE ONCE RUN ANYWHERE
A WORA Dream
![Page 4: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/4.jpg)
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.
![Page 5: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/5.jpg)
http://cordova.apache.org/
![Page 6: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/6.jpg)
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
![Page 7: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/7.jpg)
What it does learn more..
![Page 8: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/8.jpg)
• 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
![Page 9: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/9.jpg)
Supported Platforms
iOSAndroidWindows Phone 8BlackBerry 10
Firefox OSAmazon Fire OSUbuntuTizenWindows 8
![Page 10: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/10.jpg)
• Adobe PhoneGap• Ionic• Monaca• Telerik• Intel XDK• Cocoon• Framework7• WebRatio
Distributions
![Page 11: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/11.jpg)
1.Use any of the 10 million JavaScript libraries
2.Use any of the 10 million APIs
3.Deploy to app store
![Page 12: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/12.jpg)
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
![Page 13: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/13.jpg)
Hybrid App Logical Architecture
![Page 14: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/14.jpg)
Development Paths
Two basic workflows to create a mobile application
• Cross-platform (CLI) workflow
• Platform-centered workflow
![Page 15: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/15.jpg)
• 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
![Page 16: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/16.jpg)
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.
![Page 17: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/17.jpg)
Demo AppHello Hack@Ranabima
![Page 18: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/18.jpg)
Magical Commands
npm install -g cordova
cordova create HelloWorld
cd HelloWorld
cordova platform add android
cordova build
cordova run android
![Page 19: Hybrid Mobile Applications](https://reader031.vdocument.in/reader031/viewer/2022030116/589e1ceb1a28ab605b8b5edb/html5/thumbnails/19.jpg)
• 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