1

WELCOME TO CROSS PLATFORM MOBILE WORLD & MY PRESENTATION

Fuat Buğra AYDIN

Hybrid Apps with Cordova, Angular & IONIC

2

Content• Mobile World• Native Applications & Cross Platform(Hybrid Applications) ?• Cordova and Cordova Architecture• Cordova Installation• What is IONIC?• Why IONIC ?• What technologies does it use ?• Ionicons• Some Ionic directives• UI Component Overview• IONIC CLI• Ionic and Android Project File Structure• Let’s code something• Ionic Creator• References

3

Apps in Mobile World

4

Do you need a mobile app ?

5

•Native applications•Cross platform(hybrid) applications

You have 2 chance:

6

• Platform specific• Respective development tools• Best performance• Time consuming• Expensive development

Native Apps

7

Programming Language IDE App

Native Development

8

Well.. Want to support all major platforms even mobile web ?

9

You need cool web technologies..

10

•Platform independent(IOS, Android, Windows phone etc.)•HTML5,CSS3 & JS• Limited performance•Quick development•Direct access to native APIs with Cordova

Hybrid Apps

11

More Platforms, More Problems

12

Apache Cordova is a platform for building nativemobile applications using HTML, CSS and

JavaScript

13

Cordova Architecture

14

• Amazon Fire OS• Android• Bada• Blackberry• FirefoxOS• iOS• Mac OS X• Qt• Tizen• Ubuntu• WebOS• Windows (desktop)• Windows Phone 7• Windows Phone 8• Browser

Platforms• Battery Status• Camera• Contacts• Device• Device Orientation• Dialogs• File Transfer• Geolocation• Globalization• In-App Browser• Media Capture• Network Information• Splashscreen• Statusbar• Vibration

Plugins

15

Installing Cordova

$ npm install -g cordova

16

What is Ionic ?

17

•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

18

Why Ionic ?• You can prepare the smooth interface and a practical

way.• Using Modern Web Technologies• The performance-oriented hybrid roof you can see in the

market.• Any changes you make with livereload seems to be instant.• You can prototype your application with "Ionic Creator".• You can upload your application to "Ionic View".• You can develop your application with the module angularjs state.• You can code with SASS on CSS side.

19

What technologies does it use ?

20

Superheroic JavaScript MVW Framework

AngularJS Provides; Directives, Filters, Dependency Injection, Two-way data binding, Services,

Testability

21

•Server side applications with JavaScript•V8 JavaScript Engine(Google)•Non-Blocking IO, asynchronous

mechanism.•Very Fast•npm is used to manage modules and

packages.• ..

22

•Compress CSS files.•Compress JavaScript files.•Collect the CSS and JS files to a single

file.• You can create watcher to see changes

instatly• …

23

•Developed by Twitter.•Uses Git Version system•Don’t need to go to development tool location.

$ bower install bootstrap

24

Ionicons

Over 700 MIT licensed font-icons includedionicons.com

25

Usage of Ionicons

26

Ionic solves multiple device resolution issues

27

Let’s see some ionic directives

28

• ion-header-bar: Adds a fixed header bar above some content.

• ion-footer-bar: Adds a fixed footer bar below some content.

29

• ion-content: Provides an easy to use content area that can be configured to use Ionic’scustom Scroll View

• ion-list: The List is a widely usedinterface element in almost any mobile app.

• ion-item: List items with its format.

30

UI Component Overview

31

List Dividers

32

Example to List

33

Side Menu

34

Slide Box

35

Action Sheet

36

37

Install Ionic & Cordova Globally

$ npm install -g ionic cordova

38

Clone demo project

$ ionic start <project name> <template name>

39

Ionic Templates

40

Ionic Project File Structure

41

Test on Web Browser

$ ionic serve

42

It is time to Google Chrome to test dynamic changes

43

Add a platform

$ cd <project name>

$ ionic platform add <platform name>

44

Build application

$ ionic build <platform name>

45

Android Project File Structure

46

Run on device/emulator

$ ionic emulate <platform name>

47

ngRouter ui.router

ngRouter vs ui.Router

• Single ng-view• Nested view is problem• Focus url on transition

• Multiple uı-view• Nested view• Focus url and state on transition

48

UI Router

49

Let’s code something

50

Create data by using controller in app.js1

Don’t forget to add the ng-controller attribute to body

51

List items with ion-items using ng-repeat in ion-list

2

Don’t forget to add complete class to style.css file.

52

3

Don’t forget dependency injection.

Let’s add a button to the icon-header-bar and create a function that use $ionicPopup.prompt .

3.1

3.2

53

Let’s add ion-option-button’s for Delete and Edit

4

54

Let’s add edit function and use $ionicListDelegate.closeOptionButtons()

5

Don’t forget to add $ionicListDelegate.closeOptionButtons()

to close the option buttons and its Dependency Injection.

55

Ionic Creator

56

References• https://cordova.apache.org/• http://ionicframework.com/• https://www.thepolyglotdeveloper.com• http://tolga.gezginis.com• https://kodcu.com• http://cihadhoruzoglu.com• http://www.nodejstr.com• http://www.w3schools.com/angular/• http://blog.teamtreehouse.com

57

Questions ?