WP7 Integration von Twitter in Ihre App

Mit der Twitter-Integration können Benutzer App-Inhalte auf ihrer Timeline freigeben. Bei Multimedia-Apps kann der Benutzer beispielsweise das Lied twittern, das er gerade hört, oder wenn es sich bei der App um ein Spiel handelt, kann ein neuer freigeschalteter Erfolg getweetet werden. Durch die Einbindung von Twitter in Ihre App wird sie hervorstechen und die Nutzer können sie bewerben.

Schritt 1: Visual Studio-Projekterstellung

Zunächst müssen wir ein neues Projekt in Visual Studio erstellen. Für dieses Tutorial benötigen wir eine einfache App. Wählen Sie daher die Option "Windows Phone App":

Wenn Sie Visual Studio 2012 mit dem neuen WP8-SDK verwenden, werden Sie nach der Zielversion von Windows Phone OS gefragt. Wenn dies der Fall ist, wählen Sie das Betriebssystem 7.1 aus.

Schritt 2: Erstellen der Benutzeroberfläche

Nachdem Sie das Projekt erstellt haben, öffnen Sie die Datei "MainPage.xaml", falls sie noch nicht geöffnet ist, und ändern Sie das Standardfeld für die Anwendung und den Seitennamen.

Fügen Sie nun im ContentPanel-Grid zwei Zeilen hinzu, eine für eine TextBox, in die der Benutzer den neuen Status eingeben soll, und die andere für die Schaltfläche, um den Status zu übermitteln:

Fügen Sie dann in der ersten Zeile ein TextBox mit dem Namen "Message" und eine Schaltfläche in der zweiten Zeile hinzu:

Am Ende solltest du folgendes haben:

Schritt 3: Erstellen eines Twitter-Entwicklerkontos

Um sich mit Twitter zu verbinden, benötigen Sie zunächst einen Entwicklerkonto. Gehen Sie auf die Twitter-Entwickler-Homepage und melden Sie sich mit Ihrem Twitter-Konto an, oder erstellen Sie eines, falls Sie noch keinen haben.

Schritt 4: Registrieren der neuen App

Wenn Sie angemeldet sind, wechseln Sie zur Seite "Meine Anwendungen" und klicken Sie auf die Schaltfläche "Neue Anwendung erstellen". Füllen Sie auf der folgenden Seite die Anwendungsdetails aus. Wenn Sie bereits über eine Website verfügen, geben Sie Ihre Website in die Felder Website und Callback-URL ein. Verwenden Sie andernfalls einen Platzhalter wie "http://www.google.com". Nach diesem Schritt erscheint eine neue Seite mit zwei Token, dem "Access Token" und dem "Access Token Secret". Kopieren Sie diese Codes und fügen Sie sie als konstante Zeichenfolgen über Ihrem Konstruktor "MainPage.xaml.cs" hinzu:

 private const string consumerKey = "hier Ihr Schlüssel"; private const string consumerSecret = "hier dein Geheimnis"; // Konstruktor public MainPage () InitializeComponent ();

Schritt 5: Einführung in Tweetsharp

Twitter verfügt über eine vollständige API, mit der Sie Ihre App auf verschiedene Weise mit dem Dienst verbinden können. Es ist klar und leicht zu folgen, daher ist es eine großartige Ergänzung für jede App. Beachten Sie, dass die Authentifizierungs-API mit OAuth erstellt wird. Dies macht sie sehr sicher, aber Entwickler können sich nicht mit der API verbinden. Die Schritte zum Herstellen der Verbindung zur API werden in der OAuth-Dokumentation der API beschrieben. Es gibt verschiedene Möglichkeiten, eine Verbindung herzustellen, aber in diesem Lernprogramm werden wir die dreigliedrige Autorisierung verwenden. Diese Methode fragt nach einem Anfragetoken, führt den Benutzer zu einer Anmeldeseite und sammelt das AccessToken. Dieser Vorgang kann etwas kompliziert sein, insbesondere wenn Sie versuchen, nur ein oder zwei Funktionen der API hinzuzufügen. Glücklicherweise gibt es eine von Daniel Crenna entwickelte Bibliothek namens Tweetsharp. Tweetsharp ist ein großartiges Tool, das die Kommunikation zwischen Ihren WP7-Apps und Twitter vereinfacht. Es ist sehr einfach zu bedienen und ermöglicht Ihnen den Zugriff auf die gesamte Twitter-API aus nur einer Bibliothek:

TweetSharp ist eine Twitter-API-Bibliothek, die das Hinzufügen von Twitter zu Ihren Desktop-, Web- und mobilen Anwendungen vereinfacht. Sie können mit TweetSharp einfache Widgets oder komplexe Anwendungs-Suites erstellen.

