Logo facebook La condivisione sui Social Network di informazioni, pensieri, fotografie e non solo è divenuto ormai un fattore di primaria importanza, che certo non possiamo trascurare neanche durante lo sviluppo di applicazioni iPhone e iPad. Facebook, Twitter, YouTube e recentemente Google + sono divenute, infatti, parole di uso comune, conosciute in tutto il mondo. Oggi, con una revisione completa di questo nostro tutorial di programmazione iOS, vedremo come integrare facebook nell nostre applicazioni iPhone e iPad, sfruttando le Graph API di facebook, molto più versatili e facili da utilizzare una volta capite le dinamiche rispetto al vecchio metodo di integrazione ormai superato, in modo tale da permettere agli utenti delle nostre app di condividere alcune informazioni direttamente dall’applicazione stessa alla propria bacheca personale.

Creare una nuova applicazione su Facebook

La prima cosa da fare è quella di creare la una nuova applicazione su Facebook che verrà associata alla nostra applicazione in via di sviluppo. Per far ciò accediamo semplicemente al pannello applicazioni dell’area developer di Apple (è richiesta la registrazione gratuita come developer su facebook):



Clicchiamo quindi su “+ Crea applicazione” e inseriamo il nome della nostra applicazione. Selezioniamo ora la lingua e accettiamo i termini di utilizzo. Inseriamo il codice captcha e le informazioni di base, infine salviamo.

L’applicazione su Facebook è pronta, l’unica cosa che ci servirà è la “chiave API” generata, che troviamo nel pannello delle nostre app.

Scaricare l’SDK facebook – Documentazione e progetto di esempio

Bene, abbiamo appena creato l’applicazione sul nostro account facebook, ora dobbiamo procedere con il download dell’SDK di facebook.

Per fare questo andiamo sulla sezione Mobile Apps del sito developer di facebook e cerchiamo la riga (poco dopo l’inizio del documento) con scritto “Clone the GitHub repository: git clone git://github.com/facebook/facebook-ios-sdk.git”, quindi clicchiamo sul link “GitHub repository” al suo interno. Si aprirà la pagina di GitHub con il progetto.



Clicchiamo su “downloads” e scarichiamo il progetto in formato .zip. Scompattiamolo ed entriamo nella cartella.



Al suo interno troveremo:

  • una cartella “sample”, contenente un esempio di applicazione;
  • la cartella “src”, ovvero l’SDK facebook vero e proprio;
  • una cartella “test” contenente i test case dell’SDK (che al momento a noi non interessa)

Per quanto riguarda la documentazione sul link precedente troverete anche una piccola guida su come utilizzare ed implementare le API. Questa guida ufficiale, a mio parere, pecca un po’ nell’importazione del progetto, parte che andremo a vedere insieme fra pochissimo.

Creare un nuovo progetto ed importare l’SDK facebook al suo interno

Finalmente iniziamo a mettere le mani sul nostro progetto. Per prima cosa creiamo una cartella sulla scrivania e diamole un nome, la nostra l’abbiamo chiamata “devAPPFacebook”. Questa cartella sarà il contenitore del nostro progetto da qui in avanti.

Apriamo Xcode, creiamo un nuovo progetto di tipo view-based e andiamo a salvarlo dentro la cartella appena creata.

Ritorniamo alla cartella “Facebook-ios-sdk” scaricata precedentemente da GitHub, apriamola e trasciniamo tutta la cartella “src” dentro la cartella principale del nostro progetto (devAPPFacebook). Dovremmo aver ottenuto, a questo punto, una cartella con un contenuto simile a quello mostrato in figura:



Perfetto, torniamo ad Xcode e tenendo aperta la finestra del finder con la cartella “src” trasciniamo all’interno del nostro progetto tutti i file tranne “facebook-ios-sdk.xcodeproj” e “facebook-ios_sdk_Prefix.pch”. Quando ci verrà chiesto se vogliamo copiare i file diciamo di no (niente spunta su “copy items into destination folder..”), clicchiamo quindi su finish e dovremmo ottenere una gerarchia simile alla seguente:



