Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building Mobile App with Ionic 
Framework 
Huy Tran 
http://codedaily.vn 
Da Nang Java Developer Community
Who am I? 
Tran Duc Huy 
Hybrid Mobile Developer at Axon Active Vietnam 
Website: http://codedaily.vn 
Skype: huydotnet 
I...
Agenda 
▪ Why make mobile apps? 
▪ Hybrid vs Native 
▪ Introduce AngularJS 
▪ Introduce Ionic Framework 
▪ Coding time 
▪ ...
Why make mobile apps? 
▪ You want to make mobile app because: 
– The world is moving 
– Everybody's making mobile apps the...
Why make mobile apps? 
▪ But... 
– You're not mobile app developer? 
– You don't know Java, Objective-C? 
– You want to bu...
Why make mobile apps? 
Let's try Hybrid!
Hybrid vs Native 
BAD 
Only run on browser 
No Hardware interactive 
GOOD 
Use Objective-C, Java 
Best performance 
Hardwa...
Hybrid vs Native
Hybrid vs Native
Hybrid vs Native
AngularJS
AngularJS 
is: 
-Awesome MVC framework 
- Developed by Google and the community 
- Features: 
• Live data binding 
• Two-w...
Ionic Framework
Ionic Framework 
is: 
• A Front-end framework for mobile apps 
• Contains a lot of mobile-optimized HTML, CSS and JS 
comp...
Ionic Framework 
Installation: 
1. Install Node.js 
2. Install Cordova, Ionic: 
npm install -g cordova ionic 
For Android:...
Ionic Framework 
Create new project 
ionic start <your-app-name> 
Test on web browser 
ionic serve 
Add mobile platform (A...
OK... enough talk... 
Let's take a break! 
Do you have any question?
Build a demo 
Coding time!
Coding time! 
This is what we gonna build 
Simple To Do List 
1. Creating UI with HTML/CSS 
2. Connecting data (ng-repeat)...
Now what? 
Slide & source code available at: http://codedaily.vn 
Learning AngularJS 
https://thinkster.io/angulartutorial...
We’re done! 
Thank you!
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Introduction to Ionic framework
Next
Upcoming SlideShare
Introduction to Ionic framework
Next
Download to read offline and view in fullscreen.

7

Share

Building mobile app with Ionic Framework

Download to read offline

Source code: http://codedaily.vn/downloads/todo_ionic_demo.zip

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Building mobile app with Ionic Framework

  1. 1. Building Mobile App with Ionic Framework Huy Tran http://codedaily.vn Da Nang Java Developer Community
  2. 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. 3. Agenda ▪ Why make mobile apps? ▪ Hybrid vs Native ▪ Introduce AngularJS ▪ Introduce Ionic Framework ▪ Coding time ▪ Now what?
  4. 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. 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. 6. Why make mobile apps? Let's try Hybrid!
  7. 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
  8. 8. Hybrid vs Native
  9. 9. Hybrid vs Native
  10. 10. Hybrid vs Native
  11. 11. AngularJS
  12. 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. 13. Ionic Framework
  14. 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. 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. 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. 17. OK... enough talk... Let's take a break! Do you have any question?
  18. 18. Build a demo Coding time!
  19. 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. 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. 21. We’re done! Thank you!
  • ShubhangiGupta67

    Apr. 18, 2018
  • od3n

    May. 2, 2016
  • dolphlei

    Oct. 3, 2015
  • theerasaktubrit

    Oct. 3, 2015
  • phodek

    Jun. 2, 2015
  • elredeany2010

    Jan. 20, 2015
  • ndaidong

    Oct. 13, 2014

Source code: http://codedaily.vn/downloads/todo_ionic_demo.zip

Views

Total views

3,509

On Slideshare

0

From embeds

0

Number of embeds

5

Actions

Downloads

153

Shares

0

Comments

0

Likes

7

×