摘要:工具教程在本教程中,我們將使用存儲系統構建一個區塊鏈微博應用程序,從而使用戶提交的文字和圖片沒有發布到中心服務器中,而是在自己的本地電腦。
Blockstack.js 工具教程
在本教程中,我們將使用Gaia存儲系統構建一個區塊鏈微博應用程序,從而使用戶提交的文字和圖片沒有發布到中心服務器中,而是在自己的本地電腦。
此應用程序將是一個完全分散且無需服務器的access . js應用程序。標識和存儲服務將由blockstack提供,
應用程序將能夠執行以下操作:
使用blockstack驗證用戶
用戶發布類似傳統微博(微信朋友圈)樣式的新狀態
在用戶配置文件中顯示狀態
查找其他用戶并查看其配置文件和狀態
我們將使用以下工具:
用于管理依賴關系和腳本的NPM
yo為塊堆棧反應應用程序生成樣板文件
用于驗證用戶和訪問Gaia存儲的blockstack
對于經驗豐富的blockstack開發人員:
添加publish _ data作用域以登錄請求
使用getFile ( " filename . JSON ",{username: " username . id ",decrypt: false } )從其他用戶讀取文件。
使用lookupProfile ( "username. id " )查找用戶配置文件
如前所述使用putFile ( " filename . JSON ",file,options ),其中選項設置為{ encrypt : false },以便禁用加密,其他人可以讀取您的文件。
安裝與生成
首先,安裝Yeoman以及blockstack應用程序生成器:
npm install -g yo generator-blockstack
接下來,為我們的應用程序創建一個目錄,取個新的名字Publik :
mkdir publik && cd publik
然后,使用blockstack應用程序生成器生成一個簡單的blockstack應用程序:
yo blockstack:react
響應提示后,應用程序生成器將創建所有應用程序文件,然后安裝所有依賴項。
要在本地運行應用程序:
npm start
并將瀏覽器打開到http://localhost : 8080。現在您應該看到一個簡單的react應用程序,您可以使用blockstack ID登錄。
多用戶層數據存儲
在多用戶層數據存儲中,存儲在Gaia上的用戶文件通過用戶配置文件中的apps屬性對其他用戶可見。使用多用戶層數據存儲的每個應用程序都必須將其自身添加到用戶的配置文件. JSON文件中。在身份驗證期間請求publish _ data作用域時,blockstack瀏覽器將自動處理此部分。
因此,我們需要做的第一件事是修改身份驗證請求以包括publish _ data范圍。
打開src/components/App.jsx并找到下面的方法:
handleSignIn(e) { e.preventDefault(); redirectToSignIn(); }
將方法修改為:
handleSignIn(e) { e.preventDefault(); const origin = window.location.origin redirectToSignIn(origin, origin + "/manifest.json", ["store_write", "publish_data"]) }
請注意,默認情況下,身份驗證請求包括啟用存儲的store _ write范圍。
如果您想注銷并再次登錄,程序將為提示用戶身份驗證的請求,你將會允許該程序發布你本地所存儲的文字或圖片。
發布狀態:
在此步驟中,我們將添加允許發布和顯示“狀態”的功能。
讓我們打開src / components / profile . jsx,然后從blockstack. js中導入我們將使用的幾個方法。這些方法是putFile ( )、getFile ( )和lookupProfile ( )。將它們添加到文件頂部附近blockstack的import語句中:
import { isSignInPending, loadUserData, Person, getFile, putFile, lookupProfile } from "blockstack";
然后,我們需要在構造函數( )的初始狀態中添加一些屬性。構造函數應如下所示:
constructor(props) { super(props); this.state = { person: { name() { return "Anonymous"; }, avatarUrl() { return avatarFallbackImage; }, }, username: "", newStatus: "", statuses: [], statusIndex: 0, isLoading: false }; }
現在,讓我們修改render ( )方法以添加文本輸入和提交按鈕,以便可以發布用戶的“微博狀態”。將render ( )方法替換為以下內容:
render() { const { handleSignOut } = this.props; const { person } = this.state; const { username } = this.state; return ( !isSignInPending() && person ?: null ); }
在上面的render ( )方法中,我們還顯示了用戶的blockstack ID。我們需要從用戶配置文件數據中提取這一點。找到componentWillMount ( )方法,并在person屬性下面添加用戶名屬性:
componentWillMount() { this.setState({ person: new Person(loadUserData().profile), username: loadUserData().username }); }
接下來,我們將添加兩種方法來處理輸入事件:
handleNewStatusChange(event) { this.setState({newStatus: event.target.value}) } handleNewStatusSubmit(event) { this.saveNewStatus(this.state.newStatus) this.setState({ newStatus: "" }) }
然后執行所需存儲操作,下面是保存一個“微博狀態”的方法:
saveNewStatus(statusText) { let statuses = this.state.statuses let status = { id: this.state.statusIndex++, text: statusText.trim(), created_at: Date.now() } statuses.unshift(status) const options = { encrypt: false } putFile("statuses.json", JSON.stringify(statuses), options) .then(() => { this.setState({ statuses: statuses }) }) }
現在,您應該可以在文本框中鍵入一個狀態,然后按“提交”按鈕將其保存。
當您按下submit (提交)按鈕時,您將看到什么也不會發生。因為我們沒有添加任何代碼來顯示狀態。
顯示狀態
返回render ( )方法,并在包含文本輸入和提交按鈕的div元素正下方添加以下塊。
{this.state.isLoading && Loading...} {this.state.statuses.map((status) => ({status.text}) )}
我們還需要在頁面加載時獲取狀態,所以我們添加一個名為fetchData ( )的新方法,并從componentDidMount ( )方法調用它
componentDidMount() { this.fetchData() } fetchData() { this.setState({ isLoading: true }) const options = { decrypt: false } getFile("statuses.json", options) .then((file) => { var statuses = JSON.parse(file || "[]") this.setState({ person: new Person(loadUserData().profile), username: loadUserData().username, statusIndex: statuses.length, statuses: statuses, }) }) .finally(() => { this.setState({ isLoading: false }) }) }
此時,我們有一個基本的“區塊鏈微博”應用程序,可以用來發布和查看自己的狀態。但是,無法查看其他用戶的狀態。在接下來的步驟中,我們將進入“多用戶數據存儲”部分。但是首先,讓我們花點時間來完善我們的應用程序。
打開src/styles/style.css,并用以下內容替換現有樣式:
/* Globals */ a,a:focus,a:hover{color:#fff;} html,body{height:100%;text-align:center;background-color:#191b22;} body{color:#fff} .hide{display:none;} .landing-heading{font-family:"Lato",Sans-Serif;font-weight:400;} /* Buttons */ .btn{font-family:"Lato",Sans-Serif;padding:0.5625rem 2.5rem;font-size:0.8125rem;font-weight:400;line-height:1.75rem;border-radius:0!important;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .btn-lg{font-size:1.5rem;padding:0.6875rem 3.4375rem;line-height:2.5rem;} .btn:focus,.btn:active:focus,.btn.active:focus{outline:none;} .btn-primary{color:#fff;border:1px solid #2C96FF;background-color:#2C96FF;} .btn-primary:hover,.btn-primary:focus,.btn-primary:active{color:#fff;border:1px solid #1a6ec0;background-color:#1a6ec0;} /* Avatar */ .avatar{width:100px;height:100px;} .avatar-section{margin-bottom:25px;display:flex;text-align:left;} .username{margin-left:20px;} /* Scaffolding */ .site-wrapper{display:table;width:100%;height:100vh;min-height:100%;} .site-wrapper-inner{display:flex;flex-direction:column;justify-content:center;margin-right:auto;margin-left:auto;width:100%;height:100vh;} .panel-authed{padding:0 0 0 0;} /* Home button */ .btn-home-hello{position:absolute;font-family:"Source Code Pro",monospace;font-size:11px;font-weight:400;color:rgba(255,255,255,0.85);top:15px;left:15px;padding:3px 20px;background-color:rgba(255,255,255,0.15);border-radius:6px;-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);-moz-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);} /* Input */ input, textarea{color:#000;padding:10px;} .input-status{width:100%;height:70px;border-radius:6px;} .new-status{text-align:right;} /* Statuses */ .statuses{padding-top:30px;} .status{margin:15px 0px;padding:20px;background-color:#2e2e2e;border-radius:6px}
如果一切順利,我們最終的結果應該是這樣的:
用戶配置文件查找
現在讓我們修改 Profile.jsx以顯示其他用戶的配置文件。我們將使用blockstack . js提供的lookupProfile ( )方法,我們在前面的導入語句中添加了該方法。lookupProfile ( )接受單個參數,該參數是要查找的配置文件的blockstack ID,并返回配置文件對象。
首先,我們將對應用程序的路由結構進行一些更改,以便通過訪問http:// localhost:8080/other_user.id來查看其他用戶的配置文件
安裝 react-router:
npm install --save react-router-dom
打開src/index.js并添加到文件頂部:
import { BrowserRouter } from "react-router-dom"
接下來,將src / index . js中的reactdom . render ( )方法更改為:
ReactDOM.render((), document.getElementById("root"));
Then we"ll need to go back to src/components/App.jsx and add the new route. Open src/components/App.jsx and import the Switch and Route components from react-router-dom:
import { Switch, Route } from "react-router-dom"
接下來,在render ( )方法中找到下面的行:
:
并將其替換為:
:} />
這會設置路由并捕獲要用作配置文件查找用戶名的路由參數。
我們還需要在webpack配置中添加一個規則,以便正確處理包含的URL路徑。角色。例如: http://localhost:8080/other_user.id 注意:在生產應用程序中,需要配置web服務器來處理此問題。
在根項目目錄中打開webpack . config . js,然后找到以下行:
historyApiFallback: { disableDotRule: true },
更改為:
historyApiFallback: { disableDotRule: true },
**注:我們需要再次運行啟動NPM,這樣才能生效。
現在,我們跳回到src / components / profile . jsx,并添加一個方法來確定是查看本地用戶的配置文件還是其他用戶的配置文件。**
isLocal() { return this.props.match.params.username ? false : true }
然后我們可以修改fetchData ( )方法,如下所示:
fetchData() { this.setState({ isLoading: true }) if (this.isLocal()) { const options = { decrypt: false } getFile("statuses.json", options) .then((file) => { var statuses = JSON.parse(file || "[]") this.setState({ person: new Person(loadUserData().profile), username: loadUserData().username, statusIndex: statuses.length, statuses: statuses, }) }) .finally(() => { this.setState({ isLoading: false }) }) } else { const username = this.props.match.params.username lookupProfile(username) .then((profile) => { this.setState({ person: new Person(profile), username: username }) }) .catch((error) => { console.log("could not resolve profile") }) } }
我們首先使用isLocal ( )檢查是否正在查看本地用戶配置文件或其他用戶的配置文件。如果是本地用戶配置文件,我們將運行前面添加的getFile ( )函數。否則,我們使用lookupProfile ( )方法查找屬于用戶名的配置文件。
注意:對于https部署,用于名稱查找的默認塊堆棧核心API端點應更改為指向通過https提供的核心API。否則,由于瀏覽器阻止混合內容,名稱查找將失敗。有關詳細信息,請參閱blockstack . js文檔。
為了獲取用戶的狀態,我們在調用lookupProfile (用戶名)后立即向fetchData ( )添加以下lookupProfile(username)... catch((error)=>{..}塊:
const options = { username: username, decrypt: false } getFile("statuses.json", options) .then((file) => { var statuses = JSON.parse(file || "[]") this.setState({ statusIndex: statuses.length, statuses: statuses }) }) .catch((error) => { console.log("could not fetch statuses") }) .finally(() => { this.setState({ isLoading: false }) })
最后,我們需要有條件地呈現注銷按鈕、狀態輸入文本框和提交按鈕,以便它們在查看其他用戶的配置文件時不會顯示。在render ( )方法中,通過使用{ isLocal ( ) & &...}條件:
{this.isLocal() && | (Logout) } //... {this.isLocal() &&}
ok!將瀏覽器指向http://localhost:8080/your_blockstack.id以查看配置文件。注意:您需要有一個注冊的blockstack ID才能使此操作生效。
要查看本教程的完整源代碼,請訪問:https://github.com/larrysalib...
歡迎加入blockstack中國開發者群q(官方blockstack core開發者在內):加微信:six四九四叁壹六seven一
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/24066.html
摘要:這是一個最簡單的區塊鏈小程序的搭建過程,這個程序不需要后端,也不需要用戶進行注冊數據庫。 這是一個最簡單的區塊鏈小程序Hello Blockstack的搭建過程,這個程序不需要后端api,也不需要用戶進行注冊數據庫。 在這篇教程中我們會用到下面的工具: npm to manage dependencies and scripts browserify to compile node ...
摘要:程序員們在這個測試網絡上可以嘗試發送和接收使用購買域名和命名空間注冊子域名使用我們的命令行工具是由功能完備的核心節點組成的,它允許您在區塊鏈網絡上上執行所有相同的操作。 showImg(https://segmentfault.com/img/bV92g9?w=1000&h=576); developers can experiment with: Sending and receiv...
摘要:而與此同時,視覺中國堂而皇之地將黑洞照片標注為自己所有,在網友披露后,其發布的黑洞照片引發了一系列圖片的版權質疑問題。首先是共青團中央微博點名視覺中國,質疑視覺中國將國旗國徽打上版權聲明進行高價售賣。這是國內首例區塊鏈存證案。 showImg(https://segmentfault.com/img/bVbrmAO?w=900&h=505); 包舉宇內的視覺中國與難維之權 給人類首張黑...
摘要:為鼓勵創新技術及推動區塊鏈應用落地,進一步推動創新發展,本次論壇同步籌備舉辦區塊鏈之星年度評選。初選強共計獲得有效票數枚,參與投票人數近萬。最終結果將于月日美國硅谷舉辦的中美創投峰會區塊鏈論壇正式公布,并為獲獎者頒獎。 如你所見,有一大筆財富和價值正在被區塊鏈創造出來。正如 Blockstack 的創始人 Ryan Shea 和 AngelList 創始人 Naval Ravikant...
摘要:當時孫宇晨為了給出場的波場造勢,主動碰瓷以太坊,在推特上直接列出了條波場優于以太坊的理由。但如果是波場取代了以太坊的地位,我將對人類失去希望。不論波場與以太坊是否真有合作的可能性,商業戰場上的相愛相殺也大抵如此。 摘要:波場與以太坊將達成正式合作?是遲來的愚人節玩笑還是一笑泯恩仇? showImg(https://segmentfault.com/img/bVbrfU7?w=952&h...
閱讀 3606·2021-11-15 11:38
閱讀 2801·2021-11-11 16:55
閱讀 2550·2021-11-08 13:22
閱讀 2628·2021-11-02 14:45
閱讀 1304·2021-09-28 09:35
閱讀 2568·2021-09-10 10:50
閱讀 463·2019-08-30 15:44
閱讀 2775·2019-08-29 17:06