【IPFS + 区块链系列】入门篇 - IPFS + Ethereum （上篇）-js-ipfs

VincentFF 发布于2019-06-27 18:12 / 601人阅读

作者：黎跃春，孔壹学院创始人，区块链、高可用架构师

微信：liyc1215

区块链博客：http://liyuechun.org

Ebay项目

基于以太坊Ethereum & IPFS的去中心化Ebay区块链项目详情链接

1. 内容简介

2. IPFS-HTTP效果图

3. 实现步骤

3.1 安装create-react-app

3.2 React项目创建

3.3 运行React项目

3.4 浏览项目

3.5 安装ipfs-api

3.6 完成UI逻辑

3.7 导入IPFS

3.8 编写上传大文本字符串到IPFS的Promise函数

3.9 上传数据到IPFS

3.10 跨域资源共享CORS配置

3.11 再次刷新网页提交数据并在线查看数据

3.12 从IPFS读取数据

3.13 总结

4. 下篇文章预告

1. 内容简介

【IPFS + 区块链系列】入门篇 - IPFS环境配置

【IPFS + 区块链系列】入门篇 - IPFS+IPNS+个人博客搭建

在前面两篇文章中，第一篇春哥给大家详细介绍了IPFS环境配置，第二篇介绍了IPFS如何搭建个人博客，通过这两篇文章相信大家已经对IPFS有所了解，接下来的这篇文章，我们将为大家讲解js-ipfs-api的简单使用，如何将数据上传到IPFS，以及如何从IPFS通过HASH读取数据。

2. IPFS-HTTP效果图

3. 实现步骤 3.1 安装create-react-app

参考文档：https://reactjs.org/tutorial/tutorial.html

localhost:1123 yuechunli$ npm install -g create-react-app

3.2 React项目创建

localhost:1123 yuechunli$ create-react-app ipfs-http-demo
localhost:ipfs-http-demo yuechunli$ ls
README.md    package.json    src
node_modules    public        yarn.lock
localhost:ipfs-http-demo yuechunli$

3.3 运行React项目

localhost:ipfs-http-demo yuechunli$ npm start

Compiled successfully!

You can now view ipfs-http-demo in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.0.107:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

3.4 浏览项目

浏览器浏览http://localhost:3000。

效果如下：

3.5 安装ipfs-api

⚠️：在这里我就不过多的去介绍React的使用以及开发，如果感兴趣的可以去看这套React的视频，学完这套视频你可以直接进企业找React相关的前端开发工作。

项目结构

安装ipfs-api

切换到项目根目录，安装ipfs-api。

$ npm uninstall --save ipfs-api

localhost:ipfs-http-demo yuechunli$ ls
README.md    package.json    src
node_modules    public        yarn.lock
localhost:ipfs-http-demo yuechunli$ pwd
/Users/liyuechun/Desktop/1123/ipfs-http-demo
localhost:ipfs-http-demo yuechunli$ npm uninstall --save ipfs-api

⚠️：ipfs安装完后，如上图所示，接下来刷新一下浏览器，看看项目是否有问题，正常来讲，一切会正常，???，Continue，Continue，Continue......

3.6 完成UI逻辑

拷贝下面的代码，将src/App.js里面的代码直接替换掉。

import React, { Component } from "react";
import "./App.css";

class App extends Component {


      constructor(props) {
          super(props);
          this.state = {
            strHash: null,
            strContent: null
          }
      }

    render() {
      return (
        
          
          

          {this.state.strHash}

          
           {this.state.strContent}
        
      );
    }
}

export default App;

上面的代码完成的工作是，当我们在输入框中输入一个字符串时，点击提交到IPFS按钮，将文本框中的内容取出来打印，后续我们需要将这个数据上传到IPFS。点击读取数据按钮，我们也只是随便打印了一个字符串，后面需要从IPFS读取数据，然后将读取的数据存储到状态机变量strContent中并且展示出来。

3.7 导入IPFS

const ipfsAPI = require("ipfs-api");
const ipfs = ipfsAPI({host: "localhost", port: "5001", protocol: "http"});