Portiamoci ora su “Build setting” del nostro progetto e cerchiamo la sezione “Search Path”. Facciamo doppio click su “Header Search Path”, quindi clicchiamo sul “+” e aggiungiamo questa stringa:

../src

Spuntiamo la voce “recursive” e proseguiamo.



Questo farà si che il nostro progetto sappia che dovrà cercare eventuali file di importazione della cartella “src” ricorsivamente.

Esistono molti modi di importare librerie e classi nei nostri progetti, noi ne abbiamo visto uno qui sopra, che è quello consigliato da facebook. Potreste provare a trascinare direttamente i file all’interno del progetto, senza creare la cartella “src” prima e modificare successivamente l’header “path file”. Molto probabilmente tutto funzionerà comunque. Insomma, ogni libreria ha il suo metodo di importazione quindi non posso affermare che questo sia il metodo migliore o l’unico, semplicemente ho preferito seguire le linee guida proposte da facebook.

Pubblicare un post sulla bacheca Facebook direttamente dalla nostra applicazione iOS

Eccoci finalmente alla parte più importante (e interessante) del nostro tutorial, ovvero vedremo ora come si usano queste Graph API, a parer mio, molto semplici da usare. Grazie infatti a poche righe di codice saremo in grado di creare quanto necessario, ovviamente una volta comprese le dinamiche di funzionamento e verificato il significato di tutti i parametri tramite la documentazione ufficiale facebook.

Importiamo “FBconnect.h” e settiamo i delegati:

1
2
3
4
5
6
7
8
9
10
11
12
13

#import <UIKit/UIKit.h>
#import "FBConnect.h"
@interface devAPPt100ViewController : UIViewController<FBRequestDelegate, FBDialogDelegate, FBSessionDelegate>
{
    Facebook* _facebook;
    NSArray* _permissions;
}
@property(readonly) Facebook *facebook;
 
-(void)loginToFacebook:(id)sender;
-(void)publishStream:(id)sender;
-(void)uploadFoto:(id)sender;
@end

Vediamo cosa abbiamo appena fatto. Niente di complicato, abbiamo importato “FBConnect”, aggiunto i relativi delegati, dichiarato un oggetto di tipo Facebook e un array che conterrà i permessi della nostra applicazione e abbiamo infine dichiarato tre metodi che useremo rispettivamente per il login, per pubblicare un post e fare eventuale upload di una foto.

Passiamo ora alla parte più importante: l’implementazione dei metodi. Iniziamo creando una stringa statica che conterrà la nostra chiave API (quella ottenuta in fase di creazione della nuova app su facebook descritta ad inizio tuturial) e sintetizziamo l’oggetto facebook:

1
2
3
4
5
6

#import "devAPPt100ViewController.h"
 
static NSString* kAppId = @"251336734895447";
 
@implementation devAPPt100ViewController
@synthesize facebook = _facebook;

Passiamo al metodo “viewDidLoad” e modifichiamolo come segue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
 
    _permissions =  [[NSArray arrayWithObjects:
                      @"read_stream", @"publish_stream", @"offline_access",nil] retain];
 
    UIButton * btnLogin = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btnLogin.frame = CGRectMake(100, 100, 70, 30);
    [btnLogin setTitle:@"Login" forState:UIControlStateNormal];
    [btnLogin addTarget:self action:@selector(loginToFacebook:) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:btnLogin];
 
}

