Con questo nuovo tutorial di programmazione iPhone vedremo come aggiungere video di YouTube nelle nostre applicazioni che siano in grado, una volta visualizzati, di chiudere il player video e tornare al nostro programma. Non sfrutteremo quindi l’app nativa YouTube dei nostri iPhone (iPad) tramite “sharedApplication“, ma vedremo come, con poche righe di codice, potremo gestire il tutto all’interno della nostra applicazione. Per far ciò sfrutteremo un’UIWebView. Precisiamo che non andremo a scaricare il video da qualche parte nel nostro device, ma creeremo una sorta di link, che ci permetterà di lasciar gestire a YouTube la raccolta dei video, e a noi di avviarli, visualizzarli e tornare alle nostre app. Vediamo come fare.

Creiamo il progetto

Apriamo Xcode e creiamo un nuovo progetto. Dall’elenco dei template disponibili selezioniamo “View-based Application”, se state utilizzando l’ultima versione di Xcode compatibile anche con iPad (3.2.2) selezionate “iPhone” dall’opzione “Product”, e proseguiamo. Diamo un nome al nostro progetto, ad esempio “myYouTube”, scegliamo una posizione dove salvare il progetto (ad esempio sulla scrivania) e clicchiamo infine su “Save”.

Il progetto è bello che pronto. Apriamo il file di intestazione “myYouTube.h” e andiamo a dichiarare gli oggetti che ci servono:

#import 

@interface myYouTubeViewController : UIViewController {
	
IBOutlet UIWebView *webView;
	
}

@property (nonatomic, retain) IBOutlet UIWebView *webView;

@end

Come vedete tutto semplicissimo, abbiamo dichiarato semplicemente un oggetto IBOutlet (che collegheremo quindi ad un altro disegnato a breve tramite Interface Builder) di tipo UIWebView chiamato webView.

Salviamo e passiamo alla creazione della semplicissima interfaccia grafica.

Disegnamo l’interfaccia grafica

Facciamo doppio click sul file “myYouTubeViewController.xib” e si aprirà Interface Builder. Trasciniamo all’interno della View un’UIWebView, clicchiamo quindi su “File ‘s Owner” e colleghiamo l’oggetto appena disegnato con webView dichiarato precedentemente via Xcode. Nient’altro. Il risultato è simile a quanto mostrato in figura:

Interfaccia Grafica disegnata in IB

Possiamo a questo punto salvare e chiudere Interface Builder.

Implementiamo il codice secondo le specifiche YouTube

Apriamo ora il file di implementazione “myYouTube.m” e modifichiamo il codice al suo interno come segue:

//Aggiungiamo l'istruzione synthesize per la nostra webView
@synthesize webView;

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];

	NSString *linkVideo = @"http://www.youtube.com/watch?v=o3IKis-MJO4";
	
	NSString *htmlString = [NSString stringWithFormat:@"\
							\
							\
							\
							\
							", linkVideo]; 
	
	// Load the html into the webview
	[webView loadHTMLString:htmlString baseURL:nil];
}

Anche qui tutto semplice. Abbiamo inserito la classica istruzione @synthesize per poter usare tutte le proprietà della nostra webView. Successivamente abbiamo dichiarato un oggetto di tipo NSString chiamato “linkVideo” che useremo per salvare l’URL completo del nostro video (preso appunto da YouTube). Abbiamo quindi creato un’altra stringa “htmlString” contenente l’HTML necessario a mostrare l’anteprima all’interno di webView con il tasto “play” al centro di essa, che ci permetterà di avviare il video. Si tratta di semplice HTML, scritto secondo le specifiche imposte e mostrate nel YouTube API Blog, il quale spiega i due metodi per implementare video YouTube nelle nostre app, ovvero tramite sharedApplication o quest’altro che vi stiamo presentando.

Fate solo attenzione al parametro “src” all’interno del tag “embed” che contiene un %@ sfrutteremo questo a fine istruzione per concatenargli l’URL del video salvato in “linkVideo”.

Fatto ciò non ci resta che avviare tutta la stringa al completo all’interno della nostra webView, sfruttando questa volta, loadHTMLString, in quanto stiamo caricando proprio del codice HTML:

[webView loadHTMLString:htmlString baseURL:nil];

Anche l’implementazione è conclusa, possiamo salvare e testare la nostra applicazione.

Sappiate che il test andrà fatto su device, in quanto su simulatore riusciremo a visualizzare esclusivamente il “simpaticissimo” mattoncino blu dei lego. Eccovi i due screenshot dell’app in esecuzione sia su iPhone Simulator che su iPhone:

Prova su iPhone Simulator

Prova su dispositivo iPhone

Considerazioni finali

Come potrete facilmente intuire farà sicuramente piacere a qualsiasi utente, tornare automaticamente all’app di partenza dopo la visualizzazione di un video YouTube. Questo esempio è tutto sommato molto semplice, ma provate ad immaginare di applicare quanto appreso ad un UITable, contenente magari tutti gli ultimi video inseriti su un canale specifico. Sarebbe davvero fastidioso, per qualunque utente del nostro programma, se per ogni video visualizzato gli toccasse passare dall’app nativa YouTube per poi ripassare alla nostra.. o forse.. probabilmente, finirebbe col non tornarci più e seguire il canale direttamente dall’app nativa. Quindi anzichè dare un servizio in più, se usassimo sharedApplication, rischieremmo solo di avere un utente in meno.

Alla prossima.