Hybrid app development with ionic

Hybrid Development with Ionic
Wan Muzaffar Wan Hashim

ENVIRONMENT
TO DEVELOP Mobile
App

MACBOOK
• You will be needing a
Macbook for iOS app
development.
• Using XCode and
Apple development
tool to submit the app
to Appstore.

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.

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.

Simulator - Limitation
- Motion Support
Accelerometer
Gyroscope
- Audio and Video Input
Camera
Microphone
- Proximity Sensor
- No preinstalled application
- No support to receive phone call

THINGS TO PLAN OUT
BEFORE STARTING DEVELOPMENT

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

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 speciﬁc SDK provided by platform provide,
(iOS, Android, Windows Phone.…)
• Advanced UI and Device feature Interaction with
the app.
• Necessity to learn platform speciﬁc 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

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.

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 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 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 via CLI
ionic serve —lab

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.

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 ﬁtness 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.

https://ionic-worldwide.slack.com

http://forum.ionicframework.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>
Dataran Pahlawan
</a>
Kuala Lumpur
</div>
Muzium Negara
</a>
KL Tower
</a>
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>
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<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">
I'm a Header in a Card!
</div>
<div class="item item-text-wrap">
This is a basic Card with some text.
</div>
I'm a Footer in a Card!
</div>
</div>

Form and Inputs
• Preferably, a form is
grouped inside a list.
• We used both item and
item-input element to
designated each ﬁeld.
<div class="list">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<input type="text" placeholder="Last Name">
</label>
<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>
<i class="icon ion-star"></i>
Favorites
</a>
<i class="icon ion-gear-a"></i>
Settings
</a>
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>
button.

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>

Hybrid app development with ionic

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to Hybrid app development with ionic

Similar to Hybrid app development with ionic (20)

Recently uploaded

Recently uploaded (6)

Hybrid app development with ionic