WP7 Intégrer Twitter avec votre application

Avec l'intégration de Twitter, les utilisateurs peuvent partager le contenu de l'application sur leur calendrier. Par exemple, dans les applications multimédia, un utilisateur peut tweeter la chanson qu'il écoute ou si l'application est un jeu, une nouvelle réalisation déverrouillée peut être tweetée. L'intégration de Twitter à votre application l'aidera à se démarquer et permettra aux utilisateurs de la promouvoir.

Étape 1: Création de projet Visual Studio

Pour commencer, nous devons créer un nouveau projet sur Visual Studio. Pour ce tutoriel, nous avons besoin d'une application simple. Sélectionnez donc l'option "Windows Phone App":

Si vous utilisez Visual Studio 2012 avec le nouveau kit de développement WP8, il vous sera demandé quelle est la version du système d'exploitation Windows Phone cible. Si tel est le cas, sélectionnez le système d'exploitation 7.1..

Étape 2: Construction de l'interface utilisateur

Maintenant que le projet est créé, ouvrez le fichier "MainPage.xaml", s'il n'est pas déjà ouvert, et modifiez la zone de texte d'application et de nom de page par défaut:

Maintenant, dans la grille ContentPanel, ajoutez deux lignes, une pour une zone de texte dans laquelle l'utilisateur entre le nouveau statut et l'autre pour le bouton permettant de soumettre le statut:

Ajoutez ensuite une zone de texte sur la première ligne avec le nom "Message" et un bouton sur la deuxième ligne:

À la fin, vous devriez avoir ceci:

Étape 3: Création d'un compte développeur Twitter

Pour vous connecter à Twitter, vous devez d'abord disposer d'un compte développeur. Accédez à la page d'accueil du développeur Twitter et connectez-vous avec votre compte Twitter, ou créez-en un si vous n'en avez pas déjà..

Étape 4: Enregistrement de la nouvelle application

Une fois connecté, accédez à la page "Mes applications", puis cliquez sur le bouton "Créer une nouvelle application". Sur la page suivante, renseignez les détails de l'application et, si vous avez déjà un site Web, entrez votre site dans les champs URL de site Web et de rappel. Sinon, utilisez un espace réservé tel que "http://www.google.com". Après cette étape, une nouvelle page apparaîtra vous donnant deux jetons, le "jeton d'accès" et le "secret du jeton d'accès". Copiez ces codes et ajoutez-les en tant que chaînes constantes au-dessus de votre constructeur "MainPage.xaml.cs":

 private const string consumerKey = "votre clé ici"; private const string consumerSecret = "votre secret ici"; // Constructeur public MainPage () InitializeComponent ();

Étape 5: Introduction à Tweetsharp

Twitter dispose d'une API complète qui vous permet de connecter votre application au service de plusieurs manières. Il est clair et facile à suivre, ce qui en fait un excellent complément à toute application. Notez que l'API d'authentification est construite à l'aide de OAuth, ce qui la rend très sûre, mais empêche les développeurs de se connecter à l'API. Les étapes pour se connecter à l'API sont expliquées dans la documentation OAuth de l'API. Il existe différentes façons de se connecter, mais dans ce tutoriel, nous allons utiliser l’autorisation à trois branches. Cette méthode demande un jeton de demande, puis conduit l'utilisateur à une page de connexion et collecte le AccessToken. Ce processus peut être un peu compliqué, surtout si vous essayez d'ajouter une ou deux fonctionnalités de l'API. Heureusement, il existe une bibliothèque développée par Daniel Crenna appelée Tweetsharp. Tweetsharp est un excellent outil qui simplifiera la communication entre vos applications WP7 et Twitter. Il est très simple à utiliser et vous donne accès à l'intégralité de l'API Twitter à partir d'une seule bibliothèque:

TweetSharp est une bibliothèque d'API Twitter qui simplifie l'ajout de Twitter à vos applications de bureau, Web et mobiles. Vous pouvez créer des widgets simples ou des suites d'applications complexes à l'aide de TweetSharp..

Vous pouvez trouver plus d'informations sur le projet en allant sur leur site web et en parcourant les exemples de projets hébergés..

Étape 6: Télécharger Tweetsharp

