Aufbau einer dezentralen Full-Stack-Tic-Tac-Toe-Dapp auf der Bitcoin SV-Blockchain: Der ultimative Leitfaden

„Dieser Artikel bietet einen umfassenden Überblick über einen Web3-Tech-Stack für die Entwicklung dezentraler Full-Stack-Apps auf der Bitcoin SV-Blockchain. Der Tech-Stack umfasst sCrypt Frameworks, Yours Wallet und React. Der Prozess des Aufbaus eines dezentralen Full-Stack-Tic-Tac-Toe Das Spiel wird detailliert beschrieben, einschließlich des Schreibens eines Smart Contracts, der Bereitstellung des Vertrags, der Integration des Frontends (mithilfe von React) und der Integration von Yours Wallet. Durch Befolgen des Leitfadens können Leser verstehen, wie sie voll funktionsfähige dezentrale Apps auf dem Bitcoin SV erstellen Blockchain.“

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

Erstellen Sie eine dezentrale Full-Stack-Tic-Tac-Toe-App auf der Bitcoin SV-Blockchain: Eine umfassende Anleitung

Introduction

Einführung

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.

In dieser ausführlichen Anleitung führen wir Sie durch den Prozess der Erstellung einer vollständigen dezentralen Full-Stack-Tic-Tac-Toe-Anwendung auf der Bitcoin SV (BSV)-Blockchain. Diese umfassende Reise umfasst die Erstellung eines Smart Contracts, dessen Bereitstellung, die Integration eines Front-Ends mithilfe von React und die Verbindung mit der Wallet eines Benutzers. Am Ende verfügen Sie über eine voll funktionsfähige Tic-Tac-Toe-Anwendung, die nahtlos auf der BSV-Blockchain läuft.

Prerequisites

Voraussetzungen

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

Um sich auf dieses Abenteuer einzulassen, benötigen Sie folgende Voraussetzungen:

• 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 (Version 16 oder höher) npmGitYours Wallet Chrome-Erweiterungen Crypt CLI (installiert mit npm install -g scrypt-cli) Technologie-Stack

Our tech stack consists of the following key components:

Unser Tech-Stack besteht aus den folgenden Schlüsselkomponenten:

• 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 Framework: TypeScript-Framework für die Entwicklung von BSV-Smart-Verträgen. Yours Wallet: Open-Source-Digital-Wallet für BSV, das die Interaktion mit dezentralen Anwendungen ermöglicht, die auf BSV basieren. React: JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Entwerfen des Vertrags

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.

Lassen Sie uns die Blaupause unseres Spiels definieren. Der Tic-Tac-Toe-Vertrag wird mit den Bitcoin-Adressen von zwei Spielern, Alice und Bob, initialisiert. Sie setzen den gleichen Betrag ein und sperren ihre Wetten im Vertrag. Der Gewinner erhält den gesamten Pot, während ein Unentschieden zu einer gleichen Aufteilung zwischen beiden Spielern führt.

Creating the Contract

Den Vertrag erstellen

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

Mithilfe des sCrypt-Frameworks erstellen wir den Vertrag in TypeScript in der Datei src/contracts/tictactoe.ts:

import {
importieren {
  prop,
Stütze,
  method,
Methode,
  SmartContract,
SmartContract,
  PubKey,
PubKey,
  FixedArray,
FixedArray,
  assert,
behaupten,
  Sig,
Sagen,
  Utils,
Dienstprogramme,
  toByteString,
toByteString,
  hash160,
Hash160,
  hash256,
Hash256,
  fill,
füllen,
  ContractTransaction,
Vertragstransaktion,
  MethodCallOptions,
MethodCallOptions,
  bsv
bsv
} from "scrypt-ts";
} von „scrypt-ts“;

