Ionic Framework
Download as PPT, PDF4 likes4,069 views
This document provides an introduction to hybrid mobile applications and the Ionic framework. It discusses the differences between native and hybrid apps, and introduces Ionic as a framework that allows building mobile apps using HTML, CSS, and JavaScript. The document outlines components of Ionic including AngularJS, Cordova, plugins, and the ecosystem. It also covers basic Ionic concepts such as installation, commands, directory structure, routing, views, and UI components. The agenda concludes with a demo of a TODO list application built with Ionic.
![• Start project
• Ionic start –a <app_name> <newApp> <template>
• <template> can either come from a named template, a Github repo, a
Codepen url, or a local directory.
• Run with local server
• ionic serve
• Add platform iOs or Android:
• ionic platform add [ios/android]
• Prepare iOs and Android
• ionic platform [ios/android] prepare
• Build iOS and Android
• ionic platform [ios/android] build
• Run on device:
• ionic run [ios/android] --device
Ionic CLI
Introduction about hybrid & Ionic framework
19](https://image.slidesharecdn.com/ionicpart1-160521053027/85/Ionic-Framework-19-320.jpg)
Ionic Framework
- 1. Introduction about hybrid & Ionic framework Thinh VoXuan Sprint 2016
- 2. • Native vs Hybrid Apps • Intro Ionic • Apache Cordova • AngularJS • Eco system • Ionic Basic • Installation • Ionic CLI • Directory Source code • Routing • View lifecycle • UI Component • Demo Agenda Introduction about hybrid & Ionic framework 2
- 3. Pros: •Natives UI allows users to quickly learn the app •Access to device hardware software (GPS, Location, shake, Calendar, etc…) •Native applications have the best performance, highest security, and best user experience. Pros: •Single code-base, multi platform •Development Cost Reasonable •All the content will be updated from web directly •The in-app interaction has a look and feel consistent •Web technology Cons: •Entirely separate code bases •Timely & expensive development •More Platforms. More Problems. Cons: •Run on Webview •Base on Plugins •May require native coding in device- related case Native vs Hybrid Apps Introduction about hybrid & Ionic framework 3
- 4. Part 1 - Intro Ionic 4
- 5. • Website: http://ionicframework.com/ • Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript. • top of the world's #1 mobile hybrid Framework • Cordova + Twitter Bootstrap + AngularJS • http://blog.ionic.io/where-does-the-ionic-framework-fit-i Intro Ionic Introduction about hybrid & Ionic framework 5
- 6. Intro Ionic Introduction about hybrid & Ionic framework 6
- 7. Intro Ionic Introduction about hybrid & Ionic framework 7
- 8. Cordova Introduction about hybrid & Ionic framework 8 • An open-source mobile development framework • Use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development • Applications execute within wrappers targeted to each platform • Rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc.
- 9. Cordova Introduction about hybrid & Ionic framework 9
- 10. • PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari. PhoneGap vs Cordova Introduction about hybrid & Ionic framework 10
- 11. • MV*: Model-View-Whatever • organize your JavaScript modular • Interconnection with HTML at the root level • Data Handling made simple • Two-way Data Binding AngularJS Introduction about hybrid & Ionic framework 11
- 12. AngularJS Introduction about hybrid & Ionic framework 12
- 13. • Controller • Template & Filtering • Two-way Data Binding • Routing & Multiple Views • Built-in Directives • Forms • Custom Directives • Services & Factory. AngularJS Introduction about hybrid & Ionic framework 13
- 14. • Ionic market: http://market.ionic.io/ • Plugins • Themes • Ionic platform: http://ionic.io/platform • Live Deploys • User Authentications • Push Notification • Native Builds Ionic Ecosystem Introduction about hybrid & Ionic framework 14
- 15. Ionic Ecosystem Introduction about hybrid & Ionic framework 15
- 16. • http://ionic.io/products/creator • Is a drag-&-drop prototyping tool for creating great apps using Ionic, with just a click of the mouse. • http://lab.ionic.io/ • Lab is a desktop app for Mac, Windows, and Linux, that makes it a joy to get started with Ionic. • http://view.ionic.io/ • 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. Ionic Ecosystem Introduction about hybrid & Ionic framework 16
- 17. Part 2 – Basic Ionic 17
- 18. • What need to install: • Node-JS (prefer install via NVM) • Apache Cordova • npm install -g cordova • Ionic • npm install -g ionic Install and start first project Introduction about hybrid & Ionic framework 18
- 19. • Start project • Ionic start –a <app_name> <newApp> <template> • <template> can either come from a named template, a Github repo, a Codepen url, or a local directory. • Run with local server • ionic serve • Add platform iOs or Android: • ionic platform add [ios/android] • Prepare iOs and Android • ionic platform [ios/android] prepare • Build iOS and Android • ionic platform [ios/android] build • Run on device: • ionic run [ios/android] --device Ionic CLI Introduction about hybrid & Ionic framework 19
- 20. Directory Source code Introduction about hybrid & Ionic framework 20 • platforms: directory contains your iOS and Android projects. • plugins: are where Cordova stores the plugins that you add to your project • scss: for your app’s SASS file • www: where your app is developed and where you’ll spend most of your time when building an Ionic app. • config.xml: config base to platform • bower.json: bower config file • gulpfile.js: build scss script.
- 21. Directory Source code Introduction about hybrid & Ionic framework 21 • css: all css file • img: image file • Js: angular source code • lib: bower install file • Index.html: starting file
- 22. Run app Introduction about hybrid & Ionic framework 22
- 23. • ionic.js • angular.js • angular-animate.js • angular-sanitize.js • angular-ui-router.js • ionic-angular.js ionic.bundle.js Introduction about hybrid & Ionic framework 23
- 24. View life cycle Introduction about hybrid & Ionic framework 24 • $ionicView.loaded • $ionicView.beforeEnter • $ionicView.enter • $ionicView.afterEnter • $ionicView.beforeLeave • $ionicView.leave • $ionicView.afterLeave • $ionicView.unloaded
- 25. View life cycle Introduction about hybrid & Ionic framework 25
- 26. Routing Introduction about hybrid & Ionic framework 26
- 27. • List • Navigation • Tabs • Side menu • Slide box • Action Sheet • Pull-to-refresh & Infinite loading UI Component Introduction about hybrid & Ionic framework 27
- 28. • http://ionicframework.com/docs/api/directive/ionList/ UI Component - List Introduction about hybrid & Ionic framework 28
- 29. • http://ionicframework.com/docs/api/directive/ionNavView/ UI Component - Navigation Introduction about hybrid & Ionic framework 29
- 30. UI Component - Tabs Introduction about hybrid & Ionic framework 30 • http://ionicframework.com/docs/api/directive/ionNavView/
- 31. UI Component - Side menu Introduction about hybrid & Ionic framework 31 • http://ionicframework.com/docs/api/directive/ionSideMenus/
- 32. UI Component - Slide box Introduction about hybrid & Ionic framework 32 • http://ionicframework.com/docs/api/directive/ionSlideBox/
- 33. UI Component - Action Sheet Introduction about hybrid & Ionic framework 33 • http://ionicframework.com/docs/api/service/$ionicActionSheet/
- 34. • http://ionicframework.com/docs/api/directive/ionRefresher/ Pull-to-refresh Introduction about hybrid & Ionic framework 34
- 35. • TODO List application • Source code: https://github.com/voxuanthinh/todolist- ionic Demo Introduction about hybrid & Ionic framework 35
- 36. Question & Answers Introduction about hybrid & Ionic framework 36
- 37. • Ionic present slide: http://ionicframework.com/present- ionic/slides/#/6 • Hybird vs native mobile: http://www.ymedialabs.com/hybrid-vs-native-mobile- apps-the-answer-is-clear/ • Ionic Framework: http://ionicframework.com/docs/ References Introduction about hybrid & Ionic framework 37
- 38. Thank you Introduction about hybrid & Ionic framework 38