🌿 CacaoApp - Desarrollo de una aplicación móvil basada en IA para identificar plagas en el cacao ecuatoriano fino de aroma mediante reconocimiento de imágenes

CacaoApp es una aplicación híbrida (web y móvil) que utiliza inteligencia artificial para detectar enfermedades y plagas en hojas de cacao ecuatoriano fino de aroma mediante análisis de imágenes. El sistema está construido con un frontend Ionic React + Capacitor y un backend Node.js que integra Google Gemini AI.

👥 Información del Proyecto

Curso: SOF-S-NO-10-1 (Décimo Semestre)
Grupo: 8

👤 Integrantes del equipo

Rol	Nombre	Correo
Gerente de Proyecto	Ortega Parrales Nathanael Esaias	nathanael.ortegapar@ug.edu.ec
Analista Funcional	Ortega Parrales Nathanael Esaias	nathanael.ortegapar@ug.edu.ec
Desarrollador	Molina Aguilera Katherine Daniela	katherine.molinag@ug.edu.ec
Desarrollador	Morla Gordillo Heryd Xavier	heryd.morlag@ug.edu.ec
Desarrollador	Monserrate Totoy Jair Michael	jair.monserrat@ug.edu.ec
Control de Calidad	Orellana Fernández John Michael	john.orellanafer@ug.edu.ec

📋 Características principales

🇪🇨 Enfoque especializado en cacao ecuatoriano fino de aroma
🔍 Detección automatizada de plagas y enfermedades en hojas de cacao
📱 Aplicación híbrida - funciona en web y Android con Ionic
🎨 UI moderna - Interfaz diseñada con TailwindCSS y DaisyUI
📲 Experiencia nativa - Componentes optimizados para móvil
🧠 Análisis con IA mediante Google Gemini
🖼️ Compresión inteligente de imágenes para optimizar rendimiento
🛡️ Seguridad - API key protegida en el backend
🚀 Respuestas rápidas y precisas
📊 Análisis detallado con información sobre la planta y recomendaciones

🏗️ Arquitectura del sistema

┌─────────────────┐    HTTP/HTTPS    ┌──────────────────┐    Google AI    ┌─────────────┐
│   Frontend      │ ──────────────→  │     Backend      │ ──────────────→ │   Gemini    │
│ (Ionic React)   │                  │   (Node.js)      │                 │     API     │
│                 │ ←──────────────  │                  │ ←────────────── │             │
└─────────────────┘    JSON          └──────────────────┘    Analysis     └─────────────┘

🚀 Requisitos del sistema

Frontend

Node.js 18+
pnpm (recomendado) o npm
Ionic CLI
Capacitor 7
Android Studio (para desarrollo móvil)

Backend

Node.js 18+
Clave API de Google Gemini
pnpm o npm

⚙️ Instalación y configuración

1. Clonar el repositorio

git clone <repository-url>
cd cacaoapp

2. Configurar el Backend

cd backend
pnpm install
cp .env.example .env

Configurar variables de entorno:

GEMINI_API_KEY=tu_clave_de_gemini_aqui
PORT=3000
NODE_ENV=development

3. Configurar el Frontend

cd ../frontend
pnpm install

# Instalar Ionic CLI globalmente si no lo tienes
npm install -g @ionic/cli

Crear archivo .env.local:

VITE_API_URL=http://localhost:3000
VITE_APP_NAME=CacaoApp
# Para pruebas móviles con túnel:
# VITE_API_URL=https://xxx.trycloudflare.com

🌐 Ejecución en desarrollo

Backend

cd backend
pnpm run dev

El servidor estará disponible en http://localhost:3000

Frontend Web

cd frontend
ionic serve
# o también puedes usar:
# pnpm run dev

La aplicación web estará disponible en http://localhost:8100

Live Reload en dispositivos

# Para desarrollo con live reload en dispositivos
ionic cap run android --livereload --external
ionic cap run ios --livereload --external

Frontend Android

cd frontend
ionic cap sync android
ionic cap open android

Se abrirá Android Studio para ejecutar en dispositivo/emulador

📱 Desarrollo móvil

Pruebas en dispositivos físicos

Para probar en dispositivos móviles reales, necesitas exponer el backend:

# Opción 1: Cloudflared (recomendado)
cloudflared tunnel --url http://localhost:3000

# Opción 2: ngrok
ngrok http 3000

Luego actualiza VITE_API_URL en .env.local con la URL del túnel.

🛠️ Compilación y distribución

Generar APK para Android

cd frontend
ionic build
npx cap copy android
npx cap open android

En Android Studio:

Selecciona Build > Build Bundle(s) / APK(s) > Build APK(s)
El APK se generará en: android/app/build/outputs/apk/debug/app-debug.apk

Build para producción web

cd frontend
ionic build --prod

🎨 Personalización de iconos

Generación automática

cd frontend
# Generar recursos para todas las plataformas
ionic capacitor run android --resources
# o manualmente:
pnpm dlx @capacitor/assets generate --android

Configuración manual

Coloca tu icono en assets/icon.png (512x512px)
Coloca tu splash en assets/splash.png (2732x2732px)
Ejecuta el comando de generación

📡 API Reference

Endpoint principal

POST /api/analyze

Request Body:

{
  "imageBase64": "base64StringSinPrefijo"
}

Response:

{
  "success": true,
  "analysis": {
    "isValidPlant": true,
    "isCacaoPlant": true,
    "hasPest": false,
    "pestType": null,
    "severity": null,
    "confidence": 0.95,
    "recommendations": [
      "La planta se ve saludable...",
      "Continúe con el cuidado regular..."
    ]
  }
}

