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

8. Hybrid vs Native

9. Hybrid vs Native

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!