【戴嘉樂】IPFS Desktop：IPFS節點桌面管理App

圓方圓區塊鏈發表於2018-11-17

作者簡介：戴嘉樂( Mr.Maple ) | 前百度高階研發工程師 | IPFS應用實踐者&佈道師| 個人網站：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-ico…) }

現在，已經建立了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討論區，大家在使用過程中遇到問題可以在這查詢解決方案： github.com/ipfs-shipya….

六、參考文獻

Github ipfs-shipyard/ipfs-desktop