La bibliothèque est uniquement disponible via NuGet. Par conséquent, si votre Visual Studio n'inclut pas le gestionnaire de packages NugGet, vous devez le télécharger à partir de la page d'accueil de NuGet. Pour télécharger le package, ouvrez la console du gestionnaire de packages dans Visual Studio (Outils> Gestionnaire de packages de bibliothèque> Console du gestionnaire de packages), puis entrez la commande suivante:Paquet d'installation TweetSharp.

Étape 7: Ajout de Tweetsharp au projet

Maintenant que nous avons la bibliothèque, nous pouvons l'ajouter à notre projet. Ajoutez une nouvelle importation dans le fichier "MainPage.xaml.cs":

 en utilisant Tweetsharp

Étape 8: Ajout d'un navigateur

Pour connecter une application au compte Twitter d'un utilisateur, vous devez d'abord obtenir un accès et une autorisation au compte Twitter. Cela se fait via la page Web de Twitter. Par conséquent, nous devons ajouter un navigateur Web. Le navigateur doit couvrir la plus grande partie de la page. Elle sera donc initialement réduite, puis visible uniquement lorsque l'utilisateur doit se connecter. Dans le fichier "MainPage.xaml", ajoutez un nouveau navigateur Web juste en dessous de ContentPanel:

Étape 9: Connexion à Twitter

Maintenant que nous avons ajouté Tweetsharp et le navigateur Web, nous pouvons continuer et connecter notre application à Twitter. La connexion se fait via un objet TwitterService. Nous devons donc créer une variable globale privée et l’initialiser sur le constructeur:

 client privé TwitterService; // Constructeur public MainPage () InitializeComponent (); client = new TwitterService (consumerKey, consumerSecret);

Étape 10: Ajout de l'événement Click

La première fois qu'un utilisateur clique sur votre bouton "Tweet", vous devez l'envoyer à la page de connexion Twitter afin qu'il puisse vous donner l'autorisation nécessaire pour votre application. Pour ce faire, demandez un RequestToken. Une fois que vous avez le jeton, allez à la page de connexion. Tout d’abord, vous devez ajouter l’événement click sur votre bouton Click:

