自眾多 SCOT 平台開展，唯獨沒有自己社區的本命前端，著實有點可惜。

但這一切可惜不再了，因為村里有能人。

由 @ericet 和 @robertyan 管理的 @steem-drivers 早前發貼 [Steemcn 新域名steemcn.org~](https://www.steemcn.org/cn/@steem-drivers/steemcn-steemcn-org)。

看到村里有一個客制的 steemit frontend condenser 頁面真的十分高興。有感覺更加融入 steem blockchain 世界的感覺。

其實從兩年前一開給玩 steemit 時就有一個自己動手搞前端的念頭。可惜限於技術和時間，沒有把這個念頭實行。

雖然未必能如 @partiko @esteem 等能人異仕 build it from scratch ，但在自家本機搞個私家 condenser app 也是不錯啊！

所以啊，拜讀完 @steem-drivers 的 post 後我就試試在本機上運行個人版 steemcn.org 了。

---

### 什麼是前端? 
>在軟體架構和程序設計領域，前端是軟體系統中直接和用戶交互的部分，而後端控制著軟件的輸出。將軟體分為前端和後端是一種將軟體不同功能的部分相互分離的抽象。

### 什麼是 steemit frontend Condenser?
>Condenser是由 Steemit Inc. 跟據 react.js 開發出來的使用者友好的界面，也是社交媒體平台 steemit.com 現正使用中的前端界面。 它使用了 STEEM blockchain 技術，是一個 DPoS Governance 和為大量基於JSON 格式的內容存儲的 ChainBase DB 數據庫等技術所支持的區塊鏈。


---

### 本地部署步驟

1. 開始先到 @steem-drivers 的 Github page https://github.com/steem-driver/condenser 看一看下面的 READ.ME 了解大約情況。
<br>
2. 若想看 steemcn 的分支代碼就要把 branch 換到 steemcn 分支上，可看下圖示。
<center>![Screen Shot 20190804 at 2.29.57 PM.png](https://files.steempeak.com/file/steempeak/nuagnorab/BQI2xlI6-Screen20Shot202019-08-0420at202.29.5720PM.png)</center>
<br>
3. 再把 source code 在 terminal 上 打上指令 ```git clone https://github.com/steem-driver/condenser.git``` 來復制到本機上。

4. 以```cd condenser```指令進入到項目目錄根。

5.  然後在 terminal 上使用指令 ```git checkout steemcn``` 來 轉換到 steemcn 的分支上。這樣可以換到由村長呀鹽最新碼過的代碼分支。
6. 項目有用到 docker ，若不太了解 docker 是什麼鬼東西，可以到此文去了解 docker 的運用 https://medium.com/@deepakshakya/beginners-guide-to-use-docker-build-run-push-and-pull-4a132c094d75 知道了一些 docker  image & container 概念和指令後, 跟據 source code 上的 dockerfile 在本機上創建docker image。
7. 創建docker image 指令為 ```docker build -t="nuagnorab/condenser:latest" .``` 其中 ```nuagnorab``` 可以修改為你的名字，```latest``` 可以修改為你想用的文字來給你自己區分不同 image。
8. docker image 創建需時有點長，可以一邊看相關文章，一邊等待 image 創建。

```

Step 15/16 : EXPOSE 8080
 ---> Running in 47b2b88f32e0
Removing intermediate container 47b2b88f32e0
 ---> 61a39f8d36d8
Step 16/16 : CMD [ "yarn", "run", "production" ]
 ---> Running in 7db0c14e750d
Removing intermediate container 7db0c14e750d
 ---> d0e6de6d6179
Successfully built d0e6de6d6179
Successfully tagged nuagnorab/condenser:lastest

```

創建完成後，以 ```docker run -it -p 8080:8080 nuagnorab/condenser:lastest``` 來正式在本機上運行。

<center>![Screen Shot 20190729 at 7.11.29 PM.png](https://files.steempeak.com/file/steempeak/nuagnorab/RKn3j2B3-Screen20Shot202019-07-2920at207.11.2920PM.png)</center>

TADA! 看到網址欄寫著 ```localhost:8080/``` 嗎!? steemcn.org 正在本機上運行呢！有時侯若 steemcn.org 因為服務器掛掉上不了，你可以用你這個私人專用的的 steemcn.org來發貼了。

—

<center>![Screen Shot 20190729 at 7.11.46 PM.png](https://files.steempeak.com/file/steempeak/nuagnorab/nZy9CQ4a-Screen20Shot202019-07-2920at207.11.4620PM.png)</center>

上圖可以看到 

```
<-- GET /
  --> GET / 200 8,025ms 485.66kB c64c63fe416cec1230ff57a9e3
StatsLoggerClient call:  { '0': 'request.apiGetState_ms', '1': 5726.431542 }
StatsLoggerClient call:  { '0': 'request.ssr_ms', '1': 1179.255961 }
StatsLoggerClient call:  { '0': 'request.appRender_ms', '1': 7833.330885 }
StatsLoggerClient call:  { '0': 'request.total_ms', '1': 8249.398673 }
  <-- GET /static/manifest.json
  --> GET /static/manifest.json 200 1ms 832B
StatsLoggerClient call:  { '0': 'request.total_ms', '1': 1.822097 }
  <-- GET /@nuagnorab c64c63fe416cec1230ff57a9e3
  --> GET /@nuagnorab 200 3,359ms 373.88kB c64c63fe416cec1230ff57a9e3
StatsLoggerClient call:  { '0': 'request.apiGetState_ms', '1': 2811.237521 }
StatsLoggerClient call:  { '0': 'request.ssr_ms', '1': 322.377002 }
StatsLoggerClient call:  { '0': 'request.appRender_ms', '1': 3329.646484 }
StatsLoggerClient call:  { '0': 'request.total_ms', '1': 3466.827572 }
```

當中第一個 ```GET``` 是首頁請求。而 ```GET /static/manifest.json``` 我猜想是首頁相關的的資源例如 CSS 等的東西。

往下看到看到 ```GET /@nuagnorab c64c63fe416cec1230ff57a9e3``` ，看到 ```200```意味著成功接收到 steem blockchain 的 node 發回有關 @nuagnorab 的 response!


但之後發現，頁面中用家上傳的圖片都無法正常顯示。問了村長和呀鹽，告知是因為要改一下 environment variable 的設定。

---

成功在本機運行，意味著將可以更多的了解 STEEM 和 STEEM 的 DAPP呢! 而不論是我個人版，還是 steemcn.org 其實都一樣，就一個前端，都是連去 steem blockchain node 上的，可能不同的是我可以自己修改 tag 數量呀，頁面顏色呀，和頁面 logo 等。

---

Cheers!