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. Questions