Descripción del Proyecto
La primera parte de este proyecto "The Movie DB No-code" persigue recrear y reconstruir de cero aquella página general visual sobre películas uniendo los lazos entre Webflow y Wized. TMDB hace los roles de base completa ofreciendo ratios, valoraciones y detalles de muchísimas películas que puedas imaginar.
Arquitectura
Arrancando siempre por un pilar y cimientos, vamos a construir la arquitectura. No me canso de indicar que sin este esquema base, a un cliente y a nosotros mismos nos saltan cien bugs durante los desarrollos sprint a sprint. Como si te imaginas una nueva casa; para eso la hacemos en un mapa.
Se basa de momento en:
- Visión arquitectónica global (macro de partes y redes)
- Diseccionando nuestro DB base y cómo interrelacionan todas juntas
Acerca del esquema que he presentado y montado arriba uso esto:
- Webflow: Toda clase de interfaz bella web se gestiona aquí.
- Wized: Todo frontend, toda llamada API e interactiva lo pasa y maneja su gran panel.
- Acerca del servidor backend o donde saco toda mi data: no es mío. Tiro de los endpoints proporcionados por TMDB como base general remota; al final allí todo dispone de tablas grandes para cruzar categorías e identidades a través de muchas de ellas.
Es vital marcar tu esquema y fluidez (Flows), hacer bocetos grandes a vistas y por supuesto generar sprints bien cerrados si trabajas desarrollando tu sistema (MVP).
Configuración y Setup
Lo primero; alta en The Movie DB platform y reclamar la Key que permita llamar internamente desde servidores lejanos (tu aplicación webflow/wized) a todas tus queries remotas. Es sólo el Token que enlaza todo en las cabeceras.
Versión Wized... La NEXT versión incrustable Embed Version 2.0 es lo ideal porque nos ahorrará horrores comparado a sus versiones v1 llenas de lags incrustados. Esta versión se orienta y requiere JavaScript e inserta la librería entera por las bases conectándolo con el atributo.
Alinea todo metiendo y agregando este script en los Head y lo verás volar.
La Gran Lista de Films
Para dar al público la visual final o interfaz, lo más rápido se traduce por tu objetivo MVP: ver mi listado gordo que trae TMDB filtrado en grid para no perderme en su mar interno. Nos ponemos.
Una vez probado desde Wized, vemos el gran bloque que arroja Array; una lista plena e impoluta, es decir, existe magia. Éxito de enganche.
Usaremos en este punto Data Store de tu panel variable:
- Token: que incluye tu super string API que trae tu valor
- Movies: Una especie de cubo o receptáculo donde depositas todos tus miles de resultados array del gran query traído como
get_popular_movies. - MoviesIterator: Genera los clones repetidores de listas al inyectar tu HTML base general
- Image_baseUrl: Las fotos para las grandes carátulas viajan como IDs sobre una URL base; este parámetro estático salva repeticiones pesadas.
Genera tu evento global o get_movies asignándolo para saltar según abras sitio de Webflow y Wized y la cascada cae cargando todas dentro del Webflow elements.
Las variables Webflow han de etiquetarse e identificarse como WIZED APP elementos y... Boom. Rendering automático.
Optimizar parpadeos y destellos usando wized-cloak
Sin darnos tregua; evita parpadeo a lo loco, carga supresores en formato y atributos. Las etiquetas "wized-cloak" al rescatar data te ayuda a esto.
Y mucho OJO: siempre mete este estilo escondido global CSS display:none aplicable sólo fuera del constructor Webflow si logras meter este parámetro y código externo al Head Global de tu plataforma CMS en ajustes remotos; una vez haya escupido el array que Wized pilla; rompes ese Cloak en JS y aparecerá tan majestuoso cuando por milisegundos haya compilado y traído y nunca verán tus clientes tu web y rejilla desnuda o textos fallidos que saltan o deslumbran por error.
Siguientes Pasos
En partes y sesiones posteriores cerraremos de forma completa más vistas y opciones de filtrar; pero esto es de gran interés al empezar un TMDB Clon.
