[Imersão Dev com Gemini] Criando a base de dados com JavaScript

Chegamos na terceira aula da Imersão Dev. Estou muito feliz. Rafa, o que você está achando dessa imersão?

Estou amando. Estou muito ansiosa agora porque vamos nos aprofundar cada vez mais em JavaScript. Vai ter muita coisa legal para deixar o nosso projeto muito mais robusto.

É isso aí. E não é só isso. Vamos falar muito sobre o Gemini também.

É isso aí. Vamos evoluir no nosso projeto, fazer mais coisa legal no projeto que vocês já começaram a construir e aprender JavaScript, aprender lógica de programação, junto com essas feras aqui e com o Gemini. É isso aí.

Espero que você goste muito dessa aula. Preparamos ela com muito carinho. E hoje, assim como a Rafa e o Luciano comentaram, nosso objetivo será aprofundar conhecimentos em JavaScript, uma das linguagens mais utilizadas hoje por diversas empresas de diferentes áreas.

É muito importante ter a lógica de programação numa linguagem tão popular e tão utilizada no mercado. Nosso desafio é o seguinte. Temos uma página estática com alguns atletas que criamos ou você tem uma página estática com os dados que você criou.

Entretanto, de alguma forma, vamos precisar construir essa base de conhecimento. Esses dados não vão ficar disponíveis no HTML. Vamos usar o JavaScript para manipular toda essa informação.

A pergunta é, como faremos isso? Já começamos a trabalhar um pouco com o JavaScript na aula passada. Então já vimos que utilizando o comando console.

log, conseguimos imprimir informações que ficam entre aspas no console do navegador. Mas agora vamos deixar o projeto mais organizado, porque precisaremos, em um lugar, armazenar todos os dados. Como as informações do nome, da descrição dos atletas.

E em outro lugar, vamos fazer toda a lógica do JavaScript. Para isso, vamos criar mais um arquivo JavaScript dentro do nosso projeto, que vai servir apenas para armazenar os nossos dados. Então, Gui, vamos fazer isso.

Vou criar um arquivo, chamá-lo de dados, e a extensão dele será . js. Luciano, por que é importante separar os dados e informações da aplicação de sua lógica?

Isso faz parte de algo que reforçamos desde a primeira aula. É importante ir pegando essas práticas de organização e estruturação do código. Uma vez que começamos a criar essa estrutura, onde tenho toda a lógica de um lado e todos os dados de outro, conforme a nossa aplicação for crescendo, fica mais simples de conseguir fazer alterações, fazer manutenções, porque está bem distinto.

Se quero fazer algo novo para a base de conhecimento, vou para a base de código. Se quero incluir mais atletas, temos a Paralimpíada acontecendo. Então, se quero colocar mais atletas dentro da base de informações, vou editar só o arquivo de dados.

Isso simplifica a manutenção do projeto. Então, é pensando mais a longo prazo. Sabemos que daria até para colocar esse código JavaScript no HTML, mas aí teríamos quantas linhas?

Ficaria ruim de manter. Pensando na organização do código, vamos manter um arquivo só para dados, a nossa base de conhecimento, e outro arquivo referente a funcionalidades. Acho que eu entendi.

O desafio agora é o seguinte, o que eu crio nesse arquivo dados. js? Quando falamos de armazenar dados, armazenar informações, existe um conceito dentro da programação usado em diversas linguagens, que se chama variáveis.

Variável nada mais é do que um espaço dentro da memória do programa, que terá um nome, e que guardará alguma informação. Vamos ver isso na prática para ficar mais claro. Queremos guardar, por exemplo, o nome de uma das atletas.

Vamos utilizar a Rayssa Leal, Gui. Podemos escrever no programa JavaScript, Rayssa Leal. Como vou escrever um texto, sempre entre aspas duplas.

Rayssa Leal. - Só com isso ele guarda a informação? - Não.

Quando vamos trabalhar com variáveis, a primeira coisa que precisamos fazer é declará-las dentro do programa JavaScript. E como declaramos? Precisamos dar um nome para essa variável, e mostrar que isso é uma variável.

E como fazemos isso? No início da primeira linha, antes de dar o valor, que é Rayssa Leal, vamos escrever let. Let significa que estamos criando uma variável.

l-e-t. Depois do let, escrevemos o nome dessa variável que vamos criar. Podemos colocar, por exemplo, dados.

