Azure Mobile Services als Backend für AngularJS Apps


Mit Hilfe der Azure Mobile Services lassen sich schnell und einfach REST-basierende Webservices erstellen. Dies geschieht stark automatisiert und ohne großen Konfigurationsaufwand. Diese Services lassen sich über die passenden SDKs in mobilen Anwendungen für iOS, Android oder Windows verwenden. Zudem kann das JavaScript SDK verwendet werden, um von Web- und Hybrid Apps sowie von Webanwendungen auf diese Dienste zuzugreifen. Da es sich um gewöhnliche REST-Services handelt, kann neben dem SDK natürlich auch ein direkter Zugriff auf die Services erfolgen. Besonders komfortabel ist dies in Kombination mit Frameworks wie AngularJS. Wie diese Kombination aus Azure Mobile Services und AngularJS funktioniert, habe ich in einem Beispiel umgesetzt, welches ich hier beschreiben möchte. Das Beispiel findet sich auch auf GitHub. Das Beispiel ist ein simpler Blog, der auf Azure gespeicherte Blogposts anzeigt.

Teil 1: Anlegen des REST-Backends in Azure Mobile Services

Zunächst legen wir einen neuen Mobile Service an, der zur Datenspeicherung sowie zur Bereitstellung der Daten per REST-Service dient. Dies erfolgt im Azure Management Portal über New – Compute – Mobile Service.

1

Zunächst muss dann der Name des Mobile Service definiert werden. Dieser bestimmt auch die URL unter welcher die eigenen Services später erreichbar sind. Die URL hat immer die Form meinService.azure-mobile.net. Es muss außerdem eine Datenbank (Azure SQL Database) zum Speichern der Daten erzeugt werden. Für Demozwecke reicht hier eine kostenfreie 20 MB Datenbank. Zuletzt muss noch die Region für den Service ausgewählt werden, sowie die Entwicklungssprache für das Backend. Ohne an dieser Stelle zu sehr auf die Unterschiede eingehen zu wollen, lässt sich sagen, dass das JavaScript (Node.js) Backend eine höhere Automatisierung bietet, wohingegen bei der Verwendung des .Net Backends (ASP.Net Web API) mehr Anpassbarkeit gegeben ist. Aufgrund der höheren Automatisierung greife ich an dieser Stelle auf das Node.js Backend zurück.

2

Im nächsten Schritt muss der SQL Database Server für die Datenbank ausgewählt werden. Falls ein neuer Server gewählt wurde, müssen im nächsten Schritt Benutzername und Passwort für eine mögliche Serververwaltung gewählt werden. Es wichtig festzuhalten, dass obwohl Azure Mobile Services vieles automatisiert jederzeit ein direkter Zugriff auf die Datenbank möglich ist. Somit können sowohl Management Tools wie SQL Server Management Studio sowie auch eigene Anwendungen direkt auf die Datenbank zugreifen.

3

Nun legt Microsoft Azure im Hintergrund die Datenbank an und erzeugt zudem eine Bereitstellungsumgebung für die eigenen Webservices. Das Anlegen dieser Services erfolgt im Fall von Node.js direkt über das Management Portal oder die Command Line Tools.

4

Nach der Auswahl des eigenen Services werden einem die verschiedenen Starthilfen angeboten. Wir verwenden später eine angepasste Version des HTML/JavaScript Beispiels, um neue Blogeinträge anzulegen. Die Beispiele verwenden die entsprechenden Mobile Services SDKs, die den Zugriff auf die Services für uns kapseln. Neben den Beispielen finden sich hier für jede Plattform auch kurze Anleitungen für den Einstieg.

5

Für unser Beispiel wechseln wir nun in den Bereich Data / Daten und legen dort eine neue Tabelle an. Sobald wir dies tun, erzeugt uns Microsoft Azure die entsprechende Datenbanktabelle sowie die benötigten Services für Create-Read-Update-Delete (CRUD) Operationen.

6

Für die Beispielanwendung erzeugen wir die Tabelle „posts“ und geben den Lesezugriff von außen frei.

7

Nach dem Anlegen der Tabelle, können wir über das Management Portal die Spalten anlegen. Hierfür klicken wir auf Columns / Spalten.

10

An dieser Stelle können wir dann die benötigten Spalten anlegen. Für unser Beispiel sollen hier die Spalten „text“ und „title“ für die Blogeinträge genügen. Die weiteren Spalten werden systembedingt automatisch generiert und müssen erhalten bleiben.

11

12

Teil 2: Erstellen unserer Angular.JS App

Ich habe für diese Demo eine kleine Beispiel Website erstellt, welche im GitHub Repository zu finden ist. Diese Website besteht aus einer Seite und einem AngularJS Controller für die Bereitstellung der Daten. Hier der Quellcode für die index.html und der des für die Posts verantwortlichen Controllers. Wir müssen lediglich im Controller die korrekte URL unseres Mobile Services hinterlegen.

Teil 3: Erstellen neuer Datensätze

Für das Erstellen neuer Datensätze soll der Einfachheit halber an dieser Stelle eine separate Anwendung zum Einsatz kommen, da ansonsten eine Benutzerauthentifizierung zur Absicherung nötig wäre. Hierfür verwende ich eine modifizierte Form der Mobile Services Beispielanwendung, welche man im Bereich HTML/JavaScript im Azure Management Portal findet. Diese Beispielanwendung verwendet das Azure Mobile Services JavaScript SDK für die Kommunikation mit den Webservices. Zusätzlich kommt hier jQuery zum Einsatz. Die Arbeit mit dem Beispielprojekt ermöglicht uns somit einen ersten Einblick in das SDK, welches die Arbeit mit den Mobile Services weiter erleichtert. Die von mir für das MicroAzureBlog Projekt angepasste Version der Beispielanwendung findet sich auch auf GitHub. Wenn wir unsere Tabelle gemäß der Schritte oben erstellt haben, brauchen wir hier lediglich unsere Mobile Services URL und den Application Key an der entsprechenden Stelle der page.js eintragen.

Zeile 2: var client = new WindowsAzure.MobileServiceClient('https://yourmobileservice.azure-mobile.net/', 'yourapplicationsecret')

Wir können die Anwendung nun lokal ausführen und neue Datensätze anlegen. Diese werden über unseren neuen Mobile Service gespeichert.

17

Wenn wir nun die index.html unseres „MicroAzureBlog“ lokal aufrufen, werden über AngularJS die Daten aus unserem Azure Mobile Service gelesen und an die entsprechenden Felder im HTML Dokument gebunden. Wir können nun die von uns erstellten Blogbeiträge sehen.

15

Teil 4: Veröffentlichung unserer Website

Bevor wir unsere Website veröffentlichen können, müssen wir noch den Zugriff auf unsere Webservices von der zukünftigen Adresse aus erlauben. Hierfür wechseln wir in den Bereich Konfigurieren / Configure unseres Mobile Services und tragen den Hostnamen für das cross-origin resource sharing (cors) ein. In meinem Fall ist dies eine kostenfreie Hostingumgebung in Azure Web Apps.

9

Eine solche Umgebung lässt sich schnell und einfach über Neu – Compute – Web App anlegen.

8

Nachdem wir diese Schritte durchlaufen haben, können wir nun unsere Website aufrufen.

16

Wie wir gesehen haben, lassen sich mit den Azure Mobile Services schnell und einfach REST-Services erstellen und sowohl über das entsprechende SDK, als auch direkt aufrufen. Eine Nutzung in Kombination mit AngularJS ist schnell und einfach möglich.

Links:

· GitHub Repository mit den Beispielanwendungen

· Azure Mobile Services Doku

· Azure Management Portal

· AngularJS Website

English Abstract:

You can easily create REST-based web services with Azure Mobile Services and use them to power you AngularJS App. When using the Node.js backend in Azure Mobile Services, great parts of setting up your services are taken care of by Microsoft Azure. Have a look at the example project on GitHub and follow the steps above to create you first simple application. This example also uses the official example project and as well as the Mobile Services JavaScript SDK, so that you can have a look at different ways to access your services.

Comments (2)

  1. Tim says:

    Hey Malte,

    danke für die ausführliche Beschreibung. Ich versuche gerade das Tutorial durchzuarbeiten. Die Dateien habe ich mir von github gezogen.

    Leider bekomme ich immer einen Fehler: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'file://' is therefore not allowed access

    (JS Console bei aufrufen der index.html)

    Ich nutze Chrome. Ich bin auch nicht so der JS Crack, darum wäre es cool, wenn Du einen Tipp hast, wie ich das ganze zum laufen bekomme.

    VG Tim

  2. Malte Lantin says:

    Hallo Tim,

    Chrome erlaubt keine Cross Origin Request von lokalen Dateien ("file://"). Du kannst entweder den Internet Explorer 11 verwenden oder einen lokalen Webserver nutzen. Dann läuft die Website unter //localhost. Du kannst unter Windows den IIS Express verwenden. Im Ordner "mysmallblog_AMS_SDKserver" des Projektes findest du Möglichkeiten für lokale Webserver die du nutzen kannst.

    Sobald du das Projekt auf Azure (oder einem anderem Hoster) veröffentlicht hast und die Domain wie unter Teil 4 zu CORS hinzugefügt hast, sollte das Problem auch nicht mehr auftreten.

    Viele Grüße,

    Malte

Skip to main content