次の方法で共有

Windows 8 meets Web-API Service on Windows Azure

  • [アーティクル]

Windows Azure eignet sich hervorragend als skalierbares Backend für mobile Anwendungen. Für letztere wiederum steht mit Windows 8 ein großartiges Betriebssystem für mobile Anwendungen zur Verfügung. Wie kann nun das eine mit dem anderen kommunizieren. Windows Azure Mobile Services sind hier ein sehr einfacher und schneller Weg, um die Brücke vom mobilen Client in die Cloud zu schlagen, um Daten zu persistieren, Nachrichten zu verschicken, Benutzer zu authentifizieren etc.

So weit möchte ich in diesem Blobpost aber gar nicht gehen. Hier möchte ich zeigen, wie in einer Windows Azure Website ein Web-API-basierter Service bereitgestellt und von einer Windows Store Anwendung heraus mittels HttpClient zugegriffen werden kann. Das Ganze erfolgt in drei Schritten:

  • Erstellung eines ASP.NET Web-API Service
  • Bereitstellung des Web-API-Service als Windows Azure Website
  • Erstellung einer Windows 8 Anwendung mit Zugriff auf den Web-API Service

Zu jedem Arbeitsschritt gibt es auch ein Videotutorial, in dem ich die einzelnen Schritte vorführe. Um die Arbeitsschritte nachzuvollziehen, kann ein kostenloser 90-Tage Windows Azure Testaccount verwendet werden, der die verwendeten Funktionalitäten von Windows Azure kostenlos zugänglich macht.

Und los geht’s…

Erstellung eines ASP.NET Web-API Service

Zunächst soll ein kleiner Web-API basierter Service implementiert werden. Dieser soll (sehr einfach, hier geht’s ja nur um den “proof-of-concept”) Kundendaten bereitstellen.

  1. Öffnen Sie Visual Studio

  2. Legen Sie eine neue Web-Anwendung an. Clicken Sie hierzu auf den Menüpunkt File / New Project…

    image
     

  3. Wählen Sie in der Eingabemaske den Eintrag ASP.NET MVC 4 Web Application, vergeben Sie einen Namen und bestätigen Sie Ihre Eingabe mit OK.

    image
     

  4. Wählen Sie in der nächsten Eingabemaske den Projekttyp Web API und bestätigen Sie Ihre Wahl mit OK. Visual Studio legt nun eine leere Solution für den Service an.

  5. Legen Sie im Ordner Models für die Kundendaten eine neue Modellklasse an und implementieren Sie sie wie in folgendem Listing gezeigt.

     namespace CustomerWebApi.Models
 {
     public class Customer
     {
         public int Id { get; set; }
         public string Name { get; set; }
         public string Firstname { get; set; }
         public string Address { get; set; }
         public string Email { get; set; }
     }
 }

    Für einen Kunden sollen also ein Schlüssel (Id), der Name, Vorname, die Anschrift und die E-Mail-Adresse gespeichert werden.     

  6. Fügen Sie jetzt der Solution einen neuen Controller hinzu. Klicken Sie hierzu mit der rechten Maustaste im Solution Explorer auf den Ordner Controllers. Wählen Sie im Kontextmenü den Punkt Add / Controller…

    image

     

  7. Wählen Sie in der erscheinenden Eingabemaske als Controller Name den Wert CustomerController und als Vorlage Empty API Controller.

    image

     

  8. Implementieren Sie den Controller wie folgt:

     using WebApiDemo1.Models;
 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
 using System.Web.Http;
  
 namespace WebApiDemo1.Controllers
 {
     public class CustomerController : ApiController
     {
         private Customer[] customers = new Customer[]
         {
             new Customer { Id = 1, Name = "Mustermann", Firstname = "Max", Address = "Musterstraße 1, 12345 Musterstadt", Email = "max.mustermann@mail.de" },
             new Customer { Id = 2, Name = "Testfrau", Firstname = "Tina", Address = "Testweg 1, 54321 Testhausen", Email = "tina.testfrau@mail.de" },
             new Customer { Id = 3, Name = "Demomann", Firstname = "Daniel", Address = "Demoallee 1, 98765 Demo", Email = "daniel.demomann@mail.de" },
         };
  
         public IEnumerable<Customer> GetAllCustomers()
         {
             return customers;
         }
  
         public Customer GetCustomerById(int id)
         {
             var customer = customers.FirstOrDefault((c) => c.Id == id);
             if (customer == null)
             {
                 throw new HttpResponseException(HttpStatusCode.NotFound);
             }
             return customer;
         }
     }
 }

  9. Testen Sie nun den Service. Führen Sie ihn mittels F5 aus.

  10. Ein Browserfenster öffnet sich. Geben Sie als URL folgendes ein: https://localhost:<port>/api/customer. Für die Portnummer setzen Sie den Wert ein, der in Ihrer Umgebung gültig ist.

    image

     

  11. Der Server gibt nun eine JSON-formatierte Antwort zurück, weshalb der Browser fragt, ob diese Antwort geöffnet oder gespeichert werden soll. Öffnen Sie die Datei (z.B. mit Notepad). Sie sollten dann folgendes Ergebnis sehen:

    image

     

