Sua Primeira Aplicação Full Stack com Banco de Dados e Next.JS 14

Sejam muito bem-vindos a mais um vídeo aqui no canal do YouTube Hoje nós vamos fazer a nossa primeira aplicação com banco de dados utilizando nextjs numa aplicação ftech dentro do nextjs com banco de dados e eu tenho zero planejamento aqui Tomara que dê tudo certo na aplicação a gente vai descobrir junto se vai dar certo ou não que eu não tive tempo de planejar vou precisar sair daqui a pouco E eu tô gravando aqui um vídeo no YouTube vou tentar ter zero corte se eu espirrar espirrou né vou tentar ver se vai dar certo sei

se eu tô com tanta coragem de fazer um vídeo sem nenhum corte mas vamos lá então eu vou sem mais delongas eu vou compartilhar aqui a tela do meu computador eu já estou aqui é prontíssimo pra gente começar a trabalhar vou trazer aqui o terminal pra gente criar uma aplicação vou criar aqui no desktop do meu computador e a gente Vai eh planejando e executando a aplicação aqui ao vivo e os erros a gente vai resolvendo também aqui ao vivo então eu vou criar então vou chamar aqui o npx Create tro next tro app @

latest ah eu imagino que você tenha aí um um conhecimento de react de nextjs mas se você não tem dá uma olhada na aplicação vai entendendo mais ou menos a organização que isso pode te ajudar também a entender sobre e aplicação se Você quiser por exemplo lé faz um projeto como se fosse o primeiro projeto na vida de um programador deixa o comentário aí que a gente pode fazer um vídeo sobre isso esse vai ser o primeiro projeto com banco de dados na vida de um programador seria aqui talvez aqui um mini crud pra gente

fazer vamos ver se dá certo Mara que D Então vamos lá npx Create next app eu vou colocar e app traço e BD de banco de dados eu vou colocar Enter aqui vou querer usar typescript sim es link sim ter o índice SS sim src sim app route Sim posso colocar não aqui tanto faz e ele vai criar a nossa aplicação em paralelo eu vou abrir aqui o browser deixa eu abrir aqui um uma aba e nós vamos eh para dizer que eu não tenho planejamento deixa eu fechar aqui as outras coisas que estavam abertas

aqui deixa eu fechar esse figma também ah essa aplicação Também é tudo ao vivo Então vou fechando aqui as coisas vou fechar essa aplicação também tem um monte de coisa aberta e para dizer que a minha inspiração tá ela veio vou trazer aqui para cá ó ela veio a partir daquele repositório de app ideas eu vi eu entrei agora vi your first DB App então aqui provavelmente é uma coisa diferente tal ele mostra aqui alguns códigos não vai ser o que eu vou usar como referência pra aplicação mas quem não conhece esse repositório no Github

é um repositório muito legal com várias ideias de projetos e quem sabe eu Peg algumas dessas ideias aqui e aplique eh durante aqui alguns vídeos no formato um pouco mais ao vivo Embora esteja gravando esse vídeo a ideia é que ele não tenha edição nenhuma Beleza eu vou usar como biblioteca pra gente trabalhar a parte de persistência o prisma tá e eu vou entrar aqui em get started pra gente iniciar e deixa eu ver aqui quick start vou Entrar aqui ele vai dizer pra gente criar aqui um projeto Hello Prisma tá eu tô criando o

projeto com o nextjs aí ele vai pedir para configurar o typ script iniciar o Type script e vou instalar o prisma que é exatamente essa linha aqui então essa linha eu vou precisar para gente colocar aqui no nosso projeto então é app BD de banco de dados no Raiz eu vou abrir aqui o projeto Ele criou um projeto com Nextjs E se eu Viner aqui e der um npm Run Devin ele vai rodar o projeto na porta 3000 e a gente pode aqui na porta 3000 ó local host 3000 projeto foi criado legal o que

que nós vamos fazer eu vou configurar aqui a parte de banco de dados e aí a gente pode tem uma ordem necessária já que não tem aqui Um uma um planejamento a gente poderia começar pela interface mas eu vou só instalar aqui a dependência do Prisma já pra gente já ter o prisma configurado Então colocar aqui ó npm instal Prisma save Dev para ele instalar e eu vou usar o o SQL Lite aqui e vai configurar o SQL dentro do Projeto vai ficar como arquivo dentro do projeto inclusive se você salvar os dados mandar isso

pro repositório você vai ter o banco de dados dentro do seu repositório digamos assim tá então se a gente olhar aqui nós temos Deixa eu só ajeitar aqui as telas eu vou colocar o browser para cá e Aqui nós temos a nossa aplicação e o próximo Passo seria criar aqui um modelo por exemplo poderia criar um modelo de usuário poderia criar aqui um modelo de post e tal vou criar um modelo de usuário pra gente salvar usuários por exemplo ID nome e-mail e poderia ter até a senha também seria não seria ruim aqui pro nosso

processo Então vou voltar aqui pro pro nosso visual Studio code é Prisma tá E outra coisa que a gente pode parecer digamos assim falso né não seria a palavra falso né mas pode Trazer uma uma falsa sensação essa seria a forma de se expressar uma falsa sensação com relação a projetos eu pelo menos não decoro absolutamente tudo que eu preciso fazer então por exemplo Ah eu vou criar aqui eh um modelo dentro do Prisma eu não vou saber de de cabeça absolutamente todas as possibilidades possíveis de como criar modelos aí você tem a documentação aberto

tal isso é super comum quando a gente tá gravando um vídeo pode dar ele já trouxe até com Post aqui né ó parece que ele tá lendo o que eu tava querendo colocar mas o fato é que quando a gente traz aqui no vídeo tem normalmente um planejamento por trás não é o caso do vídeo de hoje tá essa outra tela aqui tá com Ah um uma biblioteca de componentes aberto tem aqui Um date picker do lado né mas não tem eh tá aqui o o que eu tô visualizando no outro monitor né não tem

nenhum projeto aqui desse outro lado aqui nós temos o o O OBS gravando então Quando a gente tá num projeto e aqui eu vou colocar o name o nome como obrigatório quando a gente tá trabalhando num projeto real ali você tá sempre com o Google aberto pesquisando alguma coisa lembrando Relembrando de uma sintasse específica então eh isso aí eh faz parte do processo de desenvolvimento não Ache que todo mundo sabe tudo decorado e faz tudo de cabeça não a gente faz usando ali as ferramentas eh no dia a dia tá só vou Vou colocar aqui

em português e-mail Vou colocar aqui nome e vou colocar eh semha é né senha Beleza então tem um ID que vai ser um um ID único na nossa aplicação tá o e-mail é único e o nome e a senha e a gente pode pedir para gerar aqui uma uma cena na nossa própria aplicação acho que vai dar certo beleza nós temos aqui o nosso usuário e eu vou chamar aqui de usuário para não ser user Beleza beleza nós temos o modelo usuário ID e-mail nome e senha olhando aqui na Documentação se a gente seguir ele

vai pedir para eu rodar aqui para que ele Rode o processo de migration O que que significa migration né E outra coisa que eu queria também comentar eh a a sintaxe el ela é tão menos importante do que o conceito né Por exemplo uma coisa é você saber a sintaxe escrever lá o comando e não saber exatamente o que está acontecendo por trás outra coisa é você não saber o comando Mas você sabe o que o que Acontece por trás e isso é que de fato tem muito mais valor né então se eu voltar para

cá eu vou só maximizar aqui também e eu tenho ficar puxando aqui o o meu usuário de um lado pro outro mas tudo bem vai dar certo para cá ó eh quando a gente tá criando aqui roda Esse comando ele vai rodar uma uma uma um processo é um conceito né chamado migration migration é um processo de migração do banco de dados eu vou colocar aqui como sendo Eh sei lá tabela traço usuário Então vamos supor que você está desenvolvendo uma aplicação aí você cria uma tabela tabela de uso á depois você vai lá e

cria a tabela de produto aí você roda de novo esse comando npx Prisma migrate no ambiente de desenvolvimento e as mudanças que aconteceram ele vai criar uma nova migration então por exemplo ó eu vou rodar aqui uma migration chamada tabela usuário ele vai criar um comando SQL né usando ddl data definition language linguagem de definição de dados e ele vai criar a tabela no banco de dados para gente então vou rodar aqui o comando ele vai lá ele criou um arquivo Dev PDB na pasta específica vou mostrar para vocês e ele foi lá e criou

uma migration.sql um arquivo SQL paraa criação da tabela de usuários que eu acabei de definir lá no meu modelo então Eh aqui dentro ele criou o arquivo dbd.db né se trazer para cá para vocês Ficarem me vendo Dev PDB e aqui ele criou na pasta migration um uma pasta que tem exatamente a data atual 2024 05 21 não é 15 horas não porque tá acho que tá trocado aí a questão dos horários mas 15:06 eh minutos 36 segundos e o nome da migration que eu dei Se você olhar aqui dentro nós temos um comando SQL

