WP7 integrazione di Twitter con la tua app

Con l'integrazione di Twitter, gli utenti possono condividere i contenuti delle app sulla loro cronologia. Ad esempio, nelle app multimediali un utente può twittare la canzone che sta ascoltando, o se l'app è un gioco, è possibile twittare un nuovo successo sbloccato. L'integrazione di Twitter nella tua app lo aiuterà a distinguersi e consentirà agli utenti di promuoverlo.


Passaggio 1: Creazione del progetto di Visual Studio

Per iniziare, dobbiamo creare un nuovo progetto su Visual Studio. Per questo tutorial abbiamo bisogno di una semplice app, quindi seleziona l'opzione "Windows Phone App":

Se si utilizza Visual Studio 2012 con il nuovo SDK WP8, verrà richiesta la versione del SO Windows Phone di destinazione. In tal caso, selezionare il sistema operativo 7.1.


Passaggio 2: creazione dell'interfaccia utente

Ora che il progetto è stato creato, apri il file "MainPage.xaml", se non è già aperto, e modifica la casella di testo predefinita per nome applicazione e pagina:

    

Ora nella griglia di ContentPanel aggiungi due righe, una per un TextBox in cui l'utente inserirà il nuovo stato e l'altra per il pulsante per inviare lo stato:

      

Quindi aggiungi un TextBox sulla prima riga con il nome "Messaggio" e un pulsante sulla seconda riga:

       

Alla fine dovresti avere questo:


Passaggio 3: creazione di un account sviluppatore di Twitter

Per connettersi a Twitter, è necessario prima un account sviluppatore. Vai alla homepage dello sviluppatore di Twitter e accedi con il tuo account Twitter, o creane uno se non ne hai già uno.


Passaggio 4: registrazione della nuova app

Una volta effettuato l'accesso, vai alla pagina "Le mie applicazioni", quindi fai clic sul pulsante "Crea una nuova applicazione". Nella pagina seguente, inserisci i dettagli dell'applicazione e, se hai già un sito web, inserisci il tuo sito nei campi Sito Web e URL di richiamata. Altrimenti, utilizza un segnaposto come "http://www.google.com". Dopo questo passaggio apparirà una nuova pagina che ti darà due token, il "token di accesso" e il "token secret di accesso". Copia questi codici e aggiungili come stringhe costanti sopra il tuo costruttore "MainPage.xaml.cs":

 const const privato consumerKey = "la tua chiave qui"; private const string consumerSecret = "il tuo segreto qui"; // Costruttore public MainPage () InitializeComponent (); 

Passaggio 5: Introduzione a Tweetsharp

Twitter ha un'API completa che ti consente di collegare la tua app al servizio in diversi modi. È chiaro e facile da seguire, quindi è un ottimo componente aggiuntivo per qualsiasi app. Nota che l'API di autenticazione è costruita usando OAuth, il che lo rende molto sicuro, ma offre agli sviluppatori problemi di connessione all'API. I passaggi per connettersi all'API sono spiegati nella documentazione OAuth dell'API. Ci sono diversi modi per connettersi, ma in questo tutorial useremo l'autorizzazione a 3 zampe. Questo metodo richiede un token di richiesta, quindi porta l'utente a una pagina di accesso e raccoglie AccessToken. Questo processo può essere un po 'complicato, specialmente se stai cercando di aggiungere solo una o due funzionalità dell'API. Fortunatamente, c'è una biblioteca sviluppata da Daniel Crenna, chiamata Tweetsharp. Tweetsharp è un ottimo strumento che semplifica la comunicazione tra le app WP7 e Twitter. È molto semplice da usare e ti dà accesso all'intera API di Twitter da una sola libreria:

TweetSharp è una libreria API di Twitter che semplifica il compito di aggiungere Twitter alle tue applicazioni desktop, web e mobili. Puoi creare widget semplici o suite di applicazioni complesse utilizzando TweetSharp.

