[Imersão Dev Back-End] Publicando na Google Cloud: Configuração de API e Integração com Gemini

Chegamos na quinta e última aula da Imersão Dev com Google Gemini. O pessoal aqui no estúdio... vocês não estão vendo, gente, mas o pessoal aqui no estúdio está feliz naquela empolgação. Caramba, o que eles vão fazer hoje? Será que o código vai funcionar? É bom que o código funcione, afinal estamos na quinta aula. É verdade. Hoje é só pra gente marcar aquele golaço, encerrar o nosso MVP de API e curtir o desenvolvimento que foi feito até agora, que foi muito legal. É verdade. Espero que você tenha se divertido e aprendido durante todo esse caminho, essa

jornada. Um ponto, antes da gente começar, é o seguinte. Pessoal, muito conteúdo foi passado aqui. Muitas coisas abstraímos de explicação para conseguir ter algo palpável. Falar assim: caramba, eu criei um servidor com Node que tem imagem e usa um cluster e faz lá com um banco de dados. Muitas coisas foram passadas. Está tudo bem se um ponto ou outro, uma dúvida ou outra, passou. Usem principalmente a comunidade, usem a chance de conversar com pessoas no Discord, a inteligência artificial do Google também, para te auxiliar no seu desenvolvimento. Imagina se tivesse isso na nossa época... Puxa,

eu teria passado muito menos noites em claro, Bravo com o meu código. Mas vamos falar de código. Temos um projeto aqui que está mandando a imagem, agora com os nomes certinhos, né Ju? Isso. Vamos relembrar onde a gente parou? Nós fizemos parte da lógica de colocar uma imagem na pasta de uploads. Criamos um novo post vazio mesmo, no Mongo, só pra ter um ID retornado. E usamos esse ID para nomear a nossa imagem e a nossa imagem não fica mais perdida na pasta de uploads porque ela está para sempre ligada a um ID lá no

banco. Agora temos que finalizar essa lógica. Mas se já temos um ID no banco, já temos um registro. Não podemos criar outro. Temos que atualizar esse mesmo registro. Então estamos indo para o terceiro verbo, que é o verbo "atualizar". Se estamos indo para outro verbo, vamos fazer outro método HTTP e começamos criando uma nova rota para isso. Vou lá no nosso arquivo postsRoutes.js. Vamos ter uma rota nova. Deixa eu só quebrar aqui a visualização do código. Aqui também já virou receita de bolo porque já sabemos o que tem que fazer. Você pode, se quiser, copiar.

Boa. Mas aqui é um método diferente? Sim. A gente chama esse método de PUT. Porque queremos atualizar. Queremos atualizar. Queremos colocar algo em um registro que já existe. Podemos manter a rota upload, mas agora temos que passar, da mesma forma que passamos um ID, pra dar um GET por ID, podemos fazer a mesma lógica aqui. Então "/upload/:id". Vírgula e alguém no controller. Exatamente. Caramba, vou atualizar meu LinkedIn para Node Developer. Você já está sabendo de tudo. E vamos aproveitar que estamos fazendo isso. Olha que lógica interessante. As nossas imagens estão na pasta upload. E só

quem está enxergando elas somos nós, porque temos o controle do servidor. Estamos vendo aqui pelos bastidores. Agora vamos acrescentar uma linha para tornar essa pasta pública. Ou seja, é como se qualquer pessoa que pela internet chegasse no nosso servidor, ela poderia ver a pasta com as nossas imagens. Para fazer isso, vamos usar só uma linha. Nós precisamos voltar ao nosso arquivo server, que é quem configura o nosso servidor. Antes mesmo de criar aqui essa... Antes mesmo disso, porque vamos precisar. Onde que eu faço isso? Aí no server, antes de routes, onde estamos executando a função,

vamos adicionar uma linha: app.use. A use é uma função, abre e fecha parênteses. Express.static, abre mais um parênteses, porque é outra função. E aqui a gente passa para o Express o nome da pasta que queremos abrir, digamos assim. E qual é a pasta que vamos usar? Existem algumas formas de fazer isso. Para simplificar, vamos fazer isso direto da pasta upload. Então a gente passa uploads, que é o nome da nossa pasta. Estamos dizendo para o Express: tudo que tiver dentro dessa pasta, Vamos abrir para ser acessado, para ser servido. Chamamos isso de "servir arquivos estáticos".

Vamos abrir essa pasta. E agora vamos ver como acessar ela. Upload está aberta, fechou a parte do server. Vamos voltar na nossa rota. Criar uma função. Podemos chamar de... na linha 34, onde a gente começou o PUT. A gente passou a rota. Passou o upload barra ID. Podemos chamar essa função de atualizarNovoPost. Porque a lógica é: fizemos um novo post, obtivemos o ID, atualizamos a imagem. Quem que vamos atualizar agora? Esse mesmo novo post que a gente acabou de fazer. Para colocar o novo nome da imagem nele, 'a descrição e tudo que a gente quiser.

Então, atualizarNovoPost pode ser um nome que funciona bem. Vou fazer no mesmo padrão das anteriores. Só vou encapsulando esses. Se você quiser copiar a função anterior, podemos atualizar a partir dela. Eu acho mais fácil do que ficar digitando tudo. É só pra gente agilizar um pouco. Você pode copiar aquela função postarNovoPost, por exemplo. Ela tem uma carinha bem parecida com o que vamos fazer agora. "Ctrl+C", "Ctrl+V", maravilha. Beleza. Agora essa função chama atualizarNovoPost. Ou "atualiza", mas vamos manter o padrão de "postar" e "listar". O que precisamos para atualizar um post? Precisamos primeiro saber qual é

o post que a gente atualiza. Então, o id do post. Segundo, precisamos do conteúdo que será atualizado. Lembrando que estamos no controlador, ou seja, essas informações vão chegar pra gente através da requisição. Vamos criar dentro da função na primeira linha duas informações. A primeira será o id desse post, que será rec.params.id. Lembrando que o id vai lá pela barra da url.params.id. Segundo, é a segunda variável que vamos criar embaixo. Vamos fazer o seguinte. Vamos deixar criada aqui a url que vamos usar nessa imagem. Vamos criar uma const urlImagem. Abre template strings pra criar uma string.

Aqui, o que vamos fazer? Da mesma forma que a gente usou os placeholders, lembra de gatinho? Vamos criar uma url muito parecida, mas com o nosso localhost. Então, aqui será http://localhost:3000/. Depois, vamos abrir cifrão e o sinal de dólar. Dentro das chaves o id. Fora das chaves, termina com .png. Ou seja, quando a gente atualizar tudo lá no banco, já vai vir o endereço da imagem certinho. E o mais bonito é, com aquela mudança que fizemos no nosso servidor, de expor a nossa pasta uploads, agora conseguimos gerar esse tipo de link, onde quando tiver ali

uma imagem na pasta uploads, a pessoa vai conseguir acessar pelo navegador. Daqui a pouco vamos testar, vai ficar super legal isso. Então, já tem a URL da imagem montada, já temos o id. O que falta é o post atualizado. Vamos fazer o seguinte, embaixo dessa URL da imagem, Vamos criar um objeto desse post atualizado. Cria uma nova variável. Pode chamar de postAtualizado. -Posso chamar só de post? -Pode. Abre um objeto, porque agora vamos passar isso tudo para o banco. Vamos juntar a URL da imagem. Então, o que tem lá no Mongo? Temos a primeira propriedade,