que vai criar a tabela o Create table usuário ID text not New primary Key e tal ele vai criando aí a estrutura e nós temos aqui um índice criado relacionado à questão Do e-mail né ou seja por e-mail seru único Ele criou um índice lá relacionado ao e-mail para conseguir garantir essa constraint né de unicidade do e-mail beleza Ele criou a a migração para esse banco especificamente que é o SQL Lite que a gente tá usando tá eu não sei se vai precisar de algum tipo de configuração no Windows é eu acredito que no Linux

também não precise ele basicamente criou aqui tudo e ele vai conseguir acessar o banco de dados sem Precisar de uma configuração de banco de dados talvez no Windows precise instalar aí alguma coisa o skl lite não sei se é necessário tá não fiz esse teste ainda Beleza então nós temos aqui a o nosso modelo o que que acontece se eu Viner aqui e acrescentar mais alguma coisa como por exemplo eh ativo ser um boolean e por padrão ele é true foi que eu acabei de fazer eu acabei de mudar aqui que a o meu modelo

De usuários se eu vier aqui e rodar novamente Esse comando agora eu vou dizer é sei lá eh posso colocar aqui tabela usuário usuário e coluna que eu chamei a coluna de ativo então colocar aqui coluna ativo ou criar coluna ativo pode ser também o nome que você vai colocar que é uma definição sua então colocar aqui ó criar coluna e traço E usuário traço ativo pronto então essa aqui vai ser o nome da migration como houve uma mudança aqui no nosso modelo e ele detectou que isso precisa ser aplicado no banco de dados digamos

assim agora a gente pode rodar isso aqui ele vai criar uma nova migração chamada criar coluna usuário ativo no mesmo dia né 2024 mesmo ano mesmo mês mesmo dia e uma hora um pouquinho depois para ter essa ideia de sequência e quando alguém for criar recriar esse banco de dados Ele vai rodar todas as migrations criando a tabela criando a coluna Ah vamos supor que agora eu tire essa coluna aqui beleza então em algum momento você colocou você usou essa coluna por vários meses e precisou tirar ela depois porque mudou a funcionalidade não tem problema

você pode ir lá rar uma migration por exemplo e e sei lá deletar ou excluir excluir coluna usuário ativo beleza como ele notou que teve uma Mudança precisa de uma migration ele vai lá e gera uma migration agora no banco de dados era para para ter água aqui mas tudo bem vai dar certo vai ficar aí viu não vai ter edição não então e aí ele foi lá e excluiu essa coluna do banco de dados e a mesma coisa como se não tivesse sido criado mas eventualmente ele vai contando a história do banco de dados

e você ir acrescentando e tirando elementos lá da sua aplicação beleza Fizemos aqui a nossa o nosso modelo de usuários o que a gente pode fazer é o seguinte ó já que nós vamos trabalhar na aplicação como sendo uma aplicação completa aqui dentro do do nextjs eu vou fazer o seguinte eu vou criar aqui mais duas pastas eu vou criar uma pasta chamada backend vai ser o backend da nossa aplicação né que eu estou tá aqui vou criar aqui o backend da nossa aplicação Então vou criar uma pasta com esse nome Deixa só fechar aqui

E vou criar uma outra pasta chamada de poderia ser Core por exemplo tá poderia ser o núcleo da minha aplicação aqui e aí nessa parte aqui de sei lá de dados compartilhados também poderia ser shared compartilhados Core nome que você quiser aqui dentro eu posso colocar o Model seria o modelo e posso colocar sei lá ús algum alguma coisa que eu queira colocar de utilitários Lembrando que aqui eu não estou me preocupando com muitas firulas Arquiteturais eu quero fazer forma mais simples para que você possa entender digamos assim como a gente poderia ter uma aplicação

ftech completa aqui no nextjs acessando o banco de dados Tá então vamos lá eh eu vou criar um arquivo chamado usuário PTS vou usar simplesmente aqui uma interface não vou me preocupar com modelos ricos regras de negócio nada disso me interessa nesse momento agora eu vou criar uma estrutura colocou aqui Foi coisa mas tudo bem vou pegar lá o o arquivo Prisma que nós temos vou pegar aqui essa mesma estrutura só para eu replicar aqui com os valores ó Então vai vai ter um ID vai ter aqui um e-mail e vai ter o nome a

senha todos eles e do tipo string Então vou colocar aqui ó dois pontos meio dois pontos nome dois pontos 100 Beleza então nós temos aqui a interface que representa o nosso modelo de dados legal uma coisa que a gente poderia fazer num Primeiro momento que é algo que eu faço quando eu vou desenvolver por exemplo uma aplicação é eu posso criar dados falsos para eventualmente colocar ali numa interface inicialmente depois a gente vai colocando por exemplo isso para acessar um banco de dados tá então poderia ser uma forma intermediária de você trabalhar com os dados

então por exemplo ó eu vou eu vou colocar Normalmente Quando eu crio uma aplicação eh react nextjs essa aplicação ela representa o front end apenas o front end não o front end mais o backend mais o Core da aplicação então normalmente eu crio por exemplo uma pasta chamada componentes fora da pasta app Mas como eu quero meio que dividir a pasta app é o front end backend vão ser os fluxos né os casos de uso digamos assim e o Core é aquele que é compartilhado tanto pelo front end Como pelo backend eu vou colocar os

componentes dentro da paste da APP então tudo que for relacionado ao frontend eu vou colocar dentro da pasta app não é um problema nenhum É só uma questão de organização então Eh aqui dentro Eu também vou criar uma pasta chamado de deira de dados esses dados serão relacionados com frontend por isso que eu vou colocar aqui dentro da pasta app e aqui dentro eu vou colocar posso colocar uma pasta chamada hooks depois a Gente pode mexer nela eu vou criar uma pasta chamado constantes eu criei duas PES só para ficar mais fácil de você ver

que nós temos essa organização né daa são os dados e aqui a pasta de constantes eu vou colocar todos os nomes de arquivos em português e as pastas para seguir um padrão mais natural digamos assim porque a estrutura de pastas já éem inglês né eu vou colocar as pastas em eh as pastas em inglês e os nomes dos arquivos em português Então Vou colocar aqui por exemplo [Música] e usuários Então vou colocar aqui usuários [Música] e tá só usuários mesmo usuários PTS Vou colocar aqui constante usuários recebe aqui vai ser do tipo usuário que vem

lá do Core Model usuário vai ser uma R de usuários e aqui nós Vamos criar os nossos usuários e Aqui o chat GPT vai nos ajudar até certo ponto porque ele não ele não aceita criar e-mail né então vou colocar aqui Ana @pr com.br beleza vamos ver se ele completa aqui ó nome Ana senha 1 2 3 4 5 6 a gente não vai se preocupar muito em invalidar a senha Beleza vou criar aqui um usuário do vai ser o Pedro @ e Empresa.com.br Seria legal se ele conseguisse criar né tivesse esse filtro Mas tudo

bem Pode ser que ele bata num no e-mail de alguém real e ele não queira ter essa responsabilidade vou criar aqui o sei lá 1 2 3 4 5 6 vou colocar eh Pedro aqui vai ser O Guilherme empresa e Guilherme aqui vai ser o [Música] Augusto Augusto então aqui vai ser o Augusto sei lá Pereira a sen vou deixar a mesma e aqui vou colocar eh Amanda então Amanda Souza e finalmente aqui vai ser a Rebeca Empresa Rebeca Silva Beleza então pronto nós temos seis usuários cadastrados usuários mocados aqui na nossa aplicação e a

gente pode iniciar a nossa interface definindo a digamos assim a lista de usuários normalmente eu começo um pouco antes fazendo aí algum trabalho básico de layout da nossa aplicação né então por exemplo a gente vai ter a parte de usuário aqui nos componentes e nós podemos também ter uma parte chamada de Template por exemplo tá então aqui eu posso criar um componente que normalmente eu chamo de página PTS então Export default uma function chamado p né e aqui a gente pode simplesmente ter uma div e eu colocar aqui eh página beleza e a gente pode

substituir lá na página da minha aplicação posso apagar tudo aqui e vou usar esse componente página que eu criei Então vamos lá só colocar chegar até oo final Aqui beleza então vou criar aqui um componente página já apareceu aqui vou colocar aqui um Opa beleza ele não tá aceitando ainda filhos né Então vou colocar aqui ó Export interface página props vai receber aqui uns filhos e aqui eu vou colocar props P página props então aqui eu vou colocar props pch Beleza então nós temos aqui Ah Passando os elementos Filhos deixa eu executar aqui em PM

Run Dev pra gente rodar na porta 3000 e ver a nossa aplicação só inicialmente mostrando lá Opa Que foi o Que Nós criamos legal que que eu vou fazer aqui em termos de organização da nossa página eu vou criar um menu bem simples ponto tsx vou colocar do um lado menu e do lado l a área que representa a nossa aplicação então só pegar aqui a estrutura básica da página jogar para cá onde tem página Aqui vou substituir por menu tá Vou colocar aqui o menu através do Aide Então vou definir aqui uma nave de

