Mobility mit IBM Worklight Erste Schritte zu einer mobilen App Benjamin Stein, Consultant Stuttgart, 03.04.2014
Agenda Was ist IBM Worklight eigentlich? Hintergrund und Idee, Architektur und Bestandteile Live-Demo Aufsetzen der Entwicklungsumgebung, Anlegen eines Projektes, kleines Beispiel Diskussion Fragen & Antworten, Austausch 03.04.2014 2
IBM Worklight Hintergrund (1 2) Wer eine mobile App bereitstellen möchte, sieht sich mit vielen Herausforderungen konfrontiert: mit einer Vielzahl von unterschiedlichsten Zielplattformen und Endgeräten unterschiedliche Betriebssysteme unterschiedliche Bedienkonzepte unterschiedliche Auflösungen unterschiedliche Hardware mit unterschiedlichen Bandbreiten mit unterschiedlichen Benutzergruppen, -anforderungen und -verhalten 03.04.2014 Seite 3
IBM Worklight Hintergrund (2 2) MOBILE BROWSER NATIVE SHELL NATIVE SHELL HTML 5 JavaScript HTML 5 Java Script Native Code Native Code DEVICE API DEVICE API Web App Zugriff über Browser Hybrid App Herunterladbar Native App Herunterladbar 03.04.2014 Seite 4
IBM Worklight Idee Mithilfe von IBM Worklight können Sie Ihre Geschäftstätigkeit auf mobile Einheiten ausweiten. Sie erhalten eine offene, umfassende Plattform, um HTML5-basierte, hybride und native mobile Anwendungen zu erstellen, auszuführen und zu verwalten. IBM Worklight unterstützt Sie dabei, sowohl die Anwendungsentwicklungs- als auch die Wartungskosten zu senken, die Markteinführung zu beschleunigen und die Governance sowie die Sicherheit von mobilen Anwendungen zu verbessern. (IBM Homepage) IBM Worklight bietet: Unterstützung mehrerer mobiler Betriebsumgebungen und Geräte Einfache Verbindung und Synchronisierung mit Unternehmensdaten, Anwendungen, Wahrung der mobilen Sicherheit auf Geräte-, Anwendungs- und Netzebene Steuerung des mobilen Anwendungsportfolios 03.04.2014 Seite 5
IBM Worklight Architektur HTML5, Hybrid and Native Integrated Device SDKs Optimization Framework 3rd Party Library Integration Worklight Studio Build Engine ios Android Blackberry Windows Phone Windows 8 Java ME Mobile Web Desktop Web Worklight Application Center Development Team Provisioning Enterprise App Provisioning and Governance App Feedback Management Puplic App Stores Device Runtime Cross-Platform Compatibility Layer Server Integration Framework Encrypted and Syncable Storage Runtime Skinning Reporting for Statistics and Diagnostics Worklight Server DB User authentication and mobile trust Mashups and service composition JSON Translation Adapter library for backend connectivity Stats Aggregation Client-Side App Resources Direct Update Mobile Web Apps Unified Push Notification Worklight Console DOCs Reporting and Analytics Push / SMS Management App Version Management 03.04.2014 Seite 6
IBM Worklight Architektur Worklight Studio HTML5, Hybrid and Native Integrated Device SDKs Optimization Framework 3rd Party Library Integration Build Engine ios Android Blackberry Windows Phone Windows 8 Java ME Mobile Web Desktop Web Development Team Provisioning Enterprise App Provisioning and Governance App Feedback Management Puplic App Stores Cross-Platform Compatibility Layer Server Integration Framework Encrypted and Syncable Storage Runtime Skinning Reporting for Statistics and Diagnostics User authentication and mobile trust Mashups and service composition JSON Translation Direct Update Mobile Web Apps DB Adapter library for backend connectivity Reporting and Analytics DOCs Push / SMS Management App Version Management 03.04.2014 Seite 7
IBM Worklight Worklight Studio (1 / 2) Worklight Studio ist eine Mobile Development Plattform, basiert auf Eclipse (-Plugin) und bietet unter anderem folgende Funktionalitäten Support für unterschiedliche Plattformen und Endgeräte Integration von Native-Device SDKs Runtime Skins integrierte Emulatoren Support für unterschiedliche Arten von Apps Web HTML5 Support Support für unterschiedliche JavaScript- / UI- Frameworks DOJO Mobile (mit WYSIWYG) JQuery Mobile (mit WYSIWYG) Sencha Touch (ohne WYSIWYG) Hybrid Mittels Apache Cordova (PhoneGap) Native 03.04.2014 Seite 8
IBM Worklight Worklight Studio (2 / 2) Weitere Funktionalitäten und Tools Geo-Location-Toolkit Screen Templates Authentifizierung Navigation und Suche Listen Konfiguration Support für Datentransformation XML XSL JSON Support für Unified Push Notifications 03.04.2014 Seite 9
Agenda Was ist IBM Worklight eigentlich? Hintergrund und Idee, Architektur und Bestandteile Live-Demo Die Entwicklungsumgebung, Anlegen eines Projektes, kleines Beispiel Diskussion Fragen & Antworten, Austausch 03.04.2014 10
Live-Demo
Live-Demo Aufsetzen der Entwicklungsumgebung Starten von Eclipse Kepler SR1 (4.3.1) (genaue Version beachten) Über Help > Eclipse Marketplace nach Worklight suchen und über Install die Installation beginnen Alle Features auswählen und über Confirm bestätigen License Agreements akzeptieren und mit Finish bestätigen. (Installation beginnt) Abschließend muss Eclipse nach Aufforderung neu gestartet werden COPYRIGHT CENIT AG // WWW.CENIT.DE 03.04.2014 12
Live-Demo Anlegen eines Worklight Projekts (1 2) Über das Worklight Symbol (oder File > New > Project ) ein neues Worklight Projekt anlegen Name des Projekts definieren, Template auswählen und über Next bestätigen Name der App angeben und (wenn gewünscht) Java- Script Framework mittels Configure JavaScript Libraries konfigurieren 03.04.2014 Seite 13
Live-Demo Anlegen eines Worklight Projekts (2 2) Gewünschtes Framework selektieren (hier jquery Mobile) und Ordner oder Archiv wählen Gewünschte Ressourcen wählen und mit Finish bestätigen Projektanlage mit Finish abschließen. 03.04.2014 Seite 14
Live-Demo Worklight Projekt Struktur Neues Projekt inklusive der hybriden App wurde angelegt. Alle Anwendungen für dieses Projekt liegen im Ordner apps die neu angelegte Anwendung dementsprechend unter apps > NotesDayHybridApp Die zur App gehörenden Ressourcen liegen unter apps > NotesDayHybridApp > commons. So z.b. die Startseite (index.html) und die jquerymobile-dateien 03.04.2014 Seite 15
Live-Demo Optional: Server einrichten (1 3) Über Rechtsklick auf die AppRun as > BuildSettings and Deployment Target wählen im neuen Fenster Add Server selektieren Als Hostname 127.0.0.1 wählen und mit Next bestätigen 03.04.2014 Seite 16
Live-Demo Optional: Server einrichten (2 3) über New ein neues Liberty profile anlegen Beliebigen Server Namen angeben und mit Finish bestätigen, anschließend mit Next zum letzten Schritt wechseln Den Mobile Browser Simulator mit Add > hinzufügen und mit Finish anschließen. 03.04.2014 Seite 17
Live-Demo Optional: Server einrichten (3 3) Ursprungsdialog mit neuem Server und OK beenden Im Server View auf die Server Konfiguration des neuen Servers öffnen und den Punkt HTTP-Endpunkt wählen Host auf * setzen und Port definieren (z.b. 9080) Server Konfiguration speichern 03.04.2014 Seite 18
Live-Demo Anwendung auf Server deployen Über Rechtsklick auf die App, das Kontextmenü öffnen Über Run as > Run on Worklight Development Server (at 127.0.0.1) App auf entsprechendem Development Server deployen 03.04.2014 Seite 19
Live-Demo Anwendung aufrufen Über Rechtsklick auf das Projekt, Open Worklight Console aufrufen Über Preview as Common Resources App starten 03.04.2014 Seite 20
Live-Demo HTTP Adapter hinzufügen (1 2) Über Rechtsklick auf das Projekt, New > Worklight Adapter wählen Adapter Typ HTTP Adapter wählen, Namen angeben und mit Finish bestätigen Adapter.xml öffnen und procedure gibzufallszahl aufnehmen 03.04.2014 Seite 21
Live-Demo HTTP Adapter hinzufügen (2 2) Neue Klasse unter Java Resources > server/java: ZahlenGeber.java im Package com.cenit.worklight mit der Methode int gibzufallszahl() anlegen Adapter-impl.js öffnen und function gibzufallszahl() aufnehmen Adapter über Rechtsklick > Run As > Deploy Worklight Adapter deployen 03.04.2014 Seite 22
Live-Demo HTTP Adapter einbinden index.html der App um einen Button und ein Label erweitern (entweder über die Widget Palette oder in der Source Ansicht) onclick Methode gibzufallszahl() für Button hinzufügen und implementieren invocationdata mit aufzurufendem adapter und aufzurufender procedure füllen options mit Success- und ErrorHandler füllen und diese implementieren Adapter Procedure aufrufen: WL.Client.invokeProcedure( ) 03.04.2014 Seite 23
Live-Demo Ergebnis App überprüfen Die App muss neu deployt werden. Anschließend ist in der Worklight Console sowohl die App, als auch der neue Adapter ersichtlich App aus der Worklight Console aufrufen und Implementierung überprüfen. Über den neuen Button wird der Adapter und aus dem Adapter die Java Funktion aufgerufen. Das Ergebnis wird im neuen Label dargestellt. 03.04.2014 Seite 24
IBM Worklight Quellen und nützliche Links Eclipse Kepler SR1 für Java-EE-Developers: https://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplersr1 IBM Worklight Getting Started http://www.ibm.com/developerworks/mobile/worklight/getting-started.html IBM Worklight Info Center 6.1 https://pic.dhe.ibm.com/infocenter/wrklight/v6r1m0/index.jsp?topic=%2fcom.ibm.help.doc%2f wl_home.html 03.04.2014 Seite 25
Agenda Was ist IBM Worklight eigentlich? Hintergrund und Idee, Architektur und Bestandteile Live-Demo Aufsetzen der Entwicklungsumgebung, Anlegen eines Projektes, kleines Beispiel Diskussion Fragen & Antworten, Austausch 03.04.2014 26
Diskussion Fragen & Antworten, Austausch
Notes Day Agenda 03.04.2014 Seite 28
Vielen Dank! Benjamin Stein Consultant Collaboration Management Telefon +49 (711) 78 25 3262 Mobil +49 (151) 52745 435 E-Mail b.stein@cenit.de CENIT AG Industriestraße 52-54 70565 Stuttgart www.cenit.com