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 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 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:
|
1 |
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:
|
1 2 3 4 5 6 |
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:
|
1 2 3 4 |
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. 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:
|
1 |
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:
|
1 2 3 4 |
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:
|
1 2 3 4 5 6 7 8 |
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() ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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.
|
1 2 3 4 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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.
- 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. [↩]
- Die Beiträge bei Twitter selbst werden als „Tweets“ oder „Updates“ bezeichnet. [↩]
- vor der öffnenden geschweiften Klammer [↩]