© Zühlke 2013 Oliver Brack Workshop 6 (ws6C) native Entwicklung für mobile Geräte Mono 11. März 2013 Folie 1

© Zühlke 2013 Oliver Brack Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack HSR Hochschule für Technik Rapperswil Informatikstudium 2003 – 2006 Zühlke Engineering AG Software Engineer 2007 – 2012 HWZ Hochschule für Wirtschaft Zürich EMBA & MBA in International Business 2010 – 2012 Zühlke Engineering AG Lead Software Architect 2013 – heute Client-Entwicklung mit.NET Projektleitung Schwerpunkte 11. März 2013Folie 2

© Zühlke 2013 Lernziele : Die Studierenden können die Client-Software einer Beispielanwendung für die aktuellen mobilen Plattformen iOS, Android und Windows Phone 8 entwickeln. Sie können Mono (C#) als plattformunabhängige Entwicklungsumgebung für mobile Endgeräte einsetzen. Die Studierenden kennen die Herausforderungen der User Interface-Entwicklung für die verschiedenen mobilen Geräte. Sie können argumentieren für welche Aufgaben und Anforderungen sie welche Plattform / Technologie einsetzen würden. hnis/aktuelle-workshops Was machen wir in diesem Workshop? Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 3

© Zühlke 2013 «Flughöhe» des Workshops Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack Beginner Advanced Expert Dieser Kurs Semesterarbeit > 1 Jahr Projekterfahrung Level Tech. 11. März 2013Folie 4

© Zühlke 2013 Was machen wir in diesem Workshop? Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 5

© Zühlke 2013 Unser Plan (1/2) (Romano) Einführung, «Mega CRM», Aufsetzen (Romano) Einführung in Windows Phone 8 Entwicklung (Romano) Umsetzung «Mega CRM» mit Windows Phone (Oliver) Einführung in Mono-Entwicklung (Oliver) Umsetzung «Mega CRM» mit MonoTouch (Oliver) Umsetzung «Mega CRM» mit MonoDroid Kein Workshop (Ostern) (Michael) Einführung in iOS Entwicklung (Michael) Umsetzung «Mega CRM» mit iOS (Michael) Umsetzung «Mega CRM» mit iOS Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 6

© Zühlke 2013 Unser Plan (2/2) (Philipp) Einführung in Android (Philipp) Umsetzung «Mega CRM» mit Android Kein Workshop (Projektwoche) (Philipp) Umsetzung «Mega CRM» mit Android (Matthias) Einführung in PhoneGap (Matthias) Umsetzung «Mega CRM» mit PhoneGap (alle) Präsentation Eurer Arbeit Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 7

© Zühlke 2013 Prototyp eines Workshoptags Repetition (5’) Was machen wir heute (5’) Theorie (35’) Pause Hands on (40’) Retrospective (5’) – Was war gut? – Was kann verbessert werden? Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 8

© Zühlke 2013 Entwicklungsumgebungen eingerichtet – inkl. Emulator für Android Lauffähige App je Client (iOS/Android) – Karten-App als Beispiel Grundlagen der Entwicklungsumgebung(en) – UI-Elemente im Code ansprechen – Designer nutzen (bei Bedarf) – kompilieren, deployen, debuggen (Emulator) Erster Workshop Ziele Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 9

© Zühlke 2013 Erster Workshop Agenda Einführung (5’) Mono (15’) Karten-App (20’) – Einführung – Erste Schritte Pause (5’) Demo iOS (10’) Demo Android inkl. Emulator (15’) Karten-App (15’) Retrospektive und Ausblick (5’) – Was war gut? – Was kann verbessert werden? Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 10

© Zühlke 2013 Workshop 6 (ws6C) native Entwicklung für mobile Geräte Oliver Brack Mono Was ist MonoTouch bzw. Mono for Android? 11. März 2013 Folie 11

© Zühlke 2013 Gemeinsamer Code (DRY) Service (Azure) Business Layer Kundendaten User Interface Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 12

© Zühlke 2013 Kompetenzen Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack Plattformspezifisch Mono Service Objective-C Java z.B..NET.NET 11. März 2013Folie 13

© Zühlke 2013 Kompetenzen Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack Plattformspezifisch Mono Objective-C - Xcode Objective-C - Xcode z.B..NET.NET (C#) - Xcode - XML.NET (C#) - Xcode - XML Java - XML Java - XML 11. März 2013Folie 14

© Zühlke 2013 Weiterhin C# – Konzepte – Code – Tools, Prozesse Mehrere Plattformen – Quellcode hybrid – App nativ (Store) – Zugriff auf Hardware – Natives UX (z.B. UI-Controls) Kompetenzen – Technologie-Portfolio (Kosten) – Fokussierung – Austauschbarkeit (Risiken) Vorteile Mono Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 15

© Zühlke 2013 Xamarin 2.0 MonoTouch bzw. Mono for Android Xamarin 2.0 MonoTouchMono for Android SpracheC# (statt Objective-C)C# (statt Java) FrameworkMono IDE MonoDevelop, Xamarin Studio, (Visual Studio) MonoDevelop, Xamarin Studio, Visual Studio UI-Designer Xcode Xamarin Studio, Visual Studio, Eclipse HardwareIntel-Mac Windows PC /Intel-Mac PreiseXamarin: USD 299.-/Jahr* Apple Dev: USD 99.-/Jahr Xamarin: USD 299.-/Jahr* Google Dev: USD 25.-/Jahr Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack *: verschiedene Preispläne, siehe WebseiteWebseite 11. März 2013Folie 16

© Zühlke 2013 «Ahead of Time» Kompilierung (AOT) – Runtime wird nicht installiert – Native App entsteht (Store) – Quellcode hybrid Xamarin wrappt native APIs (Apple bzw. Google) – Namespaces grösstenteils gleich (Dokumentation) – Vorgehen automatisiert (schnelle Updates).NET Framework nutzen – Funktionsumfang Silverlight 4 – Keine Codegenerierung zur Laufzeit (z.B. Emit) – Einschränkungen bei Reflection und Generics (Laufzeit) – Nur benutzte Assemblys werden mitkompiliert – «Framework-Komfort» (z.B. Garbage Collection) Wie funktioniert Mono? Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 17

© Zühlke 2013 Workshop 6 (ws6C) native Entwicklung für mobile Geräte Oliver Brack Karten-App Beispielapplikation für Workshop März 2013 Folie 18

© Zühlke 2013 Seid Ihr bereit für Mono? (1/2) – Allgemein Apple Rechner mit OS X – Xcode 4.6 (über App Store) – Xamarin for Mac ( PC mit Windows 7 (optional, empfohlen) – Visual Studio 2010 (wenn Entwicklung in VS statt Xamarin Studio gewünscht, empfohlen) – Xamarin for Windows ( Xamarin Account – Begin a 30-day-Trial: platform/getting_started/beginning_a_xamarin_trial (nötig, um App im Emulator laufen zu lassen) platform/getting_started/beginning_a_xamarin_trial Hardware (optional) – iOS-Gerät (iPhone, iPod Touch) – Android-Gerät Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 19

© Zühlke 2013 Seid Ihr bereit für Mono? (2/2) Erster Workshop ( ) Google APIs für Android 4.0 (API14) – maps_and_location/part_2_-_maps_api Kapitel «Google APIs Add-On» maps_and_location/part_2_-_maps_api Google Maps API Key – Für gewünschte Android-Entwicklungsplattform (Windows oder OS X): maps_and_location/obtaining_a_google_maps_api_key maps_and_location/obtaining_a_google_maps_api_key Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 20

© Zühlke 2013 Karten-App Screenshots Musterlösungen iOS Android Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 21

© Zühlke 2013 Koordinaten FHNW: ° N, 8.213° E Zühlke: ° N, ° E iOS Hilfsklasse mit Extension Method für MKMapView-Control: MapExtensions.CenterMap() MapExtensions.CenterMap() – Komfortables Zentrieren/Zoomen der Karte Android Tutorial von Xamarin zur Orientierung Tutorial von Xamarin Karten-App Hilfen Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 22

© Zühlke 2013 Vorbereitungen (wenn noch nicht erledigt) – Google APIs für Android 4.0 (API14) herunterladen – Google Maps API Key erzeugen Solutions mittels Template erstellen – iOS: iOS > iPhone > Single View Application – Android: Android > Android Application Karten-Control verwenden – iOS: Map View (Xcode) – Android: com.google.android.maps.MapView (XML, API Key einsetzen) App in Emulator starten – Android: Emulator mit Google API erstellen (AVD Manager, Demo) – Breakpoint setzen und debuggen Karten-App Erste Schritte Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 23

© Zühlke 2013 iOS Sogenannte «Outlets» in UI-Editor (Xcode) erstellen: drag-and-drop-in-xcode-4/ drag-and-drop-in-xcode-4/ Outlets sind im Code direkt als Instanzvariablen ansprechbar Android Benennung mit ID direkt in UI-XML: Ansprechen im Code via FindViewById-Methode und Resource- Konstante: var mapView = FindViewById (Resource.Id.map); Demo UI-Elemente ansprechen Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 24

© Zühlke 2013 Map View Outlet erstellen Map View aus Code ansprechen Toolbar mit Buttons Demo iOS Karten-App 11. März 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver BrackFolie 25

© Zühlke 2013 Emulator Google APIs – API Level 14 Snapshot Karten-App com.google.android.maps.MapView ID zuweisen MapView aus Code ansprechen LinearLayout mit Buttons Demo Android Emulator erstellen und Karten-App Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 26

© Zühlke 2013 Layout gemäss Screenshots – Karten-Control – Toolbar (bzw. LinearLayout) mit Buttons Zentrierung auf Koordinate mittels Button-Click – UI-Controls aus Code ansprechen – iOS: Hilfsklasse für Zentrierung Entwicklungsumgebung nutzen – Debuggen (Schritt für Schritt) – Breakpoints – Call Stack – Watch (Variablen) Weitere Ausbauschritte – Aktuelle Koordinate/Zoomstufe anzeigen – Layers (z.B. Verkehr) oder Overlays anzeigen – GPS zur Positionierung nutzen Karten-App Fertig stellen Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 27

© Zühlke 2013 Was war gut? Alle haben nun lauffähige Umgebungen. Was kann verbessert werden? Lieber vormachen am Beamer und alle machen 1:1 mit. Vorbereitung der Studenten. Retrospektive 11. März 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver BrackFolie 28

© Zühlke 2013 Seid Ihr bereit für Mono? Zweiter Workshop ( ) Karten-App (iOS und Android) – max: selber fertig stellen – min: Musterlösungen verstehen – MonoTouch.FHNW.Map.zip MonoTouch.FHNW.Map.zip – MonoDroid.FHNW.Map.zip MonoDroid.FHNW.Map.zip ServiceStack anschauen – MonoTouch.Dialog anschauen – – ch.dialog ch.dialog Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 29

© Zühlke 2013 Links Präsentationen Source Code \\Fsemu18.edu.ds.fhnw.ch\e_18_data11$\E1862_U nterrichte_I\E1862_6iCa\ws6C\ \\Fsemu18.edu.ds.fhnw.ch\e_18_data11$\E1862_U nterrichte_I\E1862_6iCa\ws6C\ Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 30