ビットコイン SV ブロックチェーン上にフルスタックの分散型三目並べ Dapp を構築する: 究極のガイド

「この記事では、ビットコイン SV ブロックチェーン上でフルスタック分散アプリを開発するための Web3 技術スタックの包括的な概要を提供します。技術スタックには、sCrypt Frameworks、Yours Wallet、および React が含まれます。フルスタック分散三目並べを構築するプロセスゲームの概要は、スマート コントラクトの作成、コントラクトの展開、フロントエンドの統合 (React を使用)、Yours ウォレットの統合など、詳細に説明されています。ガイドに従うことで、読者は、ビットコイン SV 上で完全に機能する分散型アプリを構築する方法を理解できます。ブロックチェーン。」

Build a Full-Stack Decentralized Tic-Tac-Toe App on the Bitcoin SV Blockchain: A Comprehensive Guide

ビットコイン SV ブロックチェーン上にフルスタックの分散型三目並べアプリを構築する: 包括的なガイド

Introduction

導入

In this detailed guide, we will guide you through the process of building a complete full-stack decentralized Tic-Tac-Toe application on the Bitcoin SV (BSV) blockchain. This comprehensive journey will cover the creation of a smart contract, deploying it, integrating a front-end using React, and connecting to a user's wallet. By the end, you will possess a fully functional Tic-Tac-Toe application running seamlessly on the BSV blockchain.

この詳細なガイドでは、ビットコイン SV (BSV) ブロックチェーン上に完全なフルスタック分散型三目並べアプリケーションを構築するプロセスを説明します。この包括的な取り組みでは、スマート コントラクトの作成、デプロイ、React を使用したフロントエンドの統合、ユーザーのウォレットへの接続までをカバーします。最終的には、BSV ブロックチェーン上でシームレスに実行される、完全に機能する三目並べアプリケーションを手に入れることができます。

Prerequisites

前提条件

To embark on this adventure, you will need the following prerequisites:

この冒険に乗り出すには、次の前提条件が必要です。

• Node.js (version 16 or higher)
• npm
• Git
• Yours Wallet Chrome extension
• sCrypt CLI (installed using npm install -g scrypt-cli)

Technology Stack

Node.js (バージョン 16 以降)npmGitYours Wallet Chrome 拡張機能Crypt CLI (npm install -g scrypt-cli を使用してインストール)テクノロジースタック

Our tech stack consists of the following key components:

当社の技術スタックは次の主要なコンポーネントで構成されています。

• sCrypt Framework: TypeScript framework for developing BSV smart contracts.
• Yours Wallet: Open-source digital wallet for BSV that enables interaction with decentralized applications built on BSV.
• React: JavaScript library for building user interfaces.

Designing the Contract

sCrypt フレームワーク: BSV スマート コントラクトを開発するための TypeScript フレームワーク。Yours Wallet: BSV 上に構築された分散型アプリケーションとの対話を可能にする、BSV 用のオープンソース デジタル ウォレット。React: ユーザー インターフェイスを構築するための JavaScript ライブラリ。コントラクトの設計

Let's define the blueprint of our game. The Tic-Tac-Toe contract will be initialized with the Bitcoin addresses of two players, Alice and Bob. They will wager the same amount and lock their bets in the contract. The winner claims the entire pot, while a draw results in an equal split between both players.

ゲームの設計図を定義しましょう。三目並べのコントラクトは、アリスとボブという 2 人のプレイヤーのビットコイン アドレスで初期化されます。彼らは同じ金額を賭けて、賭け金を契約に固定します。勝者がポット全体を獲得し、引き分けの場合は両プレイヤーが均等に分けられます。

Creating the Contract

契約書の作成

Using the sCrypt framework, we will create the contract in TypeScript in the src/contracts/tictactoe.ts file:

sCrypt フレームワークを使用して、TypeScript で src/contracts/tictactoe.ts ファイルにコントラクトを作成します。

