[Imersão Dev Back-end] Desvendando APIs e Servidores

Olá, meu nome é Guilherme Lima, eu sou professor e desenvolvedor de software aqui na Alura e estou muito feliz que você quer aprender mais sobre servidor, Javascript, Node, express e nós temos um projeto simplesmente incrível, o qual vamos desenvolver do zero. E para esse desafio, eu não estou aqui sozinho, eu estou com ela. - Tudo bom, Ju? - Tudo bom. Eu sou a Ju Amoasei, eu sou desenvolvedora e instrutora na Escola de Programação da Alura, junto com o Gui. Meu foco é Node.js e ecossistemas Javascript em geral para back-end. Muito bem. E eu estou com

o André. Tudo bem, André? Tudo ótimo, ainda mais nessa companhia, com o pessoal que está acompanhando a gente nessa imersão para saber mais sobre o que tem nos bastidores. E é claro, com vocês dois, que eu sou super fã. Eu sou o André David, sou desenvolvedor, professor e coordenador lá na FIAP e hoje o que eu quero compartilhar aqui é essa ideia de a gente entender o funcionamento de um servidor, de um back-end, API, um monte de palavra nova, um monte de palavra difícil, mas vamos seguir um ritmo bem legal para você conseguir acompanhar a

nossa imersão do começo ao fim. É isso aí. E eu quero mostrar o que vamos desenvolver nessa aplicação. Olha só, estou compartilhando a minha tela agora com vocês e nós temos uma aplicação inspirada no mundo real, numa outra rede. Numa rede que o pessoal talvez conheça, talvez não. Talvez não, exatamente, chamada de Instabytes. Olha só, tem uma foto. Essa foto que vocês colocaram para me homenagear? Sim, sim. Obrigado, gente. Então tem uma foto minha aqui, escrito @guilhermelimadev, os números aqui embaixo. Então temos a página de perfil, a página principal. E aqui temos algumas imagens que,

ao clicar nelas, conseguimos ver uma descrição dessa imagem. E aqui tem já uma coisa muito interessante para a gente comentar e para a gente começar a entender também o nosso objetivo aqui, o que vamos construir. A galera está vendo que essa página já está pronta. E ela está funcionando ali. Você clica na foto, a foto se expande. Você clica em outro dos lugares maravilhosos que tem aqui, você consegue ver que os detalhes mudam. Então o detalhe da Torre Eiffel não é o mesmo do Coliseu, sei lá. Tudo isso está funcionando, mas tem um detalhe legal.

Isso é só front-end. O que isso quer dizer? Tudo o que estamos vendo nessa página está lá no código HTML da página. Está escrito, olha, essa imagem aqui vai aparecer nessa posição com esse texto. Eu sei que quando a galera ouvir isso deve estar perguntando onde que eu estou arrumando um problema nessa história toda. E o problema é, nós estamos falando de uma página estática. Uma página onde todos os conteúdos que estão aqui só vão ser alterados se alguma pessoa desenvolvedora sentar, abrir o código e ficar mudando a página. E fala sério, né, Ju? Isso

aí seria o pior cenário no mundo. Exato. Se vocês pensarem em qualquer coisa que vocês acessam hoje na internet, nada funciona dessa forma. Você vai na rede social, você posta uma imagem nova, ela aparece na página. Você faz um comentário, o comentário aparece na página. Então não existe no mundo real esse caso de alguém abrir o HTML e fazer uma alteração, fechar de novo. Porque o HTML ele é, a partir do momento que ele está na tela, teoricamente, ele é estático. Nem sempre, mas vamos considerar, neste caso, sim. Então como que os sistemas, como que

os produtos de tecnologia funcionam? Como conseguimos fazer um comentário, ele aparecer na página ficar salvo? Porque se você abrir de novo em outro lugar, ele vai estar lá. Como funciona? É isso que vamos descobrir nessa imersão. Muito legal, Ju. Olha só que curioso. Tem uma aplicação que vamos usar como referência, só pra gente contextualizar, chamada AluraBooks. Nela temos uma série de livros. Então existem diversas informações, como o título do livro, quem foi a pessoa que escreveu, o preço, a categoria. Entretanto, essa aplicação não está com os dados estáticos. Toda a informação vem de outra base

de dados. E conseguimos acessar essa informação. Vamos ver? Esse exemplo que você puxou é bem legal, porque é um exemplo onde precisamos fazer essa atualização. A galera está vendo agora, pela sua tela, o que a gente chama de um arquivo ou de um texto no formato JSON. Nós vamos explorar isso mais para frente, não precisa se preocupar, eu sei que é uma palavra nova, um termo novo, mas eu quero que você se concentre enquanto acompanha a gente. Está vendo que nesse texto que estamos olhando, nós temos escrito título e na sequência o título de um

livro? Preço e o preço de um livro, autor e o autor, e assim sucessivamente? E se a gente explorar mais, Gui, a mesma estrutura se repete no próximo livro. Na parte de baixo eu tenho lá título, o título, o preço e tudo mais. O que está acontecendo? Tem algum sistema, que vai ser nossa responsabilidade construir logo mais, que está puxando esses dados de algum lugar. Provavelmente um banco de dados, que é onde guardamos essas informações. Esse sistema está pegando esses dados e deixando nesse formato bonitinho, nesse tal de JSON que eu te falei. Por quê?

Vamos voltar para o front? Porque lá no front, a pessoa desenvolvedora não vai precisar, na mão, colocar a imagem do livro, o nome, o valor. De onde que ela vai pegar? Ela vai consultar esse JSON que eu falei, para poder extrair todas as informações de lá. Eu sei que parece uma coisa muito complexa, mas na verdade estamos falando de uma coisa simples, de separar o front do nosso sistema, a parte onde o usuário interage, onde ele clica e tudo mais, com o back-end do sistema. E para te ajudar nessa jornada, nós preparamos o curso de

nivelamento, que é o curso de lógica de programação, disponível desde o momento que você se inscreveu na imersão, até a aula de hoje. Então vai lá, faz o seu curso de nivelamento, para que você consiga acompanhar toda a imersão de um jeito ainda melhor. Então a galera já sabe, Gui, nesse ponto, que tem um curso que eles poderiam ter visto antes para tirar as dúvidas. Já sabem que vamos dividir o nosso front do nosso back-end. Vamos começar a preparar o nosso ambiente de programação, pra gente poder ter na máquina tudo que nós precisamos, e aí

