Category

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.

Mittlerweilen besitzt fast jeder eine Smartphone und verschiedenste Apps haben sich schon fest in unseren Alltag integriert. Android und iOS sind dabei die beiden grössten Plattformen aber auch Windows Phone von Microsoft ist am Wachsen.

Die Entwicklung von Apps für zwei oder gar drei Plattformen kann jedoch sehr zeitintensiv und kostenaufwendig werden. Insbesondere, da jede Plattform ihre spezifische Programmiersprache besitzt und somit kaum Code zwischen den Applikationen geteilt werden kann. Daher hat sich in den letzten Jahren ein eigenes Ökosystem an Frameworks entwickelt, die sich das Ziel gesetzt haben Cross Platform Development zu vereinfachen. Dabei können unterschiedliche Strategien verfolgt werden:

Web Apps
Diese Apps werden mit HTML5, CSS und JavaScript entwickelt. Sie laufen jeweils im Browser der mobilen Geräte. Aus diesem Grund haben sie auch nur sehr beschränkten Zugriff auf die Hardware und die Sensoren der Geräte. Als ein weiteres Hindernis werden oft die mobilen Datenverbindungen gesehen, welche zu längeren Ladezeiten führen können.
Dies hat selbst grosse Webseiten wie zum Beispiel Facebook und LinkedIn dazu bewogen Apps für mobile Plattformen anzubieten.

Hybrid Apps
Die Hybrid Apps basieren auch auf HTML5, CSS und JavaScript. Im Gegensatz zu den Web Apps können sie zwar über einen Mobile Store veröffentlich werden, jedoch sind sie keine nativen Applikationen und laufen innerhalb eines Web Containers. PhoneGap ist ein Beispiel eines Frameworks, mit dem man solche Apps entwickeln kann. Durch die Verwendung von Plugins wird der Zugriff auf plattformspezifischen Funktionalitäten ermöglicht. Diese werden jeweils in der plattformspezifischen Sprache entwickelt. Allerdings unterscheiden sich solche Apps immer noch merklich von nativen Apps, da sie oft bei Performance und dem gewohnten Look and Feel nicht mithalten können.

Cross Compiled Apps
Diese Apps werden mit einer Programmiersprache geschrieben und anschliessend in die plattformspezifische Sprache kompiliert. Sie haben somit den Vorteil, dass sie die nativen SDK Bibliotheken verwenden können. Ebenso ist es auch möglich UI Komponenten der jeweiligen Plattform einzusetzen. Weiter kann vollumfänglich auf die Sensoren, wie etwa GPS, Kamera und Gyroskop, zugegriffen werden. Die User Experience ist dadurch gleich gut wie bei einer nativen App.

Native Apps
Native Apps werden mit den plattformspezifischen Programmiersprachen und SDK’s implementiert. Es kann auf alle Hardware Features zugegriffen werden. Möchte man allerdings mehrere Plattformen abdecken muss der sogenannte Silo Approach verwendet werden. Das heisst, dass die App für jede Plattform einzeln entwickelt werden muss. Dabei müssen nicht nur die verschiedenen Programmiersprachen beherrscht, sondern auch unterschiedlichste Entwicklungsumgebungen und Toolchains verwendet werden. Aus diesem Grund werden oftmals verschiedene Entwicklerteams pro Plattform eingesetzt. Dies kann dann wiederum zu mehr Komplexität führen, da sich die Teams auch untereinander absprechen müssen.

Cross-Platform Development mit Xamarin

Wir bei Noser Engineering arbeiten eng mit unserem Partner Xamarin zusammen um unseren Kunden den besten Mehrwert für Ihre mobilen Investitionen zu bieten.

Xamarin ist ein Framework, dass die Cross Compile Strategie verfolgt. Es basiert auf Mono und stellt nahezu 100% der nativen API von Android, iOS und Windows Phone zur Verfügung und steht so der nativen Entwicklung in nichts nach. Als Programmiersprache kommt plattformübergreifend C# zum Einsatz. Dadurch ist es möglich die gesamte Anwendungslogik zu teilen und bis zu 90% des Codes wiederzuverwenden. Lediglich das UI muss für jede Plattform einzeln entwickelt werden. Für das Erstellen des UI kann auf bewährte Designtools wie Storyboards für iOS, AXML für Android und XAML mit Blend für Windows Phone zugegriffen werden.

Sollte es doch einmal nötig sein, dass man auf eine bereits bestehende Objective-C, Java oder C/C++ Bibliotheken zugreifen muss, bietet Xamarin ausserdem die notwendige Interoperabilität.

Die Cross Compile Strategie hat einige Vorteile gegenüber dem Silo Approach der nativen Entwicklung:

•  Die Entwicklung kann mit einer Programmiersprache durchgeführt werden und erleichtert somit die Arbeit des Entwicklers.
• Die Anwendungslogik, welche den grössten Teil der Entwicklung ausmacht, kann zwischen den verschiedenen Plattformen geteilt werden. Dadurch können Code Duplikationen vermieden werden. Dies führt zu einer Verkürzung der Entwicklungszeit und auch bei der Wartung und Weiterentwicklung der Applikation müssen Änderungen jeweils nur an einer Stelle vorgenommen werden.
• Durch die Aufwandersparnis, die durch das Teilen der Anwendungslogik entsteht, lassen sich erheblich Kosten einsparen.