Dados. Para atribuir um valor à variável dados, vamos colocar o sinal de igual. É um processo da direita para a esquerda.

Estamos atribuindo um valor Rayssa Leal, entre aspas, porque é uma palavra, um texto, para a variável que se chama dados. É basicamente isso. Porém, aqui apenas declaramos essa variável.

Não estamos utilizando ela ainda no código. Para poder usá-la, temos que ir ao outro arquivo, o app. js, onde estamos fazendo a lógica.

Uma analogia, para pensarmos sobre isso. Se eu pergunto para você, Luciano, qual é a sua cor favorita? Azul.

Qual é a sua cor favorita? Marrom. Na nossa cabeça, já temos um espaço falando assim, cor favorita é azul, cor favorita é marrom.

Se eu pergunto, por exemplo, qual a cidade que você já visitou e que mais gostou? - Belém do Pará. - Belém do Pará e?

Londres. Eu não conheço Londres, mas parece ser bem bonito também. Então, dentro da nossa cabeça, existe um espaço, que é esse let, no qual falamos o melhor lugar que já visitamos, a nossa cor favorita, o lugar onde nasci ou o nome do meu primeiro pet.

Na nossa memória, existe um monte de variáveis criadas. Estamos fazendo isso para o computador também. Exatamente.

Como se diz no futebol, a regra é clara. Temos o let, que eu escrevi, e se trata de uma variável. Eu quero armazenar uma informação.

E essa informação precisa ter um nome, uma etiqueta. Eu uso o sinal de igual, que parece não fazer sentido inicialmente, porque o igual é da matemática. Mas nesse caso, estamos falando que o dado será igual a Rayssa Leal.

Acho que o próximo desafio, Rafa, que você mencionou é, eu quero exibir Rayssa Leal no app. js. Isso.

Como faremos? Eu vou tirar o Rebeca Andrade do console. log.

Não é ele. E vou passar, por exemplo, entre aspas, o nome dados. - É isso?

- Exatamente. Por que criamos essa variável? Para não precisar ficar escrevendo o texto inteiro.

Agora, como o Gui falou, estamos referenciando ao nome da variável, que é dados. Porém, quando estamos trabalhando no JavaScript, usamos as aspas quando queremos escrever um texto. Agora, com variáveis, não colocamos essas aspas.

Se queremos referenciar alguma variável, usá-la em algum lugar, apenas a escrevemos. Então, é console. log dados.

Entendi. Porque dentro dele já tem o Rayssa Leal. Isso.

Se eu for na aplicação e dar uma olhada, temos um erro de referência. Eu já tenho até uma ideia do que pode acontecer. Quero usar o Gemini.

Mas podemos deixar um desafio para o pessoal. - Vamos fazer isso? - Vamos.

Se você chegou neste momento junto conosco, pause o vídeo e tente solucionar esse problema. Pode usar o Gemini, compartilhe o seu código, a sua estrutura. Fale, eu tenho tais arquivos e recebi tal erro na linha 1.

O JavaScript na linha 1 fala que dados é uma referência que não conhece, não foi definida ainda. É com vocês agora. Vamos continuar e mostrar essa solução neste momento.

Não conseguimos mostrar os dados, Rafa. O problema está em algo que já aprendemos a fazer, mas não fizemos com o novo arquivo criado. Não linkamos o arquivo dados.

js dentro do HTML, assim como fizemos com o app. js. Aqui na linha 50.

Esse documento HTML tem esse script, o app. js. Preciso indicar que esse documento tem outro script.

Então, posso ter mais de um script para um HTML. E a ordem deles vai fazer diferença? É importante, na verdade, colocar primeiro os dados que queremos importar e embaixo a lógica em que vamos utilizar esses dados.

Assim, já teremos os dados carregados primeiro. Então, vou colocar script, dois pontos, src, que se chama dados. js.

Colocamos esse script, e já mudou, é Rayssa Leal. Ele conseguiu pegar a informação da variável do arquivo de dados, trouxe para o app. js e exibiu no console.

Eu gostei disso. Isso ficou legal. Contudo, sempre que resolvemos uma coisa, tem outro desafio.

É assim mesmo a vida do desenvolvedor? É. Isso faz parte do processo de evoluir tanto o aprendizado quanto o projeto.

