Ionic Hybrid Mobile Application
-
Upload
al-sayed-gamal -
Category
Software
-
view
696 -
download
0
Transcript of Ionic Hybrid Mobile Application
IONIC HYBRID MOBILE APPS@ALSAYEDGAMAL
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
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
HYBRID APPLICATIONS’ SUCKS!
M. Abdullatif ~ Native Apps developer
WHAT DO YOU THINK ?
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.
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..
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.
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
INSIDE IONICE
IONIC INTERNALS
▸ Directory structure
▸ Config.xml
▸ Routing
▸ Templates
▸ Controllers
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.
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/
QUESTIONS ?
THANK YOU!