import {
輸入 {
  prop,
プロップ、
  method,
方法、
  SmartContract,
スマートコントラクト、
  PubKey,
公開鍵、
  FixedArray,
固定配列、
  assert,
主張する、
  Sig,
言う、
  Utils,
ユーティリティ、
  toByteString,
toByteString、
  hash160,
ハッシュ160、
  hash256,
ハッシュ256、
  fill,
埋める、
  ContractTransaction,
契約トランザクション、
  MethodCallOptions,
メソッドコールオプション、
  bsv
BSV
} from "scrypt-ts";
"scrypt-ts" から;

export class TicTacToe extends SmartContract {
エクスポート クラス TicTacToe extends SmartContract {
  @prop()
@prop()
  alice: PubKey;
アリス: 公開キー;

  @prop()
@prop()
  bob: PubKey;
ボブ: 公開鍵;

  @prop(true)
@prop(true)
  isAliceTurn: boolean;
isAliceTurn: ブール値;

  @prop(true)
@prop(true)
  board: FixedArray;
ボード: 固定配列;

  static readonly EMPTY: bigint = 0n;
静的読み取り専用 EMPTY: bigint = 0n;
  static readonly ALICE: bigint = 1n;
静的読み取り専用 ALICE: bigint = 1n;
  static readonly BOB: bigint = 2n;
静的読み取り専用 BOB: bigint = 2n;

  constructor(alice: PubKey, bob: PubKey) {
コンストラクター(アリス: PubKey, ボブ: PubKey) {
    super(...arguments);
super(...引数);
    this.alice = alice;
this.alice = アリス;
    this.bob = bob;
this.bob = ボブ;
    this.isAliceTurn = true;
this.isAliceTurn = true;
    this.board = fill(TicTacToe.EMPTY, 9);
this.board = fill(TicTacToe.EMPTY, 9);
  }
}

  @method()
@方法（）
  public move(n: bigint, sig: Sig) {
public move(n: bigint, sig: Sig) {
    // check position `n`
// 位置 `n` を確認します
    assert(n >= 0n && n < 9n);
アサート(n >= 0n && n < 9n);

    // check signature `sig`
// 署名 `sig` をチェックします
    let player: PubKey = this.isAliceTurn ? this.alice : this.bob;
プレーヤーに許可: PubKey = this.isAliceTurn ?このアリス: このボブ;
    assert(this.checkSig(sig, player), `checkSig failed, pubkey: ${player}`);
assert(this.checkSig(sig, player), `checkSig が失敗しました、pubkey: ${player}`);

    // update stateful properties to make the move
// ステートフル プロパティを更新して移行を行う
    assert(this.board[Number(n)] === TicTacToe.EMPTY, `board at position ${n} is not empty: ${this.board[Number(n)]}`);
assert(this.board[Number(n)] === TicTacToe.EMPTY, `位置 ${n} のボードは空ではありません: ${this.board[Number(n)]}`);
    let play = this.isAliceTurn ? TicTacToe.ALICE : TicTacToe.BOB;
let play = this.isAliceTurn ?三目並べ.アリス : 三目並べ.BOB;
    this.board[Number(n)] = play;
this.board[Number(n)] = プレイ;
    this.isAliceTurn = !this.isAliceTurn;
this.isAliceTurn = !this.isAliceTurn;

    // build the transation outputs
// トランザクション出力を構築します
    let outputs = toByteString('');
出力 = toByteString('');
    if (this.won(play)) {
if (this.won(play)) {
      outputs = Utils.buildPublicKeyHashOutput(hash160(player), this.ctx.utxo.value);
出力 = Utils.buildPublicKeyHashOutput(hash160(プレイヤー), this.ctx.utxo.value);
    }
}
}
 else if (this.full()) {
      const halfAmount = this.ctx.utxo.value / 2n;
consthalfAmount = this.ctx.utxo.value / 2n;
      const aliceOutput = Utils.buildPublicKeyHashOutput(hash160(this.alice), halfAmount);
const aliceOutput = Utils.buildPublicKeyHashOutput(hash160(this.alice),halfAmount);
      const bobOutput = Utils.buildPublicKeyHashOutput(hash160(this.bob), halfAmount);
const bobOutput = Utils.buildPublicKeyHashOutput(hash160(this.bob),halfAmount);
      outputs = aliceOutput + bobOutput;
出力 = aliceOutput + bobOutput;
    }
}
}
 else {
      // build a output that contains latest contract state.
// 最新のコントラクト状態を含む出力を構築します。
      outputs = this.buildStateOutput(this.ctx.utxo.value);
出力 = this.buildStateOutput(this.ctx.utxo.value);
    }
}
}

    if (this.changeAmount > 0n) {
if (this.changeAmount > 0n) {
      outputs += this.buildChangeOutput();
出力 += this.buildChangeOutput();
    }
}
}

    // make sure the transaction contains the expected outputs built above
// トランザクションに上記で構築された予期される出力が含まれていることを確認します
    assert(this.ctx.hashOutputs === hash256(outputs), "check hashOutputs failed");
assert(this.ctx.hashOutputs === hash256(outputs), "hashOutputs のチェックに失敗しました");
  }
}

  @method()
