En esta guía vamos a crear una App para compartir imagenes de Halloween.
Vamos a ver paso a paso como crearla.
Primero creamos una pantalla tipo DETALLE como pantalla de presentación. En alternativa podemos usar una pantalla tipo splash o una Imagen Interactiva.
Añadimos una Imagen de CABECERA
Y añadimos en el centro de la pantalla un botón con un elemento imagen, con un texto, a la cual asignaremos la acción: Abrir Pantalla y como destino una pantalla IMAGE que crearemos.
De esta forma, al pinchar el botón se abrirá la pantalla imagen que será tipo VISOR DE DATOS.
Al abrir la nueva pantalla IMAGE tendremos que crear nuestra BASE DE DATOS.
La idea de esta App es la de enseñar Imágenes Locales (cargadas desde nuestro ordenador), Imágenes Remotas (cargadas desde un servidor externo en el que alojamos unas imagenes, en nuestro ejemplo será Dropbox) y URLS de imagenes, tambien alojadas en un servidor externo tipo Dropbox. Estas últimas se podrán compartir externamente con el dispositivo.
Así que, insertando imagenes locales y remotas, los usuarios verán las mismas imagenes si tienen una conexión Internet o también si no la tienen.
Sabemos que sin una conexión internet siempre es posible visualizar imagenes subidas localmente, desde un ordenador.
Por esta razón añadiremos 3 campos:
Local Image --> tipo imagen local
Remote Images --> tipo imagen remota
URLs --> tipo texto
En esta pantalla crearemos una VISTA DETALLE
Insertaremos otra cabecera y crearemos una barra “Bar Share”, que insertaremos en las Propriedades de la Vista.
Crearemos una barra con 4 celdas e iconos
A cada icono asignaremos una acción:
Primer icono: Acción Previous
Cuarto icono: Acción Next
Ambos iconos tienen la función de ver las imágines tipo galería y al pinchar el botón se podrá ir delante o atrás.
Segundo icono: Acción Compartir.
Queremos que al pinchar el botón Compartir, el usuario pueda compartir las Urls de las imágenes que tenemos en la base de datos.
Como destino de la acción indicaremos el campo de las urls de nuestra base de datos: (Scary Images.URLs)
Vamos ahora a añadir una nueva vista tipo detalle que se llamará: “Detail_2”.
Esta nueva vista se va a abrir desde el tercer icono, lo de guardar. Le asignaremos la acción: Abrir vista: “Detail_2” donde pondremos las instrucciones para descargar y guardar las urls de nuestra base de datos.
Nos falta sólo arrastrar la barra dentro de las vistas creadas.
Ahora pasamos a la segunda vista detalle: “Detail_2” en la que vamos a escribir un texto con las instrucciones para descargar las urls de las imagenes de la base de datos.
Abajo pondremos un botón “Descargar” al cual le asignaremos la acción: Abrir url y como destino el campo de las urls en nuestra base de datos, ya que se trata de un campo que compartir: (Scary Images.URLs).
Volvemos a la vista detalle 1 “Detail_1” y arrastramos el elemento imagen de los campos de la base de datos:
Local Image
Remote Images
De esta forma el usuario podrá visualizar las imagenes locales si no tendrá conexión internet, y las remotas si tendrá internet.
Pasamos ahora a la EDICIÓN DE LA BASE DE DATOS:
Tendremos que rellenar las 3 columnas como en la siguiente imagen:
1. COLUMNA 1 “Local Image”: Pondremos en esta columna 7 imágenes que vamos a subir desde nuestro ordenador (o desde el Cloud si lo utilizamos en nuestra App).
Estas imágenes se visualizarán cuando el usuario no tenga una conexión internet, ya que son locales.
2. COLUMA 2 “Remote Images” : En esta columna a partir de la fila 8, pondremos las url de las imagenes que tenemos alojadas en Dropbox. Estas imagenes, se visualizarán sólo si los usuarios tienen una conexión internet, ya que están subidas en remoto (online) y por esta razón las ponemos desde la fila 8, para que no se superpongan a las imagenes locales, por si el usuario utilice internet y pueda visualizar ambas las imagenes.
3. COLUMNA 3 “URLs”: En esta columna pondremos en las primeras 7 filas las mismas urls de las imágenes subidas en la columna 1 y 2 y que están alojadas en dropbox. Estas se utilizarán con el botón COMPARTIR y en el caso que el usuario no utilice internet. (se visualizarán junto a las imágenes locales).
4. Desde la fila 8 hasta la 14 copiaremos las mismas urls de la columna 2 (alojadas en dropbox) y de la columna 3, que se visualizarán junto a las imagenes remotas, cuando el usuario utilice internet.
En ambos casos (con o sin conexión Internet) el usuario será capaz de ver todas las imagenes insertadas.
NOTA: Cuando vamos a compartir las URLS de las imágenes desde dropbox, tendremos el siguiente enlace que acaba con un (=0):
Para que el enlace se comparta correctamente con el publico, tendremos que cambiar el parámetro =0 con =1 como en la siguiente imagen:
Una vez acabada la base de datos, podremos comprobar el funcionamiento de nuestra app en el simulador.
El resultado será como esto:
Al pinchar el botón “Next” (imagen 1) se pasará a la siguiente imagen de la base de datos.
Al pinchar el botón “Compartir” (imagen 2) se abrirán las aplicaciones instaladas en el dispositivo del usuario que comparte, como Facebook y Tweeter (Imagen 3).
Al pinchar el botón “Descargar”, se abrirá la url de la imagen y se descargará la imagen en el la galería del móvil (Imagen 4).