#08 Como criar um dashboard do zero com angular e supabase | [Série] Criando um SaaS do Zero
Samuel Rezon builds an admin dashboard and barbershop storefront from scratch using Angular and ng-zorro components. He converts AI-generated React prototypes into Angular, setting up modules, routes, responsive grids, and reusable UI elements like cards, sliders, and forms. Supabase integration comes next.
Chapters
E aí, meus amigos, tudo bem com vocês? Samuel Rezon por aqui. Hoje a gente vai dar continuidade a nossa série criando um SaaS do zero com a Glossy Firebase. E a gente vai começar hoje o dashboard, a montar o dashboard, criar interface. E eu vou mostrar para vocês como que eu pego inspirações e como que eu crio interfaces do zero sem um designer ou sem uma pessoa para me ajudar com essa parte. Eu sei que para galera do back-end, cara, isso é muito difícil, mas hoje eu vou te mostrar algumas formas, algumas coisas que a gente tem aqui hoje, o Vibe Code, né, o Lovable e outras ferramentas que a gente tem hoje para pegar muita inspiração e transformar o código, né, e a interface que eles criam, transformar isso em um código em Angular bonito, escalável e fácil de ser reutilizado. Se você é novo por aqui, eu falo sobre Angular, Supabase, SaaS, carreira e várias outras coisas relacionadas à tecnologia aqui no canal. Deixa o seu like, se inscreve aqui, me ajuda a chegar a 2.000 inscritos, cara. Tô bem pouco de chegar a 2.000 inscritos, então peço você, compartilha esse vídeo com a galera, na comunidade no WhatsApp, a galera sempre fala, a galera tá sempre me perguntando: e o próximo vídeo da série, quando que vai sair? Então aproveita, compartilha esse vídeo com a galera que você conhece, com a galera que trabalha com Angular, que faz isso também, com o pessoal que é back-end, e bora pro vídeo, fechou? Bom, a minha ideia para as próximas etapas aqui, ó, a gente tá no vídeo 8 da série, então a minha ideia aqui hoje é pegar inspirações de UI para o dashboard, tá? A gente vai usar o Vibe Code, então a gente tem que aprender a usar essas ferramentas, e elas são muito boas. Para trazer inspiração para fazer as coisas. Eu não curto, cara, deixar o código todo e deixar aí a codar para mim. Eu ainda não curto isso, mas a gente consegue muito bem pegar muita inspiração. Então a ideia é pegar inspirações de vibe code. Eu vou mostrar para vocês, eu já fiz algumas coisas e eu vou mostrar para vocês inspirações que eu fiz, como que eu fiz, qual foi o processo para criar. E aí com isso a gente já vai criar nossa página de dashboard e criar a página pública. Então a ideia é criar somente a UI aqui. A gente não vai integrar com o Supabase, a gente não vai fazer isso, a gente vai fazer isso no outro vídeo. Então no outro vídeo a gente vai cadastrar e configurar as tabelas no Supabase, a gente vai integrar a UI que a gente criou com o Supabase. Então quando o cara configurar a— então quando o usuário configurar a barbearia dele e tudo mais, quando a gente clicar em salvar já vai salvar no Supabase. E aí a ideia também no próximo vídeo é a gente já desenvolver o timer que é o tempo de espera em real time. Então quando o usuário estiver na página pública, o barbeiro for lá e clicar no botãozinho de mais 5 minutos, já vai atualizar em real time na tela do usuário. Então a minha ideia vai ser agora mostrar pra vocês algumas interfaces que eu usei de Vibe Coding. Então eu usei o Bolt, o Lovable e o Firebase Studio. Todas elas eu mandei o mesmo prompt, eu fui no ChatGPT, eu peguei a descrição que eu tinha feito no primeiro vídeo, colei e falei: cria um prompt para eu enviar para o Lovable para ele criar esse sistema. E aí eu simplesmente peguei o prompt, mandei para o Bolt, para o Lovable e para o Firebase Studio. Os três me deram projetos em React. Eu não pedi para configurar com Supabase e tudo mais. Então projeto em React, somente a UI com as informações que eu mandei lá para o ChatGPT. Então ele criou um prompt, eu mandei para eles. Então esse aqui foi o do Bolt. Ele criou aqui uma parte de admin, então eu vou colocar admin123, que é a senha padrão. Então quando eu entro, ele já criou aqui para mim o painel administrativo, o status da barbearia. Eu posso fechar e posso abrir a barbearia. O tempo de espera, mais minutos, menos minutos, eu posso configurar aqui. Eu posso zerar o tempo e eu posso personalizar a página pública. Aqui eu posso colocar o nome da barbearia. A descrição, a logo e a interface. Salvei as configurações, voltei, e a gente tem também a nossa página pública. Então aqui, ó, tá 20 minutos o tempo de espera. Esse tempo, ele não— nenhum dos 3 fizeram um timer para ficar diminuindo com o tempo. Então ele me deu essa interface. O Lovable também fez algo bem parecido. Então o Lovable criou um admin, 1, 2, 3, 4, 5, 6, a tela de login. Depois ele me deu aqui, olha que legal, controle de fila, e que eu posso adicionar 5 minutos, eu posso zerar. Vou adicionar aqui mais 30 minutos, 1 hora. O status da barbearia, aberto ou fechado. E aqui, olha que legal, ele deu um preview da página pública. Então ficaria aqui a barbearia. Ele colocou aqui a parte de configurações, Barbearia Pereira. Aí ele já altera aqui automaticamente. E eu tenho a opção aqui também de ver a página pública. Então achei bem legalzinho do Loveable, ficou bem legal. Tem o tempo aproximado, tempo de espera aproximado, algumas outras informações aqui. Mas para mim, galera, o que ganhou mesmo foi o Firebase Studio. Eu achei que ficou bem legal, ele fez algo bem parecido com Loveable, mas eu achei que ficou com uma interface bem melhor, uma interface bem mais clean. Então tem o tempo status aqui Ele fez um slider, cara, eu achei isso aqui fantástico. Se o cara quiser dar um, um slider aqui rapidão, ó, pra ficar mais fácil, mas ele também pode adicionar mais minutos, menos minutos e um status da loja aqui embaixo. A loja tá aberta, a loja tá fechada, as informações da loja, nome da barbearia, logo, endereço, horário de funcionamento e serviços oferecidos. E ele criou a página pública. Então aqui tem a página pública, A logo da barbearia, o nome, aberto ou fechado, tempo estimado de espera, os serviços, o endereço e o horário. Cara, eu achei bem clean, achei bem tranquilo. Só que a gente vai fazer essa interface, a gente vai refazer isso aqui do zero usando o Angular e o ng-zorro. Vai ser bem legal e eu tô ansioso para começar a codar isso aqui. Então o que que a gente vai fazer, cara? Na nossa página de admin, quando o usuário for redirecionado, né, quando o usuário fizer o login, a gente vai criar isso aqui. Essas informações aqui mesmo, tempo, status e informações da loja, a gente vai fazer tudo isso aqui com o NGSOHO. E também ter uma página pública, a gente vai fazer isso aqui com as coisas do NGSOHO. Bora pro código então? Vamos lá! Primeira coisa, meus amigos, a gente está rodando o projeto, tá tudo aqui funcionando. A gente precisa— deixa eu dar um zoom aqui pra ficar fácil pra vocês. Enxergarem a tela e acompanharem. A primeira coisa que a gente vai fazer é criar nossa página. Então a gente tem o nosso módulo, né? Então a gente tem o auth, a gente tem o subscription, e eu vou criar uma nova página aqui chamada dashboard. Vamos começar pelo dashboard. A gente vai criar o dashboard.routes.ts. Ele vai ser bem parecido com esse carinha aqui do auth. Então não tem por que eu fazer outra coisa, eu posso só copiar dashboard, dashboard.routes.ts. E aí o que que a gente vai fazer? A gente vai criar aqui dentro do dashboard uma página chamada, uma pasta chamada pages, e aqui @schematic/components a gente vai criar um componente de dashboard, a página dashboard. Então dashboard, dashboard, deixa eu diminuir esse carinha aqui que tá bem grande. Eu costumo fazer dessa forma aqui, CSS, e aqui eu vou criar do tipo page. Então ele vai criar um dashboard.page.ts, tá? Então a gente tem aqui a página de dashboard e aqui eu vou /dashboard, dashboard.page. Perfeito. E agora a gente tem esse dashboard routes aqui e a gente precisa fazer o quê? A gente precisa adicionar mais uma rota aqui, ó. Então aqui vai ser um path dashboard, que o Copilot vem bonito trabalhando para a gente. Então aqui, ó, Layout. O que que o Copilot está mostrando aqui já, cara? Que seria legal a gente fazer um dashboard layout. Isso, isso é verdade, cara, não é ruim a ideia não, tá? Porque aqui a gente tem a parte de layout, aqui a gente tem um layout de alpha, e a gente, o ideal seria a gente ter um dashboard layout. Então já vamos criar aqui esse carinha, Schematics Component. Eu não costumo colocar dashboard layout, eu costumo chamar ele de shell layout. Então isso aqui que eu costumo fazer, tá? Então shell, o final aqui vai ser layout. Shell seria o esqueleto, tá? Então só para a gente ter algo aqui já funcionando, então aqui vai ser um path dashboard/core-layout shell shell layout children, a gente vai colocar o dashboard routes. E aqui, ó, vai ser o vazio. E aqui a gente vai colocar o dashboard path, redirect to dashboard. Outra coisa bem importante que a gente precisa adicionar aqui no— aqui a gente tem que estar adicionando um router module. E aqui dentro um router outlet. Por quê? Porque através disso que a gente vai instanciar, né, que o Angular vai colocar as outras páginas aqui dentro do nosso aplicativo. Show! Parei a aplicação, rodei de novo. Ela tinha dado uma bugada, acho que pelas rotas que eu adicionei, as coisas que eu fiz. Mas agora, guys, ó, se eu venho aqui e vou para página inicial, ele vai rodar o dashboard works aqui, ó. Então se a gente vem aqui no nosso carinha mbshell, a gente tem um mb-dashboard e tá rodando já a página de dashboard. Ele também tá rodando e colocando aqui o shell layout. É porque que a gente não tem nada, tá? Mas se por exemplo aqui eu vier e colocar um h1, pudim, deixa eu mostrar para vocês, esse pudim vai aparecer aqui, ó. Show? Porque a ideia é deixar o layout ser o esqueleto da nossa aplicação e a gente configurar ele para ele ficar centralizado. É o que a gente vai fazer, tá? Então a gente só vai configurar isso aqui para ficar centralizado e a gente vai trabalhar nas outras coisas. Então a gente vai colocar o painel de administração, gerencia a sua página aqui, e um botãozinho aqui para ver a página pública. Então vamos fazer já isso aqui, só que antes da gente fazer isso a gente tem que centralizar essas informações aqui. A gente vai fazer isso com shell layout. Vamos criar uma div aqui, prefiro chamar de container. E aqui eu vou container centralize the content. Então se a gente fizer isso, como que vai ficar? Ele vai ficar centralizado aqui, só que eu não quero isso, cara, eu quero que ele fica aqui para cima. Então eu vou tirar esse justify-content aqui e esse padding aqui eu vou deixar 1rem para a gente ter um padding ali. Deixa, pode deixar até 2, melhor. Show! Já temos o nosso, a gente já tem, já, a gente já tá com o nosso conteúdo centralizado. Só que esse conteúdo tá com width 100%. Tá. Então, por exemplo, se a gente vem aqui e coloca um background-color: red, você vai ver que ele tá na página inteira. Então a minha ideia é fazer aquilo que o Tailwind faz com esse carinha aqui, ó. Vamos achar aqui esse carinha aqui, ó, max-width, e a gente vai dar um mx-auto aqui. Então qual que é a minha ideia? A minha ideia é usar esse max-width aqui. A gente pode, eu acho que a gente pode até tirar esse negócio daqui, tá? E a gente vai dar um margin: 0 auto. Vamos ver aqui como é que ficou essa parada aqui. Beleza, funcionou. A gente tem um max-width ali e tá tudo funcionando. Então nosso texto background-color red, tá centralizadinho aqui na página. Beleza, a gente não precisa deixar o texto centralizado aqui, a gente vai trabalhar, a gente pode trabalhar isso depois, mas a gente já tem algo centralizado aqui. Muito simples, a gente precisa usar o display flex aqui, as coisas que o Copilot colocou aqui, um height 100%, width 100%, padding 2rem, max-width, margin: 0 auto. E agora eu vou tirar esse background color aqui. Já temos nosso conteúdo centralizado. Agora a gente vai trabalhar na nossa dashboard. Então, painel de administração e depois gerencie a página pública da sua barbearia. E aí aqui, vamos lá, vou botar um H1 painel de administração e aqui eu vou botar um span gerencie a página pública da sua barbearia. Vamos salvar e ver como é que isso aqui ficou. Ficou assim, certo? Agora eu vou mostrar para vocês o poder do ng-zorro e coisas que vocês não sabem do ng-zorro. Então eu vou importar o ztypography module, tá? Aqui eu vou colocar nztypography, nztype secondary. Salvei, voltei. Olha o que que já tem aqui, ó, a gente já tá com o texto com tipo secundário. O H1 ele vai ficar com essa margem, então a gente pode vir aqui e colocar H1 margem 0. E a gente já tem aqui o nosso painel de administração e o gerencie sua barbearia. Do outro lado a gente vai ter um botãozinho de ver a página pública. Então vamos fazer isso aqui já com uma mágica também do NG-SO. A gente vai usar o nz-flex, module, tá? Eu vou usar aqui nz-flex. Pra gente não precisar ficar utilizando aquelas coisas, eu vou dar um nz-justify space-between, align-center. Aqui a gente vai ter uma div, vai ser aí a primeira div, e E depois eu vou ter um botão, button, vai ser ver página pública, ver página pública. Tem meu outline que eu não quero, eu não vou deixar ele ser primário. E aí que eu preciso importar o nz-button, button-module, nz-icon. Mod. Perfeito. Voltando aqui, olha que maravilha, a gente já tem o botãozinho aqui do lado direito, o painel de administração e o botão já tá com o nz-flex. Isso aqui, meus amigos, é uma maravilha do ng-zorro. Isso aqui é o que o Material não tem, cara. Olha lá, nz-flex, você passa tudo aqui. Normalmente a galera, cara, fica usando o Tailwind para isso, para fazer isso aqui, para fazer a parte de grid também, para fazer parte responsivo. A gente, eu vou mostrar para você isso aqui como que eu vou fazer isso aqui, tá bom? Mas a nossa parte de cima já tá feita. Agora a gente vai fazer esse carinha aqui, ó, que o ng-zorro também tem, tá bom? A gente vai usar aqui ng-zorro. Deixa eu abrir aqui a documentação dele. E ele chama segmented, nada mais do que isto aqui. Então eu vou ter que o meu segmented aqui embaixo, tá? Eu vou importar aqui NZ Segmented. Deixa eu pegar o carinha aqui, NZ Segmented Module. Vamos deixar o Copilot importar ele. Beleza. Aqui eu preciso das minhas Options e do HandleValueChange. Então vou importar isso aqui, SegmentedOptions. E aí, qual que é o que a gente tem mesmo? Tempo e status, tempo e status. E por último, um for, vou colocar configurações. Tá, aqui ele vai ter o handle value change. Eu vou colocar aqui o segmented options e já vou mostrar para vocês como que tá ficando aqui, ó. Beleza, já apareceu aqui o segmented. Ele deixou esse carinha dessa forma. Que que eu vou fazer aqui, ó? Vou dar um nz-flex aqui de novo pra gente ter isso aqui. Eu vou colocar aqui nz-vertical pra ele ficar com o flex-column, nz-gap small. Aí ele já deu uma margem aqui, nz-gap middle. E aí o que falta no segmento é o nz- NZ Block. Salvei. Eu vou abrir aqui meu carinha e, ó, tempo, status e configurações, tá? Quando a gente clica, ele muda aqui para marcar qual que ele tá. Beleza. Uma coisa que a gente pode fazer para melhorar isso aqui é criar um menu. Dashboard, segmented options, beleza. E aqui a gente vai colocar eles aqui, e aqui quando ele mudar eu vou selecionar o selected option, tá, beleza. Então já temos essa parte aqui. Do segmented. Agora a gente vai criar um card para a gente fazer esse carinha aqui. Então a gente vai vir aqui novamente, nz-card-module, beleza, nz-card. E aí no nz-card eu vou ter o tempo de espera e status e ajuste do tempo, vai ser a mesma coisa desse carinha aqui, ó. Mesma coisa, é que a gente vai copiar tempo de espera e status, ajuste do tempo. Salvei, abrir aqui, ó, já tá funcionando, já tá, já tá fluindo aqui. Beleza, já temos o tempo de espera, o status. Agora a gente vai colocar um tempo de espera aqui de 25 minutos. Spam, vamos colocar um spam de tempo de espera. Pegar o texto aqui, spam tempo de espera. Vamos fazer só o UI aqui, como eu falei, a gente tá fazendo aqui só a UI, é o que eu costumo fazer nos projetos, tá? Então eu deixo a UI pronta primeiro, para depois começar a mexer na parte de TypeScript, integração de banco de dados e tudo mais, tá? Mas aqui a gente vai mexer na nossa UI. Tempo de espera 5 minutos, beleza. Que a gente vai ter que aumentar esse texto aqui um pouquinho, e eu vou ter aqui um botão aqui e um slider no meio. Como que a gente vai fazer isso? Vai ser bem simples. A gente vai fazer um outro nz-flex. Nesse caso aqui vai ser um nz-gap-sm, nz-align-center, button— menos Não vai ser large e não vai ser primary. E a gente vai adicionar, a gente vai voltar aqui no nosso ng-zorro e pesquisar pelo slider, e a gente vai adicionar o slider. Simples assim, ok. Nesse slider. Então a gente tem um slider aqui e agora a gente vai ter um slider aqui também. Aquele ficou assim porque, porque a gente precisa no slider adicionar um widget de 100%. Aí, que maravilha! Show! Então vamos aqui no nosso NZ Slider adicionar um widget de 100%. Por enquanto a gente já tem os dois botõezinhos aqui, o slider, o slider no jesu é bonitinho, né? Aqui eu vou colocar um H3, o tempo de espera, tá? Melhorou um pouquinho. Agora a gente tem aqui o diminuir e o aumentar. Show! Então a gente tem 2 quadrados, tem um quadradinho aqui e um quadradinho aqui. A gente vai fazer isso aqui também. Então a gente já tem esse carinha aqui, vamos criar uma— eu já criei um ng-flex já. Então eu já tenho um nz-flex com align-center, beleza. E aí eu vou ter um span, um div com span diminuir, nz-type, E aí aqui eu vou ter 3 botões. nz-flex, nz-gap-small, align-center, button, menos 5 minutos. 10 minutos, menos 15 minutos. Isso aqui é por causa da fonte que eu tô usando, tá? Mas aqui, ó, já temos esse carinha aqui. E aí aqui eu vou dar um nz-justify-center. Não, é aqui no caso. Nesse Align. Beleza, show! Temos essa parte aqui e agora a gente vai fazer a mesma coisa, só que para aumentar. Beleza, aumentar aqui não vai ser o Danger. Vai ser um botão normal mesmo. E aí, o que que a gente precisa fazer, cara? A gente precisa lembrar que a gente também tem a versão responsiva, tá? E como que a gente lida com a questão de responsividade aqui com o ng-zorro? Como que eu faço? Normalmente eu vou usar o ng-grid-module. Isso aqui é muito legal, cara, do ng-zorro. Presta atenção nisso aqui, ó. Se eu venho aqui, ó, grid. O ng-zorro tem um sistema de grid de 24 colunas, tá? Então eu consigo adicionar um nz-row, nz-col e colocar também a parte da responsividade, quantas colunas eu quero que ele tenha em tal lugar. Então aqui, ao invés de eu usar um nz-flex, eu vou usar um nz-row. Beleza, aqui eu vou usar o nz-gutter, e aqui eu tô falando que quando o gutter é o espaço, o espaçamento das colunas, tá? Então aqui eu vou usar o nz-col para ter esse carinha, e aqui a mesma coisa, nz-col, só que aqui eu vou colocar o nz-lg-12. E o nz-xs-24. Que que eu tô falando, cara? Quando tiver num computador grande, você vai usar metade das colunas. Então a gente tem 24 colunas, né, de resumo. Então eu vou usar metade. Quando eu tiver no mobile, eu vou usar 24, e ele vai ficar um debaixo do outro. Isso aqui é lindo! Olha que coisa maravilhosa que a gente fez aqui! Outra coisa que tem aqui, ó, ele não tá ficando no 100%. Porque a gente, como a gente tá colocando um display, um nz-flex, né, aqui nesse carinha, se a gente colocar um width 100% aqui, ó, você vai ver que ele vai preencher. Então é isso que a gente precisa fazer, tá? Uma coisa que a gente pode fazer é colocar alguns utilitários, que a gente já tem até o w-full aqui, ó. Então só alguns utilitários que facilitam a nossa vida, a galera do Tailwind curte isso para caramba. Então, pronto, pronto, já temos esse carinha aqui. E quando a gente vier para o mobile, ó, que da hora, já mudou bastante coisa aqui, né? Então lembra como é que tava zoado quando a gente não tava usando nz-col? E aí o nz-col faz isso, cara, ele vai literalmente deixar, ó, que ele tá um debaixo do outro. Quando ele passa do LG do nz-lg, ele já coloca um do lado do outro. E dessa forma que a gente trabalha no ng-zorro com responsividade, tá? Muito simples. Criou uma, uma linha e criou as colunas aqui, colocou as colunas. E por último, status da loja, a gente tem um nz-divider aqui que eu vou colocar também. Então eu vou importar aqui nz-divider-module, depois aqui nz- um divider. E aqui a gente vai ter o divider bonitinho e a gente vai ter o status da loja, que vai ser um h3, status da loja. E aí que a gente tem um switch do ng-zorro. Gente, eu já sei tudo de cabeça, cara, todos os componentes do ng-zorro eu já sei de cabeça. Talvez para você seja um pouco difícil Mas para mim eu já sei literalmente, cara, todos os componentes do NGZorro, eu sei de cabeça. Não vamos esquecer de colocar o nz-flex ali nele. Então, ng-switch-module, eu vou importar esse carinha aqui, @nz-flex. Pediu o Copilot para trabalhar para mim aqui. Beleza, boa, Copilot. Então vamos ver aqui status da loja. Beleza, nz-vertical div aberta. Vamos botar outro nz-flex aqui, ó. Beleza. Miro aberta. Beleza, perfeito. A loja tá fechada. Então a gente já criou essa parte de tempo e status, a UI, como vai ficar quando a gente adiciona ou diminui um tempo. Beleza, depois a gente já criou isso aqui. Agora a gente vai criar a aba de configurações, tá? Aqui, cara, a gente criou em um lugar só. Então a ideia é a gente usar isso aqui, colocar num componente separado, mas a gente pode fazer isso depois, tá? Vou fazer tudo aqui na mesma página porque eu tô só mexendo na UI. Então aqui eu vou colocar um if selectedOptions.timeStatus, e aí eu vou precisar importar esse carinha aqui. Quando a gente usa enum, ah cara, enum, eu gosto de colocar isso aqui, tá? Ruído do início, coisa minha, tá? Então quando for o time status a gente faz isso, senão a gente vai mostrar outra coisa aqui que não é isso aqui. Eu vou pegar essa mesma ideia daqui, informações configurações da barbearia. Beleza. E aí, aqui agora, cara, é formulário normal, tá? E vocês lembram que a gente tem o formulário dinâmico, certo? E a gente vai usar esse formulário dinâmico aqui, não tem por que a gente não utilizar. Beleza, então nem vou colocar esse form aqui, eu já vou baixar ele aqui, ó, Dynamic Form Component, tá? E aqui eu vou colocar MB Dynamic Form, já vou fechar ele aqui, já vou pegar config aqui, vai ser o config form. E agora a gente vai ter esses carinhas aqui, ó. O que que eu faço? Eu coloco isso aqui, aqui. E aí aqui a gente vai criar label, nome da barbearia, name. Vamos ver isso aqui funcionando. Config, config form. Gente, olha isso aqui, cara! Que dia que vocês criam um formulário nessa velocidade aqui, meus amigos? Que dia que vocês criam um formulário nessa velocidade só com Dynamic Form? Size, vou colocar um size 24 aqui. Então se a gente vem aqui, ó, nome da barbearia, perfeito, mano. A gente Vai para os próximos aqui então. Endereço, horário de funcionamento. Aqui a gente vai dar um hint. Perfeito! Olha isso, mano! Olha isso! Olha isso, meus amigos! Olha isso, velho! Meu Deus, mano! Meu Deus! Meu Deus! Olha isso! Olha isso, cara! Deixa eu tirar o zoom aqui. Ele tava com zoom para menos aqui, cara. Mas olha isso, meus amigos, que a gente criou aqui. Tão rápido, tão fácil. Mão da Barbearia, pudim, paçoca, 1, 2, 3, 1, 2, 3, 1, 2, 3, separados por vírgula, tá? Depois aqui vai ser só salvar no Superbase e acabou, meus amigos. Aqui a gente vai colocar, vai pegar um value changes aqui para toda vez que ele alterar ele já salvar automaticamente no Superbase e o cara não ter nem que se preocupar com isso aqui. Tá, então já temos aqui o status da loja, fechado, aberto, e a gente precisa criar a nossa página pública. Vamos criar ela agora então. Antes de mais nada, já vamos comitar isso aqui, cara. Eu tô usando agora esse carinha aqui mesmo no Copilot para fazer meus commits, tá? O Code CLI, aquele que eu tinha configurado, ele tá com— às vezes ele tá dando bug e eu recebi um e-mail falando que eles vão acabar com o plano gratuito. Então já não tá nem funcionando mais essa bênção. Os cara criam um negócio para não funcionar mais. Isso aqui tá bom. Edit your layout dashboard page. Perfeito, beleza, tá comitado. Agora a gente vai criar a nossa página pública, que vai ser a página que a pessoa vai entrar, vai ver e vai acessar aqui essa página pública. Beleza, aqui vai ser Coisa rápida também. Então, para isso, a gente vai vir aqui em public, app, domain. E aí, aqui a gente vai precisar criar uma outra rota, certo? Porque a gente não vai deixar essa rota dentro do dashboard, a gente vai deixar essa rota aqui separada para nossa aplicação. Para quando a gente acessar essa rota, a gente tem que passar um ID ou alguma coisa para essa rota. Então esse ID ele pode ser passado tanto por aqui quanto pelo domínio. Eu não sei se a gente vai fazer isso, por exemplo, ah, eu vou configurar o domínio da minha barbearia, mas eu vou passar um ID para essa rota para ele acessar isso aqui. A gente pode usar esse shell layout da mesma forma, mas de qualquer forma a gente precisa criar uma nova página aqui. A gente vai criar uma página chamada store storefront, seria vitrine, tá, a vitrine da loja, que as pessoas estão vendo. Então storefront.routes.ts, mesma história do dashboard, cara, mesma historiezinha. Que eu vou chamar storefront. A gente vai criar aqui dentro do storefront uma pasta chamada pages e eu vou criar uma página Component StoreFront.page, page, generate. A gente tem a nossa página de StoreFront, StoreFront page, tá? Beleza, a gente vai adicionar nas rotas aqui também. View, prefiro chamar de View ou qualquer outra coisa que a gente pode pensar aqui, só um V para ficar uma URL mais simples, tá? Mas por enquanto eu vou deixar em View, tá bom? E aí que ele vai chamar o StoreFront, StoreFrontPage, e esse StoreFrontPage ele vai esperar um ID. Tá, esse storefront page ele vai esperar um ID. A gente vai vir aqui, input ID. Vamos só ver aqui se esse storefront vai estar funcionando, tá, que viu, 1, 2, 3, beleza, storefront works. Ele não pegou o ID. Por que que ele não pegou o ID? Porque o Angular, a gente tem que passar uma propriedade, Angular Input Routing ID. A gente tem que passar esse carinha aqui, ó. Não é só fazer uma configuração do zero, não. A gente precisa passar alguma esse carinha aqui, ó, lá no nosso provide, tá? Então lá nossa aplicação eu vou dar um provideRoutes aqui, tá vendo? Eu vou passar esse carinha aqui, ó, withInput, withComponentInputBinding. Isso aqui faz com que a gente consiga passar, né, esses inputs do ID aqui. Precisa ter o mesmo nome, tá? Então eu tenho ID aqui, esse ID aqui E agora a minha aplicação já vai estar pegando o ID. O Angular facilitou bastante a nossa vida com esse carinha aqui. Então beleza, a gente já tem o nosso ID quando a gente passar. Se não passar, não tem problema por enquanto também não, tá? Mas aqui ele não vai aceitar, né, essa nossa rota aqui. Eu só vou adicionar uma outra rota aqui vazia. Pra ele mostrar esse carinha aqui por enquanto. Mas a gente tem um view aqui, a gente vai criar a interface desse carinha aqui agora. Então vamos lá, um card normal no nosso storefront page. A gente vai importar nz-card-module. Aqui vai virar nz-card. A gente já tem um cardzinho aqui. A gente precisa do título e de uma tag. A gente vai usar um nz-tag aqui para a gente trabalhar nesse card. Então eu vou colocar um H1, a gente vai por enquanto aqui só fazer o mock desses dados. Eu vou usar aqui um nz-tag-module e aqui embaixo vou usar nz-tag, nz-color-success aberto, tá bonitinho. Aqui. Então aqui eu vou dar um nz-flex. Isso aqui é coisa nova do Angular também, tá, guys? Eu tô conseguindo importar por aqui do HTML. Isso aqui tá bonito, tá? Isso aqui tá bonito. Eu só vou tirar o h1, margem 0 aqui, ó. Que que o Nijazor tem de legal, cara? Ele tem esse badge aqui, ó, que é como se fosse um status, tá? Eu gosto bastante de usar esse aqui, uso bastante no Ministério. Então eu vou exatamente usar esse carinha aqui para mostrar esse status aqui no status de aberto. Então eu vou colocar um badge de status aqui, nz-badge. Ele não tinha usado no projeto ainda, ele dá esses bugs mesmo, mas quando a gente vê aqui, a gente vai ver o badge. Pronto, olha que da hora, velho! A gente vai colocar o tempo de espera estimado. Carro. Esse carinha aqui, esse aqui eu vou colocar uma div. Aí que a gente vai ter uma outra div com um, que a gente vai ter aqui mesmo, tempo de espera estimado, assim, tempo de espera estimado. Que eu vou importar o Typography, NZ Typeography module, Z-type. Perfeito. Uma coisa que eu posso fazer aqui, que eu costumo fazer quando eu quero adicionar um espaço a mais, ó, tempo de espera estimado. O h5 não ficou legal, beleza. Tempo de espera estimado, o meu nz-card, vou colocar um width aqui 70%. No host display flex, align-items center, justify-content center. Beleza, tá centralizado agora. Tem medo de centralizar as coisas? Não, sou front-end, eu sei centralizar uma div, tá, guys? Mas beleza, tempo de espera estimado. Agora a gente vai adicionar esse carinha aqui, ó, de 55 minutos. E eu acho, cara, Deixa eu pensar aqui. Eu acho que o ng-zorro, ele tem alguma coisa legal para a gente mostrar números, cara. Só preciso achar aqui, ó, statistics. Eu vou tentar usar esse statistics aqui, cara. Vamos ver como é que vai ficar. Então aqui eu vou comentar e aqui eu vou colocar um statistics, tempo de espera estimado. Quando eu falo com vocês, cara, que o NG-Zorro é bom, vocês duvidam, mano. Vocês só tem que saber usar o NG-Zorro, cara. Vou importar o Common Module aqui para ele importar os pipes do Angular. E aqui a gente já tem um carinha ali, ó, o senhor. Olha isso, mano, olha isso, velho. Se eu colocar aqui a 55 Oh, ele tem, olha isso, mano, ele tem um NZ Countdown, tá, tá. Olha, olha isso, mano, olha isso, olha isso, olha isso, olha isso, olha isso, meus amigos, olha isso. Quando eu falo com vocês que o Jesus é foda, velho, vocês duvidam, mano. Nossa, mas vocês, eu sei que vocês duvidam, cara. É o deadline. Nesse deadline aqui eu passo a data. Então aqui eu vou vir e colocar deadline. Aqui ele tá passando uma data, passa uma data porque ele já calcula automaticamente o tempo. Então eu não preciso, meus amigos, velho. Meu Deus, mano, meu Deus, meu Deus, eu fico muito empolgado de usar o NG-Zorro, cara. Vocês não têm noção, bicho. Vocês não têm noção. Vocês não têm noção quanto que eu fico empolgado de usar o Ingesor, cara. Meu Deus, mano. Aí aqui o que a gente vai precisar fazer, né, fazer a lógica depois, cara, que a gente vai fazer um outro vídeo, tá? Então vai ser a lógica de, cara, o tempo de espera, 55 minutos. Então a gente vai vir aqui calcular, cara, add 5 minutes. Então aqui, ó, 55 minutos. E aqui o usuário já vai ter um tempo de espera estimado. Nossa, cara, o Endezor é muito bom, velho. Meu Deus, beleza, guys, beleza. Aqui a gente vai ter um divider. Então vamos lá, esse aqui vocês já estão cansados de saber, beleza. E a gente vai ter os nossos serviços de a gente pode usar div, a gente pode usar section, vocês quiserem, cara. Nossos serviços, nz-grid-module, tá? E aí aqui a gente vai ter um nz-row com nz-gutter 12, 12, nz-col, nz-lg-12, nzxs-24, nz-card, pode ser até um botão, cara, nz-type-text, perfeito. Eu não tenho nz-button importado aqui, perfeito. Tá, não vai ser o type text, vai ser o type normal mesmo. NZ Block, perfeito. Aí, ó, então tá certo, cara, os nossos serviços. Por último aqui, mais um divider. Aí eu vou ter o endereço, eu vou ter o horário. Então vamos adicionar esse carinha aqui, vai ser um NZ Card, endereço, vendedor principal. Como eu coloquei o card lá, ele vai ficar bugado ali, tá? Só botar um text center aqui nos lugares que eu quero, porque eu não quero que fica com text center em todos. Beleza. Se eu não me engano, cara, no nosso card— bicho tá ficando longo, viu, guys? Mas eu sei que vocês gostam desse tipo de conteúdo, cara. Eu tava doido para gravar isso aqui, mano. Nz-card-meta, nz-avatar, exatamente isso aqui, ó. Então aqui no card-meta eu vou colocar um ng-template e aqui nz-avatar-card-icon. Dá uma olhadinha aqui. Eu não importei o nz-icon aqui. Aí, perfeito. Tá indo, guys, tá indo, tá ficando bom, viu? E vai ser a mesma coisa para o horário. Perfeito. Aqui eu vou só adicionar um nz-flex. Tá feito, meus amigos, tá feito! Olha isso, guys, tá bonito! Tempo de espera estimado Pô, mano, esses nossos serviços poderia ser um NZ Card assim também, mano. Cadê nossos serviços? E aí aqui eu teria os serviços. Vamos ver, ó, que da hora! Olha que da hora! Então eu vou tirar esse carinha daqui. E aí deixa tudo padronizado, pô. Nossos serviços: corte cabelo, barba. Beleza. Endereço e horário de funcionamento. E aí aqui no nosso dashboard a gente vai tirar isso aqui, ó. Outra coisa que a gente pode adicionar aqui só para adicionar esse carinha aqui também para vocês verem. Olha aí, ó. Ai, gente, mexer aqui no Jesus é bom demais, velho. Meu Deus. Aqui seleciona fotinha e já vai. Depois a gente só subir para o Super Base, coisa mais simples do mundo, vocês vão ver. Então, meus amigos, já temos É que, ó, ver página pública. Deixa eu só alterar isso aqui no nosso dashboard por módulo. E aqui no ver página pública, alter link, viu? Perfeito, show! Então nós temos já a parte do nosso painel de admin que a gente pegou da nossa inspiração. Então se eu voltar aqui, a gente já tem o nosso painel de admin onde o cara vai poder, através daqui, né, no celular, no tablet ou qualquer lugar, adicionar essas configurações, essas coisas. Painel de administração tá bugado aqui, ó. Aqui eu vou dar um nz prop igual, pronto. E aqui vou dar um nz-gap. Então ele já tá funcionando a responsividade também, tá tudo funcionando aqui. A parte de configurações também já tá responsivo, que não tem muito segredo. E a nossa página aqui Já tá também, ó, tá bugado. Por quê? Por causa desse carinha aqui, ó, que a gente colocou esse width de 60% aqui, ó. Então aqui a gente pode deixar assim. Quando tiver no computador não tem problema ficar assim não, vejo problema não, tá? Mas é isso, meus amigos, já temos bastante coisa, a gente já tem bastante coisa aqui. Eu vou já comitar essas coisas aqui. Beleza, comitado, subir. Tá tudo funcionando. E aí no próximo vídeo a gente vai mexer no backend do frontend aqui, vai deixar isso aqui tudo funcionando, tudo funcional, e integrar com o Supabase e fazer um real-time. Fechou, meus amigos? Cara, aula foi muito longa, bastante conteúdo, bastante coisa. Foi um live coding real aqui de como que eu faço, como que eu mexo no NGSO, como que eu eu trabalho, como que eu crio interfaces. A gente literalmente, cara, transformou uma interface React aqui que a gente tinha, né, pra Angular com o NgZorro. Vocês viram como que é simples, como que é fácil fazer essa parte responsiva do NgZorro e trabalhar com responsividade, trabalhar com os componentes. Eu sei que não é fácil, eu já tenho tudo de cabeça, então já, como eu já trabalho com isso há muito tempo, já fica muito mais fácil na minha cabeça, mas com o tempo vocês vão entender como é que funciona. Fechou, cara? Se você gostou de ver, você tá até aqui, meu amigo. Se você tá até aqui e você não deixou o like ainda, pelo amor de Deus, deixa o seu like. Se você não é inscrito no canal, se inscreve, porque você assistiu uma aula bem grande de um conteúdo bem denso, conteúdo bem trabalhado. Isso aqui você não vê em outros lugares. Então deixa o seu like, por favor, se inscreve no canal e compartilha com a galera. Fechou? Até o próximo vídeo, valeu!
