Ich verlose unter allen Teilnehmern nach dem Zufallsprinzip Amazon-Gutscheine im Wert von 30€.  Ich setze für dieses Gewinnspiel den Dienst Rafflecopter ein, einen Dienst, der für solche Aktionen in Blogs erschaffen wurde. Die Anmeldung erfolgt dabei via gültiger Mail-Adresse oder via Facebook-Login. Anschließend habt ihr die Möglichkeit mehrere Lose zu bekommen, so dass eure Gewinnchance steigt. Insgesamt kann man 10 Lose erhalten, wenn man alle Aufgaben erfolgreich erfüllt. Der Gewinner wird anschließend automatisch ermittelt – ich muss aber überprüfen, ob die Bedingungen auch eingehalten wurden, denn bei einer ungültigen eMail-Adresse oder einer doppeltes Teilnahme, werdet ihr aussortiert, ganz einfach Ich wünsche allen Teilnehmern viel Glück!

Semantischer Zoom ist eine für Touchscreens optimierte Technik, die von Windows Store-Apps in Windows 8 verwendet wird, um große Mengen verwandter Daten oder Inhalte in einer einzelnen Ansicht darzustellen und darin zu navigieren. Beispiele hierfür sind Fotoalben, App-Listen oder Adressbücher.

Wie kann ich jetzt SemanticZoom in meiner App verwenden? Die Antwort ist ganz einfach, indem wir das Control SemanticZoom verwenden.

<SemanticZoom Margin="0,-3,0,0">
  <SemanticZoom.ZoomedInView>
    <!-- Innenansicht -->
  </SemanticZoom.ZoomedInView>

  <SemanticZoom.ZoomedOutView>
    <!-- Aussenansicht -->
  </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Nun müssen nur noch die zwei Ansichten implementiert werden und anschließend erscheint in der rechten unteren Ecke ein kleines Minuszeichen, wenn ihr eure App ausführt, über welches ihr aus der App zoomen könnt. Alternativ klappt das natürlich auch über die bekannte Wisch-Geste.

Nachdem ich im letzten Artikel bereits den allgemeinen Umgang mit der YouTube Data API gezeigt habe, soll es nun mit der eigentlichen Entwicklung losgehen. Wir benötigen ein “YoutubeDataItem”, dass die Daten eines Videos enthält, sowie ein Modell, dass wiederrum die Items enthält und die Suche ausführt.

Um loszulegen, starten wir Visual Studio Express 2012 für Windows 8, wählen Datei– Neues Projekt (bzw. File – New Project) und legen eine leere Visual C# App “YoutubeSearch“ an.

Für das Model brauchen wir eine neue Klasse. Also Rechtsklick auf den Projektnamen im Projektmappen-Explorer, Hinzufügen – Klasse… , den Namen “YoutubeDataModel.cs” eingeben und hinzufügen.

Diese Datei werden wir für die beiden Klassen “YoutubeDataItem” sowie “YoutubeDataModel” verwenden. Visual Studio hat bereits eine Klasse YoutubeDataModel anhand des Namens der Datei erstellt. Diese setzen wir noch auf

public

Das Item selbst ist nicht wahnsinnig kompliziert. Lediglich die Eigenschaften und die dazugehörigen getter/setter.

public class YoutubeDataItem
{
	public string AuthorName { get; set; }

	public string Description { get; set; }

	public ImageSource Image 
	{
		get
		{
			return new BitmapImage(new Uri("http://i.ytimg.com/vi/" + VideoId + "/mqdefault.jpg"));
		}
	}

	public string Title { get; set; }

	public TimeSpan Duration { get; set; }

	public string VideoId { get; set; }

	public int Likes { get; set; }

	public int RelativeLikes 
	{
		get
		{
			return (Likes + Dislikes > 0) ? 250 * Likes / (Likes + Dislikes) : 0;
		}
	}

	public int Dislikes { get; set; }

	public int RelativeDislikes
	{
		get
		{
			return (Likes + Dislikes > 0) ? 250 * Dislikes / (Likes + Dislikes) : 0;
		}
	}

	public int Views { get; set; }

	public string Subtitle 
	{
		get
		{
			return "von " + AuthorName + " | " + Duration.ToString(@"mm\:ss"); ;
		}
	}
}

Der meiste darin ist selbsterklärend. Der getter von der Image-Eigenschaft liefert ein BitmapImage zurück, dass von einer URL geladen wird. Diese ist bei allen YouTube-Videos identisch, es ändert sich nur die jeweilige Video-ID. Die URL führt dann auf ein Vorschaubild des Videos und könnte z.B. so aussehen:

Der Subtitle ist für ein schöneres Design der Video-Kacheln. Es gibt dafür nur einen getter, da der Inhalt aus bereits bestehenden Inhalten (AuthorName und Duration) zusammengesetzt wird.

RelativeLikes und RelativeDislikes normen die Likes und Dislikes eines Videos auf 250. Damit lässt sich der Indikator für Likes/Dislikes später besser darstellen.

Nun zum Model und der Suchfunktion. Damit wir später möglichst wenig selbst managen müssen um die Daten darzustellen, bietet es sich an eine

ObservableCollection<>

public class YoutubeDataModel
{
	ObservableCollection<YoutubeDataItem> _items = new ObservableCollection<YoutubeDataItem>();
	public ObservableCollection<YoutubeDataItem> Items
	{
		get
		{
			return _items;
		}
	}
}

Kommen wir nun zur Video-Suche. Dazu muss der Feed von der URL

"http://gdata.youtube.com/feeds/api/videos?v=2&q=" + query

async

await

Für die Suche erstellen wir einen neue Methode. Diese nimmt den Suchanfrage-String entgegen und gibt ein true/false zurück, im Form eines Tasks, der asynchron ausgeführt wird. Dazu schreibt man wie gehabt

public

async

Task

bool

Zusammen ergibt das alles

public async Task<bool> SearchAsync(string query)

Der grobe Ablauf sieht etwa so aus:

1. vorhandene Elemente in _items löschen
2. URL mithilfe des Parameters query zusammenbasteln
3. Http-Verbindung aufbauen und Feed runterladen
4. XML-Verarbeitung starten
5. nach “entry”-Knoten suchen
6. bei jedem “entry”-Knoten ein neues YoutubeDataItem anlegen
7. benötigte Eigenschaften filtern und zum Item hinzufügen
8. Item zur ObservableCollection hinzufügen
9. Anhand der Anzahl der Elemente prüfen, ob Suche erfolgreich war

Das schwierigste an diesen Schritten ist wahrscheinlich die Http-Verbindung und das richtige parsen. Dazu muss man die Struktur des Feeds kennen, was wir schon besprochen haben.

Nun übersetzen wir diesen Ablauf Schritt für Schritt in Quellcode.

1.

_items.Clear();

2.

Uri url = new Uri("http://gdata.youtube.com/feeds/api/videos?v=2&q=" + query);

3.

HttpClient client = new HttpClient();
HttpResponseMessage response = new HttpResponseMessage();
response = await client.GetAsync(url);
string content = await response.Content.ReadAsStringAsync();

content

string

4.

XmlReader reader = XmlReader.Create(new StringReader(content), new XmlReaderSettings() { Async = true });

while (await reader.ReadAsync())
{
  ...
}

Der

XmlReader

5. & 6.

if (reader.NodeType == XmlNodeType.Element && reader.Name == "entry")
{
	XmlReader itemTree = reader.ReadSubtree();
	YoutubeDataItem item = new YoutubeDataItem();
	while (await itemTree.ReadAsync())
	{
	  ...
	}
}

7.

if (itemTree.NodeType == XmlNodeType.Element || itemTree.NodeType == XmlNodeType.Text)
{
	switch (itemTree.Name)
	{
		case "title":
			item.Title = await itemTree.ReadElementContentAsStringAsync();
			break;

		case "name":
			item.AuthorName = await itemTree.ReadElementContentAsStringAsync();
			break;

		case "yt:videoid":
			item.VideoId = await itemTree.ReadElementContentAsStringAsync();
			break;

		case "media:description":
			item.Description = await itemTree.ReadElementContentAsStringAsync();
			break;

		case "yt:duration":
			int seconds = Convert.ToInt32(itemTree["seconds"]);
			item.Duration = TimeSpan.FromSeconds(seconds);
			break;

		case "yt:rating":
			item.Likes = int.Parse(itemTree["numLikes"]);
			item.Dislikes = int.Parse(itemTree["numDislikes"]);
			break;

		case "yt:statistics":
			item.Views = int.Parse(itemTree["viewCount"]);
			break;
	}
}

Warum wird mal mit

await itemTree.ReadElementContentAsStringAsync()

itemTree["..."]

item.Title = await itemTree.ReadElementContentAsStringAsync()

itemTree["numLikes"]

8.

_items.Add(item);

9.

return _items.Count != 0 ? true : false;

return _items.Count != 0 ? true : false;

if(_items.Count != 0)
{
    return true;
}
else
{
    return false;
}

Damit auch alles so funktioniert wie es soll, müssen noch diese Namespaces eingebunden werden:

using System.ComponentModel;
using System.IO;
using System.Collections.ObjectModel;
using System.Net.Http;
using System.Runtime.CompilerServices;
using System.Xml;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

Wie das ganze vollständig aussieht, könnt ihr euch im Sourcecode ansehen, den es zum Download gibt.

Jetzt geht’s los mit der Anzeige! Um dem Windows 8 – Look-and-Feel gerecht zu werden, wollen wir die Videos natürlich in Kacheln anzeigen. Dazu nehmen wir das

GridView

Die MainPage kommt “ab Werk” lediglich mit einem Grid. In das Grid fügen wir nun folgendes GridView ein:

<GridView Padding=”120,150,60,60″
  VerticalAlignment=”Stretch”
  HorizontalAlignment=”Stretch”
  ItemTemplate=”{StaticResource Standard250x250ItemTemplate}”
  ItemsSource=”{Binding Items}”>
</GridView>

Wir nutzen also vorerst ein GridView im Vollbild, dazu das vorgefertige “Standard250x250ItemTemplate”-Template für die Items und binden die ItemsSource (also die Quelle für die darzustellenden Items/Kacheln) an “Items” (–>

public ObservableCollection Items

Damit alleine werden allerdings noch nichts sehen. Der

DataContext

Wir deklarieren innerhalb der MainPage-Klasse eine neue Variable, unser Model, mit:

YoutubeDataModel model;

In der bereits vorhandenen Methode

OnNavigatedTo()

DataContext

OnNavigatedTo()

async

protected override async void OnNavigatedTo(NavigationEventArgs e)
{
	if (model == null)
	{
		model = new YoutubeDataModel();
	}

	this.DataContext = model;
	await model.SearchAsync("cat");
}

Das

await

await

async

await

Wenn ihr die App nun startet solltet ihr etwas ähnliches sehen:

Nicht wahnsinnig hübsch, aber für den Anfang schon ganz gut. Beim nächsten Mal geht es dann ans Design. Also ItemTemplate, die Video-Seite, Suchfeld zum richtigen Suchen, und mehr.

Hier lässt sich das aktuelle Projekt bereits herunterladen:

Note: There is a file embedded within this post, please visit this post to download the file.

1. TimeSpan String – Formatierung: http://msdn.microsoft.com/de-de/library/zdtaw1bw(v=vs.80).aspx
2. INotifyPropertyChanged – Interface : http://msdn.microsoft.com/de-de/library/system.componentmodel.inotifypropertychanged.aspx
3. Weitere Infos zu asynchroner Programmierung:  http://msdn.microsoft.com/de-de/library/vstudio/hh191443.aspx

• ZipApp – Erstellt eine App, welche euch ermöglicht YouTube, twitter, RSS und weitere Dienste innerhalb von nur einer App zu verwenden.
• Live Tile – Wie kann man unter Windows 8 schnell und einfach eine App mit LiveTile, welches dann dynamische Informationen anzeigt, erstellen?
• Foto-Effekte – Wie kann man unter Windows 8 ganz einfach Bilder laden oder die Webcam ansprechen und diese Bilder dann mit einem Foto-Effekt versehen?
• Feed-Reader – Wie kann man unter Windows 8 ganz einfach einen RSS-Feed laden und diesen dann auch noch schön anzeigen lassen?
• POI-Finder – Wie kann man unter Windows 8 auf die aktuelle Position des Benutzers anzeigen lassen und dazu noch weitere interessante Punkte?
• Platformer Games – Wie kann man unter Windows 8 mit der Hilfe von JavaScript und HTML ein eigenes Spiel mit wenig Aufwand erstellen?
• WordPress-Blog – Wie kann man unter Windows 8 seinen eigenen WordPress-Blog in eine eigene App verwandeln und Windows 8 Features verwenden?
• Content-App – Wie kann man unter Windows 8 seine eigenen Inhalte klar und strukturiert darstellen und dabei auf Windows 8 Features nicht verzichten?

Darüber hinaus findet ihr hier noch weitere Vorlagen und ein Cheat-Sheet, welches euch den Einstieg in die Programmierung vereinfacht.

Damit es nicht zu viel wird, soll es in diesem Artikel erst einmal nur um die benötigten theoretischen Grundlagen rund um die YouTube Data API gehen.

Man kann auf 2 verschiedene Arten mit der API kommunizieren. Entweder ein Get-Request um Video-, Kommentare- und Playlistfeeds zu bekommen oder ein Post-Request um Favoriten, Playlisten oder andere Aktionen durchzuführen. Um einen Post durchzuführen, muss man allerdings registrierter Entwickler sein und man braucht die Genehmigung des Nutzers. Darum soll es an dieser Stelle erst einmal nicht gehen.

Wir wollen also nur einen Videofeed von der API bekommen. Dazu können wir zwischen JSON, Atom und RSS 2.0 wählen. Da die Community Features (Favoriten, Like, Kommentare,…) ausschließlich mit Atom-Feeds arbeiten, sollte man an dieser Stelle auch schon den Atom-Feed nutzen.

Um nun die API aufzurufen, reicht es z.B. aus diese Url aufzurufen:

• http://gdata.youtube.com/feeds/api/videos?v=2&q=cat

Die Stamm-Url ist immer “http://gdata.youtube.com/feeds/api/” und dann das was man haben möchte. Also “video” für eine Suche, oder “users/<USERID>/uploads” für die hochgeladenen Videos eines Nutzers. Dazu gibt es dann immer noch ein paar Parameter die notwendig oder optional sind. Bei der Suche beispielsweise ist der Suchbegriff (“q=<QUERY>”) notwendig für den Feed und bei allen Videos ist der Versions-Parameter “v=2″ notwendig. Ansonsten wird die Version 1 der API genutzt (deprecated). Eine Übersicht über alle Feeds und deren Parameter findet man in der offiziellen “YouTube Data API Documentation” unter

• https://developers.google.com/youtube/2.0/reference

Um etwas mit den verschiedenen Feeds zu experimentieren und zu analysieren bietet sich die “Interactive YouTube Data API Demo” an:

• https://gdata.youtube.com/demo/index.html

Schauen wir uns nun die Response der API an. Beim Aufruf der Url in einem Atom/RSS-Feed-fähigen Browser sieht man nur so etwas:

Doch es steckt viel mehr dahinter, als man im ersten Moment vielleicht denkt. Beschreibung, Kategorie, Likes, Dislikes, Views, Video-ID, Autor, Bewertung, Vorschaubilder, …. Kurz: Alle Informationen die man auf der YouTube-Seite eines Videos auch sieht. In kurzer Schreibweise sieht der Feed im Hintergrund etwa so aus:

<?xml version='1.0' encoding='UTF-8'?>
<feed>
<!--Namespaces und unnötige Informationen sind gekürzt-->
    <entry>
        <!--Ein "entry" stellt ein Video dar-->
        <!--Hier sind sämtliche Videoinformationen-->
    </entry>

    <entry>
        ...
    </entry>
    <!--usw.-->
</feed>

Gehen wir noch eine Stufe tiefer und sehen uns an was im “entry” steckt. Ebenfalls gekürzt:

<entry gd:etag='W/"Dk8GQH47eCp7I2A9WhBTGE8."'>
    <id>tag:youtube.com,2008:video:WmQOCoVeX8g</id>
    <published>2013-02-14T06:48:58.000Z</published>
    <updated>2013-02-14T06:53:41.000Z</updated>
    <title>tsjDEV - WP8 DevRun - 01 - Einführung</title>

	<link ... /> 
	<!--Links zu weiteren Videofeeds, z.B. Uploader, Ähnliche Videos, aktuelles Video, Videoantworten und zur eigentlichen YouTube-Seite des Videos um es anzusehen-->

    <author>
      <name>tsjDEV86</name>
      <uri>https://gdata.youtube.com/feeds/api/users/tsjDEV86</uri>
      <yt:userId>jkkaDgxf_kr3NYTJv__1SA</yt:userId>
    </author>

	<yt:accessControl ... />
	<!--Parameter zur Zugriffskontrolle. Z.B: Darf man kommentieren, bewerten,...?-->

    <gd:comments>...</gd:comments>
	<!--Feed zu den Kommentaren des Videos-->

    <media:group>
      <media:category label='Bildung' scheme='http://gdata.youtube.com/schemas/2007/categories.cat'>Education</media:category>

      <media:content url='https://www.youtube.com/v/WmQOCoVeX8g?version=3&f=videos&app=youtube_gdata' type='application/x-shockwave-flash' medium='video' isDefault='true' expression='full' duration='424' yt:format='5'/>
      <media:content url='rtsp://v4.cache3.c.youtube.com/CiILENy73wIaGQnIX16FCg5kWhMYDSANFEgGUgZ2aWRlb3MM/0/0/0/video.3gp' type='video/3gpp' medium='video' expression='full' duration='424' yt:format='1'/>
      <media:content url='rtsp://v4.cache3.c.youtube.com/CiILENy73wIaGQnIX16FCg5kWhMYESARFEgGUgZ2aWRlb3MM/0/0/0/video.3gp' type='video/3gpp' medium='video' expression='full' duration='424' yt:format='6'/>

      <media:credit role='uploader' scheme='urn:youtube' yt:display='tsjDEV86' yt:type='partner'>tsjdev86</media:credit>

      <media:description type='plain'>In der Serie 'WP8 DevRun' von tsjDEV.de möchte ich in kurzen Videos auf das Entwickeln von Apps für Windows Phone 8 näher eingehen. In diesem ersten Video ge...</media:description>

      <media:keywords/>
      <media:license type='text/html' href='http://www.youtube.com/t/terms'>youtube</media:license>

      <media:player url='https://www.youtube.com/watch?v=WmQOCoVeX8g&feature=youtube_gdata_player'/>

      <media:thumbnail url='http://i.ytimg.com/vi/WmQOCoVeX8g/default.jpg' height='90' width='120' time='00:03:32' yt:name='default'/>
      <media:thumbnail ... /> 
	  <!--in weiteren Auflösungen-->

      <media:title type='plain'>tsjDEV - WP8 DevRun - 01 - Einführung</media:title>

      <yt:aspectRatio>widescreen</yt:aspectRatio>
      <yt:duration seconds='424'/>
      <yt:uploaded>2013-02-14T06:48:58.000Z</yt:uploaded>
      <yt:uploaderId>UCjkkaDgxf_kr3NYTJv__1SA</yt:uploaderId>
      <yt:videoid>WmQOCoVeX8g</yt:videoid>
    </media:group>

    <yt:statistics favoriteCount='0' viewCount='58'/>
    <yt:rating numDislikes='0' numLikes='1'/>
  </entry>

Und damit haben wir schon alles was wir brauchen.

Für das Projekt brauchen wir folgende Werte:

• Name des Autor (“<name>…” in Zeile 11)
• Beschreibung des Videos (“<media:description>…” in Zeile 31)
• URL des Vorschaubildes (“<media:thumbnail … />” in Zeile 38)
• Titel des Videos (“<media:title>…” in Zeile 42)
• Dauer in s (“<yt:duration … />” in Zeile 45)
• Hochgeladen am (“<yt:uploaded>…” in Zeile 46)
• Ganz wichtig: videoId (“<yt:videoId>…” in Zeile 48)
• Likes, Dislikes, Views (“<yt:statistics … />” in Zeile 51 & 52)

Das ganze lässt sich sehr leicht in einer Klasse kapseln, z.B. “YouTubeDataItem”.

Die Form der Videofeeds sieht übrigens immer ganz genau so aus, also muss man nur einmal einen Algorithmus entwickeln der den Feed verarbeitet und sich nur noch um die URL kümmern.

Im nächsten Teil der Serie geht es dann um dieses “YouTubeDataItem”, die eigentliche Feedverarbeitung sowie die Gestaltung der App.

Nun wechselt ihr zurück in euer Visual Studio Projekt und verbindet dieses mit dem Store. Dazu klickt ihr mir rechts auf eure Solution und wählt STORE – ASSOCIATE APP WITH THE STORE. Es führt euch nun ein kleiner Assistent durch die Verbindung, wo ihr euch erst anmelden müsst und anschließend die neu angelegte App auswählen müsst.

Anschließend geht es zurück in das Store-Portal und dort findet ihr die Rubrik Advanced features. Wählt diesen Menüpunkt aus und im oberen Bereich findet ihr die Informationen zu den Push-Notifcations.

Push-Benachrichtungen anlegen

Klickt dazu auf Push notifications and Live Connect services info und dann Authenticating your service. Auf dieser Seite findet ihr nun das Client-Secret und die eindeutige Package Security ID, welche wir nun noch in unsere App einfügen müssen. Wechselt dazu nun in das Azure Portal und öffnet euren Mobile Service. Dort findet ihr nun den Reiter PUSH, welchen wir auswählen. Hier müsst ihr nun die SID und den geheimen Schlüssel aus dem Store-Portal eintragen. Anschließend speichert ihr die Eingaben ab.

Nun müssen wir noch ein wenig Code hinzufügen, damit die Push-Benachrichtigungen auch funktionieren. Öffnet dazu die App.xaml.cs-Datei und tragt zunächst das folgende Using ein: 

using Windows.Networking.PushNotifications;

public static PushNotificationChannel CurrentChannel { get; private set; }

private async void AcquirePushChannel()
{
   CurrentChannel =  await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
}

In der Methode

OnLaunched()

AcquirePushChannel()

[JsonProperty(PropertyName = "channel")]
public string Channel { get; set; }

Nun müssen wir noch die

ButtonSave_Click()

private void ButtonSave_Click(object sender, RoutedEventArgs e)
{
    var todoItem = new TodoItem { Text = TextInput.Text, Channel = App.CurrentChannel.Uri };
    InsertTodoItem(todoItem);
}

Dies waren auch schon alle Einstellungen, welche wir in der MainPage.xaml.cs-Datei vornehmen müssen. Abschließend öffnet ihr nun noch die Package.appxmanifest-Datei und wählt unter Badge Logo aus, dass wir Toasts nutzen wollen, falls dies noch nicht automatisch schon geschehen ist.

Wechselt nun wieder zu eurem Mobile Service und wählt den Reiter Daten und öffnet die Tabelle TodoItem. Anschließend steht euch der Reiter Skript zur Verfügung, welchen wir anklicken. Ersetzt nun die vorgegebene Einfügen-Methode durch die folgende Variante:

function insert(item, user, request) {
    request.execute({
        success: function() {
            request.respond();
            push.wns.sendToastText04(item.channel, {
                text1: item.text
            }, {
                success: function(pushResponse) {
                    console.log("Sent push:", pushResponse);
                }
            });
        }
    });
}

Speichert das Skript nun ab und lasst eure App doch einmal laufen. Wenn ihr nun ein neues Element eintragt, dann wird eine Push-Benachrichtigung angezeigt.

empfangene Push-Nachricht

Wir werden nun von der Schnell-Startseite des WAMS begrüßt.

Schnell-Start des WAMS

Wir wählen nun unsere Plattform aus, wobei uns Windows 8, Windows Phone, iOS, Android und HTML/JavaScript zur Verfügung steht. Für dieses Beispiel wählen wir nun Windows Store. Anschließend klicken wir weiter unter auf den Link EINE NEUE WINDOWS STORE-APP ERSTELLEN.

Eine neue App entwerfen

Klickt nun auf den grünen Button mit der Aufschrift TodoItem-Tabelle erstellen, um Demo-Daten zu erzeugen und anschließend auf Herunterladen. Anschließend habt ihr bereits eine komplett lauffähige Version einer Todo-App. Öffnet die Solution und tragt doch einfach mal ein paar Werte ein.

einige eingetragene TODO-Items

Wie können wir aber jetzt sicher sein, dass es sich hierbei um Daten auf unserem WAMS handelt und nicht einfach nur lokale Daten? Dazu wechseln wir zurück in das Azure Portal und wählen Daten und anschließend TodoItem aus. Hier sieht man nun die gleichen Daten in der Cloud-Tabelle.

Tabelle in der Cloud

Somit haben wir jetzt bereits unseren ersten eigenen WAMS komplett in Betrieb genommen und können auf dieser Basis nun unsere ersten eigenen Apps entwickeln.

Auf jeden Fall geht die App in die richtige Richtung, auch wenn sie sich ein wenig vom ursprünglichen Windows Phone Style entfernt…

Facebook Beta Preis: Kostenlos

So habe ich auf der Serien-Seite eine Anlaufstelle für die Beiträge geschaffen, welche über mehrere Teile verfügen, so dass ihr diese nicht mehr in meinem Blog suchen müsst, sondern alles auf einem Blick findet. Dabei habe ich die Beiträge auch noch nach Plattform (Windows 8, Windows Phone und Windows 8/Windows Phone) aufgeteilt, so dass ihr gezielt und schnell eure Informationen findet.

Unter Referenzen findet ihr nun erste App-Projekte, welche ich nicht für mich, sondern für Kunden entwickelt bzw. mitgearbeitet habe. Diese Rubrik wird in den nächsten Tagen und Wochen noch weiter ausgebaut, soll aber erstmal eine erste Anlaufstelle darstellen. Auch hier gibt es eine Unterscheidung nach Plattform.

Ich wünsche euch nun noch viel Spaß beim Stöbern!

Anschließend werden ihr auf Webseite weitergeleitet, wo noch einmal die Vorteile der kostenlosen Testversion hervorgehoben werden und aufgeführt wird, was in dem Paket alles enthalten ist. Klickt anschließend noch einmal auf den großen grünen Button mit der Aufschrift kostenlos testen.

Meldet euch nun mit eurem Microsoft-Konto an und ihr gelangt zum Einrichtungsassistenten, welcher noch einmal auf das kostenlose Abo hinweist und mitteilt, dass neben einem Mobiltelefon auch eine Kreditkarte notwendig ist, welche aber nicht während der Testversion belastet wird.

Erster Schritt der Azure-Einrichtung

Wenn ihr alles parat gelegt habt, könnt ihr mit einem Klick auf den kleinen Pfeil zum nächsten Schritt gelangen. Hier tragt ihr erstmal nur eure Handy-Nummer ein und wählt aus, ob ihr ein SMS oder einen Anruf mit einem Prüf-Code erhalten wollt. Diesen Code gebt ihr dann auf der gleichen Seite in das Feld ein und klickt auf Code überprüfen. Wenn ihr alles richtig gemacht habt, so könnt ihr mit der Einrichtung fortfahren.

Dritter Schritt der Azure-Einrichtung

Tragt nun die Daten eurer Kreditkarte und bestätigt die Eingabe mit einem Klick auf Weiter. Anschließend werden die Daten kurz geprüft und das entsprechende Windows Azure Testabo erstellt.

Wenn ihr alles richtig gemacht habt, so werdet ihr nach kurzer Zeit von dem folgenden Assistenten begrüßt:

Willkommen bei Windows Azure

Gebt nun die Url manage.windowsazure.com in euren Browser ein, um Zugriff auf das Backend zu erhalten. Beim ersten Login werdet ihr mit einem kleinen Assistenten begrüßt, welcher euch durch das Portal führt und ihr solltet ihn auf jeden Fall ein wenig Aufmerksamkeit schenken.

Nun wollen wir aber unseren ersten Mobile Service erstellen. Klickt dazu in der Leiste am unteren Bildschirmrand auf NEU – SERVER – MOBILER SERVICE – ERSTELLEN. Hier tragt ihr nun einen eindeutigen Bezeichner in das Feld URL ein. Anschließend müsst ihr noch die SQL-Datenbank auswählen oder eben eine neue erstellen, da wir aktuell ja noch gar keine angelegt haben. Stellt in Deutschland nun noch die Region auf  North Europe und klickt auf den kleinen Pfeil.

Einrichtung des Mobile-Services

Wählt nun noch einen Namen für die Datenbank und den Datenbank-Server oder erstellt einen neuen Server mit den notwendigen Daten. Achtet auch hier auf die Region, denn die müssen identisch sein. Anschließend wird der Service auch schon erstellt, was ein paar Sekunden bis Minuten in Anspruch nehmen kann.

Unser erster Mobile Service

Nun haben wir bereits den ersten Mobile Service eingerichtet und können diesen auch verwenden. Wie wir dies jedoch tun, zeige ich euch im nächsten Teil dieser Serie.

Vorstellung des WAMS (Quelle: http://www.windowsazure.com/de-de/home/scenarios/mobile-services/)

Ziel der WAMS ist es mit wenig Aufwand ein komplettes Cloud-Backend für eine App zu entwickeln. Dabei kann man über diese Services Benutzerauthentifizierungen durchführen oder auch Pushbenachrichtung senden. Natürlich lassen sich auch bequem Daten in einer Datenbank ablegen und natürlich auch wieder auslesen.

Das Beste an den Windows Azure Mobile Services ist es jedoch, dass diese sowohl mit Windows 8, mit Windows Phone 8, mit iOS, mit Android und sogar mit HTML zusammenarbeiten. Dadurch entwickelt man einmal ein Backend, welches man dann in allen Systemen ohne Probleme einbinden kann und so sich nur noch um das Frontend kümmern muss. Ein weiterer Vorteil ist die Einfachheit beim Entwickeln des Backends. Es werden alle notwendigen Code-Schnipsel übersichtlich dargestellt und mit wenigen Zeilen hat man einen WAMS bereits in eine  bestehende App integriert.

Wie wir nun unsere erste Beispiel-Anwendung mit den WAMS erstellen können, zeige ich euch im nächsten Teil dieser Serie.

Ruft nun die Webseite ideapress.me auf und klickt auf den großen grünen Button mit der Aufschrift Get Started. Nun müsst ihr die Internetadresse und eine eMail-Adresse eintragen, an welche später das fertige Projekt gesendet wird.

Erster Einrichtungsschritt für eure WordPress-App

Anschließend wird überprüft, ob ihr das Json-Plugin installiert habt und anschließend wir die Einrichtung fortgesetzt. Ihr werden nun durch eine bebilderte Anleitung geführt. Hier tragt ihr bereits einen Titel der App ein oder wählt auch die Kategorien, welche angezeigt werden sollen. Auch eine Farbgebung lässt sich bereits vordefinieren.

Wenn ihr damit fertig seid, dann bekommt ihr die fertige Solution an eure eMail-Adresse geschickt und schon könnt ihr die App einreichen und habt euren eigenen Blog als Windows 8 App.

Ihr öffnet Visual Studio und wählt dann den Eintrag Team – Connect to Team Foundation Server aus.

Verbindung mit TFS herstellen

Anschließend öffnet sich an der rechten Seite ein kleine Liste und dort findet ihr einen Verweis auf Connect, welchen ihr einfach anklickt.

Mit dem TFS verbinden durch Connect

In dem sich öffnenden Fenster klickt ihr auf Servers und tragt dort euren Team-Foundation-Server ein. Achtet dabei darauf, dass die URL zum Server mit einem https:// beginnt, denn sonst kann keine Verbindung hergestellt werden. Anschließend müsst ihr euch noch mit eurer Live-ID anmelden, bevor eine Verbindung mit dem Server hergestellt werden kann.

Mit dem TFS verbunden

Wählt nun das entsprechende Projekt aus, in diesem Falle TestProject und klickt auf Connect. Nun legt ihr euch ein neues Projekt an oder öffnet ein bestehendes Projekt, welches ihr dem TFS hinzufügen wollt. Im Solution Explorer klickt ihr nun mit der rechten Maustaste auf Solution und wählt den Menüeintrag Add Solution to Source Control aus. Anschließend wählt ihr den entsprechenden Ordner auf dem TFS aus und bestätigt mit einem Klick auf OK.

Projekt dem TFS hinzufügen

Nun macht ihr eure Änderungen am Code und wenn ihr das ganze nun hochladen wollt, dann wählt ihr erneut die Solution mit einem Rechtsklick aus und wählt aus dem Menü den Eintrag Check In… aus. Tragt nun noch eine kurze Beschreibung in das entsprechende Feld ein und klickt auf Check In.

Code einchecken

Nun befindet sich eurer Code bereits auf dem TFS und wie ihr nun auf einem anderen Rechner wieder an euren Code herankommt, dass zeige ich euch im nächsten Teil dieser Serie.

Öffnet die Code-Behind-Datei eurer Seite, auf der die ToastNotification später angezeigt werden soll. Dort fügt ihr zunächst oberhalb des Konstruktors die folgende Variablen-Deklaration ein:

Windows.UI.Notifications.ToastNotifier _notifier = Windows.UI.Notifications.ToastNotificationManager.CreateToastNotifier();

Anschließend könnt ihr den folgenden Code-Schnipsel verwenden, um eine Toast-Notification zu senden. Zunächst wird überprüft, ob die Toast-Nachrichten durch den Nutzer überhaupt zugelassen wurden und dann ein klassischer MessageDialog angezeigt und sonst der Toast.

if (_notifier.Setting != Windows.UI.Notifications.NotificationSetting.Enabled)
{
    await new MessageDialog("Message", "Title").ShowAsync();
}
else
{
    var template = Windows.UI.Notifications.ToastNotificationManager.GetTemplateContent(Windows.UI.Notifications.ToastTemplateType.ToastImageAndText02);
    template.GetElementsByTagName("image")[0].Attributes[1].AppendChild(template.CreateTextNode("path_to_image"));
    template.GetElementsByTagName("text")[0].AppendChild(template.CreateTextNode("first row"));
    template.GetElementsByTagName("text")[1].AppendChild(template.CreateTextNode("secondrow"));

    var toast = new Windows.UI.Notifications.ToastNotification(template);
    _notifier.Show(toast);
}

 Zu beachten ist, dass ihr in der Datei Package.appxmanifest unter Badge Logo bei Toast capable den Wert auf Yes setzt, denn sonst werden auch keine Toast-Nachrichten angezeigt. Das ist auch schon das ganze Geheimnis und ihr könnt eure Apps jetzt auch mit Toast ausstatten.

Quelle: https://www.checkdomain.de/domain-weltkarte/

Darüber hinaus spendet checkdomain.de pro Weltkarte noch 10€ für einen guten Zweck und daher habe ich beschlossen auch an dieser Aktion teilzunehmen, um so etwas Gutes zu tun. Natürlich können auch nicht Blogger etwas Gutes tun, indem sie die Karte für 27€ käuflich erwerben, denn auch hier fließen 10€ in die Kasse der Kinderkrebsstiftung.

Anschließend wählt im im linken Bereich der Webseite den Button New Team Projekt und klickt diesen an.

Neues Team-Projekt anlegen

Nun begrüßt euch ein Dialog, welcher euch bei der Einrichtung des Projekts hilft. Zunächst tragt ihr einen Namen für das Projekt ein, welcher beliebig ist, aber zu einem späteren Zeitpunkt nicht mehr geändert werden kann. Anschließend könnt ihr noch eine kurze Beschreibung auswählen und welche Prozess-Vorlage verwendet wird. Dieser Punkt ist eigentlich nur dann relevant, wenn ihr euch intensiv mit diesen bereits auseinander gesetzt habt oder aber in einem größeren Team zusammenarbeitet. Zu guter Letzt könnt ihr noch zwischen Git oder der Team Foundation Version Control wählen, um so zu entscheiden, wie der Code später verwaltet werden soll.

Ein neues Team-Projekt anlegen

Habt ihr alle Felder ausgefüllt wird der Button Create Project aktiv und ihr könnt eure Angaben durch einen Klick bestätigen. Nun wird das Projekt für euch angelegt.

Team-Projekt wird angelegt

Nun habt ihr bereits euer ersten Projekt auf eurem TFS angelegt und es ist nun bereit mit Code befüllt zu werden, was ich euch im nächsten Teil ausführlich zeige.

Das fertige Team-Projekt

Obwohl die App am Ende den Hackathon nicht gewonnen hat, habe ich die Rückfahrt nach Kiel genutzt und die App fertig gestellt, so dass diese ab sofort kostenfrei über den Windows 8 Store verfügbar ist.

Basket-Game Preis: Kostenlos

Beginnt mit dem Aufruf der Webseite http://tfs.visualstudio.com/ in einem Browser eurer Wahl.

Startseite von http://tfs.visualstudio.com/

Im rechten oberen Bereich findet ihr einen Hinweis “Sign up for free”, auf welchen wir klicken müssen. Im ersten Schritt werden wir um die Eingabe einer Url gebeten, unter welcher der Service nachher zur Verfügung steht.

Account anlegen

Im nächsten Schritt meldet ihr euch mit eurem Live-Account an, damit die eingegebene Url mit diesem Konto verknüpft werden kann. Das war eigentlich auch schon alles und eucht steht nun der Team Foundation Service unter eurer angegeben Url zur Verfügung.

Der Service läuft bereits nach kurzer Registrierung.

Im nächsten Teil werde ich euch nun zeigen, wir ihr euren Code integrieren könnt und somit ständig euren letzte Variante des Codes auf allen euren Geräten dabei habt.

Student Technology Conference

Es hat zwar nicht zu einer Top-Platzierung gereicht, aber trotzdem hat es uns sehr viel Spaß gemacht, denn wir haben viele neue Eindrücke mitgenommen und interessante Fachgespräche geführt und einige neue Freundschaften knüpfen können. Darüber hinaus gab es auch den einen oder anderen spannenden Vortrag, wie zum Beispiel der Vortrag von Kai, welcher in nur sechs Schritten aus einer sehr hässlichen App eine ganz passable App gebastelt hat und sicherlich werde ich diese Punkte auch in meinen kommenden Apps beachten. Oder auch der Vortrag von Dion Hutchings über die Windows Azure Mobile Services, welche ebenfalls in meinem Blog noch einmal vorgestellt werden.

Insgesamt war es wieder ein tolles Event und mein Dank geht an Jan, Peter und Alex für die Möglichkeit an diesem Event teilnehmen zu dürfen.

An der Stelle, wo ihr die Abfrage einfügen wollte, fügt ihr nun den folgenden Code ein:

MessageDialog dialog = new MessageDialog("Message", "Title");
dialog.Commands.Add(new UICommand { Label = "Ja" });
dialog.Commands.Add(new UICommand { Label = "Nein" });
IUICommand result = await dialog.ShowAsync();

Somit wird jetzt ein Message-Dialog erstellt, welcher die beiden Buttons Ja und Nein besitzt. Anschließend könnt ihr die Variable result verwenden, um zu erfahren, welche Wahl der Nutzer getroffen hat. Dazu verwendet ihr nun die folgende Abfrage

if (result.Label.Equals("Ja"))
{
    // Logik
}
else if (result.Label.Equals("Nein"))
{
    // Logik
}

Ihr könnt jedoch bei der Definition der neuen Buttons auch direkt die Invoke-Eigenschaft verwenden, denn dann wird automatisch das angegebene Event bei einem Klick gefeuert und ihr könnt dann damit weiterarbeiten.

Die Methode

CreateLocationPushpin()

private Grid CreateLocationPushpin()
{
    Grid MyGrid = new Grid();
    MyGrid.RowDefinitions.Add(new RowDefinition());
    MyGrid.RowDefinitions.Add(new RowDefinition());
    MyGrid.Background = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Transparent);

    System.Windows.Shapes.Rectangle MyRectangle = new System.Windows.Shapes.Rectangle();
    MyRectangle.Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Black);
    MyRectangle.Height = 20;
    MyRectangle.Width = 20;
    MyRectangle.SetValue(Grid.RowProperty, 0);
    MyRectangle.SetValue(Grid.ColumnProperty, 0);

    MyGrid.Children.Add(MyRectangle);

    System.Windows.Shapes.Polygon MyPolygon = new System.Windows.Shapes.Polygon();
    MyPolygon.Points.Add(new Point(2, 0));
    MyPolygon.Points.Add(new Point(22, 0));
    MyPolygon.Points.Add(new Point(2, 40));
    MyPolygon.Stroke = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Black);
    MyPolygon.Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Black);
    MyPolygon.SetValue(Grid.RowProperty, 1);
    MyPolygon.SetValue(Grid.ColumnProperty, 0);

    MyGrid.Children.Add(MyPolygon);

    return MyGrid;
}

