Embed Size (px)
Citation preview
Hybrid Apps with Ionic FrameworkAAYUSH [email protected]
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
We all want to be mobile app developers.
But what if I told you
You can build apps for all major platforms AT ONCE!!
.. and with the web technologies that you are already familiar with.
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
Apache Cordova is a platform to build mobile applications using HTML5, CSS
and JavaScript.
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
Cordova is an application container
Supports most mobile platforms◦ Android◦ iOS◦ Windows◦ Blackberry OS◦ Ubuntu OS◦ Firefox OS◦ LG Web OS◦ FireOS
BUILD ONCE.RUN AT ALL PLATFORMS.
Cordova gives access to Native APIs◦ Battery Status◦ Camera◦ Contacts◦ Device◦ Device Orientation◦ Dialogs◦ File System◦ Geolocation
◦ Media Capture◦ Network Information◦ Splashscreen◦ Statusbar◦ Vibration
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
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
Ionic Framework is a front-end framework built on top of Cordova with
Angular JS.
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
Lets Get Started!
$ ionic start myApp blank$ ionic start myApp tabs
$ ionic start myApp sideMenu
START A PROJECT WITH STARTER TEMPLATE
$ ionic serve$ ionic serve --lab
BROWSER TESTING
$ 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
CSS UI Components
IONICONS
Platform Specific Customization
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
Dynamic Templates
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
Native Features : Camera
$ cordova plugin add cordova-plugin-camera
ADD CAMERA PLUGIN FOR CORDOVAHTTPS://CORDOVA.APACHE.ORG/DOCS/EN/LATEST/
REFERENCE/CORDOVA-PLUGIN-CAMERA/
$ bower install ngCordovaINSTALL NGCORDOVA LIBRARY. NGCORDVA IS AN ANGULAR LIBRARY
THAT HELPS YOU PROPERLY USE CORDOVA PLUGINS IN ANGULAR.HTTP://NGCORDOVA.COM/
Add a new tab in tabs.html
Create a new route in app.js
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
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.
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.
In CameraCtrl.js, write choosePhoto function
Similar to takePhoto functionBut in options object, for sourceType, we use Camera.PictureSourceType.PHOTOLIBRARY
Icons and Splashscreens
Download and edit Icons and Splashscreen PSDs
EDIT WITH YOUR LOGO AND PUT THEM IN RESOURCES FOLDER
$ ionic resources --icon$ ionic resource --splash
$ionic resourceCREATE ICONS AND SPLASHSCREENS