sim vamos fazer a criação desse back-end, porque sim, com o Node, com o JS, logo na aula 1, já vamos sair com algo com carinha de servidor pronta. E para não deixarmos nenhuma lacuna, temos uma assistente que vai nos ajudar muito, que é o Gemini. Observe aqui, acessando pelo link alura.tv/google-gemini, você vai ter acesso à inteligência artificial do Google, uma ferramenta que nós vamos utilizar para ser a nossa assistente durante o desenvolvimento. Determinadas explicações, tópicos, termos, podemos usar aqui também. Por exemplo, não vamos ler, mas só a fim de conhecimento, poderíamos perguntar qual a diferença

entre back-end e front-end. Escrevi tudo errado, front-end. O bom é que a gente testa mesmo o Gemini para ver se ele está em dia. Isso, e vou até falar assim, me explique com palavras simples. Assim que eu executo, ele vai trazer informações sobre essas carreiras, essa diferença, uma explicação com palavras mais simples, que você vai poder fazer isso quantas vezes você quiser durante toda a imersão. Vão existir alguns momentos em que vou realizar de fato essa busca, mas o que eu quero fazer agora de verdade é, como que a gente cria o nosso ambiente para

desenvolver o nosso servidor, Ju? Vamos lá. Vamos desenvolver em JavaScript, que é a nossa linguagem de programação preferida aqui na imersão. A nossa foi ampla, mas na imersão é sim. Para essa eu vou de JavaScript. O JavaScript, originalmente, foi feito lá em 95, 96, para ser executado dentro do navegador. E é por isso que no curso de nivelamento, se você já fez imersões voltadas para front, você abre o navegador, sai codando. Mas vamos sair do navegador, vamos para o back-end. Então, nós precisamos de outro ambiente, digamos assim, que seja capaz de entender um arquivo JavaScript

e executar, porque o navegador é onde a gente vê os gatinhos e as redes sociais, mas também é onde executa o JavaScript. Existem alguns ambientes que podemos usar para desenvolver com JavaScript fora do navegador. No caso, nós vamos usar o Node.js, que é o primeiro, o mais antigo, a primeira vez que o JavaScript saiu do navegador e é um dos mais utilizados. Posso pesquisar? Pode pesquisar. nodejs.org. Ótimo. Posso clicar nesse primeiro link? Pode clicar. E vamos instalar esse ambiente. Então, você pode clicar em... Se tiver em português, vai ser "descarregar Node.js". Na versão LTS, como

está na tela. E o Gui está fazendo o processo de instalação. Ele baixou, tem várias caixinhas. Você pode ir clicando em Next. - A instalação é Next, Next até... - É, por enquanto é. - É você que está clicando... - Boa. - Aí aqui ele está falando as licenças, os detalhes. - Só aceita. - Olha o tamanho disso aqui, gente. - Minha pergunta, será que alguém lê isso? - Eu conheço uma pessoa que lê. - Eu iria ler sempre, porque isso está aí para estabelecer algumas regras de uso. Mas no caso do Node, estamos falando

de uma ferramenta que é amplamente utilizada. E vamos utilizar dentro dos padrões. Eu vou colocar aqui, next. Vai deixar lá em Program. O arquivo, o Program Files, os arquivos de programa é esse lugar mesmo. Então, pode instalar usando... Você pode... Não, acho que Chocolatey... ainda não precisa. Não precisa. Vamos lá. Vou dar um Next aqui. Instalar. E aqui eu já quero contar uma curiosidade importante para o pessoal sobre o Node ou sobre esse tipo de ambiente que a gente instala. Dependendo do sistema operacional que você usa, às vezes é necessário, depois da instalação, reiniciar a

máquina ou, como vamos trabalhar num ambiente de terminal, reiniciar o terminal também. Então, só para deixar essa dica, se você instalar o Node e na hora que a gente for verificar a versão, você perceber que o seu não está verificando, está mostrando um erro, talvez seja necessário simplesmente reiniciar o computador e tudo vai dar certo. Vamos testar isso aqui? Esse aqui era o projeto que estávamos usando anteriormente, o Instabytes, no qual todas as informações estão no HTML. Vamos tirar as informações do HTML e vai criar o nosso servidor. É, e aqui temos uma oportunidade porque

o profissional de front e de back geralmente são pessoas diferentes. Então, podemos imaginar que esse projeto que a gente mostrou na tela, ele está encerrado. Podemos fechar ele aqui no VS Code, porque foi outro profissional que desenvolveu. E nós, a partir de agora, vamos desenvolver só o back. Vamos criar um projeto novo, uma pasta nova. Vamos começar do zero dentro do VS Code. Legal, vou clicar aqui para fechar esse projeto, Close Folder, e vou fazer o seguinte, já que vamos criar, ele está aqui, Instalike, página inicial. Eu vou clicar com o botão direito, criar aqui

uma nova pasta que eu vou chamar de instalike-back. Perfeito, pode ser. Que aí faz sentido com isso que você falou. O profissional de front e back não necessariamente estão no mesmo arquivo, na mesma pasta ali trabalhando. Cada um está em um local separado e em determinado momento a gente junta essas habilidades. Como a gente inicia um projeto para ter o nosso servidor, Ju? Bom, nesse momento, já estamos usando o Visual Studio Code. Vamos deixar material para instalação, caso você ainda não tenha instalado. O que o Gui fez? Foi lá no menu inicial, tem um ícone

de terminal, se você quiser mostrar, para a pessoa abrir o terminal. É verdade. Lá nos três pontinhos, terminal, ou o atalho Ctrl+J. Vamos usar muito. Agora a gente saiu do navegador, nossa principal ferramenta é o terminal, que é a tal da tela preta. O que precisamos fazer? Precisamos avisar primeiro que esse projeto é um projeto Node, então precisamos criar uma pequena estrutura, para que quando esse projeto execute, ele "saiba", entre aspas, que é um projeto Node.js. Vamos verificar só se o Node foi instalado mesmo? Bem lembrado que eu já tinha esquecido. Qual que é o

código? Qualquer coisa que você instalar, e se for uma pessoa dev, quiser verificar a versão, provavelmente você vai ter que escrever o nome dessa coisa, -- version. Como queremos saber a versão do Node, nós vamos escrever node --version, ou node -v. Tanto faz. Eu vou testar as duas. Então ele deu aqui, v22.11.0, ou se eu faço assim, node -v, dou "Enter", o mesmo resultado. Isso significa que o Node foi instalado em nosso sistema operacional, mas não necessariamente nesse projeto. Porque vamos precisar informar. Exato. Ele foi instalado no que a gente chama de "globalmente", ou seja,

todo o computador consegue acessar e usar. Uma coisa muito importante, o Gui acabou de instalar o Node, neste momento, a versão mais recente é a 22. É muito importante, se você já fez algumas práticas de Node, etc., talvez você já tenha instalado, se esse é o caso, precisa ser pelo menos a versão 20. Se você quiser, faz isso que fizemos, da node -v, confere. Se for versão 20 em diante, tudo bem. Se não, vai na página do Node e atualiza, para ter pelo menos a 20, ou, se você instalar, nesse momento que estamos instalando, você

vai ter a 22. Excelente. E como que a gente começa o nosso projeto? Vamos lá. Eu vou passar aqui um comando para você, que vai parecer meio misterioso, mas vamos debugar ele. NPM. - NPM? - Isso, NPM. Navio, Pato, Maria. Estou brincando, vai, coloca NPM. npm init... i-n-i-t, espaço es6... É, escola sapo 6, e, espaço, hífen y... Isso, calma que vai dar tudo certo. Eu vou dar o "Enter". Pode dar o "Enter". E, tivemos aqui um... Olha, que vacilo, o que aconteceu? Melhor sair correndo. Não, calma, respira. Esse aqui é um daqueles pequenos desafios que

nós devs enfrentamos, dependendo do sistema operacional que você está usando. Talvez, se a pessoa digitou esse mesmo comando, no Windows, no Linux, ou no Mac, pode ter funcionado perfeitamente. Vou numa explicação bem simples e breve aqui, para não tomar muito tempo do pessoal. O que aconteceu é que o Windows tem dois ambientes de terminal. Quando falamos de ambiente de terminal, estamos falando dessa tela preta, com letrinha branca, essa coisa meio Matrix. No Windows, a partir da versão 10, passou a ter o terminal PowerShell e o terminal Command Prompt. Para nós, devs, não interessa muito mergulhar

nas diferenças entre eles. O que interessa é que o PowerShell tem mais requisitos de segurança, porque ele consegue fazer umas coisas bem poderosas na máquina. E por isso que ele não está deixando a gente usar esse comando. Para facilitar a nossa vida, simplesmente vamos escolher outro terminal. Então, é só vir aqui na parte de baixo do VS Code, onde está aberto o ambiente de terminal, clicar no símbolo de mais, e escolher outro. Aqui, o Gui poderia escolher, por exemplo, o git bash, porque ele tem esse terminal instalado na máquina dele. - Que é o git

e o Gui. Exatamente. O git e o Gui, esses bons amigos. Mas, vamos em um terminal que eu sei que vai ter aí na sua máquina Windows, que é o Command Prompt. Então, clica nele, Gui. A gente só mudou de terminal para conseguir executar o comando que a Ju ditou. Vamos digitar ele de novo para ver se vai. E aqui do ladinho, ele ficou aberto, eu posso até deletar o primeiro, o PowerShell? Pode fechar, porque isso não armazena dados. É só o ambiente de execução. Então, aqui eu nem lembro o comando. Vamos tentar de novo.

npm espaço init... espaço es6... hífen y... npm init es6 -y. Agora vamos testar. Pode executar. Foi. Ele está pensando. Eu não faço ideia, mas parece que deu certo. Não apareceu nada vermelho escrito, né, na tela? Enquanto não estiver aparecendo essa tela vermelha, estamos felizes. Rapidamente, o que aconteceu? Quando você instala o Node, você instala junto com ele o que? O NPM. O NPM, ele é um gerenciador de muitas coisas que auxiliam o Node. Ele gerencia um grande repositório de código que já vamos acessar para conversar sobre ele, e ele também gerencia esses comandos que a

gente dá no terminal, ou scripts também, Toda vez que a gente escreve, por exemplo... a gente escreveu node -v, sabíamos que era para executar, algo relativo ao Node. Quando a gente usa o NPM, ele vai acessar também uma série de ferramentas que são ligadas ao Node, porque é ele que gerencia essa parte. Ou seja, pedir para o npm init, iniciar, né, normalmente é o comando que a gente dá por padrão quando queremos iniciar um projeto. Esse es6, basicamente, está falando que esse projeto vai utilizar JavaScript moderno, que também, a partir de 2015, houve mudanças na

linguagem, queremos utilizar a linguagem mais moderna. - y é só porque se a gente tirar esse "-y", que vem de "yes", ele vai fazer algumas perguntas de configuração que a gente não precisa agora. Exatamente por isso que a Ju está explicando, que se você olhar para o lado ali, Gui, no seu projeto, apareceu um arquivo novo que não foi você que criou. Você nunca foi aí e deu o botão direito para criar esse arquivo. Quando a gente deu esse npm init para inicializar esse projeto e dizer que ele vai utilizar o Node, ele já começa

a criar uma estrutura com carinha de Node, uma estrutura de projeto. E o que faz parte dessa estrutura? Esse arquivo package.json. Nossa, de novo, palavra difícil. Calma. Ele é só um arquivo que faz duas coisas. Ele descreve o nosso projeto. Então, que projeto é esse? Em que versão ele está? E assim por diante. E ele descreve também as dependências, as tecnologias que o nosso projeto usa, mas que não foi a gente que precisou inventar. Essa é uma parte muito legal. Por quê? Quando nós somos desenvolvedores às vezes dá até uma vontade de sair criando tudo.