Als nächstes müssen wir dieses Grid nun auf der Karte, welche hier MyMap heißt, anzeigen lassen und dafür benötigen wir die folgende Methode:

private void AddLocationMapOverlay(GeoCoordinate position)
{
    Grid MyGrid = CreateLocationPushpin();

    MapOverlay MyOverlay = new MapOverlay();
    MyOverlay.Content = MyGrid;
    MyOverlay.GeoCoordinate = position;
    MyOverlay.PositionOrigin = new Point(0, 0.5);

    MapLayer MyLayer = new MapLayer();
    MyLayer.Add(MyOverlay);
    MyMap.Layers.Add(MyLayer);
}

Um nun einen PushPin auf der Karte zu setzen, braucht ihr nun die

AddLocationMapOverlay()

der fertige Pushpin

CheckInternetConnectivity()

true

false

private bool CheckInternetConnectivity()
{
    bool isOnline = false;
    Windows.Networking.Connectivity.ConnectionProfile profile = Windows.Networking.Connectivity.NetworkInformation.GetInternetConnectionProfile();

    if (profile != null)
    {
        Windows.Networking.Connectivity.NetworkConnectivityLevel connectivityLevel = profile.GetNetworkConnectivityLevel();

        if (connectivityLevel == Windows.Networking.Connectivity.NetworkConnectivityLevel.InternetAccess)
            isOnline = true;
    }

    return isOnline;
}

 Diese Methode fügt ihr nun entsprechen in euer Projekt hinzu und könnt dann z.B. eine kurze Nachricht ausgeben, das zur Zeit keine Internetverbindung besteht und somit bestimmte Eigenschaften eurer App deaktiviert wurden.

