Download to read offline
Rapid mobile app development using Ionic framework
- 1. Rapid mobile app developmentusing Ionic framework Swaminathan Vetri Senior Engineer at Target | Microsoft MVP
- 2. About me • SeniorEngineer @ 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
- 4. Objective What is Ionic? Why Ionic? What it offers ? How it speeds up mobile app development ? Demos, Demos and Demos …
- 5. IONIC IS THEBEAUTIFUL, OPEN SOURCE SDK FOR DEVELOPING NATIVE AND PROGRESSIVE WEB APPS
- 6.
- 7. Where does Ionicfit in ? Your App Ionic Angular JS Cordova Native SDK
- 8. MORE THAN CODE. IONICIS AN ECOSYSTEM
- 9. Mobile app developmentwith Ionic Idea Prototype BuildDistribute Monitoranalytics
- 10.
- 11. Ionic Creator Creator isa drag-&-drop prototyping tool for creating great apps using Ionic, with just a click of the mouse.
- 12.
- 13. Ionic CLI Installionic 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 …
- 14.
- 15. 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 choice Visual Studio 2015 VS Code Sublime Text Atom Vim Emacs etc.,
- 16. Ionic framework JS components CSScomponents Ion icons ngCordova/Ionic native Ionic Cloud
- 17. JS Components ActionSheet 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 ….
- 18. CSS Components Header Footer Buttons List Cards Form inputs Toggle Range Select Tabs Grid and many more and more ….
- 19. ngCordova/Ionic Native ngCordovagives 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
- 20.
- 21. Ionic Cloud Users -User authentication Push - Push notifications Deploy - Live app deployment Package - Native app packaging Other services in alpha/beta Analytics - 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 ….
- 22. Ionic View IonicView 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>
- 23.
- 24. Useful links Ioniccreator - 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
- 25.