Bygg din egen iOS Flickr-app: Del 1

Jeg kommer til å anta at dere alle kjenner Flickr. I denne opplæringen vil vi vise deg hvordan du lager en enkel app som kobles til Flickr, sender en forespørsel, analyserer resultatene og viser dem i en tabellvisning. Tabellvisningen bør du være ganske kjent med. Selve Flickr-tilkoblingen vil være litt ny, men du vil merke at den er veldig lik Twitter-appen vår. Til slutt vil vi leke med appen for å få den til å laste bilder på en ikke-hindrende måte.

Skissen for denne appen ville være enkel: Et enkelt vindu som inneholder en tabellvisning.

Steps

La oss gå gjennom trinnene:

  1. Lag appformen
  2. Koble til Flickr
  3. Hent og analyser dataene
  4. Oppgi tabellen
  5. Tinker!

OK, la oss starte med å lage en tom applikasjon og kalle den TRFlickApp. Appen din inneholder ganske enkelt en AppDelegate. Fra dette AppDelegate vil vi umiddelbart opprette en UITableViewController som viser de endelige dataene våre. Så fortsett med å lage en ny UITableViewController Class-fil og gi den navnet MyTableViewController.

Bortsett fra AppDelegate og UITVC, trenger du en Flickr-app og en JSON-mappe for å analysere json-resultater fra webresponser. Flickr-appen er enkel nok å lage. Bare gå til flickr.com og logg inn med kontoen din, ellers opprett en ny. Jeg skal gjøre livet ditt enklere og foreslå at du bare følger denne lenken: http://www.flickr.com/services/apps/create/

I utgangspunktet må du be om en API-nøkkel. Gi appen din en tittel hvis du ønsker det. Den viktige ressursen her er API-nøkkelen. Dette er hva Flickr.com API vil bruke for å autentisere iOS-appen din for å få tilgang til Flickr.com.

Nå videre til JSON-parseren! Vi bruker Stig Brautasets JSON-analyser. Den ligger på Github, og du trenger bare Classes-mappen, som inneholder SBJSON-filene i den. Så legg dette til prosjektet ditt.

Nå som vi har alle fire ressursene, la oss komme på jobb.

Kode

Videresend din MyTableViewController i AppDelegate.h, lag en ivar for den og gjør den til en egenskap:

 @class MyTableViewController; 
 MyTableViewController * myTableViewController; 
 @ eiendom (ikke-atomisk, beholde) IBOutlet UIWindow * -vindu; 

De tre linjene ovenfor utfører denne oppgaven. Du vet allerede hvor de skal gå inn i AppDelegaten din. Når det gjelder AppDelegate.m-filen, importere MyTableViewController, syntese egenskapen og øyeblikkelig / last inn vc-en i metoden appDidFinishLaunching.

 #import "MyTableViewController.h" 
 @synthesize myTableViewController; 
 self.myTableViewController = MyTableViewController alloc initWithStyle: UITableViewStylePlain; 
 myTableViewController.view.frame = UIScreen mainScreen .applicationFrame; 
 vindu addSubview: myTableViewController.view; 
 // Overstyringspunkt for tilpasning etter programstart 
 windows makeKeyAndVisible; 

Og ikke glem å slippe eiendommen i din dealloc-metode, med mindre du bruker ARC. Det er det for AppDelegate.

Fortsetter du til vc-en, legg til to ivars som inneholder navn og bilder i MyTableViewController.h:

 NSMutableArray * fotonavn; 
 NSMutableArray * photoURLs; 

La oss sørge for å importere de resterende to ressursene til MyTableViewController.m:

 #import "JSON.h" 
 #import "FlickrAPIKey.h" 

La oss nå sette sammen disse ressursene. I din vc-initialisator, start din array ivars:

 - (id) initWithStyle: (UITableViewStyle) stil 
 { 
 self = super initWithStyle: style; 
 hvis (egen) { 
 photoURLs = NSMutableArray alloc init; 
 photoNames = NSMutableArray alloc init; 
 self loadFlickrPhotos; 
 } 
 return self; 
 } 

Siden bilder må være større for å bli verdsatt, la oss gjøre brukeren en fordel og forstørre den typiske cellen ved å gjøre dette i vårt synDidLoad:

 - (ugyldig) viewDidLoad 
 { 
 self.tableView.rowHeight = 95; 
 } 
 Du trenger minst metoden NumberOfRowsInSection, så implementer den basert på array-tallet: 
 - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) seksjon 
 { 
 returner photoNames count; 
 } 

