Descripción del Proyecto
La primera parte del proyecto "The Movie DB No-code" tiene como objetivo recrear la página de Películas Populares usando Webflow y Wized. TMDB es una base de datos completa que contiene valoraciones y detalles de todas las películas.
Arquitectura del Proyecto
Empecemos con la arquitectura del proyecto. Este es un paso crucial que se lleva a cabo al inicio del proyecto para alinearse con el cliente. Se puede comparar con el plano de una casa elaborado por un arquitecto. Esto nos permite ver cómo se comunican todas las partes del proyecto e identificar posibles problemas antes de comenzar el desarrollo, creando la hoja de ruta, los sprints y las tareas.
El esquema incluye:
- Arquitectura general, macro-arquitectura
- Esquema de base de datos para visualizar las relaciones entre las distintas entidades
Como puedes ver en el esquema, he utilizado:
- Webflow: para crear interfaces web
- Wized: para desarrollar toda la lógica front-end y recuperar datos del servidor a través de APIs
- Para el back-end, decidí usar el servidor de The Movie DB, que expone varias APIs. Puedes encontrar la lista completa en su documentación. El esquema de base de datos actual consta de dos entidades: películas y categorías. Como estas entidades tienen una relación de muchos a muchos, creé una tercera tabla para gestionar estas relaciones.
Opcionalmente, si no lo ha hecho ya el diseñador, se crean flujos de usuario para entender cómo debería comportarse el sitio con las distintas interacciones del usuario. Una vez que el proyecto está claro, se pueden crear tareas detalladas para agilizar el desarrollo.
Setup
Para comenzar el desarrollo, crea un proyecto en Webflow, Wized, y registra una cuenta en el sitio de TMDB para obtener el token necesario para ejecutar las llamadas al servidor TMDB.
Para el proyecto de Wized, estoy usando la versión NEXT, que utiliza embed 2.0 — la última versión que pronto reemplazará al embed V1. Recomiendo usar también esta versión. La principal diferencia entre las dos versiones es que la versión 2 es más low-code y requiere JavaScript para muchas operaciones.
Una vez creado el proyecto, se puede vincular al proyecto de Webflow mediante el snippet que se debe insertar en el header del sitio.
Lista de Películas
La primera funcionalidad a crear es la lista de películas porque es la función principal del proyecto. Sin ella, el proyecto no puede utilizarse. Las demás funcionalidades se consideran "secundarias" ya que sirven para mejorar la experiencia de usuario pero no son fundamentales para el funcionamiento. Esta es una tarea esencial al construir tu MVP — reconocer las funcionalidades y priorizarlas para entrar rápidamente en el mercado y comenzar a validar tu idea, en lugar de esperar a que todo el proyecto esté terminado.
En primer lugar, creamos la llamada al servidor para recuperar la lista de películas y verificar que la conexión al servidor funciona.
En la sección de resultados, vemos el array con las películas; la conexión es exitosa.
Dentro del data store, se crean variables para reutilizar información en distintas partes del proyecto. Por ahora he creado:
- Token: que contiene el token generado por TMDB
- Movies: para guardar el array con todas las películas que devuelve la petición "get_popular_movies". Es esencial guardarlo en una variable externa para que, si en el futuro necesitamos cambiar la petición, podamos sustituir solo ese punto y seguirá funcionando como antes si la estructura de la respuesta es la misma.
- MoviesIterator: para renderizar la lista
- Image_baseUrl: dado que la URL base para guardar la imagen es siempre la misma, la guardo en una variable. Se puede encontrar en la documentación de TMDB y, si queremos resoluciones diferentes, debemos crear variables distintas modificando la parte final.
Con la acción get_movies, activo la petición creada anteriormente cuando se carga la página, y asigna automáticamente el valor de movies a la variable.
A continuación podemos crear elementos en Webflow y convertir algunos elementos en elementos Wized usando la nueva app de Wized.
Después creamos la acción en Wized para renderizar las películas en los elementos que creamos anteriormente en Webflow.
Optimizaciones con wized-cloak
Antes de concluir, es importante configurar wized-cloak para evitar el parpadeo de contenido. La estrategia es sobreescribir estilos seleccionando el atributo wized-cloak.
Importante: En mi caso, escribo esto en el código personalizado global. De esta forma, se aplicará solo en el sitio en vivo, no en el designer. Si queremos ver el estilo también en el designer, debemos escribirlo dentro de un elemento embed.
En mi caso, lo oculto con display: none y cuando Wized está cargado y se ejecuta la llamada get_popular_movies, eliminará todos los atributos wized-cloak para restaurar los estilos predeterminados que hemos configurado en Webflow.
Próximos Pasos
En la siguiente parte, completaremos las funcionalidades de filtro y carga de más contenido.
