Panoramica del Progetto
La prima parte del progetto "The Movie DB No-code" ha l'obiettivo di ricreare la pagina Popular Movies utilizzando Webflow e Wized. TMDB è un database completo contenente valutazioni e dettagli per tutti i film.
Architettura del Progetto
Iniziamo con l'architettura del progetto. Questo è un passo cruciale intrapreso all'inizio del progetto per allinearsi con il cliente. Può essere paragonato al progetto di una casa creato da un architetto. Questo ci permette di vedere come tutte le parti del progetto comunicano e identificare potenziali problemi prima di iniziare lo sviluppo, creando la roadmap, gli sprint e le relative attività.
Lo schema include:
- Architettura generale, macro-architettura
- Schema del database per visualizzare le relazioni tra le varie entità
Come puoi vedere nello schema, ho utilizzato:
- Webflow: per la creazione delle interfacce web
- Wized: per sviluppare l'intera logica front-end e recuperare i dati dal server attraverso le API
- Per il back-end, ho deciso di utilizzare il server di The Movie DB, che espone varie API. Puoi trovare l'elenco completo nella loro documentazione. L'attuale schema del database è composto da due entità: film e categorie. Poiché queste entità hanno una relazione molti-a-molti, ho creato una terza tabella per gestire queste relazioni.
Facoltativamente, se non già fatto dal designer, vengono creati i flussi utente per capire come il sito dovrebbe comportarsi con le varie interazioni dell'utente. Una volta che il progetto è chiaro, si possono creare attività dettagliate per accelerare lo sviluppo.
Setup
Per iniziare lo sviluppo, crea un progetto su Webflow, Wized, e registra un account sul sito di TMDB per ottenere il token necessario per eseguire le chiamate al server TMDB.
Per il progetto Wized, sto utilizzando la versione NEXT, che utilizza embed 2.0 — l'ultima versione che sostituirà presto l'embed V1. Consiglio di utilizzare anche questa versione. La differenza principale tra le due versioni è che la versione 2 è più low-code e richiede JavaScript per molte operazioni.
Una volta creato il progetto, può essere collegato al progetto Webflow tramite lo snippet da inserire nell'header del sito.
Elenco dei Film
La prima funzionalità da creare è l'elenco dei film perché è la funzione principale del progetto. Senza di essa, il progetto non può essere utilizzato. Le altre funzionalità sono considerate "secondarie" in quanto servono a migliorare l'esperienza utente ma non sono fondamentali per il funzionamento. Questo è un compito essenziale nella costruzione del tuo MVP — riconoscere le funzionalità e assegnargli priorità per entrare nel mercato rapidamente e iniziare a validare la tua idea, invece di aspettare che l'intero progetto sia completato.
Prima di tutto, creiamo la chiamata al server per recuperare l'elenco dei film e verificare che la connessione al server funzioni.
Nella sezione dei risultati, vediamo l'array con i film; la connessione è avvenuta con successo.
All'interno del data store, vengono create delle variabili per riutilizzare le informazioni nelle varie parti del progetto. Per ora ho creato:
- Token: contenente il token generato da TMDB
- Movies: per salvare l'array con tutti i film che la richiesta "get_popular_movies" restituisce. È essenziale salvarlo in una variabile esterna in modo che, se in futuro dobbiamo modificare la richiesta, possiamo sostituire solo quel punto e funzionerà come prima se la struttura della risposta è la stessa.
- MoviesIterator: per il rendering dell'elenco
- Image_baseUrl: poiché l'URL base per salvare l'immagine è sempre lo stesso, lo salvo in una variabile. Si trova nella documentazione di TMDB, e se vogliamo risoluzioni diverse, dobbiamo creare variabili diverse modificando la parte finale.
Con l'azione get_movies, attivo la richiesta creata in precedenza al caricamento della pagina, che assegna automaticamente il valore di movies alla variabile.
Successivamente possiamo creare gli elementi su Webflow e convertire alcuni elementi in elementi Wized utilizzando la nuova app Wized.
Poi creiamo l'azione su Wized per renderizzare i film negli elementi creati in precedenza su Webflow.
Ottimizzazioni con wized-cloak
Prima di concludere, è importante configurare wized-cloak per evitare il flickering del contenuto. La strategia è quella di sovrascrivere gli stili selezionando l'attributo wized-cloak.
Importante: Nel mio caso, scrivo questo nel codice personalizzato globale. In questo modo verrà applicato solo sul sito live, non nel designer. Se vogliamo vedere lo stile anche nel designer, dobbiamo scriverlo all'interno di un elemento embed.
Nel mio caso, lo nascondo con display: none e quando Wized è caricato e la chiamata get_popular_movies viene eseguita, rimuoverà tutti gli attributi wized-cloak per ripristinare gli stili predefiniti impostati su Webflow.
Prossimi Passi
Nella prossima parte, completeremo le funzionalità di filtro e caricamento aggiuntivo.
