Depurando aplicativos do IndexedDB

O IndexedDB é um rascunho de trabalho do W3C que permite aos desenvolvedores JavaScript armazenar, pesquisar e recuperar dados no cliente local do usuário, mesmo quando a conectividade com a Internet estiver desabilitada. Esta postagem descreve o IDBExplorer, uma ferramenta que usamos internamente para depurar aplicativos do IndexedDB. O IDBExplorer permite que você exiba esquemas de banco de dados, conteúdo de armazenamento de objetos e detalhes de índices.

Explorando a ferramenta com um aplicativo de exemplo do IndexedDB

Para ilustrar, criei um aplicativo que acompanha as minhas resoluções de Ano-Novo usando o IndexedDB. Ele armazena e acessa as minhas resoluções localmente (no sistema que navega na página da Web) e me permite adicionar ou editá-las. O botão "Done That!” (Concluído!) remove a resolução selecionada da lista e sua representação interna do banco de dados.

O IndexedDB define um banco de dados como um contêiner de informações. Cada banco de dados contém repositórios de objetos, que são repositórios para objetos JavaScript. Cada objeto contém atributos que podem ser consultados com o uso da API. Fazendo uma comparação com os bancos de dados relacionais, os repositórios de objetos equivalem às tabelas e cada objeto JavaScript em um repositório de objetos representa um registro. Entretanto, os objetos armazenados em um repositório de objetos do IndexedDB são tratados como entidades opacas. Além disso, esses objetos não precisam conter as mesmas propriedades.

Se um objeto JavaScript se compara a um registro de banco de dados relacional, as propriedades desse objeto podem ser comparadas a colunas (ou campos) em uma tabela. Consequentemente, o IndexedDB permite que você defina índices que identificam propriedades de objetos que podem ser usadas para pesquisar os registros em um repositório de objetos. Portanto, os índices permitem que você percorra e pesquise os dados do IndexedDB usando os valores de atributo em um objeto JavaScript.

O IndexedDB permite que cada domínio tenha vários bancos de dados. Este exemplo usa um banco de dados: “NewYear” (Ano-novo). O aplicativo armazena as minhas resoluções em um repositório de objetos chamado “Resolutions” (Resoluções) no banco de dados NewYear. Cada resolução é um objeto JavaScript com os seguintes atributos:

• priorityId: Separação das resoluções em diferentes prioridades
• name: Nome da resolução
• occurrenceId: Acompanhamento da frequência com que a ação da resolução deve ser executada
• dueDate: Data de conclusão da resolução
• createdDate: Data interna de quando a resolução foi adicionada ao repositório de objetos
• categoryId: Define o tipo de atividade da resolução

Observe que nem todos os atributos podem ser vistos na interface do usuário do aplicativo. Em alguns casos, eles são usados somente internamente (por exemplo, createdDate).

Veja como a ferramenta IDBExplorer exibe o conteúdo do repositório de objetos "Resolutions":

O repositório de objetos “Resolutions” também contém um índice no atributo priorityId chamado “priorityId”, que permite que o aplicativo consulte objetos usando a propriedade priorityId. As descrições de cada valor da priorityId podem ser encontradas no repositório de objetos “Priorities” (Prioridades) e as descrições dos valores da occurrenceId podem ser encontradas no repositório de objetos “Occurrences” (Ocorrências). Da mesma forma, as descrições dos valores da categoryId podem ser encontradas no repositório de objetos "Categories" (Categorias).

A ferramenta usa uma hierarquia em árvore para ilustrar estas relações:

A ferramenta IDBExplorer mostra que há cinco resoluções no meu banco de dados (duas tarefas de alta prioridade, duas de média prioridade e uma de baixa prioridade).

Usando o aplicativo, posso adicionar uma nova resolução:

O aplicativo recupera os valores dos campos Occurrence, Priority e Category de seus respectivos repositórios de objetos usando cursores e exibe-os para o usuário. A ferramenta IDBExplorer permite que você veja a existência desses valores no repositório de objetos. Por exemplo, a seleção do repositório de objetos Categories exibe as categorias disponíveis e suas descrições:

Você pode atualizar uma resolução selecionando-a na tela "WorkOn" (Fazer) e escolhendo "Edit" (Editar). Depois de fazer as alterações, a seleção do botão “Update” (Atualizar) confirmará as alterações e atualizará os valores no repositório de objetos "Resolutions" (Resoluções).

Usando o IDBExplorer nos seus aplicativos

Você pode incluir a ferramenta IDBExplorer no seu aplicativo estilo Metro ou site. Entretanto, recomendamos que não implante a ferramenta com o seu aplicativo.

Para adicionar a ferramenta aos seu site, copie e descompacte o conteúdo do pacote do IDBExplorer no seu site. O seu aplicativo deverá ser vinculado ao arquivo IDBExplorer.html da pasta do IDBExplorer com o uso de um elemento iframe ou de uma nova janela.

No nosso exemplo, decidimos hospedar o IDBExplorer em um elemento iframe. . Entretanto, para um desenvolvimento normal, recomendamos hospedar esse URI em uma nova janela. Isso permitirá uma experiência lado a lado ao depurar o seu banco de dados e aplicativo sem afetar a interface do usuário do seu site.

Ao hospedar o IDBExplorer, é necessário passar o nome do banco de dados usando a cadeia de caracteres de consulta. Neste exemplo, isso foi feito com o uso do atributo src do elemento iframe:

<iframe id="debuggerId" class="debuggerContainer" src="IDBExplorer/IDBExplorer.html?name=NewYear"></iframe>

Ao planejar a hospedagem dessa funcionalidade em um aplicativo estilo Metro, lembre-se de que os aplicativos estilo Metro são executados em tela inteira. Portanto, você deverá navegar para essa URL em vez de abrir uma nova janela (será necessário adicionar um botão Voltar ao arquivo IDBExplorer.html para poder retornar ao seu aplicativo). Outra opção é adicionar um elemento iframe e exibir a ferramenta nele.

Aproveite a ferramenta e dê a sua opinião sobre ela!

—Israel Hilerio, Ph.D., gerente de programas geral, Internet Explorer