imgUrl. Dois pontos. urlImagem, vírgula. A segunda propriedade que está no Mongo, descrição. A descrição agora vem lá do nosso put, porque vamos mandar essa informação, Lá da requisição. Então, é req.body.descricao. Por último, vírgula. Alt, que é a terceira propriedade. alt: req.body.alt Porque também vamos receber isso do nosso put. O que estamos fazendo aí? Estamos montando um objeto que representa o nosso post, com todos os dados que vieram na requisição. Tudo que vier no Postman, na hora que a gente for testar, ou tudo que viesse do front, num eventual formulário, estaria aí preenchendo esse objeto, para

podermos colocá-lo no banco. Excelente. Agora, dentro do try, não queremos mais criar um post, porque queremos atualizar um post que já existe, com o ID que a gente passou. Então, na linha 49, onde está postCriado, não será mais esse método criarPost, que ele está lá no model. Mas a gente ainda não tem, lá no model, um método de atualizar post, porque a gente ainda não fez isso. Vamos fazer o seguinte, só para completar essa parte, vou atualizar post, novo post, Vai lá na rota. Vou falar assim, eu também vou precisar de você, aqui, além do

upload de imagem, vírgula, atualizar novo post. Isso, importou. Importei e falei, sempre que tiver um put para upload barra ID, será o atualizar novo post. Beleza, fechou rotas aqui, não quero ver mais isso. Vamos abrir agora o postsModel. Vamos precisar de uma função capaz de atualizar um post. Exato. Nem abrir, nem achar, é atualizar. De novo, se você quiser ir pelo caminho da facilidade, Pode copiar e colar. Sabe aqueles desenhos, que fica um anjinho e um demônio, Isso é um sinal bom ou ruim? Depende, quando você copia e cola um trecho de código, que você

não sabe o que faz, não sabe porque está copiando e colando, e vai fazendo sem saber. Provavelmente é o demônio. É, não é legal, isso vai te dar um problema no trabalho. O anjinho é quando você fala, puxa, eu sei exatamente o que eu quero alterar nesse bloco, eu só preciso da estrutura dele. Exato. No lugar de criar, então seria... Atualizar. Atualizar. Cuidado que ele autocompletou com alguma outra coisa. É, ele completou com um novo post lá do controller. Vou colocar atualizarPost. Agora eu vou fazer o oposto, eu vou lá no controller e vou falar

assim, sempre que a gente já tiver o objeto, eu quero atualizar o post. E vou passar aqui no lugar do novo post, esse post que temos. Então, mas aí não é só post, porque temos que passar qual que é o post que será atualizado. Então antes de post tem que passar id, que foi a variável que criamos na linha 41. São dois argumentos. Sempre que atualiza temos que dizer onde vai atualizar. Qual registro. Vamos fazer o nosso atualizar post. Que vai receber o id. E o novo post. Certo. Está fazendo a conexão. Agora, mas na

linha 24, onde está insertOne, é mais insertOne. Agora queremos updateOne. Que chique, hein? Pensa, galera. Queremos atualizar um post específico que fizemos. Temos até o id dele. O que esse método, updateOne, vai pedir para nós, É justamente que a gente indique qual é o id que estamos querendo atualizar e com quais dados. Mas para passar isso, vamos ter que passar de um jeito bem específico que está lá na documentação. Por sorte, a Ju e eu já lemos e vamos contar para você como fazer. A primeira coisa será guardar o id do objeto. Então, antes da

linha 22... Vamos lá na linha 22 e antes dela vamos criar uma const aí. objectId. Object pode ser minúsculo e o "I" do Id pode ser maiúsculo. Pode ser só objId. Pode, igual. Agora, vamos fazer um caminho e os nomes tem que estar igual ao que eu vou falar. Então, você vai escrever "ObjectId.CreatFromHexString". Seguindo o camelCase. Agora, entre parênteses, você vai passar id que você recebeu ali em cima como argumento. Por que vamos fazer isso? Vamos criar isso para guardar nesse objeto especial que o Mongo obriga a gente a usar qual é o id do

post que estamos querendo atualizar. Sei que ficou um passo meio feio, uma linha com muito código, mas o que estamos querendo fazer é isso, pegar id que a gente recebeu e colocar num objeto que o Mongo entenda. Agora, já temos mais ou menos o que precisamos para completar o UpdateOne. Qual é o primeiro argumento que ele pede para nós? O primeiro argumento que ele pede é um objeto. Então, você já pode passar ele aí com chaves. O que vamos passar dentro dele? Underline id. Lembrando que é a forma como o id é identificado lá no

banco do Mongo. Exato. É aquele id que ele que cria sozinho. O problema é que o Mongo cria esse objetinho meio específico. Por isso precisamos dessa linha. Estamos escrevendo ele aí para o Mongo saber quem queremos atualizar. Vamos colocar dois pontos, newObjectId. E o que vamos passar nos parênteses agora? será o objId, que foi o objeto que nós criamos. O que isso está fazendo então? Informando ao Mongo que é esse post que queremos atualizar. O post que tem esse id que eu guardei aqui dentro. Depois das chaves, dá uma vírgula. Agora, vamos passar para o

Mongo um conjunto de dados que vão ser atualizados nesse post. Então, você vai escrever com um sinal de dólar. Um cifrão. Dentro de chaves também. Vamos criar um novo objeto. O primeiro parâmetro é um objeto que tem só essa propriedade id e o valor de new ObjectId. E a segunda propriedade é outro objeto. O que vai estar nesse objeto? Isso, mas dentro desse objeto... Você vai tirar essas chaves de dentro do objeto, essas duas que você criou, essas amarelas. É que esse cifrão é outra coisa. Não vamos criar um template string. Vamos escrever "set". É

uma palavra reservada para dizer que estamos mandando um conjunto de dados para atualizar naquele post. Set de setar, de definir. Lá do Java. Exato, dois pontos. Agora, vamos passar os dados atualizados, que é um novo post. É aquele argumento que você tem lá em cima. Um novo post. Beleza. Deve estar tudo certo. Vamos testar? Acho que conseguimos testar. Já fizemos a rota, fizemos o controlador e fizemos o model. Beleza. Como vamos testar isso? Vamos subir o nosso servidor. Temos dois processos para fazer. Primeiro temos que fazer o upload da imagem. Vamos lá no Postman. Vamos

na nossa rota de upload. Já estamos nessa rota Post, upload. Isso. Eu vou subir agora outra imagem, que é a de Veneza. Ok. Beleza, pode fazer o post. Nesse momento, ele vai devolver esse insertedId. Vamos copiar esse insertedId. Copiar com o "Ctrl+C" mesmo. E vamos abrir lá na... Aí em cima no Postman tem um ícone de mais pra criar uma nova aba. Vamos abrir uma nova aba para criar o nosso put. Porque precisamos desse ID. Vamos criar um put. Que é a ação para atualizar. Isso. Aí será o localhost 3000/upload, barra o ID que copiamos.

Porque definimos que nessa rota, quando passamos o localhost 3000/upload e coloca um ID, se a gente estiver utilizando o método put, ele vai disparar essa sequência de eventos que acabamos de fazer. Exato. E agora o nosso body. O que temos que mandar no body? Não precisamos mais mandar a imagem, porque a imagem já temos. Não precisa do id, porque id também já tem. Só precisa da descrição e do alt. Agora vamos mandar um body lá no role. Onde está text vamos selecionar o json. Vai ficar mais fácil para ler. Isso. Agora a gente coloca descrição.