navegação e eu posso colocar não vou colocar filhos não aqui tá no menu vou deixar menu feito todo aqui dentro então vamos lá eh eu vou definir uma função aqui fora uma function chamada menu item só pra gente ter aí uma estrutura básica do menu item Então vou colocar Aqui uma estrutura básica ó link esse link vai ser do Next Vou colocar aqui um HF Por enquanto só colocando Barra só pra gente entender mais ou menos como vai ficar organizado o nosso link aí eu vou existe aqui o tabler icons.io e e a parte específica

do do Next vou pegar aqui npm copiar essa dependência para que a gente possa ter os ícones aqui na nossa aplicação ó é tabler traço icons traço React ele vai instalar aqui essa dependência e a gente vai conseguir vou dar npm Run dev e nós vamos colocar aqui no nosso link vou colocar um ícone por exemplo home daqui a pouco a gente passa também essa possibilidade do nosso icon eu posso até quebrar isso num componente separado para ficar dois componentes ficar bonitinho tá então nós temos aqui nosso componente home e um spam colocando início Beleza

então aqui eu posso pegar o meu Componente aqui dentro de nave posso colocar menu item pronto tenho aqui os vários menus itens e vou colocar aqui dentro da minha página a parte do menu então colocar aqui ó menu da minha aplicação sendo chamado e aqui embaixo eu vou colocar uma tag m para colocar os filhos e aqui a gente pode até depois aplicar algumas classes como por exemplo um pading de set em relação a esses componentes aqui beleza apareceu o menu aqui eu vou Colocar um Class name um Flex eu vou organizar o Flex no

eixo da linha mesmo né tá o menu de um lado e a parte do conteúdo do outro então vou colocar um Flex e essa parte aqui específica do Main ele vai ter um Flex Zoom que eu quero que ele cresça e a parte do menu a gente pode colocar aqui não precisa dessa classe menu eu vou colocar uma largura de 72 e dentro aqui do nave eu vou colocar um Flex Flex Call para ele organizar no Eixo da coluna depois a gente bota aí os espaços em relação à nossa aplicação beleza dar um refresh aqui

para ele carregar a aplicação nova pronto apareceu aqui eu vou colocar o meu menu para ter uma cor background zinc que é um cinza né 900 para ficar um Cinza Mais Escuro mas tá aqui ele e tá aqui do outro lado a parte do conteúdo eh eu posso dizer que a altura do meu menu é a altura da tela né então altura Eh da tela aqui ele vai ocupar a altura inteira do menu tá em relação ao menu item a gente pode dar uma melhorada aqui em algumas coisas como por exemplo colocando aqui um Class

name um Flex para acar mesma linha e um GAP de dois para que ele fique um do lado do outro a gente pode colocar aqui e eu diria um pading e deixa eu ver aqui de dois Talvez um pading X de 4 e um pad Y de 2 para ver como é que fica a gente Pode aqui colocar um GAP de um eles não ficarem grudados e eu também posso aqui colocar um Rover eh pra gente colocar aqui um um background sei lá pode ser um background Black quando eu passar por cima do Hover ali

ver se vai dar certo ó ó tá aqui um background poderia ter um logo antes e tal eu dar aqui um certo espaço então Eh aqui eu posso dar um pading no eixo X de 7 por exemplo que aí ele não vai Ficar grudado aqui em cima então nós temos aqui o nosso menu lateral tá então o que a gente poderia fazer é que para que a gente possa ter um menu com diversas opções diferentes é eventualmente criar aqui um outro componente ó menu item tsx e aqui eu vou pegar esse componente essa função vou

jogar para cá Vou definir Export Def vou criar aqui uma interface então Export interface menu props vou colocar para ele receber o Ícone o texto e a URL então colocar aqui o a URL URL também no tipo string o a gente pode usar eh um Element Type do react aqui o texto pode ser um string e a a URL sendo um string se o elemento for um um Na verdade o o tipo né for um Element Type a gente pode fazer aqui ó vou colocar props ponto menu item props e a gente pode fazer algo

assim ó props piccone e a vantagem que você tem com a aplicar aqui por exemplo ó um um zinc 200 né Você quer colocar ali uma cor um pouquinho diferente então você pode aplicar diretamente aqui como eu também poderia aplicar aqui também no spam só para mostrar para vocês que tem essa possibilidade de receber Opa de receber aqui um um tipo de elemento né você passa o tipo e ele instancia o elemento aqui ó no formato de uma tag E aí é é legal porque você pode também definir ah o tamanho por exemplo desse elemento

eu quero que seja E sei lá 24 eu quero que o stroke desse ícone seja mais fininho stroke 1 então você consegue aqui dentro já colocar dessa forma então coloquei aqui o menu vou passar para cá props URL e vou passar para cá obviamente props p Tex que são as três propriedades que nós definimos nesse nosso componente agora a gente pode instanciar que vem do outro arquivo e a gente pode colocar o ícone vai ser o ícone home o texto vai Ser início e s colar aqui em forma correta e a URL vai ser o

Barra beleza a mesma coisa eu posso fazer pros outros colocando outros ícones eu vou colocar tudo apontando para o início da aplicação mas eh Porque a gente já vai ter depois a gente vai talvez ter outras outras Eh interfaces aí mas tudo bem eu vou colocar aqui para ser ícone user de usuário e eu vou colocar aqui eh sei lá Cadastro uso usuário pronto e aí eu vou colocar barra usuários aqui para URL vou tirar essas duas aqui deixar só duas mesmo beleza só pra gente Navegar e conseguir de fato chegar lá eu vou criar

aqui dentro de app uma pasta e posso chamar aqui de Eu Não Para não misturar eu vou criar aqui um um grupo de rotas que eu vou chamar aqui De como se fosse a a parte interna da aplicação Imagine que você tem uma parte externa que é a Landing page a tela de login tudo isso é fora da autenticação aqui seria as pastas internas tá então eu posso colocar aqui dentro vou criar aqui uma isso aqui não contra na URL né aí eu vou colocar aqui ó usuários no plural e aqui eu vou colocar e

um arquivo chamado page.ts Então esse arquivo que tem Page a gente vai conseguir através dele criar a nossa usar o mesmo componente página que a gente criou poderia inclusive ser colocado eh no próprio layout da aplicação e aqui eu vou colocar usuários pronto então agora se tudo tiver funcionando Vixe eu coloquei alguma coisa errada lá no no menu item era para ser texto eu coloquei background então texto e aqui também é o texto text zinc 200 pronto tá aqui ó os nossos dois links o início é Exatamente que nós estamos Opa e o cadastro de

usuário vai mostrar aqui essa tela de usuários que a gente criou então a gente já tem aqui uma navegação funcionando uma vez que a gente tem a navegação funcionando a gente pode aqui na parte de componentes de usuário eu posso criar aqui um componente que vai representar uma lista de usuário pon tsx então exportar por padrão já tá com 33 minutos tem que correr aqui para tentar o vídeo não ficar tão longo né então vou Criar aqui ó uma função lista eh usuário Talvez seja lista é Vou colocar aqui lista usuário mesmo e nós vamos

retornar aqui os nossos eh usuários cadastrados então Eh eu eu vou não vou criar uma tabela digamos assim mas eu vou criar um outro componente que vai representar um uma linha que vai mostrar um usuário ali tá então vou fazer o seguinte ó eh chamar aqui de e linha usuário linha Usuário PTS esse componente aqui como eu tô planejando na hora né poderia ser se eu gravasse daqui a me hora depois já seria diferente o resultado mas aqui ó linha usuário ele vai receber vou colocar aqui ó Export interface interface usuário props na verdade é

linha usuário props né linha usuário props que vai receber um usuário Que é do tipo a da nossa interface lá que nós definimos na parte do do Model né usuário Ou seja eu vou receber um usuário e vou renderizar um usuário através desse elemento aqui então o que que eu vou querer fazer dentro não sei por que ele tá insistindo com esses números aqui mas tudo bem eu vou colocar aqui um Flex inicialmente eu vou colocar aqui um spam só para mostrar o pegar aqui ó props pon linha usuário Props e aqui eu vou pegar

props P usuário ponto nome só pra gente ver o nome do usuário e aqui na lista de usuários eu vou inicialmente colocar aqui uma Vou colocar aqui um Class name para ser um Flex e um Flex Call ou seja para ele organizar no eixo da coluna e aqui dentro Eu vou pegar usuários no plural eu vou tentar importar ele ele não trouxe Mas tudo bem eu vou importar aqui ó Import usu pon pon barra pon barra deira barra constantes barra usuários então nós temos aqui eu não sei se eu exportei lá deixa eu ver não

