Ionic Framework : Next Generation Open Source Framework for Cross Platform Mobile App Development
Building mobile app with Ionic Framework
description
Transcript of Building mobile app with Ionic Framework
Building Mobile App with Ionic Framework
Huy Tranhttp://codedaily.vn
Da Nang Java Developer Community
Who am I?
Tran Duc HuyHybrid Mobile Developer at Axon Active VietnamWebsite: http://codedaily.vnSkype: huydotnet
Interest:– Mobile Development– Game Development
Agenda
▪ Why make mobile apps?
▪ Hybrid vs Native
▪ Introduce AngularJS
▪ Introduce Ionic Framework
▪ Coding time
▪ Now what?
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– ...
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...>
Why make mobile apps?
Let's try Hybrid!
Hybrid vs Native
Let's the war begin!
BAD
Only run on browserNo Hardware interactive
GOOD
Use Objective-C, JavaBest performanceHardware interactive
GOOD
Use HTML/CSS/JSRapid development
Easy to customize UICross-platform, Cross-
browserBAD
Not so fast developmentHard to customize UIRun only one platform
Hybrid vs Native
A new hero has come!
Hybrid vs Native
Hybrid vs Native
AngularJS
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
Ionic Framework
Ionic Framework
• 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
is:
npm install -g cordova ionic
Ionic Framework
Installation:1. Install Node.js2. Install Cordova, Ionic:
For Android:1. Install Android SDK2. Install Brew and Ant3. Install Genymotion for
test
For iOS:1. Install ios-sim2. Need to run on Mac
ionic start <your-app-name>
Ionic Framework
Create new project
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]
Let's take a break!
OK... enough talk...
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/CSS2. Connecting data (ng-repeat)3. Add new item (ng-click)4. Build to device
Dojo:
5. Check done item (ng-click)6. Search item (filter)7. Done items list (ng-if)8. Saving data (localStorage)
Now what?
Slide & source code available at: http://codedaily.vn
Learning AngularJShttps://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/
Ionic Framework CSS/JS componentshttp://ionicframework.com/docs/
Ionic Framework Exampleshttp://codepen.io/ionic/
IonIcons: Icon library for Ionic http://ionicons.com
We’re done!
Thank you!