Sem esquecer que o json precisa ser tudo entre aspas duplas. Descrição. Se eu escrever algo de errado, vocês me ajudem, pessoal. Pode colocar uma descrição. Depois vamos ver se dá para melhorar essa descrição. Por enquanto ela está ótima. Vírgula. Vírgula, que é o nosso objeto. E depois? E depois, alt. Mesma coisa. Vamos passar uma string. Qual que é o alt? Foto em preto e branco de Veneza. Vamos torcer agora para dar tudo certo. 3, 2, 1. Falha na requisição. Mas não vamos nos estressar. Vamos lá no servidor. Informou que atualizarPost not defined. Beleza, a gente

errou alguma exportação. Esqueceu de importar, talvez, o atualizarPost lá no controller. Exatamente. Esse aqui, atualizarPost não vem lá do método. Aqui que vamos precisar dizer que queremos usar o atualizarPost. Isso. Confere se lá dentro do model é atualizarPost também. Tá dando um promise import. Vai lá no model mesmo, vê se o nome do método é atualizar post, se ele está sendo exportado. É esse mesmo. -Tá certo agora? -Agora acho que está certo. Legal, vou parar aqui o servidor. Vamos subir mais uma vez. npm run dev. Maravilha, está conectando. Vamos lá no postman. 3, 2, 1.

Maravilha. Ele dá um resultado bem diferente. Ele diz quantos registros foram atualizados, porque não precisamos atualizar só um. Porque a gente passou id. Mas se a gente passasse outro parâmetro, por exemplo, nome, ele poderia atualizar vários. Por isso ele diz, foi atualizado um só. -Eu posso visualizar? -Pode. Vamos fazer então um método get lá para posts. Só pra visualizar esse dado que acabamos de atualizar. Você pode inclusive fechar essa janela do body, porque não precisamos dela por enquanto. Eu quero ver o último. Apareceu aqui. Beleza. Gui, vamos fazer um teste. Clica nesse link. Vamos ver

se ele mostra a imagem como ele deveria. Olha que legal. A imagem deu certo. O projeto já está incrível. Está funcionando. Tem um monte de coisa legal. Mas sabe essa dúvida que a gente ficou agora, Gui? Que descrição que eu dou para minha imagem? Dá pra usar o Gemini pra gerar a descrição dessa imagem pelo nosso código mesmo. Por dentro do software que a gente escreveu, sem precisar abrir a página do Gemini para escrever. Como que a gente faz isso? Bom, a gente faz isso do melhor jeito do mundo, que é usando um código que

já está pronto. Eu fui lá na documentação do Google Gemini para entender como utilizar ele para essa forma. E já vamos deixar esse código pronto para você. E só vamos implementar ele aqui. Ele se chama "serviço Gemini". É literalmente o que estamos criando. Estamos criando um serviço que vai se integrar à nossa API. Então já copiou e colou o código... Agora vamos colocar isso de uma forma organizada na API. Indo no source code, lá no src, criando uma nova pasta. Essa pasta vai se chamar services. Services porque estamos passando outro serviço para integrar com a

nossa API. Beleza. E aqui dentro a gente abre um arquivo que pode se chamar geminiService.js. Vamos colar o código aí pra gente ver o que acontece. Posso pedir para o Gemini comentar esse código? Pode. Mas vamos fazer o seguinte. Como ele vai acrescentar bastante linha, na linha 3 já tem um código que a gente reconhece, que usamos antes, que é o process.env. Aquela chave que a gente pegou lá na primeira aula. Vamos usar ela agora. Vamos tirar ela do txt, porque é meio difícil acessar de lá. Então é esse aqui que a gente ia mandar

no grupo da família. Exato. Não vamos mandar. A sua chave está ali na primeira linha. Essa aqui é a chave. Esse aqui é o que eu preciso. Vamos abrir o arquivo .env. E vamos criar uma nova variável. Como o código que a gente já deixou preparado já tinha um nome de variável lá, que eu não me lembro qual é. É o Gemini em maiúsculo. Não tenho coragem de digitar, com medo de dar errado. Vou copiar. Isso. GEMINI_API_KEY Beleza. Agora já associamos a chave da API ao nosso projeto. E a partir daí, o que eu e

o André já estávamos conversando? A gente foi na documentação do Gemini e pegou a receita de bolo. Então, quando a gente usa bibliotecas, muitas vezes a lógica está implícita ali. Eles só falam, usa isso aqui que dá certo. E a gente usa, porque a biblioteca já está testada, o método já está testado. Inclusive, sabe o que podemos fazer? Vai ali na linha 8. A linha 8 tem o nosso prompt, que é o que vamos pedir para o Gemini fazer para nós. Ao invés de pedir um texto alternativo, como estava no prompt original, vamos pedir a

descrição. Gere uma descrição em português do Brasil para a seguinte imagem. Então, a única linha, na verdade, que a gente colocou foi esse string. Porque se você for analisar o código, todo o resto é código de funções e métodos do Google. Então, não tem nada aqui que seja nosso. Que legal. É mais simples do que parece. Muito mais simples. Não vamos precisar mais mandar uma descrição quando estiver criando um post, atualizando um post. Vamos poder simplesmente chamar essa função que acabamos de criar passando a imagem para ela. E onde que a gente faz isso? Esse

arquivo chave-api.txt, eu posso deletar ele? Sim, porque já usamos tudo o que tem nele. Você não só pode, como deve. Por mais que ele não esteja commitado, você deve. Bom, onde que estamos passando atualmente esse texto? Lá no atualizarPost. A gente volta lá no controlador, no atualizar post. No modelo aqui, no controller post. Vamos ter que importar aquela função do Gemini aqui para dentro. Como faz isso? Vamos lá no Gemini Service, só confere o nome da função. Ela já está até exportada na linha 6. Gerar descrição com Gemini. Agora vamos no controller. E ela espera

a imagem. Vamos importar. From "../services". Beleza. Já está importado. Vamos só voltar lá no nosso atualizarPost para criar o buffer da imagem. Como vamos fazer isso? Logo nas primeiras linhas, dentro aí da nossa função, você vai criar uma const, que podemos chamar de... Na verdade, vamos colocar isso dentro do try. Acho que fica melhor. Então, dentro do try, vamos criar uma const chamada imageBuffer. Igual. Lembra do fs que a gente usou antes? Vamos usar ele de novo. ReadFileSync. Isso. E entre parênteses, você vai criar agora uma string para poder montar o caminho da imagem de

novo. Template string? Template string. Então, qual é a nossa pasta? A nossa pasta é uploads. Aí, nesse código do atualizar, onde que a gente pega o id do post que é igual ao id da imagem? Já está lá em cima. Já está no id. Então, você só passa ele, .png. Mas aí você tem que passar entre cifrão e chave, porque é uma variável. Beleza. Confere se o file system está importado lá no começo, lá no topo do arquivo. O fs está importado. Beleza. Precisamos girar agora. A gente já criou um buffer dessa imagem. E agora,

o que a gente faz com o buffer dessa imagem? Cria uma função e guarda numa variável a descrição. Vamos criar uma variável descrição. Mas essa variável, tudo isso vai precisar acontecer antes de montarmos o nosso post. Podemos trazer o const post para dentro do try. Aquele que está na linha 44. Senão, não vamos ter como passar essa descrição para o nosso post. Então eu vou colocar isso aqui dentro do try. Isso. Isso aí pode ser depois dos consts, Gui. Ah, ótimo. Vou voltar aqui. Depois desses dois. Ou depois do post criado? Pode ser depois do

