rapid mobile app development using ionic framework€¦ · ionic lab –desktop app to create ionic...

Rapid mobile app development using Ionic framework

Swaminathan VetriSenior Engineer at Target | Microsoft MVP

About me

• Senior Engineer @ Target

• Microsoft MVP - Visual Studio & Development technologies

• Windows/Web/Cross platform mobile developer

• Blogger, Speaker, Amateur Photographer, Gadget Freak

photographer, Gadget freak

swami@wannabeegeek.com

@svswaminathan

wannabeegeek.com

Objective

What is Ionic ?

Why Ionic?

What it offers ?

How it speeds up mobile app development ?

Demos, Demos and Demos …

IONIC IS THE BEAUTIFUL, OPEN SOURCE SDK FOR DEVELOPING NATIVE AND

PROGRESSIVE WEB APPS

Why Ionic ?

Where does Ionic fit in ?

Your App

Ionic

Angular JS

Cordova

Native SDK

MORE THAN CODE.IONIC IS AN ECOSYSTEM

Mobile app development with Ionic

Idea

Prototype

BuildDistribute

Monitoranalytics

What Ionic offers ?

Ionic Creator

Creator is a drag-&-drop prototyping tool for creating great apps using Ionic, with just a click of the mouse.

LETS CREATE

Ionic CLI

Install ionic from npm

npm install –g ionic cordova ionic start

ionic serve

Ionic build

ionic emulate/run

ionic resources

ionic docs

ionic upload

ionic share

and many more and more …

LETS COMMAND

Tooling

Ionic playground – can be used as a REPL for learning Ionic

Ionic Lab – Desktop app to create ionic apps

Any text editor of your choiceVisual Studio 2015

VS Code

Sublime Text

Atom

Vim

Emacs etc.,

Ionic framework

JS components

CSS components

Ion icons

ngCordova/Ionic native

Ionic Cloud

JS Components

Action Sheet

Backdrop

Popup

Popover

Modal

Loading

Spinner

Slide box

Tabs

Side Menus

Navigation

Header

Footer

Form inputs

ion-checkbox

ion-radio

ion-toggle

Lists

ion-list

ion-item

ion-delete-button

ion-option-button

ion-reorder-button

collection-repeat

ion-refresher

ion-pane

ion-content

and many more and more ….

CSS Components

Header

Footer

Buttons

List

Cards

Form inputs

Toggle

Range

Select

Tabs

Grid

and many more and more ….

ngCordova/Ionic Native

ngCordova gives simple AngularJS wrapper for most commonly used cordova plugins to make app development efficient and faster

Barcode scanner

Camera

TouchID

Oauth

iBeacon

Social Sharing

Push notifications

Progress indicators

and many more and more …

Ionic Native is ngCordova’s ES6 and Typescript equivalent focused more for ng2 and Ionic v2 apps

LETS BUILD

Ionic Cloud

Users - User authentication

Push - Push notifications

Deploy - Live app deployment

Package - Native app packaging

Other services in alpha/betaAnalytics - To capture the various telemetry about the app

Deep linking – To easily link to content hidden deep inside the

app

and many more and more ….

Ionic View

Ionic View makes it easy to share your Ionic and Cordova apps with clients and testers around the world, all without ever going through the App Store.

Sign up at apps.ionic.io

Run the below ionic CLI commands

ionic upload

ionic share <email>

LETS VIEW

Useful links

Ionic creator - http://ionic.io/products/creator

Ionic lab - http://lab.ionic.io/

Ionic playground – http://play.ionic.io/

Ionic framework– http://ionicframework.com/docs/

Ionic cloud– http://docs.ionic.io/

Ionic view – http://view.ionic.io/

Ionic market place - https://market.ionic.io/

Demo code - https://github.com/svswaminathan/ionic-mods16-demo

Questions/Feedback

swami@wannabeegeek.com

@svswaminathan