Building Mobile Apps with Cordova , AngularJS and Ionic

Who am I ?

• Soltani Kadhem

• Web & Mobile Developer at Novavision-it

• Website: www.kadhem-soltani.com

• Twitter : @kadhem_soltani

Agenda

1. Why make mobile app

2. Hybrid VS Native

3. What is Cordova ?

4. What is AngularJS ?

5. What is Ionic Framework ?

6. Q&A

7. Coding Time

Why make mobile apps?

Why make mobile apps ?

• You want to make mobile app because:

– The world is moving

– Everybody's making mobile apps these day

– For your business

– ...

Why make mobile apps ?

• But:

– You're not mobile app developer?

– You don't know Java, Objective-C , c#?

– You want to build app that run everywhere

– ……….

Let's try Hybrid!

Hybrid vs Native

Hybrid VS Native

• Native Apps

● Platform specific

● Respective development tools

● Time consuming

● Expensive development

More Platforms, More Problems

You need cool web technologies..

Hybrid VS Native

• Hybrid Apps

● Platform independent (iOS, Android etc.)

● HTML5, CSS3 & JS

● Quick development

● Direct access to native APIs with Cordova

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript

• 2009: PhoneGap started at Nitobi • 2011: PhoneGap purchased by Adobe • 2012: PhoneGap donated from Adobe to Apache • Software Foundation, and renamed as Cordova • Today: PhoneGap is a distribution of Cordova

PhoneGap vs. Cordova

What is Cordova

• Platforms

● Android ● Blackberry ● FirefoxOS ● iOS ● Tizen ● WebOS ● Windows Phone 7 ● Windows Phone 8

What is Cordova

• Plugins

● Battery Status ● Camera ● Contacts ● Device Orientation ● Dialogs ● File Transfer ● Geolocation ● Media Capture ● Network Information ● Splashscreen ● Statusbar ● Vibration

Single Page Application Framework

What is ?

- MVC Framework. - Developed by Google and the community

is:

What is ?

Directives

What is ?

Controller & scope

What is ?

Model

What is ?

Routing

What is ?

• A Front-end framework for mobile apps • Contains a lot of mobile-optimized HTML, CSS and JS

components • Best Friend with AngularJs • Uses Cordova to create, build, run, deploy mobile apps

is:

What is ?

What is

Ionic solves multiple device resolution issues

List

Tabs

Pull To Refresh

Side Menu

Install Ionic & Cordova Globally

npm install -g ionic cordova

Ionic Templates

ionic start app blank ionic start app tabs ionic start app sidemenu

Add Platform, Build & Emulate

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]

Do you have any question?

< Coding Time />

Thank you!