Client Side Storage | Aula 8 – Evoluindo com API IndexedDB | Série HTML5 | SW9
Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)
Dando continuidade a MEGA Série sobre HTML5. O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.
Neste novo conjunto de Aulas venho abordando tudo o que você precisa saber sobre armazenamento de dados do lado cliente (Client Side Storage). E o melhor: veremos tudo isso na prática.
O que vimos na aula passada?
Na aula passada, começamos a falar sobre a API Indexed Database, ou se preferir IndexedDb. Falamos por qual razão ela foi criada, principais características, fluxo de trabalho padrão e na sequencia partimos para a parte prática, implementando as operações de inicialização do banco de dados, limpeza e gravação de contatos.
Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2018/10/23/client-side-storage-aula-7-iniciando-com-api-indexeddb-serie-html5-sw9/].
O que veremos nesta aula?
Nesta AULA 8 vamos evoluir na utilização da API IndexedDb. Desta vez vamos implementar, em nossa página de contatos, as operações de buscar todos os contatos (getAll), pesquisar contatos a partir de termos digitados pelo usuário, e para finalizar criaremos uma função para remover um contato selecionado pelo usuário. Durante o processo, vocês vão aprender a trabalhar com cursor, índices e os métodos get e delete.
A partir desta ponto, tenho certeza que vou te ajudar melhor propondo um jogo de perguntas e respostas. Vou imaginar algumas perguntas que você poderia fazer, e popor a reposta para cada uma delas. Com base nesta dinâmica, você vai entender as alternativas e a melhor implementação quando estiver usando IndexedDb.
Vamos ao jogo
O que você pode fazer se quiser …
1- Trazer todos os itens armazenados em um determinado ObjectStore?
Aqui no nosso caso, queremos trazer todos os contatos armazenados.
Existem duas formas de se fazer isso:
1.1. Uso de Cursor: a API indexedDb possui o recurso de cursor para trazer dados armazenados no banco de dados. Existem dois métodos disponíveis para quem deseja trabalhar com cursor. O primeiro é chamado de openCursor e o segundo openKeyCursor.
openCursor Vs openKeyCursor
O openCursor permite abrir um cursor e trazer todas as propriedades de um objeto armazenado, já o openKeyCursor permite abrir um cursor que traz apenas as chaves do objeto.
1.2. Uso do método getAll: usando este método é possível trazer todos os objetos armazenados de uma únicas vez, sem precisar navegar entre os objetos, como acontece com o cursor. Além do getAll ser mais performático, ele retorna um único array contendo todos os objetos armazenados.
Importante: além do getAll() também existe o método getAllKeys().
Para a nossa AULA vamos usar o cursor, mais especificamente o openCursor, para trazermos todos os contatos armazenados no banco de dados.
Tudo bem. Mas como ficam as pessoas que querem saber como usar o getAll? Pensando nisso eu compartilho com vocês um trecho de código com a implementação desta alternativa:
var transaction = database.transaction(["contacts"]); //Modo readonly var objectStore = transaction.objectStore("contacts"); var request = objectStore.getAll(); request.onsuccess = function(event) { console.log('Contatos retornados', event.target.result); //event.target.result = array contendo todos os contatos armazenados }
2- Trazer o contato que corresponde a uma chave específica?
Para este cenário, a melhor alternativa é utilizar o método get, que pode receber como parâmetro a chave primária, definida no momento da criação da collection (createObjectStore), ou algum índice criado durante a chamada ao evento onupgradeneeded.
Exemplo: objectStore.get(2);
3- Fazer uma busca por nome e telefone?
Neste caso criamos um índice composto, para na sequencia utilizá-lo em conjunto com cursor para fazermos uma busca na collection contatos.
Mas como fazer isso?
Em primeiro lugar criamos um índice da seguinte forma:
objectStore.createIndex('nome_telefone',['nome','telefone'],{unique:false});
Lembrando que este código deve estar dentro do evento onupgradeneeded.
Na sequencia usamos este índice em conjunto com IDBKeyRange.only + cursor. Ficaria assim:
var transaction = database.transaction(['contacts']); var objectStore = transaction.objectStore('contacts'); var index = objectStore.index("nome_telefone"); var filter= IDBKeyRange.only(['Paulo', 'xx-xxxx-xxxx']); var searchByName = index.openCursor(filter);
Você vai saber mais sobre o recurso IDBKeyRange aqui neste conteúdo.
4- Fazer uma busca por nome ou email?
Pessoal, a solução para este caso será explicada na prática. No vídeo que preparei para vocês.
5- Buscar contatos com base em alguma faixa de valores?
A API IndexedDb permite fazer pesquisas mais avançadas, como por exemplo buscar valores considerando um determinado intervalo (range). Isso é possível graças ao recurso IDBKeyRange. Legal né?
No vídeo de hoje eu explico passo a passo a utilização do IDBKeyRange.only(x)
Logo abaixo segue uma tabela com as possíveis combinações.
Código | Range | Similar a |
---|---|---|
IDBKeyRange.only(x) | = x | WHERE campo = x |
IDBKeyRange.bound(x, y) | >= x && <= y | WHERE campo1 >= x AND campo1 <= y |
IDBKeyRange.bound(x, y, true, true) | > x && < y | WHERE campo1 > x AND campo1 < y |
IDBKeyRange.bound(x, y, true, false) | > x && <= y | WHERE campo1 > x AND campo1 <= y |
IDBKeyRange.bound(x, y, false, true) | >= x && < y | WHERE campo1 >= x AND campo1 < y |
IDBKeyRange.lowerBound(x) | >= x | WHERE campo1 >= x |
IDBKeyRange.lowerBound(x, true) | > x | WHERE campo1 > x |
IDBKeyRange.upperBound(x) | <= x | WHERE campo1 <= x |
IDBKeyRange.upperBound(x, true) | < x | WHERE campo1 < x |
Agora chegou o momento de assistirmos a AULA em vídeo. Mas antes dêem uma olhada em [Conclusão] e [Links].
[Conclusão]
Na aula de hoje [Client Side Storage | Aula 8 – Evoluindo com API IndexedDB | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.
Hoje vocês tiveram a oportunidade de aprender a buscar todos os dados armazenados em uma collection (ObjectStore), realizar pesquisas e remover itens da collection. Tudo isso passo a passo e de forma prática, usando a página de contatos que construímos junto com vocês. Legal né? :-O
Está disponível na minha área de downloads o projeto parcial. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.
Dentro da minha área de Downloads, procure pela pasta HTML5/STORAGE. O resto é com vocês
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
PlayList Cloud 9: https://goo.gl/7aQbD6
PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
Link do vídeo: https://youtu.be/5CKWuIcP3JA
Parceria: https://www.tubebuddy.com/pricing?a=sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário