摘要:本文首發于深入淺出區塊鏈社區原文鏈接一步步教你開發部署第一個去中心化應用寵物商店原文已更新,請讀者前往原文閱讀今天我們來編寫一個完整的去中心化區塊鏈應用本文可以和編寫智能合約結合起來看。
本文首發于深入淺出區塊鏈社區
原文鏈接:一步步教你開發、部署第一個去中心化應用(Dapp) - 寵物商店原文已更新,請讀者前往原文閱讀
今天我們來編寫一個完整的去中心化(區塊鏈)應用(Dapps), 本文可以和編寫智能合約結合起來看。
寫在前面閱讀本文前,你應該對以太坊、智能合約有所了解,如果你還不了解,建議你先看以太坊是什么
除此之外,你最好還了解一些HTML及JavaScript知識。
本文通過實例教大家來開發去中心化應用,應用效果如圖:
從本文,你可以學習到:
搭建智能合約開發環境
創建Truffle項目
編寫智能合約
編譯和部署智能合約到區塊鏈
如何通過Web3和智能合約交互
MetaMask 的使用
小專欄用戶在教程結尾處可以下載完整的Dapp代碼。
項目背景Pete有一個寵物店,有16只寵物,他想開發一個去中心化應用,讓大家來領養寵物。
在truffle box中,已經提供了pet-shop的網站部分的代碼,我們只需要編寫合約及交互部分。
安裝Node
安裝 Truffle :npm install -g truffle
安裝Ganache
Ganache(或Ganache CLI)已經取代了 testrpc。創建項目
1、 建立項目目錄并進入
> mkdir pet-shop-tutorial > cd pet-shop-tutorial
2、 使用truffle unbox 創建項目
> truffle unbox pet-shop Downloading... Unpacking... Setting up... Unbox successful. Sweet! Commands: Compile: truffle compile Migrate: truffle migrate Test contracts: truffle test Run dev server: npm run dev
這一步需要等待一會
也可以使用truffle init 來創建一個全新的項目。項目目錄結構
contracts/ 智能合約的文件夾,所有的智能合約文件都放置在這里,里面包含一個重要的合約Migrations.sol(稍后再講)
migrations/ 用來處理部署(遷移)智能合約 ,遷移是一個額外特別的合約用來保存合約的變化。
test/ 智能合約測試用例文件夾
truffle.js/ 配置文件
其他代碼可以暫時不用管
編寫智能合約智能合約承擔著分布式應用的后臺邏輯和存儲。智能合約使用solidity編寫,可閱讀
solidity系列文章
在contracts目錄下,添加合約文件Adoption.sol
pragma solidity ^0.4.17; contract Adoption { address[16] public adopters; // 保存領養者的地址 // 領養寵物 function adopt(uint petId) public returns (uint) { require(petId >= 0 && petId <= 15); // 確保id在數組長度內 adopters[petId] = msg.sender; // 保存調用這地址 return petId; } // 返回領養者 function getAdopters() public view returns (address[16]) { return adopters; } }編譯部署智能合約
Truffle集成了一個開發者控制臺,可用來生成一個開發鏈用來測試和部署智能合約。
編譯Solidity是編譯型語言,需要把可讀的Solidity代碼編譯為EVM字節碼才能運行。
dapp的根目錄pet-shop-tutorial下,
> truffle compile
輸出
Compiling ./contracts/Adoption.sol... Writing artifacts to ./build/contracts部署
編譯之后,就可以部署到區塊鏈上。
在migrations文件夾下已經有一個1_initial_migration.js部署腳本,用來部署Migrations.sol合約。
Migrations.sol 用來確保不會部署相同的合約。
現在我們來創建一個自己的部署腳本2_deploy_contracts.js
var Adoption = artifacts.require("Adoption"); module.exports = function(deployer) { deployer.deploy(Adoption); };
在執行部署之前,需要確保有一個區塊鏈運行, 可以使用
Ganache來開啟一個私鏈來進行開發測試,默認會在7545端口上運行一個開發鏈。
Ganache 啟動之后是這樣:
接下來執行部署命令:
> truffle migrate
執行后,有一下類似的輸出,
Using network "develop". Running migration: 1_initial_migration.js Deploying Migrations... ... 0x3076b7dac65afc44ec51508bf6f2b6894f833f0f9560ecad2d6d41ed98a4679f Migrations: 0x8cdaf0cd259887258bc13a92c0a6da92698644c0 Saving successful migration to network... ... 0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956 Saving artifacts... Running migration: 2_deploy_contracts.js Deploying Adoption... ... 0x2c6ab4471c225b5473f2079ee42ca1356007e51d5bb57eb80bfeb406acc35cd4 Adoption: 0x345ca3e014aaf5dca488057592ee47305d9b3e10 Saving successful migration to network... ... 0xf36163615f41ef7ed8f4a8f192149a0bf633fe1a2398ce001bf44c43dc7bdda0 Saving artifacts...
在打開的Ganache里可以看到區塊鏈狀態的變化,現在產生了4個區塊。
這時說明已經智能合約已經部署好了。
現在我們來測試一下智能合約,測試用例可以用 JavaScript or Solidity來編寫,這里使用Solidity。
在test目錄下新建一個TestAdoption.sol,編寫測試合約
pragma solidity ^0.4.17; import "truffle/Assert.sol"; // 引入的斷言 import "truffle/DeployedAddresses.sol"; // 用來獲取被測試合約的地址 import "../contracts/Adoption.sol"; // 被測試合約 contract TestAdoption { Adoption adoption = Adoption(DeployedAddresses.Adoption()); // 領養測試用例 function testUserCanAdoptPet() public { uint returnedId = adoption.adopt(8); uint expected = 8; Assert.equal(returnedId, expected, "Adoption of pet ID 8 should be recorded."); } // 寵物所有者測試用例 function testGetAdopterAddressByPetId() public { // 期望領養者的地址就是本合約地址,因為交易是由測試合約發起交易, address expected = this; address adopter = adoption.adopters(8); Assert.equal(adopter, expected, "Owner of pet ID 8 should be recorded."); } // 測試所有領養者 function testGetAdopterAddressByPetIdInArray() public { // 領養者的地址就是本合約地址 address expected = this; address[16] memory adopters = adoption.getAdopters(); Assert.equal(adopters[8], expected, "Owner of pet ID 8 should be recorded."); } }
Assert.sol 及 DeployedAddresses.sol是Truffle框架提供,在test目錄下并不提供truffle目錄。
TestAdoption合約中添加adopt的測試用例
運行測試用例在終端中,執行
truffle test
如果測試通過,則終端輸出:
Using network "develop". Compiling ./contracts/Adoption.sol... Compiling ./test/TestAdoption.sol... Compiling truffle/Assert.sol... Compiling truffle/DeployedAddresses.sol... TestAdoption ? testUserCanAdoptPet (62ms) ? testGetAdopterAddressByPetId (53ms) ? testGetAdopterAddressByPetIdInArray (73ms) 3 passing (554ms)創建用戶接口和智能合約交互
我們已經編寫和部署及測試好了我們的合約,接下我們為合約編寫UI,讓合約真正可以用起來。
在Truffle Box pet-shop里,已經包含了應用的前端代碼,代碼在src/文件夾下。
在編輯器中打開src/js/app.js
可以看到用來管理整個應用的App對象,init函數加載寵物信息,就初始化web3.
web3是一個實現了與以太坊節點通信的庫,我們利用web3來和合約進行交互。
接下來,我們來編輯app.js修改initWeb3():
刪除注釋,修改為:
initWeb3: function() { // Is there an injected web3 instance? if (typeof web3 !== "undefined") { App.web3Provider = web3.currentProvider; } else { // If no injected web3 instance is detected, fall back to Ganache App.web3Provider = new Web3.providers.HttpProvider("http://localhost:7545"); } web3 = new Web3(App.web3Provider); return App.initContract(); }
代碼中優先使用Mist 或 MetaMask提供的web3實例,如果沒有則從本地環境創建一個。
實例化合約使用truffle-contract會幫我們保存合約部署的信息,就不需要我們手動修改合約地址,修改initContract()代碼如下:
initContract: function() { // 加載Adoption.json,保存了Adoption的ABI(接口說明)信息及部署后的網絡(地址)信息,它在編譯合約的時候生成ABI,在部署的時候追加網絡信息 $.getJSON("Adoption.json", function(data) { // 用Adoption.json數據創建一個可交互的TruffleContract合約實例。 var AdoptionArtifact = data; App.contracts.Adoption = TruffleContract(AdoptionArtifact); // Set the provider for our contract App.contracts.Adoption.setProvider(App.web3Provider); // Use our contract to retrieve and mark the adopted pets return App.markAdopted(); }); return App.bindEvents(); }處理領養
修改markAdopted()代碼:
markAdopted: function(adopters, account) { var adoptionInstance; App.contracts.Adoption.deployed().then(function(instance) { adoptionInstance = instance; // 調用合約的getAdopters(), 用call讀取信息不用消耗gas return adoptionInstance.getAdopters.call(); }).then(function(adopters) { for (i = 0; i < adopters.length; i++) { if (adopters[i] !== "0x0000000000000000000000000000000000000000") { $(".panel-pet").eq(i).find("button").text("Success").attr("disabled", true); } } }).catch(function(err) { console.log(err.message); }); }
修改handleAdopt()代碼:
handleAdopt: function(event) { event.preventDefault(); var petId = parseInt($(event.target).data("id")); var adoptionInstance; // 獲取用戶賬號 web3.eth.getAccounts(function(error, accounts) { if (error) { console.log(error); } var account = accounts[0]; App.contracts.Adoption.deployed().then(function(instance) { adoptionInstance = instance; // 發送交易領養寵物 return adoptionInstance.adopt(petId, {from: account}); }).then(function(result) { return App.markAdopted(); }).catch(function(err) { console.log(err.message); }); }); }在瀏覽器中運行 安裝 MetaMask
MetaMask 是一款插件形式的以太坊輕客戶端,開發過程中使用MetaMask和我們的dapp進行交互是個很好的選擇,通過此鏈接安裝,安裝完成后,瀏覽器工具條會顯示一個小狐貍圖標。
配置錢包在接受隱私說明后,會出現頁面如下:
這里我們通過還原一個Ganache為我們創建好的錢包,作為我們的開發測試錢包。點擊頁面的 Import Existing DEN,輸入Ganache顯示的助記詞。
candy maple cake sugar pudding cream honey rich smooth crumble sweet treat
然后自己想要的密碼,點擊OK。
如圖:
默認連接的是以太坊主網(左上角顯示),選擇Custom RPC,添加一個網絡:http://127.0.0.1:7545,點返回后,顯示如下:
這是左上角顯示為Private Network,賬號是Ganache中默認的第一個賬號。
至此MetaMask的安裝,配置已經完成。
安裝和配置lite-server接下來需要本地的web 服務器提供服務的訪問, Truffle Box pet-shop里提供了一個lite-server可以直接使用,我們看看它是如何工作的。
bs-config.json指示了lite-server的工作目錄。
{ "server": { "baseDir": ["./src", "./build/contracts"] } }
./src 是網站文件目錄
./build/contracts 是合約輸出目錄
以此同時,在package.json文件的scripts中添加了dev命令:
"scripts": { "dev": "lite-server", "test": "echo "Error: no test specified" && exit 1" },
當運行npm run dev的時候,就會啟動lite-server
啟動服務> npm run dev
會自動打開瀏覽器顯示我們的dapp,如本文的第一張圖。
現在領養一直寵物看看,當我們點擊Adopt時,MetaMask會提示我們交易的確認,如圖:
點擊Submit確認后,就可以看到成功領養了這次寵物。
在MetaMask中,也可以看到交易的清單:
好了,恭喜你,即將成為一名去中心化式應用開發者的你已經成為邁出了堅實的一步。
如果學習中遇到問題,歡迎來我的知識星球交流。
Truffle手冊
? 深入淺出區塊鏈 - 系統學習區塊鏈,打造最好的區塊鏈技術博客。
? 我的知識星球為各位解答區塊鏈技術問題,歡迎加入討論。
? 關注公眾號“深入淺出區塊鏈技術”第一時間獲取區塊鏈技術信息。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/24090.html
摘要:剛好又過了一段時間,看到了星云發布的星云激勵計劃第一季活動,就是鼓勵開發者們基于星云鏈主網開發去中心化應用的活動,里面也包含了不小的獎勵。 最近一段時間,除了上班加班之外,基本上都在忙著開發 DApp,也就是所謂的去中心化應用(Decentralized Applications)啦,為什么突然就搞起這個了呢?事情是這樣的…… 就在前不久,很偶然地了解到了 Loom Network 這...
摘要:將基于和開發的放在區塊鏈系統上,結合智能合約,就成了。應用的數據加密后存儲在公開的區塊鏈上,所有對基礎區塊鏈技術的安全性穩定性及持續性要求較高。以太貓本身具有虛擬貨幣的功能,每只貓都是獨特的交易于區塊鏈的不可變更物體。啟迪云-高級開發工程師 嚴剛前言2018年以來,區塊鏈(blockchain)無疑是最火的科技之一,新聞媒體大量報道,宣稱它將創造未來。我們該怎樣參與?買幾個幣算不算呢?其實也...
摘要:區塊鏈應用的價值由這個游戲反映的淋漓盡致,游戲能夠成功核心所依賴的是以太坊提供的一個可信不可篡改平臺。今天這篇就來介紹一下程序員如何切入去中心化應用開發。 本文首發于深入淺出區塊鏈社區原文鏈接:程序員如何切入區塊鏈去中心化應用開發原文已更新,請讀者前往原文閱讀 前段時間一個以太坊游戲應用:Fomo3D異常火爆,在短短的幾天內就吸引了幾萬的以太幣投入游戲,第一輪游戲一個黑客用了一個非常巧...
摘要:下面,我想用淺顯易懂的語言,簡述一下區塊鏈游戲的機會。同時這也是第一個從游戲機制到設計來說,整體完成度較高的區塊鏈游戲,其他同期的小游戲基本是在原型或者階段。 作者:Vincent, DappReview CEO編輯:米芽 復盤過去十年,站在每一個時間節點都有大大小小機會。而往前看,似乎卻一片迷茫。 本文以一個深度參與者的身份,用寥寥幾千字,試圖還原區塊鏈游戲在過去半年的發展,并...
閱讀 1125·2021-11-24 10:21
閱讀 2561·2021-11-19 11:35
閱讀 1662·2019-08-30 15:55
閱讀 1293·2019-08-30 15:54
閱讀 1192·2019-08-30 15:53
閱讀 3498·2019-08-29 17:21
閱讀 3308·2019-08-29 16:12
閱讀 3412·2019-08-29 15:23