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!