La oss nå anta at vårt utvalg av bilder og navn er befolket og bekymrer oss for å vise dem i tabellvisningen:

 - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath 
 { 
 UITableViewCell * cell = UITableViewCell alloc initWithStyle: UITableViewCellStyleDefault reuseIdentifier: @ "Cell Identifier" autorelease; 
 cell.textLabel.text = photoNames objectAtIndex: indexPath.row; 
 NSData * imageData = NSData dataWithContentsOfURL: photoURLs objectAtIndex: indexPath.row; 
 cell.imageView.image = UIImage imageWithData: imageData; 
 returcelle; 
 } 

OK, la oss se gjennom. Hvis bildene og navnene våre ble fylt, ville vi trekke ut verdien i navnearrayen og plassere den i cell.textLabel.text. Vi ville gjøre noe lignende med bildene. Vi ville trekke dem ut i et NSData-objekt og lagt det i cell.imageView.image.

Befolk matriser

Nå som vi har visningsdelen ute av veien, la oss fokusere på å faktisk fylle disse arrayene riktig. For det, la oss gå til initWithStyle-metoden der vi kalte self loadFlickrPhotos; metode. La oss implementere den metoden nå.

 - (ugyldig) loadFlickrPhotos 
 { 
 // 1. Bygg din Flickr API-forespørsel m / Flickr API-nøkkel i FlickrAPIKey.h 
 NSString * urlString = NSString stringWithFormat: @ "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=%@&tags=%@&per_page=10&format=json&nojsoncallback=1", FlickrAPIKey, @ "mayan2012"; 
 NSURL * url = NSURL URLWithString: urlString; 
 // 2. Få URLResponse-streng og analyser JSON til Foundation-objekter. 
 NSString * jsonString = NSString stringWithContentsOfURL: url koding: NSUTF8StringEncoding error: nil; 
 NSDictionary * resultater = jsonString JSONValue; 
 // 3. Velg gjennom resultater og bygg matriser 
 NSArray * photos = result objectForKey: @ "photos" objectForKey: @ "photo"; 
 for (NSDictionary * foto på bilder) { 
 // 3.a Få tittel på e / foto 
 NSString * title = photo objectForKey: @ "title"; 
 fotoNavn addObject: (title.length> 0? title: @ "Untitled"); 
 // 3.b Konstruer URL for e / foto. 
 NSString * photoURLString = NSString stringWithFormat: @ "http: //farm%@.static.flickr.com/%@/%@_%@_s.jpg", photo objectForKey: @ "farm", photo objectForKey : @ "server", photo objectForKey: @ "id", photo objectForKey: @ "secret"; 
 photoURLs addObject: NSURL URLWithString: photoURLString; 
 } 
 } 

OK la oss gå gjennom dette. Legg merke til at det er veldig likt Twitter's API. Du konstruerer et Request-objekt ved hjelp av noe for å autentisere deg (API-nøkkel) og noe å se etter ("mayan2012" -streng) i vårt tilfelle.

Vi oppretter deretter en NSURL ut av strengobjektet. Vi får deretter URL-svaret og analyserer det ved hjelp av JSONValue og legger det inn i en NSDictionary. Vi slipper bare gjennom den resulterende ordboken og henter verdiene vi er interessert i og legger dem i hver sin gruppe.

Voila! Vi er ferdige!

Vel, bortsett fra en ting til. Vi må faktisk fortelle appen hva vår API-nøkkel er. Lag en Objekt C-overskriftsfil som heter FlickrAPIKey.h og legg denne linjen i den:

 NSString * const FlickrAPIKey = @ "YOURAPIKEYVALUE"; 

OK, nå kan du bygge og kjøre prosjektet ditt. Du vil se tabellvisningen fylt med navn og bilder relatert til "mayan2012" Flickr-søk.

Se kontrollører

Dette var en ganske enkel app, men intensjonen er ganske viktig. Hvis du har fulgt iOS Build it Yourself-serien, vil denne appen forsterke kunnskapen din om kontroller av tabellvisning, koble til webtjenester, bruke JSON for å analysere resultater fra nettet og grunnleggende Objekt-C-kodingspraksis.

Slipp oss en linje hvis du har spørsmål så langt. Vi fortsetter å polere denne appen i en andre del senere denne måneden.

Les også:

  • Bygg den selv iOS Twitter-klient Del 1
  • Bygg den selv iOS Twitter-klient Del 2
  • Bygg den selv iOS Twitter-klient Del 3

© Copyright 2021 | pepebotifarra.com