Este artículo describe paso a paso el proceso para la creación de un app desde cero. En esta caso describimos los pasos a realizar en mobincube para crear un app hipotética de una compañía de alquiler de coches.
Esta app de prueba contine las siguientes secciones:
- Main screen: página de inicio del App con enlaces a las ofertas
- About screen: información general de la compañía con textos e imágenes
- Branch Map screen: mapa con etiquetas para cada marca
- Fleet screen: base de datos con la lista de la flota de la compañía y una vista detallada de cada vehículo
- Vista detalle de cada vehículo de la lista
- Hire screen: donde el usuario puede contratar el servicio
- Coupons screen: ofertas mostradas como cupones
Con este tutorial aprenderás cómo:
- usar las pantallas detalle
- usar las pantallas de mapas
- crear una base de datos editable remota
- usar una vista de datos como una lista de registros
- usar una vista de datos como una vista detallada de un registro
- crear un formulario para contratar servicios
- crear una página con cupones
- usar el cloud para actualizar el contenido del app y organizar los datos
Botones de navegación delas barras(activo/inactivo):
Barra de cabecera:
Botones de búsqueda en la base de datos de la barra:
Base de datos con la lista d eiconos para cada tipo de vehículoe:
Imagen detalle para cada categoría de vehículo en la vista detalle:
Iconos descriptivos para las especificaciones de los vehículos:
Otras imágenes usadas en este:
Una vez que las imágenes están listas y organizadas estamos listos para construir el app paso a paso. Es bueno tener un esquema simple para seguir un orden y tener una visión de la estructura de las páginas. Nuestra aplicación tiene este mapa:
Iniciando sesión y creado una nueva app:
Ves a www.mobincube.com e inicia sesión. En 'Mis apps' crea una nueva app. En este caso se llama "RENTAL APP":
Seremos redireccionados a la página de información de esa app (INFO).
Ahora podemos empezar a construir las pantallas de nuestra app, pulsa en 'Editar' en la barra de navegación y comencemos. Aparecerá la pantalla de edición de Mobincube.
Fíjate que todas las pantallas tienen 2 cosas en común, tienen una barra se cabecera y una barra de navegación. Las barras pueden crearse con el gestor de barras y arrastradas a cada pantalla en las que deseemos usarlas. Empecemos creando nuestras barras en esta primera pantalla.
La pantalla principal
- Abrir el gestor de barras
- Crear una nueva barra y acceder a ella
- Arrastrar los elementos de la pantalla a la barra (tablas, imágenes)
- Definir las propiedades de los elementos (color, fondo, ancho, acción)
- Arrastrar la barra a la parte de arriba o de abajo de mainscreen
El resultado de esta primera sección debe parecerse a la siguiente imagen:
La pantalla About
Ahora seguimos con la pantalla About. Esta es una pantalla muy simple que contendrá la barra de cabecera y la barra de menú al igual que la Main Screen. Como contenido esta página sólo tendrá un pequeño texto y una imagen. Fíjate que hemos asignado la acción 'ir a pantalla' en la barra de menús y dichas pantallas se han creado automáticamente, aunque no estén rellenas.
Estas páginas nuevas fueron creadas sin asignar ningún tipo de pantalla. Para la pantalla About seleccionaremos el tipo de pantalla detalle:
El resultado debería ser algo así:
La pantalla Branch
Esta pantalla será creada desde una pantalla tipo mapa. Básicamente tendremos una etiqueta de localización para cada marca que queramos referenciar.
Con lo que definiremos la pantalla Branch como una pantalla tipo mapa y en este caso añadiremos 3 diferentes marcas con la información de contacto y el logo dentro de la etiqueta del mapa.
La pantalla Hire
Esta sección permite al usuario alquilar un vehículo. Como veremos más tarde definiremos un total de 6 categorías de vehículos en nuestra base de datos, con lo que la pantalla Hire deberá adaptarse a esta condición.
Crearemos esta pantalla como tipo detalle. Que es el tipo de pantalla que permite insertar y enviar un formulario a través de SMS, un script o a un correo usando el cloud.
Puedes ver que por cada campo que definamos en nuestro formulario tenemos que definir un único nombre de referencia. Asegúrate de apuntarlos porque serán necesarios más tarde.
Empezaremos creando el contenido de la pantalla. Está se construirá usando textos, tablas y separadores así como una imagen para el botón de enviar.
Crear formularios, hire screen (EN)
Crear formularios, hire screen (EN)
Ahora primero insertamos la barra de cabecera y la barra de menús.
Crear formularios, hire screen (EN)
Ahora que la pantallas con el formulario está lista podemos decidir dónde queremos enviar los mensajes de reservas. Tenemos las siguientes opciones:
- Cloud: sección del formulario
- Un teléfono
- Un script personal
Empecemos con la opción del cloud. Recuerda que los nombres de referencia de los campos que hemos usado son los siguientes:
- name
- surname
- phone
- age
- pickUpD
- pickUpT
- deliveyDate
- deliveryTime
- type
Ahora veremos como enlazar a un SMS o script. Estos pasos son muy simples.
La pantalla Coupon
En esta sección describiremos cómo incluir un sistema de cupones a tu app. Si no estás interesado en este tema simplemente puedes saltarte esta parte del manual e ir a la parte de la pantalla Fleet.
Paro poder usar el sistema de cupones este debe estar activado. Esto puede hacerse activando el cloud. Las ofertas de los cupones están enlazadas con mobincube a través de una pantalla tipo HTTP con la URL generada en la sección de cupones del cloud. En donde se permite definir la oferta.
El cloud permite cambiar la oferta del cupón mostrando el cambio en el app sin la necesidad de volver a publicar dicha app.
Empecemos yendo al cloud y creando la oferta del cupón, y entonces lo enlazamos a nuestra sección de cupones de nuestra app a través de mobincube.
La pantalla Fleet
Bien, ya hemos hecho todas nuestras pantallas excepto la relacionad con las bases de datos. Estas pantallas son las que mostrarán los productos, inventario e información que queremos almacenar y ser capaces de editar.
Tendremos 2 diferentes tipos de vistas para nuestro contenido en las bases de datos. Uno será la vista lista y el otro la vista detalle.
La vista lista mostrará una lista de artículos (en esta caso coches) que se ajusten a la categoría o términos de la búsqueda. La vista detalle mostrará información detallada sobre cierto vehículo.
En total tendremos un total de 9 vistas lista:
- Vista lista de todos los vehículos ordenados por precio.
- Vista lista de todos los vehículos ordenados por capacidad de carga
- Vista lista de todos los vehículos ordenados por tamaño
- Vista lista de todos los vehículos que sean del tipo MiniVan
- Vista lista de todos los vehículos que sean del tipo MiniVan refrigerada
- Vista lista de todos los vehículos que sean del tipo Furgoneta
- Vista lista de todos los vehículos que sean del tipo Furgoneta refrigerada
- Vista lista de todos los vehículos que sean del tipo camión
- Vista lista de todos los vehículos que sean del tipo camión refrigerado
No habrá diferencia entre las vistas detalle, independientemente de la vista lista desde la que se acceda.
Todas estas vistas usan la misma fuente de donde obtiene los datos, con lo que sólo necesitamos una base de datos. Lo primero que hay que hacer es configurar esta base de datos. La configuraremos en mobincube y la subiremos al cloud para poder actualizarla remotamente sin la necesidad de volver a publicar.
Esta base de datos tiene los siguientes campos o columnas:
- widthCar-->numérica
- heightCa-->numérica
- lengthCar-->numérica
- widthLoad-->numérica
- heightLoad-->numérica
- lengthLoad-->numérica
- maxLoadKg-->numérica
- maxLoadCubicM-->numérica
- refrigerated-->texto
- license-->texto
- fuel-->texto
- passengers-->numérica
- priceDay-->numérica
- catText-->texto
- catImage-->imagen
- model-->texto
- detailImage-->imagen
Lo primero que tenemos que hacer es ir a la pantalla Fleet que ya hemos creado y definirla como una vista de datos. Entonces creamos la estructura de la base de datos y la enlazamos al cloud.
Lo siguiente es rellenar la base de datos creada con los datos. En este caso registraremos 2 coches por categoría. En total 12 automóviles:
- 2 minivans
- 2 furgonetas
- 2 camiones
- 2 furgonetas refrigeradas
- 2 minivans refrigeradas
- 2 camiones refrigerados
Antes de empezar a hacer esto subiremos las imágenes remotas que usaremos al cloud. Tenemos 2 campos en la base de datos que usan imágenes remotas:
- Imágenes detalle: 3 imágenes
- Imágenes de vista: 8 imágenes
Subamos las imágenes remotas a la sección de imágenes del cloud:
Subir las imágenes al cloud (EN)
Ahora podemos insertar todos los datos en nuestra base de datos que contendrá nuestra lista de vehículos disponibles.
Nuestros datos ahora están dentro de la base datos. Ahora estamos listos para definir nuestra primera vista lista (todo ordenado por precio).
Ahora que hemos creado la vista lista diseñemos la vista detalle. Los iconos que usaremos en esta vista serán almacenados localmente en el app usando el gestor de imágenes.
Ya hemos creado el primer grupo de vistas lista con su pantalla detalle. Enlacemos ahora nuestra vista lista a nuestra vista detalle.
La sección FLEET contiene las vistas lista y detalle. Podemos reusarla para configurar nuestras vistas faltantes:
- Vista lista de todos los vehículos ordenados por capacidad de carga
- Vista lista de todos los vehículos ordenados por tamaño
- Vista lista de todos los vehículos que sean del tipo MiniVan
- Vista lista de todos los vehículos que sean del tipo MiniVan refrigerada
- Vista lista de todos los vehículos que sean del tipo Furgoneta
- Vista lista de todos los vehículos que sean del tipo Furgoneta refrigerada
- Vista lista de todos los vehículos que sean del tipo camión
- Vista lista de todos los vehículos que sean del tipo camión refrigerad
Crearemos 8 duplicados de la pantalla FlEET y los nombraremos con un nombre descriptivo (byLoad, bySize, byMini, etc). Ahora cambiaremos el filtrado de la vista lista. La vista detalle no cambia.
Ahora que tenemos todas nuestras pantallas de flota podemos crear la barra de navegación y añadirla a todas las pantallas de la flota. Recuerda que la barra aún enlaza a la pantalla original que fue copiada. También queremos añadir a la barra de la flota enlaces a :
- Vista lista de todos los vehículos ordenados por capacidad de carga
- Vista lista de todos los vehículos ordenados por tamaño
- Vista lista de todos los vehículos que sean del tipo MiniVan
- Vista lista de todos los vehículos que sean del tipo MiniVan refrigerada
- Vista lista de todos los vehículos que sean del tipo Furgoneta
- Vista lista de todos los vehículos que sean del tipo Furgoneta refrigerada
- Vista lista de todos los vehículos que sean del tipo camión
- Vista lista de todos los vehículos que sean del tipo camión refrigerado
Por lo tanto creemos nuestra barra de navegación que enlazará con cada una de las vistas.
Añadamos las barras a nuestras pantallas. Recuerda que no se ha creado la barra con el punto de posición para la pantallas de la flota como hicimos con branch, hire y about.
Generemos una preview para el app para asegurarnos que podemos empezar el proceso de publicación.