Share
Bienvenue à la deuxième d'une série de didacticiels en deux parties sur la création d'applications sociales natives pour les appareils mobiles. Dans la première partie, nous avons créé une application de base utilisant la bibliothèque d'authentification Facebook pour permettre à un utilisateur de se connecter avec ses informations d'identification Facebook. Le résultat était l'accès aux données Facebook de l'utilisateur via un jeton de session que nous avons reçu lorsque l'utilisateur s'est connecté..
Une fois que nous avons ce jeton, l’API Graph Facebook peut être utilisée pour créer diverses applications. Lorsqu'un utilisateur final se connecte, l'application est responsable de la transmission des autorisations nécessaires à son exécution. L'utilisateur peut autoriser ou non l'application à accéder à ses données depuis Facebook. Cela tente au moins d'informer l'utilisateur final de ce qu'une application peut faire avec ses données dans l'espoir de créer davantage de transparence..
Pour la deuxième partie de ce didacticiel, nous allons modifier notre application Facebook mobile d'origine (qui, il est vrai, n'a pas fait grand chose), afin de créer un collage soigné des images de profil des amis d'un utilisateur. L'API FB Graph est principalement basée sur des objets JSON. Nous allons donc utiliser une bibliothèque d'encapsuleur Lua JSON qui peut être trouvée sur l'échange de code Ansca Mobile..
Pour commencer, nous devons ajouter l'inclusion de bibliothèque suivante en haut de notre fichier main.lua:
Accentsconagua
require ("Json") Encore une fois, cette bibliothèque peut être trouvée dans l'échange de code sur anscamobile.com. Une fois inclus, nous avons accès aux méthodes de la bibliothèque via une variable appelée Json. Plus sur cela plus tard.
Auparavant, dans notre méthode d'écoute, nous écoutions les événements déclenchés à partir de la boîte de connexion Facebook qui était affichée en cliquant sur le bouton dans l'écran central. Une fois la connexion établie, nous avons accédé à un objet de données personnel via l’API pour prouver que la connexion était établie. Ce code peut être vu ici:
if ("login" == event.phase) alors facebook.request ("moi") fin Étant donné que notre application vise principalement à accéder aux images de profil de nos amis, nous allons modifier le code pour extraire l'objet de données "Amis" de l'API de la même manière. Nous allons remplacer l'extrait de code ci-dessus par ce qui suit:
if ("login" == event.phase) puis facebook.request ("me / friends", "GET") end La documentation de cet objet "Amis" peut être consultée ici dans la documentation utilisateur de FB Graph API (voir Connexions -> amis). Vous remarquerez que nous passons un paramètre secondaire de "GET" à la méthode facebook.request. Puisque l’API graphique est plus ou moins conforme à la norme "REST", le type de demande que nous formulons est extrêmement important. "GET" est par nature une demande de lecture, nous "récupérons" ainsi des données sur les amis de l'utilisateur connecté. Si nous appelions l'API en écriture (par exemple, en postant sur un mur), nous pourrions transmettre "PUT" pour spécifier que.
Une fois que la méthode "facebook.request" est appelée, l'auditeur capturera les nouveaux événements qui seront déclenchés lors du retour de cet appel d'API. Dans la première partie du didacticiel, nous avons recherché un type d’événement "demande" afin de déterminer si c’était le résultat de notre appel à l’API post-connexion. Le code était le suivant:
elseif ("request" == event.type) puis local response = event.response print (response) end En gros, la réponse de l'API Facebook a été renvoyée et imprimée. C’est la partie du code que nous allons remplacer afin de créer notre collage de photos de profil d’ami. Le code ci-dessus sera remplacé par ce qui suit:
elseif ("request" == event.type) puis local response = Json.Decode (event.response) local data = response.data fonction locale showImage (event) event.target.alpha = 0 event.target.xScale = 0.25 event .target.yScale = 0.25 transition.to (event.target, alpha = 1.0, xScale = 1, yScale = 1) fin pour i = 1, # données do display.loadRemoteImage ("http: //graph.facebook. com / "? data [i] .id?" / picture "," GET ", showImage," friend "? i?" .png ", system.TemporaryDirectory, math.random (0, display.contentWidth), math. random (0, display.contentHeight)) end end Décomposons cela pour que nous puissions comprendre chaque partie:
réponse locale = Json.Decode (event.response) données locales = response.data
Dans cette partie du code, nous décodons simplement la réponse JSON que nous recevons de l'API Facebook. La réponse est stockée en tant qu'attribut de l'objet événement (event.response) transmis à l'écouteur. Lorsque l'objet JSON est décodé, il est traduit en un objet Lua que nous stockons dans une variable appelée "réponse". Étant donné que la clé de l'élément racine de cet objet JSON est "data", une fois qu'il est décodé, nous pouvons explorer cet objet en appelant "response.data".
fonction locale showImage (event) event.target.alpha = 0 event.target.xScale = 0.25 event.target.yScale = 0.25 transition.to (event.target, alpha = 1.0, xScale = 1, yScale = 1) fin
Cette méthode est un rappel qui sera déclenché lors du chargement d'une image distante à partir d'une URL. La section suivante décrira comment cela se produit. Une fois cette méthode lancée, elle attend un objet événement qui contiendra l’objet d’affichage de l’image de profil dans l’attribut "target" (event.target). Comme vous pouvez le constater, nous définissons les attributs de base de "alpha" sur 0 ou invisible, ainsi que l'échelle sur 1/4 de la taille d'origine de l'image..
La méthode transition.to accepte 2 paramètres: le premier étant l'objet sur lequel elle va agir et la seconde, un objet tableau des paramètres et des valeurs vers lesquels il effectue la transition. L’effet de cette transition sera d’afficher progressivement l’image et de la modifier pour passer de 1/4 de sa taille et invisible à ses dimensions maximales (scale = 1) et visible (alpha = 1). Cela crée un effet d'animation basé sur les mathématiques pour chaque homme pauvre, tel qu'il est affiché. Cela aura plus de sens lorsque l'application sera lancée.
pour i = 1, # data do display.loadRemoteImage ("http://graph.facebook.com/"? data [i] .id? "/ image", "GET", showImage, "ami"? i? " .png ", system.TemporaryDirectory, math.random (0, display.contentWidth), math.random (0, display.contentHeight)) end Puisque l'objet "Amis" que nous recevons de l'API Faceobok est un tableau, nous devons le parcourir pour obtenir les identifiants de chaque utilisateur. Cet identifiant est utilisé pour construire une URL qui servira une petite version carrée de la photo de profil d'un utilisateur. En utilisant la méthode display.loadRemoteImage, nous pouvons appeler une URL qui se chargera du téléchargement des données d’image et de son stockage local avant de les afficher à l’écran..
Le premier paramètre que nous passons:
"http://graph.facebook.com/"? données [i] .id? "/image"
est l'URL construite qui comprend l'identifiant Facebook unique de l'utilisateur (data [i] .id).
"GET", showImage, "ami"? je? ".png", system.TemporaryDirectory,
Les 4 paramètres suivants sont:
- le type de requête, "GET" dans ce cas
- notre méthode de rappel showImage qui sera déclenchée lors du téléchargement de l'image.
- un nom unique pour le fichier image que nous téléchargeons
- un espace de fichier temporaire pour stocker les images téléchargées accessibles via la méthode "system.TemporaryDirectory"
Enfin, les 2 derniers paramètres passés sont les coordonnées X et Y sur lesquelles nous souhaitons afficher l’image:
math.random (0, display.contentWidth), math.random (0, display.contentHeight)
Comme nous créons un collage, nous pouvons placer les images au hasard sur tout l’écran. L'appel "math.random" prend une valeur de départ et une valeur de fin et renvoie un nombre aléatoire compris entre 2. Dans ce cas, nous avons besoin de nombres aléatoires compris entre 0 et la largeur / hauteur de l'écran. Plus ou moins et l'image ne serait pas visible.
Et là nous l'avons! Découvrez le résultat ci-dessous:
Les visages ont été flous pour protéger l'innocent. :)
Pour terminer, la bibliothèque d’API Facebook pour Corona ne fonctionnera pas correctement dans Corona Simulator. Le moyen le plus simple de tester l'application intégrée au didacticiel consiste à l'exécuter dans le simulateur iOS fourni avec Xcode..