Qui abbiamo inizializzato un array con gli stream che la nostra app andrà ad utilizzare.
Apriamo una piccola parentesi su questi “stream”. In pratica (e vi sarà capitato sicuramente usando applicazioni terze che si interfacciano a facebook) quando volete postare da un’app specifica, la prima volta, vi viene chiesto di autorizzare l’applicazione stessa ad accedere ad alcuni contenuti del vostro profilo fb. Questi sono proprio definiti dagli stream. Il primo vi permetterà di avere le informazioni dell’utente ed i post pubblicati, il secondo di poter pubblicare post, commentare i post e mettere il famoso “mi piace” sui commenti, mentre il terzo vi permetterà l’accesso al profilo Facebook anche se l’utente non è connesso (per pubblicare link, ecc). Per ulteriori informazioni vi rimando a questo link che illustra e spiega il significato di tutti i tipi di stream esistenti.

Fatto questo occorrerà aggiungere un pulsante per fare il login dall’applicazione.

Vediamo il metodo di Login:

1
2
3
4
5

-(void)loginToFacebook:(id)sender
{
    _facebook = [[Facebook alloc] initWithAppId:kAppId];
    [_facebook authorize:_permissions delegate:self];
}

Queste due righe sono semplicissime per noi dev e hanno il compito di realizzare il login della nostra app.
Allochiamo l’oggetto Facebook con la chiave API che avevamo copiato precedentemente e chiediamo all’utente di autorizzare la nostra applicazione a pubblicare post e di accedere al nostro profilo.

Se provate ad eseguire l’applicazione a questo punto vedrete che, cliccando sul pulsante, si aprirà una view in cui vi viene chiesto di inserire “nome utente” e “password” per accedere al vostro profilo facebook e successivamente di accettare le condizioni dell’app e autorizzarla.

Nella seconda riga, passiamo come parametro l’array con gli stream e ovviamente il nostro delegato, così facendo avremo tre metodi che rispondo al login:

1
2
3

-(void)fbDidLogin
-(void)fbDidLogout
-(void)fbDidNotLogin:(BOOL)cancelled

Come da titolo ci notificano quando il login viene effettuato, quando l’utente si slogga oppure quando l’utente cancella la pagina di login e quindi decide di non accedere.

Passiamo all’implementazione del primo metodo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

-(void)fbDidLogin
{
    NSLog(@"utente loggato");
 
    UIButton * btnPost = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btnPost.frame = CGRectMake(100, 150, 70, 30);
    [btnPost setTitle:@"Post" forState:UIControlStateNormal];
    [btnPost addTarget:self action:@selector(publishStream:) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:btnPost];
 
    UIButton * btnUpload = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btnUpload.frame = CGRectMake(100, 200, 70, 30);
    [btnUpload setTitle:@"Upload" forState:UIControlStateNormal];
    [btnUpload addTarget:self action:@selector(uploadFoto:) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:btnUpload];
}

Semplicemente abbiamo aggiunto due bottoni, uno per pubblicare un Post, l’altro per fare l’upload di una foto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

-(void)publishStream:(id)sender
{
    SBJSON *jsonWriter = [[SBJSON new] autorelease];
 
	//link del post
	NSArray* actionLinks = [NSArray arrayWithObjects:[NSDictionary dictionaryWithObjectsAndKeys: 
														   @"devAPP.it",@"text", //nome link
														   @"http://www.devapp.it/",@"href", //collegamento link
														   nil], nil];
 
 
	NSString *actionLinksStr = [jsonWriter stringWithObject:actionLinks];
 
    //immmagine post
	NSDictionary* media = [NSDictionary dictionaryWithObjectsAndKeys:
						   @"image", @"type", //tipo di media allegato (immagine)
						   @"http://www.devapp.it/wordpress/wp-content/uploads/logo_devAPP.png", @"src", //link dell'immagine
						   @"http://www.devapp.it/", @"href", nil]; //link a cui porta l'immagine se cliccata
	NSArray * arraymedia = [NSArray arrayWithObject:media];
 
 
 
	//collegamenti dell'immagine del post
	NSDictionary* attachment = [NSDictionary dictionaryWithObjectsAndKeys:
								@"devAPP", @"name", //nome che compare vicino all'immagine
								arraymedia, @"media",
								@"Tramite devAPP.it per iphone", @"caption", //caption (parte in piccolo sotto l'iconcina della nostra app
								@"http://www.devapp.it/", @"href", nil];//link a cui posrta caption
 
	NSString *attachmentStr = [jsonWriter stringWithObject:attachment];
 
 
    //parametri post
	NSMutableDictionary* params = [NSMutableDictionary dictionaryWithObjectsAndKeys:
								   kAppId, @"api_key", //chiave api
								   @"Share on Facebook",  @"user_message_prompt", //default. Si può modificare ma non ha rilievo per il post
								   @"Post di prova per devAPP", @"message", //messaggio di post (è l'unica cosa che l'utente può modificare prima del post)
								   actionLinksStr, @"action_links",
								   attachmentStr, @"attachment",
								   nil];
 
	[_facebook dialog: @"stream.publish"
         andParams: params
       andDelegate:self]; 
}