exportei né era por isso que ele não tava importando ó aqui eu vou exportar por padrão essa lista de usuários beleza com isso feito agora nós temos aquela lista fake de usuários ainda não tá envolvendo banco de dados que eu posso fazer aqui um um percorrer essa lista fazer um map ou fazer algum Tipo de laço F para percorrer os usuários e eu vou converter os meus objetos usuários vou converter eles em elementos do tipo jsx Então vou retornar aqui e um objeto do tipo linha linha usuário passando o usuário com claro também tenho que

passar a chave já que nós estamos lidando com a lista dentro do react então atributo chave né que é obrigatório você pode tanto usar o índice como eu também posso Utilizar aqui o usuário pid que é melhor nesse caso tá deixa ver que ele tá reclamando porque aqui eu tenho que colocar que é do tipo usuário deixa ver se eu importei certo ah usuários beleza map H vamos lá que que tá acontecendo aqui usuário ver que usuário is not assignable To Type string deixa eu ver o que que tá acontecendo usuários aqui Ah sim eu

trouxe um Import errado não era o Import que eu queria Então colocar aqui Core Model usuários beleza importei forma correta que que tá acontecendo aqui porque que ele tá reclamando A Chave É o string e Pode ser undefined então eu vou dizer que tem a chave aqui tá é isso que tá acontecendo Strings not assignable para deixa eu essa que tá atrapalhando aqui a mensagem vamos lá é aqui ele não tá atribuindo Exatamente porque lá no meu Usuário a gente colocou string com S maiúsculo na verdade é para ser string com s minúsculo aí ele

tá reclamando por conta disso mas deu certo agora e de fato nós queremos ter a string eh que é o tipo que nós usamos no dia a dia que eu trouxe lá do Prisma e acabou que ele trouxe o S maiúsculo também eu não notei beleza nós temos aqui agora a nossa linha de usuários se a gente entrar aqui e obviamente usar esse elemento na nossa página a gente vai conseguir ter acesso Aqui à lista de usuário e a gente vai mostrar os usuários aqui beleza o que que nós vamos fazer agora só para melhorar

um pouquinho a parte do layout da aplicação ó eh linha usuário eu vou colocar aqui um background zinc 900 só pra gente ver vou colocar lá na lista de usuários para ele ter aqui um GAP de quatro entre cada linha Então tá aqui as linhas do usuário nós temos aqui lá na linha de usuário eu vou colocar Aqui um rounded e MD e eu vou só colocar os elementos aqui ó vou colocar o nome da pessoa depois eu vou colocar aqui embaixo o e-mail vai colocar um do lado do outro mas eu vou transformar isso

aqui e colocar um de colocar esses dois aquix Plex Call o eil eu vou colocar com texto pouquinho menor então text small e um text zinc 400 para ficar um pouquinho mais Escuro aqui embaixo deixa eu ver o que que poderia fazer mais até poderia colocar aqui dentro um ícone né Por exemplo PR representar o usuário eu acho que tem não sei qual é o caminho deixa eu ver aqui no no chat GPT não sei se eu tô com ele habilitado aqui não tô e PR a gente pegar acho que é source P unsplash Random

por exemplo e deixa eu colocar aqui ó Random de 80 Por 80 e para ele tentar pegar um Avatar de usuário source Splash ele não encontrou né Splash ver se essa URL vai bater em algum usuário apareceu aqui talvez apareceu um Avatar Então posso tentar usar isso aí para meio que simular como se fosse um Avatar de uma pessoa então eu poderia colocar aqui uma imagem do do Next claro que isso aqui teria que apontar PR o usuário Mesmo né colocar aqui um src Vou colocar daqui a pouco tenho que liberar essa URL dentro do

do nextjs né e eu vou colocar aqui round beleza e a parte de alternativa né quando el conseguir encontrar a imagem vai ser aqui o o Avatar do usuário beleza ó eu vou liberar essa URL lá no nosso arquivo de nextjs ó next config ver se ele libera aqui ó hum não mostrou nenhum modelo né não sei Se é images images domains pronto vou colocar aqui flash.com que é o que eu preciso que esteja opado vou parar executar novamente e aí agora em teoria é para ele mostrar a nossa aplicação o nosso Avatar dentro da

nossa linha de usuário aqui ó exatamente essa função aqui deixa eu ver se ele vai aparecer ó dá um refresh ó apareceu aqui só que apareceu todos iguais digamos assim né então e A gente poderia até colocar aqui uma variação para ele aparecer mais de um mas depois eu me preocupo com isso colocar aqui Um item Center e vou colocar também aqui um GAP de C para ficar um GAP entre o nome da pessoa e a imagem que a pessoa vai aparecer aqui e o nome do usuário a gente pode colocar um pouquinho maior text

pon XL vai aparecer aqui um pouquinho maior o nome da pessoa posso colocar também Aqui um fonte fonte eh Black para ficar mais forte a fonte Então pronto nós temos aqui os nossos usuários seria a lista de usuários a gente pode também criar aqui no nosso parte de template o como se fosse o título da tela né ó título ponto e tsx E esse título Export interface título props vai ter aqui o texto e pode ter também o o ícone o ícone que pode ser um Element Type também beleza só importar aqui do react e

agora vou exportar por padrão uma função chamada título que vai receber as props título props e nós vamos criar aqui o nosso título poderia também ter subtítulo não tem problema então e seria aqui o [Música] principal e o secundário Beleza então vou colocar aqui uma a gente pode vou seguir aqui O deixa eu ver vai primeiro ter o colocar aqui ó Class name Flex e vou colocar aqui um GAP de dois e Vou definir um título é primeiro ícone Então vai ser props pon ícone eu vou já definir como é que vai ser a classe

dele e aqui eu vou colocar andive CL FX Lex Call e Vou definir aqui um H1 que vai ser o meu props pon principal e um H2 props P secundário que vai ser o Título e subtítulo da minha aplicação então lá na minha página de usuários que nós temos aqui eu também vou colocar aqui um um título então título beleza aqui eu vou colocar o ícone para ser um Icon e user que a gente já tinha selecionado antes o texto principal vai ser Eh sei lá usuários e o secundário deixa eu ver o Que é

que o chat GPT nos orienta aqui ver se ele vai colocar alguma coisa cadastro de usuário Beleza vou colocar só assim mesmo e então nós temos aqui ó ó cadastro de usuários usuários e cadastro de usuários aqui embaixo Então vamos melhorar o layout o tamanho do ícone vai ficar bem maior então colocar aqui 40 Então tá aqui ó tá um pouquinho maior 50 vou colocar o texto principal para Ele ficar um Tex lá 2xl e vai ter aqui uma fonte black e aqui nós teremos Class text zinc 400 vou deixar o tamanho normal nós temos

aqui ó o usuário eu vou diminuir um pouquinho a o stroke aqui ó stroke para ser um para ficar mais fininho o ícone aqui posso até aumentar um pouquinho o o nosso título aqui posso colocar aqui 60 E nós temos aqui ó usuário cadastro de usuário Talvez um pouquinho menor aqui 55 beleza e o que nós podemos fazer lá na nossa página que nós estamos trabalhando que é a página de usuários e a gente pode colocar um espaço entre o título e a lista de usuários aqui para não ficar grudado né então aqui na nossa

página além de receber os filhos eu posso ter aqui um Class e posso aplicar o CL name aqui ó que a Gente possa aplicar mais se bem que não é aqui vai ser embaixo vai ser aqui ó colocar o Flex ali beleza e aqui eu posso colocar isso aqui eu vou passar o CL name para cá props assim eu consigo personalizar o como é que eu vou organizar os filhos dentro da minha página então agora lá eu Consigo passar aqui um Class name ó e dizer que eu quero que ele Organize no Flex Se eu

colocar só Flex ele vai colocar tudo na mesma linha ou seja o título na mesma linha e colocar aqui os meus elementos meus usuários mas se eu colocar um Flex Call de coluna ele vai colocar um embaixo do outro como estava antes mas se eu colocar aqui um GAP de 10 ele vai colocar um espaço entre o meu título e o conteúdo da minha página que é o que eu quero agora e o que a gente Pode fazer aqui e entre o título e a lista de usuários é ter um botão para adicionar um novo

usuário e a gente tem um formulário que vai de fato salvar isso aí no banco de dados tá E esse mesmo formulário que a gente vai acessar vai ser acessado também através aqui da lista quando eu clicar ele vai passar esse usuário lá para dentro do formulário Então vamos lá ver se a gente consegue eh conseguir conseguir pelo menos uma Parte da aplicação né Tod eu tô achando meio difícil né Já tem quase uma hora de conteúdo qualquer coisa eu coloco a segunda parte no vídeo seguinte então vamos lá ó eh aqui como é que

