記事ディレクトリ
序文
ブロックチェーン技術は現在非常に人気があり、スマート コントラクトについて聞いたことがあると思いますが、スマート コントラクトとは一体何でしょうか?
実際、スマート コントラクトはまったくスマートではなく、ブロックチェーン上にデプロイされた開発されたプログラムにすぎず、その中のメソッドを呼び出すことができます。
現在の人工知能とは関係ないので、スマートコントラクトの開発は難しいのでしょうか？
それは本当に難しいことではありません、あなたが私を信じないなら、私と一緒に来てください、Bao Xue Bao Hui。
環境整備
1.Node.js、npmをインストールする
Node.js は Chrome V8 エンジンをベースにした JavaScript 実行環境で、ここでは npm をインストールするために Node.js をインストールします。
Nodejs 公式 Web サイトにアクセスしてNode.js インストール パッケージをダウンロードし、プロンプトに従ってインストールします。
ターミナルに「node -v」と入力します。バージョン番号が表示されれば、インストールは成功しています。
nodejs をインストールすると、デフォルトで npm がインストールされます。
npmとは何ですか?
npm は実際には Node.js のパッケージ マネージャーです。
簡単に言えば、npm はさまざまなツールを迅速にダウンロードできるようにするためのものです。
ターミナルに npm -v を入力し、バージョン番号が表示されれば、インストールは成功しています。
2. Web3 JS - Ethereum クライアント開発用の JavaScript フレームワークをインストールします。
ターミナルに「npm install web3」と入力します。
web3.js を自動的にダウンロードしてインストールできます (すべて npm のおかげです)。
web3.jsは何に使われますか?
簡単に言うと、web3.js の主な機能は、スマート コントラクトを操作するためのクラス ライブラリを多数提供し、JavaScript を通じてスマート コントラクトを呼び出すことができるようにすることです。
3.ガナッシュをインストールする
公式 Web サイトにアクセスしてGanacheをダウンロードしてインストールします。Ganache はローカル ブロックチェーン テスト環境です。シンプルなブロックチェーンを仮想化します。最初にテストのためにスマート コントラクトをローカルにデプロイし、テストが完了したら公式チェーンにリリースできます。 . .
インストール後に開き、クイックスタートをクリックすると、テスト用のブロックチェーン環境をすぐに作成できます。
作成が完了すると、ネットワーク ID、ローカル サービス アドレス、およびそれぞれ 100 ETH を持つ複数のテスト アカウントを含むローカル ブロックチェーン環境が表示されます。
コードのデプロイメント
1. 契約書を書く
remixはブラウザ上で直接利用できるオンラインスマートコントラクト開発環境で、とても便利です。
Web ページを開くと、編集ページが表示され、左側の契約フォルダーの下に独自のスマート コントラクト ファイル SetName.sol を追加できます。
Solidity 言語はスマート コントラクトの記述に使用されます。以下は簡単な例であり、名前とラッキー ナンバーを設定する 2 つの方法と、値を取得する 2 つの方法です。ここでは具体的な構文は紹介しません。関連するドキュメントを参照してください。情報。
// 合约版本号
pragma solidity >=0.7.0 <0.9.0;
contract SetName {
// 名字
string public name;
// 幸运号码
uint32 public luckNum;
// 构造方法，创建合约的时候自动调用（仅运行一次）
constructor() public {
name = "zhanyd";
}
// 设置名字
function setName(string _name) public {
name = _name;
}
// 获取名字
function getName() external view returns (string memory) {
return name;
}
// 设置幸运号码
function setLuckNum(uint32 _luckNum) public {
luckNum = _luckNum;
}
// 获取幸运号码
function getLuckNum() external view returns (uint32) {
return luckNum;
}
}
2. コントラクトを展開する
左側の「デプロイ&実行」ボタンをクリックし、「環境」ドロップダウン・ボックスで「Ganache Provider」を選択します。
Ganache プロバイダー ポップアップ ボックスに Ganache のローカル サービス アドレスを入力します。
[OK] をクリックすると、Ganache のアドレスが自動的にロードされます。
スマート コントラクト setName を選択した後、[デプロイ] ボタンをクリックしてコントラクトをデプロイします。
デプロイして再生すると、「Deployed Contracts」にデプロイしたコントラクトが生成され、コントラクト内のメソッドが同時に表示され、右下にシステムログが表示されます。
同時に、Ganache のトランザクション タブでコントラクトを作成したトランザクションを確認できます。
ここではスマート コントラクトが展開されていますが、非常に簡単ですか?
3. 契約書を作成する
コントラクトを呼び出して試してみましょう。
getName ボタンをクリックしてコントラクト内の getName メソッドを呼び出し、名前の初期値 zanyd を返します (上記のコードのconstructor() を覚えていますか?)。
setLuckNum メソッドと setName メソッドをそれぞれ呼び出して、ラッキー ナンバーと名前を設定し、ログ レコードに 2 つのブロックが生成されます。
Ganache に 2 つの新しいブロックが追加されたことがわかります。
getLuckNum ボタンと getName ボタンをクリックして、設定したばかりのラッキー ナンバーと名前を取得します。
さて、コントラクトの呼び出しは成功したようですが、開発環境では常にコントラクトを呼び出せるわけではなく、面倒です。
みんなで一緒に使えるスマートコントラクトを開発しているので、ブラウザのWebページから直接呼び出せたらいいですね！
DAPP
DAPP とは何ですか?
DAPPとは分散型アプリケーションで、簡単に言えばスマートコントラクトを呼び出すことができるアプリケーションです。
次に、単純な DAPP を開発してみましょう。
最初にインストールした web3.js を覚えていますか?
web3.js を使用すると、JavaScript コードでスマート コントラクトを呼び出すことができるようになります。
まずは簡単な HTML ページを作成してみましょう。
1.DAPPを書く
<!DOCTYPE html>
<html>
<head>
<!-- 在线引入jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<!-- 在线引入web3.min.js -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<title></title>
显示名字：<div id="show_name"></div>
显示幸运号码：<div id="show_luck_num"></div>
<from id="form">
<div>名字：<input type="text" name="name" id="name"></div>
<div>幸运号码：<input type="text" name="luckNum" id="luckNum"></div>
<input type="button" value="提交" onclick="submit()">
</from>
</head>
<body>
<script type="text/javascript">
let contract
let web3
$(function() {
// 初始化 Web3
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545'));
}
// 测试是否连接成功
web3.eth.net.isListening()
.then(() => console.log('is connected'))
.catch(e => console.log('Wow. Something went wrong: '+ e));
// 设置合约 ABI
var contractAbi =
[
{
"inputs": [
{
"internalType": "uint32",
"name": "_luckNum",
"type": "uint32"
}
],
"name": "setLuckNum",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "string",
"name": "_name",
"type": "string"
}
],
"name": "setName",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"inputs": [],
"name": "getLuckNum",
"outputs": [
{
"internalType": "uint32",
"name": "",
"type": "uint32"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "getName",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "luckNum",
"outputs": [
{
"internalType": "uint32",
"name": "",
"type": "uint32"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "name",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
}
]
// 设置合约地址
let contractAddress = '0xeB730Ef3Bc008376c88e09E6d23e364AEedA89a4';
// 获取智能合约对象
contract = new web3.eth.Contract(contractAbi,contractAddress);
// 调用合约对象的方法，返回名字
contract.methods.getName().call()
.then(function(result) {
console.log(result)
$('#show_name').text(result)
})
// 调用合约对象的方法，返回幸运号码
contract.methods.getLuckNum().call()
.then(function(result) {
console.log(result)
$('#show_luck_num').text(result)
})
})
// 提交事假
function submit() {
// from是Ganache模拟的一个账户地址
contract.methods.setName($('#name').val()).send({
from: '0x401Ec2d1E34d5Ae1fA07e5857Da9238CDC9dDf13'})
.then(function(result) {
console.log(result)
});
contract.methods.setLuckNum($('#luckNum').val()).send({
from: '0x401Ec2d1E34d5Ae1fA07e5857Da9238CDC9dDf13'})
.then(function(result) {
console.log(result)
});;
}
</script>
</body>
</html>
契約アドレスは次のとおりです。
コントラクト ABI はここからコピーされます。
コントラクト ABI は、スマート コントラクト内のメソッドを json 形式で記述することで、フロントエンドがコントラクトにどのようなメソッドとパラメーターがあるかを認識し、それらを js で呼び出すことができます。
私のコードを直接コピーする場合は、必ず契約アドレス、契約 ABI、アカウント アドレスを置き換えてください。
2.DAPPを実行する
HTML ファイルを直接開くと、スマート コントラクトから読み取られた名前とラッキー ナンバーが表示されます。
変更する名前とラッキーナンバーを入力し、送信ボタンをクリックします。
ページを更新して、変更されたデータを取得します。
おめでとうございます。最初のスマート コントラクトが開発されました。