ionic hybrid mobile application
TRANSCRIPT
![Page 1: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/1.jpg)
IONIC HYBRID MOBILE APPS@ALSAYEDGAMAL
![Page 2: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/2.jpg)
EGO
ABOUT ME
▸ Software Engineer @ MC
▸ I <3 Open Source
▸ I Advocate Open Source.
▸ Web Development is my main area of expertise.
▸ GDG serial speaker / volunteer.
▸ Originally from Mansoura
![Page 3: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/3.jpg)
WHAT TO EXPECT?
AGENDA
▸ Why not Hybrid?
▸ An introduction to ionic framework.
▸ Quick AngularJS introduction.
▸ A quick start guide.
▸ Installation
▸ Small app
▸ Tips and tricks for ionic.
▸ Resources and Summary.
▸ Q&A
![Page 4: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/4.jpg)
HYBRID APPLICATIONS’ SUCKS!
M. Abdullatif ~ Native Apps developer
![Page 5: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/5.jpg)
WHAT DO YOU THINK ?
![Page 6: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/6.jpg)
SOUNDS COOL WHAT IS IT ?
WHAT’S IONIC
▸ Ionic is the missing piece.
▸ Ionic’s ultimate goal is to make it easier to develop native mobile apps with HTML5, also known as Hybrid apps.
▸ It’s not replacement for Cordova / phoneGap.
▸ It’s not replacement for your JS framework.
▸ It’s not a css framework also but it did/ is doing pretty much the same what Twitter Bootstrap did to web.
![Page 7: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/7.jpg)
SOUNDS COOL WHAT IS IT ?
NO REALLY, WHAT’S IONIC
▸ Ionic is open source.
▸ Ionic is wrapper for Cordova.
▸ Ionic is utilising AngularJS specially in 2-way data binding, routing, directives, etc.. to make the user experience more standard and user friendly.
▸ Ionic look and feel is so native specially for iOS7+.
▸ Ionic provides a toolset for developers and designers to do a quick yet professional apps. icon set, different view types, etc..
▸ Ionic utilises great pool of ngCordova plugins that interacts with device sensors like camera, GeoLocation, etc..
![Page 8: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/8.jpg)
BEFORE WE START
QUICK ANGULARJS INTRODUCTION
▸ AngularJS by Google
▸ Session of last year’s DevFest by Bingo
▸ 2-way binding.
▸ Directives.
▸ Controllers.
▸ Dependency Injection.
▸ Services.
![Page 9: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/9.jpg)
IT’S IONIC TIME
GETTING STARTED WITH IONIC
▸ Installation
▸ npm install -g cordova ionic
▸ npm install ios-sim
▸ yo ionic #for Yeoman people
▸ ionic platform add <platform name>
▸ ionic build # just for building
▸ ionic emulate #emulator / simulator
▸ ionic run #device test
![Page 10: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/10.jpg)
INSIDE IONICE
IONIC INTERNALS
▸ Directory structure
▸ Config.xml
▸ Routing
▸ Templates
▸ Controllers
![Page 11: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/11.jpg)
SAVE SOME SEARCH TIME
TIPS AND TRICKS
▸ Use proxies whenever you interact with APIs to avoid CORS.
▸ Run ionic serve -cls to have console and livereload.
▸ Always test on device.
▸ Use the xcode project to run on iOS device.
![Page 12: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/12.jpg)
HELP
RESOURCES
▸ angularjs.org
▸ https://github.com/diegonetto/generator-ionic
▸ http://courseware.codeschool.com/shaping-up-with-angular-js/Slides/level01-05.pdf
▸ http://ngcordova.com/docs/
▸ http://learn.ionicframework.com/
![Page 13: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/13.jpg)
QUESTIONS ?
![Page 14: Ionic Hybrid Mobile Application](https://reader033.vdocuments.net/reader033/viewer/2022042706/5884db7c1a28ab4b778b505d/html5/thumbnails/14.jpg)
THANK YOU!