Day

Die Anforderungen an Mobile-Apps sind heutzutage sehr vielfältig. Obschon das Benutzererlebnis immer noch im Zentrum steht, soll eine App vor allem auch immer aktuell und die enthaltenen Informationen jederzeit verfügbar sein.

Dafür braucht es ein Backend für die Speicherung und Verbreitung der Informationen an die Mobile-App, ein Content-Management Tool um den Mobile-App Inhalt zu Erfassen und schnell zu Aktualisieren sowie eine Technologie, welche dem Benutzer erlaubt ohne Internetverbindung die Informationen anzeigen zu lassen. Dabei darf man das Benutzererlebnis niemals aus dem Fokus verlieren – lange Ladezeiten und keine fliessende Bedienung veranlassen den Benutzer ebenso das App zu deinstallieren und schlechte Bewertungen abzugeben, wie unvollständigen und nicht aktuellen Inhalt.

Benutzer-Anforderungen:

• Informationen immer auf dem neusten Stand
• Vollständige Offlinefähigkeit
• Einfache und fliessende Bedienung ohne Wartezeiten (Native App)
• Interaktives Erlebnis (Push-Notifications, Social Media, etc.)

System-Anforderungen:

• Einfaches Aktualisieren des App-Inhaltes mit einem Content Management Tool
• Keine Update via Store um Inhalt zu aktualisieren
• Automatische Synchronisation der Mobile-App
• Einheitliche Darstellung auf allen gängigen mobilen Plattformen

Lösung

Um den ganzen App-Inhalt überall zur Verfügung zu stellen braucht es ein Backend, welches die ganzen Daten persistiert sowie eine Schnittstelle zur Mobile-App und Content Management Tool zur Verfügung stellt.

Micosoft Azure bietet für alle Anforderungen eine Lösung. In der Cloud können Daten jeglicher Art gespeichert, die Webanwendung für das Content Management-Tool gehostet werden und bietet eine Zugriffschicht für die Mobile-App (Backend für mobile Lösungen mit den Azure Mobile Services).

Um eine Mobile-App auf mehreren Mobile-Plattformen schnell und ohne wiederholenden Code zu entwickeln, ist Xamarin.Forms ein geeignetes Framework (Cross Platform Development mit Xamarin) und für die Ansprüche einer nativen App mit dynamischem Inhalt ideal.

Damit die auf der Mobile-App angezeigten Informationen erfasst werden können, braucht es eine Webseite, welche den Inhalt verwaltet. Dafür bietet sich ASP.Net MVC an. Mit den im Visual Studio verfügbaren Templates und Wizards kann sehr schnell eine Datenbankanbindung und die dazugehörigen CRUD-View erstellt werden (ASP.NET MVC 5 – CRUD operations with Entity Framework 6 on Visual Studio 2013).

Alle Technologien und Frameworks zusammen erlauben es eine solche Lösung innerhalb kürzester Zeit zu realisieren. Die Grundfunktionalitäten sind bereits nach 2 Wochen Entwicklungszeit implementiert.

Backend mit Microsoft Azure

Azure dient als Datenbankserver, Webhosting und Speicher für grosse Datenmengen wie Bilder oder andere Multimedia-Dateien. Der Mobile Service bildet dabei die Zugriffschicht für die Mobile-App.

Datenbank erstellen mit Mobile Service

Für die Anbindung der SQL-Datenbank an die Mobile-App wird ein Mobile Service benötigt. Es ist zu empfehlen zuerst mit dem Mobile Service die dahinterliegende Datenbanktabellen zu realisieren (code-first), bevor das Content Management Tool entwickelt wird. Die Mobile Service Datenbank-Tabellen haben autogenerated Properties (Properties, welche die Datenbank selber definiert und füllt bei einem Update der Entities), welche für die Anbindung an die Mobile-App (beschrieben weiter unten) nötig sind.
Wie im Blog „Mobile Services mit .Net“ ersichtlich, ist ein DataObject (TodoItem) und der dazugehörige Controller (TodoItemController) bereits erstellt. DataObject repräsentiert jeweils eine Tabelle in der Datenbank. Weitere DataObjects entwickelt man nun nach demselben Prinzip. Die entsprechenden Controller lassen sich mit Unterstützung des Wizards von Visual Studio erzeugen.

Beim ausführen des Mobile Services wird die Datenbank zwar erzeugt, nicht aber deren Tabellen die im Mobile Service Projekt mit den DataObjects definiert sind. Der einfachste Weg die Tabellen zu füllen/erstellen ist mit der Seed-Methoden (WebApiConfig.cs). Die Seed-Methode kommt zur Ausführung sobald der erste GET table/XY eintrifft.
Im erwähnten Beispiel ist die in der Seed-Methode bereits für das DataObject (TodoItem) realisiert. Das Prinzip kann für alle weiteren DataObjects übernommen werden.

Anschliessend kann der Mobile Service in die Cloud publiziert werden. Der Dienst startet automatisch und wir im Browser ausgeführt.
Login: {Frei wählbarer Name}
Passwort: {Haupt- oder Anwendungsschlüssen des Mobile Services zu finden auf dem Azure Management Portal}
Mit dem Testen des Services wird die Datenbank und deren Tabellen automatisch erstellt. Die in der Seed-Methode definierten Daten befinden sich nun in der Datenbank. Der Mobile-Service ist fertig.

