Rapid mobile app development using Ionic framework
-
Upload
svswaminathan -
Category
Software
-
view
94 -
download
1
Transcript of 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
@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
@svswaminathan