Client Side Storage | Aula 7 – Iniciando com a 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, falamos sobre Web SQL Database e implementamos todas as operações da página de contatos usando esta API.

Você acompanhou a aula passada? Não? Segue então o link para acessá-la [http://blog.sw9.com.br/2018/10/11/client-side-storage-aula-6-web-sql-database-serie-html5/].

O que veremos nesta aula?

Nesta sétima AULA vamos começar a falar sobre outra alternativa de armazenamento de dados do lado cliente. Eu orgulhosamente apresento a API Indexed Database ou se preferir IndexedDb.

Mas peraí, eu sei que você está se perguntando: Mais uma alternativa? Porque ela foi criada? Vale a pena usá-la?

Calma pessoal, todas estas perguntas serão respondidas, e o melhor, assim como fizemos com as outras APIs, também vamos aprender na prática como utilizá-la. Show né? Aí você vai poder tirar suas conclusões e de repente adotá-la como solução para o seu projeto.

Porque o IndexedDb foi criado?

Esta nova opção de armazenamento de dados foi criada com apenas 1 objetivo. Aliar os pontos fortes encontrados na API Web Storage (primeira API que vimos aqui na série) e a API Web SQL Database (segunda API que vimos aqui na série) e deixar para traz os pontos fracos que eles possuem.

Até aqui tudo bem, mas quais os pontos fortes que o IndexedDb absorveu das duas outras APIs?

O IndexedDb usou o poder de armazenamento de objetos no formato chave:valor que a API WebStorage usa com maestria, e somou a ela as características de transação, utilização de índices e modo assíncrono usados pela API Web SQL Database.

Portanto podemos dizer que o IndexedDb é um banco de dados orientado a objetos que permite armazenar coleções de objetos (ObjectStore) de forma transacionada e assíncrona.

O que mais você deve saber?

Durante a preparação desta material e a implementação da página de contatos, eu me deparei com vários pontos interessantes que não podemos deixar de lado. Por este motivo eu decidi reservar + de uma AULA para falar sobre esta API.  Eu acredito que assim os pontos serão melhor absorvidos.  E aqui vai uma dica: se tiver alguma dúvida sobre algum ponto da implementação, não deixe de postá-lo nos comentários.

Siga o WorkFlow padrão para implementação e seja feliz :O

Minha sugestão para você que vai começar a trabalhar com esta API ou até mesmo para quem já teve contato, é seguir o fluxo básico que apresento logo abaixo:

1- Abrir o banco de dados;

2- Criar um object store no banco de dados;

3- Iniciar uma transação e a partir dela produzir uma requisição para realizar alguma operação no banco de dados, seja para gravar dados, recuperar, remover, etc;

4- Aguardar a operação ser completada. Se completada com sucesso um evento específico será disparado, caso contrário será disparado um evento para tratarmos o erro encontrado;

5- Com a operação concluída, fazer alguma coisa com o resultado retornado pela requisição.

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 7 – Iniciando com a API IndexedDB | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.

Hoje vocês tiveram a oportunidade de ter o primeiro contato com a API Indexed Database (mais conhecida como IndexedDb). Vimos o real motivo  dela ter sido criada, os seus pontos fortes, a forma padrão de trabalho (workflow sugerido) e aprendemos a implementar a inicialização do banco de dados, limpeza e gravação de dados usando como base a nossa página de contatos.  Em nosso próximo encontro, vamos evoluir na utilização desta API, implementando as operações de buscar todos os contatos, pesquisar contatos e remover contatos. Se eu fosse você não perderia esta AULA por nada

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

Cloud 9: https://c9.io/login

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/seEHgFjd3f0

Parceria: https://www.tubebuddy.com/pricing?a=sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se