Mas pensa bem, se o meu foco é criar um jogo onde dois personagens lutam entre si, para quê que eu vou ter que me preocupar em toda a parte gráfica e renderiza quando o boneco pula? Deixa isso para lá. Eu vou aproveitar o que outro dev fez. Então, nesse nosso caso, por enquanto, o que o nosso projeto sabe? Ele sabe duas coisas. Que é para trabalhar com Node. Beleza. E ele sabe que tudo que é externo a esse projeto que vamos usar, tem que aparecer nesse arquivo package.json. Até aí, está tudo bem? Tudo bem. Eu

acho que eu entendi. Na verdade, qualquer coisa que eu coloco nesse projeto vai ter que ficar descrito aqui. Porque eu vou precisar passar esse projeto para Ju continuar, para outra pessoa que vai trabalhar com back-end nele, vai conseguir criar esse ambiente. - Exatamente. A pergunta é, como que eu crio nosso servidor? - Vamos lá. Agora que já temos um projeto Node iniciado, o que o André falou sobre dependências e o que a gente estava falando sobre o npm, que eu falei que ele é um grande repositório de dados. Quando vamos reutilizar um pedaço de código

que a outra pessoa já criou... Então, por exemplo, coisas muito comuns que a gente faz no dia-a-dia de desenvolvimento, criar servidores, fazer validações, autenticação. CRUD. Validar CPF, Pelo amor de Deus não fala isso. Todas essas coisas que são muito comuns, a gente procura pedaços de código pronto, justamente porque eles já estão testados, a comunidade contribui, tira bugs, etc. O mais famoso deles, nós vamos utilizar no nosso projeto... vamos primeiro instalar e depois a gente conversa sobre o que ele faz. Vamos abrir o terminal novamente. Vamos para o comando que instala, então. Qual é o comando?

npm, que é o nosso gerenciador de pacotes. Então, da mesma forma que eu peço, olha, eu vou ter um projeto Node, eu vou falar assim, npm, agora eu vou precisar instalar uma dependência. - Exato. npm install express... express? E-X-P-R-E-S-S. Não estamos falando para ele instalar bem rápido, não. Não é isso que está acontecendo. express é o nome da ferramenta, porque a gente identifica essas dependências por nome. Elas, às vezes, têm nomes engraçadinhos. Se você der Enter agora em npm install express, o que vai acontecer? Já ocorreu uma mudança na pasta do nosso projeto. Eu posso

entender o que aconteceu? Olha só, ele falou que ele adicionou 65 pacotes. Eu pedi para ele instalar o npm install express, né? Aí ele instalou 65 pacotes, ou seja, a impressão que eu tenho é que esse pacote depende de outros pacotes, ele tem outras dependências. E ele fez isso em dois segundos. Imagina nessa imersão, temos que sentar nós três aqui e a galera toda que está acompanhando a gente instalar 60 e poucos pacotes, ninguém ia aguentar. Ia dar sexta-feira, acabou a imersão, a gente só instalou os pacotes. E aí o express entra nessa jogada também,

porque a gente ia precisar criar o código de um servidor capaz. Olha o trabalho. Não, vamos pegar uma coisa pronta. Já existe um módulo do Node que ajuda a gente a criar um servidor e servir aquilo que queremos. E servir a nosso API, nosso back-end, o que quer que seja. Por isso instalamos o express. E curioso que ele deixa assim, nas dependências lá da linha 30 do pack de JSON, agora tem express. Não fui eu que fiz isso. Então, o que acontece? Se, de repente, tirarmos o Gui e mandarmos esse projeto para a gente, a

gente pega esse projeto, podemos instalar o projeto e ele já instala tudo o que tiver nessa lista de dependências que vamos colocar outras coisas, e já vem junto. Porque esse arquivo pack de JSON, ele é o que a gente chama de "manifesto" do projeto. Então, tem todas as informações lá. E não só para a gente acompanhar, mas também para o computador, para o Node, quando executar, saber o que tem que executar. Mas Ju, como que a gente cria o nosso servidor? De verdade, assim, dentro de mim tem uma ansiedade. Eu queria criar isso aqui. Tipo,

sabe quando eu mostrei para vocês aqui o AluraBooks, a página visual e tal, mas por detrás do sistema tem alguém mostrando aqui esses dados? Cara, era isso que eu queria. Eu só quero acalmar o seu coração e o da galera que está acompanhando que pode pensar, nossa, mas tudo isso e ainda não está funcionando? Na verdade, não foi tudo isso. A gente digitou dois comandos só. A gente só instalou o Node e inicializamos o projeto e o segundo comando foi agora instalar o express. Então, estamos conseguindo fazer uma coisa muito incrível escrevendo quase nada. Por

quê? Vamos criar esse servidor. Ju, o express é que vai ajudar a gente. O que precisamos em termos de código para a gente avisar que o express vai funcionar como um servidor aqui? Primeiro, vamos criar um arquivo para escrever nosso código? Vou criar um arquivo novo aqui, clicando nesse botão New File. E qual é o nome que eu dou para esse arquivo? Pode ser server mesmo, que é um nome classicão que a gente dá quando... -Server classicão? Ah, só server. server.js. Normalmente, é um nome padrão. A gente segue alguns padrões. Vamos chamar de server. Eu

vou só minimizar dos lados aqui, Ctrl+J e ele vai tirar o Explorer. Então, se o meu Explorer sumir do nada, eu apertei o Ctrl+J... Desculpa, a gente falou errado. Ctrl+B para tirar o Explorer e Ctrl+J para ele abrir o terminal. Então, durante agora o decorrer, como vamos fazer isso várias vezes, eu vou fazer de forma automática. Primeira coisa que temos que fazer, instalamos o express, é avisar que esse arquivo, esse módulo, ele vai usar. Vamos lá, import express from... E agora "express" de novo, mas entre aspas. Legal. Eu tenho uma dúvida. Precisa ser aspas simples,

aspas duplas? Eu tenho a minha preferência, mas... A sua preferência é polêmica? Não, a minha preferência é dupla e a maior parte das pessoas preferem as simples. Eu sou aspas duplas, eu só queria dizer... Ah, não. Não, então estamos juntos todos nós, velho, porque eu também vou de aspas duplas, então. Mas é legal você ter feito essa pergunta aqui, porque algumas linguagens limitam. Então uma dica que eu deixo para a galera é, estamos usando o Node aqui para representar e criar um serviço, mas sempre que você for começar uma linguagem nova, faz essa pergunta que

o Gui fez. Se não tiver um Dev para te ajudar, pergunta para o Google Gemini, olha, nessa linguagem posso usar tanto aspas duplas quanto aspas simples? E até aproveitando, o que essa linha mágica está fazendo? Abre ali de novo a parte lateral do seu VSCode, por favor. Tem uma pasta que apareceu aí que não foi a gente que criou. Que é o NodeModule. Quando a gente mandou o express instalar, essa pasta foi criada sozinha. Nós nunca vamos precisar mexer nela. Eu só estou mostrando por curiosidade. Nunca precisamos mexer aí. Está vendo que lá no meio

desse montão de pastas tem um express? Lá embaixo. Isso. O que a nossa linha está dizendo então? Olha, "from" em inglês é "de". Então estamos dizendo assim, de dentro do módulo express, que é o que está nessa pasta, você vai puxar algo chamado express, que é o que vamos usar agora para criar o nosso servidor. Você está de brincadeira. O que eu faço agora, pessoal? Então temos o express nesse arquivo. Uma dúvida. Eu preciso usar ponto e vírgula? Não preciso? Resposta curta. Em 99,999% das vezes, não vai fazer diferença. Porém, precisa. Em 0,01% vai precisar.

Você pode passar a vida inteira sem cair num "caso de esquina", que a gente chama de um "corner case", que precise, mas é uma boa prática, é legal, porque senão você deixa para o Node decidir quando põe ou não. Não é legal. E agora? O que eu preciso fazer? Bom, já instalamos o express e importamos no nosso arquivo, agora precisamos usar o express. Vamos criar uma variável para isso. Vamos criar uma variável com const. Se você fez o curso de nivelamento, você usou let para criar variáveis, vamos usar const. Tem material extra aqui nessa aula

dizendo a diferença entre os dois. Vamos chamar essa const de app, também é um nome meio padrão, igual. E agora vamos iniciar o express usando a palavra chave express, abre e fecha parênteses. Ou seja, express é uma função. E quando executar a linha 3, vai executar essa função e passar o resultado dela para dentro da variável app. E conseguimos usar tudo do express a partir de app. É como se esse app representasse o nosso servidor. Então você vai perceber que tudo que a gente for fazer, que é para nós dizermos, "servidor, faça tal coisa", vamos

escrever o app. Excelente. Exato. Então agora podemos pedir para o servidor subir, como a gente disse. Vamos lá, app.listen, de ouvir. Tudo minúsculo. L, I, S, T, E, N. O JavaScript faz diferença entre minúsculas e maiúsculas, então sempre tem que tomar cuidado. Listen é uma função também, então você vai abrir e fechar parênteses. As funções recebem parâmetros, como vimos lá no curso de nivelamento. Essa função tem dois parâmetros. O primeiro vai ser um número. Vamos passar um número mágico aqui. 42. Resposta de tudo. Esse seria um ótimo número, mas eu garanto que ele não funcionaria

e logo a gente fala disso. Não, nesse caso vai ficar 3.000. Isso, vírgula. Agora vamos passar para o segundo parâmetro. O segundo parâmetro é uma função que vamos escrever aí mesmo. Então é uma função que não recebe nada, então abre e fecha parênteses. Vamos criar essa função com arrow functions, a função seta, igual e maior que. Abre chaves para a gente escrever a função. Dentro dessa função, vamos fazer o seguinte, vamos usar só um console.log para passar uma mensagem para a gente. Então, console.log. Aqui dentro a gente passa um string, por exemplo, "servidor escutando". Escutando,

escutando. Beleza, ok. E aí está tudo certinho. Está salvo o arquivo? Está salvo o arquivo. Você só vai precisar colocar um ponto e vírgula em alguns lugares especiais para a gente seguir o nosso combinado. Vamos lá na linha 3, onde ela termina, e vamos colocar um ponto e vírgula. Ótimo. Show. Agora, o que acontece é, a linha 5 é uma linha que só existe dentro da nossa função. Vamos dar um ponto e vírgula nela. E a linha 6 é, na verdade, o final da linha 4, porque a gente começou a linha 4 e abriu uma

função dentro dela. Vamos pôr um ponto e vírgula aí para avisar que aquela linha acabou também. A gente deixou uma linha extra, como também é um bom padrão. Vamos lá. O que agora a gente faz? Eu vou limpar aqui o terminal só para a gente visualizar melhor. E eu quero executar esse código para ver o servidor escutando. Eu estou achando que você sabe de Node. Você está usando a palavra certa, que é executar. Ju, quando fazemos uma página só de front, a gente só abre no navegador para ele renderizar, ou seja, para ele entender os

códigos e exibir. E o Gui usou a palavra executar. Por quê? Porque queremos que o Node, que não tivemos nenhum trabalho para instalar, interprete o nosso código em JavaScript e execute aquilo como um programa. Agora, na minha fala, eu já deixei umas dicas. O que vamos usar para executar o servidor? O Node? Ah, é! Então, o que vamos escrever? Vou escrever Node. Espaço. O nome do arquivo que queremos executar. Uma coisa muito importante para você prestar atenção aí no seu projeto. No terminal do Gui, está mostrando o caminho onde o Gui criou a pasta dele.

Então, ele criou a pasta dele no desktop e chamou a pasta dele de "instalike back". Quando você estiver no terminal, se você abrir do jeito que fizemos, muito provavelmente, você vai estar na pasta certa. Porém, sempre confirma se é a pasta mesmo que você quer, porque senão os comandos não vão funcionar. Cliquei e arrastei para o VS Code para abrir aqui, daí ele já tem a referência do terminal certinho. Aí abre o terminal, a partir daí ele deve funcionar bonitinho. - Posso executar? - Pode. Vamos lá. 3, 2, 1 e... Servidor escutando. A gente digitou

