Intel XDK: Web Services mit Visual Studio 2013 und dem Intel XDK (Hands-on-Lab)

Einführung in die Cross-Plattform Entwicklung

Web Services mit Visual Studio 2013 und dem Intel XDK

[ Video-Training und weitere Artikel ]

Dieser Kurs steht am Ende von diesem Artikel auch als PDF-Datei zur Verfügung.

Einführung

Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Zugriff auf Web Services vertraut. Der Web Service wird über die ASP.NET Web API bereitgestellt. Es wird Schritt für Schritt ein Web-Service und eine Hybrid-App entwickelt und getestet.

Voraussetzungen

Die folgenden Voraussetzungen sind notwendig für die nächsten Schritte:

• Das Intel XDK kostenlos Downloaden unter http://xdk.intel.com und installieren.
• Microsoft Visual Studio Express 2013 für das Web kostenlos Downloaden unter http://www.visualstudio.com/downloads/download-visual-studio-vs#d-express-web und installieren.
• Es wird Windows benötigt.
• Grundkenntnisse in HTML, JavaScript und C#.

Was sind Web Services?

Die Web Services (Web Dienste) ermöglichen eine Datenkommunikation von Server und Client über HTTP. Der Vorteil hierbei ist, dass die Kommunikation über HTTP einfach und schnell bereitgestellt werden kann. Es wird in den meisten Fällen keine zusätzliche Firewall Konfiguration benötigt. Das Standard Datenformat war zudem Jahrelang XML, das den Zugriff Technologieneutral ermöglicht. Es spielt daher keine Rolle ob es sich bei dem Client um eine .NET-, Java- oder JavaScript-Abfrage handelt.

In den letzten Jahren hat sich bei den Web Services ein Architekturstiel mit REST (Representational State Transfer) durchgesetzt. Dieser ermöglicht eine zustandslose Kommunikation über HTTP und nutzt davon die enthaltenen GET, HEAD, PUT und DELETE Funktionen. So ein Aufruf würde dann zum Beispiel über eine URL wie: http://localhost/customer/1 ein Kunde mit der ID 1 zurückgeben.

Als Datenformat hat sich JSON (JavaScript Object Notation) stark durchgesetzt. Dieses ist gegenüber dem klassischen XML kompakter und immer noch für den Menschen lesbar. Erfolgt ein Aufruf über JavaScript, sind die Daten bereits dafür kompatibel. Es muss daher kein weiteres Mappen in eigene Objekte durchgeführt werden.

Microsoft hat ein leichtgewichtige Web Service API mit den Namen ASP.NET Web API veröffentlicht. Mit dessen ein Web Service in C# ganz einfach und schnell programmiert werden kann. Die ASP.NET Web API stellt den Web Serivce automatisch als REST mit dem Datenformat JSON zur Verfügung.

Weitere Informationen dazu unter: http://www.asp.net/web-api

Übung – Einen Web Service erzeugen und mit einer Hybrid-App darauf zugreifen

Als erstes wird ein Web Service benötigt der ein Beispieldatensatz zur Verfügung stellt. Dazu wird Visual Studio gestartet und ein neues Web-Projekt mit den Namen „CloudService“ angelegt.

Image may be NSFW.
Clik here to view.
Abbildung 1 – Ein neues Web-Projekt in Visual Studio 2013 anlegen

Nach dem anlegen vom Projekt erscheint ein Dialog mit der Auswahl von Projektvorlagen. In diesem Beispiel wird ein leeres (Empty) Projekt benötigt. Bei der Web API-CheckBox wird noch ein Haken gesetzt und anschließend mit dem OK-Button bestätigt.

Image may be NSFW.
Clik here to view.
Abbildung 2 – Eine Leere Projektvorlage mit der Web API auswählen

Nachdem das Projekt erzeugt wurde, wird eine neue Datenklasse benötigt. Dazu ein Rechtsklick auf das Models-Verzeichnis. Im Kontextmenü wählen wir „Hinzufügen“ – „Klasse“.

Image may be NSFW.
Clik here to view.
Abbildung 3 – Eine neue Klasse hinzufügen

Die Klasse bekommt den Namen „Product.cs“.

Image may be NSFW.
Clik here to view.
Abbildung 4 – Das Hinzufügen mit einem Namen bestätigen

Die neue Product-Klasse wird nach dem Anlegen automatisch im Code-Editor geöffnet. Wir schreiben jetzt noch die Eigenschaften Id, Name und Price. Listing 1 zeigt den dazu benötigten C#-Code.

public class Product
{
       public int Id { get; set; }
       public string Name { get; set; }
       public double Price { get; set; }
}

Listing 1 – Die Product- Datenklasse mit den dazugehörigen Eigenschaften

Bei der ASP.NET Web API wird eine Funktion über einen Controller bereitgestellt. Mit einem Rechtsklick auf das Controllers-Verzeichnis, wählen wir im Kontextmenü „Hinzufügen“ – „Controller“ aus.

Image may be NSFW.
Clik here to view.
Abbildung 5 – Einen neuen Controller hinzufügen

Ein Dialog frägt nach der benötigten Vorlage, die für das Erzeugen vom Controller verwendet werden soll. Es wird die „Web API 2-Controller-Leer“-Vorlage benötigt.

Image may be NSFW.
Clik here to view.
Abbildung 6 – Controller-Vorlage auswählen

Es öffnet sich ein weiterer Dialog mit der Abfrage des Controllernamens. Als Namen vergeben wir „ProductsController“. Die Namensendung mit „Controller“ sollte immer mit angegeben werden. Dieser dient als Namenskonvention und wird bei der späteren Verwendung zur Laufzeit ignoriert. Das bedeutet, dass die URL-Abfrage nur Products und nicht ProductsController beinhaltet.

