7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Titanium Mobile

Titanium Mobile: Crea un cargador de imágenes

Scroll to top
Read Time: 13 mins

Spanish (Español) translation by Steven (you can also view the original English article)

Este tutorial demostrará cómo crear una barra de progreso personalizada mediante la creación de un cargador de imágenes con Titanium Mobile. Específicamente, el proyecto de demostración te permitirá seleccionar una imagen de la galería de fotos del dispositivo y cargarla en un servidor remoto para su almacenamiento. Se explicarán tanto el código de Titanium Mobile como el código del lado del servidor. ¡Ahora, comencemos!


Vista previa del proyecto

La siguiente es una vista previa de la aplicación multiplataforma que crearemos en esta serie:

Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article
Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article

Requisitos previos...

Este tutorial asume que estás ejecutando Titanium Studio y tienes instaladas las últimas actualizaciones de SDK, que eran 1.7.5 en el momento de escribir este artículo. Como este tutorial se centra en la plataforma iOS, el lector también se beneficiaría de tener todos los requisitos para el desarrollo en la plataforma iOS.


Paso 1: Crear un nuevo proyecto

Abre Titanium Studio y crea un nuevo proyecto, seleccionando solo los objetivos de dispositivo Android, iPhone y iPad. Puedes nombrar tu nuevo proyecto como quieras, sin embargo, llamaremos al nuestro "ProgressBar". Proporciona a tu nuevo proyecto un ID de aplicación y una URL, luego selecciona la última versión del SDK de Titanium. Cuando hayas terminado, haz clic en "Siguiente" y luego selecciona la plantilla "Aplicación de ventana única" antes de hacer clic en "Finalizar".

Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article
Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article

Si la opción de plantilla "Aplicación de ventana única" no está disponible en tu versión de Titanium, puedes importar el código fuente del proyecto adjunto a este tutorial. Descarga los archivos del proyecto y descomprímelos en el directorio desde el que deseas trabajar. Luego sigue estos pasos:

  1. En el menú Archivo, selecciona "Importar" para abrir la ventana emergente de "Importar proyecto".
  2. En la lista de fuentes de importación, selecciona "Titanium" y luego "Importar proyecto existente de Titanium".
  3. En el campo de texto 'Directorio', busca la carpeta que contiene los archivos del proyecto que descargaste y descomprimiste.
  4. Haz clic en el botón Finalizar y se creará un nuevo proyecto llamado "ProgressBar" y estará disponible en el panel Explorador de proyectos.

Si aún no lo has hecho, ahora es un buen momento para descargar los archivos del proyecto y descomprimir todas las imágenes en el directorio "Resources/assets/images" en tu propio directorio "Resources/assets/imagess" bajo el nuevo proyecto que acabas de crear. De forma predeterminada, Titanium también incluye dos archivos de iconos en la raíz de tu directorio "Resources" llamados KS_nav_ui.png y KS_nav_views.png; no los necesitamos, así que simplemente mueve ambos a la papelera. Puedes omitir este paso si ya has importado todo el proyecto mediante la función "Importar".


Paso 2: Creación de la interfaz

Como la plantilla de la aplicación de ventana única sigue la estructura de CommonJS, puede ser un poco diferente a lo que estás acostumbrado. Aquí, el archivo app.js extrae el archivo ApplicationWindow.js usando 'require', que a su vez crea una instancia y devuelve nuestro objeto Window predeterminado para la aplicación. El archivo ApplicationWindow crea una instancia de una nueva vista llamada FirstView, que está codificada dentro del archivo FirstView.js en la carpeta 'Resources/ui'. Este objeto de vista FirstView es donde codificaremos casi todo este tutorial. Elimina cualquier código pregenerado dentro del constructor export.FirstView = function() y reemplázalo con lo siguiente:

Arriba hemos creado la estructura básica de nuestra barra de progreso, y un botón que permitirá al usuario abrir la Galería de fotos en su dispositivo y seleccionar una imagen que desee cargar. Ejecuta la aplicación en el simulador ahora, y deberías ver un solo botón en el medio de la pantalla. Algo similar a esto:

Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article

Paso 3: Elegir una imagen de la galería

Ahora que tenemos nuestra configuración de interfaz básica, agreguemos un detector y controlador de eventos a btnChoosePhoto que permitirá a nuestro usuario elegir una foto de su galería. Escribe el siguiente código directamente antes de la línea 'self.add(btnChoosePhoto);'.

En este controlador de eventos "clic", estamos abriendo la galería y comprobando dentro de la sección "success" del código si el tipo de medio elegido fue una foto comparando el objeto con el valor constante Ti.Media.MEDIA_TYPE_PHOTO. Si esta verificación pasa, a continuación pasamos nuestro objeto event.media a una nueva función llamada UploadPhotoToServer. Es aquí donde realizaremos la carga del archivo y mostraremos al usuario nuestra barra de progreso a medida que se realiza la carga.


Paso 4: Crear el código del servidor PHP para aceptar y guardar nuestra foto cargada

Vamos a crear nuestro código del servidor para guardar de forma remota nuestra foto y devolver su URL usando PHP. PHP es un lenguaje web común y bien conocido; compatible también con muchos servicios de alojamiento web. Crea un nuevo archivo llamado upload.php y escribe en ese archivo el siguiente código:

