Веселое руководство по началу работы с приложениями на основе браузера на IPFS

ĐApps или децентрализованные приложения сейчас в моде, особенно в блокчейне Etherium. Но знаете ли вы, что ĐПриложения также могут работать в межпланатной файловой системе (IPFS)? Вы делаете ставку, и гораздо проще, чем вы думаете, собрать ее и быстро начать работу.

В этом посте мы рассмотрим шаги, необходимые для быстрой и простой работы приложения на основе IPFS. Мы собираемся воспользоваться некоторыми новыми классными инструментами браузера IPFS и моим любимым онлайн-комиксом. Тем самым мы поможем заархивировать ценный ресурс (xkcd!) Для будущих посетителей. Так что в этом посте есть все: интриги, азарт и приверженность будущему Интернета!

Архивирование жемчужин Интернета

Целью этого руководства является создание распределенного веб-клона веб-сайта xkcd. Мы собираемся использовать IPFS для извлечения изображений из архива комиксов xkcd и отображения их в форме, знакомой поклонникам xkcd.

Есть несколько причин, по которым мы можем захотеть сделать что-то подобное. Во-первых, мне нравятся комиксы xkcd, и я всегда ищу повод поиграть с ними. Два, xkcd, наряду с несколькими другими заархивированными ресурсами, доступны через архивы IPFS, что делает их удобным примером. Три, и это важно, создание приложения на основе контента поверх IPFS может помочь в архивировании Интернета!

Что я имею в виду? Что ж, тенденции меняются, интересы теряются, а Интернет - непостоянное место. Добавьте к этому растущие затраты на обслуживание серверов, обновление инфраструктуры и отслеживание последних тенденций, и вы получите рецепт для мертвых ссылок. IPFS и распределенная сеть - отличный способ помочь в борьбе с ссылочной гнилью.

Возьмем, к примеру, наше приложение xkcd ĐApp. Через мгновение мы напишем очень простой код JavaScript, который будет загружать случайный комикс xkcd каждый раз при обращении к нашему приложению ĐApp. И поэтому каждый раз, когда кто-то посещает приложение ĐApp, одноранговый узел, запущенный в их браузере, извлекает этот комикс и временно кэширует этот элемент, давая возможность другим также получить его. Фактически, чем больше мы используем ĐApp, тем лучше оно может распространять и архивировать xkcd.

Чем больше мы получаем доступ к вещам в распределенной сети и используем их через IPFS, тем больше вероятность, что они сохранятся в долгосрочной перспективе - твитните

Это действительно мощная идея: чем больше мы обращаемся к вещам в распределенной сети и используем их через IPFS, тем больше вероятность, что они сохранятся в долгосрочной перспективе. А как насчет вещей, которые важны, но менее популярны (например, исторические документы)? Именно здесь такие вещи, как Filecoin, помогут подобрать слабину. В мире файловых монет вместо того, чтобы полагаться на популярность для сохранения документов и файлов, вы можете заплатить сети за то, чтобы они хранили эти вещи для вас. Это очень крутая идея.

Начиная

Для тех из вас, кто не может ждать, полное приложение Đ доступно в репозитории Textile GitHub. Не стесняйтесь клонировать это и следить за кодом, чтобы облегчить начало работы. А поскольку вы только что сэкономили время, почему бы не посмотреть это отличное видео Хуана Бенета о концепции IPFS, прежде чем двигаться дальше. Вы также можете посмотреть живую версию здесь ».

Для тех из вас, кому нужен пошаговый подход, вот несколько шагов по настройке, которые помогут вам начать работу.

Сначала клонируйте нашу обычную IPFS Шаблон Dapp и перейдите в новый каталог:

git clone https://github.com/textileio/dapp-template.git xkcd-dapp
cd xkcd-dapp

Этот шаблон довольно прост и имеет минимальные зависимости. Большинство зависимостей dev предназначены только для транспиляции JavaScript, чтобы мы могли запускать наше ĐApp в браузере. Для получения подробной информации обо всех этих пакетах обратитесь к соответствующим репозиториям GitHub или свяжитесь с нами, чтобы задать вопрос или два.

Итак, обо всем по порядку, проверьте файл README.md из репозитория. Вы заметите, что это приложение лучше всего работает с window.ipfs, и что вы можете установить веб-расширение IPFS Companion, щелкнув одну из ссылок.

IPFS Companion - это расширение браузера, которое упрощает доступ к ресурсам IPFS путем запуска узла JavaScript IPFS в вашем браузере. Более того, он может отображать встроенный узел IPFS как window.ipfs на каждой веб-странице! Это позволяет нашему приложению определять, существует ли window.ipfs, и соглашаться на его использование вместо создания нашего собственного одноразового узла js-ipfs. Это не требуется для запуска ĐApps, но заставляет их работать лучше (быстрее), и я настоятельно рекомендую установить его.

