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

Präsentation zum Thema: "© Zühlke 2013 Oliver Brack Workshop 6 (ws6C) native Entwicklung für mobile Geräte Mono 11. März 2013 Folie 1."—  Präsentation transkript:

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

2 © Zühlke 2013 Oliver Brack oliver.brack@zuehlke.com oliver.brack@zuehlke.com 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

3 © 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. http://www.fhnw.ch/technik/bachelor/i/ic/studium/modulverzeic 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

4 © 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

5 © 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

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

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

8 © 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

9 © 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

10 © 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

11 © 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

12 © 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

13 © 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

14 © 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

15 © 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

16 © 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

17 © 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

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

19 © Zühlke 2013 Seid Ihr bereit für Mono? (1/2) 11.03.13 – 25.03.13 Allgemein Apple Rechner mit OS X 10.7.5 – Xcode 4.6 (über App Store) – Xamarin for Mac (http://xamarin.com/download)http://xamarin.com/download PC mit Windows 7 (optional, empfohlen) – Visual Studio 2010 (wenn Entwicklung in VS statt Xamarin Studio gewünscht, empfohlen) – Xamarin for Windows (http://xamarin.com/download)http://xamarin.com/download Xamarin Account – Begin a 30-day-Trial: http://docs.xamarin.com/guides/cross- platform/getting_started/beginning_a_xamarin_trial (nötig, um App im Emulator laufen zu lassen)http://docs.xamarin.com/guides/cross- 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

20 © Zühlke 2013 Seid Ihr bereit für Mono? (2/2) 11.03.13 Erster Workshop (11.03.13) Google APIs für Android 4.0 (API14) – http://docs.xamarin.com/guides/android/platform_features/ maps_and_location/part_2_-_maps_api Kapitel «Google APIs Add-On» http://docs.xamarin.com/guides/android/platform_features/ maps_and_location/part_2_-_maps_api Google Maps API Key – Für gewünschte Android-Entwicklungsplattform (Windows oder OS X): http://docs.xamarin.com/guides/android/platform_features/ maps_and_location/obtaining_a_google_maps_api_key http://docs.xamarin.com/guides/android/platform_features/ 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

21 © 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

22 © Zühlke 2013 Koordinaten FHNW: 47.479° N, 8.213° E Zühlke: 47.399850° N, 8.443796° 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

23 © 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

24 © Zühlke 2013 iOS Sogenannte «Outlets» in UI-Editor (Xcode) erstellen: http://oleb.net/blog/2011/06/creating-outlets-and-actions-via- drag-and-drop-in-xcode-4/ http://oleb.net/blog/2011/06/creating-outlets-and-actions-via- drag-and-drop-in-xcode-4/ Outlets sind im Code direkt als Instanzvariablen ansprechbar Android Benennung mit ID direkt in UI-XML: android:id="@+id/map" 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

25 © 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

26 © Zühlke 2013 Emulator Google APIs – API Level 14 Snapshot Karten-App com.google.android.maps.MapView ID zuweisen (XML): @+id/map 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

27 © 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

28 © 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

29 © Zühlke 2013 Seid Ihr bereit für Mono? 18.03.13 Zweiter Workshop (18.03.13) 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 – http://www.servicestack.net/ http://www.servicestack.net/ MonoTouch.Dialog anschauen – https://github.com/migueldeicaza/MonoTouch.Dialog https://github.com/migueldeicaza/MonoTouch.Dialog – http://docs.xamarin.com/guides/ios/user_interface/monotou ch.dialog http://docs.xamarin.com/guides/ios/user_interface/monotou ch.dialog Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack11. März 2013Folie 29

30 © 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