📦 Estructura del proyecto

cacaoapp/
├── frontend/
│   ├── src/
│   │   ├── components/    # Componentes Ionic React
│   │   ├── pages/         # Páginas de la aplicación
│   │   ├── services/      # Comunicación con API
│   │   ├── hooks/         # React hooks customizados
│   │   ├── utils/         # Utilidades y helpers
│   │   └── theme/         # Configuración TailwindCSS/DaisyUI
│   ├── android/           # Proyecto Android (Capacitor)
│   ├── ios/               # Proyecto iOS (Capacitor)
│   ├── public/            # Assets públicos
│   ├── capacitor.config.ts # Configuración Capacitor
│   └── ionic.config.json  # Configuración Ionic
└── backend/
    ├── src/
    │   ├── config/        # Configuración Express
    │   ├── routes/        # Rutas de la API
    │   ├── controllers/   # Controladores
    │   ├── services/      # Lógica de negocio
    │   └── middlewares/   # Middlewares
    └── .env.example       # Variables de entorno

🔧 Tecnologías utilizadas

Frontend

Ionic React - Framework de UI móvil
React - Biblioteca de UI
Capacitor - Framework híbrido nativo
TailwindCSS - Framework de CSS utilitario
DaisyUI - Componentes UI para Tailwind
TypeScript - Tipado estático

Backend

Node.js - Runtime de JavaScript
Express.js - Framework web
@google/generative-ai - SDK oficial de Gemini
Sharp - Procesamiento de imágenes
dotenv - Variables de entorno
cors - CORS middleware
morgan - HTTP request logger

🛡️ Seguridad

✅ API Key protegida - Solo vive en el backend
✅ Compresión de imágenes - Reduce tamaño antes de enviar a Gemini
✅ Validación de entrada - Todas las peticiones son validadas
✅ Manejo de errores - Respuestas consistentes y seguras
✅ CORS configurado - Acceso controlado desde el frontend

🚀 Despliegue

Backend

Desarrollo: localhost:3000
Producción: Vercel, Railway, DigitalOcean, etc.

Frontend

Web: Vercel, Netlify, GitHub Pages
Android: Google Play Store, distribución directa APK

🤝 Contribución

Fork el proyecto
Crear rama feature (git checkout -b feature/nueva-funcionalidad)
Commit cambios (git commit -m 'Agregar nueva funcionalidad')
Push a la rama (git push origin feature/nueva-funcionalidad)
Crear Pull Request

📋 Proceso de desarrollo del equipo

Metodología: Desarrollo ágil con sprints semanales
Control de versiones: Git con GitFlow
Testing: Pruebas unitarias y de integración
Code review: Revisión obligatoria antes de merge
Documentación: Actualización continua del README y comentarios

📞 Soporte y Contacto

👨‍💼 Contacto del equipo

Gerente de Proyecto: Nathanael Ortega
📧 Email: nathanael.ortegapar@ug.edu.ec

🔗 Enlaces importantes

📚 Curso: SOF-S-NO-10-1 - Universidad de Guayaquil

🆘 Soporte técnico

Para soporte técnico, consultas o reportar bugs, contacta a cualquier miembro del equipo:

Katherine Molina: katherine.molinag@ug.edu.ec
Heryd Morla: heryd.morlag@ug.edu.ec
Jair Monserrate: jair.monserrat@ug.edu.ec
John Orellana: john.orellanafer@ug.edu.ec

📝 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

🙏 Agradecimientos

Google Gemini AI por la tecnología de análisis
Ionic Team por el framework móvil
Capacitor Team por el framework híbrido
TailwindCSS & DaisyUI por las herramientas de UI
Comunidad de desarrolladores por las librerías open source

Desarrollado con ❤️ para la comunidad cacaotera ecuatoriana

Proyecto académico - SOF-S-NO-10-1 | Grupo 8 | Universidad de Guayaquil

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
.vscode		.vscode
android		android
cypress		cypress
public		public
resources		resources
src		src
.browserslistrc		.browserslistrc
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
capacitor.config.ts		capacitor.config.ts
cypress.config.ts		cypress.config.ts
eslint.config.js		eslint.config.js
index.html		index.html
ionic.config.json		ionic.config.json
package.json		package.json
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

🌿 CacaoApp - Desarrollo de una aplicación móvil basada en IA para identificar plagas en el cacao ecuatoriano fino de aroma mediante reconocimiento de imágenes

👥 Información del Proyecto

👤 Integrantes del equipo

📋 Características principales

🏗️ Arquitectura del sistema

🚀 Requisitos del sistema

Frontend

Backend

⚙️ Instalación y configuración

1. Clonar el repositorio

2. Configurar el Backend

3. Configurar el Frontend

🌐 Ejecución en desarrollo

Backend

Frontend Web

Live Reload en dispositivos

Frontend Android

📱 Desarrollo móvil

Pruebas en dispositivos físicos

🛠️ Compilación y distribución

Generar APK para Android

Build para producción web

🎨 Personalización de iconos

Generación automática

Configuración manual

📡 API Reference

Endpoint principal

📦 Estructura del proyecto

🔧 Tecnologías utilizadas

Frontend

Backend

🛡️ Seguridad

🚀 Despliegue

Backend

Frontend

🤝 Contribución

📋 Proceso de desarrollo del equipo

📞 Soporte y Contacto

👨‍💼 Contacto del equipo

🔗 Enlaces importantes

🆘 Soporte técnico

📝 Licencia

🙏 Agradecimientos

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Contributors

Uh oh!

Languages