Но мы не можем ожидать, что пользователи нашего ĐПриложения установят расширение для браузера, прежде чем смогут использовать наше ĐПриложение. Итак, есть хороший модуль JavaScript под названием window.ipfs-fallback, который обнаружит наличие window.ipfs и автоматически вернется к загрузке последней версии IPFS из CDN, если она недоступна. Поэтому при создании Đприложения всегда полезно включить его - и вы получите window.ipfs бесплатно, если таковая имеется. Отлично!

Итак, просто чтобы убедиться, что все работает нормально, давайте продолжим и установим наши необходимые зависимости, а также создадим и запустим наше ĐApp локально. Введите в свой терминал следующее:

yarn install
yarn build
yarn start

Вы должны увидеть довольно минималистичное (пустую страницу) приложение с нижним колонтитулом и больше ничего. Теперь откройте консоль разработчика Javascript (Chrome: Ctrl + Shift + J (Command + Option + Jon Mac), Firefox: Ctrl + Shift + K (Command + Option + Kon Mac), Safari: Command + Option + I) . Вы должны увидеть что-то вроде running js-ipfs/0.29.2 with ID Qm{hash}, где Qm{hash} - длинный буквенно-цифровой хэш, представляющий ваш одноранговый идентификатор.

Поздравляем, вы успешно запускаете приложение ĐApp в децентрализованной сети! А теперь займемся чем-нибудь интересным ...

Получение данных в распределенной сети

Хорошо, давайте добавим некоторые функции в наше ĐApp. Мы начнем с того, что просто выберем случайный комикс xkcd и отобразим его на пустой странице. Достаточно просто, правда? Во-первых, вместо того, чтобы yarn start запускать наше приложение, давайте yarn watch это сделаем так, чтобы любые изменения, которые мы вносим в JavaScript, автоматически отражались при обновлении окна браузера.

Теперь вы можете изменить функцию setup в src/main.js с помощью следующего кода:

Там есть что разобрать, но в основном происходит следующее:

  • Строки 3 и 5 определяют какой случайный комикс выбрать (из нашего архива).
  • Строки 8 и 10 инициализируют одноранговый узел IPFS и подключаются к одноранговому узлу, который, как известно, закрепляет архив xkcd (этот второй шаг не всегда требуется, но я добавил его сюда, чтобы помочь в загрузке ĐApp)
  • Строка 14 на самом деле является «магией» IPFS… она получает файлы с заданным CID и возвращает обещание, которое мы ждем, а затем выполняем некоторую работу в строках с 15 по 27 ...
  • Строки 15 и 16 просто перебирают двоичные объекты, возвращенные на предыдущем шаге, и ищут фактическое изображение PNG.
  • Строки 18 и 20 преобразуют данные двоичного изображения в строку кодирования base64.
  • И, наконец, строки с 22 по 27 создают элемент изображения и добавляют его в «основной» div для отображения.

Выполнено!

Убирать вещи

Отсюда любые дополнительные изменения просто делают приложение более похожим на исходную веб-страницу комиксов xkcd.

Я не буду вдаваться в подробности в этом посте, но вы можете посмотреть репозиторий xkcd-dapp-demo, чтобы увидеть полный пример кода. Там я добавил навигационные кнопки и стиль с веб-сайта xkcd, а также несколько ссылок на правильную атрибуцию, информацию о лицензии и другие полезности. У нас даже есть забавные комментарии при наведении указателя мыши! Это почти весь ванильный JavaScript для ES6, и я хорошо использую шаблоны async / await, чтобы сделать код красивым и читабельным.

Итак, как видите, начать создавать приложения на IPFS относительно легко. Наше приложение xkcd ĐApp работает лучше всего, когда оно запускается а) локально (например, через yarn start) и б) с включенным расширением браузера IPFS Companion. Если хотите, вы можете запустить локальный демон IPFS и запустить ipfs add -r dist/, чтобы добавить все ĐApp в IPFS. Теперь вы можете протестировать его через локальный шлюз IPFS: http://localhost:5001/ipfs/Qm{hash}/ (если ваш код не идентичен моему, ваш хэш CID может отличаться, используйте один вывод из приведенной выше команды ipfs add).

Подведение итогов

Мы надеемся, что наш шаблон обеспечит быстрое и легкое средство для загрузки дополнительных приложений, и что сообщество приложений на основе IPFS будет продолжать расти. В Textile мы очень хотели бы поддержать сообщество Đприложений вокруг IPFS, поэтому, если вы решите использовать наш шаблон, дайте нам знать, и мы будем рады добавить ссылку на репозиторий наших шаблонов. Мы также будем следить за вилками и стараемся продвигать их как можно лучше.

Мы надеемся, что вам понравилось наше быстрое введение в ĐApps на IPFS. Если вам понравилось, приходите зацените нас и узнайте больше о наших планах. Пока вы это делаете, перейдите в Список ожидания текстильных фотографий, чтобы запросить ранний доступ к совершенно новому способу управления вашими фотографиями, который также работает в IPFS и в постоянной сети.