Bygg den selv iOS Twitter-klient Del 2

I vår første enkle Twitter-app utforsket vi noen av de grunnleggende om å lage et prosjekt. Vi inkluderte Twitter-integrasjonen, men bare for å legge ut tweets til en konto. I denne andre delen utforsker vi Twitter API mer i dybden for å bygge en mer robust Twitter-klient. La oss komme i gang!

Lag nytt prosjekt

Lag et nytt prosjekt med følgende attributter:

  • Applikasjon med fane
  • ARC & Storyboards
  • Bare iPhone
Du skal være på en skjerm som figur A.

Figur A

Og hvis du navigerer til MainStoryboard-filen, ser du en mer interessant blåkopi. ( Figur B )

Figur B

Nå vil vi legge til to nye biblioteker ved å bruke den samme metoden for å gå til Project Navigators blå prosjektikon, ved å velge Mål og bygge faser. Bruk "+" -knappen til å legge til følgende biblioteker:

  • Regnskapsramme
  • Twitter Framework

Med det ute av veien, legg merke til følgende filer i prosjektnavigatoren:

  • Png-filer
  • FirstViewController
  • SecondViewController

Png-filene brukes til å dekorere de forskjellige kategoriene i tabbarcontroller. @ 2x-filene er en større versjon av det samme bildet for netthinnevisningen.

Så det er det vi har så langt. La oss se på hva vi trenger. Hvis du tenker på de typiske funksjonene en Twitter-klient har: Offentlig tidslinje, Dine anvisninger, din tidslinje, din profil og generell informasjon. Dette vil kreve fem forskjellige skjermer og XCode produserte bare to. Så la oss tenke på hva vi skal gjøre først. Vi kan gi nytt navn til de to eksisterende visningskontrollerne og opprette tre nye.

Endre navn (Refactoring)

Åpne FirstViewController.h-filen (grensesnittfilen) og plasser markøren over klassens navn, som vist i figur C.

Figur C

Høyreklikk over klassens navn og velg Refactor, som vil gi deg dette skjermbildet ( figur D ) for å oppgi det nye navnet.

Figur D

Gi den navnet TweetViewController. Til slutt får du presentert en bekreftelsesskjerm ( figur E ) som forteller deg hvor endringene vil bli gjort.

Figur E

Gjenta prosessen for SecondViewController og kall den ProfileViewController.

Å gi nytt navn eller refactoring er ganske kult. Prosjektet vårt starter bare og har få filer. Imidlertid, når du vil gi nytt navn til en klasse i et stort prosjekt der du har mange andre klasser som importerer eller henviser klassen som skal omdøpes, vil du se XCode ikke bare gi nytt navn til selve klassen, men refaktorere alle klasser som refererer til den, så det er ingen ødelagte lenker.

La oss nå bytte til filen MainStoryboard.storyboard og velg kategorien for TweetViewController som fremdeles er merket First. Gi den nytt navn ved å dobbeltklikke på etiketten og kalle den Post. Endelig navn til SecondView-fanen "Meg". Vi har to av de fem visningskontrollerne vi trenger.

  • TweetViewController: Brukte til å være FirstViewController
  • ProfileViewController: Brukte til å være SecondViewController

Så la oss lage de tre andre. Nå vet du hvordan du lager nye filer fra Filmenyen. La oss bare se på funksjonene de nye visningskontrollerne vil ha:

  • FollowMeViewController: UIViewController underklasse, iPhone Type, Not iPad og absolutt ingen Xib fordi vi allerede bruker Storyboards.
  • PublicTimelineViewController: UITableViewController
  • MentionsViewController: UITableViewController

Så langt har vi to viewcontroller-objekter på vår storyboard-plan og tilhørende klassefiler i Project Navigator. Vi har nettopp laget tre nye klassefiler i Project Navigator slik at vi må lage de tre nye objektene for dem. La oss gjøre dette nå ved å dra 1 UIViewController og 2 UITableViewControllers fra Objektbiblioteket på høyre rute til storyboardet vårt.

Hver gang du gjør dette (legg til et nytt viewcontroller-objekt på storyboardet), må du fortelle XCode hvilken klasse du vil knytte objektet til i Identity Inspector. Du finner Identity Inspector på høyre rute. Velg først den aktuelle visningskontrolleren på storyboardet, dvs. UIViewController, og bytt til Identity Inspector, og velg FollowMeViewController fra nedtrekkslisten. ( Figur F )

Figur F