nós vamos fazer eu vou criar dentro de componentes uma um componente chamado formulário pode ser formulário usuário para ficar assim mais específico já que a gente tá trabalhando com usuário Ah aqui a gente pode exportar por padrão com formulário formulário usuário eh a gente pode definir também aqui no no formulário então Export interface formulário usuário props que pode usar o próprio usuário ele vai receber o usuário porque se ele vier usuário cadastrado a gente já preenche Os dados aqui no formulário então vou ter aqui props ponto usuário E formulário usuário props melhor dizendo né Beleza

E aqui nós vamos definir o nosso formulário então ter eh por exemplo um input de texto basicamente vai ser um input de texto né pros Três então Ó eu posso criar aqui dentro de componentes eu posso criar um componente chamado e a parte compartilhada e aqui eu posso criar um e input de texto e esse input de texto poderia ter um input específico para e-mail específico para senha e tal eu Vou colocar ele de forma um pouco pouco mais genérica para nos ajudar aqui na nossa interface Mas você poderia criar inputs específicos né Outra coisa

que é legal aqui é a gente eventualmente e estender extends aqui e a gente usar os próprios inputs relacionados aqui à parte do do do react né pra gente ter vários e atributos já prontinhos para que a gente possa somente incrementar a casa a gente acha necessário tiver alguma coisa específica que você precisa Tratar aqui mas senão você pode usar o que já vem por padrão aqui uma coisa que teria que colocar Talvez seja o Label porque o Label não tem como padrão então V colocar aqui um Label string e vou exportar por padrão uma

função chamada e input de texto que vai receber as propriedades input texto props e aqui nós vamos criar um componente que vai basicamente ter duas partes vai ter tanto Label como também vai ter o próprio input tá input eu vou passar as Coisas aqui a gente pode só ajustar para ficar com o layout que a gente quer ó Flex Flex Call posso colocar aqui um GAP sei lá de um pequenininho Por enquanto vou colocar aqui CL para ter um Ground zinc ou um background poderia ser um zinc 800 pra gente ver vou colocar aqui um

Pading de dois e um rounded ah MD aqui eu vou colocar um outline para ser n e nós vamos pegar esse input de texto e usar lá no nosso formular então primeiro input de texto vai ter um Label nome um valor vai ser props p usuário P nome Deixa eu só não sei se ele foi importado já não ó input texto Vou importar beleza e ele também vai ter o onchange para alterar esse valor aqui quando for necessário Então vou colocar Aqui só a função eh prontinha pra gente duplicar ó vai ter input T nome

o input de eil e o input de senha só que aqui no caso o tipo vai ser um password Então pronto Ten o tipo password eu vou colocar os tipos aqui e type Ah acho que tem e-mail é bom que ele quebra aqui na coisa e o Type text normal que já é o padrão acou que ele não quebrou aqui mas tudo bem depois quando aumentar ali a Função ele vai quebrar então nós temos esses três Campos eu vou colocar aqui um Class name Flex Flex Call e um GAP de cinco entre cada um E

no final eu vou ter aqui um botão para salvar e um botão para cancelar cancelar e eu vou colocar aqui um Class name background Blue 500 um pad x de 4 um pad Y de 2 e um round botão ficar arredondado eu vou fazer a mesma coisa aqui com o botão de baixo poderia até Criar um componente também para representar um botão né Vou colocar aqui só que ele vai ser um zin beleza Vamos ver que foi que aconteu e eu vou querer colocar esses dois botões um do lado do outro então Class name Flex

um GAP de C eu vou colocar os dois botões aqui dentro dessa div para ficar mais organizado aqui na nossa aplicação beleza como é que eu faço para mostrar o o formulário a gente lá na nossa página inicialmente você não Precisa ter tudo criado você pode por exemplo comentar aqui a lista de usuários e você pode instanciar o formulário usuário e você pode passar aqui o parâmetro usuário para ser usuários que nós temos ah ah não não trouxe para cá né então vai ser usuários no plural índice zero só pra gente preencher e ver como

é que ficou aqui o nosso formulário deixa eu ver alguma coisa tá errada aqui ó input tá One Change beleza foi que aconteceu Deixa eu entrar aqui no nosso formulário o input beleza trouxe para cá ele function ó de interatividade consider converte Part of this client ah certo então a gente precisa converter para um componente que vai ser usado do lado do cliente né use client então eu vou colocar aqui ó use client aqui aqui e aqui na nossa página a gente vai precisar também dizer que essa página Vai ser um use client use client

vamos ver se ele já resolve o nosso problema pronto trouxe aqui ó então nós temos nome Ana e a senha tá ele tá colocando tudo como se fosse o nome mas a gente vai mexer nisso agora Ah esse aqui vai apontar para a senha e esse aqui vai apontar para o e-mail beleza e aqui no formulário a gente pode ter por exemplo eh o onchange do formulário que ele vai retornar um usuário alterado para cada situação ele Vai fazer eh algo então por exemplo aqui ó vamos pegar aqui o vou pegar o e que é

o evento E aí nós vamos chamar o props p onchange pegando o usuário né clonando ele e alterando especificamente o e-mail a mesma coisa eu vou fazer pra o caso aqui da Deixa eu só copiar isso aqui eu vou fazer para o nome do usuário Então deixa eu só substituir só que agora vai ser o nome vai pegar o e. target PV e a mesma coisa Eu vou fazer paraa senha de tal forma que eu vou mudar aqui a senha em cima daquilo que foi alterado Beleza então usuário P senha usuário P e-mail usuário P

nome então nós temos aqui ó Ana e ele ainda não tá conseguindo modificar tá ó on Change props on Change is not a function beleza não é uma função porque eu não passei para cá a função então aqui pra gente proteger eu posso simplesmente colocar aqui que essa Função pode não existir só vai chamar se ela existir e lá na nossa página aqui a gente vai passar essa função que o usuário mudou então eu posso colocar aqui inicialmente ó um estado chamado usuário set usuário Opa set o usuário vai ser um state colocar aqui ó

use state do tipo Core barra Model usuário e aqui a gente pode pegar o primeiro usuário para ser colocado e aqui eu vou passar usuário Aqui e o on Change para ser o set usuário de tal forma que agora a gente consegue é pra gente conseguir lá no formulário conseguir mexer nas coisas de usuário Então vou colocar aqui ó consigo mexer o nome da Ana consigo mexer aqui o e-mail dela e consigo também alterar a senha dela de tal forma ele vai ficar e mexendo nisso quando eu clicar em salvar também é importante que o

formulário notifique que algo aconteceu não só que foi mudado o Usuário mas que e e aqui o nome do formulário tá até errado né ó formulário então aqui é um formulário acho que tá errado em todo canto tá errado aqui Cadê ó tá errado aqui no formulário tá errado também não aqui tá certo formulário Beleza então formulário usuário e aí o que a gente pode fazer é quear aqui on save que é quando o usuário clica e ele manda o usuário no seu último estado digamos Assim né então vou clicar no save E aí eu

vou chamar aqui on on Click E aí eu posso passar o props p on save e ou então posso vou colocar em português aqui já que esse é um método meu salvar e cancelar cancelar beleza quem vai decidir o que vai fazer com cancelar vai ser o usuário eu vou deixar o salvar também não vai passar nada não só vai chamar o salvar mesmo então vai ser assim ó props P Salvar e aqui no um clique props pon cancelar já que eu já tô mandando o usuário mais atualizado cada vez que ele é alterado aqui

no meu formulário tem muitas formas de fazer né você vai escolhendo a forma que faz mais sentido para você o fato é que nós temos aqui o usuário nós temos o onchange e agora a gente pode definir o Cancelar o cancelar a gente pode fazer por exemplo Sair da tela ir para um outro local Tá mas por enquanto eu vou Deixar aqui o cancelar vazio a gente decide que vai fazer com ele depois dependendo de como ficar a Organização das páginas e o salvar aí a gente pode se for o caso já começar a pensar

interagir com o banco de dados eu V colocar aqui o salvar aqui em cima ó então colocar aqui função salvar a gente já tem acesso ao usuário na versão mais atualizada aqui então vou colocar aqui ó Salvar no banco de dados beleza e aqui nós vamos passar o salvar para cá para que ele possa ser chamado quando o usuário clicar na opção de salvar Beleza então o que que a gente poderia fazer aqui eh eu posso agora aqui no meu backend eu vou tentar fazer pelo menos o salvar no banco de D para e e

o obter depois a gente faz o os acabamentos aqui na nossa aplicação talvez eu não consiga gravar tudo agora Porque eu preciso sair daqui a pouco né então ao vivo é um pouco mais complicado aqui mas vamos lá e dentro do backend eu vou criar um arquivo eu vou colocar tudo na mesma pasta depois a gente pode organizar em pastas separadas chamado de repositório repositório usuário P TS aqui não tô me preocupando com o padrão repositório lá do DDD não simplesmente Vou chamar com esse nome repositório de usuário que é Onde a gente vai colocar

