От нуля до межпланетного героя

1656592332 ot nulya do mezhplanetnogo geroya

Карсон Фармер

Интересное руководство по началу работы с ĐApps на браузерных IPFS

1*GGQAuJS_S0gonQc3goq0Vw
«Если вы можете прочесть это, поздравляем! Используемый вами архив все еще знает о тексте наведения курсора»!

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

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

Архивирование драгоценных камней Интернета

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

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

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

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

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

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

Начинаем

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

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

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

git clone  xkcd-dappcd xkcd-dapp

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

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

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

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

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

yarn installyarn buildyarn start

Вы должны увидеть достаточно минимальную (пустую страницу) ĐApp с нижним колонтитулом и не многое другое. Теперь откройте консоль разработчика Javascript (Chrome:Ctl+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 для отображения.

Готово!

Уборка вещей

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

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

1*2DSOGJ4sBp5Njb7hN3RF_Q

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

Подведению

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *