Développez votre première application pour iOS

Vous le savez peut-être, il existe des milliers de frameworks prêts à l'emploi. Dans ce chapitre nous allons voir comment utiliser les CocoaPods et plus particulièrement, nous allons permettre à nos utilisateurs de se connecter via leurs comptes Facebook.

C'est simplement un gros bout de code.

Un framework est constitué d'un ensemble de méthodes, de classes ou d'extensions que vous pouvez intégrer dans votre projet en un clin d'œil.

De développeurs qui ont trouvé un algorithme utile, une manière plus simple de gérer les vues, ou encore qui ont travaillé sur un outil particulier, une palette de couleurs, un gestionnaire de navigation, etc.

Ça peut vraiment être tout et n'importe quoi.

On va utiliser un framework pour créer une connexion via facebook sur notre appli.

Installez le framework CocoaPods

CocoaPods est défini par ses développeurs comme un gestionnaire de dépendances. Il contient plus de 18 000 librairies ! CocoaPods est en fait un outil écrit en Ruby qui installe directement les librairies dans votre projet et résout les problèmes de dépendances.

Vous pouvez installer CocoaPods manuellement si vous le souhaitez, mais il existe un plugin simple pour les utiliser.

Pour ajouter des plugins, on va installer un autre outil appelé le "package manager". N'hésitez pas si vous voulez en savoir plus. Pour installer le package manager, ouvrez une fenêtre du terminal (Launch Pad > Terminal) et copiez-collez la ligne suivante : curl -fsSL https://raw.github.com/alcatraz/Alcatraz/master/Scripts/install.sh | sh 

Enregistrez vos travaux dans Xcode et fermez-le complètement. Redémarrez Xcode et voilà, le package manager est installé ! :)

Installons maintenant CocoaPods pour ajouter des frameworks.

Rendez-vous dans Window > Package Manager :

Dans la barre de recherche, tapez "cocoapo" :

Cliquez sur install et redémarrez Xcode.

Allez dans Product > CocoaPods > Create/Edit Podfile :

Sélectionnez tout, et remplacez par

platform :ios, "8.0"

use_frameworks!

target 'FirstApp' do

pod "FBSDKCoreKit";
pod "FBSDKLoginKit";
pod "FBSDKShareKit";
pod "FBSDKMessengerShareKit";

end

• La 1re ligne spécifie la version d'iOS.

• La 2e indique d'utiliser les frameworks des pods que l'on va écrire.

• ""target 'XXX' do (…)  end"" indique dans quelle partie de l'appli nous ajoutons les frameworks.

• Enfin, pod "XXX" est l'instruction d'ajout du pod. La documentation de Facebook nous indique d'ajouter ces 4 frameworks pour utiliser Facebook dans notre appli.

Les frameworks ne sont pas encore ajoutés. On doit exécuter la commande "pod install" qui va lire le fichier de pods et récupérer les frameworks depuis CocoaPods.

Allez dans Product > CocoaPods > Install Pods :

Attendez que tout s'installe et lorque Xcode vous demande si vous voulez rouvrir votre projet, cliquez sur "Yes".

Quand le workspace s'ouvre, vous voyez :

À partir de maintenant, vous devrez ouvrir votre projet à l'aide du workspace et non du projet "First App". Sinon, vous n'aurez pas accès aux librairies que vous avez ajoutées.

Ok, les librairies (ou SDK) sont installées dans notre projet !

Configurez une connexion à Facebook dans votre appli

Pour qu'une application puisse utiliser les services de Facebook, vous devez vous inscrire sur leur plateforme (même si votre compte est factice).

Connectez-vous à https://developers.facebook.com/ et entrez vos identifiants, si vous en avez.

En haut à droite, dans "Mes Apps",

cliquez sur "Ajouter une app", choisissez iOS et entrez le nom de votre appli, puis cliquez sur "Create new Facebook App ID".

Entrez une adresse email valide et sélectionnez une catégorie.

Bien, on a un identifiant d'appli, on va enfin pouvoir utiliser les services de Facebook dans notre appli. Vous arrivez sur la page Quick Start :

Dans la partie Configure :

Il y a deux morceaux de code. C'est du XML, le code que vous utiliser pour votre fichier Info.plist. Vous allez copier le premier bout de code :

Retournez dans votre projet, faites un clic droit sur "Info.plist" > Open As > Source Code :

À la fin du fichier, avant le dernier "</dict>", collez le code à l'emplacement indiqué ci-dessous :

Faites exactement la même chose à la suite du premier pour le deuxième bout de code :

Une dernière couche de configuration et on y est : retournez dans Xcode, Même si on a 2 projets, on ne s'intéressera (pour écrire du Swift) qu'au projet "First App".

Allez dans AppDelegate.swift, importez leFBSDKCoreKitet remplacez

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.
    return true
}

par

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.
    FBSDKApplicationDelegate.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions)
    return true
}

Et ajoutez :

func application(application: UIApplication, openURL url: NSURL, sourceApplication: String?, annotation: AnyObject) -> Bool {
    return FBSDKApplicationDelegate.sharedInstance().application(application, openURL: url, sourceApplication: sourceApplication, annotation: annotation)
}

didFinishLaunchWithOptionsest appelée lorsque l'appli a presque fini de charger et est prête à démarrer. Ça permet d'initialiser les services de Facebook.
openURLest appelée lorsque l'application essaie d'ouvrir une URL. Cela permet à Facebook de gérer la connexion par exemple.

Allez, fini pour la config !

Créez une page de login à Facebook

