Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
Presentation
Presentation
Wird geladen in …3
×

Hier ansehen

1 von 18 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Ionic (20)

Anzeige

Aktuellste (20)

Anzeige

Ionic

  1. 1. Umut IŞIK Hybrid Mobile Application Development With Ionic
  2. 2.  Mobile Application Development (M.A.D)  Introduction  Problem  Hybrid App  Ionic  Demo Agenda
  3. 3. Mobile First  Responsive Web Design  Mobile Application M.A.D. / Introduction
  4. 4. A mobile app is a computer program designed to run on mobile devices such as smartphones and tablets etc. M.A.D. / Introduction
  5. 5. Market Share * 4Q14 fiqures, IDC Worlwide Quarterly Mobile Phone Tracker, February 24, 2015 M.A.D. / Introduction Platform Share Android 76.6 iOS 19.7 Windows 2.8 Other 0.9
  6. 6. Native App Programming M.A.D. / Introduction
  7. 7. Native App Programming  Platform Specific Development  Different programing languages, APIs and proccess  Testing  Different Version of OS  Android  Major Releases of Platforms  Objective C -> Swift M.A.D. / Problem
  8. 8. Hybrid App  Cross platform application  Developed with HTML, JavaScript, and CSS  Having access to the device’s features M.A.D. / Hybrid App
  9. 9. How? By utilizing the mobile platform’s WebView. A fullscreen browser window M.A.D. / Hybrid App
  10. 10. Basics  Develop in a similar manner as websites  Use the HTML, CSS, and JavaScript  WebView helps to access device  Test mostly in browser M.A.D. / Hybrid App
  11. 11. Hybrid vs Native M.A.D. / Hybrid App Hybrid Native • The development is faster, simpler and more rapid • The application is easier to maintain • Application performance • fast and fluid animations • full access to phone hardware
  12. 12. M.A.D. / Hybrid App Frameworks  Ionic http://ionicframework.com/  INTEL-XDK https://software.intel.com/en-us/intel-xdk  Mobile Angular UI http://mobileangularui.com/  Appcelerator http://www.appcelerator.com/product/  Sencha Touch https://www.sencha.com/products/touch/,  Kendo UI http://www.telerik.com/kendo-ui  Phonegap http://phonegap.com/
  13. 13. Why?  Free and open source,  A compact library of mobile-optimized HTML, CSS and JS components, gestures, and tools  Sass  AngularJS  Documentation & community  Powerfull CLI M.A.D. / Ionic
  14. 14. Ionic App Stack  AngularJS: Javascript MVW Framework  WebView: We already know  Cordova: Device API for Javascript *MVW : Model View Whatever (MVC/MVVM/MVP) M.A.D. / Ionic
  15. 15. Install Ionic Needs NodeJS npm M.A.D. / Ionic $ npm install -g ionic
  16. 16. Create Ionic Project M.A.D. / Ionic $ ionic start myproject bower.json config.xml gulpfile.js hooks ionic.project package.json platforms plugins resources scss www
  17. 17. Run Ionic Project M.A.D. / Ionic $ ionic serve
  18. 18. Reddit Mobile App  List the contents  Side Menu  Open the link on native browser  Build and emulate on android  Create icons and splash screen  Create APK and install on a phone M.A.D. / Demo

×