Öffnet dazu die Datei WMAppManifest.xml, welche ihr im Ordner Properties eurer Solution findet. Dort öffnet ihr nun den Capabilities-Reiter und setzt den Haken bei ID_CAP_MAP. Erst dann könnt ihr eine Karte in eurer Anwendung verwenden.

Anschließend müssen wir die Frage beantworten, wie wir eine Karte nun in der eigenen App anzeigen lassen können. Der einfachste Weg geht über die Toolbox, denn dort braucht ihr nur das Map-Control suchen und per Drag and Drop  die Karte an die entsprechende Stelle in der App ziehen. Somit braucht ihr euch nicht mehr um die Einbindung der richtigen DLL-Dateien und der richtigen Namesspaces kümmern, denn das übernimmt nun direkt Visual Studio für euch.

Nun kann man auch bereits die Karten auf dem eigenen Device oder im Emulator testen. Möchte man jedoch die App später in den Store stellen, so müssen noch die ApplicationID und das AuthenticationToken ergänzt werden, denn sonst wird die App nicht zertifiziert. Wechselt daher vorher in das Developer-Dashboard unter dev.windowsphone.com und reicht eine App ein, denn dort findet ihr unter dem Bereich Optional den Eintrag Map services.

Map-Services im Dashboard

Anschließend braucht ihr nur noch auf den Button Get Token klicken und schon werden die beiden Werte für euch generiert und diese müsst ihr nun in eure App integrieren.

