certo agora aqui a gente vai dar continuidade a criação do nosso projeto tá então para isso aqui eu já tô com minha tela aberta aqui no vs code e aqui tem duas formas você pode estar utilizando terminal de fora ou terminal de dentro tá aqui eu gosto de utilizar o terminal dentro do próprio code então você pode clicar aqui ó em terminal New terminal e aqui a gente vai come a criação de fato da nossa pe Tá então vamos lá aqui você já pode ver que ele já mostra qual pasta que você tá então já tá naquela pasta que eu criei ali é api e para fazer a instalação aqui a gente vai começar pelo seguinte Lembra que eu falei que a gente tinha que ter o npm instalado que er o gerenciador de pacote então é tem dois gerenciadores de pacotes que são muito utilizados aí no mercado que é o npm e o yarn tá não tem muita diferença você tá utilizando um ou outro é mais questões de custum mesmo tá eu prefiro estar utilizando yarne porque eu acho que é mais fácil ali na hora de você escrever um código ali terminal mas assim na teoria não tem nenhuma muito nem tem muita diferença de um de outro como que você tiver começando também eu aconselho você tá utilizando yarne para você seguir o passo a passo certinho que vou est explicando aqui funcionar Beleza agora se você já tem um conhecimento mais avançado e você quer utilizar o npm cara fica à vontade também então vamos lá para fazer a instalação do yarn é o seguinte eu dou um npm e e e depois eu dou um menos G é o npm i aqui basicamente é npm instal então o i é de instalação o g de global para ele instalar isso daqui como global e aqui eu passo o yarn ele vai demorar um pouquinho eu já tinha ele instalado aqui aí depois é só dar um yarn menos V que aqui vai parecer a versão do yarn que a gente tem beleza aí seguinte é a gente já fez a instalação agora do do gerenciador de pacote aqui dentro do meu vs code eu consigo eu costumo estar utilizando algumas ferramentas mas assim é de costumes também tá E e fica ao seu critério eu gosto de estar utilizando Drcula aqui é que é o que dá essa carinha no vs code aqui se você tiver vai utilizando você vai ver que vai est com uma cor diferente tá então Drcula é para você instalar é só você vir aqui clicar em inspeções e digitar Drcula aí vai aparecer aqui nele aí você clicando e se você não tiver instalado vai aparecer assim ó aí você clica instalar ele faz a instalação eu gosto de utilizar também o editor config mais pra frente a gente vai ver é como a gente faz a utilização desse digital config então é bem legal você ter é essa esse cara essa extensão aqui instalada o s link o typescript e e JavaScript e night e o JS snips e o vs cod icons que é basicamente o que mostra os icons ali do lado é aqui no vs cod mas nem is isso da aquii é muito firula tá é mais porque me ajuda assim no meu dia a dia como deve trabalhando então se você quiser instalar e Quiser copiar exatamente o mesmo ambiente que eu tô utilizando aqui fica à vontade mas cara isso daqui não é um pré-requisito você pode só ter o node o vs code e fazer a instalação ali do Y você vai conseguir seguir C Beleza então vamos lá agora que a gente já fez a instalação do yarn agora a gente vai aqui adicionar o typescript no primeiro Vamos iniciar o nosso projeto né então a gente vai fazer um yarn init e aqui eu vou dar um menos é eu posso fazer duas formas eu vou dar um ser que ele vai fazer várias perguntas é qual o nome do projeto a versão a descrição entry Point repositório o autor a licena se é privado ou não e etc e e aqui no final das contas você for colocando cada um desses caras ele vai criando aqui dentro desse projeto para você dentro do p. Jason tá que é o que controla as dependências ali é dentro do nosso projeto alguma biblioteca que a gente quer instar al do node basicamente fica tudo aqui dentro desse pack P Jon que mais pra frente você vai ver que a gente vai fazer algumas alterações ali nele beleza e existe outra forma de fazer que eu acho bem mais rápido quando eu vou iniciar o projeto eu dou um yarn é inish menos y ele já vai e faz aquelas instalações sem fazer nenhuma pergunta Beleza agora a gente tem que adicionar o typescript então dou arn ard Men d e aqui eu passo typescript e dou enter tá Por que esse Men D tá esse Men D significa dependência de desenvolvimento tá apesar da gente estar fazendo aqui é programando com typescript eh eu queria deixar bem claro que o typescript em si ele não vai pro servidor tá o que vai lá pro servidor na hora de publicar na hora de fazer o build é o JavaScript então ele pega todo esse código que tá em JavaScript transforma eh Opa tá em t script transforma em JavaScript e publica no servidor eh então basicamente o typescript ele é utilizado ali de uma forma só local você ajudar no seu desenvolvimento você conseguir tipar o seu código então basicamente é isso ele só é usado aqui no ambiente desenvolvimento na hora de publicar no servidor el faz toda conversão JavaScript e faz ação lá beleza aqui dentro acho que vai dar ver bem como é feita essa conversão aqui vaiar bemo aqui nessa aul show e depis dis a gente pode começar já criar aqui nossa pastinha chamada src e dentro dessa pasta a gente pode fazer o seguinte eu posso criar um arquivo aqui chamado index. ts tá vendo ó que com aqueles IC que eu falei já vi cada ícone aqui do lado então beleza e aqui eu vou fazer o nosso primeiro código em script Então vou colocar aqui um con o nome vai ser text porém eu quero que ela seja uma então eu vou tipar ela string beleza e aqui embaixo eu vou falar que text [Música] recebe texto e teste beleza e aqui embaixo do console P log e eu nem tô me preocupando agora se o qu vírgula se tá bem escrito se tá ma escrito bem de boas Tá eu vou criar até com l aqui vai ficar mais fácil ainda beleza Então vamos lá e fiz aqui a criação e aqui agora eu quero que ele exiba esse texto de teste aqui no nosso console então basicamente eu posso fazer o seguinte eu tô dentro dessa pasta então se eu der um gira aqui ó eu vejo que dentro dela tem uma pasta chamada CRC Então posso dar um CD src e aqui dentro Eu tenho esse index.
ts PR a gente rodar se você já rodou algum projeto com node sem utilizar o JavaScript é bem simples é só você dar um node index P TS vamos lá alué me ligar aqui mas já voltou então eu vou dar um enter e você pode ver que ele deu ele não rodou pelo seguinte fato que ele não rodou tá ele não rodou porque que nem eu falei o node ali ele não conhece typ script ele conhece o arquivo com extensão é PJS que é um arquivo ali JavaScript então ele não vai rodar o typescript Então como a gente faz para transformar esse arquivo aqui que a gente acabou de criar em JavaScript a gente vai fazer o seguinte tá deixa eu abr ver aqui criar abrir uma nova pasta é eu vou dar um yarn tsc menos menus init e basicamente ele vai pegar tudo que tá dentro do nosso código e transformar em typescript deixa só ver aqui o que esse cara fez tá descons o in que eu dei ali é y tsc e aqui basicamente ó ele vai transformar aquele código que eu fiz em t script em JavaScript então você pode ver que ele tirou a tipagem que tava ali passando tipo string e ele já criou aqui direto e agora se eu vim aqui nesse meu código aqui eu vou ter dois caras aqui dentro e se eu vi Down index. js ele vai rodar ali texto de teste Então tá funcionando nosso só muda que tem aquilo que nem eu falei que o load Ele não conhece e o typescript em si em si só a extensão PJS beleza mas tá Leandro e então assim eu vou ter várias pastas aqui dentro dessa pasta do projeto que eu tô criando tá nessa aula Possivelmente não a gente vai ter uma arquitetura um pouco mais enxuta mas num projeto Grande a gente teria várias pastas divididas dentro D RC teria Controller teria models e etc e e quando for soltar servidor ele ia basicamente dar esse ansc ali transformar tudo e JavaScript ficar tudo uma Zon ó que bagunça Tipo aqui tá o arquivo junto com o arquivo com de baixo eu não sei qual arquivo eu mxo para conseguir fazer essa alteração então assim aqui com ty script a gente consegue eh mostrar onde que ele vai vir aonde que ele vai salvar esse cara e já tem aqui ó aqui dentro você pode procurar pro Alt Gear e aqui ele já mostra eh basicamente você Desc comenta e aqui fala que você específica o lugar que ele quer que ele salve esses e a saída desses arquivos né e eu costumo salvar nenuma pasta aqui é chamada DIT tá como padrão acho que a maioria dos códigos assim o pessoal salva nessa pasta mas assim fica o seu critério eh salvar isso daqui talvez quando a gente for publicar do lado do servidor isso daqui seria um ponto importante Porém Aqui na aula eh a gente vai ver outra forma da gente estar utilizando ali eh então você pode colocar qualquer nome aqui nessa pasta ali que quando a gente e utilizar o node monei vai ver que as coisas vão clarear mais na sua mente não vou dar muito spoiler que não lá na frente vocês vão ficar surpreso Beleza então vamos lá então vou deletar novamente esse arquivo e eu vou salvar isso daqui teste config vou dar agora eh aquele Opa tá nesse de baixo o mesmo comando yarn tsc E aí você pode ver que ele já criou uma pasta aqui chamada g e já tá com o nosso arquivo aqui ó index JS aí se de repente eu quer criar uma pasta teste com um arquivo dentro chamado é test. ts e ele ser um console.
log e RT só só jogando exemplo aqui tá Salvar esse cara e novamente eu fazer isso ele já vai vir aqui e basicamente copiar tudo que tá dentro dentro de Rc dentro dessa pasta Beleza então vamos lá eu posso apagar agora essa pasta eu vamos deixar só a tela do ind ali aqui agora no P Jon pra gente não precisar ficar digitando esse comando toda hora vou fazer o seguinte eu V criar aqui Abir aspar aqui scpt e dentro scpt basicamente eu criar também uma nova propriedade chada build que aí build fica respons tsc PR gente aí não tem como esc o código fica até bem mais fácil porque agora só você umar eh eh build né E aí ele vai rodar esse tsc E aí ele já vai criar atinha ali pra gente show de bola Então vamos lá e pronto fizemos as configurações ainda falta mais algumas configurações aqui dentro nosso projeto tá é a primeira dela é o Git Ignore Então vamos inst Vamos criar um novo arquivo aqui a gente tem que por ponto tá antes dele e passar um Git e Opa acho que faltou uma letra e boa e a seg ignora basicamente o seguinte quando eu for subir lá pra produção paraa produção não pro meu Wi Hub esse projeto eu tenho que especificar para ele o que que eu vou subir aqui o que que não vou subir que tá local então assim lembra que eu falei que esse dis aqui faz sentido só lado do servidor ele buildar e transformar tudo em time scpt já stript então não faz sentido eu deixar meu meu projeto mais pesado subindo essa pasta G então eu eu coloco a pasta que eu não quero subir aqui barra dis tá e a outra também que eu não quero subir é assim também já funciona tá E é a node underline moduls por que eu não quero subir ela porque basicamente essa node modulos ela é criada a partir do nosso quando ele dá um yarn enit yarn sty né Na verdade Git não yarn sty ele vai já criar essa pasta aqui Com todas essas dependências porque ele vem aqui no meu pack de Jon vê o que tem aqui dentro e cria essa pasta é quando eu fazer mais instalações de mais ferramentas aqui dentro Eu prometo que vou apagar a pasta do n bodos e vou criá-la de novo aí você vai ver que vai ter vários arquivos aqui dentro e aqui como a gente só tem Type script ele só criou ela e porém assim conforme for passando as aulas aqui eh eu prometo apagar essa pasta e dar um yarn tal e a gente vai recriar essa pasta do zero com todas as variáveis que tiver aqui dentro D spect PJ Beleza então vamos lá e a gente agora já já aprendeu transformar um typescript em JavaScript eh tem mais algumas coisas aqui que ainda a gente consegue fazer no nosso projeto né A primeira delas é instalar o editor config então se você tiver a a extensão já instalada se clica aqui com direito clique em generator editor config e tem e ele já vai criar esse iconeinstagram é eu não vou ficar explicando configuração configuração do edito config eu vou explicar aqui basicamente o que eu mexo é e o que me ajuda no meu dia a dia tá A primeira é esse daqui ó try e White Space eu coloco ela tr tr eu gosto de explicar mais na prática como que ela funciona tá então basicamente é o seguinte ó se eu vi aqui dar um monte de espaço no meu código tá vendo fica com um monte de espaço aqui se eu tiver esse cara habilitado como true quando eu salvar ele vai deletar esse monte de espaço então isso daqui faz bem sentido porque assim nosso arquivo acaba ficando mais leve porque imagina que a gente esqueceu um espaço lá no código ele acaba removendo aqui local mesmo na hora que a gente salva o nosso arquivo beleza E esse cara aqui também eu gosto de colocar como TR é insert final New L é que basicamente quando eu salvo aqui ele cria uma nova linha aqui dentro do meu arquivo ó se eu vir aqui no nosso index TS você pode ver que eu não tenho uma nova linha aqui criada quando eu salvar eu já crio uma nova linha Então beleza aqui já tá PR configurar dedit config essas configurações é bem básica que eu gosto de fazer dedit config e é bem legal que assim aqui a gente tá utilizando V code se outra pessoa tivesse programando lá no Linux e tivesse utilizando e outro vamos dizer assim não tivesse utilizando V code Notepad ou algum outro sistemas assim se tivesse biblioteca do edital config basicamente você meteria no padrão de código ali toda vez removeria os espaços toda vez seria deitado pro site 5 espaço enfim e as outras configurações ali que eu não quero ficar explicando aqui que dá pra gente adicionar muita coisa aqui também no editor config assim como você vai ver no SL lint Então beleza é editor config configurado e e agora vamos para esse link é a gente tem que fazer a instalação dele também então vou dar o npm e na verdade aqui é init Tá e aqui eu passo @ ewin TR e config Vamos dar um enter e aqui o pouco mais diferente porque ele vai fazendo algumas perguntas ali de como você quer configurar seu código tá eh eu não vou ficar entrando em cada uma O que é também tá eh e eu vou fazer aqui e vocês vão vir eu vou explicar na prática como que tá funcionando cada uma porque senão a gente perderia muito tempo aqui do curso só falando de do config s l e Essa não é a ideia então ali eu primeiro coloco a última opção aqui eu coloco utilizando o jav script e com a interface de Import Export é aqui eu não tô utilizando nem reaction View aqui eu tô utilizando Type script no meu projeto aqui eu tô utilizando do node então Ó você aperta espaço aqui no Browser e aqui espaço no node quando ele tiver com certinho é você Dá um enter é deixa até pô um pouquinho mais para cá assim é boa aqui ele pergunta que eu quero utilizar o Style guide já existente então é um padrão já de estilo pré pronto é em alguns projetos eu utilizo em algun não que nem eu falei Depende muito da configuração que eu tô fazendo aqui a gente não vai utilizar a gente vai ter o nosso próprio aqui eu vou deixar ele como Jon é aqui tabs ou espaços eu vou colocar espaços e Double ou sle eu vou colocar sle aqui eu vou colocar o Windows também de vez Linux require semic Colors Yes e script tal posso instalar isso tudo e aqui qual gerenciador de pacote a gente está utilizando é a que a gente tá utilizando em ard Então vamos lá já já a gente vai olhar o nosso pack Jon você vai ver o tanto de coisa que ele vai instalar aqui mas primeiro vamos esperar aqui um pouquinho ele fazer essas instalações tá ele demora cerca de 30 40 segundinhos ali depende bastante O computador também beleza já fez a instalação a gente já tem aqui ó o nosso arquivo é s20 configurado já tem algumas informações aqui dentro dele depois aqui com Parar das aulas às vezes eu venho aqui acabo mexendo acaba adicionando uma coisa removendo outra coisa mas fica tranquilo que ao longo das aulas a gente provavelmente vai mexer nesse CS link aqui que nem eu falei não é não tem padrão Mas cada projeto precisa ter esse cara aqui para o projeto ter o padrão mas assim você quisesse utilizar seu projeto lá sem ponto vírgula não tem problema porém todo mundo que for cudar dentro desse projeto ele não pode cudar com ponto e vírgula no final seria sem ponto e vírgula que não imagina um deve P de um jeito outro deve faz de outro jeito aí acaba não tendo padrão de código em si é ele precisa ter um padrão e is s l ajuda bastante a gente tá então beleza ó se a gente vir aqui no aspect pon J você vai ver que aqui como dependente desenvolvimento ele já instalou s l e algumas outras ferramentas que também é mais ferramenta pra gente estar utilizando aqui localmente porque assim lá lado servidor não faz interesse nenhum para ele que o código Tá bonito tá feio ele só quer rodar o código show então vamos lá aqui nosso index TS tudo criado eh você pode ver que às vezes deixa eu ver como é gente tá habilitado ele deixa eu ver eu vou até desabilitar ele vou habilitar e dar Reload por porque às vezes ele dá un errinhos às vezes ele aparece o às vezes ele não aparece o aqui Dent do nosso projeto é do próprio code tá grande maioria das vezes funciona porém que nem eu falei aconselho você aí fechar e carregar aí seu code show então beleza vamos lá eu vou começar agora aqui a fazer a criação do do nosso projeto aqui em cim da nossa pi então para isso eu vou fazer o seguinte e eu vou instalar aqui o yarn ads Express E assim se você tiver vendo que tá copiando muito código não tá entendendo não tem problema tá no começo é bem assim mesmo é bem copiar E aí ao longo dos Passos Ali você vai evoluindo você vai ver que isso daqui vai fluir normalmente tá Não esquenta muito a cabeça com isso que não gente vai entendendo é copia e faz que eu te garanto que isso daí vai te ajudar no futuro tá então aqui a gente dá um types Express Vamos dar um enter ele vai adicionar ali o Express vai adicionar os types do Express também e beleza e aqui dentro do nosso index TS a gente vai fazer o seguinte eu vou criar eu vou exportar né então Import Express from Express beleza tá enfim vai acontecer alguns erros aqui depois no futuro a gente cor que não disse não esquenta Mita a cabeça com isso aqui dentro deixa eu só corrigir um negocinho aqui rinho boa voltei aqui tive que dar uma corrida ali atender o portão mas tudo certo já agora show então vamos lá então aqui eu já já vi a fada que tava fazendo Já paguei a pasta de também que tava aqui no nosso projeto mas foi só isso vamos lá aqui Express n então não tem aspas aqui no no final e realmente vai ficar dando erro então vamos lá Opa Express vírgula aqui eu vou dar um con app e aqui eu vou instanciar o nosso Express né para ele rodar é Leandro o que que é Express eu acabei passando batido e não explicando basicamente Express é o que é a biblioteca que a gente vai utilizar aqui pra gente mudar o nosso servidor tá tem algumas outras formas da gente fazer aqui com node eu não quero ficar entrando muito no detalhe sobre isso A grande maioria do BR utiliza Express e aqui a gente vai estar utilizando Express acho que o curso é muito pequeno pra gente ficar se abordando nesse pequenos detalhes explicando que express passo a passo seria mais um curso e explicando geral em si do node sabe então eu não quero focar muito nisso aqui eu vou dar um conf port e aqui eu vou pedir para ele rodar na porta 300 beleza e aqui embaixo eu vou dar um app pon list e e aqui eu passo minha porta porqueo que ele Rode beleza aqui vou fazer criar podia ser uma function mas eu preferi ser uma fun vou dar console L aqui eu vou passar pode ser on e aqui eu vou até fazer diferente e aqui eu passo a porta que ele tá rodando beleza show então Maravilha também eu não sei porque o Ach não tá funcionando 100% no projeto a gente para e vê isso aí não sei se ele não conhece aect alumais auma configuração ele reconheceu aqui já volto E já V isso daí nente não esquenta a cabeça com ele não depois do a gente colocar ele atualizar a gente salvar vai rodar tudo aqui então beleza então vamos lá a gente já fez aqui criou ess l então a gente sabe que não consegue já mudar diretamente esse projeto Então vamos dar build ele vai criar lá uma pastinha ali dis então eu vou download traço indexs que aí ele criou esse arquivo meu aqui vamos ver se isso daqui vai funcionar Vamos dar um enter server on eh deixa eu abrir aqui um navegador local bost 300 vamos vir em pensionar eh cons log service respons stat po tô viajando né ele vai dar um console aqui embaixo que rodou o server não lá no no navegador que a gente nem criou uma rota nem nada então desconsidera Abrir navegador mas já utilizade no navegador show então beleza o que muda aqui é que tipo se eu vir aqui e salvar e dar um Ctrl S ele não vai atualizar aqui embaixo esse server On aqui para mim se eu vi aqui mudar de porta 308 ele não vai atualizar porque ele tá dando esse index DS aqui Então como que eu faço para cada atualização que tiver dentro projeto eu replique automaticamente Ela ali no ambiente que eu tiver desenvolvendo e vamos fazer o seguinte vamos voltar aqui E para isso existe é o LM né que é o que a gente vai utilizar agora e vai fazer a instalação dele então para isso a gente D umar pon tro menos D que ele aprendência desenvolvimento nodm e d enter e aqui no nosso p. Jon a gente criou esse build tsc a gente vai vai criar agora um Dev e esse Dev eh ele vai ser um nodm eh e aqui eu vou passar src index.
