Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating an hybrid app in minutes with Ionic Framework

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

Creating an hybrid app in minutes with Ionic Framework

  1. 1. Building Hybrid apps Ionic - AngularJS - Cordova
  2. 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. 3. Native Apps • Platform specific • Respective development languages/tools • Best performance • Expensive development More Platforms, More Problems
  4. 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. 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. 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. 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)
  8. 8. 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/
  9. 9. Dev ionic serve HTTP server + live reload ionic serve —lab HTTP server + live reload with Android & iOS preview
  10. 10. 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
  11. 11. Android Debug • Chrome DevTools with an Android device connected
  12. 12. Build iOS • $ ionic platform add ios • $ ionic build ios • $ sudo npm install -g ios-sim • $ ionic emulate ios iOS Simulator Prerequisite: OSX, Xcode
  13. 13. iOS debug https://github.com/google/ios-webkit-debug-proxy • Chrome DevTools and iOS simulator
  14. 14. Android Performance • at least ionic CLI 1.3.10 • $ ionic browser add crosswalk • $ ionic build android • .apk 3Mb => 24Mb Crosswalk https://crosswalk-project.org
  15. 15. Splashscreens and Icons… • Width and Height • Density • OS • Landscape / Portrait • config.xml … …are a pain config.xml
  16. 16. 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!
  17. 17. Built with Ionic • Installs: 500,000 - 1,000,000 • Reviews: 4.4/5 Sworkit …Hybrid and quality can be friends
  18. 18. Q & A http://julienrenaux.fr/2015/02/17/creating-an-hybrid-app-in- minutes-with-ionic-framework/ Presentation: Twitter: https://twitter.com/julienrenaux

    Be the first to comment

    Login to see the comments

  • ashishapy

    Feb. 15, 2015
  • RangelTorrezan

    Feb. 15, 2015
  • antdimot

    Feb. 16, 2015
  • alessiodel

    Feb. 18, 2015
  • pedromsluz

    Mar. 13, 2015
  • deepplin

    Mar. 15, 2015
  • JampGold

    Mar. 17, 2015
  • XiutingLiang

    Mar. 25, 2015
  • sbepstein

    Mar. 27, 2015
  • ssusercbf9c9

    Apr. 24, 2015
  • jafarmirzaei1

    Jun. 14, 2015
  • dgpao

    Sep. 3, 2015
  • WanMuzaffar

    Oct. 29, 2015
  • yustein

    Dec. 11, 2015
  • ennedigi

    Jan. 27, 2016
  • SupapongPutthayangkura

    Jun. 30, 2016
  • AndrClemer

    Aug. 26, 2016

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

Views

Total views

9,671

On Slideshare

0

From embeds

0

Number of embeds

2,273

Actions

Downloads

278

Shares

0

Comments

0

Likes

17

×