Agora, é claro que as receitas devem ser renderizadas na tela de categoria de refeições, que é a tela que
estamos carregando quando selecionamos uma
categoria e, obviamente, para renderizar qualquer receita, precisamos delas, precisamos de receitas para refeições,
como também as chamo aqui e Começarei adicionando um novo modelo, refeição. js onde defino como deve ser
uma refeição neste aplicativo.
Agora, essa definição extra é opcional,
mas acho que fica mais fácil argumentar sobre nossos dados e sua estrutura.
Então, configurarei uma classe aqui e exportarei
e, nessa classe, adicionarei um construtor que nos permita criar novas refeições pré-configuradas com base na estrutura que
estamos prestes a configurar aqui.
Agora, uma refeição será mais complexa que uma categoria, ela
terá um ID,
mas também terá alguns IDs de categoria aos quais pertence,
portanto, várias categorias às quais uma refeição pode pertencer.
Ele terá um título,
um nome
e, em seguida, terá alguns campos extras, como a acessibilidade de uma
refeição, por isso é caro, é barato?
A complexidade, então quão complexo é fazer esse prato com base nessa receita. Um imageUrl que aponta para uma imagem na Web em
que temos uma bela imagem dessa refeição. A duração que leva alguns minutos
para criar essa refeição, também os ingredientes que devem ser uma matriz, as etapas que precisamos
tomar para fazer essa refeição, portanto, as instruções e os quatro campos que nos ajudam a
filtrar - é o GlutenFree, que marca se é glúten. grátis ou não, então este será um booleano, isVegan,
isVegetarian e isLactoseFree,
esses são os quatro campos que utilizarei neste aplicativo.
Agora, todos os dados que estamos chegando aqui serão armazenados
em propriedades, então aqui definirei esse ID igual ao ID, este ID da categoria igual ao ID da categoria,
este título igual ao título, este imageUrl igual a imageUrl e assim é claro, então, basta armazenar todos
os argumentos que estamos obtendo nas propriedades desse objeto, no final, o objeto será criado
com base na classe.
Então, também vamos dar os passos aqui, é claro, armazenaremos a duração, armazenaremos a complexidade, armazenaremos
a acessibilidade aqui, é claro, em uma propriedade, armazenaremos se é sem glúten e
também é claro que todos
os outros filtros, como o Vegan, este vegetariano também devem ser armazenados e isLactoseFree, que também será armazenado
e, sim, com isso, estou armazenando
todos esses dados.
Agora podemos adicionar alguns dados fictícios, algumas refeições fictícias e, é claro, você os encontrará novamente.
Tudo o que você precisa fazer em um dado fictício. O arquivo js é uma refeição de importação da pasta models e, a partir da refeição. js ou apenas de uma refeição como
esta e agora anexada no arquivo Javascript que você encontra em anexo, você também encontrará a
matriz de refeições que você pode adicionar aqui e que agora é apenas um monte de receitas que eu preparei para
você, que usa ou que usa todos os campos montamos em nosso modelo.
Agora, com esses dados fictícios com os
quais trabalhamos, agora vamos começar a trabalhar com isso e vamos renderizar uma lista dessas refeições na tela de categoria refeições.
Obviamente, apenas as refeições que se encaixam na categoria que selecionamos e que possuem nosso código de categoria.