‫Istruttore: Eseguiamo ora la prima parte
‫della creazione del sito Web della farm di nodi
‫dinamici semplicemente creando i
‫modelli che conterranno i dati effettivi.
‫E ricorda che il nostro obiettivo è costruire questo
‫tipo di sito Web dinamico in cui abbiamo una panoramica in cui
‫abbiamo tutti i prodotti e quindi
‫ogni prodotto ha la sua pagina di dettaglio proprio come
‫ti ho mostrato prima.
‫E questi dati qui vengono ovviamente letti dal file json, quindi
‫se cambiamo il file json, ad esempio, eliminando
‫uno di questi prodotti e poi ricaricando questa pagina, quel
‫prodotto dovrebbe essere sparito da qui.
‫O se cambiassimo alcuni di questi dati qui o il
‫nome, beh, allora dovrebbe aggiornarsi qui sul sito.
‫Ancora una volta perché è un
‫sito Web dinamico creato dai dati presenti nel file json.
‫Quindi, come
‫ho detto, il primo passo è creare effettivamente
‫questi modelli, uno per questa pagina panoramica
‫e uno per la pagina dei dettagli del prodotto.
‫E inizieremo con la pagina dei dettagli e creerò
‫questi modelli in
‫base a queste pagine Web di dati che
‫abbiamo qui nella cartella dei modelli.
‫Quindi diamo un'occhiata a loro.
‫Quindi abbiamo una panoramica e un prodotto e, di
‫nuovo, inizieremo con il prodotto. html.
‫Quindi abbiamo qui il nome del prodotto e poi
‫questa immagine qui che in realtà è un'emoji, ma non importa.
‫Quindi, invece di dover richiedere le immagini
‫reali per tutti questi diversi prodotti, ho scelto di
‫utilizzare solo gli emoji.
‫È molto più facile.
‫Lo stesso in realtà per lo stile.
‫Quindi ho tutto lo stile CSS in linea nelle pagine html
‫in modo da non dover fare
‫più richieste per ottenere questi dati diversi, giusto?
‫Perché
‫in realtà, ogni file diverso attiverà una richiesta diversa, ok?
‫Ricordi prima dove avevamo la richiesta
‫per l'icona cinque, giusto?
‫Quindi abbiamo visto una richiesta per la radice, quindi per la
‫pagina principale, e poi una richiesta per quell'immagine, e
‫ciò significa che
‫ogni risorsa, quindi ogni pezzo che fa
‫parte del
‫sito web, riceverà la sua richiesta, e noi
‫dovremo quindi gestirlo, e
‫non vogliamo farlo, quindi ho semplicemente inserito lo stile in queste pagine html.
‫Bene, ecco un mucchio di stile, stile, stile, e poi
‫qui abbiamo il, beh, il
‫nome del prodotto da qualche parte.
‫Oh sì, qui, quindi è il nome del prodotto.
‫Ecco l'immagine del prodotto, che di
‫nuovo è solo un'emoji, ma proviene da questo campo immagine.
‫Quindi abbiamo questo campo chiamato image.
‫Destra?
‫Poi abbiamo da dove viene, alcuni degli ingredienti
‫e il prezzo, e anche la descrizione quaggiù, ok?
‫Ma ancora una volta, tutto questo proviene da questi diversi campi.
‫Quindi diamo un'occhiata ai campi che abbiamo.
‫Quindi il nome del prodotto, l'immagine, la provenienza, i nutrienti, la quantità, il prezzo,
‫se è biologico o meno e la descrizione.
‫Quindi quello che faremo ora è sostanzialmente
‫sostituire tutti questi pezzi che vogliamo aggiungere dinamicamente
‫con un segnaposto, e poi
‫con il nostro codice sostituiremo quel
‫segnaposto con il vero pezzo di dati, ok?
‫Quindi iniziamo qui con il nome del prodotto,
‫quindi vado avanti e lo
‫elimino e poi inserisco un segnaposto qui.
‫E posso fare tutto ciò che voglio come segnaposto.
‫Mi piace solo andare in questo caso con qualcosa del genere.
‫Così...
‫Nome del prodotto, quindi percentuale e infine le parentesi graffe.
‫Quindi di nuovo, questo potrebbe essere tutto
‫ciò che volevamo,
‫ma vogliamo trovare qualcosa che probabilmente non
‫è sulla pagina in modo da non sostituire
‫nulla di sbagliato, quindi tutto ciò che in realtà non vogliamo sostituire, ok?
‫E potrei mettere qualcosa del genere qui, ok?
‫E poi sostituisci tutto, ma penso che in questo modo
‫sembri carino ed è facile da riconoscere.
‫E quindi tutto ciò che dobbiamo fare
‫è andare avanti e
‫mettere tutto qui, e poi sostituirò, ovviamente, questi nomi.
‫Quindi qui abbiamo i nutrienti.
‫Qui abbiamo la quantità.
‫E qui ho il prezzo.
‫Quaggiù abbiamo di nuovo il prezzo, vedete.
‫E il prezzo è solo il numero, ok?
‫Il simbolo dell'euro qui rimane proprio lì
‫perché il prezzo che abbiamo in realtà è solo un numero.
‫Diamo un'occhiata a questo proprio qui in json.
‫Quindi abbiamo solo 6. 50 ma non la valuta.
‫E in realtà è lo stesso qui, quindi prendiamolo e copiamolo
‫qui molto velocemente, e sì, in realtà, ho
‫dimenticato di sostituire questo, quindi questo
‫è il da.
‫E in realtà scriviamo da, non in maiuscolo, in modo che questo
‫testo abbia un po' più senso.
‫Quindi, per esempio, dal Portogallo o dalla Spagna o altro.
‫Oh, cos'è quello qui?
‫Ok, immagino di aver appena scritto nel mezzo del nome del prodotto.
‫Quindi nutrienti.
‫Va bene.
‫Oh, e quaggiù abbiamo, ovviamente, la descrizione, quindi
‫sostituiamo anche quella.
‫Oh, ovviamente devo recuperare questo
‫e la descrizione.
‫Poi abbiamo queste immagini, quindi l'avocado, quindi
‫premo un paio di comandi
‫a V, le incollo qui, così posso modificarle
‫tutte contemporaneamente.
‫Ok, allora immagine e, oh, qualcosa qui nel titolo.
‫Vogliamo anche sostituire l'immagine qui sopra e anche il
‫nome del prodotto.
‫Così.
‫Nome del
‫prodotto qui e
‫qui l'immagine in modo che anche questo venga sostituito dinamicamente.
‫Bene, ora solo un'altra cosa che è
‫un po' più complessa.
‫Dov'è?
‫Va bene, è qui.
‫Quindi alcuni prodotti sono biologici e altri no.
‫E quindi c'è una classe nel CSS
‫che verrà aggiunta a tutti questi elementi quando non sono organici, ok?
‫Quindi questa è questa classe qui.
‫Quindi, quando non è organico, non dovrebbe essere visualizzato, quindi
‫questo badge organico qui.
‫E giusto per mostrarti di cosa
‫sto parlando, il badge organico è questa cosa qui, ok?
‫Quindi non vogliamo mostrarlo
‫nel caso sia falso nel json, quindi quello che faremo
‫qui è aggiungere effettivamente un altro segnaposto
‫qui o effettivamente all'interno della classe,
‫e quindi chiamerò questo non organico
‫.
‫E vedrai perché un po' più tardi, ok?
‫Quando lo sostituiremo, avrà un po' più senso per te.
‫Va bene, quindi penso che questo sia
‫finito, e ho semplicemente sovrascritto tutto quello che avevamo.
‫Quindi fammi chiamare
‫questo modello di prodotto, ok?
‫Quindi questo è fatto.
‫Passiamo alla prossima, la panoramica.
‫E questo in realtà sarà un po' diverso, e lascia
‫che ti mostri perché è così.
‫Quindi, di nuovo, abbiamo tutto l'SCC in linea qui,
‫e ora abbiamo questo contenitore di
‫carte, e quindi per ciascuno dei prodotti, abbiamo una carta.
‫Quindi ognuna di queste carte qui ha questa targhetta, giusto?
‫Ora in realtà non sappiamo
‫quante di queste carte saranno qui in questa panoramica, giusto?
‫Immagina di avere 10 prodotti nel json.
‫Allora abbiamo bisogno di 10 di queste carte.
‫Ma immagina di averne solo uno o due.
‫Ebbene, non vogliamo tutte le 10 carte ma solo due.
‫Allora come lo faremo?
‫Bene, in realtà creeremo solo un altro modello in cui
‫c'è solo una scheda e quindi
‫includeremo uno di questi modelli per
‫ciascuna delle schede che
‫vogliamo, quindi ciascuno dei prodotti nel file json.
‫Va bene, ha senso?
‫Quindi chiamiamo questo qui la panoramica del modello.
‫E vado avanti e creo la scheda modello.
‫Quindi quello che farò qui è ora, come ho detto, ora è
‫tornato in cima,
‫quindi vado avanti e prendo una figura.
‫Era troppo.
‫E incollalo qui.
‫Quindi abbassalo un po'.
‫Ok, quindi ogni carta ora ha la sua figura.
‫Ok, quindi ora quello che farò è
‫eliminare tutte le carte da qui e
‫creare anche qui un segnaposto.
‫Schede prodotto.
‫Va bene?
‫Quindi di nuovo, più avanti nel
‫nostro codice, creeremo tutte le carte di cui abbiamo bisogno qui.
‫Ad esempio, se abbiamo
‫cinque prodotti, creiamo cinque carte come questa.
‫Quindi li metteremo insieme in un'unica
‫stringa e quindi sostituiremo le schede prodotto
‫con quella stringa che contiene tutte queste diverse schede, ok?
‫Quindi, in realtà, abbiamo finito con questo.
‫Va bene?
‫Perché la maggior
‫parte delle cose accade all'interno della scheda modello.
‫Quindi nient'altro da sostituire qui.
‫Vengo qui solo per copiare questo qui,
‫e ora è molto semplice per
‫noi sostituire ciò di cui abbiamo bisogno qui.
‫Quindi questa è l'immagine, e in realtà ce l'abbiamo due volte.
‫Ok, questo lo fa sembrare un po' più carino.
‫Immagine, immagine, poi ecco il nome del prodotto, ricordi?
‫Qui, in
‫questo posto, avremo di nuovo il segnaposto non organico, e di nuovo, questo
‫avrà più senso per te un po' più tardi.
‫Più organico, quindi la quantità qui.
‫Poi il prezzo.
‫Quindi dobbiamo anche costruire effettivamente il collegamento qui.
‫Quindi questo qui, quindi l'elemento
‫A, nel caso in cui non hai molta familiarità
‫con l'html, l'elemento A è per un collegamento.
‫Quindi lascia che te lo mostri effettivamente in un esempio di lavoro reale.
‫Quindi, quando passiamo con il mouse qui su questo
‫collegamento, laggiù nell'angolo in basso a sinistra,
‫quindi qui in basso, vedrai che è un prodotto barra e
‫quindi ID è uguale a zero.
‫E questo è ID uguale a uno, ID uguale a due.
‫Ok, e se clicchiamo su questo, lo vediamo effettivamente qui.
‫Quindi barra prodotto e quindi ID uguale a
‫zero, e questo ID qui è esattamente l'ID che abbiamo nel json.
‫Ok, quindi questo qui.
‫Quindi l'avocado è uno, il formaggio di capra ne ha uno.
‫Scusa, l'avocado ha zero, ovviamente.
‫Il broccolo ne ha due e chi più ne ha più ne metta.
‫E quindi qui in realtà abbiamo bisogno di costruire il collegamento.
‫Quindi prodotto, e ovviamente non in maiuscolo.
‫Quindi prodotto, e l'ID è
‫ID.
‫Va bene?
‫Quindi dobbiamo sostituire questo segnaposto ID qui con il
‫numero corretto.
‫Quindi zero, uno, due, tre, quattro, cinque e così via e così via
‫a seconda di quanti prodotti ci sono.
‫Quindi supponiamo di avere un formaggio qui, ok?
‫Torniamo qui.
‫Bene, allora l'immagine sarà questa qui, il
‫nome del prodotto sarà questo e l'ID sarà uno.
‫Ok, quindi questo qui
‫si tradurrà in ID uguale a uno e il nostro gestore qui.
‫Quindi questo gestore del server qui si occuperà
‫di andare alla pagina giusta quando l'ID del prodotto è uno, ok?
‫Quindi quella logica non è ancora stata implementata, ma
‫ovviamente lo faremo nelle prossime due lezioni.
‫Quindi ora abbiamo i modelli effettivamente creati, quindi passiamo
‫al prossimo video in cui inizieremo effettivamente
‫a compilare i modelli e rispedire la
‫pagina finale al browser.