Conforme conseguimos alcançar um novo passo, aprendemos o conceito de variável e aprendemos como usá-las. Agora podemos pensar em formas mais avançadas, em próximos passos de como manipular essas variáveis. É verdade.

Porque se a gente parar para pensar, o que precisaríamos armazenar? Primeiro, um título. Podemos pensar juntos depois, pois eu realmente não sei como organizar isso nas variáveis.

Mas precisamos de um título. Precisamos de mais de um atleta. Tem a Raíssa Leal, tem a Rebeca.

Então, teoricamente, o que vem na minha cabeça? Como eu crio mais um atleta dentro dessa variável de dados? Eu não posso colocar, por exemplo, uma vírgula.

Aqui não faz sentido. Ou um ponto e vírgula e escrever, por exemplo, Rebeca Andrade. Não é isso.

Não. Ficaria bem feio se fosse. É, é bem estranho.

Nesse momento existem algumas opções. O que você pode fazer é criar uma nova variável, uma para cada novo atleta que você quer criar. Mas aí, você terá o trabalho de escrever várias variáveis, uma por uma.

Na prática, não é isso que utilizamos. Veremos agora o conceito de listas. As listas conseguem guardar mais de uma variável do mesmo tipo.

Temos três atletas que queremos guardar, até o momento. As três são do tipo texto. Podemos colocar todas entre aspas e agrupá-las numa lista.

Para criar uma lista, colocamos os nomes entre colchetes, Gui. E todos entre as aspas também. Beleza.

Separados por vírgula. Vou colocar aqui o colchete. Posso dar um "Enter" para ele ficar indentado?

Pode. Acho que fica mais fácil de ver. E aqui eu fecho o colchete.

Isso. Só para eu entender. Sempre que tenho uma lista, vou usar colchetes.

Isso. Posso ter uma variável que tem um valor só. A idade, o nome, o CPF, algo assim.

Nesse caso, eu quero armazenar mais de uma informação em uma variável. Aí eu vou usar esse conceito de lista. Isso.

Isso entra em outro conceito que faz parte do mundo das variáveis, que é o tipo de informação que temos. Por exemplo, quando estamos armazenando o nome das atletas, estamos trabalhando com textos. Estamos trabalhando com um tipo que, no termo em inglês da programação, chamamos de variável String.

Se quiséssemos, por exemplo, colocar um número que indica a quantidade de medalhas que essa atleta tem, seria uma informação numérica. Então, existe um tipo de dado que pode ser inteiro ou pode ser real no qual armazenamos essa informação. E a lista passa a ser, no mundo do JavaScript e da programação, um tipo de dado também.

Ou seja, uma estrutura como se fosse um gaveteiro onde cada gaveta tem um tipo de informação guardada. A primeira gaveta pode ser um nome, a segunda gaveta pode ser o link do Wikipedia da raiz, e por aí vai. Exatamente.

Seria interessante dar uma olhada nos tipos diferentes de variáveis. O que vocês acham de perguntar para o Gemini quais são os tipos de variáveis principais? Os primitivos.

Os tipos de dados. Vamos lá. Vou pedir para o Gemini.

Vou passar o contexto primeiro. Isso, muito bem. Estou estudando JavaScript.

E gostaria de entender os tipos de variáveis que existem. Me mostre alguns exemplos sobre os tipos mais comuns. JavaScript é uma linguagem dinamicamente tipada.

Isso pode assustar um pouco. Vamos pensar pela lógica. Dinamicamente significa que temos um valor em uma variável e consigo alterar esse valor.

Existem linguagens de programação em que isso é diferente. Eu tenho um grande amigo que trabalha com Java. Nela, declaramos a variável daquele tipo, é daquele tipo.

No JavaScript conseguimos mudar não apenas o valor da variável, mas também o tipo dela. Esses dados que declaramos em texto, poderíamos mudar para um número. Então, ele fala do tipo number, para armazenar números.

A principal diferença aqui é que não temos as aspas. Já se trata de outro tipo. Provavelmente vamos conseguir realizar operações matemáticas e coisas desse tipo.

Aquele que você comentou, o string. Então, let nome igual a João da Silva, let mensagem Olá, mundo. Ele usou até exemplos que abordamos.

Há dois detalhes que talvez tenham passado pela sua cabeça agora que estamos escrevendo o código. O primeiro, nessa parte da string, ele utilizou aspas duplas e também aspas simples. Ambas funcionam dentro do JavaScript.