post criado, que aí vamos ficar com tudo completo. Beleza. Na verdade, tem que ser antes. Eu falei uma bobagem aqui. Vamos lá. Criamos o buffer da imagem, criamos a descrição. e agora a gente usa isso para montar o nosso post. Vamos atualizar um pouco esse objeto. Na linha 46, você só está passando gerar a descrição com Gemini. Dentro dos parênteses, faltou passar a imagem. Então, imgBuffer. Como vamos usar várias bibliotecas que vão bater no Gemini e voltar, precisa ser await. E aqui, no caso, eu não vou usar o request var e a descrição. Isso. Lá

na descrição, a gente... Eu posso colocar a descrição só? Que é o nome da nossa variável que criamos ali em cima. Que aqui será a descrição que não sou eu que estou fazendo. Agora é o Gemini que está fazendo. Mas para o Gemini fazer isso, vamos na linha 46 e dá um await ali no gerar a descrição. Porque não sabemos quanto tempo isso vai levar. Exato. Atualizamos a descrição. Na URL da imagem já estava tudo pronto. É só isso, eu acho. Podemos testar, fazer a atualização de um post agora. Pode ser esse que já temos

o ID, para ver como que ele gera. Vamos subir o servidor. Quebra o servidor e sobe de novo. Vamos só subir antes de testar. Ah, nós não instalamos a dependência do Gemini. Então quer dizer que conseguimos pegar as chaves, a autenticação com o Gemini, mas existe um módulo que vai fazer isso. Vamos instalar ele. Vamos. npm i @google/generative-ai. Isso. Ele vai instalar essa dependência. Isso também está na documentação do próprio Google Gemini. Posso visualizar? Pode. Eu gosto disso só para ter certeza. Então temos o Google Generative AI, Express Mongo e o Multer. Beleza. Sobe o

servidor. Vamos subir o nosso servidor agora. Certo, subiu. Vamos ver se não dá erro. Vamos lá no Postman. E no Postman agora podemos tentar atualizar essa mesma imagem. Você ainda tem a barrinha do put? Tenho. A gente acabou fazendo um get na mesma... Mas não tem problema. Troca esse get pelo put. O importante é que ainda temos o post para pegar o id de lá do post. Tem. Eu deixei aqui. É só pegar o id. Vou copiar. E a gente volta lá onde queremos fazer o put. Upload. Upload barra aquele id. Exatamente. Mas agora no

corpo da requisição que temos que mandar ali nos parâmetros, agora no body é só alt text. Então, onde estamos no body, vamos atualizar o corpo da requisição. Pode deixar o resultado aí, não tem problema. Tira a descrição e deixa só o alt. Aí vai fazer a descrição. Agora você pode dar um send para a gente ver o que acontece. Vamos ver. 3, 2, 1. Ele demora um pouco, parece. Ele demora, mas se você subir aí ele já deu status 200 para a gente. É o que a gente queria. Retornou que deu ok. Será que deu

mesmo? Vamos dar um get. Dá um get aí nessa janela mesmo. Vamos lá. Get de post aqui. Vamos ver. Aqui temos a primeira imagem que era aquelas de teste. Olha aí que legal. Uma descrição bem melhor. A imagem mostra um canal em Veneza, na Itália e assim por diante. De onde que veio a descrição? Do Gemini. Conseguimos conectar o nosso serviço a um serviço externo. Espera. Eu quero testar em mais um. Pode testar. Pode fazer o que você quiser. Agora vocês transformaram o Guilherme em um personagem muito maluco. Calma, Gui. Vamos fazer o do gato

panqueca. Quero ver se o Gemini consegue. Antes de fazer o gato panqueca, Gui, uma coisa que eu acho muito legal que podemos mostrar para galera é... Nós fizemos o trabalho do back-end aqui. Nosso trabalho está feito, está entregue. E a galera do front? Eu e a Ju somos de front. A gente também não vai mexer com front. Eu vou mostrar agora para galera juntos. Vamos mostrar que dá para subir um front que consuma tudo isso. E o melhor, como não é serviço nosso, como é serviço da galera de front, isso já está pronto. Vamos mostrar

para eles como fica. Vamos. Depois a gente fala de gato panqueca. O que eu preciso fazer de configuração para que o meu back-end funcione no meu front-end. Vocês já deixaram um projeto. Eu já fiz o download. Ele vai ficar disponível para os estudantes. É o insta-like-main. Esse aqui é o projeto do front que vai consumir o nosso back-end. As pessoas vão receber o link para baixar o zip, só baixar e extrair. Beleza. Lembra que mostramos na primeira aula, no Alura Books, um link? E o link trazia um JSON? É exatamente esse o nosso trabalho. E

estamos fazendo isso. É justamente o localhost:3000/posts. Podemos dizer que o nosso trabalho está pronto, Mas temos que entregar isso para o front. Vamos lá no front e dizemos "front, usa essa URL, coloca essa URL no projeto de vocês e o resto é com vocês. Mas já simulamos esse trampo do front". Mas, antes disso, é um detalhe muito importante. O navegador tem um sistema de segurança próprio que todos os navegadores têm, que impede, por exemplo, o seu produto se chama meuproduto.com. O navegador, por padrão, impede qualquer conexão de outro endereço que não seja meuproduto.com. Isso todos

os navegadores fazem. O que nós, que estamos no back, temos que deixar pronto? Um aviso dizendo: "olha, back, você vai receber requisições de outro endereço, que não é o nosso, não é o localhost:3000". E é isso que vamos fazer agora. - Uma medida de segurança, Ju? - É uma medida de segurança. Isso se chama "cors", vamos deixar material extra para você entender bem como cors funciona e o que significa. Porque agora, eu esqueci. É algo de cross-origin, de origem cruzada, que é literalmente o que está acontecendo. Compartilhamento de origem cruzada. Olha esse cara! Beleza. Vamos

lá. Vamos ter que instalar. Vamos abrir o terminal para instalar uma biblioteca extra. Ainda aqui no back-end. - Ainda no back. - Pode quebrar. Vamos instalar. Chama install, ou "i cors". Exatamente isso. C-O-R-S. Pode instalar. Instalou. Nossa, eu já estou imaginando aquele 400 mil linhas de código. Beleza. Eu falei que era no server, mas na verdade não é, porque quem está manejando isso são as rotas. Vamos lá no nosso arquivo de rotas. Lá em source, routes. Vamos lá. Instalamos o cors. Agora, vamos importar lá no topo do arquivo, junto com o express, junto com o

multer. Importamos o cors, import cors from "cors". Sem novidade. Pode ser logo depois, vamos criar um objeto de opções para o cors. Então, const. - Aqui em cima mesmo? - Pode ser. const cors Pode ser corsOptions, corsOptions é meio padrão. E igual. Vai ser um objeto. E aqui passamos o link que queremos se conectar. Origin é o nome da primeira propriedade. Dois pontos. Vamos passar um string. Já perguntamos para o front, Front, quem precisa acessar? No nosso caso, será "http://". Um outro localhost, onde o front está trabalhando, que é localhost:8000. Isso, o front já deixou

configurado para nós. Localhost:8000 ":8000" Vamos passar só outra opção. Então, vírgula, outra propriedade. Options. É com "O" minúsculo só, porque o autocompletar fica mandando coisa. "optionsSuccess". Tudo junto? É, isso. Success, uma letra com dois C's e dois S's. E mais um S, "Status". S maiúsculo. - Vocês estão de brincadeira. - Não somos nós que criamos os nomes. 200. Que é o número que já conhecemos, que é o nosso status code 200. Uma última coisa lá dentro do routes, do objeto, onde que criamos lá embaixo a nossa função. Isso, routes app. Podemos criar na linha 30,