On va créer une page de login. => Clic droit sur le dossier "controllers" > New File… > Swift > Login.swift

Pour utiliser Facebook, on va importerFBSDKLoginKitet implémenter un nouveau protocole :  FBSDKLoginButtonDelegate(en gros, le délégué du bouton login).

import UIKit
import FBSDKLoginKit

class Login : UIViewController, FBSDKLoginButtonDelegate {
}

On a deux méthodes pour se connecter via Facebook, ici on va voir la plus simple. Normalement, Xcode indique une erreur car il manque deux méthodes pour correspondre au protocoleFBSDKLoginButtonDelegate. Ajoutez les méthodesloginButton(_:,didCompleteWithResult)etloginButtonDidLogOut.

La première méthode ("loginButton(…)") va être appelée lors d'un clic sur leFBSDKLoginButtonconcerné. On va donc en créer un et indiquer son délégué dansviewDidLoad():

override func viewDidLoad() {
    super.viewDidLoad()

    //Bouton de login de Facebook
    let bLogin = FBSDKLoginButton()
    //On le centre au milieu du controller
    bLogin.center = self.view.center
    //On indique les "permissions" de facebook (ici, permissions de base)
    bLogin.readPermissions = ["public_profile", "email"]
    //On lui donne son délégué
    bLogin.delegate = self
    //Et on l'ajoute à notre vue
    self.view.addSubview(bLogin)
}

Ah oui, les permissions… les permissions c'est ce que vous avez dans toutes les applis qui se connectent via Facebook ("Cette application aura accès à votre profil public, vos amis, …"). Lorsque vous ne souhaitez pas récupérer d'info particulière, tout va bien. Mais si vous souhaitez récupérer la liste d'amis, ou les photos, par exemple, Facebook devra vérifier l'usage que fait votre application de ces données. Bon, nous ne sommes pas concernés. Voici la liste des permissions que vous pourriez demander à un utilisateur.

Voilà c'est tout, maintenant, quand l'utilisateur cliquera sur le bouton de login, l'appli affichera la page de connexion de Facebook.

Maintenant nous allons gérer les actions de l'utilisateur (l'utilisateur peut se connecter mais il peut aussi annuler la connexion et revenir en arrière. C'est dansloginButton(_:,didCompleteWithResult)que ça va se passer.

• Vous avez pu remarquer qu'il y avait un paramètre "error" dans la méthodeloginButton. Donc la 1re étape va être de regarder si une erreur existe en regardant si error est nil. Si elle est nil, on continue.

• Ensuite, on a un paramètreresult. result a une propriété "isCancelled" qui est vraie si l'utilisateur a cliqué sur "Cancel". Donc on peut déjà savoir si l'utilisateur a cliqué sur cancel.

• Si ni erreur, ni cancel, on continue : on peut connaître les permissions acceptées par l'utilisateur en récupérantresult.grantedPermissionset en regardant s'il contient "email". Allez je vous aide :if result.grantedPermissions.contains("email")

• Bien, l'utilisateur est connecté, il n'y a pas d'erreur et on a la permission qu'on voulait, on peut continuer et lancer la suite.

Vous savez maintenant ajouter une librairie à votre projet et connectez vos utilisateurs via leurs comptes Facebook !

P.-S. 

Si vous êtes un peu perdus 

• Dans mon storyboard, ajoutez un nouveau controller en lui donnant la classe Login. Ajoutez-lui la flèche de "First Responder"

• Sélectionnez le navigation controller et donnez-lui l'identifier "nav".

• Dans Login.swift : 

func loginButton(loginButton: FBSDKLoginButton!, didCompleteWithResult result: FBSDKLoginManagerLoginResult!, error: NSError!) {
    if error != nil {   // Erreur
        print(error)
    } else {            // Pas d'erreur
        if result.isCancelled { // Annulation de la connexion
            print("L'utilisateur a annule la connexion")
        } else {                //Connexion OK
            if result.grantedPermissions.contains("email") { // Connexion OK, l'utilisateur a accepté la permission
                print("l'utilisateur s'est connecté avec son compte facebook")
                //Récupérer les infos d'un utilisateur
                FBSDKGraphRequest(graphPath: "me", parameters: ["fields": "email"]).startWithCompletionHandler({ (connection, result, error) -> Void in
                        if error == nil { // Pas d'erreur
                            if let userEmail : NSString = result.valueForKey("email") as? String { // Si l'email existe
                                print("Son email est : \(userEmail)")
                            }
                        }
                })

                //On récupère Main.storyboard
                let storyboard = UIStoryboard(name: "Main", bundle: nil)

                //On crée une instance du Navigation Controller à partir du storyboard
                let nav = storyboard.instantiateViewControllerWithIdentifier("nav") as! UINavigationController

                //On ajoute le nouveau controller
                presentViewController(nav, animated: true, completion: nil)
            }
        }
    }
}

Petits Plus avec Facebook 

Vous pouvez voir si l'utilisateur est déjà connecté :

DansviewDidAppear, regardez siFBSDKAccessToken.currentAccessToken()est nil. Si oui, créez un bouton de login, sinon, l'utilisateur est connecté, présentez le navigation controller. :)

Vous pouvez déconnecter votre utilisateur depuis n'importe où en utilisantFBSDKLoginManager().logOut(). Dans ma classe accueil, j'ai créé un autre bar button item qui appelle cette fonction :

@IBAction func bLogμOut(sender : UIBarButtonItem) {
    FBSDKLoginManager().logOut()
    navigationController?.dismissViewControllerAnimated(true, completion: nil)
}