@方法（）
  won(play: bigint): boolean {
win(play: bigint): ブール値 {
    let lines: FixedArray, 8> = [
let 行:FixedArray = [
      [0n, 1n, 2n],
[0n、1n、2n]、
      [3n, 4n, 5n],
[3n、4n、5n]、
      [6n, 7n, 8n],
[6n、7n、8n]、
      [0n, 3n, 6n],
[0n、3n、6n]、
      [1n, 4n, 7n],
[1n、4n、7n]、
      [2n, 5n, 8n],
[2n、5n、8n]、
      [0n, 4n, 8n],
[0n、4n、8n]、
      [2n, 4n, 6n]
[2n、4n、6n]
    ];
];

    let anyLine = false;
anyLine = false にします。
    for (let i = 0; i < 8; i++) {
for (i = 0; i < 8; i++) {
      let line = true;
行 = true にします。
      for (let j = 0; j < 3; j++) {
for (j = 0; j < 3; j++) {
        line = line && this.board[Number(lines[i][j])] === play;
line = line && this.board[Number(lines[i][j])] === play;
      }
}
}
}
      anyLine = anyLine || line;
任意の行 = 任意の行 ||ライン;
    }
}
}

    return anyLine;
anyLine を返します。
  }
}

  @method()
@方法（）
  full(): boolean {
full(): ブール値 {
    let full = true;
完全 = true にします。
    for (let i = 0; i < 9; i++) {
for (let i = 0; i < 9; i++) {
      full = full && this.board[i] !== TicTacToe.EMPTY;
full = フル && this.board[i] !== TicTacToe.EMPTY;
    }
}
}
    return full;
全額を返します。
  }
}
}

Integrating the Front-End with React

フロントエンドと React の統合

Time to connect our contract with the user interface. After compiling the contract and generating the artifact file, we will use it to initialize the contract in the front-end:

コントラクトをユーザー インターフェイスに接続します。コントラクトをコンパイルしてアーティファクト ファイルを生成した後、それを使用してフロントエンドでコントラクトを初期化します。

import {
輸入 {
 TicTacToe } from './contracts/tictactoe';
import artifact from '../artifacts/tictactoe.json';
'../artifacts/tictactoe.json' からアーティファクトをインポートします。

TicTacToe.loadArtifact(artifact);

Connect to the Wallet

TicTacToe.loadArtifact(artifact);ウォレットに接続する

We will use Yours Wallet to connect to the BSV network and interact with our contract.

当社は、Yours Wallet を使用して BSV ネットワークに接続し、契約をやり取りします。

Call the Contract

契約書を呼び出す

Now, we can enable users to play the game. Each move triggers a contract call, updating its state:

これで、ユーザーがゲームをプレイできるようになります。移動するたびにコントラクト呼び出しがトリガーされ、その状態が更新されます。

const { tx: callTx } = await p2pkh.methods.unlock(
const { tx: callTx } = await p2pkh.methods.unlock(
  (sigResponses: SignatureResponse[]) => findSig(sigResponses, $publickey),
(sigResponses: SignatureResponse[]) => findSig(sigResponses, $publickey),
  $publickey,
$公開キー、
  {
{
    pubKeyOrAddrToSign: $publickey.toAddress()
pubKeyOrAddrToSign: $publickey.toAddress()
  }
}
 as MethodCallOptions
);

Conclusion

）;結論

Congratulations! You have successfully created a fully functional Tic-Tac-Toe dApp on the BSV blockchain. This adventure has showcased the power of this cutting-edge technology stack.

おめでとう！ BSV ブロックチェーン上に完全に機能する三目並べ dApp が正常に作成されました。この冒険は、この最先端のテクノロジースタックの力を実証しました。

Additional Resources

追加リソース

• Explore the code: https://github.com/[repo URL]
• Learn more about sCrypt: https://github.com/moneybutton/sCrypt/blob/master/README.md
• Access the Yours Wallet: https://yours.bitcoin.com/
• Discover more about Bitcoin SV: https://www.bitcoinsv.io/
• Join the sCrypt Hackathon 2024 (March 17, 2024): [registration link]

May this comprehensive guide inspire you to build more innovative and engaging decentralized applications on the BSV blockchain.

コードを探索します: https://github.com/[リポ URL] sCrypt の詳細: https://github.com/moneybutton/sCrypt/blob/master/README.md Yours Wallet にアクセスします: https://yours. bitcoin.com/ビットコイン SV の詳細をご覧ください: https://www.bitcoinsv.io/sCrypt ハッカソン 2024 に参加してください (2024 年 3 月 17 日): [登録リンク] この包括的なガイドが、より革新的で魅力的な分散型アプリケーションを構築するきっかけとなりますように。 BSV ブロックチェーン上で。