Outra coisa é o ponto e vírgula no final. Eu não sei exatamente se o utilizamos em todos os momentos quando estávamos escrevendo o código, mas ele não é obrigatório para o código funcionar no JavaScript. Utilizamos como boa prática para mostrar que acabamos ali, finalizamos o comando, mas o código funciona mesmo que você não o utilize.

Talvez esta tenha sido uma dúvida que surgiu para você. Está tudo certo. Inclusive, a forma que você estruturou a sua lista lá no arquivo dados.

js é uma boa amostra de por que é interessante usar o ponto e vírgula. Uma vez que eu tenho uma informação dividida em várias linhas, quando coloco ponto e vírgula, consigo visualizar onde aquela instrução está acabando. Teoricamente, mesmo que não seja obrigatório para o código funcionar, É uma boa prática.

Vamos sempre lembrar de colocar. Aqui eu poderia colocar um ponto e vírgula no final? É aí que você colocar.

Teria que colocar para ficar melhor. Isso não funciona para todas as linguagens de programação. Existem linguagens de programação em que uma string sempre será identificada com aspas duplas.

Ou aspas simples. Vai depender da linguagem. O JavaScript permite as duas.

Uma linguagem de programação vai funcionar mais ou menos com a mesma regra que uma linguagem de comunicação. Por exemplo, quando escrevemos algo em português, começamos uma frase com uma letra maiúscula, temos um ponto em seguida, temos um ponto em continuação, exclamação. Tem várias regras de sintaxe que a gente usa, mesmo sem perceber, quando estamos falando ou escrevendo em português.

O mesmo funciona para a linguagem de programação. Cada linguagem que você for estudar, seja JavaScript, Python, Java, enfim, a que você preferir seguir nos seus estudos depois, cada uma vai ter as suas peculiaridades, a sua forma de estruturar, a sua forma de escrever. Isso faz parte de como a linguagem funciona.

Um exemplo que lembrei com você comentando sobre linguagem, é o da pergunta em espanhol. Que uma pergunta em espanhol tem sempre uma interrogação na frente. É de cabeça para baixo.

Já sabemos se tratar de uma pergunta. No português não temos isso, mas temos perguntas. É comum.

É só a forma de escrita que será um pouco diferente de uma linguagem para outra. Uma dúvida, só para finalizar esse assunto. Se eu sei uma linguagem de programação, eu consigo aprender uma segunda linguagem mais fácil?

O que vocês acham? Exatamente. Por isso que se alguém quer começar a estudar programação, Deve começar pela lógica de programação.

Começa por algoritmos. Programar não é sobre aprender linguagem de programação. Não é sobre decorar.

Porque isso é inglês. Você pesquisa no Gemini. Você tem um suporte para isso.

Programar é sobre saber resolver os problemas de forma lógica. Temos aqui a Rayssa Leal. E vamos colocar as outras atletas.

Vou pegar os nomes, só para não esquecer. Temos a Rebeca Andrade e a Beatriz Souza. Vamos lá nos dados.

Rebeca Andrade, entre aspas, Beatriz Souza. No app. js, já estamos pedindo para ele exibir os dados, no console log.

Vamos ver como o projeto está. Acessando o Olimpíadas, ele já mudou a estrutura. Eu vi vermelho e falei, nossa, eu errei.

Mas não, é isso mesmo. Está certo. Ele me mostrou os três nomes.

Está certo? Está. Se você quiser, pode clicar naquela seta apontada para o lado direito também.

Aí ele consegue listar exatamente os três valores, os três itens dentro da lista. E uma coisa muito interessante é que ele começou a listar não do 1, ele começou do 0, 1 e 2. Por que isso?

Porque dentro do JavaScript, quando estamos falando sobre listas, nós numeramos os itens por meio de índices. E esses índices seguem uma ordem, 0, 1, 2, 3, 4, 5. Para que precisamos ter noção disso e entender de índices?

Às vezes queremos especificamente utilizar o terceiro item da lista. Como faremos isso? Não vamos referenciá-lo com o número 3, mesmo sendo o terceiro item.

Vamos referenciar com o número 2. Vamos ver isso na prática, Gui? Vamos mostrar.

É só a Beatriz Souza. Eu sei que o índice é lá no dados. Isso.