as funções para é interagir com o banco de dados então Export default aqui eu vou criar uma classe chamada repositório usuário e dentro desse repositório usuário eu vou criar o instanciar client do Prisma do Prisma client Então vou criar aqui um e Client chamar aqui Prisma e client tá aqui ele tá ele vai importar esse extension mas na verdade é Prisma bar client e aqui eu vou instanciar New Prisma client pronto Instancie nós temos esse cliente que é que vai acessar o banco de dados tá poderia colocar BD de banco de dados né Database aqui

por exemplo também D daria certo então aqui eu vou querer criar eu vou colocar isso aqui como sendo estático pra gente chamar direto e não precisar instanciar Então vou criar aqui um a função de e listar por exemplo então des P Database acessando o usuário listar todos ele vai listar todos os elementos do banco de dados o criar ou Salvar Vou colocar aqui o salvar e eu vou chamar aqui em vez de Create vai ser o upset ou seja ele tanto faz o update como ele faz o no banco de dados E aí eu vou

colocar aqui para ele me ajudar a completar ó Where basicamente a gente vai fazer um filtro para saber qual é o o atributo que vai identificar aquele objeto unicamente no banco de dados se ele existir ele vai fazer um update se ele não existir ele vai fazer um Create no Banco de dados ou seja com uma única função eu consigo tanto salvar no banco Como fazer a atualização do banco de dados utilizando esse filtro aqui do we com esses dois atributos deixa eu ver um outro poder esses dois mos melhor dizendo né Eh Talvez o

o outro também que é importante para esse primeiro momento é o eh aqui eu vou chamar de obter todos e vai obter todos e eu vou querer também agora obter por iG que Ele já vai me oferecer aqui ó obter por ID passo o ID que nesse caso é uma string tá hã aqui beleza ele vai pegar então é um string des PDB P usuário P find e o Nick e ele vai procurar aqui o usuário através do id retorna o usuário se ele tiver relacionamentos por exemplo você poderia retornar tudo que aquele usuário tem

de relacionamentos mas como só é um usuário e não tem relacionamentos com outras tabelas Então você devolve o usuário é que esses três Mos são os importantes uma vez que eu tenho o a classe que vai acessar o banco de dados a gente pode criar aqui que pode ser uma classe pode ser uma função que vai definir o caso de uso ou seja as funcionalidades que nós teremos aqui em relacionadas a usuário Então como Como tudo tem a ver com usuário eu vou colocar tudo dentro do backend aqui diretamente então por exemplo ó eu vou

colocar aqui pode ser uma uma função simples Como como também pode ser uma classe vou criar como uma função tá E por que que eu criei aqui repositório como uma classe só porque eu tinha vários métodos que usam o mesmo client então Para incorporar digamos assim tudo no mesmo local criei como uma classe normalmente eu nem crio como sendo estático eu crio como sendo de Instância mas aqui para simplificar vou colocar como se fosse funções estáticas tá então aqui eu vou criar uma um arquivo E aí Normalmente quando eu crio só um arquivo que é

uma função eu crio com letra minúscula tá quando é componente com letra maiúscula classe com letra maiúscula e aqui é uma função poderia criar com letra minúscula Então vou colocar aqui por exemplo salvar usuário P TS então o salvar usuário P TS vai ser uma função Então vou exportar poderia ser uma classe também tanto faz né exportar por padrão Uma função a function chamada salvar usuário beleza aqui é a função e aqui tem um aspecto importante do nextjs que é o seguinte eu vou marcar esse arquivo com o use server ou seja ele vai rodar

no backend da minha aplicação lembra que eu estou dentro da pasta backend então eu vou querer marcar com use server pra gente acessar essa função lá no backend essa função ela precisa ser assíncrona tá é uma regra aqui do nextjs aqui é um Recurso do Next né que ele vai prover pra gente essas essas Actions que rodam lá no no server Actions né que roda lá no servidor então aqui eu vou receber um usuário esse usuário vai ser aqui um usuário não Prisma client não né vai ser um usuário e Core bar Model bar usuário

aqui a gente pode eh simplesmente Vou colocar aqui ó novo usuário a gente pode pegar o que a gente recebeu aqui de usuário e eventualmente pode acrescentar alguma coisa Como por Exemplo o ID se o usuário não tiver um ID a gente pode criar esse ID aqui para salvar antes de mandar pro banco de dados pra gente fazer isso aqui no Core eu posso criar aqui na parte de utilitários por exemplo é um um ID PTS e aqui eu vou criar Export defa poderia ser uma função para gerar ID ou pode ser uma classe que

eu imaginei sendo uma classe e aqui a gente pode ter um método estático eh por exemplo pode ser um get e eu Posso colocar aqui ó novo e ele vai gerar pra gente uma string nova tá na verdade ele vai gerar aqui uma string Então como é que a gente poderia gerar ele já até sugeriu aqui ó maf Random aí ele vai converter PR valores Alfa numéricos E aí ele vai converter tipo assim vai ficar zero ponto e um valor alfa numérico depois mas se eu pego uma substring Somente depois da vírgula vai ficar como

se fosse um valor gerado aí Parece um número um ID randômico né ó deixa eu mostrar para vocês aqui no Browser deixa eu limpar aqui ó se eu rodar Esse comando só maximizar aqui ó enter ele vai gerar aqui ó um um ID único tá vendo ó então basicamente o que ele vai fazer é isso aqui se você quiser que esse ID fique só com letras maiúsculas pode colocar aqui por exemplo e upper Case por exemplo ó upper Case então ele vai gerar um um ID único pra gente então com esse ID único a gente

Pode garantir a criação do aqui ó Se ele vier dentro de usuário eu não quero substituir o ID dele então colocar usuário pid caso não venha eu vou pegar a classe que eu acabei de criar utilitária ponto novo ele vai me devolver uma string e vai cadastrar aqui o usuário uma vez que eu tenho um novo usuário eu poderia fazer validações aqui né validar o e-mail validar o nome validar senha e fazer uma série de validações mas no final eu vou querer Aqui ó repositório usuário aqui há uma dependência Direta do meu negócio com o

banco de dados mas não é um problema em teoria pro nosso cenário aqui ele vai salvar o usuário e vai devolver deixa eu ver que ele vai devolver aqui e o vai devolver um que seria um usuário do Prisma né mas eu quero que ele devolva aqui ó quero que ele receba tanto um usuário do Model como tamb que ele devolva um usuário do Model aqui Então ele vai seguir esse padrão obter todos vai devolver aqui uma Promise vai ser uma rede usuários e obter por ID vai ser uma Promise Promise de usuário Beleza o

que que ele tá reclamando aqui retornar único Beleza deixa ver S tirar aqui D certo beleza não deu certo vou fazer o seguinte ó vou pegar isso aqui vou colocar aqui ó constante usuário await find Unique Beleza e no final eu vou colocar aqui usuário as usuário é para ele funcionar também perfeitamente com isso nós temos aqui a possibilidade de retornar isso aqui já é uma função assíncrona então sem nenhum problema e ele vai ser executado do lado do servidor e a gente pode chamar essa função lá no nosso componente já é para ele ir

pro banco de dados mas só pra gente já meio que concluir essa parte eu vou criar aqui uma função para Obter todos. TS e a gente pode também criar vou só copiar aqui pra gente se basear na na estrutura básica então então vou ter aqui já Ten o use server aqui eu vou chamar de obter todos não vai receber nenhum parâmetro de entrada e nós vamos retornar aqui o obter todos vindo lá do nosso banco de dados Então beleza já estamos usando server e tal e a gente consegue agora obter todos uma coisa que a

gente Poderia fazer para simplificar o acesso ao backend é criar um que a gente conhece como padrão fachada você pode criar uma fachada para acessar digamos assim as funções do backend então você poderia criar aqui um uma classe ó Export default vou criar aqui uma classe chamada vamos chamar aqui de backend mesmo e aqui a gente pode criar uma eh chamado aqui de usuários por exemplo e aqui a gente pode eu colocar aqui no Usuários para ser um read only e para ser também estático beleza e aqui a gente pode criar a a exportar Essas

funções para serem acessadas lá no nosso frontend nós temos aqui uma função e salvar usuário deixa eu ver se ele tá exportando aqui Export default salvar usuário beleza a gente pode importar aqui ó então importe salvar usuário E eu posso ter aqui a obter todos então obter todos aqui tá faltando o quê se a gente colocar a função deixa eu importar aqui Import obter todos aqui beleza aqui tá como tipo mas na verdade tem que ser uma atribuição então aí agora funciona que tava com for dois pontos né fica com sua definição do tipo não

é o que nós queremos Beleza então nós temos aqui ó backend ponto eh usuários ponto salvar usuário ou salvar todos e a forma como a Gente consegue acessar isso aqui meio que representa né um padrão chamado eh facade tá então Ou seja você consegue através de um ponto único acessar vários comportamentos acaba sendo como se fosse um ali um proxy para acessar os comportamentos e as funcionalidades do backend a mesma coisa obter todos salvar o usuário vai ter o obter por ID e vai ter também o excluir você pode ir criando as funcionalidades e colocar

