在区块链世界里，您留下的评论会永远留存，不能被篡改，永远不会消失~
区块链应用（DApp）通常以智能合约为后端，以HTML 和 JavaScript为前端。智能合约是区块链应用的核心，负责与区块链互动，现下流行的智能合约语言有Solidity 和Lity。
区块链的不可篡改，永久留存特性通常由智能合约来保证。
#1 在电脑浏览器打开 https://buidl.secondstate.io（推荐使用Chrome 浏览器）
#2 检查开发工具BUIDL是否连接到区块链上
检查方法：查看页面左下方 Providers 是否是绿色图标，绿色表明已经连接到Second State DevChain链上，红色表明尚未连接，请刷新重试。如果多次刷新后，仍然是红色，请及时告知。
#1 点击红色的Contract，清空默认代码，将下面的智能合约代码粘贴上去
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
pragma solidity >= 0.4.0;
contract PublicComments {
address owner;
string public greeting;
struct Comment {
string name;
string email;
string comment;
}
mapping (address => Comment) comments;
address [] addrs;
constructor (string _greeting) public {
owner = msg.sender;
greeting = _greeting;
}
function setGreeting (string _greeting) public {
require (msg.sender == owner);
greeting = _greeting;
}
function addComment (string _name, string _email, string _comment) public {
comments[msg.sender] = Comment(_name, _email, _comment);
addrs.push(msg.sender);
}
function getComment(address _addr) public constant returns(string, string, string) {
return (comments[_addr].name, comments[_addr].email, comments[_addr].comment);
}
function getAddrs () public constant returns (address []) {
return addrs;
}
}
|
#2 点击右上角Compile，在 _greeting 的横线处输入你想要征集的问题，之后点击 Deploy to the chain
这一步实施的是将合约部署到Second State DevChain上，部署成功的标志是在页面左上角出现合约名字 PublicComments 及TX和Address，页面下方log 出现TX 及 Success 字样。（小科普：TX是这笔交易的哈希值，是唯一的。Address 是合约地址，也是唯一的）
到这里我们就把区块链网站的后端写完了，这部分叫做智能合约，负责与区块链互动。区块链应用的特性主要由智能合约体现。
接下来是前端部分。
#1 点击绿色的Dapp，可以看到HTML，CSS，JS三个模块，清空这三个模块的代码。
将下面的代码粘贴到HTML 模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<div class="container">
<br/>
<div class="jumbotron">
<p class="lead" id="greeting"></p>
<hr/>
<form id="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="">
</div>
<div class="form-group">
<label for="comment">Comment</label>
<input type="text" class="form-control" id="comment" placeholder="">
</div>
<button type="button" id="submit" class="btn btn-primary">Send Comment</button>
</form>
<div id="formSubmitted" style="display:none">Please wait up to 5 seconds for confirmation ...</div>
<p id="me" style="display:none">Thank you, <span id="myname" class="badge badge-info"></span></p>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody id="likes">
</tbody>
</table>
<p style="text-align:center">Created with <a target="_blank" href="https://docs.secondstate.io/buidl-developer-tool/why-buidl">the BUIDL IDE</a>.</p>
</div>
|
将下面的代码粘贴到JS 模块，从 var instance 开始粘贴。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
/* Don't modify */
这里不要改
/* Don't modify */
var instance = null;
window.addEventListener('web3Ready', function() {
var contract = web3.ss.contract(abi);
instance = contract.at(cAddr);
reload();
});
function reload() {
instance.greeting(function (e, r) {
$("#greeting").html(r);
});
$("#form").css("display", "block");
$("#formSubmitted").css("display", "none");
$("#me").css("display", "none");
web3.ss.getAccounts(function (e, address) {
if (!e) {
instance.getComment(address, function (ee, result) {
if (result[0]) {
$("#form").css("display", "none");
$("#me").css("display", "block");
$("#myname").html(result[0]);
}
});
var likes = "";
instance.getAddrs(function (ee, addrs) {
addrs.forEach(function(addr) {
instance.getComment(addr, function (ee, r) {
if (!ee) {
likes = likes + "<tr><td>" + r[0] + "</td><td>" + r[2] + "</td></tr>";
$("#likes").html(likes);
}
});
});
});
$("#likes").html(likes);
}
});
}
$("#submit").click(function() {
if ((!$("#name").val().trim()) || (!$("#comment").val().trim())) {
alert("Please enter both a name and a comment");
return false;
}
web3.ss.getAccounts(function (e, address) {
if (!e) {
$("#form").css("display", "none");
$("#formSubmitted").css("display", "block");
instance.addComment ($("#name").val(), $("#email").val(), $("#comment").val(), {
gas: 499000,
gasPrice: 0
}, function (ee, r) {
if (ee) {
window.alert("Failed at " + address);
}
});
setTimeout(function () {
reload ();
}, 5 * 1000);
}
});
return false;
});
|
#2 BUIDL 是一个开源的开发工具，支持添加开源的代码资源，点击Resources 。
- 在JavaScript 点击加号，将下面的JS资源粘贴到弹窗里：https://code.jquery.com/jquery-3.4.1.min.js 并点击确定
- 在CSS 处点击加号，将下面的CSS 资源粘贴到弹窗里：https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css 并点击确定。
添加好后，再次点击Resources，将输入框收回。
#3 点击最左边的Run，会在页面右侧预览网页样式。然后输入自己的看法，做个测试吧!（输入自己的评论后，需要等大概5秒左右的时间确认）
#4 点击页面上方的Publish，输入网站的名称，然后等待大概30秒，点击launched 就可以通过网页的形式向周围的人传播。
