Nothing Special   »   [go: up one dir, main page]

Academia.eduAcademia.edu

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 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!

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. 2. 3. 4. 5. 6. 7. Why make mobile app Hybrid VS Native What is Cordova ? What is AngularJS ? What is Ionic Framework ? Q&A 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 PhoneGap vs. Cordova • • • • • 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 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 ? is: - MVC Framework. - Developed by Google and the community What is Directives ? What is Controller & scope ? What is Model ? What is Routing ? What is ? What is ? 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 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!