Creating an hybrid app in minutes with Ionic Framework
•
18 likes•9,776 views
Creating an hybrid app in minutes with Ionic Framework. * Technology presentation * Creating a ionic project * Building android/iOS apps * Debugging tools * Splashscreens and icons helper
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to Creating an hybrid app in minutes with Ionic Framework
Similar to Creating an hybrid app in minutes with Ionic Framework (20)
Recently uploaded
Recently uploaded (20)
Creating an hybrid app in minutes with Ionic Framework
- 1. Building Hybrid apps Ionic - AngularJS - Cordova
- 2. Summary • Native Apps vs Hybrid Apps • Hybrid technologies • Creating an Hybrid project with Ionic • Build Android / iOS • Debug Android / iOS • Splashscreens & Icons • Q & A
- 3. Native Apps • Platform specific • Respective development languages/tools • Best performance • Expensive development More Platforms, More Problems
- 4. Hybrid apps • Platform independent (iOS, Android etc.) • HTML5, CSS3 & JS • Limited performance • Quick & Cheap development • Direct access to native APIs with Cordova Cross Platform Technologies
- 5. AngularJS • Created by Miško Hevery and Adam Abrons in 2009 • JavaScript MVC • 106 kb production version (minified) • 35310 stars on GitHub • 2nd most popular open source project
- 6. Cordova • 2009: 1st developed at an iPhoneDevCamp event • 2009: Developers form a company, Nitobi • 2011: Adobe acquires Nitobi • 2011: Adobe open sources PhoneGap project to Apache • 2012: Apache gives the project the name Cordova
- 7. Ionic Framework • Started in 2014 • 13700 stars on Github • Top 50 most popular open source projects in the world • Over 320,000 apps created 2014 (Every month, over 50,000 new apps) • Based on AngularJS • Set of tools to create hybrid apps: Directives, Services, Web server, Cli, design helpers (sass, splashscreens, logo)
- 9. Install • $ sudo npm install -g cordova ionic • $ ionic start my-app sidemenu (sidemenu is a scaffolding shared by ionic) • $ cd my-app Prerequisite: NodeJS http://nodejs.org/
- 10. Dev ionic serve HTTP server + live reload ionic serve —lab HTTP server + live reload with Android & iOS preview
- 11. Build Android • export ANDROID_HOME=~/Library/Android/sdk (.bashrc or .bash_profile file) • $ ionic platform add android • $ brew install ant (iOS) / sudo apt-get install ant (linux) • $ ionic build android • $ ionic emulate android / ionic run android (if a android device is connected through USB) Prerequisite: Android SDK
- 12. Android Debug • Chrome DevTools with an Android device connected
- 13. Build iOS • $ ionic platform add ios • $ ionic build ios • $ sudo npm install -g ios-sim • $ ionic emulate ios iOS Simulator Prerequisite: OSX, Xcode
- 14. iOS debug https://github.com/google/ios-webkit-debug-proxy • Chrome DevTools and iOS simulator
- 15. Android Performance • at least ionic CLI 1.3.10 • $ ionic browser add crosswalk • $ ionic build android • .apk 3Mb => 24Mb Crosswalk https://crosswalk-project.org
- 16. Splashscreens and Icons… • Width and Height • Density • OS • Landscape / Portrait • config.xml … …are a pain config.xml
- 17. Splashscreens and Icons… • Create 2 .png or .psd files (one for icons and one for splashscreens) in a “/resources” folder • $ ionic resources …but are easy with ionic!
- 18. Built with Ionic • Installs: 500,000 - 1,000,000 • Reviews: 4.4/5 Sworkit …Hybrid and quality can be friends
- 19. Q & A http://julienrenaux.fr/2015/02/17/creating-an-hybrid-app-in- minutes-with-ionic-framework/ Presentation: Twitter: https://twitter.com/julienrenaux