Ora le ricette ovviamente dovrebbero essere visualizzate nella schermata dei pasti della categoria che è la schermata che stiamo caricando quando
abbiamo selezionato una categoria e ovviamente,
per rendere tutte le ricette, ne abbiamo bisogno, abbiamo bisogno di ricette per i pasti
come le chiamo anche qui e Inizierò aggiungendo un nuovo modello, il pasto. js dove definisco come dovrebbe apparire
un pasto in questa app.
Ora questa definizione extra è facoltativa,
ma penso che renda un po 'più facile ragionare sui nostri dati e sulla sua struttura.
Quindi creerò una classe qui ed esporterò
e in quella classe, aggiungerò un costruttore che ci consente di creare nuovi pasti preconfigurati in base alla struttura
che stiamo per istituire qui.
Ora un pasto sarà più complesso di una categoria, avrà
un ID
ma avrà anche alcuni ID di categoria a cui appartiene,
quindi più categorie a cui un pasto può appartenere.
Avrà un titolo, quindi
un
nome e quindi avrà alcuni campi extra come l'accessibilità economica di
un pasto, quindi è costoso, è economico?
La complessità, quindi quanto sia complesso realizzare quel piatto sulla base di quella ricetta. Un imageUrl che punta a un'immagine sul web in cui
abbiamo una bella foto di quel pasto. La durata necessaria in pochi minuti
per creare quel pasto, anche gli ingredienti che dovrebbero essere un array, i passaggi che dobbiamo
prendere per fare quel pasto, quindi le istruzioni e quindi quattro campi che ci aiutano a
filtrare - isGlutenFree che segna se questo è glutine gratis o no, quindi questo sarà un booleano, isVegan, isVegetarian
e isLactoseFree, questi
sono i quattro campi che userò in questa app.
Ora tutti i dati che stiamo ottenendo verranno archiviati
in proprietà, quindi qui imposterò questo ID uguale a ID, questo ID categoria uguale a ID categoria, questo
titolo uguale a titolo, questo imageUrl uguale a imageUrl e così ovviamente, quindi memorizza tutti gli
argomenti che stiamo ottenendo nelle proprietà di ciò, l'oggetto alla fine verrà creato in
base alla classe.
Quindi ovviamente avremo anche i nostri passi qui, memorizzeremo la durata, memorizzeremo la complessità, memorizzeremo l'accessibilità
qui ovviamente in una proprietà, memorizzeremo se questo è senza glutine e anche
ovviamente tutti gli altri
filtri, quindi isVegan, anche questo è vegetariano dovrebbe essere memorizzato ovviamente e isLactoseFree, che sarà anche memorizzato
e sì, con ciò, sto memorizzando
tutti quei dati.
Ora possiamo aggiungere alcuni dati fittizi, alcuni pasti fittizi e, naturalmente, li troverai di nuovo allegati.
Tutto quello che devi fare in un manichino-dati. Il file js è import pasto dalla cartella dei modelli e lì, dal pasto. js o semplicemente da un pasto
come questo e ora allegato nel file Javascript che trovi allegato, trovi anche quella matrice di
pasti che puoi aggiungere qui e che ora è solo un mucchio di ricette che ho preparato per te che
utilizza o che utilizzano tutti i campi abbiamo impostato nel nostro modello.
Ora sono dati fittizi con cui
lavoriamo, ora iniziamo a lavorare con quello e rendiamo un elenco di questi pasti nella schermata dei pasti della categoria.
Naturalmente, solo i pasti che rientrano nella categoria che abbiamo selezionato, in modo che abbiano il nostro ID categoria.