‫-: [Jonas Schmedtman] Quindi abbiamo già per i modelli HTML.
‫Ora arriva la parte più difficile,
‫ovvero sostituire effettivamente i segnaposto con il contenuto.
‫Quindi iniziamo effettivamente con la panoramica.
‫E qui diamoci un po' di respiro
‫e aggiungiamo qualche commento.
‫(digitando su una
‫tastiera) Quindi pagina panoramica e alcuni commenti qui sotto.
‫Quindi la pagina del prodotto, e qui abbiamo l'API.
‫E poi qui abbiamo il Non trovato.
‫Va bene, quindi sembra già un po' meglio.
‫Quindi, di nuovo, iniziamo con la pagina di panoramica.
‫Quindi il
‫primo passo è caricare effettivamente la panoramica del modello.
‫Ok, quindi ogni volta che c'è una nuova
‫richiesta per questo percorso, quindi il percorso modificato o
‫/Panoramica, la prima cosa che
‫faremo è leggere la panoramica del modello.
‫Ma, proprio come prima, possiamo davvero
‫farlo al di fuori di questo callback, ok?
‫Poiché questi modelli, saranno sempre gli stessi,
‫quindi puoi effettivamente leggerli
‫nella memoria proprio all'inizio quando avviamo l'applicazione.
‫E poi, quando necessario, andiamo semplicemente
‫avanti e sostituiamo i contenuti lì dentro.
‫Ok, proprio come abbiamo fatto con i dati
‫qui, non è necessario leggere i dati
‫ogni volta che c'è
‫una richiesta e lo stesso accade per i modelli.
‫Va bene?
‫Quindi in realtà andrò
‫avanti e lo farò per tutti e tre i
‫modelli qui in modo da toglierlo di mezzo.
‫Quindi vado avanti, e solo per ottenere questo, lo chiamo temp
‫per la
‫panoramica del modello e il nome DAR
‫e qui abbiamo i modelli.
‫E poi /template-overview.
‫Ok, allora duplicalo qui due volte in modo
‫che ne
‫abbiamo uno per la carta, quindi
‫template-card, e poi uno per il prodotto modello.
‫Prodotto, va bene.
‫E ancora, tieni presente che possiamo
‫fare con la versione sincronizzata perché siamo nel
‫codice di primo livello.
‫Abbiamo eseguito solo una volta, proprio all'inizio
‫quando carichiamo queste applicazioni.
‫Quindi non abbiamo potuto farlo all'interno di
‫questa funzione di callback createServer, ok?
‫Perché questo viene chiamato ogni volta che c'è una richiesta.
‫E se abbiamo un milione di richieste contemporaneamente, potremmo
‫bloccare il codice un milione di volte, una
‫per ogni richiesta.
‫Ed è qualcosa che non vogliamo.
‫Quindi, la panoramica, andiamo avanti e
‫prima di tutto
‫solo per testarla, invia questo tempOverview come risposta.
‫Ora, prima di
‫poterlo fare, dobbiamo andare avanti e impostare questo tipo di contenuto su HTML.
‫Quindi fammi effettivamente copiare questo pezzo di codice qui.
‫Quindi il codice di stato
‫è 200 e il tipo di contenuto dovrebbe essere text/html.
‫Quindi riavvia il server
‫qui e ora diamo un'occhiata, e infatti,
‫eccoci qui.
‫Quindi ecco la nostra
‫pagina in stile che già conosciamo da questa.
‫Ora quello che ovviamente
‫manca qui sono queste righe, e
‫questo perché abbiamo ancora il nostro segnaposto.
‫E quindi il prossimo compito è ora sostituire questo segnaposto con le
‫carte effettive.
‫E come lo faremo?
‫Bene, ricorda che in data object, abbiamo un
‫array di tutti gli oggetti che sono in
‫data. JSON.
‫Quindi, tutti questi cinque oggetti, tutti in oggetti JavaScript, perché abbiamo
‫già analizzato questi dati con solo una stringa.
‫Va bene?
‫Quindi l'oggetto dati è di nuovo
‫un array di cinque oggetti.
‫Quindi quello
‫che dobbiamo fare è fondamentalmente scorrere
‫questo array e, per ciascuno di essi,
‫sostituire i segnaposto nel modello con i
‫dati effettivi del prodotto corrente, ok?
‫Ha senso?
‫Quindi, mettiamolo nel codice.
‫Quindi oggetto dati, lo esamineremo in loop con una
‫mappa perché vogliamo restituire
‫qualcosa e quel qualcosa, lo salveremo
‫in un nuovo array, quindi chiamiamolo cardHtml,
‫ok?
‫E quindi sono sicuro che hai familiarità con il metodo della mappa, ok?
‫Quindi cosa fa la mappa accetta una funzione
‫di callback e questa funzione di callback ottiene come
‫argomento l'elemento corrente, quindi l'elemento del ciclo corrente e
‫qualunque cosa restituiamo
‫qui verranno quindi salvati in un array, ok?
‫Quindi diciamo che stiamo eseguendo il loop su un array con
‫cinque elementi
‫che è il caso qui, e per
‫ogni elemento, restituiremo qualcosa, e quel qualcosa verrà quindi
‫messo nella stessa posizione ma in questo nuovo array cardsHtml.
‫Quindi, cosa faremo in ciascuna di queste iterazioni?
‫Bene, vogliamo sostituire i segnaposto, giusto?
‫E quindi in realtà andrò avanti
‫e creerò una
‫funzione per questo e che si chiamerà replaceTemplate.
‫Va bene?
‫E replaceTemplate prenderà l'HTML della carta.
‫Quindi, in pratica, la tempCard.
‫E prenderà l'oggetto corrente, quindi element.
‫Va bene?
‫Quindi questo elemento è ciò che contiene i dati, giusto?
‫Quindi, di nuovo, ognuno di questi è ora un
‫oggetto che contiene i dati in ciascuna di queste proprietà.
‫Va bene?
‫E non preoccuparti, se non ha senso al 100%
‫ora, lo sarà una volta creata questa funzione replaceTemplate, ok?
‫Quindi ora facciamolo anche qui.
‫Quindi replaceTemplate è una funzione che accetta
‫un modello, lo chiameremo semplicemente temp qui e
‫ovviamente un prodotto.
‫Bene.
‫Quindi creiamo una variabile
‫chiamata output
‫e quella sarà template. sostituire nel nostro segnaposto.
‫E metteremo qui tutti i
‫segnaposto che abbiamo, iniziando con PRODUCTNAME, ok?
‫E così quello sarà sostituito con il prodotto. NOME DEL PRODOTTO.
‫Quindi product, che è questo argomento che abbiamo passato
‫alla funzione, . PRODUCTNAME perché, beh,
‫questo è il nome del campo in
‫cui si trova il nome del prodotto.
‫Bene?
‫Quindi, vai avanti e copia quello, e va bene.
‫Ora un piccolo trucco che
‫dobbiamo usare qui è non usare
‫effettivamente le virgolette, ma usare invece un'espressione regolare.
‫E questo perché
‫potrebbero esserci più istanze di questo segnaposto
‫e quindi il trucco è racchiuderlo in un'espressione regolare e utilizzare il
‫flag g su di esso.
‫Il che significa globale
‫e quindi questo farà sì che tutti questi segnaposto vengano sostituiti e
‫non solo il primo che si verifica.
‫Quindi questo sostituisce il nome del
‫prodotto, ora andiamo avanti e sostituiamo tutto l'altro.
‫Quindi
‫uscita = uscita. sostituire, e ora
‫andremo avanti
‫e copieremo questo per semplificarmi un po' la vita.
‫Quindi immagine, e si chiama immagine e
‫non in maiuscolo, quindi proprio così.
‫Va bene?
‫Ora quassù, ho creato
‫questa variabile perché volevo sostituire questo nome di prodotto in temp.
‫Quindi nell'argomento, e non è una buona
‫pratica manipolare direttamente gli argomenti che
‫passiamo a una funzione.
‫E così ho creato una
‫nuova variabile e
‫d'ora in poi manipolerò quella prima, ok?
‫Ed ecco perché non è un const, ma un let.
‫Quindi un let, possiamo mutare dopo che è stato creato, ok?
‫Ora lasciami andare avanti, copiane un paio.
‫Quindi prezzo, e anche qui si chiama prezzo, quindi
‫abbiamo da,
‫quindi abbiamo sostanze nutritive.
‫Certo che potrei copiare tutto questo,
‫ma non ho intenzione di saltare avanti e indietro qui.
‫Quindi quantità, descrizione
‫e
‫probabilmente farò qualche errore qui scrivendo tutto
‫questo manualmente ma in un
‫piccolo prodotto, non è affatto un grosso problema.
‫Quindi in realtà questo non ci serve,
‫o in realtà
‫ne abbiamo bisogno perché per l'organico,
‫quindi l'organico che manca,
‫ma ricorda che l'organico era un po' speciale.
‫Quindi in questo caso, se il prodotto non è biologico, allora
‫è prodotto. organico, se è
‫falso,
‫quindi ricorda, questo è in realtà un grassetto.
‫Quindi, per esempio, abbiamo organico vero qui,
‫ma abbiamo falso qui.
‫Va bene?
‫E quindi se è falso, beh in quel caso, allora
‫vogliamo sostituire il NOT. BIOLOGICO.
‫Quindi il NON. Segnaposto BIOLOGICO con semplicemente non-organico.
‫Quindi non organico perché questo è il nome della
‫classe che ti ho mostrato prima.
‫Quindi,
‫è questo.
‫Va bene?
‫Quindi verrà sostituito qui, ok?
‫E così di nuovo, nel caso
‫in cui non sia organico, beh, allora
‫il nome della classe NOT_ORGANIC sarà qui e l'intero batch non verrà spostato.
‫Va bene, ha senso?
‫Quindi, vediamo
‫se w-- ah, scusa, il codice
‫effettivo
‫è sotto di esso.
‫Quindi proviamo a dargli più senso.
‫Quindi, di nuovo, eseguiamo il loop su questo oggetto
‫dati già qui che contiene tutti
‫i prodotti e in ogni iterazione, sostituiremo
‫i segnaposto nella scheda modello con il prodotto corrente
‫che è elemento, giusto?
‫E questa funzione freccia la restituirà implicitamente qui.
‫Quindi è come tornare qui, ok?
‫Ma non è realmente
‫necessario perché in una funzione freccia, se non hai
‫le parentesi graffe, questo valore qui viene automaticamente restituito.
‫Ok, nel caso non lo sapessi,
‫mi sono appena ricordato che ci siamo dimenticati di restituire
‫l'output da qui.
‫Va bene?
‫Quindi, ovviamente, inseriamo il modello e il prodotto,
‫ma ovviamente dobbiamo produrre l'HTML finale.
‫Destra?
‫E quindi questo viene collegato qui, e
‫quindi alla fine, tutto questo qui
‫sostituirà un array, con i cinque HTML finali, ciascuno per
‫una delle cinque schede.
‫Quindi, ciascuno per uno dei cinque prodotti, va bene?
‫Ora andiamo avanti e registriamo questo
‫nella console prima di inserirlo nella pagina Web panoramica.
‫Quindi cardHtml solo per assicurarsi che tutto funzioni qui.
‫Va bene?
‫Quindi dobbiamo ricaricare il server, non dimenticarlo.
‫Funziona tutto allo stesso
‫modo, ma ora diamo un'occhiata alla console.
‫E sto iniziando a vedere cose carine qui.
‫Quindi abbiamo un
‫array e abbiamo effettivamente sostituito le cose.
‫Quindi qui abbiamo degli avocado.
‫Qui dice FreshAvocados.
‫Ha i quattro avocado per scatola, il
‫prezzo e quindi sì, in realtà
‫sembra tutto molto carino.
‫E infatti è anche un array.
‫Quindi abbiamo questa prima
‫cifra, poi una virgola e quindi qui inizia il
‫prossimo elemento quindi la prossima cifra, va bene?
‫Quindi in questo momento abbiamo un array di tutti questi elementi,
‫ma quello che vogliamo in realtà non è
‫un array ma vogliamo una grande stringa contenente tutto questo HTML.
‫Quindi, in realtà è molto semplice da ottenere.
‫Tutto quello che dobbiamo fare è alla fine di questo array, quindi
‫ricordiamo che tutto questo qui restituisce questo
‫array che vediamo qui sotto, e quindi alla fine
‫tutto ciò che facciamo è
‫unire con una stringa vuota, e quindi questo
‫si unirà a tutti di questi elementi in una stringa.
‫E così ora cardHtml è veramente una stringa.
‫Va bene?
‫E così ora abbiamo le nostre
‫carte pronte e l'ultimo pezzo
‫del puzzle è andare avanti e sostituire quel segnaposto.
‫Quindi questo qui, in realtà copiandolo ora,
‫quindi ora sostituendo questo
‫segnaposto con l'HTML che abbiamo appena creato.
‫Quindi chiamiamolo output qui e
‫tutto ciò che dobbiamo
‫fare è
‫tempOverview con solo una stringa che contiene l'HTML della panoramica, giusto? sostituisci e sostituiscilo con
‫cardHtml.
‫Bene?
‫Questo è tutto.
‫Ora tutto ciò
‫che dobbiamo fare è rispondere effettivamente con l'output e non con quello che avevamo prima.
‫Va bene, d'accordo.
‫Quindi sembrava un po'
‫complesso, ma se ci pensi, spero che
‫abbia perfettamente senso per te.
‫E quindi andiamo avanti e testiamo questo ora e
‫spero di non avere errori
‫e qualcosa è andato storto, va bene.
‫Allora cos'è?
‫Ok, quindi ho solo sbagliato a scrivere sostituisci.
‫Questo è uno degli errori più comuni che ricevo sempre.
‫Come un piccolo errore di ortografia.
‫Ricarica e bam, ci siamo.
‫Quindi ecco le nostre cinque righe.
‫Così bello, bello, bello.
‫Ora non sembra proprio
‫quello originale perché quello che manca è come questi, questo organico qui.
‫Va bene?
‫Quindi vediamo cosa c'è che non va.
‫Inoltre, per qualche motivo, qui non
‫vedo la quantità ma solo se non è biologico.
‫Beh, è strano, quindi proviamo a indagare su cosa sta
‫succedendo qui.
‫Quindi l'errore è probabilmente da qualche parte qui
‫in questa funzione replaceTemplate.
‫Ma in realtà, tutto sembra corretto qui.
‫Quindi anche qui su questo sostituto non organico.
‫Quindi diamo un'occhiata alla nostra scheda modello e,
‫quindi, vedo qui che quando
‫c'è
‫questo NOT_ORGANIC, beh, in realtà l'intera scatola qui,
‫quindi anche questo H6 non sarà
‫più visibile.
‫Quindi qualcosa sembra
‫sbagliato qui, diamo un'occhiata a quello originale
‫solo per ispezionare l'HTML qui.
‫Quindi il dettaglio della carta è
‫questo e quindi noi, sì, in realtà abbiamo tre
‫dettagli della carta
‫qui mentre nel modello, ne abbiamo solo uno, ok?
‫Quindi andiamo avanti e copiamo questo.
‫Quindi nei dettagli puoi effettivamente copiare un elemento
‫e poi, proprio così, copierà l'intero
‫elemento.
‫Quindi questo è come dovrebbe essere.
‫E quindi qui dovrebbe dire biologico e non quantità
‫per scatola, ok?
‫Quello è probabilmente il prossimo.
‫Quindi, risolviamolo
‫rapidamente.
‫E qui,
‫ovviamente, non lo vogliamo, e quindi
‫sì, sembra migliore, chiudilo, riavvia il
‫server e controlliamolo di nuovo.
‫E ora, bam, ci siamo.
‫Quindi ora funziona e in effetti funziona esattamente allo stesso modo.
‫Bellissimo.
‫Quindi è davvero bello.
‫Andiamo avanti ed eliminiamo,
‫ad esempio, gli avocado solo per vedere cosa succede.
‫Farò solo il
‫controllo, X per tagliarlo, ricaricarlo qui, e non cambierà
‫e questo ovviamente perché ricorda che
‫questo, questi dati vengono effettivamente
‫letti
‫solo all'inizio
‫quando avviamo l'app, ok?
‫Quindi, affinché questo abbia effetto, abbiamo effettivamente bisogno
‫di riavviare l'applicazione.
‫Ok, quindi niente di grave.
‫E ora non c'è più, ok?
‫Perché non è più nel
‫file JSON che viene letto nel
‫momento in cui avviamo
‫l'applicazione Va bene?
‫Rimettiamolo
‫qui, salviamolo, riavviamo, apriamo questo tizio, ricarichiamo ed eccolo di nuovo.
‫Quindi ora funziona davvero in modo dinamico leggendo tutti
‫questi dati direttamente dal file JSON.
‫Quindi questo funziona, controlliamo i collegamenti anche laggiù
‫nell'angolo in basso a sinistra.
‫Vedi che l'ID cambia da zero, uno a
‫e così via e così via, ma
‫se clicco qui, beh, quando otteniamo
‫Pagina non trovata.
‫E questo perché il nostro percorso non è ancora pronto per questo.
‫Va bene?
‫E quindi
‫facciamolo nel prossimo video e implementiamo la pagina dei dettagli
‫del prodotto per ciascuno di questi prodotti.
‫Quindi, non aspettare e ora andiamo avanti.