構建 EOS 區塊鏈瀏覽器

robinwen發表於2018-07-15
區塊鏈瀏覽器

文/溫國兵

這是「區塊鏈技術指北」的第 35 篇文章。

如果對我感興趣，想和我交流，我的微訊號：Wentasy，加我時簡單介紹下自己，並註明來自「區塊鏈技術指北」。同時我會把你拉入微信群「區塊鏈技術指北」。BTW，李笑來老師也加入了我的知識星球，文末有加入方式。

構建 EOS 區塊鏈瀏覽器

題圖來自: © ChainONE / Original / chainone.xyz

0x00 背景

前面的文章講解了如何讓 nodeos 支援將鏈上資料實時異構到 MySQL 以及如何部署開源的區塊鏈瀏覽器 API，但問題來了，沒有前端展示，對於使用者而言不夠直觀。

0x01 部署

EOS 鏈上資料有了，API 也有了，剩下的就是前端了。EOSTracker 是較早開源的區塊鏈瀏覽器，後端使用 PHP，前端使用 AngularJS，接下來我們講解如何部署前端。

首先我們需要安裝 nodejs，命令如下：

$ apt-get install curl python-software-properties
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ apt-get install nodejs
$ node -v
$ npm -v
複製程式碼

接著 clone 程式碼，安裝相關依賴。

$ git clone https://github.com/EOSEssentials/EOSTracker.git
$ cd EOSTracker
$ npm install
$ npm install -g @angular/cli
複製程式碼

0x02 測試

接著我們執行如下命令訪問 EOSTracker。

$ ng serve --host 0.0.0.0
複製程式碼

此步可能會遇到如下錯誤：

ERROR in ./node_modules/cipher-base/index.js
Module not found: Error: Can't resolve 'stream' in '/data/EOSTracker/node_modules/cipher-base'
ERROR in ./node_modules/hash-base/index.js
Module not found: Error: Can't resolve 'stream' in '/data/EOSTracker/node_modules/hash-base'
ℹ ｢wdm｣: Failed to compile.
複製程式碼

我們可以執行如下命令解決上述問題，詳情參考 此處。

node patch.js

再次執行 ng serve --host 0.0.0.0，瀏覽器訪問 http://xxx.xxx.xxx.xxx:4200 即可訪問瀏覽器。

問題來了，我們沒有配置 API，這個資料是怎麼讀取的呢？原來預設讀取的是 EOSTracker 提供的 API。假如我們要修改成自己的 API，怎麼處理？很簡單，兩行程式碼解決。

$ vim src/environments/environment.ts
$ vim src/environments/environment.prod.ts
複製程式碼

將 apiUrl: 'https://api.eostracker.io' 修改成自己的 API 即可。

當然，我們同樣可以給區塊鏈新增域名以及配置 HTTPS，參考如下：

0x03 小結

連續更新 3 篇文章，可以讓讀者從 0 到 1 構建區塊鏈瀏覽器。區塊鏈的強大魅力之處在於所有資料公開透明，任何人都可以同步全節點資料，任何人都可以追溯鏈上資料。希望能給讀者帶來幫助。

「區塊鏈技術指北」同名 知識星球，二維碼如下，歡迎加入。BTW，李笑來老師也加入了。

區塊鏈技術指北

「區塊鏈技術指北」相關資訊渠道：

同時，本系列文章會在以下渠道同步更新，歡迎關注：

原創不易，讀者可以通過如下途徑打賞，虛擬貨幣、美元、法幣均支援。

  • BTC: 3QboL2k5HfKjKDrEYtQAKubWCjx9CX7i8f
  • ERC20 Token: 0x8907B2ed72A1E2D283c04613536Fac4270C9F0b3
  • PayPal: www.paypal.me/robinwen
  • 微信打賞二維碼

Wechat

–EOF–

版權宣告：自由轉載-非商用-非衍生-保持署名（創意共享4.0許可證）

相關文章