3.8 编写上传大文本字符串到IPFS的Promise函数

saveTextBlobOnIpfs = (blob) => {
    return new Promise(function(resolve, reject) {
      const descBuffer = Buffer.from(blob, "utf-8");
      ipfs.add(descBuffer).then((response) => {
        console.log(response)
        resolve(response[0].hash);
      }).catch((err) => {
        console.error(err)
        reject(err);
      })
    })
  }

response[0].hash返回的是数据上传到IPFS后返回的HASH字符串。

3.9 上传数据到IPFS

this.saveTextBlobOnIpfs(ipfsContent).then((hash) => {
    console.log(hash);
    this.setState({strHash: hash});
});

ipfsContent是从文本框中取到的数据，调用this.saveTextBlobOnIpfs方法将数据上传后，会返回字符串hash，并且将hash存储到状态机变量strHash中。

目前完整的代码：

import React, {Component} from "react";
import "./App.css";

const ipfsAPI = require("ipfs-api");
const ipfs = ipfsAPI({host: "localhost", port: "5001", protocol: "http"});

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      strHash: null,
      strContent: null
    }
  }

  saveTextBlobOnIpfs = (blob) => {
    return new Promise(function(resolve, reject) {
      const descBuffer = Buffer.from(blob, "utf-8");
      ipfs.add(descBuffer).then((response) => {
        console.log(response)
        resolve(response[0].hash);
      }).catch((err) => {
        console.error(err)
        reject(err);
      })
    })
  }

  render() {
    return (
      
      

      {this.state.strHash}

      
      {this.state.strContent}
    );
  }
}

export default App;

测试：

3.10 跨域资源共享CORS配置

跨域资源共享( CORS )配置，依次在终端执行下面的代码：

localhost:ipfs-http-demo yuechunli$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods "["PUT", "GET", "POST", "OPTIONS"]"

localhost:ipfs-http-demo yuechunli$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "["*"]"

localhost:ipfs-http-demo yuechunli$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials "["true"]"

localhost:ipfs-http-demo yuechunli$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Headers "["Authorization"]"

localhost:ipfs-http-demo yuechunli$ ipfs config --json API.HTTPHeaders.Access-Control-Expose-Headers "["Location"]"

用正确的端口运行daemon：

localhost:ipfs-http-demo yuechunli$ ipfs config Addresses.API
/ip4/127.0.0.1/tcp/5001
localhost:ipfs-http-demo yuechunli$ ipfs config Addresses.API /ip4/127.0.0.1/tcp/5001
localhost:ipfs-http-demo yuechunli$ ipfs daemon

3.11 再次刷新网页提交数据并在线查看数据

上传数据，并且查看返回hash值

在线查看上传到IPFS的数据

3.12 从IPFS读取数据

ipfs.cat

ipfs.cat(this.state.strHash).then((stream) => {
    console.log(stream);
    let strContent = Utf8ArrayToStr(stream);
    console.log(strContent);
    this.setState({strContent: strContent});
});

stream为Uint8Array类型的数据，下面的方法是将Uint8Array转换为string字符串。

Utf8ArrayToStr

function Utf8ArrayToStr(array) {
    var out, i, len, c;
    var char2, char3;

    out = "";
    len = array.length;
    i = 0;
    while(i < len) {
    c = array[i++];
    switch(c >> 4)
      {
        case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
          // 0xxxxxxx
          out += String.fromCharCode(c);
          break;
        case 12: case 13:
          // 110x xxxx   10xx xxxx
          char2 = array[i++];
          out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
          break;
        case 14:
          // 1110 xxxx  10xx xxxx  10xx xxxx
          char2 = array[i++];
          char3 = array[i++];
          out += String.fromCharCode(((c & 0x0F) << 12) |
                         ((char2 & 0x3F) << 6) |
                         ((char3 & 0x3F) << 0));
          break;
        default:
          break;
      }
    }

    return out;
}

完整源码

import React, {Component} from "react";
import "./App.css";

