DesarrolloLibre, App Movil para Android, Cursos Online y Blog

Video thumbnail

Quería presentarles mi aplicación móvil para Android, que engloba tanto el contenido de DesarrolloLibre como la Academia (cursos en línea). Esta aplicación fue generada con Flutter, lo que nos permite unificar el proyecto para múltiples sistemas operativos como Android, iOS, Windows, macOS, y Linux.

La aplicación integra tres áreas principales: el Blog, la Academia (cursos) y la sección de Usuarios (para el login). La interfaz cuenta con un modo oscuro (Dark Mode).

1. Sección Blog

La sección Blog nos permite consumir el contenido del sitio web desde el móvil.

Navegación: Tenemos categorías típicas para buscar publicaciones, un filtro por idioma y una función de búsqueda (que requiere presionar Enter).

Clasificación: Los artículos se pueden ver ordenados por fecha o clasificados por Cursos o Libros.

Detalle del Post: El detalle del artículo (imagen, título, etiquetas y categorías) es un WebView que, aunque funcional, fue una pesadilla de implementar, ya que conseguir un WebView fiable para múltiples plataformas (como Mac y Windows) sigue siendo un desafío.

2. Sección Academia y Full Screen

Esta es la parte más interesante, donde se gestionan los cursos.

Funcionalidad: Mantiene la misma funcionalidad que la web, incluyendo el detalle de los cursos y la opción de compra.

Visualización de Clases: Se utiliza un WebView para la reproducción de las clases. Al igual que en la web, el usuario puede navegar por secciones, ver las notas de la clase y consultar los comentarios.

Modo Full Screen: Recomiendo encarecidamente utilizar el modo full screen para una mejor visualización, especialmente en pantallas pequeñas.

Cursos Gratuitos: Como promoción por el lanzamiento de la aplicación, incorporé una pestaña nueva para Cursos Gratis. Estos son formatos light (con algunas secciones) de mis cursos más populares (Laravel y Django), accesibles sin compromiso, solo registrándose en la plataforma.

3. ️ Desarrollo para Windows y macOS (Próximamente)

Mi idea es aprovechar el ecosistema de Flutter para llevar la aplicación a otras plataformas.

Windows: Ya tengo la versión de Windows lista (que me gusta más que la móvil). Aquí se observa la misma aplicación con un diseño adaptativo.

Características Adicionales (Versión Windows): En esta versión de escritorio agregué una función de Favoritos para guardar publicaciones, y una sección de Preguntas Random (al estilo Duolingo, pero mucho más simple) para practicar de manera entretenida.

DesarrolloLibre, App Android, Cursos Online y Blog - V2, preguntas y respuestas, múltilenguaje +

Video thumbnail

Novedades: Versión 2 (Preguntas, Múltiples Idiomas, Favoritos)
Quiero compartir las novedades de la Versión 2 de la aplicación Flutter para Android (de momento, la única plataforma disponible).

1. Soporte a Múltiples Idiomas

Interfaz: La novedad más importante es el soporte a múltiples idiomas (español e inglés), lo que cambia toda la interfaz.

Contenido: El contenido de los cursos se mantiene en español, pero en el Blog, el filtro de idioma ahora toma el idioma del perfil para mostrar solo las publicaciones traducidas correspondientes.

2. ❤️ Favoritos de los Posts

Ahora se pueden agregar publicaciones a la lista de Favoritos y consultarlas posteriormente, una mejora para la lectura diferida.

3. Preguntas y Respuestas (Juego)

Implementé una sección de Preguntas que se consumen desde una API propia (desarrollada en Laravel).

Uso: El contenido se divide por tecnología (ej., Django y Flutter). Las preguntas están traducidas al idioma del perfil del usuario (español o inglés).

Mecánica: Es un juego sencillo: se selecciona la respuesta correcta (verde) o incorrecta (rojo). En esta versión, el resultado se queda en local y no se almacena, siendo una herramienta de entretenimiento.

4. Modo Responsivo Mejorado

Se realizaron mejoras de diseño en la sección de Academia para optimizar el espacio en Android.

Botón de Ocultar Bloque: Se agregó un botón para mostrar u ocultar el bloque lateral (secciones, notas, comentarios y sobre el curso) y así dar más espacio a la visualización del contenido.

Navegación Árbol: El árbol de secciones y clases ahora está accesible en un menú de tipo hamburguesa para navegar cómodamente.

