Rapid mobile app development using Ionic framework
- 1. Rapid mobile app development using Ionic framework Swaminathan Vetri Senior Engineer at Target | Microsoft MVP
- 2. 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 [email protected] @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 THE BEAUTIFUL, OPEN SOURCE SDK FOR DEVELOPING NATIVE AND PROGRESSIVE WEB APPS
- 6. Why Ionic ?
- 7. Where does Ionic fit in ? Your App Ionic Angular JS Cordova Native SDK
- 8. MORE THAN CODE. IONIC IS AN ECOSYSTEM
- 9. Mobile app development with Ionic Idea Prototype BuildDistribute Monitoranalytics
- 10. What Ionic offers ?
- 11. Ionic Creator Creator is a drag-&-drop prototyping tool for creating great apps using Ionic, with just a click of the mouse.
- 12. LETS CREATE
- 13. 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 …
- 14. LETS COMMAND
- 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 CSS components Ion icons ngCordova/Ionic native Ionic Cloud
- 17. 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 ….
- 18. CSS Components Header Footer Buttons List Cards Form inputs Toggle Range Select Tabs Grid and many more and more ….
- 19. 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
- 20. LETS BUILD
- 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 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>
- 23. LETS VIEW
- 24. 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