【戴嘉乐】IPFS Desktop：IPFS节点桌面管理App

作者简介：戴嘉乐( Mr.Maple ) | 前百度高级研发工程师 | IPFS应用实践者&布道师|
个人网站：https://www.daijiale.cn
联系方式：微信号：daijiale6239

一、应用简介

IPFS Desktop是一个由IPFS官方应用社区（IPFS-Shipyard）孵化出来的应用项目。 Ta是一个通过Node.js编写的桌面管理软件，比之前提过的IPFS Companion功能更加丰富，可以帮助用户在本地更好的运行、管理自己的节点，并随时查看IPFS节点的资源信息。

二、特性

2.1 服务自启动

点开应用，自动创建本地Web服务
省去了命令行启动节点服务的操作

2.2 节点信息查询

共享数据量
节点ID
节点位置
所用带宽总量
上行速度
下行速度
IP端口映射地址

2.3 文件资源上传、管理

资源上传控制面板
IPFS链接复制
文件资料管理

2.4 Pinned 节点Hash记录

有点类似Imtoken添加联系人钱包账户的功能

Pin 节点Hash记录值添加
Pin 节点备注
已Pin节点Hash值查询

2.5 查看已连接节点

2.6 偏好设置

快捷键下载Hash资源
截屏自动上传
主题背景色

三、安装

3.1 安装包下载：

稳定版本：

release版本

如果有兴趣对官方的ipfs desktop进行二次开发，可以下载整个资源包：

Open Reource

3.2 成功

在Mac OS 上安装成功后，会出现在Lanuchpad上：

四、二次开发（适合开发者）

官方已将这个应用项目开源，对开发者而言，可以clone所有资源，根据自己的业务、企业需求进行二次迭代开发以及自定义应用开发：

4.1开发者指引

需要提前安装依赖环境：

Node.js >=6.0.0
npm >=3.0 installed.

如果是Mac OS系统，需要提前安装Xcode Command line tool工具：

xcode-select --install
sudo xcode-select --switch /Library/Developer/CommandLineTools

Clone资源，安装依赖，编译资源包，

git clone https://github.com/ipfs-shipyard/ipfs-desktop.git
cd ipfs-desktop
npm install
npm start

IPFS Desktop 就会出现在系统应用菜单栏。

4.2 源码工程结构

所有重要的资源文件全都在src文件夹中, 文件树结构和职能如下:

├───controls
    ├───fonts             静态字体资源
├───img               静态图片资源
├───js
│   ├───components
│   │   ├───logic     可复用的组件，具有状态追踪特性
│   │   └───view      无状态函数、可复用的组件
│   |───panes         窗口组件
|   └───screens       屏幕组件
├───styles            管理LESS格式的样式文件
├───utils             工具类和函数
|───views             HTML视图文件
└───index.js          应用入口

4.3 如何开发新的窗口

使用以下的引导内容，在.src/js/panes里创建一个新的文件，如果想了解每一个依赖文件，可以在./src/js/components/view/header.js和./src/js/components/view/footer.js文件中进行查询。

import React from 'react'
import Pane from '../components/view/pane'
import Header from '../components/view/header'
import Footer from '../components/view/footer'
export default function MyPane {
return (
<Pane>
<Header title='The title of your pane' />
<div className='main'>
<p>The body of your pane</p>
</div>
<Footer>
<p>The footer of your pane</p>
</Footer>
</Pane>
)
}
}

然后，你需要导入一个文件并且在./src/js/screens/menu.js中创建一个panes 条目，类似下方的数组形式：

{
id: 'my-pane-id', // A simple slug to identify your pane.
title: 'Title', // To be shown in the menu.
icon: 'ipfs' // A themify icon ID (themify.me/themify-icons)
}

现在，已经创建了pane，并创建了它的菜单项。虽然，你点击它，你可能会得到一个错误信息，因为你没有真正路由到它。

在同一个文件上，转到_getRouteScreen函数，并在switch中添加一个case。该值必须与你在菜单项上输入的“id”相同。

4.4 组件开发

组件是用驼峰命名法来创建类，相应的文件有关联的类名和连字符分隔的单词。
例如,simple-stat.js导出了一个名为SimpleStat的类。

无状态组件、视图

./src/js/components/view

Button 文字按钮组件
CheckboxBlock 复选框组件
FileBlock 文件列表中使用按钮来复制链接的组件
Footer 窗口页脚组件
Header 窗口头组件
Heartbeat IPFS Logo心跳动画。
IconButton 带图标的按钮组件
IconDropdownList 带图标的下拉列表组件
Icon 显示图标组件
InfoBlock 显示一个信息块(用于节点信息窗格)。
KeyCombo 组合键组件
Key 公钥组件
MenuOption 在菜单栏中选择选项组件
PinnedHash 固定Hash的组件.

状态组件

./src/js/components/logic

NewPinnedHash 一个新的固定Hash的组件

五、使用QA和Bug提交

官方在Github上提供了专门的issue讨论区，大家在使用过程中遇到问题可以在这查询解决方案： https://github.com/ipfs-shipyard/ipfs-desktop/issues.

六、参考文献

Github ipfs-shipyard/ipfs-desktop

【戴嘉乐】IPFS Desktop：IPFS节点桌面管理App