Hybride Mobile Apps entwickeln mit AngularJS und Ionic

26
Bastian Schramm | Harburg- Freudenberger Stefan Scheidt | OPITZ CONSULTING Hybride Apps mit Ionic

description

http://www.opitz-consulting.com/go/3-6-11 Die Entwicklung mobiler Apps mit HTML, CSS und JavaScript stellt noch immer eine Herausforderung dar. Ein neues Werkzeug, um diese Herausforderung zu meistern, ist das Ionic Framework. Es baut auf dem bekannten JavaScript-Frontend-Framework AngularJS auf und fokussiert sich auf die Gestaltung der Benutzeroberfläche einer App. Für das Deployment als hybride App unterstützt es PhoneGap. Dieser Vortrag stellt Ionic durch das Live-Entwickeln einer Beispiel-Applikation vor, die am Ende des Vortrags mit PhoneGap als App verpackt wird. Die Software-Architekten Stefan Scheidt und Bastian Schramm hielten diesen Vortrag am 3. September in Berlin bei der Mobile Tech Conference. -- Über uns: Als führender Projektspezialist für ganzheitliche IT-Lösungen tragen wir zur Wertsteigerung der Organisationen unserer Kunden bei und bringen IT und Business in Einklang. Mit OPITZ CONSULTING als zuverlässigem Partner können sich unsere Kunden auf ihr Kerngeschäft konzentrieren und ihre Wettbewerbsvorteile nachhaltig absichern und ausbauen. Über unsere IT-Beratung: http://www.opitz-consulting.com/go/3-8-10 Unser Leistungsangebot: http://www.opitz-consulting.com/go/3-8-874 Karriere bei OPITZ CONSULTING: http://www.opitz-consulting.com/go/3-8-5

Transcript of Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Page 1: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Bastian Schramm | Harburg-Freudenberger Stefan Scheidt | OPITZ CONSULTING

Hybride Apps mit Ionic

Page 2: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

[email protected]/bastian_schramm

github/bsc310

[email protected]/stefanscheidtgithub/stefanscheidt

Ihre Sprecher

Page 3: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

© OPITZ CONSULTING GmbH 2011 Seite 3<Präsentationstitel – bitte im Folienmaster ändern>

MissionWir entwickeln gemeinsam mit allen Branchen Lösungen, die dazu führen, dass sich diese Organisationen besser entwickeln als ihr Wettbewerb.

Unsere Dienstleistung erfolgt partnerschaftlich und ist auf eine langjährige Zusammenarbeit angelegt.

LeistungsangebotBusiness IT AlignmentBusiness Information ManagementBusiness Process ManagementAnwendungsentwicklungSOA und System-Integration IT-Infrastruktur-Management

MärkteBranchenübergreifendÜber 600 Kunden

29%Industrie / Versorger /

Telekommunikation

29%Handel / Logistik / Dienstleistungen

42% Öffentliche Auftraggeber / Banken und Versicherungen / Vereine und Verbände

EckdatenGründung 1990 400 Mitarbeiter9 Standorte

Page 4: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Bestandteil der POSSEHL Gruppe Gründung 1879 > 1100 Mitarbeiter 5 Produktionsstandorte

EckdatenLeistungsangebot

Mischer Mischer Automation Spezial Maschinen Service

Mission

With ambition to continuously optimize products and processes, we mix more than approx. 20 Mio. tons of rubber (40 Mio. tons compound) each year

Märkte

Page 5: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Hybrid Apps

Page 6: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Native Platform

JavaScript API

Native Bridge

Native Frameworks + SDK‘s

HTML5 App

In diesem Vortrag:

(also Cordova ...)

Page 7: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Ionic

Page 8: Hybride Mobile Apps entwickeln mit AngularJS und Ionic
Page 9: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Ionic

„Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components

for building highly interactive apps. Built with Sass and optimized for AngularJS“

http://ionicframework.com

”Ionic’s ultimate goal is to make it easier to develop native mobile apps with HTML5, also

known as Hybrid apps”

Page 10: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Ionic

„Ionic is focused mainly on the look and feel, and UI interaction of your app. “

http://ionicframework.com/docs/overview

„Ionic is that missing piece when creating native apps with web standards. Just drop in some CSS

and JavaScript, and you’ll quickly get up to speed developing native applications with HTML5. “

Page 11: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Ionic Showcases

http://showcase.ionicframework.com/

Page 12: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Ionic Showcases

Page 13: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Ionic Building Blocks

Page 14: Hybride Mobile Apps entwickeln mit AngularJS und Ionic
Page 15: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

http://cordova.apache.org

Page 16: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Windows Phone

Cordova JS API

Cordova Native Lib

Silverlight Framework + Windows Phone SDK

iPhone

Cordova JS API

Cordova Native Lib

IOS Framework + SDK‘s

Android Phone

Cordova JS API

Cordova Native Lib

Android Framework + SDK‘s

HTML5 App

Page 17: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

HTML enhanced for web apps!

Page 18: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

MV* withDependency Injection

AngularJS

http://angularjs.org/

Two-WayData Binding

DeclarativeUI Templates

Framework

Page 19: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

http://sass-lang.com

Page 20: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Getting Started ...

Page 21: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Ionic Installation und Start

$ npm install -g ionic

$ ionic start todo-app

$ cd todo-app

$ ionic platform ios

$ ionic emulate ios

$ ionic run ios

Page 22: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Demo ...

Page 23: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Beispielcode

https://github.com/opitzconsulting/ionicdemo

Page 24: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Erfahrungen

Page 26: Hybride Mobile Apps entwickeln mit AngularJS und Ionic

Herzlichen Dank fürIhre Aufmerksamkeit!

youtube.com/opitzconsulting

twitter.com/OC_WIRE

slideshare.net/opitzconsulting

xing.com/net/opitzconsulting