ApplicationId und AuthenticationToken

Dazu implementiert ihr das Loaded-Event der Karte und erhaltet dann die folgende Methode:

private void myMap_Loaded(object sender, RoutedEventArgs e)
{
    Microsoft.Phone.Maps.MapsSettings.ApplicationContext.ApplicationId = "EURE ApplicationID";
    Microsoft.Phone.Maps.MapsSettings.ApplicationContext.AuthenticationToken = "EUER AuthenticationToken";
}

Hier tragt ihr also nur noch die beiden Werte ein und schon könnt ihr die App zur Zertifizierung einreichen und dann steht einer erfolgreichen Zertifizierung auch nichts mehr im Weg.

Zunächst öffnet ihr euer Projekt oder legt euch ein neues Projekt an. Dann wechselt ihr in die Code-Behind-Datei und fügt einen Eintrag in die using-Liste hinzu, nämlich

using Windows.Storage.Pickers;

Anschließend erstellen wir die Methode 

PickAFile

private async void PickAFile()
{
    var picker = new FileOpenPicker();

    picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    picker.ViewMode = PickerViewMode.Thumbnail;
    picker.FileTypeFilter.Add(".jpg");
    picker.FileTypeFilter.Add(".jpeg");
    picker.FileTypeFilter.Add(".png");
    picker.FileTypeFilter.Add(".bmp");

    var file = await picker.PickSingleFileAsync();

    if (file == null) 
        return;

    var stream = await file.OpenReadAsync();

    // Logik
}

Das ist eigentlich auch schon das ganze Geheimnis und ihr könnt jetzt eure Logik implementieren.

Als erstes müssen wir uns oben rechts unter Sign In mit der bestehenden WindowsLive-ID anmelden. Danach kommen wir mit einem Klick auf Dashboard zu der Aufforderung, der WindowsPhone-Entwicklung beizutreten:

Dem Entwicklerkreis beitreten…

Hier auf dem Dashboard findet sich nach der Registrierung, ebenso wie bei dem Windows8-Entwickleraccount ,die Übersicht der bereits veröffentlichten Applikationen und natürlich auch die Möglichkeit, eine App zur Verifizierung hochzuladen.

Solltet ihr bereits einen Windows8-Entwickleraccount besitzen, erscheint beim nächsten Schritt die auf dem nächsten Bild zu sehende, gelb hinterlegte Information, welche die Angabe des Landes und des Accounttyps ausgraut. Möchtet ihr einen anderen Microsoftaccount für den WindowsPhone-Store verwenden, ist dies ebenfalls möglich.

Zusätzlich zu dieser Auswahl müssen die Bedingungen akzeptiert werden.

Land und Accounttyp auswählen

Der nächste Schritt enthält die obligatorischen Account-Informationen. Hier kann es zu Problemen mit der Telefonnummer kommen. Es ist die Regions-Vorwahl, nicht die Landesvorwahl (+49) in das Feld in Klammern einzutragen!

Der im WindowsPhone-Store angezeigte Name muss in das letzte Feld eingetragen werden. Überprüft die Verfügbarkeit eures Namens. Ist er bereits im Windows8-Store registriert, ist das kein Garant, dass nicht jemand schon diesen Namen im WindowsPhone-Store benutzt.

Kontaktdetails

Der letzte Schritt behandelt die Bezahloptionen. Eine normale jährliche Mitgliedschaft kostet 75€. Studenten oder Nutzer mit Promotionscode können diese Gebühr umgehen. Um als Student eine kostenlose Mitgliedschaft zu erhalten, muss ein verifizierter Dreamspark-Account mit dem WindowsLive-Account verbunden sein. Wenn ihr diese Option auswählt leitet euch ein Assistent für die Zusammenführung von Konten durch den weiteren Prozess. Gibt es hierbei Probleme, führt leider kein Weg an einem Support-Ticket vorbei.

