Bygg den selv iOS Twitter-klient Del 1

I denne tredelte opplæringen vil vi dekke hvordan du oppretter en grunnleggende Twitter-klient som lar brukeren vise tweets av en bestemt Twitter-konto og tweet fra den kontoen også. Hovedmålet er å lære deg hvordan du bruker noen vanlige visningskontrollere i Apple iOS og utnytter et tredjepartsbibliotek i den tilpassede applikasjonen.

Mitt første trinn når jeg oppretter en app, ligner alltid figur A.

Figur A

Serviettskisse

Dette forteller meg at jeg ser etter en app med en enkelt visning og en slags popup-visning, som vil utføre en oppgave, tweet til Internett på Twitter-kontoen min. Dette er veldig nyttig fordi det gjør det klart for meg hva appen trenger å ha for å fungere.

La oss hoppe rett inn og opprette vårt prosjekt ved å starte XCode og fra Fil-menyen ( Figur B ) og velge Ny | Prosjekt | Enkeltvisning-applikasjon.

Figur B

Velg malen nøye
Etter å ha klikket på Neste, vil du få en skjerm som ligner på figur C.

Figur C

Prosjektalternativer

Gi prosjektet ditt et beskrivende navn; i dette tilfellet kalte vi prosjektet TechRepublicTwitter1, eller TRTw1 for kort. Det er viktig å ikke ta med mellomrom i prosjektnavnet ditt, da dette kan føre til problemer senere med filstier. Etter hvert kommer du til vane å ikke se mellomrommene når du er i "kodemodus", og vil få det behagelige ved å bare stikke ord sammen eller bruke den beryktede "_" understrekingen som et mellomrom.

Organisasjonsnavn kan være alt du ønsker i tillegg til firmaidentifikator. Bundle Identifier er en omvendt domeneanmeldelse som brukes av Apple for å identifisere hver app via en Provisioning-profil for hver app.

Klasseprefiks er navnet du vil at XCode skal legge til hver klassefil du oppretter for denne appen. Du kan bruke det samme appnavnet, men husk at det eneste dette gjør er å prefikse enhver ny klassefil med "TRTw1" i vårt tilfelle. Så for eksempel når du oppretter en visningskontroller, vil den ha navnet TRTw1ViewController i stedet for bare ViewController. Personlig liker jeg ikke dette, fordi hvis jeg senere vil flytte en klassefil til et nytt prosjekt, må jeg gi nytt navn til klassefilen fordi prefikset ikke har noe med det nye prosjektet å gjøre.

Prosjektet vårt vil bare være designet for iPhone, så vi vil forlate enheter med iPhone som det eneste valget. Ellers ville vi valgt iPad eller Universal hvis vi ville lage appen til begge.

Til slutt bruker vi Storyboards og ARC. Førstnevnte er en funksjon som hjelper programmerere ved å la dem bruke en grafisk plan for å lage nye skjermoppsett. Det siste er også en ny funksjon som lar programmerere glemme minnehåndtering. Når det gjelder enhetstesting, vil vi ikke se på det når som helst så snart det er et ganske avansert emne.

Når vi har klikket "Neste", blir vi bedt om å velge en mappe vi vil lagre prosjektet vårt i. Jeg anbefaler at du er organisert om dette, så hold alle XCode-prosjektene dine på et bestemt sted. Du skal nå være på en skjerm som ser ut som figur D.

Figur D

Et nytt prosjekt

Den venstre ruten er Project File Navigator, og i den kan du se filene for prosjektet ditt. Når du velger det øverste nivået, det med det blå ikonet, kan du se prosjekt- og målinnstillingene i sentrumsvinduet. Hvis du velger en klassefil, vil du se innholdet. Den høyre ruten viser visse attributter for den valgte filen i de forskjellige inspektørene som vi vil studere når vi går sammen.

Som du ser i Project Navigator, opprettet XCode følgende klassefiler for deg:

  • AppDelegate
  • ViewController
  • MainStoryboard

