Share
Questo tutorial ti insegnerà come utilizzare l'SDK di iOS 6 e il Social Framework per caricare contenuti dinamici da Twitter. Per farlo, ti insegnerò come costruire un'applicazione per generare un profilo Twitter. Continuare a leggere!
Apri Xcode e seleziona "Crea un nuovo progetto Xcode". Seleziona "Applicazione vuota" e fai clic su "Avanti". Inserisci un nome per il tuo progetto (ho chiamato il mio "Profilo Twitter"), assicurati di selezionare iPhone per il Dispositivo, quindi seleziona tutte le caselle di controllo, eccetto la casella Usa dati principali. Successivamente, fai clic su "Avanti" e scegli un luogo in cui salvare il progetto prima di fare clic su "crea".
Vogliamo utilizzare questa applicazione solo in modalità verticale, quindi vai alla sezione Orientamenti dell'interfaccia supportata e deseleziona gli orientamenti orizzontali.
Dovremo aggiungere tre framework al nostro progetto: il framework sociale per fare la richiesta, il framework per gli account per usare l'account Twitter dell'utente e il framework QuartzCore per personalizzare la nostra interfaccia un po '.
Vai alla scheda "Fasi di costruzione" e utilizza l'opzione "Collega binari con le librerie". Fai clic sul pulsante "+" per aggiungere un nuovo framework. Digita "Social" nella casella di ricerca e seleziona il Social.framework opzione che appare nell'elenco. Fai clic su "Aggiungi" per includere questo framework nella fase di collegamento del tuo progetto. Fai lo stesso per i framework Accounts e QuartzCore digitando "Account" e "QuartzCore" nella casella di ricerca.
Vai su "File"> "Nuovo"> "File ..." o premi ⌘N per creare un nuovo file. Vai alla sezione "Usa interfaccia", seleziona "Storyboard" e fai clic su "Avanti". Assicurati che la famiglia di dispositivi sia impostata su iPhone e fai di nuovo clic su "Avanti". MainStoryboard e fai clic su "Crea".
Ora dobbiamo collegare lo Storyboard al nostro progetto. Selezionare il nome del progetto nel menu di navigazione di Xcode e selezionare il target corrente (nel nostro caso "Profilo Twitter"). Quindi, seleziona la scheda "Summery" e vai alla sezione "Informazioni sull'installazione di iPhone / iPad". Una volta lì, seleziona il nostro Storyboard chiamato "MainStoryboard" per lo storyboard principale.
L'ultima cosa che dobbiamo fare per far funzionare il nostro storyboard è cambiare il applicazione: didFinishLaunchWithOptions: metodo, quindi apri AppDelegate.m e modifica il metodo come segue:
- Applicazione (BOOL): l'applicazione (UIApplication *) ha fattoFinishLaunchingWithOptions: (NSDictionary *) launchOptions return YES;
Apri lo storyboard e trascina un controller di navigazione dalla libreria degli oggetti nell'area di disegno. Seleziona il controller Vista tabella collegato al Navigation Controller ed eliminalo. Ora trascina un controller di visualizzazione dalla libreria degli oggetti nell'area di disegno. Trascinare CTRL dal Navigation Controller al View Controller e selezionare "root view controller" dal menu a comparsa. Seleziona il controller di navigazione, apri "File Inspector" e quindi deseleziona "Usa l'Autolayout" poiché non useremo questa nuova funzione per la nostra app. Infine, fai doppio clic sulla barra di navigazione del View Controller appena creato e inserisci "Username" come titolo.
Ora seleziona un campo di testo dalla libreria degli oggetti e aggiungilo al controller di visualizzazione. Seleziona il campo di testo e apri l'ispettore degli attributi. Inserisci "Nome utente" come segnaposto e assicurati di selezionare l'opzione "Cancella quando inizia la modifica". Quindi, prendi un pulsante dalla libreria degli oggetti, aggiungilo al controller di visualizzazione e cambia il titolo in "Mostra informazioni".
Infine, assicurati di disporre il campo di testo e il pulsante come segue:
Abbiamo anche bisogno di una schermata per mostrare il profilo Twitter, quindi trascina un nuovo controller di visualizzazione dalla libreria degli oggetti nell'area di disegno. Trascinare CTRL dal pulsante "Mostra informazioni" sul controller di visualizzazione e selezionare "push" dal menu a comparsa. Successivamente, fai doppio clic sulla barra di navigazione del secondo View Controller e inserisci "Profilo" come titolo.
Avremo bisogno di molte etichette e alcune immagini visualizzate su questo schermo per mostrare le informazioni del profilo. Innanzitutto, aggiungi una vista immagine al controller della vista profilo e assicurati di allinearlo in cima. Successivamente, apri "Impostazioni dimensione" e dai una dimensione di 320 x 160 pixel. Inoltre, modificare l'autoresizing come segue:
Aggiungi un'altra vista immagine sopra quella precedente. Vai a Impostazioni dimensioni e modifica le dimensioni, le coordinate e l'autoresizing come segue:
Ora aggiungeremo alcune etichette per mostrare il nome e il nome utente. Trascina un'etichetta sopra la più grande visualizzazione dell'immagine per il banner. Apri Impostazioni dimensione e modifica le dimensioni, le coordinate e l'autoresizing come segue:
Successivamente apri l'ispettore Attributi e inserisci "Nome" per il testo dell'etichetta. Cambia il colore in bianco, rendi il font grassetto e imposta l'allineamento al centro. Alla fine aggiungeremo un'ombra a questa etichetta. Imposta l'offset dell'ombra verticale su 1, in modo che l'ombra venga visualizzata sotto il testo. Fare clic sul colore Ombra e rendere il colore nero con un'opacità del 75%.
Questa etichetta era per il nome, ma abbiamo anche bisogno di un'etichetta per il nome utente, quindi seleziona l'etichetta che abbiamo appena creato e premi ⌘C ⌘V per copiarlo e incollarlo. Cambia il testo in "@nomeutente" e modifica le coordinate X e Y su 20 e 120. Vogliamo anche rendere questo carattere un po 'più piccolo, quindi apri l'ispettore Attributi e modifica la dimensione del carattere in 14.
Abbiamo anche bisogno di altre sei etichette per mostrare la quantità di tweet, follower e persone che seguono. Fortunatamente per noi, abbiamo solo bisogno di aggiungere due e possiamo copiare e incollare gli altri quattro. Aggiungi una nuova etichetta al View Controller, ingrandisci 74 pixel, modifica le coordinate X e Y su 20 e 168. Inserisci "0" come testo per questa etichetta. Successivamente, aggiungi una nuova etichetta, anche a 74 pixel di larghezza, ma questa volta modifica le coordinate X e Y su 20 e 190. Apri l'ispettore Attributi e assegna all'etichetta un colore grigio chiaro. Cambia anche il testo in "Tweet".
Seleziona entrambe le etichette che abbiamo appena creato e ALT trascinali al centro. In questo modo creiamo una copia delle due etichette. ALT trascina di nuovo, ma questa volta allinea le etichette a destra. Ora abbiamo creato queste sei etichette abbastanza velocemente. Cambia il testo dell'etichetta centrale in "Seguito" e il testo dell'etichetta giusta in "Seguaci".
L'ultima cosa che dovremo aggiungere alla nostra interfaccia è una vista testuale per mostrare l'ultimo tweet di un utente, quindi trascinare una vista testuale dalla libreria degli oggetti nella parte inferiore del controller di visualizzazione. Apri Impostazioni dimensione e modifica le dimensioni, le coordinate e l'autoresizing come segue:
Con queste opzioni la nostra app sembrerà bella su un iPhone 5, ma anche su un vecchio iPhone 4. Puoi visualizzare l'anteprima dello Storyboard in una schermata da 3,5 "premendo questo pulsante in basso a destra:
Ora apri l'ispettore degli attributi e rimuovi il testo della vista testo. Assicurati anche di deselezionare l'opzione Modificabile.
L'interfaccia dovrebbe ora apparire come segue:
Ora che abbiamo terminato la nostra interfaccia, penso che sia un buon momento per testare la nostra app. Fai clic su Crea ed esegui o premi ⌘R per testare l'applicazione. L'app dovrebbe mostrare un semplice controller di navigazione con un campo di testo e un pulsante. Se tocchi il pulsante, dovresti vedere la pagina del profilo che abbiamo appena creato. Il nome e il nome utente non sono facili da leggere, ma ce ne occuperemo in seguito.
Vai su "File"> "Nuovo"> "File ..." per creare un nuovo file. Selezionare "Classe Objective-C" e fare clic su "Avanti". Inserisci "UsernameViewController" per la classe e assicurati che sia una sottoclasse di UIViewController e che entrambe le caselle di controllo non siano selezionate. Fai nuovamente clic su "Avanti" e poi su "Crea".
Apri UsernameViewController.h e modifica il codice da leggere come segue:
#importare@interface UsernameViewController: UIViewController IBOutlet UITextField * usernameTextfield; @fine
Qui creiamo una semplice presa per il nostro campo di testo, che useremo per passare il nome utente inserito alla pagina del profilo.
Quindi apri nuovamente lo Storyboard e seleziona il nome utente Visualizza controllo. Apri Identity Inspector e modifica la classe in UsernameViewController appena creato. Dopodiché, apri l'Inspector di Connections e collega l'outlet usernameTextfield al campo di testo.
Ora apri UsernameViewController.m e aggiungi la seguente riga sotto #import "UsernameViewController.h":
#import "ProfileViewController.h"
Qui importiamo già ProfileViewController, che creeremo in seguito in questo tutorial. Quindi aggiungere il seguente metodo sotto il didReceiveMemoryWarning metodo:
- (vuoto) prepareForSegue: (UIStoryboardSegue *) segue mittente: (id) mittente ProfileViewController * profileViewController = [segue destinationViewController]; [profileViewController setUsername: usernameTextfield.text];
Qui passiamo il nome utente al ProfileViewController, che creeremo in un minuto.
Per creare questi punti vendita è necessario prima creare alcuni nuovi file, quindi vai su "File"> "Nuovo"> "File ...". Selezionare "Classe Objective-C" e fare clic su "Avanti". Inserisci "ProfileViewController" per la classe e assicurati che sia una sottoclasse di UIViewController e che entrambe le caselle di controllo non siano selezionate. Fai nuovamente clic su "Avanti" e poi su "Crea".
Apri ProfileViewController.h e modifica il codice da leggere come segue:
#importare#importare #importare #importare @interface ProfileViewController: UIViewController IBOutlet UIImageView * profileImageView; IBOutlet UIImageView * bannerImageView; IBOutlet UILabel * nameLabel; IBOutlet UILabel * usernameLabel; IBOutlet UILabel * tweetsLabel; IBOutlet UILabel * followingLabel; IBOutlet UILabel * followersLabel; IBOutlet UITextView * lastTweetTextView; NSString * username; @property (nonatomic, retain) NSString * username; @fine
Qui prima importiamo i framework che abbiamo aggiunto in precedenza al nostro progetto. Dopodiché, creiamo alcuni punti vendita per gli elementi che mostreranno l'immagine del profilo, e alla fine creeremo una stringa che conterrà il nome utente inserito. Impostiamo questa stringa nel prepareForSegue: mittente: metodo, abbiamo creato nel passaggio precedente.
Apri lo Storyboard e seleziona il profilo Visualizza controller. Apri Identity Inspector e modifica la classe in ProfileViewController. Successivamente, apri Connections Inspector e collega le prese con gli elementi dell'interfaccia corrispondenti. Assicurati di collegare i tweetsLabel, followingLabel e followerLabel con le etichette sopra le etichette con il testo corrispondente. Quindi, non collegare il tweetsLabel outlet con l'etichetta "Tweets", ma con l'etichetta sopra quella.
Infine, apri ProfileViewController.m e aggiungi la seguente riga in @implementation:
@synthesize username;
Il file ProfileViewController.m dovrebbe essere ancora aperto, quindi vai su viewDidLoad metodo e cambiarlo per leggere come segue:
- (void) viewDidLoad [super viewDidLoad]; [profileImageView.layer setBorderWidth: 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]];
Qui usiamo il QuartzCore Framework per dare al profiloImageView un bordo e un po 'di ombra.
Aggiungi il seguente metodo sotto il didReceiveMemoryWarning metodo:
- (void) getInfo // Richiesta di accesso agli account Twitter ACAccountStore * accountStore = [[ACAccountStore alloc] init]; ACAccountType * accountType = [accountStore accountTypeWithAccountTypeIdentifier: ACAccountTypeIdentifierTwitter]; [accountStore requestAccessToAccountsWithType: accountLe opzioni del tipo: nil completamento: ^ (BOOL concesso, errore NSError *) if (concesso) account NSArray * = [accountStore accountWithAccountType: accountType]; // Verifica se gli utenti hanno configurato almeno un account Twitter se (account.count> 0) ACAccount * twitterAccount = [account objectAtIndex: 0]; // Creazione di una richiesta per ottenere le informazioni su un utente su Twitter SLRequest * twitterInfoRequest = [SLRequest requestForServiceType: SLServiceTypeTwitter requestMethod: SLRequestMethodGET URL: [NSURL URLWithString: @ "https://api.twitter.com/1.1/users/show. json "] parametri: [Dizionario NSDictionaryWithObject: username forKey: @" screen_name "]]; [twitterInfoRequest setAccount: twitterAccount]; // Esecuzione della richiesta [twitterInfoRequest performRequestWithHandler: ^ (NSData * responseData, NSHTTPURLResponse * urlResponse, errore NSError *) dispatch_async (dispatch_get_main_queue (), ^ // Verifica se abbiamo raggiunto il limite reate if ([urlResponse statusCode] == 429 ) NSLog (@ "Limite di frequenza raggiunto"); return; // Controlla se c'è stato un errore se (errore) NSLog (@ "Errore:% @", error.localizedDescription); return; // Verifica se c'è qualche dato di risposta if (responseData) NSError * error = nil; NSArray * TWData = [NSJSONSerialization JSONObjectWithData: responseData options: NSJSONReadingMutableLeaves error: & error]; // Filtra i dati preferiti NSString * screen_name = [(NSDictionary *) TWData objectForKey : @ "screen_name"]; NSString * name = [(NSDictionary *) TWData objectForKey: @ "nome"]; int followers = [[(NSDictionary *) TWData objectForKey: @ "followers_adeguati"] integerValue]; int following = [[ (NSDictionary *) TWData objectForKey: @ "account_amici"] 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"]; // Aggiorna l'interfaccia con i dati caricati nameLabel.text = name; usernameLabel.text = [NSString stringWithFormat: @ "@% @", screen_name]; tweetsLabel.text = [NSString stringWithFormat: @ "% i", tweets]; followingLabel.text = [NSString stringWithFormat: @ "% i", following]; followersLabel.text = [NSString stringWithFormat: @ "% i", followers]; NSString * lastTweet = [[(NSDictionary *) TWData objectForKey: @ "status"] objectForKey: @ "testo"]; lastTweetTextView.text = lastTweet; // Ottieni l'immagine del profilo nel profilo di risoluzione originaleImageStringURL = [profileImageStringURL stringByReplacingOccurrencesOfString: @ "_ normal" withString: @ ""]; [self getProfileImageForURLString: profileImageStringURL]; // Ottieni l'immagine del banner, se l'utente ne ha uno se (bannerImageStringURL) NSString * bannerURLString = [NSString stringWithFormat: @ "% @ / mobile_retina", bannerImageStringURL]; [self getBannerImageForURLString: bannerURLString]; else bannerImageView.backgroundColor = [UIColor underPageBackgroundColor]; ); ]; else NSLog (@ "Nessun accesso concesso"); ];
Questo è un sacco di codice, ma lo spiegherò passo dopo passo.
ACAccountStore * accountStore = [[ACAccountStore alloc] init]; ACAccountType * accountType = [accountStore accountTypeWithAccountTypeIdentifier: ACAccountTypeIdentifierTwitter];
Qui iniziamo a inizializzare un oggetto ACAccountStore che ci consentirà di accedere agli account dell'utente. Successivamente, creiamo un'istanza ACAccountType, chiamiamo il accountTypeWithAccountTypeIdentifier metodo sull'istanza ACAccountStore appena creata, quindi impostare il tipo di account su Twitter. È possibile utilizzare lo stesso metodo se si desidera utilizzare Facebook, ma sarà necessario impostare l'identificativo del tipo di account su ACAccountTypeIdentifierFacebook.
[accountStore requestAccessToAccountsWithType: accountType options: nil completion: ^ (BOOL concesso, errore NSError * if (granted) ];
Qui chiediamo semplicemente all'utente di fornire alla nostra app l'accesso ai propri account Twitter.
NSArray * account = [accountStore accountWithAccountType: accountType]; if (account.count> 0) ACAccount * twitterAccount = [account objectAtIndex: 0];
Qui creiamo una serie di tutti gli account Twitter dell'utente. Controlliamo se l'utente ha account Twitter. In tal caso, creiamo un'istanza ACAccount del primo account Twitter in quell'array. Per semplificare, usiamo il primo account in questo tutorial, ma in un'app reale dovresti dare all'utente la possibilità di selezionare il loro account Twitter preferito nel caso in cui abbiano più di 1.
SLRequest * twitterInfoRequest = [SLRequest requestForServiceType: SLServiceTypeTwitter requestMethod: SLRequestMethodGET URL: [NSURL URLWithString: @ "https://api.twitter.com/1.1/users/show.json"] parametri: [Dizionario NSDictionaryWithObject: username forKey: @ " Nome della schermata"]]; [twitterInfoRequest setAccount: twitterAccount];
Qui creiamo la nostra richiesta, che chiamerà l'API di Twitter. Impostiamo il tipo di servizio su Twitter e il metodo di richiesta su GET. Non vogliamo ricevere informazioni su un utente su Twitter. È inoltre possibile utilizzare i metodi di richiesta POST e DELETE. Con POST, puoi aggiornare un'immagine del profilo o pubblicare un tweet. Con DELETE, puoi eliminare cose dal tuo account. L'URL in questo tutorial sarà: https://api.twitter.com/1.1/users/show.json. Questo URL assicurerà che la richiesta restituisca una varietà di informazioni sull'utente specificato in un formato JSON. Come parametro, aggiungiamo il nome utente inserito per la chiave screen_name, in modo da ottenere le informazioni su quell'utente. Successivamente, impostiamo l'account per la richiesta all'istanza ACAccount.
[twitterInfoRequest performRequestWithHandler: ^ (NSData * responseData, NSHTTPURLResponse * urlResponse, NSError * error) dispatch_async (dispatch_get_main_queue (), ^ if ([urlResponse statusCode] == 429) NSLog (@ "Limite di frequenza raggiunto"); if (errore) NSLog (@ "Errore:% @", error.localizedDescription); return;); ];
Qui effettivamente effettuiamo la richiesta e ci assicuriamo che carichi in modo asincrono, quindi la nostra interfaccia continuerà a essere reattiva durante il caricamento. Lo facciamo con GCD, Grand Central Dispatch. Non entrerò nei dettagli, ma puoi trovare maggiori informazioni a riguardo qui. Quando la richiesta è finita, prima controlliamo se la nostra app non ha raggiunto il limite di velocità. Dopodiché, controlliamo se c'è stato un errore.
if (responseData) NSError * error = nil; NSArray * TWData = [NSJSONSerialization JSONObjectWithData: responseData options: NSJSONReadingMutableLeaves errore: & error];
Qui controlliamo se la richiesta ha restituito alcuni dati di risposta. Se è così, creiamo una matrice dal file JSON restituito.
NSString * screen_name = [(NSDictionary *) TWData objectForKey: @ "screen_name"]; NSString * name = [(NSDictionary *) TWData objectForKey: @ "nome"]; int followers = [[(NSDictionary *) TWData objectForKey: @ "followers_adeguati"] integerValue]; int following = [[(NSDictionary *) TWData objectForKey: @ "friends_count"] integerValue]; int tweets = [[(NSDictionary *) TWData objectForKey: @ "statusescount"] integerValue]; NSString * profileImageStringURL = [(NSDictionary *) TWData objectForKey: @ "profile_image_url_https"]; NSString * bannerImageStringURL = [(NSDictionary *) TWData objectForKey: @ "profile_banner_url"];
Qui filtriamo i dati preferiti, otteniamo il nome dell'utente, screen_name (nome utente), il numero di tweet, follower e persone che seguono. Riceviamo anche gli URL per l'immagine del profilo e il banner.
nomeLabel.text = nome; usernameLabel.text = [NSString stringWithFormat: @ "@% @", screen_name]; tweetsLabel.text = [NSString stringWithFormat: @ "% i", tweets]; followingLabel.text = [NSString stringWithFormat: @ "% i", following]; followersLabel.text = [NSString stringWithFormat: @ "% i", followers]; NSString * lastTweet = [[(NSDictionary *) TWData objectForKey: @ "status"] objectForKey: @ "testo"]; lastTweetTextView.text = lastTweet;
Qui semplicemente aggiorniamo le proprietà del testo delle nostre etichette e la visualizzazione del testo con i dati appena ricevuti e filtrati.
profileImageStringURL = [profileImageStringURL stringByReplacingOccurrencesOfString: @ "_ normal" withString: @ ""]; [self getProfileImageForURLString: profileImageStringURL];
Poiché Twitter utilizza l'url per l'immagine del profilo di dimensioni normali, che è solo 48 per 48 pixel, rimuoviamo la stringa "_normal", in modo che possiamo ottenere l'immagine del profilo originale. Dopo ciò, chiamiamo il getProfileImageForURLString: metodo per scaricare l'immagine del profilo. Creeremo quel metodo in pochi minuti.
if (bannerImageStringURL) NSString * bannerURLString = [NSString stringWithFormat: @ "% @ / mobile_retina", bannerImageStringURL]; [self getBannerImageForURLString: bannerURLString]; else bannerImageView.backgroundColor = [UIColor underPageBackgroundColor];
Qui controlliamo se l'utente ha un banner di profilo. Se è così, aggiorniamo l'URL in modo da ottenere la versione retina mobile del banner, che ha una dimensione di 640x320 pixel. Dopo ciò, chiamiamo il getBannerImageForURLString: metodo per scaricare il banner. Se l'utente non ha un banner di profilo, diamo a bannerImageView un colore di sfondo.
Ora aggiungi i seguenti metodi sotto il ottenere informazioni metodo per scaricare il profilo e l'immagine del banner:
- (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];
L'ultima cosa che dobbiamo fare per completare la nostra app è chiamare il ottenere informazioni metodo nel viewDidLoad metodo, quindi vai al viewDidLoad metodo e aggiungere la seguente riga nella parte inferiore di tale metodo:
[auto getInfo];
Ora che abbiamo terminato la nostra app, fai clic su Build and Run o premi ⌘R per testare l'app. Se inserisci un nome utente da qualcuno su Twitter, dovresti vedere un mini profilo con informazioni su quell'utente.
Grazie per aver letto questo tutorial sulla creazione di una richiesta di Twitter con il nuovo framework sociale. Se vuoi saperne di più sull'API di Twitter, ti suggerisco di dare un'occhiata al documento ufficiale. Spero che questo tutorial ti sia piaciuto e se hai domande o commenti su questo tutorial, lasciateli nella sezione commenti qui sotto!
Accentsconagua