Onelingo MVP: Lo que aprendí cuando mi app de idiomas no salió como esperaba
¡Hola a todos! Hoy no vengo a traerles el típico tutorial donde todo sale perfecto a la primera. Vengo a contarles la historia de Onelingo, una app de micro-desafíos diarios de idiomas que intenté construir usando Hugging Face Spaces.
Aunque el resultado final no fue exactamente lo que visualicé inicialmente, el proceso me dejó lecciones invaluables sobre despliegue, autenticación y la importancia de una arquitectura limpia. Aquí les comparto mi "Post-Mortem" técnico.
1. El concepto: Onelingo
La idea era crear una alternativa a Duolingo pero sin niveles infinitos: solo 3 micro-desafíos diarios (Reading, Listening y Speaking).
El stack elegido:
- Hosting: Hugging Face Spaces (Static SDK).
- IA de apoyo: HuggingChat (Llama 3 / Qwen).
- Frontend: HTML/JS/CSS con Tailwind vía CDN.
2. El primer obstáculo: El "Rito de Iniciación" de Git
Al intentar mover el código desde el editor web de Hugging Face a mi entorno local (WebStorm), me topé con el error que detiene a muchos principiantes:
remote: Invalid username or password. fatal: Authentication failed.
El aprendizaje:
Hugging Face no usa tu contraseña de usuario para las operaciones de Git. Necesitas un Access Token.
La solución técnica:
Si te sucede esto, debes forzar la URL del remoto para incluir tu token:
git remote set-url origin https://TU_USUARIO:TU_TOKEN_HF@huggingface.co/spaces/TU_USUARIO/onelingo-mvp
Tip: Genera tu token en Settings > Access Tokens con permisos de "Write".
3. El error de lógica: El "Esqueleto" sin cerebro
inicialmente, la app se veía genial con Tailwind, pero al hacer clic en las opciones de respuesta, no pasaba nada. El código generado por la IA era visualmente correcto pero funcionalmente vacío.
El Aprendizaje:
No confíes ciegamente en el primer bloque de código que te da una IA. Siempre verifica que las funciones de validación de estado (como el manejo de respuestas correctas/incorrectas) estén implementadas.
La solución futura:
Para evitar esto, mi recomendación es separar la lógica en archivos distintos desde el principio:
-
index.html: Estructura. -
style.css: Diseño. -
app.js: El "cerebro" (validación de desafíos y Web Speech API).
4. Implementando speaking: El reto del Navegador
Intentamos usar la Web Speech API para el reconocimiento de voz. Aunque funciona bien en Chrome de escritorio, puede ser muy inestable en navegadores móviles o integrados (como el de Instagram o Twitter).
Aprendizaje clave:
Si tu app depende del micrófono, asegúrate de manejar los errores de permisos y de informar al usuario si su navegador no es compatible.
5. ¿Qué haría diferente la próxima vez?
Si estás pensando en crear un MVP similar, aquí te dejo mi hoja de ruta mejorada:
- Arquitectura modular: No metas todo en un solo
index.html. Usa una estructura de carpetas clara para que sea fácil de depurar. - Validación de IA: En lugar de pedir "hazme la app", pide "hazme la lógica de validación para un array de objetos JSON". Es mucho más preciso.
- Hugging Face vs Vercel: Hugging Face es increíble para demos de IA, pero si tu app es puramente frontend (Static), Vercel o Netlify ofrecen un flujo de Git mucho más amigable para principiantes.
Conclusión
A veces, el éxito de un proyecto no está en el despliegue final, sino en los bugs que lograste entender. Onelingo me enseñó que la autenticación con tokens y la estructura de archivos son los cimientos de cualquier proyecto serio.
¿Has tenido algún proyecto que no salió como esperabas? ¡Cuéntame tu experiencia en los comentarios y qué aprendiste de ello! 🚀
Nota: Este tutorial es parte de mi serie de aprendizaje continuo como desarrolladora nómada. ¡Sigamos construyendo!
Top comments (0)