Este script PHP básico simplemente toma un archivo POSTED llamado 'media' y luego lo guarda con un nombre de archivo aleatorio de cinco caracteres de la extensión JPG, que es generado por la función randomFileName(). Si logramos guardar la foto con éxito, el script repetirá la ubicación remota de la URL de nuestra nueva foto; de lo contrario, se repetirá "falso" si falla.

Ahora debes guardar y transferir el archivo upload.php a tu servidor. Además, también necesitarás crear una nueva carpeta en el mismo directorio que tu archivo upload.php llamado 'uploads'. Esta es la carpeta donde se guardarán nuestras imágenes. Asegúrate de que la carpeta de imágenes tenga los permisos de escritura adecuados (generalmente CHMOD 770) o nuestro script PHP no funcionará.

Ten en cuenta que si no tienes acceso a un servidor PHP, siempre puedes escribir un script en el idioma de tu elección (.NET, Ruby, etc.) que realice la misma tarea.


Paso 5: Cargar una foto y mostrar el progreso a través de nuestra barra de progreso personalizada

Antes de crear nuestra función, hay un par de cosas pequeñas que debemos hacer. La primera es crear una variable llamada androidUploadProgress en la parte superior de nuestras exportaciones de la declaración de FirstView. Esto hará un seguimiento del progreso de carga aproximado de nuestra carga de archivos en dispositivos Android. Desafortunadamente, en el momento de escribir este artículo, Titanium Mobile para Android no es compatible con la variable de progreso durante el evento onsendstream, lo que significa que no podemos calcular exactamente qué tan lejos estamos de la carga en los dispositivos Android y, por lo tanto, debemos utilizar un enfoque de mejor estimación.

Además, necesitamos crear una nueva variable de tipo string en el archivo "i18n/en/strings.xml" que contendrá la ubicación de nuestro script de carga del servidor. Agrega el siguiente elemento de tipo string después del existente de 'bienvenida', reemplazando la URL con la ubicación de tu propio script PHP.

Creamos ahora nuestra función UploadPhotoToServer, escribiendo el siguiente código en tu archivo FirstView.js. El mejor lugar para esta función es debajo de la sección cerca de la parte superior que oculta la barra de estado en los dispositivos iOS. Esto comienza con if(Ti.Platform.osname == 'iphone'. Esta función comprobará si nuestro usuario está en línea y, de ser así, creará un nuevo HTTPClient que enviará los datos multimedia a nuestro servidor PHP donde se guardarán y se devolverá la URL completa de la imagen cargada.

Esta es una función larga y forma la "carne" de nuestra aplicación Titanium , así que vamos a analizarla pieza por pieza. En primer lugar, creemos la función en sí, junto con el código inicial que ocultará el botón "Elegir foto" y, en su lugar, mostrará al usuario nuestra barra de progreso:

Notarás que estamos accediendo a nuestros componentes de visualización haciendo referencia a su índice dentro del objeto secundario FirstView. También podríamos haber declarado simplemente nuestros componentes de visualización en la parte superior de nuestro archivo FirstView.js y luego crear una instancia de ellos, sin embargo, hemos elegido hacer las cosas de esta manera para que comprendas cómo acceder al elemento secundario de una vista principal. A continuación, necesitamos crear una instancia de nuestro objeto XHR HttpClient y crear todos los controladores de eventos necesarios para rastrear cuándo se está ejecutando nuestra carga de HttpClient y si falla o ha tenido éxito. Agrega el siguiente código debajo de lo que escribiste anteriormente. Observa cómo estamos accediendo a la propiedad string "server" establecida anteriormente en el tutorial desde nuestro archivo strings.xml usando L("server"), y cómo el objeto de parámetro que envía nuestra publicación HttpClient se llama "media", que coincide exactamente con el Objeto FILE "media" esperado por nuestro script PHP.

Ahora editemos la función del controlador de eventos onsendstream. En esta función vamos a calcular el progreso de carga actual de nuestro archivo, y ampliaremos el ancho de la barra de progreso en consecuencia. Ten en cuenta que hacemos esto ligeramente diferente para Android que para iOS, ya que la propiedad "progress" de onsendstream no está actualmente implementada para Android.

Intenta ejecutar tu aplicación en el simulador ahora, y después de elegir una foto de la Galería, tu barra de progreso debería aparecer y debería aumentar de tamaño a medida que se carga el archivo. Debería verse como lo siguiente:

Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article

Paso 6: Terminando

Finalmente, necesitamos extender la función descarga (unload) del controlador de eventos. En él, debemos asegurarnos de que la barra de progreso muestre el 100% (especialmente para Android), y debemos determinar si el archivo se cargó correctamente en el servidor o no verificando si la propiedad responseText está establecida en "false". Si no es así, podemos asumir que todo funcionó A-OK y presentar a nuestros usuarios un cuadro de diálogo de alerta de confirmación donde pueden elegir abrir su imagen recién cargada en el navegador web. Luego, restableceremos nuestro diseño y todas las propiedades de nuestros objetos cuando estemos listos para la siguiente carga de fotos.

¡Eso es todo! Ejecuta la aplicación ahora en el simulador (Android o iPhone) o en tu dispositivo. Aún deberías ver el medidor de progreso de carga de archivos animado de 0 a 100%, y cuando se complete, debería aparecer un cuadro de diálogo de alerta como el que se muestra a continuación, dándole la opción de ver la foto recién cargada en el navegador.

Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article
Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.