rapid mobile app development using ionic framework

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 CreatorCreator 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

ToolingIonic playground – can be used as a REPL for

learning IonicIonic Lab – Desktop app to create ionic appsAny text editor of your choice

Visual Studio 2015VS CodeSublime TextAtomVimEmacs etc.,

Ionic frameworkJS componentsCSS componentsIon iconsngCordova/Ionic nativeIonic 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 CloudUsers - User authenticationPush - Push notificationsDeploy - Live app deploymentPackage - Native app packagingOther services in alpha/beta

Analytics - To capture the various telemetry about the appDeep 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.ioRun 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