Embed Size (px)
Citation preview
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 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
@svswaminathan