In questo metodo creiamo un oggetto JSON che ci servirà per contenere tutte le info del nostro Post.
Ho commentato ogni riga per farvi capire meglio come funzionano i parametri da utilizzare, naturalmente fate le opportune prove prima di rilasciare un applicazione che utilizzi Facebook.

  • Action link: è il link che compare vicino a Commenta
  • media: immagine che alleghiamo al nostro post (può essere anche un video). Comprende il tipo di media aggiunto, il link del media e il link a cui porta il media se cliccato
  • attachment: è il contenitore della nostra immagine con il titolo, il sottotitolo e il link a cui porta il sottotitolo
  • params: il contenitore di tutti i parametri definiti finora. Comprende la nostra chiave API, il messaggio visualizzato all’utente, i vari link, il media aggiunto e infine il messaggio vero e proprio

Nell’ultima riga diciamo all’oggetto facebook di utilizzare lo stream di pubblicazione con i parametri passati e sarà proprio quest’oggetto che si occuperà della pubblicazione del post.



Come effettuare l’upload di foto nel profilo facebook

Vediamo ora come effettuare l’upload di foto su facebook direttamente dalle nostre applicazioni iPhone e iPad. Andiamo a implementare il metodo “uploadFoto” dichiarato precedentemente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

-(void)uploadFoto:(id)sender
{
    NSString *path = @"http://www.devapp.it/wordpress/wp-content/uploads/logo_devAPP.png";
    NSURL *url = [NSURL URLWithString:path];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *img  = [[UIImage alloc] initWithData:data];
 
    NSMutableDictionary *params = [NSMutableDictionary dictionaryWithObjectsAndKeys:
                                   img, @"picture",
                                   nil];
 
    [_facebook requestWithGraphPath:@"me/photos"
                          andParams:params
                      andHttpMethod:@"POST"
                        andDelegate:self];
 
    [img release];
}

Questa porzione di codice è molto più semplice, in pratica inseriamo il link di un’immagine e diciamo che quei parametri devono essere inseriti nella sezione foto dell’account loggato con il metodo POST. Una precisazione: questo metodo non contiene alcuna conferma da parte dell’utente.

Anche qui abbiamo delle notifiche per l’avvenuto successo dell’upload:

1
2
3

- (void)request:(FBRequest *)request didLoad:(id)result
- (void)request:(FBRequest *)request didFailWithError:(NSError *)error
- (void)dialogDidComplete:(FBDialog *)dialog

Che potete implementare per segnalare all’utente il successo o meno dell’upload di una foto.

Considerazioni finali

Come avete visto nell’esempio proposto in questo tutorial, non è poi così complesso postare un commento o fare upload di contenuti sul profilo utente facebook di chi utilizza la nostra applicazione. Potremo ovviamente andare oltre e ottenere particolari informazioni sull’utente e i suoi amici, ma per questo vi consiglio di guardare gli esempi forniti da facebook e la documentazione ufficiale.