Andre viktige filer som skal leses i Støttefiler er:

  • TRTw1-Info.plist
  • TRTw1-Prefix.pch
  • Main.m

Info.plist- filen lagrer grunnleggende appinformasjon vi vil utforske senere. Prefix.pch inneholder spesielle overskrifter for filer som du vil importere på en app-bred basis i stedet for hele klassen. Main.m er filen som heter applikasjonsstart, og hvis du tar en titt, "kjører" den i utgangspunktet AppDelegate-klassefilen.

Mer interessante filer

La oss se på mer interessante filer. Som nevnt over laster appen main.m-filen som igjen kaller AppDelegate. Hver app har en main.m og en AppDelegate. AppDelegate har en veldig viktig metode, den:

 - (BOOL) applikasjon: (UIApplication *) søknad didFinishLaunchingWithOptions: (NSDictionary *) launchOptions 

I appen vår bruker vi Storyboards, som i utgangspunktet forteller appen hvilken visning de skal presentere først. Når Storyboards ikke brukes, er det AppDelegate som kjører showet, og du vil se applikasjonenDidFinishLaunchingWithOptions-metoden fylt med kode for å opprette og presentere den første visningskontrolleren.

Hvis du kjører appen din nå, får du ganske enkelt en blank skjerm. Dette er utsikten presentert av ViewController, som for øyeblikket ikke inneholder noe og har hvit bakgrunn.

Før vi dykker ned i koden, la oss se på skissen vår:

Appen vår vil bare gjøre en ting, tweet! Dette betyr at knappen i midten vil kalle en metode som tweeter litt tekst . Det er viktig å ha dette i bakhodet når du koder, derfor vil jeg gjerne starte med å kode bare metodenavn med kommentarer i dem. Som vi vil se, metoder som er koblet til UIControls som UIB-knapper, har en retur type IBAction fordi de er knyttet til en Interface Builder-handling. Dermed vil jeg starte med å kode i kommentarer hva jeg vil at appen min skal gjøre i den metoden.

Så la oss legge dette til ViewController.m, helt øverst:

 #import "ViewController.h" 
 @interface ViewController () 
 - (IBAction) tweet: (id) avsender; 
 @slutt 
 @implementation ViewController 
 - (IBAction) tweet: (id) avsender { 
 // App krever internett, sjekk tilkoblingen 
 // App krever legitimasjon, sjekk legitimasjon 
 // Andre sjekker 
 // Bygg tweetdata 
 // Utfør tweet 
 } 

Som koder er det viktig å holde koden organisert og skrive kommentarer om hva en metode vil gjøre, før du skriver den faktiske koden, vil hjelpe deg med å organisere koden for gjenbrukbarhet og lesbarhet senere.

Det vi gjør er å erklære en IBAction-metode som heter tweet i grensesnittdelen. Så lager vi metoden i implementeringen slik at vi kan fylle den opp med kode.

Disse .h / .m-klassefilene er underliggende kode for den faktiske visningskontrolleren. Og du kan designe hele grensesnittet programmatisk. Vi valgte imidlertid å bruke Storyboards, som gir oss en visuell måte å utforme visningskontrollørene våre på. Bytt til MainStoryboard, så får du presentert skjermen som er vist i figur E.

Figur E

MainStoryboard

Nå drar du et Round Rect Button-objekt fra Object Library i høyre rute og slipper det på ViewController. Dobbeltklikk på den og endre etikettteksten til Tweet. La oss til slutt legge til litt øyegodteri - gjør et Google-søk etter et fint Twitter-fuglebilde og lagre det på datamaskinen din.

Dette er viktig, så lær å gjøre det ordentlig. Velg mappen du vil legge bildene dine i fra venstre rute. Høyreklikk nå og velg Legg til filer. ( Figur F )

Figur F

Legg til filer
Bla nå etter bildefilen på datamaskinen din og velg den. Du vil bli presentert for en skjerm som vist i figur G.

Figur G

Legg til et bilde

