Pimp up your Windows 8 Store App mit Live Tiles

Von Jürgen Mayrbäurl  Autor Feed 15. January 2013 09:05

A wide tile with image a text message next to a square tile with only part of the text message

Wie macht man aus seiner Windows 8 Store App eine Top App? Neben vielen anderen Aspekten ist wahrscheinlich der sogenannte Live Tile Support hier, besonders bei News Reader Applikationen, ein wesentliches Element.

Wer will schon bei einer “Zeitungs App” jedes mal die Applikation starten, nur um die neuesten Schlagzeilen lesen zu können. Wenn man sich die Apps der österreichischen Zeitungsherausgeber (z.B. “Die Presse”, “Wirtschaftsblatt”, usw.) ansieht bzw. installiert, fällt natürlich sofort auf, dass sie, auch wenn sie gar nicht gestartet wurden, immer die aktuellen Schlagzeilen durchlaufend auf ihrer “Kachel” am Startschirm darstellen. Das ist wirklich praktisch und wenn es einem trotzdem stört, kann man es ja immer wieder abdrehen.

Aber wie macht man das nun in seiner App? Das Stichwort dazu lautet “Periodic notifications”. Wenn man sich nun die Dokumentation auf MSDN dazu durchliest, stolpert man sehr schnell über folgende Aussage:

How it works

Periodic notifications require that your app hosts a cloud service. The service will be polled periodically by all users who have the app installed. At each polling interval, such as once an hour, Windows sends an HTTP GET request to the URI, downloads the requested tile or badge content (as XML) that is supplied in response to the request, and displays the content on the app's tile.

Klingt ja nicht unbedingt einladend, wenn man dafür ein eigenes Cloud Service betreiben muss. Von den damit verbundenen Kosten einmal komplett abgesehen. Wie soll man für kostenlose “RSS Reader Apps” das machen? In Wirklichkeit ist es jedoch einfacher, als so manch einer denkt. Hier kommt nämlich Windows Azure in Spiel, das mit Windows Azure Websites ein kostenloses Angebot für die Umsetzung eines derartigen Cloud Services anbietet. Nachfolgend wird anhand eines Beispiels die Implementierung von Live Tiles Support eines RSS Feed Readers basierenden App genauer dargestellt (Aufwand bei der Verwendung der Samples und gewissen Voraussetzungen liegt bei ca. 1 Stunde).

Im folgenden Sample (siehe auch Source Code dazu am Ende dieses Beitrags) wird im Live Tile der App in regelmässigen Abständen der Titel der neuesten Blogposts von http://www.codefest.at durchlaufend dargestellt. Dazu wird der RSS Feed von Codefest.at verwendet, der von den Windows 8 Apps bzw. Windows 8 Geräten regelmässig mittels eines REST Aufrufs abgefragt wird. 

Schritt 1: Erstellung und Deployment des Cloud Services

Zuerst erstellt man mittels Visual Studio ein ASP.NET MVC Projekt:

image

Danach wählt man als Projektvorlage “Web API” aus:

image

Den standardmässig angelegten ValuesController benennen wir in etwas naherliegenderes wie TilesController um. Dazu klickt man mit der rechten Maustaste auf die Datei des ValuesControllers im Solution Explorer.

image

Bis auf die Get Methode des Templates können alle anderen Methoden gelöscht werden und die Get Implementierung sollte dann folgendermaßen aussehen:

image

Es handelt sich dabei um die Implementierung eines REST Aufrufs der Art http://server/api/tiles/{x}, wobei x für den Index des Blogposts in der Liste der Posts verwendet wird. Bei x ist gleich 1 würde der erste Blogpost verwendet werden, usw. Die URL des RSS Feeds kommt aus den App Settings in der Web.config.

image