Damit ist die Erstellung des Service abgeschlossen. Theoretisch könnte die später zu implementierende Windows-8-Anwendung auf diesen schon lokal zugreifen. Mein Ziel ist aber, diesen auf Windows Azure in Form einer Website bereitzustellen. Dies soll im folgenden Abschnitt erfolgen.

Bereitstellung des Web-API-Service als Windows Azure Website

Die Bereitstellung des oben erstellten Services als Windows Azure Website ist denkbar einfach: Voraussetzung ist zunächst, dass Sie einen gültigen Windows Azure Account haben. Falls dies nicht der Fall ist, empfehle ich die Registrierung für einen kostenlosen 90-Tage-Testaccount. Die Bereitstellung des Service kann dann sehr einfach mittels folgender Schritte durchgeführt werden:

  1. Melden Sie sich am Windows Azure Management Portal über den URL: https://manage.windowsazure.com/ an.

  2. Wählen Sie im Menü links den Eintrag Web Sites.

    image

       

  3. Klicken Sie auf den Link Create a WebSite.

    image

     

  4. Wählen Sie einen URL, die Region, in dem die Website ausgeführt werden soll, sowie ggf. Ihre Subscription. Bestätigen Sie Ihre Eingaben mit Create Web Site. Die Website wird daraufhin angelegt und kann mit dem oben erstellten Service bestückt werden.

  5. Wechseln Sie zum Dashboard der Website. Klicken Sie hierzu in der Liste auf die Website. Klicken Sie im Dashboard rechts auf den Link Download Publish Profile.

    image

    Damit können Sie sich ein Publish Profil für Visual Studio herunterladen.

  6. Speichern Sie nach entsprechender Rückfrage des Browsers das Profil lokal auf Ihrem Rechner.

  7. Wechseln Sie nun in Visual Studio und klicken im Solution Explorer mit der rechten Maustaste auf das Web-API-Projekt und wählen im Kontextmenü den Eintrag Publish.

    image

  8. Wählen Sie in der folgenden Eingabemaske den Punkt Import.

    image

  9. Importieren Sie die zuvor lokal gespeicherten Publish Settings.

    image

  10. Bestätigen Sie Ihren Publish-Wunsch mit einem Klick auf die Schaltfläche Publish. Daraufhin überträgt Visual Studio das Service-Projekt in die Website, von wo es dann über den beim Anlegen der Website gewählten Namen zugreifbar ist (in meinem Fall also über den URL https://hsirtlwebapi.azurewebsites.net/). Das Publishing kann, je nach Verbindungsgeschwindigkeit, ein paar Sekunden dauern.

  11. Testen Sie die API, indem Sie – wie schon zuvor bei der lokalen Ausführung – folgenden URL aufrufen:

    https://<ihre_website>.azurewebsites.net/api/customer

  12. Wie schon zuvor sollte eine JSON-formatierte Antwort erscheinen, die die Kundendaten enthält.

Damit ist die Bereitstellung des Web-API-Service in der Cloud auf Windows Azure abgeschlossen. Nun soll eine einfache Windows 8 Anwendung auf den bereitgestellten Service zugreifen und die Daten anzeigen.

Erstellung einer Windows 8 Anwendung mit Zugriff auf den Web-API Service

Mit folgenden Schritten legen Sie eine neue Windows 8 Anwendung an und lassen diese die Daten des Web-API-Service anzeigen:

  1. Öffnen Sie ein weiteres Visual Studio Fenster

  2. Legen Sie eine neue Windows 8 Anwendung an. Klicken Sie hierzu auf File / New Project und wählen in der Auswahlmaske den Projekttyp Windows Store und als Untertyp Blank App (XAML) .

    image

  3. Löschen Sie die Datei MainPage.xaml (keine Angst, wir werden gleich eine neue anlegen).

  4. Fügen Sie dem Projekt eine neue MainPage.xaml hinzu. Klicken Sie mit der rechten Maustaste auf das Projekt und wählen Sie den Punkt Add / Class…

    image

  5. Wählen Sie als Typ Blank Page und vergeben Sie den Namen MainPage.xaml. Bestätigen Sie Ihre Eingabe mit OK.

  6. Setzen Sie in der MainPage den Anwendungstitel. Ändern Sie den voreingestellten Wert für AppName im Element Page.Resources.

     <Page.Resources>
  
     <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
     <x:String x:Key="AppName">Customer Details</x:String>
 </Page.Resources>

  7. Fügen Sie in das Haupt-Grid einen GridView ein, der später die Kundendaten anzeigen soll:

     <GridView
     Name="customer_details"
     Grid.Row="1"
     ItemsSource="{Binding}"
     Padding="116,0,40,46">
     <GridView.ItemTemplate>
         <DataTemplate>
             <StackPanel Width="350" Height="150" Margin="10" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                 <TextBlock Padding="10" Style="{StaticResource SubtitleTextStyle}">
                     <Run Text="{Binding Id}"/>
                 </TextBlock>
                 <TextBlock Margin="10,0" Style="{StaticResource TitleTextStyle}">
                     <Run Text="{Binding Name}" FontSize="28" />, <Run Text="{Binding Firstname}" FontSize="28" />
                 </TextBlock>
                 <TextBlock Margin="10,0" Style="{StaticResource ItemTextStyle}">
                     <Run Text="{Binding Address}"/>
                 </TextBlock>
                 <TextBlock Margin="10,0" Style="{StaticResource ItemTextStyle}">
                     <Run Text="{Binding Email}"/>
                 </TextBlock>
             </StackPanel>
         </DataTemplate>
     </GridView.ItemTemplate>
 </GridView>

  8. Öffnen Sie jetzt die Datei MainPage.xaml.cs.

  9. Fügen Sie am Anfang der Klasse eine Deklaration eines httpClient-Objekts ein und erweitern Sie den Konstruktor wie folgt (beachten Sie, dass sie bei der BaseAddress den URL Ihres oben als Website bereitgestellten Service eintragen):

     private HttpClient httpClient;
  
 public MainPage()
 {
     this.InitializeComponent();
  
     httpClient = new HttpClient();
     httpClient.BaseAddress = new Uri("https://hsirtlwebapi.azurewebsites.net/");
     httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
     httpClient.MaxResponseContentBufferSize = 266000;
 }

  10. Fügen Sie am Ende der Klasse die Methode GetCustomer für den Service-Zugriff ein und rufen Sie diese in der Methode OnNavigatedTo() auf. Implementieren Sie dies wie folgt.

     protected override void OnNavigatedTo(NavigationEventArgs e)
 {
     GetCustomer();
 }
  
 private async void GetCustomer()
 {
     var response = await httpClient.GetAsync("api/customer");
     if (response.IsSuccessStatusCode)
     {
         var customer = await response.Content.ReadAsStringAsync();
         var cust = JsonArray.Parse(customer);
         var qry = from c in cust
                   select new
                   {
                       Id = c.GetObject()["Id"].GetNumber(),
                       Name = c.GetObject()["Name"].GetString(),
                       Firstname = c.GetObject()["Firstname"].GetString(),
                       Address = c.GetObject()["Address"].GetString(),
                       Email = c.GetObject()["Email"].GetString()
                   };
         customer_details.DataContext = qry;
     }
 }

  11. Testen Sie nun die Anwendung, indem Sie auf F5 klicken.

    image

Die Windows 8 Anwendung sollte nun die vom Web-API-Service zurückgegebenen Werte (also die, die wir auch vorhin über die JSON-Ausgabe gesehen haben) anzeigen. Damit haben wir erfolgreich eine Windows 8 Anwendung erstellt, die Daten eines über eine Windows Azure Website bereitgestellten Service anzeigen kann.

Weitere Informationen

Comments

  • Anonymous
    December 06, 2012
    Kurz und knapp auf den Punkt gebracht, Danke.