Academia: Cursos/Libros de Programación: versión 18 Visor HTML nativo + Mejores diseños

▶

Por aquí quiero mostrarte los últimos cambios que he hecho en la aplicación de academia, que es la que estás viendo en pantalla. Realmente quiero que sea una app que luzca bien, que provoque usarla.

Estamos hablando de la versión 18, que ya está disponible para descarga. En versiones anteriores también trabajé bastante en la parte visual, aunque no voy sacando un video por cada versión. Prefiero hacerlo cuando siento que llego a un punto importante, y entonces hago una especie de video de presentación.

Reestructuración del proyecto

En versiones anteriores, sobre todo al principio, lo que hice fue cambiar la versión del proyecto. Partí desde cero: copié todo el contenido a un nuevo proyecto. Esto lo hice para actualizar varias cosas internas, porque cuando Flutter lanza nuevas versiones, muchas veces cambia también la estructura del proyecto. Eso ya me estaba dando problemas: por ejemplo, la versión mínima del SDK de Android, o archivos que antes eran .kt y ahora no estaban, o eran XML... cosas así.

Crear un proyecto nuevo me ahorró todos esos inconvenientes. Luego simplemente copié y pegué el contenido. Pero claro, al hacer eso, se me desactivaron algunas configuraciones, como el modo de producción, entre otros detalles. Fui corrigiendo todo poco a poco.

Enfoque visual y experiencia mínima viable

A estas alturas estoy trabajando más en lo visual que en lo funcional. Soy de las personas que prefieren lanzar un producto mínimo viable. Aunque suene técnico, no es más que: "sácalo, prueba que funcione y luego lo mejoras". Así he comenzado todo: primero saco algo que medio funciona —como digo yo, agarrado con mecate— y desde ahí lo voy puliendo.

Inicialmente, las pantallas eran bastante feas, con botones poco armónicos. Además, como son pantallas pequeñas, es importante mostrar solo la información mínima necesaria y estilizar todo lo más posible. Intento que todo se vea estándar, parejo.

Tarjetas de contenido unificadas
Por ejemplo, antes los textos eran muy largos. Decidí cortarlos porque vi que todo el mundo hace lo mismo. La razón es sencilla: evitar que las tarjetas (grids) sean de tamaños distintos. Antes, por mostrar un título largo, todas se estiraban innecesariamente. Ahora, corto los textos y mantengo todo en una sola línea. Quizás se pierde algo de contenido visible, pero se gana muchísimo en presentación, espacio y limpieza visual. Es un win-win.

En el caso de los posts, ya puedes ver cómo se ve todo más limpio. Esta misma estructura se reutiliza para cursos, anuncios y libros, ya que todo se basa en una misma entidad llamada Post, con un tipo asociado (curso, libro, etc.).

Transición de WebView a renderizado nativo

Sobre los cursos, hay algo que aún estoy trabajando. Como te conté en otro video: los WebViews son una pesadilla. A partir de eso se me ocurrió traducir el HTML a algo que Flutter pueda interpretar directamente.

Así, un <p> en HTML se convierte en un widget de texto, un <img> en una imagen nativa, y así con cada componente. Me ha quedado mucho mejor. Es más complejo que simplemente lanzar un plugin y ya, pero vale la pena.

Por ejemplo, en cursos con contenido enriquecido, antes se perdía el texto. Ahora lo traduzco, y esto es compatible con cualquier sistema que soporte Flutter. Los plugins de WebView solo funcionan en algunas plataformas, y eso es muy limitante.

Comparación entre WebView y nativo

Si comparas una misma clase vista en WebView y en modo nativo, verás que la versión nativa se ve muchísimo mejor. Por ejemplo, en el modo nativo ya reconozco cuando es código y lo muestro con formato de código. Visualmente mejora mucho, aunque siempre hay margen para más.

Ya había mostrado la ventana de cursos y libros en videos anteriores. En este caso, lo más interesante es el visor de libros.

Visor de libros optimizado

Comencé con un visor en WebView, que me sirvió de base, pero lo llevé hacia una versión nativa. La ventaja es que ya todo el contenido está en HTML, así que puedo manipularlo para lograr lo que necesito.

Le cambié el formato a los libros: antes usaban el mismo diseño cuadrado que los posts. Ahora tienen un diseño más orientado a la lectura. Además, al colocarlos en una cuadrícula de dos por línea, aprovecho mejor el espacio.

Mostrar la mayor cantidad de información útil en el menor espacio posible es casi un lema para las apps móviles. Y este visor nativo me encanta: permite seleccionar texto, crear notas, entre otras cosas, que no se pueden hacer directamente en WebView.

Mejora en la experiencia de compra

También mejoré el flujo de compra. Solo te mostraré el de libros, pero el de cursos es similar. Antes, la ventana de compra era tan fea que me daban ganas de arrancarme los ojos. Ahora se ve mucho mejor: más limpia, con la información necesaria y sin saturar.

Coloqué la carátula como fondo, sombreado para que se lea el texto blanco, botones bien ubicados (como el de compartir), y un diseño más visualmente coherente. También dividí la info en bloques: qué estás comprando, descripción, precio, carátula ampliable, etc.

Antes, los botones de pago en pantallas pequeñas quedaban mal: uno encima del otro, desalineados. Ahora están mejor colocados y estilizados. Incluso quité los textos innecesarios y uso íconos detectores de acción. Todo más ordenado.