isso por exemplo dentro de uma pasta Então aqui ó posso colocar uma pasta chamada de usuário e jogar essas coisas especificamente para usuário imaginando que você pode ter eh outros eh outros tipos de entidades e comportamentos dentro da sua aplicação deixa eu fechar aqui o que nós fizemos até agora deixa eu voltar aqui pro frontend lá na nossa página que Nós criamos aqui é que a gente vai eventualmente conseguir acessar os dados de usuário e também vai conseguir acessar os dados pra gente Conseguir Exibir a lista inteira Então vamos lá o que que eu vou

fazer aqui no salvar no banco de dados eu vou chamar lá o meu back tá aqui ele ó backend ponto usuários ponto e eu tenho dois comportamentos o salvar e o obter todos lá a gente até pode fazer o seguinte ó aqui eu vou chamar só de e salvar dois pontos aponta para salvar o usuário e aqui eu vou chamar de obter dois pontos vai apontar para obter todos Beleza Então poderia até mudar um pouquinho aí a a a forma de de expor Essas funções então aqui eu posso chamar ó salvar eu V passar usuário

nesse caso agora já é para ele mandar isso lá banco de dados e a gente poderia fazer o seguinte ó eu posso criar aqui um estado que vai ter os usurios até começou a completar ali usuários S usuários e vai ter aqui a lista de usuários na minha aplicação eu vou começar aqui com uma lista vazia tá o que a gente pode fazer aqui para ter Uma uma versão digamos assim Inicial aqui eu posso dizer que vai ser tanto usuário como nulo Então vou começar como usuário sendo nulo aqui tá então ele pode ser tanto

o usuário como o nulo ou de forma melhor ele pode ser um um partial de usuário que pode ser só ter parte do usuário não necessariamente o usuário todo tá tá beleza aqui eu só vou salvar o usuário se o usuário existir então se não tiver usuário ele sai se tiver usuário ele vai salvar e eu vou Dizer aqui que lá no salvar ele pode receber também um usuário parcial deixa eu e mexer nessa função ó e salvar usuário eu vou dizer que ele pode receber aqui um um usuário parcial porque aí aqui a gente

pode completar o usuário beleza e aqui eu vou dizer que ele é um usuário porque ele passou pelas validações então só vai chegar aqui se de fato ele for um usuário tá então posso assumir que isso vai funcionar Beleza aqui no formulário Ele tá reclamando porque pode ser um usuário parcial então partial isso aqui é uma um utilitário do do do do typescript né que você pode ter um objeto que tem vários atributos obrigatórios e você pode dizer não mas eu nesse caso eu quero ter os atributos como opcionais porque eu ainda tô salvando os

dados e tal então você pode usar essa ideia aqui do parcial beleza aqui eu vou dizer que o onchange também Vai devolver um usuário parcial não tem problema e aí vai resolver o problema do nosso formulário e aqui ele só vai exibir os dados do formulário se o usuário estiver setado ó se o usuário estiver setado ele vai exibir o formulário se o usuário não estiver setado ele vai Exibir a lista de usuários que é o que eu quero para fazer essa ou ele mostra o formulário ou mostra a lista aqui ó Então vou colocar

beleza no cancelar quando o cara o Usuário cancelar eu vou fazer exatamente isso vou chamar aqui set usuário para receber nulo e ele volta a mostrar a lista lá na lista que eu vou querer fazer é que ele devolva o usuário selecionado para eu de fato setar um usuário para ir pro por exemplo para o formulário então aqui na linha A gente vai ter o on click na linha ó on Click vai devolver o usuário selecionado Então quando for for eh clicado aqui nessa div ele ele vai Chamar o props on Click que eu até

escrevi com o nome errado aqui ó on cli Beleza então vou chamar aqui um clique que vai devolver o usuário selecionado então tenho quear a função vai devolver aqui props usurio legz chamar de forma opcion porque se não tiver clique não D problema e lá no listar usuário eu vou quer também receber um o usuário selecionado por exemplo pode ser também um clique né ó Export interface lista usuário props e Aqui vai ter um clique vai devolver o usuário e selecionado vou também passar aqui o props pon lista usuá props e aqui para cada linha

de usuário eu vou passar o on Click que vai ser On C Beleza então agora ele é clicável e a outra coisa que é importante também aqui é colocar um cursor Pointer porque aí quando o usuário colocar o mouse em cima vai ficar claro que ele é um local que pode ser clicado e selecionado uma vez que Agora a minha lista ela seleciona um usuário aqui no cli Então a partir do on cli eu vou receber um usuário selecionado e no usuário selecionado eu consigo setar o usuário com o que eu recebi então basta colocar

aqui set usuário que vai funcionar Então vamos testar para ver se a gente consegue ir pro formulário e pra lista de acordo com a necessidade ó então Eh eu vou clicar aqui na Ana pá foi pra lista vou cancelar a Ana voltou pra lista fui pro Formulário e voltei pra lista vou clicar aqui no Guilherme foi pro Guilherme voltei agora voltou para lista então consigo navegar Eu também deveria ter um botão para eventualmente Navegar isso diretamente para um formulário em branco que é o que eu vou fazer agora ó então a gente pode criar aqui

uma div nessa div eu vou colocar aqui Flex e justify end para ser no final e aqui eu vou colocar um botão que nós vamos colocar aqui ó Background Blue 500 pad x de 4 pad Y de 2 rounded MD e agora eu vou criar aqui um no Clique desse botão eu vou setar um usuário com todos os campos vazios por isso que é importante o meu usuário ele ser um parcial eu não exigi que o usuário esteja completo porque aí eu consigo setar um usuário vazio e ele vai cair lá no for formulrio com

usuário vazio então ó Aqui nós temos Ah claro Que dentro do botão tenho que botar colocar aqui um ícone Plus para ele colocar aqui e um spam dizendo por exemplo novo usuário beleza aqui eu posso também dizer que esse botão vai ser um Flex os itens estarão centralizados e eu vou colocar aqui um GAP de dois Beleza então nós temos aqui o nosso botão novo usuário vou clicar nele ele vai para um formulário em branco vou Sair ele volta pra lista e não faz sentido dentro do formulário ter o botão Então esse botão que eu

criei ele só será exibido quando tiver a lista Então vou criar aqui ó aqui vou trazer a lista para cá e vou colocar esse botão aqui beleza agora nós temos nosso formulário dependente voltando posso criar um novo usuário e posso clicar aqui para mostrar o usuário que já foi criado anteriormente beleza vamos agora já que a gente já tá Conseguindo Navegar eu quero obter a lista de usuários do banco de dados vamos ver se funciona esse primeiro cenário aí né então vou colocar aqui um use Effect para ele eh iniciar a nossa chamada eu até

poderia colocar um botão para ele clicar e fazer a consulta no banco de dados mas vamos lá ó backend usuários P obter eh chegou a resposta eu vou setar isso dentro da da lista de usuários eu Preciso só importar aqui o use effect do react Pronto ele vai chamar e esses usuários aqui vai ser exatamente o que eu quero mandar paraa lista então a lista não vai mais apontar para eh o na verdade a lista de usuários lá ele tá obtendo os usuários a partir das constantes mas eu quero receber os usuários através de parâmetros

então vou ter que passar os usuários por aqui e aqui eu vou pegar ó props pon usuários Beleza é um atributo obrigatório então vou passar aqui usuários a partir do meu state né de usuários que eu tenho aqui dentro desse meu componente agora ele vai aparecer a lista vazia porque a gente não tem nenhum usuário cadastrado na nossa aplicação a chance né de de dar problema é grande vamos lá mas vamos ver se a gente vai ter aí ele funcionando eu vou clicar aqui em adicionar o novo usuário Vou colocar aqui ó Leonardo Leitão Vou

colocar aqui o e-mail Leonardo @ coder.com.br e vou colocar aqui 1 2 3 4 5 6 vou mandar ele salvar em teoria ele não vai sair do formulário é para ele salvar e ficar no formulário beleza tá aí vou cancelar Tá e agora vou dar aqui um refresh na aplicação e ele trouxe ou seja funcionou algumas coisas que a gente pode melhorar aqui no no fluxo né Uma das coisas que a Gente pode melhorar é que no salvar isso aqui pode ser assíncrono a a gente pode colocar aqui um await para ele de fato salvar

e esperar a gente pode e fazer uma chamada para ele obter a lista nova e obtendo a lista nova de usuários aqui a gente pode pegar aqui e setar os usuários então ó set usuários a partir do que eu obtive e outra coisa também é sete usuário para ser nulo significa que quando eu salvar um usuário ele tanto vai sair do Formulário como vai mostrar o usuário cadastrado na lista nova tá poderia até trabalhar questão de mensagens e tal mas vamos lá ó vou colocar aqui novo usuário colocar aqui ó Rebeca Souza E aí eu