Im Azure Management Portal besteht die Möglichkeit später bspw. der Identity Provider (Twitter, Google, Facebook, Microsoft Account (Live-ID) oder auch Azure Active Directory) zu konfigurieren um die Mobile Service User zu Authentifizieren.

Multimedia-Dateien speichern

Es macht wenig Sinn, alle Bilder, Videos usw. in der SQL-Datenbank zu speichern, nicht zuletzt würde dies höherer Kosten in der Cloud verursachen. Microsoft Azure bietet hierfür eine massgeschneiderte Lösung um Multimediadateien, in unserem Beispiel sind das Bilder, zu verwalten. Auf dem Azure Management Portal kann ein solcher Storage sehr einfach erstellt und konfiguriert werden (About Azure Storage Accounts). Jeder Eintrag im Storage erzeugt eine Link, mit welchem auf die gespeicherte Datei zugegriffen werden kann.

Mobile-App mit Xamarin.Forms

Xamarin.Forms ist ein Framework, welches dem Entwickler erlaubt plattformübergreifend C# zu programmieren und den geschriebenen Code nahezu komplett für alle Plattformen (iOS, Andorid und Windows Phone) wiederzuverwenden.
Für die Anbindung an das Backend wurde die Mobile Service SDK von Microsoft verwendet, welches via Mobile Service mit dem Backend kommuniziert und für alle gängigen Plattformen zur Verfügung steht.
Damit die Daten auf dem Mobile-App immer aktuell sind, aber auch offline stets zur Verfügung stehen, muss eine lokale Datenbank auf dem Mobile-App existieren, welche sich mit derjenigen im Backend synchronisiert. Das erwähnte API bietet hierfür eine schnelle und einfache Möglichkeit an (Using offline data sync in Mobile Services). Für die sogenannte „Offline-Synchronisation“ sind die NuGet-Packages „Azure Mobile Servics SQLiteStore“ und „Windows Azure Mobile Services“ nötig. Alle abhängigen Programmbibliotheken werden mit dem NuGet-Manager automatisch hinzugefügt.
Es gilt zu beachten, dass im iOS Projekt in der Klasse AppDelegate.cs die Programmbibliotheken initialisiert werden müssen.

Microsoft.WindowsAzure.MobileServices.CurrentPlatform.Init();
SQLitePCL.CurrentPlatform.Init();

Content Management (ASP. Net MVC) 

Der Mobile-App Inhalt ist mit einer Webseite (ASP .Net MVC) realisiert und direkt in der Azure Cloud gehostet. Das vordefinierte Template von Microsoft bringt dabei schon viele nützliche Features wie Authentisieren für die Webseite mit sich. Für ein Content Management-Tool ist das unerlässlich (Create a secure ASP.NET MVC 5 web app with log in, email confirmation and password reset (C#)).

Nun kann die Webseite an die mittels Mobile Service erstellte Datenbank angebunden werden. Leider kann hier die Mobile Service SDK aus Kompatibilitätsgründen nicht oder noch nicht verwendet werden. Deshalb wird auf die Datenbank mittels Entity Framework zugegriffen.
Dafür wird ein neues ADO.Net Entity Data Model mit dem Wizard erstellt und „Code First from database“ ausgewählt. Anschliessend werden alle gewünschten Tabellen selektiert und der Wizard erzeugt automatisch die dazugehörigen DataObjects und den DataContext. Die vom Mobile Service automatisch erzeugten Tabellen-Properties werden ebenfalls ins DataObject übernommen (CreatedAt, Deleted, ..). Ausser das „Deleted“-Property wird jedoch keines davon zwingend benötigt und sollte aus dem DataObject gelöscht werden sofern es nicht explizit verwendet wird.

Zum Abschluss können für jedes DataObject automatisch der Controller und die dazugehörigen CRUD-Views ebenfalls mittels Wizard erzeugt werden. Dazu wir ein neuer Controller hinzugefügt und das Template „MVC 5 Controller with views, using Entity Framework“ verwendet.

Zu beachten: Eines der erwähnten autogenerated Properties ist „Deleted“. Die Mobile Service SDK löscht beim Synchronisieren der lokalen Datenbank keine Daten aus der Datenbank, sondern setzt nur den Wert Deleted auf True. Auf dieses Property basiert die Synchronisation mit der Mobile-App. Der generierte Controller im Content Management Tool benutzt Entity Framework Funktionalität und löscht Daten direkt in der Datenbank. Diese Funktionalität muss im Controller geändert werden, ansonsten funktioniert die Synchronisation mit dem Mobile-App nicht korrekt.

Fazit

Mobile Service

• Einfache Datenbank-Synchronisation mit Windows Azure Mobile Service SDK
• Möglichkeiten für Push-Notifications als Datenupdate-Trigger
• Einfache Authentifizierung

Blob-Storage

• Multimediadateien können „kostengünstig“ gespeichert werden
• Einfache Zugriffsmöglichkeiten für Verwaltung und Anzeige

ASP.NET MVC

• User-Authentifizierung ist integriert
• Controller und dessen CRUD-Views können schnell und einfach erzeugt werden.

Xamarin.Forms

• Durch die Portable Class Library kann Code für alle Plattformen wiederverwendet werden
• Für Business-Lösungen mit einfachen UI’s perfekt geeignet um mit wenig Aufwand sehr viel zu erreichen.