Building Mobile Apps with Cordova , AngularJS and Ionic

1. Building Mobile Apps with Cordova , AngularJS and Ionic

2. Who am I ?
•Soltani Kadhem
•Web & Mobile Developer at Novavision-it
•Website: www.kadhem-soltani.com
•Twitter : @kadhem_soltani

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

5. Why make mobile apps?

6. 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
–...

7. 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
–……….

8. Let's try Hybrid!

9. Hybrid vs Native

10. Hybrid VS Native
•Native Apps
● Platform specific
● Respective development tools
● Time consuming
● Expensive development

11. More Platforms, More Problems

12. You need cool web technologies..

13. Hybrid VS Native
•Hybrid Apps
● Platform independent (iOS, Android etc.)
● HTML5, CSS3 & JS
● Quick development
● Direct access to native APIs with Cordova

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

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

16. What is Cordova
•Platforms
● Android
● Blackberry
● FirefoxOS
● iOS
● Tizen
● WebOS
● Windows Phone 7
● Windows Phone 8

17. What is Cordova
•Plugins
● Battery Status
● Camera
● Contacts
● Device Orientation
● Dialogs
● File Transfer
● Geolocation
● Media Capture
● Network Information
● Splashscreen
● Statusbar
● Vibration

18. Single Page Application Framework

19. What is ?
- MVC Framework. - Developed by Google and the community
is:

20. What is ?
Directives

21. What is ?
Controller & scope

22. What is ?
Model

23. What is ?
Routing

24. What is ?

25. •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 ?

26. What is
Ionic solves multiple device resolution issues

27. List

28. Tabs

29. Pull To Refresh

30. Side Menu

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

32. Ionic Templates
ionic start app blank
ionic start app tabs
ionic start app sidemenu

33. 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]

34. Do you have any question?

35. < Coding Time />

36. Thank you!