DEMO
Prueba el demo de esta app en: https://app-portafolio.glideapp.io/
HERRAMIENTAS UTILIZADAS
En este tutorial utilizamos:
Glide - https://www.glideapps.com/
Google Drive - https://www.google.com/drive/
Google Sheets - https://www.google.com/sheets/about/
PRE-REQUISITOS
Manejo de Google Drive
Manejo de Google Sheets
ACTIVIDADES PRELIMINARES
1. Crea una hoja de cálculo en Google Sheets. Esta hoja de cálculo servirá como base de datos para tu aplicación.
2. Crea una carpeta en Google Drive y sube las imágenes de los productos que estarán en tu aplicación.
3. Abre la hoja de cálculo que creaste y crea una columna para cada una de las características que quieres mostrar de tus productos.
4. Completa la información para cada producto. A cada producto le corresponderá una fila.
Para el caso de las imágenes debes colocar la URL correspondiente. Podrás adicionar o editar productos cada vez que lo requieras y la app se actualizará automáticamente.
CONSTRUYAMOS LA APP
Al interactuar con Glide puedes experimentar con todas las funcionalidades y opciones que ofrece.
Para el objetivo de este tutorial, aquí te compartiremos exclusivamente el paso a paso correspondiente a la aplicación que hemos creado de ejemplo.
5. Ingresa a tu cuenta de Glide y da clic en “New app”.
6. Selecciona la hoja de cálculo que creaste para esta app.
7. Estando en “Screens” da clic en “Columns”.
8. Da clic en “Image”. Nota que aparecen los nombres de las columnas de tu hoja de cálculo. Selecciona la que corresponde a las imágenes. Para nuestro caso, la columna “Foto”.
9. Da clic sobre alguno de los productos.
10. Esta es la información del producto que verán los usuarios de tu app. ¡Vamos a mejorarla!
CAMBIAR DE POSICIÓN LA IMAGEN
11. Da “Clic” sobre “Image” y arrástralo hacia arriba hasta la posición que deseas para la imagen con respecto a los otras especificaciones de tu producto.
En nuestro caso, la pusimos justo debajo del nombre de la marca del producto.
REVISAR Y ORGANIZAR LAS ESPECIFICACIONES DEL PRODUCTO
12. Estando en “Screens” y habiendo dado clic sobre alguno los productos de tu catálogo, revisa las opciones que están apareciendo en la columna izquierda. Estas opciones vienen de la información que tienes en la hoja de cálculo.
12.1. Para eliminar alguna de ellas y hacer que no aparezca en la app, da clic en la “x” que aparece cuando pones tu cursor encima.
12.2. Para ordenarlas, da “Clic” sobre la característica que quieras mover y arrástrala hacia arriba o hacia abajo hasta la posición que deseas con respecto a los otras especificaciones de tu producto.
12.3. Nota que alguna características están apareciendo con subtítulo y otras no, como:
Esto se debe a que algunas opciones están configuradas como “Basic Text” y otras como “Rich Text”:
La manera más fácil de corregir esto es configurar todas las opciones como “Basic Text”. Para lo cual tendrás que eliminar las opciones “Rich Text” y adicionar nuevas opciones como “Basic Text”. Esto se hace de la siguiente manera.
12.4. Da clic en el “+” que está ubicado en la esquina derecha superior. Luego da clic en “Basic Text”.
12.5. Da clic en “Column” y elige la característica del producto que quieres que esté visible en la pantalla de la app.
12.6. Elimina la que corresponde a “Rich Text” aplicando el paso 12.1 y acomoda la que corresponde a “Basic Text” aplicando el paso 12.2.
PERSONALIZAR TU APP
13. Da clic en “Settings”.
13.1. Aspecto
Prueba las opciones de la parte superior de la columna del costado izquierdo para personalizar el aspecto de tu app. Para el ícono de tu app puedes escoger un dibujo, un emoji o subir tu propia imagen. También puedes cambiar el color y el tema.
13.2. Nombre
Da clic en el campo debajo de “Name” y edita el nombre de tu app.
13.3. Autor
Da clic en el campo debajo de “Author” y edita el autor de tu app si lo requieres.
13.4. URL
Da clic en el campo debajo de “App URL” y edita la URL de tu app. Esta será la URL que compartirás para que los usuarios accedan a la app y puedan instalarla en sus teléfonos.
13.5. Descripción
Da clic en el campo debajo de “Description” y edita la descripción de tu app. Aprovecha para explicar brevemente de qué se trata tu app.
PROBAR TU APP
14. Da clic en “Open app”
¡Comienza a interactuar con tu app!
COMPARTIR TU APP
15. Da clic en “Share app”.
Elige la opción que deseas utilizar para compartir tu app.
Probablemente la opción que más utilices será “Copy link tu app”, pues te proporciona la URL para que puedas compartirla en tus perfiles de redes sociales, llamados a la acción, botones en tu sitio web o mensajes de WhatsApp. Con esta URL también podrás configurar un código QR.
Aquí termina este tutorial.
