En este post te mostraré una aplicación web y PWA que acabo de crear. Se trata de una app para llevar el control de la crianza de conejos. Básicamente es una app para cunicultura.

Esta app web que puede ser usada como app móvil sirve básicamente para llevar el registro de los conejos y tener un control sobre su edad, género, información de sacrificio, reproducción, ventas, etcétera.

También vamos a poder llevar los registros de reproducción de los conejos, tomando en cuenta la cantidad de días para el parto y muchas cosas más.

A lo largo del artículo te enseñaré todos los módulos del programa, la parte técnica, cómo descargar el código fuente y cómo probar la app web.

Información de la aplicación web

Esta app para conejos puede ser usada en el navegador web usando cualquier dispositivo ya sea computadora, tableta, teléfono móvil (android e iOs), etcétera. También puede ser usada como una app nativa usando el poder de las PWA.

La he creado con Vue.js, Buefy y Firebase. Si tú quieres tener tu propia app solo debes cambiar las credenciales de Firebase en el código fuente y podrás tener tu propio sistema.

Demostración pública

Si quieres probar la app sin tener que descargar el código ni ese tipo de cosas simplemente ingresa al siguiente enlace: https://parzibyte.github.io/cunicultura-app-demo/#/login

E inicia sesión con el correo test@ejemplo.com y la contraseña parzibyte. Ten en cuenta que el sistema es público y que cualquiera puede modificar los datos (excepto el usuario y contraseña).

Registro de conejo

Comencemos con lo primero: el registro de datos. Podemos registrar un conejo, elegir su género, colocar un identificador y varias fotos:

También necesitamos su fecha de nacimiento que puede ser seleccionada usando un calendario, y opcionalmente se puede colocar el padre y la madre del mismo.

Por cierto, puedes elegir varias fotos. Esto es porque es lo que realmente diferencia a los conejos.

Nota: las fotos son comprimidas para ahorrar espacio en el servidor.

Conejos

Una vez que hemos registrado un conejo, aparecerá en la lista. Aquí veremos bastante información, comenzando con el conteo de machos, hembras y totales en la parte superior:

Primero observamos que tenemos unos filtros para filtrar los conejos fallecidos o vivos, así como los vendidos o no vendidos. Igualmente podemos separarlos por género.

Luego tenemos su identificador, el género y los padres (solo en caso de que se hayan registrado). También tenemos la fecha de nacimiento junto con su edad actual, así como fotos que pasan en un carrusel.

Más tarde tenemos información para el sacrificio, reproducción, etcétera. Esto cambia dependiendo de la edad.

Finalmente tenemos las opciones para editarlo, marcarlo como vendido, marcarlo como fallecido o eliminarlo.

Venta de conejos

La cunicultura ofrece varias formas de generar ingresos y una de ellas es simplemente vender el conejo. Por ello es que agregué la opción de vender.

Al vender un conejo se solicita el monto:

Y ya después podemos ver los conejos vendidos y totales en su respectivo módulo:

Reproducción de conejos

Esta PWA también cuenta con la opción de llevar el registro de la reproducción de conejos. Esto solo aparece en el caso de que el género sea hembra.

Cuando accedemos al módulo de reproducción podemos ver la lista de todas las ocasiones en las que la coneja ha tenido gazapos (o como sea que se le diga) y podemos agregar uno nuevo:

Al agregar el registro de apareamiento en el sistema debemos elegir el conejo que es el padre (para, más tarde, evitar la consanguinidad) y la fecha de inicio de la gestación.

Es importante tener la fecha de inicio ya que la coneja tiene el parto en un plazo de 30 días, por ello es que se muestra información en la lista:

De este modo podemos saber cuántos días de gestación lleva la coneja, para tener un mejor control y no tener que dejar todo en nuestra memoria.

También podemos marcar el fin de la gestación indicando la fecha, y de este modo tendremos los datos siempre actualizados.

Autenticación al sistema

Para poder acceder a la app de control de conejos necesitaremos un usuario y contraseña; es decir, no cualquiera podrá ver o modificar los datos. Al iniciar se nos pide el correo y contraseña:

Estos usuarios los vamos a crear desde la página de Firebase, ya que la app no cuenta con la gestión de usuarios, solo con la autenticación de los mismos.

Aplicación móvil

Esta app se puede usar en el navegador o instalar como PWA. Básicamente debes visitar el sitio web e instalar la app. Una vez que la tengas instalada se verá así:

Y la podrás usar como se usa normalmente una app nativa:

Código fuente y descarga de la app

Esta aplicación para cunicultura es totalmente open source. El código te lo voy a dejar en mi GitHub haciendo clic aquí.

Una vez que lo tengas, debes contar con NPM y Node. Luego abre una terminal en el directorio del proyecto, y también abre el proyecto con un editor de código.

En la terminal ejecuta: npm install para instalar las dependencias, luego con el editor crea un archivo llamado .env basándote en el archivo .env.example y coloca ahí tus credenciales de Firebase, mismas que puedes obtener como se indica en este tutorial.

Una vez que hayas configurado el .env ve a Firebase y en Autenticación crea un usuario con correo y contraseña (antes de eso debes agregar un proveedor con método de correo y contraseña).

Ahora en la terminal ejecuta npm run serve y visita el enlace que te mostrará, ahí inicia sesión con el usuario previamente creado y ya podrás usar la app.

Para compilar la app y convertirla en PWA ejecuta npm run build y luego workbox generateSW workbox-config.js (si no tienes Workbox mira cómo instalarlo aquí).

Por cierto, las reglas de Firestore quedan así:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null
    }
  }
}

Y las de storage así:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

También es importante mencionar que al filtrar los conejos se va a mostrar un mensaje de error en la consola porque es necesario crear un índice en Firestore. Solo tienes que hacer clic en el enlace que muestra la consola para crearlo.

Como siempre, si necesitas ayuda al compilar, quieres cambios, una versión propia, etcétera puedes enviarme un mensaje.

Conclusión

He creado esta aplicación web para practicar un poco más con Firebase y Buefy (además de llevar el control de mis conejos).

Ahora he usado Firestore de nuevo y también el Storage, comprimiendo la imagen antes de subirla. Anteriormente ya había iniciado un proyecto de este tipo pero no era tan completo, pero igual te lo dejó por aquí.

Se me ocurre que esta app puede ser usada por toda la gente que se dedica a esto de manera profesional, y que éste proyecto también puede servir para cualquier estudiante que quiera presentarlo en su escuela.

Igualmente podría modificarse para la crianza de otros animales, pero como por ahora solo tengo conejos no tengo la necesidad de llevar el control de otro tipo de animales.

Ah, antes de que lo olvide… las fechas e información de los conejos lo tomé de aquí: http://www.veracruz.gob.mx/wp-content/uploads/sites/11/2011/08/conejos.pdf

Recuerda que puedes ver más proyectos míos en este enlace.