Für alle anderen Nutzer müssen im nächsten Schritt PayPal- oder Kreditkarteninformationen angegeben werden. Das angegebene Konto wird dann mit dem fälligen Betrag belastet.

Umsatzsteuer-Informationen können erst einmal übersprungen werden.

Bezahloptionen

Daten absenden und schon ist die Registrierung abgeschlossen. Ihr gelangt auf das nun frische Dashboard, welches auf eure Apps wartet!

Auch hier öffnen wir zunächst Visual Studio und öffnen die Package.appxmanifest-Datei. Dort wählen wir unter Capabilities den Eintrag Location aus, damit wir überhaupt die Berechtigung haben auf die aktuellen Positionsdaten zuzugreifen.

‘Location’ in der Package.appxmanifest-Datei aktivieren

Nun fügen wir noch zwei Referenzen zu den bereits vorhanden

using

using Windows.Devices.Geolocation;
using System.Threading;

Nun erstellen wir die asynchrone Methode

GetLocation()

private async void GetLocation()
{
    private Geolocator geolocator = new Geolocator();
    private CancellationTokenSource cts = null;

    try
    {
        cts = new CancellationTokenSource();
        CancellationToken token = cts.Token;

        Geoposition pos = await geolocator.GetGeopositionAsync().AsTask(token);
    }
    catch (Exception ex)
    {
        new MessageDialog(String.Format("Leider ist ein Fehler aufgetreten: ", ex.Message), "Fehler").ShowAsync();
    }
    finally
    {
        _cts = null;
    }
}

Nun könnt ihr hier mit den Daten, welche in der Variablen

pos

Dazu legt ihr euch zunächst ein neues WP-Projekt in Visual Studio an und öffnet dann die WMAppManifest.xml-Datei, welche ihr im Ordner Properties findet. Dort klickt ihr auf Capabilities und wählt ID_CAP_LOCATION aus, damit es überhaupt möglich ist, auf die aktuelle Position zuzugreifen.

Berechtigung zur Lokalisierung setzen

Anschließend fügen wir eine Referenz auf den Geolocation-Namespace ein, indem wir die folgende using-Anweisung ergänzen 

using Windows.Devices.Geolocation;

Nun erstellen wir die Methode

GetLocation()

private async void GetLocation()
{
    Geolocator geolocator = new Geolocator();
    geolocator.DesiredAccuracyInMeters = 10;

    try
    {
        Geoposition geoposition = await geolocator.GetGeopositionAsync(
            maximumAge: TimeSpan.FromMinutes(1),
            timeout: TimeSpan.FromSeconds(10)
            );

        MessageBox.Show("Latitude: " + geoposition.Coordinate.Latitude.ToString() + " - Longitude: " + geoposition.Coordinate.Longitude.ToString());
    }
    catch (UnauthorizedAccessException)
    {
        MessageBox.Show("Leider ist ein Fehler aufgetreten");
    }
}

Das ist eigentlich schon das ganze Geheimnis und ihr könnt nun natürlich mit dem Längen- und Breitengrad arbeiten und zum Beispiel die Position auf einer Karte anzuzeigen oder über die Bing Maps API an interessante Punkte der Umgebung gelangen.

Dev Center Preis: Kostenlos

Wem das jetzt noch alles nicht reicht, sei gesagt, dass die App auch über ein LiveTile verfügt. Diese zeigt direkt neue Reviews, Crashes oder Verkäufe auf dem Startbildschirm an. Probiert doch als WP-Entwickler die App doch selber einmal aus!

Hier findet ihr den Source-Code aus Teil 4 zum Herunterladen:

Note: There is a file embedded within this post, please visit this post to download the file.

Zunächst starten wir Visual Studio Express 2012 for Windows 8 und öffnen unser Projekt TwitterSearch. Im Solution-Explorer klicken wir nun doppelt auf die Datei MainPage.xaml. Anschließend öffnet sich diese Datei und wir sehen ein simuliertes Windows 8 Tablet als Vorschauobjekt und den bekannten XAML-Code, welcher die Oberfläche unserer App beschreibt.

das bisherige Projekt

Wir werden jetzt die MainPage ein wenig umgestalten, denn wir wollen das Suchfeld in der Charms-Leiste nutzen und daher benötigen wir das Suchfeld auf der MainPage nicht mehr.

Aktuell sieht ein Teil der MainPage wie folgt aus:

<ScrollViewer VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Grid.Row="1" Margin="120,10,10,10">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <StackPanel Margin="0" VerticalAlignment="Top" Grid.Column="0">
            <TextBlock Margin="0" TextWrapping="Wrap" Text="Twitter-Hashtag:" Style="{StaticResource SubheaderTextStyle}"/>
            <TextBox TextWrapping="Wrap" Margin="0,20,0,0" Text="{Binding SearchTag, Mode=TwoWay}"/>
            <Button Content="Suchen" Margin="0,20,0,0" Width="250" Click="Button_Click_1"/>
        </StackPanel>

        <GridView x:Name="TweetGrid" Grid.Column="1" Margin="20,0,0,0" ItemsSource="{Binding Tweets}" ItemTemplate="{StaticResource TweetItemTemplate}" SelectionMode="Single" SelectedItem="{Binding SelectedTweet, Mode=TwoWay}"/>

    </Grid>
</ScrollViewer>

Diesen Teil werden wir jetzt so überarbeiten, dass nur noch das GridView erhalten bleibt. Allerdings werden einige Eigenschaften der GridView verändert. Nachher erhalten wir diese eine Code-Zeile:

<GridView x:Name="TweetGrid" Grid.Row="1" Margin="120,10,10,10" ItemsSource="{Binding Tweets}" ItemTemplate="{StaticResource TweetItemTemplate}" SelectionMode="Single" SelectedItem="{Binding SelectedTweet, Mode=TwoWay}"/>

Nun wechseln wir in die Code-Behind-Datei und werden auch hier einiges entfernen, was wir nicht mehr benötigen. Dazu zählt die Button_Click_1-Methode, welche wir einfach entfernen.

Nun öffnen wir die Package.appxmanifest Datei über den Solution Explorer. Dort wechseln wir auf den Reiter Declarations.

Implementierung der Suche

Aus dem Auswahlmenü wählt ihr den Eintrag Search und klickt auf Add. Anschließend ist die Suche rein formal schon einmal möglich, aber jetzt müssen wir noch die Logik hinter der Suche schreiben.

Dafür öffnen wir wieder die MainPage.xaml.cs-Datei und fügen die folgende Methode in die Klasse ein:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (e.Parameter != null)
    {
        App.MainPageViewModel.SearchTag = e.Parameter as string;
        App.MainPageViewModel.Refresh();
    }

    base.OnNavigatedTo(e);
}

Außerdem erstellen wir noch die Activate-Methode:

internal static void Activate(string searchText)
{
    var previousContent = Window.Current.Content;
    var frame = previousContent as Frame;

    if (frame == null)
    {
        frame = new Frame();
        Window.Current.Content = frame;
    }

    frame.Navigate(typeof(MainPage), searchText);
    Window.Current.Activate();
}

Nun wechseln wir noch in die App.xaml.cs-Datei und fügen die OnSearchActivated-Methode hinzu:

protected override void OnSearchActivated(SearchActivatedEventArgs args)
{
    MainPage.Activate(args.QueryText);
}

Ebenso ersetzen wir die bisherige OnLaunched()-Methode mit dem folgenden Code-Schnipsel:

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState == ApplicationExecutionState.Running)
    {
        Window.Current.Activate();
        return;
    }

    if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
    {

    }

    var rootFrame = new Frame();

    if (!rootFrame.Navigate(typeof(MainPage)))
    {
        throw new Exception("Failed to create initial page");
    }

    Window.Current.Content = rootFrame;
    Window.Current.Activate();
}

Nun ist die App durchsuchbar. Sowohl bei laufender App als auch bei geschlossener App. Damit ist unsere App jetzt auch schon komplett. Damit man die App in den Store hochladen kann, müsste noch das Impressum und die Datenschutzerklärung ergänzt werden, wofür sich das SettingsFlyout aus dem Callisto-Toolkit anbietet.

Den kompletten Source-Code findet ihr nun hier:

Note: There is a file embedded within this post, please visit this post to download the file.

Hier findet ihr den Source-Code aus Teil 3 zum Herunterladen:

Note: There is a file embedded within this post, please visit this post to download the file.

Zunächst starten wir Visual Studio Express 2012 for Windows 8 und öffnen unser Projekt TwitterSearch. Im Solution-Explorer klicken wir nun doppelt auf die Datei MainPage.xaml. Anschließend öffnet sich diese Datei und wir sehen ein simuliertes Windows 8 Tablet als Vorschauobjekt und den bekannten XAML-Code, welcher die Oberfläche unserer App beschreibt.

die bisherige App

Öffnet nun die Datei MainPageViewMode.cs, denn wir müssen die

Refresh()

using Windows.UI.Notifications;

Nun navigiert ihr mit dem Cursor unter die foreach-Schleife, aber vor der schließenden geschweiften Klammer der Methode und fügt dort den folgenden Code ein:

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
updater.EnableNotificationQueue(true);