O primeiro aqui sempre é o 0. É uma regra. O que acontece se você pôr o primeiro número que vem na cabeça?

Como ela é o terceiro nome, tenta colocar o número 3 e ver o que acontece. Certo. E como eu acesso exatamente o número 3?

Você coloca dentro dos colchetes, depois de dados. Aqui eu vou referenciar o índice que eu quero. Isso.

Qual gaveta da variável você quer abrir. Eu coloquei a terceira, que não tem. Isso, vamos ver o que acontece.

Undefined. Não foi definido. É.

Não tem um item no índice número 3 dentro da lista. Porque minha lista começa com índice 0. Exato.

Então, se eu volto na aplicação e coloco o índice 2, teoricamente, índice 0, índice 1, índice 2. Agora sim, teoricamente, vamos ver a Beatriz Souza. Exatamente.

Ou seja, é como deixar automático na cabeça que o índice do elemento sempre será um número a menos do que a sequência que eu estou imaginando. Se quero o terceiro nome da lista, vou buscar o índice 2. Se quero o primeiro nome da lista, vou buscar o índice 0.

Consegui entender como exibir os dados através dos índices da lista. O desafio que temos agora é o seguinte. A única informação que temos é o nome.

Por exemplo, Rebeca Andrade, Rayssa Leal, Beatriz Souza. Só temos o nome. Eu queria, de alguma forma, criar uma estrutura para que eu tivesse esse parágrafo e o link armazenado para abrir as informações sobre cada uma das atletas.

O ponto é, vou criar uma lista sobre outra lista e ficar usando os valores? Isso é meio confuso. Acho que não é essa a ideia.

Outra estrutura de dados que podemos utilizar nesse caso, Já conhecemos as listas. Agora, vamos conhecer os objetos. Dentro dos objetos, conseguimos colocar títulos para cada informação que criarmos.

Por exemplo, podemos criar o objeto da Rebeca Andrade. E dentro da Rebeca Andrade, vamos ter o título, que será o nome dela, na verdade. O nome Rebeca Andrade.

Vamos ter a descrição da Rebeca Andrade. Vamos ter o link da Rebeca Andrade. E assim, podemos fazer para vários outros atletas.

Dentro de um objeto, conseguimos criar várias pessoas. Vários atletas, e cada um, com várias informações, título e valor também. O que você acha de utilizarmos o objeto para poder fazer isso?

Eu acho uma boa ideia essa que a Rafa deu, porque seguiremos essa linha de boa prática, de organizar as coisas. Como você falou, dava até para fazer uma lista de listas. Mas aí ia ficar a seu cargo lembrar qual sub-lista está guardando o quê.

E você teria dois índices para ficar gerindo, o índice principal e o índice das sub-listas. Ia ser um pesadelo. Já fiz e não recomendo.

A ideia da Rafa é fantástica, pois assim você terá os objetos que representam cada atleta. E dentro do objeto de cada atleta, você consegue buscar, como se fossem variáveis dentro dele, a informação que você quer. Seja o nome, a descrição, o site ou outros.

Vimos que numa lista, usaremos os colchetes. Qual é o símbolo para identificar um objeto? Para poder criar objetos, vamos utilizar as chaves.

Como exemplo, criaremos um novo objeto, só para você ter noção do que é um objeto. Também utilizamos a palavra let, para poder dizer que estamos criando uma nova variável. E agora podemos dar um nome para esse objeto.

Vamos criar da Rayssa. Vou colocar rayssa, com letra minúscula. Isso.

E aí podemos colocar o sinal de igual. E abrir as chaves. Dentro dessas chaves, colocaremos todas as informações referentes à Rayssa.

O nome dela, a descrição. São títulos e valores. Colocaremos primeiro o nome dela.

Como que eu faço isso? Você escreve titulo, que pode se referir ao título que vai aparecer. Com aspas ou sem?

Sem aspas. Dentro do objeto, estamos criando uma chave. Um nome para cada informação dela.

Então é titulo, e aí vamos colocar dois pontos. E colocar, entre aspas, qual será o título da Rayssa. Que, no caso, será o nome.

Vou colocar Rayssa Leal. Isso. Aí colocamos a vírgula.

E embaixo, colocaremos outra informação. descricao, por exemplo. Dois pontos, e aí, colocamos a descrição que criamos para ela.

Acho que no HTML tem. Vamos pegar a descrição da Rayssa Leal. Control + C, voltar lá em dados.

Control + V. Vou colocar o Alt + Z para visualizar tudo em uma tela só. Aí colocamos a vírgula.

Podemos adicionar também aquela informação do link. Que já tinha lá também. Chamamos de link?

Pode ser, link. Dois pontos. Vamos pegar a informação lá do index, que é esse https aqui.

Isso. Também colocamos entre aspas. Você pode adicionar qualquer outra informação sobre ela dentro do objeto.

Talvez redes sociais, dois pontos, e o link das redes dela. O esporte que ela pratica. Aí você coloca esporte, dois pontos, entre aspas, o esporte.

Você pode colocar o que quiser. E-mail. Qualquer coisa.

É, qualquer coisa. Agora que já temos um objeto criado no projeto, precisamos de mais do que um. Estamos com o objeto da Rayssa, mas lá em cima tínhamos feito uma lista com várias atletas.

E o que precisamos fazer agora? Uma lista de objetos. Então, dentro da let dados, que já tem uma lista, estamos apenas com textos.

Vamos trocar esses textos por objetos. Gui, como você acha que fazemos isso? Acho que eu tiraria isso daqui.

Não teria essa variável, porque no fundo, queremos manter tudo na variável chamada dados. Pego todo esse conteúdo, Ctrl + X, tiro ele daqui. E falo que, no lugar da Rayssa Leal, teremos todas essas informações sobre ela.

Aí no lugar da Rebeca Andrade, vírgula. Vamos ter todas as informações agora, não mais sobre a Rayssa Leal, mas sobre a Rebeca Andrade. Pede para o Gemini criar o resto.

Muito boa ideia. Eu vou copiar esse começo. "Ctrl+C".

Vamos lá para o Gemini. Eu vou falar assim, tenho o seguinte código JavaScript. Eu vou colocar aqui três crases.

js. Fechando as três crases, só para deixar claro o nosso código JavaScript. Vou fechar só os colchetes para ficar certo.

Boa. Gostaria de criar mais dois objetos com a mesma estrutura. Seria legal se colocar também sobre as outras atletas.

Com certeza. Vou falar assim, crie sobre a Beatriz Souza do judô e a Rebeca Andrade da ginástica. Perfeito.

Vamos lá. Ele criou let dados, seguindo a estrutura que temos. O título, a descrição e o link das três judocas brasileiras… Lindo.

Está maravilhoso. O que vou fazer? Copiar.

Só um ponto de atenção, Guilherme. Algo comum quando interagimos com uma IA generativa para gerar conteúdo para nós. Não podemos simplesmente copiar, colar e achar que está tudo certo.

Se você prestar atenção, para a Beatriz Souza ele não colocou o link do Wikipedia da Beatriz Souza. Ele colocou entre colchetes o local para você colocar o link. É só um ponto de atenção para sempre revisarmos quando formos usar a informação.

Neste caso, é só você abrir uma aba nova, colocar no Google "Beatriz Souza Wiki", vamos achar e você corrige a informação. É verdade. Eu não tinha reparado nisso.

Vou tirar aqui as informações, let dados. Vamos corrigir só essa informação da Beatriz Souza. Vou abrir mais uma aba e vou colocar "Beatriz Souza judô".

Vamos pegar uma informação aqui no Wiki da Beatriz. Voltando lá no código, no Visual Studio, colocamos esse link que eu copiei. Perfeito.

Maravilha. Agora você tem um desafio. É o seguinte: Eu quero que você invista tempo em construir a sua base de conhecimento.

Então, temos aqui dados sobre atletas olímpicos, mas se você estiver fazendo sobre séries, se fizer sobre filmes ou outro esporte, é o momento de você começar a popular essa sua base de conhecimento. E compartilhar no Discord com as pessoas. É isso aí.

E também lembrando, só reforçando, que usamos uma nomenclatura que fez sentido para nós. O objeto de vocês não precisa se chamar dados, pode ser da forma que vocês preferirem organizar. Os campos dentro do objeto podem ter outros nomes que façam sentido para vocês.

Se está trabalhando com filme. Pode ter o título igual, mas pode ter um campo diretor. Pode ter o ano que o filme foi lançado, o gênero do filme.

Fica a criatividade de vocês para organizar o objeto como fizer sentido para vocês. É isso aí. Legal?