colocar aqui ó Rebeca P Souza @empreendedores e já trazer a lista atualizada ó trouxe aí Rebeca Souza Se eu for para lá pro início de um refresh na minha aplicação cadastro de usuário a gente consegue ter tá e da forma que foi feito é pra gente Também conseguir alterar os dados Então vou colocar aqui ó é Leonardo Vou colocar aqui Moura Leitão continua a mesma coisa vou salvar e ele trouxe aí sem duplicar Leonardo Mouro Leitão e Rebeca Souza o que faltaria digamos assim em relação ao crude é a gente ter aqui uma opção um

botão por exemplo de ou quando você entrar no formulário tem uma opção aqui na Pontinha de excluir e aí teri que fazer o caso de uso de excluir né a Função de excluir acessando lá o nosso o nosso repositório Ó tem 1 hora e30 né acho dá tempo fazer vou precisar sair por isso que eu tô aqui na correria vou fazer essa função pra gente terminar e e ter o crud completo já que foi prometido o crude completo Então vamos lá ó eh vou fechar tudo aqui para você entender quais são os passos pra gente

terminar aqui um fluxo inteiro até trazer essa visibilidade ó lá no backend nós temos o repositório a gente pode criar aqui uma Função de excluir vamos se se já GPT já me já coloca aqui ó eh o o o o CoPilot né ó eh deixa eu só trazer aqui minha tela de novo Beleza então nós temos aqui ó static ass deletar o ID vai fazer um del Ema do id que foi passado Bele primeiro passo feito nós vamos criar agora uma função vou chamar aqui de Exu Exu Bele ch lá o Del então V chuir

usu excluir usuário PS posso pegar aqui o o é na verdade eu vou criar aqui vou Basear nesse Então vamos lá ó excluir usuário também tem que ser um use server se não tiver não vai funcionar tá porque ele vai fazer internamente a chamada http lá pro servidor e vai e encapsular essa complexidade pra gente a gente chama como se fosse uma função no frontend mas ele vai fazer uma chamada http lá pro backend da sua aplicação Porque de fato é um backend não tá rodando no Browser essa parte tá então aqui que você marcou

com us server vai Rodar só no servidor não vai vir pro browser então aqui você pode acessar Talvez uma variável de ambiente da sua conexão porque você não tem acesso ao banco de dados diretamente dentro do browser o banco de dados vai rodar lá no servidor da sua aplicação então aqui eu vou receber o excluir usuário excluir usuário vai ter aqui um ID que vai ser uma string beleza e aqui nós vamos chamar o Excluir passando o ID então eu posso apagar isso e isso aqui beleza a gente pode lá no nosso na nossa fachada

que é o index aqui a gente pode colocar mais uma função ó excluir e vai apontar para eh excluir usuário excluir usuário beleza e lá na agora a gente fez a parte do backend já tinha o os dados feitos né claro que aqui é uma aplicação bem simples daria pra gente colocar muitas coisas legais aí de de arquitetura e tal Mas é um tema para outro vídeo mas aqui a gente vai agora eu na verdade nem criei hooks né a gente poderia separar essa parte em um Hook personalizado Posso até fazer isso para terminar mas

aqui ó nós podemos criar a função de excluir então vou colocar aqui ó excluir só vai excluir se tiver de fato um usuário selecionado vou chamar aqui o excluir que vai pegar usuário pid tá e Eu vou dizer que esse o ID existe e eu posso até garantir se não tiver usuário ou não tiver ID aqui significa que ele não entra aqui então se ele entrar porque tem ID vou obter vou setar os usuários e setar o usuário para ser nulo Beleza o que a gente vai precisar é lá no formulário de usurio criar aqui

o nossa nossa opção de excluir tá então V criar aqui um novo botão para excluir colocar aqui no final excluir vou colocar ele para Ser vermelho eu vou fazer o seguinte ó aqui eu vou hã criar aqui uma div que vai ser ó Class Flex GAP de cinco eu vou colocar o salvar e o cancelar juntos aqui e vou tirar esse GAP de cinco aqui mas eu vou colocar um justify bit Win e ele vai colocar a opção de excluir lá no final ó exatamente aqui eu quero F separada para não confundir porque esse excluir

já vai Excluir de fato não vai ter nenhuma tela de confirmação não tá beleza então o excluir aí a gente tem o salvar o cancelar eu vou ter aqui o excluir e eu vou chamar lá no botão de excluir essa função excluir Beleza então agora ele vai chamar essa função excluir lá na nossa página além de ter o salvar e o cancelar eu vou querer ter aqui o excluir e o excluir vai chamar essa função excluir que eu criei aqui em cima que vai chamar o backend vai excluir vai Obter os usuários no final seta

os usuários e sai do formulário porque seta o usuário para ser nulo né ele volta pra lista com esse elemento a menos Então vou cancelar só dar um refresh aqui ó carregou os dois os dois usuários vou criar um aqui para excluir ó então PR excluir Vou colocar aqui excluir @ e coder.com.br senha 1 2 3 4 5 6 salvei beleza ele foi lá excluiu colocou aqui que a senha que Eu escolhi é uma senha ruim e tal mas tudo bem E vou clicar nele vi aqui para excluir vou mandar excluir ele foi lá excluiu

do banco de dados agora a gente tem tanto o listar né o crud Né o create criação read leitura update atualização e delete exatamente o que nós fizemos agora por último tá se você quiser digamos assim tirar essa complexidade dentro da página e criar um Hook personalizado para isso a gente poderia criar ó lá n nossos dados um elemento Chamado aqui use usuários PTS Vou colocar aqui Export default função e os usuários e a gente pode trazer da página toda essa essa parte do estado do use effect das funções de salvar e excluir a gente

pode vou copiar vou trazer para cá ó tá a gente vai importar aqui o backend novamente vamos importar aqui o US state vamos importar Lembrando que é o Core Model usuários o use effect também Vou importar PR cá E aí eu vou exportar vamos lá vou exportar aqui o vou exportar usuários vou exportar usuário no singular vou exportar a função de salvar de excluir posso criar aqui uma função de cancelar E aí o cancelar vai simplesmente setar o usuário como nulo e posso Ah não sei se eu vou precisar de alguma outra função deixa eu

ver talvez de atualizar o usuário mas a gente vai Descobrir agora eu posso simplesmente apagar esse conteúdo aqui e a gente pode agora fazer o seguinte ó vou chamar aqui o use usuários beleza e aqui a gente vai vai ter algumas funções importantes ó e dados também né usuário usuários salvar e excluir vou tirar aqui o US state que eu não preciso não preciso disso não Preciso do backend usuários beleza que que tá faltando aqui ó sete usuário em vez de ser sete usuário eu vou criar aqui uma função chamada alterar usuário que vai simplesmente

receber e setar aqui o usuário dentro da aplicação Então essa função eu vou usar dentro da minha página então alterar o usuário alterar o usuário tá um beleza porque eu preciso importar ele aqui também ó alterar Usuário que que tá faltando eh alterar o usuário não tá aceitando nulo mas ele precisa aceitar nulo né ou um parcial ou nulo beleza mais uma correção S usuário também aqui é alterar o usuário e sete usuário aqui é alterar o usuário com isso nós separamos o conteúdo da página que de fato é os componentes sendo renderizados e tal

da parte que diz respeito ao gerenciamento do Estado então é muito bom você colocar isso por exemplo dentro de um de um arquivo Separado né no caso aqui um Hook e um um um Hook personalizado que tem todo gerenciamento de estado de usuário com as funções necessárias para gerenciar aqui os dados desse cadastro então uma vez feito isso eu vou dar aqui um refresh só para ter certeza que tá tudo funcionando tá ó salvando vou alterar aqui para Leonardo Leitão Vou salvar ele alterou Rebeca Souza Pereira Vou salvar salvou vou cad aqui um novo nome

um novo e-mail nem tá Validando né Se é o e-mail por exemplo e porque a gente não aplicou validações mas fica aí de tarefa de casa para vocês fazerem essas validações o excluir também está funcionando beleza gente eh acredito que fizemos aí uma jornada incrível incrível para gerar aí uma aplicação de ponta ponta o seu primeiro a sua primeira aplicação com react full stec com banco de dados se você chegou até aqui gente foi 1 hora e 40 minutos 41 minutos mais ou menos aí De vídeo 1 hora e 30 e poucos minutos né talvez

tenha ali um cortezinho no meio mas o fato é que fizemos aí um vídeo é de ponta a ponta sem planejamento sem nada para fazer a nossa aplicação primeira aplicação de com banco de dados com react nextjs uma aplicação full stack Então segue aí o canal compartilha curte o conteúdo que a gente vai ter muitos conteúdos legais de tecnologias de papos né E também segue a gente no Instagram vou pedir para colocar o link Aqui no no comentário a gente também vai soltar muitas coisas legais no Instagram Então é isso muito obrigado por chegaram até

aqui e a gente se vê no próximo vídeo aqui no canal da coder então grande abraço e até lá r [Música]