Сначала сделайте свое приложение офлайн

В первой части этой серии статей о создании приложения Cloudant Envoy, использующего Facebook для аутентификации, я показал, как:

  • Создайте приложение разработчика Facebook, чтобы предоставить нам коды аутентификации client_id и client_secret.
  • Используйте PassportJS, чтобы выполнять большую часть работы по переключению браузера между нашим приложением и Facebook, пока пользователь входит в систему.
  • Используйте Cloudant Envoy для обслуживания нашего статического контента и кода Passport, а также для его основной функции — выступать в качестве промежуточного программного обеспечения, с которым будет реплицироваться наше клиентское приложение.
  • Используйте одноразовые токены с ограниченным сроком действия для передачи учетных данных Envoy с сервера клиенту.

Все вышеперечисленное — всего лишь средство подачи вашего контента и ведения базы пользователей. Работа по созданию самого приложения еще впереди, и ее можно рассматривать как отдельное упражнение: код на стороне клиента (чтение и запись из его локального хранилища данных) может быть создан независимо и может быть подключен к основному фреймворку в последнюю минуту. .

Приложение, которое я создаю, называется Audiomark. Идея для этого пришла из разговора с моим другом, который работает школьным учителем. Как и большинство учителей, он оценивает большое количество письменных работ, обычно записывая комментарии в книгах своих учеников. Он хотел средство для записи аудиофрагментов, распечатки QR-кода на своем принтере для этикеток, а затем приклеивания этикетки к книге — избавляя себя от необходимости писать столько комментариев вручную.

Соберите проекты с открытым исходным кодом

Код на стороне клиента должен записывать звук на веб-странице, сохранять его в автономном режиме, а затем синхронизировать с Cloudant Envoy. Вот технологии, которые я выбрал:

  • PouchDB предоставляет общий API для хранения в ряде браузеров. Он с радостью синхронизируется напрямую с Cloudant или через Cloudant Envoy.
  • MSR обеспечивает кроссбраузерную аудиозапись. К сожалению, Safari не поддерживает веб-API, на который опирается эта библиотека, поэтому устройства Apple не учитываются.
  • QRCode.js позволяет закодировать строку в виде QR-кода на стороне клиента. Сначала я обратился к веб-API, но эта библиотека позволяет выполнять весь процесс на стороне клиента.
  • MaterializeCSS предоставляет основу для создания HTML-разметки, удобной для мобильных устройств.

Как это работает?

Предполагая, что вы вошли в приложение через Facebook, создается локальная база данных PouchDB, которая настроена на синхронизацию с Envoy в одном направлении: от клиента к серверу. Любые новые данные, добавленные в базу данных PouchDB, будут синхронизированы с Envoy, а оттуда — с Cloudant. Неважно, находитесь ли вы в автономном режиме или у вас плохое сетевое соединение — вы можете продолжать записывать аудио и распечатывать QR-коды.

После загрузки страницы значок микрофона становится кликабельным. При нажатии на значок микрофона записывается 20-секундный (максимум) аудиоклип. Вы можете остановить запись в любое время, снова щелкнув значок. В конце записи библиотека MSR отправляет нам двоичный объект blob, представляющий только что записанный WAV-файл. Как мы можем хранить двоичные BLOB-объекты в автономном режиме? К счастью, PouchDB может хранить двоичные данные в виде вложений к документам JSON, которые он обычно хранит. Это просто:

function saveBlob(blob) 
  var id = genid();
  var doc = {
    _id: id,
    ts: new Date().getTime(),
    _attachments: {
      'audio.wav': {
        content_type: blob.type,
        data: blob
      }
    }
  };
  return db.post(doc);
});

Здесь мы генерируем наши собственные идентификаторы базы данных, потому что мы хотим, чтобы размер идентификатора был небольшим. Идентификатор станет частью URL-адреса, который будет преобразован в QR-код — чем длиннее URL-адрес, тем более подробным должно быть изображение.

После того, как мы сгенерировали наш идентификатор, мы знаем, каким будет URL-адрес, поэтому мы можем продолжить и сгенерировать QR-код:

var url = location.origin + '/w/' + userid + '/' + id;
qrcode.clear();
qrcode.makeCode(url);

Здесь стоит отметить, что, хотя мы настроили базу данных PouchDB на синхронизацию с облаком, мы не знаем, достигли ли данные еще сервера; однако это не мешает нам распечатать QR-код, содержащий URL-адрес. Пока данные синхронизируются до того, как студент просканирует QR-код, все будет в порядке. Было бы совершенно нормально взять свой ноутбук и принтер в удаленное место, записать множество клипов, распечатать несколько этикеток, а затем синхронизировать их с облаком, когда вы вернетесь домой. В этом преимущество подхода Сначала офлайн — 100% время безотказной работы, даже при ограниченном или нулевом сетевом подключении.

Когда клип записан, его можно распечатать, нажав значок печати. CSS для вывода print скрывает все, кроме скрытого QR-кода.

Нажатие кнопки Готово настраивает Audiomark для подготовки к следующей записи.

Преимущества PWA

Поскольку это приложение создано как прогрессивное веб-приложение (PWA), оно может предложить преимущества для современных браузеров, поддерживающих новейшие API. Если сервис-воркеры поддерживаются, приложение кэширует свои активы в автономном режиме, поэтому сайт может перезагружаться без подключения к сети. Приложение визуально масштабируется для работы с форм-факторами мобильных устройств и планшетов и легко добавляется на главный экран телефона. Данные хранятся на устройстве с помощью PouchDB, а QR-коды генерируются на стороне клиента, поэтому приложение является полностью автономным.

Попробуй сам!

Вы можете сами попробовать Audiomark на https://audiomark.mybluemix.net.

Этот пост является второй частью серии из трех частей Аутентификация для приложений Cloudant Envoy. Вы можете просмотреть Часть I, в которой рассказывается о создании статического приложения, записывающего данные локально с помощью PouchDB. Там вы также узнаете, как использовать Cloudant Envoy для хранения пользовательских данных и как использовать PassportJS для аутентификации через Facebook. Теперь, когда вы впервые сделали свое приложение автономным во второй части этой серии, ознакомьтесь с Частью III, где я расскажу, как добавить аутентификацию Twitter в ваше приложение.



Аутентификация для приложений Cloudant Envoy, часть III
Добавление аутентификации Twittermedium.com