Ionic Hybrid Mobile Application
3 likes•998 views
The document discusses Ionic, an open source framework for developing hybrid mobile apps using HTML5. It provides an agenda that covers why hybrid apps may not be ideal, an introduction to Ionic and AngularJS, a quick start guide to creating an Ionic app including installation, building a small app, and tips. Resources for further learning about Ionic and AngularJS are also listed. The presentation aims to explain what Ionic is, how to get started building Ionic apps, and take questions from the audience.
Ionic Hybrid Mobile Application
- 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!