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!