> Mobile world > Hybrid Apps vs Native Apps > Cordova and Its Architecture > What and Why IONIC ? > What Techniologies IONIC does it use ? > Ionicon and Its usage > IONIC CLI > IONIC and Packed Android Project File Structure. > Example To Do List

1. WELCOME TO CROSS PLATFORM MOBILE WORLD &
MY PRESENTATION 
Fuat Buğra AYDIN
Hybrid Apps with Cordova,
Angular & IONIC
1

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 2

3. Apps in Mobile World
3

4. Do you need a mobile app ?
4

5. •Native applications
•Cross platform(hybrid) applications
You have 2 chance:
5

6. • Platform specific
• Respective development tools
• Best performance
• Time consuming
• Expensive development
Native Apps
6

7. Programming Language IDE App
Native Development
7

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

9. You need cool web technologies..
9

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

11. More Platforms, More Problems
11

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

13. Cordova Architecture
13

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
14

15. Installing Cordova
$ npm install -g cordova
15

16. What is Ionic ?
16

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
17

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. 18

19. What technologies does it use ?
19

20. Superheroic JavaScript MVW Framework
AngularJS Provides; Directives, Filters, Dependency
Injection, Two-way data binding, Services,
Testability
20

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.
• ..
21

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
• …
22

23. •Developed by Twitter.
•Uses Git Version system
•Don’t need to go to development tool
location.
$ bower install bootstrap
23

24. Ionicons
Over 700 MIT licensed font-icons included
ionicons.com 24

25. Usage of Ionicons
25

26. Ionic solves multiple device
resolution issues
26

27. Let’s see some ionic directives
27

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

29. • ion-content: Provides an easy to use content
area that can be configured to use Ionic’s
custom Scroll View
• ion-list: The List is a widely used
interface element in almost any mobile app.
• ion-item: List items with its format.
29

30. UI Component Overview
30

31. List Dividers
31

32. Example to List
32

33. Side Menu
33

34. Slide Box
34

35. Action Sheet
35

36. 36

37. Install Ionic & Cordova Globally
$ npm install -g ionic cordova
37

38. Clone demo project
$ ionic start <project name> <template name>
38

39. Ionic Templates
39

40. Ionic Project File Structure
40

41. Test on Web Browser
$ ionic serve
41

42. It is time to Google Chrome to test dynamic
changes
42

43. Add a platform
$ cd <project name>
$ ionic platform add <platform name>
43

44. Build application
$ ionic build <platform name>
44

45. Android Project File Structure
45

46. Run on device/emulator
$ ionic emulate <platform name>
46

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
47

48. UI Router
48

49. Let’s code something
49

50. Create data by using controller in app.js1
Don’t forget to add the ng-controller attribute to body
50

51. List items with ion-items using ng-repeat in ion-list2
Don’t forget to add complete class to style.css file.
51

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
52

53. Let’s add ion-option-button’s for Delete and Edit4
53

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.
54

55. Ionic Creator
55

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
56

57. Questions ?
57