TwitterSearch-App für Windows 8 #1

Willkommen zur neuen Serie hier bei tsjDEV.de. Wie der Name es schon vermuten lässt, möchte ich in dieser Serie eine Twitter-Suche implementieren. Dazu stellen wir dem Nutzer zunächst eine TextBox zur Verfügung, wo er einen Hashtag1 eintragen kann und dann werden die aktuellsten Tweets2 zu diesem Thema abgerufen und übersichtlich dargestellt. Im Verlaufe der Serie werden wir diese App immer wieder um weitere Windows 8 Features ergänzen. Die Gesamtserie umfasst dabei 5 Teile.

Zunächst starten wir Visual Studio Express 2012 for Windows 8 und wählen FileNew Project. Ich werde die Anwendung in C# entwickeln und daher wähle ich Visual C#Windows StoreBlank 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

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

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 AddNew Folder. Diesen neuen Ordner nennen wir DataModel. Nun klicken wir mit der rechten Maustaste auf den neuen Ordner DataModel und wählen AddClass. Diese Klasse nennen wir TweetItem. Nun sollten wir das folgende Bild haben:

die TweetItem-Klasse

die TweetItem-Klasse

Zunächst ergänzen wir public vor class, damit wir später auf die Klasse zugreifen können. Anschließend fügen wir noch eine Referenz auf Windows.UI.Xaml.Media hinzu. Dazu geben wir oberhalb der Klassen-Definition die folgende Zeile ein:

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:

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 AddClass. 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:

Ihr solltet nun folgendes auf dem Bildschirm sehen:

das leere MainPageViewModel

das leere MainPageViewModel

Auch diese Klassen machen wir zunächst public. Dann wollen wir noch das INotifyPropertyChanged-Interface verwenden. Dazu geben wir hinter der Klassen-Definition3 einfach : INotfiyPropertyChagend ein. Wir erhalten somit die folgende Klassen-Definition:

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:

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

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() ein:

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

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:

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 []

Das könnte dich auch interessieren...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.