Im obigen Source Code ist erst der Block beginnend mit “var xml = …” für den Windows 8 Live tiles Support interessant. Der Rest ist eigentlich nur eine einfache Art mittels .NET Syndication Feeds auszulesen. Windows 8 erwartet sich nämlich beim Aufruf des Cloud Services, das die Daten für die Live Tiles zur Verfügung stellt, eine vordefinierte XML Datenstruktur. Es stehen dazu eine Vielzahl von Vorlagen zur Verfügung. Hier werden 2 Templates, eines für eine quadratische und eines für eine breite Kachel, verwendet.

image

und

image

Mittels String.Format wird dabei der zuerst ausgelesene Blogpost Titel in die XML Struktur übergeführt. An und für sich sind wir damit mit der Backend Implementierung bereits fertig. Nur eine Kleinigkeit bleibt noch zu tun. ASP.NET Web Api schickt standardmässig alle Antworten als JSon, soferne nicht anders in den HTTP Headern vermerkt, zurück. Windows 8 benötigt aber immer eine XML Struktur. Um dies zu vereinfachen wird noch folgende Konfiguration dem Projekt in der Datei “Global.asax” hinzugefügt:

image

Damit ist nun sichergestellt, dass bei einem Aufruf der Art http://rssfeedlivetilessample.azurewebsites.net/api/tiles/1?mediaFormat=xml folgendes Ergebnis an Windows 8 für das Live Tile der App zurückgeliefert wird:

image

Damit ist die Backend Implementierung abgeschlossen und kann nun mittels F5 auch lokal getestet werden. Oder da war doch noch etwas. Das Ganze muss ja noch in die Cloud. Kein Problem! Wir werden noch eine Bereitstellung in Windows Azure Websites durchführen. Dazu legen wir zuerst einmal eine Windows Azure Website über das Management Portal von Windows Azure unter http://manage.windowsazure.com durch Klicken auf den “New” Button (links unten) an:

image

Danach holen wir uns das sogenannte “Publishing Profile” der Website, indem wir die soeben angelegte Website im Portal selektieren und öffnen und im Dashboard auf “Download publish profile” klicken.

image

Das nun lokal gespeicherte Publish profile der Website kann nun ganz einfach in das ASP.NET Projekt importiert werden. Dazu klickt man mit der rechten Maustaste auf das Projekt im Solution Explorer und wählt “Publish” aus:

image

Über den Import Button kann das Publish Profile der Website importiert werden und nach Klicken auf “Publish” ist das Backend in ungefähr einer Minute in der Cloud zur Verfügung gestellt. Wie eingangs schon erwähnt, ist der Betrieb dieser Backendkomponente mit Windows Azure kostenlos, da alle Windows Azure Subscriptions 10 kostenlose Websites enthalten. Es gibt jedoch gewisse Beschränkungen der zur Verfügung gestellten Kapazitäten, was aber für eine durchschnittliche App kein Problem darstellen sollte. Und sollte das wirklich einmal der Fall sein, bleibt immer noch die Möglichkeit die Kapazitäten für wenig Geld zu erhöhen.

Ressourcen:

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Datenschutzhinweis: Sie stimmen durch "Kommentar speichern" der Speicherung Ihrer Angaben durch Microsoft Österreich für die Beantwortung der Anfrage zu. Sie erhalten dadurch keine unerwünschten Werbezusendungen. Ihre Emailadresse wird auf Ihren Wunsch dazu verwendet Sie über neue Kommentare zu informieren.

Microsoft respektiert den Datenschutz. Datenschutz & Cookies

Entwickler Wettbewerbe:

Wettbewerbe

Aktuelle Downloads

Visual Studio Downloads
 
Windows Azure Free Trial
Instagram
CodeFest.at on Facebook

Datenschutz & Cookies · Nutzungsbedingungen · Impressum · Markenzeichen
© 2013 Microsoft. Alle Rechte vorbehalten · BlogEngine.NET 2.7.0.0 · Diese Website wird für Microsoft von atwork gehostet.
powered by atwork