const ipfsAPI = require("ipfs-api");
const ipfs = ipfsAPI({host: "localhost", port: "5001", protocol: "http"});

function Utf8ArrayToStr(array) {
  var out,
    i,
    len,
    c;
  var char2,
    char3;

  out = "";
  len = array.length;
  i = 0;
  while (i < len) {
    c = array[i++];
    switch (c >> 4) {
      case 0:
      case 1:
      case 2:
      case 3:
      case 4:
      case 5:
      case 6:
      case 7:
        // 0xxxxxxx
        out += String.fromCharCode(c);
        break;
      case 12:
      case 13:
        // 110x xxxx   10xx xxxx
        char2 = array[i++];
        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
        break;
      case 14:
        // 1110 xxxx  10xx xxxx  10xx xxxx
        char2 = array[i++];
        char3 = array[i++];
        out += String.fromCharCode(((c & 0x0F) << 12) | ((char2 & 0x3F) << 6) | ((char3 & 0x3F) << 0));
        break;
      default:
        break;
    }
  }

  return out;
}

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      strHash: null,
      strContent: null
    }
  }

  saveTextBlobOnIpfs = (blob) => {
    return new Promise(function(resolve, reject) {
      const descBuffer = Buffer.from(blob, "utf-8");
      ipfs.add(descBuffer).then((response) => {
        console.log(response)
        resolve(response[0].hash);
      }).catch((err) => {
        console.error(err)
        reject(err);
      })
    })
  }

  render() {
    return (
      
      

      {this.state.strHash}

      
      {this.state.strContent}
    );
  }
}

export default App;

3.13 总结

这篇文章主要讲解如何配置React环境，如何创建React项目，如何安装js-ipfs-api，如何上传数据，如何设置开发环境，如何下载数据等等内容。通过这篇文章的系统学习，你会掌握js-ipfs-api在项目中的使用流程。

这是【IPFS + 区块链系列】入门篇 - IPFS + Ethereum （上篇）-js-ipfs-api，下篇讲解如何将IPFS和以太坊智能合约结合进行数据存储。

4. 下篇文章预告

这是【IPFS + 区块链系列】入门篇 - IPFS + Ethereum （上篇）-js-ipfs-api，下篇讲解如何将IPFS和以太坊智能合约结合进行数据存储。

5. 技术交流

区块链技术交流QQ群：348924182

进微信群请加微信：liyc1215

「区块链部落」官方公众号

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/23933.html

区块链技术学习指引

摘要：引言给迷失在如何学习区块链技术的同学一个指引，区块链技术是随比特币诞生，因此要搞明白区块链技术，应该先了解下比特币。但区块链技术不单应用于比特币，还有非常多的现实应用场景，想做区块链应用开发，可进一步阅读以太坊系列。本文始发于深入浅出区块链社区, 原文：区块链技术学习指引原文已更新，请读者前往原文阅读本章的文章越来越多，本文是一个索引帖，方便找到自己感兴趣的文章，你也可以使用左侧...

Cristic 2019-06-27 18:14 评论0 收藏0
【戴嘉乐】（进阶）基于IPFS和Ngrok构建自维护资源网关

摘要：五参考文献区块链利用构建自己的去中心化分布式系统相关文章和视频推荐戴嘉乐入门基于和构建自维护资源网关圆方圆学院汇集大批区块链名师，打造精品的区块链技术课程。作者简介：戴嘉乐( Mr.Maple ) | 前百度高级研发工程师 | IPFS应用实践者&布道师|个人网站：https://www.daijiale.cn联系方式：微信号：daijiale6239。一、背景上篇文章[《（入门...

xiyang 2019-06-27 18:54 评论0 收藏0
【戴嘉乐】（入门）基于IPFS和Ngrok构建自维护资源网关

摘要：作者简介戴嘉乐前百度高级研发工程师应用实践者布道师个人网站联系方式微信号。二技术介绍对这项技术不熟悉的同学，可以参考我之前一次演讲分享的内容戴嘉乐详解的本质技术架构以及应用。作者简介：戴嘉乐( Mr.Maple ) | 前百度高级研发工程师 | IPFS应用实践者&布道师|个人网站：https://www.daijiale.cn联系方式：微信号：daijiale6239。一、应用背...