foreach (var tweet in _tweets)
{
    var wideContent = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideBlockAndText01);
    wideContent.GetElementsByTagName("text")[0].AppendChild(wideContent.CreateTextNode(tweet.Author));
    wideContent.GetElementsByTagName("text")[1].AppendChild(wideContent.CreateTextNode(tweet.Body));

    var smallContent = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText02);
    smallContent.GetElementsByTagName("text")[0].AppendChild(smallContent.CreateTextNode(tweet.Author));
    smallContent.GetElementsByTagName("text")[1].AppendChild(smallContent.CreateTextNode(tweet.Body));

    var wideNotification = new TileNotification(wideContent);
    updater.Update(wideNotification);

    var smallNotification = new TileNotification(smallContent);
    updater.Update(smallNotification);
}

Somit funktioniert bereits das LiveTile bereits für eine große und eine kleine Kachel und wir können uns um ein neues App-Logo kümmern. Wir brauchen das Logo in mindestens 3 Größen und wenn wir ein großes Teil verwenden wollen sogar in 4 Größen:

• Logo: 150 x 150
• WideLogo: 310 x 150
• SmallLogo: 30 x 30
• StoreLogo: 50 x 50

Erstellt einfach das Logo mit einem Grafikprogramm, z.B. Paint oder Paint.Net. Anschließend entfernen wir die Bilder Logo.png, SmallLogo.png und StoreLogo.png aus dem Asset-Ordner und fügen an diese Stelle unsere eigenen Icons per Drag & Drop wieder ein.

Nun öffnet ihr die Package.appxmanifest-Datei über den Solution Explorer und ihr seht dort bereits euer neues Logo. Da ich die Hintergrund-Farbe grau ein wenig langweilig finde, ersetze ich diese durch ein freundliches Orange. Dazu klicke ich zunächst auf Tile Images and Logos und wähle dort unter Background color einen neuen Farbwert, z.B. FF6E22. Außerdem möchte ich nicht, dass der App-Name angezeigt wird. Daher trage ich bei Show name einfach No Logos ein.

Nun fehlt nur noch einen Splash-Screen. Dieser wird angezeigt, wenn die App startet. Dazu müssen wir ein Bild mit einer Größe von 620x300px erstellen. Auch hierfür eigenen sich wunderbar Paint oder Paint.Net. Nun wird einfach die Datei SplashScreen.png im Asset-Ordner ausgetauscht und schon verfügt die App über ein eigenes ansprechendes Logo.

Hier findet ihr den den Source-Code aus Teil 2 als kostenlosen Download:

Note: There is a file embedded within this post, please visit this post to download the file.

Zunächst starten wir Visual Studio Express 2012 for Windows 8 und öffnen unser Projekt TwitterSearch. Im Solution-Explorer klicken wir nun doppelt auf die Datei MainPage.xaml. Anschließend öffnet sich diese Datei und wir sehen ein simuliertes Windows 8 Tablet als Vorschauobjekt und den bekannten XAML-Code, welcher die Oberfläche unserer App beschreibt.

bisherige App

Wechselt nun in die MainPageViewModel.cs-Datei. Bevor wir hier Änderungen vornehmen, müssen wir vorher erst noch eine weitere Referenz hinzufügen. Navigiert dazu ganz nach oben und tragt dort 

using Windows.ApplicationModel.DataTransfer;

Anschließend definiert ihr zwischen der Klassendefinition und dem Konstruktor noch die folgende Variable:

private DataTransferManager dataTransferManager;

Navigiert nun zum noch leeren Konstruktor und tragt dort den folgenden Code ein:

dataTransferManager = DataTransferManager.GetForCurrentView();
dataTransferManager.DataRequested += dataTransferManager_DataRequested;

Anschließend erstellt ihr unterhalb des Konstruktors eine weitere Methode, welche wie folgt aussieht:

void dataTransferManager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{

}

Dort tragt ihr jetzt den folgenden Rumpf ein:

if (SelectedTweet != null)
{
    args.Request.Data.Properties.Title = SelectedTweet.Author;
    args.Request.Data.Properties.Description = SelectedTweet.Body;

    args.Request.Data.SetText(SelectedTweet.Body);
}
else
{
    args.Request.FailWithDisplayText("No tweet selected");
}

Falls der Nutzer nun einen Tweet ausgewählt hat, so werden die entsprechenden Daten aufbereitet und einer durch den Nutzer ausgewählten App zur Verfügung gestellt. Ist kein Tweet ausgewählt, so wird eine (kleine) Fehlermeldung angezeigt.

Wenn wir die App nun testen, werden wir sehen, dass sobald ein Tweet ausgewählt wurde und der Teilen-Charm geöffnet wird, dass sich der Inhalt des Tweets teilen lässt.

das Teilen ist integriert

Was aber auch auffällt, ist die Tatsache, dass man innerhalb der GridView gar nicht den gesamten Tweet sehen kann. Dies wollen wir nun nachholen, indem wir ein Popup definieren, welches sich beim Auswählen eines Tweets automatisch öffnet und den Tweet in voller Größe präsentiert. Dazu wechseln wir zurück zur MainPage.xaml-Datei und unterhalb von

</ScrollViewer>

<Popup x:Name="TweetPopup" HorizontalOffset="10" VerticalOffset="10" IsLightDismissEnabled="True">
    <Popup.ChildTransitions>
        <TransitionCollection>
            <PopupThemeTransition />
        </TransitionCollection>
     </Popup.ChildTransitions>
     <Border x:Name="TweetBorder" BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="2" Width="500" Height="250">
        <Grid Background="LightGray">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="125"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="1" Margin="10">
                <TextBlock TextWrapping="Wrap" Text="{Binding Author}" Style="{StaticResource SubheaderTextStyle}" Foreground="Black"/>
                <TextBlock TextWrapping="Wrap" Text="{Binding Body}" Style="{StaticResource BodyTextStyle}" Foreground="Black"/>
            </StackPanel>

            <Image Margin="10,10,0,10" Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{Binding Image}"/>

        </Grid>
    </Border>
</Popup>

Nun sucht ihr auf der MainPage.xaml das definierte Daten-Template zur Anzeige eines Tweets innerhalb unserer GridView. Dieses befindet sich innerhalb der Page-Resourcen. Markiert dort das Grid¹ und öffnet das Properties-Fenster, was ihr am rechten Rand von Visual Studio findet. Dort wechseln wir zu den Events, indem wir oben neben dem Namen auf das Blitz-Icon klicken. Sucht dort das Tapped-Event und klickt doppelt in die leere TextBox.

Tapped-Event implementieren

Somit habt ihr einen neuen Methoden-Rumpf in der MainPage.xaml.cs-Datei angelegt. Nun definieren wir zunächst in der Code-Behind-Datei, welche sich automatisch geöffnet hat, eine Variable oberhalb des Konstruktors:

using TwitterSearch.DataModel;

Den erstellen Methoden-Rumpf füllen wir nun mit den folgenden Zeilen:

if (!TweetPopup.IsOpen)
{
    TweetPopup.HorizontalOffset = (_windowsSize.Width / 2) - (TweetBorder.Width / 2);
    TweetPopup.VerticalOffset = (_windowsSize.Height / 2) - (TweetBorder.Height / 2);

    TweetBorder.DataContext = dc;

    TweetPopup.IsOpen = true;
}

Nun sind wir in der Lage einen Tweet in einem Popup-Fenster anzeigen zu lassen und diesen auch schon zu teilen.

Tweet-Popup in Aktion

1. Einfach den Cursor in die Zeile mit dem Grid navigieren.

Den Source-Code aus Teil 1 könnt ihr hier herunterladen:

Note: There is a file embedded within this post, please visit this post to download the file.

Zunächst starten wir Visual Studio Express 2012 for Windows 8 und öffnen unser Projekt TwitterSearch. Im Solution-Explorer klicken wir nun doppelt auf die Datei MainPage.xaml. Anschließend öffnet sich diese Datei und wir sehen ein simuliertes Windows 8 Tablet als Vorschauobjekt und den bekannten XAML-Code, welcher die Oberfläche unserer App beschreibt.

unser bisheriges Projekt

Nun wende ich einen kleinen Trick an, denn die vorliegende Seite hat nur wenige Vorgaben und ist noch nicht nach dem Windows Design ausgelegt. Daher klicken wir nun die MainPage.xaml-Datei mit der rechten Maustaste an und klicken auf Delete und bestätigen den Dialog mit OK.

Nun klicken wir mit der rechten Maustaste auf TwitterSearch und wählen Add – New Item. Dort wählen wir Basic Page aus und geben den Namen MainPage ein.

neue ‘Basic Page’ anlegen

Nun erhalten wir den Hinweis, dass einige Dateien in unserem Projekt fehlen und Visual Studio diese gerne automatisch hinzufügen möchte. Diesen Dialog bestätigen wir mit einen Klick auf Ja.

automatisch Dateien hinzufügen

Anschließend sehen wir eine neue Seite, welche über eine Überschrift und einen Zurück-Button verfügt.

die neue MainPage als ‘Basic Page’

Wir wollen nun den Namen ‘My Application’ ändern. Dazu suchen wir die folgende Zeile im XAML-Code¹:

<x:String x:Key="AppName">My Application</x:String>

und ändert den String My Application in TwitterSearch.

Nun gehen wir unterhalb des des Grids mit dem Kommentar

<!-- Back button and page title -->

<ScrollViewer VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Grid.Row="1" Margin="120,10,10,10">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <StackPanel Margin="0" VerticalAlignment="Top" Grid.Column="0">
            <TextBlock Margin="0" TextWrapping="Wrap" Text="Twitter-Hashtag:" Style="{StaticResource SubheaderTextStyle}"/>
            <TextBox TextWrapping="Wrap" Margin="0,20,0,0" Text="{Binding SearchTag, Mode=TwoWay}"/>
            <Button Content="Suchen" Margin="0,20,0,0" Width="250"/>
        </StackPanel>

    </Grid>
</ScrollViewer>

