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.
Upcoming SlideShare
Hybrid Apps with Angular & Ionic Framework
Next
Download to read offline and view in fullscreen.

17

Share

Download to read offline

Creating an hybrid app in minutes with Ionic Framework

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • AndrClemer

    Aug. 26, 2016
  • SupapongPutthayangkura

    Jun. 30, 2016
  • ennedigi

    Jan. 27, 2016
  • yustein

    Dec. 11, 2015
  • WanMuzaffar

    Oct. 29, 2015
  • dgpao

    Sep. 3, 2015
  • jafarmirzaei1

    Jun. 14, 2015
  • ssusercbf9c9

    Apr. 24, 2015
  • sbepstein

    Mar. 27, 2015
  • XiutingLiang

    Mar. 25, 2015
  • JampGold

    Mar. 17, 2015
  • deepplin

    Mar. 15, 2015
  • pedromsluz

    Mar. 13, 2015
  • alessiodel

    Feb. 18, 2015
  • antdimot

    Feb. 16, 2015
  • RangelTorrezan

    Feb. 15, 2015
  • ashishapy

    Feb. 15, 2015

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,685

On Slideshare

0

From embeds

0

Number of embeds

2,273

Actions

Downloads

278

Shares

0

Comments

0

Likes

17

×