Dans ce didacticiel, vous allez créer un programme de téléchargement d’images Flickr de bureau à l’aide de l’ASI / FlickrAPI, puis exporter l’application en tant qu’application AIR.
Étape 1: Créer un nouveau projet Flex
Commencez par ouvrir Flex Builder et créer un nouveau projet en cliquant sur "Fichier> Nouveau> Projet Flex". Allez-y et donnez à votre projet un nom et un emplacement. La principale chose dont vous devez vous préoccuper ici est le "Type d'application", assurez-vous qu'il est défini sur "Bureau (s'exécute dans Adobe AIR)"..
Étape 2: Télécharger les bibliothèques nécessaires
Avant de commencer la programmation, nous devons télécharger les bibliothèques dont nous avons besoin pour ce projet. Ces bibliothèques incluent le corelib par Adobe et bien sûr la bibliothèque Flickr AS3
Vous aurez besoin d'obtenir la dernière version de l'API AS3 Flickr via SVN, car un problème lié à la fonction "Télécharger" des versions publiées n'a pas encore été corrigé..
Étape 3: Déplacer des bibliothèques dans un dossier de projet
Avec vos bibliothèques téléchargées, nous devons les déplacer dans notre dossier de projet. Décompressez le "corelib" et accédez au dossier "com" à l'intérieur du dossier "src". Ouvrez maintenant votre dossier de projet dans une nouvelle fenêtre et ouvrez le dossier "src". Faites glisser le dossier "com" dans le dossier "src" de votre projet.
À l'intérieur du dossier API Flickr, vous trouverez une structure de fichier similaire au dossier "corelib". Explorez le dossier "src> com> adobe> webapis" et récupérez le dossier "flickr". Déplacez ce dossier dans le dossier du projet dans le répertoire "src> com> adobe> webapis".
Retournez dans Flex Builder et actualisez votre explorateur de packages. Vous devriez maintenant voir les bibliothèques que vous avez téléchargées apparaître dans votre dossier de projet..
Étape 4: Configuration de l'interface utilisateur - Partie 1
Nous allons non seulement télécharger des images sur notre compte Flickr, mais également le titre, les balises et une description, nous aurons donc besoin des champs appropriés..
Définissez la taille de votre document sur 320x400. Cliquez avec le bouton droit de la souris sur votre dossier de projet Flex et sélectionnez "Propriétés". Faites défiler jusqu'au panneau Compilateur Flex et entrez le code suivant dans le champ "arguments supplémentaires du compilateur",-taille par défaut 320 415".
Passez en mode Conception, ouvrez le panneau Composants et faites glisser un composant Image. Assurez-vous de donner au composant Image un id intitulé "imageAperçu", définissez sa hauteur sur 205 pixels et limitez ses proportions à 10 pixels à gauche, à droite et en haut de la vue dans le panneau Mise en forme..
Ensuite, faites glisser deux composants TextInput vers la scène et empilez-les l'un sur l'autre avec un espacement entre eux de 10 pixels les contraignant à 10 pixels de gauche et de droite. Attribuez au premier champ l'ID "imageTitle" et définissez la valeur du texte sur "Titre de l'image". Attribuez au deuxième champ l'id de "imageTags" et la valeur textuelle de "Tags".
Étape 5: Configuration de l'interface utilisateur - Partie 2
Jusqu'à présent, nous avons une zone d'aperçu pour notre image sélectionnée, des champs pour saisir un titre et des balises pour notre image. Il manque encore une donnée, une description. Accédez au panneau Composants, faites glisser un composant Zone de texte et placez-le sous le champ Balises. Définissez la hauteur sur 70 pixels et limitez la largeur à 10 pixels à droite et à gauche. Donnez à la zone de texte l'id de "imageDesc" et la valeur de texte de "Description de l'image".
Maintenant, tout ce dont nous avons besoin est un bouton de sélection, un bouton de téléchargement et une barre de progression pour surveiller la progression de notre téléchargement. Continuez et faites glisser deux boutons vers la zone d'affichage et une barre de progression. Placez le premier bouton à 10 pixels de la gauche et contraignez-le à cette position. Donnez-lui un identifiant de "selectBtn" et définissez son étiquette sur "Select". Placez le deuxième bouton à 10 pixels de la droite et contraignez-le également. Définissez son identifiant sur "uploadBtn" et étiquetez-le "Upload". Positionnez la barre de progression au milieu des deux boutons et contraignez-la au centre de l'application. Donnons-lui un identifiant de "pBar".
Votre application devrait ressembler à l'image ci-dessous:
Étape 6: Index de tabulation
Passez en mode code dans Flex Builder et recherchez les champs de saisie que vous venez de créer. Les trois champs dont vous aurez besoin sont les champs "Titre", "Tags" et "Description". Cliquez à l'intérieur de chacun et ajoutez ce code tabIndex = "n", en remplaçant "n" par un numéro séquentiel, comme suit:
Étape 7: Inscrivez-vous pour une clé d'API Flickr
Tout d'abord, rendez-vous sur Flickr et inscrivez-vous pour une clé API.
Flickr vous demandera de nommer votre application et de lui donner une description..
Une fois que vous avez renseigné les informations appropriées et accepté les conditions générales, cliquez sur Soumettre. Flickr vous dirigera ensuite vers un écran contenant votre clé API et la clé secrète de votre application. Gardez la clé et le secret de l'API à portée de main, vous en aurez bientôt besoin.
Étape 8: Créez un cours pour vous connecter à Flickr
Créons maintenant une nouvelle classe ActionScript qui servira de lien de connexion avec Flickr. Revenez dans Flex Builder et créez une nouvelle classe ActionScript à partir du menu Fichier> Nouveau. nomme le FlickrConnect.
Allez-y et collez ces commandes "import" et je vous expliquerai leur objectif.
package import flash.net.SharedObject; // nécessaire pour définir les cookies système. import flash.net.URLRequest; import flash.net.navigateToURL; // ouvre la fenêtre d'autorisation dans le navigateur. import mx.controls.Alert; // nous allons utiliser deux fenêtres d'alerte dans notre application import mx.events.CloseEvent; // détecte à quel moment la fenêtre d'alerte est closed // Importe toutes les classes de l'API Flickr pour s'assurer que nous avons tout ce dont nous avons besoin. import com.adobe.webapis.flickr. *; importer com.adobe.webapis.flickr.events. *; importer com.adobe.webapis.flickr.methodgroups. *;
Avec cette classe, nous allons transmettre à Flickr notre clé API et la clé secrète de l'application et, en retour, nous obtiendrons un jeton d'authentification que nous enregistrerons sous forme de cookie sur le système de l'utilisateur. Lorsque notre application envoie la clé à Flickr, elle ouvre une fenêtre de navigateur demandant à l'utilisateur d'authentifier l'application avec son compte Flickr. Une fois qu'ils ont choisi "autoriser" et qu'ils reviennent à l'application, ils seront accueillis par une fenêtre d'alerte leur demandant de Cliquez sur "OK" une fois qu'ils ont autorisé l'application avec Flickr. Cette opération envoie ensuite le jeton de sécurité et configure le cookie stockant ce jeton localement afin de contourner le processus d'authentification chaque fois que l'application est ouverte..
Étape 9: Créer une instance Flickr et initialiser le service
classe publique FlickrConnect public var flickr: FlickrService; private var frob: String; private var flickrCookie: SharedObject = SharedObject.getLocal ("FlexFlickrUploader"); // stocke le jeton Flickr dans une fonction publique cookie FlickrConnect () (flickr = new FlickrService ("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx)"; xxxxxxxxxxxxxxxxx "; if (flickrCookie && flickrCookie.data.auth_token) // s'il existe un cookie ET un jeton d'authentification, définissez le jeton flickr.token = flickrCookie.data.auth_token; else // sinon, obtient l'authentification flickr.addEventListener (FlickrResultEvent.AUTH_GET_FROB, getFrobResponse); flickr.auth.getFrob ();
Dans le code ci-dessus, nous commençons par déclarer 3 variables que nous utiliserons dans cette classe. La variable "flickr" est définie comme publique car nous référencerons cet objet depuis l'application parent. Les deux autres variables sont privées car elles sont spécifiques à cette classe uniquement..
Dans le constructeur de la classe, initialisez l'objet flickr en le définissant comme un "nouveau service Flickr" et en transmettant votre clé d'API Flickr sous forme de chaîne. En dessous, définissez la clé secrète de notre service nouvellement créé sur la clé que Flickr vous a fournie lorsque vous avez demandé une clé API..
Sous nos déclarations, nous vérifions d'abord si notre cookie système existe et si un "jeton d'authentification" a été défini. Si ces deux arguments sont égaux à true, nous allons de l'avant et définissons la propriété "jeton" de notre service flickr égale au jeton d'authentification stocké dans notre cookie. Si l'un de ces arguments n'est pas vrai, nous poursuivons le processus d'authentification de l'application..
Ajouter et écouteur d'événement au service flickr. Le type est "FlickrResultEvent" et nous écoutons "AUTH_GET_FROB". Entrez le nom de la fonction "getFrobResponse". Commencez une nouvelle ligne et exécutez la fonction "getFrob ()" de l'API Flickr.
Frob
Flickr ne définit pas le terme "frob" dans la documentation de leur API, mais une brève explication est donnée ci-dessous..
Un "frob" est simplement une chaîne codée en hexadécimal que les serveurs Flickr distribuent dans le cadre du processus d'autorisation; un terme plus conventionnel car ce serait un 'nonce'.
Une définition plus détaillée peut être trouvée ici.
Étape 10: Get Frob
La fonction getFrob () enverra notre clé API à Flickr et si cette clé est valide, Flickr nous renverra une chaîne. Le frob sera transmis à une autre fonction qui construira une URL de connexion. Nous demanderons à l'utilisateur de se connecter à son compte Flickr et donnerons à notre application la permission de télécharger des photos..
fonction privée getFrobResponse (event: FlickrResultEvent): void if (event.success) frob = String (event.data.frob); var auth_url: String = flickr.getLoginURL (frob, AuthPerm.DELETE); // génère une URL de connexion browseToURL (nouvelle URLRequest (auth_url), "_blank"); // ouvre le navigateur et demande votre vérification Alert.show ("Fermez cette fenêtre APRÈS votre connexion à Flickr", "Autorisation Flickr", Alert.OK, null, onCloseAuthWindow);
Une fois que nous avons reçu une réponse de Flickr avec un frob, nous vérifions si la réponse a donné un "succès". Une fois qu'il a été déterminé qu'un frob a été renvoyé, nous affectons les données renvoyées à une variable String, créons une autre variable String qui sera l'URL d'authentification, puis utilisons l'une des fonctions intégrées de l'API AS3 de Flickr qui générera l'URL de connexion et l'attribuera. valeur de notre chaîne "auth_url".
La partie suivante devrait être familière à quiconque a déjà travaillé dans Flash pendant un certain temps. Utilisez la fonction intégrée "browseToURL" de Flash pour ouvrir Flickr dans le navigateur et invitez l'utilisateur à se connecter et à donner à notre application la permission d'accéder à son compte. Dans le cadre de ce processus, nous demanderons à Flickr l'autorisation "DELETE", qui correspond au niveau d'accès le plus élevé qu'une application puisse avoir. Avec ce niveau d'accès, nous pourrons télécharger, modifier, ajouter et supprimer. C'est un peu exagéré, mais j'ai choisi de le garder à ce niveau comme référence pour vos propres projets..
En même temps que nous sommes dirigés vers la page de connexion de Flickr, notre application génère une fenêtre d’alerte. Cette fenêtre comportera le message "Fermez cette fenêtre APRÈS votre connexion à Flickr". Une fois que l'utilisateur s'est connecté à Flickr et est retourné à l'application, il cliquera sur "OK", ce qui appellera une autre fonction permettant de récupérer un jeton d'accès à partir de Flickr..
Cette fonction demande simplement à Flickr un jeton d'accès. Flickr verra que notre application (identifiée par notre frob) a été autorisée et renverra le jeton..
Étape 12: Définir le jeton d'accès et le cookie système
fonction privée getTokenResponse (event: FlickrResultEvent): void if (event.success) var authResult: AuthResult = AuthResult (event.data.auth); flickr.token = authResult.token; flickrCookie.data.auth_token = flickr.token; flickrCookie.flush (); // définit le cookie sur l'ordinateur local
La dernière fonction de notre classe FlickrConnect acceptera le jeton envoyé par Flickr et le stockera dans un cookie système. Commencez par vérifier de nouveau pour vous assurer que l'événement a réussi. Si nous avons réussi à récupérer un jeton à partir de Flickr, créez une instance de "AuthResult" et affectez-la à une variable appelée "authResult". Définissez la valeur de la variable égale à la valeur "auth" des données renvoyées. Définissez la propriété "jeton" de notre FlickrService sur la propriété "jeton" de notre variable "authResult".
Attribuez ensuite une propriété "auth_token" au cookie créé au début de la classe (flickrCookie) et égalez-la au "flickr.token". Tout ce qui reste à faire est de définir le cookie sur notre ordinateur local. Pour ce faire, nous utilisons la fonction "flush ()" de SharedObject dans AS3..
Maintenant que nous avons une classe pour nous connecter à Flickr et définir notre authentification et nos autorisations, nous pouvons commencer à coder la partie principale de notre application..
Étape 13: Importations et variables
Dans notre script principal, nous allons importer trois classes; la classe que nous venons de créer, la classe intégrée dans Flex Alert et la classe de téléchargement de l'API Flickr AS3.
Parmi les quatre variables dont nous aurons besoin, la première que nous devons créer est une instance de la classe FlickrConnect que nous venons de créer, nommez cette classe "flickrLogin". Créez une variable appelée "uploader" avec une instance de "Upload" et transmettez l'instance flickr à partir de notre classe FlickrConnect. Créez deux autres variables, toutes deux du type "Fichier". Une de ces variables, nous appellerons "fichier", l'autre "fichierVersOuvrir".
importer FlickrConnect; import mx.controls.Alert; import com.adobe.webapis.flickr.methodgroups.Upload; var privé flickrLogin: FlickrConnect = new FlickrConnect (); var uploader privé: Upload = nouveau Upload (flickrLogin.flickr); fichier var privé: Fichier; private var fileToOpen: File = File.documentsDirectory;
Étape 14: Fonction d'initialisation et de sélection d'image
Maintenant que nos importations et nos variables sont configurées, nous devons lancer notre application. Au cours du processus d’initialisation, définissez la barre de progression (pBar) sur Invisible. Nous voulons seulement que la barre soit visible lorsque nous mettons en ligne une image..
La fonction suivante consiste à ouvrir le navigateur de fichiers pour que l’utilisateur sélectionne une image..
fonction privée init (): void pBar.visible = false; fonction privée selectImageFile (root: File): void var imgFilter: FileFilter = new FileFilter ("Images", "* .jpg; * .gif; *. png"); root.browseForOpen ("Open", [imgFilter]); root.addEventListener (Event.SELECT, fileSelected);
Étape 15: Lire les informations sur le fichier et mettre à jour les champs de saisie
Créez une fonction nommée "fileSelected" qui se déclenchera lorsque l'utilisateur sélectionnera une image. Cette fonction lira également le nom de fichier et l'URL de cette image. Mettez à jour le champ de saisie "Titre" avec le nom du fichier sélectionné et ciblez "Aperçu de l'image", en définissant son URL sur l'URL du fichier sélectionné..
Étape 16: Téléchargement du fichier et suivi de la progression
Créez deux autres fonctions, l'une pour gérer le téléchargement de l'image sur Flickr et l'autre pour suivre sa progression via la barre de progression..
Nommez la première fonction "uploadFile" avec le type "MouseEvent". À l'intérieur de cette fonction, définissez la variable que nous avons créée précédemment, "fichier", sur "Fichier" et transmettez l'URL de l'image sélectionnée par l'utilisateur. Ajoutez deux écouteurs à cette variable. Le premier auditeur sera un "DataEvent" à l'écoute pour le téléchargement complet et sa fonction cible sera appelée "uploadCompleteHandler". Le deuxième auditeur sera un événement progress et sa cible sera la fonction "onProgress".
Créez la deuxième fonction et nommez-la "onProgress". À l'intérieur de la fonction, définissez la barre de progression sur visible et définissez sa source sur "fichier"..
Une fois le téléchargement terminé, Flickr renverra une réponse à notre application pour nous informer que le téléchargement est terminé. La réponse de Flickr à nous sera sous forme de XML, nous devrons analyser ce XML et déterminer la réponse si c'est un "ok" ou quelque chose d'autre. Tout ce que nous avons besoin de savoir, c'est si la réponse est "ok" puis lancez une fenêtre d'alerte indiquant que le téléchargement a réussi ou si la réponse est une autre chose, cela signifie que le téléchargement a échoué et que nous devons en informer l'utilisateur..
fonction privée uploadCompleteHandler (event: DataEvent): void pBar.visible = false; trace ("upload done"); var xData: XML = new XML (event.data); trace (xData); if (xData [0] .attribute ("stat") == "ok") Alert.show ("Chargement réussi", "Statut du téléchargement"); else Alert.show ("Échec du téléchargement", "Statut du téléchargement");
Étape 18: Fonctions d'appel et lancement de l'application
À ce stade, si vous testez votre application, rien ne se passera. C'est parce que nous n'avons pas ajouté de fonctions de clic à nos boutons et, plus important encore, nous n'avons pas lancé notre application..
Dans le code de votre application principale, faites défiler l'écran vers le bas et recherchez le code des boutons que nous avons créés à l'aide de l'interface graphique au début de ce didacticiel. Nous devrons ajouter des gestionnaires "Cliquez" à chaque bouton pour leur indiquer la fonction à exécuter lorsque l'utilisateur clique dessus..
Le bouton de sélection appellera selectImageFile (fileToOpen) avec la variable fileToOpen passé en elle.
Le bouton de téléchargement appellera uploadFile (événement) et passera dans un événement dans ce.
Il ne nous reste plus qu'à lancer notre demande. Pour cela, nous ajoutons du code en haut de notre fichier sous l’élément "WindowedApplication". Tout ce que nous avons à faire est d'ajouter la fonction call init () avec ça applicationComplete. Ça devrait ressembler à ça:
Étape 19: Testez votre application
Une fois que vous avez fini de coder votre application, il est temps de la tester pour vous assurer qu'elle fonctionne..
Cliquez sur "déboguer" dans Flex Builder pour déployer l'application..
L'application vous avertira de ne cliquer que sur "OK" après vous être connecté à Flickr et avoir autorisé l'application à accéder à votre compte Flickr..
Étape 20: Sélectionnez une image à télécharger.
Après avoir cliqué sur "OK", votre application vide attend l'entrée.
Cliquez sur "Sélectionner" et accédez à une image sur votre ordinateur local. Une fois sélectionné, cliquez sur "Ouvrir". Vous devriez maintenant voir un aperçu de l'image que vous avez sélectionnée. Allez-y et donnez-lui un titre et une description. Pensez à certaines balises qui vont avec l'image et entrez-les dans le champ "balises", séparées par des virgules. Cliquez sur "Upload".
Si vous avez réussi, vous devriez voir l'écran suivant.
Juste pour vous assurer que l'image téléchargée avec succès, allez sur votre compte Flickr et affichez l'image que vous venez de télécharger..
Étape 21: Exporter au format AIR
Maintenant que nous savons que notre application fonctionne correctement, nous pouvons l'exporter en tant qu'application AIR. Pour ce faire, cliquez sur "Fichier> Exporter> Version validée". Il n'y a pas de paramètres à modifier dans la première fenêtre, cliquez donc sur "Suivant" et passez à la fenêtre suivante..
Créez un certificat en renseignant les champs "Nom de l'éditeur" et "Mot de passe". Parcourez un emplacement pour enregistrer le certificat et le nommer. Cliquez sur "Terminer" et attendez que votre application AIR soit créée..
Conclusion
Votre application est terminée, elle fonctionne et vous l'avez exportée pour AIR. Et maintenant? Maintenant, vous pouvez développer cette application avec un peu plus des fonctions de l'API ou vous pouvez déployer tel quel..
Merci d'avoir pris le temps de suivre ce didacticiel, j'espère que vous l'avez apprécié. Et rappelez-vous… continuez à apprendre!
Share
Accentsconagua