Hier wird zunächst eine scrollbare Ansicht definiert, welche ein Grid beinhaltet. Das Grid besteht aus zwei Spalten. In der ersten Spalte definieren wir eine Überschrift, eine TextBox und ein Button. Die rechte Spalte haben wir noch nicht definiert, aber hier sollen später die Twitter-Ergebnisse angezeigt werden.

In die Lücke zwischen

</StackPanel>

</Grid>

<GridView x:Name="TweetGrid" Grid.Column="1" Margin="20,0,0,0" ItemsSource="{Binding Tweets}" ItemTemplate="{StaticResource TweetItemTemplate}" SelectionMode="Single" SelectedItem="{Binding SelectedTweet, Mode=TwoWay}"/>

Ihr werdet merken, dass euch Visual Studio die Definition des ItemTemplates blau unterkringelt, denn diese ist noch nicht definiert. Das wollen wir nun nachholen, in dem wir den folgenden Code zwischen

<Page.Resources>

</Page.Resources>

<DataTemplate x:Key="TweetItemTemplate">
    <Grid Height="80" Width="300" Background="LightGray">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Column="1" Margin="10">
            <TextBlock TextWrapping="Wrap" Text="{Binding Author}" Width="200" Foreground="Black"/>
            <TextBlock TextWrapping="Wrap" Text="{Binding Body}" Foreground="Black"/>
        </StackPanel>

        <Image Margin="10,10,0,10" Stretch="UniformToFill" Source="{Binding Image}"/>

    </Grid>
</DataTemplate>

Auch hier wird wieder ein zweispaltiges Grid angelegt, welches in der linken Spalte das Bild anzeigt und in der rechten Spalte den Autor und die Twitter-Nachricht.

Nun sind wir auch fast schon fertig und können die App testen, allerdings muss vorher noch eine Verbindung zwischen dem Modell und den UI hergestellt werden. Dafür öffnet ihr die App.xaml.cs-Datei und gebt dort oberhalb von

public App()

private static MainPageViewModel _mainPageViewModel;

public static MainPageViewModel MainPageViewModel
{
    get
    {
        if (_mainPageViewModel == null)
            _mainPageViewModel = new MainPageViewModel();

            return _mainPageViewModel;
    }
}

Nun wechselt ihr zurück auf die MainPage.xaml und klickt doppelt auf den Button, damit wir die Suche nach dem String noch implementieren können. In die automatisch generierte Methode tragt ihr die folgende Zeile ein, welche einfach die

Refresh()

App.MainPageViewModel.Refresh();

Nun gebt ihr in dem Konstruktor, unterhalb von

this.InitializeComponent()

this.DataContext = App.MainPageViewModel;

Nun solltet ihr spätestens eine Internetverbindung herstellen und dann könnt ihr über den “Play-Button” die App ausführen.

die bisherige App

Somit haben wir jetzt bereits eine lauffähige Version unserer Twitter-Anwendung geschrieben. Diese Stand nehmen wir nun in den weiteren Teilen der Serie als Grundlage und werde somit tolle Windows 8 Features in die App integrieren.

1. Die Zeile befindet sich innerhalb der Page.Resources.

Zunächst starten wir Visual Studio Express 2012 for Windows 8 und wählen File – New Project. Ich werde die Anwendung in C# entwickeln und daher wähle ich Visual C# – Windows Store – Blank App (XAML). Anschließend wählen wir noch einen Namen für das Projekt, z.B. TwitterSearch. Anschließend bestätigen wir diesen Dialog mit einem Klick auf OK.

Anlegen der TwitterSearch-App in VS2012

Anschließend legt Visual Studio bereits ein paar Dateien an, welche für die App notwendig sind. Im Lauf dieser Serie werden wir bestehende Dateien ergänzen bzw. ändern, aber auch neue Dateien anlegen.

leere App

Zunächst wollen wir das Daten-Modell für unsere Twitter-Suche implementieren. Dazu gehen wir mit der rechten Maustaste auf TwitterSearch und wählen Add – New Folder. Diesen neuen Ordner nennen wir DataModel. Nun klicken wir mit der rechten Maustaste auf den neuen Ordner DataModel und wählen Add – Class. Diese Klasse nennen wir TweetItem. Nun sollten wir das folgende Bild haben:

die TweetItem-Klasse

Zunächst ergänzen wir

public

class

Windows.UI.Xaml.Media

using Windows.UI.Xaml.Media;

Anschließend geben wir die drei Eigenschaften, welche ein Tweet bei uns erhalten soll in die Klasse ein. Dazu zählen der Autor, die eigentliche Nachricht, sowie das Autor-Bild. Es ergibt sich somit die folgende Klasse:

public class TweetItem
{
    public string Author { get; set; }
    public string Body { get; set; }
    public ImageSource Image { get; set; }
}

Damit haben wir bereits einen Tweet definiert. Nun definieren wir noch eine weitere Klasse, welche die Tweets abruft und für uns zur weiteren Verwendung aufbereitet. Dazu klicken wir erneut mit der rechten Maustaste auf den Ordner DataModel und wählen Add – Class. Als Namen wählen wir MainPageViewModel, denn hierbei handelt es sich um das ViewModel der späteren MainPage.

Auch hier müssen wir ein paar Referenzen hinzufügen, welche wir innerhalb der Klasse benötigen. Gebt dazu einfach im oberhalb der Klassen-Definition die folgenden Zeilen ein:

using System.Collections.ObjectModel;
using System.ComponentModel;
using Windows.UI.Xaml.Media.Imaging;
using Windows.Web.Syndication;

Ihr solltet nun folgendes auf dem Bildschirm sehen:

das leere MainPageViewModel

Auch diese Klassen machen wir zunächst

public

INotifyPropertyChanged

: INotfiyPropertyChagend

public class MainPageViewModel : INotifyPropertyChanged

Nun definieren wir ein paar Variablen. Dazu gehört zum Beispiel die URL zum Twitter-Dienst oder auch die Liste zum Verwalten der gefunden Tweets. Dazu geben wir die folgenden Zeilen in die Klassen-Definition ein:

private const string _twitterUri = "http://search.twitter.com/search.rss?q=";
private string _searchTag = String.Empty;
private TweetItem _selectedTweet;
private ObservableCollection<TweetItem> _tweets = new ObservableCollection<TweetItem>();

Im nächsten Schritt implementieren wir das angegebene Interface. Dazu geben wir den folgenden Code oberhalb der schließenden geschweiften Klammer ein:

public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Damit wir nun auch außerhalb dieser Klasse auf die Daten zugreifen können, definieren wir eine Reihe von Getter- und Setter-Methoden. Diese fügen wir unterhalb der Methode

OnPropertyChanged()

public string SearchTag
{
    get { return _searchTag; }
    set { if (value != _searchTag) { _searchTag = value; OnPropertyChanged("SearchTag"); } }
}

public TweetItem SelectedTweet
{
    get { return _selectedTweet; }
    set { if (value != _selectedTweet) { _selectedTweet = value; } }
}

public ObservableCollection<TweetItem> Tweets
{
    get { return _tweets; }
}

Nun erstellen wir den Konstruktor, welcher zunächst jedoch leer bleibt und erst im weiteren Verlauf der Serie mit Inhalt gefüllt wird.

public MainPageViewModel()
{

}

Abschließend benötigen wir noch eine Refresh-Methode, welche den eingegeben Search-Tag nimmt und die entsprechende Anfrage an Twitter sendet. Dann werden die übermittelten Tweets an die Liste übergeben, so dass wir später darauf Zugriff haben. Die Methode Refresh() hat nun den folgenden Rumpf:

public async void Refresh()
{
    var uri = new Uri(_twitterUri + Uri.EscapeUriString(_searchTag));

    var client = new SyndicationClient();
    var feed = await client.RetrieveFeedAsync(uri);

    _tweets.Clear();

    foreach (var item in feed.Items)
    {
        _tweets.Add(new TweetItem()
        {
            Author = item.Authors.First().NodeValue,
            Body = item.Title.Text,
            Image = new BitmapImage(new Uri(item.ElementExtensions.First(e => e.NodeName == "image_link").NodeValue))
        });
    }
}

Zunächst wird hier die endgültige URL zur Twitter-Sucher erstellt, bevor ein sogenannter SyndicationClient für den Abruf der Daten zuständig ist. Abschließend werden die Ergebnisse noch der Tweet-Liste hinzugefügt.

Damit haben wir auch schon das Ende des ersten Teils dieser Twitter-App erreicht. Im nächsten Teil werden wir eine erste Ansicht bauen, welche dann die Daten aus dem Modell entnimmt und uns auf der MainPage darstellt.

1. Ein Hashtag ist ein Stichwort in Form eines Tags, das insbesondere bei Twitter Verwendung findet. Die Bezeichnung stammt vom Doppelkreuz, mit dem das betreffende Wort markiert wird.
2. Die Beiträge bei Twitter selbst werden als “Tweets” oder „Updates“ bezeichnet.
3. vor der öffnenden geschweiften Klammer

Audials Radio Preis: Kostenlos

Durch die eingebaute Suchfunktion in der Charms-Bar findet ihr schnell und unkompliziert den Radiosender eurer Wahl. Die App läuft dann bequem im Hintergrund und ihr könnt gewohnt mit eurem Rechner oder Tablet weiterarbeiten. Dabei könnt ihr den Radiosender sogar kurzfristig pausiert und setzt dann ab dem Zeitpunkt wieder mit der Musik ein. Dabei beschränkt sich die App auch nicht nur auf deutsche Radiosender, denn laut der App-Beschreibung hat Audials Radio mehr als 40.000 Sender im Angebot und somit ist garantiert für jeden Geschmack etwas dabei!