En este post te mostraré el código fuente (y también la ejecución) de una aplicación móvil de punto de venta para Android. Está escrita usando Dart y el framework Flutter así que teóricamente también puede compilar para iOS.

Esta app de sistema de ventas móvil se conecta a internet y consume una API de Laravel que a su vez también tiene versión web.

Debido a que puedes modificar el código a tus necesidades, puedes crear tu propia copia y montarla en una red local o en internet.

Inicio – Login

Al inicio nos encontramos con una pantalla de login.

Ese módulo realiza la autenticación con el servidor y en caso de que las credenciales sean correctas guarda el token usando las shared preferences del dispositivo; ya que no quise usar SQLite porque eran datos muy simples.

Antes de mostrar la pantalla de inicio de sesión verifica si ya existe un token y comprueba si es válido; en caso de que sí, redirecciona al escritorio. De este modo digamos que la sesión del usuario se queda guardada.

La petición está aquí:

See the gist on github.

Estamos usando async y await; esperamos a que se guarde el token en las SharedPreferences:

See the gist on github.

Y después regresamos la respuesta. Lo demás es puro diseño:

See the gist on github.

Puedes ver que uso un input de tipo correo y un input de tipo contraseña. Además, el formulario está debidamente validado. Y finalmente utilizo algunas variables booleanas para mostrar que la app está cargando.

Constantes

Es buen momento para mostrar las constantes de la app escrita en Flutter. Son simples valores que utilizo en otros lugares y que dejo en un solo lugar para cambiarlos de manera fácil si es necesario:

See the gist on github.

Si montas la app web de Laravel en otro servidor entonces ahí sería en donde pondrías la IP o dominio del servidor.

Navegación y escritorio

Aquí quiero mostrar dos cosas. El escritorio es puro diseño en un grid:

See the gist on github.

Fíjate que cada tarjeta invoca a un método de navegación. Los métodos para cambiar a distintos lugares dentro de la app están aquí:

See the gist on github.

Así es como nos movemos entre distintas pantallas de la app.

Productos

Después de eso tenemos el CRUD de los productos. Las 4 operaciones funcionan de maravilla. Comencemos con el que se encarga de obtener los productos de la API de Laravel y mostrarlos en una lista con dos botones: uno para editar y otro para eliminar:

Para traer los productos desde la API de Laravel alojada en un servidor usamos lo siguiente:

See the gist on github.

Aquí la respuesta no importa (de hecho se quedó una cadena de prueba) ya que estamos estableciendo la lista directamente, en lugar de regresarla. Lo que hacemos es asignar a “productos” el valor de decodificar la respuesta; todo esto en caso de que el código de estado sea 200.

Es buen momento para mostrar el código que elimina el producto usando una petición HTTP DELETE.

See the gist on github.

Recibe el id y hace la petición. Por cierto, nota que para todas las peticiones autenticadas incluyo el token que me dieron al iniciar sesión.

Finalmente veamos el diseño. Para dibujar la lista usamos un ListView.builder y nos ayudamos de un índice que nos pasa para dibujar correctamente cada elemento:

See the gist on github.

Observa dos cosas: existen dos botones. Uno para editar, que usa la navegación para ir al formulario de edición; y otro que muestra una alerta de pregunta; misma que veremos a continuación.

Diálogos o alertas de confirmación

Aquí está el código que permite reutilizar la alerta. Simplemente crea una alerta con dos botones que se le pasan al crearlo:

See the gist on github.

Debo admitir que el código es tomado de algún lado que no recuerdo; pero no es una copia exacta pues lo modifiqué para hacerlo reutilizable ya que el original no permitía especificar distintas acciones de acuerdo al botón.

De igual forma gracias a quien lo haya escrito en primer lugar. Aquí vemos un ejemplo para confirmar la eliminación de un producto desde el sistema de ventas para Android:

Agregar producto

Si se toca el floating action button en la pantalla principal de productos se navega al siguiente formulario:

El formulario está validado igualmente. Su diseño es así:

See the gist on github.

Si la validación es exitosa entonces se hace una petición POST a la API para guardar el producto:

See the gist on github.

Editar productos

Veamos el de edición de un producto ya que en primer lugar se obtiene el producto para rellenar los campos:

See the gist on github.

Después vemos el diseño del formulario que es idéntico al de agregar productos:

See the gist on github.

Y finalmente cuando se guarda el producto se hace una petición PUT para actualizarlo en la API:

See the gist on github.

He mostrado todo esto porque para los clientes es algo parecido; es decir, es igualmente un CRUD, así que no mostraré código.

Clientes

Dejaré la captura de pantalla de cómo se ven los clientes dentro de la aplicación:

Ver ventas

Si desde el escritorio navegamos a ventas podemos ver la lista de las mismas. Comenzamos viendo la petición HTTP GET que las trae:

See the gist on github.

Hacemos lo mismo que con los productos: mostramos las ventas en una lista. Lo que cambia aquí es que fue un poco complejo calcular el total debido a que el total no se guarda en la base de datos, sino que se calcula de acuerdo a los productos vendidos:

See the gist on github.

Fíjate en la línea 33 a la 43; ahí se calcula el total de acuerdo a los productos. También se usa un formateador de dinero que no hace otra cosa más que lo que su nombre indica.

Otra cosa interesante es para la fecha; debido a que se guardan los milisegundos o la zona horaria o algo, lo remuevo usando varias funciones de cadena de Dart.

Detalle de venta

Se puede mostrar el detalle de una venta. Esa pantalla se compone de varios elementos. Lo que más me gustó fue que logré que la lista de productos no ocupara todo el alto de la pantalla y que se hiciera scroll.

Veamos primero la petición GET para obtener la venta:

See the gist on github.

Ahora el diseño del cual me siento más orgulloso:

See the gist on github.

Y la operación de eliminar es parecida a la de los productos. De igual modo si tienes dudas voy a dejar todo el código fuente completo al final del post.

Créditos

Ahora veamos los créditos de las imágenes y algunos botones que dirigen a mis redes:

Por el momento no cuenta con un botón del repositorio a GitHub de la app porque cuando programé esa parte no pensaba liberar el código fuente.

Descargar aplicación

Si quieres descargar la aplicación puedes ir al repositorio del sistema de ventas en Laravel; lo he subido ahí pues GitHub no me dejó subirla a la página de releases.

Descargar código fuente

Esta app es open source así que le puedes hacer las mejoras que quieras. El código fuente está en mi GitHub.

Demostración de la aplicación

También he grabado un vídeo que muestra cómo funciona la app:

Enlaces de interés

Recuerda que esta app consume una API de Laravel y que originalmente este sistema está creado con Laravel, pero adaptado para móvil.

Te invito a ver otros proyectos que he realizado.