Velg bildet ditt, og sørg for å merke av for Kopier elementer til målgruppens mappe (om nødvendig). Klikk nå på Legg til, så er du ferdig. Bildefilen vises i mappen du opprinnelig valgte.

Det du gjorde var å importere en eiendel, ikke bare som referanse til prosjektet, men da du krysset av for Kopier elementer, kopierte du også filen til prosjektet. Nå har det ikke noe å si om du sletter den originale nedlastede filen der du hadde den, fordi prosjektet ditt har en kopi i prosjektmappen.

Nå i høyre rute klikker du på filmstrimmelikonet for å bytte til Mediebiblioteket som inneholder ditt eneste importerte aktivum så langt. Dra den på visningskontrolleren for å få en fin scene. ( Figur H )

Figur H

Twitter-fugl
La oss koble til knappen slik at den faktisk gjør noe. Velg hele visningskontrolleren slik at skjermen din ser ut som figur I.

Figur I

Velg hele visningskontrolleren

Legg merke til hvordan du får mye tilkoblingsuttak på høyre rute. Ikonet som er valgt på toppen er en sirkel med høyre pil. Dette er Connections Inspector som viser alle tilkoblingene det valgte objektet ditt kan gjøre. Så la oss koble Tweet mottatt handling til Tweet-knappen ved å klikke på den tomme sirkelen og dra den til Tweet-knappen. Fra popup-listen velger du Touch Up Inside og forbindelsen opprettes.

Du har nå en fullt fungerende app. Det eneste er at knappen kaller en metode, som for øyeblikket er tom. Før vi kan fylle opp denne metoden, må vi imidlertid importere Twitter Framework. Det er litt tørt, men raskt, så la oss få det ut av veien.

Velg det blå prosjektikonet i venstre rute og velg Målet fra hovedvinduet. Nå fra Byggfaser-fanen utvider du Link Binary with Libraries og klikker på "+" -knappen. Skriv inn Twitter og Twitter Framework i søkefeltet. ( Figur J )

Figur J

Twitter Framework

Velg den og klikk Legg til-knappen. BOOM! Akkurat slik kan appen din nå få tilgang til Twitter.

La oss importere denne nye rammen til appen vår ved å legge til denne linjen på ViewController.m:

 #importere 

Nå i vår tweet-metode legger du til denne:

 //1. Sjekker etter nødvendige ressurser 
 if (TWTweetComposeViewController canSendTweet) { 
 NSLog (@ "Tilkoblet og autorisert"); 
 } annet { 
 // Hvis nødvendige ressurser ikke er tilgjengelige 
 NSString * melding = @ "Kontroller internettforbindelsen din eller Innstillinger for en konfigurert Twitter-konto"; 
 UIAlertView * alertView = UIAlertView alloc initWithTitle: @ "Vi beklager" -melding: melding delegat: nil CancelButtonTitle: @ "Avvis" otherButtonTitles: nil; 
 alarmView show; 
 } 

La oss se hva vi gjorde.

Først kaller vi en metode for å sjekke om vi kan tweete, og hvis vi ikke kan, viser vi et varsel for å gi brukeren beskjed om problemet. Dette er hovedstrukturen i tweet-metoden vår. Metoden i seg selv, canSendTweet, er en klassemetode som sjekker for Internett-tilkobling og legitimasjon av kontoer. Hvis de eksisterer, kommer det tilbake.

Dette betyr at vi ikke kaster bort tid og krefter på prosessoren som går gjennom en haug med kode som til slutt vil være for ikke hvis vi ikke har de nødvendige ressursene. Så enhver kode for å forberede den faktiske tweeten vil gå i denne gaffelen til If-erklæringen. Hvis det returnerer falskt, betyr det at vi ikke kan tweete, så vi vil ikke gjøre noe annet enn å forberede en UIAlert som dukker opp for brukeren å lese.

Så la oss se på hva vi må gjøre for å lage en tweet hvis vi får lov til det. Først og fremst tweetens tekst:

 // 2. 
 // Init TweetComposeViewController 
 TWTweetComposeViewController * vc = TWTweetComposeViewController alloc init; 
 // Angi tweet-tekst 
 vc setInitialText: @ "Min første programmerer-tweet!"; 