Puoi trovare maggiori informazioni sul progetto andando al loro sito Web e guardando attraverso i progetti di esempio ospitati.


Passaggio 6: download di Tweetsharp

La libreria è disponibile solo tramite NuGet, quindi nel caso in cui Visual Studio non includa il gestore di pacchetti NugGet, è necessario scaricarlo dalla homepage di NuGet. Per scaricare il pacchetto, aprire la console di Gestione pacchetti in Visual Studio (Strumenti> Gestore pacchetti libreria> Console Gestione pacchetti) e immettere il seguente comando:Pacchetto di installazione TweetSharp.


Passaggio 7: aggiunta di Tweetsharp al progetto

Ora che abbiamo la libreria, possiamo aggiungerla al nostro progetto. Aggiungi una nuova importazione sul file "MainPage.xaml.cs":

 usando Tweetsharp

Passaggio 8: aggiunta di un browser

Per connettere un'applicazione all'account Twitter di un utente, dobbiamo prima avere accesso e autorizzazione all'account Twitter. Questo viene fatto attraverso la pagina web di Twitter. Pertanto, dobbiamo aggiungere un browser web. Il browser dovrebbe coprire la maggior parte della pagina, quindi inizialmente verrà compresso e quindi sarà visibile solo quando l'utente deve accedere. Nel file "MainPage.xaml" aggiungi un nuovo browser web appena sotto il ContentPanel:

       

Passaggio 9: Connessione a Twitter

Ora che abbiamo aggiunto Tweetsharp e il browser web, possiamo continuare e connettere la nostra app a Twitter. La connessione viene effettuata tramite un oggetto TwitterService. Pertanto, dobbiamo creare una variabile globale privata e inizializzarla sul costruttore:

 client TwitterService privato; // Costruttore public MainPage () InitializeComponent (); client = nuovo TwitterService (consumerKey, consumerSecret); 

Passaggio 10: aggiunta dell'evento Click

La prima volta che un utente fa clic sul pulsante "Tweet", è necessario inviarlo alla pagina di accesso di Twitter in modo che possa darti l'autorizzazione necessaria per la tua app. Per fare questo, chiedere un RequestToken. Una volta ottenuto il token, vai alla pagina di accesso. Per prima cosa, devi aggiungere l'evento click sul tuo pulsante Click:

 

Ora aggiungi questo metodo al codice:

 private void tweetClick (oggetto mittente, RoutedEventArgs e) // Chiedi il token

Prima di poter aggiungere il codice per il token abbiamo bisogno di due cose, una variabile booleana che ci dice se l'utente è già loggato e una variabile che salverà il RequestToken. Aggiungiamo questo al codice sopra il costruttore:

 private OAuthRequestToken requestToken; private bool userAuthenticated = false;

Passaggio 11: elaborazione del RequestToken

Con le variabili pronte, possiamo andare e creare il metodo per elaborare il nostro RequestedToken. Questo controllerà gli errori. Se tutto è stato eseguito correttamente, salva il token e porta l'utente all'URL di accesso dal RequestToken:

 private void processRequestToken (token OAuthRequestToken, risposta di TwitterResponse) if (token == null) Dispatcher.BeginInvoke (() => MessageBox.Show ("Errore durante il richiamo del token di richiesta");); else requestToken = token; Dispatcher.BeginInvoke (() => Browser.Visibility = System.Windows.Visibility.Visible; Browser.Navigate (client.GetAuthorizationUri (requestToken));); 

Ora aggiungi il codice per richiedere il token all'interno del metodo evento Click:

 // Se l'utente è già loggato, basta inviare il tweet, altrimenti ottenere il RequestToken if (userAuthenticated) // invia il Tweet, questo è solo un segnaposto, aggiungeremo il codice effettivo in un secondo momento Dispatcher.BeginInvoke (() =>  MessageBox.Show ("Segnaposto per l'invio di tweet");); else client.GetRequestToken (processRequestToken);

