Primeiras aulas do curso JavaScript: Salvando dados localmente com IndexedDB

JavaScript: Salvando dados localmente com IndexedDB

Guardando negociações offline com IndexedDB - Relembrando

Olá, seja bem-vindo!

Esta é a terceira parte do curso de JavaScript Avançado. Nós daremos continuidade ao mesmo projeto dos cursos anteriores. Então, recomendamos que você tenha feito os cursos anteriores e não caia aqui de paraquedas.

Vamos relembrar como subir a aplicação. Nós usaremos o framework aberto no Visual Studio Code.

Você pode baixar o projeto do curso anterior e continuar seus estudos. Se você também montou seu projeto durante a realização da segunda parte, também pode utilizá-lo.

No exercício obrigatório, você encontra infraestrutura necessária para subirmos nossa aplicação.

No Terminal, vamos entrar na minha pasta de trabalho.

~flavio$ cd Desktop/aluraframe/
aluraframe flavio$ cd server/
server flavio$ npm start

Após subirmos a aplicação, vamos digitar localhost:3000 no navegador e veremos que ela já está rodando.

aplicacao rodando no navegador

Com a Aluraframe, nós podemos cadastrar e incluir negociações. Podemos também importar uma API na Web ou apagá-las. Por mais que o escopo da aplicação pareça simples, quem passou pelas partes anteriores do curso viu que aplicamos muitos conceitos avançados de JavaScript - da versão do ECMAScript 2016 adiante.

Nesta primeira aula, já começaremos com o seguinte problema: importamos negociações de APIs externas - fornecidas por nós por meio do servidor. Mas poderíamos usar uma API da internet, de um banco ou de bolsas de valores, por exemplo. No entanto, após cadastrarmos os dados, se recarregarmos a página, as informações da negociação se perdem. Nós encontraremos uma forma de reter os dados quando a página for recarregada. Porém, nós não criaremos um Back-end para recebê-los, mas sim, usaremos um banco de dados que todo navegador possui.

Abordaremos, nesta aula, o assunto persistência com o banco de dados bastante famoso no mercado e certificado pela W3C, IndexedDB (IDB).

Guardando negociações offline com IndexedDB - Browser possui banco de dados? Conheça o IndexedDB!

Antes de integrarmos o IndexedDB na nossa aplicação, vamos estudar a API separadamente e entender o seu funcionamento. Depois, faremos a integração. Dentro da pasta CLIENT, nós criaremos o arquivo aprendendo_indexeddb.html. Usaremos o plugin Emmet, e digitando !, o código básico do HTML será preenchido automaticamente:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Aprendendo IndexedDB</title>
</head>

<body>
</body>
</html>

Primeiramente, veremos o funcionamento da API, depois pensaremos na questão de organização e boas práticas...

Voltaremos para o navegador, e no Console, digitaremos window.

Window {external:Object, document: document, negociacaoController: negociacaoController, speechSynthesis: speechSynthesis...}

Conseguimos ver o escopo global do JavaScript. Em seguida, usaremos a seguinte instrução:

window.indexedDB

E a saída será:

IDBFactory {}

Trata-se de uma "fábrica" para criarmos bancos no IndexedDB - temos a opção de acessá-lo também diretamente.

De volta ao VS Code, adicionaremos a tag <script> e abriremos uma conexão com o banco. Na verdade, pediremos uma requisição de abertura - talvez, não funcione:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">  
</head>
<body>
   <script>

       var openRequest = window.indexedDB.open("aluraframe",1);

   </script>
</body>

O método indexedDB.open() retorna uma instância de IDBOpenDBRequest, ou seja, uma requisição de abertura do banco. Precisaremos lidar com um tríade de eventos disparados quando tentarmos acessar um banco no IndexedDB. A seguir, adicionaremos a tríade:

Vamos começar a trabalhar com openRequest.onupgradeneeded:

<body>
    <script>

        var openRequest = window.indexedDB.open('aluraframe',1);

        openRequest.onupgradeneeded = function(e) {

                console.log('Cria ou altera um banco já existente');
        };

    </script>
</body>

Passamos para onupgradeneeded uma função que recebe um evento (e). E no console, adicionamos uma mensagem que informa sua utilidade: Cria ou altera um banco já existente. Pediremos para abrir pela primeira vez o aluraframe, que será criado no meu navegador. O código de atualização também será no onupgradeneeded. Minha sugestão é que você não execute o código ainda. Primeiro, vamos terminar de escrevê-lo.

Em seguida, trabalharemos com o onsuccess, que sempre será quando conseguirmos obter uma conexão.

openRequest.onsuccess = function(e) {

           console.log('Conexão obtida com sucesso');
};

E o onerror será executado se tivermos algum tipo de problema ao tentarmos nos conectar com o banco.

openRequest.onerror = function(e) {

           console.log(e.target.error);
};

