Crea una App para tus catálogos y presentaciones en 10 minutos

En este tutorial vamos a crear una App para tus catálogos y presentaciones desde cero.
Crearemos una App Quiosco que podrás probar en tu propio dispositivo móvil.
02

Paso 1: Descarga los recursos para la app

Puedes utilizar tus propios contenidos, pero para hacer este ejemplo te facilitamos algunos de prueba en este enlace:

Descargar

  1. Descomprime el archivo .zip que has descargado
  2. Verás dos carpetas: “Contenidos de la App” e “iconos”
  3. Guarda las carpetas para más adelante.

Paso 2: Crea el Proyecto App

Para empezar con la app, tenemos que crear el proyecto app en 480iManager.

  • Abre el programa y aparecerá la pantalla de bienvenida. Pulsa el botón “Crear Nueva App”.
bienvenida1

Completa los datos del asistente de creación de Apps:

nueva app
  • Nombre de la App: Pon el nombre que quieras.
  • Ubicación del proyecto: Automáticamente se creará la ruta donde se guardará el proyecto.
  • Tipo de App: Selecciona “App Quiosco”.

Finalmente pulsa el botón “Crear”.

Paso 3: Prepara el contenido para la app

Ahora vamos a guardar dentro del proyecto app los contenidos de ejemplo que hemos descargado antes:

  • Vamos a “Añadir contenido” en la parte izquierda de 480i Manager y elegimos, “Abrir carpeta Libraries”.
abrir carpeta libraries
  • Se abrirá una ventana del explorador con la carpeta Libraries del proyecto. Pegamos aquí dentro las dos carpetas que hemos descargado antes.
Captura

Paso 4: Añade contenido a tu app

  • Volvemos a 480i Manager y nos dirigimos a la pantalla de añadir contenido pulsando en el árbol de la izquierda (en la imagen el icono con el número “1”).
  • Buscamos el contenido PDF y pulsamos en “Añadir”. (iconos “2” y “3” en la imagen)
añadir pdf
  • Se abrirá un asistente para añadir el PDF.
  • Pulsamos en “Seleccionar” y se abrirá directamente la carpeta “Libraries” que es donde hemos dejado antes los contenidos. Hacemos doble clic sobre el PDF que queramos añadir, por ejemplo sobre el PDF llamado “AMG GT.pdf”.
formPDF
  • En el campo “Título” aparecerá automáticamente el nombre del fichero, si queremos podemos editarlo (también podremos editarlo más adelante)
  • Ahora repetimos el proceso para añadir el siguiente PDF, llamado “CLA Coupe.pdf”.
  • Seguimos añadiendo los PDFs: “Clase G.pdf”, “Clase GLE.pdf” y por último “GLE Coupe.pdf”.
  • Ahora añadiremos el vídeo, el proceso es parecido al de PDF, vamos a “Añadir Contenido” y seleccionamos “Vídeo”.
video mp4
  • Se abrirá el asistente, seleccionamos el archivo MP4 de la carpeta “Libraries” llamado “Video.mp4”. Ahora pulsamos en “Añadir” y ya tendremos el vídeo añadido en la app.
form video
  • El último elemento que añadiremos es una URL, para ver una web embebida en la app. Volvemos a la pantalla de añadir contenido y seleccionamos el contenido “Página web”.
añadir web
  • Escribimos un nombre en el campo “Título” y  pegamos la URL (siempre debe tener delante el http://). Para finalizar clicamos en “Añadir”.
form web

Paso 5: Personaliza tu app

Añade los iconos

Hay dos tipos de iconos, el icono principal de la App y los iconos de cada cada contenido.

1. El icono principal de la App (el que se verá cuando los usuarios se instalen la App en sus dispositivos)

  • Para añadir este icono, tenemos que clicar en “Configuración de la App” en el árbol de la izquierda y pulsar en la pestaña “Información General”.
  • Una vez ahí, veremos una imagen por defecto “Aqui tu icono”,  pulsamos encima y se abrirá la carpeta “Libraries” y elegimos el icono llamado “ico_App.png”.
info general app
icono cambiado app

2. Ahora cambiaremos el icono de los contenidos PDF, vídeo y la URL:

  • Pulsamos sobre el primer contenido en el árbol de la izquierda (ver imagen siguiente)
  • Pulsamos en la opción “Icono publicación:” (ver flecha azul en la imagen)
  • Se abrirá la carpeta “Libraries” y elegimos el icono de la publicación llamado “ico_(nombre de la publicación).png”
  • Repetimos esto con cada PDF, vídeo y url y ya tendremos todos los iconos listos.
icono cambiado publicacion

Paso 6: Exporta y pre-visualiza tu app en el Smartphone

Una vez hemos acabado de configurar y personalizar nuestra app, para poder pre-visualizarla en tu dispositivo móvil, tienes que instalar la app “480i Viewer” en tu smartphone o tablet.

Puedes descargar la app escaneando este QR o busca “480i viewer” en App Store o Google Play:

qrr

Una vez instalada la app, volvemos a 480i Manager y pulsamos en “Exportar App” en la parte superior izquierda.

Al finalizar la exportación se abrirá un asistente para enlazar el smartphone o tablet con tu ordenador. Abre la App “480i Viewer” y sigue los pasos del asistente.

Una vez ha acabado de enviarse la app, ya puedes abrir el proyecto desde tu smartphone o Tablet.

Continúa personalizando más tu app

Añade Banners

Para añadir los banners a tu app vamos a “Configuración de la app” -> “Diseño App” y clicamos en “Banners”.

  • Ahora seleccionamos “Banners verticales” y pulsamos en “Añadir”
  • Se abrirá de nuevo las carpetas del proyecto, entramos en la carpeta “Libraries” y seleccionamos el banner vertical llamado “banner_V.png” y pulsamos “Seleccionar”.
banners añadidos V

Cambia el Tema del Quiosco

Ahora cambiaremos los colores del tema para personalizar los colores de nuestra app. Para esto nos dirigimos a “Diseño App” -> “Temas” y elegimos “Personalizado” en el menú desplegable.
Cuando seleccionamos personalizado nos deja cambiar los colores de cada parte de la app.
En la siguiente captura puedes ver un ejemplo de tema personalizado, pero puedes adaptarlo cómo a ti más te guste.

temas

Pulsa de nuevo Exportar para enviar los cambios a tu dispositivo móvil.

¿Tienes alguna duda?

Contacta con nuestro equipo de soporte aquí: Abrir Ticket

Ir al Foro