O projeto está inativo

Armazenamento de dados no Cordova: Criando uma aplicação de lembretes

Aprenda a utilizar o IndexedDB em aplicações Cordova para armazenar informações localmente. Para demonstrar esse recurso, neste exemplo criaremos uma aplicação de lembretes. Confira!

1 - Apresentação do projeto

Conteúdo de apoio

O armazenamento de dados localmente é uma necessidade frequente de aplicações mobile. Aqui utilizaremos uma solução de armazenamento chamada IndexedDB, que faz parte da API do HTML5 e, portanto, pode ser usado também em aplicações web.

O IndexedDB é um banco de dados não relacional capaz de armazenar informações em diferentes formatos (não tabular).

Para exemplificar o uso dessa funcionalidade criaremos uma aplicação de lembretes (notas pessoais) que contará com duas telas: listagem e cadastro de lembretes. A sequência de imagens abaixo ilustra as telas da aplicação em modo responsivo:

Tela 1: Página inicial da aplicação Tela 2: Página de cadastro de lembretes Tela 3: Validação de campo obrigatório no cadastro de lembretes

Como estamos usando Cordova, que se baseia em HTML, CSS e JavaScript, a aplicação também pode ser acessada em browsers com diferentes dimensões, como mostra a Figura 1.

Aplicativo visualizado no browser
Figura 1. Aplicativo visualizado no browser

Para que a interface se adapte a diferentes tamanhos de tela, utilizamos o recurso de Flexbox do CSS3, que veremos na prática mais adiante neste exemplo.

Sugestão de conteúdo

Caso você ainda não esteja familiarizado com o Cordova, sugerimos assistir ao seguinte curso, que lhe introduzirá nos conceitos dessa ferramenta:

Ficou com alguma dúvida?