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 strutturato per visualizzare le relazioni tra le varie entità
Come puoi vedere nello schema, ho utilizzato:
- Webflow: per la creazione delle interfacce web e base solida a UI/UX
- Wized: per sviluppare l'intera logica front-end ed interazione d’attributo scambiando comunicazioni prelevando i dati dal server attraverso API native
- Per il back-end, ho deciso di utilizzare il server di database The Movie DB, che espone gratuitamente enormità di chiamate d’API specifiche pubbliche ai Developers e Maker. Puoi trovare l'elenco completo in documentazione ufficiale del tool e database aperto a tutti. L'attuale schema del database è costituito da due entità fondamentali relazionali per creare tutto: I film stessi e le Categorie dei Generi a cui si diramano la maggior parte delle varie selezioni filtri multipli (Relazione DB a Many to Many o tanti quanti ed incrociati relazionati di terzo livello d'ID).
Facoltativamente od a braccetto al Design ove pre-impostato, creiamo diagrammi di Use-flow appositi al percorso del click Utente su tutta la Web app o navigazione, portandoti sicurezza a comprendere le mancate risposte su bug visuali futuri nell’attraversare layout specifici ed eventi. L'essenza al tutto ed all’app ti guida spedito riducendo ad una mirata visuale all'obbiettivo per sprint dedicati in task specificate.
Setup e Prima Fase d’Avvio Sviluppo
Creiamo il sito di partenza vergine dalle interfacce Webflow e configuriamo il vuoto progetto ad avvio ambiente al dashboard interno nell’editor Wized. Entriamo pure su TMDB sito ufficiale creandoci al dev l'account così da sbloccare alle funzionalità libere API al fine di ricevere gratuitamente una Token ID Private string o chiave in hash in grado ed intercettare ogni chiamata tra noi, wized ed il DB di risposte d'loro lato e farsi così validare d’ingresso alle loro infinite filmografie fornite server su rete!
Per quanto riguardo lo stream ai progetti opero sulle ultime Build “Next” wized e sui loro nuovi algoritmi ad “embed script js 2.0” capaci da ora al prossimo futuro di prendere ed assoggettare del tutto soppiantandolo in efficenza superlativa il passato obsoleto Wized 1. Consigliatissimo approcciare ora, l’architettura spingerà sempre meglio per aprirti lo JavaScript ai livelli no/low code al contrario di prima a logiche chiuse visuali fisse in un rigido parametro impostato.
A compimento della strutturazione del tool avremo via prompt wized il codice js in base ai setting da integrare ed applicare nativamente nell’header in tutto l'intero Sito Webflow personalizzato rendendo attive tutte le magiche opzioni al loro connettore globale all’interno e a visual design!
Elenco dei Film List
Cimentiamoci d'obbligo al generare e lanciare liste di rendering del prodotto visivo cardine base: Elenco locandine. L'utilizzo e perno base del progetto non potrebbe stare senza un elenco esibito a fronte dell'app stessa di navigazione. Avere un approccio d'MVP per cui dare ai beta test delle priorità assolute, rispetto in virtù ad accessori o sfiziosi feature quali share od i profili d’avanza d’interazione dell'app a mercato ed iterazioni. Lasciamole nei backlog successivi ai task a completamento dell'indispensabile operatività a cuore progetto.
Estrapola all'avvio il trigger Action che chiama e gestisce al server di darti, in risposta JSON, i film come request su un blocco elementare appurato. Questa verifica visiva della correttezza d’ID aiuti inizialmente le interazioni API a riscontri concreti ed un avvio verde via console.
Nel riscontro result panel a fianco dell’app log vedremo i listati o le string di test avvertendo la magia funzionare appieno.
Tutto all'interno ai depositi logici virtual box “variabili” (le data store) andranno definiti e richiamati ciclicamente:
- Token: Che ingloberà su memoria di passaggio temporanea la string token fornita ai pass d’ingresso da TMDB
- Movies: Su salvataggio e immagazzinamento base di passaggio ove tutte le risposte (gli Array Data response generati agli iterativi film d’azione/recente o “get_popular_movies" andranno a stiparsi. Averlo unificato al richiamo come variabile indipendente vi facilita in caso aveste futuri problemi al server da cui state migrando aggiornando i percorsi ad altra entità API o database con pochi click d'opzioni in wized base e riprendere a renderizzare le liste visive con interruzioni d’utilizzo impercettibili senza spezzare attributi base.
- MoviesIterator: Logica su Iterator applicato al listamento di visualizzazioni sul repeater di collection Webflow!
- Image_baseUrl: Dato l'ammontare e peso di asset immagini i backend le separano con final base string fissa percorsi radici CDN dei path. Per velocizzare appoggiarle al nostro caricamento di query ci farà pescare al database solo l’alfa-numerico d'immagine (jpg id asset univoco) mentre Wized concatena via template la variabile fissa in partenza ai link ad ammontare di chiamate ottimali!
Grazie alle Get_Movies ed ai vari blocchi appositi d'esecuzione scateniamo ogni evento (es al caricare dell’HTML load event base di Wized) così si assicurerà automaticamente base del value nell’assegnare il ruolo di liste in variabili “Movies” da noi concepita al DB delle risposte.
Converte attributi al layer layout in Webflow passando i DIV per le card (immagini e titolazioni H3 e span rating text) a configurazioni valide denominate su un identificatore es. w-el: "Card Titolo" e portarle poi a riscontro diretto sulla console per i bindings di dati appositi ed un iterazione loop di design.
Eseguiremo l'aggiornamento e text loop nei campi in maniera automatizzata inserendo ad Action preposte di “Render_Movie_cards” sulle interfacce visuali modellate di Webflow!
Ottimizzazioni Avanzate con Flashing Code Wized-Cloak
In vista finali di rendering, assicurandone qualità ai fruitori a prevenzione sul tempo fisiologico di connessioni o JS che caricano ad un avvio con elementi finti prima di venir sovrascritti al secondo dopo ad un Flash Content brutto (FOUC). Una soluzione solida ci porta Wized mettendo in global css la logica d'attributo apposto per Wized-cloak class over-rides!
Importante: La mia prassi la dedico nelle sezioni codice Globali e personalizzato CSS Custom nativo delle Settings dell'Infrastruttura Webflow per preservare all'Editor/Designer le viste piene intatte mentre l'effettivo codice di opacità andrà su Live. Qualora dobbiate forzare aiuti al Webflow locale andranno al Tag Head del component element visivo!
Per questa regola base assicurate a parametro standard in CSS i comandi ad un display: none!important alle intere card e listati così celando visuali non finalizzate in attesa da caricamento API che appena andrà a finalizzazione Wized stesso per suo conto provvederà togliendone ai wrapper via ad script d’eliminazioni tutti quegli attributi Wized-Cloak visibili ai componenti interessati rendendo gli HTML nativi come definiti nell’aspetto d'impostazioni a pannello Webflow originali, e la transizione al display comparirà ai dati del Film reali fluidamente popolati evitando disastrose schermate d'attesa spoglie e confusionarie o ad errati blocchi rotti HTML ed immagini predefinite base per web layout!
Prossimi Passi d’Implementazione
Agli sviluppi della fase o capitolo tutorial in arrivo, procederemo aggiungendovi filtri e varianti ad intersezioni ed infine i trigger load more pagination per espanderne a lista asincrona listati via API ad infinite view visive di TMDB!