Ne approfitto, prima di lasciarvi, per un’ulteriore piccola precisazione: quando l’oggetto facebook fa il login, controlla che sia installata l’app facebook per eventualmente prendere il suo token o, in alternativa, avvia safari per far eseguire il login all’utente. Sinceramente non ho capito molto questa mossa da parte delle API e la prima volta che ho avviato l’applicazione con il simulatore (non avendo installata l’app facebook) ha avviato safari crashando dopo aver fatto il login. Se vi dovesse succedere qualcosa di analogo andate sulla classe “Facebook.m” e nel metodo:

1

- (void)authorizeWithFBAppAuth:(BOOL)tryFBAppAuth safariAuth:(BOOL)trySafariAuth

commentate l’if come mostrato nel seguente codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

- (void)authorizeWithFBAppAuth:(BOOL)tryFBAppAuth
                    safariAuth:(BOOL)trySafariAuth {
  NSMutableDictionary* params = [NSMutableDictionary dictionaryWithObjectsAndKeys:
                                 _appId, @"client_id",
                                 @"user_agent", @"type",
                                 kRedirectURL, @"redirect_uri",
                                 @"touch", @"display",
                                 kSDKVersion, @"sdk",
                                 nil];
 
  NSString *loginDialogURL = [kDialogBaseURL stringByAppendingString:kLogin];
 
  if (_permissions != nil) {
    NSString* scope = [_permissions componentsJoinedByString:@","];
    [params setValue:scope forKey:@"scope"];
  }
 
  if (_localAppId) {
    [params setValue:_localAppId forKey:@"local_client_id"];
  }
 
  // If the device is running a version of iOS that supports multitasking,
  // try to obtain the access token from the Facebook app installed
  // on the device.
  // If the Facebook app isn't installed or it doesn't support
  // the fbauth:// URL scheme, fall back on Safari for obtaining the access token.
  // This minimizes the chance that the user will have to enter his or
  // her credentials in order to authorize the application.
  BOOL didOpenOtherApp = NO;
  /*UIDevice *device = [UIDevice currentDevice];
  if ([device respondsToSelector:@selector(isMultitaskingSupported)] && [device isMultitaskingSupported]) {
    if (tryFBAppAuth) {
      NSString *scheme = kFBAppAuthURLScheme;
      if (_localAppId) {
        scheme = [scheme stringByAppendingString:@"2"];
      }
      NSString *urlPrefix = [NSString stringWithFormat:@"%@://%@", scheme, kFBAppAuthURLPath];
      NSString *fbAppUrl = [FBRequest serializeURL:urlPrefix params:params];
      didOpenOtherApp = [[UIApplication sharedApplication] openURL:[NSURL URLWithString:fbAppUrl]];
    }
 
    if (trySafariAuth && !didOpenOtherApp) {
      NSString *nextUrl = [self getOwnBaseUrl];
      [params setValue:nextUrl forKey:@"redirect_uri"];
 
      NSString *fbAppUrl = [FBRequest serializeURL:loginDialogURL params:params];
      didOpenOtherApp = [[UIApplication sharedApplication] openURL:[NSURL URLWithString:fbAppUrl]];
    }
  }*/
 
  // If single sign-on failed, open an inline login dialog. This will require the user to
  // enter his or her credentials.
  if (!didOpenOtherApp) {
    [_loginDialog release];
    _loginDialog = [[FBLoginDialog alloc] initWithURL:loginDialogURL
                                          loginParams:params
                                             delegate:self];
    [_loginDialog show];
  }
}

Così facendo verrà sempre chiamato il modulo di login con la webView.

Per qualsiasi problema vi invito a postare direttamente sul nostro forum, sarà più semplice per noi aiutarvi ;)

Buon lavoro e alla prossima!
Andrea Cappellotto

Se avete problemi con il progetto presentato, questo è il link per scaricare il nostro esempio completo.