Blogui App — App móvil de contenido sobre Ionic

Contexto

Blogui App es la versión móvil del producto de contenido Blogui: un feed estilo TikTok para leer, crear y compartir bloguis (artículos cortos), con perfil, comunidad, retos y notificaciones. La app está construida con Ionic 8 + Vue 3 + Capacitor 7 sobre el sitio existente de Blogui, y está publicada y disponible en la App Store y en Google Play.

Nota de alcance: el sitio web original de Blogui no se construyó como parte de este proyecto. La app móvil sí: se diseñó y se desarrolló desde cero, alineada con la lógica del sitio para que la experiencia sea coherente entre los dos canales.

Reto

Llevar una experiencia web de lectura larga a una app móvil que se sienta nativa y rápida, con navegación tipo “swipe” entre artículos, sin perder ni perfil, ni comunidad, ni notificaciones, ni la posibilidad de abrir un blogui directamente desde un enlace compartido.

Tipo de colaboración

Desarrollo y mantenimiento evolutivo de la app móvil híbrida desde el cero hasta su publicación en tiendas oficiales.

Mi aporte

• Construí la app móvil para iOS y Android desde el mismo código, lo que permite publicar mejoras en ambas tiendas sin duplicar trabajo.
• Logré un feed que se siente instantáneo: el siguiente artículo ya está listo cuando el usuario hace swipe, incluso con red lenta.
• Hice que un enlace compartido abra directo la pantalla del blogui correspondiente dentro de la app, no en el navegador.
• Sumé notificaciones push, inicio de sesión social, un editor de contenido con corrector ortográfico en español y un manejo cuidadoso del tema claro/oscuro.
• Preparé y firmé los builds, y acompañé el proceso de publicación en App Store y Google Play.

Resultado

Una app pública, disponible para descargar en ambas tiendas oficiales, que extiende a Blogui hacia un canal móvil con experiencia fluida de lectura y participación. La base híbrida hace que cada nueva funcionalidad pueda llegar a iOS y Android sin duplicar trabajo.

Stack

Ionic 8, Vue 3, Capacitor 7, TypeScript, Vite, Quill, OneSignal, Cypress y Vitest.

Cómo encajan sitio, app y tiendas Mostrar más

• Backend de Blogui (con su API REST y los datos de bloguis y comunidad) es la fuente común.
• Sitio web Blogui existe y consume ese backend, pero no fue mi alcance: la flecha punteada lo deja claro en el diagrama.
• Blogui App sí es el alcance del proyecto: app híbrida en Ionic + Vue + Capacitor que consume la misma API y replica funcionalidades clave en móvil.
• La app se distribuye en App Store y Google Play; el deep linking permite que un enlace del sitio abra directo la pantalla del blogui correspondiente dentro de la app.

Publicada en App Store y Google Play Mostrar más

• App Store (iOS) y Google Play (Android): la app está publicada y disponible para descarga en ambas tiendas oficiales (los enlaces de descarga están en la cabecera del proyecto).
• Proceso de publicación:
  • En iOS implicó cuenta de desarrollador, certificados y firma de los builds, y revisión por parte de Apple. Se documentó el flujo completo para el equipo.
  • En Android se generaron los paquetes firmados, con su ciclo de pruebas internas y promoción a producción.
• Los flujos de actualización (subir versión, escribir notas, mandar a revisión) quedaron documentados para que el equipo los pueda repetir sin fricción.

Feed estilo TikTok con caché instantánea Mostrar más

• En el arranque en frío, la app intenta precargar 25 bloguis y dibuja un splash con barra de progreso mientras eso pasa.
• Los bloguis quedan en una caché en memoria con límite de 50 elementos y evicción tipo LRU; los IDs se normalizan a número para evitar inconsistencias entre vistas.
• Al tocar un blogui, la app verifica el caché antes de mostrar cualquier loader: si el blogui ya está cacheado, se abre sin animación de carga; si no, se descarga y se cachea automáticamente.
• Al hacer swipe entre bloguis, se hace prefetch de los siguientes 3-4 en segundo plano, así el feed se siente fluido aunque la red sea lenta.
• Hay un overlay de error con botón “reintentar” para conexiones lentas o caídas, y manejo explícito de timeouts (5 s en lista, 8 s en blogui individual).

Funcionalidades cubiertas en la app Mostrar más

• Lectura de bloguis: feed principal, vista de blogui con swipe, lectura por categoría y por tag.
• Creación: pantalla de “crear blogui” con editor enriquecido (negritas, listas, imágenes, etc.) construido sobre Quill, con corrector ortográfico en español incrustado de forma local.
• Comunidad y perfil: perfil propio y de otros usuarios, bloqueos, configuración, soporte, sección de “Blogui Challenge” y vistas de comunidad.
• Cuenta: registro, login con código (token), Google login (Capgo Social Login), recuperación de contraseña, verificación y cambio de contraseña.
• Soporte y seguridad: pantallas de soporte, configuración de seguridad infantil, gestión de cuentas bloqueadas.
• Compartir: integración con la API nativa de compartir, copia al portapapeles y captura de pantalla para acciones contextuales.

Deep linking universal: del enlace del sitio a la app Mostrar más

• Un enlace público de un artículo se abre directo dentro de la app si el usuario la tiene instalada, en su pantalla de blogui correspondiente.
• En Android se logra con App Links y en iOS con Universal Links, con la verificación de dominio correspondiente en cada plataforma.
• La instrumentación quedó documentada con pruebas reales en ambos sistemas operativos para validar que el deep linking sigue funcionando después de cada release.

Notificaciones, login social y experiencia móvil Mostrar más

• Push notifications integradas con OneSignal, con eventos para que la app reaccione a notificaciones recibidas y a clicks del usuario.
• Login social con Google Sign-In configurado para la app.
• Almacenamiento local seguro para sesión, preferencias y caché ligera.
• Plugins nativos para cámara, compartir, portapapeles, navegador, sistema de archivos, hápticos, teclado y barra de estado, todos integrados con manejo de permisos y errores.
• Tema claro/oscuro con un sistema que fuerza tema claro en pantallas de autenticación (login, registro, recuperación, verificación) y restaura la preferencia original del usuario al salir, para que el formulario siempre se vea legible sin importar el tema activo.

Stack técnico y herramientas Mostrar más

• Framework UI: Ionic 8 sobre Vue 3 y TypeScript.
• Bundler: Vite, con soporte ampliado de navegadores.
• Bridge nativo: Capacitor 7 sobre los proyectos nativos de Android e iOS.
• Datos y networking: cliente REST, manejo de fechas, gráficas para pantallas con métricas y corrector ortográfico local en español dentro del editor.
• UI utilities: diálogos, efectos de página e íconos del sistema.
• Calidad: tests unitarios con Vitest y E2E con Cypress desde la primera versión.
• Desarrollo: scripts con livereload para iterar contra dispositivo real desde el repo.