In deze tutorial zullen we het hebben over de interactie met de Facebook API en alle tools die je nodig hebt om er verbinding mee te maken. Concreet kan de app die we gaan maken verbinding maken met het Facebook-account van de gebruiker en hun status bijwerken. Laten we beginnen!
Stap 1: Visual Studio Project Creation
Allereerst moeten we een nieuw project maken met Visual Studio. We zullen gewoon een eenvoudige app bouwen, dus selecteer de optie "Windows Phone App":
Als u Visual Studio 2012 met de nieuwe WP8 SDK gebruikt, wordt u gevraagd naar de Windows-besturingssysteemversie van Target. Als dat het geval is, selecteert u gewoon het 7.1-besturingssysteem.
Stap 2: De gebruikersinterface toevoegen
Terwijl het project al is gemaakt, opent u het bestand "MainPage.xaml" als dit nog niet is geopend en wijzigt u het standaard tekstvak van de toepassing en de paginanaam:
Nu voegen we in ons ContentPanel-raster twee rijen toe, één voor een TextBox waar de gebruiker de nieuwe status invoert en de andere voor de knop om de status in te dienen:
En voeg vervolgens een TextBox toe aan de eerste rij met de naam 'Message' en een knop op de tweede:
Aan het eind zou je dit moeten hebben:
Stap 3: ontwikkelaarsaccounts maken
Facebook heeft een zeer uitgebreide API om interactie tussen apps en de site mogelijk te maken. Met de API kan uw app verbinding maken en communiceren met het FB-account van de gebruiker.
Om onze app met Facebook te verbinden, moeten we ons registreren als Facebook-ontwikkelaar. Ga naar de Facebook-ontwikkelaarswebsite om een Facebook-ontwikkelaarsaccount te maken, log dan in met je Facebook-account of maak er een aan als je die nog niet hebt. Als u al bent ingelogd, klikt u op de knop "Registreren" en volgt u de instructies.
Stap 4: Een nieuwe app registreren
Maak nu een nieuwe app door naar uw menu Apps te gaan en selecteer vervolgens de knop 'Nieuwe app maken'.
Nadat u uw app hebt gemaakt, ziet u uw pagina met app-instellingen en een App-ID / API-sleutelnummer.
Kopieer dit nummer, keer terug naar het project en maak binnenin het bestand "MainPage.xaml.cs" een nieuwe globale constante tekenreeks bovenop uw constructor:
private const string FBApi = "UW API SLEUTEL GAAT HIER"; // Constructor public MainPage () InitializeComponent ();
Stap 5: De Facebook C # SDK kiezen
Facebook heeft enkele geweldige SDK's voor iOS en Android, maar helaas geen voor WP7, dus om verbinding te maken met Facebook via een WP7-app, hebben we twee opties: (1) maak alle oproepen handmatig, of (2) gebruik Facebook C # SDK, een niet-officiële SDK speciaal gemaakt voor C # -apps.
Voor deze zelfstudie gebruiken we de C # SDK. Het heeft alle methoden van de Facebook API al geïntegreerd, dus het zal onze taak een stuk eenvoudiger maken!
Stap 6: de SDK downloaden
Deze SDK is alleen beschikbaar via NuGet, dus als uw Visual Studio de NugGet Package-manager niet bevat, je moet het downloaden van de NuGet-hompage. Om het pakket te downloaden, opent u de Package Manager-console op Visual Studio (Extra> Bibliotheekpakketbeheer> Pakketbeheerconsole) en voert u de volgende opdracht in:Installeer-pakket Facebook . In het geval u problemen ondervindt met de gedownloade versie, probeer dan deze opdracht: Installeer-pakket Facebook -versie 6.0.24
Stap 7: Voeg de FB SDK toe aan uw app
Nu we de SDK hebben, zullen we deze aan ons project toevoegen. Voeg een nieuwe import toe in het bestand "MainPage.xaml.cs":
via Facebook;
Stap 8: Een browser toevoegen
Om een gebruiker verbinding te laten maken met Facebook, moet hij ons eerst toegang en toestemming geven tot zijn FB-account. Dit gebeurt via de Facebook-webpagina en daarom moeten we een webbrowser toevoegen aan onze applicatie. De browser moet het grootste deel van de pagina beslaan, dus in eerste instantie zal het worden samengevouwen en dan zal het worden gewijzigd zodat het zichtbaar is net wanneer de gebruiker moet inloggen. Voeg in het bestand "MainPage.xaml" een nieuwe WebBrowser toe net onder het ContentPanel:
Stap 9: Verbinden met Facebook
Als alles correct is ingesteld, kunnen we onze applicatie nu coderen. Maak een nieuwe variabele FacebookClient, en noem deze maar een client. Dit is waar alle verbindingen worden gemaakt. Start ook de variabele in de constructor:
privé-klant van FacebookClient; // Constructor public MainPage () InitializeComponent (); client = nieuwe FacebookClient ();
Stap 10: De Click-gebeurtenis toevoegen
Om iets daadwerkelijk te plaatsen, moet de gebruiker op de knop "Plaatsen" klikken. Laten we een klikgebeurtenis toevoegen aan die knop:
Aan de kant van de code, wanneer de gebruiker op de knop klikt, moet hij inloggen met Facebook en toestemming geven om onze app te accepteren. Voor dit proces moeten we de browser zichtbaar maken en naar een URL navigeren die de client ons zal geven, maar daarvoor moeten we enkele beginparameters verzenden:
private void PostClicked (object afzender, RoutedEventArgs e) // Clientparameters var parameters = nieuw woordenboek(); parameters ["client_id"] = FBApi; parameters ["redirect_uri"] = "https://www.facebook.com/connect/login_success.html"; parameters ["response_type"] = "token"; parameters ["display"] = "aanraken"; // Het bereik is wat ons de toegang geeft tot de gebruikersgegevens, in dit geval // willen we gewoon publiceren op zijn muur parameters ["scope"] = "publish_stream"; Browser.Visibility = System.Windows.Visibility.Visible; Browser.Navigate (client.GetLoginUrl (parameters));
Als u nu uw code uitvoert en op de knop Posten klikt, moet de browser worden weergegeven met de aanmeldingspagina van Facebook:
Stap 11: een navigatiegebeurtenis toevoegen
Nadat de gebruiker op Facebook is ingelogd, wordt de browser genavigeerd naar een URL die ons toegangstoken voor API-aanroepen bevat. Zodra we het hebben opgehaald, moeten we het gewoon toewijzen aan onze klant. Eén ding om rekening mee te houden is dat er veel pagina's zijn waar de browser naartoe kan navigeren (verkeerd wachtwoord, gebruiker heeft onze app afgewezen, enzovoort), dus we moeten proberen het token te krijgen op het moment dat we zeker weten dat we op de hoogte zijn juiste pagina.
Voeg de genavigeerde gebeurtenis toe aan de webbrowser:
Voeg vervolgens de volgende regels toe aan de gebeurtenishandler:
private void BrowserNavitaged (object afzender, System.Windows.Navigation.NavigationEventArgs e) FacebookOAuthResult oauthResult; // Zorg ervoor dat de URL feitelijk het toegangstoken heeft als (! Client.TryParseOAuthCallbackUrl (e.Uri, out oauthResult)) return; // Controleren of de gebruiker onze app met succes heeft geaccepteerd, anders wordt de fout alleen weergegeven als (oauth Result.IsSuccess) // Resultaat van procesclient.AccessToken = oauthResult.AccessToken; // Verberg de browser Browser.Visibility = System.Windows.Visibility.Collapsed; PostToWall (); else // Process Error MessageBox.Show (oauthResult.ErrorDescription); Browser.Visibility = System.Windows.Visibility.Collapsed;
Stap 12: Een berichtmethode toevoegen
Nu we toegang hebben, kunnen we doorgaan en daadwerkelijk posten op de muur van de gebruiker. Maak een nieuwe private ongeldige methode met de naam postToWall en voeg de volgende regels toe:
private void PostToWall () var parameters = new Dictionary(); parameters ["message"] = Message.Text; client.PostAsync ("me / feed", parameters);
De enige parameter die we naar deze oproep moeten sturen, is het bericht dat we op de muur van de gebruiker gaan plaatsen. Het bericht dat we zullen verzenden, is de tekst van onze TextBox genaamd "Message". Het bericht wordt asynchroon geplaatst, dus de gebeurtenis PostCompleted wordt gebeld zodra de taak is voltooid. Daarom is het niet nodig om een gebeurtenishandler toe te voegen.
Stap 13: PostCompleted Event Handler
Omdat we de gebeurtenishandler slechts één keer willen toevoegen, zullen we deze toevoegen aan de constructor, net nadat onze client is geïnitialiseerd. Controleer binnen de afhandelingsroutine of het bericht met succes is voltooid of dat er tijdens de bewerkingen fouten zijn opgetreden, en breng de gebruiker hiervan op de hoogte:
// Constructor public MainPage () InitializeComponent (); client = nieuwe FacebookClient (); client.PostCompleted + = (o, args) => // Controleren op fouten als (args.Error! = null) Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message)); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Bericht is met succes gepost")); ;
Stap 14: De code testen
Met deze code zou onze App al in staat moeten zijn om een bericht te posten via het Facebook-account van de gebruiker.
Voer de app uit in de emulator, probeer een testbericht te plaatsen dat u wilt en aan het eind hoort u een bericht met de melding: "Bericht is succesvol geplaatst".
Open nu het Facebook-account in een webbrowser en je zou het bericht moeten zien dat je net hebt gepost:
Gefeliciteerd! Je hebt nu een app die verbinding kan maken met Facebook, maar er zijn nog steeds dingen die we kunnen verbeteren. We kunnen bijvoorbeeld proberen de toegangstoken te bewaren, zodat gebruikers niet telkens opnieuw hoeven in te loggen als ze de app openen.
Stap 15: het toegangstoken opslaan
We gaan het token opslaan voor de toepassingsinstellingen, maar om dit te doen, moeten we eerst de bibliotheek IsolatedStorage importeren:
met behulp van System.IO.IsolatedStorage;
Met deze bibliotheek kunnen we nu gewoon doorgaan en de methode maken:
private void SaveToken (String token) // Als dit de eerste keer is opgeslagen, maakt u de sleutel op ApplicationSettings en slaat u de token op, of wijzigt u de sleutel anders als (! IsolatedStorageSettings.ApplicationSettings.Contains ("token")) IsolatedStorageSettings.ApplicationSettings. Toevoegen ("token", token); else IsolatedStorageSettings.ApplicationSettings ["token"] = token; IsolatedStorageSettings.ApplicationSettings.Save ();
Stap 16: Ophalen met het opgeslagen token
Nu moeten we het token van IsolatedStorage krijgen:
private string GetToken () // Als er geen Token in het geheugen is, retourneert u null, anders retourneert u het token als tekenreeks als (! IsolatedStorageSettings.ApplicationSettings.Contains ("token")) null retourneert; else return IsolatedStorageSettings.ApplicationSettings ["token"] als string;
Stap 17: Loggen met het opgeslagen token
Met deze twee methoden kunnen we het token nu ophalen en toewijzen aan onze client telkens wanneer de app wordt geopend:
// Constructor public MainPage () InitializeComponent (); client = nieuwe FacebookClient (); client.PostCompleted + = (o, args) => // Controleren op fouten als (args.Error! = null) Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message)); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Bericht is met succes gepost")); ; // Zoeken naar opgeslagen token als (GetToken ()! = Null) client.AccessToken = GetToken ();
Stap 18: Verlopen tokens controleren
Een ander ding om rekening mee te houden is dat de gebruiker de toestemmingen van onze App kan afwijzen, dus we moeten dit detecteren en opnieuw om permissies vragen. Deze detectie moet worden uitgevoerd op onze PostCompleted-handler, omdat Facebook ons daar op de hoogte stelt van een probleem met ons bericht. Voeg de volgende regels toe aan onze PostCompleted-handler:
client.PostCompleted + = (o, args) => // Controleren op fouten als (args.Fout! = null) // Vergunningsfout als (args.Error is FacebookOAuthException) Dispatcher.BeginInvoke (() => MessageBox .Show ("Autorisatiefout")); // Verwijder de feitelijke token omdat deze niet meer werkt. SaveToken (null); client.AccessToken = null; else Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message)); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Bericht is met succes gepost")); ;
Stap 19: Pas de knop Terug aan
Als laatste stap moeten we de gebruiker de optie geven om de browser te sluiten wanneer dat gewenst is. Deze actie moet worden gegeven aan de knop Terug, dus we moeten alleen de gebeurtenishandler aanpassen om dit te bereiken.
Voeg de volgende methode toe aan uw code:
protected override void OnBackKeyPress (System.ComponentModel.CancelEventArgs e) // Als browser zichtbaar is, verberg deze en annuleer de navigatie-gebeurtenis indien (Browser.Visibility == System.Windows.Visibility.Visible) Browser.Visibility = System.Windows .Visibility.Collapsed; e.Cancel = true; base.OnBackKeyPress (e);
Stap 20: Het eindproduct
Test uw app nogmaals, nu heeft u een volledig werkende Facebook-app!
Waar te gaan vanaf hier
Facebook gaat niet alleen over het bijwerken van je status. Er is nog veel meer dat je aan je app kunt toevoegen, zoals het delen van foto's, het sturen van app-aanbevelingen aan vrienden, etc. De Facebook C # SDK biedt veel mogelijkheden voor Facebook-integratie. Ga voor meer informatie hierover naar hun webpagina en ga aan de slag om uw app socialer te maken!
Share
Accentsconagua
