© Zühlke 2013
Oliver Brack
Workshop 6 (ws6C) native Entwicklung für mobile GeräteMono
11. März 2013Folie 1
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Oliver [email protected]
• HSR Hochschule für Technik RapperswilInformatikstudium
2003 – 2006
• Zühlke Engineering AGSoftware Engineer2007 – 2012
• HWZ Hochschule für Wirtschaft ZürichEMBA & MBA in International Business
2010 – 2012
• Zühlke Engineering AGLead Software Architect
2013 – heute
• Client-Entwicklung mit .NET• Projektleitung
Schwerpunkte
11. März 2013 Folie 2
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
«Flughöhe» des Workshops
Beginner
Advanced
Expert
Dieser Kurs
Semesterarbeit
> 1 Jahr Projekterfahrung
Level
Tech.
11. März 2013 Folie 4
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Was machen wir in diesem Workshop?
11. März 2013 Folie 5
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Unser Plan (1/2)
18.2. (Romano) Einführung, «Mega CRM», Aufsetzen25.2. (Romano) Einführung in Windows Phone 8 Entwicklung04.3. (Romano) Umsetzung «Mega CRM» mit Windows Phone 8 11.3. (Oliver) Einführung in Mono-Entwicklung18.3. (Oliver) Umsetzung «Mega CRM» mit MonoTouch25.3. (Oliver) Umsetzung «Mega CRM» mit MonoDroid01.4. Kein Workshop (Ostern)08.4. (Michael) Einführung in iOS Entwicklung15.4. (Michael) Umsetzung «Mega CRM» mit iOS22.4. (Michael) Umsetzung «Mega CRM» mit iOS
11. März 2013 Folie 6
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Unser Plan (2/2)
29.4. (Philipp) Einführung in Android 06.5. (Philipp) Umsetzung «Mega CRM» mit Android13.5. Kein Workshop (Projektwoche)20.5. (Philipp) Umsetzung «Mega CRM» mit Android27.5. (Matthias) Einführung in PhoneGap03.6. (Matthias) Umsetzung «Mega CRM» mit PhoneGap10.6. (alle) Präsentation Eurer Arbeit
11. März 2013 Folie 7
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
• 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 WorkshopZiele
11. März 2013 Folie 9
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Erster WorkshopAgenda
• 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?
11. März 2013 Folie 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 2013Folie 11
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Gemeinsamer Code (DRY)
Service (Azure)
Business Layer Business LayerBusiness Layer
Kundendaten
User Interface User Interface
11. März 2013 Folie 12
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Kompetenzen
Plattformspezifisch Mono
ServiceService
Objective-C Java
z.B. .NET.NET
.NET
11. März 2013 Folie 13
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Kompetenzen
Plattformspezifisch Mono
Objective-C- Xcode
z.B. .NET
.NET (C#)- Xcode- XML
Java- XML
11. März 2013 Folie 14
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
• 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
11. März 2013 Folie 15
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Xamarin 2.0MonoTouch bzw. Mono for Android
Xamarin 2.0MonoTouch Mono for Android
Sprache C# (statt Objective-C)
C# (statt Java)
Framework
Mono Mono
IDE MonoDevelop, Xamarin Studio, (Visual Studio)
MonoDevelop, Xamarin Studio, Visual Studio
UI-Designer
Xcode Xamarin Studio, Visual Studio, Eclipse
Hardware Intel-Mac Windows PC/Intel-MacPreise Xamarin: USD
299.-/Jahr*Apple Dev: USD 99.-/Jahr
Xamarin: USD 299.-/Jahr*Google Dev: USD 25.-/Jahr
*: verschiedene Preispläne, siehe Webseite11. März 2013 Folie 16
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
• «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?
11. März 2013 Folie 17
© 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 2013Folie 18
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
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)
• 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)
• 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)
• Hardware (optional)– iOS-Gerät (iPhone, iPod Touch)– Android-Gerät
11. März 2013 Folie 19
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
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»
• 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
11. März 2013 Folie 20
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Karten-AppScreenshots Musterlösungen
iOS Android
11. März 2013 Folie 21
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Koordinaten• FHNW: 47.479° N, 8.213° E• Zühlke: 47.399850° N, 8.443796° EiOS• Hilfsklasse mit Extension Method für MKMapView-
Control:MapExtensions.CenterMap()– Komfortables Zentrieren/Zoomen der Karte
Android• Tutorial von Xamarin zur Orientierung
Karten-AppHilfen
11. März 2013 Folie 22
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
• 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-AppErste Schritte
11. März 2013 Folie 23
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
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/
• 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<MapView>(Resource.Id.map);
DemoUI-Elemente ansprechen
11. März 2013 Folie 24
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
• Map View• Outlet erstellen• Map View aus Code ansprechen• Toolbar mit Buttons
Demo iOSKarten-App
11. März 2013 Folie 25
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
Emulator• Google APIs – API Level 14• SnapshotKarten-App• com.google.android.maps.MapView• ID zuweisen (XML): @+id/map• MapView aus Code ansprechen• LinearLayout mit Buttons
Demo AndroidEmulator erstellen und Karten-App
11. März 2013 Folie 26
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
• 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-AppFertig stellen
11. März 2013 Folie 27
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
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 2013 Folie 28
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack
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– MonoDroid.FHNW.Map.zip
• ServiceStack anschauen– http://www.servicestack.net/
• MonoTouch.Dialog anschauen– https://
github.com/migueldeicaza/MonoTouch.Dialog – http://
docs.xamarin.com/guides/ios/user_interface/monotouch.dialog
11. März 2013 Folie 29