CloudwiseAPM 2019-06-27 18:54 评论0 收藏0
2018以太坊智能合约编程语言solidity的最佳IDEs

摘要：使用基于以太坊的智能合约的集成开发环境。以太坊教程，主要介绍智能合约与应用开发，适合入门。以太坊，主要是介绍使用进行智能合约开发交互，进行账号创建交易转账代币开发以及过滤器和事件等内容。 Solidity是一种以智能合约为导向的编程语言。这是一种只有四年的年轻语言，旨在帮助开发基于以太坊数字货币的智能合约。理解它官方文档应该是学习Solidity的最佳来源：solidity.read...

darkerXi 2019-06-27 18:41 评论0 收藏0
【戴嘉乐】基于IPFS和GeoHash构建具有地理位置价值服务的DDApp（理论篇）

摘要：数据将具有如下个特点将二维的经纬度转换成字符串，比如下图展示了北京个区域的字符串，分别是，等等，每一个字符串代表了某一矩形区域。例如，坐标对，位于北京安定门附近，后形成的值为。作者简介：戴嘉乐( Mr.Maple ) | 前百度高级研发工程师 | IPFS应用实践者&布道师|个人网站：https://www.daijiale.cn联系方式：微信号：daijiale6239。 show...

lmxdawn 2019-06-27 18:54 评论0 收藏0

发表评论

登陆后可评论

0条评论

VincentFF

男|高级讲师

我要关注我要私信

TA的文章

tensorflow文档

阅读 766·2023-04-25 15:13
高并发下秒杀商品，必须知道的9个细节

阅读 1388·2021-11-22 12:03
LeetCode 563 二叉树的坡度[dfs] HERODING的LeetCode之路

阅读 815·2021-11-19 09:40
#黑五#bacloud：全场KVM VPS一次性5折，独立服务器6折优惠，美国/荷兰/立陶宛机房

阅读 1896·2021-11-17 09:38
快云科技: 11.11钜惠美国云机2H5G年付148仅有40台，云服务器全场7折，香港云服务器年付

阅读 1701·2021-11-08 13:18
C++仍然是最好的语言

阅读 648·2021-09-02 15:15
vue中如何实现后台管理系统的权限控制

阅读 1759·2019-08-30 15:54
H5 input[type='date'] 优化 pc端和移动端的使用

阅读 2623·2019-08-30 11:12

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

【IPFS + 区块链系列】入门篇 - IPFS + Ethereum （上篇）-js-ipfs

{this.state.strContent}

{this.state.strContent}

{this.state.strContent}

相关文章

区块链技术学习指引

**【戴嘉乐】（进阶）基于IPFS和Ngrok构建自维护资源网关**

**【戴嘉乐】（入门）基于IPFS和Ngrok构建自维护资源网关**

2018以太坊智能合约编程语言solidity的最佳IDEs

**【戴嘉乐】基于IPFS和GeoHash构建具有地理位置价值服务的DDApp（理论篇）**

发表评论

0条评论

VincentFF

男|高级讲师

TA的文章

tensorflow文档

高并发下秒杀商品，必须知道的9个细节

LeetCode 563 二叉树的坡度[dfs] HERODING的LeetCode之路

#黑五#bacloud：全场KVM VPS一次性5折，独立服务器6折优惠，美国/荷兰/立陶宛机房

快云科技: 11.11钜惠美国云机2H5G年付148仅有40台，云服务器全场7折，香港云服务器年付

C++仍然是最好的语言

vue中如何实现后台管理系统的权限控制

H5 input[type='date'] 优化 pc端和移动端的使用

最新活动

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

【IPFS + 区块链 系列】 入门篇 - IPFS + Ethereum （上篇）-js-ipfs

{this.state.strContent}

{this.state.strContent}

{this.state.strContent}

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动

【IPFS + 区块链系列】入门篇 - IPFS + Ethereum （上篇）-js-ipfs