Workshop on Hybrid App Development with Ionic Framework
-
Upload
aayush-shrestha -
Category
Engineering
-
view
138 -
download
0
Transcript of Workshop on Hybrid App Development with Ionic Framework
![Page 1: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/1.jpg)
Hybrid Apps with Ionic FrameworkAAYUSH [email protected]
![Page 2: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/2.jpg)
CURRENTLY◦ Head of UI/UX Architecture and Design at Viveka Health◦ Co Founder of Lishn.com
PREVIOUSLY◦ Chief of Design at nLocate
Find Me At: [email protected] fb.me/ShresthaAayush @AayushShrestha
AAYUSH SHRESTHA
![Page 3: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/3.jpg)
We all want to be mobile app developers.
![Page 4: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/4.jpg)
![Page 5: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/5.jpg)
But what if I told you
You can build apps for all major platforms AT ONCE!!
![Page 6: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/6.jpg)
.. and with the web technologies that you are already familiar with.
![Page 7: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/7.jpg)
Native Apps Platform specific Respective development tools Time consuming to develop Development is expensive Performance is best
Platform Independent HTML5, CSS3, JavaScript Quick Development Direct access to native APIs Limited Performance
Hybrid Apps
![Page 8: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/8.jpg)
Apache Cordova is a platform to build mobile applications using HTML5, CSS
and JavaScript.
![Page 9: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/9.jpg)
Cordova is an application container◦ You develop a web app.◦ Cordova will take that web app and bundle it in a native app.
◦ A Cordova app opens a webview (an instance of a web browser) where the web app will operate
![Page 10: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/10.jpg)
Cordova is an application container
![Page 11: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/11.jpg)
Supports most mobile platforms◦ Android◦ iOS◦ Windows◦ Blackberry OS◦ Ubuntu OS◦ Firefox OS◦ LG Web OS◦ FireOS
BUILD ONCE.RUN AT ALL PLATFORMS.
![Page 12: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/12.jpg)
Cordova gives access to Native APIs◦ Battery Status◦ Camera◦ Contacts◦ Device◦ Device Orientation◦ Dialogs◦ File System◦ Geolocation
◦ Media Capture◦ Network Information◦ Splashscreen◦ Statusbar◦ Vibration
![Page 13: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/13.jpg)
Cordova is Free, Open Source and Extensible◦ Free and Open Source◦ Cordova provides ways to develop your own plugins that can interact with the device and/or the platform’s SDK so you can build more advanced native features
![Page 14: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/14.jpg)
What is PhoneGap?◦ Cordova was initially called PhoneGap when it was developed at Nitobi Labs
◦ Adobe bought PhoneGap.◦ Then Adobe donated the project to Apache Software Foundation and it was renamed to Cordova
◦ Now, PhoneGap is a distribution of Cordova that is managed by Adobe.
◦ Phonegap is also free and open source◦ Analogous to Chromium engine and Google Chrome
![Page 15: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/15.jpg)
Ionic Framework is a front-end framework built on top of Cordova with
Angular JS.
![Page 16: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/16.jpg)
Ionic Framework◦ Front end framework for hybrid mobile apps◦ Angular JS to build mobile web application◦ Cordova to create, build, run and deploy native apps◦ UI components that will make your apps look more like native apps
◦ Ionic-CLI that makes building, running, testing and deploying apps easier
![Page 17: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/17.jpg)
Lets Get Started!
![Page 19: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/19.jpg)
$ ionic start myApp blank$ ionic start myApp tabs
$ ionic start myApp sideMenu
START A PROJECT WITH STARTER TEMPLATE
![Page 20: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/20.jpg)
$ ionic serve$ ionic serve --lab
BROWSER TESTING
![Page 21: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/21.jpg)
$ ionic build android$ ionic emulate android
$ionic run androidBUILD THE APP AND TEST IN SIMULATOR.
REPLACE ANDROID WITH IOS TO BUILD AND TEST IN IOS.* ANDROID SIMULATOR MUST BE INSTALLED
![Page 22: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/22.jpg)
CSS UI Components
![Page 23: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/23.jpg)
IONICONS
![Page 24: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/24.jpg)
Platform Specific Customization
![Page 25: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/25.jpg)
Platform specific CSS classesClass Name Platform
platform-browser When app is working on a browser
platform-cordova When app is working on any device
Platform-ios When the device is iOS
Platform-android When the device is android
Platform-ipad When the device is iPad
Platform-windowsphone
When the device is android phone
![Page 26: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/26.jpg)
Dynamic Templates
![Page 27: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/27.jpg)
Dynamic Templates : Merges Folder
You can have a special folder named merges in the same level where www folder resides
Merges folder can have directories for android and ios that can override www folder
![Page 28: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/28.jpg)
Native Features : Camera
![Page 29: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/29.jpg)
$ cordova plugin add cordova-plugin-camera
ADD CAMERA PLUGIN FOR CORDOVAHTTPS://CORDOVA.APACHE.ORG/DOCS/EN/LATEST/
REFERENCE/CORDOVA-PLUGIN-CAMERA/
![Page 30: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/30.jpg)
$ bower install ngCordovaINSTALL NGCORDOVA LIBRARY. NGCORDVA IS AN ANGULAR LIBRARY
THAT HELPS YOU PROPERLY USE CORDOVA PLUGINS IN ANGULAR.HTTP://NGCORDOVA.COM/
![Page 31: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/31.jpg)
Add a new tab in tabs.html
![Page 32: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/32.jpg)
Create a new route in app.js
![Page 33: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/33.jpg)
Create a CameraCtrl in controllers.js
Notice: There is another parameter $cordovaCamera in the controller function.$cordovaCamera is a service provided by ngCordova that helps you access the device camera
![Page 34: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/34.jpg)
Create a new template tab-camera.html
The template has two buttons. One for taking phot. Another for Choosing Photo from Gallery.The <img> element shows the image selected or clicked.
![Page 35: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/35.jpg)
In CameraCtrl.js, write takePhoto function
Options object defines various options to start the camera, like the width and height of image, source type (here Camera)$cordovaCamera.getPicture() function starts the camera.From the imageData received from camera, we create an imageURI which is used in template to view the image.
![Page 36: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/36.jpg)
In CameraCtrl.js, write choosePhoto function
Similar to takePhoto functionBut in options object, for sourceType, we use Camera.PictureSourceType.PHOTOLIBRARY
![Page 37: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/37.jpg)
Icons and Splashscreens
![Page 38: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/38.jpg)
Download and edit Icons and Splashscreen PSDs
EDIT WITH YOUR LOGO AND PUT THEM IN RESOURCES FOLDER
![Page 39: Workshop on Hybrid App Development with Ionic Framework](https://reader035.fdocuments.net/reader035/viewer/2022062316/58a3ac831a28ab9e6a8b5da9/html5/thumbnails/39.jpg)
$ ionic resources --icon$ ionic resource --splash
$ionic resourceCREATE ICONS AND SPLASHSCREENS