Introduction to Ionic framework.

1. IONIC HYBRID MOBILE APPS
@ALSAYEDGAMAL

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

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

4. HYBRID
APPLICATIONS’
SUCKS!
M. Abdullatif ~ Native Apps
developer

5. WHAT DO YOU
THINK ?

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

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

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

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

10. INSIDE IONICE
IONIC INTERNALS
▸ Directory structure
▸ Config.xml
▸ Routing
▸ Templates
▸ Controllers

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

12. 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/

13. QUESTIONS ?

14. THANK YOU!