Weitere Informationen zum Projekt finden Sie auf der jeweiligen Website und in den gehosteten Beispielprojekten.

Schritt 6: Tweetsharp herunterladen

Die Bibliothek ist nur über NuGet verfügbar. Falls Ihr Visual Studio den NugGet Package Manager nicht enthält, müssen Sie es von der NuGet-Homepage herunterladen. Um das Paket herunterzuladen, öffnen Sie die Package Manager Console in Visual Studio (Extras> Bibliothek Package Manager> Package Manager Console) und geben Sie den folgenden Befehl ein:Installationspaket TweetSharp.

Schritt 7: Tweetsharp zum Projekt hinzufügen

Nun, da wir die Bibliothek haben, können wir sie unserem Projekt hinzufügen. Fügen Sie einen neuen Import in der Datei "MainPage.xaml.cs" hinzu:

 mit Tweetsharp

Schritt 8: Hinzufügen eines Browsers

Um eine App mit dem Twitter-Konto eines Benutzers zu verbinden, müssen wir zunächst Zugriff und Erlaubnis für das Twitter-Konto erhalten. Dies geschieht über die Webseite von Twitter. Daher müssen wir einen Webbrowser hinzufügen. Der Browser sollte den Großteil der Seite abdecken, so dass er zunächst reduziert wird und erst dann sichtbar wird, wenn der Benutzer sich anmelden muss. Fügen Sie in der Datei "MainPage.xaml" einen neuen WebBrowser direkt unter dem ContentPanel hinzu:

Schritt 9: Verbinden mit Twitter

Nachdem wir nun Tweetsharp und den Webbrowser hinzugefügt haben, können wir unsere App mit Twitter verbinden. Die Verbindung wird über ein TwitterService-Objekt hergestellt. Daher müssen wir eine private globale Variable erstellen und sie im Konstruktor initialisieren:

 privater TwitterService-Client; // Konstruktor public MainPage () InitializeComponent (); client = neuer TwitterService (consumerKey, consumerSecret);

Schritt 10: Hinzufügen des Klickereignisses

Wenn ein Benutzer zum ersten Mal auf die Schaltfläche "Tweet" klickt, müssen Sie ihn zur Twitter-Anmeldeseite senden, damit er Ihnen die erforderliche Berechtigung für Ihre App erteilen kann. Fordern Sie dazu ein RequestToken an. Sobald Sie das Token haben, gehen Sie zur Anmeldeseite. Zuerst müssen Sie das Klickereignis auf Ihrer Klick-Schaltfläche hinzufügen:

Fügen Sie nun diese Methode zum Code hinzu:

 private void tweetClick (Objektsender, RoutedEventArgs e) // Abfrage des Tokens

Bevor wir den Code für das Token hinzufügen können, benötigen wir zwei Dinge: eine boolsche Variable, die uns darüber informiert, ob der Benutzer bereits angemeldet ist, und eine Variable, die das RequestToken speichert. Fügen wir dies dem Code über dem Konstruktor hinzu:

 private OAuthRequestToken requestToken; private bool userAuthenticated = false;

Schritt 11: Bearbeitung des RequestToken