Her gir vi et TWTweetComposeViewController- objekt og setter teksten til ønsket tweet. Et viktig skille her er at den første metoden vi kalte, canSendTweet, var en klassemetode fordi den ble kalt på selve klassen. Det ble ikke kalt noen instans for at det skulle ringes. Nå lager vi faktisk en forekomst av den, for å kalle forekomstmetoder på den, for eksempel setInitialText.

Bare for moro skyld, plasser markøren over TWTweetComposeViewController-navnet og høyreklikk på det og hopp til definisjon. Dette tar deg til klassefilen der disse metodene er definert. Du kan se "+" foran metodenSendTweet-metoden kontra "-" foran setInitialText-metodenavnet.

La oss nå legge til et bilde for å tweet. Vi skal hardkode bildenavnet foreløpig. Bildet mitt kalles bilder-27.jpeg. Så la oss legge til denne koden der vi slapp:

 // 3. 
 // Hardkode et bilde 
 UIImage * image = UIImage imageNamed: @ "images-27.jpeg"; 
 vc addImage: image; 

Som du ser, tar vi en forekomst vc og legger til et bilde til det.

En annen populær funksjon ved tweets er å knytte URL-er til dem. Vi kan gjøre dette ved å legge til koden:

 // 4. 
 // Hardkode en URL 
 NSURL * url = NSURL URLWithString: @ "http://www.santiapps.com"; 
 vc addURL: url; 

Igjen legger vi ganske enkelt url til vc-forekomsten. Dette siste trinnet kan være litt forvirrende på grunn av ordren, men det har å gjøre med et veldig populært kodingskonsept som kalles blokker.

Normalt kaller du en metode på et objekt og sender den variabler eller data. Objektet ditt tar dataene og utfører sine oppgaver og returnerer noen andre data. Blocks er en funksjon der du passerer objektet en bestemt kode i stedet for data. Dette er nyttig når du skal fortelle objektet hva du skal gjøre med en bestemt mengde data. La oss se på koden og se hvorfor det er nyttig:

 // 5. 
 // Valgfritt 
 vc setCompletionHandler: ^ (TWTweetComposeViewControllerResultat resultat) { 
 self-avskjedModalViewControllerAnimated: YES; 
 }; 
 // 6. 
 // Present TweetComposeViewController 
 self presentViewController: vc animert: JA fullført: null; 

La oss tenke på hva som skal skje nå. Du har samlet "Tweet-objektet" og er klar til å presentere det for brukeren. Du bør ringe trinn 6; Presentere TweetComposeViewController for brukeren å trykke på Send eller noe sånt.

Det vi gjør er å angi en egenskap til vc-forekomsten som kalles Completion Handler som tar en blokk med kode i stedet for en variabel. Vi ber vår vc-instans om å utføre denne koden i {}.

Til slutt presenterer vi den faktiske visningskontrolleren for brukeren å se teksten, bildet og url vi koblet til vår vc-forekomst. Når brukeren trykker på Send-knappen i den vc-visningskontroller-forekomsten, blir kompletteringsbehandleren kalt og self-avskjedModalVisikontrollerAnimert: YES; blir henrettet, og dermed avskjediget den samme visningskontrolleren. ( Figur K )

Figur K

Fullføringshåndterer

Kompletteringsbehandleren er praktisk fordi den venter på resultatet før du ringer oppsigelseskoden. Ellers kan vc-en din bli oppsagt for tidlig.

Jeg håper du likte del I av denne opplæringen, og vi ser frem til å se deg i del II hvor vi utforske hvordan du legger til Twitter-tidslinjen din til denne appen.

Les også:

  • Lag din egen Apple iPhone Clock-app
  • Lag din egen iPhone Stopwatch-app
  • Fem bøker som hver Apple iOS-utvikler skal eie

© Copyright 2021 | mobilegn.com