試在本機上編譯 Condenser ,自製個人版 steemcn.org!

in #cn2 years ago (edited)

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

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

@ericet@robertyan 管理的 @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 了解大約情況。

  2. 若想看 steemcn 的分支代碼就要把 branch 換到 steemcn 分支上,可看下圖示。

    Screen Shot 20190804 at 2.29.57 PM.png


  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 來正式在本機上運行。

Screen Shot 20190729 at 7.11.29 PM.png

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

Screen Shot 20190729 at 7.11.46 PM.png

上圖可以看到

<-- 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!

Sort:  

Baron厉害,请问可以收稿到《Steem Engine手册》的《开发》的章节吗?

Posted using Partiko iOS

榮幸之至! 我有空修改一下使內容更顯白一點。

Posted using Partiko iOS

有种看天书的感谢,哈哈,高手

Posted using Partiko Android

村長呀鹽先係高手 haha

你都係高手。對我嚟講嗰啲全部都係亂碼。😂

Posted using Partiko Android

Thanks for mentioning eSteem app. Kindly join our Discord or Telegram channel for more benefits and offers on eSteem, don't miss our amazing updates.
Follow @esteemapp as well!

感谢代理20.12SP 给team-cn! 由于你使用CN作为你的首标签,额外获得2%点赞! 你的帖子获得team-cn 8% 点赞!(如果不想看到这个回复,请回复“取消”)

Du erhieltest aufgrund deiner LanaCharleenToken ein Upvote von @sebescen81 und von @lanacharleen alt-Text
Vielen lieben Dank für euren Support. Der Account meiner Tochter wächst und gedeiht.

这个好啊!可以更方便点,下载完了,点击就能运行,不会的人也可以用了,不怕上不了steem了。就看节点能不能用了。!shop !COFFEEA

Posted using Partiko Android

對的,跟著拍示做可以自已掛一個來玩玩。掛 heroku 還不用錢呢!

你好鸭,nuagnorab!
@also.einstein赠送1枚SHOP币给你!

目前你总共有: 11枚SHOP币

查看或者交易 SHOP币 请到 steem-engine.com.

无聊吗?跟我猜拳吧! **石头,剪刀,布~**

Hi, @nuagnorab!

You just got a 0.6% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

This post had received 20.15% upvote from @steemitportugal account!
Vote for @steemitportugal to Witness. Your vote is very important to us!
Visit our WebSite www.steemitportugal.com (tutorials,news...)
Thank you very much.
Click here to vote
steemitportugal
Delegation for daily voting: 10SP-25SP-50SP-100SP-250SP-500SP-1000SP

感谢您分享关于编译 Condenser 的方法! 我们将会把本文收稿到《Steem Engine手册》的《开发》章节!

@team-cn 请点赞支持!

这是您对《Steem指南》和《Steem Engine手册》的首次投稿!将获得 首次投稿奖励 + 首次收稿奖励 + 青铜作者奖励 共 6 NBC,奖励稍后发放!

正式收稿的内容建议做少量改动:

  1. 对 Condenser 项目做简要介绍;

Hi @nuagnorab!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 3.161 which ranks you at #9469 across all Steem accounts.
Your rank has improved 305 places in the last three days (old rank 9774).

In our last Algorithmic Curation Round, consisting of 148 contributions, your post is ranked at #74.

Evaluation of your UA score:
  • You're on the right track, try to gather more followers.
  • The readers like your work!
  • Try to work on user engagement: the more people that interact with you via the comments, the higher your UA score!

Feel free to join our @steem-ua Discord server

 2 years ago Reveal Comment