Maintenant, ajoutez cette méthode au code:

 void privé tweetClick (expéditeur de l'objet, RoutedEventArgs e) // Demander le jeton

Avant que nous puissions ajouter le code pour le jeton, nous avons besoin de deux éléments: une variable booléenne nous indiquant si l'utilisateur est déjà connecté et une variable qui enregistrera RequestToken. Ajoutons ceci au code ci-dessus le constructeur:

 private OAuthRequestToken requestToken; private bool userAuthenticated = false;

Étape 11: Traitement de RequestToken

Avec les variables prêtes, nous pouvons créer la méthode de traitement de notre RequestedToken. Cela vérifiera les erreurs. Si tout a été fait correctement, sauvegardez le jeton et amenez l'utilisateur à l'URL de connexion à partir de RequestToken:

 processus vide privéRequestToken (jeton OAuthRequestToken, réponse TwitterResponse) if (jeton == null) Dispatcher.BeginInvoke (() => MessageBox.Show ("Erreur lors de l'obtention du jeton de demande");); else requestToken = jeton; Dispatcher.BeginInvoke (() => Browser.Visibility = System.Windows.Visibility.Visible; Browser.Navigate (client.GetAuthorizationUri (requestToken)););

Ajoutez maintenant le code pour demander le jeton dans la méthode de l'événement Click:

 // Si l'utilisateur est déjà connecté, envoyez simplement le tweet, sinon, obtenez le RequestToken si (userAuthenticated) // envoyez le Tweet, il s'agit simplement d'un espace réservé, nous ajouterons le code actuel plus tard Dispatcher.BeginInvoke (() =>  MessageBox.Show ("Placeholder pour l'envoi de tweet");); else client.GetRequestToken (processRequestToken);

Étape 12: Ajout d'un événement de navigation

Une fois que l'utilisateur s'est connecté et a accepté notre application, Twitter nous amène à une URL contenant le code du vérificateur nécessaire pour demander AccessToken. Ajoutons cette méthode d'événement à notre navigateur

Utilisez le code de l'événement:

 navigateur privé void browserNavigated (expéditeur d'objet, System.Windows.Navigation.NavigationEventArgs e)

Afin de récupérer le code du vérificateur à partir de l'URL, nous avons besoin d'un analyseur, qui dans ce cas est une méthode qui se trouve dans la bibliothèque d'extensions Hammock. Copiez ce code et ajoutez-le à votre projet:

 // From Hammock.Extensions.StringExtensions.cs public IDictionary ParseQueryString (chaîne de caractères) // [DC]: cette méthode ne décode pas les URL et ne peut pas gérer les entrées décodées if (query.StartsWith ("?")) Query = query.Substring (1); if (query.Equals (string.Empty)) retourne un nouveau dictionnaire();  var parts = query.Split (new [] '&'); retourne parts.Select (part => part.Split (new [] '=' ')). ToDictionary (pair => paire [0], paire => paire [1]);

Avec cette méthode, nous pouvons aller chercher le code du vérificateur sur la méthode d'événement browserNavigated:

 navigateur privé void browserNavigated (expéditeur d'objet, System.Windows.Navigation.NavigationEventArgs e) if (e.Uri.AbsoluteUri.Contains ("oauth_verifier")) ParleQueryString (e.Uri.AbsoluteUri); chaîne vérificateur = valeurs ["oauth_verifier"]; // getTheAccessToken Dispatcher.BeginInvoke (() => Browser.Visibility = System.Windows.Visibility.Collapsed;);

Étape 13: Traitement de l’AccessToken

Comme avec RequestToken, nous devons créer une méthode qui gère le résultat de la requête AccessToken. Une fois le résultat reçu, nous devons vérifier les erreurs. Si la demande a été effectuée avec succès, nous authentifions ensuite l'utilisateur et envoyons le Tweet:

 processAccessToken vide privé (jeton OAuthAccessToken, réponse TwitterResponse) if (jeton == null) Dispatcher.BeginInvoke (() => MessageBox.Show ("Erreur lors de l'obtention du jeton d'accès");); else client.AuthenticateWith (jeton.Token, jeton.TokenSecret); userAuthenticated = true; // Envoyer le Tweet, nous ajouterons ce code plus tard

Ceci fait, accédez à la méthode browserNavigated et modifiez le commentaire getTheAccessToken à l'aide de la ligne suivante:

 client.GetAccessToken (requestToken, vérificateur, processAccessToken);

Étape 14: Traitement d'une réponse par Tweet

Lorsque nous envoyons un tweet, nous voulons savoir s'il a été envoyé avec succès. C'est pourquoi nous avons besoin d'une autre méthode pour gérer un Tweet. Voici le code que nous devons ajouter:

 tweetResponse privé (tweet TwitterStatus, réponse TwitterResponse) if (response.StatusCode == HttpStatusCode.OK) Dispatcher.BeginInvoke () => MessageBox.Show ("Tweet posté avec succès");); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Erreur, veuillez réessayer plus tard"););

Enfin, modifiez le commentaire Send Tweet sur les méthodes processAccessToken et tweetClick avec la ligne suivante:

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

Étape 15: Test de votre application

Pour le moment, votre application devrait être complètement fonctionnelle, alors testez-la. Entrez n'importe quel message cliquez sur le bouton "Tweet" et l'écran suivant devrait apparaître.

Après cela, un message disant "Tweet posté avec succès" devrait apparaître:

Si vous allez sur le compte Twitter, vous devriez également pouvoir voir le Tweet que vous venez d'envoyer:

Toutes nos félicitations! Vous avez maintenant une application qui peut se connecter à Twitter! Mais nous n'avons pas encore fini. Il y a des domaines que nous pouvons améliorer.

Étape 16: Enregistrement de l’AccessToken

Chaque fois qu'un utilisateur ouvre votre application, il devra passer par la page de connexion Twitter. C'est quelque chose que les utilisateurs n'aiment pas. Ils veulent s'inscrire une fois et pouvoir tweeter sans problème. Ce problème est facile à résoudre. Nous devons enregistrer AccessToken que nous avons obtenu lors de la première connexion de l'utilisateur. Une fois cette opération terminée, elle est enregistrée sur IsolatedStorage et sera toujours accessible. Cela peut être fait en utilisant la méthode suivante:

 saveAccessToken (jeton OAuthAccessToken) privé vide if (IsolatedStorageSettings.ApplicationSettings.Contains ("accessToken")) IsolatedStorageSettings.ApplicationSettings ["accessToken"] = token; else IsolatedStorageSettings.ApplicationSettings.Add ("accessToken", jeton); IsolatedStorageSettings.ApplicationSettings.Save ();

Et importer la bibliothèque IsolatedStorage:

 using System.IO.IsolatedStorage;

Nous pouvons maintenant enregistrer le code AccessToken obtenu à partir de la méthode processAccessToken:

 processAccessToken vide privé (jeton OAuthAccessToken, réponse TwitterResponse) if (jeton == null) Dispatcher.BeginInvoke (() => MessageBox.Show ("Erreur lors de l'obtention du jeton d'accès");); else client.AuthenticateWith (jeton.Token, jeton.TokenSecret); saveAccessToken (jeton); userAuthenticated = true; Dispatcher.BeginInvoke (() => client.SendTweet (Message.Text, tweetResponse));

Étape 17: Récupération de AccessToken

Avec le jeton déjà sur IsolatedStorage, nous avons besoin d’une méthode pour le récupérer. Allez-y et ajoutez la méthode suivante:

 private OAuthAccessToken getAccessToken () if (IsolatedStorageSettings.ApplicationSettings.Contains ("accessToken")) renvoie IsolatedStorageSettings.ApplicationSettings ["accessToken"] en tant que OAuthAccessToken; sinon, retourne null;

Cette fonction doit être appelée depuis le constructeur car nous voulons être connectés dès le début:

 // Constructeur public MainPage () InitializeComponent (); client = new TwitterService (consumerKey, consumerSecret); // Vérification si nous avons déjà les données d'authentification. Token var = getAccessToken (); if (jeton! = null) client.AuthenticateWith (jeton.Token, jeton.TokenSecret); userAuthenticated = true;

Étape 18: Vérification des jetons expirés

De plus, tenez compte du fait que l’utilisateur peut refuser l’autorisation de notre application, nous devons donc le détecter et demander à nouveau l’autorisation. Cette détection doit être effectuée sur notre méthode tweetResponse, car c’est là que Twitter vous informe de tout problème avec votre message. Modifiez le code de tweetResponse comme suit:

 tweetResponse privé (tweet TwitterStatus, réponse TwitterResponse) if (response.StatusCode == HttpStatusCode.OK) Dispatcher.BeginInvoke () => MessageBox.Show ("Tweet posté avec succès"););  else if (response.StatusCode == HttpStatusCode.Unauthorized) saveAccessToken (null); userAuthenticated = false; Dispatcher.BeginInvoke (() => MessageBox.Show ("Erreur d'authentification"););  else Dispatcher.BeginInvoke (() => MessageBox.Show ("Erreur, veuillez réessayer plus tard"););

Étape 19: Modifier le bouton Précédent

Une dernière fonctionnalité à ajouter à votre application est de permettre à l'utilisateur de fermer le navigateur s'il le souhaite. À l'heure actuelle, si le navigateur apparaît, le seul moyen de le fermer consiste à se connecter ou avec une erreur. Vous pouvez donner cette option à l'utilisateur en utilisant le bouton de retour:

 protégé annule la suppression OnBackKeyPress (System.ComponentModel.CancelEventArgs e) if (Browser.Visibility == System.Windows.Visibility.Visible) Browser.Visibility = System.Windows.Visibility.Collapsed; e.Cancel = true;  base.OnBackKeyPress (e);

Où aller en partant d'ici

Ce tutoriel est une courte explication de ce que vous pouvez faire avec Tweetsharp et Twitter. Si vous souhaitez augmenter les fonctionnalités de votre application, comme obtenir des mentions, des retweets, des messages directs et plusieurs autres fonctionnalités, rendez-vous sur le site Web de Tweetsharp et vous trouverez tout ce dont vous avez besoin pour commencer à développer une excellente application. J'espère que vous avez apprécié ce tutoriel et qu'il sera utile pour vos projets futurs.

Code