In questo tutorial parleremo di come interagire con l'API di Facebook e di tutti gli strumenti necessari per connettersi con esso. Nello specifico, l'app che andremo a creare sarà in grado di connettersi con l'account Facebook dell'utente e aggiornarne lo stato. Iniziamo!
Passaggio 1: Creazione del progetto di Visual Studio
Prima di tutto, dobbiamo creare un nuovo progetto con Visual Studio. Creeremo semplicemente una semplice app, quindi seleziona l'opzione "App Windows Phone":
Se si utilizza Visual Studio 2012 con il nuovo SDK WP8, verrà richiesta la versione del SO Windows Phone di destinazione. In tal caso, seleziona il sistema operativo 7.1.
Passaggio 2: aggiunta dell'interfaccia utente
Con il progetto già creato, apri il file "MainPage.xaml" se non è già aperto e modifica la casella di testo predefinita per nome applicazione e pagina:
Ora nella nostra griglia ContentPanel, aggiungeremo due righe, una per un TextBox in cui l'utente immetterà il nuovo stato e l'altra per il pulsante per inviare lo stato:
E poi aggiungi un TextBox sulla prima riga con il nome di "Message" e un pulsante sul secondo:
Alla fine dovresti avere questo:
Passaggio 3: creazione di account sviluppatore
Facebook ha un'API molto completa per consentire l'interazione tra le app e il sito. L'API consente alla tua app di connettersi e interagire con l'account FB dell'utente.
Per connettere la nostra app a Facebook, è necessario registrarsi come sviluppatore di Facebook. Per creare un account sviluppatore di Facebook, vai al sito degli sviluppatori di Facebook, quindi accedi con il tuo account Facebook o creane uno se non ne hai già uno. Dopo aver effettuato l'accesso, fai clic sul pulsante "Registra" e segui le istruzioni.
Passaggio 4: registrazione di una nuova app
Ora crea una nuova app dal menu App e seleziona il pulsante "Crea nuova app".
Dopo aver creato la tua app, vedrai la tua pagina delle impostazioni dell'app e su di essa un numero ID App / chiave API.
Copia questo numero, torna al progetto e all'interno del file "MainPage.xaml.cs", crea una nuova stringa costante globale sopra il tuo costruttore:
stringa privata const FBApi = "LA TUA API KEY VA QUI"; // Costruttore public MainPage () InitializeComponent ();
Passaggio 5: scelta di Facebook C # SDK
Facebook ha alcuni ottimi SDK per iOS e Android, ma purtroppo nessuno per WP7, quindi per connettersi con Facebook da un'app WP7, abbiamo due opzioni: (1) creare manualmente tutte le chiamate, oppure (2) usare Facebook C # SDK, un SDK non ufficiale realizzato appositamente per le app C #.
Per questo tutorial, utilizzeremo l'SDK C #. Ha già integrato tutti i metodi dell'API di Facebook, quindi renderà il nostro compito molto più semplice!
Passaggio 6: download dell'SDK
Questo SDK è disponibile solo tramite NuGet, quindi nel caso in cui Visual Studio non includa il gestore di pacchetti NugGet, dovrai scaricarlo da NuGet hompage. Per scaricare il pacchetto, aprire la console di Gestione pacchetti su Visual Studio (Strumenti> Gestore pacchetti libreria> Console Gestione pacchetti) e immettere il seguente comando:Installa-pacchetto Facebook . In caso di problemi con la versione scaricata, provare a utilizzare questo comando: Install-Package Facebook -version 6.0.24
Passaggio 7: aggiungi l'SDK FB alla tua app
Ora che abbiamo l'SDK, lo aggiungeremo al nostro progetto. Aggiungi una nuova importazione sul file "MainPage.xaml.cs":
usando Facebook;
Passaggio 8: aggiunta di un browser
Per consentire a un utente di connettersi a Facebook, deve prima darci l'accesso e l'autorizzazione al suo account FB. Questo viene fatto attraverso la pagina web di Facebook, e quindi abbiamo bisogno di aggiungere un browser web nella nostra applicazione. Il browser dovrebbe coprire la maggior parte della pagina, quindi inizialmente verrà compresso e quindi cambierà per essere visibile solo quando l'utente deve accedere. Nel file "MainPage.xaml", aggiungi un nuovo browser web appena sotto il ContentPanel:
Passaggio 9: Connessione con Facebook
Con tutto correttamente impostato, ora possiamo iniziare a codificare la nostra applicazione. Crea una nuova variabile FacebookClient e chiamala solo client. Questo è dove verranno fatte tutte le connessioni. Inoltre, avvia la variabile all'interno del costruttore:
client privato FacebookClient; // Costruttore public MainPage () InitializeComponent (); client = new FacebookClient ();
Passaggio 10: aggiunta dell'evento Click
Per pubblicare effettivamente qualcosa, l'utente deve fare clic sul pulsante "Invia". Andiamo e aggiungiamo un evento click a quel pulsante:
Sul lato codice, quando l'utente fa clic sul pulsante, deve accedere con Facebook e autorizzare l'accettazione della nostra app. Per questo processo, dobbiamo rendere visibile il browser e navigare verso un URL che il cliente ci darà, ma prima dobbiamo inviare alcuni parametri iniziali:
private void PostClicked (mittente dell'oggetto, RoutedEventArgs e) // Parametri client var parameters = new Dictionary(); parameters ["client_id"] = FBApi; parameters ["redirect_uri"] = "https://www.facebook.com/connect/login_success.html"; parameters ["response_type"] = "token"; parameters ["display"] = "touch"; // L'ambito è ciò che ci dà l'accesso ai dati degli utenti, in questo caso // vogliamo solo pubblicare sui suoi parametri wall ["scope"] = "publish_stream"; Browser.Visibility = System.Windows.Visibility.Visible; Browser.Navigate (client.GetLoginUrl (parametri));
Se esegui il tuo codice adesso e fai clic sul pulsante Post, il browser dovrebbe apparire, mostrando la pagina di accesso di Facebook:
Passaggio 11: aggiunta di un evento di navigazione
Dopo che l'utente ha effettuato l'accesso su Facebook, il browser verrà spostato su un URL che conterrà il nostro token di accesso per le chiamate API. Una volta recuperato, dobbiamo assegnarlo al nostro cliente. Una cosa da tenere in considerazione è che ci sono molte pagine su cui il browser può navigare (password errata, l'utente ha rifiutato la nostra app, ecc.), Quindi dobbiamo cercare di ottenere il token solo quando siamo sicuri di essere sul pagina corretta.
Aggiungi l'evento navigato al browser web:
Quindi aggiungi le seguenti linee al gestore di eventi:
private void BrowserNavitaged (mittente dell'oggetto, System.Windows.Navigation.NavigationEventArgs e) FacebookOAuthResult oauthResult; // Assicurarsi che l'url abbia effettivamente il token di accesso se (! Client.TryParseOAuthCallbackUrl (e.Uri, out oauthResult)) return; // Verifica che l'utente abbia accettato con successo la nostra app, altrimenti mostra solo l'errore if (oauthResult.IsSuccess) // Risultato del processo client.AccessToken = oauthResult.AccessToken; // Nascondi il browser Browser.Visibility = System.Windows.Visibility.Collapsed; PostToWall (); else // Process Error MessageBox.Show (oauthResult.ErrorDescription); Browser.Visibility = System.Windows.Visibility.Collapsed;
Passaggio 12: aggiunta di un metodo Post
Ora che abbiamo accesso, possiamo andare avanti e pubblicare effettivamente sul muro dell'utente. Crea un nuovo metodo di vuoto privato chiamato postToWall e aggiungi le seguenti linee:
private void PostToWall () var parameters = new Dictionary(); parameters ["message"] = Message.Text; client.PostAsync ("me / feed", parametri);
L'unico parametro che dobbiamo inviare a questa chiamata è il messaggio che pubblicheremo sulla bacheca dell'utente. Il messaggio che invieremo sarà il testo del nostro TextBox chiamato "Messaggio". Il messaggio verrà pubblicato in modo asincrono, quindi l'evento PostCompleted verrà chiamato una volta che l'attività è terminata, quindi non è necessario aggiungere un gestore di eventi per esso.
Passaggio 13: gestore eventi PostCompleted
Dato che vogliamo solo aggiungere il gestore eventi una volta, lo aggiungeremo al costruttore, subito dopo l'inizializzazione del nostro client. All'interno del gestore, controlla se il post è stato completato correttamente o se ci sono stati errori durante le operazioni, quindi informa l'utente:
// Costruttore public MainPage () InitializeComponent (); client = new FacebookClient (); client.PostCompleted + = (o, args) => // Verifica degli errori if (args.Error! = null) Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message)); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Messaggio inviato correttamente")); ;
Passaggio 14: test del codice
Con questo codice, la nostra app dovrebbe già essere in grado di inviare un messaggio attraverso l'account Facebook dell'utente.
Esegui l'app nell'emulatore, prova a inviare qualsiasi messaggio di test che desideri e alla fine dovresti ricevere un messaggio che ti dice: "Messaggio inviato con successo".
Ora apri l'account Facebook su un browser web e dovresti vedere il messaggio che hai appena postato:
Congratulazioni! Ora hai un'app che è in grado di connettersi a Facebook, ma ci sono ancora alcune cose che potremmo migliorare. Ad esempio, potremmo provare a salvare il token di accesso, in modo che gli utenti non debbano effettuare il login ogni volta che aprono l'app.
Passaggio 15: salvataggio del token di accesso
Stiamo andando a salvare il token per le impostazioni dell'applicazione, ma per fare ciò, dobbiamo prima importare la libreria IsolatedStorage:
using System.IO.IsolatedStorage;
Con questa libreria possiamo ora andare avanti e creare il metodo:
private void SaveToken (String token) // Se si tratta del primo salvataggio, creare la chiave su ApplicationSettings e salvare il token, altrimenti modificare la chiave if (! IsolatedStorageSettings.ApplicationSettings.Contains ("token")) IsolatedStorageSettings.ApplicationSettings. Aggiungi ("token", token); else IsolatedStorageSettings.ApplicationSettings ["token"] = token; IsolatedStorageSettings.ApplicationSettings.Save ();
Passaggio 16: recupero con il token salvato
Ora dobbiamo ottenere il token da IsolatedStorage:
stringa privata GetToken () // Se non c'è nessun token in memoria, basta restituire null, altrimenti restituire il token come stringa se (! IsolatedStorageSettings.ApplicationSettings.Contains ("token")) restituisce null; altrimenti restituire IsolatedStorageSettings.ApplicationSettings ["token"] come stringa;
Passaggio 17: registrazione con il token salvato
Con questi due metodi, possiamo ora recuperare il token e assegnarlo al nostro client ogni volta che si apre l'app:
// Costruttore public MainPage () InitializeComponent (); client = new FacebookClient (); client.PostCompleted + = (o, args) => // Verifica degli errori if (args.Error! = null) Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message)); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Messaggio inviato correttamente")); ; // Verifica del token salvato se (GetToken ()! = Null) client.AccessToken = GetToken ();
Passaggio 18: controllo dei token scaduti
Un'altra cosa da tenere in considerazione è che l'utente può rifiutare le autorizzazioni della nostra app, quindi è necessario rilevarlo e chiedere nuovamente le autorizzazioni. Questo rilevamento dovrebbe essere fatto sul nostro gestore PostCompleted, poiché è lì che Facebook ci notificherà un problema con il nostro post. Aggiungi le seguenti linee al nostro gestore PostCompleted:
client.PostCompleted + = (o, args) => // Verifica degli errori if (args.Error! = null) // Errore di autorizzazione if (args.Error è FacebookOAuthException) Dispatcher.BeginInvoke (() => MessageBox .Show ("Errore di autorizzazione")); // Rimuovi il token attuale poiché non funziona più. SaveToken (null); client.AccessToken = null; else Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message)); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Messaggio inviato correttamente")); ;
Passaggio 19: modifica il pulsante Indietro
Proprio come ultimo passaggio, dobbiamo dare all'utente la possibilità di chiudere il browser quando lo si desidera. Questa azione dovrebbe essere assegnata al pulsante Indietro, quindi è sufficiente modificare il gestore eventi per ottenerlo.
Aggiungi il seguente metodo al tuo codice:
protetto override void OnBackKeyPress (System.ComponentModel.CancelEventArgs e) // Se il browser è visibile, nascondilo e annulla l'evento di navigazione se (Browser.Visibility == System.Windows.Visibility.Visible) Browser.Visibility = System.Windows .Visibility.Collapsed; e.Cancel = true; base.OnBackKeyPress (e);
Step 20: Il prodotto finale
Metti alla prova la tua app ancora una volta, ora hai un'app di Facebook pienamente operativa!
Dove andare da qui
Facebook non riguarda solo l'aggiornamento del tuo stato. Ci sono molte altre cose che potresti aggiungere alla tua app, come la condivisione di foto, l'invio di consigli alle app agli amici, ecc. L'SDK di Facebook C # offre molte possibilità per l'integrazione con Facebook. Per saperne di più, vai e dai un'occhiata alla loro pagina web e inizia a lavorare per rendere la tua app più social!
Share
Accentsconagua