embaixo do app.use(express.json), ou vamos criar mais um mirror, app.use. cors A nossa função passando como parâmetro. corsOptions Cors, que foi o nome desse objeto que você acabou de criar. Mas acho melhor trocar o nome para ele não ficar confuso. Então, coloca com o corsOptions mesmo. Isso, e lá embaixo também. Isso, corsOptions. Isso deve resolver, porque agora avisamos o back-end que vão chegar a requisições de 8000. Como sabemos que é 8000? Porque o front nos passou. E cadê esse front? Vamos lá. Então, eu abro outro VS Code. Melhor abrir. Aqui, o new window. New Window, vai

abrir uma janelinha extra. Vou minimizar essa daqui do back, e vou usar aqui insta-like, que é o projeto do front. Agora estamos fazendo o papel do front. Só vamos dar uns… Isso, beleza. O front também precisa instalar esse projeto. Já sabemos instalar um projeto. Abrimos o terminal e damos npm install. Está vendo que tem um package.json? Npm i. Opa! Onde que você está e onde que você tinha que estar? - Olha aí! - Eu já tava aqui, socorro! O que que aconteceu? Está tranquilo. Então, vai lá, npm i. Npm i. Mesma coisa. Ele deu uns

avisos de biblioteca interna. Ele está instalando. Porque o front também trabalha no mesmo esquema que nós. Eles também têm um package.json. As bibliotecas que eles instalam. Tudo igual. Por isso, vamos entregar o projeto pronto para você conseguir testar aí com o back que você fez, Só instalando o projeto na sua máquina. Beleza. Se tiver um pouco demorado para instalar, voltamos daqui a pouco. Beleza! O que falamos que, quando pegamos um projeto pela primeira vez, onde vamos? No package.json para entender melhor o projeto. E dentro do package.json, descobrirmos como sobe o projeto lá na parte de

scripts. Vamos descer um pouco. Deve ter um script aí para subir esse projeto. Aí. Um script da mesma forma que temos o nosso run dev. O front também tem o run dev deles. E eles criaram uma forma também com o dev. Ambos. Tanto front-end quanto back-end em ambiente de desenvolvimento. Porque eles também estão trabalhando no desenvolvimento deles. Então é o npm run dev. Agora só confirma que você está na pasta certa. É, está no insta-like. Está subindo. Subiu no localhost:8000. Vamos lá. Vou colocar aqui. Localhost. Não é mais 3000. 3000 é a porta do back-end.

Estamos agora ":8000". 3, 2, 1. Não tem nada. Sabe por que não tem nada? Porque esquecemos de passar a URL para o front. Ah! Vamos voltar no código que falta um detalhe. É um detalhe de nada, mas um detalhe importante. Como fazemos isso? De uma forma que criamos uma variável de ambiente para guardar as nossas, também vamos criar uma variável de ambiente aí. Cria um novo arquivo aí na raiz. ".env". E agora, qual é o nome dessa variável? No caso, pedimos para o front essa informação. Essa variável chama API_URL. E você, quando subir o projeto,

tem que usar o nome dessa variável. Se não, não vai dar certo. Exato. E qual é a nossa URL onde servimos o nosso JSON? - Localhost:3000. - /post. Vamos lá. Só uma dúvida. Isso é uma string aqui? É uma string. Mas normalmente não precisa das aspas. "http://", se não, não vai. "http://localhost"… ":3000/posts". Beleza. Salva. Salvei. Se você quiser quebrar e subir de novo. Isso é importante porque variável de ambiente, normalmente, o recarregador não vai enxergar essas mudanças. - Ele não puxa sozinho. - Beleza. - Vamos testar? - Vamos testar. Testando e não vemos nada ainda.

Eu acho que você fechou… Dê uma olhada se o servidor está de pé. - Ai, ai, ai! Não acredito. - Você fechou. Não acredito. O Insta Like está com… Falamos Insta Bytes, mas Insta Like aqui. Não tem problema. - Roda esse servidor. - É isso aí. Porque eu confio no trabalho de back-end que eu fiz aqui com a Ju, com você. Vai dar certo. O importante é o back-end funcionar. Agora nosso back-end está de pé. Recarrega, Gui. - Olha! - Olha que sucesso. E aqui tem um detalhe interessante, porque o pessoal pode olhar e falar:

"Deu errado". Deu super certo. Temos 3 imagens de gatinhos, de 3 testes que fizemos passando o Placeholder. Temos duas imagens sem imagem nenhuma. Que é Gui e Ju, que ainda não tínhamos redirecionado para pasta. E temos o Veneza, que é a minha imagem. E fizemos o fluxo completo. E está aí bonitinha com a nossa descrição. - Tudo funcionando. - Ju, incrível. - Vocês são incríveis. - Foi um prazer. Foi um enorme prazer desenvolver esse projeto back-end com vocês. Mas calma, que ainda não acabou. Chegou a hora de colocar esse projeto que estamos executando local no

cloud da Google. E para isso eu chamei o Luciano. Tudo bem, Luciano? E aí, Gui? Bom? Beleza, galera? Eu sou o Luciano Martins. Sou Developer Advocate AI no Google. E estou felizaço de estar aqui com vocês nesse finalzinho de jornada da imersão back-end. Para fazermos o que agora, Gui? Colocar esse projeto no ar para ter a nossa API pública. Boa. Então, beleza. O que eu preciso alterar no meu código, na minha aplicação, para preparar para mandar essa aplicação para o Google? Boa. Eu acho que a primeira mudança que temos para fazer, Gui, possivelmente podemos ter

diferenças de versões de Node entre a máquina local e a infraestrutura que vamos usar na cloud. Importante. Legal. E se lembrarmos, lá dentro do Source, Roots, postsModel, estamos usando as variáveis de ambiente ara lidar com a conexão com o Mongo Atlas e com a API aqui do Gemini. Aí no Models, postsModels, lá começo, tipo a linha 4, que conecta com o Mongo funcionar, precisamos garantir que o serviço da cloud vai conseguir acessar essa variável de ambiente. Para isso, provavelmente, vamos instalar um módulo, um pacote. Para conseguirmos garantir que a aplicação vai funcionar tanto no local

quanto na cloud, vamos precisar passar a utilizar um módulo, uma biblioteca de Node chamada dotenv. - Eu posso instalá-la aqui? - Isso. Podemos até pesquisar por ela, essa aqui, pessoal, npm dotenv, que era outra forma que conseguíamos pegar essas variáveis de ambiente. Vou colocar aqui o npm install dotenv no terminal do nosso projeto, eu vou executar esse comando. Opa, executei errado ali no comentário. Aqui, sim, npm install dotenv. - Boa. - Dou um "Enter". Podemos verificar se no package.json já está certo. Aqui, package.json, e podemos ver que é uma dependência agora do projeto, dotenv. Perfeito.

Daí, ainda relacionado com dotenv, já instalamos o módulo, mas precisamos garantir que ele será usado. Então, dentro do arquivo JavaScript, em src, models, vamos abrir o que você já abriu aí, o postsModel, E na primeira linha lá, antes do import ObjectId vamos dar um import, entre aspas simples, 'dotenv/config'. Só isso? Aí, dê ";" no final da linha. Beleza, a parte do dotenv fechou. Legal. Tem mais alguma outra ação importante que precisamos fazer aqui? Tem, cara. Também para garantir que não vamos ter problema de manipulação de informação, porque o que estamos fazendo no local é super

