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

© 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 Brack25. März 2013Folie 2

© 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 Brack25. März 2013Folie 3

© Zühlke 2013 Übersetzungen – In Musterlösung vorhanden Google Store – Thema bei nativer Android-Entwicklung (Philipp Kälin) UI rudimentär – Verfeinerung im nativen Workshop – Selbständiges Finish für Präsentation Nicht alle CRUD-Operationen – Zeitbudget – Musterlösung als Beispiel – Selbständiges Finish für Präsentation Dritter Workshop Einschränkungen Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 4

© Zühlke 2013 «Mega CRM» auf Android mit Mono Service konsumieren – ServerAccess (Business Layer, shared Code) – ServiceStack Kundenliste anzeigen – Tabellen in Android (ListView) Navigation in Android (Activities) – Kunde anzeigen Menüs in Android Hintergrund-Tasks (TPL) Kunde suchen (filtern) Kunde bearbeiten Kunde löschen Kunde hinzufügen Dritter Workshop Ziele Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 5

© Zühlke 2013 Dritter Workshop Agenda Einführung (5’) Repetition/Rückblick (5’) «Mega CRM» (30’) – ServerAccess mit ServiceStack – Kundenliste anzeigen (ListView) Pause (5’) «Mega CRM» (40’) – Kundendetails anzeigen – Menüs in Android Retrospektive und Ausblick (5’) – Inputs für folgende Workshops – Vorbereitungen für iOS (nativ) Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 6

© Zühlke 2013 «Mega CRM» für iOS – max: selber fertig stellen – min: Musterlösung verstehen – 99_MonoTouch.CustomerManager.zip 99_MonoTouch.CustomerManager.zip Android-Emulator einrichten und testen – Beispiel-App (Template) muss laufen! Repetition/Rückblick Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 7

© Zühlke – Gruppen 1-8 – Vorsicht bei gegenseitigen Änderungen der Kundendaten! RESTful API mit JSON: –[{"Id":1,"Title":"Mrs","FirstName":"Lilliane","MiddleName ":"Catrina","LastName":"Wyss","Company":"Volkswagen","Web Page":" (1418) ","FaxNumber":"+21 (4004) ","MobileNumber":"+91 (6007) ","Street":"Lake Street ","State":"","PostalCode":"42481","Country":"Western Sahara","Department":"NPP","Office":"225","Profession":"w elder","ManagersName":"Leopoldo Keller","AssistantName":"Agnes Weber","Nickname":"The Unpredictable","Birthday":"/Date( )/"}] Service Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 8

© Zühlke 2013 Startprojekt mit ServerAccess – 10_MonoDroid.CustomerManager.zip 10_MonoDroid.CustomerManager.zip ServerAccess-Projekt 1:1 von iOS-Lösung übernommen! – Referenzierte ServiceStack-Assemblies anders ServiceStack übernimmt Verbindungsaufbau und JSON- Serialisierung: –var restClient = new JsonServiceClient(" var customers = restClient.Get >("/customer"); – Customer-Klasse aus Service-Projekt (C#) Service-Zugriff analysieren: – Ausgabe auf Kommandozeile: Console.WriteLine(customers.Count); – Debugging mit Breakpoint ServiceStack Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 9

© Zühlke 2013 ListView – Einzelne Zeile ebenfalls mit XML beschrieben – CustomerListItem.xml –Activity.LayoutInflater.Inflate() Eigener Adapter als Datenquelle – Entspricht TableViewSource in MonoTouch – Ableitung von BaseAdapter – Überschreiben der Methoden/Properties –Count –GetItem() –GetItemId() –GetView() Listen in Android (1/2) Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 10

© Zühlke 2013 Kundenliste als Tabelle anzeigen – ListView (siehe letzte Folie) in XML hinzufügen – Eigene Adapter-Klasse erstellen – Kunde (Name/Vorname) mit vorgegebenem Layout (CustomerListItem.axml) – Kundendaten entgegen nehmen und Adapter instanziieren Kundenfoto anzeigen – Byte-Array aus Customer-Objekt in Bitmap umwandeln –BitmapFactory.DecodeByteArray() Listen in Android (2/2) Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 11

© Zühlke 2013 Activity mit Kundenliste als Start –[MainLauncher = true] Activity mit Kundendetails –StartActivity() –Finish() CustomerDetailsActivity erstellen für Kundendetails 20_MonoDroid.CustomerManager.zip Navigation in Android (Activities) Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 12

© Zühlke 2013 Kundendetails bei Klick auf Kunde in Liste –listView.ItemClick += OnItemClick; Datenübergabe an Activity – Intent als Datenkontext –var intent = new Intent(); intent.SetClass(this, typeof(CustomerDetailsActivity)); intent.PutExtra("customerId", customerId); StartActivity(intent); Datenübernahme in aufgerufenem Activity –var customerId = Intent.GetIntExtra("customerId", 0); – Kundendetails von Provider holen –var customer = _customerProvider.GetCustomer(customerId); Activity-Aufruf mit Datenübergabe 25. März 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver BrackFolie 13

© Zühlke 2013 Aufruf durch Druck auf Taste «Menu» – Geräteabhängig – Kontextmenü mit Verschachtelung Überladen der entsprechenden Methoden in der Activity –OnCreateOptionsMenu() –OnOptionsItemSelected() Menüs in Android Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 14

© Zühlke 2013 Kundendaten im Hintergrund laden – UI nicht blockieren – Benutzer kann lokal weiterarbeiten Task Parallel Library (TPL) Methode im Hintergrund ausführen –Task.Factory.StartNew(DoSomethingOnBackgroundThread); UI aktualisieren (aus dem Hintergrund) –RunOnUiThread(DoSomethingOnUiThread); – Entspricht InvokeOnMainThread in iOS Hintergrund-Tasks mit TPL Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 15

© Zühlke 2013 Kunde löschen Kunde hinzufügen Kunde suchen (filtern) Mehrsprachigkeit Menüs für Bearbeiten, Aktualisieren, Löschen Progress-Overlay während Serverzugriff Kundenadresse auf Karte visualisieren – Wegbeschreibung ab aktuellem Standort (GPS) Kundenfoto mit Kamera aufnehmen Kennzahlen des Kunden visualisieren – evtl. Chart Library einsetzen Kunde als Kontakt hinzufügen Ausbaumöglichkeiten Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 16

© Zühlke 2013 Fazit der drei vergangenen Workshops … Inputs für kommende Workshops … Retrospektive Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 17

© Zühlke 2013 Seid Ihr bereit für iOS (nativ)? «Mega CRM» für Android – max: selber fertig stellen – min: Musterlösung verstehen – 99_MonoDroid.CustomerManager.zip 99_MonoDroid.CustomerManager.zip Apple Macintosh Rechner (MacBook) – XCode 4.6.x (App Store) Optional: – Mitglied beim «iOS Developer Program» (99$), falls man die App auf dem Gerät laufen lassen will, und/oder die App in den App Store ausliefern möchte. Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack25. März 2013Folie 18

© 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 Brack25. März 2013Folie 19