In questo articolo, voglio guidarti attraverso i passaggi più significativi dello sviluppo della seconda parte del progetto "The Movie DB sviluppato con Webflow e Wized". Per dovere di chiarezza ove a caso tu non ne conoscessi la fama: Webflow risulta mondialmente ai primi eccellenti tool basati a struttura visual app/siti di alto posizionamento e qualità d'interfacce professionali a design solido; laddove per paradosso eccellente la piattaforma app “Wized” ti permetterà via estensioni uniche ed avanzati Javascript l'inserimento dinamico del caricamento logico su ogni web app senza fatica da codice ma tutto no-code per lo step as a platform in connessioni dati ai vari Rest e Database mondiali (es as Server e Backend e app interazioni)!
A fronte di lacune nell’aver perduto in precedenza la base costruttiva ed analisi prima parte potrai tranquillamente recuperare a questo link dedicato in lettura. Nella prosegua e seconda ed imminente parte integreremo la potenza avanzata filtraggio a generi ad API ed attivazione ed implementazioni ai flussi “carica di più” o Load More movies di paginazioni scrollable.
1. Implementare Un Filtro Dinamico Ai Generi
Inizializziamoci ai folder azioni di esecuzione Wized, nominando "filter" al raggruppamento e struttura organizzativa di pulizia logica di raggruppamenti. Per l’intero andamento vi alloggerò i blocchi appositi azioni mirate al flow al filtro a sottocartelle specifiche alle chiamate per singolo o global filter d’evento al DB interscambio!
Concetto d’Architettura Esecuzioni nelle Azioni
Ai continui espansi carichiamo moduli logic o estese varianti che fanno crescere l'App inevitabilmente creando ampi ammassi confusionari sparsi d'errori ed è essenziale l’estesa d’organizzazioni pulite visive (Clean code o visual block!), pena la complessissima difficoltà sul ritrovare nodi specifici azioni ad interviste future bug tracking se le cartelle fossero un ammasso univoco. Alquanto spassionata ma di regola assoluta l’assenza, d'obbligo a parer e prassi è una divisione netta ad evento per page a funzionalità specifiche. Quelli che impattano più settori andranno su basi Root e Folder generiche Global o System (un parallelismo applicativo a CSS naming del Framework e prassi su naming Client-First logiche Webflow per farti similitudini immediate e tangibili!).
A tal proposito analizzando le specifiche necessarie del sistema filtri:
Azione Ad Attivazione Sottomissione Form Base Ai Filtri (Filter Form Submission)
La fondamentale e vitale al progetto trigger execution chiamata al richiamo nuovi listati dopo vari click. Applicandosi nell'ausilio robustissimo Wized ad "Azione Esecuzione Function nativa JS - (Run Function - Custom JS)" al cui interno vi sblocchi le funzioni personalizzate a puro logico blocco Javascript per unioni ai dataset massicci ed evitare sequenzialità pesanti visual d’interfacce nodi Wized di centinaia string ed opzioni logiche, raggruppato in sciolta esecuzione Custom JScript scritte pulite simili come fossi col VScode per editor a fianco sul tuo lato in app in Embed al suo rilascio Next Gen > V 2.
Approccio Ad Infrastrutture Embed versione 1 in contrasto versione 2 di Wized
Una sostanziale svolta rivoluzionata a differenza e cambio d’aspetto per l'impronta al lato Embed e core di base V1, l'apertura e concessione libera del "low-code" estese potenzialità! Da una parte vi permangono ovvie opzioni visivo/selettive interamente no-code al builder puro ma allarga confidenzialmente via via funzionalità all’ausilio d’aprirci porte d'eseguibile esteso nativo JavaScript permettendoci controlli immensi o di fare infinite integrazioni libere. Apprezzo con gioia assoluta al flow questa dinamica JS libera, pur consci d’eventuali migliorie d’intefaccia builder Wized future alle sintassi classiche UI in pari via ed assonanza al processo HTML & Element design setting d’Webflow. Ai compromessi c'è l’immediatezza in JS disponibile ovunque e del fare qualsiasi cosa vi arrivi e spinga nei propri requisiti al codice custom Wized 2.0.
Settaggio Azione Categorie E Cambi "is-active" alle Combo Class (Attivo Dinamico CSS)
// Localizzazione Elemento Genitore Radice Wrap a parent target in ricerca DOM
var parentElement = t.node.closest('[wized="filterFormCategoryCheckboxBlock"]');
// Logico e Toggle in esecuzione della classe d’accoppiamento di "is-active"
if (t.node.checked) {
parentElement.classList.add("is-active");
} else {
parentElement.classList.remove("is-active");
}Applicati singolarmente a lato d'attributo valore (value attr.) dell'identità specifica sui dati ricevi da check un Movies ID associato alle caselle stesse di listato webflow. Al modulo submission event del post form otterrò appieno il pacchettizzato JSON con estese Array nel form formiato in object su tutte estrapolazioni id prese in lista categorie apposta all’esatto selezionamento di filtro! Un'array sfruttato al loop dal prelievo server TMDB alle esattive Query chiamate filtri e di fornire specifici raggruppati film esatti con ID preposti per riscontro filtro da categoria o genere ad incastro ed in ogni azione su checkbox d'utenza cambio classe ed il is-active toggle farà colorazioni azzurre attivando o no dinamicamente la check a visual form a blocchi Webflow per interfaccia attiva blu brillante feedback!
Azione Ad Esecuzione Form Categorie Pulsante Azzeramento & Deselezione Base (Reset Category)
let checkboxes = document.querySelectorAll(
'input[name="filter-category-checkbox"]:checked',
);
// Array check e disattivamento via attributo di unchecked in For Each ai check ed Input
checkboxes.forEach(function (checkbox) {
checkbox.checked = false;
// Creazione D'Event Event Listener Forzamento a triggering change ai nodi d’input event check Wized Eventi
var event = new Event("change");
checkbox.dispatchEvent(event);
});Collocazione su Click dell'evocato tasto per il Resettaggio generale dei filtri categorie che porterà tramite tale function la d'esenzione disattiva del campo d’uso check apposito check input e rimettendo per attivazioni in combinata al modulo di logici Javascript all’ausilio al comando a string del dispatcher event JS la rimozione rapida alla target list di cui l’ is-active UI class e colore sfondo check del webflow torneranno d'origine a zero azzerando i flag a reset filtri globalmente completati ed integrati e non un singolo a volta ma tutte azzerate!
2. Abilitare All’Integrazione Flussi D'Opzione Load More e Chiamata Incrementale Dataset Movies List
Applicazione Pulsante Tasto Al "Cari D’Altri Event Movies Action"
// Calcolatore incrementi da numero base variabili paginate pagina 1 = pagina es: 2++ al click etc..
var v.movies_page_counter++
// Caricamento D'Esecuzioni Async richiesta dati via esecutore get_popular action trigger api in Wized
await Wized.requests.execute('get_popular_movies')
// Operazione Aggiornamento ed Unione variabili ed Append Liste Dati Arrays da preesistente vs Novità lista
let currentMovies = v.movies
let newMovies = r.get_popular_movies.data.results
v.movies = [...currentMovies, ...newMovies]Un click da innesco genera il codice sovrastante ed aumenta all’apposito counter virtuale in iterazione ai parametri base pagine Wized Variable (da pag. 1 passa 2 ai request di ricarica!) procedendo un API execute aggiornando e per finish allega col spread logic (...currentMovies) tutti l’array Movies presistenti con il pacco list appositi Movies dal newMovies appena generato a calce! Il repeater di Webflow elencherà di botto a fiancheggio card base ad ampliando i muri infiniti d’esposizione cover list movies.
Refactoring d’Aggiornamento Modifiche a Variante (Variables Updates)
Al database Variables locale per v.movies vado all'azzeratura originando un vuoto null array da input base ad evitare computazioni forzate su autocalcolo d'aggiunta e dover esplicare specificatamente logiche del dataset ricaricate post avvio iniziale! Implemento in base l’iteratore in categories o in categories_render_index e le affibbio l’esposizione visiva da display management dei rendering filtri visual interfacce UI!
Ottimizzazione al Comparto Ricerche ed Endpoint di Base Parametri Vari (Requests Updates)
Al modulo Wized action sulla richiesta get_popular_movies riorganizzo in path specifico string l'url base finale in discover/movie. Mossa che mi accerta opzioni sterminate all'API di recepire ed incanalare parametri filtri incastonati a parametri per chiamate a URL in base ai click Wized ai generi desiderati e filtrare al web app. Logica a JS apposita per il parametro ad identificatore query in with_genres filter qui la logica:
let valuesString = f.filterFormBlock["filter-category-checkbox"].join(",");
return valuesString;Prelevo dai campi object input gli ID d'array per generi d’ogni click filtro ed eseguendo in comando la function join(“,”) con catena d'impostazione ed intercalare a singole virgole come da richieste rigide d’esattezza documentazioni API (es. 28,14 id filtro Action/Comedy) in TMDB parameter id call ed eccoci in esecuzione magica ed estese queries pronte a url path base final del dataset TMDB e renderlo asincrono sul Wized listati.
Consigli in Pratica al Replace Ed Edit Richieste (Best Practice Requests Replace)
Consiglio essenziale al cambio in radice di core Request come la Action di get_popular_movies! Crearsi ed applicarvi del duplicato di scudo ed a rinomina vecchio/old base a scudo ed asilo base di backup, portando via bug od alterazioni di crash vi porterà a tornare sani ed esenti all'origine con la copia in sicurezza in rollback all'emergenza rottura! Ai rimpiazzi generali action in Wized a tool per ispezione ed assaggio visivo c'è comodo ed effettivo "visualizza o usato in X action" nei pannelli che preverranno o daranno l’elenco generale di chi fa a che azione il root od uso esteso blocco Request d’Action per fix a sostituzione del rimpiazzo con la nuova action o URL e flussi nuovi testati perfetti a sostituzioni di riferimenti in action block JS.
Sincronizzare Ed Aggiornamenti UI a Framework Webflow & Designer Build
Tornando al designer, finalizzazione UI sui blocchetti o filtri ad opzione di layout visual webflow e appositi ad implementazioni all'aggiunta di Attribute tag al w-el specifico e un push final di Publishing sito via Webflow Server per vederne ed iniettare a Wized sul web il codice e far scattare logica su server produzione di Test a fine aggiornamento.
Visione Live Preview ed URL Demo Produzione al progetto
Il link completo a base d'assaggio a logica ad interazioni completate del TMDB progetto qui allegato al rilascio di web app:
Avvia il Test della Web App in vista al sito live
Riepiloghi a Conclusioni Sviluppo
Quest'appassionante viaggio a seconda puntata d’incremento sviluppo al grande "TMDB The Movie DB platform con le intersezioni Wized a unito all'ambito framework No-code Webflow" ha dato i suoi vitali colpi applicando alla piattaforma Load Mores list ed un eccellente dinamico filtro base integrabile con UI custom ed APIs!
Sul terzo step procederemo su logiche d’espansione per ricerche Search global query d'incroci ai Server a dettagliate e raffinate Detail movies pages dei click poster a vista Film completa per singolo id DB request a singola scheda UI page film !