Wenn die Variablen fertig sind, können wir die Methode zum Verarbeiten unseres RequestedToken erstellen. Dadurch wird nach Fehlern gesucht. Wenn alles richtig gemacht wurde, speichern Sie das Token und bringen Sie den Benutzer zur Anmelde-URL vom RequestToken:

 private void processRequestToken (OAuthRequestToken-Token, Antwort von TwitterResponse) if (token == null) Dispatcher.BeginInvoke (() => MessageBox.Show ("Fehler beim Anfordern von Token");; else requestToken = Token; Dispatcher.BeginInvoke (() => Browser.Visibility = System.Windows.Visibility.Visible; Browser.Navigate (client.GetAuthorizationUri (requestToken)););

Fügen Sie nun den Code hinzu, um das Token innerhalb der Click-Ereignismethode anzufordern:

 // Wenn der Benutzer bereits angemeldet ist, senden Sie einfach den Tweet. Andernfalls rufen Sie das RequestToken ab, wenn (userAuthenticated) // den Tweet senden. Dies ist lediglich ein Platzhalter. Wir werden den eigentlichen Code später hinzufügen. Dispatcher.BeginInvoke (() =>  MessageBox.Show ("Platzhalter für das Senden von Tweets");); else client.GetRequestToken (processRequestToken);

Schritt 12: Navigiertes Ereignis hinzufügen

Nachdem sich der Benutzer angemeldet hat und unsere App akzeptiert hat, führt uns Twitter zu einer URL, die einen Verifizierungscode enthält, den wir zum Anfordern des AccessToken benötigen. Fügen Sie diese Ereignismethode unserem Browser hinzu

Verwenden Sie den Ereigniscode:

 private void browserNavigated (Objektsender, System.Windows.Navigation.NavigationEventArgs e)

Um den Überprüfungscode von der URL abzurufen, benötigen wir einen Parser. In diesem Fall handelt es sich um eine Methode, die sich in der Hammock-Erweiterungsbibliothek befindet. Kopieren Sie diesen Code und fügen Sie ihn Ihrem Projekt hinzu:

 // Aus Hammock.Extensions.StringExtensions.cs öffentliches statisches IDictionary ParseQueryString (Zeichenfolge Abfrage) // [DC]: Diese Methode dekodiert keine URLs und kann dekodierte Eingaben nicht verarbeiten, wenn (query.StartsWith ("?")) Query = query.Substring (1); if (query.Equals (string.Empty)) neues Wörterbuch zurückgeben();  var parts = query.Split (new [] '&'); return parts.Select (part => part.Split (new [] '=')). ToDictionary (paar => paar [0], paar => paar [1]);

Mit dieser Methode können wir den Prüfcode für die Ereignismethode browserNavigated abrufen:

 private void browserNavigated (Objektsender, System.Windows.Navigation.NavigationEventArgs e) if (e.Uri.AbsoluteUri.Contains ("oauth_verifier")) var values = ParseQueryString (e.Uri.AbsoluteUri); String Verifier = Werte ["oauth_verifier"]; // getTheAccessToken Dispatcher.BeginInvoke (() => Browser.Visibility = System.Windows.Visibility.Collapsed;);

Schritt 13: Verarbeiten des AccessToken

Genau wie beim RequestToken müssen wir eine Methode erstellen, die das Ergebnis der AccessToken-Anforderung verarbeitet. Sobald wir das Ergebnis erhalten, müssen wir auf Fehler prüfen. Wenn die Anfrage erfolgreich abgeschlossen wurde, authentifizieren wir den Benutzer und senden den Tweet:

 private void processAccessToken (OAuthAccessToken-Token, Antwort von TwitterResponse) if (token == null) Dispatcher.BeginInvoke (() => MessageBox.Show ("Fehler beim Abrufen des Zugriffstokens");); else client.AuthenticateWith (token.Token, token.TokenSecret); userAuthenticated = true; // Senden Sie den Tweet, wir werden diesen Code später hinzufügen

Wenn dies abgeschlossen ist, wechseln Sie zur browserNavigated-Methode und ändern Sie den getTheAccessToken-Kommentar mit der folgenden Zeile:

 client.GetAccessToken (requestToken, verifier, processAccessToken);

Schritt 14: Behandlung einer Tweet-Antwort

Wenn wir einen Tweet senden, möchten wir wissen, ob er erfolgreich gesendet wurde. Deshalb brauchen wir eine andere Methode, um mit einem Tweet umzugehen. Hier ist der Code, den wir hinzufügen müssen:

 private void tweetResponse (TwitterStatus-Tweet, TwitterResponse-Antwort) if (response.StatusCode == HttpStatusCode.OK) Dispatcher.BeginInvoke (() => MessageBox.Show ("Tweet posted erfolgreich");); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Fehler, bitte später erneut versuchen"););

Zum Schluss ändern Sie den Tweet senden-Kommentar zu den Methoden processAccessToken und tweetClick mit der folgenden Zeile:

 Dispatcher.BeginInvoke (() => client.SendTweet (Message.Text, tweetResponse));

Schritt 15: Testen Sie Ihre App

Im Moment sollte Ihre App voll funktionsfähig sein, also testen Sie sie. Geben Sie eine beliebige Nachricht ein, klicken Sie auf die Schaltfläche "Tweet" und der folgende Bildschirm sollte angezeigt werden.

Danach sollte eine Nachricht mit dem Titel "Tweet erfolgreich gesendet" angezeigt werden:

Wenn Sie zum Twitter-Konto wechseln, sollten Sie auch den gerade gesendeten Tweet sehen können:

Herzliche Glückwünsche! Sie haben jetzt eine App, die eine Verbindung zu Twitter herstellen kann! Aber wir sind noch nicht fertig. Es gibt einige Bereiche, die wir verbessern können.

Schritt 16: Speichern des AccessToken

Jedes Mal, wenn ein Benutzer Ihre App öffnet, muss er die Twitter-Anmeldeseite aufrufen. Dies ist etwas, das die Nutzer nicht mögen. Sie möchten sich einmal registrieren und können problemlos tweeten. Dieses Problem ist leicht zu lösen. Wir müssen das AccessToken speichern, das wir bei der ersten Anmeldung des Benutzers erhalten haben. Sobald dies abgeschlossen ist, wird es in IsolatedStorage gespeichert und ist immer verfügbar. Dies kann mit der folgenden Methode durchgeführt werden:

 private void saveAccessToken (OAuthAccessToken-Token) if (IsolatedStorageSettings.ApplicationSettings.Contains ("accessToken")) IsolatedStorageSettings.ApplicationSettings ["accessToken"] = token; else IsolatedStorageSettings.ApplicationSettings.Add ("accessToken", token); IsolatedStorageSettings.ApplicationSettings.Save ();

Und Importieren der IsolatedStorage-Bibliothek:

 using System.IO.IsolatedStorage;

Jetzt können wir das erhaltene AccessToken von der processAccessToken-Methode speichern:

 private void processAccessToken (OAuthAccessToken-Token, Antwort von TwitterResponse) if (token == null) Dispatcher.BeginInvoke (() => MessageBox.Show ("Fehler beim Abrufen des Zugriffstokens");); else client.AuthenticateWith (token.Token, token.TokenSecret); saveAccessToken (Token); userAuthenticated = true; Dispatcher.BeginInvoke (() => client.SendTweet (Message.Text, tweetResponse));

Schritt 17: Abrufen des AccessToken

Da das Token bereits in IsolatedStorage vorhanden ist, benötigen wir eine Methode, um es abzurufen. Fügen Sie die folgende Methode hinzu:

 privates OAuthAccessToken getAccessToken () if (IsolatedStorageSettings.ApplicationSettings.Contains ("accessToken")) Gibt IsolatedStorageSettings.ApplicationSettings ["accessToken"] als OAuthAccessToken zurück. sonst null zurückgeben;

Diese Funktion sollte vom Konstruktor aus aufgerufen werden, da wir von Anfang an angemeldet sein wollen:

 // Konstruktor public MainPage () InitializeComponent (); client = neuer TwitterService (consumerKey, consumerSecret); // Chek, wenn wir bereits die Autehntification-Daten haben var token = getAccessToken (); if (token! = null) client.AuthenticateWith (token.Token, token.TokenSecret); userAuthenticated = true;

Schritt 18: Abgelaufene Token prüfen

Berücksichtigen Sie außerdem, dass der Benutzer möglicherweise die Erlaubnis unserer App ablehnt. Daher müssen wir dies feststellen und erneut um Erlaubnis bitten. Diese Erkennung sollte mit unserer TweetResponse-Methode durchgeführt werden, da Twitter Sie hier über Probleme mit Ihrem Beitrag informiert. Ändern Sie den Code von tweetResponse in Folgendes:

 private void tweetResponse (TwitterStatus-Tweet, TwitterResponse-Antwort) if (response.StatusCode == HttpStatusCode.OK) Dispatcher.BeginInvoke (() => MessageBox.Show ("Tweet posted erfolgreich"););  else if (response.StatusCode == HttpStatusCode.Unauthorized) saveAccessToken (null); userAuthenticated = false; Dispatcher.BeginInvoke (() => MessageBox.Show ("Authentifizierungsfehler"););  else Dispatcher.BeginInvoke (() => MessageBox.Show ("Fehler, bitte später erneut versuchen"););

Schritt 19: Ändern Sie die Zurück-Schaltfläche

Eine letzte Funktion, die Sie Ihrer App hinzufügen können, besteht darin, dem Benutzer zu ermöglichen, den Browser zu schließen, wenn er möchte. Wenn der Browser jetzt angezeigt wird, kann er nur durch Anmelden oder mit einem Fehler geschlossen werden. Sie können dem Benutzer diese Option geben, indem Sie die Zurück-Schaltfläche verwenden:

 protected override void OnBackKeyPress (System.ComponentModel.CancelEventArgs e) if (Browser.Visibility == System.Windows.Visibility.Visible) Browser.Visibility = System.Windows.Visibility.Collapsed; e.Cancel = true;  base.OnBackKeyPress (e);

Von hier aus weiter

In diesem Tutorial wird kurz erklärt, was Sie mit Tweetsharp und Twitter machen können. Wenn Sie die Funktionalität Ihrer App erweitern möchten, z. B. Erwähnungen, Retweets, Direktnachrichten und verschiedene andere Funktionen, besuchen Sie die Website von Tweetsharp. Dort finden Sie alles, was Sie benötigen, um eine großartige App zu entwickeln. Ich hoffe, dass Ihnen dieses Tutorial gefallen hat und dass es für Ihre zukünftigen Projekte nützlich sein wird.

Code