Client Side Storage | Aula 3 – Preparação | 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 abordaremos 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 veremos nesta aula?
Nesta terceira AULA sobre [Client Side Storage], vou dar sequencia aos ajustes da página de contatos. Meu planejamento inicial era implementar na AULA de hoje, a primeira tecnologia de armazenamento de dados do lado cliente, no entanto, devido a quantidade de ajustes que precisamos fazer, achei melhor explicar passo a passo estes ajustes para que, na próxima AULA, já seja possível falar sobre a primeira tecnologia Client Side Storage.
Bom, e quais serão os ajustes/implementações que iremos ver neste AULA? Vamos trabalhar em 3 frentes distintas. São elas:
1- Criar o esqueleto de nossa camada de abstração para manipulação de dados. Com esta abordagem, sempre chamaremos as mesmas funções, independente do tipo de tencologia de armazenamento que o usuário escolher.
A implementação/verificação correspondente a cada tipo de tecnologia de armazenamento de dados, será realizada dentro de cada uma destas funções.
Vamos definir as seguintes funções para esta camada de abstração:
a. iniDb: responsável por fazer a incialização de cada tipo armazenamento;
b. cleanDb: responsável por limpar a base de dados;
c. save: responsável por gravar cada contato;
d. getAll: responsável por obter todos os contatos gravados e na sequencia chamar uma função para renderizar/exibir os contatos em nossa Grid;
e. search: responsável por realizar a busca de contatos a partir de um termo informado pelo usuário. Na sequencia, vai chamar uma função para renderizar/exibir os contatos encontrados em nossa Grid;
f. renderLine: responsável por exibir o último contato gravado no final da Grid (como último item de nossa Grid);
g. renderAll: responsável por limpar a nossa Grid e na sequencia carregar todos os contatos na mesma Grid;
Nesta AULA eu vou apenas criar as definições das funções [iniDb], [cleanDb], [save], [getAll], [search] e vou implementar de forma integral as funções [renderLine] e [renderAll].
2. Implementar os eventos da página de contatos. Vamos trabalhar no evento de submit de formulário, no evento que vai disparar a pesquisa de contatos e no evento para remover contatos da grid.
3. Implementar a interface FormData, recurso que surgiu com o HTML5 e que permite manipular os dados do formulário que foi submetido.
Fluxo de trabalho: Após o usuário clicar no botão [Gravar Contato], vamos criar um objeto FormData e usar o método get para recuperar cada campo preenchido. No nosso caso vamos manipular os campos [nome], [email] e [telefone].
Como vocês puderam perceber, teremos bastante trabalho pela frente. Na sequencia dêem uma olhada na conclusão e seção de links, e por último confiram o vídeo
[Conclusão]
Na aula de hoje [Client Side Storage | Aula 3 – Preparação | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.
Nesta terceira AULA, seguimos com alguns ajustes em nossa página de contatos, criamos o esqueleto de nossa camada de abstração e definimos os eventos necessários para o correto funcionamento da página de contatos.
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/_krEsY4XPyY
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