Observe que, no console, vamos imprimir e.target.error - e assim, conseguimos descobrir qual erro ocorreu. Mas nos cursos anteriores, aprendemos a utilizar arrow functions, então, é por elas que substituiremos as funções anônimas.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  
</head>
<body>
    <script>

        var openRequest = window.indexedDB.open('aluraframe',1);

        openRequest.onupgradeneeded = e => {

            console.log('Cria ou altera um banco já existente');
        };

        openRequest.onsuccess = e => {

            console.log('Conexão obtida com sucesso');
        };

        openRequest.onerror = e => {

            console.log(e.target.error);
        };

    </script>
</body>

Nosso código ficou menos verboso. Em resumo: nós pedimos para o IndexedDB abrir o aluraframe, que será criado pela primeira vez. Logo, o onupgradeneeded será executado, depois, será a vez do onsuccess. E se tivermos algum problema, será executado o onerror. A seguir, testaremos no navegador se está tudo certo. Se tudo correr bem, as duas primeiras mensagens serão impressas no Console. Na segunda vez, se executarmos o mesmo programa e o banco já tiver sido criado, ele só imprimirá a mensagem do onsuccess.

Na primeira vez, veremos as seguintes mensagens:

mensagem no console

Agora, veremos se o banco foi criado:

aluraframe no banco

Na aba "Application", é possível ver que o banco foi criado. Se recarregarmos a página, apenas a mensagem de sucesso na conexão será exibida no Console:

conexão com sucesso

Nós vimos como abrir uma conexão com o banco e já entendemos a tríade de eventos disparados com o IndexedDB. Mais adiante, veremos com o interagir com ele.

Guardando negociações offline com IndexedDB - Comunicando-se com o banco usando o IDBDatabase

Vamos gerar uma conexão que será uma instância de IDBDatabase. Primeiramente, criaremos a variável connection e depois, vamos adicioná-la em onsuccess:

<body>
  <script>
      var connection;

      var openRequest = window.indexedDB.open('aluraframe', 1);

      openRequest.onupgradeneeded = e =>  {

             console.log('Criando ou atualizando o banco');
      };

      openRequest.onsuccess = e => {

          console.log('Conexão realizada com sucesso');

          // e.target.result é uma instância de IDBDatabase

          connection = e.target.result;
      };

      openRequest.onerror = e => {

          console.log(e.target.error);
      };

  </script>
</body>

O result será o IDBDatabase, ou seja, uma conexão que estamos guardando dentro da variável connection que está no escopo maior. Mas antes de começarmos a interagir com o banco, adicionaremos uma Object Store, que é bastante semelhantes às tabelas dos bancos de dados relacionais. Dentro da aluraframe teremos várias Object Stores, no entanto, não é correto chamá-las de tabelas, porque elas não possuem esquemas. Diferente de um banco de dados relacional, em que existem colunas destinadas a texto, números e dados, numa Object Store, podemos gravar objetos de diferentes formatos, contanto, que sejam válidos no JavaScript. E como fazemos para criar a Object Store? Assim que criarmos o banco, criaremos no onupgradeneeded uma Object Store chamada Negociacoes. Porém, nós só teremos acesso à variável 'connection' no onsuccess - que só é executado depois do onupgradeneeded. Não há problema, também temos acesso à conexão dentro de 'onupgradeneeded', através de 'e.target.result', que atribuiremos à variável minhaConnection:

openRequest.onupgradeneeded = e =>  {

       console.log('Criando ou atualizando o banco');

       var minhaConnection = e.target.result;
       minhaConnection.createObjectStore('negociacoes');
};

Do minhaConnection, chamamos a Object Store que receberá o nome negociacoes. Agora, temos acesso tanto a onupgradeneeded como onsuccess. Vamos recarregar a página e ver com ficou:

conexão obtida mas com erro

Vemos a mensagem de que a conexão foi bem-sucedida, porém, ele não chamou novamente o onupgradeneeded, no entanto, esta ação precisa ser realizada, porque além de criarmos o banco, uma Object Store será gerada. Se observarmos a aba "Application" no navegador, confirmaremos que nenhuma delas foi criada. Como resolveremos isto?

Vamos analisar a linha da variável openRequest:

var openRequest = window.indexedDB.open('aluraframe', 1);

O valor 1 passado como parâmetro é referente à versão do banco, ou seja, no caso, utilizamos a versão 1. Isto significa, que quando executarmos o código novamente o onupgradeneeded só será invocado caso a versão passada no parênteses seja maior do que a exibida no banco criado:

versão maior do que o banco criado

Se a versão for a mesma, ele não entende que a atualização é necessária. Então, vamos alterar o valor para 2:

var openRequest = window.indexedDB.open('aluraframe', 2);

duas mensagens no console

Agora, veremos as duas mensagens exibidas no Console. Se acessarmos a aba "Application", veremos que a Object Store negociacoes foi criada, mas ainda está vazia.

object store negociacoes

Ao recarregarmos a página novamente, o onupgradeneeded não será chamado novamente, porque a versão do banco continuará sendo a mesma.

Sobre o curso JavaScript: Salvando dados localmente com IndexedDB

O curso JavaScript: Salvando dados localmente com IndexedDB possui 234 minutos de vídeos, em um total de 83 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda JavaScript acessando integralmente esse e outros cursos, comece hoje!

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas