Vue. js 3 e base de fogo para iniciantes

1. Boas-vindas ao curso!: [MUSIC] O Vue.js é uma estrutura de front-end incrível e fácil de usar para criar aplicativos da web. Neste curso, vamos usá-lo para criar um aplicativo de pizzaria repleto de recursos. Descobriremos todos os novos recursos da versão 3 do Vue ao construir este projeto. Além disso, vincularemos nosso projeto ao Firebase para aplicar um back-end ao nosso aplicativo. Isso nos fornece um banco de dados em tempo real para armazenar nossos usuários, nossos pedidos e pizzas do menu. Ele também será usado para fornecer contas de usuário e autenticação, incluindo usuários administrativos e regulares. O projeto tem muitos recursos , como menu e cesta, adição de itens e a capacidade de fazer pedidos. Temos uma área administrativa onde usuários autorizados podem adicionar e remover pizzas do menu. Seus pedidos podem ser exibidos e também excluídos, além da capacidade de definir outras coisas da mesma forma que os administradores. Todos esses dados são extraídos do nosso banco de dados. Oi. Sou Chris e sou um desenvolvedor web experiente. Também ensinei mais de 100.000 alunos, tanto on-line quanto pessoalmente. Se você deseja criar aplicativos de front-end incríveis com o Vue Versão 3 e também usar o Firebase Database and Authentication , esta é a classe para você. Estou ansioso para ver você na primeira aula. 2. Materiais necessários: Para esse cluster, não há compras adicionais que você precise fazer. Todos esses softwares que usaremos serão gratuitos e de código aberto. Então, na verdade, só precisaremos de algumas coisas. Mas antes de fazer isso, vamos agora dar uma olhada nos requisitos para não ficarmos muito sobrecarregados. Como essa é uma aula de desenvolvimento web, você deve pelo menos conhecer o básico e presume-se que você conhece HTML e CSS muito bem e também se sente confortável usando JavaScript. Você não precisa ser um especialista, mas pelo menos precisa saber o básico. Eu tenho aulas disponíveis sobre cada uma delas, se você precisar se atualizar primeiro. Além disso, se você tiver experiência com outras estruturas ou bibliotecas de JavaScript , como Angular ou React, ou mesmo com a versão 1 ou 2 do Vue, isso será um grande benefício, mas não essencial. Além disso, faremos um pequeno uso do terminal, mas se você não o usou no passado, não se preocupe com isso. Vamos usar apenas alguns comandos simples. Visual Studio Code, ele será o editor de texto que vou usar ao longo deste curso. Atualmente, é muito popular no mundo do desenvolvimento web, mas você pode usar qualquer outro editor de sua preferência. Se você precisar, o link para download está aqui a seguir e também é totalmente gratuito. Outro benefício é que ele vem com um terminal embutido, que usaremos para configurar nosso projeto e instalar os pacotes de que você possa precisar. Mas também se você se sentir confortável com o terminal e talvez tenha seus próprios terminais externos, como o Item, também é totalmente bom de usar. Com isso em mente, vamos passar para o próximo vídeo, onde veremos como podemos configurar nosso projeto usando o Vite. 3. Crie configuração de ferramentas com o Vite: Para começar nosso projeto, começaremos com uma configuração local. Podemos executar o Vue.js em nosso próprio computador. Para isso, usaremos uma ferramenta de construção chamada Vite. O Vite foi na verdade criado por Evan You, que também criou o Vue.js. Essa ferramenta de construção nos permitirá usar componentes de visualização de arquivo único, que é quando escrevemos uma parte do nosso site chamada de componentes em um único arquivo. Isso manterá as coisas organizadas e organizadas para nós quando estivermos criando nosso projeto. Mas isso também significa que precisamos uma ferramenta de construção para pegar todos esses componentes separados e agrupá-los para criar nosso aplicativo. Vites também nos oferece muitos outros benefícios, como um servidor de desenvolvimento , a substituição do módulo automático, que atualizará instantaneamente o projeto no navegador sem a necessidade de atualizar a página Faremos uma alteração. Também há muitas outras vantagens. Você precisará instalar o Node.js se ainda não tiver feito isso. Você pode fazer isso em nodejs.org. Vá em frente e baixe a versão mais recente para seu sistema operacional. Estou usando um Mac book. Se você estiver usando o Windows, ele também deve detectar isso automaticamente. Caso contrário, basta clicar no outro download. Esse download também incluirá o npm, que usaremos para configurar nosso projeto e também adicionar pacotes conforme necessário. Em seguida, vá para o terminal, onde você pode usar um terminal independente, se preferir. Ou você pode usar aquele embutido no Visual Studio Code. A simplicidade, essa é a que vou usar. Vá para o código do Visual Studio, entre nas opções, terminal e, em seguida, no novo terminal. Agora teremos esse terminal na parte inferior, que podemos usar para escrever comandos. Se você é novo no terminal, não precisa se preocupar, só precisamos de alguns comandos simples. Você pode usar um terminal para navegar pelos arquivos e pastas do seu computador, assim como você pode fazer com o mouse clicando dentro de uma janela. Aqui, porém, usamos comandos, mas precisaremos navegar até onde queremos adicionar nosso projeto. Quero mantê-lo simples e adicioná-lo à trabalho para facilitar o acesso. Atualmente, estou no diretório inicial do meu usuário. Podemos usar o comando LS para listar todos os arquivos e pastas dentro desse diretório. Em seguida, podemos usar o comando cd para mudar para qualquer um desses diretórios que você desejar. Para mim, está indo para o desktop, que podemos ver listado aqui. cd para transformá-lo na área de trabalho. Isso também diferencia maiúsculas de minúsculas. Clique em “Enter”. Agora podemos ver que estamos dentro do diretório Desktop. Mas se você quiser, você pode mudar para qualquer outro diretório que desejar. Mas pouco antes de criarmos o projeto, precisamos verificar se temos os nós e o npm instalados corretamente. Para fazer isso, digitaremos node dash v, que significa versão. Veremos retornado o número da versão que está instalada. Minha versão atual é a número 18. Você precisará de pelo menos a versão 15 do node para continuar. Obviamente, qualquer número de versão acima de 15, você estará pronto para começar. Mas se você ver uma mensagem de erro ou um aviso, você precisará voltar e verificar se o node está instalado corretamente. Em seguida, podemos verificar novamente o npm, então npm dash v. Não vemos nenhum problema aqui. Para criar um projeto view JS usando o Vite, precisamos executar este comando. Isso é npm nele. Visualização. O mais tardar. É entrar. Ele está solicitando que instalemos os seguintes pacotes, que são Create View. Isso é bom. Pressione “Y” ou pressione “Enter”. Em seguida, fizemos uma série de perguntas. Em primeiro lugar, o nome do projeto, meu será pizza planet. Você pode mudar isso se quisermos. Não vamos usar o TypeScript. Vamos clicar em Não, não precisamos de suporte para JSX, então optaremos por Não. Você quer adicionar o roteador de visualização? Sim, nós temos. Vamos dar uma olhada nisso em breve. Se quiser gerenciamento de estado, vamos selecionar Não, pois usamos um gerenciamento de estado dentro de arquivos compostos. Também veremos como fazer isso durante a aula. Não vamos cobrir o intestino, então vamos clicar em Não e Não. Sim. Comprimento. Isso pode ser sim. Depende de você. Mais bonita? Sim. Bom, e agora estamos prontos. Lembre-se de que antes usávamos o comando cd para mudar para o diretório da área de trabalho. Agora, criamos um novo diretório chamado pizza planet, agora está dentro do nosso desktop. O que precisamos fazer, como diz aqui, agora precisamos mudar para o diretório pizza planet, então cd, pizza dash planet ou o nome do projeto de sua escolha. Em seguida, precisamos executar o npm install, que instalará todos os pacotes necessários para nossos projetos Vue. Bom, os pacotes agora estão todos instalados. Para iniciar nosso servidor de desenvolvimento, precisamos executar o npm, executar o dev. É Enter. Isso nos fornecerá um endereço da web para abrir dentro do navegador. Podemos copiar isso ou clicar em Comando ou Controle, que o abrirá dentro do navegador. Este é o iniciador do nosso projeto, o que significa que tudo está funcionando corretamente. Já que configuramos o roteador de visualização, sobre o qual falaremos um pouco mais tarde. Também veremos um link Página inicial e um link Sobre para alternar entre eles. 4. Imagens de projetos: Ao longo deste projeto, usaremos algumas imagens do projeto. Você pode baixar o seu próprio, se preferir, ou pode usar exatamente os mesmos que estou usando. Se você quiser acompanhar e usar os mesmos, dentro do GitHub, eu tenho esse repositório que está disponível em github.com/, meu nome de usuário, que é chrisdixon161/pizza-planet-v3-images com um traço entre cada palavra. Esse é um repositório simples. Tudo o que temos dentro é essa pasta de imagens com as seis imagens que vamos adicionar ao nosso projeto. Se você quiser usá-los, basta clicar no botão Código. Baixe o arquivo zip. Quando isso terminar, você pode clicar nele para abri-lo. Em seguida, precisamos adicionar isso ao nosso projeto. Em primeiro lugar, vá até o Visual Studio Code ou seu editor de texto. O que precisamos fazer é abrir nosso projeto dentro daqui. Arraste sobre a pasta do projeto que criamos no vídeo anterior. O meu está armazenado na área de trabalho. Arraste isso para o Visual Studio Code. Agora vemos todos os arquivos e pastas do nosso projeto V dentro da barra lateral. Talvez também precisemos reabrir o terminal. O Terminal e depois vá para Novo. Atualmente, estamos dentro de um projeto pizza-planet. Podemos executar npm, executar dev, o que abrirá isso novamente com este link. Clique no comando ou controle. Bom. Está tudo bem. Então, se entrarmos em nossas imagens e depois em nossa pasta de projeto, que acabamos de abrir no Visual Studio, entrarmos na pasta de origem, nos ativos, e então poderemos arrastar a pasta de imagens para dentro daqui. Mantenha isso pressionado. Também podemos vê-las em uma barra lateral se abrirmos a fonte, nos ativos, e aí estiverem nossas imagens que usaremos para este projeto. Novamente, se você quiser usar suas próprias imagens, você pode adicioná-las a uma pasta de imagens dentro daqui e usá-las à medida que avançamos no projeto. Mas agora, com eles disponíveis para uso, vamos passar para a seção de roteamento, onde veremos como podemos alternar entre as páginas. 5. Visualizações ou componentes?: Nesta seção, daremos uma olhada em alguns roteamentos básicos para nos permitir alternar entre diferentes páginas dentro do nosso aplicativo. Mas antes de fazermos isso, quero dar uma olhada rápida em dois arquivos diferentes que usaremos. Essas são visualizações e componentes. Vamos ver qual é a diferença entre esses dois. Em primeiro lugar, temos a ideia de pontos de vista. Esses são arquivos que contêm o conteúdo de cada página de visualização. Um aplicativo ou site típico usaria links como Página inicial, Sobre nós e Fale conosco, e cada um deles será vinculado a uma nova página. É assim que faremos uso das visualizações. Além dos componentes, os componentes geralmente estão partes menores de nosso aplicativo, que podem ser um item independente ou podem ser reutilizados em várias páginas de visualizações. Um componente pode ser qualquer bloco de conteúdo, como um mapa de localização, um produto em uma loja de comércio eletrônico ou até mesmo um simples bloco de texto. Os componentes também podem ser reutilizados repetindo o conteúdo em várias páginas ou passando dados dinâmicos de um componente. Os arquivos de componentes e os arquivos de visualização são iguais. Eles também têm o mesmo conteúdo e estrutura, pois ambos são componentes de visualização. Mas tê-los em pastas diferentes mantém as coisas organizadas. Para recapitular, uma visualização é uma página que podemos usar para alternar entre elas em nosso aplicativo. Geralmente, um componente é uma parte menor e geralmente mais reutilizável da nossa página. Geralmente, os armazenamos em suas próprias pastas, chamadas visualizações e componentes, para torná-los mais organizados. Isso é o que vamos analisar a seguir. 6. Visualizações e rotas: Dentro do navegador, temos nosso projeto aberto. Examinamos brevemente esta página inicial e os links Sobre que são fornecidos. Alternamos entre essas duas páginas ou essas duas visualizações que acabamos de aprender. Podemos ver esses dois arquivos de visualização dentro do Editor. Entrando no código do Visual Studio com o projeto aberto dentro da pasta de origem onde escreveremos todo o nosso código. Temos essa pasta chamada views. Isso tem o About e o HomeView, que acabamos de alternar dentro do projeto. interior desses arquivos parecerá bastante familiar se você já usou o Vue.js no passado. Eles são apenas arquivos de componentes onde temos a seção de script, onde escrevemos todo o nosso código JavaScript e importamos quaisquer arquivos que você possa precisar. Além disso, uma área de modelo aqui. Essa é a área em que escrevemos nosso HTML. Também podemos ter uma seção de estilo que podemos ver se formos para o AboutView. Acima disso, dentro da pasta de origem, temos essa pasta do roteador com uma página index.js. Temos isso porque optamos por instalar o pacote do roteador Vue quando configuramos este projeto pela primeira vez. A chave aqui está na parte superior do arquivo, onde importamos qualquer uma de nossas visualizações. Aqui podemos ver que estamos importando o HomeView da pasta views. Então, abaixo de CreateRouter , haverá essa matriz de rotas. Cada uma dessas rotas é um objeto, como vemos aqui. Vemos o caminho do arquivo, que é uma barra. Esse é o diretório inicial. Podemos dar esse nome de roteador, qual nos referiremos durante nosso projeto. Em seguida, vincule isso a um componente específico da visualização que acabamos de importar. Depois disso, também temos a seção Sobre. Você pode estar se perguntando por que não importamos o AboutView na parte superior junto com o HomeView. Bem, muitas vezes fazíamos isso e também importávamos o AboutView, assim como fizemos com os componentes Home. Mas, em vez disso, isso demonstra uma abordagem um pouco diferente, em que usamos algo chamado carregamento lento. Carregamos lentamente a página para baixar o conteúdo da página somente quando o usuário realmente precisa dele. Nesta visão geral da página do roteador, vamos agora criar as visualizações de que precisamos para nosso projeto , para que possamos voltar e adicioná-las à nossa matriz. Na fonte, na pasta views, ainda podemos usar o HomeView e o AboutView para nossos projetos. Vamos limpar o conteúdo interno para que não precisemos dos componentes de boas-vindas. Como removemos isso, também podemos remover a referência a ele aqui. Em vez de colocar um título de nível 3, talvez envie uma mensagem de texto para uma página inicial. Voltaremos e adicionaremos conteúdo a essas visualizações, mas, por enquanto, podemos usar o título de Nível 3 para ver em qual página estamos alternando. O AboutView, remova o estilo. Não temos uma seção de roteiro. Temos o invólucro, H3, e o texto de about. Dentro das visualizações, precisamos de mais dois arquivos. Clique no ícone “Arquivo” na parte superior. Também precisamos do AdminView, que usa a extensão.vue. Crie um modelo, um título. Isso é para o administrador. Arquivamos a visualização final que vamos usar é o MenuView. Este será usado para exibir todas as pizzas que temos do nosso banco de dados e também uma cesta de compras. Outro modelo, o título do menu. Em seguida, podemos fechá-los e importá-los dentro do nosso roteador, então o índice do roteador. Todos eles estão no mesmo diretório de um HomeView. Vamos copiar e colar isso mais três vezes. O Menu e o MenuView. O próximo é o Admin do AdminView e o último é o About. Como os importamos na parte superior do nosso arquivo, podemos basicamente duplicar a seção Início. Logo abaixo disso, crie um novo objeto e separe-o por uma vírgula. O caminho que queremos usar é uma string e esse será um menu de barra. Isso significa que, se entrarmos em nosso projeto e, no final, digitarmos o menu de barra, veremos a exibição do menu dentro do navegador. Em seguida, o nome, que é o link do menu. Usaremos isso em breve em nosso projeto. O componente que queremos exibir é o menu que importamos logo acima. Em seguida, temos o Admin, escrevemos um novo objeto e o separamos com uma vírgula. Este deseja acessar dentro do navegador com a barra de administração, o nome do link do administrador e os componentes do administrador. Bom. O último que precisamos é About. O caminho da barra direta e a ordem em que colocamos isso não fazem diferença em nosso projeto. O nome desse link, o link Sobre e, finalmente, os componentes. Bom. Está tudo feito. Certifique-se de ter uma vírgula entre cada uma dessas rotas. Guarde isso. Se agora formos até o navegador, atualize. No menu de barra, temos os textos do menu de nossos componentes. Também temos administrador. Você vê o texto do administrador, Sobre, depois a barra do diretório inicial. Atualmente, ainda vemos o conteúdo de nossas quatro visualizações ao lado do conteúdo existente à esquerda. Como nosso aplicativo sabe onde queremos que essas visualizações sejam exibidas? Bem, a resposta para isso está dentro do RouterView, que veremos a seguir, além de adicionar essas novas visualizações aos nossos links de navegação. 7. RouterLink e RouterView: Dentro da nossa pasta de origem no projeto, abra o App.vue. Dentro desse arquivo, há duas coisas principais a serem observadas aqui. Uma delas é que temos essa área de navegação e ela contém dois links de roteador. Isso tem o texto de casa e também sobre, e esses são os dois links que vemos dentro do nosso projeto. A primeira coisa aqui é esses links não são os oito elementos usuais, que veremos em HTML normal. Em vez disso, eles estão cercados dentro desse link de roteador. É assim que o roteador de visualização lida com a vinculação a outras páginas ou componentes. Ele os usa em vez dos elementos a para que o roteador possa alterar os URLs da página sem recarregar a página. Também podemos controlar o URL para o qual estamos vinculando , incluindo rotas dinâmicas, que podem incluir variáveis, em vez de apenas ter textos simples como os que temos aqui, também podemos inserir variáveis. Além disso, você verá esse componente de visualização do roteador na parte inferior. Este é o canal que exibe o conteúdo da nossa página, que temos dentro das visualizações. É aqui que o conteúdo da nossa página é exibido, nos dando controle total em vez de apenas substituir o conteúdo da página inteira. Aqui vemos que esse componente de visualização do roteador é colocado ao lado do cabeçalho. É por isso que os vemos lado a lado dentro do navegador. Além disso, você percebe que, ao subir até o topo do arquivo, tanto o link do roteador quanto visualização do roteador são importados do pacote do roteador de visualização. Com esse conhecimento, podemos remover o código padronizado daqui e criar nossos próprios links dentro dos componentes do cabeçalho. Vamos limpar esse App.vue. Vamos retirar o link do nosso roteador, não precisamos mais disso. Também remova esse conteúdo de cabeçalho. Não precisamos desse exemplo do HelloWorld dentro do nosso projeto, mas podemos reutilizar esse arquivo e convertê-lo para ser o componente do cabeçalho. Chamaremos isso de cabeçalho do aplicativo, renomearemos o arquivo AppHeader.vue. Então, dentro do modelo, podemos colocar esse AppHeader exatamente onde queremos que ele esteja. Como esse arquivo App.vue é o componente principal do nosso projeto, podemos usá-lo para dar alguma estrutura a ele. Dentro de nossos projetos, sempre queremos que essa visualização do roteador renderize a página. Mas logo acima disso, também podemos colocar no AppHeader. Isso significa que em cada página do nosso projeto haverá o cabeçalho na parte superior, seguido pelo conteúdo da página. Em seguida, lembre-se de que alteramos esse nome de arquivo para AppHeader.vue. Isso está dentro da pasta de componentes. Pule para dentro daqui. Em seguida, renomeie o exemplo HelloWorld para AppHeader. Também podemos remover esses ícones. [inaudível] criou o projeto. Não precisamos disso para nosso projeto. Vamos entrar nesse arquivo AppHeader.vue. Limpamos todo o conteúdo. Atualmente, não precisamos de um script. Vamos remover isso. Remova todo o estilo padrão. Temos todo o conteúdo entre os modelos. Vou substituir isso por um cabeçalho HTML. cabeçalho da linha o coloca dentro de um elemento de Nível 1 com o título sublinhado da citação da classe. Em vez de simplesmente adicionar o texto de pizza planet ao título do nosso site, também podemos colocá-lo dentro do link do roteador. Isso tem uma tag de abertura e fechamento. Em seguida, dentro dos ícones do Tilder, o texto do planeta pizza. Você pode ver que temos esses dados subjacentes que são um erro com esse componente. Isso ocorre porque precisamos adicionar as duas propriedades como um atributo. Como esse é o título do site, ele apenas retornará à página inicial, que é uma barra. A seguir, uma seção de navegação com nossos links de navegação. Esses links de navegação serão vinculados às nossas opiniões. Estamos indo para lugares logo abaixo do nosso título de Nível 1 . Os elementos de navegação. Essa é uma série de links relativos. A classe de link que vincularemos ao nosso CSS em breve. Os dois atributos. Esse será o link inicial, para que possamos criar um link para a barra e o texto de exibição da página inicial. Duplique isso mais três vezes. O próximo é para o menu , com links para /menu. A última é criar um link para o administrador abaixo da navegação e colocar o título do Nível 2 com o texto do lugar número 1 para pizza. Vamos salvar e verificar. Tudo está funcionando. Agora temos o cabeçalho do aplicativo na parte superior e, em seguida, devemos ver o conteúdo da visualização do roteador logo abaixo. Atualizar. Aqui está nosso título de Nível um. Temos nossos links, temos o título de Nível 2, mas ainda temos o conteúdo desta página ao lado. O conteúdo em que queremos que ele seja exibido, mas não temos a exigência de estilização. Isso acontece por causa do estilo que é configurado por padrão em nosso projeto VP. Poderíamos remover isso e usar o nosso próprio.. Na barra lateral. Vá para a pasta de ativos, várias folhas de estilo dentro daqui. Vamos remover o base.css. Também podemos remover o logotipo, mas não podemos usar esse arquivo CSS principal, mas, em vez disso, limparemos o conteúdo e adicionaremos o nosso. Selecione todo o conteúdo e exclua esse arquivo. Ele é salvo no navegador. Esta é nossa seção de cabeçalho. Agora no topo. Agora eu tenho o conteúdo da página logo abaixo ou também podemos alternar entre o conteúdo desta página com esses links de cabeçalho. 8. Rotas nomeadas: Como acabamos de descobrir dentro do link do roteador, vinculamos várias páginas com esses dois atributos. Em seguida, dentro dele, colocado em um URL codificado para o qual se vincular. Isso funciona perfeitamente bem, mas também temos algo disponível chamado rotas de nomes. rota do nome pode ser um benefício se usarmos o mesmo link várias vezes. Imagine que, dentro do nosso projeto, tivéssemos muitos links para essa página de menu, mas, no futuro, se quiséssemos alterar esse URL do menu de barra para ser algo com barra, precisaremos alterar todos esses links manualmente. Como alternativa, podemos vincular o nome que fornecemos dentro do arquivo do roteador, então pulando para o roteador no arquivo index.js. Lembre-se de que cada um desses links tem um nome específico. Podemos passar isso como um objeto, em vez da barra para frente, colocando as chaves para criar um objeto. O nome da propriedade, que é igual a casa. Assim como qualquer outro atributo de visualização Js, se estivermos inserindo dados dinâmicos dentro daqui, como nosso nome, também precisamos colocar os dois pontos, que é v bind para tornar isso dinâmico. Isso diz a um roteador de visualização que isso não deve ser lido como uma sequência de texto, mas sim dê uma olhada nome que temos em nosso arquivo de roteador. Também podemos fazer isso com o restante dos links. Copie isso e podemos colocá-lo no topo do nosso título. O segundo. Isso foi para o nosso MenuLink, que corresponde ao nome dentro do arquivo do nosso roteador. O número três. Esse foi o AboutLink. Por fim, o AdminLink. Salve isso e vá para o nosso projeto, que deve ser atualizado automaticamente , pois estamos usando o vite para nosso servidor de desenvolvimento. Clique em todos os links e tudo agora ainda funciona da mesma forma que antes, mas agora o que estamos usando são esses nomes de rotas. 9. Rotas aninhadas: Nossa configuração atual permite uma estrutura de roteador como essa. Temos nossos RouterLinks no cabeçalho e, em seguida, substituímos o conteúdo dessas visualizações onde queríamos usando o RouterView. Isso leva a uma estrutura de URL bem simples. Teríamos nosso URL principal e cada visualização adicionaria ao final o nome de administrador, menu ou sobre, por exemplo. Mas, às vezes, nossa estrutura pode precisar se aprofundar ainda mais. Uma dessas visualizações também pode precisar de links e um local para exibir o conteúdo. Um exemplo disso está na página Sobre nós do nosso projeto. À esquerda está a visualização Sobre nós, e podemos colocar em qualquer conteúdo que quisermos. Além disso, também podemos fornecer links extras, como vemos aqui, com o histórico, entrega e os locais. À direita, temos a estrutura desejada, que seria a visualização Sobre nós e, em seguida, os links aninhados de histórico, entrega e locais. Para estruturar isso, precisamos novamente usar o roteador de visualização usando o RouterLinks e o RouterView para colocar o conteúdo na página Sobre nós exatamente onde queremos que esteja. Vamos entrar no projeto e podemos começar a configurar as coisas. Essas seções de histórico, locais e entrega que acabamos de ver serão todas componentes entre os quais podemos alternar. Vamos configurá-los na pasta de componentes. Já temos essa configuração, então crie um novo arquivo, e esse será o Delivery.vue. O próximo, isso vai ser History.vue. Em seguida, o próximo são os locais, todos com a extensão.vue, e também podemos remover os componentes que você não precisa, que são TheWelcome.vue, mover este e também o WelcomeItem. Bom. Agora vamos examinar nossos três novos componentes e podemos adicionar alguma estrutura básica. Precisamos do modelo e cada um desses três componentes será bem simples. Vamos apenas criar um invólucro. Vamos adicionar um título na parte superior, uma imagem e também um pouco de texto aleatório. O div, veja a classe C de info_block. Isso será adicionado a todos esses três novos componentes, h3. Vou usar os ícones til e isso é Delivery Info. Depois disso, uma fonte de imagem. Vamos para a pasta de ativos onde ficará nossa pasta de imagens e, em seguida, na imagem que você deseja está o box.jpg. Novamente, você pode usar suas próprias imagens, se preferir. Basta substituir qualquer um desses que você deseja. O texto alternativo, pizza na caixa. Depois, também uma classe de info_img. Logo após a imagem, adicionaremos um pouco de texto nos elementos p, e você poderá substituí-lo por qualquer texto que desejar. Mas, para simplificar, vou adicionar um texto aleatório de lorem ipsum. Se você estiver usando o Visual Studio, basta digitar a palavra lorem e pressionar “Enter”. Isso nos dará um texto fictício que podemos colocar em nosso projeto. Para manter as coisas consistentes, vamos copiar todo esse conteúdo e depois entrar no histórico. Cole isso e tudo o que precisamos fazer aqui é mudar o título de entrega para histórico. A imagem, esta é a do chef image.jpg. O texto alternativo do chef fazendo pizza. Guarde isso. A próxima foi a localização. Cole novamente o conteúdo e altere o título. A imagem desta é de tabelas. Altere também o texto alternativo. Estas são as mesas ao ar livre. Bom. Esses são os três componentes que usaremos para alternar na visualização sobre e é isso que veremos a seguir. 10. Os componentes sobre a visão e a criança: Agora vamos para a página de visualização Sobre, onde agora podemos usar um roteador para alternar entre nossos três novos componentes. Também precisamos de alguma estrutura e conteúdo nesta página, juntamente com os links do roteador e a visualização do roteador. Vamos remover o título de nível 3 e colocar em um div com a classe about. Esse será o invólucro desses componentes e, em seguida, os colocaremos em várias seções. A seção superior, se formos ao redor, será colocada em duas áreas. Se formos para a visualização sobre , ela será colocada em duas seções. A seção superior será uma introdução sobre esta página, onde teremos alguns textos sobre a pizza, a história, colocaremos em uma imagem e, abaixo dela, adicionaremos uma segunda seção que conterá links do nosso roteador para alternar entre nossos componentes de liberdade. Na primeira seção, com a classe de introdução, e aninhada nela, teremos duas coisas. Em primeiro lugar, é um div e, em segundo lugar, a imagem. O div conterá o texto e, em seguida, adicionaremos a imagem logo abaixo e, em seguida, adicionaremos uma nova seção na parte inferior, e esta conterá nossos links. Vamos começar com essa primeira div, dando a ela uma classe de informações que o sublinhado do invólucro de texto está entre cada palavra. de nível 3 com o título de pizza de qualidade por 30 anos. Vamos dar uma olhada nisso. Aí está nosso título e, abaixo do título de Nível 3, coloque em um p elementos com o texto de nada além dos ingredientes da melhor qualidade em uma atmosfera amigável. Pronto, colocado em uma classe para que possamos adicionar um pouco de CSS posteriormente ao texto informativo. Em seguida, a imagem. Em primeiro lugar, uma classe novamente para o estilo de info_image ou img. A fonte salta para a pasta de ativos onde nossa pasta de imagens está contida, e esta vai para o calzone.jpg. O texto antigo da imagem de close-up de calzone. Lá vamos nós. Esta é a seção superior agora concluída. claro que faremos com que pareça um pouco melhor em breve com um pouco de estilo, mas, por enquanto, vamos passar para nossa segunda seção, que será para nossos links. Isso precisa de uma classe com mais informações, um título de nível 3, e isso significa que clique nos links abaixo para obter mais informações. Em seguida, podemos começar a construir nossos links, lugares nos elementos de navegação HTML, na lista não ordenada. Cada um desses links será colocado dentro do link do roteador. Cada um terá a classe de link, mas nosso estilo. Usamos os dois pontos porque vamos tornar os dois atributos dinâmicos colocando em um objeto, e esse objeto apontará para o nome, que vamos supor dar a cada um desses componentes. Este primeiro será o link do histórico e o texto de exibição da nossa história. Vamos duplicar isso mais duas vezes. O segundo será para o link de entrega. Um texto de entrega. O número 3 será o link de localização. Qualquer texto de localizações. Bom. Isso é tudo o que precisamos, agora temos nossos links gratuitos abaixo de todas as nossas informações na parte superior. Vamos dar uma olhada nisso. Na página Sobre. O conteúdo desaparece, isso pode ser apenas porque não temos uma correspondência para nossos nomes, porque ainda não o criamos. Vamos entrar no console e podemos verificar isso. Não temos correspondência para nosso nome, então vamos até o roteador e fazer isso agora. O roteador index.js. Primeiro, precisamos importar nossos três componentes, que são histórico, locais e entrega. No topo, importe entrega, desta vez na pasta de componentes, o componente é delivery.vue. Duplique isso mais duas vezes. O próximo é para a história. O último é para locais. Como em todas as nossas outras rotas, precisamos adicionar esses três componentes em um caminho. Mas lembre-se de que o caminho para esses será aninhado dentro do link about, então o que queremos. Na verdade, podemos simplesmente remover o segundo. Temos o nome do componente, ou seja, podemos simplesmente remover aquele que foi colocado por padrão. Temos esse link Sobre e o que queremos é o caminho a percorrer e, em seguida, a barra para frente, queremos os locais, entrega e também o histórico. Como vamos fazer isso? Bem, atualmente, a barra direta sobre o link está apontando apenas para um único componente. Também podemos nos aninhar vários componentes adicionando a propriedade children. Para a propriedade children, uma vez que estamos vinculando a vários componentes, ela precisa ser colocada dentro de uma matriz. Cada matriz contém um objeto estruturado exatamente como cada uma dessas rotas, então vamos inserir o caminho, o nome e também os componentes. Para o primeiro a se vincular à história, colocamos no caminho da história o nome do componente. nome desse componente precisa corresponder ao nome exato que colocamos dentro dos links do nosso roteador. Eu tenho o link do histórico, o link de entrega e o link de localizações. Este é para o link da história. Em seguida, os componentes do histórico. Separe-os com uma vírgula. Feche isso. Separe-os com uma vírgula e coloque-os em sua própria linha separada. Vamos duplicar isso, copiar e colar isso em mais duas vezes. O segundo é para entrega, link para link de entrega no componente de entrega. Em seguida, localizações. Vamos tentar isso. Precisamos acessar a página Sobre nós e depois verificar exatamente como isso ficará. Atualmente, estamos na barra frontal, vamos testar nossos links na parte inferior, temos histórico. Agora estamos falando do histórico de barras, da entrega, isso é adicionado ao final e também é o mesmo para os locais. Uma coisa que você pode estar pensando é atualmente temos uma barra frontal sobre a qual colocamos dentro desse caminho aqui, então também temos locais de barra para frente. Primeiro, quando configuramos as rotas secundárias, não adicionamos uma barra antes de cada um desses caminhos. Bem, se fizermos isso, ele será tratado como um caminho raiz. Vamos dar uma olhada exatamente no que queremos dizer com isso. Se adicionarmos a barra a cada uma delas e depois entrarmos em Sobre. Agora, em vez de usar uma barra, se clicarmos em um de nossos links, o URL completo será substituído por esse link de entrega do histórico ou de localizações. Mas, como queremos adicioná-los ao final do link Sobre, podemos simplesmente usá-los sem a barra. Finalmente, para realmente ver o conteúdo abaixo de cada um desses componentes, precisamos adicionar uma visualização do roteador. Vá para a visualização Sobre e, em seguida, logo abaixo da navegação e coloque a visualização do roteador. Isso e vamos dar uma olhada nisso. Temos a seção superior e, em seguida, a área de locais na parte inferior, o histórico e também a entrega. 11. Visualizações com nomes: Esta página Sobre nós tem três componentes entre os quais podemos alternar. Como sabemos, podemos clicar no histórico, nos locais e também nos componentes de entrega. Como também vimos anteriormente, podemos usar componentes e reutilizá-los em qualquer arquivo que você desejar. Por exemplo, no app.vue, podemos seguir o caminho tradicional importando componentes e renderizando-os dentro do modelo. Uma forma alternativa de renderizar um componente é usar o roteador Vue. Até agora, usamos o RouterViews para exibir uma página como esta aqui. Além disso, na visualização acima, que acabamos de adicionar no vídeo anterior, usamos o RouterView. Isso pode exibir a página de nível superior ou qualquer componente secundário, assim como fazemos aqui com a página sobre. Também podemos inserir quantos mais RouterViews quisermos e cada RouterViews adicional funcionará como saídas com vários componentes. Se você inserir mais RouterViews, também precisamos dar nomes a eles para que o roteador saiba quais componentes exibir em cada um. Digamos que quiséssemos mostrar algumas informações adicionais na parte inferior da página inicial, como os componentes de entrega e histórico. Aqui temos um desenvolvedor. A chave aqui é que temos dois routerViews adicionais. Cada um deles tem atributos de nome que serão importantes em apenas um momento. Observe que o RouterView na parte superior não tem nome. Esse é um local padrão. Esse padrão, junto com os dois nomes é definido dentro da página de índice do roteador. A esquerda mostra o que configuramos atualmente para a página inicial usando um único componente. No entanto, quando temos vários RouterViews com nomes, precisamos modificar isso para usar um objeto de componentes, exatamente como vemos à direita. primeiro é o local padrão, que é o RouterView sem nome. Então, os próximos dois nomes corresponderão aos dois nomes que demos ao RouterViews. Vá para o projeto e podemos configurar isso. Vá para o componente principal de nível superior, que é o app.vue e , logo abaixo do RouterView, colocaremos em uma div. Esse div, o estilo e o layout terão a classe de invólucro de blocos de informações. Então, dentro daqui, podemos colocar um RouterViews adicional para exibir qualquer um de nossos componentes. Neste exemplo, vou exibir a entrega e também os componentes do histórico dentro desta página principal. Colocando um RouterView, os atributos do nome, que serão iguais à entrega. Copie e cole isso. O segundo será para a história. Queremos que esses dois componentes sejam exibidos apenas na página inicial. Para isso, vamos até a página de índice dos roteadores e ir até a seção inicial. Atualmente, o roteador doméstico mostra apenas o componente único da visualização doméstica. Mas, para exibir vários componentes, podemos alterar o componente para ter um s na extremidade. Remova isso, passe um objeto. Assim como vimos nos slides, precisamos adicionar a visualização padrão, que é exibida dentro da visualização do roteador sem nome. Essa é a visão inicial, o nome da entrega. Isso mostrará os componentes de entrega e o próximo será para a história. Só para recapitular, temos o componente padrão, que é a visualização inicial dentro do aplicativo. Isso será exibido na visualização do roteador, que não tem nome. Em seguida, temos os componentes de entrega e histórico, que corresponderão ao nome de nossas duas visualizações adicionais do roteador. Agora, o roteador de visualização sabe quais componentes exibir em cada local. Já temos esses dois componentes de entrega na história importados no topo, então agora já deve estar pronto. Salve esse arquivo na página inicial. Do topo, temos esse nível 3 voltando para casa, que podemos ver dentro de nossa vista. O que temos aqui é este título e, abaixo, temos nossos componentes de entrega e o histórico. Apenas para confirmar que eles são exibidos apenas na página inicial, podemos acessar os links adicionais e não devemos ver esses componentes exibidos. Para finalizar, vamos voltar ao nosso app.vue e adicionar um pouco de estilo para que apareçam lado a lado na exibição maior e depois empilhados verticalmente na tela menor. App.vue. Temos essa classe de invólucro de blocos de informações. Vamos copiar isso para a seção de estilo. O tipo de exibição flexível. Começaremos com a visualização em tela pequena, o que significa que precisamos mudar a direção da flexão para ser coluna. Isso manterá nosso conteúdo empilhado verticalmente na tela menor. Para fazer com que essa mudança fique lado a lado, precisamos mudar a direção da flexão para ser uma linha na tela maior. Podemos fazer isso adicionando uma consulta de mídia. Na verdade, também podemos remover todo o resto do estilo. Eu não preciso de nada disso. Configure todas as consultas de mídia com nossa mídia. Queremos que isso tenha como alvo telas com a largura mínima de 900 pixels. Vamos pegar nosso invólucro de blocos de informações. Modificaremos a direção da flexão para ser igual à linha. Nas telas maiores de 900, elas em uma fileira e depois elas caem na tela menor. Essa é uma forma alternativa de usar componentes em vez da forma tradicional de importar um componente para outro arquivo para exibição. Também podemos permitir que o roteador Vue os coloque em uma visualização de roteador. 12. Introdução da seção da IU do projeto: Esta nova seção trata de inserir conteúdo em nosso aplicativo. Criaremos toda a estrutura de que precisamos criando várias páginas e componentes. Posteriormente, nas próximas seções, vamos torná-las mais dinâmicas inserindo várias informações de um banco de dados, como nossos pedidos, nossos usuários e nossas pizzas. Mas a seguir, começaremos criando os componentes do menu. 13. A IU do menu: A página de visualização do menu, que vamos criar agora, será dividida em duas seções. À esquerda, incluiremos o menu, que incluirá todas as pizzas em uma lista. Em seguida, na próxima seção, criaremos a seção da cesta à direita, que listará todo o conteúdo que o usuário adiciona à cesta. Vamos entrar em nossos componentes de visualização de menu e começar a trabalhar nisso . Para as visualizações na visualização do menu. moveremos o título de Nível 3 Por enquanto, moveremos o título de Nível 3 e, em seguida, criaremos um div, que será um invólucro para nossas duas seções. Esta é a classe do invólucro de sublinhado do menu. Em seguida, mais dois divs, que serão aninhados lá dentro. O primeiro será para o conteúdo do lado esquerdo, que será nosso menu. Daremos a isso a classe de menu e, em seguida, criaremos uma segunda div, que será para nossa cesta. Dê-nos a classe de cesta. Em seguida, vá até a seção do menu e coloque em um título de Nível 3. Use as ferramentas de qualquer texto de pizza artesanal autêntica. Para nossa segunda div, que é a cesta. Novamente, um nível 3 liderando as utilidades. Este é para a cesta. Como mencionado anteriormente, por enquanto, vamos apenas trabalhar nesta seção de menu, que será uma tabela HTML. Esta tabela conterá apenas uma única pizza por enquanto. Mas voltaremos a isso quando começarmos a trabalhar com o banco de dados firebase para que possamos analisar todas as pizzas que estão armazenadas e depois exibi-las nesta tabela. Por enquanto, vamos configurar nosso modelo de como isso vai ficar dentro do corpo da mesa. Em seguida, no elemento TR da nossa primeira linha da tabela. Todo o nosso conteúdo de pizza ficará dentro dessa única linha da tabela. As células inserem alguns dados da tabela. Isso vai ser para o nome da pizza. O nome da pizza será colocado dentro das etiquetas fortes e em qualquer nome de pizza, como Margarita. Abaixo dessa primeira linha da tabela, adicionaremos uma segunda linha. Este conterá a descrição dentro dos dados da tabela. As pequenas etiquetas e a descrição de uma deliciosa pizza de pasta de tomate coberta com mussarela. Role para baixo e, logo abaixo desta linha da tabela, adicionará uma terceira linha. Este será para as opções disponíveis. Para cada pizza, vamos criar dois tamanhos diferentes, que serão nove polegadas e um de 12 polegadas. Mais tarde, durante esta aula, analisaremos isso e faremos isso tanto para a pizza de 12 quanto para a de nove polegadas, mas por enquanto, como estamos apenas criando nossa estrutura e adicionando alguns dados de amostra, colocarei apenas em um tamanho único, que será para a de nove polegadas. Isso será seguido pelo preço. Em seguida, a terceira seção será um botão que será usado para adicionar a pizza à cesta. Coloque um botão HTML dentro daqui. O tipo de botão. Em seguida, para obter o símbolo plus, usaremos uma entidade HTML, que é o código das marcas comerciais, o hash 43 e um ponto e vírgula. No navegador, vamos ver como isso fica. Temos nossa primeira linha, que é o título, a segunda linha, que é uma descrição e a terceira seção será nossa opção. Conforme mencionado anteriormente, examinaremos esta terceira seção, que nos dará nossas várias opções. Esta é a nossa mesa para nossa pizza agora configurada e, no próximo vídeo, passaremos para a próxima seção, que é a cesta. 14. A IU do cesto: Seguindo o vídeo anterior, onde adicionamos a seção de menu à esquerda, agora vamos descer para a área de cestos. Esta cesta também será uma tabela mostrando as pizzas que o usuário seleciona clicando no botão Adicionar aqui. Seguido por um pedido, seção total e um botão para prosseguir e fazer o pedido. No futuro, esse botão de pedido será vinculado ao nosso JavaScript para , em seguida, enviar esse pedido para nosso banco de dados. Para a tabela, as seções conterão uma única linha. Essa linha terá a quantidade e um botão cada lado para aumentar ou diminuir a quantidade. Você terá o nome da pizza selecionada e também o preço. Abaixo do nosso título de Nível 3 para as cestas, crie um div. Essa div conterá a estrutura de todas as cestas, que será uma tabela na parte superior, depois o texto, que será o total do pedido. Mas agora basta colocar qualquer valor que você quiser. Isso será atualizado e calculado com JavaScript. Em seguida, um botão que será responsável posteriormente por fazer o pedido. Alguns textos estão bem por enquanto. Vamos verificar como isso está. Aí está um dos nossos conteúdos. Agora podemos passar para a seção da tabela. A tabela conterá uma única linha da tabela. Na primeira célula de dados da tabela haverá dois botões e também a quantidade. Teremos a quantidade no meio e, em seguida, um botão de diminuição à esquerda e um botão de aumento à direita. O primeiro botão com a classe quantity_button, o tipo, que também é botão, e depois a entidade HTML, que é a marca comercial, o hash 8722 seguido pelo ponto e vírgula. Isso nos dará o símbolo negativo e, em seguida, adicionaremos a quantidade e, à direita, um botão com o símbolo de mais. Para a quantidade que ficará no meio, coloque em qualquer quantidade por enquanto. Copie nosso botão e cole na parte inferior e simplesmente altere o número do código para 43. As datas nesses botões serão usadas para aumentar e diminuir esse valor. Antes de adicionarmos isso à cesta, também atualizaremos o total do pedido à medida que alterarmos as coisas. Esse é o nosso primeiro dado da tabela. O segundo será para o nome da pizza e também para o tamanho da opção e o terceiro. Esse é o preço da pizza. Salve e vá para o navegador. são todas as informações de que precisamos agora para a cesta e, com todo esse conteúdo já pronto, veremos a seguir como adicionar um pouco de estilo para torná-la um pouco melhor e também melhorar o layout. 15. Fontes e estilos básicos: Dentro do nosso projeto, temos esse arquivo main.js. Esse é o arquivo responsável pela criação do nosso aplicativo. Nós importamos isso da biblioteca vue. Também importamos os principais componentes do aplicativo, que é este aqui. Esse é o componente de entrada principal e todo o resto será aninhado nele. Passamos esse arquivo para criar o aplicativo e, em seguida, montamos o aplicativo no DOM com o id do aplicativo. disso, ele também inclui uma importação na parte superior com um arquivo main.css, que está dentro dessa pasta de ativos. A forma como estruturamos nosso estilo depende totalmente de nós quando se trata de um aplicativo vue. Mas vou usar isso como um tipo de arquivo de estilo geral contendo estilos básicos, como fontes e redefinições. Ainda podemos adicionar componentes específicos ou estilos de página em componentes individuais dos arquivos vue. Primeiro, porém, precisamos escolher nossas fontes, que usaremos para o projeto. Para isso, vou usar as fontes do Google. Então acesse fonts.google.com. Vou usar duas fontes separadas. Um deles será para nossos títulos e títulos, e o outro para o texto geral. Então clique em Pesquisar. O primeiro é chamado de script Marck e esse é M-A-R-C-K, e esse é o único para nossos títulos e títulos. Então selecione isso. Role para baixo. Este só tem os textos regulares, o que é bom. Clique no ícone de adição para adicionar isso às nossas famílias selecionadas, assim como isso. Vamos procurar nosso segundo. Voltar à pesquisa. Para o texto geral, vou usar o Roboto. Esse é o que precisamos aqui. Vamos escolher uma seleção de fontes. Então 300, que é um texto leve, o 400, que é um peso normal, e também um 500. Adicione todos os três à família. Clique nessas famílias selecionadas e teremos as informações que precisamos importar para nosso projeto. Portanto, temos um link que podemos usar ou podemos usar a sintaxe de importação. Para importar isso, vamos até a pasta Assets e para o main.css. No momento, está vazio. Podemos adicionar essa regra de importação. Portanto, copie tudo dentro das etiquetas de estilo. Cole isso. Como vimos anteriormente no arquivo dot js principal, temos o id do aplicativo, que podemos selecionar como o invólucro principal do nosso projeto. Então selecione isso com o hash. Dentro daqui, podemos definir a família de fontes como Roboto copiando esta segunda linha aqui. Esse seria nosso texto geral e vamos substituí-lo pelo script Marck quando precisarmos. Entre no corpo. Estamos apenas adicionando estilos gerais aqui, lembra? Então, adicionaremos alguma margem para centralizar nosso projeto, definindo isso como zero na parte superior e inferior, e também à esquerda e à direita. O texto da linha colorida de RGB, colocando um valor de 76 em vermelho, verde e azul. Logo após o corpo, vamos direcionar os títulos h1, h2, h3, h4, h5 e h6. Lembre-se de que a família de fontes que vamos usar para esta é a outra que obtemos das fontes do Google. Então copie esta seção e cole. Remova qualquer margem padrão aplicada a qualquer um dos nossos títulos com o navegador. Estou colocando a cor, que é um valor RGB de 76.76,76. Então, isso nos dá nossos estilos gerais de cabeçalho, mas usaremos o título de nível três em vários lugares. Então, vamos usá-lo com cabeçalhos de páginas e componentes. Portanto, definiremos o tamanho da fonte para um tamanho maior de 2,2 rems. Além disso, coloque alguma margem na parte superior e inferior de um rem e zero na esquerda e na direita. Em seguida, a lista não ordenada, os elementos ul. Redefina qualquer espaço aplicado pelo navegador, para que a margem padrão possa ser removida para zero e também o preenchimento seja redefinido para zero. Os itens da lista e, na verdade, também os links com os elementos a herdarão a cor. Isso removerá a cor roxa do link, que temos por padrão dentro do navegador. Além disso, redefina a decoração do texto para nenhuma e também o estilo da lista. Isso garantirá que nenhum de nossos links ou itens de nossa lista tenha sublinhados, e também qualquer um dos marcadores ao lado do link. Então, alguns estilos mais gerais, abordaremos nossos elementos de imagem e garantiremos que a largura máxima de qualquer imagem não exceda 100%. Então, ao lado de nossas aulas sobre nossos links de roteadores, se você se lembra desde cedo, temos esses links no topo e você já pode começar a ver nosso estilo acontecendo. Temos esses links de menu na parte superior, que você pode ver se entrarmos nos componentes e depois no cabeçalho do aplicativo. Cada um desses links de roteador tem essa classe de link. Vamos pegar isso, um ponto, já que é uma classe, uma margem de um rem para dar um pouco de espaçamento, e vamos nos certificar de que cada um deles mude de cor quando passamos que cada um deles mude de o mouse sobre eles. Então, para fazer isso, direcionaremos nosso link mais uma vez. Usaremos o seletor de foco, alteraremos a cor do texto para um valor RGB de 161. Então, o vermelho, o verde de 132 e 132 também para o azul. Por fim, para qualquer botão que tenha em nosso site, também definiremos o estilo padrão para cada um deles. Portanto, o botão removerá o plano de fundo, a cor padrão, definindo-a como nenhuma. Uma borda muito fina de 0,5 pixels, uma linha sólida e a cor dessa linha será um valor RGB de 202 para cada uma delas. Algum raio de borda de 0,3 rems, algum preenchimento para tornar o botão um pouco maior. Então, meio rem na parte superior e inferior e um rem na esquerda e na direita. Preciso solicitar ao usuário que ele possa clicar nesses botões para transformar o cursor em um ponteiro. Então, se analisarmos nosso projeto, podemos ver que alguns deles entraram em vigor. Mas lembre-se de que esses são apenas estilos gerais para nosso projeto, e adicionaremos estilos mais específicos a cada uma de nossas páginas e componentes individuais. 16. Estilo de menu e cesto: Em seguida, vamos acessar o Menu Exibir Arquivo e adicionar qualquer estilo específico a esses componentes de visualização . Abra isso. Em seguida, logo abaixo dos modelos, adicionaremos o estilo e adicionaremos esses atributos com escopo. Se você nunca usou o atributo de escopo antes, isso significa que todos os estilos só se aplicarão a esses componentes, ou seja, aos modelos que criamos acima. Para vê-los em ação, acessaremos a seção do menu. Faça isso um pouco menor. No topo, temos um título de nível 3, que é este aqui. Vamos pegar isso e definir o alinhamento do texto para ficar no centro. Isso também se aplica à nossa cesta. A seção superior e a seção inferior serão aplicadas em breve à esquerda e à direita na exibição maior. Mas primeiro começaremos com o layout móvel, que é a tela pequena. Vamos logo abaixo do nosso h3 e digamos, o layout móvel. Para alternar entre nossos dois layouts, vamos usar o flexbox. Se formos até o topo, você pode ver que esse div tem a classe de menu wrapper. Este será o responsável por controlar a direção do nosso menu e também da nossa cesta. Esses dois divs são os elementos secundários do menu wrapper. Se descermos e selecionarmos isso, podemos usar o flexbox. Embalagem de menu. A tela será flexível. Você pode ver a direção de flexão padrão ao usar as flexboxes em uma linha. Eles serão colocados lado a lado na página. Esse é o layout que você deseja em uma visão mais ampla. Mas para uma visão menor, precisamos ignorar isso para ser a direção flexível da coluna. Além disso, a cor. A cor da fonte será um valor RGB de 80, 96 e 112. Em seguida, temos as duas seções que estavam dentro das quais acabamos de ver, que é a seção do menu na parte superior e depois a seção da cesta. Cada um deles tem sua própria classe correspondente. Nós temos.menu e também.basket. Definimos o plano de fundo para cada uma dessas seções como uma cor hexadecimal. O que eu vou escolher é faf1e2. O raio da borda para cada uma dessas seções, pequeno valor de três pixels. A altura, caso não tenhamos muito conteúdo, garantiremos que cada uma dessas seções mínimo 100% da altura da janela de visualização. Em seguida, um pouco de preenchimento na parte interna desses elementos para fornecer algum espaçamento da borda da tela. Essa é a direção que temos para a visualização móvel. Se esticarmos isso para ficar um pouco mais largo, queremos invertê-lo para fazer com que a direção da flexão seja uma linha. Podemos fazer isso dentro de uma consulta de mídia, qual eu quero que a tela tenha uma largura mínima de 900 pixels. Por favor, entre em vigor. Agora, o que faremos é pegar a seção do invólucro do menu, copiar e colar isso dentro. Já definimos o tipo de exibição como flexível. Vamos remover isso. Eu já defini a cor. Vamos remover isso. Tudo o que precisamos fazer aqui é definir a direção da flexão para estar em uma linha. Adicione algum espaço entre eles com conteúdo justificado. Em seguida, precisamos decidir quanto espaço cada uma dessas seções ocupará. A seção de pizza provavelmente precisará de um pouco mais de espaço. Podemos usar a direção flexível nos dar mais espaço do que a cesta. Para uma visão maior, vamos pegar a seção do menu, definir o valor de flexão como dois. Então, para nossa cesta, definiremos o valor flexível como um. Isso significa que isso tentará ocupar o dobro do espaço disponível da seção da cesta. Você pode ver que isso se reflete dentro do navegador. Podemos ver a diferença entre essas duas seções. Adicionaremos uma borda à direita desse menu para adicionar uma linha vertical no centro. Dentro do menu, defina a borda à direita de um pixel, uma linha sólida e a cor RGB de 202 para cada valor. Lá vamos nós. Estamos quase terminando esta seção, mas o que vou fazer com esses dois botões aqui é remover a borda, torná-los um pouco menores. Se formos até a seção, veremos que cada um desses botões tem a classe quantity_button. Podemos fazer isso na seção geral, logo acima da consulta de mídia. Quantidade_ btn. Remova a borda. Vamos definir o preenchimento como um valor de 0,4 rems. Agora, isso reduz o preenchimento de ambos os botões de quantidade. Em seguida, continuaremos com o tema do estilo. Vamos adicionar um pouco de estilo à nossa seção de cabeçalho. 17. Estilo de cabeçalho: Certamente vamos continuar adicionando alguns novos componentes e também alguns novos itens ao nosso site. Mas, rapidamente, antes de fazermos isso, aplicaremos um pouco de estilo a essa seção de cabeçalho. Vamos abrir a barra lateral, entrar em nossos componentes e depois no AppHeader. O AppHeader precisa da seção de estilo na parte inferior, e a seção de estilo terá escopo esses componentes específicos. Vamos dar uma olhada no que temos. Temos a classe de título do site no topo . Vamos começar com isso. Título do site. Comece com o tamanho da fonte do título do nosso site e optaremos por 3,6 rems. Faça com que seja bem grande. A cor do azul de Alice. Não podemos vê-la muito no momento , mas em breve vamos adicionar uma cor de fundo a essa seção de cabeçalho para destacá-la ainda mais. Adicionaremos uma transformação para fazer com que ela gire em um determinado valor adicionando a função de rotação. Passe a quantidade de graus em que você deseja girar isso, e isso pode ser um número positivo ou negativo. Oito graus. Você pode ver que isso agora tem uma inclinação e você pode aumentar ou diminuir esse valor. Para deixar um pouco de espaço no conteúdo abaixo, adicione alguma margem na parte inferior dos elementos. Vamos fazer duas rems. Em seguida, podemos pegar nosso cabeçalho, que é o invólucro desta seção completa. O cabeçalho usará o CSS Flexbox para organizar as coisas. Tanto para as visualizações de tela menores quanto para as maiores, esses conteúdos serão colocados verticalmente na direção flexível da coluna. Defina o tipo de exibição. Lembre-se de que a direção flexível padrão é a linha que fica da esquerda para a direita na página. Podemos mudar isso para usar a coluna. Para colocar o conteúdo no centro, use a propriedade flex de align-items. Podemos ver que o conteúdo está praticamente na parte superior e também na parte inferior do cabeçalho. Vamos adicionar algum espaço com um valor de preenchimento de um rem na parte superior e inferior e zero na esquerda e na direita. Para os links do menu, combinaremos a cor azul de Alice e colocaremos na imagem de fundo. Pois a imagem de fundo apontará para uma URL que está armazenada dentro do nosso projeto. Vamos para a pasta de ativos, para as Imagens e, dentro daqui, temos uma imagem chamada main-bg. Isso é uma barra de pontos, vá para a pasta de ativos, imagens e plano de fundo principal. Também queremos definir que isso não se repita. Como adicionamos um plano de fundo, também queremos adicionar à propriedade de altura e definir isso como um valor fixo de 650 pixels. O tamanho do plano de fundo, vamos definir isso para cobrir. Então, se dermos uma olhada nessa imagem dentro da pasta de imagens, a main-bg, podemos ver que a imagem não está centralizada, está cortada no lado direito. Vamos corrigir isso e voltar ao nosso CSS. Faça uso da propriedade chamada Background Position. Coloque esta cama no centro. Agora, essa imagem estará sempre centralizada em diferentes tamanhos de tela. próxima pequena sombra técnica para cada um desses caracteres de um pixel, um pixel, três pixels, e a cor a ser aplicada a essa sombra tecnológica será um valor RGB de 20, 20, 20. A próxima coisa a fazer é subir o nível do título, que é o texto do lugar número 1 para pizza. Podemos pegar isso com o seletor h2 e adicionar algum espaçamento. Uma propriedade de margem de dois rems na parte superior e inferior e zero na esquerda e na direita. Uma cor de texto de branco antigo e o tamanho da fonte de dois rems. Bom. Esse é o nosso estilo agora completo para o cabeçalho. Nosso site parece um pouco melhor. Em seguida, vamos passar para a página do administrador e criar um novo formulário de pizza. 18. Admin: adicione novo formulário de pizza: Dentro de nossa visão administrativa, breve isso será dividido em várias áreas. Faz sentido organizar todas essas áreas em componentes diferentes e também colocá-los em uma pasta de administração. Vamos pular para a barra lateral. Nos componentes e dentro daqui. Crie uma nova pasta com esse novo ícone de pasta chamado admin e agruparemos todos os componentes relacionados ao administrador. Dentro daqui, crie um novo arquivo. Esse será o primeiro componente do nosso administrador, que será um formulário para criar uma nova pizza. Vamos chamar isso de NewPizza.vue. Crie o modelo necessário para esta seção e o invólucro da seção. Isso terá a classe admin_section. Isso será dividido para ter uma seção de cabeçalho com um título e também o formulário para adicionar nossa nova pizza. O cabeçalho desta seção, a classe admin_section_header, h3. Texto de adicionar nova pizza. Antes de prosseguirmos com mais conteúdo, vamos verificar como isso fica dentro do navegador, mas primeiro precisamos importá-lo para nosso administrador. Vá até as visualizações e a visualização administrativa. No topo, coloque em nosso script para importar nosso arquivo. O que vamos fazer aqui é adicionar um atributo chamado setup. Voltaremos a essa configuração em breve neste curso, mas por enquanto vamos importar o componente que criamos, que será chamado de pizza nova. Vou importar isso do diretório que é @ para nos levar à rota, à pasta de componentes, ao administrador e ao nome do arquivo da nova pizza. Temos o título de nível três. Por enquanto, podemos importar nossos componentes e colocá-los abaixo. Instantaneamente, assim que salvarmos, veremos que isso foi adicionado à seção de administração, então acesse o link do administrador e esse é o título que adicionamos aos novos componentes da pizza. Continuando no título e abaixo dele, crie nosso formulário. Removeremos a ação que já foi alimentada ao lidar com todos os Javascript necessários. Cada uma de nossas seções, como o nome da pizza, a descrição e as várias opções, estava cercada por um estilo div. Esse div terá a classe form_group. Então, isso terá um rótulo e uma entrada. O rótulo, o texto do nome, a entrada. O primeiro para o nome da pizza terá o tipo de texto e o ID do nome que corresponderão ao nosso rótulo. Vamos copiar esta seção div. Vamos duplicar isso e colá-lo abaixo. O segundo será para a descrição. Para este, não precisamos de uma entrada, vamos usar uma área de texto, para que possamos ter várias linhas de texto ou uma descrição longa. Vamos mover todo o seu conteúdo para dentro daqui. Vamos limpar isso e adicionaremos as linhas de que precisamos. Vamos definir o valor padrão como cinco e também um ID de descrição, que corresponderá ao rótulo logo acima. Salve isso e podemos ver que nossas entradas agora estão aparecendo na tela. Em seguida, criaremos duas novas seções, que serão para nossa primeira e segunda opções de pizza. Isso nos dará duas opções diferentes para o tamanho da pizza. O texto dentro dos elementos P os criará como elementos fortes para torná-los mais ousados. Opção 1. Então, podemos continuar com nossos elementos de formulário. Copiaremos o grupo de fontes anterior, o de cima, escreveremos isso, e esse será para o tamanho. Isso será em polegadas. A etiqueta de tamanho um. O tipo de texto está perfeitamente correto, e também combinaremos seu ID com o rótulo. Abaixo disso, também precisamos criar um novo grupo de formulários, e este ainda está relacionado à Opção 1, e esse é o preço desse tamanho específico. O texto do preço, a etiqueta do preço 1, o ID correspondente. Em seguida, duplicaremos cuidadosamente esta seção de acordo com o preço, o tamanho e também o texto. Copie isso. Cole abaixo para criar uma segunda seção. Este é para a Opção 2. Vamos alterar os nomes das propriedades de cada um desses atributos para Tamanho 2. O mesmo vale para o preço. Salve isso e vá para o navegador. Agora temos duas seções para preencher os tamanhos. A seção final será um botão para enviar este formulário. Novamente, coloque isso dentro de um div com a classe do grupo de formulários. Isso manterá o estilo consistente. Adicione um botão com o texto de adicionar. Agora você adicionará um novo formulário de pizza agora preenchido. Voltaremos a isso mais tarde e melhoraremos o estilo. Mas, a seguir, passaremos para outro componente administrativo, que é exibir as pizzas. 19. Admin: componente de Pizzas: Então, adicionamos novos componentes de pizza dentro do administrador. O próximo componente administrativo que criaremos é um componente de pizzas, que exibirá todas as pizzas disponíveis no menu. Vou pular para a barra lateral e criar um novo arquivo Vue.js novamente dentro do administrador para manter isso organizado. Isso será simplesmente Pizzas.vue. Como sempre, feche a barra lateral e crie um modelo para armazenar nosso código HTML. Uma seção, que terá a classe admin_section. Também dê uma olhada no novo componente de pizza que criamos anteriormente. Isso também corresponde a essa mesma seção. Assim, podemos aplicar o mesmo estilo CSS. Isso também terá um cabeçalho. Novamente, combine neste cabeçalho aqui com o mesmo nome de classe. Portanto, a classe era admin_section_header. Isso nos dará um estilo consistente para todos os nossos blocos administrativos, cabeçalho de nível 3 com o texto do menu. Então, isso é tudo o que precisamos para a seção de cabeçalho. Vamos pular abaixo do cabeçalho e criar nossa tabela, que listará todas as pizzas disponíveis no menu. A seção do tópico, ou o título da tabela, colocada em uma linha e, em seguida, o enésimo elemento para criar nossos dois títulos. Então, vamos manter isso bem simples. Tudo o que fazemos é adicionar um nome de pizza à esquerda e, à direita da mesa, adicionaremos um botão para remover essa pizza do menu. Portanto, o título da pizza e o segundo serão o texto de remover do menu. Vou configurar uma função mais tarde para fazer isso. Abaixo da linha, crie a seção do corpo. A primeira fila, que ficará abaixo de nossos títulos. Então, a primeira coisa aqui dentro é o nome da pizza dentro dos elementos de dados da tabela, e vamos apenas adicionar um texto de amostra para nome da nossa pizza e vincularemos isso ao nosso banco de dados posteriormente. Em seguida, a próxima célula dentro dos dados da tabela é um botão que removerá a pizza do menu. O botão tem o tipo de botão e também uma classe para nosso estilo de btn_remove. Em seguida, dentro de uma entidade HTML, que será a cruz. Este é o e comercial, a palavra dos tempos, seguida por um ponto e vírgula. Esse é todo o conteúdo de que precisamos agora e, mais tarde, criaremos um loop for para percorrer todas as pizzas disponíveis e duplicar cada uma dessas linhas. Além disso, como acontece com os novos componentes da pizza, precisamos importá-los para a visualização administrativa, aqui. Duplique isso e este será para todas as pizzas. Isso está na mesma pasta de administração. Então, mudamos o nome, e eu vou colocar isso na parte inferior do arquivo no navegador. Aí está nossa mesa com nossa única fileira e nossa pizza única. Em seguida, criaremos os componentes finais do administrador para listar todos os pedidos dos clientes. 20. Admin: componente de pedidos de listagem: Os componentes administrativos finais de que precisamos serão usados para listar os pedidos atuais. Novamente, eu só tenho esses componentes dentro da pasta de administração para manter isso organizado. Crie um novo arquivo e este será o orders.vue. Isso também seguirá um padrão semelhante aos anteriores, onde criamos um modelo, criamos uma seção com a classe da seção de administração, criamos um cabeçalho e, em seguida, uma tabela para listar todos os pedidos. Vamos começar com o modelo e a seção na parte superior. Esta é a nossa embalagem. A seção também precisa ter uma classe de cabeçalho de seção administrativa. Novamente, isso corresponde aos componentes administrativos anteriores que criamos, assim como o cabeçalho na parte superior, a classe, e se eu pudesse usar o errado na parte superior. Vamos copiar isso. Este deve ser o cabeçalho da seção de administração e a seção deve ser a classe da seção de administração. Bom. Agora estamos de volta e podemos criar, dentro do cabeçalho, nosso título de nível 3 com o texto dos pedidos atuais. Além disso, assim como os componentes da pizza que acabamos de criar, mais tarde, quando vincularmos isso ao Firebase, todas as nossas informações serão retiradas do nosso banco de dados. O que significa que será dinâmico. Por enquanto, colocaremos apenas alguns dados fictícios e adicionaremos cinco pedidos atuais aumentarão e diminuirão dependendo quantos pedidos realmente temos em nosso banco de dados. Em seguida, a seção da tabela, a linha da tabela, as enésimas tags para o título. Os pedidos listarão o item, que será o nome da pizza. Lembre-se de que cada pizza tem dois tamanhos diferentes, então também precisamos listar isso. Precisamos saber a quantidade e também o preço. Adicionaremos entre colchetes a palavra total , pois esse será o valor total, que será o número de pizzas multiplicado pelo preço. Em seguida, abaixo da primeira linha da tabela, adicione a segunda linha e, por enquanto, faremos um pedido de amostra. A primeira célula dentro do elemento de dados da tabela será para o número do pedido. Essa célula também conterá duas informações. primeiro é o número real do pedido, e isso aumentará dependendo de quantos pedidos tivermos, e também adicionaremos um botão para remover esse pedido do banco de dados, o que será útil quando o pedido for concluído. Dentro das etiquetas fortes, adicionaremos o número do pedido. Vamos ficar em primeiro lugar por enquanto. O botão, a entidade HTML, que será o comercial e os horários, seguido por um ponto e vírgula, e isso será uma pequena cruz para remover isso do nosso banco de dados, a classe para nosso estilo de btn_remove e também o tipo de botão. Esse número de pedido e esse botão Remover estarão em sua própria linha independente e, em seguida, a terceira linha , que adicionaremos logo abaixo, terá todos os valores abaixo de nossos títulos. Portanto, o primeiro dado da tabela de que precisamos é o item. Esse será o nome da pizza, seguido pelo tamanho, pela quantidade. Por enquanto, todos os valores estão bem dentro daqui. O último que precisamos é o preço. Para ver isso, acesse nossa visão de administrador. Agora podemos importar isso na parte superior do nosso arquivo. Essa é a ordem. Vou colocar isso na parte inferior do modelo. Role para baixo. Bom. Temos grande parte da interface do usuário, então a seção de administração está pronta e tudo agora está configurado para adicionar alguns dados dinâmicos do nosso banco de dados. Mas a seguir, o que vamos fazer é pular para outra de nossas visualizações, que é a visualização inicial, e começar a adicionar nosso conteúdo. 21. Vista para casa: Em seguida, começaremos a trabalhar nessa visualização inicial, que será composta por novos componentes, e será comutada com o roteador de visualização. Lembre-se de que temos essa seção de cabeçalho na parte superior. Então, na parte inferior, já temos duas tomadas separadas colocadas por meio do RouterView. Temos as seções de entrega e histórico, e elas sempre estarão contidas na parte inferior do nosso modelo. Lembre-se de que logo acima disso teremos nosso RouterView, que exibirá todos os componentes dentro de nossa pasta de visualizações. Já temos nossa visão inicial configurada. Temos um modelo simples com o texto da página inicial. Podemos ver isso aqui. Lembre-se de que nossos dois componentes na parte inferior, colocados com o RouterView, só serão exibidos nesta página inicial, porque se entrarmos no roteador e na página de índice, configuraremos esses dois como os componentes de entrega e histórico e o padrão, que será a visualização inicial. Esta será esta seção na parte superior. Vamos pular para a visualização inicial agora mesmo. Depois, podemos começar a trabalhar adicionando algum conteúdo para nosso estilo. Podemos configurar a classe hot e, logo abaixo, criar uma nova seção div, que terá a classe hot_text. Suba, um título de nível 3. Isso terá o texto de hot out of the oven. Lá vamos nós. Uma seção desta página inicial também terá algum texto e também apresentará uma hot_pizza vegetariana, além de uma imagem que temos dentro da pasta de imagens, que está dentro dos ativos. Precisamos desse fire.jpg. Primeiro, coloque o texto abaixo do título do Nível 3, adicione um elemento p ao nosso texto. Este terá a classe hot_pizza_name. O nome da pizza é vegetariano quente. Texto pequeno. Este terá a classe de hot_pizza_description. Em seguida, o texto do nosso vegetariano exclusivo, mas com um toque especial. Então, abaixo deste texto, podemos colocar um link de roteador, que será vinculado ao nosso menu. O componente RouterLink, o texto de let's order. Então, como sempre, com nosso RouterLink, precisamos passar os dois atributos com dois pontos, pois isso conterá um dado dinâmico, transmitir nossos objetos dinâmicos, onde vincularemos ao nome de MenuLink. Esse MenuLink é o mesmo que configuramos no arquivo do roteador, que podemos ver no roteador e depois no index.js. Esses são os nomes exclusivos que adicionamos a cada um desses caminhos. Quase lá. Agora temos essa seção div e, logo abaixo dela, colocaremos em nossa imagem. Vou apontar para a imagem que acabamos de ver, que estava na pasta de ativos. Usaremos../para subir um nível em nosso diretório para os ativos, imagens e o fire.jpg. estilo da classe pode ser hot_img e também o texto alternativo. Nosso conteúdo está pronto. Vamos verificar se esse link funciona. Isso vai para a nossa seção de menu, o que é bom. Podemos pular abaixo nosso modelo e adicionar a seção de estilo. Isso quer ser esculpido nesse componente. Começaremos com a seção principal com a classe de hot, e esse é o invólucro para esta seção completa. Isso será responsável por alterar o layout na tela pequena e na tela grande. Para fazer isso, usaremos o tipo de tela flexível. Como começaremos com a primeira visualização móvel, podemos reduzir o navegador e depois mudar para a direção da coluna na tela menor. direção flexível é igual à coluna. Isso colocará nosso conteúdo na vertical. Em seguida, dentro de uma consulta de mídia na tela maior, alteraremos isso para usar a linha. Faremos isso agora com @media, onde teremos como meta a largura mínima da tela de 900 pixels. Novamente, pegaremos a classe de quente e mudaremos a direção da flexão para ser igual à linha. A tela pequena, torne-a maior, e agora dois elementos agora aparecem lado a lado. O primeiro elemento foi essa div, e o segundo é nossa imagem. Vamos colocar isso no centro com itens alinhados. Na verdade, isso só quer ir para a primeira seção do celular, então, suprimentos para a tela pequena. Fora da consulta de mídia, optaremos pelo hot_image e também pelo hot_text. Esta é uma classe que eles colocarão nos pontos. Temos a classe de hot_text e também nossa imagem, que são nossas duas seções principais. Isso vai atingir nossas duas áreas de conteúdo, e vamos torná-las do mesmo tamanho definindo o flex um valor de dois rems. Em seguida, o alinhamento do texto do centro. Em seguida, temos o título, e ele não tem uma classe, então podemos segmentar um título de nível 3, que é filho do hot_text. O wrapper de hot_text selecionará o h3, que está aninhado em seu interior, e definirá a cor como um valor hexadecimal de bb2118. O que nos dá essa bela cor vermelha, que podemos ver aqui. Depois, o hot_pizza_name, que é a hot_pizza vegetariana. Faça isso um pouco maior definindo o tamanho da fonte. Vamos tentar 2,2 rems. Um pouco menor também. 1.8. Em seguida, para o texto a seguir, ele tem a classe hot_pizza_description. Copie isso. Coloque isso dentro. O estilo da fonte deve ser itálico, o peso da fonte um pouco mais leve, vamos usar 300. Vamos verificar isso também na tela maior. Isso é bom. Por enquanto, podemos fazer alguns ajustes de acordo com seu gosto, se você quiser. Mas, a seguir, vou continuar com o estilo deste projeto. Em particular, adicionaremos um pouco de estilo às nossas tabelas e também às entradas do formulário. 22. Estilos de formulário e mesa: Para finalizar esta seção, agora vamos pular para o arquivo main.CSS, onde podemos começar a aplicar alguns estilos compartilhados entre nossos formulários e nossas tabelas, e também alguns estilos gerais de CSS. A partir daqui, especialmente dentro do administrador, temos algumas áreas que incluem algumas aulas compartilhadas. Por exemplo, se entrarmos nos componentes e na pasta de administração, teremos essa nova pizza. Isso tem o invólucro da seção de administração, então temos essa seção de cabeçalho consistente com a mesma classe em todos esses três componentes. Nós o temos aqui no topo dos pedidos e também no topo das pizzas. Também temos um formulário aqui ao qual adicionaremos um pouco de estilo. Temos várias tabelas para o menu e os pedidos atuais, e também temos uma tabela dentro da visualização do menu. Temos vários estilos que são compartilhados entre vários componentes. Em vez de colocar em componentes individuais, o que vamos fazer é acessar o arquivo main.CSS e adicionar o código compartilhado dentro dele. Além dos invólucros principais e também dos formulários e tabelas, também temos alguns pequenos detalhes, como o botão de remoção que temos no menu e também nos pedidos atuais. Demos a isso uma classe de btn_remove. Vamos adicionar tudo isso agora em nossa folha de estilo. Vá para a fonte, para os ativos, e teremos esse arquivo CSS principal. Já adicionamos algum conteúdo aqui, então vamos até a parte inferior abaixo do botão, e continuaremos a partir desse botão e, logo abaixo, adicionaremos a classe btn_remove, que acabamos de pesquisar antes. Como vamos remover algo com isso, provavelmente gostaríamos de adicionar uma cor vermelha. A tonalidade que vou escolher é um valor rgb de 180 linhas, 67 e 67. Você pode ver instantaneamente assim que salvar esses dois botões na parte inferior e agora mudar de cor. Também podemos remover essa borda definindo-a como nenhuma e torná-la um pouco mais visível aumentando o tamanho da fonte para 1,2 rems. Essa seção do menu e também os pedidos atuais estão contidos em uma tabela HTML. Para o elemento principal da tabela, vamos adicionar um pouco de estilo. Podemos colocar em um raio de borda, apenas um raio de borda sutil de 0,3 rems. Veremos isso com mais clareza quando adicionarmos algumas cores diferentes. Também podemos definir o alinhamento do texto para ficar à esquerda. Isso empurrará todo o texto para a esquerda de cada uma das células individuais. Uma largura de 100 por cento exibe toda a largura disponível. Em seguida, passaremos para as células individuais que estão contidas dentro do th, para o título da tabela e também td para os dados da tabela. No espaçamento, adicionaremos um pouco de preenchimento ou algum espaçamento na parte interna do elemento de 0,6 rems. Em seguida, trabalharemos neste formulário para a seção Adicionar nova pizza. Pegue a embalagem principal do formulário, um pouco de preenchimento zero na parte superior e inferior e 1 rem na esquerda e na direita. Além disso, combinaremos o raio da borda da tabela adicionando isso também ao formulário. Novamente, veremos isso com mais clareza mais tarde. Dentro da nova pizza, veremos que cada um desses elementos do formulário, como o nome e a descrição, está encapsulado nesta div com a classe do grupo de formulários. Isso é consistente para cada uma dessas seções. Pegue isso. Então, isso é form_group. Alguns espaços de preenchimento separam cada um desses grupos e adicionaremos um rem verticalmente na parte superior e inferior e zero na esquerda e na direita. Faça uso da caixa flexível com o display flex. Vamos alinhar os itens no centro. Alinhar os itens ao centro, como você pode ver, fornecerá esse alinhamento vertical para que o texto fique no meio de cada uma dessas seções. Se não tivermos isso, você pode ver que o texto está alinhado na parte superior desse elemento. Adicionaremos uma borda na parte inferior de 0,5 rems para a espessura, uma linha sólida e a cor da linha será um valor rgb de 202 para cada uma das cores. Opa, isso é um pouco grosso demais lá. Isso só quer ter 0,5 pixels. Em seguida, removeremos o sublinhado da seção inferior. Novamente, pegue nosso form_group, selecione o último tipo que é a última ocorrência, que é nosso botão, e então removeremos a parte inferior da borda definindo isso como nenhum. Em seguida, daremos a essas etiquetas e também às nossas entradas um tamanho consistente usando a caixa flexível. O rótulo fornecerá a eles um valor flexível consistente de 1 para que todos permaneçam iguais. Então, como queremos que a entrada seja um pouco maior, podemos direcionar todas as entradas e também área do texto e atribuir a elas um valor flexível de 3. Isso significa que todas as nossas entradas na área de texto tentarão ocupar três vezes o espaço disponível que nossos rótulos. Agora vamos trabalhar com as bordas de cada uma de nossas entradas. Logo abaixo do valor flexível de 3, configure a borda. Isso terá o mesmo valor do fundo da nossa borda. Podemos copiar isso, colar isso. Isso apenas nos dá uma borda mais leve e sutil para cada uma de nossas entradas. Algum raio de borda de 0,3 rems, algum preenchimento para torná-los um pouco maiores de 0,6 rems. Por padrão, com entradas de formulários HTML e áreas de texto, ele não herda a fonte e a cor por padrão, então precisamos defini-las manualmente, definindo a família de fontes para herdar do pai e também a mesma para a cor. Como vimos antes, cada um desses componentes administrativos, como a nova pizza, tem essa classe de seção administrativa e, em seguida, temos o cabeçalho da seção de administração. Vamos entrar em nosso estilo e podemos direcioná-los. Primeiro, o invólucro principal , que é a seção de administração. Margem de 1 rem e isso espaçará todos os nossos componentes. A cor de fundo, que é um valor hexadecimal de faf1e2, e também, finalmente, para esta seção um raio de borda de 0,3 rems. Em seguida, a seção de cabeçalho de cada um desses componentes e lembre-se de que eles têm a classe admin_section_header. Defina o tipo de exibição como flexível. Guarde isso. Esta parece boa e, assim como esta, teremos um pequeno problema, mas adicione uma nova pizza. Isso não deveria estar lado a lado. Temos uma pizza nova, temos a embalagem, temos o cabeçalho, o formulário. E, na verdade, só precisamos ter certeza de que esse cabeçalho está fechado, então recorte a tag de fechamento do cabeçalho e cole-a logo após nosso h3. Isso agora parece melhor e isso agora nos mantém mais consistentes com o resto dessas seções. De volta ao estilo. E você pode estar se perguntando por que exatamente configuramos a caixa flexível quando temos apenas um único elemento aqui. Bem, isso ocorre porque, mais tarde, também adicionaremos um pequeno ícone à direita para deixar cada uma dessas seções fora da vista, se não precisarmos. Portanto, como teremos várias seções, podemos adicionar conteúdo justificado para adicionar espaço entre cada uma delas. Além disso, para mantê-los alinhados verticalmente, alinhe os itens no centro. Por fim, um pouco de preenchimento de 1 rem que será jogado em todos os lados deste título. Estamos chegando a algum lugar agora com o estilo. Isso também deve se aplicar à nossa seção de menu. Então, a seção final à qual adicionaremos pouco de estilo neste vídeo dentro da seção inicial é cada um desses blocos de informações na parte inferior. Eles têm a classe info_block, que você pode ver se entrarmos nos componentes principais, que são o App.vue. Isso está renderizando nossa entrega e nossos componentes históricos , então comece a entrega. Isso tem a classe de bloco de informações , assim como o componente de histórico. De volta ao nosso estilo info_block. O tipo de exibição de flexão, a direção flexível da coluna, alinham os itens no centro, adicionam um pouco de preenchimento a cada um de um rem e também uma cor de fundo diferente para cada um dos nossos blocos e o valor hexadecimal de faf1e2. Vamos salvar isso e ver como fica. No navegador, podemos ver na visualização menor que eles estão empilhados verticalmente um sobre o outro. Vamos ampliá-los ainda mais. Os dois componentes estão lado a lado e temos essa direção flexível da coluna para cada um. Temos o conteúdo alinhado ao centro, um pouco de preenchimento e a cor do plano de fundo. Ainda há algum outro estilo a ser aplicado a componentes individuais, mas vamos adicioná-lo à medida que avançamos no curso. Mas agora temos muito conteúdo disponível. Na próxima seção, adicionaremos um pouco de JavaScript e daremos uma olhada no uso da API de composição VueJS. 23. Opções ou composição?: A API de opções é algo com o qual você pode estar familiarizado se tiver criado com o Vue.js no passado, na versão 1 do Vue ou na versão 2 do Vue. A boa notícia é que, na versão 3 do Vue, a API de opções ainda está aqui para ficar. Mas, alternativamente, temos uma abordagem diferente que também podemos usar, que é chamada de API de composição. A API de opções é algo com o qual você pode estar familiarizado se já tiver criado com a versão 1 ou 2 do Vue no passado. É uma forma tradicional de criar aplicativos Vue.js. A boa notícia é que, no Vue 3, ele não vai a lugar nenhum. A API de opções tem a seguinte aparência. Dentro do script e do padrão de exportação, tínhamos várias seções , como uma seção de dados. Isso continha qualquer dado ou estado do componente, que você pode considerar como variáveis. Também existem métodos. É aqui que podemos adicionar nossas funções de JavaScript e chamá-las conforme necessário. As seções não mostradas aqui incluem ganchos computados de ciclo de vida, relógios e adereços. Novamente, tudo ainda é válido para uso no Vue 3. No entanto, para este projeto, vou usar a API de composição do Vue 3. A API de composição nos permite escrever código de forma mais parecida com o JavaScript normal. Isso é como uma variável JavaScript normal, um tempo limite e também uma função. Agora, isso pode ser gravado dentro dos aplicativos Vue.js, substitua-o exatamente como a API de opções dentro de um padrão de exportação e depois por uma função de configuração, que é destacada aqui. Coisas aqui, como variáveis e funções, podem ser disponibilizadas para o modelo retornando-as na parte inferior. Também é importante notar que podemos usar a função de configuração junto com a API de opções existente. Aqui, a seção de dados será transmitida, mas qualquer outra seção da API de opções também pode ser adicionada. Isso também é muito mais do que isso, por exemplo, podemos organizar o código em arquivos separados e reutilizar o caminho quando necessário, e muitas outras coisas que usaremos quando precisarmos delas. Além do JavaScript normal, também podemos fazer uso da reatividade do Vue. Aqui, importamos uma referência do pacote Vue e envolvemos o valor de todas as variáveis com ela. Uma referência é usada para transformar o conteúdo em um objeto reativo. Ou seja, qualquer parte do nosso aplicativo que dependa dela mudará se os dados internos mudarem. Basicamente, significa que nenhum componente é mantido atualizado com quaisquer alterações de dados. Também voltaremos a este em breve. Junto com ref, também podemos importar do pacote Vue coisas como propriedades do computador e também relógios, que estão disponíveis com a API de opções. Finalmente, também temos uma maneira mais curta de escrever código de composição, que é a configuração do script. À esquerda está o exemplo semelhante ao anterior, onde temos uma seção de configuração e retornamos qualquer Vue que desejamos usar no modelo ou HTML. Então, à direita, está exatamente a mesma coisa usando a configuração de scripts. Ele adiciona um atributo de configuração às nossas tags de script para tornar o código mais curto. Além disso, observe aqui que não precisamos da seção de devoluções porque todos os dados que queremos usar no modelo são disponibilizados automaticamente. A configuração do script será a abordagem que usaremos neste projeto de classe, pois é mais limpa, mais curta e também tem melhor desempenho interno. 24. O NewPizza e ligação de dados: Vamos agora acessar o arquivo newpizza.view. Podemos começar a adicionar alguns JavaScripts usando a configuração de scripts que acabamos de ver. Podemos adicionar objetos NewPizza, que serão a estrutura de todas as nossas pizzas em nosso aplicativo. Logo acima do modelo, adicione as tags de script e coloque nos atributos de configuração. Então, como acabamos de ver, precisamos importar nossa referência e importá-la do pacote view, que está nos módulos do node. Em seguida, podemos criar nossos objetos NewPizza, que estão encapsulados nesta referência. Essa referência criará um objeto reativo que podemos usar em todo o nosso aplicativo e o estado será mantido atualizado. Vamos começar isso dentro de uma constante ou variável chamada newPizza, configurar nossa referência como invólucro. Então, lá dentro, podemos passar qualquer tipo de dado que quisermos. Isso pode ser uma string, pode ser uma matriz. Mas, para nosso caso de uso, precisamos criar um objeto que tenha todas as propriedades de Pizza. Essas propriedades consistem no nome Pizza, podemos dizer Margherita. Mas só por isso, vou colocar Eg. A razão para isso é que esse será o estado inicial do nosso formulário. Vou entrar em nosso administrador, vamos dar uma olhada e veremos esse nome. Isso será vinculado ao nosso objeto. A propriedade do nome aqui usando o modelo V será vinculada ao nosso nome. Também vincularemos a descrição à próxima propriedade. Quando registrarmos esse formulário pela primeira vez, o texto aqui refletirá o que vemos aqui. Isso apenas fornece ao usuário uma mensagem exata sobre o que ele precisa escrever para criar nossa NewPizza. Em seguida, uma descrição. Novamente, daremos um exemplo de uma deliciosa pizza à base de tomate coberta com mussarela. Separados por vírgula, podemos então adicionar nossas opções, que serão uma matriz. Colocá-los em uma matriz nos permitirá criar opções diferentes, como nosso tamanho. Cada um vai ser um objeto. Vamos ter dois objetos, assim como este, lado a lado. Cada um deles terá o tamanho da propriedade, digamos nove polegadas para o primeiro, e também um preço. O mesmo vale para nosso segundo objeto, mas este custará uma pizza de 12 polegadas e também terá um preço. Lembre-se de que todos esses valores são apenas valores iniciais. Todos esses valores de objetos podem ser substituídos pelos valores desse novo formulário de pizza. Eles serão atualizados antes de adicioná-los ao banco de dados. Para vincular nossas entradas de formulário às propriedades do objeto, vamos usar o modelo. O modelo nos permite criar algo chamado vinculação bidirecional de dados, que, conforme mencionado, significa que os valores do nosso objeto serão exibidos dentro das entradas do formulário. Em qualquer entrada de formulário que digitamos, podemos então atualizar para substituir essas entradas do formulário. Isso será refletido dentro do nosso objeto. Para fazer isso, vamos começar com o nome. Vá até as entradas do nosso formulário, onde digitamos o nome. Podemos fazer uso do v-model passando isso como um atributo. Queremos vincular isso ao nosso objeto, chamado NewPizza, e podemos acessar a propriedade name, então newPizza.name. Vamos copiar isso. Vá até a área de texto e podemos vincular isso à descrição. Depois da descrição, temos opções e precisamos vinculá-las a cada um desses valores de matriz. Lembre-se de que as matrizes começam na posição zero do número de índice. Este será zero e este será o índice número 1. Vamos descer e podemos adicionar essas opções. Temos o tamanho número 1, cole isso em NewPizza.options. Selecione o primeiro valor com o número de índice zero na propriedade chamada size. Vamos copiar isso, colar isso naquele com o ID do preço número 1, que muda para preço. Então, até nossa opção 2 de tamanho, esse é o índice número 1. Novamente, indexe o número 1 para o preço e também altere a propriedade do objeto para preço 2. Agora, se salvarmos isso em nosso formulário, podemos ver todos os dados iniciais dentro de cada um deles e você pode ver que também temos a opção definida corretamente. Temos o tamanho de nove polegadas e também o de 12 polegadas. Veja também a associação bidirecional de dados e verifique se o objeto está atualizado a partir desse formulário. Agora podemos acessar nossos modelos. Em qualquer lugar dentro daqui, podemos gerar o valor de NewPizza. Podemos ver isso no topo. Vamos remover qualquer coisa dessas entradas. Isso agora está atualizado. mesmo vale para a descrição, isso funciona. Vamos tentar atualizar o preço. Além disso, nossa segunda opção está vinculada a. Agora podemos remover isso com segurança e passar para o próximo vídeo. Veremos os árbitros com mais detalhes e como podemos adicionar itens à cesta. 25. Ref’s e adição ao cesto: Anteriormente, dentro desse novo componente de pizza, examinamos brevemente algo chamado ref. Uma referência é um invólucro para um valor. No nosso caso, o valor é a pizza. No próximo vídeo, também usaremos um árbitro como embalagem ou cesta, qual o usuário poderá adicionar pizzas antes de comprar. Ele faz isso convertendo o valor em um objeto reativo e a vantagem é que cada vez que esse objeto reativo é atualizado, todos os componentes que dependem desses dados também serão atualizados. Vamos entrar na exibição do menu para começar a trabalhar com eles e dar uma olhada nas referências com mais detalhes. Na visualização do menu fora do modelo, crie nosso script com o atributo de configuração. Crie nossa importação, exatamente como vimos anteriormente, onde importaremos a referência do pacote Vue.js. Também precisamos criar uma constante ou variável para nossa cesta. Embrulhe isso dentro de uma balsa para tornar o conteúdo reativo e defina o valor inicial de uma matriz vazia. Também precisamos criar uma função que atualize a cesta. Vamos chamar isso de AddToBasket. Como mencionamos anteriormente, quando usamos a configuração do script, isso nos permitirá acessar diretamente qualquer uma dessas variáveis ou funções dentro do nosso modelo. Vamos até nosso modelo e localizar nosso botão Adicionar, certificando-se de que estamos dentro do menu. Podemos listar agora para clicar usando @click e configurá-lo para acionar nossa função chamada AddToBasket. Verifique se isso está funcionando. Vamos colocar em um registro do console. Qualquer sequência de texto está bem. Entre no console. Clique no botão e nosso texto agora está atualizado. Pouco antes de adicionarmos mais código à nossa função, quero voltar rapidamente à nossa referência e ver como isso funciona com mais detalhes. Para isso, vou criar um objeto simples chamado user com a propriedade name e também uma propriedade de curtidas. Você pode estar se perguntando por que acabei de digitar um objeto de usuário não relacionado aqui. Bem, o conteúdo desse objeto não é importante. O importante a observar aqui é os objetos JavaScript têm propriedades. No nosso caso, temos a propriedade chamada nome e a propriedade chamada curtidas. Lembra quando eu disse anteriormente que, quando usamos um ref, o Vue.js nos bastidores transforma o conteúdo interno em um objeto reativo. Como acabamos de ver, qualquer tipo de objeto tem essas propriedades. Como nossa cesta é transformada em um objeto nos bastidores, ela também recebe uma propriedade de valor e essa propriedade de valor é a forma como podemos atualizar ou ler o conteúdo interno. Vamos digitar isso rapidamente e mostrarei exatamente o que queremos dizer. Por enquanto, vamos apenas comentar nossa cesta. Criaremos uma cesta conhecida, que não usará um árbitro. Isso vai ser apenas um objeto simples. Novamente, só para reforçar isso, nos bastidores, nossa cesta é transformada em um objeto como esse e, em seguida, recebe uma propriedade de valor Portanto, quando se trata de atualizar uma referência, assim como nossa cesta, não apenas a atualizamos pelo nome da variável, como cesta, mas também precisamos atualizar o valor aninhado nela. Por exemplo, quando chamamos nossa função addToBasket, primeiro acessamos nosso nome de variável ou constante e, em seguida, o valor interno. Ou podemos usar algo como o método push para enviar um novo objeto. O nome, qualquer conteúdo está bem, o preço. Tudo isso é apenas um código de exemplo, não importa o tamanho de 12. Como se trata de uma cesta, também precisamos saber a quantidade. Para verificar se isso funciona, verifique se estamos atualizando o valor interno, podemos ir até nosso modelo e gerar o valor da nossa cesta. Vamos salvar isso. Vá para o menu. Podemos ver que temos a propriedade value que está vazia. Clique em “Mais” e não vemos que isso esteja atualizado. No entanto, se atualizarmos isso para usar uma referência , remova o comentário. Clique no botão. Podemos ver que esse objeto agora está reativo e qualquer atualização nossa cesta agora é enviada para nosso modelo. Um ponto importante a ser observado aqui é que, quando estamos usando a cesta dentro do modelo, assim como estamos aqui, não precisamos acessar basket.value. Isso é feito automaticamente para nós. No entanto, como podemos ver em nosso script, quando acessamos ou atualizamos qualquer uma de nossas referências, precisamos usar a propriedade value para atualizar ou ler os dados aninhados nela. É claro que não queremos produzir a cesta desta forma. O que queremos fazer é ir até nossa seção de cesta e exibir o conteúdo dentro de nossa tabela sem nossa linha da tabela. Podemos adicionar o interior do corpo da mesa, colocá-lo de volta dentro e, em seguida, podemos dar um loop sobre nossa cesta com um loop Vue.js V4. Dentro dos colchetes, podemos acessar o nome da variável do item e também o número do índice em cada loop. Isso está na cesta e, em seguida, no Vue.js, quando o loop também precisa de uma chave exclusiva. Agora, não temos nenhuma grande chave exclusiva que possamos usar. Mas, como medida temporária, podemos passar o número do índice. Posteriormente, quando tivermos a pizza armazenada no banco de dados, atualizaremos essa chave para usar o ID exclusivo de cada valor. Agora, cada pizza dentro da cesta é armazenada dentro da variável do item. Podemos atualizar a quantidade, então item.quantity, o nome da pizza, isso é item.name, o tamanho, item.size e também o preço na parte inferior. Se quiséssemos, o que poderíamos simplesmente fazer é adicionar item.price. Mas como podemos pedir várias pizzas, multiplicaremos esse preço pela quantidade do item para exibir um total para cada linha. Salvar. Abra um pouco mais de espaço. Agora, cada vez que adicionamos uma nova pizza, a cesta é atualizada e exibida dentro da nossa mesa. Em seguida, melhoraremos isso passando por cima das pizzas e adicionando o nome exato da pizza à cesta, em vez dos dados de amostra que temos atualmente. 26. Loop sobre pizzas: Atualmente, como sabemos, ainda não temos nosso banco de dados configurado para armazenar nossas pizzas. Por enquanto, como medida temporária, criaremos um árbitro, para o qual podemos empurrar nossas pizzas. Isso nos permitirá passar por cima dessas pizzas e exibi-las dentro de uma mesa. Para isso, vá para o arquivo MenuView e, na parte superior, criaremos uma nova constante chamada AllPizzas. AllPizzas será cercado dentro de um árbitro. Bem, o valor inicial será uma matriz vazia. Em seguida, vá para os novos componentes pizza.view, que estão dentro do administrador. Isso economiza um pouco de tempo. O que vamos fazer aqui é selecionar o objeto de pizza completo. Este é o objeto de demonstração aqui dentro da referência. Copie tudo, incluindo os colchetes. Estamos copiando isso porque isso nos dará a estrutura consistente necessária para adicionar novas pizzas ao banco de dados. De volta à exibição do menu e dentro da antiga variedade de pizzas, cole isso duas vezes. Certifique-se de que cada um esteja separado por uma vírgula. Vamos mudar isso um pouco. Vamos remover o Eg. Margherita. O segundo Pepperoni, retire o Eg. Diremos coberto com mussarela e calabresa. Basta aumentar o preço para tornar isso um pouco diferente. Agora, isso pode ser repetido na tabela do menu. Eles exibem cada uma das pizzas. Agora, vamos ao modelo. Tenha esse menu e , em seguida, a mesa aninhada dentro do corpo da mesa. Faremos exatamente o mesmo que fizemos com a cesta, onde criaremos um loop v-for e colocaremos os dados onde precisarmos. Volte para a seção de menu, corpo da tabela v-for. Dentro dos colchetes, podemos selecionar a pizza e também o número do índice. Isso está em nossa antiga variedade de pizzas. Em seguida, coloque uma chave, que será o número do índice por enquanto. Assim como dissemos com a cesta, também voltaremos a isso mais tarde e usaremos a chave exclusiva que o banco de dados fornecerá. Ótimo. Agora, temos acesso a todas as pizzas e em vez de exibir o nome codificado da pizza, abrimos as chaves duplas e podemos acessar nossos objetos, que são pizza.name. A descrição, pizza.description. Vamos dizer isso e ir para o menu. Aqui estão nossas duas pizzas. Temos nossa Margherita e o pepperoni, que correspondem à nossa referência da seção de roteiros. No entanto, ainda não terminamos com isso, porque também precisamos adicionar as opções de pizza. Precisamos tornar o tamanho da pizza e também o preço mais dinâmicos em muitas das opções que teremos para cada uma dessas pizzas. Para isso, precisamos novamente descer até nossa mesa. Aqui temos essa linha da tabela, que é para cada uma de nossas opções. Precisamos criar um loop adicional aqui para percorrer nossas duas opções, então v-for. O valor variável da opção e também o incluiremos no índice. Precisamos passar por cima do nosso objeto de pizza, que é o do loop inicial. Precisaremos acessar nossas opções. A chave para essa única opção de passagem. Em seguida, dentro dos colchetes, podemos selecionar o primeiro ou o segundo valor com o número do índice. Para o primeiro loop, isso selecionará a primeira opção e o segundo loop selecionará a segunda opção. Para o tamanho da opção, chaves duplas, a opção e a propriedade de tamanho, e a propriedade de tamanho mesmo no símbolo da moeda, a opção.preço. Vamos testar isso no navegador. Agora temos nosso loop criando nossas duas opções, e cada uma tem o tamanho e o preço exclusivos. Bom. Estamos fazendo um bom progresso aqui, mas agora, quando queremos adicionar cada uma dessas pizzas à cesta, também precisamos passar essas informações de pizza para a função. Esse botão que você tem aqui não só precisa chamar AddToBasket, mas também adicionar os colchetes e passar a pizza e também a opção até a função, onde podemos receber esses valores, ou seja, o item e a opção. Agora, em vez de ter o nome como uma string, podemos passá-lo no nome da variável item.name. O preço, que está armazenado na opção, é option.price. O tamanho, opção.tamanho. Vamos experimentar isso. Vamos experimentar a Margherita de nove polegadas. Isso parece bom. Um pepperoni de 12 polegadas, tudo isso parece estar funcionando perfeitamente bem. Em seguida, atualizaremos a quantidade dentro dessa cesta se a mesma pizza for selecionada várias vezes. 27. Verificando itens de cesta duplicados: No momento, adicionaremos uma nova pizza à nossa cesta. Tudo funciona bem , mas começamos a ter um problema se adicionarmos o mesmo valor várias vezes. Por exemplo, se tentarmos adicionar a pizza de nove polegadas mais de uma vez, já a temos na parte superior vez de aumentar a quantidade para duas, obtemos um novo item de linha na parte inferior. Isso é o mesmo para qualquer uma de nossas pizzas. Em vez disso, o que queremos fazer em vez de adicionar um novo item de linha é aumentar a quantidade a cada vez. Para isso, antes de empurrarmos nossa nova pizza para a cesta, primeiro precisamos verificar se a nova pizza já existe dentro dessa cesta. Para fazer isso na parte superior de nossa função, podemos acessar nossa cesta, o valor, já que é uma referência, e usar o método de localização do JavaScript. O método find executará uma função para cada valor dentro da nossa cesta. Se houver pizza dentro da cesta, armazenaremos isso dentro de uma variável chamada pizza e, em seguida, poderemos trabalhar com cada pizza individualmente. O que queremos fazer aqui é verificar se o nome e o tamanho da pizza coincidem. Lembre-se de que, se entrarmos em nosso menu, como o Margherita, podemos adicionar dois tamanhos diferentes. Podemos ter dois nomes de pizza separados, mas esses não coincidem. Também precisamos verificar o nome da pizza e também o valor da opção. O método find do JavaScript retornará o primeiro valor, no nosso caso, a pizza, que corresponde a uma determinada condição. Queremos retornar verdadeiros se uma determinada condição for atendida. No nosso caso, queremos verificar se pizza.name é igual ao item.name. Isso é verificar se a pizza que está atualmente na cesta tem um nome igual ao nome da pizza, que estamos tentando adicionar. Deve haver um triplo igual e, usando o e comercial duplo, também precisamos fornecer uma segunda verificação. A segunda verificação é descobrir se o pizza.size é novamente a pizza, que está guardada dentro da cesta. Queremos saber se isso é igual à opção.size. Novamente, esse é o tamanho da opção da pizza que estamos tentando adicionar. Se ambas forem iguais, essa afirmação é verdadeira e esse método de busca retornará a pizza que encontramos na cesta. Podemos armazenar isso dentro de uma constante ou de uma pizza existente e, antes de prosseguirmos, verificaremos fazendo login no console. Registre o valor de nossa pizza constante, salve e vá para o navegador. Entre no console para que não tenhamos nenhum amigo de pizzas aqui dentro, além disso, isso é indefinido, valores diferentes também são indefinidos. Mas se tentarmos clicar em uma pizza pela segunda vez, retornaremos à pizza, que corresponde à cesta. Vemos que esta é uma pizza de nove polegadas, vamos experimentar com a de 12, essa também funciona, vamos experimentar o pepperoni. A primeira vez é indefinida e, se já a tivermos na cesta, ela devolverá a pizza que encontrar. Com essas informações, o que podemos fazer agora é colocar uma declaração if e verificar se nossa pizza foi encontrada com essa constante. Se quiser, é acessar a pizza, selecionar a propriedade da quantidade e aumentá-la selecionar a propriedade da quantidade pelo valor de um. Além disso, se isso for verdade, queremos retornar, alterar essa função, pois não queremos adicionar mais pizza à nossa cesta. Agora vamos tentar isso. Recarregue isso. Nossa primeira Margherita, nossa segunda Margherita, agora aumenta a quantidade. Vamos experimentar pepperoni. Duas novas linhas e uma duplicata e cada vez que clico em uma duplicata, a quantidade é aumentada pelo valor de uma. Em seguida, também voltaremos à nossa cesta e continuaremos com o assunto da quantidade , conectando nossos botões de aumento e diminuição, além de uma função para remover uma pizza da cesta. 28. Remoção e mudança da quantidade da cesta: Como descobrimos no vídeo anterior, quando adicionamos qualquer uma de nossas pizzas à cesta, agora temos todas as nossas pizzas mostradas à direita. Também vemos a quantidade que é o padrão de um. Também temos esses botões para aumentar e diminuir a quantidade. É com isso que vamos trabalhar agora. Vá até a visualização do menu, vá até seção do modelo e role para baixo até a área da cesta. Dentro das cestas, temos nosso corpo de mesa, que está criando nosso circuito para todas as pizzas. Aqui, dentro do circuito, temos acesso ao item para o qual você deseja alterar a quantidade. Então, aqui temos nossos botões para aumentar e também diminuir os valores. Para o primeiro, que é a diminuição, podemos adicionar um ouvinte de cliques, que acionará uma função. Vamos passar esse item para a função e depois alterar a quantidade. Dentro do botão de abertura, @click, chamaremos essa função de quantidade reduzida. Passe o item para que saibamos qual item reduzir e depois desça até o segundo botão, que é aumentar. Chamaremos isso de incrementeQuantity. Novamente, isso também precisa acessar o item que queremos alterar. Começaremos com essa função incrementeQuantity. Vou rolar para cima. Lembre-se de que, se dermos uma olhada nesse método de empurrar aqui, podemos ver a estrutura de nossas cestas. Tudo o que precisamos fazer é aumentar a propriedade de quantidade no objeto. Crie uma função, incrementeQuantity, pegue o item que é passado para ela, selecione o item. Queremos trabalhar apenas com o campo de quantidade e incrementaremos isso pelo valor de um. Em seguida, a função para diminuir a quantidade. Também inclui o item, item.quantity. Vou deduzir isso pelo valor de um. Essa é a primeira coisa que precisamos fazer para a função de diminuição. A segunda coisa é verificar se a quantidade é zero. Se for, não queremos que um item de linha seja mostrado dentro da cesta com a quantidade zero. Em vez disso, queremos remover isso da cesta. Disso, podemos colocar em uma seção F para verificar se o item.quantity é igual ao valor zero. Se estiver, queremos remover isso da cesta. Se quiséssemos, poderíamos colocar o código aqui dentro para fazer isso. Mas, em vez disso, vou terceirizar isso para uma função autônoma que será chamada removeFromBasket. Também precisaremos pegar o item que queremos remover e, em seguida, criá-lo na parte inferior, a função removeFromBasket, passar e o item que você deseja remover. Primeiro, precisamos acessar nossas cestas completas e, como se trata de um Ref, acessamos a propriedade de valor. Em seguida, podemos usar o método de emenda JavaScript. O Splice removerá um item da nossa matriz pela primeira pessoa na posição inicial. Portanto, precisamos pegar o número de índice desse item. Vamos fazer isso acessando o basket.value. Esta é a cesta cheia. Em seguida, podemos pegar o número do índice com indexof. Precisamos saber o número do índice do nosso item. Isso é apenas JavaScript normal. Não tem nada a ver com Vue js. Encontramos a posição do índice de nosso item específico dentro dessa matriz separada por uma vírgula. Queremos remover apenas um único item. Agora, vamos salvar isso e verificar se está funcionando. Clique em qualquer pizza. Se continuarmos aumentando, o valor também aumentará. Vamos tentar mais. Funciona bem. Negativo, isso diminuirá. Então, quando chegarmos a zero, esse item deve ser removido. Essa é uma boa funcionalidade que foi criada com funções bem pequenas. Em seguida, vamos ficar dentro dessa cesta e começar a trabalhar com atualização do total do pedido usando propriedades computadas. 29. Propriedades calculadas: Se você já usou o view dress no passado e fez uso de propriedades computadorizadas, a boa notícia é que elas vieram para ficar. Eles ainda são totalmente suportados no View Free, tanto ao usar a API de composição quanto à API de opções. Eles serão um caso de uso ideal para calcularmos o custo de todas as pizzas dentro das cestas. Na parte inferior da cesta, atualmente temos esse valor codificado, que está disponível na visualização do menu. Vamos rolar para baixo e encontrar isso. Isso está próximo ao final do nosso modelo. Poderíamos usar funções regulares para calcular o custo dentro dessa cesta, mas o problema com uma função é que ela só será executada uma vez a cada vez que a chamarmos. Se, em vez disso, escrevermos esse cálculo dentro de uma propriedade computada, sempre que os dados internos mudarem, no nosso caso, as cestas, seu valor será recalculado para nós. Para fazer isso, vá para o topo do arquivo. Precisamos importar o computado do pacote de visualização. computado atua como um invólucro. Se detalharmos as coisas, podemos primeiro criar uma função anônima para calcular o nível de nossas cestas. Na parte inferior do nosso roteiro. Primeiro, criaremos uma função que não precisa de um nome neste estágio. O que vamos fazer é criar uma variável chamada custo total, que inicialmente será zero, e então poderemos percorrer todas as cestas e empurrar o campo de quantidade de cada uma de nossas pizzas. Esse é o custo total. Cestas, novamente, isso é uma aposta, então usamos o loop de valor com para cada uma. Para cada um, executaremos uma função para cada valor dentro das cestas e armazenaremos cada um dentro do item. Então, podemos pegar nossa variável vazia chamada custo total. Use o operador plus equals para adicionar um novo valor ao nosso custo total em cada loop. Não queremos simplesmente pegar o preço do item e elevá-lo ao total, porque às vezes podemos comer várias pizzas. Para isso, precisamos multiplicar o item.quantidade pelo preço. Podemos acessar esse custo total fora da função. Precisamos devolver isso. E então, fora da função, cria uma variável ou constante para armazenar nosso valor computado. Vamos chamar isso de total. Conforme mencionado, computado atuará como um invólucro, então precisamos colocá-lo dentro de nossa função. Recorte isso, cole isso dentro do computador. Agora, como calculamos como um invólucro, vez que a cesta ou qualquer outro dado interno for atualizado, essa função será executada novamente e a variável total será atualizada. Esse total agora pode ser usado dentro do nosso modelo. Pule até o fundo. Você adiciona o custo total, adiciona um item tanto quanto o preço, já que só temos um. Aumente a quantidade. Agora, isso também é dobrado, pois dentro do nosso valor calculado, multiplicamos a quantidade do item pelo preço. Tudo isso agora parece estar funcionando corretamente. Posteriormente, melhoraremos isso criando um filtro de moeda reutilizável para garantir que os números sejam arredondados corretamente. 30. Arquivos compostos: Na seção de scripts do nosso MenuView, na qual trabalhamos recentemente, se dermos uma olhada de cima para baixo, essa seção está começando a ficar bem grande. Para ajudar com isso, podemos mover o conteúdo para arquivos separados, podemos usar quantos desses arquivos quisermos, que manterá as coisas realmente organizadas. Eles são chamados de arquivos compostáveis. Para mantê-los organizados, vamos criar uma nova pasta chamada composables para mantê-los. Eles viverão diretamente na fonte e acompanharão coisas como nossos ativos e nossos componentes. Clique em Source, New Folder, Name Of Composables e, se quiser, podemos alterar o nome dessa pasta, ela não precisa ser composta, é apenas uma convenção de nomenclatura. Outra convenção de nomenclatura são os arquivos que estão dentro. Eles tendem a ter o prefixo de uso, mas, novamente, isso é totalmente opcional. Para aqueles não relacionados ao nosso conteúdo, teríamos arquivos como UseBasket, UsePizza e useOrders, que são todos arquivos JavaScript comuns. Vamos começar com um arquivo chamado UseBasket. Coloque isso dentro do arquivo composables, useBasket, e ele tem a extensão JavaScript. Este arquivo vai exportar uma função, então exporte por padrão, uma função chamada UseBasket. O conteúdo desta função será toda a funcionalidade relacionada à cesta dentro do nosso MenuView ou de qualquer outro arquivo. Voltando ao MenuView, vamos dar uma olhada em todas as funcionalidades relacionadas à cesta. Precisamos da cesta, vamos cortar isso, colar isso dentro do nosso novo arquivo. Não precisamos das pizzas, elas entrarão em um arquivo diferente, função AddToBasket, podemos pegar isso. Também precisamos do incrementeQuantity, Diminuir , RemoveFromBasket e também do total da cesta, que é o valor calculado, recortar tudo isso e deixar nossas pizzas, colá-las em nosso arquivo composable, certificando-se de que tudo esteja dentro dessa função. Como não estamos usando nossa referência e nossa seção computada aqui, também podemos trazer as importações ou copiá-las. Podemos ver que ainda estamos usando nossa referência dentro desse arquivo, mas não conseguimos remover o computado. Em seguida, importe-os na parte superior do nosso arquivo, fora da função. Agora, para usar qualquer função ou qualquer uma dessas variáveis em arquivos diferentes, primeiro precisamos devolvê-la dessa função até a parte inferior. Ainda dentro da tag de fechamento de nossa função, crie nossa seção de retornos e precisa retornar qualquer uma de nossas funções ou variáveis que queremos usar em outros arquivos. Nós efetivamente precisamos de tudo a partir daqui, precisamos da cesta, precisamos da função chamada addToBasket, precisamos das duas funções para aumentar e também diminuir os valores, precisamos do total. Mas uma coisa que realmente não precisamos neste estágio é removeFromBasket. Isso ocorre porque o único lugar em que isso é chamado é dentro dessa função DecreaseQuantity, portanto, não precisamos chamá-la de nenhum dos arquivos. Isso agora agrupa todas as funções e variáveis relacionadas. Lembre-se de que exportamos uma função aqui chamada useBasket. Para acessar o conteúdo interno, podemos ir até nosso MenuView e importá-lo para nosso arquivo. Importe, use Basket. Usando o símbolo add, podemos pular para o nível superior de nossa fonte e depois pular para a pasta composable e , em a pasta composable e seguida, para o nome do arquivo chamado useBasket. Em seguida, usando a desestruturação do JavaScript, podemos armazenar todos os valores retornados dessas funções em variáveis. A cesta, as funções de incrementeQuantity, DecreaseQuantity, precisamos addToBasket e também o total. Eu os estava selecionando em nossa função UseBasket, que importamos logo acima. Todas essas constantes agora estão disponíveis para uso dentro do nosso modelo. Tudo o que resta a fazer é salvar isso, voltar ao nosso projeto e verificar se tudo ainda está funcionando corretamente. Na verdade, pouco antes de fazermos isso, precisamos realmente chamar essa função para que elas estejam disponíveis. Além do projeto, adicione-os às nossas cestas, as funções de aumento e diminuição estão funcionando. Podemos removê-los, e nosso total também está funcionando. 31. O que é o Firebase?: Então, o que exatamente é o Firebase e como podemos usá-lo? Bem, o Firebase é um serviço fornecido pelo Google para sites, aplicativos e também jogos. Muitos deles precisam de serviços como autenticação, armazenamento, hospedagem e também de um banco de dados para. Firebase fornece tudo isso em um único aplicativo. Vou fazer uso de alguns deles dentro do nosso projeto. Usaremos alguns deles, incluindo o Cloud Firestore, incluindo o Cloud Firestore, que será nosso banco de dados, que armazena nossas pizzas e nossos pedidos. O Cloud Firestore é um banco de dados em tempo real, ou seja, quando qualquer um dos nossos dados armazenados é alterado, o aplicativo é notificado. Um caso de uso para isso poderia ser se o administrador removesse uma pizza e, em seguida, o menu também fosse atualizado. Além disso, se você tiver vários aplicativos, talvez seu site e aplicativo móvel, o banco de dados poderá ser compartilhado e mantido em sincronia. Também podemos configurar regras e funções para fins de segurança. Mas falaremos mais sobre isso mais tarde. Ele também fornecerá nosso sistema de autenticação, fornecendo login, login , saída e fluxo de senhas esquecidas, além de várias maneiras de os usuários fazerem login. Usaremos um login por e-mail e senha. Pois existem outros serviços disponíveis, como login do Google, Twitter ou Facebook. Além disso, também há muitos outros serviços do Firebase que serão adicionados, como análise, funções de nuvem e armazenamento. Então, vá em frente e inscreva-se em uma conta, caso ainda não tenha feito isso. A conta gratuita é tudo o que precisamos para testar e construir nosso projeto e, em seguida, vamos configurá-la e vinculá-la ao nosso projeto. 32. Configuração do Firebase: Depois de criar uma conta e fazer login no Firebase, vá até a área do console e você verá algo parecido com isso. A partir daqui, podemos criar nosso novo projeto. Precisamos dar a este projeto o nome, bem, será Pizza Planets. Você pode chamar o seu apenas de Pizza Planet se quiser, mas esta é a terceira versão desta classe, então vou chamar a minha de V3. Clique na caixa de seleção e continue. Google Analytics, vou dizer não para este projeto. Em seguida, aguarde alguns minutos para concluir. Meu projeto agora está configurado. Vamos continuar e então isso nos levará para dentro do nosso projeto. A partir daqui, podemos obter as instruções para adicionar o Firebase ao nosso aplicativo para iOS ou Android. Mas, no nosso caso, clicaremos no link da web. Se as coisas parecerem um pouco diferentes neste estágio, não se preocupe, esses sites têm o hábito de mudar, mas deve ser um processo de configuração semelhante. Agora precisamos registrar nosso aplicativo dando a ele um apelido. Vou mantê-lo da mesma forma que Pizza Planets Version 3. Não vou configurar nenhuma hospedagem Firebase por enquanto. Cadastre-se. Então, quando isso for concluído, ele nos dará algumas instruções para configurá-lo. A primeira coisa a fazer é usar o npm para instalar isso como um pacote de módulos node. Vamos copiar esse link, que é npm install Firebase. Vamos fechar o servidor. Cole isso. Agora, temos alguns motivos pelos quais está muito lento hoje. Podemos simplesmente fechar isso e também reiniciar o servidor com npm run dev. Podemos confirmar que isso foi instalado acessando o package.json. Eles terão o Firebase como nossa dependência. Voltar ao site do Firebase. A próxima etapa após a instalação é copiar algumas instruções. Vou copiar isso e daremos uma olhada no que cada estágio faz em apenas um momento. Isso nos manterá organizados ao colocá-la em uma nova pasta JavaScript, que fica diretamente dentro da pasta de origem, criando um novo arquivo. O Firebase.js. Cole isso. A primeira coisa que fazemos é importar e inicializar as funções do aplicativo, que são fornecidas pelo Firebase. Em seguida, temos o objeto de configuração do Firebase, que é convenientemente preenchido com todas as informações do nosso aplicativo. Então, na parte inferior, usamos essas funções de inicialização do aplicativo aqui. Em seguida, passe os detalhes da configuração, o que nos dá uma referência ao nosso aplicativo. Agora temos a referência do aplicativo. Também precisamos de uma referência ao nosso banco de dados Firestore para que possamos adicionar e remover registros. A partir disso, também precisamos importar algo da biblioteca do Firebase. No topo, criaremos um segundo importante em que vamos importar algo do pacote, que é o Firebase. Mas desta vez, em vez do aplicativo de barra, precisamos importá-lo da seção Firestore. A função que você deseja importar desta seção é chamada GetFirestore. GetFirestore agora pode ser usado para obter uma referência ao nosso banco de dados. Para fazer isso, passamos nossa variável de aplicativo. Só esse aqui. Isso está dentro de uma constante chamada Db, que é a abreviação de banco de dados, chamada GetFirestore. Passe em nosso aplicativo. Ao trabalhar com o armazém de bombeiros, ele agrupa nossos dados em coleções. No nosso caso, teremos uma coleção de pizzas, teremos uma coleção para pedidos e também poderemos ter uma para usuários. Para trabalhar com coleções também será necessário importá-lo do pacote Firestore. Volte ao topo, obtenha pacote Firestore, importe a coleção. Podemos usar isso para referenciar nossas coleções passando duas coisas. O primeiro, precisamos passar a referência do banco de dados que você armazenou logo acima dentro dessa constante. Em segundo lugar, será o nome da nossa coleção, que ainda não criamos. Este vai se chamar Pizzas. Isso agora nos dá uma referência a uma coleção exclusiva que podemos usar para ler documentos e também adicionar novos desejos. Para disponibilizar isso em outros componentes, vamos exportar isso como uma constante. O nome da constante será DPPizzas&ref. Vamos copiar e colar isso. Esta segunda referência será para nossos pedidos. DBorder & ref. Isso usará o mesmo banco de dados, mas o nome da coleção dos pedidos. Isso nos permitirá importar essas referências para quaisquer outros componentes que sejam arquivos. Poderíamos fazer coisas como ler o conteúdo ou adicionar novos dados. Veremos isso a seguir. A etapa final deste vídeo é dizer ao Firebase que queremos usar a nuvem Firestore e também a autenticação. Vamos entrar na seção de visão geral do projeto dentro do navegador. Podemos continuar até o console. Não precisamos de mais dados dessa visualização. Isso nos dá a chance de adicionar vários produtos ao Firestore. Podemos fazer coisas como acompanhar o desempenho. podemos adicionar análises para nosso caso de uso. No momento, tudo o que precisamos é de autenticação e do banco de dados Firestore na nuvem. Vamos começar com a autenticação. Comece. Isso nos permitirá fazer login com vários provedores, como Google e Facebook. Mas vou criar um sistema de e-mail e senha. Clique aqui para ativar o e-mail e a senha. Agora, não vou ativar o link do e-mail, vamos apenas mantê-lo como um e-mail e uma senha simples . Isso é tudo que precisamos fazer por enquanto. Isso está habilitado no momento. Voltar à visão geral do nosso projeto. Você pode ver que agora temos o atalho para a autenticação. Em seguida, adicionaremos o Cloud Firestore, que também aparece na barra lateral. Crie nosso banco de dados. Começaremos no modo de teste e analisaremos as regras de segurança posteriormente. Mas, por enquanto, isso nos dará acesso total para ler e gravar em nosso banco de dados. Esse recurso só deve ser permitido para testes, e veremos como podemos melhorá-lo posteriormente. Clique em Avançar. Escolha um local se quiser e habilite o banco de dados. Posteriormente, habilitaremos algumas regras de segurança para manter nosso banco de dados mais seguro. Bom. Agora temos uma configuração do modo de autenticação e também temos um banco de dados vazio. Com isso em vigor, a seguir, veremos como podemos adicionar algumas pizzas novas a esse banco de dados vazio. 33. Adicionando pizzas ao banco de dados: Agora que a configuração está pronta, podemos usar o dbPizzasRef que você configurou anteriormente junto com nossa referência de pedido para trabalhar com nosso banco de dados. Começaremos adicionando as novas pizzas ao banco de dados nos novos componentes da pizza. Para isso, precisamos importar duas coisas. Então, vamos pular para o novo componente de pizza, que está na pasta Componentes e no Admin. Na parte superior, crie nossas instruções de importação onde importaremos algo chamado AddDoc, que vem do nome do pacote, que é Firebase/Firestore, o que faz sentido porque essa é uma função relacionada ao banco de dados. O segundo que precisamos importar é nosso DBPizzasRef. O caminho do arquivo foi convenientemente preenchido para nós. Ambos serão usados dentro de uma nova função para adicionar nossa pizza. Vamos até o final de nossos scripts. Isso vai ser assíncrono, crie uma função chamada Adicionar. Como estamos trabalhando com um banco de dados e podemos fazer com que algo dê errado, precisamos colocar isso em uma seção de tentativa e captura. Catch absorve o erro, que podemos armazená-lo na variável e. Por enquanto, trabalharemos dentro da seção de testes. A partir daqui, podemos chamar nossa função, que acabamos de importar, chamada AddDoc. Dentro daqui, precisamos passar duas coisas. A primeira é a coleção à qual você deseja adicionar, que é armazenada em nosso DBPizzasRef. Lembre-se de que isso fará referência uma coleção chamada pizzas. O item que você deseja adicionar ao banco de dados será nosso NewPizza, que é esse objeto logo acima. Como isso é armazenado em uma referência, precisamos acessar o valor. Agora podemos chamar essa função de adição quando clicamos no botão Adicionar. Lembre-se de que, dentro do aplicativo e da seção de administração, temos esse botão Adicionar. Vá até o modelo. Aqui estamos. Vamos ouvir agora com um clique. O nome da função add evitará o comportamento padrão, o que impedirá que a página recarregue e perca todos os dados ou formulários. Além disso, como não sabemos quanto tempo isso vai levar, já que estamos enviando alguns dados para um servidor externo, adicionaremos await, pois podemos esperar que os dados voltem antes de avançar para a próxima etapa. E podemos usar isso porque marcamos nossa função como assíncrona. Antes de testarmos isso e garantirmos que isso nosso NewPizza para o banco de dados, adicionaremos um tratamento de erros e também uma mensagem para exibir dentro do navegador. Essa mensagem pode ser armazenada dentro de uma constante. Logo acima de nossa mensagem NewPizza, const, armazene isso dentro de uma referência, pois vamos atualizá-la. Inicialize isso como uma string vazia e volte para nossa função de adição, onde atualizaremos o valor dessa mensagem. Como estamos usando async, await, qualquer código executado abaixo só acontecerá quando obtivermos as informações de nosso banco de dados. Na próxima linha, saberemos se isso foi um sucesso ou se houve uma falha. Como reunimos isso em uma seção de testes, saberemos que esse código só será executado se for bem-sucedido. Adicionaremos o código de falha dentro da área de captura. Abaixo, acesse nosso message.value, que será um sucesso. Abra as aspas e diremos Pizza, coloque em um nome variável. Colocaremos uma variável para que possamos acessar nossa nova pizza e o nome NewPizza.value.name foi adicionado. E então, se houver um erro, vá para a área de captura, acessaremos nosso message.value e definiremos isso como uma string onde houve um erro, adicione a pizza. Em seguida, precisamos enviar essa mensagem dentro do nosso modelo. Vou fazer isso na parte inferior, logo abaixo desse botão, dentro de uma extensão. Vou colocar nossa mensagem e a última coisa a fazer é testar isso no navegador. Lembre-se de que nosso banco de dados está vazio no momento. Dentro do Admin, adicionaremos uma Margherita. Vamos mover o código de exemplo. Clique no botão Adicionar para acionar nossa função. Aí estamos, as coisas estão começando a ficar boas. Temos que a Pizza Margherita foi adicionada ao banco de dados e atualizada. Isso parece promissor. Temos nossa coleção de pizzas, que criamos dentro da configuração do Firebase, que está aqui. Em seguida, usamos dentro do NewPizza um método chamado addDoc, e seu método addDoc referenciou nossa coleção, que é Pizzas, e o valor, que é newPizza.value. No banco de dados, esta coleção de pizzas tem um ID de documento que é exclusivo e, em seguida, todo o conteúdo de nossa nova pizza. Vamos tentar mais um, Pepperoni. Adicione isso. Lá vamos nós. Sabemos como documentar referências e, se clicarmos nessa, essa agora é o Pepperoni. Por que não? Vamos adicionar mais uma à nossa nova forma de pizza. Vegetariano. Diga mussarela, pimentão, cebola, cogumelos. Isso realmente não importa nesta fase. Vamos atualizar o preço, digamos, oito e 14. Adicione isso. Além disso, atingimos nosso objetivo com este vídeo, que é colocar uma nova pizza em nosso banco de dados. Mas basta encerrar as coisas, se dermos uma olhada, neste texto aqui, também precisamos um pouco de espaço à esquerda da mensagem. No arquivo NewPizza, vá até o final. Adicione uma seção de estilo. Vamos dar a isso uma classe ou extensão, uma classe de mensagem, acessá-la e definir uma margem à esquerda, 1rem deve ser suficiente. Precisamos adicionar uma pizza nova para que possamos ver isso. Vamos fazer um banquete de carne. Mude a descrição, calabresa, salame, carne bovina e presunto. Altere o preço. Lá vamos nós. A seguir, veremos como podemos recuperar essas pizzas do banco de dados e exibi-las dentro do nosso menu. 34. Obtendo pizzas: Para recuperar pizzas do nosso banco de dados Firestore, Firebase fornece uma função chamada GetDocs. Além disso, como queremos usar essas pizzas no menu e na seção de administração, podemos criar um arquivo composto compartilhado para fazer isso. Vamos criar um novo arquivo na barra lateral. Nos composables, criaremos um novo arquivo chamado usePizzas.js. Isso seguirá um padrão semelhante ao outro material composto que criamos. Vamos exportar uma função que podemos importar para qualquer outro arquivo. Exporte a função padrão chamada usePizzas e crie o corpo da função que conterá todo o código que você deseja disponibilizar. Lá fora, podemos adicionar nossas importações na parte superior do arquivo. Precisamos importar a referência do vue. A razão pela qual precisamos disso é porque precisamos de uma constante que contenha todas as pizzas localmente. Const AllPizzas é igual a um ref e esta será uma variedade de todas as pizzas. Agora, para realmente comprar as pizzas, precisamos importar alguns itens do Firebase. O primeiro pacote que precisamos é aquele mencionamos anteriormente , que é GetDocs. Este é do firebase/firestore. Em seguida, também precisamos importar a referência que criamos no arquivo Firebase para ter acesso a essa coleção de pizzas , então precisamos importar o dbPizzasRef desse arquivo Firebase. Importe o dbPizzaref desse caminho de arquivo. Então, logo abaixo, onde todas as pizzas são constantes, criaremos uma função, que será responsável por recuperar nossas pizzas do banco de dados. Essa função será marcada como assíncrona, pois precisamos aguardar o retorno dos dados da pizza antes de podermos realmente usar essa função chamada getPizzas. Então, podemos chamar nosso método de cima, que acabamos de importar, chamado GetDocs, passá-lo em nossa referência de coleção, que é DBPizzAsRef. Vamos armazenar o valor de retorno em uma constante chamada docs e também aguardaremos o retorno desses dados. Em seguida, execute essa função e realmente obtenha a pizza do banco de dados. Temos algumas opções diferentes. Podemos acionar isso manualmente chamando getPizzas ou podemos acionar isso quando um componente é montado usando o gancho de ciclo de vida OnMounted . A partir do pacote vue, faremos isso com onMounted. Então, assim que esse código ou componente for montado no DOM, onMounted será chamado, o que chamará nossa função chamada getPizzas. Isso evita a necessidade de chamar essa função manualmente e significa que ela fará isso automaticamente nos bastidores assim que o componente for carregado. Se formos até o projeto e entrarmos no console, podemos testar isso fazendo um log do console para ver o valor de retorno dentro dos documentos. Atualize e ainda não vemos nada dentro do console porque esse código não está importado atualmente para os componentes. O gancho de ciclo de vida OnMounted não é chamado. Então, vamos fazer isso, mas primeiro, retornaremos os valores que precisamos importar. Tudo o que precisamos atualmente é dessa referência a AllPizzas. Começaremos importando isso para nosso MenuView, que está na seção de visualização. Então, assim como fizemos com o useBasket composable, primeiro precisamos importá-lo, então importaremos usePizzas do nosso arquivo composable e, em seguida, usando essa estruturação, importaremos nossa referência AllPizzas dessa função. Const allPizzas é igual ao valor de retorno de usePizzas. Agora vimos um erro, pois estamos duplicando essa referência do AllPizzas, estamos importando isso do nosso composable. Também temos esse código de exemplo aqui. Não precisamos mais de nada disso. Podemos remover essa seção. Sendo esse o único código que usa ref, também podemos removê-lo do script. Se recarregarmos, ainda não veremos nada registrado no console. Isso ocorre porque, para que isso realmente seja montado e chame nossa função, precisamos entrar no componente de menu. Selecione isso e, em seguida, veremos um registro dentro do console. Abra esse objeto e muitas informações serão retornadas do banco de dados. Na verdade, não precisamos de muitas dessas informações neste estágio, mas uma coisa em que estamos interessados é essa propriedade do documento. Abra isso, e dentro está uma matriz contendo cada documento de pizza que criamos . Vamos dar uma olhada lá dentro. Novamente, há muitas informações aqui. Podemos ver o ID do documento. Podemos acessar documentos e dados e detalhar os valores dos dados, incluindo o nome, as opções e a descrição. O que podemos fazer agora é analisar todos os valores dentro dos documentos. Infelizmente, não precisamos nos aprofundar em todos esses níveis do nosso objeto. Em vez disso, podemos chamar documentos como uma função. Isso extrairá todos os campos de que precisamos e os tornará acessíveis dentro do nosso script. Volte para o nosso material de composição. Podemos mover o registro, acessar nossos documentos devolvidos e chamá-lo para cada loop. Para cada um, executaremos uma função para cada um dos nossos valores. No meu caso, atualmente tenho quatro pizzas armazenadas. Então, para filtrar todos esses dados desnecessários, vou criar um novo objeto com uma estrutura mais simples, então const pizza. Aqui dentro, podemos estruturar esse novo objeto apenas com os dados de que precisamos. Como vimos, cada um deles tem um ID exclusivo. Podemos ver isso se fecharmos esse ID, então definimos o ID. Para acessar as informações da pizza em cada loop, também precisamos passar uma variável para nossa função. No primeiro loop, doc será igual à nossa primeira pizza. No segundo ciclo, esta será nossa segunda pizza, e assim por diante. Nós acessamos isso e selecionamos a propriedade ID. Em seguida, precisamos passar os dados que seriam vistos, que estão armazenados dentro dos documentos, .data.value. Agora precisamos acessar todos esses campos. Conforme mencionado, não precisamos nos aprofundar em todos esses campos. Em vez disso, o que podemos fazer é acessar nossos documentos e chamar a função de dados. Usando o operador de propagação de JavaScript, também podemos extrair os valores de que precisamos em locais diretamente dentro do nosso objeto de pizza junto com nosso ID. Finalmente, em cada ciclo, queremos colocar o valor dessa pizza em nossa referência AllPizzas. Basta explodir esse objeto, acessar AllPizzas.value e usar o método push de JavaScript para empurrar cada uma de nossas pizzas. Isso é tudo que precisamos agora. Volte ao nosso arquivo de menu. Lembre-se de que importamos todas as pizzas do nosso material de composição. Além disso, esse nome de variável também é o mesmo que usamos anteriormente. Agora, se salvarmos isso e recarregarmos, a tabela agora será preenchida com as pizzas do nosso banco de dados. Outra coisa que podemos fazer agora, já que temos acesso a um ID exclusivo para cada uma de nossas pizzas, é alterar a chave exclusiva para cada valor dentro desse loop. Em vez de usar o índice, podemos acessar nosso pizza.id. Não precisamos mais desse índice, então podemos apenas referenciar nossa pizza. O mesmo vale para as opções. As opções precisam consistir em duas coisas. A primeira, novamente, é a pizza.id e, como a pizza tem duas opções, também a adicionaremos à nossa opção.size. Novamente, podemos mover o índice e pronto, agora tudo está completo. Em seguida, continuaremos com um tema semelhante, também usando essas pizzas na um tema semelhante, também usando essas pizzas seção administrativa e também descobriremos como podemos excluir essas pizzas do nosso banco de dados. 35. Listando e excluindo Pizzas no administrador: Como descobrimos no vídeo anterior, se entrarmos neste link de administrador, também teremos esses componentes de menu que criamos anteriormente. Como também fizemos com o menu do vídeo anterior, agora precisamos retirar nossos itens de pizza do banco de dados e exibi-los dentro do administrador. Além disso, garantiremos que essa cruz vermelha, que listamos ao lado de cada uma de nossas pizzas, também remova esse item do banco de dados. Vamos passar para o nosso arquivo use pizzas.js. Este é o material de composição que configuramos no vídeo anterior. Precisamos importar duas coisas adicionais do firebase, em particular, o pacote firestore. O que precisamos é de algo chamado excluir documento, que, ao que parece, exclua um item de uma coleção e também o e usaremos doc para referir a qualquer documento específico que você queira selecionar. Em seguida, isso é passado para excluir o documento para realmente removê-lo. Criaremos uma nova função dentro desse objeto logo abaixo de onmounted, que será assíncrona chamada delete pizza. Essa função delete-pizza também receberá o ID ao chamá-la. Porque, é claro, precisamos saber qual pizza queremos remover e, em seguida, podemos acessar esse documento que acabamos de importar do Firestore. O doutor vai entender duas coisas. A primeira é a referência da coleção do banco de dados, que ainda armazenamos dentro do DB pizzas ref e , em seguida, ela precisa ter a ideia da pizza real que queremos remover. Na verdade, isso não é responsável por excluir nenhuma pizza. Tudo que estamos fazendo aqui é obter uma referência a um documento específico. Nós restringimos nesta cidade por coleção e depois a reduzimos pelo ID. Podemos então usar essa referência para passar, para excluir o documento. Nos passes, podemos armazenar isso dentro de uma constante, digamos pizza, e depois passá-la para excluir o documento. Vamos esperar por isso. Aguardaremos a conclusão desta operação. Em seguida, chamaremos nosso método acima de comprar pizzas. O motivo pelo qual queremos ligar para get pizzas quando isso for concluído é porque precisamos atualizar nosso aplicativo. Estamos excluindo um item depois chamamos de get pizzas, que está aqui. Em seguida, isso exigirá todas as pizzas que você armazenou no banco de dados, menos uma que removemos. Isso então atualizará todas as pizzas, que é nossa referência aqui no topo. Todas as pizzas são então devolvidas, o documento pode ser redigido e isso atualizará nosso menu, que criamos à esquerda aqui, e também atualizará o menu dentro do administrador. Para usar essa função, precisamos devolvê-la também de nossa pizza de exclusão composta, depois vamos abrir a barra lateral, pular para os componentes, a seção de administração e, dentro daqui, temos esse pizzas.vue, que é responsável por esta seção. Pizzas.vue precisa importar as seções de que precisamos, então colocar uma tag de script na configuração e importar nosso material de composição, que era usar pizzas. Usar pizzas retornou esses dois valores, que podemos desestruturar e armazenar dentro de constantes, então precisamos de todas as pizzas. Exclua pizza, que podemos recuperar chamando a função usePizzas. Até nossa seção de tabelas, onde temos alguns dados fictícios. Temos nossa margarita no lugar e agora podemos usar a seção do corpo da mesa para cobrir todas as nossas pizzas. V para pizza em todas as pizzas, passe uma chave e agora temos o ID exclusivo da pizza do banco de dados para que possamos acessá-lo. A margarita pode ser substituída pelo nome dinâmico da pizza, então pizza.name. Sendo esta a seção administrativa, não precisamos de todas as informações adicionais como a descrição e os preços, tudo o que precisamos ver é uma referência a cada pizza. Podemos ver isso agora à esquerda. Cada uma dessas cruzes para remover a pizza do banco de dados é armazenada dentro desse botão para que possamos adicionar um ouvinte de cliques e , em seguida, referenciar nossa função , que é excluir pizza. Isso também precisa passar o ID da pizza que queremos remover. Agora podemos acessar isso com pizza.id. Vamos tentar. Vamos remover o banquete de carne. Assim que fazemos isso, vemos um pequeno problema. Se dermos uma olhada nas quatro pizzas originais que comemos, tudo bem, essas são as quatro originais do nosso banco de mas, se formos até nosso composable, removemos isso do banco de dados, mas depois ligamos para obter pizza mais uma vez, que é pegar nossas pizzas gratuitas existentes do banco de dados e também adicioná-las a todas as pizzas. Basicamente, em vez de substituir todas as pizzas, mantemos as existentes e adicionamos os três itens adicionais. Efetivamente, isso não é ruim no momento, porque podemos ver que os três itens adicionais não incluem o banquete de carne, que removemos. Tudo isso parece estar funcionando bem. Para corrigir isso, isso é bem simples, tudo o que precisamos fazer antes de comprar nossas novas pizzas é pegar nossa referência de todas as pizzas, seu valor e redefini-la para uma matriz vazia antes de obtermos nossos novos documentos. Vamos tentar isso. Atualize a página. Aqui estão nossas três pizzas, remova qualquer uma delas, e agora tudo está funcionando corretamente. melhoria final que podemos fazer é adicionar uma mensagem de erro se houver um erro ou problema, excluir a pizza ou até mesmo obter as pizzas do banco de dados. Para isso, podemos criar uma nova referência de mensagem no arquivo all pizzas. Logo abaixo de todas as pizzas crie uma nova constante para armazenar nossa mensagem. Isso será uma referência e, por padrão, uma string vazia. Em seguida, dentro das pizzas, podemos adicionar um tratamento de erros com uma área de tentativa e captura. Vamos colocar isso no topo da seção de teste e pegar. O Catch detectará um erro. Em seguida, precisamos mover todo o nosso código dentro da seção de teste. Se você localizar o final dessa função, pegue tudo até all pizzas.value. Corte isso deixando apenas a área de tentativa e captura dentro daqui e, em seguida, dentro da seção de teste, cole isso de volta e esse é o código que você deseja executar e tentar ter sucesso. Mas se houver um erro, podemos entrar na área de captura e atualizar nossa mensagem. O message.value é igual a uma string e diremos que houve um erro ao buscar pizzas. Por favor, recarregue a página. Assim como fizemos com as pizzas, também podemos atualizar a mensagem e redefini-la para uma sequência vazia toda vez que a executamos. O message.value está de volta para uma string vazia. O mesmo acontece com nossa segunda função , que é excluir pizza. O try-block, o bloco catch, que absorve o erro, recorta o código existente, recorta e substitui, coloca isso no bloco try. Redefina a mensagem, é uma sequência vazia, e depois atualize a mensagem dentro do bloco de captura. É uma string, então, se você quiser, você também pode incluir a mensagem de erro, que retornaremos. Mas para nossa simplicidade, vou criar uma sequência que diz que houve um erro ao excluir a pizza. Então, por favor, tente novamente. Em seguida, para que possamos usar essa mensagem dentro de nossos componentes, podemos devolvê-la, voltar para os componentes pizzas.view, importá-la e, logo abaixo da seção do cabeçalho, criar um novo elemento p para exibir nossa mensagem dentro das chaves duplas. Adicione classe para definir o estilo do erro. O que também funcionará como medida temporária é também adicionar algum texto aqui. Qualquer texto está bom , só para que possamos adicionar um estilo e ver como fica sem ter uma mensagem de erro real. Até a seção de estilo, onde podemos adicionar um pouco de estilo a essa classe de erro. Em primeiro lugar, uma cor que terá um valor RGB de um a zero para o vermelho, 67 e 67, o que nos dará essa cor vermelha. Uma borda de um pixel, uma linha sólida arredonda os cantos com algum raio de borda e, em seguida, algum espaçamento interno e externo com preenchimento e margem. Preenchendo 1rem e também 1rem de margem na parte externa, salve, teste isso. É assim que nossa mensagem de erro será exibida dentro dos componentes, mas se removermos o texto e deixarmos isso como um elemento p vazio, posso ver aqui. remoção desse texto de erro ainda mostrará a borda vermelha porque o elemento p está sempre lá, independentemente de ter alguma mensagem interna ou não. Para remover isso, podemos adicionar uma instrução v If para mostrar apenas esses elementos se a mensagem existir. Se tivermos uma mensagem e seus elementos forem exibidos, caso contrário, ela será removida do dom e não veremos mais essa borda vermelha. 36. Criando pedidos: Para criar um pedido, segue um padrão semelhante ao de criar em uma nova pizza. Vamos entrar na cesta usada composable, que está dentro de uma pasta composable. Abra isso e primeiro precisamos importar duas coisas. A primeira coisa é que precisamos importar AddDoc do pacote Firestore, então este é do Firebase/Firestore. Em seguida, a referência à coleção real de pedidos, para a qual você deseja enviar isso, então vamos importá-la do nosso arquivo Firebase. O que precisamos fazer é importar essa referência de pedidos de banco de dados. Já temos o conteúdo da cesta dentro da matriz da cesta e isso é enviado quando adicionamos algo da seção do menu. À direita, aqui está a cesta. Agora precisamos criar uma nova função para adicionar a coleção mais antiga dentro do banco de dados. Logo abaixo dessa função aqui, volta à seta na parte inferior, isso realmente não importa. Isso será async, o nome da função de adicionar nova ordem e, em seguida, o que precisamos fazer internamente é agrupá-lo em um bloco try and catch para que ele possa lidar com quaisquer erros e transmitir o erro. A primeira coisa que precisamos considerar é que essa cesta na parte superior está atualmente armazenada como uma matriz. Mas o Firebase exige um objeto, então podemos usar o operador spread para mesclar os itens atuais em um objeto. Vamos entrar na seção de testes e reestruturaremos nosso pedido criando um novo objeto. A primeira propriedade a ser adicionada será chamada de createdAt, e isso acompanhará a ordem em que nossos pedidos são feitos e, portanto, podemos lidar com eles ou exibi-los na ordem correta no administrador. Mas isso apenas criará uma nova data de JavaScript, instale-a dentro do banco de dados. Então, como mencionado anteriormente, para pegar o conteúdo de nossa matriz , insira-o em nosso pedido para criar a propriedade de uma pizza, que por si só será um objeto no qual mesclaremos as propriedades de nossa cesta e, como essa é uma referência, precisamos acessar o valor logo após o pedido. Agora é aqui que vamos usar o método addDoc do Firestore para enviar para uma coleção específica. Uma coleção é nossa referência de pedidos de banco que acabamos de importar. Chame o método addDoc, que usa o primeiro parâmetro da referência de auditoria de banco de dados, que é uma referência à nossa coleção mais antiga e, em seguida, enviaremos essa ordem específica para essa coleção. Depois que isso for feito com sucesso, aguardaremos o término da operação e, em seguida, poderemos redefinir o valor da nossa cesta para uma matriz vazia. Isso removerá todas as pizzas da cesta, para que o usuário possa começar de novo. Isso é tudo o que precisamos agora para a seção de testes e manter o usuário atualizado Criaremos uma nova variável para conter uma mensagem. A mensagem padrão será algo como se sua cesta estivesse vazia, então podemos ver isso ou não temos pizzas no lado direito, então const basket text, enrole-o em um ref, com o texto da cesta vazio. Esse será o valor padrão e podemos atualizá-lo dependendo se o pedido foi adicionado com sucesso ou não, vá até a função. Vamos até a seção de testes e, na parte inferior, acessaremos a cesta text.value e atualizaremos isso para ser uma nova sequência de caracteres, algo como obrigado, seu pedido foi feito. Na outra seção, como vimos anteriormente, você também pode incorporar a mensagem de erro se quiser, mas para simplificar, vou atualizar o texto da cesta para ser uma nova sequência de caracteres, que será igual a um erro ao fazer seu pedido. Eu vou dizer, por favor, tente novamente. Podemos chamar isso de nossos componentes. Precisamos retornar nossa chamada de função e também precisamos retornar o texto da cesta que possamos exibi-lo dentro dos componentes. Conforme você solicita o texto da cesta e a cesta é exibida dentro da visualização do menu , acesse aqui e agora podemos importá-los do nosso material de composição. Aqui, já temos uma referência à nossa cesta de uso composta, que possamos pular entre colchetes e também importar o texto da cesta junto com a adição de um novo pedido. Vamos começar adicionando um novo pedido, que podemos acionar com nosso botão. Vá até a div da cesta e, na parte inferior, temos esse botão de fazer pedido, agora com um clique, que acionará nossa função. Agora, a etapa final é adicionar o texto da cesta e lembrar que, por padrão, ele diz que sua cesta está vazia, então não queremos exibir isso se eles já estiverem dentro da cesta e, para essa mesma renderização condicional, ajudará. Vamos pular até o topo da seção da cesta, logo abaixo do título. Vamos criar seções div que contenham isso e, por dentro, usaremos v-if, para adicionar nossa renderização condicional onde queremos verificar se o comprimento da cesta é maior que zero, ou seja, temos alguns itens dentro da cesta, então, se isso for verdade, cortaremos a seção div de fechamento e depois desceremos até o final, logo abaixo de nossos botões, faça o pedido, feche-a. Agora você pode ver se você entra na seção de cestas, não temos nenhum desses botões ou o total do pedido. Mas tudo isso criará um novo div, que é a seção v-else e essa seção só será exibida dentro do navegador se não houver itens dentro da cesta, que é o estado atual. Mas isso será colocado dentro dos colchetes duplos; na verdade, colocaremos um elemento p para começar. Vou colocar o texto da cesta e estamos vendo erros, vamos dar uma olhada no que é isso. Não temos v-if adjacente, então esta é a seção v-l e essa deve ser a v-if. Só temos essa seção div extra que podemos remover, verifique se está correta. Temos esse div, a tag de abertura, todo o conteúdo, a seção de fechamento, v-else. Também precisamos mover essa div de fechamento de antes tudo pareça bem. Agora, apenas certifique-se de que, após a seção v-l, tenhamos dois divs de fechamento adicionais, então livres em uma fileira. Em seguida, no topo do h3, o div e depois a tabela. Agora devemos ver dentro do navegador que o texto padrão da sua cesta está vazio, clique em qualquer item e agora o comprimento da cesta é maior que zero. Portanto, podemos exibir nossa tabela. Agora vamos adicionar mais alguns itens às nossas cestas e podemos testar clicando no botão “Fazer pedido” , isso parece bom. Temos a mensagem divertida, vá até o console do Firebase. Isso é Console.firebase.google.com. My Pizza Planet V3 no banco de dados. Agora temos a coleção mais antiga, criamos um ID de pedido, isso parece bom. Temos uma Margherita de 9 polegadas e duas de 12 polegadas. Vamos experimentar mais um Pepperoni e Margherita de 12 polegadas , faça seu pedido. Bom, tudo está funcionando corretamente e, em seguida, vamos buscar esses pedidos do banco de dados e exibi-los dentro do administrador. 37. Ordens de preenchimento: Agora podemos fazer pedidos com sucesso e adicioná-los ao nosso banco de dados. Agora temos a tarefa de recuperar esses pedidos do banco de dados para que possamos usá-los em nosso projeto e, em particular, na seção de administração. Anteriormente, criamos uma seção de pedidos atuais na parte inferior. Vamos recuperá-los do banco de dados, loop sobre eles e colocá-los dentro dessa tabela. Para manter as coisas organizadas, crie um novo material de composição dentro da pasta Composables. Este será chamado de useOrders. Como sempre, precisamos exportar uma função padrão, useOrders, e colocar o código dentro dela. Para começar, precisamos ter uma constante para armazenar todos os nossos pedidos. Vamos chamar isso de AllOrders. Também usaremos a referência que cercará nossa matriz. Inicializaremos isso como uma matriz vazia e, em seguida, precisaremos importar essa referência do pacote view. Também precisamos de uma função que recupere esses itens do banco de dados e os envie para nossa referência AllOrders. Criaremos uma nova função assíncrona, All getOrders. Poderíamos fazer algo semelhante ao que usamos no passado. Se dermos uma olhada, nosso composable, que foi UsePizzas. Dentro daqui, o que fizemos no passado recuperar nossos documentos com o GetDocs. Temos essa função chamada GetPizzas. Este é um pouco mais simples porque tudo o que fazemos deve chamar nosso método GetDocs e passar uma referência a todas as coleções de pizzas. Se quiséssemos, poderíamos fazer exatamente o mesmo passando uma referência aos nossos pedidos. Mas, para esse caso de uso, lembre-se de que, no vídeo anterior, também enviamos um novo pedido para o banco de dados, que incluía uma propriedade chamada createdAt. Quando recebemos as pizzas da coleção AllPizzas que não estavam em nenhuma ordem específica. É aqui que isso funciona um pouco diferente de AllPizzas. Queremos ter certeza de que estamos retirando os pedidos em um determinado pedido com base nos dados nos quais eles foram criados. Voltar para UseOrders. Para fazer isso, precisamos usar algo chamado consulta. Precisamos importar isso. Consulta de importação. Isso é do pacote firebase slash firestore. Do nosso arquivo firebase.js também será necessário importar essa referência para AllOrders. Agora, voltando à nossa função getOrders, vamos usar essa consulta que acabamos de importar. Consulta. O que precisamos fazer aqui é passá-lo em três coisas. A primeira é uma referência à nossa coleção, que é DBordersRef. Em seguida, também podemos passar parâmetros de pesquisa adicionais. No nosso caso, será OrderBy. Ordenar por. Esse também é um método firebase que ordenará o conteúdo que estamos retirando do nosso banco de dados por um campo específico. Se tudo o que pudermos usar isso, também precisamos importá-lo. Em seguida, inserimos o nome do campo pelo qual você deseja ordená-lo. No nosso caso, como podemos ver quando criamos um novo pedido, essa propriedade é chamada createdAt. Vamos pegar isso, colar isso e armazenar essa referência dentro de uma constante chamada queryData. De agora em diante, o que fazemos é bem parecido com quando recuperamos as pizzas. Precisamos fazer uso do GetDocs. Precisamos então passar por cima desses documentos e, em seguida, enviá-los para nossas constantes. Com isso em mente, copiaremos toda essa seção. Logo acima do bloco de captura, copiarão os colchetes. Esses são os colchetes para cada loop até nossos documentos. Copie isso, cole isso logo abaixo de nossos dados de consulta. Novamente, podemos usar muitos desses dados. Podemos manter esse nome constante. Podemos pesquisar nossos GetDocs. Tudo o que precisamos fazer, em vez de pesquisar diretamente por AllPizzas ou AllOrdersRef, passaremos nossos QueryData filtrados e, em seguida, examinaremos cada um desses documentos em vez de criar uma pizza e estruturaremos um novo pedido. O id pode ser acessado exatamente da mesma maneira, pois qualquer um desses documentos volta do Firebase com a mesma estrutura. Também podemos mesclar os dados do documento, que são todos os campos de AllOrder, como AllPizzas, e nossas datas de CreatedAt. A diferença final é essa linha aqui, em vez de empurrar para AllPizzas, enviamos para AllOrders. Vamos pressionar AllOrder em vez da pizza. Vamos testar isso antes de colocá-lo dentro de nossos componentes, logo abaixo de nossos colchetes de fechamento para loop, place em um log de console ou allOrders, sem valor. Mas esse log do console para realmente ser executado, precisamos importar esse composto para os componentes necessários. Essa será a visualização de pontos de AllOrders, que está dentro dos componentes. Em seguida, dentro da pasta admin, abra AllOrders. No momento, não temos um roteiro. Crie um script, configure importe nosso material de composição, que é useOrders. Em seguida, usando a estruturação, podemos importar nossos AllOrders, que não tenho certeza se realmente devolvemos, então daremos uma olhada nisso em apenas um segundo. Chame nossa função useOrders. Apenas volte. Precisamos devolver todos os pedidos para usar esse botão dentro de nossa função. Devolva todos os pedidos. Agora eles devem executar nosso log do console. Entre na seção de administração. Abra o console. Atualmente, não vemos nada aqui, pois não chamamos nossa função getOrders. O que faremos é simplesmente estragar nossa função é também importá-la ou montá-la. Executaremos nossa função chamada getOrders assim que esse componente for montado. Isso também precisa ser importado na parte superior. Também precisamos importar GetDocs do Firestore. Vamos tentar novamente. Abra o login do console no alvo, onde podemos ver que temos uma matriz com dois pedidos separados. Eles são estruturados exatamente como nós criamos. Dentro desse pedido, temos o id. Em seguida, mesclamos o restante dos dados do documento, que era o objeto pizzas e também o createdAt. Estamos quase terminando esse vídeo, a próxima coisa que faremos apenas para finalizar as coisas é agrupar nosso código em um bloco de tentativa e captura. Vá para a função getOrders. Obtenha o conteúdo completo do registro do console com o total de dados da consulta. Coloque, tente e também pegue. A captura ocorre por engano. Em seguida, cole o conteúdo dentro da seção de teste. Sabemos que isso está funcionando , então também podemos remover esse log do console. Vamos deixar esse aí. No próximo vídeo, continuaremos com nossos pedidos, os analisaremos e os colocaremos dentro da visualização do administrador. 38. Loop over pedidos: Agora sabemos que podemos recuperar com êxito os pedidos do Firebase e armazená-los dentro da nossa variável allOrders. Nós os importamos dentro do arquivo orders.view e podemos usá-los para fazer um loop e exibi-los dentro da tabela. Essa é a tabela que você vê dentro da visualização do administrador, na parte inferior. Assim como fizemos com as pizzas acima, podemos analisar todos esses dados e exibir os valores corretos. A primeira coisa dentro dos pedidos atuais que precisamos alterar esse valor codificado de cinco. Podemos obter o valor real com allOrders.length. Atualmente, sabemos que temos dois pedidos, então isso parece bom. Em seguida, tenha os cabeçalhos da tabela. Não precisamos repetir esta seção porque não queremos títulos duplicados, mas o que precisamos fazer é criar um loop para as duas linhas adicionais seguintes. A primeira linha com o número do pedido e a segunda linha com os detalhes da pizza. Para fazer isso, criaremos um invólucro adicional chamado template. Recorte essas duas linhas da tabela. Podemos passar um elemento chamado template, colá-los novamente e agora podemos usar esse modelo para adicionar o loop dois. O modelo adicionará um invólucro a esta seção, mas não adicionará nenhum HTML adicional, portanto, é efetivamente um invólucro invisível. Coloque em um loop com v-for, ordene em AllOrders. Precisamos de uma chave. Sabemos que temos uma chave exclusiva para cada pedido armazenada dentro do ID. Isso é order.id. Também podemos usar esse order.id em vez desse número de pedido. Em seguida, podemos acessar nossas informações de pizza que estão armazenadas nesta linha. Lembre-se de que, para cada pedido, não temos apenas uma única pizza, portanto, precisamos criar um loop adicional para passar por cada uma das pizzas dentro do nosso pedido. Por exemplo, atualmente estamos analisando esse primeiro pedido aqui. Em seguida, precisamos acessar orders.pizzas para acessar todos os valores internos e exibi-los como dados de tabela. v-for, e diremos encomendar o item em ordem. pedido é o OrderItem completo, que você tem desde o primeiro ciclo, mas queremos acessar as pizzas. Podemos ver se formos até o console e pularmos nas pizzas, não temos o ID da pizza armazenado para cada uma delas. Mas cada nome e tamanho de pizza também são únicos, então podemos criar uma chave a partir disso. Diremos o OrderItem.name. Veremos oderItem.size. Podemos acessar o OrderItem nas propriedades da pizza, como nome, tamanho, quantidade e preço. O primeiro é o nome, o segundo é o tamanho, então OrderItem.size, quantity. Depende de você como deseja lidar com esse preço para exibir dentro da tabela de administração. Se você quiser, você pode primeiro tentar gerar o OrderItem.price. Se entrarmos no administrador e depois atualizarmos, poderemos ver nossa estrutura. Temos o número do pedido, o nome da pizza, o tamanho, a quantidade e o preço serão exibidos como um preço único de uma pizza. Se você quisesse, assim como descrevemos aqui, onde dissemos que esse é o total. Vou multiplicar o preço pela quantidade. Vamos multiplicar com a estrela pelo OrderItem.Quantity. Agora esse é o total de cada uma dessas linhas. seguir, o que faremos é voltar a esses pedidos e veremos como podemos remover itens do nosso banco de dados usando essa cruz vermelha. 39. Excluindo pedidos: Em seguida, vamos nos concentrar em como excluir os pedidos. Se formos até o arquivo de composição usePizzas, isso usará o mesmo processo que usamos antes quando excluímos as pizzas. Tínhamos essa função chamada delete pizza, que pegava um id, apagava todas as mensagens de erro existentes, depois armazenávamos uma referência de documento acessando nossa coleção, e também o id. Chamamos um método chamado DeleteDoc que absorvia a pizza que acabamos de mencionar e, finalmente, chamamos GetPizzas, que incluía todas as outras pizzas que ainda estavam disponíveis. Então, para manter as coisas claras e simples, copiaremos toda essa função e, em seguida, entraremos no arquivo mais antigo de uso e o colaremos. Obviamente, precisamos fazer algumas pequenas alterações que chamaremos de ordem de exclusão. Novamente, isso ainda precisará ser passado um ID de pedido para ele. Também apagaremos qualquer mensagem existente. Essa será a ordem constante, será a DBordersRef e excluiremos esse pedido. getOrders e na chamada de função este deve corresponder ao que você tem logo acima aqui. Podemos então alterar a mensagem, houve um erro ao excluir o pedido. Então, isso também precisará de alguma importação adicional, precisamos extrair nosso documento. Precisamos extrair o DeleteDoc e também criar essa mensagem, então vamos começar com nossas importações e, a partir do Firestore, precisamos referenciar nosso documento e também excluir o documento. Como estamos lidando com nossos pedidos, já temos o impulso de pedidos aqui, então está tudo bem. Então, temos a mensagem. Precisamos então criar isso como uma referência, mensagem const é igual a uma ref, que inicialmente definiremos como uma string vazia. Já temos isso importado, então está tudo bem. Em seguida, precisamos retornar alguns valores desse composto para a seção de retorno. Voltaremos, eu excluiria todo o método e também a mensagem a ser exibida dentro dos componentes. Em seguida, vamos até nossos componentes para a pasta de administração e para os pedidos, o orders.view, onde podemos então criar algumas importações. Já estamos importando nosso arquivo de pedidos de uso, então podemos desestruturar, excluir o pedido e também nossa mensagem. Em primeiro lugar, chamaremos o pedido de exclusão se dermos uma olhada na seção de administração e depois descermos. Então, todos nós lembramos que cada um desses números de pedido tem essa pequena cruz, que é um botão, e isso chamará nosso método, para qual podemos passar o ID do pedido. Este é o botão que está aqui. A classe de btn remove. Agora ouvimos um clique, o que chamaremos de excluir pedido, e a exclusão do pedido receberá o ID do pedido, que passaremos para essa função. Precisarei pegar isso do nosso circuito para que possamos pedir o ID que você já usou. Podemos simplesmente colocar isso dentro dos colchetes, e isso será passado para nossa função. Vamos tentar isso. Para o projeto. Atualmente, temos apenas dois pedidos aqui. Vamos tentar remover este. Vemos que isso sobe para três pedidos agora, mas precisamos atualizar no momento para ver as atualizações. Mas tudo bem por enquanto. Voltaremos a isso no futuro e melhoraremos isso adicionando nossa funcionalidade em tempo real do nosso banco de dados. Isso significa que, assim que qualquer alteração no banco de dados ocorrer, nosso aplicativo será atualizado com os novos valores. Por fim, lembre-se de que também importamos essa mensagem na parte superior. O que podemos fazer é exibir isso logo abaixo nosso cabeçalho dentro do elemento P. Não só precisamos enviar a mensagem aqui, mas também precisamos adicionar alguma renderização condicional. Não queremos que essa mensagem seja sempre exibida ou ocupe o espaço que ocupa atualmente. Se dermos uma olhada, removermos isso e salvarmos, você poderá ver se comentarmos isso e clicarmos em “Salvar”. Esta seção ocupará algum espaço, Esta seção ocupará algum espaço independentemente de haver uma mensagem ou não. Então, o que faremos para mostrar isso apenas se houver uma mensagem, colocando a seção v if para mostrar apenas se há uma mensagem no local e, para estilizar, também adicionaremos a classe de erro. 40. Mostrar e ocultar blocos de administrador: Na visão do administrador, pode parecer bom no momento , mas imagine se nosso aplicativo fosse muito maior e tivéssemos muito mais pizzas no menu ou muitos pedidos. Essa página pode ficar muito longa. Para ajudar com isso, o que vamos fazer agora é mostrar e ocultar cada uma dessas seções. Isso torna a página muito menor e não precisamos ler todas essas informações. Para isso, o que vamos fazer é criar uma variável local em cada um desses componentes administrativos gratuitos, que então será alternada com o texto de mostrar e ocultar. Para começar, pule para a barra lateral. Os componentes, o administrador e a nova pizza. Bem, criaremos uma nova constante local chamada show NewPizza. Defina isso igual a ref e configure nossa ref, que será igual ao valor de true. Exibiremos isso por padrão. Isso ficará visível dentro do administrador e, quando o usuário clicar nele, isso será alterado para falso. Faremos isso dentro de nossos modelos e na seção de cabeçalho logo abaixo do título, dentro dos pequenos elementos. Aqui dentro, queremos mostrar o texto de mostrar ou ocultar. Também podemos renderizar condicionalmente essa seção dentro dos colchetes duplos. O que podemos fazer é dizer que se show newPizza é igual a dois, exibimos o texto de ocultar. Se não for, diremos show. Atualmente, isso está definido como verdadeiro, então veremos o texto de ocultar na parte superior. Podemos adicionar a classe ToggleBtn. Ouça um clique quando eu clico. Tudo o que queremos fazer aqui é pesquisar se sua NewPizza é igual ao oposto do valor atual . Vamos experimentar isso. Clique em ocultar. Isso agora será ativado e, em seguida, podemos usar nossa variável show NewPizza para mostrar e ocultar esta seção completa. A seção que queremos mostrar e ocultar é o formulário. Ainda podemos manter a cabeça no lugar, que tem o botão e também o título. Dentro do formulário, adicione v-show, que só mostrará esses conteúdos se o valor de show newPizza for igual a dois. No momento, não está voltando. Vamos tentar atualizar. Isso parece funcionar bem. Não tenho certeza do que aconteceu lá. Agora podemos replicar essa seção nos pedidos e também no menu. Vamos começar com as ordens. Importe nossa visualização de referência. Crie uma variável local. Este pode ser usado para mostrar pedidos. O valor inicial de true. Na verdade, o que faremos aqui é copiar a seção NewPizza que criamos, então a pequena seção completa. Traga isso para que seja consistente. Coloque isso logo abaixo de nossos pedidos atuais, título de nível 3, dessa mesma classe. Desta vez, tudo o que quero fazer é mudar isso para que sejam mostrados pedidos. Altere isso em todas as outras seções. Em seguida, queremos mostrar e nos esconder. Nossa tabela seria mostrada igual a mostrar pedidos. Vamos tentar. Ele pode se esconder. Isso desapareceu. Em seguida, o show revela esta seção. Finalmente, a seção do menu, que está nas pizzas ou no restaurante. Também precisamos importar ref vue. Nossa variável local chamada showMenu, o valor inicial de true, e, como antes, abaixo do título de Nível 3, precisamos copiar novamente essa pequena seção, colá-la e substituir todas as nossas variáveis por showMenu. Por fim, adicione v-show à nossa tabela. Vamos experimentar isso. O menu, ocultar e mostrar. Apenas como um toque final rápido. Se passarmos o mouse sobre esse botão, podemos alternar isso para ser um ponteiro. Temos uma classe de ToggleBtn para cada uma dessas seções. Como usamos isso em vários componentes, acesse nossos ativos e a classe main.css de ToggleBtn. Vamos definir o cursor para ser um ponteiro. Lá vamos nós. Isso agora funciona para todas as nossas três seções. 41. A função de inscrição: Este projeto usará a autenticação do Firebase para gerenciar contas de usuários e permitir que eles se inscrevam e façam login. Se entrarmos no console do Firebase e na seção de visão geral do projeto, você verá logo abaixo que temos nossa autenticação e nossa configuração de atalho do Firestore Database. Isso ocorre porque, nos primeiros vídeos, já os habilitamos em nosso projeto. Mas se você não tem a autenticação configurada no momento, tudo o que você precisa fazer é ir até a seção de todos os produtos e adicioná-la com esse link de autenticação. Como o meu já está habilitado, vou voltar ao projeto para configurar isso. Vamos manter as coisas organizadas. Vamos criar uma nova composição dentro da pasta Composables, um novo arquivo. Esse vai ser o useAuth.js. Então, como acontece com todos os outros componentes, vamos exportar uma função padrão. Este é UseAuth. Em seguida, adicionaremos uma declaração de devolução na parte inferior antes que esqueçamos. Como atualmente não temos nenhum usuário em nosso projeto, faria sentido que a primeira função que adicionamos fosse criar um novo usuário. Para isso, precisamos importar algumas funções do pacote de autenticação Firestore Firebase. Acima de nossa função, faremos essas importações agora. O que precisamos importar é algo chamado GetAuth. Além disso, para criar um novo usuário, precisamos importar um método chamado criar usuário com e-mail e senha. Tudo isso é estojo de camelo. Depois da primeira palavra, certifique-se de que cada palavra seguinte comece com uma letra maiúscula. Vamos importar isso do Firebase/Auth. Em seguida, usaremos essa importação do GetAuth, que inicializará a autenticação do Firebase. Em seguida, começaremos a referenciar isso dentro de uma variável. Entre em nossa função. Chame essa autenticação, que é igual a getAuth. Como esse é o nosso método, precisamos chamá-lo com os colchetes, a próxima função de autenticação, que criará um novo usuário. Isso será assíncrono chamado inscrição. Quando nos inscrevemos, já que estamos criando um usuário com e-mail e senha, também precisamos de passes para essa função quando a chamamos. breve, veremos como fazer isso dentro do corpo da função ou do tratamento de erros. Crie uma área de tentativa e captura, transmitindo o erro. Então, dentro da seção de teste chamaremos a função de criação de usuário com e-mail e senha, que acabamos de importar. Vamos aguardar o valor de retorno. Crie usuário com e-mail e senha. Isso vai incluir três coisas distintas. A primeira é uma referência à corrente da instância, que é a que configuramos na parte superior. Ele também precisa incluir o e-mail e a senha. Aqui estamos. Além disso, para armazenar qualquer mensagem de erro, podemos criar uma nova variável reativa. Para isso, primeiro precisamos importar ref da visualização e criar nossa constante logo abaixo dentro da função chamada errorMessage. Em seguida, configure nossa referência, que inicialmente será uma string vazia. Aí estamos nós. Se esta seção agora for bem-sucedida, se a área de teste estiver funcionando bem, poderemos então apagar todas as mensagens existentes. Vamos redefinir o errorMessage.value para voltar a uma string vazia. Então, dentro da seção de erro, também podemos atualizar essa mensagem de erro. Se estivermos fazendo algo como inscrever um usuário, não queremos apenas enviar de volta uma mensagem de erro genérica, como “houve um erro, houve um problema ao fazer login ” ou algo parecido. Faria sentido ser um pouco mais descritivo sobre qual é o erro. Eles podem não digitar uma senha longa o suficiente, ela pode não ter os caracteres corretos, o e-mail pode já estar em uso. Para isso, precisamos acessar nosso erro, que é passado para a área de captura. Temos uma propriedade chamada código. Esse código é uma sequência de texto que é igual a uma mensagem de erro, e dois códigos comuns fornecidos pelo Firebase são uma string chamada auth/email já em uso. Parece assim. É autenticação/e-mail já em uso, com traços entre cada uma dessas palavras. Além disso, outra ferramenta útil é auth/weak-password. Essas serão mensagens úteis para serem repassadas ao usuário. Mas primeiro, precisamos ter certeza de que podemos detectar qual delas está sendo gerada dentro do nosso erro. Podemos colocar isso em uma declaração if-else, podemos colocar em uma instrução switch, o que você preferir. Eu vou escolher o switch. Podemos acrescentar isso posteriormente, se quisermos acessar o erro, que é passado para nosso objeto catch, então podemos acessar o código. Então, podemos começar a criar nossos casos individuais. O primeiro, vamos verificar essa string aqui. Cole isso. Se isso for verdade, se for uma correspondência, queremos definir o ErrorMessage.value. Para ser um pouco mais descritivo, diremos que já existe um usuário com esse e-mail, faça o login. Se isso for verdade, podemos então romper essas declarações de troca. Não precisamos ir mais longe em outro código. A segunda caixa é igual à nossa segunda string, que tínhamos aqui embaixo. Vamos mover isso. Cole isso como nosso estojo. Se o usuário digitar uma senha fraca, será um ErrorMessage.value. Atualizaremos essa variável para dizer que a senha deve ter pelo menos seis caracteres. Em seguida, resolvemos isso se isso for verdade. Finalmente, com a instrução switch, também devemos adicionar uma mensagem padrão na parte inferior. Isso é para que, se algum dos casos acima não corresponder, volte para a seção padrão, que atualizará novamente o ErrorMessage.value. Este pode ser um pouco mais genérico. Vamos dizer, desculpe, houve um erro inesperado. Isso é tudo o que precisamos em nossa função de inscrição por enquanto. A última coisa a fazer é retornar nossa função de inscrição e também nossa mensagem de erro. Ambos agora estarão disponíveis para chamada a partir de nossos componentes. Faremos isso a seguir quando criarmos o formulário de login. 42. Criando o formulário de inscrição: Ótimo, com nossa funcionalidade de inscrição funcionando agora, também precisamos de um formulário para capturar as informações do usuário. Para isso, esse formulário terá dupla finalidade. Isso permitirá que o usuário faça login e também se inscreva para criar um novo usuário. Para isso, vamos pular para nossa barra lateral e podemos criar nossos novos componentes. Entre nos componentes, e este é SignIn.vue. Primeiro, criaremos a seção de script que fará uso da configuração. Na parte superior, importaremos nosso uso do composable, que criamos no vídeo anterior e definiremos isso como @, que é a raiz de nossa fonte, composable useAuth. Pegue nossas variáveis que exportamos na primeira é inscrever-se. Também precisamos da nossa mensagem de erro. Pegue-os da função UseAuth acima. Isso só precisa ser de, lá vamos nós. Também é uma variável de dados do formulário para armazenar o e-mail e a senha digitados pelo usuário. Vamos vincular isso ao nosso formulário usando v-bind. Esse é chamado de dados do usuário. Também precisaremos importar a referência do pacote vue. Configure isso como um objeto, que simplesmente conterá o e-mail e também a senha. Por padrão, ambos estarão vazios pois o usuário não inseriu nenhum valor. Em seguida, importe nosso ref do vue. Vá até a área do modelo para criar o formulário. Como este será um modal pop-up para que possamos mostrar e ocultar usando CSS, precisamos criar alguns wrappers para habilitar isso. O primeiro será um div com a classe modal, que é o invólucro principal. Então, o aninhado interno também criará um segundo div com a classe modal_content. Esse modal será alternado dentro do cabeçalho. O que faremos em breve é criar dentro do cabeçalho um link na parte superior, que então exibirá nosso modal de todos esses conteúdos. Então, dentro do modal, também queremos criar uma pequena cruz no canto, que fechará esse modelo. O fechamento será um intervalo e a classe para nosso estilo de close_modal. O fechamento será uma entidade HTML, que é o e comercial, o hash. Em seguida, 10060 e um ponto e vírgula. Um elemento p abaixo, este será para o texto, então faça o login para continuar. Adicione uma classe para nosso estilo de modal_text. Em seguida, criaremos um formulário para o usuário fazer login. Não precisamos de uma ação, vamos lidar com isso no futuro, sim. Tudo o que precisamos aqui é uma entrada para nosso e-mail, uma entrada para a senha. Além disso, vamos criar dois botões. Vamos começar com nossa seção de e-mail, que será um div como uma classe wrapper de form_group. A etiqueta do formulário do endereço de e-mail. A entrada para este, como se trata de um e-mail, forneceremos o tipo de e-mail, o ID do e-mail, o texto do espaço reservado para inserir e-mail. Então, também podemos usar o modelo v para vincular o valor dessa entrada aos dados do usuário logo acima. Precisamos acessar UserData.email. Aí estamos nós. Essas entradas também têm o ID do e-mail. Podemos vincular isso à nossa etiqueta e depois copiar nossa seção div. Este é para a senha. Cole-o logo abaixo. O rótulo da senha e da entrada, o tipo desta também é senha, o ID é o mesmo. O espaço reservado para inserir a senha. Isso precisa vinculá-lo a UserData.password. Em seguida, nossos dois botões na parte inferior, logo abaixo do nosso div. O primeiro é o login. Coloque em um botão com o tipo de botão, o texto do login. Duplique isso ou copie e cole. Agora, o que precisamos fazer é alterar esse texto para nos inscrevermos. Posteriormente, isso dará ao usuário a opção de fazer login ou se inscrever usando o mesmo formulário modal. Aí estamos nós. Criamos novos componentes modais de login. Para ver isso, precisamos importá-lo exatamente para onde queremos em nosso projeto. Como mencionado anteriormente, isso estará dentro do cabeçalho para que possamos ver o texto na parte superior. Vamos para o cabeçalho até a seção de script. Na verdade, não temos um script, então vamos criar isso agora. Configuração do script. Vamos importar nossos componentes, que é o login. O caminho do arquivo, já que estamos dentro dos componentes, é simples. /signIn.vue. Em seguida, coloque os componentes na parte superior da seção do cabeçalho. Você pode estar se perguntando por que adicionamos um formulário de login nessa área de cabeçalho, mas isso ficará mais claro em breve. Mas, colocando isso dentro do cabeçalho por enquanto, manteremos esse grupo junto com os botões de login e inscrição, que serão exibidos na parte superior do cabeçalho em breve. Clicaremos em um botão, isso abrirá o formulário e poderemos fechá-lo com essa cruz na parte superior. Além disso, parece um pouco confuso no momento, mas vamos corrigir isso mais tarde com nosso estilo. Por enquanto, vamos nos concentrar no formulário e em inscrever um usuário. Volte para os componentes de login que acabamos de criar. Como criamos a função de inscrição dentro do nosso material de composição, trabalharemos com esse botão de inscrição na parte inferior e o vincularemos à função com um ouvinte de cliques. Podemos evitar o comportamento padrão, que é atualizar a página, chamar nossa função de inscrição, que receberá o e-mail e a senha conforme configuramos dentro do nosso redimensionável. Ambos estão disponíveis dentro do script. Temos o UserData.email e a senha. Vamos passar esses dois valores. Primeiro é o UserData.email, depois o UserData.password. Deve ser tudo o que precisamos para a função de inscrição. Lembre-se de que também importamos a mensagem de erro. Vamos exibir isso logo abaixo nossos elementos p com o texto de Faça login para continuar. Coloque-o dentro de um espaço com a classe error_message. Dentro das chaves duplas, passe nossa mensagem de erro. Fizemos um bom trabalho lá. Espero que tudo isso funcione. Vamos direto ao projeto, nos dá uma chance. Criaremos um novo usuário para continuar. É um pouco difícil de ver, mas vamos corrigir isso no CSS muito em breve. Insira um endereço de e-mail e também uma senha. Veja só, se eu passar o mouse, clique no botão “Inscrever-se”. No momento, não recebemos nenhum feedback, então atualmente não temos uma mensagem de erro que seja um bom sinal. Também fecharemos este formulário automaticamente após fazer login e se inscrever. Mas, por enquanto, volte para o console para a seção de autenticação, mas devemos ver o usuário, que acabaria de se inscrever. 43. Estilo moderno: [HISTÓRICO] Atualmente, temos esse modal não muito bonito que tem os componentes de login. No sign-in.view, podemos começar a adicionar alguns estilos segmentando todas essas classes. A div principal que envolve todo o modal tem essa classe de modal. Em seguida, temos o conteúdo modal que está contido em seu interior. Agora eles podem ser usados para estilizar nosso modal e também fazer com que ele apareça no resto do conteúdo. Saltamos até o final, criamos a seção de estilo, que será delimitada por esse componente. Como vimos, o invólucro principal que envolve toda essa div tem a classe de modal. O que vamos fazer aqui é direcionar esse modal, que é o invólucro completo. Vamos esticar esse invólucro para ter toda a largura e a altura total da página. Em seguida, podemos definir uma cor de fundo mais escura não possamos ver tanto o conteúdo por trás. Em seguida, na próxima div, que está aninhada em seu interior, que é o conteúdo modal. Isso será um pouco menor. Ele também terá uma cor de fundo branca para se destacar em todo o conteúdo por trás. Primeiro, a seção modal. O modal terá uma posição fixa e tudo se destacará acima de todo o resto do conteúdo pelo índice [inaudível] por ser um número alto, como 999. Isso garantirá que esse plano de fundo completo apareça em todo o conteúdo existente. Para destacar esse modal, também precisamos definir a largura para 100vw. A largura total da janela de visualização. A altura, 100vh, que é 100% da altura da janela de visualização. O fundo, isso seria uma cor RGBA. O que faremos com o vermelho, o verde e o azul é definir isso como zero, que é a cor preta escura. Vamos definir a opacidade como 0,9. É um pouco transparente. Esse é o efeito que estamos buscando. É a cor de fundo mais escura que é ligeiramente transparente. Também podemos posicioná-lo no canto superior esquerdo, que não tenhamos essa lacuna na parte superior. Também podemos usar o flexbox para centralizar todo o conteúdo. Em primeiro lugar, o topo é zero. Faremos o mesmo com a esquerda. Certifique-se de que não temos lacunas ao redor da borda. O tipo de exibição flexível. Em seguida, garantiremos que todo o conteúdo esteja alinhado vertical e horizontalmente definindo a propriedade justify-content como central. Também é o mesmo para alinhar itens. Agora deve ser tudo o que precisamos. Temos esse modal agora no centro. Todo o conteúdo no centro será colocado em um fundo branco para que fique mais visível. Isso tem uma classe se voltarmos ao conteúdo modal. Selecione isso, o fundo pode ser de qualquer cor que você quiser. Vou usar fumaça branca. Também precisa de um pouco de espaçamento, acolchoamento. Definiremos a largura, definiremos o raio da borda e também centralizaremos todo o conteúdo usando o flexbox. Definiremos a propriedade de largura como 80vw. Lembre-se de estofamento em todos os lados para dar a isso algum espaçamento interno , um pequeno raio de borda. Digamos que três pixels. Além disso, definiremos o tipo de exibição como flexível. A razão pela qual vamos fazer isso é porque vamos definir, se voltarmos ao topo, vamos usar essa caixa flexível, principalmente por causa desse botão modal fechado. Queremos que isso esteja à direita e também no texto que está logo abaixo. Mas voltaremos a isso em apenas um momento. Mas agora precisamos que a direção flexível esteja em uma coluna, que redefinirá o conteúdo para vertical. A cor e o valor RGB de 76, 76, 76. Você também pode ver neste texto que herdamos essa sombra tecnológica. Podemos substituir essa forma para a propriedade text-shadow definindo isso como não. Agora vamos passar para nossos botões. Podemos selecionar o conteúdo modal. Dentro daqui, temos nossos dois botões. Poderíamos adicionar um cluster individual, cada um deles se você quisesse, ou, em vez disso, poderíamos usar CSS para selecionar o conteúdo modal e o botão a seguir, que é o primeiro do tipo. Isso selecionará o primeiro botão dentro do nosso conteúdo modal, que é nosso login. Podemos usar esses dois espaços com alguma margem à direita. Também faremos com que isso pareça um pouco diferente definindo a cor de fundo como um valor RGB de 163, 204, 163. Como você pode ver, isso selecionou a primeira ocorrência desse botão. Definimos a cor do plano de fundo e também adicionamos algum espaço no lado direito. Em seguida, para o estado de flutuação, adicionaremos uma pequena transformação a isso. Novamente, pegaremos o conteúdo modal selecionaremos todos os botões internos. Só aplique isso quando o mouse estiver sobre ele. Transformar. Faça isso um pouco maior. Podemos fazer uso da escala. O valor de escala de um é exatamente o que é atualmente. Para torná-lo um pouco maior, podemos definir isso como 1,03, proporcionando uma boa transformação o mouse sobre cada um desses botões. Em seguida, vamos subir para o topo, onde temos essa seção modal fechada. Este é o espaço que acabamos de ter aqui. Lembre-se de que definimos o conteúdo modal para usar o flexbox. Portanto, como o modal fechado é um elemento filho disso, podemos então usar certas propriedades flexíveis. Para fazer isso, pule até o fundo, pegue todo o modal próximo. A propriedade flex de align-self e o valor de flex-end. O que isso fará, isso só se aplicará a esse elemento atual. À esquerda, esta será a partida flexível. À direita está a extremidade flexível. Somos apenas um botão e podemos definir o cursor um ponteiro. Isso agora está feito. O que sobrou? Nós temos o texto. Só aqui, podemos colocar isso no centro. Este, se dermos uma olhada, tem a classe de texto sublinhado modal, pegue isso, defina align-self como igual ao centro. Agora, ele mantém nossos textos no centro da página. Vamos reduzir isso. A largura desta seção é adequada para a visualização móvel. Mas se estendermos isso para a visão mais ampla que vimos, provavelmente queremos que esse modal seja um pouco mais estreito. Vamos começar com uma consulta de mídia, e podemos fazer isso @media e só aplicaremos isso quando o tamanho da tela for de 900 pixels ou mais. Selecione o conteúdo modal. Eu vou para, defina isso para 40vw. Vamos tentar isso abaixo de 900 pixels. Então, mais de 900 pixels reduziriam o tamanho. Quase pronto, a última coisa que precisamos cuidar é esse intervalo com a classe da mensagem de erro. Para isso, vou simplesmente adicionar um texto de amostra. Nós podemos ver isso. Defina a cor como vermelha e também algum espaço fora da consulta de mídia. Pegue nossa mensagem de erro. A cor de 255, 104, 104. Essa é a cor vermelha e também precisa de um pouco de espaçamento à esquerda. Vamos adicionar alguma margem apenas à esquerda. Isso parece muito bom. Agora podemos simplesmente voltar para a mensagem de erro. Eu removo o conteúdo de amostra daqui. Aqui estamos. Agora, esse é o nosso estilo finalizado para o modal. A seguir, veremos como podemos fechar esse modal ao clicarmos nesse X. 44. Alternar modal: Esse modal agora parece muito melhor. Também precisaremos de uma maneira de abri-la e fechá-la. Para isso, vamos passar para o nosso material de composição, que é o useAuth.js. Então, dentro daqui, criaremos uma nova variável que manterá o estado aberto atual. Esse será um valor booleano, que configuraremos para ser um valor inicial falso. Isso será chamado de SignInModalOpen, será encapsulado dentro de uma referência e o valor inicial de false e, em seguida, criará uma nova função que alternará isso para verdadeiro ou falso. Função ToggleModal. Tudo o que precisamos fazer aqui é pegar nosso nome de variável, que é SignInModalOpen, definir o valor para ser igual ao oposto com o ponto de exclamação, então signInModalOpen.value. Se isso for falso, isso retornará isso como verdadeiro e, se for verdade, isso definirá isso como o oposto, o que é falso. Retorne os dois desse arquivo para o SignInModalOpen, ToggleModal e, em seguida, pule para um componente que está conectado. Preciso importar os dois de UseAuth ToggleModal e SignInModalOpen. A constante SignInModalOpen controlará se o usuário pode ver esse formulário, então precisamos adicioná-lo ao nosso invólucro dentro desse div com a classe de instruções modal at v if, que é igual a esse valor. Agora, se salvarmos isso, porque o valor inicial é falso, isso agora é removido. Então, de volta ao nosso modelo, onde temos esse intervalo, que é fechar o modal. Podemos ouvir com um clique, o que acionará nossa função chamada ToggleModal. Como sabemos o que essa constante SignInModalOpen está definida o valor inicial de false, para realmente ver esse modal, precisamos criar um botão, o que mudará isso para verdadeiro. O problema que temos atualmente, porém, é que todo esse conteúdo dentro do modal está oculto por padrão. Portanto, para realmente ver esse botão, precisamos criar um botão fora dessa div principal com o texto do login. Isso também precisa ser ouvido por um clique, que vai para ToggleModal. O estilo da classe sign_in_btn. Salve isso e agora podemos experimentar isso dentro do navegador. Aí está o nosso botão de login. Clique aqui. Agora, isso fará com que isso seja verdadeiro, mostrando, portanto, o modal. Clique na cruz, que então ocultará isso da vista. Só para finalizar, vamos mover esse botão para o canto superior direito e também podemos remover essa borda. Essa é a parte inferior da nossa seção de estilo. Vamos pegar nosso botão de login, então sign_in_btn, tudo separado por sublinhados. Remova a borda com o valor de none. Então, usando o flexbox, podemos fazer uso de uma linha self. Definimos isso para ser flex-end. Agora empurre isso para o lado direito. Para tornar isso mais visível, podemos substituir a cor herdando essa cor mais clara de nossos pais. Por fim, também acessaremos nosso botão de login com o estado do mouse e faremos uma pequena mudança de cor. rgb 161,132, 132. Vamos ver como isso fica. Aí estamos nós. Agora nosso modal alternará entre aberto e fechado, o que está funcionando muito bem. As próximas etapas serão realmente fazer o login do usuário e também desconectá-lo. 45. Entrando e saindo: Nosso formulário de login foi projetado para ser de dupla finalidade. Já o usamos para conectar novos usuários, mas a seguir também o usaremos para fazer login em mas a seguir também o usaremos para fazer login qualquer usuário existente e manter as coisas organizadas e organizadas. Colocaremos essa função de login dentro do nosso uso do composable. Em seguida, em uso desativado, temos nossa função SignUp , então também vamos adicionar a ela uma função de login. Antes de fazer isso, também podemos importar um método do Firebase. Antes tínhamos que criar um usuário com e-mail e senha, mas agora o que precisamos é fazer login com e-mail e senha. Certifique-se de que tudo esteja em maiúscula para que cada palavra comece com uma letra maiúscula após a primeira. Isso será responsável por fazer login em qualquer usuário existente. Vamos criar uma função da qual chamaremos isso internamente. Quando o usuário clica no botão “Sign-In” dentro deste modelo. Muito do código será semelhante à função de inscrição, temos o bloco try-catch, chamaremos nosso método específico do Firebase e também precisaremos lidar com qualquer mensagem de erro. O que faremos é copiar toda essa seção de inscrição, vou usar isso como ponto de partida. Cole isso logo abaixo. A função, vamos chamá-la de login. Em vez de criar usuário, alteraremos isso para fazer login. Faça login com e-mail e senha e, seguida, apagaremos qualquer mensagem de erro, o que é bom. Depois de fazer login, também queremos fechar esse modelo, então clicaremos em “Abrir”. Vamos inserir nossos detalhes. Se o processo de login for bom, clicaremos nele e, em seguida, ele será encerrado. Podemos fazer isso definindo o modal de login aberto como igual a falso. modal aberto de login é algo que já configuramos na parte superior e isso controla a visibilidade do modal. De volta à nossa função e descemos para a área de captura. Não precisamos do primeiro caso de e-mail já em uso porque, se fizermos login, no usuário, o e-mail já deverá estar registrado. O que faremos é pegar a mensagem da senha errada. Assim como na função de login, todas essas mensagens são retornadas do Firebase. Para esta, diremos que a senha está incorreta. O número 2 é usuário não encontrado. Diremos que nenhum usuário foi encontrado com esse e-mail. Vou manter a mensagem padrão se houver algum outro erro. Pouco antes de chamarmos a seção de testes, colocaremos declarações condicionais. Na verdade, vamos colocar em dois e verificaremos se não há e-mail ou senha. Se algum deles estiver faltando, sairemos dessa função e enviaremos uma mensagem de volta ao usuário. Se não houver e-mail, retornaremos uma declaração com a mensagem de erro. Esse valor. É igual a inserir um e-mail válido? Duplique isso. O segundo testará se a senha não está presente. Por favor, insira uma senha válida. Isso apenas interromperá um método desnecessário chamado Firebase se não tivermos todas as informações de que precisamos. Agora teremos a função de criar um novo usuário, para também fazer login em um usuário existente. Em seguida, vamos nos concentrar em desconectar um usuário. Para isso, o Firebase fornece um método chamado sign-out. Importe isso. Em seguida, também criaremos uma nova função, que chamará isso. Apenas um botão acima de nossos extratos de devolução. Crie uma função chamada logout. Chamaremos nosso método de inscrição, que também usa o objeto de desativação para que saibamos qual usuário sair. Na verdade, também vamos colocar isso em uma área de teste e captura para que tenhamos algum tratamento de erros. Os locais na seção de teste detectarão quaisquer erros e enviarão uma mensagem de erro ao usuário com o valor igual a error.message. Ele acessará o objeto de erro que é passado para a área de captura e, em seguida, acessará a propriedade da mensagem. Essas duas novas funções também precisam ser retornadas. O primeiro é fazer login e depois sair. Ambos precisam ser acessados dentro dos componentes de login. Adicione a isso, componentes, signin.vue. Importe-os na parte superior, então faça login e saia. A função de login, precisamos colocá-la dentro do formulário, vamos vinculá-la ao botão de login. A inscrição já está sendo chamada. Temos o login logo acima. Ouvimos o clique com este, evitamos qualquer comportamento padrão e chamaremos o login. E então, assim como na função de inscrição, também precisamos passar o e-mail e a senha que armazenamos no objeto de dados do usuário na parte superior, que está aqui. E isso está vinculado à nossa forma de insumos. Então, o e-mail, a senha, clicaremos em “Entrar”. Nossa função será então chamada de passe no e-mail e também na senha. Mas e a função de desconexão? De onde vamos chamar isso? Bem, atualmente não temos nenhum botão de saída dentro do modal ou também dentro do cabeçalho. Mas temos o botão de login no canto. Será bom alternar o texto aqui e dizer login apenas quando o usuário estiver realmente desconectado. E também o contrário, quando precisamos usá-lo para sair. Então, vamos fazer isso na parte superior do modelo, volta aos componentes de login e, até o topo do modelo, temos o botão Entrar. Vamos duplicar isso. Eu clico, digo sair, altero o texto para ser desconectado. Voltaremos a esses botões em breve e mostraremos apenas um deles por vez. Mas agora podemos ver nossos botões de login e saída na parte superior. Mas antes de testarmos isso, como podemos saber se estamos logados em primeiro lugar? Bem, uma maneira é fazer com que o objeto do usuário retorne para nós depois de chamarmos a função de login. Se voltarmos ao uso do composable, a maneira de acessá-lo dentro de nossa função de login é armazenando o valor de retorno do método de login com e-mail e senha. Vimos que isso está dentro de uma constante chamada usuário e, logo abaixo, podemos testar isso com um log do console. Coloque o usuário no navegador e abra as ferramentas do desenvolvedor. Entre no console, faça login e digite o e-mail com o qual você se inscreveu. Desta vez, clicaremos em Login. Vemos um erro. Desculpe, foi um erro inesperado, mas parece que estamos recuperando as credenciais do usuário. Vamos dar uma olhada. Temos o usuário, temos o e-mail, o token de acesso. Tudo parece estar bem, mas ainda estamos recebendo uma mensagem de erro aqui. Então, vamos dar uma olhada. Essa é a mensagem dentro das instruções do switch. Vamos fazer uma pequena depuração dentro do local da seção padrão em um log do console. E aqui exibiremos o objeto de erro completo e veremos se podemos ter uma ideia melhor do que está acontecendo. Faça login novamente. Faça login. Então, recebemos o erro, temos as credenciais do usuário e aí está o nosso erro. atribuições são constantes dentro do uso de so sign in modal open. Esse é o problema. Isso precisa ser.value. Vamos tentar isso mais uma vez. Fazemos a atualização para garantir que todos os erros sejam eliminados. Faça login, ótimo, a mensagem foi apagada. Ainda temos nosso objeto de usuário e o modal está fechado, pois definimos isso como igual a falso. Vamos remover os registros do console. Não precisamos de nenhum desses. Retornar esse objeto de usuário funciona perfeitamente bem e essa é uma forma de detectar se o usuário está logado ou não. Também podemos acessar as propriedades do usuário , como e-mail e ID. Mas essa é apenas uma maneira de fazer as coisas. Outra maneira possivelmente melhor de fazer as coisas é usar um método fornecido pelo Firebase, que veremos no próximo vídeo, e isso evitará quaisquer alterações em nosso usuário conectado. 46. Detectando alterações do auth: Conforme mencionado no vídeo anterior, quando chamamos esse método login com e-mail e senha, isso retornará um valor. Se for bem-sucedido, esse valor será o conteúdo do objeto do usuário, que contém todas as informações de que precisamos, como o ID do usuário e também o e-mail do usuário. Tudo bem, mas o Firebase também fornece um observador, que é uma forma recomendada não apenas de atrair o usuário, mas também de nos notificar se houver alguma alteração, como o encerramento da sessão do usuário. Esse observador será importado para nosso uso do arquivo então vá para o topo e, dentro da importação desativada, também importaremos o estado ligado/desativado alterado. Para chamar isso, vamos pular para o final do nosso arquivo, logo acima da declaração de retorno e chamaremos isso na parte inferior. Neste método de pintura, também precisamos colocar entre colchetes. Também precisamos passar dois parâmetros. primeira é a ocorrência da instância, temos acesso a isso. Teríamos nossas constantes desligadas separadas por vírgula. O próximo parâmetro será uma função a ser chamada se uma alteração nos usuários de State for detectada, ou seja, essa função será chamada se o usuário fizer login ou sair. Passar uma função como segundo parâmetro e sua função também incluirá o usuário atual. Abra isso. Agora teremos acesso ao usuário conectado atual, queremos saber nosso lugar em uma declaração condicional. Podemos verificar se o usuário existe. Se isso acontecer, definiremos o usuário. Se não existir, definiremos o usuário como igual a nulo e, onde vamos definir isso, bem, vamos criar uma referência no topo do nosso arquivo. Logo abaixo do resto, dizemos const. Os dados do usuário são iguais a uma referência. Por padrão, definiremos isso como igual a nulo. De volta ao nosso observador, podemos inserir declarações condicionais e verificar se o usuário existe. Este é um usuário que será passado para nossa função. Se eles estiverem logados, definiremos valor dos dados do usuário para ser igual a esse usuário. Caso contrário, o usuário não está logado, portanto, podemos retornar os dados do usuário para serem iguais a nulos. Vamos então devolver esses dados do usuário do nosso material de composição. Isso será usado em vários componentes. Um deles pode ser o componente de login para garantir que mostremos apenas o botão relevante na parte superior. Entre no login, importe isso na parte superior e, em seguida, vá até os dois primeiros botões que vemos aqui. Só queremos mostrar o botão de login se não houver presença de dados do usuário. aprovação do VF dirá se não há dados do usuário. Se não tivermos um usuário, ofereceremos a chance de fazer login, se não passarmos VLs em que o usuário esteja conectado no momento e tenha a opção de sair. Agora, isso nos dará a chance de testar isso adequadamente. Mas antes de realmente testarmos isso, agora temos um conflito sem dois nomes de variáveis. Eu só vou mudar este para ser um dado de formulário. Vamos copiar isso e usar isso dentro do nosso formulário. Dados do formulário e e-mail, o mesmo para a senha e também alterações em nossas funções de login e inscrição. Acho que isso está em todo lugar. Vamos apenas verificar esses dados de usuário e só os temos em nossos dois locais. Bom, agora podemos testar isso colocando o usuário na parte superior do modelo, dentro dos colchetes, dizemos dados do usuário, e-mail, mas lembre-se de que às vezes não teremos acesso a esse e-mail porque os dados do usuário serão iguais a nulos. Enfrentar o ponto de interrogação para fazer com que isso falhe silenciosamente se tivermos algum erro. Se você não estiver familiarizado com esse ponto de interrogação, esse é o encadeamento opcional de JavaScript. Isso impedirá que um erro apareça se nenhum e-mail estiver presente, o que acontecerá se o usuário estiver desconectado. Digamos que isso vá até o navegador. Vemos que estamos logados no momento, o e-mail está no topo, clique em Sair. Esse n foi removido, então vamos tentar entrar mais uma vez. Agora nosso e-mail foi retornado. Então, para remover essa saída do modelo tudo agora parece estar funcionando corretamente. Agora é o fim da seção de autenticação. Parabéns por chegar a essa fase. Ainda não terminamos, mas temos muitos outros recursos para adicionar ao nosso projeto, que serão adicionados nas próximas seções. 47. Estilando o panorama sobre: A seguir, teremos alguns retoques finais em nosso projeto. Vamos começar com alguns estilos CSS para essa visão sobre. No momento, não parece muito bom abaixo do cabeçalho. Vamos até esta seção, que está nas visualizações, sobre a exibição, selecionar a visualização acima e, em seguida, podemos criar uma seção de estilo na parte inferior. Vamos dar uma olhada nas aulas que temos. Isso é tudo o que temos neste invólucro que envolve todo nosso conteúdo com a classe de about. Depois, temos a seção de introdução, e esta seção inclui nosso título e nossa imagem. É basicamente tudo acima dessa área de links. Vamos começar com essa aula de cerca de. Começaremos definindo o tipo de exibição como flexível e nos certificaremos de que ela esteja na direção vertical definindo a direção flexível para estar em uma coluna. Usar o flexbox e essa direção vertical nos permitirá alinhar os itens no centro. Alinhe os itens no centro, o que, em seguida, empurrará o conteúdo para o meio da página. Este é o invólucro da página inteira. Em seguida, temos a seção de introdução. A seção de introdução, como acabamos de descobrir, é tudo até essa imagem, que é a imagem e as duas linhas de texto acima, então também definiremos a direção da flexão para ser a coluna desta. A exibição ou a direção flexível da coluna. Atualmente, você não verá nenhuma diferença se acessarmos o navegador. Isso ocorre porque usaremos uma consulta de mídia muito em breve e faremos com que ela apareça em uma linha na tela maior. Atualmente, isso se aplica à tela pequena e, na tela maior, configuraremos isso para ser uma direção flexível da linha. Coloca dentro da regra de mídia artística em que vamos definir a largura mínima em 900 pixels e, em seguida, podemos substituir nossa seção de introdução definindo a direção da flexão como uma linha. Eles aparecem em uma linha. Então, abaixo de 900 pixels, isso voltará para a direção da coluna. Agora vamos voltar para a seção de introdução. Se rolarmos até a seção completa aqui, teremos esse div com a classe de invólucro de texto informativo ao lado da imagem. Efetivamente, temos apenas duas seções com as quais precisamos trabalhar. Podemos novamente usar o flexbox para definir que a esquerda e a direita tenham o mesmo tamanho. Também precisamos adicionar um pouco de espaçamento e alinhamento, e faremos isso fora da nossa consulta de mídia. Primeiro, a imagem era informativa , a imagem sublinhada também capturará nosso invólucro de texto informativo, IMG de informações e também invólucro de texto informativo. Como os pais da introdução têm o tipo de exibição flexível, os elementos secundários podem usar o flex, e configuraremos os dois para tentar usar exatamente o mesmo valor. pouco de preenchimento para fornecer os dois com o espaçamento de uma RAM. Alinhe o texto com o alinhamento do texto no centro e, em seguida, defina o alinhamento vertical. Também podemos fazer uso do align self. Alinhe-se ao centro. Novamente, isso funciona porque os pais da introdução têm esse tipo de exibição flexível e o alinhamento automático funcionará porque esse é um item secundário do flexbox. Isso cuida desta seção. Vamos voltar para cima. O próximo é o invólucro de mais informações. Esta é a seção de todos os nossos links e deste título aqui. Vamos direcionar esta seção novamente fora da consulta de mídia. Embalagem de mais informações em exibição. Novamente, usaremos o flexbox. Definiremos a direção flexível para estar em uma linha de texto da coluna no centro. Podemos fazer isso se destacar adicionando um pouco de cor de fundo. Faça isso um pouco diferente da cor branca atual. Vamos escolher o duplo F, o duplo E, D2. Atualmente, esse plano de fundo envolverá apenas o conteúdo, portanto, para torná-la a largura total da página, podemos alterar a largura para 100 VW. Lá vamos nós. Para dar um pouco de espaçamento, basta adicionar um pouco de preenchimento de uma RAM. Também podemos mudar demais o plano de fundo desta seção, então vamos copiar isso. Se voltarmos para a fonte, os ativos, o main.css. Na verdade, podemos simplesmente remover o plano de fundo do bloco de informações e isso agora corresponderá ao restante do conteúdo. Vamos testar as seções e também a página inicial e garantir que você não tenha problemas. Na verdade, aqui, precisamos adicionar o plano de fundo. Cole isso. Lá vamos nós. Isso agora funciona para nossos dois pontos de vista. 48. Completando a vista do administrador: Vamos continuar com nossos retoques finais na seção de administração. Aqui dentro, vamos usar a caixa flexível e colocar uma nova pizza nos componentes do menu lado a lado, na tela maior. Vamos entrar na visualização do administrador, que está na pasta de visualizações. No momento, não temos muito conteúdo, apenas exibimos o título do nível três e todos os três componentes, então essa é a seção da nossa nova pizza e também o componente de pizzas. Recorte isso, envolva-os dentro de um div, cole-o novamente e atribua a esse div a classe de linha. Na parte inferior, crie a seção de estilo. Também vamos incluir isso em nossos componentes. Selecione a linha. Na seção inicial aqui, definiremos o tipo de exibição como flexível, uma nova direção flexível como coluna. Isso funcionará na exibição de tela pequena. Eu reduziria isso e podemos vê-los na direção da coluna. Em seguida, configure uma consulta de mídia com a regra de mídia artística, na qual aplicaremos todos os estilos aqui contidos em mais de 900 pixels. Selecione nossa linha, ou você pode substituir a direção flexível para ser uma linha. As telas menores terão uma coluna. O Stretch deve ter mais de 900 pixels. Agora estão lado a lado. Também precisamos que esses dois componentes sejam um pouco mais largos, para que abranjam todo o tamanho da página. Podemos entrar na nova pizza e também nas pizzas dentro dos componentes em Admin. Este tem a classe de seção de administração. Se formos comer pizzas, podemos ver que essa também. Vamos entrar na pasta de ativos, em main.css. Faça uma pesquisa e já temos a referência da seção de administração aqui. Defina o valor flex como igual a um. Todas essas seções tentarão ocupar o mesmo espaço disponível. Sendo esta uma área administrativa, também queremos introduzir algumas medidas para garantir que somente as pessoas corretas possam ver esta página. Por enquanto, garantiremos que eles estejam logados importando primeiro o usuário. Volte para a visualização do administrador, para o script. Precisamos importar nosso uso do composable, onde podemos extrair e armazenar dentro de uma constante nossos dados de usuário. Lembre-se de que os dados do usuário são iguais ao nosso objeto, que contém todas as informações do usuário, ou são iguais a nulos. Usamos Auth para chamar nossa função. Portanto, os dados do usuário podem ser usados com alguma renderização condicional para mostrar e ocultar o conteúdo da página. Vamos pegar tudo dentro do nosso modelo, colocar em um div como um invólucro, adicionar o conteúdo novamente usar a renderização condicional com v-if, onde podemos verificar se os dados do usuário estão presentes. Se estivermos logados, poderemos ver toda a seção de administração. Caso contrário, crie um elemento p, que será para a seção v-else, com a mensagem de que você precisa ser administrador para visualizar esta área. Aí está nossa mensagem. Antes de fazer login, adicionaremos um pouco de estilo a esta seção adicionando uma classe de warning_msg. Vamos estilizar isso em apenas um segundo. Mas antes de fazer isso, também podemos adicionar uma mensagem de boas-vindas se o usuário estiver logado. Logo acima do título do nível 3, adicione algum texto com a classe user_email. Os textos são bem-vindos. Então, dentro dos colchetes duplos, podemos acessar nossos dados de usuário.email. Lembre-se de que os dados do usuário nem sempre serão um objeto, às vezes podem ser nulos. Portanto, podemos usar o encadeamento opcional de JavaScript com um ponto de interrogação para exibir esse e-mail somente se ele estiver definido. Finalmente, o estilo do e-mail do nosso usuário e da mensagem de aviso estão fora da consulta de mídia, então user_email e também warning_msg. Margem de um rem , apenas empurra isso para fora da esquina. Vamos tentar fazer login. Pessoal, o conteúdo agora está visível e também podemos ver uma mensagem de boas-vindas na parte superior. Além disso, apenas para ultrapassar o título de nível 3, também podemos aplicar a mesma quantidade de margem. Adicione o H3. Bom, isso parece muito melhor agora. Vamos até nosso botão de inscrição e clicar nele. Isso agora entra em vigor e remove nossa seção de administração da visualização. 49. Restrição de novas pizzas: Outra verificação que podemos fazer é verificar se nosso usuário está logado antes de adicionar uma nova pizza ao banco de dados. Atualmente, não temos como verificar se o usuário é um usuário comum ou administrador. Mas voltaremos a isso mais tarde, e o motivo pelo qual faremos isso é mais uma vez importar nossos dados de usuário para nossos novos componentes de pizza. Componentes, administrador, pizza nova. Coloque uma importação na parte superior do nosso material de composição. Importe e use Auth do nosso arquivo composable. Em seguida, podemos extrair os dados do usuário. Se rolarmos para baixo, podemos ver que temos essas funções de adição em nossa nova pizza ao banco de dados. Antes de adicionarmos isso, podemos verificar se o usuário está logado. Diremos que, se não houver dados do usuário, e como estamos dentro do script, também precisamos acessar o valor. Se for falso, ou seja, será igual a nulo se o usuário não estiver logado. Agora podemos sair dessa função antes de adicionar nossa pizza ao banco de dados. Nas circunstâncias atuais , será muito difícil testar isso. Porque, se estivéssemos desconectados, atualmente não conseguimos ver o componente Adicionar nova pizza para sequer experimentá-lo. O que podemos fazer como medida temporária é desativar a renderização condicional dentro do administrador. Vá para a visualização do administrador. Em seguida, dentro dos modelos, comentaremos as declarações if, a div de encerramento e também precisaremos fazer a área v-else. Agora, isso nos dá acesso à seção de administração quando não estamos logados no momento. Vamos acrescentar, e agora, toda vez que tentamos adicionar uma nova pizza, não vemos a mensagem dizendo que ela foi adicionada e também não vemos isso adicionado na seção do menu. Bom. Com tudo isso funcionando, agora podemos restabelecer a renderização condicional dentro da visualização do administrador. Não estamos logados, então todo o conteúdo deve desaparecer. Em seguida, continuaremos com esse assunto do objeto do usuário, adicionando-o aos nossos pedidos. 50. Adicionando o usuário aos pedidos: As próximas etapas estão todas relacionadas a todos os pedidos. O que vamos fazer é garantir que o objeto do usuário seja colocado em nosso pedido antes de enviá-lo para o banco de dados. Também garantiremos que o usuário esteja logado antes de criar um novo pedido e, para fazer isso, entraremos na cesta de uso composta por um usuário. Composables, useBaskets e esse arquivo contém a função addNewOrder. Mas antes de podermos realmente testar se o usuário está logado, também precisamos importar os dados do usuário do nosso componente desativado. Portanto, qualquer composição pode ser importada dentro de outro composto, e isso torna esses arquivos realmente flexíveis. Assim como fazemos em qualquer um dos componentes, podemos importar nosso material composto. Isso é UseAuth, e isso é. /, useAuthf, já que está no mesmo diretório e, em seguida, em nossa função, podemos extrair nossos dados de usuário de nossa função useAuth. O ID aqui é que verificaremos se há um usuário conectado. Se houver, nós os adicionaremos ao pedido; caso contrário, adicionaremos algum dinheiro à mensagem do usuário para fazer o login. E precisamos armazenar essa mensagem dentro de uma variável ou constante. Portanto, const, signInMessage é igual a uma referência com uma string vazia como valor inicial até a função addNewOrder e podemos primeiro verificar se o usuário está logado. Dentro da seção de teste, diremos se, userData.value, abrir as chaves. Se isso for verdade, queremos executar algum código aqui, se não for, criaremos uma seção L. A seção L atualizará o SignInMessage, então isso retornará ao usuário uma mensagem de por favor, faça login para fazer um pedido. Em seguida, em nossa seção if, podemos copiar ou recortar a seção do pedido até o texto da cesta sem o conteúdo original. Em seguida, coloque-o dentro da seção if, para que ele só seja executado se o usuário estiver logado. Isso é tudo o que precisamos fazer por enquanto dentro da função, podemos então retornar nosso SignInMessage, que pode então ser importado para dentro da nossa visualização de menu. Além disso, já temos acesso à cesta de uso , então podemos simplesmente inserir o final da nossa mensagem de login. Em seguida, renderize essa mensagem dentro do nosso modelo, então role para baixo até o botão de pedido, que está na seção da cesta, procure esse botão com o texto do botão de colocação e, logo acima, adicione um novo elemento P, saídas, nosso signInMessage. Agora podemos testar isso quando conectado e desconectado. Como fomos solicitados a fazer login, no momento não estamos logados. Podemos confirmar isso com o administrador. Vamos tentar fazer um pedido, clicar em alguns itens. Lá vamos nós. Faça login para fazer um pedido, clique em nosso modelo e podemos fazer o login. Faça login, clique em “Fazer pedido” mais uma vez e agora está tudo funcionando. Se funcionou, no entanto, saia e limpe a página e adicione novas pizzas ao pedido. Novamente, se tentarmos fazer um pedido, ainda veremos nossa mensagem aqui. Você já deve ter notado que , assim que fizermos o login pelo modal, essa mensagem ainda permanecerá intacta. Vamos apenas demonstrar isso. Se fizermos login mais uma vez, clique em “Entrar”. Manter essa mensagem intacta pode causar alguma confusão para o usuário. Eles podem pensar que ainda precisam fazer login. Tudo isso significa algum erro no processo de login. Para esclarecer isso, o que podemos fazer é fornecer um método de observação que acionará uma função de retorno se houver alguma alteração um estado reativo , como nosso usuário. O que isso significa na prática é que, se voltarmos à nossa cesta de uso composta na parte superior, poderemos observar nossos dados de usuário e, assim que ocorrerem alterações, poderemos executar uma função de retorno de chamada. O observador foi importado automaticamente do pacote de visualização. Se o seu não aconteceu automaticamente, se esqueça de adicionar isso. Então, cada vez que uma alteração acontecer em outros dados do usuário, a função será executada, onde podemos limpar nosso signinMessage.value definindo isso como igual a uma string vazia. Vamos voltar ao nosso menu e atualizar. Podemos ver tudo isso fazendo efeito em qualquer pizza nova. Faça um pedido. Isso é bom porque estamos logados, saímos, fazemos um pedido quando estamos desconectados e vemos nossa mensagem de erro. Agora, se tentarmos fazer login mais uma vez, faça login. Assim que isso acontecer, removemos a mensagem de erro para que o usuário fique livre para fazer seu pedido. Bom, isso agora nos deixa com a tarefa final de adicionar o usuário ao pedido. Vamos voltar para a cesta de uso composta e depois para a função addNewOrder. Logo na seção if, lembre-se de que os dados do usuário, que obtemos do firebase, contêm muitas informações e muitas das propriedades das quais não precisamos. Para simplificar, vou criar um novo objeto de usuário e colocar apenas ID e o e-mail do usuário, a propriedade ID, que podemos obter de UserData.value.uid e e-mail do usuário. Este é do UserData.value.email. Abaixo, quando criamos nosso pedido, também podemos repassar o usuário. Agora vamos salvar isso. Vamos tentar fazer um novo pedido. Faça nosso pedido, entre no console, em nosso banco de dados Firestore e confira os pedidos. Se rolarmos para baixo, podemos ver que o último pedido que acabamos também tem nosso objeto de usuário anexado. 51. Filtros e propriedades globais: Você percebe que, se entrarmos na seção do menu, começaremos a adicionar algumas pizzas à nossa cesta. Se começarmos a aumentar a quantidade, vamos aumentar para seis e ver que temos uma formatação inconsistente. O primeiro está reduzido a uma casa decimal, o segundo tem duas casas decimais e o total do pedido está todo confuso. Se você já usou a versão 2 do Vue no passado, pode ter usado algo chamado filtro. Um filtro estava disponível para fornecer formatação de texto simples e era ideal para criar coisas como filtros de moeda. No entanto, na versão 3 do Vue, os filtros não estão mais disponíveis. Eles podem ser substituídos por algo como um método ou uma propriedade computada dentro de um componente. No entanto, se você quiser que isso esteja disponível globalmente para que possamos reutilizá-lo, também podemos usar um filtro, como o configurado no Vue 3, acessando algo chamado propriedades globais. As propriedades globais são um objeto ao qual podemos adicionar, que está disponível em todos os nossos componentes para que possamos reutilizar. tenha cuidado para não exagerar e tornar tudo acessível globalmente. Mas um filtro de moeda no qual podemos usar vários componentes é um bom caso de uso. Vamos até o main.js e configurar isso. Então, logo abaixo de onde criamos nosso aplicativo, a maneira de fazer isso é chamar app.config.global.properties e, em seguida, podemos dar nome a essa propriedade, como Dark.mode, e definiremos isso como verdadeiro. Agora podemos acessar dentro de qualquer um de nossos modelos a propriedade DarkMode para que ela atue como uma variável. Vamos até a visualização do menu e qualquer lugar dentro desse modelo está bem. Nós produzimos isso dentro dos colchetes duplos, agora vemos isso na parte superior. Esse é um caso de uso muito bom para strings simples ou booleanos como esse e podemos acessá-los em qualquer componente. Também poderíamos configurar quantos deles quiséssemos, poderíamos simplesmente duplicar isso e criar variáveis diferentes. Ou também podemos adicionar várias propriedades dentro de um objeto. Então, vamos manter essa seção, mas remover a variável, e o que faremos é criar um objeto chamado filtros e, dentro das chaves, podemos adicionar quantos filtros quisermos. Para nosso caso de uso, criaremos uma função chamada FormatMoney. FormatMoney precisa receber o valor que você deseja formatar e, em seguida, podemos retornar o novo valor que está formatado. Uma maneira simples de fazer isso é chamar Value.toFixed e isso corrigirá isso em duas casas decimais. Também conforme mencionado, como esse é um objeto, também podemos adicionar várias propriedades aqui. Mas, embora o FormatMoney seja tudo que precisamos, vamos voltar à nossa visualização do menu e podemos substituir o preço pelo nosso filtro. Se você quiser, pode adicionar isso à seção do menu, mas atualmente nossos números já estão adicionados ao banco de dados, portanto, sempre devem ser exibidos corretamente. O problema ocorre quando adicionamos várias pizzas e começamos a multiplicar números. O que podemos fazer é ir até a seção da cesta, temos o total do pedido, temos esse preço aqui, então, em vez disso, o que queremos fazer é cortar essa multiplicação acessar nossos filters.FormatMoney. FormatMoney era uma função que recebe um valor para formatar , então também precisamos passar isso, que é a multiplicação que acabamos de recortar. Esses são os totais da linha e também precisamos fazer o total do pedido. Então recorte isso e acessaremos filters.ForfMatMoney, cole isso de volta. Vamos experimentar isso. Aumente a quantidade e você poderá ver quando passarmos de seis, qual era o problema antes, tudo isso formatado corretamente em duas casas decimais. Como nosso filtro é um objeto global, também podemos usar em outros componentes onde exibimos valores monetários. Vamos passar para os componentes, para o administrador e para o orders.view. Vá até nossa mesa, assim como na cesta, também estamos multiplicando o preço pela quantidade, então podemos fazer o mesmo aqui, podemos dizer filters.formatMoney. Passe isso de volta, vamos tentar isso na seção de administração. Isso também parece bom se olharmos todos os totais à direita. Essa é uma maneira muito simples , mas útil, de repetir tarefas simples em todo o nosso aplicativo. a formatação da moeda é um pouco No entanto, a formatação da moeda é um pouco básica e podemos melhorar isso usando o objeto JavaScript Intl. Essa é a API de internacionalização de JavaScript que fornece formatação de número, hora e data com base no idioma , entre outros recursos. Vamos melhorar isso voltando ao nosso main.js. Podemos substituir nosso exemplo atual logo após a declaração de retorno e declararemos que queremos um novo Intl.NumberFormat. NumberFormat é um dos muitos métodos disponíveis nos objetos Intl e esse NumberFormat permite a formatação numérica sensível ao idioma , o que é ótimo para moedas. Em seguida, dentro da cadeia até o final o método de formatação que recebe o valor que você deseja formatar. No nosso caso, ainda estamos usando esse valor que é passado para a função e, além disso, o método de formato numérico também aceitará alguns argumentos para especificar qual localidade estamos usando e também algumas opções. Primeiro, a localidade do usuário final que define o estilo de formatação da moeda. A razão pela qual queremos fazer isso é porque a moeda é exibida e formatada de forma diferente em diferentes partes do mundo. Por exemplo, alguns países usam decimais ou vírgulas como separadores. Digamos que 10.000 possam ter essa aparência ou algo assim e alguns países também usam símbolos especiais. Se atualmente salvarmos isso e acessarmos o navegador, vamos atualizar. Podemos ver, sem adicionar nenhuma opção diferente aqui. Por padrão minha moeda está com duas casas decimais e usa o ponto decimal intermediário. Mas se adicionarmos, por exemplo, uma localidade alemã que é um valor de cadeia de caracteres do traço sobre a maiúscula DE, assim que você a salva , ela é atualizada e separada por uma vírgula. Meu caso de uso, vou mudar isso para inglês, traço GB, o que deve reverter isso de volta para a casa decimal. Em seguida, separados por uma vírgula, também podemos adicionar um objeto de opções. Dentro desse objeto, podemos passar várias coisas , como o estilo e as opções de moeda. O estilo será igual à sequência de moedas e, em seguida, também precisamos passar a moeda que você deseja formatar. Pode ser qualquer moeda, como euros, EUR, podemos ver isso aqui, também remova esse símbolo $ em apenas um momento, pode ser $, acho que USD. Veja-nos aqui, mas o meu será em libras. Além da moeda, ela também pode ser usada para outras coisas. Podemos incluir unidades de medida e porcentagens, mas essas opções são ótimas para nosso caso de uso e também fique à vontade para configurá-las com sua moeda preferida. Só para finalizar , vamos voltar para a visualização de pontos dos pedidos. Vamos mover o símbolo da moeda que codificamos no menu Também precisamos fazer o mesmo aqui e aqui. A visualização do menu, remova isso. Quase lá agora, temos apenas a seção do menu que está logo acima. Esta é a opção sem preço, podemos mover o símbolo da moeda, apagar isso, acessar nossos filtros, temos o FormatMoney , colar isso de volta. Agora, nossa formatação numérica já entrou em vigor. 52. Atualizações de Pizza em tempo real: Quando atualizamos nosso site, algumas coisas são atualizadas imediatamente e outras não. Por exemplo, se formos até nosso administrador e tentarmos adicionar uma nova pizza, apenas todas as informações fictícias por enquanto. Clique em “Adicionar”. Então, essa nova pizza não é atualizada automaticamente no menu até clicarmos em “Atualizar”. Mas se excluirmos uma pizza clicando nesse X, o item será removido do administrador. Por que você acha que isso acontece? Bem, para ver isso, precisamos dar uma olhada em alguns arquivos com mais detalhes. Primeiro, se entrarmos na seção de administração dos componentes e abrirmos o NewPizza.vue, aqui temos essa função para adicionar uma nova pizza ao nosso banco de dados. Tudo o que fazemos aqui é fornecer algumas verificações e, em seguida, adicionamos nosso documento ao nosso banco de dados, atualizamos a mensagem. Então, se isso for bem-sucedido, tudo está bem. A pizza é armazenada no banco de dados, mas nosso aplicativo não é notificado pelo Firebase sobre nenhuma adição. No entanto, se examinarmos o que usamos para compor pizzas e dermos uma olhada em nossa função GetPizzas. Atualmente, o que precisamos fazer depois adicionar nossa pizza é atualizar a página, pois isso chamará novamente nossa função GetPizzas, atualizando assim o menu à direita. Essa parece fazer sentido, mas lembre-se de que quando excluímos uma pizza, o aplicativo foi atualizado com as alterações. A diferença entre essas duas situações é que, se entrarmos em nosso usePizzas composable e dermos uma olhada em DeletePizza, a principal diferença aqui é que, assim que excluímos a pizza, chamamos novamente nossa função GetPizzas, que passará as informações corretas para os componentes do nosso menu. Se quiséssemos, ao adicionarmos uma nova pizza, também poderíamos chamar novamente nossa função GetPizzas. Mas também existe uma maneira melhor de fazer as coisas usar uma funcionalidade em tempo real do Firebase. O que isso significa é que, assim que fazemos alterações em nosso banco de dados, o aplicativo é notificado sobre essas alterações. Por exemplo, quando vamos até o administrador e adicionamos uma nova pizza, clicamos no botão Adicionar e ela é enviada para nosso banco de dados. Assim que isso for bem-sucedido, o Firebase informará pessoalmente nosso aplicativo sobre as informações atualizadas. Em seguida, nosso menu será atualizado automaticamente. Fazemos isso com um método chamado snapshot. Vamos ver todos os componentes do UsePizza. Podemos importar isso do nosso firestore, então no Snapshot, farei isso dentro do GetPizzas. O que faremos agora é comentar todo o código existente que usamos para pegar nossas pizzas do banco de dados e substituí-lo pelo método onSnapshot. transmissão de instantâneos e onSnapshot também usa referência da coleção de pizza que é armazenada em DBPizzasRef. Isso é seguido por uma função que vamos executar toda vez que houver uma alteração dentro do banco de dados. A função receberá os documentos que serão devolvidos para nós. Como temos um nome de documentos correspondente aqui com os documentos dos quais estamos examinando antes, agora podemos descomentar esta seção, publicá-la e colá-la dentro de nossa função. Isso está fazendo exatamente a mesma ação de antes. Estamos recuperando os documentos. Estamos percorrendo cada um deles, criando novos objetos de pizza. Em seguida, embaixo para AllPizzas ref. Assim que for atualizado, ele atualizará todas as visualizações ou componentes que dependem desses dados. Então, vamos experimentar isso no administrador. Então, vamos entrar em Adicionar nova pizza, clicar em “Adicionar” e, assim que fizermos isso, nosso aplicativo será atualizado, mas vemos um pequeno problema. Não apenas recebemos as pizzas gratuitas que são devolvidas do banco de dados, mas também são adicionadas às duas existentes que já temos. Uma maneira simples de fazer isso é limpar nossa matriz AllPizzas antes de recuperarmos as informações. Se entrarmos na seção de testes, podemos ver que já limpamos o valor existente e certamente é uma matriz vazia. Tudo o que precisamos fazer é mover isso para dentro do nosso instantâneo. Vamos guardar isso e atualizar como nossas pizzas gratuitas existentes. Vamos adicionar mais um. Clique em “Adicionar” e agora nosso aplicativo agora é notificado sobre quaisquer alterações. Com isso em mente, também podemos voltar à nossa função DeletePizza, onde podemos remover a chamada manual getPizzas. Vou dar uma olhada em nossa função DeletePizza. Não precisamos mais ligar manualmente para GetPizzas, isso é feito por nós. Agora, se também excluirmos pizza e nosso administrador ainda estiver atualizado quando removermos uma pizza , a próxima também repetirá esse processo para nossos pedidos atuais. 53. Atualizações de pedidos em tempo real: Para atualizar os pedidos em tempo real, siga o mesmo padrão que fizemos com as pizzas. Primeiro, vamos usar o orders.js dentro do Composable. No topo, precisamos importar nosso próprio método de captura instantânea. Em seguida, podemos substituir o método get docs existente que usamos no snapshot. Vamos descer para receber pedidos, que estão aqui. Ainda precisamos desse QueryData, que está no topo. Mas comentaremos tudo depois, desde obter documentos até o final da nossa seção de testes. Chamaremos o OnSnapshot, que receberá nossos QueryData. Em seguida, uma função a ser executada após cada alteração. Novamente, para manter as coisas consistentes e reutilizar nossos dados, chamaremos os dados disponíveis nos documentos. Então, nosso código existente, podemos descomentar, colocar isso fora do lugar, colocá-lo dentro de nossa função. Não precisamos mais desses documentos. Podemos eliminá-los, pois estamos fazendo com que sejam passados automaticamente para nossa função. Então, para evitar o mesmo problema que tivemos com nossas pizzas, se você se lembra do arquivo de uso de pizzas, rolamos para baixo até a função de uso excessivo de pizza. Dentro daqui, tivemos que redefinir o valor de todas as pizzas para uma matriz vazia, já que tínhamos as pizzas existentes. Depois de cada atualização, o conjunto completo de pizzas foi adicionado aos nossos valores existentes, em vez de ser substituído. Faça o mesmo em pedidos de uso, vá para o OnSnapshot onde podemos acessar allorders.value. Isso é igual a uma matriz vazia. Para testar isso, precisamos abrir nosso projeto em duas guias separadas. Vamos colocá-los lado a lado. A razão pela qual fazemos isso é porque nossos pedidos são feitos dentro dos componentes do menu, mas nós os visualizamos dentro dos componentes administrativos. Se simplesmente adicionássemos um novo pedido clicássemos no botão “Administrador”, isso atrairia automaticamente os pedidos atuais. Não veríamos a funcionalidade em tempo real, mas podemos ver isso se entrarmos no menu e criarmos um novo pedido. Temos cinco pedidos, clique em “Fazer”. Você pode ver imediatamente que isso aumenta para seis novos pedidos. Vamos tentar mais um. Isso sobe para sete, e nosso último pedido agora está na parte inferior. 54. Desinscrever de atualizações: Ao usar o OnSnapshot, o processo de escutar nossas atualizações é contínuo. No entanto, talvez não precisemos mais de nenhuma atualização. Precisamos de uma maneira de separar esse ouvinte para liberar todos os recursos. Fazer isso é relativamente simples. Quando usamos o OnSnapshot, ele retornará um método de cancelamento de inscrição, que podemos então chamar dentro do nosso aplicativo. Um caso de uso para isso pode estar dentro do administrador. Por exemplo, se descermos até o final, estamos ouvindo qualquer um de nossos pedidos atuais. Mas assim que saímos desta página e visitamos uma nova, não precisamos mais ouvir novos pedidos. Podemos separar esse ouvinte e liberar todos os recursos do navegador. Para fazer isso, use o arquivo orders.js, onde podemos armazenar a função de cancelamento de inscrição em uma variável. Conforme mencionado, o onsnapshot retornará uma função de cancelamento de inscrição, que podemos armazenar dentro de uma variável ou constante. Atualmente, o problema é que essa constante não assinada tem o escopo dessa função. Precisamos de uma maneira de acessar isso lá fora. Uma maneira de fazer isso é criar uma nova referência nos arredores daqui. Diremos const, cancele a assinatura de pedidos. Por padrão, essa será uma referência vazia. Podemos atualizar isso com o valor de cancelar a assinatura. Vamos começar a receber pedidos. Na parte inferior da seção da bandeja, logo acima do bloco de captura, podemos pegar nossa referência, que está cancelada de todas as outras, e definir o valor como igual a cancelar a assinatura. Agora temos uma função cancelada da mais antiga, qual podemos ligar quando não precisarmos mais ouvir nenhum pedido. Podemos fazer isso dentro de um gancho de ciclo chamado desmontado. Precisamos importar isso da biblioteca vue. Já temos o OnMounted, que é executado assim que o componente é montado DOM e, em seguida, o OnUnmounted assim que saímos. Vamos colocar isso em OnUnmounted. Isso vai executar uma função. Podemos testar isso com um registro de console que permite que o conhecimento funcione e, digamos, desmontado. Em seguida, acesse nossa referência, que está cancelada do valor em pontos do pedido. Chamaremos isso de função. Salve para o administrador e abriremos as ferramentas do desenvolvedor no console. Então, se desmontarmos esse componente indo para uma página diferente, veremos nosso log do console. Isso também deve chamar a atenção para nossa função de cancelamento de inscrição. 55. Adicionando novos usuários: Atualmente, nosso aplicativo tem a capacidade de inscrever novos usuários. Mas qualquer novo usuário que se inscrever pode acessar nosso site completo. Isso inclui qualquer uma de nossas páginas e, mais importante, a seção de administração. Precisamos de uma maneira de configurar nossos usuários para permitir que somente usuários administradores autorizados entrem nesta seção. Firebase tem uma solução para controlar o acesso dos usuários usando declarações personalizadas. Se você estiver usando um aplicativo de produção, essa é uma ótima opção e você pode encontrar mais informações neste link aqui. As declarações personalizadas precisam ser configuradas no lado do servidor para garantir a segurança. Podemos configurá-los usando o Firebase Cloud Functions. Mas, infelizmente, as funções de nuvem exigem um upgrade para um plano pago. Por esse motivo, usaremos uma abordagem diferente. Isso envolverá configurar dentro de nosso banco de dados uma coleção de usuários. Cada um desses documentos será vinculado a um usuário dentro de nossa seção de autenticação Usaremos esse ID de usuário como ID do documento, assim como temos aqui com nossos pedidos. Mas isso também significa que podemos criar um novo registro de usuário que conterá algumas informações adicionais. Uma dessas informações será a função do usuário. No passado, criamos nossas pizzas e nossos pedidos no arquivo firebase.js. Criamos uma referência para cada uma dessas coleções. Em seguida, nós os usamos para criar nossos novos documentos. Por exemplo, use cestas e criamos um novo pedido com a função addNewOrder. Usamos o método addDoc. Isso é levado a essa referência, uma nova ordem. Mas a parte principal a ser notada aqui ao usar o AddDoc é que não enviamos uma nova ID para os documentos. Cada um desses documentos tem um ID gerado exclusivamente. Mas, em vez disso, queremos que a coleção do nosso usuário tenha o ID do documento que corresponda ao nosso usuário dentro da seção de autenticação, que é esta aqui. Em vez de usar o método addDoc, vamos usar algo chamado setDoc. Isso nos permitirá enviar alguns novos dados para uma coleção e definir nosso próprio ID que queremos usar. Para fazer isso dentro do nosso arquivo firebase.js, exportamos nosso banco de dados, que agora podemos usar no arquivo use of.js. Mergulhe neste material composto. Agora podemos importar os itens de que precisamos. O primeiro, precisamos importar o documento do Firebase. Além disso, o método sobre o qual acabamos falar foi o SetDoc. Isso está disponível em firebase/firestore. Também precisamos importar essa referência para nosso banco de dados. Importe DB do nosso arquivo personalizado do Firebase. Esse será o método que usaremos para criar nossos novos documentos. Mas também precisamos de uma forma de acessar o ID atual do usuário conectado. Vamos até a função de inscrição, que está aqui. Quando criamos um novo usuário com esse método aqui, ele retorna um objeto. Podemos desestruturar a propriedade do usuário para acessar os dados de que precisamos. Podemos então usar esses dados logo abaixo para construir um novo objeto de usuário. Const, useObject. Podemos adicionar algumas informações adicionais ao nosso usuário, que serão armazenadas no banco de dados. Primeiro, uma propriedade chamada createdAt, que é igual a um novo dado JavaScript. Na verdade, não precisamos dessa data para nosso projeto, mas é sempre útil adicioná-la caso precisemos dela no futuro. Também podemos armazenar o e-mail do usuário, qual podemos acessar nosso userobject.email. Então, a parte principal é uma nova propriedade chamada isAdmin. Para começar, definiremos que todos os novos usuários tenham a propriedade isAdmin igual a false. Além disso, nesta seção de testes, assim que o usuário se inscrever e isso for bem-sucedido, também fecharemos o modal definindo o valor de abertura modal de login como falso. Processando. Acesse o valor e defina-o como falso. Logo abaixo do nosso objeto de usuário, podemos então criar uma nova constante chamada NewDoc. Este será o novo documento que publicaremos no Firebase usando o método doc. O método Doc precisa ser uma referência ao nosso banco de dados, que acabamos de importar. Em seguida, separados por vírgula, o nome da coleção dos usuários. O terceiro valor será a ID do usuário que você deseja usar ao criar esses documentos. Isso pode ser acessado por nosso usuário. Acesse a propriedade UID. Então, para enviar isso para o Firebase, podemos aguardar o SetDoc. Os documentos, esta é uma referência que criamos aqui. Passe isso como o primeiro valor. Em seguida, o segundo valor são os dados do nosso registro, que são armazenados dentro do objeto do usuário. Só para esclarecer o que estamos fazendo aqui, quando um novo usuário se inscrever, esse novo usuário será criado primeiro dentro desta seção de autenticação. Em seguida, vamos construir um novo objeto de usuário usando esse ID. Instale essas informações adicionais dentro do banco de dados. Mas antes de testarmos isso, como já temos alguns usuários inscritos na seção de autenticação, que não está vinculada ao nosso banco de dados, primeiro precisamos eliminar esses usuários. Vamos deixar essa conta. Também este. Elimine todos os usuários existentes. Isso não deve ser tudo o que precisamos. Temos o novo objeto de usuário. Temos nossos documentos escritos no documento. Devemos ter todo o nosso banco de dados de importações. Também precisamos garantir que isso também seja explorado. Vamos voltar ao nosso projeto. Crie um novo usuário clique em Inscrever-se. Firebase e na seção de autenticação, temos nosso novo usuário. Observe o ID do usuário, que começa com 08. O seu será diferente, é claro. Vá para o banco de dados como a coleção do usuário, que começa com a mesma referência do documento. Isso será útil porque, quando autenticarmos nosso usuário pela primeira vez, podemos ter acesso ao ID do usuário. Então, também podemos acessar a propriedade isAdmin. Para começar, o que vamos fazer é clicar no campo IsAdmin. Mudanças iguais a serem verdadeiras. Temos pelo menos um usuário administrador. Em seguida, criaremos um segundo usuário com o valor isAdmin definido como falso. Faça login novamente e crie uma nova conta. Registre esta, aí está nossa segunda conta com isAdmin definida como falsa. Agora temos dois usuários com diferentes níveis de acesso. Usaremos isso em nosso aplicativo para permitir que apenas usuários administradores entrem em nossa seção de administração. 56. Recuperando usuários de administração: A primeira etapa para permitir apenas acesso de um administrador dentro do nosso aplicativo é recuperar o usuário atual do nosso banco de dados e verificar se a propriedade isAdmin está definida como verdadeira. Como recuperaremos usuários, podemos criar uma referência para a coleção do banco de dados dentro do nosso arquivo Firebase. Assim como fizemos com pizzas e pedidos, criaremos o DBusersRef, que apontará para a coleção de nossos usuários. Diga isso e, em seguida, no arquivo useAuth.js. Essa dica é nossa importação, e vamos usá-la em breve. Em seguida, dentro de nossa função, criaremos uma nova referência chamada userIsAdmin, que será inicialmente definida com o valor false. Esse valor padrão de false será atualizado após criarmos nossa função. Essa função pegará nossos dados de usuário, pegará o ID do usuário conectado , recuperará o registro do nosso banco de e verificará se a propriedade isAdmin está definida como verdadeira. Vamos criar uma função, que será assíncrona, chamada checkAdminRole. Primeiro, crie uma declaração is onde possamos verificar se nossos dados de usuário, que é este aqui, .value, podemos verificar se isso tem o uid. Também adicionaremos o ponto de interrogação porque às vezes esse valor será nulo. Em seguida, podemos recuperar os detalhes do usuário atual do banco de dados. Podemos fazer isso criando um documento com a função doc que queremos acessar. Primeiro, acessaremos o DBusersRef, que é nossa coleção, depois podemos acessar um registro específico pelo ID. Esse ID pode ser recuperado do nosso UserData.value.uid. Copie, cole isso. Ele está dentro de uma constante chamada DocRef. Então, para realmente solicitar essas informações, podemos aguardar uma função chamada GetDoc. Vamos passar essa referência em nosso documento dentro de uma constante chamada usuário. Em seguida, precisamos formar duas verificações dentro de uma declaração is. Antes de tudo, acesse nosso user.exists, esse método exists está disponível para o usuário e verifique se um documento foi encontrado e, em seguida, usando o duplo e comercial, também faremos uma segunda verificação, para verificar se o campo isAdmin está definido como verdadeiro. Também podemos fazer isso no objeto do usuário, que tem um método chamado data, que nos dará acesso a qualquer uma dessas propriedades, denominado Data.isAdmin. Se essas duas condições forem verdadeiras, podemos então atualizar nosso UserIsAdmin.value para ser igual a true. Caso contrário, dentro de uma instrução else, definiremos o userIsAdmin como igual a false, então cole isso. Defina isso como falso. Também precisaremos importar o método GetDoc do Firestore. Nosso valor userIsAdmin será usado em outros arquivos e componentes para verificar se o acesso é permitido. Não precisamos devolver isso na parte inferior. Lembre-se, porém, tudo o que fizemos aqui foi criar uma nova função. Ainda não o chamamos para executar o código interno. O local para executar esse código será dentro do AuthObserver. Role para baixo até onAuthStateChanged e o código aqui contido será executado sempre uma alteração de usuário for detectada. Se eu tiver acesso a um usuário, se alguém estiver logado, verificaremos a função de administrador. No entanto, se o usuário se desconectar, queremos atualizar UserIsAdmin.value para ser igual a false. Com tudo isso pronto, vamos passar para nossa visão administrativa. Podemos acessar UserIsAdmin e, lembre-se de que essa verificação atual para nossa seção de administração só verifica se o usuário está logado. Na verdade, não está verificando se eles têm acesso a esta página. Podemos melhorar isso trocando isso por UserIsAdmin . Vamos experimentar isso. Na seção de administração, vamos fazer login. Em primeiro lugar, este é o e-mail inserido, que não é um administrador. Adicione o e-mail e a senha, faça login. Bom. Isso não está nos dando acesso à seção de administração. Saia e faça login com o usuário administrador. Faça login e, assim que isso acontecer, verificaremos a função de administrador, que atualmente é verdadeira. Em seguida, isso atualizará nosso valor variável de UserIsAdmin, o que nos dá acesso. Podemos clicar em Sair. Assim que isso acontecer, a função AuthStateChanged será executada, defina nosso UserIsAdmin como igual a false, ocultando nossa seção de administração da visualização. 57. Atualizando usuários regulares para o administrador Parte 1: Quando terminamos esse projeto, nós o entregamos ao cliente. A última coisa que queremos fazer é fazer com que o cliente acesse nosso banco de dados e atualize essa propriedade de administrador sempre que você adicionar um novo usuário ou remover o acesso de administrador se um funcionário deixar a empresa. O que faremos para melhorar isso é criar uma nova seção no administrador, que permitirá que um usuário administrador existente a atualize. Esse processo envolverá a criação um novo componente administrativo, no qual o usuário administrador poderá inserir um endereço de e-mail do usuário que queremos atualizar. Como isso também será colocado nesta seção de administração, isso também significa que somente usuários administradores podem realizar essa atualização. Depois de pesquisar o usuário por e-mail, ele exibirá uma mensagem informando se o usuário atualmente é administrador ou não. Por fim, teremos um botão que alterará essa função de administrador para verdadeira ou falsa. Primeiro, vamos criar nosso novo componente no diretório de componentes e no novo arquivo admin. Vamos chamar isso de ToggleAdmin.vue. Em seguida, criaremos nossa estrutura básica. Nossa estrutura básica será semelhante aos outros componentes administrativos. Podemos acessar qualquer uma dessas outras seções administrativas e ir até o modelo. Vamos copiar as seções deste modelo, nos dar a mesma estrutura. Cole isso em nosso Toggle.Admin. Vamos simplificar isso. Podemos mover o formulário, então recorte tudo, desde o formulário de fechamento até a tag de abertura do formulário. Manteremos essas mesmas classes de estilo, mas apenas o título de nível 3 será Toggle Admin Privileges. Também precisamos atualizar esse nome de variável. Ainda não criamos isso, mas este se chamará ShowToggleAdmin. Faça esta caixa de camelo. Também usaremos isso em outros locais e o criaremos na seção de script subscrito. Isso também usará a configuração do script. É necessário importar ref da visualização e criar nossa constante que é showToggleAdmin. Embrulhe isso em uma referência com um valor padrão de true. Isso significa que, por padrão, poderemos ver a seção dentro do administrador e clicar no botão Ocultar quando não precisarmos ver essa seção. Vá para as visualizações e para a visualização do administrador para importá-las. Vamos duplicar esse. Isso é ToggleAdmin. Isso também é ToggleAdmin. Coloque isso logo abaixo de nossos pedidos. Vá para a página do administrador, até a parte inferior, onde podemos ver outros componentes. Volte para este ToggleAdmin.vue. O que vamos fazer é criar duas novas seções. Primeiro, haverá um formulário no qual podemos encontrar um usuário inserindo o e-mail do usuário. Precisamos de uma constante para manter esse e-mail. Isso pode ser ref, então const email, e o valor inicial será uma string. Só queremos mostrar esse conteúdo que vamos colocar agora se o showToggleAdmin for igual a true. Abaixo do cabeçalho, crie uma nova div. Podemos fazer uso da renderização condicional com o if. Só exibiremos esta seção se showToggleAdmin for igual a true. Coloque agora o formulário. Este formulário será bem simples. Vamos criar um div, a classe de form_group. Então, aqui dentro, adicionaremos um rótulo e também uma entrada de e-mail para que o usuário possa pesquisar por e-mail. Primeiro, o rótulo ou e-mail com um texto para encontrar o usuário por e-mail. A entrada. Isso terá o tipo de ID de e-mail. Além disso, envie por e-mail um valor de texto de espaço reservado ou insira e-mail. Em seguida, podemos usar o modelo V, que vinculará o valor ao nosso e-mail na parte superior. Em seguida, logo abaixo desta seção div, também colocaremos um botão que enviará este formulário. O tipo de botão, isso acionará uma função para encontrar nosso usuário. Ainda não criamos essa função, mas vamos adicioná-la por enquanto. clique [inaudível] evitará o comportamento padrão e desativará a função, que em breve criará a chamada FindUser. O FindUser também precisa inserir esse endereço de e-mail que armazenamos aqui. Insira um texto de find user. Então, toda a funcionalidade para isso terminará e eu usarei o Off Composable. No topo, a primeira coisa que faremos é criar mais duas constantes. O primeiro será para uma mensagem. Chamaremos isso de toggleAdminMessage, que usará ref e uma string vazia para começar, e uma segunda constante chamada selectedUser. Este será um contêiner para armazenar um usuário que procuramos. Vamos definir isso como igual a ref e o valor inicial de null. Essa ToggleAdminMessage conterá o valor, que diremos se o usuário é administrador ou não, ou se ele não pode ser encontrado com o e-mail fornecido. Vamos criar nossa função, então assíncrona chamada FindUser. Vamos usar além do e-mail do usuário que queremos pesquisar. Colocar uma seção de teste e uma captura como erro. Então, podemos começar a trabalhar dentro da seção de testes. A primeira coisa que faremos aqui é apagar todas as mensagens que pudéssemos ter anteriormente. Isso é armazenado em ToggleAdminMessage.value. Defina isso como uma string vazia. Em seguida, também criaremos uma declaração condicional e isso verificará se o usuário é administrador. Lembre-se de que atualmente temos essa propriedade definida aqui. Se isso for igual a false, o usuário não poderá atualizar a propriedade do administrador, então retornaremos dessa função. Lembre-se das coisas que, na verdade, chamamos isso na seção de administração. De qualquer forma, esta seção já deve estar protegida, mas isso é apenas uma verificação adicional, por precaução. Em seguida, usaremos o método de consulta do Firebase. Isso nos permitirá pesquisar um registro específico se uma única pessoa for a coleção do usuário armazenada em DBusersRef. Em seguida, filtraremos isso usando o método where. Queremos verificar a propriedade do e-mail e verificar se ela é igual a um endereço de e-mail específico. Esse endereço de e-mail que queremos verificar é aquele que é passado para todas as funções nesse sentido, e isso comparará é aquele que é passado para todas as funções nesse sentido, todos os nossos usuários com a propriedade de e-mail e verificará se é aquela que foi passada pelo nosso formulário. O que está dentro de uma constante chamada dados de consulta. Em seguida, podemos fazer uma solicitação do Firebase aguardando GetDocs. Analisar os dados da consulta e, em seguida, armazená-los dentro de uma constante chamada usuário. Esse usuário será o valor retornado pelo Firebase. Usando esse objeto de usuário, podemos então construir um novo objeto de usuário contendo apenas as propriedades de que precisamos. Lembre-se de que, quando examinamos esses objetos, que recebemos do Firebase no passado, recebemos muitas informações e, a maioria delas, não precisamos. Criamos um novo objeto de usuário o colocamos no ID, que podemos pegar de nosso usuário, os documentos, e GetDocs retornará vários documentos, mas devemos ter apenas um usuário com um e-mail exclusivo. Por esse motivo, podemos selecionar o primeiro documento com o número de índice 0. Selecione o ID e, em seguida, vamos duplicá-lo duas vezes. A segunda propriedade é o e-mail. Mude esses dois. A terceira propriedade que precisamos será isAdmin. Mesmo como um objeto de usuário mais simples que contém apenas as propriedades de que precisamos. Podemos então definir nosso usuário selecionado para ser igual a esse objeto. Lembre-se. Valor. Esse é o caso se tudo for bem-sucedido. Caso contrário, podemos atualizar o selectedUser.value para ser igual a nulo. Em seguida, atualize também nosso valor toggleAdminMessage para ser igual a uma string. Você pode colocar qualquer mensagem que quiser dentro daqui, mas vou dizer que nenhum usuário foi encontrado com esse e-mail. Também precisamos importar esses métodos do Firebase, que usaremos apenas. Temos a consulta, temos onde, temos GetDocs. Na verdade, pouco antes de fazermos isso, precisamos também chamar o método de dados antes do e-mail. O mesmo antes é Admin. Essa função extrairá as propriedades que precisamos de cada documento, portanto, nessas importações na parte superior do nosso Firestore, temos GetDocs, a consulta e também onde. Então, finalmente, na parte inferior da declaração de retorno, podemos retornar nossa função que era findUser, o valor selectedUser e também a mensagem que era toggleAdminMessage. Aí estamos nós. Salve esse arquivo e acabamos de concluir. Em seguida, vamos importá-los e usá-los nos componentes toggleAdminComponents. 58. Atualizando usuários regulares para o administrador Parte 2: Anteriormente, criamos uma função para encontrar um usuário por e-mail e, em seguida, armazenamos esse valor nessa constante de usuário selecionada. Agora vamos acessar o componente ToggleAdmin.vue para importá-los na parte superior. Vamos importar UseAuth, e isso é do caminho do arquivo @/composable/USEAuth. Em seguida, extrairemos e armazenaremos esses valores de retorno dentro de uma constante. Portanto, precisamos de find, precisamos do selectedUser e também toggleAdminMessage é igual a useAuth, chame essa função e role para baixo. Logo abaixo desta seção do formulário, criaremos uma segunda seção que exibirá ao usuário se uma for encontrada. Ele também terá uma mensagem para mostrar se usuário é atualmente administrador ou não e, em seguida, um botão para acionar uma função para alternar a propriedade do administrador. Então, crie div para esta seção. Queremos usar o if para mostrar esta seção somente se o SelectedUser for igual a uma classe de selected_user. Para o elemento p, onde posso enviar a mensagem do administrador. Isso foi toggleAdminMessage e , em seguida, um segundo elemento p logo abaixo. Este terá uma sequência de texto em que o valor do usuário está atualmente definido como administrador ou não administrador. Vamos dizer usuário e, em seguida, passá-lo para o selectedUser.email está atualmente definido como e, em seguida, queremos definir dinamicamente se isso é falso ou falso. A maneira de fazer isso é selecionando nosso selectedUser.isAdmin. Usando o operador ternário de JavaScript, podemos exibir o texto do administrador se isso for verdade. Se não, uma mensagem de não administrador. O elemento final a entrar nesta seção é um botão. Este botão agora é para um clique, evite o padrão. Isso acionará uma função que ainda não criamos chamada toggleAdmin. Voltaremos a essa função em apenas um momento, mas, por enquanto, o texto de clique aqui para alternar a configuração do administrador. Salve isso e, em seguida, podemos voltar ao uso do composable, onde podemos criar essa função toggleAdmin. Async, toggleAdmin, crie o bloco try e o catch. Assim como fizemos anteriormente, começaremos com uma declaração if para verificar se o usuário é o valor do administrador. Caso contrário, sairemos dessa função porque eles não estão autorizados. Isso é encontrado em UserIsAdmin.value. Isso é falso, retornaremos essa função antes de fazer qualquer alteração. Agora precisamos criar uma referência a um documento específico que queremos atualizar, armazená-la dentro de uma constante chamada DocRef. Então, podemos construir isso com esse método de documento do Firebase. Ele usa uma referência ao nosso banco de dados que queremos referir à coleção do usuário. Então, finalmente, queremos encontrar um documento pelo ID. Podemos fazer isso pegando nosso SelectedUser e acessando a propriedade ID. Então, selectedUser.Value.id. Lembre-se de que o que queremos fazer com este documento é atualizar a propriedade isAdmin para que ela seja o oposto do que ela é atualmente. Para isso, podemos escrever um método Firebase chamado UpdateDoc. Nós passaremos a referência do documento acima. Então, como objeto, podemos definir exatamente quais propriedades queremos atualizar. Queremos apenas atualizar a propriedade isAdmin para que ela seja o oposto do que ela é atualmente. Poderíamos fazer isso acessando nossa propriedade selectedUser.value.isAdmin e defini-la como o oposto do que é atualmente. Depois de atualizarmos nosso documento do Firebase, chamaremos novamente o FindUser, que recuperará e definirá nossos dados de usuário e atualizará quaisquer componentes. Também precisamos passar isso, o e-mail do usuário, que terá em selectedUser.value.email. Vamos apenas colocá-lo em um simples login do console na seção de erro. Além disso, como usamos o método UpdateDoc do Firebase, precisamos importá-lo na parte superior e depois retornar a função toggleAdmin na parte inferior. De volta ao ToggleAdmin.view, onde realmente chamamos essa função a partir do nosso botão, que está aqui, mas ainda precisamos importá-la do nosso composto. Isso deve ser tudo agora estabelecido. Vamos até o administrador. Seu endereço de e-mail atualmente é do administrador, mas o outro está definido como falso. Vamos alternar isso agora. Clique em “Localizar usuário”. Esse usuário não foi recuperado. Podemos ver que a propriedade de isAdmin está definida como falsa. Clique em “Alternar”. Em seguida, ele é atualizado para ser um usuário administrador, que você também pode ver dentro do console. Isso não é verdade. Em seguida, restabeleceremos isso como falso, o que também podemos ver atualizado no banco de dados. 59. Regras do Firebase: Agora, essa será a parte em que aumentaremos a segurança de nosso aplicativo no lado do banco de dados. O que faremos dentro do console do Firebase se você acessar banco de dados do Firestore e, em seguida, tivermos essa opção chamada regras. Isso nos permitirá adicionar algumas regras de segurança ao nosso banco de dados para determinar quem pode fazer o quê. Podemos definir quem deseja criar, ler, atualizar e excluir dados do nosso banco de dados, e podemos ser mais específicos sobre quais documentos ou coleções essas regras se aplicarão. No momento, nossas regras de banco de dados não são seguras. Se dermos uma olhada, temos aqui uma quantidade que corresponde uma determinada coleção de documentos em nosso banco de dados. No momento, isso está apontando para o ponto de entrada externo do nosso banco de dados. Em seguida, aninhados dentro, podemos adicionar mais correspondências para sermos mais específicos sobre quais documentos ou coleções as regras internas se aplicarão. Essa configuração atual de documento igual estrela estrela corresponderá a todos os documentos em todo o nosso banco de dados. Nosso banco de dados não é seguro, pois permite acesso total de leitura e gravação , desde que estejamos dentro um mês após a criação do banco de dados. Essa regra de apenas um mês é um recurso de segurança, então não se esqueça de desligar o acesso total. Isso protegerá novamente nosso banco de dados se esquecermos de voltar e ajustar essas regras. Para adicionar nossas próprias regras, o que faremos é remover essa combinação interna e começar a escrever nossas próprias regras. Vou remover isso e deixar a correspondência externa, que novamente aponta para nosso banco de dados completo. Em seguida, podemos criar uma partida aninhada. Começaremos com nossa coleção de pizzas, então /slash pizzas, e depois também teremos os pedidos e também os usuários. Também podemos adicionar essas regras. Então lembre-se de que qualquer um desses documentos de pizza é armazenado em um ID de documento exclusivo. Podemos colocar em uma variável e dar a ela o nome de ID do documento. Isso nos permitirá acessar o ID do documento dentro desta seção. Para pizzas, começaremos dizendo permitir leitura. Permitimos a leitura porque aceitamos que qualquer pessoa leia os itens do menu. No entanto, quando se trata de criar, atualizar ou excluir pizzas, elas precisam ser controladas. Também podemos agrupar essas operações. Podemos dizer permitir, criar, atualizar e também excluir. Desde que algumas condições sejam atendidas, só queremos permitir essas três operações se uma determinada condição for verdadeira. Essa condição é que eles sejam usuários administradores. A primeira coisa a fazer é verificar se o usuário está realmente autenticado. Podemos passar uma instrução if na qual podemos acessar o objeto de solicitação onde podemos acessar a propriedade off, e podemos verificar se isso não é igual a nulo. Isso significa que o usuário que está solicitando esses documentos específicos dentro de nossas pizzas está atualmente autenticado. Esse é o primeiro passo. Temos um usuário autenticado ou também precisamos acessar a propriedade de um usuário de seu administrador dentro do banco de dados. Podemos fazer isso usando um e comercial duplo, a corrente em uma verificação adicional. Podemos acessar uma função get fornecida pelo Firebase, que nos permitirá adicionar um caminho de arquivo a um documento específico. Aqui dentro, precisamos começar pelo caminho raiz. A correspondência mais externa, que está apontando para nosso banco de dados. Podemos copiar esta seção e colá-la nela. Então, assim como fizemos aqui, podemos adicionar o nome da nossa coleção. Queremos apontar para /users e, em seguida, um ID de usuário específico. Podemos acessar o ID do usuário atual a partir desse objeto request.auth. Logo após /users, podemos inserir uma variável com o símbolo do dólar, abrir os colchetes, solicitar.auth pessoalmente e depois acessar o uid. Isso nos leva ao documento específico que você deseja acessar. Logo após esses colchetes, acessamos os dados e, em seguida, a propriedade que é isAdmin, maiúscula A. Depois de acessarmos essa propriedade isAdmin, também queremos verificar se isso é igual a verdadeiro. Só para esclarecer, vamos fazer duas verificações aqui. Estamos verificando se, antes de tudo, o usuário está realmente autenticado, o que significa que ele fez login com sucesso. A segunda verificação é entrar na coleção do usuário e, em seguida, verificar se a propriedade isAdmin também está definida como true. Antes de prosseguirmos, vamos testar essas regras dentro do playground de regras. Podemos expandir isso e criar diferentes tipos de simulação para obter nossos dados, criar novos dados, atualizar e também excluir. A localização. Esse é o caminho que estamos verificando no momento. É /pizzas /DocId. Queremos testar isso com um usuário autenticado. Nosso provedor de autenticação é a senha e, em seguida, o Firebase UID. Esse é o ID do usuário que está fazendo a solicitação. Vou pegar isso. Sem sair desta página, vou clicar com o botão direito do mouse e abrir a autenticação em uma nova guia. Vamos copiar. Na verdade, entraremos no banco de dados, nos usuários. Este é um ID exclusivo. Vamos copiar isso e esse usuário é o administrador. Vou colar isso. Clique em Executar e faremos uma solicitação de obtenção. Aqui podemos ver que isso está destacado na coleção de pizzas. Qualquer pessoa pode ler esses dados. Esperaríamos que tudo ficasse bem. Mas as restrições residem quando criamos, atualizamos e excluímos dados. Para criar dados, otimistas nos deram um erro. Vamos dar uma olhada nisso. Isso está apontando para nossa correspondência no banco de dados. O banco de dados é um banco de dados, documentos e acho que isso só precisa de um símbolo de dólar, pois é uma variável. Ignorar. Também precisamos apenas que os colchetes regulares correspondam a este aqui para inserir a variável. Vamos tentar isso mais uma vez. Execute essa largura no Create. Isso é bom. Atualizar. Isso é bom. Lembre-se de que somos usuários do IsAdmin. Além disso, a exclusão funciona bem. Vamos mudar isso para o usuário que não está autenticado, então isAdmin é igual a false. Copie isso, cole isso. Estamos executando uma solicitação de exclusão. Isso é negado porque não somos administradores, mas ainda devemos conseguir nossos dados, pois qualquer pessoa pode ler nossas pizzas. Crie, deve haver uma falha. Finalmente, a atualização 2. Bom, então agora sabemos que isso está funcionando. Podemos repetir isso para outras coleções. Mas nossos pedidos, queremos que qualquer pessoa possa criar um pedido. Mas qualquer uma das outras três operações só deve ser executada por um usuário administrador. Vamos copiar essa partida. Em seguida, cole isso logo abaixo. Este é para nossos pedidos. Você também pode renomear essa variável se quiser. Por aqui, permitiremos que qualquer pessoa crie um pedido. Queremos adicionar algumas restrições quando estamos lendo, atualizando ou excluindo. As mesmas regras se aplicam. Queremos verificar se o usuário está logado e autenticado. Também obteremos a propriedade isAdmin da coleção do usuário. Tudo isso pode permanecer o mesmo. Teste isso. Isso são ordens. Isso é bom. Nós iremos para Create. Lembre-se de que qualquer pessoa pode criar um novo pedido e ainda estamos com o usuário, que não é administrador. Deve ficar bem. Agora podemos testar as outras três operações. Veja, isso é uma falha, conforme o esperado. Atualizar. Excluir. Depois, só para confirmar, acessaremos nossa coleção de usuários e pegaremos o ID do usuário, que é um administrador. Nós escolhemos um. Vou até o usuário que é administrador, pode fazer uma exclusão, uma atualização, uma criação e também uma leitura. A última coisa que precisamos fazer é combinar a coleção do nosso usuário. Eles devem permitir que qualquer pessoa crie uma conta para começar. Vamos criar uma combinação ou /users, passar a variável de docID. Então, queremos permitir que qualquer pessoa crie uma nova conta e também queremos que os usuários leiam seus próprios dados. Vamos permitir a leitura. Mas também vamos restringir isso. Também verificaremos se o usuário está autenticado. Cole isso. Além disso, para permitir que o usuário acesse apenas seus próprios dados, o que faremos é verificar se o usuário, que está disponível no objeto de solicitação é igual ao mesmo ID de usuário, que é passado para essa variável. O e ampersando duplo forma uma segunda verificação. Solicitação de acesso para autenticar o uid. Esse é o ID da pessoa que está realmente fazendo a solicitação. Queremos verificar se isso é igual ao ID do documento. Portanto, se ambos coincidirem, o usuário está lendo seus próprios dados, mas, assim como os usuários lendo seus próprios dados, também queremos permitir que um usuário possa ler os dados de qualquer usuário. , também queremos colocar isso entre colchetes e, em seguida, realizar uma segunda verificação. Além disso, permita que isso seja verdade se o usuário for administrador. Já sabemos como obter essas informações, e isso é com a função get logo acima. Copie tudo, desde o início até o final, onde verificamos se o administrador é igual a verdadeiro, e depois tenha o cuidado de colar isso dentro dos colchetes. Agora, isso sempre verificará se o usuário está autenticado e, em seguida, verificará se o usuário é administrador ou se está acessando seus próprios dados. Na verdade, isso precisa ser o operador OR do JavaScript em vez do AND, o que significa que qualquer um desses lados pode ser verdadeiro. A última a ser verificada é permitir a atualização e excluir funções se elas forem usuários administradores. Vamos permitir. Combine-os em seções de atualização e exclusão. Adicionaremos as mesmas condições de qualquer uma delas acima. Verificaremos se o usuário está logado e se ele também é administrador. Copie esta linha, cole isso, e agora estão todas as regras em vigor. Isso também pode ser estendido para permitir que os usuários também atualizem suas próprias informações , mas isso é bom por enquanto. Mas também inclui muitos códigos duplicados nos quais verificamos se o usuário é administrador com a função get. Podemos melhorar isso criando funções reutilizáveis. Vamos criar duas funções. Uma seria verificar se o usuário é administrador e, em seguida, verificar se o usuário está acessando suas próprias informações. Vamos colocar tudo dentro do fósforo externo. Coloque um pouco de espaço. Em seguida, criaremos uma função exatamente como faremos em JavaScript, então isAdmin e, seguida, uma segunda função chamada isAccountOwner. IsAdmin, este é o que usamos algumas vezes agora. Queremos copiar que a autenticação da solicitação não é igual a nula. Até o final da função get, copie isso. Vá para a função IsAdmin e, em seguida, queremos retornar esse valor, então cole isso. Isso significa que nossa função retornará um valor verdadeiro ou falso. Portanto, isAccountOwner, isso também precisa verificar se o usuário está autenticado, então retornaremos as solicitações que a autenticação não é igual a nula. Então, assim como fizemos na parte inferior com os usuários, também queremos verificar se o ID da pessoa que está fazendo a solicitação é igual ao ID do documento, então copie isso. Encaixe isso com os ampersanes duplos, cole isso. Mas lembre-se de que aqui estamos acessando o ID do documento. O ID deste documento só está disponível dentro desta seção, então o que precisamos fazer é passar a função, o ID e, em seguida, substituí-lo. Adicionaremos o ID deste documento quando chamarmos essa função. Estamos quase lá agora. O que precisamos fazer é remover todo esse código de cubículo e substituí-lo por nossas duas funções. O primeiro é o IsAdmin. Isso é verificar se o usuário está autenticado e também se é administrador, para que possamos remover todo o código da partida de nossas pizzas. Logo após essas declarações, remova toda essa linha, substitua-a por nossa função exatamente igual para nossos pedidos. Estamos verificando a mesma coisa. Corte tudo isso do lugar. Insira a função. A última etapa são nossos usuários, e isso usará essas duas funções. Para a leitura, recortaremos tudo depois da declaração if. Isso fará uso de ambas as funções. Se isAccountOwner, o ID será o ID do documento acima. Tudo é administrador. Isso executará as mesmas duas verificações que tínhamos antes e, para a solicitação de exclusão, moveremos tudo após as instruções if e simplesmente passaremos a função isAdmin. Agora isso parece muito mais limpo e muito mais fácil de ler. A última coisa é testar nossas condições de usuário dentro do playground. Em primeiro lugar, o local que estamos testando o caminho do usuário. Começaremos copiando o ID do usuário administrador. isAdmin é igual a true, cole-o. Este deve ser permitido, pois somos o usuário administrador. Também faremos a segunda verificação para ver se o responsável pela conta está fazendo essa solicitação. Mesmo que não sejamos administradores, vamos copiar o usuário não administrador. Cole no código. Essa simulação agora está negada. A razão pela qual isso é negado é porque, embora sejamos proprietários de uma conta, não estamos acessando nossos próprios documentos. Estamos apenas acessando qualquer documento genérico dentro da coleção do usuário. Para testar o acesso aos nossos próprios documentos, vamos mover a variável e colar a mesma ID de usuário que temos abaixo. Execute isso. Agora isso funciona, pois somos os proprietários da conta dos documentos que estamos verificando. Crie. Vamos experimentar isso. Isso funciona. Também podemos substituir a variável. Deve funcionar para qualquer documento. Vamos tentar mais um. Vamos tentar excluir. Execute isso como usuário não administrador, e isso deve falhar. Desliga. Copie o usuário administrador. Cole isso e este é permitido, pois somos um usuário administrador. Lá vamos nós. Parece que tudo está funcionando bem com nossas regras de segurança, e você também pode atualizar ou brincar com essas regras, se quiser. Mas, por enquanto, nosso aplicativo é muito mais seguro e publicaremos essas alterações.