esse montão de código aqui. Que montão, que nada! São seis linhas. Com seis linhas nasceu o nosso primeiro servidor. Eu estou feliz demais. Mas o que fizemos? Não faço ideia, cara. Eu não sei o que é um servidor. - O que é um servidor, cara? - Não sei. Eu vou perguntar para o meu assistente Gemini para que ele me fale o que é um servidor. Estou aprendendo, aprendendo programação. Isso que você está fazendo é ótimo, que é dar contexto para ele entender como é para te responder. E acabei de criar um servidor. Mas o que

é um servidor? Vou falar para ele usar palavras fáceis. Use palavras fáceis e me explique com apenas um parágrafo. Ótimo! "Enter". Vamos lá, Gemini. Por favor, me ajuda aqui. Eu acabei de criar, mas eu não faço ideia. O que é um servidor? Posso ler rapidão isso aqui? Muito rápido. Imagine supercomputador que fica ligado o tempo todo e serve de base para muitos outros computadores. Eu pensei na Google. Que é um computador. Ele armazena informações importantes como páginas da internet e disponibiliza para outros computadores quando eles solicitam. Aí! É nesse parágrafo que revela tudo para nós.

O servidor é um computador onde tem recursos que alguém quer acessar. Página, música, vídeo, foto, não importa. E quando ele se torna um servidor? Quando ele se torna capaz de responder solicitações. Então ele tem um monte de arquivo. A partir do momento que ele consegue ouvir alguém falando "Ei, servidor! Me dá esse arquivo." Ele se torna um servidor. Vamos voltar para aquele código, Gui, que vai dar para entender exatamente como o servidor está fazendo. Na linha que a Ju falou para a gente digitar a gente brincou do número mágico que é o 3000. O que

estamos falando? Estamos falando "Ei, app! Opa!" App é o nosso servidor do express. App.listen. Em inglês, listen significa ouvir. Então eu estou dizendo "Ei, servidor do express! Eu quero que você fique ouvindo." Mas eu quero que você ouça o quê? Está vendo que dentro dos parênteses a gente botou esse 3000? Isso tem um nome super chique. Isso é uma porta. Olha que belo o nome. Uma porta. O que é uma porta? Uma porta é que nem quando você entra num prédio quando você liga para reclamar que acabou a luz e aí fala assim "digite 3

para você reclamar que acabou a luz". "Digite 1 para a gente ir ali cancelar". Esses números são portinhas. Quando eu digito 3, para onde eu vou? Para o setor onde tem aquilo que eu busco. Quando eu estou dizendo 3000, o que eu estou dizendo? Eu estou falando assim, "servidor, eu quero que você fique atento porque a qualquer momento pela internet ou pela rede pode chegar alguém te pedindo algo. Mas olha, só vale se a pessoa chegar pela porta 3000." Tem um monte de portas, Gui. Um monte de portas. Não existe nem decorar portas. Isso não

é um conceito. É um monte de número inteiro. Nem precisa. Porque no caso do 3000, você não escolheu aleatório, né, Ju? No 3000, tem um porquê ali. Sim. Algumas ferramentas específicas, por exemplo, bancos de dados, o próprio navegador, serviços de autenticação e segurança utilizam portas de número fixo e específico. Ou entre porta X e Y. O 3000 é meio que uma porta que a gente usa no que a gente acabou de construir aqui. O que a gente chama de um servidor local. Porque o servidor, ele está na internet, ele é um computador. Todo servidor é

um computador. Até os que estão na nuvem também são computadores. Porém, construímos um no nosso computador. Por isso que chamamos ele de servidor local. Nós transformamos nosso computador em um servidor e usamos uma das portas que o nosso computador também tem, nessas milhares de portas, para abrir. Vamos deixar essa porta aberta para quem quiser comunicar com a gente, não pessoas, outros computadores. E a 3000 é uma porta meio padrão que a gente usa para desenvolver esse tipo de API e deixar ela aberta localmente. E o legal é a gente mandou o nosso servidor ouvir. A

partir do momento que ele ouvir nessa porta, o que a gente mandou ele fazer? Olha o que tem dentro da nossa função. "console.log servidor escutando". Nós dissemos assim, "ei, servidor, fica escutando nessa porta e a função que você vai fazer desde o primeiro momento é mostrar essa mensagem". Mas não é exatamente aí que queremos chegar ainda. Não, na verdade, a minha expectativa era algo assim. Eu queria ter um determinado endereço que aí o meu servidor vai lá e fala "Ah, o seu servidor está de pé, fez algo". E vamos chegar lá. Vamos chegar agora, inclusive.

Ah, vocês estão de brincadeira. Eu estou me sentindo ousado. Alguém segura essa criança? Estamos com uma galera incrível acompanhando com vocês dois aqui. A gente consegue. O que nós precisamos agora é de um caminho. Precisamos falar, olha, você chega no servidor por este caminho, que nós vamos chamar de rota, e vamos dizer também o que o servidor responde que é o que você está querendo, Gui. Você está querendo que apareça aquele JSON, aquele conteúdo todo? Isso é uma resposta. Então, nossa tarefa vai ser agora criar uma rota e definir a resposta que nós vamos dar.

Então, para eu criar uma rota, o que eu preciso fazer? Primeiro, chamar app, que é onde tudo começa. E agora vamos dar app.get, que é de, literalmente, pegar. Vamos pegar algum recurso do servidor. Get também é uma função. Essa função também tem dois parâmetros. O primeiro também é um texto, também é uma string, então pode abrir aspas duplas. Aqui, a gente define literalmente qual é a rota que o nosso computador cliente vai chegar para pegar o nosso dado, pegar a nossa resposta. Podemos colocar só uma barra, sem mais nada. Uma barra vazia. Isso significa que

poderia ser, como todo endereço na internet, poderia ser /gui, poderia ser /api, poderia ser outra coisa. Posso deixar /api? Parece que é mais chique. Pode deixar. Basicamente, estamos definindo aqui que quando... Ó, o servidor está escutando. Quando tiver uma conexão no nosso servidor, na porta 3000, nessa rota, já vamos ver como é que isso funciona. Vai acontecer algo. E agora vamos pôr a vírgula, que vamos para o segundo parâmetro. O segundo parâmetro também é uma função, mas essa função recebe dois outros parâmetros. Então, pode abrir parênteses. Beleza. Vamos ter dois parâmetros aqui. O primeiro é

req, R-E-Q, vírgula. O segundo é res. Requisição e resposta. A gente já vai falar sobre requisições e respostas. Vamos segurar a emoção. Arrow function. Então, saiu aí do parênteses. Vamos abrir o arrow function. Abre chaves. E, como o André falou, o que vamos responder? Vamos responder da seguinte forma. res, de resposta, que é o que está lá na nossa função, ponto status. É uma função também. Abre parênteses. Dentro desse status, vamos colocar um número mágico aqui, 200. Você está querendo 42. A gente uma hora vai fazer algo com 42 aqui. Tudo vai se explicar. Ponto.

Ah, depois do 200? Depois do 200. Ponto. send, de enviar. Send também é uma função. Abre e fecha parênteses. Então, dentro do send, de enviar, temos uma dica do que vai acontecer aqui. Vamos mandar uma resposta que tem status 200. A gente já vai falar dos status. E o que vamos enviar nessa resposta? Podemos enviar um texto. Por exemplo, "boas-vindas à imersão", "rota inicial". Eu gostei do boas-vindas. Boas-vindas à imersão. Um ponto e vírgula depois dos parênteses. Eu tenho uma pergunta. Eu vou precisar parar o meu servidor e executar o meu servidor de novo? Já

que eu fiz essas atualizações? Vamos resolver isso, mas, por enquanto, sim. Porque a partir do momento que o servidor iniciou, ele não enxerga mais mudanças no código. Como a gente faz isso? "Ctrl+C". Não importa o seu sistema operacional. Digita "Ctrl+C". A gente derruba o servidor, como a gente chama. Isso é comum. Derruba o servidor, sobe o servidor. O tempo inteiro. Então, é o seguinte. Antes de eu subir o servidor mais uma vez, não posso esquecer aqui, a crase. Opa, esse aí tinha me escapado. Vou aproveitar que você colocou a crase. Bota um ponto e vírgula

ali na linha 10 também para a gente indicar que a nossa arrow function também foi encerrada e que a nossa chamada ao get também foi. Nesse momento, galera, a gente acabou de passar por um dos conceitos mais importantes quando a gente fala de desenvolvimento de front e back-end. Que é essa ideia da requisição e da resposta. Me passa a sua água? Claro que eu passo a sua água. Isso daqui é o quê? Você fez uma requisição e eu te enviei uma resposta. Se eu quiser pegar algo de volta, eu também vou ter que fazer uma

requisição. Então, faz. Não, porque agora a água é minha e vamos pôr esse projeto para rodar. Vamos executar esse servidor Node aqui para ver. Novamente, a gente repete. Só quebrou com "Ctrl+C" e repete. node server.js Não mudou nada. Para a gente, visualmente, a impressão que tem é que está o mesmo. Mas pensa que a gente criou uma rota. E essa rota, onde que a gente normalmente coloca coisas que tem barra, coisas assim? No navegador, provavelmente. Vamos testar no navegador. E agora, Gui, qual é o endereço? Isso que mata. Quando a gente acessa um site, www.google.com.br,

tem um nome, um texto, associado a um endereço que fica lá na internet. É um monte de número. Mas agora queremos acessar o nosso próprio computador. E que endereço é esse? Tem dois nomes padrões que podemos utilizar. Na verdade, um nome e um número. Ou a gente utiliza localhost, que significa o meu host local, o meu servidor local, a minha própria máquina. Ou a gente usa um IP padrão. Aí a gente entraria muito mais na parte de redes. 127.0.0.1. Esquece esse IP. Vamos de localhost, galera. Temos que informar a porta, porque o nosso servidor local

tem... X portas pode ter. Pode estar em um número de portas que a gente não sabe. Então localhost:3000. Tudo junto, sem espaço. O mesmo 3000 que a gente colocou lá no código. Mas aí tem uma informação a mais. Quando a gente criou a nossa primeira rota, o que a gente disse? Que ela tem que ser /api. Então depois dos :3000, Se eu achar aqui... Achei o navegador. /api. Se a gente der "Enter" agora, o que será que acontece? Vamos lá. Estou na emoção aqui. É para fechar essa aula feliz. Caramba, eu criei um servidor que

responde 3, 2, 1. Está de brincadeira comigo, cara! Isso é muito incrível. E talvez alguém que esteja assistindo pare e fale... "Não é tão incrível assim." Mas eu quero dizer por que isso é incrível. Esse dado que está sendo exibido aqui, "Bem-vindos à imersão.", nós não digitamos em uma página HTML. Isso veio direto do nosso servidor e está sendo entregue para nós. "Tá bom, André. Mas o que isso significa?" Que daqui a pouco, nas próximas aulas, com novos poderes... Vamos conseguir ligar o nosso back, talvez a um banco de dados. Puxar esses dados de lá

e devolver bonitinho, sem a necessidade de ter que mexer com o HTML. Posso ter só um pequeno momento? Que eu vou fazer o seguinte. Eu vou clicar lá no Instabytes. Pode ser qualquer texto ali. Mas eu quero colocar esse texto. A torre Eiffel ilumina Paris. Vou voltar lá no meu código. Vou colocar esse texto. Porque eu quero que o meu projeto seja parecido com o projeto do mundo real. Vou dar um Alt+Z só para ele... Não está dando certo. Qual que ele está quebrando aqui, pessoal? Alt+Z. - Meu Deus, o que aconteceu? - Também não

sei. Deixa quieto. Vou dar um Word Wrap aqui. View, Word Wrap. Só para ele quebrar aqui a página. O que está acontecendo? Eu só alterei o texto para pegar um dos textos que temos real. Lá que a gente usa na nossa aplicação mesmo. Vou parar o servidor. "Ctrl+C", igual a Ju falou. Limpar aqui e executar mais uma vez. node server.js O Gui está sendo um recurso que usamos sempre, que é seta para cima, seta para baixo. Para ele ficar repetindo os últimos comandos e não precisar digitar tudo de novo. Em outras palavras, o que vai