export class TicTacToe extends SmartContract {
Exportklasse TicTacToe erweitert SmartContract {
  @prop()
@Stütze()
  alice: PubKey;
alice: PubKey;

  @prop()
@Stütze()
  bob: PubKey;
bob: PubKey;

  @prop(true)
@prop(true)
  isAliceTurn: boolean;
isAliceTurn: boolean;

  @prop(true)
@prop(true)
  board: FixedArray;
Brett: FixedArray;

  static readonly EMPTY: bigint = 0n;
static readonly EMPTY: bigint = 0n;
  static readonly ALICE: bigint = 1n;
statisch schreibgeschützt ALICE: bigint = 1n;
  static readonly BOB: bigint = 2n;
statisches schreibgeschütztes BOB: bigint = 2n;

  constructor(alice: PubKey, bob: PubKey) {
Konstruktor(alice: PubKey, bob: PubKey) {
    super(...arguments);
super(...Argumente);
    this.alice = alice;
this.alice = alice;
    this.bob = bob;
this.bob = bob;
    this.isAliceTurn = true;
this.isAliceTurn = true;
    this.board = fill(TicTacToe.EMPTY, 9);
this.board = fill(TicTacToe.EMPTY, 9);
  }
}

  @method()
@Methode()
  public move(n: bigint, sig: Sig) {
public move(n: bigint, sig: Sig) {
    // check position `n`
// Position `n` prüfen
    assert(n >= 0n && n < 9n);
behaupten(n >= 0n && n < 9n);

    // check signature `sig`
// Signatur „sig“ prüfen
    let player: PubKey = this.isAliceTurn ? this.alice : this.bob;
let player: PubKey = this.isAliceTurn ? this.alice : this.bob;
    assert(this.checkSig(sig, player), `checkSig failed, pubkey: ${player}`);
behaupten(this.checkSig(sig, player), `checkSig failed, pubkey: ${player}`);

    // update stateful properties to make the move
// Zustandsbehaftete Eigenschaften aktualisieren, um den Umzug durchzuführen
    assert(this.board[Number(n)] === TicTacToe.EMPTY, `board at position ${n} is not empty: ${this.board[Number(n)]}`);
behaupten(this.board[Number(n)] === TicTacToe.EMPTY, `Board an Position ${n} ist nicht leer: ${this.board[Number(n)]}`);
    let play = this.isAliceTurn ? TicTacToe.ALICE : TicTacToe.BOB;
let play = this.isAliceTurn ? TicTacToe.ALICE : TicTacToe.BOB;
    this.board[Number(n)] = play;
this.board[Number(n)] = spielen;
    this.isAliceTurn = !this.isAliceTurn;
this.isAliceTurn = !this.isAliceTurn;

    // build the transation outputs
// die Übersetzungsausgaben erstellen
    let outputs = toByteString('');
let Outputs = toByteString('');
    if (this.won(play)) {
if (this.won(play)) {
      outputs = Utils.buildPublicKeyHashOutput(hash160(player), this.ctx.utxo.value);
Ausgänge = Utils.buildPublicKeyHashOutput(hash160(player), this.ctx.utxo.value);
    }
}
}
 else if (this.full()) {
      const halfAmount = this.ctx.utxo.value / 2n;
const halfAmount = 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;
Ausgänge = aliceOutput + bobOutput;
    }
}
}
 else {
      // build a output that contains latest contract state.
// eine Ausgabe erstellen, die den neuesten Vertragsstatus enthält.
      outputs = this.buildStateOutput(this.ctx.utxo.value);
Ausgänge = this.buildStateOutput(this.ctx.utxo.value);
    }
}
}

    if (this.changeAmount > 0n) {
if (this.changeAmount > 0n) {
      outputs += this.buildChangeOutput();
Ausgänge += this.buildChangeOutput();
    }
}
}

    // make sure the transaction contains the expected outputs built above
// Stellen Sie sicher, dass die Transaktion die oben erstellten erwarteten Ausgaben enthält
    assert(this.ctx.hashOutputs === hash256(outputs), "check hashOutputs failed");
behaupten(this.ctx.hashOutputs === hash256(outputs), "check hashOutputs failed");
  }
}

  @method()
@Methode()
  won(play: bigint): boolean {
won(play: bigint): boolean {
    let lines: FixedArray, 8> = [
let Zeilen: 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;
let anyLine = false;
    for (let i = 0; i < 8; i++) {
for (sei i = 0; i < 8; i++) {
      let line = true;
let line = true;
      for (let j = 0; j < 3; j++) {
for (sei 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;
anyLine = anyLine || Linie;
    }
}
}

    return anyLine;
return anyLine;
  }
}

  @method()
@Methode()
  full(): boolean {
full(): boolean {
    let full = true;
let full = true;
    for (let i = 0; i < 9; i++) {
for (sei i = 0; i < 9; i++) {
      full = full && this.board[i] !== TicTacToe.EMPTY;
full = full && this.board[i] !== TicTacToe.EMPTY;
    }
}
}
    return full;
voll zurückkommen;
  }
}
}

Integrating the Front-End with React

}Integration des Front-Ends mit 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:

Zeit, unseren Vertrag mit der Benutzeroberfläche zu verbinden. Nachdem wir den Vertrag kompiliert und die Artefaktdatei generiert haben, werden wir sie verwenden, um den Vertrag im Frontend zu initialisieren:

import {
importieren {
 TicTacToe } from './contracts/tictactoe';
import artifact from '../artifacts/tictactoe.json';
Artefakt aus „../artifacts/tictactoe.json“ importieren;

TicTacToe.loadArtifact(artifact);

Connect to the Wallet

TicTacToe.loadArtifact(artifact);Mit der Wallet verbinden

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

Wir werden Yours Wallet verwenden, um eine Verbindung zum BSV-Netzwerk herzustellen und mit unserem Vertrag zu interagieren.

Call the Contract

Rufen Sie den Vertrag an

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

Jetzt können wir Benutzern das Spielen des Spiels ermöglichen. Jede Bewegung löst einen Vertragsaufruf aus und aktualisiert seinen Status:

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

Conclusion

);Abschluss

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.

Glückwunsch! Sie haben erfolgreich eine voll funktionsfähige Tic-Tac-Toe-dApp auf der BSV-Blockchain erstellt. Dieses Abenteuer hat die Leistungsfähigkeit dieses hochmodernen Technologie-Stacks demonstriert.

Additional Resources

Zusätzliche Ressourcen

• 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.

Entdecken Sie den Code: https://github.com/[Repo-URL] Erfahren Sie mehr über sCrypt: https://github.com/moneybutton/sCrypt/blob/master/README.mdZugriff auf die Yours-Wallet: https://yours. bitcoin.com/Entdecken Sie mehr über Bitcoin SV: https://www.bitcoinsv.io/Nehmen Sie am sCrypt Hackathon 2024 (17. März 2024) teil: [Registrierungslink] Möge dieser umfassende Leitfaden Sie dazu inspirieren, innovativere und ansprechendere dezentrale Anwendungen zu entwickeln auf der BSV-Blockchain.