Отладка приложений с программным интерфейсом IndexedDB

Программный интерфейс IndexedDB является рабочим черновиком W3C, позволяющим разработчикам JavaScript хранить, искать и извлекать данные на локальном клиенте пользователя, даже при отключенном интернет-соединении. В этой статье блога описано средство IDBExplorer, которым мы у себя пользуемся для отладки приложений с программным интерфейсом IndexedDB. Средство IDBExplorer позволяет просматривать схемы баз данных, содержимое хранилищ объектов и сведения об индексах.

Подробнее о средстве на примере приложения с интерфейсом IndexedDB

Для наглядности я создал приложение для отслеживания решений на новый год с помощью IndexedDB. В нем я могу локально хранить и просматривать свои решения (через систему просмотра веб-страницы), а также добавлять или редактировать их. Нажатие кнопки "Done That!" (Сделано!) удаляет выбранное решение из списка, а внутреннее представление решения — из базы данных.

Интерфейс IndexedDB определяет базу данных как вместилище информации. Каждая база данных содержит хранилища объектов, являющиеся репозиториями для объектов JavaScript. Каждый объект содержит атрибуты, которые можно запросить с помощью API-интерфейса. Если вы знакомы с реляционными базами данных, то вам известно, что хранилища объектов могут быть приравнены к таблицам, а каждый объект JavaScript в хранилище объектов представляет запись. Однако объекты, хранящиеся в хранилище объектов с интерфейсом IndexedDB, рассматриваются как непрозрачные сущности. Кроме того, эти объекты не обязательно содержат одинаковые свойства.

Если объект JavaScript аналогичен записи в реляционной базе данных, то свойства этого объекта можно считать столбцами (или полями) в таблице. В результате интерфейс IndexedDB позволяет определять индексы, идентифицирующие те свойства объектов, которые можно использовать для поиска записей в хранилище объектов. Таким образом, индексы позволяют перебирать и искать данные IndexedDB с помощью значений атрибутов на объекте JavaScript.

Интерфейс IndexedDB позволяет каждому домену иметь несколько баз данных. В этом примере использована одна база данных: NewYear (Новый год). Приложение хранит мои решения в хранилище объектов под названием Resolutions (Решения) внутри базы данных NewYear (Новый год) . Каждое решение является объектом JavaScript со следующими атрибутами:

• priorityId: делит решения по приоритетности
• name: имя решения
• occurrenceId: отслеживает частоту выполнения действия, касающегося решения
• dueDate: дата выполнения решения
• createdDate: внутренняя дата добавления решения в хранилище объектов
• categoryId: определяет тип деятельности для решения

Обратите внимание, что не все атрибуты видны из интерфейса приложения. В ряде случаев они используются только внутренне (например, createdDate).

Вот как средство IDBExplorer отображает содержимое хранилища объектов Resolutions (Решения):

Хранилище объектов Resolutions (Решения) содержит также индекс на атрибуте priorityId под названием priorityId, который позволяет приложению запрашивать объекты с помощью свойства priorityId. Описания каждого значения priorityId можно найти внутри хранилища объектов Priorities (Свойства), а описания значений occurrenceId — внутри хранилища объектов Occurrences (Вхождения). Аналогично описания значений categoryId можно найти внутри хранилища объектов Categories (Категории).

Средство использует иерархию дерева, чтобы проиллюстрировать эти взаимосвязи:

Средство IDBExplorer показывает, что в моей базе данных присутствуют пять решений (две задачи высокого приоритета, две среднего, одна низкого).

Используя приложение, я могу добавить новое решение:

Приложение извлекает значения для полей Occurrence, Priority и Category из соответствующих хранилищ объектов с помощью курсоров и показывает их пользователю. Средство IDBExplorer позволяет посмотреть, в каком виде эти значения существуют в хранилище объектов. Например, выбрав хранилище объектов Categories, можно просмотреть имеющиеся категории и их описания:

Можно обновить разрешение, выбрав его на экране WorkOn (В работе), а затем Edit (Изменить). После внесения изменений и нажатия кнопки Update (Обновить) в хранилище объектов Resolutions (Решения) будут применены изменения и обновлены значения.

Использование IDBExplorer в приложениях

Можно добавить средство IDBExplorer в свои приложения в стиле Metro или на веб-сайт. Однако мы не рекомендуем развертывать средство с приложением.

Чтобы добавить средство на свой сайт, скопируйте и разархивируйте пакет IDBExplorer на свой сайт. Вашему приложению понадобится использовать ссылку на файл IDBExplorer.html, содержащийся внутри папки IDBExplorer, либо через элемент iframe, либо через новое окно.

В нашем примере мы решили разместить IDBExplorer внутри элемента iframe. . Однако для обычной разработки мы рекомендуем размещать этот URI внутри нового окна. Это позволит вам получить сопутствующий опыт при отладке ваших базы данных и приложения, не затрагивая пользовательский интерфейс сайта.

При размещении средства IDBExplorer вам понадобится передать имя базы данных с помощью строки запроса. В данном примере это было сделано с помощью атрибута src элемента iframe:

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

Планируя размещение этой функции в приложениях в стиле Metro, помните, что эти приложения работают в полноэкранном режиме. В результате следует перейти по этому URL-адресу, а не открывать новое окно (вам понадобится добавить кнопку Back (Назад) к файлу IDBExplorer.html, чтобы иметь возможность вернуться к приложению). Либо можно добавить элемент iframe и отображать средство в нем.

Надеемся, что средство вам понравится, и ждем ваших откликов!

— Израэль Хилерио (Israel Hilerio), доктор наук, старший руководитель программы, Internet Explorer