acontecer? Quando essa aplicação front-end falar assim... "Eu preciso dos dados." Eles não estão estáticos lá no HTML. O dado, eu, como dev back-end, falei... "Olha, está aqui." E eu passei uma informação. Vamos pensar em uma estrutura melhor para conseguir mandar essas informações para o front-end. Criar todas as informações que precisamos ali na página. E estrutura é uma boa palavra. Porque o que vamos fazer agora é criar justamente um dado estruturado para ter o primeiro gostinho de mandar para o servidor algo parecido com o exemplo que vimos do AluraBooks. Boa, mas isso não vamos fazer hoje.

A nossa imersão hoje já foi para explodir a cabeça. Ficou simplesmente incrível. Pode ser, pessoal? Eu queria fazer uma coisa hoje que talvez anime o pessoal pelo que vem pela frente. Tem uma ferramenta muito legal que a gente já deve ter mencionado na aula de hoje. Que é o tal do Google Gemini. É uma IA generativa. E geralmente quando a gente usa o Google Gemini, a gente usa como você usou aqui. Abrindo a página, digitando o prompt e tendo ali uma interação. O que já resolve um montão de problemas. Mas o que é legal é

que a Google oferece o acesso ao Gemini através de uma API. Que eu garanto que vamos se aprofundar muito na aula que vem. Mas basicamente temos um jeito de integrar o Gemini à nossa solução. Mandando perguntas para ele lá pelo back-end. Então só para deixar esse temperinho e para você já garantir os próximos passos. Vamos gerar uma chave que dê acesso ao Gemini. Vamos guardar essa chave porque nas próximas aulas vamos usar ela. Vamos usar o Google Gemini dentro do nosso projeto? Vocês estão de brincadeira. Vamos lá, galera. Como eu faço isso? Para a galera

que está acompanhando a imersão, a gente já deixou um link pronto aqui, está na descrição. Está fácil de acessar. Você já está com o link aberto aí, Gui? Eu estou aqui com o meu link aberto do Gemini. O objetivo desse passo que vamos fazer é de fato integrar dentro da nossa aplicação Node, do servidor que estamos fazendo, a inteligência artificial do Google. Esse é o objetivo final. O que vamos fazer agora é só pegar um acesso. É uma permissão para que a gente consuma esses recursos. Então tem um botãozinho aí na sua tela escrito Get

API Key, pegar a sua chave de API. Clica nesse botão. Ele vai passar aqui uma série de informações relevantes para você, mas se você descer, está vendo que tem um botão Criar Chave de API? É isso que nós estamos buscando. Nós vamos registrar essa chave em nosso nome e o Google vai saber. Toda vez que o nosso projeto acessar o Gemini, somos nós acessando. Clique em OK aí. Perfeito. Seleciona qual o projeto que vamos estar vinculado. Exatamente. Eu vou colocar aqui o projeto Generative Language Client. Esse primeiro mesmo. E criar uma chave de API. Se

a pessoa provavelmente não tiver nenhum projeto, vai para Criar. É bem tranquilo. Aí ele falou aqui, olha, sua chave de segurança, não compartilhe esse código com ninguém. Quem tentar usar a minha chave aqui já não vai dar mais. Já não vai dar porque espero que você derrube ela quando a gente usar imediatamente. Você vai guardar essa chave em um lugar muito especial. Grava num arquivo, anota ela, porque senão quando nós formos fazer a integração vai faltar algo. Eu vou mandar lá no grupo da família. Ótimo. É bem seguro. Ambiente seguro. Ó, eu posso guardar ela

no meu projeto? Pode. Eu vou fazer o seguinte, eu vou criar um arquivo .txt, pode ser? Pode, depois a gente vê se essa abordagem funciona bem. Eu vou chamar... Qual nome eu posso dar para esse arquivo? chave-api.txt. E vou só dar um "Ctrl+V" daquela chave. Vamos fazer uma coisinha muito rapidinha para a galera? Vamos aproveitar esse momento que estamos criando o arquivo. Cria um arquivo a mais aí, por favor, Gui, aí na raiz do nosso projeto. Chama esse arquivo de .gitignore. Tudo junto. Ele tem que aparecer um simbolozinho de losango. E agora vamos colocar duas

informações nesse arquivo. Primeiro, vamos escrever node-modules, exatamente igual ao nome da pasta que o Node criou para a gente. E segundo, a gente cria chave-api.txt. São os tipos de arquivos que não queremos que o GitHub, na hora que a gente for subir esse projeto, mande. Você não quer espalhar sua chave de API por aí. Se você já tiver trabalhado com Git e quiser salvar o seu projeto, agora, fazendo isso, você pode subir o seu projeto, salvar ele para não perder. Que a chave de API, no caso do Gui, não vai ser mandada para a internet.

E o node-modules também não, porque o node-modules, consiste em arquivos instalados localmente no seu computador. Você não manda eles para o seu repositório. Porque toda vez que você instalar o seu programa no seu computador, ele vai puxar novamente isso. Essa pasta, ela realmente só existe dentro do seu projeto. Fizemos coisa para caramba hoje, mas também, repito, digitando muito pouco em tudo que fizemos. E essa que é a magia de estar usando as linguagens que estamos usando e de estar utilizando as ferramentas que estamos utilizando para facilitar o fluxo de criar aqui um back-end. E se

você chegou até aqui, você não pode esquecer que nós temos, além das aulas que são muito incríveis, uma comunidade no Discord com pessoas de diferentes níveis de programação. Pessoas que estão em transição de carreira, com bastante experiência, que vão nos ajudar a criar uma comunidade incrível durante esse período de imersão, que é praticamente, como o Paulo gosta de falar, um marco da tecnologia. Então, eu espero que você tenha gostado dessa aula. Lembrando que, para que você tenha acesso ao seu certificado, é necessário que você assista todas as aulas da imersão. Se você finalizou a aula

de hoje, um passo importantíssimo já foi dado. Eu espero que você tenha se divertido e aprendido bastante. Lembrando que amanhã tem mais. Amanhã tem mais. Eu já estou animadíssimo. Então, a gente se vê amanhã. Amanhã estamos junto. Falou! Tchau, tchau!