simples. Estamos escrevendo o código, estamos subindo uma API de teste local e acessando via browser. Quando formos fazer a implantação, Que já é um processo mais ou menos parecido com o de DevOps, que é um processo de CICD, algo mais avançado, o serviço da cloud vai fazer para nós várias etapas. Vai copiar o código, vai criar uma imagem de container, vai salvar o container em uma biblioteca de containers e por aí vai. Essas variáveis vão ficar sendo passadas de serviço para serviço. Para a gente não ter problema nessa movimentação, vamos lá no nosso arquivo .env,

- Arquivo .env. - Isso. E vamos colocar o valor das variáveis entre aspas duplas. Só para garantir que todas as etapas do processo vão entender que isso tudo é uma informação só. É só um cuidado adicional, entendeu? Então passei aqui os dois. Eu acho, Luciano, que você tinha me passado um script, mas eu não lembro o que ele fazia. Esse do services.sh. Boa. Isso é importante pelo seguinte: Aqui estamos praticando como fazer a implantação de um serviço na cloud. Não necessariamente estamos em uma etapa de, com detalhe, entender quais são os serviços disponíveis, como que

eu faço a gestão manual deles. Então para acelerar o nosso processo, Como é algo que não vai fazer diferença para o processo de deploy, eu criei esse script para automatizar para nós a parte de subir os serviços que vamos usar, para não gastarmos muito tempo nisso. Vou copiar esse link desses códigos. Ele vai estar aqui na descrição dessa aula também. E vou criar services, no plural, .sh. E, dentro dele, vou colar aqueles três serviços que provavelmente são referentes ao cloud. Para preparar esse nosso ambiente lá na nuvem. Mais algum passo aqui? Eu acho que aqui

fechou. Vou fazer o seguinte: Através do git, vou colocar isso num repositório. Se você nunca mexeu com o git, vamos deixar um conteúdo extra para você dar os seus primeiros passos e como que você pode pegar o seu código que está local aqui e mandar lá para o git. Vou adicionar aqui, eu já inicializei o meu git. Vou adicionar essas alterações. Vou colocar git commit -m 'deploy do projeto'. Projeto. Dar um "Enter". - Escrevi errado? - Ficou um "proejeto". Está tudo bem. Então, git push origin. Se você está trabalhando na main principal, na branch principal,

você vai escrever main, vai pressionar um "Enter" e ele vai mandar lá para o GitHub. É importante que você veja a aula do GitHub. Se você nunca viu esse processo de deploy, primeiro assiste para você entender como que funcionam essas etapas. Depois vai lá para a aula do git também para você conseguir realizar. Então, git push origin. Na sua casa, você vai escrever main. Eu vou escrever aula_5. Só eu, estou escrevendo aula_5, mas você escreve main. Beleza, parece que deu tudo certo. Então, temos o código do git do nosso projeto. Deixa eu até acessá-lo para

visualizarmos. Eu vou copiar esse link porque vamos usar esse link em algum momento. - Logo menos. - Maravilha! Vamos precisar fazer alguma alteração no Mongo? Então, resolvemos todos os requisitos na parte do código. No projeto que desenvolvemos, como vocês sabem bem, como vocês já estão utilizando, estamos utilizando uma base de dados rodando no serviço Mongo Atlas. Esse serviço tem, por questão de facilitar a nossa segurança, ou para dar para vocês controle de segurança, Ele tem um controle, como se fosse um firewall, para definir quem pode acessar a base que vocês criaram. Aqui no caso do

Gui, como podemos ver na tela, ele está permitindo o IP que começa com 77 e termina com /32. O que isso significa no mundo de redes? O /32 quer dizer que é um IP de uma máquina, de um host único. Ou seja, só quem pode acessar a base do Gui é o IP da máquina dele. Como vamos passar a rodar esse serviço na cloud, temos que dar permissão para que outros IPs, além do IP do Guilherme, consigam acessar também. Qual é a forma mais simples de fazer isso? E pela mais simples, eu quero dizer que

vamos gastar mais tempo, Mas que não necessariamente é a melhor boa prática de segurança se for para colocar algo em produção. Vamos clicar. Dentro do console do Atlas de vocês, lá no menu do lado esquerdo, tem uma área chamada Security, de segurança, e dentro de Security tem Network Access. Vocês vão clicar lá em Network Access. Provavelmente vai aparecer uma linha igual que tem do Gui, que é o IP dele, mas será o IP de vocês. Vocês vão clicar lá em Actions, no botão Edit, e vão clicar no botão Allow Access from Anywhere. Ou seja, vocês

estão permitindo acesso de qualquer lugar. Ainda precisa da autenticação, mas em nível de rede, é permitido acessar de qualquer lugar. Excelente. Vou clicar aqui para confirmar. E mais alguma alteração? É isso. Só um último detalhe, Gui, é que ele leva alguns segundos para aplicar. Se você tentar o acesso imediatamente depois de fazer isso, pode ser que ainda não tenha replicado. Então é importante só prestar atenção que o status já está ativo, E já foi. Maravilha. - Agora vamos para o cloud? - Isso, vamos para o cloud. Maravilha! Mas antes de ir para a cloud, tem

informação importante. Isso, exatamente. Tem três informações importantes. A primeira, que para quem nunca ouviu falar, para quem nunca acessou, a Google Cloud é um ambiente de uso de recurso, como máquinas virtuais, deploy de serviços, inteligência artificial e tudo mais, do Google, que é principalmente utilizado por empresas, usuários corporativos, negócios e tudo mais. Por ter esse foco como principal, tem toda uma mecânica, tem todo um processo para você acessar a primeira vez, que envolve, por exemplo, que você usar um cartão de crédito. Mas não é o que estamos buscando aqui nessa experiência. Aqui nessa experiência queremos

focar em atividades de back-end, mas sem ter que gastar muito tempo com outras coisas. O que fizemos? Na parceria Alura e Google, criamos alguns vouchers, alguns créditos para vocês, para que vocês pulem essas etapas mais complexas de configuração de cartão de crédito, meio de pagamento e tudo mais. Então, tanto no link aqui dessa aula, quanto no guia de mergulho, quanto via e-mail vocês devem ter recebido também, tem algumas orientações de como vocês resgatam o voucher, o crédito de vocês. Então, se vocês ainda não fizeram os passos que estão nesse guia, é importante vocês darem um

pause em nós aqui, Deixar a gente paradinho, travado aqui na tela. Vai lá no e-mail, no guia de mergulho, pega o link que está aqui, segue passo a passo, até você finalizar o processo de importação do seu voucher, que é isso que vai permitir que você faça as próximas etapas. Então, eu falei que tinha três mensagens. Essa é a primeira mensagem do voucher. A segunda mensagem é o quê? Para a gente conseguir fazer algo que fique útil, que fique prática para todo mundo, os vouchers foram assinalados, foram configurados para serem usados pelos e-mails das pessoas

que se cadastraram na imersão, que se inscreveram na imersão. Então, Gui, se você usou o seu e-mail [email protected] para se inscrever, você tem que usar exatamente esse e-mail para fazer o resgate do seu voucher. Isso vale para todos vocês. Se vocês tentarem um e-mail diferente do da descrição, provavelmente vocês vão encontrar erro na hora de resgatar o voucher, como o e-mail inválido ou algo assim. E a terceira e última mensagem é que os vouchers são para uso individual. Não manda no grupo da família. Isso, não compartilha com a galera. Primeiro que você vai conseguir aplicar

