21.12.2015Yusuf Koraman - Software Architecture

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?

Native / Web / Hybrid

Hybrid & Web

Ionic Framework & Hybrid

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-hy

brid-mobile-apps/

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

IONIC - Structure

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 tasksBelow 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!

SASS(Sysntactically Awesome Style Sheet) - .scss

IONIC - Structure

IONIC - Structure

SASS(Sysntactically Awesome Style Sheet) - .scss

Multi Platform & IONIC

How to change displays for platforms?

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)

IONIC Setup

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.

CLI

CLI

İonic start [uygulama adı] [varsa template adı]

https://creator.ionic.io/app/dashboard/projects ionic start [appName] creator:93469cfcdff8

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.

Ionic Apps & View & Creator

https://apps.ionic.io/apps https://creator.ionic.io/

IONICBank

Questions