Legal. Vamos ver então, Gui, como ficou o resultado do nosso código no console. Estávamos trabalhando com lista, agora são listas de objetos Certo.

Como isso aparece lá? Por exemplo, aqui temos uma lista. Uma lista de vários objetos.

Se coloco como está, dados[2], vamos ver o que ele vai mostrar lá no console. Vou fechar aqui. Ele mostrou as informações da Rebeca Andrade de um jeito… Não está tão clara a forma que ele mostrou.

Mas ele trouxe. Está dentro das chaves, mas na mesma linha. Não pulou linha de uma forma legal.

Vamos ver de outro atleta? Vou acessar aqui o Visual Studio, vou pedir para que ele mostre do índice 0. Voltando lá no nosso código, Rayssa Leal, a Fadinha, skatista.

E se imprimir todos, vamos ver como que fica? Teoricamente, era só tirar o índice. O índice, isso aí.

Então, eu tiro aqui o colchetes, eu quero mostrar todos os dados. Que é o que faz mais sentido para o nosso projeto. Ele já mudou bastante.

Ele trouxe, de fato, é uma lista. Ele fala quantos elementos temos nessa lista. E temos, no índice 0, o título Rayssa Leal.

Tenho uma dúvida. Se eu quiser visualizar só o nome, Rayssa Leal ou Beatriz Souza, o que teria que fazer? Gui, se você quer, por exemplo, apenas o título da Rayssa, o que precisamos fazer no nosso código?

Primeiro, precisamos colocar qual índice da nossa lista queremos. Então, por exemplo, a Rayssa era do índice 0. A primeira informação.

Lá em dados, colocamos o índice 0. Se você quer apenas o título, você coloca um ponto título. E olha que curioso.

Colocando ponto, o VS Code já fala: é a propriedade descrição, link, o título. Ele já sabe quais são as três opções de informações que você pode acessar. Ele mostra como opções possíveis só o que tem um tijolinho do lado.

Se você prestar atenção, tem um íconezinho do lado. O que tem ABC do lado são as variáveis que estão dentro desse contexto aqui. Os válidos são os tijolinhos.

É isso mesmo. Vamos pegar a descrição? Fica mais claro ainda.

Pode ser. Se eu quero apenas um campo, está lá, Rayssa Leal, incrível. Exatamente.

Bom, já entendi como funciona a variável, a lista e o objeto. Vou fazer o seguinte. Quero deixar todo esse conteúdo, exibindo todos os dados.

Por quê? Porque um objetivo que vamos ter, não vamos fazer agora, mas que vamos ter, será pegar as informações no console da Rayssa Leal, da descrição, do link, e colocar isso na tela, no projeto mesmo, para ser exibido. Depois, a funcionalidade de, ao clicar, talvez procurar as informações que tenham o mesmo nome que digitamos nesse campo.

Existe um passo ainda realizar, mas gostei do que vimos até aqui. Tem um último ponto que seria legal testar, não é, Luciano? É isso aí.

Já demos a ideia para galera de criar os seus dados, a sua estrutura nos temas mais interessantes para eles. Podemos tentar usar o Gemini para criar uma estrutura igual a dos atletas para outro domínio. Que domínio podemos usar, Rafa?

O que você acha? Podemos utilizar filme. Pode ser.

Até inicio do zero? Acho que sim. Aí não precisa copiar o contexto do código.

Você só fala "cria uma lista de objetos em JavaScript para mim, onde cada objeto tem esses campos". Crie uma lista de objetos JavaScript que contenham os campos. Vou colocar, por exemplo… Que seja sobre filmes.

Verdade. Campos. Eu posso passar os campos depois?

Manda ver. Título, descrição e no final temos o gênero. A descrição você pode trocar por sinopse, só para ser diferente um pouco.

Sinopse. Não sei escrever. Sinopse é assim?

Isso aí, isso aí. Crie sobre filmes. Filmes clássicos, pode ser?

Filmes clássicos ou comédias. O que você prefere, Rafa? Eu gosto de terror.

Pronto. Sobre filmes de terror. Sobre filmes de terror, dos anos 1980.

Pode ser? Filme de terror dos anos 1980. Tem um de zumbi legal, que saíam da água.

Assistiu a esse filme? Tem um da Serra Elétrica. Clássico do clássico.

Crie filmes de terror da década de 1980. Vou dar "Enter", pode ser? Pede um número de itens.

