En este tutorial, construirá un cargador de imágenes de Flickr de escritorio utilizando AS3 / FlickrAPI y exportando la aplicación como una aplicación de AIR.
Paso 1: Crear un nuevo proyecto Flex
Comience abriendo Flex Builder y creando un nuevo proyecto presionando "Archivo> Nuevo> Proyecto Flex". Continúa y dale a tu proyecto un nombre y una ubicación. Lo principal de lo que debe preocuparse aquí es el "Tipo de aplicación", asegúrese de que esté configurado en "Escritorio (se ejecuta en Adobe AIR)".
Paso 2: Descargar las bibliotecas necesarias
Antes de comenzar la programación, necesitamos descargar las bibliotecas que necesitaremos para este proyecto. Esas bibliotecas incluyen el corelib de Adobe y, por supuesto, la biblioteca Flickr AS3.
Deberá obtener la última versión de la API AS3 de Flickr a través de SVN, ya que existe un problema con la función de "carga" de las versiones publicadas que aún no se ha solucionado..
Paso 3: mover bibliotecas a la carpeta del proyecto
Con sus bibliotecas descargadas, necesitamos moverlas a nuestra carpeta de proyectos. Descomprima el "corelib" y navegue a la carpeta "com" dentro de la carpeta "src". Ahora abra la carpeta de su proyecto en una nueva ventana y abra la carpeta "src". Arrastre la carpeta "com" a la carpeta "src" de su proyecto.
Dentro de la carpeta API de Flickr, encontrará una estructura de archivos similar a la carpeta "corelib". Profundice en la carpeta "src> com> adobe> webapis" y tome la carpeta "flickr". Mueva esa carpeta a la carpeta del proyecto en este directorio "src> com> adobe> webapis".
Regresa a Flex Builder y actualiza tu Package Explorer. Ahora debería ver las bibliotecas que descargó apareciendo dentro de la carpeta de su proyecto.
Paso 4: Configurar la interfaz de usuario - Parte 1
No solo estaremos subiendo imágenes a nuestra cuenta de Flickr, sino también el Título, las Etiquetas y una Descripción, por lo que necesitaremos los campos adecuados.
Establezca el tamaño de su documento a 320x400. Haga clic con el botón derecho en la carpeta de proyectos Flex y seleccione "propiedades". Desplácese hacia abajo hasta el panel Compilador de Flex e ingrese el siguiente código en el campo "argumentos adicionales del compilador"-tamaño predeterminado 320 415".
Cambie a la vista Diseño, abra el panel Componentes y arrastre un componente de Imagen. Asegúrate de darle al componente de Imagen un ID titulado "imagePreview", establece su altura en 205 píxeles y restringe sus proporciones a 10 píxeles desde la izquierda, la derecha y la parte superior de la vista en el panel Diseño.
A continuación, arrastre dos componentes TextInput al escenario y apílelos uno encima del otro con un relleno de 10 píxeles entre ellos, limitándolos a 10 píxeles de la izquierda y la derecha. Asigne al primer campo un ID de "imageTitle" y establezca el valor de texto en "Título de imagen". Asigne al segundo campo un ID de "imageTags" y un valor de texto de "Etiquetas".
Paso 5: Configurar la interfaz de usuario - Parte 2
Hasta ahora tenemos un área de vista previa para nuestra imagen seleccionada, campos para ingresar un título y etiquetas para nuestra imagen. Falta una pieza más de datos, una descripción. Vaya al panel Componentes, arrastre un componente del Área de texto y colóquelo debajo del campo Etiquetas. Establezca la altura en 70 píxeles y restrinja el ancho a 10 píxeles de derecha a izquierda. Asigne al área de texto un ID de "imageDesc" y el valor de texto de "Image Description".
Ahora todo lo que necesitamos ahora es un botón Seleccionar, un botón Cargar y una barra de progreso para monitorear nuestro progreso de carga. Continúe y arrastre dos botones al área de visualización y una barra de progreso. Coloque el primer botón a 10 píxeles de la izquierda y apriételo a esa posición. Asígnele un ID de "selectBtn" y establezca su etiqueta en "Select". Coloque el segundo botón a 10 píxeles de la derecha y también limítelo a esa posición. Establezca su id en "uploadBtn" y etiquételo como "Upload". Coloque la barra de progreso en el medio de los dos botones y limítela al centro de la aplicación. Vamos a darle un id de "pBar".
Su aplicación debe parecerse a la imagen de abajo:
Paso 6: Índice de pestañas
Cambie a la vista de código dentro de Flex Builder y busque los campos de entrada que acaba de crear. Los tres campos que necesitará son los campos "Título", "Etiquetas" y "Descripción". Haga clic dentro de cada uno y agregue este código tabIndex = "n", reemplazando "n" con un número secuencial, así:
Paso 7: Registrarse para obtener una clave API de Flickr
Primero, dirígete a Flickr y regístrate para obtener una clave API.
Flickr le pedirá que nombre su aplicación y le dé una descripción.
Una vez que complete la información correcta y acepte los términos y condiciones, haga clic en enviar y luego Flickr lo dirigirá a una pantalla con su Clave API y la Clave secreta para su aplicación. Mantenga la clave API y el secreto a mano, los necesitará pronto.
Paso 8: Crear una clase para conectarse a Flickr
Ahora vamos a crear una nueva clase de ActionScript que servirá como nuestra conexión a Flickr. Regrese a Flex Builder y cree una nueva clase de ActionScript en el menú Archivo> Nuevo; nombralo FlickrConnect.
Adelante, pegue estos comandos de "importación" y explicaré su propósito..
paquete import flash.net.SharedObject; // necesario para configurar las cookies del sistema importar flash.net.URLRequest; import flash.net.navigateToURL; // abre la ventana de autorización en el navegador import mx.controls.Alert; // usaremos dos ventanas de alerta en nuestra aplicación import mx.events.CloseEvent; // Detecta cuándo está la ventana de alerta closed // Importe todas las clases de la API de Flickr para asegurarse de que tenemos todo lo que necesitamos import com.adobe.webapis.flickr. *; importar com.adobe.webapis.flickr.events. *; importar com.adobe.webapis.flickr.methodgroups. *;
Con esta clase, pasaremos a Flickr nuestra clave de API y la clave secreta de la aplicación y, a cambio, obtendremos un token de autenticación que almacenaremos como una cookie en el sistema del usuario. Cuando nuestra aplicación envíe la clave a Flickr, se abrirá una ventana del navegador que le pedirá al usuario que autentique la aplicación con su cuenta de Flickr, una vez que elijan "autorizar" y regresen a la aplicación, serán recibidos por una ventana de alerta que les pedirá que Haga clic en "Aceptar" una vez que hayan autorizado la aplicación con Flickr. Al hacerlo, se enviará el token de seguridad y se configurará la cookie que almacena ese token localmente para evitar el proceso de autenticación cada vez que se abre la aplicación..
Paso 9: crear una instancia de Flickr e inicializar el servicio
clase pública FlickrConnect public var flickr: FlickrService; privada var frob: String; private var flickrCookie: SharedObject = SharedObject.getLocal ("FlexFlickrUploader"); // store Flickr Token en una función pública de cookies FlickrConnect () flickr = new FlickrService ("xxxxxxxxxxxxxxxxxxxxxxxx"); // enter Flickr API key flickr.secret =) xxxxxxxxxxxxxxxx "; if (flickrCookie && flickrCookie.data.auth_token) // si existe la cookie AND Auth Token, configure el token flickr.token = flickrCookie.data.auth_token; else // si no, obtenga la autenticación flickr.addEventListener (FlickrResultEvent.AUTH_GET_FROB, getFrobResponse); flickr.auth.getFrob ();
En el código anterior comenzamos declarando 3 variables que usaremos en esta clase. La variable "flickr" se establece como pública porque haremos referencia a este objeto desde la aplicación principal, las otras dos variables son privadas porque son específicas de esta clase solamente.
En el constructor de la clase, inicialice el objeto de flickr configurándolo igual a un "nuevo servicio de Flickr" y pasando su clave de API de Flickr como una cadena. Debajo, establezca la clave secreta de nuestro servicio recién creado a la clave que le dio Flickr cuando solicitó una clave API.
Debajo de nuestras declaraciones, primero verificamos si existe una cookie de nuestro sistema y si se ha establecido un "token de autenticación". Si ambos argumentos son igual de verdad, seguimos adelante y configuramos la propiedad "token" de nuestro servicio de flickr igual al token de autenticación almacenado en nuestra cookie. Si alguno de estos argumentos no es verdadero, continuamos el proceso de autenticación de la aplicación..
Agregar y escucha de eventos al servicio de flickr. El tipo es de "FlickrResultEvent" y estamos escuchando "AUTH_GET_FROB". Introduzca el nombre de la función "getFrobResponse". Comience una nueva línea y ejecute la función "getFrob ()" de la API de Flickr.
Frob
Flickr no define el término "frob" en la documentación de su API, sin embargo, a continuación se detalla una breve explicación..
Un 'frob' es solo una cadena codificada en hex que los servidores de Flickr distribuyen como parte del proceso de autorización; Un término más convencional sería "nonce"..
Una definición más detallada se puede encontrar aquí.
Paso 10: Obtener Frob
La función getFrob () enviará nuestra clave API a Flickr y si la clave es válida, Flickr nos devolverá una cadena. El frob pasará a otra función que construirá una URL de inicio de sesión a la que dirigiremos al usuario para que inicie sesión en su cuenta de Flickr y otorgue permiso a nuestra aplicación para cargar fotos..
función privada getFrobResponse (event: FlickrResultEvent): void if (event.success) frob = String (event.data.frob); var auth_url: String = flickr.getLoginURL (frob, AuthPerm.DELETE); // genera una URL de inicio de sesión navigationToURL (new URLRequest (auth_url), "_blank"); // abre el navegador y solicita su verificación Alert.show ("Cerrar esta ventana DESPUÉS de iniciar sesión en Flickr", "Autorización de Flickr", Alert.OK, null, onCloseAuthWindow);
Una vez que recibimos una respuesta de Flickr con un frob, verificamos si la respuesta obtuvo un "éxito". Una vez que se determina que se devolvió un frob, asignamos los datos devueltos a una variable String, creamos otra variable String que será la URL de autenticación, y luego usamos una de las funciones integradas de la API AS3 de Flickr que generará nuestra URL de inicio de sesión y asignará su valor a nuestra cadena "auth_url".
La siguiente parte debe ser familiar para cualquiera que haya trabajado en Flash por un tiempo. Use la función incorporada "navigationToURL" de Flash para abrir Flickr en el navegador y pedirle al usuario que inicie sesión y otorgue permiso a nuestra aplicación para acceder a su cuenta. Como parte de este proceso, le pediremos a Flickr permiso para "BORRAR", que es el nivel de acceso más alto que puede tener una aplicación. Con ese nivel de acceso, podremos subir, editar, agregar y eliminar. Esto es un poco excesivo, pero elegí mantenerlo en este nivel como referencia para sus propios proyectos..
Al mismo tiempo que nos dirigen a la página de inicio de sesión de Flickr, nuestra aplicación está generando una ventana de alerta. Esta ventana incluirá el mensaje "Cerrar esta ventana DESPUÉS de iniciar sesión en Flickr". Cuando el usuario haya iniciado sesión en Flickr y haya regresado a la aplicación, presionará "Aceptar", que llamará a otra función que recuperará un token de acceso de Flickr..
Esta función simplemente le pide a Flickr un token de acceso, Flickr verá que nuestra aplicación (según lo identifica nuestro frob) ha sido autorizada y devolverá el token..
Paso 12: Configurar el token de acceso y la cookie del sistema
función privada 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 (); // configura la cookie en la computadora local
La última función de nuestra clase FlickrConnect aceptará el token enviado desde Flickr y lo almacenará en una cookie del sistema. Comience por verificar nuevamente que el evento haya sido exitoso. Si logramos recuperar un token de Flickr, cree una instancia de "AuthResult" y asigne una variable llamada "authResult". Establezca el valor de la variable igual al valor "auth" de los datos devueltos. Establezca la propiedad "token" de nuestro servicio Flickr en la propiedad "token" de nuestra variable "authResult".
A continuación, asigne una propiedad de "auth_token" a la cookie que creamos al comienzo de la clase (flickrCookie) y la iguala a la "flickr.token". Todo lo que queda es configurar la cookie en nuestra computadora local, lo hacemos usando la función "flush ()" de SharedObject en AS3.
Ahora que tenemos una clase para conectarnos a Flickr y configurar nuestra autenticación y permisos, podemos comenzar a codificar la parte principal de nuestra aplicación.
Paso 13: Importaciones y Variables
En nuestro script principal, importaremos tres clases; la clase que acabamos de crear, la clase de alerta flexible incorporada y la clase de carga de la API AS3 de Flickr.
De las cuatro variables que vamos a necesitar, la primera que debemos crear es una instancia de la clase FlickrConnect que acabamos de crear, nombre a esa clase "flickrLogin". Cree una variable llamada "uploader" con una instancia de "Upload" y pase la instancia de flickr desde nuestra clase FlickrConnect. Crea dos variables más, ambas del tipo "Archivo". Una de esas variables, llamaremos "archivo", la otra "fileToOpen".
importar FlickrConnect; importar mx.controls.Alert; importar com.adobe.webapis.flickr.methodgroups.Upload; private var flickrLogin: FlickrConnect = new FlickrConnect (); cargador de var privado: Subir = subir nuevo (flickrLogin.flickr); archivo var privado: Archivo; private var fileToOpen: File = File.documentsDirectory;
Paso 14: Inicializar y función de selección de imagen
Ahora que tenemos nuestras importaciones y variables configuradas, necesitamos iniciar nuestra aplicación. Durante el proceso de inicialización, establezca la barra de progreso (pBar) en invisible. Solo queremos que la barra sea visible cuando estemos subiendo una imagen..
La siguiente función es abrir el buscador de archivos para que el usuario seleccione una imagen.
Paso 15: Leer la información del archivo y actualizar los campos de entrada
Cree una función llamada "fileSelected" que se activará cuando el usuario seleccione una imagen. Esta función también leerá el nombre de archivo y la url de esa imagen. Actualice el campo de entrada "Título" con el nombre del archivo seleccionado y seleccione "Vista previa de la imagen", configurando su URL a la URL del archivo seleccionado.
Cree dos funciones más, una para manejar la carga de la imagen en Flickr y la otra para seguir su progreso a través de la barra de progreso.
Nombre la primera función "uploadFile" con un tipo de "MouseEvent". Dentro de esa función, configure la variable que creamos anteriormente, "archivo" para escribir "Archivo" y pase la URL de la imagen seleccionada por el usuario. Agrega dos escuchas a esa variable. El primer oyente será un "DataEvent" que escuchará la carga completa y su función de destino se llamará "uploadCompleteHandler". El segundo oyente será un evento de progreso y su objetivo será la función "onProgress".
Cree la segunda función y llámela "onProgress". Dentro de la función, configure la barra de progreso como visible y establezca su origen en "archivo".
Una vez que se complete la carga, Flickr enviará una respuesta a nuestra aplicación informándonos que la carga ha finalizado. La respuesta de Flickr a nosotros será en forma de XML, tendremos que analizar ese XML y determinar si es un "bien" o algo más. Todo lo que necesitamos saber es si la respuesta es "correcta", luego inicie una ventana de Alerta que indique que la carga se realizó correctamente o si la respuesta es otra cosa, significa que la carga falló y debemos informar al usuario.
función privada uploadCompleteHandler (event: DataEvent): void pBar.visible = false; traza ("carga hecha"); var xData: XML = nuevo XML (event.data); traza (xData); if (xData [0] .attribute ("stat") == "ok") Alert.show ("Upload Successful", "Upload Status"); else Alert.show ("Error de carga", "Estado de carga");
Paso 18: Llamar a las funciones e iniciar la aplicación
En este punto, si prueba su aplicación, nada sucederá. Esto se debe a que no hemos agregado funciones de clic a nuestros botones y, lo que es más importante, no hemos iniciado nuestra aplicación.
Dentro del código de la aplicación principal, desplácese hacia abajo y busque el código para los botones que creamos utilizando la GUI al comienzo de este tutorial. Tendremos que agregar controladores de "clic" a cada botón para decirles qué función ejecutar cuando se hace clic.
El botón de selección llamará selectImageFile (fileToOpen) con la variable fileToOpen pasado a ella.
El botón de subir llamará uploadFile (evento) y pasará en un evento en él.
Ahora todo lo que tenemos que hacer es iniciar nuestra aplicación. Hacemos esto agregando algo de código a la parte superior de nuestro archivo bajo el elemento "WindowedApplication". Todo lo que necesitamos hacer es agregar llamar a la función en eso() con este aplicación completa. Debe tener un aspecto como este:
Paso 19: Prueba tu aplicación
Una vez que haya terminado de codificar su aplicación, es hora de probarlo para asegurarse de que funciona.
Haga clic en "depurar" en Flex Builder para implementar la aplicación.
La aplicación le avisará que solo haga clic en "Aceptar" después de iniciar sesión en Flickr y le dará permiso a la aplicación para acceder a su cuenta de Flickr.
Paso 20: Seleccione una imagen para subir
Después de hacer clic en "Aceptar", verá su aplicación en blanco esperando la entrada..
Haga clic en "Seleccionar" y navegue hasta una imagen en su computadora local. Una vez seleccionado, haga clic en "Abrir". Ahora debería ver una vista previa de la imagen que seleccionó. Adelante, dale un título y una descripción. Piense en algunas etiquetas que acompañan a la imagen e ingréselas en el campo "etiquetas", separadas por comas. Haga clic en "Subir".
Si has tenido éxito deberías ver la siguiente pantalla..
Solo para asegurarse de que la imagen se haya cargado correctamente, diríjase a su cuenta de Flickr y vea la imagen que acaba de cargar..
Paso 21: Exportar como AIR
Ahora que sabemos que nuestra aplicación funciona correctamente, podemos exportarla como una aplicación de AIR. Para hacerlo, haga clic en "Archivo> Exportar> Generar versión". No hay ninguna configuración en la primera ventana que debamos cambiar, así que haz clic en "Siguiente" y dirígete a la siguiente ventana.
Cree un certificado rellenando los campos "Nombre del editor" y "Contraseña". Busque una ubicación para guardar el certificado y asígnele un nombre. Haga clic en "finalizar" y espere a que se compile su aplicación AIR.
Conclusión
Su aplicación está terminada, está funcionando y la ha exportado a AIR. ¿Ahora que? Ahora puede ampliar esta aplicación con algunas más funciones de API o puede implementar tal como está.
Gracias por tomarse el tiempo para trabajar con este tutorial, espero que lo hayan disfrutado. Y recuerda ... sigue aprendiendo!
Share
Accentsconagua
