Share
Deze tutorial leert je hoe je de iOS 6 SDK en het sociale framework gebruikt om dynamische inhoud van Twitter te laden. Om dit te doen, zal ik je leren hoe je een Twitter-profiel genererende applicatie kunt bouwen. Lees verder!
Open Xcode en selecteer "Een nieuw Xcode-project maken". Selecteer "Empty Application" en klik op "next". Voer een naam in voor uw project (ik heb de mijne 'Twitterprofiel' genoemd), zorg ervoor dat u de iPhone selecteert voor het apparaat en selecteer vervolgens alle selectievakjes, behalve het selectievakje Kerngegevens gebruiken. Klik daarna op "volgende" en kies een plaats om uw project op te slaan voordat u op "create" klikt.
We willen deze toepassing alleen in de staande modus gebruiken, dus ga naar de sectie Ondersteunde interfacorichtlijnen en schakel de landschapsoriëntaties uit.
We zullen drie frameworks aan ons project moeten toevoegen: het sociale raamwerk om het verzoek te doen, het accountenkader om het Twitter-account van de gebruiker te gebruiken en het QuartzCore Framework om onze interface een beetje aan te passen.
Ga naar het tabblad "Fasen opbouwen" en gebruik de optie "Binaire bibliotheken koppelen". Klik op de knop "+" om een nieuw Framework toe te voegen. Typ 'Sociaal' in het zoekvak en selecteer het Social.framework optie die in de lijst verschijnt. Klik op "Toevoegen" om dit kader op te nemen in de koppelingsfase van uw project. Doe hetzelfde voor de kaders Accounts en QuartzCore door "Accounts" en "QuartzCore" in het zoekvak te typen.
Ga naar "Bestand"> "Nieuw"> "Bestand ..." of druk op ⌘N om een nieuw bestand te maken. Ga naar het gedeelte "Gebruik interface", selecteer "Storyboard" en klik op "Volgende" .Zorg ervoor dat de apparaatfamilie is ingesteld op iPhone en klik nogmaals op "Volgende". MainStoryboard en klik op "Maken".
Nu moeten we het storyboard koppelen aan ons project. Selecteer de projectnaam in het navigatormenu van Xcode en selecteer het huidige doel (in ons geval "Twitter-profiel"). Selecteer vervolgens het tabblad "Zomerse" en ga naar het gedeelte "iPhone / iPad-implementatiegegevens". Eenmaal daar, selecteer je ons Storyboard genaamd "MainStoryboard" voor het hoofdverhaal.
Het laatste wat we moeten doen om ons storyboard te laten werken, is het veranderen van de toepassing: didFinishLaunchWithOptions: methode, open AppDelegate.m en pas de methode als volgt aan:
- (BOOL) applicatie: (UIApplication *) applicatie didFinishLaunchingWithOptions: (NSDictionary *) launchOptions return YES;
Open het storyboard en sleep een navigatiecontroller van de objectbibliotheek naar het canvas. Selecteer de Table View-controller aangesloten op de Navigation Controller en verwijder deze. Versleep nu een View Controller vanuit de Objectbibliotheek naar het canvas. CTRL-sleep van de navigatiecontroller naar de View Controller en selecteer "root view controller" in het pop-upmenu. Selecteer de Navigatiecontroller, open de Archiefinspector en schakel "Gebruik Autolayout" uit, omdat we deze nieuwe functie voor onze app niet zullen gebruiken. Eindelijk dubbelklik op de navigatiebalk van de View Controller die we zojuist hebben gemaakt en voer "Username" in als titel.
Selecteer nu een Tekstveld uit de Objectbibliotheek en voeg het toe aan de View Controller. Selecteer het tekstveld en open de specificatie-infovenster. Voer "Gebruikersnaam" in als de tijdelijke aanduiding en zorg ervoor dat u de optie "Wissen bij bewerken begint" selecteert. Neem vervolgens een knop uit de objectbibliotheek, voeg deze toe aan de View Controller en verander de titel in 'Show Info'.
Zorg er ten slotte voor dat u het tekstveld en de knop als volgt indeelt:
We hebben ook een scherm nodig om het Twitter-profiel te tonen, dus sleep een nieuwe View Controller vanuit de Objectbibliotheek naar het canvas. CTRL-sleep van de knop "Show Info" naar de View Controller en selecteer "push" in het pop-upmenu. Dubbelklik vervolgens op de navigatiebalk van de tweede View Controller en voer "Profile" in als titel.
We hebben veel labels en enkele imageviews nodig op dit scherm om de profielinformatie te tonen. Voeg eerst een afbeeldingsweergave toe aan de controller voor profielweergave en zorg ervoor dat u deze uitlijnt met de bovenkant. Open vervolgens de Size Inspector en geef deze een grootte van 320 x 160 pixels. Wijzig ook de autoresizing als volgt:
Voeg een andere beeldweergave toe bovenop de vorige. Ga naar de Size Inspector en pas de grootte, coördinaten en autoresizing als volgt aan:
Nu zullen we een aantal labels toevoegen om de naam en gebruikersnaam te tonen. Sleep een label bovenop de grootste afbeeldingweergave voor de banner. Open de Size Inspector en pas de grootte, coördinaten en autoresizing als volgt aan:
Open vervolgens de Attributen Inspector en typ "Naam" voor de labeltekst. Verander de kleur in wit, maak het lettertype Bold en stel de uitlijning in op het midden. Eindelijk zullen we een schaduw toevoegen aan dit label. Stel de verticale schaduwverschuiving in op 1, zodat de schaduw onder de tekst verschijnt. Klik op Schaduwkleur en maak de kleur zwart met een dekking van 75%.
Dit label was voor de naam, maar we hebben ook een label nodig voor de gebruikersnaam, dus selecteer het label dat we zojuist hebben gemaakt en druk op ⌘C ⌘V om het te kopiëren en te plakken. Wijzig de tekst in "@gebruikersnaam" en verander de X- en Y-coördinaten naar 20 en 120. We willen ook dit lettertype een klein beetje kleiner maken, dus open de Attributen Inspector en verander de lettergrootte naar 14.
We hebben ook nog zes labels nodig om het aantal tweets, volgers en volgers weer te geven. Gelukkig hoeven we er maar twee toe te voegen en kunnen de andere vier worden gekopieerd en geplakt. Voeg een nieuw label toe aan de View Controller, maak het 74 pixels breed, verander de X- en Y-coördinaten in 20 en 168. Voer "0" in als tekst voor dit label. Voeg vervolgens een nieuw label toe, maak het ook 74 pixels breed, maar verander deze keer de X- en Y-coördinaten in 20 en 190. Open de Attributen Inspector en geef het label een lichtgrijze kleur. Wijzig ook de tekst in "Tweets".
Selecteer beide labels die we zojuist hebben gemaakt en sleep ze naar het midden. Op deze manier maken we een kopie van de twee labels. ALT sleep nogmaals, maar deze keer lijnt u de labels rechts uit. Nu hebben we deze zes labels behoorlijk snel gemaakt. Wijzig de tekst van het middelste label in "Volgen" en de tekst van het juiste label in "Volgers".
Het laatste wat we moeten toevoegen aan onze interface is een tekstweergave om de laatste tweet van een gebruiker te tonen, dus sleep een tekstweergave vanuit de objectbibliotheek naar de onderkant van de View Controller. Open de Size Inspector en pas de grootte, coördinaten en autoresizing als volgt aan:
Met deze opties ziet onze app er goed uit op een iPhone 5, maar ook op een oudere iPhone 4. U kunt het storyboard bekijken in een scherm van 3,5 "door op deze knop rechtsonder te drukken:
Open nu het Attributen Inspector en verwijder de tekst van de Tekstweergave. Zorg er ook voor dat u de optie Editable uitschakelt.
De interface zou er nu als volgt moeten uitzien:
Nu we onze interface hebben voltooid, denk ik dat het een goed moment is om onze app te testen. Klik op Build and Run of druk op ⌘R om de applicatie te testen. De app moet een eenvoudige navigatie-controller met een tekstveld en een knop weergeven. Als u op de knop tikt, ziet u de profielpagina die we zojuist hebben gemaakt. De naam en gebruikersnaam zijn niet gemakkelijk te lezen, maar daar zullen we later voor zorgen.
Ga naar "Bestand"> "Nieuw"> "Bestand ..." om een nieuw bestand te maken. Selecteer "Objective-C klasse" en klik op "Volgende". Voer "UsernameViewController" in voor de klasse en zorg ervoor dat dit een subklasse van UIViewController is en dat beide selectievakjes niet zijn geselecteerd. Klik nogmaals op "Volgende" en klik vervolgens op "Maken".
Open UsernameViewController.h en pas de code als volgt aan:
#importeren@interface UsernameViewController: UIViewController IBOutlet UITextField * usernameTextfield; @end
Hier maken we gewoon een eenvoudige uitlaatklep voor ons tekstveld, die we gebruiken om de ingevoerde gebruikersnaam door te geven aan de profielpagina.
Open vervolgens het Storyboard opnieuw en selecteer de gebruikersnaam View Controler. Open de Identity Inspector en verander de klasse in de gebruikersnaamViewController die we zojuist hebben gemaakt. Hierna opent u de Connections Inspector en verbindt u de gebruikersnaamTextfield-uitgang met het tekstveld.
Open nu UsernameViewController.m en voeg de volgende regel toe #import "GebruikersnaamViewController.h":
#import "ProfileViewController.h"
Hier importeren we al ProfileViewController, die we later in deze tutorial zullen maken. Voeg vervolgens de volgende methode toe onder de didReceiveMemoryWarning methode:
- (void) prepareForSegue: (UIStoryboardSegue *) segue verzender: (id) afzender ProfileViewController * profileViewController = [segue destinationViewController]; [profileViewController setUsername: usernameTextfield.text];
Hier geven we de gebruikersnaam door aan de ProfileViewController, die we in een minuut zullen maken.
Om deze verkooppunten te maken, moeten we eerst een aantal nieuwe bestanden maken, dus ga naar "Bestand"> "Nieuw"> "Bestand ...". Selecteer "Objective-C klasse" en klik op "Volgende". Voer "ProfileViewController" in voor de klasse en zorg ervoor dat het een subklasse van UIViewController is en dat beide selectievakjes niet zijn geselecteerd. Klik nogmaals op "Volgende" en klik vervolgens op "Maken".
Open ProfileViewController.h en pas de code als volgt aan:
#importeren#importeren #importeren #importeren @interface ProfileViewController: UIViewController IBOutlet UIImageView * profileImageView; IBOutlet UIImageView * bannerImageView; IBOutlet UILabel * nameLabel; IBOutlet UILabel * gebruikersnaamLabel; IBOutlet UILabel * tweetsLabel; IBOutlet UILabel * followingLabel; IBOutlet UILabel * volgersLabel; IBOutlet UITextView * lastTweetTextView; NSString * gebruikersnaam; @property (nonatomic, retain) NSString * gebruikersnaam; @einde
Hier importeren we eerst de frameworks die we eerder aan ons project hebben toegevoegd. Daarna maken we een aantal verkooppunten voor de elementen die de profielafbeelding zullen tonen, en uiteindelijk creëren we een string die de ingevoerde gebruikersnaam zal bevatten. We plaatsen deze string in de prepareForSegue: afzender: methode die we in de vorige stap hebben gemaakt.
Open het storyboard en selecteer het profiel View Controller. Open de Identity Inspector en verander de Class in ProfileViewController. Open daarna de Connections Inspector en verbind de stopcontacten met de bijbehorende interface-elementen. Zorg ervoor dat u de tweetsLabel, followingLabel en volgersLabeluitgangen verbindt met de labels boven de labels met de bijbehorende tekst. Sluit dus het tweetsLabel-stopcontact niet aan op het label met de tekst 'Tweets', maar met het label erboven.
Eindelijk, open ProfileViewController.m en voeg de volgende regel toe onder @implementation:
@synthetiseer gebruikersnaam;
Het bestand ProfileViewController.m moet nog steeds worden geopend, dus ga naar de viewDidLoad methode en verander het om het als volgt te lezen:
- (void) viewDidLoad [super viewDidLoad]; [profileImageView.layer setBorderBreedte: 4.0f]; [profileImageView.layer setBorderColor: [[UIColor whiteColor] CGColor]]; [profileImageView.layer setShadowRadius: 3.0]; [profileImageView.layer setShadowOpacity: 0,5]; [profileImageView.layer setShadowOffset: CGSizeMake (1.0, 0.0)]; [profileImageView.layer setShadowColor: [[UIColor blackColor] CGColor]];
Hier gebruiken we het QuartzCore Framework om de profileImageView een rand en wat schaduw te geven.
Voeg de volgende methode toe onder de didReceiveMemoryWarning methode:
- (void) getInfo // Verzoek om toegang tot de Twitter-accounts ACAccountStore * accountStore = [[ACAccountStore-allocatie] init]; ACAccountType * accountType = [accountStore accountTypeWithAccountTypeIdentifier: ACAccountTypeIdentifierTwitter]; [accountStore-aanvraag AccesToAccountsWithType: accountType-opties: nihil voltooid: ^ (BOOL verleend, NSError * -fout) if (verleend) NSArray * accounts = [accountStore-accountsWithAccountType: accountType]; // Controleer of de gebruikers ten minste één Twitter-account hebben ingesteld als (accounts.count> 0) ACAccount * twitterAccount = [accounts objectAtIndex: 0]; // Een verzoek maken om de informatie over een gebruiker op Twitter te krijgen SLRequest * twitterInfoRequest = [SLRequest requestForServiceType: SLServiceTypeTwitter requestMethod: SLRequestMethodGET URL: [NSURL URLWithString: @ "https://api.twitter.com/1.1/users/show. json "] parameters: [NSDictionary woordenboekWithObject: gebruikersnaam forKey: @" schermnaam "]]; [twitterInfoRequest setAccount: twitterAccount]; // Het verzoek doen [twitterInfoRequest performRequestWithHandler: ^ (NSData * responseData, NSHTTPURLResponse * urlResponse, NSError * error) dispatch_async (dispatch_get_main_queue (), ^ // Controleer of we de reate-limiet hebben bereikt if ([urlResponse statusCode] == 429 ) NSLog (@ "Tariefbeperking bereikt"); return; // Controleer of er een fout was als (foutmelding) NSLog (@ "Fout:% @", error.localizedDescription); return; // Controleer of er zijn enkele responsgegevens als (responseData) NSError * error = nil; NSArray * TWData = [NSJSONSerialization JSONObjectWithData: responseData options: NSJSONReadingMutableLeaves error: & error]; // Filter de gewenste gegevens NSString * screen_name = [(NSDictionary *) TWData-objectForKey : @ "schermnaam"]; NSString * name = [(NSDictionary *) TWData objectForKey: @ "name"]; int followers = [[(NSDictionary *) TWData objectForKey: @ "followers_count"] integerValue]; int following = [[ (NSDictionary *) TWData objectForKey: @ "friends_count"] integerValue]; int tweets = [[(NSDictionary *) TWData obje ctForKey: @ "statuses_count"] integerValue]; NSString * profileImageStringURL = [(NSDictionary *) TWData-objectForKey: @ "profile_image_url_https"]; NSString * bannerImageStringURL = [(NSDictionary *) TWData-objectForKey: @ "profile_banner_url"]; // Werk de interface bij met de geladen gegevensnaamLabel.text = naam; usernameLabel.text = [NSString stringWithFormat: @ "@% @", schermnaam]; tweetsLabel.text = [NSString stringWithFormat: @ "% i", tweets]; followingLabel.text = [NSString stringWithFormat: @ "% i", gevolgd door]; followersLabel.text = [NSString stringWithFormat: @ "% i", followers]; NSString * lastTweet = [[(NSDictionary *) TWData objectForKey: @ "status"] objectForKey: @ "text"]; lastTweetTextView.text = lastTweet; // Haal de profielafbeelding op in het oorspronkelijke resolutieprofielImageStringURL = [profileImageStringURL stringByReplacingOccurrencesOfString: @ "_ normal" withString: @ ""]; [self getProfileImageForURLString: profileImageStringURL]; // Haal de bannerafbeelding op, als de gebruiker er één heeft (bannerImageStringURL) NSString * bannerURLString = [NSString stringWithFormat: @ "% @ / mobile_retina", bannerImageStringURL]; [self getBannerImageForURLString: bannerURLString]; else bannerImageView.backgroundColor = [UIColor underPageBackgroundColor]; ); ]; else NSLog (@ "Geen toegang verleend"); ];
Dat is veel code, maar ik zal het stap voor stap uitleggen.
ACAccountStore * accountStore = [[ACAccountStore alloc] init]; ACAccountType * accountType = [accountStore accountTypeWithAccountTypeIdentifier: ACAccountTypeIdentifierTwitter];
Hier initialiseren we eerst een ACAccountStore-object waarmee we toegang hebben tot de accounts van de gebruiker. Daarna maken we een ACAccountType-instantie, bellen met de accountTypeWithAccountTypeIdentifier methode op de ACAccountStore-instantie die we zojuist hebben gemaakt en stel vervolgens het accounttype in op Twitter. U kunt dezelfde methode gebruiken als u Facebook wilt gebruiken, maar dan moet u het ID van het accounttype instellen ACAccountTypeIdentifierFacebook.
[accountStore-aanvraag AccesToAccountsWithType: accountType-opties: nul voltooiing: ^ (BOOL verleend, NSError * fout) if (toegekend) ];
Hier vragen we de gebruiker simpelweg om onze app toegang te geven tot hun Twitter-account (s).
NSArray * accounts = [accountStore accountsWithAccountType: accountType]; if (accounts.count> 0) ACAccount * twitterAccount = [accounts objectAtIndex: 0];
Hier maken we een array van alle Twitter-accounts van de gebruiker. We controleren of de gebruiker Twitter-accounts heeft. Als dat het geval is, maken we een ACAccount-instantie van de eerste Twitter-account in die array. Om het simpel te houden, gebruiken we het eerste account in deze tutorial, maar in een echte app zou je de gebruiker de optie moeten geven om hun favoriete Twitter-account te selecteren voor het geval ze meer dan 1 hebben.
SLRequest * twitterInfoRequest = [SLRequest requestForServiceType: SLServiceTypeTwitter requestMethod: SLRequestMethodGET URL: [NSURL URLWithString: @ "https://api.twitter.com/1.1/users/show.json"] parameters: [NSDictionary dictionaryWithObject: gebruikersnaam forKey: @ " scherm naam"]]; [twitterInfoRequest setAccount: twitterAccount];
Hier maken we ons verzoek, dat de Twitter API zal noemen. We hebben het servicetype ingesteld op Twitter en de verzoekmethode om GET te krijgen. We willen geen informatie over een gebruiker op Twitter. U kunt ook de verzoekmethoden POST en DELETE gebruiken. Met POST kunt u een profielafbeelding bijwerken of een tweet plaatsen. Met DELETE kunt u dingen uit uw account verwijderen. De URL in deze tutorial zal zijn: https://api.twitter.com/1.1/users/show.json. Deze URL zorgt ervoor dat het verzoek een verscheidenheid aan informatie over de opgegeven gebruiker retourneert in JSON-indeling. Als een parameter voegen we de ingevoerde gebruikersnaam voor de sleutel schermnaam toe, zodat we de informatie over die gebruiker krijgen. Hierna hebben we het account voor de aanvraag ingesteld bij de instantie ACAccount.
[twitterInfoRequest performRequestWithHandler: ^ (NSData * responseData, NSHTTPURLResponse * urlResponse, NSError * error) dispatch_async (dispatch_get_main_queue (), ^ if ([urlResponse statusCode] == 429) NSLog (@ "Tariefbeperking bereikt"); return; if (error) NSLog (@ "Error:% @", error.localizedDescription); return;); ];
Hier doen we het verzoek en zorgen we ervoor dat het asynchroon wordt geladen, dus onze interface blijft reageren tijdens het laden. We doen dit met GCD, Grand Central Dispatch. Ik zal niet ingaan op details, maar je kunt hier meer informatie over vinden. Wanneer het verzoek is voltooid, controleren we eerst of onze app de snelheidslimiet niet heeft bereikt. Daarna controleren we of er een fout was.
if (responseData) NSError * error = nil; NSArray * TWData = [NSJSONSerialization JSONObjectWithData: responseData options: NSJSONReadingMutableLeaves error: & error];
Hier controleren we of het verzoek antwoordgegevens heeft geretourneerd. Als dat het geval is, maken we een array uit het geretourneerde JSON-bestand.
NSString * screen_name = [(NSDictionary *) TWData-objectForKey: @ "schermnaam"]; NSString * name = [(NSDictionary *) TWData-objectForKey: @ "name"]; int followers = [[(NSDictionary *) TWData objectForKey: @ "followers_count"] integerValue]; int following = [[(NSDictionary *) TWData objectForKey: @ "friends_count"] integerValue]; int tweets = [[(NSDictionary *) TWData objectForKey: @ "statuses_count"] integerValue]; NSString * profileImageStringURL = [(NSDictionary *) TWData-objectForKey: @ "profile_image_url_https"]; NSString * bannerImageStringURL = [(NSDictionary *) TWData-objectForKey: @ "profile_banner_url"];
Hier filteren we de gewenste gegevens, we krijgen de gebruikersnaam, schermnaam (gebruikersnaam), het aantal tweets, volgers en personen die volgen. We krijgen ook de URL's voor de profielafbeelding en de banner.
nameLabel.text = naam; usernameLabel.text = [NSString stringWithFormat: @ "@% @", schermnaam]; tweetsLabel.text = [NSString stringWithFormat: @ "% i", tweets]; followingLabel.text = [NSString stringWithFormat: @ "% i", gevolgd door]; followersLabel.text = [NSString stringWithFormat: @ "% i", followers]; NSString * lastTweet = [[(NSDictionary *) TWData objectForKey: @ "status"] objectForKey: @ "text"]; lastTweetTextView.text = lastTweet;
Hier werken we eenvoudig de teksteigenschappen van onze labels en tekstweergave bij met de gegevens die we zojuist hebben ontvangen en gefilterd.
profileImageStringURL = [profileImageStringURL stringByReplacingOccurrencesOfString: @ "_ normal" withString: @ ""]; [self getProfileImageForURLString: profileImageStringURL];
Omdat Twitter de URL gebruikt voor de profielafbeelding van normaal formaat, die slechts 48 bij 48 pixels is, verwijderen we de tekenreeks "_normal", zodat we de originele profielafbeelding kunnen krijgen. Daarna noemen we de getProfileImageForURLString: methode om de profielafbeelding te downloaden. We zullen die methode binnen een paar minuten maken.
if (bannerImageStringURL) NSString * bannerURLString = [NSString stringWithFormat: @ "% @ / mobile_retina", bannerImageStringURL]; [self getBannerImageForURLString: bannerURLString]; else bannerImageView.backgroundColor = [UIColor underPageBackgroundColor];
Hier controleren we of de gebruiker een profielbanner heeft. Als dit het geval is, werken we de URL bij, zodat we de mobiele netvlies-versie van de banner krijgen, die een afmeting van 640x320 pixels heeft. Daarna noemen we de getBannerImageForURLString: methode om de banner te downloaden. Als de gebruiker geen profielbanner heeft, geven we de bannerImageView een achtergrondkleur.
Voeg nu de volgende methoden toe onder de informatie verkrijgen methode om het profiel en de afbeelding van de banner te downloaden:
- (void) getProfileImageForURLString: (NSString *) urlString; NSURL * url = [NSURL URLWithString: urlString]; NSData * data = [NSData dataWithContentsOfURL: url]; profileImageView.image = [UIImage imageWithData: data]; - (void) getBannerImageForURLString: (NSString *) urlString; NSURL * url = [NSURL URLWithString: urlString]; NSData * data = [NSData dataWithContentsOfURL: url]; bannerImageView.image = [UIImage imageWithData: data];
Het laatste wat we moeten doen om onze app te voltooien, is door het informatie verkrijgen methode in de viewDidLoad methode, dus ga naar de viewDidLoad methode en voeg de volgende regel toe onderaan die methode:
[zelf getInfo];
Nu we onze app hebben voltooid, klik je op Build and Run of druk je op ⌘R om de app te testen. Als u een gebruikersnaam van iemand op Twitter invoert, ziet u een mini-profiel met informatie over die gebruiker.
Bedankt voor het lezen van deze tutorial over het maken van een Twitter-verzoek met het nieuwe sociale kader. Als u meer wilt weten over de Twitter API, raad ik u aan de officiële documentaion te bekijken. Ik hoop dat je deze tutorial leuk vond en als je vragen of opmerkingen hebt over deze tutorial, laat ze dan in de comments hieronder staan!
Accentsconagua