Внутри браузера Beaker мы реализовали набор новых веб-API для подключения приложений к одноранговой сети. Это часть 1 из серии статей о том, как создавать одноранговые веб-приложения.

Недавно я опубликовал одноранговое приложение для фотографий, используя браузер Beaker. Сегодня мы подробно рассмотрим, как было создано приложение, и как сделать так, чтобы оно понравилось другим одноранговым веб-приложениям.

Вступление

Приложение Photos использует преимущества Beaker’s DatArchive API, в котором есть методы для чтения и записи файловой системы пользователя, а также для публикации файлов в одноранговой сети.

Требования к приложению

  1. Пользователь должен иметь возможность создавать альбомы и загружать фотографии в свои альбомы.
  2. Пользователь должен иметь возможность делиться отдельными альбомами с друзьями.

Где будут храниться фотографии?

Если бы вы создавали это приложение в традиционном Интернете, вы бы хранили фотографии пользователей на собственном сервере или в статическом хранилище, например Amazon S3 или Google Cloud Storage.

Но внутри Beaker публикация файлов в одноранговой сети так же проста, как использование встроенного веб-API. Поэтому вместо загрузки изображений на удаленный сервер мы можем размещать фотографии прямо с устройства пользователя!

Создание приложения

Файловая структура приложения выглядит так:

/css
  -- album.css // CSS for the album page
  -- base.css // shared CSS
  -- main.css // CSS for the main app
/js
  -- album.js
  -- index.js
album.html
index.html

index.html используется как интерфейс для основного приложения, а album.html обеспечивает интерфейс для страниц альбома.

То, как используется album.html, может вас удивить. Мы поговорим о том, как это работает, на шаге 1 ниже.

Шаг 1. Разрешите пользователям создавать альбомы

Шаг 1 довольно прост, но он требует от нас понимания того, чем одноранговые веб-приложения отличаются от традиционных веб-приложений.

Если бы мы создавали это приложение в традиционном Интернете, мы бы хранили каждый альбом где-нибудь на удаленном сервере. Но в нашем приложении каждый альбом будет представлен как новый одноранговый веб-сайт, который хранится и размещается на устройстве пользователя.

Поэтому, когда пользователь нажимает кнопку «Новый альбом», приложение создает новый веб-сайт, представляющий альбом и его фотографии. Это означает, что для того, чтобы поделиться альбомом с другом, все, что вам нужно сделать, это поделиться dat:// URL-адресом альбома!

Для начала добавим click слушателя к кнопке «Новый альбом» в index.html:

document.querySelector(‘.create-album’).addEventListener(‘click’, onCreateAlbum)

Затем мы определим onCreateAlbum, который создаст новый архив данных для хранения всего, что составляет альбом:

Давайте разберем этот фрагмент:

  • В строке 3 мы сначала создаем новый архив данных, который служит веб-сайтом специально для альбома.
  • В строке 10 мы отслеживаем альбомы пользователя, сохраняя их в localStorage.
  • В строке 13 мы читаем album.html из архива Dat основного приложения и записываем его в index.html в архиве альбома. Это означает, что album.html из архива основного приложения будет фактически служить главной страницей для каждого создаваемого нами альбома.

Если вы просмотрите источник для album.html, вы увидите, что есть теги <script> и <link>, которые ссылаются на CSS и JS основного приложения, поэтому, если код нашего приложения когда-либо будет обновлен, страницы альбома будут получать обновления из основного приложения. .

Шаг 2. Реализуйте загрузку фотографий

На каждой странице альбома есть <input type="file">, поэтому в js/albums.js мы добавляем change слушателя для этого входа. Когда фотографии выбраны, мы читаем данные из каждого из выбранных файлов. Затем мы записываем данные изображения в архив альбома.

Примечание: объект архива в приведенном ниже примере исходит из функции настройки, которая устанавливает переменную архива с помощью конструктора Beaker DatArchive:

const archive = new DatArchive(window.location)

Начнем с чтения файлов изображений и их записи в архив альбома. Мы используем FileReader для получения данных с каждой выбранной фотографии, а затем используем метод Beaker DatArchive.writeFile для записи в архив.

Шаг 3. Отобразите альбомы пользователя на главной странице приложения

Напомним, что на шаге 1, когда мы создали альбом, мы добавили URL-адрес альбома в массив albums, а затем записали строковое представление массива в localStorage.

Чтобы отобразить альбомы, мы прочитаем значение элемента albums в localStorage, а затем сделаем предварительный просмотр URL каждого альбома в массиве.

В нашей функции настройки в js/index.js мы начнем с чтения данных альбомов изlocalStorage:

Затем мы сделаем предварительный просмотр каждого альбома в главном приложении:

Обратите внимание на строку 23, что мы используем атрибут url в альбоме. У каждого архива есть собственный URL-адрес, поэтому мы можем вставлять изображения из архива, как любую другую веб-страницу.

Вот и все! Теперь у нас есть приложение, которое отображает предварительный просмотр альбомов, создает фотоальбомы, которыми можно поделиться, и размещает фотографии локально на устройстве пользователя!

Попробуйте сами в Beaker! URL приложения:

dat://f0abcd6b1c4fc524e2d48da043b3d8399b96d9374d6606fca51182ee230b6b59/

Или просмотрите полный исходник.

Ресурсы для создания однорангового приложения