Embed Size (px)
Citation preview
Hybrid Development with Ionic Wan Muzaffar Wan Hashim
ENVIRONMENTTO DEVELOP Mobile
App
MACHINE
MACBOOK• You will be needing a
Macbook for iOS app development.
• Using XCode and Apple development tool to submit the app to Appstore.
DEVELOPER PROGRAM
iOS Developer Program• To purchase developer account from $99
per year.
• App will be reviewed by Apple review team to ensure that it follows Apple Human Interface guideline.
• Refer to Apple HIG and Submission checklist prior to submitting the app.
• App submission to be done with Apple tool (Xcode, Application loader) = Need a Mac.
DEVELOPER PROGRAM
Android Developer Program
• To purchase developer account of $25 per year.
• Unlike Apple, app will be published directly into Google Play without review from Google Play team.
DEVICEOPTIONAL
Device SimulatorOPTIONS
BrowserOptions
Simulator - Limitation
- Motion Support Accelerometer Gyroscope
- Audio and Video Input Camera Microphone
- Proximity Sensor - No preinstalled application - No support to receive phone call
Text Editor
THINGS TO PLAN OUTBEFORE STARTING DEVELOPMENT
App Development
Strategy
Monetization•App can be sold for free OR •Can distribute app in AppStore of Google Play. •Sharing revenue model (70/30)
•Put price on application
• iOS: Price will be in USD ending with .99
•Android: Support MYR price.
•Put Ads on the application.
Lean Startup
Principle applied by startups since 2011
Shorten product development cycles by adopting business-hypothesis-driven experimentation and iterative releases.
Example case study: Dropbox, imvu, Aardvark (refer lean startup website)
Some principles..
Minimum Viable Product
Continuous Deployment
Split testing
Actionable Metrics
Build - Measure - Learn
19
Hybrid app development
What is a hybrid app?
• Hybrid app is a mobile app written using web technologies (HTML5, CSS and JavaScript)
• Hybrid app runs inside a native container (Webview)
• Hybrid app can access to device native feature, exposed by JavaScript.
What is a native app?
• Using specific SDK provided by platform provide, (iOS, Android, Windows Phone.…)
• Advanced UI and Device feature Interaction with the app.
• Necessity to learn platform specific development language: Objective C, Swift or Java .
Why Hybrid• Reuse existing web development skill (shorter
learning curve) : HTML, CSS3 & JS
• One language for different platform (iOS and Android)
• Quick Development
• Direct access to certain native APIs with Cordova
Risk developing Hybrid application
• Limited performance compared to Native application.
• Not all device and operating system features supported.
• Risk of being rejected by Apple if app does not feel native enough
• Increased time and effort to mimic native user experience.
How to mitigate the risk• Crafting a UI that is similar to native user
experience.
• Avoid over complicated UI and UX. Refer to Apple HIG or Android Design guide for reference.
• Ionic provide a library of CSS elements that mimic native UI elements to be used inside the app. Understand and try to use as much of the elements as possible when designing your app.
App built using hybrid development
App built using hybrid development
App built using hybrid development
Framework comparison
Ionic Framework
What is Ionic?• Powerful HTML5 SDK that will give
native-feeling mobile apps.
• This can be achieved simply using web-technologies : HTML, CSS and Javascript
• Focuses on :
• Look and feel
• UI Interaction of the app.
• Is not a replacement of Phonegap.
Ionic stack
Apache Cordova• A platform for building native mobile applications
using HTML, CSS and JavaScript.
• Provides a set of APIs in Javascript and HTML to interact with native features of the device.
• 2009: Phonegap was created by Nitobi
• 2011: Acquired by Adobe
• 2012: Renaming by Adobe under the name Cordova.
AngularJS• AngularJS is a JavaScript
Framework maintained by Google at the moment.
• It is based on Model-View-Controller (MVC) and MVVM architecture.
• Angular extends HTML functionalities to facilitate us creating a web-application.
Pre-requisite for learning Ionic
• Basic Programming/Javascript
• HTML and CSS
• Angular JS (We will cover the most used Angular concept)
• Web application concepts (REST/CRUD)
Ionic Supported devices• iOS 7+
• Android 4.1 and up
• Windows Phone (Coming soon)
• FirefoxOS (Coming soon)
Ionic Components
Ionic Components (2)
Ionic color scheme
• Ionic comes with a set of colors to start with.
• Naming convention for colors are based on emotion and generic terms.
• Color can be customised and override from ionic.css.
Ionic Playground
Ionic Playground• Ionic Playground is a tool allow
us to easily prototype our Ionic code in a browser, without installing anything.
• It has a simple HTML, CSS, and Javascript editor with a live app preview that updates immediately with new changes.
• We can easily share our code with anyone or fork other apps to modify others’ code.
• You can check at: play.ionic.io
Ionic Lab
Ionic Lab via CLI
ionic serve —lab
Ionic View
Ionic View
• Download Ionic View app in Appstore or Google Play.
• Use CLI command: ionic upload, you can easily test your app using ionic view.
• Share your app using ionic share <email> command on CLI.
Ionic Showcase
Ionicons
Ionic Market
Who is using Ionic?
Mallzee
Moodle Mobile
Just Watch
Mallzee• Tinder style Personal shopper
based in UK.
• Replaced their hand built PhoneGap app with Ionic
• Excellent UI
• Apps available in Android and iOS
• Manage to secure recently £2.5M funding, recently.
Songhop
• Music discovery application, yet another Tinder style application.
• Available on iPhone only.
• Rated 5 star in App Store.
• Founder is active with Ionic Community.
Sworkit• Techinsider describe it ass
“The best free fitness app in the world” with simple and clean interface.
• Featured in the Health and Fitness section of the App Store.
• Downloaded over 3 million times.
Ionic platform
Ionic Push
Ionic Push
Ionic Analytics
Ionic Creator
Ionic Creator
https://ionic-worldwide.slack.com
https://gitter.im/driftyco/ionic-io-testers
AngularJS Important Features in Ionic
• Directives
• Model View Controller (MVC)
• Data Binding
• Dependency Injection
• Filter
Installing Ionic
• Ionic require Node.js. Download Node.js from the website
• Once done, you may install ionic and cordova from the command line:
npm install -g cordova ionic
Ionic CLI command• Create new project:
• ionic start <your-app-name>
• Test on web browser:
• ionic serve
• Add mobile platform
• ionic platform add [android/ios]
• Build and application
• ionic build [android/ios]
• Run test on device/emulator
• ionic [run/emulate] [android/ios]
Starting an app with Ionic template
$ ionic start myApp blank $ ionic start myApp sidemenu$ ionic start myApp tabs
Ionic Live Reload• Live reload is a cool feature
where browser will be updated automatically every time we save the change in our code.
• Live reload is available on device and emulator, to add following option on CLI command.
$ ionic [run|emulate] <platform> [options]
[--livereload|-l] .... Live Reload app dev files from the device [--consolelogs|-c] ... Print app console logs to Ionic CLI [--serverlogs|-s] .... Print dev server logs to Ionic CLI
Ionic List
• Widely used interface element in almost any mobile app,
• Can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
Simple List<ion-content class="padding"> <div class="list">
<div class="item item-divider"> Melaka </div> <a class="item" href="#"> A Famosa </a> <a class="item" href="#"> Dataran Pahlawan </a> <div class="item item-divider"> Kuala Lumpur </div> <a class="item" href="#"> Muzium Negara </a> <a class="item" href="#"> KL Tower </a> <a class="item" href="#"> KLCC </a> </ion-content>
Complex List
<ion-list>
<ion-item ng-repeat="item in items" item="item"> List Item {{ item.id }} </ion-item>
</ion-list>
• Using AngularJS Directive.
• Built in swipe to action function
• Delete
• Reorder
List with Ionicons<div class="list">
<a class="item item-icon-left" href="#"> <i class="icon ion-email"></i> Check mail </a>
<a class="item item-icon-left item-icon-right" href="#"> <i class="icon ion-chatbubble-working"></i> Call Ma <i class="icon ion-ios-telephone-outline"></i> </a>
<a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album <span class="item-note"> Grammy </span> </a>
<a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a>
</div>
Cards• Cards are UI Element that
have gained popularity in recent years.
• Cards can be added in Angular and customised as per your need. <div class="card"> <div class="item item-divider"> I'm a Header in a Card! </div> <div class="item item-text-wrap"> This is a basic Card with some text. </div> <div class="item item-divider"> I'm a Footer in a Card! </div></div>
More complex Cards
Form and Inputs• Preferably, a form is
grouped inside a list.
• We used both item and item-input element to designated each field.
<div class="list"> <label class="item item-input"> <input type="text" placeholder="First Name"> </label> <label class="item item-input"> <input type="text" placeholder="Last Name"> </label> <label class="item item-input"> <textarea placeholder="Comments"></textarea> </label></div>
Ionic Navigation• Using AngularUI Router Service.
• Manage navigation and show the back button when possible.
• Works with Android’s physical back button.
<ion-nav-bar> <ion-nav-back-button> Back </ion-nav-back-button></ion-nav-bar>
<ion-nav-view></ion-nav-view>
Ionic Tab
<a class="tab-item"> <i class="icon ion-home"></i> Home </a> <a class="tab-item"> <i class="icon ion-star"></i> Favorites </a> <a class="tab-item"> <i class="icon ion-gear-a"></i> Settings </a>
• Using AngularUI Router Service.
• Manage navigation and show the back button when possible.
• Works with Android’s physical back button.
Ionic Slide
<ion-slide-box on-slide-changed="change(index)"> <ion-slide> Slide 1 </ion-slide> <ion-slide> Slide 2 </ion-slide> <ion-slide> Slide 3 </ion-slide></ion-slide-box>
• Using AngularUI Router Service.
• Manage navigation and show the back button when possible.
• Works with Android’s physical back button.
ngCordova
ngCordova
• ngCordova is a project done by Ionic team to facilitate integration of Cordova plugin into AngularJS.
• You may refer to ngCordova website showing all the plugins that we can easily inject into our Controller, just like how we inject any other service.
Using ngCordova• Include ngCordova inside the project using Bower:
• bower install ngCordova
• ngCordova will be added into our project. Include the script into our index.html
• Inject ngCordova into our application.
• Go to CLI: ionic plugin add <plugin name>
