Building mobile app with Ionic Framework
•Download as PPTX, PDF•
8 likes•3,677 views
This document summarizes a presentation about building mobile apps using the Ionic framework. The presentation introduces Ionic, a framework that allows developing cross-platform mobile apps using HTML, CSS, and JavaScript. It discusses the benefits of hybrid mobile development using Ionic over native development. The agenda includes explaining why to build mobile apps, comparing hybrid and native development, introducing AngularJS which powers Ionic, demonstrating how to install and use Ionic, and building a sample to-do list app to demonstrate Ionic in action.
Report
Share
Building mobile app with Ionic Framework
- 1. Building Mobile App with Ionic Framework Huy Tran http://codedaily.vn Da Nang Java Developer Community
- 2. Who am I? Tran Duc Huy Hybrid Mobile Developer at Axon Active Vietnam Website: http://codedaily.vn Skype: huydotnet Interest: – Mobile Development – Game Development
- 3. Agenda ▪ Why make mobile apps? ▪ Hybrid vs Native ▪ Introduce AngularJS ▪ Introduce Ionic Framework ▪ Coding time ▪ Now what?
- 4. Why make mobile apps? ▪ You want to make mobile app because: – The world is moving – Everybody's making mobile apps these day – It makes million dollars – For your business – ...
- 5. Why make mobile apps? ▪ But... – You're not mobile app developer? – You don't know Java, Objective-C? – You want to build app that run everywhere – <ten thousand reasons...>
- 6. Why make mobile apps? Let's try Hybrid!
- 7. Hybrid vs Native BAD Only run on browser No Hardware interactive GOOD Use Objective-C, Java Best performance Hardware interactive GOOD Use HTML/CSS/JS Rapid development Easy to customize UI Cross-platform, Cross-browser BAD Not so fast development Hard to customize UI Run only one platform
- 10. Hybrid vs Native
- 11. AngularJS
- 12. AngularJS is: -Awesome MVC framework - Developed by Google and the community - Features: • Live data binding • Two-way binding • Attaching code-behind to DOM element • Directives • Repeating DOM elements • Templates • Dependencies Injection
- 13. Ionic Framework
- 14. Ionic Framework is: • A Front-end framework for mobile apps • Contains a lot of mobile-optimized HTML, CSS and JS components • Uses AngularJS to power up your mobile apps • Uses Cordova to create, build, run, deploy mobile apps
- 15. Ionic Framework Installation: 1. Install Node.js 2. Install Cordova, Ionic: npm install -g cordova ionic For Android: 1. Install Android SDK 2. Install Brew and Ant 3. Install Genymotion for test For iOS: 1. Install ios-sim 2. Need to run on Mac
- 16. Ionic Framework Create new project ionic start <your-app-name> Test on web browser ionic serve Add mobile platform (Android or iOS) ionic platform add [android/ios] Run test on device/emulator ionic [run/emulate] [ android/ios]
- 17. OK... enough talk... Let's take a break! Do you have any question?
- 18. Build a demo Coding time!
- 19. Coding time! This is what we gonna build Simple To Do List 1. Creating UI with HTML/CSS 2. Connecting data (ng-repeat) 3. Add new item (ng-click) 4. Build to device Dojo: 1. Check done item (ng-click) 2. Search item (filter) 3. Done items list (ng-if) 4. Saving data (localStorage)
- 20. Now what? Slide & source code available at: http://codedaily.vn Learning AngularJS https://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/ Ionic Framework CSS/JS components http://ionicframework.com/docs/ Ionic Framework Examples http://codepen.io/ionic/ IonIcons: Icon library for Ionic http://ionicons.com
- 21. We’re done! Thank you!