[Música] fala muito bem-vindo muito bem-vinda ao nlw Connect cara eu sou Diego Fernandes seou aqui na Rocket City e a gente vai ter uma semana em tanto aí pela frente desenvolvendo essa aplicação com node aqui no nlw Connect o nome como diz nlw next level Week é o maior evento gratuito de programação aqui da Rocket City focado em te levar pro teu próximo nível em programação com diversas tecnologias a gente tá com seis trilhas nessa edição então tem para todos os gostos aí dentro da programação nessa trilha de node em especial né você vai ter uma visão Geral do potencial do node uma tecnologia que permite a gente escrever JavaScript no lado do backend que eu uso em todos os meus projetos e que muitas empresas ao longo do Brasil e fora do Brasil também tão utilizando em produção e você vai poder dar seus primeiros passos nessa tecnologia criar um projetinho pro teu portfólio Então vai ser bem legal e não é qualquer projeto não tá juntos a gente vai construir em apenas três aulas uma API rest completa com documentação usando swager usando festify usando Zod utilizando postgis utilizando raides Então são dois bancos de dados diferentes para propósitos diferentes a gente vai construir um sistema de referal que é um sistema de indicações uma pessoa se cadastra no evento ela pode indicar outras pessoas e assim ela vai somando pontuação criando um ranking vai ser algo bem legal que a gente vai usar várias features aí desses bancos de dados e tudo mais e ao final além de você garantir esse projeto para colocar no teu github né no teu portfólio você vai ter também Um certificado para colocar no teu currículo né E tu vai ter também acesso a uma oferta exclusiva aqui com um bônus exclusivo para estudar na Rocket City se tu ainda não faz isso então não fica de fora fica aí até o final com a gente nessas três aulas porque vai ser demais tá E olha só um recado importante tá essas aulas aqui elas são do nível intermediário então portanto se tu tá começando agora na programação e se esse aqui é o teu primeiro contato com programação assim vai vai ser com complexo tá Não se preocupa em conseguir aplicar tudo que tu viu aqui porque assim não vai ser fácil a gente tem trilha para quem é mais iniciante também caso seja assim esteja realmente muito Zerado essa trilha de node é muito importante que você já saiba os fundamentos da programação já Saiba como funciona ali requisição cliente servidor então assim isso é muito importante você já ter esse fundamento de como é que funciona um banco de dados né senão você vai pelar muito tá E agora olha só três dicas né antes da gente ir pro código antes de eu abrir aqui meu monitor a gente sair codando que eu quero lembrar algumas etapas que são importantes para tu conseguir aproveitar o máximo desse evento a primeira delas é assistir a aula zero eu preparei uma aula zero com o ambiente desenvolvimento lá eu ensino você instalar as ferramentas que a gente vai precisar para codar essa semana esse projeto então mesmo que você já tenha um ambiente para node vai lá porque lá eu dou alumas dicas também instalação do docker extensões que eu tô usando no meu vest code Então assiste essa aula Ela já tá liberada a segunda coisa é você acessar o guia do evento do nlw lá tu encontra todas as informações e os links úteis de materiais e de sorteio tudo assim o guia de estudo o guia foi enviado para você no no seu e-mail assim que você fez a inscrição né a terceira coisa é que a gente tem uma comunidade exclusiva no discord para participantes ou seja todas as dúvidas e você vai ter dúvidas isso é normal principalmente se você tá conhecendo o node agora todas as dúvidas podem ser enviadas lá no nosso discord nossos instrutores vão estar lá e todas dezenas de milhares de de participantes aí do nlw também vão estar lá para tirar essas dúvidas Quem sabe você também não ajuda uma outra pessoa vai lá no discord lá a gente vai avisar sobre as lives Vai Vai avisar sobre os sorteio sobre os materiais Então lá é o melhor local pra gente se comunicar por fim se tu ainda não entrou no grupo do WhatsApp essa é uma ótima oportunidade para você fazer isso porque é lá que a gente vai enviar os os principais avisos e primeiramente os avisos dos prêmios eh dos sorteios tudo isso vai acontecer lá pelo WhatsApp completou todas as etapas então maravilha a gente já pode continuar Lembrando que isso aqui é um conteúdo inédito produzido especial ente para essa edição do nlw Então aproveita o máximo se programa para assistir essas aulas cara aula aí vai ter média uma hora 1 hora pouquinho então assim as aulas vão ficar disponíveis Só até domingo quero ver você comigo lá na última aula na terceira aula e cara vamos junto pro teu próximo nível em programação Bora codar Bora lá então Dev pra nossa primeira aula aqui do nlw Connect de node e o que a gente vai fazer nessa aula é um grande setup do nosso projeto ah basicamente levantar todas as ferramentas que a gente tem necessidade aqui também já criar a nossa primeira rota já começar a trabalhar com documentação então tem bastante coisa que a gente vai fazer hoje eu já tô com vest code aberto aqui naquele naquela pastinha que eu deixei na aula zero aqui se você não viu a aula zero bem importante que lá a gente monta o ambiente né da aula ah instala docker instala node ah tudo o que que a gente precisa para rodar o nosso projeto próprio vest code Ah E aqui nessa pasta né Eu só tenho esse Hello JS então aqui no terminal e no vest code eu já tô ambos nessa pastinha tá primeira coisa que eu vou fazer deletar esse arquivo que a gente não vai estar utilizando ele aqui ah botar para não me perguntar quando eu for deletar E aí eu vou abrir o terminal aqui vindo aqui ó pode ser terminal New terminal né eu tenho o atalho Zinho aqui e eu vou começar dando o npm init Men Y Isso aqui vai criar um package P json basicamente o arquivo que guarda a referência das dependências que a gente vai estar usando nesse projeto e vou instalar nossa primeira dependência aqui que é o ffy instalar ele como uma dependência e o ffy vai ser o Framework que a gente vai estar usando ele é um dos frameworks mais comum aí do ecosistema node junto com Express junto com nest mas o ffy vai ser legal porque ele é um micro Framework né então a diferença né de o micro Framework para um Framework maior que seria o nest né comparado o nest ele é mais comparado a um larv um rails um Jungle né enquanto o ffy ele é mais comparado digamos lá dentro do o sistema P ecossistema PHP Lumen ah ecossistema Python flask um Fast api da vida ecossistema rails Talvez um Sinatra alguma coisa assim eh então ele é um Framework Bem Mais Simples ele traz pouca opinião a gente tem que digamos a gente pode criar a estrutura da maneira que a gente quiser né não tem uma não é uma estrutura pré-estabelecida e com o ffy instalado a gente já pode criar o nosso servidor node vou criar uma pastinha sece aqui dentro e dentro dela eu vou criar carinha chamado server. ts né typescript que é o que a gente vai est usando aqui pra gente conseguir usar typescript com node o node a partir da sua versão 23 já vai começar a suportar typescript ah por padrão né mas a gente tá na versão 22 que é a versão LTS do node né Deixa eu até confirmar se essa é a versão LTS exato então eh versão 22 ainda não suporta typescript por padrão por isso nós vamos instalar um pacote chamado tsx que é uma ferramenta que permite a gente executar o código typescript por quê Porque o node né até a versão 22 aí ele só entende JavaScript então para eu conseguir executar um código typescript eu preciso primeiro converter esse código typescript em JavaScript E aí executar com node o tsx ele faz isso com um comando só digamos ele já converte e executa sem euv né Por baixo dos panos Além disso vou instalar o próprio typescript em si e vou instalar um pacote chamado @types bar node três pacotes que eu vou instalar como dependência de desenvolvimento por isso esse menos D aqui tá e o types node é só a integração do node com o typescript mesmo agora eu posso executar aqui um tsc npx tsc tro traço init ele vai criar um arquivo TS config pra gente e aí eu gosto bastante de usar um site Ei meu WhatsApp gosto bastante de usar um site eh aqui ó TS config bases que é um github da da própria tsconfig então github. com bar tsconfig bar bases e a ideia desse github é que ele te fala qual teste config usar para cada versão do node então tu vem aqui ó node 22 clica aqui na direita ele vai redirecionar a gente pro npm a gente só vem aqui ó e copia esse test config joga aqui dentro e pronto nosso teste config já tá configurado agora eu vou aqui no meu server.
ts criar simplesmente um console log hello world E aí como é que a gente faz para executar esse arquivo a gente pode executar npx tsx e o nome do arquivo search bar server. ts eu gosto de criar um um atalho né então aqui no package. js eu gosto de criar um script Dev E aí eu executo tsx sece bar server.
ts só que aqui a gente vai executar ele no modo watch eu boto tsx watch por quê Porque assim sempre que houver qualquer alteração em algum arquivo do projeto ele vai startar né vai rodar Esse comando de novo então agora Posso rodar npm Run Dev veja ele vai executar Hello Word se eu venho aqui e troco para nlw Salv ó ele já executa de novo então ele fica monitorando por alterações que eu vou fazer aqui dentro agora é importar é o ffy então de dentro de ffy eu importo ffy e crio a minha aplica dessa forma aqui e aí eu posso fazer a minha aplicação ouvir uma porta aqui da minha máquina usando o método Listen passo um objeto de configuração e especifico Qual é a porta esse Listen aqui ele demora um pouquinho para acontecer e aí como quase tudo no JavaScript né coisas que demoram para acontecer e são mapeadas em Promises né Promises é uma promessa né que pode ou não acontecer então eu uso o método then para saber quando ela aconteceu e coloco uma Arrow function aqui dentro né uma função anônima pra gente dar um log quando o servidor tiver no ar por exemplo http server Running salvo aqui agora a gente pode ver que ele já mostrou http server Running né se eu acessar local host 33 ô meu Deus 33 33 que é onde que eu botei a minha aplicação veja que ele dá um erro aqui de Rota não encontrada mas não é um erro de que o servidor tá fora do ar é só que a rota não foi encontrada porque a gente Não cadastrou nenhuma na rota ou seja o servidor tá funcionando só não temos rotas cadastradas ainda tá E aí que que eu vou fazer aqui agora eu vou criar a minha primeira rota então eu vou botar barra Hello quer dizer quando o usuário acessar barra Hello eu vou retornar para ele Hello Word salvo aqui agora volto quando eu digito barra Hello aqui em cima veja retorna hello world né então o nosso servidor Fast fy aqui já tá prontinho pra gente começar a criar as nossas rotas eu vou parar de executar o servidor aqui no vest code e vou deixar ele executando aqui na direita ó npm Run Dev no meu terminal aí o terminal posso deixar ali não preciso ficar mexendo aqui eu posso usar para fazer instalação de dependências né deixar um terminal de acesso mais rápido e aí agora eu vou começar instalando uma outra biblioteca aqui dentro que é @ fastify barcs cores caso você não saiba o que que é e é basicamente uma medida de segurança que a gente aplica nas nossas apis tá para determinar Quais são as urls front end que vão poder acessar o nosso nosso backend então eu importo aqui ó de dentro de fast fy cores ffy cores e aqui embaixo do app eu dou app. register fastify corse e passo um objeto de de configuração aqui ó como segundo parâmetro nesse objeto de configuração eu vou especificar a origem por exemplo o meu frontend ele vai estar rodando em local host 3000 quando a gente tá em ambiente desenvolvimento Geralmente eu deixo aqui o Origin como sendo true isso aqui simplesmente fala com que todas e ele permite que todas urls front end acessem o nosso o nosso backend então a gente acaba digamos não especificando Ou se você simplesmente também deixar assim isso aí já vai ser o suficiente para ele deixar qualquer frontend acessar a nossa aplicação mas se você for colocar isso aqui em produção o ideal é que aqui você coloque a URL do seu front end assim só o seu frontend vai conseguir fazer requisições para essa api perfeito com o corse configurado a gente vai configurar mais uma ferramenta aqui dentro que a gente vai usar pra validação da validação e serialização de dados já vou te explicar o que que é isso essa ferramenta ela é o Zod então eu vou instalar o Zod e vou instalar O plugin que integra o Zod com o f que é o FF Type provider Z então FF traço Type traço provider traço Zod Ok vou importar de dentro de ffy Type provider Zod o validator compiler e o serializer compiler validação e serialização validação basicamente a gente determina Qual que é o formato de entrada de dados que a gente espera em cada endereço da nossa rota por exemplo uma rota de criação de usuário eu espero que o nome eh esteja lá presente Espero que o e-mail esteja lá e Ambos são obrigatórios o e-mail precisa ter um formato de e-mail né ter @ ter domínio e por aí vai ah mas por exemplo eu posso falar que tem um campo adicional que é telefone e que ele não é obrigatório né mas que ele precisa seguir um formato específico né então a validação nada mais é do que a gente forçar que os dados que estão vindo né Em cada rota da nossa aplicação segue um formato específico enquanto a serialização é o é a forma que a gente tem de transformar os dados na hora que a gente tiver enviando ele pro frontend então é muito comum por exemplo Imagina a gente buscou um usuário do banco de dados esse usuário tá vindo ã com o campo lá a senha né Mesmo que seja uma senha criptografada Geralmente eu não quero enviar isso pro frontend então Acontece uma um passo digamos antes da gente enviar esse usuário pro frontend de serialização ciliz zação nada mais é do que você eh transformar os dados antes de enviar eles ao frontend Ok E aí como é que a gente faz aqui eu vou basicamente usar app. set serializer compiler passo essa variável serializer compiler aqui em cima app.
set validator compiler e passo essa variável validator compiler que a gente importou aqui em cima e agora o nosso App ele já tá fazendo validação automaticamente por exemplo imagina que eu esteja criando aqui uma rota do tipo post que geralmente é o método que a gente usa para criar né geralmente a gente usa get tem tem options né mas a gente usa na ordem né Principalmente esses métodos aqui get PR listagem post para criação edição delete para remover Pat geralmente quando a gente quer fazer uma modificação em um só Campo da entidade né Não atualizar a entidade como um todo options usado mais para cor a gente não vai entrar muito nesse foco agora mas a gente vai criar por exemplo uma rota ã para cadastrar um usuário então a gente usa por exemplo post ã users né ou até mantendo aqui já no foco da aplicação como a gente vai tá desenvolvendo uma aplicação que o foco dela é um sistema de inscrição como se fosse um evento online A gente vai cadastrar inscritos inscritos no inglês fica subscribers ou subscriptions pode ser eu tô cadastrando uma inscrição por exemplo né então aqui eu vou ter uma rota por exemplo subscriptions né com método post significa que eu quero cadastrar uma subscription E aí agora como eu tô usando aqui o vou usar o Zod para fazer validação eu posso importar Z de dentro de Zod E aí eu venho aqui ó antes dessa função que lida né que é o hendler que a gente chama que é essa função aqui que retorna algum alguma coisa eu posso passar um objeto aqui ó boto uma vírgula e aqui dentro eu posso passar skima dentro do esima é onde eu posso fazer a validação e a validação eu posso aplicar ela a digamos vários tipos TIP de entrada de dados né quando a gente cria uma API os três formatos de entrada de dados mais comuns são o body ah os search parms e os root parms né ah qual que é a diferença né o bar é o corpo da requisição ele só vai est presente quando tem método post ou principalmente e o bar ele traz as informações geralmente do recurso que tá sendo criado ou alterado por exemplo estou criando um usuário é no bar que vem por exemplo nome e-mail e por aí vai né search parms são aqueles parâmetros que vê na rota depois do ponto de interrogação né então geralmente eles são usados para para filtros né paginação então por exemplo se eu tô no e-commerce lá né e-commerce. com E aí eu tô no catálogo né geralmente fica na rota por exemplo Ah o usuário filtrou eh tamanho ã G né el filtrou também cor azul né então em search parms são esses parâmetros geralmente usad para filtro paginação Ah e nós temos os Road parms os Road parms geralmente eles são usados para identificação de recurso né então por exemp por exemplo eu quero buscar né usando o método get um usuário específico né então se eu quero buscar um usuário pelo id dele geralmente a gente usa users né para indicar que eu quero buscar um usuário e o ID do usuário vem aqui na rota por exemplo um né então aqui quer dizer que eu tô querendo buscar o usuário com o id1 isso aqui a gente chama de Root parm ele é um parâmetro que vem na rota mas ele não tem nome né diferente do search parm que seria dessa forma aqui né que ele teria um nome mas o Search parms por padrão sempre são opcionais Então nesse caso aqui quando a gente tá eh passando um parâmetro que ele não é opcional né É que ele identifica realmente um usuário um recurso a gente usa os Road parms eu digo isso porque aqui ó quando a gente vai usar o esima veja que ele traz aqui ó bar eu posso validar os bares né os parms que são os ro parms e aquele query string query string são os search parms né existem nomes diferentes né query string search parms get parms Tem cada linguagem em cada Framework chamamos de uma maneira diferente mas é a mesma coisa aqui eu vou validar o bar né então eu espero que dentro da quando o usuário for realizar uma inscrição eu tenha dentro do bar um objeto e aqui usando Zod veja como que fica o formato né Eu uso z. Object para falar que no Body eu espero que venha um objeto né que no JavaScript é a forma mais simples de a gente guardar mais de uma informação certo e dentro desse objeto venha o nome que é uma string e o que é uma string e precisa seguir o formato de eil né ter @ e ter o domínio e aí a gente pode aqui nessa função aqui embaixo acessar o meu request que são os dados da minha requisição e o meu reply que é a forma de eu devolver uma resposta customizada Então olha só por exemplo de dentro do meu request eu posso acessar o meu bar esse bar aqui que é o conteúdo que vem da requisi como aqui em cima eu já determinei que o Bari segue esse formato de ter nome e-mail veja que aqui embaixo ele na verdade ainda não aparece nome e e-mail porque eu preciso aqui no ffy passar um carinha chamado with Type provider E aí passo aqui um sinal de menor e maior e passo aqui o Zod Type provider que vem aqui de dentro do Fast fy Type provider Zod Agora sim veja que dentro do meu request body ó ele já sabe que tem nome e e-mail porque aqui em cima eu disse que o meu bar sempre precisa ter nome e e-mail se eu falasse que o nome por exemplo ele pode ser opcional então por exemplo optional veja que agora ó quando eu passo o mouse por cima de nome ele fala que é uma string ou undefined porque ele é opcional se eu tiro o opcional aqui em cima ele já não mostra que pode ser undefined né então a gente tá fazendo uma validação bem integrada ao typescript Ah que é o sistema de tipagem né para evitar que a gente acessa informações de forma errada e o reply e ele serve pra gente devolver uma resposta diferente da comum Por quê a resposta de sucesso comum né do node ou de qualquer outra linguagem ou tecnologia é código 200 né então status code 200 que é o código de sucesso genérico mas por exemplo quando eu tô fazendo a criação de um recurso é recomendado que eu use o método 201 para indicar que deu sucesso Porque o método 201 ele significa que deu sucesso e que um recurso foi criado dentro da minha api e por isso que eu posso usar reply quando eu quero devolver um método um um código diferente do 200 do tradicional eu posso dar um return reply pon status por exemplo passa o código 201 nesse caso né E aí eu dou um ponto send e aqui eu posso enviar uma resposta como eu quiser por exemplo posso enviar um objeto aqui nesse caso enviando nome e e-mail que são os dados que eu receb aqui no caso eu faria a criação da inscrição no banco de dados mas como a gente ainda não integrou com o banco de dados a gente vai seguir só com esse exemplo simples por enquanto tá eu vou salvar aqui agora e como que a gente faz para testar essa rota né porque o navegador quando eu acesso uma rota por exemplo subscriptions né Ele sempre vai Ih Meu cachorro vai ber Rai quando eu acesso subscriptions Ele sempre vai acessar usando o método get mas nesse caso aqui a nossa rota é com o método post então eu não consigo testar isso pelo navegador de uma maneira simples por isso geralmente a gente usa ferramentas externas como Postman insônia hopscotch cara tem várias e várias ferramentas no mercado você pode escolher aquela que você se sentir melhor hoje eu vou te mostrar uma ferramenta legal que eu uso é de vez em quando no meus projetos que é o rest client ele é uma extensão do vest code então você pode vir aqui na esquerda procurar por rest client vem aqui ó no rest client e clica em instalar com o rest Client instalado a gente vai criar um arquivo aqui na nossa na nossa aplicação Pode ser na raiz mesmo e o nome dele tanto faz eu vou dar de api a única a única coisa que ele pede é que a extensão seja pon http E aí api P http e agora a gente pode fazer as requisições aqui dentro escrevendo da seguinte forma ó eu quero fazer uma requisição post paraa rota http bar bar localhost 3333 bar subscriptions que é a nossa rota certo e aí eu dou enter aqui pode ser um enter ou dois enters aqui eu dei dois não tem problema vou botar os dados que eu quero enviar então os dados que eu tenho que enviar para essa rota é nome e e-mail E aí eu vou enviar nome Diego Fernandes email Diego @ rocket.
com. br dou send request veja que ele já mostra aqui do lado unsupported media Type por quê Porque a gente tem que dizer aqui nos headers da nossa aplicação no cabeça S da nossa aplicação que a gente tá enviando os dados no formato de Jason né que é o formato mais comum usado aí para rest api então aqui em cima eu escrevo content Type dois pontos application barjon salvo dou um send request e veja que agora ele já retornou status 201 que foi exatamente o status que a gente retornou aqui embaixo OK e ele retornou um objeto contendo nome e e-mail que é exatamente o que Eu devolvi aqui só que lembra que eu falei falei que a gente tem validação certo então na validação de dados a gente consegue por exemplo se eu não enviar o nome aqui ó tirar ele daqui de dentro e fazer o envio da requisição ele deu 400 então ele falou né deu uma bad request que é um erro que o cliente faltou né faltou o front end ou quem tiver chamando a nossa api enviar alguma coisa e na message ele falou que dentro do meu bar o name é obrigatório e eu não enviei interessante né a gente consegue customizar isso aqui depois mas não é o foco agora então o processo de validação é basicamente esse o processo de serialização permite que a gente faça por exemplo aqui no esquema além do Body eu posso colocar qual que vai ser o formato da saída da minha resposta e aí eu boto response e falo Olha quando a minha rota tiver status 201 porque ela pode ter vários status né Se for da erro por exemplo o status pode ser outro eu quero dizer que essa rota vai retornar é é um objeto dentro eu vou ter o nome do usuário Então olha só eu falei que eu tenho apenas o nome do usuário a partir desse desse momento veja que ele já começou a dar erro aqui embaixo Porque eu tô tentando enviar o e-mail do usuário sendo que eu falei que quando a resposta é 201 eu vou ter apenas o nome do usuário então ele não permite ó ele já começa a dar erro aqui na hora mesmo que eu tô escrevendo o meu código se eu venho aqui e adiciono que além do nome eu também vou retornar o e-mail do usuário ele já para de dar erro ã aqui ele tá dando erro Provavelmente porque faltou o assy aqui exato a rota do Fest fy precisa ser assíncrona né show de bola feito isso a gente pode voltar aqui na pi posso dar um send request e veja que já tá tudo e agora eu vou te mostrar algo mágico aqui dentro que por favor pelo bem de todas as pessoas que são frontend ou de pessoas que s f stack ou de pessoas que T que acessar sua api faça isso que eu vou te mostrar agora que é configurar a documentação E olha como é simples com essa estrutura que a gente criou aqui a gente vai simplesmente instalar um plugin chamado @ fastify bar swager para gerar documentação e eu vou gerar também vou usar aqui o @ fasty Bars swager ui para gerar uma interface pra gente Navegar pelas rotas da nossa aplicação e também enviar para quem for desenvolver o frontend né do nosso app visualizar essas rotas e olha só eu vou simplesmente importar aqui em cima de dentro de fast fy bar Swagger eu vou importar ffy Swagger e de dentro de ffy bar swager ui eu vou importar ffy swager ui Ok venho aqui no embaixo do app P register ó ou pode ser qualquer lugar na verdade abaixo do app aqui e app. register ffy Swagger Ok E aí eu vou passar para ele algumas configurações primeiro configuração que eu vou passar para ele se chama Open api por que que eu tô passando isso aqui eu tô passando isso para ele porque eu tô eh hoje quando tu vai configurar a documentação de uma API existem dois padrões assim que são mundialmente mais conhecidos que é o padrão Swagger Swagger file ou Open api Eu particularmente prefiro Open api eu acho ele muito mais atualizado tem algumas features que o padrão do swager por exemplo não permite a gente ter tá então sempre uso Open api e aqui eu passo uma a tzin info Passando só as informações mais importantes da nossa aplicação por exemplo o título dela que eu vou chamar de eh nlw Connect por exemplo e a versão que eu vou passar 0.
0. 1 Ok E aí por último aqui embaixo eh antes de fechar aqui o a configuração do Fast F Swagger eu passo um carinha chamado Transform desse Transform aqui eu vou importar ele do Fast fy Type provider Zod eu vou importar um carinha chamado ó Jason schema Transform tá vendo e passo ele aqui embaixo Além disso eu vou registrar mais um módulo chamado ffy swager yy E aí eu passo root prefix bar dox que que isso aqui quer dizer quando alguém acessar o endereço doc no nosso backend ele vai acessar a documentação aqui do swager então eu salvo isso aqui agora olha que interessante eu acesso localhost 3333 bar Doc e eu já tenho uma documentação que não tem nenhum n operação definida aqui no spec ainda tá E por que que não tem nenhuma operação definida no spec né porque no spec que eu digo na minha documentação né porque esse plugin eu descobri que ele só consegue perceber que eu tenho rotas cadastradas na minha aplicação Quando essas rotas São criadas num arquivo parte então pegar essa minha rota aqui ó appp subscriptions Tá vend vou control nela tirar daqui vou criar aqui uma um arquivo uma pastinha pode ser chamada rootes aí eu vou criar um arquivo chamado subscribe to event rote E aí aqui eu vou colar essa rota só que aqui ó veja que eu preciso por exemplo do Zod né que eu posso importar aqui ó add Import from Zod mas eu preciso do app também como que eu posso acessar o app aqui dentro no ffy como é que a gente faz isso tá eu exporto uma eh constante subscribe to event Rot usando Chel Case aqui mesmo tá ela vai ser uma função e dentro eu vou receber o app aqui como parâmetro E aí aqui ó nessa nessa variável subscribe to event root eu vou tipar ela pegando lá de dentro do Fast F Type provider Zod eu vou importar um carinha chamado aqui ó fasty plugin esse carinha aqui mesmo e aí eu venho aqui ó e boto dois pontos e boto ele aqui do lado Ah E aí ele pede que a função seja assíncrona então aqui antes do objeto aqui ó do parêntese eu boto o assn salvo aqui agora volto lá no meu servidor e dou um app. register e passo a minha rota subscribe to event rote salvo ele já fez a importação automática para mim o Zod não tô mais usando posso remover daqui salvo volto no navegador dou C E tá lá nossa primeira rota já tá lá e o mais legal é que lembra que eu passei esse Jason esima Transform aqui ó pro Fast fy Swagger que vem lá desse Fast fy Type provider Zod Isso aqui faz a integração de tudo aquilo que a gente construiu aqui ó de validação de de de serialização da resposta tudo isso ele transforma isso em documentação automática Então olha que legal ele já clicando aqui na rota subscriptions ó ele já me fala qual que é o formato dos dados de entrada então quando eu chamo essa rota eu preciso enviar esses dados aqui nome e e-mail e ele já me fala Quais são as possíveis respostas dessa rota então ele fala que quando a resposta for código 201 ela vai retornar nome e e-mail e o mais legal é que a gente pode testar aqui por dentro também então se eu der um Try It Out não preciso nem preencher mudar nada se você quiser pode mudar quando eu dou um Execute ó ele já retorna exatamente nome e e-mail que foi o que eu falei que ele ia retornar né Então a partir de agora a documentação ela vai ser gerada automaticamente conforme a gente for criando as rotas da nossa aplicação e a gente consegue customizar algumas coisas aqui por exemplo aqui dentro do esima né eu posso passar um summary por exemplo que é um falar que que essa rota faz né Por exemplo subscribes e e subscribe Someone To The event por exemplo qualquer coisa né ó dou um F5 já fica ali ó um testinho falando né Posso botar tags também que é uma forma da gente separar né as tags é uma Rei aqui tá então Ó vou passar aqui por exemplo subscription né então volto e aqui agora ao invés de default ficou subscription todas as rotas que forem tiverem a mesma tag elas vão ficar dentro da mesma da mesma sessão posso passar a descrição também então caso eu queira enviar alguma coisa aqui botar só um texto qualquer tá caso eu queira enviar algum texto maior aqui ó consigo botar na descrição até pra documentação ficar mais legal tá e show de bola documentação aqui já criada swager configurado né nossa primeira rota também já criada a gente vai partir para mais outras duas configurações aqui ainda nessa aula para deixar nosso projetinho pronto pra gente sair criando banco de dados e todas as demais rotas também uma das coisas que toda aplicação ah seja ela backend ou front-end vai precisar Em algum momento são variáveis ambiente né variáveis ambientes são variáveis realmente né que a gente tem valores diferentes para essas variáveis eh de acordo com o ambiente que a nossa aplicação tá rodando Então se ela tiver rodando em produção O valor vai ser um se ela tiver rodando na nossa máquina O valor vai ser outro por exemplo isso geralmente é usado para a URL de conexão do banco de dados essas coisas assim como a gente ainda não configurou o banco de dados mas eu já quero deixar isso semi pronto paraa próxima aula a gente vai configurar variáveis ambiente para uma outra coisa que e as aplicações backend precisam que é essa porta aqui ó Hoje eu tô fixando essa porta em 33 33 mas quando a gente hospedar Nossa aplicação provavelmente a porta eh não se mantenha a mesma eh e por isso eu vou criar uma variável ambiente chamada port que a gente consegue configurar essa variável aqui eh de acordo com o ambiente que a nossa aplicação tá rodando como que a gente vai fazer isso tá eu vou criar aqui um arquivo ponto env na nossa aplicação e é bem importante que se você tiver usando Git esse arquivo aqui ele não entre no Git então você pode criar um Git Ignore aqui ó e botar tanto ponto env quanto a pasta node modules Tá eu vou salvar aqui agora e aqui dentro eu vou criar uma variável por exemplo port igual 33 33 que é a porta que eu tô usando aqui localmente tá por padrão o node ele já consegue ler variáveis ambiente então se você tiver executando sua aplicação com node ou com test x os parâmetros são mesmo né Você pode simplesmente enviar traço traço env traço file e aqui passar o arquivo de variáveis ambiente que você tá usando por exemplo ponto env eu salvo aqui agora reinicio a minha aplicação e agora veja que ele rodou aqui o comando mando com o env file ó e ele já leu as variáveis ambiente isso quer dizer que se eu vier aqui no meu server por exemplo aqui no port e tentar usar a variável ambiente acessando de process.
env pport ele até se eu salvar ó ele vai tentar executar rodou com a porta 33 33 mas tá dando erro aqui né por quê Porque a porta aqui ele pedia que a porta fosse um um número Só que toda variável ambiente por padrão é uma string e aqui também não tem como eu garantir que a variável ambiente ela vai existir né porque ela pode est undefined por exemplo aqui no código se o usuário vir aqui ó e comentar a porta quebrou Nossa aplicação eu vou tentar rodar ela ele rodou mas provalmente rodou na porta padrão lá do do do Fast fy e eu nunca vou descobrir esse erro né porque e ele não dá erro nenhum Isso é um problema né então o que que eu gosto de fazer eu gosto de validar que as variáveis ambiente estão presentes antes de rodar minha aplicação então aqui ó ah vou deixar aqui por enquanto mas aqui em search eu vou criar um arquivo chamado env. ts vou criar aqui ã Vou importar o Zod que é a biblioteca que eu tô usando para validação crio um carinha chamado env schema falo que as minhas variáveis ambiente eu espero que elas sejam um objeto dentro tem a port e a port como eu falei toda variável ambiente por padrão ela é uma string e eu quero converter ela num número e aí eu posso fazer isso usando o z Z qu squares ele converte né tenta converter o valor para que eu passar aqui ó por exemplo número né E aí se ele não for informado eu vou botar um default 33 33 e aqui embaixo eu exporto uma variável en que é igual a en schema PPS que é onde ele faz a validação em process. env que é a maneira global no node de eu acessar as variáveis ambiente agora veja que aqui no meu server quando eu for e acessar a variável ambiente port ó eu escrevo env que eu vou importar do arquivo aqui ó do desse arquivo que a gente criou ó ponto bar inv vou clicar aqui para ele fazer importação automática ó e aí a partir do momento que eu dou um ponto ó ele já sabe que port existe ali dentro e que ela não é possivelmente undefined Porque se ela não for informada existe um default tá vendo Então salva aqui agora ó e pronto ele vai tá rodando na porta 33 33 sem problemas nenhum e as minhas variáveis ambiente estão sendo ah validadas né eu não posso eh rodar meu sistema sem uma variável ambiente obrigatória por exemplo se eu falasse aqui que eu tenho uma variável ambiente obrigatória que é a URL do banco de dados que ela precisa ser uma string né se eu salvo aqui agora ó quando eu rodo a aplicação deu erro né por ele falou que eu ele esperava que tivesse ali o Database URL é obrigatório né espera uma string e recebi nada undefined né então ele evita que a gente Rode a nossa aplicação sem variáveis que são importantes né para ela realmente rodar Ah mais uma coisa que a gente vai fazer uma configuração aqui que eu gosto bastante uma ferramenta que eu tô usando em todos os meus projetos ah de JavaScript ultimamente que é o biome Né o biome caso você nunca tenha utilizado ele é uma ferramenta semelhante ao S lint breeder né ã quase toda linguagem tem algum formatador e o biome ele é o formatador mais usado não é o mais usado na verdade o slint eu acho que junto com o pred na verdade né é o preder Na verdade ele é o formatador mais usado mas o biome ele é bem recente assim e tá eh tomando bastante conta do mercado pela velocidade ele é muito muito muito rápido tá 35 vezes mais rápidos e que o que o preder ah comparando aqui tá e a gente vai configurar ele aqui dentro como é que a gente faz para configurar eu vou instalar @bom JS barbi como dependência de desenvolvimento e agora a gente precisa uma configuração do B eu vou te entregar aqui é nos downloads dessa aula a configuração que eu tô usando nos meus projetos e vou dar uma repassada por cima dela mas a gente não vai criar essa configuração do zero tá então vou criar um arquivo b.
