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 3. 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 4. Why make mobile apps? 5. 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 –... 6. 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 –………. 7. Let's try Hybrid! 8. Hybrid vs Native 9. Hybrid VS Native •Native Apps ● Platform specific ● Respective development tools ● Time consuming ● Expensive development 10. More Platforms, More Problems 11. You need cool web technologies.. 12. Hybrid VS Native •Hybrid Apps ● Platform independent (iOS, Android etc.) ● HTML5, CSS3 & JS ● Quick development ● Direct access to native APIs with Cordova 13. Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript 14. •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 15. What is Cordova •Platforms ● Android ● Blackberry ● FirefoxOS ● iOS ● Tizen ● WebOS ● Windows Phone 7 ● Windows Phone 8 16. What is Cordova •Plugins ● Battery Status ● Camera ● Contacts ● Device Orientation ● Dialogs ● File Transfer ● Geolocation ● Media Capture ● Network Information ● Splashscreen ● Statusbar ● Vibration 17. Single Page Application Framework 18. What is ? - MVC Framework. - Developed by Google and the community is: 19. What is ? Directives 20. What is ? Controller & scope 21. What is ? Model 22. What is ? Routing 23. What is ? 24. •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 ? 25. What is Ionic solves multiple device resolution issues 26. List 27. Tabs 28. Pull To Refresh 29. Side Menu 30. Install Ionic & Cordova Globally npm install -g ionic cordova 31. Ionic Templates ionic start app blank ionic start app tabs ionic start app sidemenu 32. 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] 33. Do you have any question? 34. < Coding Time /> 35. Thank you!