Как добавлять изображения в IPFS с помощью node.js и ipfs-core

Что такое IPFS?

IPFS расшифровывается как InterPlanetary File System, это протокол p2p для хранения и обмена данными в распределенной файловой системе.

IPFS не зависит от сервера, что делает ее децентрализованной, поэтому ее легко развернуть и использовать, что хорошо для web3, поскольку это децентрализованный протокол.

IPFS предназначен не только для разработчиков блокчейна, но и для веб-разработчиков, создателей контента и т.д.

Есть несколько терминов, которые используются в ipfs

узел -> думайте о нем как о сервере, каждый узел — это сервер, а каждый пользователь работает на узле.

pin -> вам нужно закрепить файлы, чтобы гарантировать, что доступ к содержимому всегда доступен пользователю, существуют службы закрепления, такие как Pinata или Infura, если вы не закрепите свои файлы, они будут удалены через определенное время.

CID (Content ID) -> это уникальный идентификатор файла, считайте его хэшем/отпечатком пальца файла.

Я рекомендую вам прочитать (документацию IPFS)[https://docs.ipfs.io/concepts/what-is-ipfs/#decentralization], чтобы узнать больше об IPFS.

Вы можете связаться со мной в telegram, если вам нужно нанять Full Stack разработчика или если вам нужен discord бот для вашего сервера.

Вы также можете связаться со мной по discord Appu#9136

Вы можете клонировать репозиторий, если хотите.

Необходимые условия

• Установленный Node.js
• Базовое понимание IPFS
• Установите IPFS CLI

Создание нашего проекта

1. откройте терминал и введите следующее
2. mkdir node-ipfs-tutorial
3. cd node-ipfs-tutorial
4. npm init —y
5. код

Зависимости

• ipfs-core

Для установки зависимостей перейдите в папку вашего проекта, откройте терминал и введите следующее

npm i ipfs-core

Теперь перейдите в ваш package.json и добавьте следующее, мы будем использовать импорт, поэтому добавим «type» : «module».

"type" : "module",
"scripts": {
  "start": "node ./src index.js"
},

Структура файлов проекта

node-ipfs-tutorial/
├── node_modules/
├──── src/
│ └──── index.js
└── package.json

Оглавление

1. Hello World
2. Добавление изображений
3. Получение данных
4. Заключение

1. Hello World

Давайте начнем с примера из документации по ipfs-core

import * as IPFS from 'ipfs-core'

const ipfs = await IPFS.create()
const { cid } = await ipfs.add('Hello world')
console.log(cid)

Теперь введите npm start в терминале и вы увидите что-то вроде этого

Откройте браузер и введите «https://ipfs.io/ipfs/» и вы увидите содержимое файла

2. Добавление изображений

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

Поэтому создадим папку с именем images и поместим в нее изображения, я добавил 3 изображения

![Папка Images(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cje1i4i61b0klxldihzi.png)

Итак, я импортирую fs, потому что он работает с файлами и другой директорией, затем укажу в const, где находится папка images и прочитаю ее.

после этого с помощью цикла for прочитаю каждый файл в папке images и добавлю его в ipfs.

В этот раз я использую result, чтобы показать все свойства добавленного файла.

import * as IPFS from 'ipfs-core'
import fs from 'fs'

const imagesDir = './src/images'

const files = fs.readdirSync(imagesDir)

const ipfs = await IPFS.create()

for(let file of files) {
  const buffer = fs.readFileSync(`${imagesDir}/${file}`)
  const result = await ipfs.add(buffer)
  console.log(result)
}

вы увидите что-то похожее на это

3. Получение данных

чтобы упростить утомительную задачу копирования cid и вставки его в браузер, добавим https://ipfs.io/ipfs/.

Давайте создадим const шлюз с https://ipfs.io/ipfs/, а после получения результата console.log(gateway+result.path) вот так

import * as IPFS from 'ipfs-core'
import fs from 'fs'

const imagesDir = './src/images'

const files = fs.readdirSync(imagesDir)
const gateway = 'https://ipfs.io/ipfs/'
const ipfs = await IPFS.create()


for(let file of files) {
  const buffer = fs.readFileSync(`${imagesDir}/${file}`)
  const result = await ipfs.add(buffer)
  console.log(result)
  console.log(gateway+result.path)
}

Теперь для просмотра изображений вы можете открыть браузер и ввести «https://ipfs.io/ipfs/» или просто ctrl + кликнуть по ссылке и вы увидите содержимое файла.

Не волнуйтесь, если вы получите эту ошибку

вы можете использовать альтернативные способы получения данных, например, другой шлюз, такой как https://gateway.pinata.cloud/ipfs/.

4. Заключение

Мы научились добавлять содержимое в IPFS с помощью node.js, используя ipfs-core. В следующем посте я планирую сделать пример с использованием Pinata API.

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

Вы можете связаться со мной в telegram, если вам нужен Full Stack разработчик.

Вы также можете связаться со мной по discord.

Вы можете клонировать репозиторий, если хотите.

Спасибо за ваше время.