區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

androidwing發表於2018-05-12

前言

本文同步自wing的地方酒館

無論你是否想了解NAS,只要你想了解區塊鏈或者DAPP都可以看這篇文章,因為很多概念是一樣的。

應該有很多小夥伴和我一樣,一直想去入手學習區塊鏈,但是總無從下手,有些概念感覺理解了,有感覺沒理解。其實這都是***“沒實踐”**的鍋。

所謂看十遍不如想一遍,想一遍不如做一遍。這不最近星雲鏈nebulas正有開發者激勵計劃,每提交一個應用都可以獲得獎勵,所以正好藉此機會,開發第一個DAPP,並且理解所謂的DAPP到底是一個什麼樣的東西。

這篇文章幾乎是DAPP開發零基礎的踩坑經歷,記錄下來,勉強對零基礎的同學可以成為教程~

如果你看了本篇教程並且開發了你自己的DAPP,可以點選這裡註冊NAS 用我的推廣連結提交,這樣你提交的時候我會得到另外一部分獎勵,作為對我寫作的激勵~

在開始開發之前,需要進行一系列的準備操作。包括錢包的製備,環境的搭建等等。這裡對各種概念,我儘量以通俗易懂的話來描述,因為我也是小白,可能會因此描述的不夠準確,所以歡迎大家拍磚討論。

註冊錢包

作為開發的第一步,首先肯定是需要申請一個錢包。

這裡的錢包你可以想象成你顯示世界的錢包。裡面存放著你的大洋。現實生活中,你的錢包在你手裡,所以別人拿不走,再數字生活中,你需要有一個密碼來解鎖你的錢包,當你的密碼丟失的時候,就等於你的錢包丟失,無法找回,並且造成財產丟失。

首先在GitHub上面,把官方web錢包clone下來:github.com/nebulasio/w…

其次開啟index.html檔案

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

這樣你就開啟了web版的錢包,輸入你想要的密碼(一定不能忘記的),點選新建錢包,其次點選下載密碼庫檔案,將錢包檔案儲存在本地(一定不能丟失),此時生成了一個以n1開頭的檔案:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

這個檔案的名稱就是你的錢包地址。 任何人有了你的錢包地址,就可以與你發生 交易,意思就是別人可以向你的錢包裡面轉賬。

此時點選錢包資訊,上傳你的錢包並且解鎖,可以看到你的賬戶的當前資訊。期中包括你的餘額等資料。

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

此時你已經註冊了你的一個錢包,完成了第一部準備。

接下來進行下一步準備,那就是領取測試網的測試幣。在testnet.nebulas.io/claim/每天可以領取1NAS的測試幣,注意這個幣領取是在測試網,與主網沒有任何關係。 主網和測試網的意思你可以理解為兩個不同的鏈,事實上區塊鏈本身就是資料庫,其實就是主網和測試網是兩個不同的資料庫的資料,測試網的資料只用來測試不產生實際價值。

領取完畢之後,再開啟錢包,在錢包右上角可以切換主網和測試網,這時切換到測試網。

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP
查詢錢包餘額,發現已經領取完畢(如果沒有顯示成功,請耐心等待,區塊確認有延遲,意思是把資料寫入區塊鏈裡,需要等待各個區塊確認該資料有效安全,才可以將資料寫入區塊鏈,所以會有延遲)

你已經成功領取了第一個NAS,接下來你將會用測試的NAS來部署測試你的智慧合約。

編寫部署智慧合約

在開始這部分之前,先來解釋一些如何理解智慧合約,或者說如何理解一個DAPP的運作原理。

智慧合約簡單的白話來講,就是一段儲存在區塊鏈上,執行在區塊鏈程式碼執行引擎的一個程式碼片。這部分的程式碼,提供給DAPP前端一些必要的介面,用來儲存或者查詢資料。你可以理解為:智慧合約就是後端,提供介面的。他所用的資料庫就是區塊鏈本身。

智慧合約貌似理解了,那麼區塊鏈本身是資料庫如何理解呢?

區塊鏈(block-chain),顧名思義,是以區塊形成的連結串列,所有資料儲存在稱為“區塊”的東西上,每個區塊的大小有限,所有用連結串列把他們串聯起來,如圖:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

這樣就應該很好理解了,那麼說完了後端和資料庫,是不是就差前端了?

一個DAPP的前端,可以是任何形式的,比如WEB版,比如Android版,比如iOS版,但是因為市面上大多數區塊鏈開發都屬於前期,官方只提供了WEB版的sdk來接入區塊鏈,所以目前一般的DAPP是以WEB版為主,畢竟跨平臺。

那麼接下來,我們來開始編輯我們的智慧合約,也就是所謂的後臺。此部分參考官方dictionary的demo進行修改。

這裡假設我們要做一個名為“小小公開信”的DAPP,主要的功能是任何區塊鏈上的使用者都可以發表一篇標題不重複的公開信,如果標題被佔用,就只能檢視這篇公開信。

首先新建一個js檔案,編寫我們所需要的實體,比如一公開信,他應該有標題,內容,以及作者。

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP
其次,我們應該可以有許可權訪問我們自己智慧合約的儲存空間,所以根據官方的API來建立儲存空間:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

這裡的資料是以kep-value形式儲存的。相信大家很容易理解。

接下來,只需要再編寫兩個函式,一個是儲存公開信,一個是查詢公開信,邏輯比較簡單,直接貼程式碼:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

這樣,我們就完成了一個簡單的智慧合約。

部署智慧合約

還記得你剛才領取的測試網的1枚NAS嗎,他開始派上用場了。要知道,把我們的程式碼部署到鏈上可不是免費的,要不然白白浪費資源誰都不願意幹啊,所以我們需要支付一定量的GAS,只要是交易,或者理解為向區塊鏈這個資料庫寫入資料,就需要支付GAS,GAS是NAS的一個計量單位(當然首創在ETH中)。為什麼需要GAS呢,其中除了為了保證執行的程式碼不是無價值的,還有一個原因是要防止有人惡意釋出程式碼,比如寫一個死迴圈。

現在,開啟你的錢包,點選合約,再點選部署,把你剛才的智慧合約程式碼複製到合約程式碼裡面,之後解鎖錢包,點選測試,發現沒有返回錯誤,就可以點選提交部署:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP
部署成功之後,會告訴你交易的hash以及合約地址,一定要好好儲存起來,否則目前會丟失(好像官方錢包還沒提供查詢歷史交易的功能)

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

這裡合約地址就是你剛才部署程式碼的地址,每個智慧合約都有一個合約地址,通過合約地址以及支付一些GAS,就可以呼叫合約的程式碼。

測試智慧合約

點選錢包的執行,此時我們測試一下寫入一封公開信,這裡函式寫合約定義的

save() 引數傳入: ["給初學者的一封公開信","大家持之以恆不斷努力,終會成功"] 目的地址寫剛才的合約地址如圖:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

點選測試,發現沒有錯誤,則提交。 等待區塊確認之後,我們再來查詢一下,剛才的資料有沒有提交成功:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

點選測試,可以看到結果:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

成功把我們的公開信返回了。至此合約部署完畢。

開發前端頁面

既然我們的智慧合約部署好了,就說明我們擁有一個資料庫為區塊鏈的後臺伺服器了。現在只需要編寫一個前端,展示給使用者使用就可以了。

官方提供了js版的api,可以讓瀏覽器接入區塊鏈獲取資料,sdk地址如下: github.com/nebulasio/n…

首先把專案clone下來:

git clone https://github.com/nebulasio/neb.js.git

複製程式碼

然後,需要用到一個打包工具叫做gulp

所以使用npm安裝:

npm install -g gulp
複製程式碼

安裝完畢後,執行glup打包

打包完畢後,會在專案資料夾下生成一個/dist的資料夾,把這個資料夾複製到我們的工作目錄,作為檔案依賴使用。

因為筆者沒有接觸過前端開發,所以這裡前端選擇bootstrap+jQuery,因為他們對新手很友好,零基礎即可快速上手。

首先在html檔案裡,引入需要的依賴檔案:


    <script type="text/javascript" src="./dist/nebulas.js"></script>
    <script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

複製程式碼

然後編寫前端樣式,這裡的前端比較簡單,提供一個搜尋框,一個展示框,一個錄入框:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

當使用者輸入信件名稱的時候,呼叫neb的介面,來獲取資料,根據回撥來展示資料:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

比如,此時我搜尋一篇文章,名為《給初學者的一封公開信》,反饋如下:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

這樣代表,已經查詢到了內容。接下來來完成提交內容的部分。

此時根據nebpay的api,可以呼叫起chrome錢包外掛進行支付:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

其中nebPay是根據官方示例拷貝下來的檔案。


    <script type="text/javascript" src="./dist/nebPay.js"></script>
複製程式碼

這個時候,編輯一封公開信,點選提交,即可彈出錢包頁面進行GAS支付:

區塊鏈應用:NAS星雲鏈 入門之從零開發第一個DAPP

等提交完畢,即可查詢到你寫的公開信的內容。

如果你點選沒有反應,那麼說明你沒有安裝chrome外掛的錢包,點選這裡安裝github.com/ChengOrange…

如此一來遍大功告成!

因為是靜態網頁,所以直接部署到你的伺服器上,讓其他使用者訪問即可。

當你開發部署完畢,即可去官網提交DAPP獲取激勵大獎~~

如果本文對你有幫助,請點選喜歡並且擴散~~

本文中DAPP已提交,並且部署以及開源

應用地址是:androidwing.net/nas-dapps/t…

專案地址是:github.com/githubwing/…

歡迎star,如果你想來交流區塊鏈技術,可以加qq群:615075629

參考文章: 五一大禮包:手把手教你一小時開發DApp,千萬獎金等你拿

github.com/nebulasio/w…

相關文章