Se nøye på bildet over. Du kan se i Project Navigator at vi allerede har opprettet de nye klassefilene. I hovedvinduet kan du se at vi har gitt nytt navn til de to fanene, og at vi har dratt den nye UIViewController. På høyre rute har vi valgt Identity Inspector, og vi har identifisert den nye UIViewController som et FollowMeViewController-objekt.

Gjør nå det samme for de to UITableViewController; identifiser den ene som klassen PublicTimelineViewController og den andre som MentionsViewController-klassen.

Endelig må vi koble disse tre nye visningskontrollerne til tabbarcontroller, noe som er ganske enkelt. Høyreklikk over tabellkontrolleren i storyboard, og et svart bord vises over det som vist i figur G.

Figur G

Klikk og dra fra den fylte sirkelen til høyre for visningskontrollere over til hver av de nye visningskontrollerne på storyboardet slik at hver nye tilkobling opprettes. Gi nytt navn til tittelen på hver fane for å visuelt identifisere hver enkelt.

Forbered AppDelegate

I Project Navigator velger du den blå mappen og går til Målinnstillinger, Bygg faser og åpner opp Link-biblioteker slik at du kan legge til rammer for Twitter og kontoer. Nå går du videre og legger til denne koden til AppDelgate:

 #import #import @grensesnitt AppDelegate: UIResponder @property (sterkt, ikke-atomisk) UIWindow * -vindu; // Legger til Twitter-støtte @ eiendom (sterk, ikke-atomisk) ACAccountStore * accountStore; @ eiendom (sterk, ikke-atomisk) NSMutableDictionary * profileImages; @ eiendom (sterk, ikke-atomisk) ACAccount * userAccount; @slutt 