Passaggio 12: aggiunta dell'evento di navigazione

Dopo che l'utente ha effettuato l'accesso e accettato la nostra app, Twitter ci porterà a un URL contenente un codice di verifica che ci serve per richiedere AccessToken. Aggiungiamo questo metodo di evento al nostro browser

 

Usa il codice evento:

 private void browserNavigated (mittente dell'oggetto, System.Windows.Navigation.NavigationEventArgs e) 

Per recuperare il codice del verificatore dall'URL abbiamo bisogno di un parser, che in questo caso è un metodo presente nella libreria delle estensioni Hammock. Copia questo codice e aggiungilo al tuo progetto:

 // Da Hammock.Extensions.StringExtensions.cs public static IDictionary ParseQueryString (query stringa) // [DC]: questo metodo non decodifica l'URL e non può gestire l'input decodificato se (query.StartsWith ("?")) Query = query.Substring (1); if (query.Equals (string.Empty)) return new Dictionary();  var parts = query.Split (new [] '&'); return parts.Select (part => part.Split (new [] '=')). ToDictionary (coppia => coppia [0], coppia => coppia [1]); 

Con questo metodo possiamo andare e ottenere il codice del verificatore nel metodo dell'evento browserNavigated:

 private void browserNavigated (mittente dell'oggetto, System.Windows.Navigation.NavigationEventArgs e) if (e.Uri.AbsoluteUri.Contains ("oauth_verifier")) var values ​​= ParseQueryString (e.Uri.AbsoluteUri); string verifier = values ​​["oauth_verifier"]; // getTheAccessToken Dispatcher.BeginInvoke (() => Browser.Visibility = System.Windows.Visibility.Collapsed;); 

Passaggio 13: elaborazione di AccessToken

Proprio come con il RequestToken, dobbiamo creare un metodo che gestisca il risultato della richiesta di AccessToken. Una volta ricevuto il risultato, dobbiamo verificare la presenza di errori. Se la richiesta è stata eseguita correttamente, quindi autenticiamo l'utente e inviamo il Tweet:

 private void processAccessToken (token OAuthAccessToken, risposta TwitterResponse) if (token == null) Dispatcher.BeginInvoke (() => MessageBox.Show ("Errore durante il recupero del token di accesso");); else client.AuthenticateWith (token.Token, token.TokenSecret); userAuthenticated = true; // Invia il Tweet, aggiungeremo questo codice più tardi

Completato questo, vai al metodo browserNavigated e modifica il commento getTheAccessToken con la seguente riga:

 client.GetAccessToken (requestToken, verificatore, processAccessToken);

Passaggio 14: gestione di una risposta Tweet

Quando inviamo un Tweet, vogliamo sapere se è stato inviato correttamente. Ecco perché abbiamo bisogno di un altro metodo per gestire un Tweet. Ecco il codice che dobbiamo aggiungere:

 private void tweetResponse (TwitterStatus tweet, TwitterResponse response) if (response.StatusCode == HttpStatusCode.OK) Dispatcher.BeginInvoke (() => MessageBox.Show ("Tweet postato correttamente");); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Errore, riprova più tardi");); 

Infine, vai e modifica il commento Invia Tweet sui metodi processAccessToken e tweetClick con la seguente riga:

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

Passaggio 15: test dell'applicazione

In questo momento la tua app dovrebbe essere completamente funzionale, quindi vai a provarla. Inserisci qualsiasi messaggio clicca sul pulsante "Tweet" e dovrebbe apparire la seguente schermata.

Successivamente, dovrebbe apparire un messaggio che dice "Tweet inviato correttamente":

Se vai all'account Twitter, dovresti anche essere in grado di vedere il Tweet che hai appena inviato:

Congratulazioni! Ora hai un'app che può connettersi a Twitter! Ma non abbiamo ancora finito. Ci sono alcune aree che possiamo migliorare.


Passaggio 16: salvataggio di AccessToken

Ogni volta che un utente apre la tua app, dovrà passare attraverso la pagina di accesso di Twitter. Questo è qualcosa che gli utenti non amano. Vogliono registrarsi una volta e poter twittare senza problemi. Questo problema è facile da risolvere. Abbiamo bisogno di salvare AccessToken che abbiamo ottenuto la prima volta che l'utente effettua l'accesso. Una volta completato, viene salvato su IsolatedStorage e sarà sempre accessibile. Questo può essere fatto usando il seguente metodo:

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

E importando la libreria IsolatedStorage:

 using System.IO.IsolatedStorage;

Ora possiamo salvare AccessToken ottenuto dal metodo processAccessToken:

 private void processAccessToken (token OAuthAccessToken, risposta TwitterResponse) if (token == null) Dispatcher.BeginInvoke (() => MessageBox.Show ("Errore durante il recupero del token di accesso");); else client.AuthenticateWith (token.Token, token.TokenSecret); saveAccessToken (token); userAuthenticated = true; Dispatcher.BeginInvoke (() => client.SendTweet (Message.Text, tweetResponse)); 

Passaggio 17: recupero di AccessToken

Con il token già su IsolatedStorage, abbiamo bisogno di un metodo per recuperarlo. Vai avanti e aggiungi il seguente metodo:

 private OAuthAccessToken getAccessToken () if (IsolatedStorageSettings.ApplicationSettings.Contains ("accessToken")) restituisce IsolatedStorageSettings.ApplicationSettings ["accessToken"] come OAuthAccessToken; altrimenti restituisce null; 

Questa funzione dovrebbe essere chiamata dal costruttore perché vogliamo essere loggati sin dall'inizio:

 // Costruttore public MainPage () InitializeComponent (); client = nuovo TwitterService (consumerKey, consumerSecret); // Chek se abbiamo già il token var dei dati Autehntification = getAccessToken (); if (token! = null) client.AuthenticateWith (token.Token, token.TokenSecret); userAuthenticated = true; 

Passaggio 18: controllo dei token scaduti

Inoltre, considera che l'utente può rifiutare l'autorizzazione della nostra app, quindi è necessario rilevarlo e chiedere nuovamente l'autorizzazione. Questa rilevazione dovrebbe essere eseguita con il nostro metodo tweetResponse, poiché è lì che Twitter ti segnala eventuali problemi con il tuo post. Cambia il codice da tweetResponse al seguente:

 private void tweetResponse (TwitterStatus tweet, TwitterResponse response) if (response.StatusCode == HttpStatusCode.OK) Dispatcher.BeginInvoke (() => MessageBox.Show ("Tweet postato correttamente"););  else if (response.StatusCode == HttpStatusCode.Unauthorized) saveAccessToken (null); userAuthenticated = false; Dispatcher.BeginInvoke (() => MessageBox.Show ("Errore di autenticazione"););  else Dispatcher.BeginInvoke (() => MessageBox.Show ("Errore, riprova più tardi");); 

Passaggio 19: modifica il pulsante Indietro

Un'ultima funzione da aggiungere alla tua app è consentire all'utente di chiudere il browser, se lo desidera. In questo momento se viene visualizzato il browser, l'unico modo per chiuderlo è accedendo o con un errore. Puoi dare all'utente questa opzione usando il pulsante Indietro:

 protetto 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); 

Dove andare da qui

Questo tutorial è una breve spiegazione di cosa puoi fare con Tweetsharp e Twitter. Se sei interessato ad aumentare la funzionalità della tua app, ad esempio ottenere menzioni, retweet, messaggi diretti e molte altre funzionalità, vai sul sito Web di Tweetsharp e troverai tutto ciò che ti serve per iniziare a sviluppare un'app fantastica. Spero che questo tutorial ti sia piaciuto e che sia utile per i tuoi progetti futuri.