ele uma vez só. Então, se você baixa para usar e depois compartilha, não vai dar certo A partir da segunda pessoa. E se você tiver um uso muito intenso em um projeto só, tipo compartilhando um projeto com uma galera, pode ser que isso seja detectado como algum tipo de tentativa de fraude ou algo assim, e você perde seu acesso e acaba perdendo a oportunidade de praticar as coisas. - Certo, Gui? - Certíssimo. Assim que você pegar o voucher, você acessa o Google Cloud, você vai para uma tela mais ou menos igual a essa que estamos

aqui. Isso aí. Criamos esse projeto com o nome de lucianomartins de demonstração. Mas a ideia é que você caia numa tela como essa. Observe que eu estou até com a minha carinha aparecendo do lado ali. Isso aí. Como a gente faz agora para carregar e subir o nosso projeto? O esquema que fizemos aqui, galera, para simplificar, ao invés de vocês terem que ficar copiando arquivo de um lado para o outro, mudando de tela, estar no VSCode de vocês, estar na Cloud, a gente tentou fazer uma experiência mais simples onde vocês vão usar boa parte das

ações dentro da console da Google Cloud. Então, Gui, lá perto da sua foto, se formos na sequência, tem um botão que são três pontos um em cima do outro, da direita para a esquerda. A direita é a outra direita. É que eu não sei, cara, o que é a direita e a esquerda. Os três pontos, um em cima do outro, depois o círculo com a interrogação, um sino e, finalmente, um símbolo de console igual a console do MS-DOS, a console do Windows. Cliquei nela. Vamos ver. Clicou. Vai abrir aí embaixo a console para vocês semelhante

ao terminal da máquina de vocês ou o do VSCode. E, a partir daí, a gente segue em frente. E com qual comando vamos iniciar esse nosso deploy? Para trazermos essa experiência que fizemos toda no nosso VSCode, toda na local, para dentro dessa shell da Google Cloud, A primeira coisa que precisamos fazer é um clone do nosso repositório, de todas as nossas experiências, todo o nosso código, aí para dentro. Então, você vai dar um git clone e o caminho do seu repositório no GitHub. Você que fez na sua casa, vai colocar o link do seu repositório.

Então, eu dou um "Enter" aqui e ele trouxe. Já temos tudo aqui. Que legal, hein? E agora? O próximo passo é você entrar no diretório que você acabou de fazer o clone, fazer um cd, espaço e o nome do diretório. O nosso aí é backend-instabytes. Cd backend-instabytes. Boa. E se você dá um ls, dá uma listagem, aí basicamente são os arquivos que vocês criaram até aqui na jornada da imersão. Beleza. Para simplificar o nosso processo, de novo, pensando em focar no que é importante para nós aqui, é importante conseguir usar, fazer o deploy na Google

Cloud, fazermos alguma gestão de serviços. Temos que habilitar alguns serviços que são os serviços que vamos utilizar. Para não gastarmos muito tempo com isso, mas depois, se vocês tiverem interesse, tiverem curiosidade, Tem documentações da Google Cloud para entender um pouco melhor tudo o que estamos fazendo, criamos esse arquivo chamado services.sh que vai habilitar para nós tudo o que precisamos. Você só precisa, para rodá-lo, escrever bash, b-a-s-h, espaço, o nome do arquivo, services.sh. - services.sh. - Isso. Aí, você dá um "Enter", Ele vai segurar na tela um pouco, talvez ele peça autorização para algumas pessoas, você

quer realmente executar um comando, você clica no botão de allow, permitir, que vai aparecer. Quando liberar, a linha de comando de novo, quer dizer que está tudo certo. Maravilha. E agora, qual é o próximo passo? Agora, por enquanto, estamos no terminal, não queremos usar só um terminal. Usamos o VSCode até agora. Dentro da Google Cloud, você tem uma interface similar ao VSCode. Você vai clicar naquele botão que tem um lápis ali, que está escrito Abrir editor, ou se a interface estiver em inglês, vai estar como Open editor. Então, basicamente, ele está preparando para a gente

uma interface - similar ao VSCode. - Olha aí, que legal, hein? Então, dá para ver que tem o projeto inteiro aqui. Vou fechar esses outros arquivos, pode ser? E uma dúvida, vamos precisar ainda do arquivo .env nesse cenário? Sim. Tudo que fizemos para executar localmente, vamos precisar dentro do ambiente da Cloud também. Mas não temos esse arquivo aqui ainda. Ainda não. Se eu der um ls -la… ls -la, por exemplo, para visualizar todos os arquivos, não temos o arquivo .env. Ou seja, nesse projeto não temos as configurações de ambiente. Talvez, só deixar uma dica para

a galera, Gui, foi uma reclamação que você me fez quando começamos a testar aqui, muito provavelmente o tema padrão desse editor será o light, será o branco. Parece que tem um holofote de luz na sua cara. É verdade. Nessas configurações, você consegue alterar a cor. Color, Theme, por exemplo, tem várias cores diferentes que dá para usar. Você coloca no light OSS só para ver como provavelmente é o padrão, provavelmente será esse. Quem gostar de tema light, está tudo certo. É um tema meio polêmico, mas está tudo bem. Quem fizer a questão de alterar, que goste

do ensolarado, que goste do roxinho, é só ir lá nas settings, lá na engrenagem, temas, a cor do tema e escolher o que se sentir melhor. Maravilha. Temos um desafio que é: Como fazemos? Vamos ter que criar esse arquivo .env aqui? Isso, exatamente. Exatamente com o mesmo nome dentro da pasta do serviço. Tomar cuidado que, enquanto estávamos experimentando, às vezes erramos de colocar no lugar certo. Então, só para garantir, não estamos na pasta. Está vendo? Backend-instabytes está fora. Precisamos acessar essa pasta. Então, cd backend-instabytes, aí vamos criar esse arquivo. Isso. Posso criar esse arquivo com

linha de comando mesmo? Você pode criar linha de comando ou pode criá-la dentro do... O que você prefere? Acho que visualmente ali com click é melhor. Vou clicar aqui na pasta e vou selecionar essa opção. Repare que ele está na pasta. Vou colocar .env. Vou dar um "Enter". Então, temos o arquivo .env aqui. "Ctrl+C", "Ctrl+V" lá das nossas variáveis. Só para verificar se ele está certo aqui. Está certo. Beleza. Mais uma dica aqui, Gui. Caso vocês, na criação do arquivo .env de vocês, Não criaram o valor da variável entre aspas duplas, Pode ter problema. Pode

ter problema nessa questão que já falamos um pouco antes de movimentação. É só mais um double check se lá no começo dessa segunda parte da aula vocês não alteraram as variáveis. É importante que esteja semelhante ao que está do Guilherme aqui. Depois do sinal de igual, o valor tem que estar entre duas aspas duplas. Beleza. Então, se eu coloco aqui, por exemplo, git, não, ls -la podemos visualizar que existem vários arquivos, inclusive o gitignore aqui. Vamos precisar do gitignore nessa etapa? Nessa etapa, não. Podemos removê-lo? - Pode remover. - É até aconselhável. Isso. Se você