Og dette vil gå i AppDelegate.m

 @synthesize vindu = _vindu; @synthesize accountStore = _accountStore; @synthesize profileImages = _profileImages; @synthesize userAccount = _userAccount; - (BOOL) applikasjon: (UIApplication *) søknad didFinishLaunchingWithOptions: (NSDictionary *) launchOptions { // Overstyringspunkt for tilpasning etter søknadsstart. // Twitter self.accountStore = ACAccountStore alloc init; self.profileImages = NSMutableDictionnaire ordbok; ACAccountType * twitterType = self.accountStore accountTypeWithAccountTypeIdentifier : ACAccountTypeIdentifierTwitter; self.accountStore requestAccessToAccountsWithType: twitterType-alternativer: null fullføring: ^ (BOOL gitt, NSError * -feil) { if (gitt) { NSArray * twitterAccounts = self.accountStore accountsWithAccountType: twitterType; if (twitterAccounts count) { self.userAccount = twitterAccounts objectAtIndex: 0; NSNotificationCenter defaultCenter postNotification: NSNotificationvarselWithName: @ "TwitterAccountAcquiredNotification" object: nil; } else { NSLog (@ "Ingen Twitter-kontoer"); }} }; return YES; } 

Twitter API referansedokumentasjon

Gå nå til Window | Arrangør og i kategorien Dokumentasjon, klikk på forstørrelsesglasset og skriv "TWRequest". Velg TWRequest Class Reference fra resultatene og klikk på lenken https://dev.twitter.com/docs i oversikten.

Dette åpner Twitter Developer Documentation rett innenfor XCode. Se etter en seksjon som heter REST API og klikk på den. Denne delen viser en fin liste over alle de forskjellige Twitter-interaksjonene du kan ha. Klikk på koblingen GET statuser / home_timeline for å bli ført til den tidslinjens informasjon.

Denne siden forteller deg alt du trenger å vite om hvordan du henter denne ressursen. Hvis du vil hente omtaler eller favoritter eller brukertidslinjer eller noe annet, er det forskjellige ressurser, og de har alle sine måter å bli kalt på.

Figur H

Hvis du ser på høyre side i boksen Ressursinformasjon i figur H, kan du se alt. Å hente denne ressursen fra twitter krever autentisering, du kan motta en json-formatrespons ved å bruke HTTP Get-metoden og noen andre funksjoner. Ok nå her kommer den kule delen. Installer Twitter for Mac på din Mac. Når du har konfigurert kontoen din på den, går du til Twitter | Innstillinger og klikk på kategorien Utvikler for å sjekke alternativet Vis utviklermeny. Etter at du har sjekket det, lukker du Innstillinger, og du har nå et alternativ for å utvikle i Twitter-menylinjen. Det eneste alternativet inni den er Console, så gå foran og åpne den, så får du en skjerm som figur I.

Figur I

På venstre side har du en liste over ressursene, omtrent som i dokumentene. Velg Tidslinjer og deretter Offentlig tidslinje. Du kan se GET URL du må bruke, og hvis du klikker på URL-vinduet og trykker ENTER, får du resultatene fra Twitter. Ryddig!

PublicTimelineViewController (1)

La oss bare innlemme denne kunnskapen i vår Twitter-klient. Legg til disse importene til din PublicTimelineViewController.m:

 #import "PublicTimelineViewController.h" #import "AppDelegate.h" #import "TweetCell.h" #import 
MERKNAD: Vår PublicTimelineViewController vil faktisk være PrivatTimeline eller Newsfeed. Dette betyr at det vil gi oss tweets fra de vi følger. Selve den offentlige tidslinjen på Twitter, jeg er ikke sikker på at mange bruker den, det ville være utmattende.

Legg merke til at det er en @ -grensesnittdel i .m som @end, og så er det den kjente @implementasjonen. Du er kanskje vant til å bare se @implementering i .m. De siste modifiseringene av ObjC har begynt å bruke dette formatet der du erklærer private variabler i .m-filen fordi du kanskje ikke vil at andre klasser skal vite om dem, og det er det .h-filen er til for. Så modifiser .m i PublicTimelineViewController for å se slik ut:

 @interface PublicTimelineViewController () @ eiendom (sterk, ikke-atomisk) NSArray * tweetsArray; - (ugyldig) getFeed; - (void) updateFeed: (id) feedData; @slutt 

La oss implementere dette og gå til viewDidLoad-metoden som er klassens utgangspunkt:

 @implementation PublicTimelineViewController @synthesize tweetsArray = _tweetsArray; - (void) viewDidLoad { super viewDidLoad; // Test eller registrer deg for // TwitterAccountAcquiredNotification. AppDelegate * appDelegate = UIA-applikasjon deltApplikasjon delegat; if (appDelegate.userAccount) { self getFeed; } // Registrer deg for // TwitterAccountAcquiredNotification etter visningslaster NSNotificationCenter defaultCenter addObserver: self selector: @selector (getFeed) navn: @ "TwitterAccountAcquiredNotification" objekt: nil; } 

Det vi gjør her er først, å teste om vi faktisk allerede har konfigurert et userAccount. Hvis vi gjør det, kan vi kalle getFeed-metoden vår. Ellers registrerer vi oss for å motta et varsel når kontoen faktisk er opprettet. La oss nå håndtere hva som skjer på viewDidAppear. Legg til følgende metoder:

 - (BOOL) canBecomeFirstResponder { return YES; } - (void) viewDidAppear: (BOOL) animert { super viewDidAppear: animated; // Bli den første responderen slik at vi kan motta beskjed når // en risting oppstår. self becomeFirstResponder; } - (void) viewDidDisappear: (BOOL) animert { // Gi den første responderen igjen når vi ikke er synlige lenger. self resignFirstResponder; super viewDidDisappear: animated; } - (void) motionEnded: (UIEventSubtype) motion withEvent: (UIEvent *) hendelse { self getFeed; } 

Det vi gjør her, er å få vårt syn til å bli første svar når vi laster og sier opp når vi forsvinner. Og til slutt legger vi til en metode som lar oss riste enheten for å kalle getFeed-metoden vår.

Nå går du inn på TableView-datakildedelen og angir nummerOfSectionsInTable for å returnere 1 og numberOfRowsInSection for å returnere dette:

 return self.tweetsArray.count; 

Siden vi ikke vil at appen skal rotere til liggende, kan vi begrense den ved å legge til følgende metode:

 ( BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation { return (interfaceOrientation == UIInterfaceOrientationPortrait); } 

Nå kommer en stor metode, getFeed-metoden. Husk hva vi gjør er bare å opprette en serverforespørsel som vil bli sendt til Twitter-serveren for å håndtere for oss og få tilbake resultatene i json-format. Hvis resultatet er vellykket, kaller vi updateFeed-metoden for å vise oss resultatene. Hvis resultatet mislykkes, må vi vise noen varslingsvisninger for brukeren å se hva som skjedde.

Bruke Twitter-ressursene

Her er getFeed-metoden:

 - (ugyldig) getFeed { // 1. Få denne ressurs-URL-en fra Twitter Develop Console eller API Docs NSURL * feedURL = NSURL URLWithString: @ "http://api.twitter.com/1/statuses/home_timeline.json"; NSDictionary * parameters = NSDictionary dictionaryWithObjectsAndKeys: @ "15", @ "count", nil; // 2. Opprett forespørselen TWRequest * twitterFeed = TWRequest alloc initWithURL: feedURL parameters: parameters requestMethod: TWRequestMethodGET; // 3. Få og pass inn kontoen AppDelegate * appDelegate = UIA-applikasjon deltApplication delegat; twitterFeed.account = appDelegate.userAccount; // 4. Angi aktivitetsindikator UIApplication * sharedApplication = UIApplication sharedApplication; sharedApplication.networkActivityIndicatorVisible = JA; // 5. Få den faktiske strømmen og json serialiser den twitterFeed performRequestWithHandler: ^ (NSData * responseData, NSHTTPURLResponse * urlResponse, NSError * error) { if (! Error) { NSError * jsonError = nil; id feedData = NSJSONSerialization JSONObjectWithData: responseData-alternativer: 0 feil: & jsonError; if (! jsonError) { self updateFeed: feedData; } annet { // Vis en varslingsvisning UIAlertView * alertView = UIAlertView alloc initWithTitle: @ "Feil" -melding: jsonError localizedDescription delegat: nul CancelButtonTitle: @ "OK" otherButtonTitles: nil; alarmView show; } } annet { // Vis en varslingsvisning UIAlertView * alertView = UIAlertView alloc initWithTitle: @ "Feil" -melding: error localizedDescription delegat: nul CancelButtonTitle: @ "OK" otherButtonTitles: nil; alarmView show; } sharedApplication.networkActivityIndicatorVisible = NEI; }; } 

Kommentarene er ganske selvforklarende. Legg merke til at vi bruker blokker her for å utføre Twitter-forespørselen. Blokken tillater oss å sende inn en blokkblokk for å utføre når resultatet kommer tilbake. Vær også oppmerksom på at vi ringer kontoen vi opprettet og lagret i AppDelegate. Dette vil lese kontoen som er lagret på enheten din.

Vi bruker også en fin liten aktivitetsindikator for å vise brukerens arbeid. Til slutt kaster vi inn en updateFeed-metode som viser hva som gjøres når resultatet er mottatt, som fyller tweetsArray med resultatet og laster inn tabellvisningen på nytt.

For å vise tweets riktig, trenger vi celler. La oss lage vår egen tilpassede celleklasse kalt TweetCell. Så lag en ny fil, mål C, underklasserer UITableViewCell. Legg til 3 utsalgssteder; to etiketter og en bildevisning for cellen. Sørg for å opprette disse kontrollene i cellene dine på storyboard.

For å gjøre det må du velge cellene fra både PublicTimeline-scenen og MentionsViewController.

Figur J

Fra Identity Inspector endrer du deretter cellens type til Custom og lager Identifier ContentCell. Til slutt bare koble alle 3 uttakene til sine respektive UIControls i storyboard.

La oss nå kode den faktiske klassen. Legg til egenskapene våre for de 3 uttakene vi opprettet i implementeringsfilen din, som nå skal se slik ut:

 TweetCell.h 

#importere

@interface TweetCell: UITableViewCell

@ eiendom (sterk, ikke-atomisk) IBOutlet UILabel * tweetLabel;

@ eiendom (sterk, ikke-atomisk) IBOutlet UIImageView * userImage;

@ eiendom (sterk, ikke-atomisk) IBOutlet UILabel * brukernavn Etikett;

@slutt

Og implementer den til slutt ved å syntetisere egenskapene dine, og du er ferdig. Du trenger ikke å gjøre noen spesifikk implementering for å overstyre noen metoder. Dette betyr at cellen vår vil bruke alle metoder som er iboende for UITableViewCell, bortsett fra at vi vil ha lagt til 3 uttak for å få cellen til å se slik vi ønsker, og at vi kan stille dem til det vi ønsker.

Implementeringsfilen din skal se slik ut:

 TweetCell.m 

#import "TweetCell.h"

@implementering TweetCell

@synthesize tweetLabel = _tweetLabel;

@synthesize userImage = _userImage;

@synthesize usernameLabel = _usernameLabel;

- (id) initWithStyle: (UITableViewCellStyle) stil gjenbrukidentifikator: (NSString *) reuseIdentifier

{

self = super initWithStyle: style reuseIdentifier: reuseIdentifier;

hvis (egen) {

// Initialiseringskode

}

return self;

}

- (void) setVelget: (BOOL) valgt animert: (BOOL) animert

{

super setVelgt: valgt animert: animert;

// Konfigurer visningen for den valgte tilstanden

}

@slutt

Ok, så stort sett tar vare på tweet datakilden. Imidlertid ville en Twitter-klient ikke sett akseptabel uten brukerens bilde, ikke sant? Så la oss tenke på dette - vi må laste ned tekstdataene (som lastes raskt) før vi laster ned bildedataene (som tar lengre tid). I en normal cellForRowAtIndexPath (cfraip) -metode, vil du få tekstdataene og tilordne den til cellens etikett og bli gjort. Men vi har et bilde å tenke på.

Så for nå, la oss bare lage en vanlig cfraip-metode som ser slik ut:

 - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath { // 1. Statisk dequeue-celle NSString * CellIdentifier = @ "ContentCell"; TweetCell * cell = tableView dequeueReusableCellWithIdentifier: CellIdentifier forIndexPath: indexPath; // 2. Få tweet og bruker av den tweeten som også er en ordbok (se på Twitter> Utvikle> Konsoll NSDictionary * currentTweet = self.tweetsArray objectAtIndex: indexPath.row; NSDiction * currentUser = currentTweet objectForKey: @ "user"; / / 3. Fyll ut tekst og bilde for cell cell.usnameLabel.text = currentUser objectForKey: @ "name"; cell.tweetLabel.text = currentTweet objectForKey: @ "text"; cell.userImage.image = UIImage imageNamed: @ "SomeDefaultImage.png"; 

Den forrige koden laster ganske enkelt Twitter-navnet, tweeten og et standardbilde du kan lage. Bare opprett et 50x50 bilde slik at det kan plasseres som et plassholderbilde. Senere vil vi jobbe med å få de faktiske bildene. Husk å også lage et 100x100 bilde kalt slik at det kan brukes på netthinneenheter.

Så du bør få tweets i PublicTimelineVC. La oss nå se på å endre det standardbildet for det faktiske Twitter-profilbildet. Legg til denne koden rett etter cell.userImage.image-linjen og returcellelinjen:

 // 4. Ring appdelegate AppDelegate * appDelegate = UIA-applikasjon deltApplication delegat; // 5. Angi bilde for brukernavn, men sjekk først NSString * userName = cell.usernameLabel.text; if (appDelegate.profileImages objectForKey: userName) { // Sjekk om profileImages dicionarys 'objectForKey for det brukernavnet allerede eksisterer, hvis det gjør det, sett det cell.userImage.image = appDelegate.profileImages objectForKey: userName; } annet { // Hvis denne brukerens bilde ikke eksisterer, kan du hente det fra nettet ved å få en kø fra systemet ... dispatch_queue_t concurrentQueue = dispatch_get_global_queue (DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); // Hent bildet asynkront for den brukeren ... dispatch_async (concurrentQueue, ^ { // Lagre bildelink i NSURL NSURL * imageURL = NSURL URLWithString: currentUser objectForKey: @ "profile_image_url"; // Opprett NSData-objekt for bildedata __blokker NSData * imageData; // Hent synkront dispatch_sync (concurrentQueue, ^ { imageData = NSData dataWithContentsOfURL: imageURL; // Lagre det tilbake i appdelegatens ordbok appDelegate.profileImages setObject: UIImage imageWithData: image ; }); // Oppdater tabellvisningens cfraip-metode dispatch_sync (dispatch_get_main_queue (), ^ { cell.userImage.image = appDelegate.profileImages objectForKey: userName; }); }); } 

Som du ser, legger vi til noen kode til først, kaller appen Utdelingen, og sjekk for å se om bildet for den brukeren allerede finnes i vår profilImages-ordbok, og hvis den ikke gjør det, hent det fra nettet. Det er den hente kodeblokken på nettet vi ønsker å undersøke nærmere.

Først får vi en kø og deretter asynkront oppretter URL-objektet og NSData, men likevel henter NSData synkront med URLen. Det asynkrone anropet vil ikke blokkere hovedtråden, men det synkrone anropet vil laste ned ett komplett bilde av gangen før du fortsetter til det neste. Til slutt lagrer vi den i profilbildene for senere bruk.

Du har en ganske anstendig Twitter-klient så langt. I den siste delen, del III, går vi videre til Mentions, som er stort sett det samme arbeidet, men det bruker en annen Twitter API-ressurs. Du vil fly gjennom det, lover jeg.

Hvis du gikk glipp av det, kan du sjekke ut del 1 av denne Twitter-appen.

© Copyright 2020 | mobilegn.com