Pede com três ou cinco filmes. Com três filmes. Dá um "Enter".

Vamos ver o que ele vai gerar para nós. Ele falou do que queremos gerar, então ele criou O Iluminado, um clássico, É do Stephen King, O Iluminado? Stephen King.

Ele criou A Hora do Pesadelo. Eu não assisti A Hora do Pesadelo. É bem pesado.

É, eu não assisti. Não assistam em casa. E Poltergeister, o fenômeno.

Terror sobrenatural. Então, com a ajuda do Gemini, dá para criar uma base de conhecimento sobre qualquer assunto. Para não acabar essa aula com filmes de terror, nos gêneros absurdos… Tudo bem, Rafa, filmes de terror, não estou muito acostumado a assistir.

Halloween está chegando. O Halloween está próximo. Vamos fazer sobre outra temática?

O que você sugere? Um carteado de mesa. Vamos lá.

Vou criar uma nova conversa e vou falar para ele o seguinte. Crie uma lista. Uma lista de objetos.

Sobre cartas de quê? De D&D? Pode ser.

Eu posso deixar D&D… Ele vai entender assim. Vamos descobrir. Sobre cartas de D&D com os seguintes… Atributos.

O que vocês sugerem de atributos? Nome da carta? Vamos ver se o Gemini consegue nos ajudar assim.

Vou colocar nome da carta. O que mais? O tipo?

Você coloca entre parênteses se é um personagem, se é um item ou se é uma arma, por exemplo. Arma. Beleza.

E depois… O que ela faz. Ponto de força ou algo assim. Ponto de força.

O que ela faz? É, uma descrição. Uma descrição.

Descrição. E para finalizar, vou dar ação. Isso.

Crie três cartas… Separe o "Crie" e "3" É verdade. Criei três cartas de cada tipo em uma lista de objetos JavaScript. Isso aí.

Em uma lista de objetos JavaScript. Vamos ver? Aí ele entendeu a tarefa e criou.

O mago-elfo, o guerreiro-anão e o bárbaro-humano. Três de personagem. De itens, temos a espada-longa +1, poção de cura e o anel da invisibilidade.

Gosta do Senhor dos Anéis? É muito legal. Gosto.

Achei interessante que ele utilizou no ponto de força, o tipo numérico. Ficou até de outra cor dentro do… É, não declarou entre aspas. Não é entre aspas, ele sabe que numérico, fica de outra cor.

Machado de batalha, aí, sim. Só uma curiosidade, usou até a forma de falar as coisas em D&D. O dano é calculado com 1d12.

Aí foi longe, gente. Se você estiver fazendo de D&D, deixamos essas opções para você também. Pessoal, é o seguinte.

O nosso próximo desafio é tirar as informações do console e exibir na tela. E depois, quando eu clicar em pesquisar, de fato só, de alguma forma, trazer as informações vinculadas com o que a pessoa digitou da nossa base de conhecimento. Eu só queria deixar o convite para galera que fizemos dois exemplos que eu já fiquei bem impressionado com os resultados que apareceram.

Compartilhe no Discord o que vocês criarem, seja de esporte, seja algum assunto que vocês inventem, algum universo de jogos, de literatura. Compartilhe no Discord. Não só o resultado, mas o prompt que você usou.

O prompt também. Verdade. É legal para entender como outras pessoas estão interagindo com a inteligência artificial.

E agora que organizamos um arquivo para dados e outro arquivo para lógica, compartilhe também os arquivos dados. js. Isso será legal porque conseguimos visualizar o código de vocês.

Caso vocês tenham errado algo, mande para nós no Discord. Hoje, às 18h30, vamos ter uma live incrível sobre carreira. Estávamos conversando nos bastidores sobre as diferenças de desafios que temos na nossa área de tecnologias.

Uma pessoa trabalha com uma linguagem, outra, com outra e resolve um problema e outro que não tem nada a ver. É uma área diversa, você vai aprender muito. Já coloca na sua agenda hoje, às 18h30, participar da live sobre carreira da Imersão que está incrível.

É isso, pessoal? É isso. Então, eu te espero amanhã na quarta aula.

Estamos chegando ao final. Estamos chegando ao final da Imersão. Estou na 4ª aula, o coração está apertado, mas feliz, porque amanhã vamos ter um desafio incrível, incrível.

Fique ligado.