conseguir dar um cat, espaço, gitignore, .gitignore Possivelmente, na versão de vocês, pode ter também o arquivo .env como arquivo para ser ignorado. Então, o que pode acontecer? Pode acontecer que em alguma etapa da automação, os serviços do Google levem em consideração o gitignore e pode ignorar a variável de vocês e pode quebrar o processo todo sem muita explicação. E ele fala: "olha, não achamos as variáveis" Não achou ou aparece o erro de que a informação está undefined ou algo assim, entendeu? Então, para removermos? rm, espaço, ponto. .gitignore. Isso aí. Dou um "Enter". E agora? Boa.

Eu acho que a última diferença que temos aqui é a questão de validar que o .env está correto no código. Vamos ver? Vamos lá. Acessando aqui src lá no nosso arquivo de model postsModel, temos o dotenv/config sendo instalado. O package.json, temos o dotenv também. Mas assim, só um ponto. Só de colocarmos o projeto, já temos todas essas dependências aqui? Não, excelente ponto. Aqui, temos que seguir exatamente o passo a passo que fazemos localmente. Qual a primeira coisa que fazemos quando baixamos um projeto em Node para a nossa máquina? Npm install. Npm install, isso aí. Npm

install. Dou um "Enter". Ou npm i. Beleza. E ele instalou tudo que precisa. - Os pacotes. - Foram poucos, foram só 99. Bem tranquilo. E agora? O que fazemos? Bom, beleza. Fizemos todo o preparativo. E agora, finalmente, vamos fazer o deploy de fato. Vamos pegar todo o código que preparamos, vamos submeter para um serviço da Google Cloud chamado Cloud Run e esse serviço será o responsável por orquestrar todas as etapas que faríamos manualmente. Que seria o que? Criar um Dockerfile que é uma configuração de container, copiar o nosso código para dentro de uma pasta junto

com esse Dockerfile, fazer o build desse container, guardar esse container num repositório de containers, enfim. Várias etapas que faríamos manualmente o Cloud Run vai fazer tudo para nós. Beleza? Para fazermos isso aqui nesse ambiente de terminal que estamos, vamos usar um utilitário que já usamos lá no service.sh que é o client da Google Cloud, o nome dele é um comando gcloud. Gcloud. Legal. Boa. Depois do gcloud temos que dizer para o comando qual serviço que estamos utilizando. Vamos utilizar o serviço Cloud Run. Então, você coloca a palavra run. Run. Dentro do Cloud Run, queremos fazer

um deploy. Então, você coloca como ação depois do run, deploy. Queremos fazer um deploy de quê? Queremos fazer o deploy de um código fonte que está nesse ambiente aí. Os nossos arquivos JS, o package e tudo mais. Vamos usar um parâmetro --source para dizer que queremos fazer um deploy a partir de um… De uma base, não é? De uma base de código, - Num código fonte. - Isso. Depois do source temos que dizer aonde que está esse source em terminal. Costumamos usar o ponto, o caractere "." para dizer que é o diretório local o diretório

em que estamos, que é onde estamos no seu caso é backend-instabytes, vocês fazem essa validação se vocês realmente estão dentro da pasta do projeto. Se não tiver tem que entrar antes de rodar esse comando. E de último, por padrão o Cloud Run utiliza para o serviço a porta 8080. Aqui no nosso projeto, usamos como padrão a porta 3000. É verdade. Nenhum problema nisso. Vocês tem liberdade para usar a porta que quiserem. Se vocês usaram 3000 padrão igual o Gui fez ou se vocês escolheram alguma outra, não tem problema mas temos que dizer para o Cloud

Run em que porta o serviço está rodando. Então você vai usar o parâmetro --port, de porta em inglês igual à porta que vocês estão usando. No nosso caso, 3000. E é isso. Manda ver no "Enter". Agora, o Cloud Run vai fazer algumas perguntas adicionais para você antes de começar o processo. Primeiro, ele vai perguntar qual é o nome que você quer para o serviço, por padrão, ele pega o nome do diretório local, Mas você pode pôr o nome que quiserem. O serviço podia ser Guilherme 007, algo assim. - Mas podemos pôr o padrão. - Eu

prefiro Back End. Aí você só dá um "Enter" para aceitar a sugestão. A próxima pergunta que ele faz é aonde que queremos fazer esse deploy. O que significa "aonde"? Dentro da Google Cloud, você tem um conceito que é chamado de região. Região é em que país ou em que data center, vamos falar assim, você quer fazer o deploy do serviço. Colocar esse código onde. É, onde você quer colocar esse código. Por que que isso é importante? Porque um conceito fundamental de aplicação, seja em cloud ou não em cloud, é que a aplicação esteja o mais

próximo possível do seu usuário para ter uma melhor experiência, melhor tempo de resposta e tudo mais. Então, se quero que o meu projeto seja usado por pessoas no Japão não faz sentido eu fazer o deploy no Brasil por toda a distância de rede que está envolvida e tudo mais. Então, o que vamos fazer? Mas por nós todos estarmos no Brasil, nessa experiência, vamos usar a opção número 30, América do Sul East 1, que basicamente representa a região de Google Cloud de São Paulo no Brasil. Eu coloquei aqui 30, pressionei o "Enter". E ele pergunta se

você quer permitir que qualquer pessoa acesse a API. - Qualquer pessoa. - Exato. Manda ver. "Enter" também. E ele começa o deploy. O deploy demora um pouco. Agora ele vai fazer todos os passos que comentamos antes de definição de container, build e tal. Pode demorar aí uns dois ou três minutos. Então, dá tempo de fazer um Ki-suco, pôr um miojo no fogo. - Cozinhar um ovo. - Aí sim, hein? Olha, quando o nosso deploy estiver finalizado, voltamos. E o nosso deploy foi concluído com sucesso. Obrigado, Luciano. Foi muito incrível. A pergunta é como é que

eu acesso agora essa aplicação? Se checarmos aí o output, a saída do comando aí no terminal, vocês vão ver que a última linha é Service URL e um endereço. Basicamente, esse é um endereço que o Cloud Run criou como aonde a sua aplicação está implantada, está feito o deploy. Então, você pode tanto clicar aí… E pedir para abrir. E eu acho que você criou uma rota chamada /post. Isso. Não temos ninguém mesmo. Se você editar e colocar /posts, você vai basicamente ver o conteúdo que está no banco de dados. Que incrível, cara! Ficou muito legal.

Olha só, não só criamos um back-end, mas colocou esse back-end no ar para qualquer outra aplicação. Vamos supor que eu tenha um amigo que quer desenvolver mobile e usar esses dados. É isso, é só apontar para essa API e já era. Muito legal. E se você quiser testar esse código com o nosso front-end local é só você alterar a rota do arquivo env Lá do nosso projeto do front também que vai dar tudo certo. E para finalizarmos a imersão com sucesso, dois recados importantes. O primeiro, não compre Alura ainda. - É isso aí. - Caramba,

estranho. Fazemos imersão, preparamos todo esse conteúdo. Parou, parou, parou. Não compre Alura ainda. - Será que o Paulo vai ver isso? - Espero que não. Não compre Alura ainda porque vamos ter um desconto especial muito incrível e caso você tenha assistido a todas as aulas da imersão, você tem o direito de solicitar o seu certificado da imersão. Então, fique muito ligado nisso também. Qualquer dúvida que você tiver, acompanhe o Guia de Mergulho, lá tem todos os detalhes desta imersão. Espero que você tenha gostado. Eu me diverti muito com a Ju, com o André, com você.

Foi muito legal. Luciano, obrigado. - Muito legal ter você aqui. - Valeu, galera! Valeu, nos encontramos na próxima imersão.