e fala galera sejam muito bem vindos a mais um vídeo aqui do canal dicas para deves o canal traz para você programação Sem enrolação e hoje sem enrolação o pessoal a gente vai aprender sobre node.js cara então você vai aprender a tecnologia que tá extremamente em alta no mercado extremamente demandada pelo mercado e que vai possibilitar que você faça aplicações incríveis e muito complexas usando ela beleza mas antes vamos fazer aqui compromisso de sempre aqui cara fica até o final desse curso aqui que vai agregar muito valor para você eu tenho certeza e aí se
você realmente gostar você deixa um joinha aí se inscreve no canal porque isso me ajuda muito a continuar trazendo conteúdo aqui para você de verdade isso é o que me dá força para levantar cedo e gravar esse vídeo esse tipo de vídeo aqui para você tá bom então vamos lá de uma vez por todas primeiro para os slides para gente começar pela parte teórica Donald e depois a gente vai para o corte Então bora lá vamos começar então pelos requisitos que você precisa para fazer esse curso aqui coisa que você precisa saber para continuar fazendo
esse curso aqui o primeiro você precisa saber os fundamentos do Chaves crip então objetos arr e tudo que eu ensino no meu curso gratuito sobre já o script então vou deixar aqui no card caso você não saiba cara assistir lá porque a gente vai usar JavaScript aqui no hoje oque você precisa saber se fundamentos e mais uma vez tá no meu curso gratuito eu deixei aqui no caixa para você assistir e lá você também vai aprender sobre Jason que a outra coisa é essencial que a gente vai usar bastante aqui neste curso e a última
coisa mais ou menos importante que não é obrigatório tá você saber sobre http coisas como status code headers mais aqui se você não sabe ficar tranquilo que eu vou explicar para você aqui também Beleza então só precisa saber essas 3 coisinhas aqui e também coisas como Promises JavaScript Mas como eu falei é igual o http tá Se você não souber Promises por exemplo tudo bem segue comigo pode ficar um pouquinho confuso para você mas eu vou me esforçar para explicar da melhor forma beleza Vamos então começando pelo o que é o meu GS cara no
GPS não também conhecido como não hoje é node.js é tudo a mesma coisa tá quando alguém falar no DS não é a mesma coisa ó bom então o que que ele é em sua essência ele é um ambiente que permite a execução de código JavaScript fora de um navegador Como assim forma e navegador Filipe porque antes da existência do node você só conseguia executar código JavaScript dentro de um navegador de internet por quê Porque todos os navegadores possuem um motor já me explique por padrão e o Google Chrome ele possui um motor chamado V8 que
é o mesmo que o Google Chrome usa tá que o node perdão usa Então esse V8 é responsável por processar o código JavaScript por transformar esse corte já disse que em código de máquina e assim executar esse código é propriamente dito né porque essa V8 faz justamente isso tá pessoal ela pega o código JavaScript convert em código de máquina código que um computador entendi e aí retorna esse código ao resultado desse código para a gente beleza então node ele processe o código quero que o sentindo é isso aqui tá bom o nojo ele processo O
Código Da mesma forma que o Google Chrome que é o navegador mais popular que é o navegador que tem mais presentes no mercado processa tá bom e ele é utilizado para construir apis então é utilizado para construir b500 então você pode fazer por exemplo é uma p e que faça um crud de usuários e cuja é quando uma aplicação ela tem as operações de Create which update e dele que você pode fazer por exemplo um molde que faça a criação direção a atualização e leitura de usuários aí você pode por exemplo retornar esses usuários em
formato Grayson E aí consumir esses usuários essa pei em um Prontinho que posteriormente Tá bom então isso é o que é um novo né O que é o meu gente se sente eu quero que você entende esses três pontos aqui que ele é uma ferramenta que permite que você Execute corpos aqui fora e o navegador ele utiliza o mesmo motor que Google Chrome utiliza para processar esse código e consequentemente ele pode ser usado para construir a pista construir servidores e como não de funciona internamente você entendeu o que é um nojo Mas como que ele
funciona dentro dele vamos o nome de galera ele possui apenas um núcleo para realizar as suas operações então ele é cinco Fred tá bem e ele suporta várias operações simultâneas Então você vai ouvir essa palavrinha quando alguém se refere a Na onde que é o kit que o node ele é não Block Apesar dele ser single-threaded por quê Porque ele tem apenas um núcleo mas ele consegue fazer várias operações simultâneas apenas com este único núcleo e eu vou mostrar para vocês agora Como que é funcionaria por exemplo uma requisição de um front-end para um beck
and feita em Gold como que ele conseguiria lidar com várias requisições ao mesmo tempo então vamos lá preparei uns desenhos aqui eu sou um ótimo programador da pessoa mas eu não sou muito bom no PowerPoint então não ficou muito bonito aqui mas eu prometo que vai ajudar vocês a entender como que noite funciona Tá então vamos imaginar que a gente tem três agentes aqui tá a gente tem a cozinha de um restaurante Ok pensa que não sei que é um restaurante a gente tem a cozinha que pensa que é o motor que processe o código
já esqueci dentro do node Ok e a gente tem duas mesas que são dois front-end 22 clientes ele pedindo fazer uma requisição o status Hinode é esse carinha aqui que tá feliz aqui tá bom essa carinha aqui então é deixa eu pegar meu apontador a laser aqui só vai ficar mais fácil Essa cozinha aqui é o diabo rende é o V8 que processe o código java script esse aqui é o node e esse aqui são dois são tem foram gente está aí vamos supor que o novo dia de tarde boaça lá cara tá vivendo a
vida dele de boa e aí chegou uma mesa né chegou um cliente e falou cara não hoje me ajuda aqui ele por exemplo pedir uma lista de usuários vamos aqui levando exemplo aqui do restaurante vamos supor que essa mesa ela falou cara eu quero uma carne ou noite foi lá nessa mesa e falou beleza que é uma carne Fechou eu vou pedir lá para cozinha fazer então ele vai lá para cozinha tá mas ao mesmo tempo que ele tá lá na cozinha ele não fica lá galera esperando que esse prato fique pronto para ele seguir
a vida dele e coincidente mente enquanto ele tava lá na cozinha vamos ali ele ele foi na mesa um essa mesa é um pediu uma carne por exemplo ele foi na cozinha falou a visão cama carne mas ele não vai ficar lá esperando essa carne ficar pronta e a Inês é muito a mesa dois fez outra requisição então ele foi lá enquanto a carne estava sendo preparado enquanto a requisição da primeira vez estava sendo processada ele foi para a próxima para mesa 2 E aí a mesa dois pediu por exemplo macarrão e aí o noite
falou beleza e pediu macarrão vou lá na cozinha e falar para ela que a mesa dois pediu um macarrão aí quando ele chegou lá nessa cozinha galera essa cozinha falou Beleza eu vou fazer esse pedido aí da mesa dois mais caro o pedido aqui também são Já tá pronto vai lá por favor entregar para ela então ele pega esse pedido e vai lá para mim usar uma entregar e aí ele segue o mesmo fluxo cara enquanto ele entregou o pedido da mesão o pedido da mesa do está sendo processado então quando ele voltar lá na
cozinha a cozinha vai falar cara agora o pedido aqui também essa dois macarrão tá pronto então ele vai lá pega esse macarrão e leva para mesa 2 E por que que eu dei exemplo aqui galera tenho certeza que Vocês entenderam tá se você não entender o volta que essa parte é bem importante é porque a gente entende como que o nome dele é uma parada muito é performática é uma parada muito rápida mesmo tendo apenas um núcleo tá aí é perfeitamente que apesar de ele ter um lucro quando ele recebe uma requisição ele não fica
esperando essa requisição ser concluída para ele pegar a próxima então por exemplo aqui mais uma vez quando ele veio aqui na mesa EA mais vão pedir uma carne ele não precisou é esperar essa carne fica pronta para ele atender o próximo cliente então pensa que a gente tem sei lá dez pessoas fazendo uma requisição get por exemplo do tipo Jet pedindo pensa que a gente tem 10 pessoas pedindo uma lista de usuários por meio de ao mesmo tempo ele vai usar essa mesma mecânica aqui para esses 10 usuários ele não vai ficar travado em nenhum
momento esperando que essa lista seja processada para ir se ele atender a próxima requisição ele vai fazer tudo ao mesmo tempo Apesar de ele ter apenas um núcleo por isso que ele é chamado de cinco Fred mas não bloquinho Porque apesar de ele ter um núcleo ele nunca vai ficar é travado em uma requisição esperando que ela seja processada para atender a próxima show de bola a gente entendeu Como que o nome funciona internamente por quê que é chamado de não Block Mas quais são as vantagens de utilizar ele porque que você tá ainda tinha
o seu P e aqui para aprender o node.js primeiro que ele tem um ótimo uso de memória tá então ele tem um baixo custo para Porque como ele tem apenas um lucro ele usa pouca memória por padrão e como ele usa pouca memória é você é para hospedar ele para colocar ele online para colocar um servidor com node.js é online você não precisa pagar muito caro por uma máquina que tenha uma quantidade grande memória Então isso é um ponto muito positivo do node.js outro. É harmonia que ele tem com o front-end por quê Porque ambos
utilizam Java escrever então um time que sabe apenas javscript consegue trabalhar tanto com node quanto por exemplo rjs que a gente também tem curso aqui no canal e harmonia Entre esses dois a gente será muito grande porque ambos utilizam a mesma linguagem então a curva de apresentado para o time para usar ambas as ferramentas não vai ser tão grande assim porque o que eles sabem diabo sculpture at por exemplo eles vão conseguir aplicar perfeitamente no Náutico e tudo isso faz com que o nome dele seja muito rápido simples e esse calabresa a Carla hoje é
tranquilo para você aprender tá não é algo de Sete Cabeças é o que você vai pegar eu vou te ajudar a pegar esse cara e dominar ele beleza EA outra coisa que é obviamente é muito importante ele é extremamente forte no mercado car dá uma procurada aí por node no Linkedin para você ver o tanto de vaga que tem para essa ferramenta atacar é é sensacional então é uma é uma tecnologia que tem uma presença muito forte no mercado Então o que vale muito a pena você aprender então fica tranquilo Nesse quesito que o node
ele tá cheio de oportunidade no mercado ainda mais você for bom Agora vamos começar eh mergulhando um pouco mais em termos técnicos no novo no coisas mais técnicas dono de beleza a gente aprendeu o conceito a gente aprendeu o que que ele é vantagens como que ele funciona agora vamos começar a conhecer mais sobre aspectos mais técnicos sobre ele EA primeira coisa são os módulos tá a gente pode criar os nossos próprios módulos ficar tranquilo que já vai entender o que são modos tá nossa arquivos é importar os basicamente Resumindo aqui e sempre que a
gente cria um arquivo no nojo esse arquivo é um modo que a gente pode importar o arquivo a por exemplo dentro do arquivo b e usar arquivado em do arquivo b e vice-versa tá e o nome é se ele já vem com módulos pré-instalados então por exemplo ele vem com módulos é que escrevem é criam que deletam que atualizam arquivos novos no sistema operacional ele vem com módulos que permitem que a gente queria servidores leva então a gente do exemplo ele é de uma API de um McQueen então ele vem com módulo chamado http que
faz essa criação de servidores tá então tem vários módulos aí para instalar os que já vem com um molde e para importar o módulo a gente usa uma sintaxes chamada comum JS que essa syntax aqui ó que a gente usa do Record Então se a gente quer importar o módulo tef por exemplo que é o módulo padrão é que já vem pré-instalado com longe a gente usa essa sim táxi aqui do Chefe tá esse cara aqui então aí o módulo pé fica dentro dessa variável que a gente pode utilizar essa variável aqui para utilizar esse
hoje a gente consegue também como eu falei importar arquivos né então todo o arquivo que a gente faz a gente consegue transformar ele num módulo e é consequentemente importar ele em outros arquivos e usar tudo que a gente fez dentro dele em outros arquivos e ainda sobre módulos tem uma coisinha cara que é um dos grandes responsáveis pela grande popularidade do novo por ele ser tão bom assim tá aqui é o npm o RPM permite que a gente instale módulos de terceiros então a gente viu que nós temos dois tipos até agora a gente os
dois tipos de módulos os Que Nós criamos e os que vêm pré-instalados com nojo E agora tem um terceiro tipo que são módulos de terceiros então módulos que outras pessoas fizeram e que a gente pode instalar esses módulos e usar no nossos projetos esses módulos quando instalados eles são armazenados em uma pasta chamada node molhos Então essa força que vai conter todos os módulos de terceiros que a gente estava Nossa aplicação e um arquivo chamado pectus. Jason lista todos esses módulos que a gente está e fêmea como se fosse um contrato que fala cara essa
aplicação aqui tem todos esses módulos instalados pelo npm então todo esse módulo daqui de terceiros instalados e esse npm ele tem alguns comandinhos aqui tá primeira coisa esse npm init é bem importante porque sem ele a gente não consegue instalar nenhum nenhum modo de terceiro Ok então a primeira coisa que a gente faz um projeto é da SN permite aqui para ele criar o pack de consideração que esse arquivo que vai estar todos os módulos que a gente está lá pelo npm E aí aqui ó a gente consegue instalar um pacote usando esse comando aqui
então quais comando RPM Express a gente estala ou Express e a gente tá lá ele localmente ou seja se você fizer esse comando aqui no seu projeto você vai instalar o Express apenas no seu projeto Ok se você quiser usar o Express em outro projeto você vai ter que instalar ele novamente beleza e aqui a gente sabe um pacote globalmente quando a gente usa esse tracinho G aqui também então neste caso esse novo de bom ele vai e na sua máquina e consequentemente a gente vai conseguir usar esse na última em todos os nossos projetos
gente não vai precisar ficar instalando ele em cada projeto que a gente quer utilizá-lo tá então galera eu passei para vocês é a base que eu preciso por enquanto tá para gente seguir esse curso é um cara você ficou meio confuso volto slide comenta aí eu te ajudo mas é muito importante que você entenda tudo que eu expliquei até agora porque pelo menos carão Presente mesmo sem por cento mas pelo menos tem uma boa noção porque isso aqui vai servir como base para gente agora que a gente vai para o código então bora lá a
viúva esconde começar acordar mais antes da gente começar na cor da obviamente né Felipão a gente tem que instalar um node e o fizesse uso Cold também tá então vou deixar na descrição o link para você fazer download OBS Studio cor gente vai usar para editar o nosso código Então faz onde aqui para o seu sistema operacional e o nó gente precisa para executar código JavaScript dentro da nossa máquina como a gente acabou de ver nos slides então vou deixar mais uma vez aqui o link para você baixar e que vai ter duas opções de
versões tá aí Oi e a cores Qual que é a diferença entre elas a LTS a gente consegue até ver aqui o número da versão LTS é uma versão menor mas mais estável uma versão que já foi validada pela comunidade que tá mais testada e a corrente não é uma versão mais Beta vamos assim então é recomendável que a gente use a LTS porque é uma versão mais estável a gente não quer usar algo Beta nos nossos por é porque pode dar algum problema concorda Então baixa aqui é bem tranquilo é só da net em
tudo no instalador Ok se tiver qualquer dúvida qualquer problema deixa aí nos comentários que eu ajudo você tá bom então agora vamos lá para o médico hoje e a primeira coisa que eu quero mostrar para vocês galera é o que muita gente me pergunta Tá qual tema que usa aqui no meu vs code O tema é esse aqui se a gente vê aqui nesse ícone a gente consegue ver as extensões que a gente consegue instalar no vs code e aqui tá o tema que eu uso esse Drácula beleza e vocês vão perceber que quando eu
salvar o meu código ele vai formatar automaticamente Então vai colocar; vai colocar espaçamento e para fazer isso eu uso uma extensão chamada perder então se você Oi bem você baixa depois você baixar você vai ter que vir aqui em série série que novamente procurar por default former Ok o formato do padrão se tiver em português e aqui você vai escolher o Clear E aí depois você vai procurar por outra opção chamada formate um save ou formatar ao salvar em português e você vai marcar aí você vai ficar exatamente com o mesmo comportamento que eu aqui
no meu vs code tem um vídeo aqui no meu canal em que o ensino é tudo que você precisa saber para dominar o Vasco hoje é dentro de extensões começa aqui como pedir etc e muito mais coisa vou deixar aqui no card caso você queira assistir depois ok então vamos lá criar o nosso o nosso projeto não de a primeira coisa que a gente precisa fazer como a gente viu nos slides é abrir aqui o terminal porque eu contra o J produto terminal beleza e ela era para certificar de que o node tá instalado corretamente
você vai digitar novo viver dessa forma promete essa versão vai ser diferente da minha e tudo bem Ok tudo bem só precisa aparecer uma versão não tem não faz muita diferença e a primeira coisa que a gente vai fazer é abrir a pasta né aluguel Oi passa aqui para gente colocar o nosso projeto eu abri nessa aqui curso na audiência dicas para deve ser abre aí para abrir falhou Open folder e você escolher pastinha que você fez a gente vai dar um clique aqui para limpar e vamos ditarem permite que vai inicializar umas projeto vai
permitir que a gente está módulos de terceiros também então Dá um enter ele vai fazer várias perguntas aqui para a gente tá pessoal a primeira o nome do do pacote do projeto eu vou deixar esse aqui mesmo que a gente apertar enter ele vai colocar o padrão conversão podemos apertar enter também description ficou colocar curso de node é se enter and Point já vou explicar tá entre também teste não vai ter kit repositor não vai ter Words pode dar entre em tudo só pessoal E aí a gente da Inter novamente e ele criou essa pastinha
aqui para gente tá então tem todas as informações que a gente colocou aqui tem não a minha versão e etc gente não precisa se preocupar muito com isso e tem esse script aqui que a gente já vai entender o que são beleza é mas por enquanto o nosso pega de ponto de ação tá pronto OK e galera é a gente vai querer aqui um repositório gente também Beleza então se você não sabe kit cara eu recomendo que você aprenda antes de seguir aqui aprendendo Não hoje eu não coloquei requisito não coloquei como requisito para esse
curso porque realmente não é um requisito mas eu recomendo muito que você aprenda a cara porque para você gerenciar um projeto node Você vai precisar de Elite vai ser muito difícil você gerenciar um projeto novo que vai ser um projeto naturalmente mais complexo com muitos arquivos sangue vai ser extremamente difícil tá então vou deixar aqui no caixa o meu curso gratuito sobre gente também tem menos uma hora então Você consegue rapidinho lá e voltar aqui Vamos seguir então é para criar um repositório eu vou dar um kit tá E aqui galera vamos criar umas primeiro
módulo Tá eu vou criar aqui dois arquivinhos um chamado em deck control s Oi e um chamado porção JS e a gente vai criar a gente vai importar esse porção dentro do Index Beleza então vamos aqui no Porção a gente vai criar uma classe você quer só para gente ver os módulos funcionando na prática Ok e essa classe para receber é um nome tá E é vou colocar 10. Nele igual Nemo então basicamente eu tô recebendo o nome Tô aceitando o nome aqui da porção para esse nome que a gente está recebendo aqui no consultório
ficou naquela será estanciada e aqui eu vou criar um método chamado sem my name bem coisa básica aqui tá pessoal que vai retornar a uma template Tang tudo isso em seu número cuja escrita galera se você tá é meio perdido volta um pouquinho vídeo que eu deixei no card lá para você ver eu procurei para o meu canal e que eu vou falar mais nem esse desse ponto name show de bola bem simples mas só para gente ver funcionando e agora galera gente suportar essa esse cara aqui para usar no nosso index a gente tem
que fazer o seguinte a gente tem que digitar mod o ponto é que esportes e aqui a gente pode exportar ou uma variável só qualquer coisa variável classe enfim dessa forma e beleza Ou a gente pode exportar um objeto com várias coisas dentro então se a gente colocar um objeto assim a gente pode suportar força igual por som tá que a a fazer isso aqui ou a gente pode exportar dessa forma porção igual parça tá eu vou exportar conversa assim normal porque como é uma classe né é o ideal que a gente use o P
maiúsculo para iniciar o nome dela show de bola agora vou voltar aqui index E vamos cortar esse cara como que a gente importa o módulo não gente viu lá que a gente usa uma sintáxi usando recolher então vamos fazer o seguinte vamos colocar a const e aqui por enquanto eu vou colocar por som igual a Record e aqui a gente vai dar um ponto barra para acessar esse esse esse diretório aqui que esse arquivo index contratar essa está localizado e vão pegar essa porção sabe e aqui como a gente está importando é exportando um objeto
essa coração aqui vai ser um objeto Então a gente vai fazer um de choque foi para já pegar a porção aqui dentro Oi e a gente viu também que a gente está formatando código automaticamente cumprir como mencionei para vocês mas galera esse aqui lembrando que é um objeto tá então se eu colocar por exemplo bem aqui e aí eu aqui também. Ele até vai as completar para mim com essa porção que então isso aqui é um objeto mas eu já vou fazer o disse já que tinha aqui desse cara para ficar mais tranquilo Beleza agora
vamos criar uma variável chamada porção e aqui vamos nilkerson e é que eu vou passar o Nemo para colocar Felipe por exemplo tá é que eu vou dar um console. Log no Porção pontos em my name Ok e agora para executar um arquivo novo de galera a gente vai fazer o seguinte aqui no terminal a gente vai digitar hoje e o nome daquilo que a gente quer executar nesse caso a gente vai executar uma ideia estão JS que está dentro desse diretório aqui então a gente só precisa escrever isso aqui de volta vamos dar uma
então e olha que legal cara My name is Felipe então Olha como a gente consegue criar um arquivo aqui importar ele aqui Que bacana cara isso é um ponto muito positivo aí Donald e galera tem um probleminha aqui já que eu quero resolver é mostrando uma biblioteca de terceiro quando eu falo biblioteca tô me referindo a moto de terceiro tá aqui é o seguinte se a gente fizer uma notificação aqui então tipo mudar aqui para My name is Felipe não sei lá de Hello mudar para Hello aqui exemplo tá ficou My name is on e
diz pontos name se a gente quiser fazer isso a gente vai ter que salvar Mais Uma Vez No Dia em 10 para chutar essa a gente vai ter que ficar toda hora é reinicializando manualmente o servidor a gente pode resolver isso usando uma biblioteca muito famosa que a gente viu nos slides lá chamada não Demon quer saber até que ela vai fazer com que o nosso servidor seja reiniciado automaticamente sempre que a gente fizer alguma modificação em algum arquivo Então vamos lá instalar o nosso primeiro modo Então vamos dar um vídeo aqui no console e
se você tiver no Windows tá pessoal para limpar o console ele vai digitar CLS Vamos então npm instal node mão e aqui galera é o seguinte a gente tem duas opções aqui para celular mão de mão três opções a verdade a primeira instalar ele localmente apenas por esse projeto aqui tá a segunda instalar ligou aumente que a gente vai conseguir utilizar ele para todos os projetos e com como que eu sei que uma dependência pode ser deve ser instalada globalmente cara se for algo que você vai ter certeza que você vai usar na grande maioria
de seus projetos vale a pena você estar lá no O último é algo assim você vai normalmente Carlitos por você vai querer ter esse comportamento de eu fiz uma modificação já quero inicializar o servidor então ele é um bom exemplo disso mas em outro exemplo aqui galera que é instalar como dependência de desenvolvimento Como assim o nome de mão pessoal é pensa que isso aqui a gente vai no futuro colocar em produção Então a gente vai colocar online para pessoas utilizarem quando nossa aplicação tiver online A gente não vai precisar ter esse comportamento de sempre
que a gente modificar um arquivo esse é o nosso servidor ser reinicializado porque cara a gente não vai modificar um arquivo de um projeto que tá online concorda Então esse tipo de dependência que a gente só vai usar dependência quando eu digo o pessoal me refiro aos módulos tá os módulos que a gente sala se torna uma dependência nosso projeto Então esse tipo de modo que a gente só vai usar para desenvolvimento nodemon por exemplo como eu falei a gente só vai usar aqui encontra a gente está desenvolvendo quando a gente fazer o Deploy colocar
a produção colocar online enfim como se você quiser chamar e quando a gente colocar esse cara online A gente não vai precisar onde muito então presta lá esse tipo de dependência a gente pode usar uma Freguesia chamada save-dev que aí eu vou dar uma entrar aqui pessoal só para a gente ver então ele vai demorar um pouquinho tá pessoal dependendo Aqui é do tamanho do meu irmão e também da sua internet beleza instalou aqui fechou show de bola e agora se a gente vê aqui no pet português a gente veio aqui a gente tem um
campinho chamado Dev dependencies aqui Dias quer dizer que esse aqui são módulos que a gente só vai usar para desenvolvimento tá então mais uma vez cara se você tem um módulo 1 que você só vai usar enquanto você está desenvolvendo aplicação está ali ele como Dev dependencies um nojo mão é um exemplo disso Ok e a gente viu também que dois duas coisinhas novas foram geradas né e sinal de moldes que é um arquivo enorme que contém todas as nossas dependências todos os nossos modos e Felipe porque cara que tem tanta coisa aqui sendo que
eu só instalei o meu irmão porque tudo isso aqui é dependente do Dom Demon o presente tudo isso aqui para funcionar por isso que ele falou automaticamente todos esses módulos aqui e eu já vou adiantar para vocês galera a gente nunca vai subir sinal de moldes Project Então a gente vai criar um Hit ignora aqui mais uma vez eu ensinei isso não consegui te ouvir Beleza então vou criar um ponto de Ignore e aqui eu vou colocar o nó de olhos porque porque senão de modos ele vai ser enorme galera é uma pasta que vai
ser absurdamente grande conforme o nosso Projeto Crescer então a gente não quer colocar esse cara no Gate e sempre que a gente tiver um pack de contribuição se a gente deve estar ensinando de móveis por exemplo e a gente dá um npm instal o nome dele vai instalar tudo que está listado aqui como dependência tanto tanto desenvolvimento quando dependência normal aqui para a gente tá então cara se não de mal disso pode ir por exemplo a gente pode apagar esse cara que se a gente deve impermisol ele vai gerar esse cara novamente então o ideal
é que a gente suba para o kit apenas o pack de português beleza não subiram de modos E aí quando alguém clonal nosso repositório essa pessoa der é dar um npm install para instalar todos os módulos e necessários Ok então esse é o fluxo que a gente segue é um projeto lúdico e outra coisa aqui que a gente criou que a gente na verdade aqui foi gerado automaticamente para gente foi se package-lock esse package-lock é basicamente um arquivo que lista as versões dos nossos pacotes dos nossos modos tá vendo aqui ó então é arquivo que
também é importante para se certificar de que todo mundo no time por exemplo vamos supor que mais uma pessoa trabalha nesse arquivo aqui nesse projeto perdão spec.org vai ser package-lock na verdade vai se certificar de que todo mundo tá usando as mesmas versões de todos os monstros que eles então aqui é muito importante aí que é gerado automaticamente quando a gente deu então impermisol ou quando a gente instala algum módulo de terceiro pelo mpm agora que a gente aprendeu essa parte fundamental do node que essa parte de módulos a gente aprendeu que a gente pode
criar os nossos próprios módulos e importar ele se a gente aprendeu o que a gente pode também instalar módulos de terceiros como a gente fez com o nome de mão e que a gente também pode importar módulos nativos do nojo Eu Quero Mergulhar um pouco nesse último tópico Tá eu vou mostrar há uns módulos nativos que a gente usa bastante Note que são muito úteis mas para servir de referência para você está e logo em seguida a gente vai começar a criar o nosso servidor web a nossa api usando o módulo http Donald aqui então
agora tem que aprender sobre dois módulos o pef e o FS mais para ficar diferença pra vocês mesmo porque são na minha opinião um dos módulos mais úteis aí aqui já vêm pré-instalados com os mais antes que ela eu quero mostrar para vocês a esses scripts aqui que são esses scripts são basicamente comandos que a gente pode executar Ok dentro aqui Donald por exemplo em vez de a gente ficar e a gente tem o sono de mão né pessoal a gente tá longe mãe não usou o cara então vamos ao mesmo aqui ó para usar
ele inclusive a gente tem que usar esse escrito então casa com que o explicar agora por exemplo se a gente quiser executar o nome de mão tá a gente pode ou daqui um npm Run ok que esse cara vai rodar um script no Diamond King deck com JS E na verdade a gente não pode fazer isso cara isso aqui a gente poderia fazer se a gente está lá se ele globalmente a gente poderia escrever não hoje mão em 10. JS nesse caso a gente fez a criar um script que é basicamente um comando Ok então
a gente vai ter um escravo chamado start deve tá porque a gente faz dois cara para iniciar Nossa aplicação em desenvolvimento beleza e aqui cara a gente vai dar basicamente um nó de mão indexcon trouxesse Beleza então vamos salvar e agora para rodar um script a apertei contra você tá vir e agora posso dar uma prova um script gente vai dar uma npm Run e aqui o nome do Espírito então start deve e quem vai colocar estar chefe E aí ele rodou não de moto para gente olha que legal já executou arquivo aqui pra gente
o Hello my name is Felipe se a gente voltar aqui index no persson e mudar essa mensagem aqui para mai in my name is this. Name ele vai reiniciar aqui o servidor cara olha que legal e já mostrar o nosso aqui já executou uma surtivo com as mudanças tá então para isso que a gente usa o nome de mão e assim que a gente usa os scripts aqui nosso poeta agora vamos lá pessoal começar a ver sobre o módulo tef que é um modo que a gente usa para manipular para trabalhar com diretores de arquivos
Então bora lá vamos então criar é um arquivo aqui chamado a Vou colocar aqui galera vou vamos criar uma pasta porque esse aqui vai servir de referência para a gente tá então vou criar uma pasta chamada molhos e aqui eu vou criar um arquivo chamado pec.rs ok que o módulo que a gente vai dar uma olhadinha agora mais uma vez vai ser bastante referência para vocês ok vamos lá então importar o pf para fazer isso a gente vai colocar um teste Record PF e como um módulo que já vem no noite a gente não precisa
instalar ele ele já vem aqui para gente utilizar agora a primeira coisa que a gente pode fazer galera é pegar o nome base do arquivo que a tô trabalhando agora como assim vou levar lutar contra o barra para criar um comentário e vou escrever bem cm tá que é o que a gente vai pegar agora usando o chefe E aí vamos dar uma console. Log e a gente vai digitar o seguinte f.biz name e no node galera a gente tem acesso algumas variáveis globais Como assim a gente consegue acessar uma variável chamada Anderson underline underline
file name que é o nome do arquivo que a gente está executando agora então é esse nome aqui no pf tá vamos salvar aqui e a gente vai precisar importar esse Pepe aqui dentro do Index controlar essa galera para ele funcionar e como que a gente pode fazer isso primeiro vou tirar esse console. Lado para ficar fora daqui e se a gente quiser importar um arquivo galera só para ele ser executado como que a gente faz a gente basicamente para colocar apenas um recuar tão vou colocar o quarto./Olhos/PF Vou salvar e agora sim esse PF
ele está sendo executado Então o que a gente vê perto e pontual parece que é o nome desse arquivo aqui tá então basicamente a gente consegue é ver apenas o nó é com esse base Nemo Então vou colocar aqui apenas o nome do arquivo atual Tá bom vou apertar a controlar novamente e o próximo método ele vai pegar o nome do diretório atual Ok então vou colocar diretório nome do diretório atual beleza e aqui a gente vai dar um console. Log eu vou digitar PF. Disney me e aqui pegar o fahel name Então esse cara
ele vai pegar o diretório em que esse arquivo está localizado Então vou salvar e a gente veio aqui ó que o diretório É esse aqui beleza então tá certinho aqui cara que legal/mods e aqui tal nosso arquivo que a gente está trabalhando atualmente agora outro método muito útil é o pf.us time que com ele a gente consegue pegar a extensão do arquivo então mais uma vez comentei aqui com controlar beleza e vou criar aqui um comentário chamado extensão do arquivo beleza e aqui eu vou dar um console. Log eu vou colocar death.fm e aqui o
nome vamos salvar e aqui a gente vê a ponta Ah tá então olha como esse modo é poderoso cara a gente consegue manipular a gente consegue trabalhar muito bem aí com diretórios com arquivos agora outro outra possibilidade é que a gente pode criar um objeto PF por exemplo vou dar uma console. Logo aqui e aqui eu vou digitar Pet ponto Force e a gente vai colocar o Faial name ele vai criar um objeto PF com várias informações sobre o nosso arquivo atual que expresse contrata é se Lembrando que esse foi o Leme arma armazena o
nosso arquivo atual Beleza vou salvar e é que a gente vê ao que tem root que tem o diretório que tem o básico é o nome básico dele né que o nome base perdão que é basicamente esse vezes nem me Aqui tem a extensão e tem o nome do arquivo sem sem extensão também Beleza então cara esse peça é bem útil e o último aqui mais ou menos importante que eu quero mostrar pra vocês é esse ah é um pec.do aqui para mim que a gente junte vários caminhos de arquivos Como assim vou colocar aqui
juntar caminhos de arquivos beleza e aqui vamos supor que a gente quer e adicionar nesse mods aqui cara é dois caminhos como que a gente faz isso vamos lá vai ficar mais claro para você ó vou dar um console. Logo e pés contudo em Esse é o nome do método beleza e aqui a gente tem acesso a outra variável global no nome de galera que é uma chamada de um name que basicamente vai pegar o nome do diretório atual Tá eu vou dar uma console. Logo eu vou comentar aqui tipo de uma console. Logo iludir
nem me só pra gente ver como que ele se parece e ó ele é assim OK então esse pref.do em a gente vai pegar o Johnny então pegar a partir desse molde aqui e adicionar mais alguma coisa depois ele então vou colocar uma vírgula e vou colocar por exemplo teste vou salvar e olha que legal ele adicionou/teste aqui no moldes a gente também pode adicionar em algum arquivo então é colocar uma vergonha de novo quanto mais vírgulas 20 colocar aqui quanto mais parâmetros né a gente colocar aqui mais diretório serão adicionados ao júri name então
a gente pode colocar até um teste ponto HTML salvar e ele vai adicionar aqui no nosso Pepe também então é bem bacana cara esse essa é bem útil é mais uma vez esse aqui vai ficar de referência para a gente ela para a gente ir quando a gente precisar usar o pé pra gente ter uma boa referência aqui dos métodos que a gente pode utilizar e dos propósitos né que cada método tem agora vamos aprender sobre o módulo chamado FS que a gente vai usar ele junto com esse PF aqui para manipular arquivos então para
criar arquivo para ler arquivo para renomear arquivo então é alto módulo bem útil bem bacana que a gente vai prender agora tá então vamos aqui primeiro moleque acontece é comentar esse bico era aqui para gente não ficar vendo esses console. Logs aqui então vou apertar contra o Barra ou salvar Beleza vou apertar o controle de p e eu vou aqui no terminal ele show de bola agora vamos criar e aqui chamado FS. JS como eu falei com esse cara que a gente vai conseguir manipular o sistema de arquivos tá então vou importar aqui com a
chefe S Record FS e que eu vou colocar com seu perfil é porque a gente vai usar também o peça em conjunto aqui com ele a primeira coisa que a gente consegue fazer galera é criar uma pasta tá então apertar contra o baque criar uma pasta beleza e para criar uma pasta a gente vai usar o método do FS chamado make dia e esse meio que diz vai receber um PF tá vendo Então a gente precisa usar o PS ponto de homem por exemplo para é falar eu quero que você cria essa possa aqui então
vamos supor que a gente quer criar uma pasta chamada teste aqui dentro do models como que a gente faz isso a gente vai primeiro dar um pref.do em tá e a gente vai juntar esse o nosso diretório atual com a passa que a gente quer criar então aqui eu vou colocar Disney me, teste ok no caso/teste e aí ele vai pegar o nosso diretório atual que é esse molde aqui né e no arquivo que está executando esse essa linha de código e vai colocar dentro dele uma pasta chamada teste e aí o medir vai ver
que não tem essa não existe resposta lá e ele vai criar essa possa para gente beleza e essa função S6 que dia recebe dois parâmetros O primeiro é um objeto com options que a gente vai passar vazio tá e o último é um callback e esse cobec galera é na verdade eu acho que é aqui cara vamos ver acho que o callback aqui acho que não tem a opção de um objeto de option Mas enfim esse callback ele vai acontecer depois que essa depois que a criação nessa pasta foi realizada porque esse método ele é
assim como tá se você não sabe o que é Método assíncrono Promises eu vou deixar na descrição o link com como de e-books meu que eu ensino tudo sobre esse assunto beleza mas você não sabe não não consegue ver se como diabos agora fica tranquilo pode seguir comigo que eu vou explicar para você tá esse callback aqui ele vai ser executado quando essa criação for realizado como eu falei porque é porque se medir ele não vai ser instantâneo tá então e essa função aqui falou beleza quando você fizer a criação pode demorar um pouquinho mas
quando você fizer eu quero que você me Execute essa função vai receber um erro tá então a gente pode verificar aqui ó se tiver algum erro a gente pode dar um console. Log e colocar erro ó e aqui colocar o er beleza se não tiver um erro a gente pode dar um oi Tânia aqui vamos dar um Tony beleza para ele sair da função né Se chegar aqui e aí ele não vai executar linha de baixo e aqui na linha de baixo a gente pode colocar console. Log pasta criada com sucesso Ok vamos salvar Vai
formatar para mim beleza agora aqui no index Vamos dar um like our no ponto/moldes/fs1 salvar e aqui passa criada com sucesso e ele criou a pasta teste cara Olha que bacana galera se a gente salvar novamente o meu irmão vai inicializar para gente e a gente vai ter um erro por quê Por quê e a pasta já existe então fica aí fica aí esse conhecimento não é de que se você tentar criar uma pasta que já existe ele vai dar erro aqui OK vou comentar por enquanto para não ficar dando erro sabão esse cor diferente
aqui para vocês e a próxima coisa que a gente pode fazer com chefe com FS perdão é criar um arquivo tá porque a gente criou uma pasta aqui vamos porque a gente quisesse criar um arquivo aqui dentro desse teste Então vamos lá contra o Barra criar um arquivo Ok e para quem é o arquivo é bem parecido tá com um mês que dia que a gente vai colocar FS. Make fahion na verdade é que raio tá e aqui a gente vai passar um teste anteontem beleza mesmo esquema tá pessoal a gente precisa passar é por
meio do pé ficou aquilo que a gente quer criar então vamos porque a gente quer criar dentro aqui do olhos é uma pasta chamada teste Então vou deletar esse aqui tá então outro cliente que a criar uma pasta chamada teste e dentro dela a gente quer criar um arquivo chamado teste e ponta HTML como que a gente faz isso em que pega aqui o Dionei me beleza que vai ser mais uma vez esse mod Oi e aí dentro decidiu Nemo gente quer colocar uma pasta chamada teste e dentro dessa passe a gente vai colocar uma
pasta de um arquivo chamado Teste Ponto HTML tá é que falta a barriga beleza e para mover o cursor assim pessoal eu tô segurando o controle e apertando a barra a afeta tá bom Fechou agora é esse esse wi-fi ele recebe como primeiro parâmetro um PS né que a gente passou agora e o segundo parâmetro o conteúdo Ok e galera aqui ó a gente pode colocar por exemplo de chester pode colocar HTML Tá eu vou colocar terceiro que vai ficar mais fácil pra gente visualizar e aqui o conteúdo vou colocar a Hello Xperia Reload tá
beleza agora como terceiro parâmetro a gente vai passar o callback assim como a gente fez aqui né a função que vai ser executada quando essa Quando a escrita desse arquivo for finalizado Então vou passar aqui em qual Beck que vai receber um erro também tá então aqui a gente vai verificar se tiver algum erro significa que algo de errado então vou dar uma console. Log erro Oi e que eu vou colocar o erro e aqui eu vou dar uma carne beleza fechou agora aqui vamo dar um fora do IF nós vamos dar um console. Log
o arquivo criado com sucesso um salvar vão ver se vai criar a não sou não sente frio or directory porque galera Street Fighter ele vai criar apenas um arquivo tá então a gente precisa criar a pasta antes de criar esse arquivo dentro dessa passa entendeu então a gente precisa ter a teste aqui para ele criar o arquivo dentro da teste Então vamos comentar esse aqui com contra o barraco ele created novamente e aí deu certo cara então ele criou a teste e dentro até que ele criou até as ponto de ser esse a gente abrir
aqui a gente tem um conteúdo que a gente a definiu aqui beleza então cara Olha que bacana a gente consegue manipular que ele de uma forma muito tranquilo usando o FS junto com o pf vou salvar aqui e vamos para o próximo comandinho que é o dia adicionar um arquivo porque galera porque se a gente é copiar esse cara aqui tava vou comprar e claro e vou colar e a gente colocar hello world aqui no segundo ele vai sobrescrever esse aqui tá então vamos falar para gente ver bom então se a gente voltar aqui no
teste o hello world por quê Porque whitwell esse aqui ele vai sobrescrever o que esse cara fez Então esse cara escreveu Reload e esse cara aqui ele vai escrever ela hoje então ele vai substituir o hardware pro padrão e substitui o conteúdo inteiro do arquivo tá bom se esse arquivo já existir a gente pode ao invés de substituir por completo adicionar conteúdo Então vamos para que a gente quisesse por exemplo colocar hello world e aqui colocar a Hello importante também sabe que tipo vamos pra que a gente quiser deixar dessa forma a gente pode fazer
isso usando um metro que vou explicar para vocês agora então vou apagar aqui E esse método ele vai permitir adicionar a um arquivo e o nome desse método FS. Aprende fahion e ele é basicamente a mesma coisa desse aqui tá pessoal vai receber o perfeito Johnny com o arquivo que a gente quer adicionar então tirei me que eu vou colocar/teste E aí dentro tem o teste Fontes beleza eu vou dar um, aqui vai ser conteúdo Então vou colocar ela hoje por exemplo tá E aqui vai ser a função callback que vai seguir aqueles que me
então se tiver algum erro eu vou dar um logo aqui e no erro e colocar o ever apertar home aqui para vir para o começo Brittany e aqui se não tiver um erro eu vou dar um console. Log arquivo modificado com sucesso como salvar Beleza agora vamos ver aqui o teste e olha que legal a gente tem tanto Hello de quanto o Helloween então a gente pode usar o hardware para criar um arquivo ou para sobrescrever por completo Um já existente e o Atende Fácil para adicionar algum conteúdo a um arquivo a gente também consegue
ler um arquivo tá fazer a leitura de um conteúdo de um arquivo por exemplo eu vou dar um controlar aqui lembrando pessoal Isso aqui vai ficar de referência para você está Eu tô passando todo esse metros aqui para ficar diferença para vocês caso no futuro vocês precisem consultar tanto FS né quanto PF que a gente usou aqui e tá usando aqui também ok bom então a gente consegue ler arquivo então ler o arquivo gay para fazer isso a gente vai usar FS. Big files beleza é que a gente vai passar mais uma vez aquele esquema
lá a gente vai por meio do pef falar qual arquivo que a gente quer e então vou colocar pref.do em e tornei-me para pegar umas diretório atual e vamos porque a gente que era aquela e esse arquivo teste acontecer então vamos passar teste E aí dentro dessa pasta tem o teste contexto show de bola e aqui galera como segundo parâmetro a gente precisa passar Qual o sistema de caracteres que esse arquivo tá utilizando tá então a gente fez a passar cara utf-8 OK como segundo parâmetro E aí depois dele a gente vai passar a função
callback como de costume tá essa função não vai receber apenas o erro ela vai receber odeia também que é o conteúdo do arquivo que a gente está lendo Beleza então agora vamos verificar se tem algum erro Se tiver vai mudar o nosso retorno em padrão console. Log Evo e aqui mostrar o erro e aqui embaixo a gente vai mostrar odeia Ok vamos salvar então e olha que legal ele aqui ó arquivo Monte ficou E aí ele deu Hello no áudio aqui para gente cara olha aqui bacana Hello mami hello world galera porque apareceu apenas ela
ou não está isso aqui é importante porque como esse método aqui assíncrono e a gente precisa colocar e se aprende filho aqui dentro do cobec dele cara tá e se aprende frio aqui tá porque a gente quer adicionar no arquivo depois que ele já tiver escrito pela primeira vez entendeu então a gente vai colocar aqui para salvar ó e aqui vem aqui dentro aqui ó beleza agora se a gente salvar a gente vê que continua aqui ó o hello world ele não tá o Grand Finale não tá pegando conteúdo mais atualizado porque a gente também
precisa jogar ele aqui dentro tá galera já vou explicar mais detalhadamente para vocês tá então vou salvar e agora assim ele tá pegando o arquivo atualizado por que isso acontece porque galera O Rafael ele é a cinco certo inteiro não acontece que uma vez e como a gente viu comportamentos no dia seguinte quando ele vem um código que demora um pouco ele vai já para o próximo ele não fica travado lá esperando Beleza então o que acontece ele escreve o arquivo ele fala beleza depois eu quando finalizar eu vou ah eu vou te avisar aí
ele vai para aprendi que faz a mesma coisa E aí with faz a mesma coisa quando o rei de Israel Ele lê o arquivo esses dois caras aqui eles ainda não foram concluídos entendeu no caso e se aprende faz especificamente por isso que a gente precisa fazer dessa forma aqui por quê Porque consequentemente Isso só vai e depois que a gente escreveu aquilo então apenas depois desse aqui você é inscrito com sucesso a gente vai fazer o aprende vai adicionar e apenas depois de adicionar a gente vai ler esse arquivo aqui ok então por isso
que a gente tem esse comportamento galera Agora vamos começar a brincadeira cara a gente vai agora criar começar a criar um servidor um beck and usando o node tá primeiro a gente vai usar o módulo nativo Donald para fazer isso http e depois a gente vai usar o Express que é uma biblioteca o módulo que a gente está lá pelo igp-m que torna esse processo de criação de um servidor muito muito mais simples mas eu acho legal você saber pelo menos o básico ali para fazer com o módulo módulo nativo do novo com http para
você é saber essa base Beleza então vamos lá vamos criar aqui no deck control desce vou deletar tudo isso aqui tá bom para na real vou criar outro arquivo chamado htp vou querer aqui no mods mesmo chamado http Ponte Alta é se tá então aqui index eu vou os comentários sobre com ar OK aí aqui eu vou colocar aqui embaixo recolher é./ os molhos/http Beleza agora galera vamos aqui no htp e vamos começar a criar o nosso servidor primeira coisa vamos importar o próprio http o show de bola e agora para criar um servidor galera
primeiro a gente precisa definir uma porta que esse servidor vai a estar disponível tá então vou colocar uma porta uma porte de 80 oitenta Beleza daqui a pouquinho a gente vai abrir camisa isso aqui agora vamos criar o servidor em si para fazer isso a gente vai criar uma variável chamada server e agora a gente vai chamar htp e chamar o método chamado Create server beleza discutir sobre ele vai receber uma função que vai servir dois caras tá Oeste e o response to requests galera o objeto da requisição Ok se você não sabe ainda fica
tranquilo que vai ficar claro para você tá e esse response é objeto da resposta então pensa que sempre que alguém entra no site essa pessoa tá mandando esse everquest dá para o servidor eo servidor vai mandar o responso para ela ok então a gente consegue por exemplo aqui nessa Quest pegar a URL aqui está chegando para gente exemplo tá Vou colocar aqui ó ifec. O RL for igual a sei lá/home o que eu vou mandar tal coisa entendeu então essa água Quest aqui tem os dados da requisição que o cliente está fazendo pra gente cliente
eu fico from can e fica qualquer coisa tá e a gente consegue pegar o URL base em um sinal era a gente vai executar certo ação então por exemplo se for a página home Aqui foram R home a gente pode mandar um HTML para lá falando home por exemplo tá para fazer isso a gente vai usar o viés. And e aqui tem gente pode colocar o que a gente quiser cara se desde que seja dentro de estilingue tá então aqui eu vou colocar por exemplo H1 home page e vou fechar a um aqui só beleza
agora a gente precisa falar qual tipo de conteúdo que a gente está enviando aqui para fazer isso a gente vai usar um has ponto rege a que a gente vai colocar o status code então status code eu vou deixar aqui na descrição uma relação de vários status code para você é ver o significado de cada um mas basicamente 200 fala que a requisição Foi OK tá se tivesse um erro por exemplo a gente colocaria e o 500 mais 200 fala que a inquisição Foi OK e aqui como segundo parâmetro gente vai colocar um objeto e
nesse objeto a gente pode colocar os headers da response e dentro desses restos a gente pode colocar o tipo de conteúdo que é o que a gente quer então vamos colocar um content Type e aqui a gente tá mandando HTML certo então a gente vai colocar text barato ml basicamente galera esse cara que vai falar a response é desse tipo é do text HTML Tá bom então o browser navegador vai saber Beleza é porque eu tô recebendo aqui é HTML Então vai indenizar HTML beleza e agora para colocar esse server online A gente vai usar
server. Li sim e a gente vai escutar na porta que a gente definiu e depois que ele ficar online a gente vai dar um console. Log usar tem três filhos aqui nesse nem vou colocar em português aqui rodando na porta o pocket show de bola vamos salvar Beleza então a gente já teve aqui o log porque o servidor está rodando nessa porta 8080 agora para acessar a gente vai usar o seguinte local roxo 8080 beleza Vamos acessar e a gente tem que colocar a barra homem que foi que a gente definiu e Olha que bacana
cara a gente coloca a roxa dentro 80 que é a porta que a gente definir o Barra home E aí ele caiu aqui nesse foi consequentemente ele mandou um h1.com content Type the text HTML Olha que legal cara e se a gente quisesse fazer por exemplo outra página Vamos assim a gente usaria outro isso aqui por exemplo vamos porque nós teremos uma url que será barra user's e essa URL galera ela vai mandar é um Jason que é normalmente o que a gente vai fazendo hoje normalmente a gente vai usar para criar é 500 que
vão Enviar dinheiro aí para um pontinho de consumir por exemplo então aqui vamos fazer isso vamos criar uma lista de usuários beleza eu e nessa lista mas teremos um usuário com o nome de John doe colocar e-mail de John@globo.com ó e aqui outro usuário com name de Jane doe colocar e-mail que venha roubar 2.com e deu aqui por quê é que eu esqueci aqui colocar o anexo Bactrim porque aqui faltou os dois pontinhos beleza fechou agora galera a gente vai mandar esse cara aqui para o usuário né vai mandar para essa página aqui como que
a gente vai fazer isso primeiro a gente tem que falar como a gente fez aqui Qual é o tipo de conteúdo dessa vez Ponce Então vai ser application barra dias então vamos lá responde Red que a gente vai colocar 200 que deu tudo certo vamos colocar contents no type E aí vamos colocar application/Jason Beleza agora a gente vai enviar esse cara que vamos lá o resto em e aqui galera gente vai ter que usar um jeito um ponto Spring fica como eu falei a gente tem que enviar uma strang Então esse dia Samsung Fire como
um sei lá no meu curso java script transforma um dias um objeto assim OK em um Jason a preparado aqui para um navegador ler Beleza então aqui vamos colocar users vamos salvar e vamos voltar para navegador e agora vamos colocar louca roxo e/users e a gente tem aqui ó olha que legal a gente tem um dia eles vão que a gente obviamente poderia consumindo Frontin de mostrar os usuários etc normalmente que era não exemplo mais real vamos assim a gente pegaria isso aqui de um banco de dados a gente vai fazer isso aqui nesse curso
Você fica até o final aqui a gente vai criar um banco de dados vai ler de banco de dados e vamos mandar também para o usuário máscara você pegou o básico aqui que a gente consegue criar um servidor a gente consegue pegar a URL da orquest vazio o Kelly a gente consegue enviar certos tipos de response certos tipos de respostas por exemplo que a gente viu HTML Ok e aqui a gente envio application Geison gente vê um divisão para o cliente e também era no final desse curso aqui como último top que eu vou ensinar
como que a gente pode criar um sistema de Enviar vários HTML com CSS tudo bem utilizado dinâmico tá vai ser bem legal mas primeiro vamos fazer o seguinte é agora a gente vai converter esse aqui para Express para vocês verem como que é mais fácil depois a gente vai fazer essa conexão com o banco então vamos criar um banco que a gente vai registrar usuários Vamos ler e atualizar e tudo beleza vamos fazer isso e no final a gente faz esse esquema de enviar HTML saque a para certas url de forma que eles HTML e
se possam ser dinâmicos que por exemplo que a gente possa pegar os olhos o banco e mostrar eles hein Olha a primeria mim formatar Dinho aqui tudo pelo nome gente vai aprender isso se você fica até o final Beleza mas agora vamos converter esse cara aqui para Expresso pra gente ver como que é mais fácil os Aliexpress Tá bom então prima você precisa fazer é instalar Express Então vou dar um com trouxe aqui para cancelar esse aqui tá rodando e vou dar uma imprimir sol Express Beleza vou esperar um pouquinho show de bola instalou agora
vamos dar um queijo aqui no console Vamos dar um controle abrir para fechar esse arquivo vamos comentar esse aqui com controlar e agora aqui no mods vamos criar uma um arquivo chamado Express ponte S show de bola agora vamos dar uma Express como de costume né porque Express Pain portais cara beleza e agora a gente precisa inicializar o estresse para fazer isso a gente vai chamar um Express assim a gente precisa assinar lá esse cara para uma variável Então vamos criar uma variável chamada aep show de bola agora galera para criar Por exemplo essa requisição
aqui Ah tá essa aqui ó que foi um jet né para home quando a gente acesse uma página galera é como a gente fez navegador A reacção do tipo Jet gente vai ver os tipos de aquisição daqui a pouquinho mas para fazer um that knocks pra gente vai simplesmente colocar f.net/home por exemplo tá aqui aí é URL que a gente quer executar determinada vez ponto que a gente vai determinar agora e aí depois como segundo parâmetro a gente vai passar uma função e essa função vai receber assim como lá no http hack iOS E aí
o mesmo esquema tá pessoal máxima diferença a gente não precisa ficar acertando aqui cara o content Type manualmente eh e enfim é bem mais fácil Vamos lá que na prática vai ficar mais fácil para você entender aqui a gente pode colocar simplesmente respondo status 200 e aqui colocar um send e que o conteúdo que a gente quer enviar nesse caso eu vou colocar hello world novamente novamente só pra gente ter o mesmo exemplo beleza vamos salvar e agora aqui no index a gente precisa dar uma e carnes Express então mpi Fire é mas antes isso
a gente precisa é por causa não é assim né Felipão./Mod os barcos parece beleza mas a gente precisa inicializar o servidor né a gente não fez isso e para fazer isso é a mesma coisa que a gente fez aqui a gente vai definir uma porta então port 8080 o e química colocar ep. Listen nessa porte E aí a gente vai executar uma função que vai ser executada quando a o servidor ficar online e a gente vai colocar console. Log rodando a rodando com Express na porta Porsche o show de bola agora vamos salvar e vamos
aqui dar um yarn start deve e ar perdão pessoal npm Run start deve que aí é esse espírito que a gente criou aqui beleza no começo aqui no curso um bom então beleza Elisa que estou rodando com a gente espera na porta 8080 e aqui se a gente voltar nossas navegador colocar/home hoje a gente veio aqui cara que a gente tem hello world sensacional você não tiver inspecionar aqui pessoal e a gente vier aqui na aba Network e a gente vai carregar a gente vê aqui a requisição hoje a gente consegue ver os regras aqui
dela e o Express ele não colocou o content Type aqui para gente e não colocou então a gente precisa colocar nesse caso aqui que HTML tá já vou mostrar para você fica um disso a gente não precisa então para colocar um content Type assim como a gente fez aqui ó a gente vai fazer o seguinte a gente vai colocar esse ponto content-type que a gente vai colocar application/HTML vamos salvar voltar aqui recarregar beleza e agora a gente veio aqui na response não foi ainda mais a gente veio aqui em alimentos a gente vai que a
gente tem então HTML aqui então não sei porque não tá aparecendo aqui content-type mas o navegador tá entendendo como content-type então como HTML perdão Então o que a gente colocou aqui tá funcionando beleza e agora para fazer a rota de usuários que a gente fez aqui ó a gente vai fazer a seguinte forma Primeiro vamos comprar essa lista visuais aqui e aí a gente vai colocar outro Beth/users e aí mais esquema legal Rech RS Ok e aqui colar usuários e para enviar dias um galera a gente vai fazer o seguinte a gente vai colocar o
S. Jason e aqui colocar os usuários a gente pode também e o status aqui de 200 beleza agora se a gente voltar aqui no navegador e colocar usar a gente vê aqui que tem o Jason cara olha aqui coisa bacana sensacional a gente consegue fazer Olha como a gente consegue fazer cara mais fácil do que a gente consegue fazer com o http né usando Express Mas qualquer forma eu achei válido passar para vocês esse http aqui para ficar mais como referência Beleza agora pessoal vamos começar a conectar a nossa aplicação como atividades para fazer operações
de criação de atualização leitura e direção de registros Então vamos lá gente vai usar o mongo DB para fazer a primeira coisa que a gente precisa fazer é criar um banco de dados no modo de ver para gente conseguir usar ele na nossa aplicação e para fazer isso a gente vai usar esse site aqui que eu vou deixar aí na descrição você vai entrar nele vai criar uma conta é bem tranquilo tava queimando que você entre com o Google ia ficar mais fácil ainda e depois você vai pro mente ser redirecionado aqui para essa tela
Se você não for basta você clicar aqui nessa brincadeira beijo aqui em depoimento ok aqui a o envio já dei parabéns para construir um banco de dados e aqui a gente vai escolher essa opção gratuita Beleza então vamos aqui criar o show de bola que a gente pode escolher aí o provedor vou colocar a WS mesmo e aqui a região vou deixar São Paulo beleza agora que nós teremos gente vai colocar curso no GS dicas para deves beleza show de bola agora vamos aqui create-cluster E esse processo aqui pessoal é na verdade tem outro processo
antes de começar a criar que é criar um usuário e senha esses olhos sem a gente vai usar na nossa aplicação aqui tá para se conectar com este banco aqui então esse essa assim aqui e os olhos você não pode esquecer Beleza então assim o usuário vou colocar admin EA senha como é só vou colocar um dois três quatro cinco seis sete oito Tá bom então essa vai ser a senha que eu vou usar admin 1 2 3 4 5 6 7 8 lembrando a gente vai usar essa senha aqui na nossa aplicação Então a
nossa ela aí em algum lugar Beleza então aqui Create user eu usei Majin a release porque ele já criou aqui para mim automaticamente então eu vou editar esse esse admin aqui Tá quietinho Edith e que eu vou colocar mesmo a senha o show de bola update password e ele não deixou por causa da senha cara então fazer o seguinte que lá eu vou clicar aqui auto-generated secure password que ele vai gerar uma senha para mim obrigado esse olhinho eu vou copiar esse cara e deixar no meu amor te pede aqui só para não perder beleza
vamo update Ok show de bola pessoal agora aqui ó a gente pode colocar um IP que vai ser que vai ter permissão para se conectar com esse banco aqui aqui já tá esse 0.0 não sei porque já está automaticamente mas o seu onde vocês realmente não vai ter nada então a gente vai colocar 10. Zero ponto 0/0 para permitir qualquer IP que se conecte com a nossa aplicação mais tranquilo que esse P ele vai precisar dessa senha aqui para se conectar Ok então não vai não vai ficar muito desprotegido vamos é de entre na verdade
faltou outros era aqui beleza São 40/0 Ok é diante e show de bola agora fingir inclusive já tá pronto é a gosto é a mazy fechou vou fechar isso aqui tá Então já tá as coisas já tá querendo aqui Pessoal esse processo pode demorar um pouquinho então quando criar eu volto aqui com vocês beleza pessoal criou aqui o meu banco agora a gente vai fazer o seguinte a gente vai clicar aqui em Connect Tá e agora a gente tem interesse opções a gente vai marcar essa aqui ó Connect your application a gente se conectar com
a nossa aplicação beleza marca aí cara aqui e agora ele me deu tô assistindo aqui e ele tá pedindo para gente trocar esse pé surge com a nossa senha do nossos olhos de mim que a gente criou Beleza então vamos fazer o seguinte vamos copiar esse cara e a gente vai colar esse cara na nossa aplicação Ok então vamos voltar Nossa pegação Mas antes a gente precisa lá dois um cara que vai se conectar com esse mongo DB que vai interagir com esse mundo bebê que é uma biblioteca chamada manguzi Ok então vou mostrar para
vocês no npm então um anguzinho PM gente vai instalar esse carinha aqui E esse Cayenne vai se conectar com o banco usando assistindo aqui beleza e também vai interagir com banco fazendo operações de criação por exemplo Então vamos falar esse cara que tá vão voltar aqui na nossa obrigação abrir o terminal com contra o J vamos editar imprimir salvo monguzzi a show de bola Vamos esperar um pouquinho a beleza está louco agora a gente vai fazer o seguinte galera a gente vai criar um arquivinho aqui tá eu vou criar uma pasta chamada src E a
bacana que a gente coloque todos os nossos arquivos dentro dessa src todos os nossos arquivos que não incluem arquivo de configuração como pack de 4 dias um techloc de Knorr a gente coloca dentro da src tá então aqui dentro dessa aí cê eu vou criar uma pasta chamada dele a base e aqui eu vou criar uma um arquivo chamado Connect. JS que vai se conectar com o nosso banco de dados tá e aqui a gente vai primeiro importar uma use então consumam use vai ser recolher mongoose e eu vou fechar o terminal com outro J
Beleza agora a gente vai usar uma fofo vamos criar uma função na verdade chamada Connect two Day a base que vai ser a 5:00 porque vai tornar uma prova e cinco beleza e aqui a gente vai usar o seguinte método que a gente vai colocar a leishmaniose o ponto Connect disconnect ele vai receber aquela estranha que a gente copiou lá no mundo bebê Beleza então a gente vai colar ela aqui ok e o segundo parâmetro vai ser uma função e essa função vai ser executada a sempre que a gente sempre que a conexão ou falhar
ou for feita com sucesso e como que a gente sabe se essa conexão vai falhar ou não essa função vai receber um objeto chamado ever beleza e aqui a gente pode chegar nessa função se tem algum erro então se tiver algum é ver a gente vai retornar por exemplo é console. Log ocorreu um erro ao se conectar com o banco é de dados e que a gente pode colocar o era beleza senão a gente pode colocar console controle conexão ir ao banco de dados realizada com o sucesso fechou e agora a gente pode exportar essa
Connect dera vez como a gente aprendeu a exportar módulos É só colocar o molde ponta Sports connect to the Database show de bola agora só falta mudar aqui nesse pé surge para nossa senha do admin mais aqui pessoal tem um probleminha Ok não é recomendável que a gente coloque dados sensíveis direto no nosso código porque porque por exemplo a gente vai subir esse arquivo polity polity Rubi né não é legal tem uma senha lá para o nosso banco de dados no ventilador imagina que cara nossa aplicação Tá em produção seja vários clientes estão usando e
a senha para acessar o banco tá nossa mente Rubi e às vezes Sei lá nossa que tinha privada por algum motivo tem um vazamento de dados então é muito perigoso a gente deixar dados sensíveis dentro da nossa aplicação Será se a gente colocar a nossa assim aqui cara é algo muito perigoso que não é recomendável de forma nenhuma Ok Então como que a gente resolve isso a gente resolve com variáveis de ambiente como assim feliz e segue comigo tá a gente vai criar aqui vem aqui ela no rotina os projetos na pasta base aqui chamado.
Em e esse arquivo ele não vai subir político então aqui no vídeo menor gente vai colocar. Aí então esse aqui ele só vai ficar dentro da nossa máquina ele não vai subir para o kit Rubi E dentro dele a gente vai colocar todas as variáveis que contém dados sensíveis como senhas então vamos fazer o seguinte vamos voltar aqui vou abrir uma noite pede que eu guardei aquela senha lá lembra que eu não esquecer beleza e a gente vai guardar essa senha aqui dentro então eu vou colocar uma variável e para definir uma variável nesse arquivo
a gente vai colocar a mão bebê por exemplo underline perdi igual e o valor então a gente vai usar s-trac chave valor ok a e agora a gente consegue usar esse cara aqui no Connect mais para usar esse cara a gente vamos colocar o slime também pessoal tá esse admin aqui vamos colocar aqui também para ficar a senha e o PS hoje aqui na então Among mão dele assim eu peço Jó usuário e o preço hoje tem um Pokémon go behind your name admin Ok e pra usar esse cara a gente precisa instalar outra biblioteca
chamada Dote em que essa aqui tá Então olha como a gente usa pessoal vários módulos do mpm né Isso é muito bacana Donald a gente tem muitas ferramentas à nossa disposição para gente está lá nos nossos projetos Então olha esse lote aqui 25 milhões de downloads e mais um pouquinho né Mas beleza vamos instalar aqui é contra o J npm instal dó tive que a gente não vai se falar como dependentes desenvolvimento nem do Global Ok vamos falar normal aqui para nós para o nosso pra nossa obrigação porque eu já tinha obviamente assim como um
buzina a gente vai usar tanto agora e em desenvolvimento quanto a quando a gente vai fazer o Deploy Por exemplo quando a gente for colocar a nossa operação online beleza vamo dar um tiro aqui ó que instalou agora para configurar esse cara a gente vai vir aqui ainda que acontece e vamos dar um e Korn então o dote em recolher do Chaves e aqui a gente vai chamar 1.9. Confie e só isso não precisa fazer mais nada agora a gente consegue acessar essas variáveis aqui no nosso arquivo Connect como que a gente faz isso primeiro
Vamos mudar esse Sininho aqui para uma tentou extinguir então colocar um acento agudo aqui no começo apertei em dia no meu teclado foi para o final colocar o acento agudo aqui no final a e agora aqui ó na senha pessoal é importante tá certifique-se de que você colocou a senha no lugar certo para não dar erro então tem esses dois pontinhos aqui e tem esse arroba a gente vai colocar a senha entre entre esses dois caras então aqui entre os dois pontos e o arroba eu vou colocar pros esses ponto envie e aqui o nome
da nossa variável que é mongo DB E aí pessoal Beleza então esse cara aqui vai se referir a esse cara que ok e o Sarney na mesma coisa entre a barra e os dois pontos vou colocar process.env.ci bebê mongodb user name Ok Fashion isso é que deve ser o suficiente esse a gente vê um pouquinho aqui pra direita a gente vê que a gente tem esse cara aqui ó mais frigideira beijo e esse vai ser o nome do nosso banco de dados tá então eu vou mudar vou colocar apenas ver a base o ok fechou
Nossa que vem tá pronto Agora a gente vai chamar essa função aqui no nosso index Tá então vamos fazer o seguinte é importante que a gente chama ela depois os altinhos. Config porque porque como a gente usou é porque só tinha configure basicamente configura ele faz com que a gente possa utilizar essas variáveis aqui na nossa aplicação Então se a gente chamar função Antes aqui ele não vai ter sido configurado ainda então isso aqui vai ser nulo tá então a gente precisa chamar essa função depois do Outlook.com fio Então vamos pôr tela aqui eu vou
mandar um conste Connect tio dela base já completou aqui servir Claire e eu vou aqui na nossa na minha pasta atual./É sem ser/terá base/Connect beleza gente não precisa colocar o ponto alto e esse aqui OK agora a gente só precisa chamar essa função então vamos aqui após dots.com fig Connect de ir a base beleza pessoal agora eu vou apagar esses caras aqui tá na verdade eu vou deixar aqui diferente para vocês Beleza vou deixar aqui mesmo esse porção vou comentar com contra o barro Ok deixar separado assim porte beleza show de bola agora quando a
gente como é que quando a gente iniciar o servidor a gente deve ver essa ou essa mensagem aqui então vamos lá a o espírito que a gente criou foi start deve então npm Run start defe vamos ver a beleza conexão amor que já realizada com sucesso show de bola então gente está se conectando com o nosso banco se deu algum erro aí para você eu volto vídeo ver se você fez tudo certinho qualquer coisa pode me deixar aí nos comentários a sua dúvida beleza ok pessoal agora a gente vai começar as a interagir com esse
banco própria mente tem a gente fez a conexão agora vamos interagir com ele a primeira coisa a gente precisa definir a estrutura de dados que a gente vai guardar dentro desse banco então a gente vai guardar um usuário tá então para definir quais Campos esses vai ter por exemplo que ele vai ter um e-mail senha etc a gente vai aqui na nossa src em vai criar outra pasta chamada models e essa pasta models vai ter a todos esses esquemas que a gente chama tá meio que esqueletos duas Nossa entidades Ok então aqui no modo e
nos modos eu vou criar um arquivo chamado hilser. Moda e o ponto JS e aqui a gente vai dar um const e eu vou importar uma use Ok Tupperware mongoose beleza e aqui a gente vai criar um cara chamado Ilza esquema só sai comigo tá que vai ser um longos e ponto esquema e esse cara vai receber um objeto e dentro esse objeto a gente vai colocar todos os campos que o usuário vai ter dentro da nossa aplicação dentro do banco de dados então primeiro campo que eu vou colocar vai ser força name beleza gente
vai definir assim e aqui a gente vai vai ter uma propriedade chamada Type que vai definir o tipo dele o que vai ser um instrumento e a gente tem outra propriedade chamada Record que vai falar ó esse first Name é obrigatório se ele não me de se for cinema que eu não vou querer nada do banco então vou colocar o corte eu aqui aí a gente coloca uma vírgula e coloca o próximo Campo que vai ser last name e o mesmo esquema Type is King I will yield to Ok e meio a mesma coisa vai
post-img o recorde tu e aqui o password mesma coisa também tá destruindo com recorte low e tem outro campinho pessoal chamado milenci que ele vai falar esse peste hoje precisa ter por exemplo sete caracteres no mínimo se não não vou querer no banco beleza ó que a gente fez o esquema a gente agora precisa fazer o model em si Então vamos criar um const e o modo é uma convenção que a gente comece com letra maiúscula tá então user Model vai ser igual a mão use ponto Model e agora a gente vai passar o nome
desse modo é o que vai ser iuser ó e aqui a gente vai colocar aí o seu esquema fechou e agora a gente vai dar um vídeo ponto é que esportes para exportar esse ser moda e beleza então a gente faz esse cara aqui para fazer as operações no nosso banco OK agora vamos voltar aqui onde é que acontece Vamos criar o primeiro and Point Quando eu digo in the Point eu digo por exemplo rep.net né que a gente viu nexpress para é criar um usuário no nosso banco tá então primeira coisa vamos inicializar Express
aqui porque a gente já fez isso né no molde ou Express aqui vamos continuar aqui então tá pessoal vamos continuar aqui e aqui no index a gente vai é de comentar essa linha aqui do Express Ok lembrando importante que a gente é deixa ela depois dots.com filme Ok fechou vamos aqui voltar para o estresse Oh e vamos começar a galera pelo expoente que vai criar um usuário então para fazer esse tipo de gente vai usar uma operação do tipo Poxa quando a gente quer criar algum registro a gente usa post aqui a gente usa o
iett por exemplo para pegar uma lista de usuários como a gente fez aqui e a gente usa o post para criar alguma coisa no nosso banco então vamos colocar é ponto post e aqui mais uma vez mesmo dito aqui a gente coloca é o end Point que a gente quer vou deixar o barril seres mesmo ok então é bem como isso tá você lado quando você dá um jet na barra usar se ele traz uma lista de usuários e quando você dá um um post nesse mesmo barril ele cria um usuário e aqui mais uma
vez um receber RMS ó e aqui pessoal a gente vai enviar É para nossa aplicação os dados do usuário não cara chamado rack. Bori Ok então vamos fazer o seguinte a para criar um usuário primeiro a gente precisa importar o usar Model Então vamos importar user Model vai ser letal er./Eu vou preciso na verdade sair do modos ir para src né então vou colocar../Src/models/e hormônio Ok então esse ponto/ele vai aqui para passar base o projeto depois de vencer models dizer. Modo OK agora para criar um usuário eu vou chamar o seguinte e eu vou colocar
com schiozer vai ser user Model. Create e aqui eu vou colocar o rack. Bori Ok e agora eu vou retornar esse usar aqui responde status vou colocar 201 por quê Porque o 201 ele fala que o registro que a gente está tentando criar foi criado com sucesso e eu vou colocar pão send ponto de Jason eu usei Ok vamos salvar esse cara vamos ver aqui está rodando tá rodando no servidor Beleza agora para executar a galera uma requisição do tipo push a gente vai instalar um carinho chamado post bem então vou deixar aqui na descrição
o site para você baixar Ele tá é uma é um software sensacional você vai ver então baixa ele aí OK e depois de baixar a gente vai abrir ele beleza vamo abrir aqui acho que eu já abri né sabidinha Já abri ele tá aqui beleza show de bola então depois que você abrir você vai ter essa tela quis vai ter criar uma conta para o mente mas também é super tranquilo qualquer coisa como eu já falei antes deixe nos comentários que eu vou ajudar você que agora que você tá nessa tela aqui você vem aqui
em Create Collection o nome da Collection eu vou colocar curso de node é se dão um aqui pra vocês verem melhor beleza fechar aqui fechar aqui agora dentro dessa Collection aqui a gente vai nesse... Adwest e essa requests em que ela tem até o tipo aqui vamos colocar post ó e aqui vamos colocar o nome da creche vou colocar criar usuário Ok e aqui a gente vai colocar a URL que a gente quer fazer essa requisição E no caso a nossa URL aqui é o local hoje com a porta é que tá no express com
a porta 8080 certo então aqui vamos colocar htp localhost 8080/users Ok e aqui no Bori porque como eu falei pra vocês a gente vai mandar tudo pelo bode a gente vai escolher essa opção Hall e mandar um jeito não tem a gente vai enviar um jeito aqui para o Express beleza vamos voltar aqui e vamos mandar aqui no Jeison Então vou colocar first name is Felipe The Last name Rocha local e meio aqui Felipe@gmail.com e o Perfect vulcão massinha super forte 2 4 6 7 8 Beleza agora vamos dar uns and aqui e ele deu
201 mas eu acho que deu erro tá galera não criou e a primeira coisa vamos arrumar isso tá porque esse great eskridge aqui ele é uma promessa Ok então vamos transformar a ficarem assim que e vamos dar uma Leite aqui e vamos colocar tudo isso aqui dentro de um clique aqui ok então compra x trai Kate aquele vai receber o erro vou colocar essa aqui no cry e o que é que eu vou mandar um responde estado vou mandar 500 pontos send error. Messenger OK agora vamos salvar vamos voltar aqui vamos ver se ele vai
retornar ao Rio para gente retorno bem melhor né Então ele deu um erro porque é basicamente ele não tá reconhecendo nosso leque. Body porque galera é porque a gente precisa sinalizar para Express que a gente vai receber direção as nossas aquisições como que a gente faz isso a gente E aí embaixo do ERP que a gente vai escrever é. Use express.de Jason Ok E aí ele vai reconhecer que a gente sempre causa Dias nas nossas requisições aqui inclusive no ar aqui pronto Bori delas como a gente tá fazendo aqui então vamos dar um controle para
ver o terminal Vamos dar um Clear e agora vamos voltar aqui no posto me e vamos dar um Sandy e agora a cara ele criou Tadeu tem-se um Beleza agora para gente ver esse banco para gente consultar esse banco a gente vai aqui no site do mundo bebê então vou abrir aqui beleza aqui no site ó a gente vai viu Bros Collection Ok e aqui a gente vai ter a lista de usuários que a gente criou Olha que bacana cara a gente criou o nosso usuário aqui no banco ele gira um agir excede ele tem
esse tipo especial do mundo bebê que ao dia que é de mais ele é basicamente isso em modificado tá o mexeu em com superpoderes a gente vai usar ele daqui a pouquinho para fazer para recuperar um usuário específico mas o que a gente vê que ele criou a Collection chamada users e tal e 1gb funciona assim tá ele tem várias Collection e cala só tem esses objetos bem parecidos com Jason Beleza então a gente criou e o nosso usuário show de bola agora vamos continuar aqui vamos criar um depoente que pegue esse usuários que a
gente criou né então a gente vai fazer isso aqui mesmo nesse ponto Beth/users Vamos colocar mais uma vez um truque aqui dentro para caso tenha algum erro ele retorna esse erro né como eu response e aqui vamos colocar as Inc Oi e para pegar todos os usuários galera a gente vai mais uma vez chamar o All Eight Easy Model e usar um método chamado funk e aqui a gente vai passar um objeto vazio nesse objeto gente pode passar um filtro por exemplo se eu colocar name igual a Felipe ele só vai trazer esse cara aqui
para mim sabe mas aí eu posso colocar também tipo o e-mail igual a tal a gente pode fazer esse tipo de filtro quem tem esse objeto mas a gente colocar ele vazio ele vai trazer tudo e é isso que a gente quer então vamos dar um esse ponto status 200 pontos jason-years Ok e aqui vamos dar um Realce. Status 500 pontos and ever. Messenger ok aqui eu tô usando pontos a gente porque eu não quero enviar como dias mas aqui é um Mustang Beleza vou salvar agora vamos voltar aqui no post em Ok e vamos
criar outra ou Quest aqui outra aqui são então clique aqui é de Quest e vamos criar a buscar e usuários Ok beleza é agora vamos colocar mais uma vez agradecer pelo arrocho Barrios Vamos dar um Sandy e Olha que bacana ele retornou aqui para mim Alicia deu Soares que está lá no nosso banco se a gente criar outros olhos tipo Gustavo aqui aqui eu vou colocar a Gustavo e vou dar um send Ele criou apertei contra o Inter tá pessoal para ele enviar automaticamente criou o outro cara que dá um sangue e ele trouxe aqui
para gente cara Olha que bacana a gente já tá Carol e o tanto de coisa que você aprendeu neste curso aqui se você ficou até aqui Meus parabéns já aprendeu muita coisa vão aprender ainda mais ok mas olha que coisa sensacional cara você aprendeu o download aprendeu a conectar ele com banco e agora a gente tá fazendo operações neste banco de dados Então vamos continuar aqui vamos seguir cara eu tô muito empolgada fico muito empolgado quando chega nesse mundo curso que eu vejo quanto que a gente aprendeu Beleza então vamos apagar esse cara que tinha
escovar meus lá e vamos agora fazer uma expoente que vai pegar um usuário pelo seu agir então pegar um usuário por este objetivo e aqui dele ok como que a gente vai fazer isso primeira coisa não é ponto g' at barra e usar também Ok vai ser uma função assim para né mesma coisa de cima colocar um croquete aqui beleza return response status 500 pontos and Hair. Messenger Ok e agora que que a gente vai fazer galera a gente como que primeiro vamos ver como que essa requisição ela vai se parecer né Qual que é
o ideal na minha visão vamos copiar esse dia aqui e já vamos clicar aqui Ó nesses três pontinhos duplicate e aqui eu vou trocar o nome para buscar o usuário por agir o show de bola e como que é o ideal né galera quando a gente quer buscar um registro pelo seu aí a gente chamar o Quest com/users/Wide dele entendeu só sei ficar bem é claro né que a gente quer pegar duas vários o cara que tem esse aí e como que a gente faz isso no express esse cara que ele vai ser recebido como
parâmetro para a gente e aqui nós pra gente pode receber um parâmetro dessa forma depois de usar se a gente vai colocar: e o nome do parâmetro Na verdade é assim tá a gente vai colocar barra: o nome do parâmetro dessa forma Ok então tudo que a gente colocar depois SOS vai ser esse parâmetro agir então neste caso esse cara aqui vai ser parâmetro agir e para acessar um parâmetro a gente vai fazer assim ó eu vou guardar uma variável colocar a concha de rec.pro Rampage lembrando esse cara aqui galera precisa ser esse cara tá
os dois precisam ter o mesmo nome agora para pegar um usuário pelo seu agir no banco a gente vai mais uma vez guardado uma variável ao leite e usar Model. Find by Age Oi gente vai passar hoje ok agora vamos dar um universo. Status 200 pontos Jason e mandar esse usuário Ok vamos ver se está funcionando esse esse áudio aqui é desse Felipe né então vamos ver se vai trazer esse ele para gente ir trouxe cara que coisa sen-sa-ci-o-nal vamos pegar aqui o Gustavo com outra aí e vamos ver se ele traz pra gente e
trouxe também cara que coisa bacana galera então a gente fez os endpoints de pegar todos os olhos de pegar um usuário só e de criar um usuário agora vamos fazer os de atualizar o usuário e deletar também vamos começar pelo de atualizar vou colocar embaixo Aqui do post e para atualizar a gente vai tá fazer outro tipo de Jimmy Quest tá para criar a gente usou post para pegar a gente Loubet e para criar a gente tem duas opções ou Pet ouput Tá mas primeiro vamos duplicar essa crianças olha aqui Oh e vamos mudar para
atualizar usuário e qual que é a diferença do pack do posto do pote pessoal o pet gente vai usar quando a gente quer atualizar o nosso registro parcialmente por exemplo se a gente quer mudar apenas um e-mail do usuário a gente usa o pet o poeta EA gente vai usar se a gente quiser mudar o registro por completo meio que a gente deletar o registro entre novamente do zero então no nosso caso como a gente é por exemplo vai ter situação em que a gente vai criar atualizar apenas e meia apenas o pé ser apenas
o first Name a gente vai usar o pet Mas você pode usar o porto aí também é tranquilo Beleza então vou colocar o pet aqui e vai funcionar o seguinte forma galera a gente vai passar aqui obviamente a gente precisa falar qual usuário a gente que atualizar né então o ideal seria a gente passar dessa forma também então por exemplo passa a barra users/tal e a gente coloca o pet para atualizar este usuário aqui que no caso é este Gustavo Ok então gente vai fazer dessa forma que mais uma vez receber o agir como parâmetro
e aqui no bode a gente o que a gente que atualizar Então vamos supor que eu quero atualizar o e-mail dele para ser lá Gustavo@hotmail.com quero fazer essa atualização então vou passar como parâmetro o Adidas e Gustavo aqui no Bori os campos que a gente quer atualizar desse registro aqui então vamos fazer agora que não vou colocar ERP. Pet Ok/users e aqui mais uma vez receber o aí de com parâmetro assim que rec-has e a gente podia copiar e colar isso aqui tá pessoal mas vamos pratika beleza vamos escrever código então ketti é ver vou
dar um assunto status 500 pontos and ever. Messenger beleza e aqui num trai eu vou colocar com freezer e para atualizar um registro galera a gente faz Away nilzer find by age and update Ok e aqui como primeiro parâmetro a gente passou a agir então rack Vamos guardar o agir aqui né como a gente fez anteriormente o leque ponto para menos ponto agir que lembrando vai ser esse cara aqui beleza e agora a gente vai passar esse aí e como segundo parâmetro a gente vai passar os campos que a gente quer atualizar no caso esse
meio aqui então basicamente alcançar reiki.org E aí beleza galera agora vamos aqui bettoni apresentar uma tornessol responsestatus os pontos 200 pontos em ponto Jason eu usei e aqui a gente fez a passar outro cara precisarem vai independente para de funcionar como a gente espera até o seguinte depois daqui do Bode a gente vai passar um objeto que tem algumas opções sobre esse método e a opção que a gente quer marcar como verdadeira é uma chamada New Iguatu porque porque esse método por padrão Ele não retorna para gente o registro atualizado Então esse user mesmo que
ele atualize aquele Gustavo lá no banco ele vai retornar nem se usa o Gustavo com ele antigo e então a gente precisa passar esse mil para ele retornar o registro com a tudo atualizado como a gente enviou aqui para requisição Então vamos salvar e agora vamos tentar atualizar aqui vamos dar um Sandy e ele atualizou e-mail tá vendo se eu quiser por exemplo mudar para gemer novamente para atenção aqui no meio ó e ele atualizou para o Gmail sensacional pessoal então fizemos a operação de atualização agora só falta operação de direção né E para fazer
uma direção a gente vai usar a frequência do tipo de Elite Ok então vamos duplicar esse cara do aplicat ó e aqui vamos colocar a deletar o usuário beleza e aqui mais uma vez a gente precisa sinalizar Qual o horário que a gente quer deletar né então a gente vai usar a mesma mesmo esquema que a gente fez tanto aqui no atualizar quanto no buscar os olhos por aí a gente vai passar o agir por parâmetro tá indo embora a gente não vai precisar passa nada porque a gente só vai precisar de se agir para
deletar esse usuário Ok então vamos dar aqui para de Elite e vamos voltar aqui no express e vamos colocar ap. Post by users/age mais uma vez assim que rec-has trickett mais uma vez trai Kate a beleza que parece. Status 500 pontos and ever. Messenger ó e aqui no traz vamo colocar a user await your Model. FireRed and remove e aqui vamo colocar o Age que vai ser rec.br spotage OK agora vamos retornar vai responde status 200 ponto de razón y Ok galera vamos voltar aqui no posto hein vamos mudar esse cara bom e deu erro
porque a gente colocou errado aqui é ponto de Elite né Beleza é bom de Elite Vamos tentar novamente send e ele retorno aqui Gustavo para mim e se eu tentar apagar de novo ele vai dar erro porque vai dar no na verdade porque se Gustavo não existe mais né se a gente tentar por exemplo aqui ó pegar todos os vários a gente vê que ele realmente foi deletado cara então sensacional a gente fez aqui tanto as operações para gente fazer a leitura né tanto a de vários usuários quanto de apenas um criação atualização e deleção
cara Então olha o quanto que a gente aprendeu o quanto que a gente já fez até agora no curso agora galera eu quero passar uma coisinha para vocês mais para ficar como referência mesmo tá que são os me deu Wars no express ficção me deu um ar são basicamente funções que são executadas antes de qualquer ação que o Express realiza por exemplo se a gente fizer um middleware que isso ela dá um log de uma mensagem hello world ele vai ser executados antes de toda a requisição ser feita vamos ver na e fica mais simples
para a gente entender a gente até chegou a usar esse aqui tá mas vamos fazer um aqui que vai ficar mais simples como eu falei para criar um me deu a gente vai colocar é ponto 15 e esse cara vai receber uma função tá essa função vou deixar dessa forma e essa função vai receber três parâmetros rec-has e o Next e esse né que é importante tá galera esse reza basicamente a requisição EA resposta que está sendo realizado anualmente no momento que a gente já fez aqui né já brincou com esses dois caras em todos
os nossos métodos aqui E esse next ele vai basicamente deixar os pés seguir a vida dele cara por exemplo eu vou dar um logo aqui Além disso ela vou dar o log de leque. Mole Tá eu vou limpar o terminal aqui só pra gente conseguir ver melhor agora vou voltar aqui no posto e eu vou dar um sangue e olha que vai acontecer a ver com ela vai ficar travada cara ele vai logar aqui o bode para mim no caso não tem bora aqui nesse Jet né Deixa eu fazer um post aqui que a gente
consegue ver melhor então ele logo o bode para mim mas a requisição ficou travada por quê Porque esse né que ele precisa ser chamado para ir sim ou Express seguir a vida dele cara então esse cara aqui esse é que tu me deu ele vai ser executado antes da requisição tá então cara pensa que sei lá eu chamei uma restrição mas antes de eu conseguir chegar até ela vai ter se me deu entendeu Então ele tá uma fase antes e se a gente não chamar esse né que ele não vai deixar essa requisição ser chamado
Então vamos chamar o net aqui e vamos salvar e agora se a gente dá uns and vai funcionar tranquilamente ele ligou aqui vec.gov cara Olha que bacana então o que que eu vou fazer aqui a gente pode logar as informações sobre our Quest então por exemplo eu posso logar a vou usar uma simples frango aqui posso logar por exemplo ao request type Oi e a gente tem um método aqui a no leque chamado hake.me food que é que fala se é pochete enfim a gente pode jogar o content Type dela tão content-type eu posso colocar
aqui pronto headers o content Type Beleza a gente pode jogar também o tempo né a data que essa repetição tá sendo feito então deite a gente pode colocar basicamente New date em Ok E aí se a gente pode enfim a gente pode eu só queria passar para vocês como referência mesmo tá mas a gente pode fazer qualquer coisa antes de uma requisição ser feito então se eu dar um sangue aqui ele vai dar logo para mim a hora que vai estar depois content-type define e a gente tem que mudar esse cara aqui ela era para
ser content-type assim OK E aí vou limpar o terminal aqui fazer novamente e aí sim ele deu Aqui ó o recorte Type content-type e a data que é sobre Quest foi feita tá então os melhores eles são funções que são executadas antes de qualquer requisição pessoal até agora aqui no curso a gente usou Express junto com load tanto para receber dia são as requisições quanto para retornar de lesão também né então a gente fez aqui o Crush em que a gente envia por exemplo um jejum para criar um usuário e o servidor não é o
nosso Beck and ele retorna um beijão também e essa é a forma que você mais vai usar o Express junto com hoje aí nas suas aplicações e você vai ter um lequinho ali usando eles dois que vai se conectar com front-end por exemplo em rieti que a gente tem curso aqui no canal e esse front-end por exemplo né vai pegar essa lista de usuários aqui e vai mostrar na tela mas a gente também tem outra forma de usar o nude com Express que é a seguinte é invés de Vou retornar 1 Jason a gente pode
se tornar um HTML mesmo estilizado com CSS e injetar por exemplo esse usuário dentro desse HTML deixar esse HTML dinâmico cara então é bem bacana eu quero mostrar para vocês aqui nesse curso não é algo que você vai usar tanto mas é algo bem bacana aqui é legal você ter aí no seu leque de habilidades por isso que eu vou trazer nesse curso aqui tá bom então vamos lá rapidinho aqui se você ficou até aqui cara parabéns de verdade aí você tá na frente muita gente que não é tem essa dedicação para estudar para aprender
algo novo cara comparado com tudo que a gente aprendeu aqui esse esquema aqui de você enviar HTML dinâmico vai ser bem tranquilo para você beleza então vamos lá primeira coisa que a gente precisa fazer a gente precisa é instalar uma biblioteca se dá com trouxe aqui para é que matar o servidor e a gente vai dar uma impermisol RS Esse é o nome da biblioteca que a gente Vale utilizar Tá bom então vamos ver aqui na mpm cara ela é bem Popular então mp-ms Oi ó essa esse é o cara que a gente vai instalar
tá então ela tem 11 milhões de downloads semanais cara é bem Popular mesmo beleza então vamos voltar aqui instalou show de bola até agora para configurar ela a gente vai aqui no nosso Express ela é usada junto com Express Tá bom a gente vai importar ela aqui com Chad é na verdade nem precisa importar não precisa importar a gente só precisa fazer o seguinte ó aqui a gente vai colocar um ERP. 7 e aqui a gente vai colocar View and LS a gente vai falar para que espécie cara você vai usar como viu o edigas
que a gente acabou de instalar e agora a gente precisa falar onde que essas Rios ficaram e elas ficaram dentro dessa receita eu vou criar uma pasta chamada vírus Beleza então a gente vai precisar falar para o L'Express e projece que as views que esse cara vai procurar estão nessa parte então para fazer isso a gente vai dar uma Apple 7 viu e aqui./Src/vivos Ok na verdade a empresa dar um ponto ponto/né porque aí a gente vai e aqui para o nosso diretório root da nossa aplicação e a gente vai para views Beleza então esse
aqui já foi o necessário para fazer a nossa configuração agora vamos criar uma viu então vamos criar uma vídeo chamada index.md S às vezes do RS tem que ter essa extenção aqui e ela é basicamente HTML tá galera então eu vou apertar exclamação e apertar Tab para informar o documento aqui para mim isso aqui cara vou botar por exemplo tem um a um hello world Tá e agora vamos enviar esse cara vamos mostrar esse cara na tela aqui como que a gente faz isso a gente vai voltar aqui no express e a gente vai criar
outro and Point tá vou criar um de põe chamado a barra vios/users Ok então vou querer esse cara aqui e para enviar uma viu a gente vai usar o responde render que na verdade a gente receber aqui né Felipão regresse a gente vai usar o responde render e aqui a gente vai passar o nome da nossa viu que no caso é index Então vamos passar index e por enquanto vamos salvar e vamos iniciar o servidor então é imprimir on start 10 o hocnis eu aqui o servidor agora vamos lá no local host 5.000 no caso
é qual que é a porta mais que a gente usou galera acho que 80 oitenta né vamos voltar aqui a Express porta que a gente usou 8080 Beleza então 8080 né e a gente põe a gente acabou de criar que no caso é vírus/users da Então vamos dar um enter e aqui ele deu um erro porque vamos voltar aqui tá na CRC beleza.com.br cê/vivos era para funcionar cara era para funcionar e aqui e vamos ver aqui vamos tentar fazer assim ó essa aí você/views e vamos agora a e agora foi beleza Fechou então aqui a
gente vai colocar essa receba views e a gente viu que lhe renderiam HTML normal né mas beleza Felipe ainda resolver é normal esse eu posso fazer tranquilamente Mas como que eu insiro os dados dinâmicos aqui dentro desse cara vamos lá vamos lá pra vocês primeiro como que a gente pode usar JavaScript dentro desse cara que tá dentro desse dez pontos de essa a gente consegue usar JavaScript por exemplo eu vou definir uma variável aqui e vou colocar essa variável nesse Adão como que a gente faz isso primeiro sempre que a gente quer utilizar o Java
script usando RS a gente vai usar sim táxi aqui ó vamos abrir uma Chaves colocar a porcentagem tá e depois vamos fechar essa chave dessa mesma forma como porcentagem e uma chavezinha para a direita OK agora que a gente pode por exemplo escrever com os messenger eu vou colocar tipo hello world Tá e agora a gente consegue usar essa Consul Messenger aqui no H1 E como que eu faço isso eu pego aqui sabão e eu vou mais uma vez né fechar E aí com a tag Zinha do JS e agora eu vou usar igual Messenger
tá tem que ser exatamente assim tem que colocar esse igual Messenger agora vamos salvar e a gente vai ter que iniciar aqui e o servidor Beleza agora vamos voltar aqui vamos recarregar e olha que legal a gente tem hello world usando a mestre Então sempre que a gente quer usar já escritos no RJ é se a gente fecha e abre dessa forma aqui com as chaves e e o sinal de porcentagem e se a gente quiser definir uma variável dessa forma a gente quiser usar uma variável que a gente definiu a gente coloca esse igual
a beleza mas agora vamos fazer uma coisa bem mais legal cara vamos pegar usuários do nosso banco e vamos colocar esse usuários aqui no nosso HTML como que a gente vai fazer isso muito simples aqui no nosso entrypoint aqui do View users a gente vai pegar os olhos mais uma vez então com os fios await your Model to find beleza e agora para passar esses os olhos aqui para nossa index para nossa viu a gente simplesmente vai passar como segundo objeto aqui users igual a users beleza mas como isso aqui é a mesma coisa né
esse esse essa propriedade é a mesma tem o mesmo nome dessa variar a gente pode simplesmente fazer assim a beleza show de bola agora a gente vai ter acesso a esses usuários aqui dentro da nossa viu então vamos lá vamos Apagar esses caras aqui beleza e assim táxi galera pode ser um pouco confuso tá então sai comigo primeiro vou criar uma diva aqui o apertar. Vou colocar contente aqui vou criar uma dica aqui no blog e colocar a container e o contente colocar aqui dentro então o segurando shift apertei algo certo para cima ele morreu
para mim ok agora que a gente precisa fazer a gente precisa fazer um grupo né entre cada um desses usuários e renderizar o HTML para cada um deles então vamos primeiro abrir a tag Zinha como a gente está acostumado Ok dessa forma beleza e agora a gente vai escrever o Maria já escrevi aqui porque a gente só pode escrever uma linha JavaScript para cada tag Zinha dessa então vocês vão entender o que eu quero dizer vou colocar if users. Life maior que zero Ok ou seja se os usuários que a gente está recebendo aqui forem
marido quiser a gente vai executar acerta o bloco de código então o que a gente pode fazer a gente já pode abrir a chave E aí Fi beleza e a gente agora vai fazer um loop Então vamos pegar users por causa aqui tem que fechar aqui ó ó tem que fazer assim ó e Fios. Lente maior que zero Beleza a gente vai abrir a chave e a gente vai fechar que a tag e a gente vai abrir outra Ted aqui ok já vamos fechar também a beleza e aqui a gente vai fazer um users ponto
forte e para cada user a gente vai a executar uma função e essa função vai ser Vamos colocar em outra linha para não ficar muito grande aqui ok e faltou aqui o objeto que abre Beleza agora nessas outras linhas a gente pode colocar Vamos colocar HTML tá vamos colocar a terminar essas linhas aqui então vou colocar um H3. Tython vai ser um H3 com a casa de tá então beleza e aqui a gente vai abrir mais uma vez o e JS e assim beleza e aqui a gente vai colocar a user Ponto Forte name porque
é esse usar aqui tá gente tem acesso a esse usar tá pessoal aqui nesse dentro e sabe até 6 e agora a gente vai colocar também o user aqui tá errado Tem mais uma aqui beleza vamo colocar também o user. The Last name Ok e aqui vamos fechar beleza fechou pessoal e na verdade isso aqui Ah é Tá certo tá certo isso aqui já tá dentro H3 é assim beleza até para mim um pouco confuso aqui tá pensando postamos há muito mas eu deixei assim para ficar mais fácil Ó tem a gente está fazendo isso
aqui tá se ele for verdadeiro ele vai cair aqui e aí essa linha vai jogar para cá esse é o retorno de se for each beleza Oi e aí a gente dentro desse H3 vai pegar o first Name desse uso de seus olhos aqui da iteração atual e vai pegar também o last name dele ok Agora vamos pegar um e-mail dele então vamos colocar um peak p apertei Tab e vamos fazer a mesma coisa então vai ser e o ser ponto e meio que beleza fechou pessoal agora a gente precisa é fechar esse isso aqui
fechar e se for each né E também o wi-fi então aqui embaixo do p a gente vai criar outra tézinha e a primeira coisa a gente vai fechar o fora então vamos colocar a chave de fechamento o parênteses beleza vamos fechar a tag aqui o Ok vamos abrir outra tá porque porque essa tag aqui corresponde a essa tag tá do que a gente é abrir o frente então aqui a gente fechou o Farid e agora a gente vai fechar o wi-fi dentro dessa aqui OK você que pode ser confuso pessoal forma mas você se acostuma
com o tempo tá então a gente vai fechar esse Fi Você viu que ele até já de saco tá vendo ó vai escolhi destacou aqui E esse essa chave de sci-fi aqui e a gente pode até colocar um Nelson né Vamos colocar um anel se Ok e aqui nesse Élcio a gente vai colocar um parágrafo nós vamos colocar não há usuários para ele ver se não tiver nenhum usuário né Beleza agora vamos fechar esse alce Vamos abrir mais uma linha aqui e vamos colocar as chaves e saber o que ele fechou aqui para mim automaticamente
e vamos aqui abrir e fechar Chaves aqui beleza o show de bola pessoal salvamos agora vamos aqui no express está mandando tá mandando Beleza agora vamos voltar e vamos ver se vai funcionar cara vamos recarregar Ah e não funcionou porque e vamos ver se tem algum algum usuário aqui no banco vão abrir aqui o possuem vamos aqui buscar usuários Beleza tem dois não devia mostrar Oi e o problema galera era que tava faltando está faltando aqui nas variáveis que a gente usa o igualzinho lembra aqui para usar uma variável a gente precisa do igualzinho Depois
do primeiro do primeiro sinal de porcentagem Então vamos colocar o igual aqui vamos colocar o igual aqui também e vamos colocar o igual aqui vamos reiniciar o servidor e vamos ver se mudou aqui então já mudou aqui ó então aqui agora a gente tem usuário saldo bancário Olha que sensacional galera a gente tá pegando os olhos do banco e tá mostrando eles no nosso site com HTML cara 100sacional agora tem outra coisinha que eu quero mostrar para vocês que são uma forma que é uma forma que a gente tem the components are o nosso HTML
Como assim a gente pode por exemplo pegar esse Red e jogar em outra viu e a gente consegue utilizar essa viu em quantas vezes a gente quiser vou mostrar para vocês na prática tá primeira coisa a gente vai aqui nos rios e vamos criar uma pastinha chamada por seus Ok e dentro dessa partida Vamos colocar o nosso Rede Ponto e já a e agora a gente pode pegar esse remédio aqui ok dá um controle x nele e aqui a gente cola no nosso Red com TJS beleza e vamos dar um nome aqui para usuários Beleza
agora a gente consegue usar esse HTML aqui galera como que a gente faz isso primeiro aqui em cima do Bode a gente vai fechar abrir e fechar né como de costume aqui até vizinha e vamos colocar um tracinho assim OK e a gente vai dar um a roupa Vamos dar um inclusive perdão Oi e a gente vai apontar para a nossa pasta do Red então ponto/para ir para o repositório dos rios para shows a barra Red. JS Ok vamos salvar e agora aqui no Red eu já vou colocar os estilos também tá pessoal então vou
deixar na descrição o repositório E aí você vai lá no Rede conta JS Cola os estilos aqui ok vamos dar um estágio aqui beleza já deu um controle aqui já acordou todos os estados aqui para mim beleza show de bola e aqui só a fonte que tá errado eu tenho colocar no outro série Fi ok show de bola agora vamos recarregar a página Vamos reiniciar o servidor perdão e vamos recarregar a página e a gente deu erro aqui não achou essa parte o e vamos ver que aconteceu e obviamente não é pessoa mais uma coisinha
besta a gente colocou JS aqui aí JS Mundial contra você o OK agora vamos recarregar e olha que legal cara já mudou a nossa página porque tá horrível né tá horrível ainda mas já mudou a Porque a gente já está importando rede Então se a gente inspecionar aqui por exemplo a gente vê que o head cara tá aquele da nossa viu isso é muito muito bacana cara a gente consegue utilizar como se fosse várias componentes vamos voltar aqui então e aqui pessoal vamos remover esse container aqui tá vou remover se container e aqui no Red
eu também vou remover esse aqui que a gente não vai precisar Ok e aqui eu vou colocar um wi-fi G 300 pixels fechou agora vamos iniciar aqui o servidor a beleza vamos recarregar Fechou tá melhor né agora vamos criar outra parte o que vai ser a nossa rehder que vai ficar aqui em cima Então vamos lá vamos criar uma parte aqui chamado né voar. JS ó e aqui basicamente Vamos colocar uma regra com H2 usuários tá agora que o index a gente vai encima aqui do contente vamos incluir mais uma parte então vamos abrir e
fechar a tag vão pegar aqui ficou tracinho inclui Ge e aqui vão./Parte os barra né Ficar. E JS agora vamos salvar Vamos iniciar aqui o servidor vamos voltar aqui vamos salvar e agora sim a nossa rede aqui show de bola aí galera vamos dar essa fonte que tá horrível Então coloque o ovo uns rapidinho e eu vou pegar uma fonte chamada Poppins tá E aí a gente vai ficar nela e eu vou remover aqui o que eu já tinha adicionado e aqui vai ver tudo beleza a robô também vou remover OK agora aqui a gente
vai na pop vamos pegar a regular Oh e vamos pegar aboge agora vamos clicar aqui e vamos copiar este Import aqui ó com este porte Ok vamos voltar lá e agora aqui no nosso Red a gente vai colar se importe aqui e aqui a fonte vai me levar por cupins então Pessoal espero que vocês tenham entendido tá a gente basicamente cria várias partezinhas do nosso HTML e consegue injetar essas partes minhas por meio das partes Ok então vamos voltar aqui recarregar bem melhor cara bem melhor a fonte a gente pode também aumentar um pouco essa
wi-fi cara do contente eu vou colocar a minha with de 500 pixels eu vou tirar essa nexo isso aqui para vocês o corte já vai estar arrumado tá vou dar um 600 pixels Beleza vou salvar reiniciar voltar aqui beleza pessoal então Olha que bacana a gente conseguiu cara olha o tanto de coisa que a gente aprendeu nesse curso aqui você aprendeu a Como usar o node né você aprender como ele funciona para aqueles servos e aprender a fazer uma aí que retorna a dizem agora a gente também aprendeu a como usar esse em GS essa
View and para pegar dados por exemplo do nosso banco e injetar é a Nossa Terra Nossa gente mesmo então cara Espero que você tenha de verdade gostar desse curso aqui eu vou ficar por aqui por enquanto tá mas lembra daquele compromisso que a gente fez no começo do vídeo cara eu começo do curso aqui se você curtiu esse conteúdo deixa o seu joinha se escreve aqui no canal porque Cara isso me dá muita muita força para continuar trazendo esse tipo de conteúdo muito bom aqui para você e de forma gratuita tá segue lá no meu
Instagram se você quer ainda mais conteúdo todo dia eu tô lá nos Stories respondendo dúvida enfim me segue lá vou deixar o link aqui na descrição você não vai se arrepender não mais pessoal Fico por aqui espero que verdade que você tenha gostado do vídeo Todo o código todos os links estarão aí na descrição para você acessar beleza até a próxima um abraço tchau tchau