Actualización V5: Venta y Descarga de Libros

Por último, quería mencionar los cambios en producción para la Versión 5 de la aplicación, enfocada en la gestión de libros.

1. Gestión de Libros Integrada

Se agregó el apartado de Libros en la sección de Academia (junto a los cursos).

Compra: El usuario autenticado puede ver qué libros ha adquirido y cuáles no. La compra se realiza mediante el widget de PayPal.

Cupones: Si el usuario ya adquirió un curso o path previamente, se genera un cupón que puede aplicar para obtener el libro de forma gratuita.

2. Descarga de Libros

Al acceder a un libro adquirido, se habilita la opción de Descarga PDF.

El proceso redirige a un enlace externo para realizar la descarga en la carpeta predeterminada del dispositivo (lo cual fue más fácil que gestionar la descarga directamente en Flutter).

Recuerda que la aplicación es completamente gratuita y la mantengo yo solo, por lo que las actualizaciones (que iré documentando en videos de YouTube) se hacen de manera progresiva. Si te interesa, puedes encontrar el enlace de descarga en la descripción.

Extra: Modularización de MI plataforma de pagos para venta de cursos/libros con Stripe/Paypal en web y mobile

Video thumbnail

Para evitar un controlador para cada plataforma, el truco es modularizar y establecer un conjunto de propiedades comunes que todos los pagos deben llenar, independientemente de su origen.

El método intermedio clave es sendRequestAPI(), un método protected que se llama desde el controlador principal. Este se encarga de discriminar la fuente del pago y unificar la respuesta.

Este método intermedio llama a la API correspondiente y llena las propiedades de la clase. Luego, el método público (processTutorial o processBook) utiliza estos valores unificados para el registro final en la base de datos:

// Método Público que procesa la compra
public function processTutorial(Tutorial $tutorial, string $orderId, string $type = 'paypal-order-id')
{
    // ... Obtener el usuario
    
    // *** 1. Llamada al método intermedio para unificar la respuesta
    $this->sendRequestAPI($orderId, $type);
    
    // *** 2. Registrar el recurso si el status unificado es COMPLETED
    if ($this->status == 'COMPLETED') {
        return $this->registerTutorialToUser(***);
    } 
    // ... Manejo de errores
}

Esta estrategia asegura que, a pesar de las complejidades de cada API, el proceso interno de registro (registerTutorialToUser) solo trabaje con valores limpios y unificados, simplificando drásticamente el flujo de nuestra aplicación.

4. Unificación de Plataformas y Autenticación del Usuario

Actualmente, manejo cuatro escenarios de pago distintos (PayPal y Stripe, cada uno con implementaciones diferentes para la web y para la aplicación móvil), a pesar de que la estructura subyacente de mi backend es la misma.

A. El Rol del Método Intermedio
Para manejar esta complejidad, el método intermedio que establece las propiedades comunes (status, price, idAPI, etc.) es crucial.

  • Este método se llama desde un único controlador para la aplicación web y otro para la aplicación Flutter. Su objetivo es asegurar que la respuesta final tenga el mismo valor, independientemente del origen del pago.

B. El Desafío de la Autenticación ($user = $this->getUser();)

Una "novela" adicional es la autenticación del usuario, ya que mi aplicación Laravel funciona de dos maneras:

  • Mediante Tokens: Utilizado para la aplicación móvil (Flutter), donde el usuario se identifica con un token API.
  • Mediante Sesión: Utilizado en la aplicación web tradicional de Laravel.

El método getUser() verifica el origen y obtiene al usuario. Si el resultado es null, la lógica falla, ya que no hay a quién registrar el recurso adquirido:

$user = $this->getUser();

Punto Crítico: Esto genera problemas, especialmente con PayPal, cuando la operación se realiza completamente en el lado del cliente sin una autenticación previa obligatoria. Si el plugin de PayPal no está bloqueado para usuarios no autenticados, se acepta un pago, pero la aplicación no puede asignar el curso a nadie en la base de datos, lo que provoca un error.

Espero que esta explicación sobre la modularización y la gestión de usuarios te sea útil para tus futuras implementaciones.

Acepto recibir anuncios de interes sobre este Blog.

Presententación de la app movil de DesarrolloLibre, la cual incluye el Blog, app de Academia: * Compras de Cursos * Cursos Gratis * Ver cursos en Línea

| 👤 Andrés Cruz

🇺🇸 In english