Ionic framework

Slides of SMG Internal Presentation

1. 21.12.2015 Yusuf Koraman - Software Architecture

2. Native / Web / Hybrid Native ? Web ? Hybrid ? Most popular Hybrid frameworks ? IONIC Framework ( What ? When ? Why ? ) Ionic Setup ( NodeJS & Cordova & Ionic & Emulator ) IDEs CLI Ionic Apps & IONIC Creator & IONIC View Sample Project Sample Api & Sample IONIC Project Workshop QUESTIONS?

3. Native / Web / Hybrid

4. Hybrid & Web

5. Ionic Framework & Hybrid

6. Popular Hybrid Frameworks http:// noeticforce.com/best-hybrid-mobile-app-ui-frameworks-html5-js-css http://tutorialzine.com/2015/10/comparing-the-top-frameworks-for-building-hybrid-mobile-apps /

7. IONIC Framework HTML5, AngularJS , Cordova ( PhoneGap ) Ionic  is a complete  open-source   SDK  for hybrid mobile app  development. Built on top of  AngularJS  and  Apache Cordova , Ionic provides tools and services for developing hybrid mobile apps using Web technologies like  CSS ,  HTML5 , and  Sass . Apps can be built with these Web technologies and then distributed through native  app stores  to be installed on devices by leveraging Cordova. Ionic was created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013, and is used by software developers around the World Why ? Performance obsessed,Angular & Ionic Native focused Beautifully designed A powerful CLI Fun to learn Min. DOM Manupulation Model bindings . ( AngularJS ) Documentation Extentable html & HTML5

8. IONIC - Structure

9. IONIC - Structure   config parts package.json   lists the used   NodeJS   modules bower.json   lists the used   Bower   packages config.xml  has all the properties for your created cordova project gulpfile.js   describes   GulpJS   build tasks Below files are the base for your Ionic project. They are not very different to any other AngularJS application you might have seen. Additional you have some folders: hooks/  Not that important in the beginning,contains scripts which run at specific points of the workflow. plugins/  your installed cordova plugins www/  this is where the magic happens!

10. SASS( Sysntactically Awesome Style Sheet ) - . scss IONIC - Structure

11. IONIC - Structure SASS( Sysntactically Awesome Style Sheet ) - . scss

12. Multi Platform & IONIC How to change displays for platforms ?

13. IONIC Setup Node.js NPM( Node Package Manager) Node.js Jdk JAVA_HOME’key i = jkd path ( Environment settings ) npm install -g cordova ( Cordova Installation ) npm install -g ionic ( Ionic Installation )

14. IONIC Setup

15. IDEs Android Studio Ionic Plugin Visual Studio Vs 2013 & Service Pack 1 IONIC Templates on nuget Visual Studio 2015 & Cordova Scripts Notepad ++ SublimeText 2 IONIC plugin Etc .

16. CLI

17. CLI İonic start [uygulama adı] [varsa template adı] https:// creator.ionic.io/app/dashboard/projects ionic start [ appName ] creator:93469cfcdff8

18. CLI İonic start AppName TemplateName cd myApp ionic platform add ios | ionic platform add android ionic build ios | ionic build android   ionic emulate android | ionic emulate ios   İonic serve kendisi bir host açar. İonic run > bağlı olan cihazda uygulamayı acar.

19. Ionic Apps & View & Creator https:// apps.ionic.io/apps https://creator.ionic.io /

20. IONICBank

21. Question s