Image may be NSFW.
Clik here to view.
Abbildung 7 – Controllername festlegen

Der ProductsController wurde nun erzeugt und wird automatisch im Code-Editor angezeigt. Die ASP.NET Web API Controller leiten immer von der ApiController-Basisklasse ab, das die wesentlichsten Funktionalitäten bietet.

Jetzt benötigen wir zwei Beispieldatensätze, die mit einem Product-Array als Feld innerhalb vom Controller hinzugefügt wird. Anschließend wird eine öffentliche Methode mit dem Namen „GetAllProducts“ implementiert. Auch hier gilt eine Namenskonvention zu beachten. Wenn ein Methodennamen mit „Get“ beginnt, weiß der ASP.NET Web API Controller das er etwas zurückgeben muss. Der Rest vom Namen ist bei der späteren Verwendung vom Web Service nicht relevant. Es kann auch mehrere Get-Methoden geben, die sich allerdings dann durch zusätzliche Methoden-Parameter unterscheiden müssen. Der Beispielcode für die Implementierung, steht unter Listing 2.

public class ProductsController : ApiController
{
       private readonly Product[] _products = new Product[]
       {
           new Product { Id = 1, Name = “Windows Phone”, Price = 99.0 },
           new Product { Id = 2, Name = “Windows 8.1”, Price = 29.0 }
       };

       public IEnumerable<Product> GetAllProducts()
       {
            return _products;
       }
}

Listing 2 – Controller-Logik

Der Web Service ist jetzt fertig und kann ganz einfach per F5-Taste gestartet werden. Es öffnet sich der Browser mit der URL http://localhost:xx. Wobei xx eine automatisch generierte Port-Nummer ist. Der Browser zeigt eine Fehlseite an. Das liegt daran das auch keine HTML-Datei als Startdatei hinterlegt wurde. Es ist auch nicht relevant für uns. Die ASP.NET Web API wird durch eine weitere URL deklarion names /api/ erreicht. Dann folgt der Name vom Controller ohne den Namenszusatz. Die komplette URL ist dann wie folgt aufgebaut: http://localhost:xx/api/products.

Wenn die URL eingegeben wurde, stellt der Browser automatisch eine products.json-Datei als Download zur Verfügung. Wird diese heruntergeladen und geöffnet, befindet sich nichts anderes als der Beispieldatensatz aus Listing 2 im JSON-Datenformat.

Wichtig! Der Browser darf jetzt für die weitere Entwicklung nicht geschlossen werden. Der lokale Webhoster IIS Express würde schließen und die Hybrid-App kann nicht mehr den Web Service verwenden.

Mit dem Intel XDK auf Web Services zugreifen

Jetzt geht es mit dem Intel XDK weiter. Es soll nun eine Hybrid-App auf den Web Service zugreifen und die Daten anzeigen. Für die Übung wählen wir die „Start with App Designer“-Vorlage aus und geben „WebServiceBeispiel“ als Projektnamen ein. Wir erzeugen das Projekt per Klick auf den blauen Create-Button.

Image may be NSFW.
Clik here to view.
Abbildung 8 – Ein neues Projekt mit „WebServiceBeispiel“ erzeugen

Es öffnet sich anschließend der App Designer mit einem Dialog. Dieses fragt welches JavaScript UI-Framework verwendet werden soll. In dieser Übung wird mit dem App Framework gearbeitet und wird mit einem Klick auf den Select-Button bestätigt.

Image may be NSFW.
Clik here to view.
Abbildung 9 – JavaScript UI-Framework auswählen

Mit Drag-and-Drop wird jetzt ein Listview-Steuerelement auf die Oberfläche platziert. Bei der Id unter den Eigenschaften, wird der Wert „productsBox“ geschrieben.

Image may be NSFW.
Clik here to view.
Abbildung 10 – Listview auf der Oberfläche platzieren und Id festlegen

Wir wechseln nun zum HTML Code-Editor via Code-Button im Menü. In der Regel sollte passend zur Oberfläche die Index.html-Datei geöffnet sein. Innerhalb der onDeviceReady-Funktion erfolgt nun der nötige JavaScript-Code für die Web Service Datenabfrage.

Die getJSON-Funktion stellt die nötige Funktionalität zur Web Service Datenabfrage zur Verfügung. Mit einem String-Wert wird die nötige URL durchgereicht, ist die asynchrone Datenabfrage erfolgt, wird die done-Funktion aufgerufen und überreicht die products.json-Datei über ein data-Parameter.

Die Listview wird dann erstmal komplett geleert und der empfangene Datensatz wird dann mit einer Schleife eingetragen. Der Source Code dazu steht unter Listing 3.

<script type="text/javascript">

/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){

//hide splash screen
intel.xdk.device.hideSplashScreen();

$.getJSON("http://localhost:xx/api/products").done(function(data){

                       $("#productsBox").html("");

                       for(var index in data){

                              $("#productsBox").append("<li>" + data[index].Name + ": " + data[index].Price + "€</li>");

                       }
});

};

document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);</script>

Listing 3 – JavaScript Web Service Aufruf

Die App kann nun innerhalb vom Emulator getestet werden. Sobald die Hybrid-App geladen wurde, stehen bereits in wenigen Sekunden die Daten von unseren Web Service auf der Oberfläche. Wie Abbildung 11 veranschaulicht.

Image may be NSFW.
Clik here to view.
Abbildung 11 – Die fertige Hybrid-App im Emulator testen