-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/quick start tic tac toe (#216)
* feat: Added doumentation for tic-tac-toe dApp * Added Tic-Tac-Toe Frontend Tutorial Documentation * Upodated naming convension for TicTacToe page" * Updated name convesion for TicTacToe smart contract * fix: Added changes related to tutorial doc review * Updated images for tictactoe dapp --------- Co-authored-by: vasmohi <[email protected]>
- Loading branch information
1 parent
1eb392d
commit 66bce80
Showing
18 changed files
with
1,242 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| #### Create A Wallet | ||
|
|
||
| To send transactions on the aelf blockchain, you must have a wallet. | ||
|
|
||
| - Run this command to create aelf wallet. | ||
|
|
||
| ```bash title="Terminal" | ||
| aelf-command create | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| - You will be prompted to save your account, please do **save** your account as shown below: | ||
|
|
||
| ```bash title="Terminal" | ||
| ? Save account info into a file? (Y/n) Y | ||
| ``` | ||
|
|
||
| **Make sure to choose Y to save your account information.** | ||
|
|
||
| :::tip | ||
| ℹ️ Note: If you do not save your account information (by selecting n or N), do not export the wallet password. Only **proceed to the next** step if you have saved your account information. | ||
| ::: | ||
|
|
||
| - Next, enter and confirm your password. Then export your wallet password as shown below: | ||
|
|
||
| ```bash title="Terminal" | ||
| export WALLET_PASSWORD="YOUR_WALLET_PASSWORD" | ||
| ``` | ||
|
|
||
| #### Acquire Testnet Tokens (Faucet) for Development | ||
|
|
||
| To deploy smart contracts or execute on-chain transactions on aelf, you'll require testnet ELF tokens. | ||
|
|
||
| **Get ELF Tokens** | ||
|
|
||
| import Tabs from '@theme/Tabs'; | ||
| import TabItem from '@theme/TabItem'; | ||
|
|
||
| <Tabs> | ||
| <TabItem value="cli" label="CLI" default> | ||
|
|
||
| **1. Get Testnet ELF Tokens:** | ||
|
|
||
| To receive testnet ELF tokens, run this command after replacing `$WALLET_ADDRESS` and `$WALLET_PASSWORD` with your wallet details: | ||
|
|
||
| ```bash title="Terminal" | ||
| export WALLET_ADDRESS="YOUR_WALLET_ADDRESS" | ||
| curl -X POST "https://faucet.aelf.dev/api/claim?walletAddress=$WALLET_ADDRESS" -H "accept: application/json" -d "" | ||
| ``` | ||
|
|
||
| **2. Check ELF Balance:** | ||
|
|
||
| To check your ELF balance, use: | ||
|
|
||
| ```bash title="Terminal" | ||
| aelf-command call ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://tdvw-test-node.aelf.io GetBalance | ||
| ``` | ||
|
|
||
| You will be prompted for the following: | ||
|
|
||
| ```sh title="Terminal" | ||
| Enter the required param <symbol>: ELF | ||
| Enter the required param <owner>: **$WALLET_ADDRESS** | ||
| ``` | ||
|
|
||
| You should see the result displaying your wallet's ELF balance. | ||
|
|
||
| </TabItem> | ||
| <TabItem value="web" label="Web" default> | ||
|
|
||
| Go to https://faucet-ui.aelf.dev Enter your address and click `Get Tokens`. | ||
|
|
||
|  | ||
|
|
||
| </TabItem> | ||
| </Tabs> | ||
|
|
||
| **Deploy Smart Contract:** | ||
|
|
||
| The smart contract needs to be deployed on the chain before users can interact with it. | ||
|
|
||
| Run the following command to deploy a contract. Remember to export the path of TicTacToe.dll.patched to CONTRACT_PATH. | ||
|
|
||
| ```bash title="Terminal" | ||
| export CONTRACT_PATH=$(find ~+ . -path "*patched*" | head -n 1) | ||
| ``` | ||
|
|
||
| ```bash title="Terminal" | ||
| aelf-deploy -a $WALLET_ADDRESS -p $WALLET_PASSWORD -c $CONTRACT_PATH -e https://tdvw-test-node.aelf.io/ | ||
| ``` | ||
|
|
||
| - Please wait for approximately 1 to 2 minutes. If the deployment is successful, it will provide you with the contract address. | ||
|  | ||
|
|
||
| - Copy the smart contract address from the `address` field | ||
|  | ||
|
|
||
| - Export your smart contract address: | ||
|
|
||
| ```bash title="Terminal" | ||
| export CONTRACT_ADDRESS="YOUR_SMART_CONTRACT_ADDRESS e.g. 2LUmicHyH4RXrMjG4beDwuDsiWJESyLkgkwPdGTR8kahRzq5XS" | ||
| ``` | ||
|
|
||
| :::tip | ||
| ℹ️ Note: You are to copy the smart contract address as we will be referencing it in the next steps! | ||
| ::: | ||
|
|
||
| :::info | ||
| 🎉 You have successfully deployed your Tic-Tac-Toe dApp smart contract on the aelf testnet! In the next steps, we will be building the frontend components that allow us to interact with our deployed smart contract! | ||
| ::: | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| --- | ||
| sidebar_position: 6 | ||
| title: Tic-Tac-Toe dApp | ||
| description: Moderately difficult smart contract and dApp | ||
| --- | ||
|
|
||
| **Description**: This contract is moderately difficult. It demonstrates the use of | ||
| state variables, user interactions, and smart contract integration to create a | ||
| basic ToDo App. | ||
|
|
||
| **Purpose**: To introduce you to more advanced concepts such as state | ||
| management, event handling, and randomization in smart contracts. | ||
|
|
||
| **Difficulty Level**: Moderate | ||
|
|
||
| <iframe width="100%" style={{"aspect-ratio": "16 / 9"}} src="https://www.youtube.com/embed/sBNfFADQMXg?si=wbCGIIxez-nh0PC-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | ||
|
|
||
| ## Step 1 - Setting up your development environment | ||
|
|
||
| import Setup from "../\_setup.md" | ||
|
|
||
| <Setup /> | ||
|
|
||
| ## Step 2 - Develop Smart Contract | ||
|
|
||
| ### Start Your Smart Contract Project | ||
|
|
||
| - Open your `Terminal`. | ||
|
|
||
| - Enter the following command to generate a new project: | ||
|
|
||
| ```bash title="Terminal" | ||
| mkdir todo-app | ||
| cd todo-app | ||
| dotnet new aelf -n ToDoApp | ||
| ``` | ||
|
|
||
| ### Adding Your Smart Contract Code | ||
|
|
||
| Now that we have a template todo list project, we can customise the template to incorporate our own contract logic. | ||
| Lets start by implementing methods to provide basic functionality for updating and reading a message stored persistently in the contract state. | ||
| ToDoApp includes the below functionalities like: | ||
| 1. Create a Task (Name, category, description, createAt, updatedAt) | ||
| 2. Task Completed | ||
| 3. Delete a task | ||
| 4. List the tasks | ||
| 5. Edit the task | ||
|
|
||
| - Enter this command in your `Terminal`. | ||
|
|
||
| ```bash title="Terminal" | ||
| cd src | ||
| ``` | ||
|
|
||
| #### Defining Methods and Messages | ||
|
|
||
| - Rename the file name from `Protobuf/contract/hello_world_contract.proto` to `todo_app.proto`: | ||
|
|
||
| ```bash title="Terminal" | ||
| mv Protobuf/contract/hello_world_contract.proto Protobuf/contract/todo_app.proto | ||
| ``` | ||
|
|
||
| - open the project with your IDE. | ||
|
|
||
| The implementation of file `src/Protobuf/contract/todo_app.proto` is as follows: | ||
|
|
||
| ```csharp title="todo_app.proto" | ||
| syntax = "proto3"; | ||
|
|
||
| import "aelf/core.proto"; | ||
| import "aelf/options.proto"; | ||
| import "google/protobuf/empty.proto"; | ||
| import "google/protobuf/wrappers.proto"; | ||
| import "Protobuf/reference/acs12.proto"; | ||
| // The namespace of this class | ||
| option csharp_namespace = "AElf.Contracts.ToDoApp"; | ||
|
|
||
| service ToDoApp { | ||
| // The name of the state class the smart contract is going to use to access blockchain state | ||
| option (aelf.csharp_state) = "AElf.Contracts.ToDoApp.ToDoAppState"; | ||
| option (aelf.base) = "Protobuf/reference/acs12.proto"; | ||
|
|
||
| rpc Initialize (google.protobuf.Empty) returns (google.protobuf.Empty) { | ||
| } | ||
|
|
||
| rpc createTask (google.protobuf.Int64Value) returns (google.protobuf.Empty) { | ||
| } | ||
|
|
||
| rpc IsCompleted (google.protobuf.Int64Value) returns (google.protobuf.Empty) { | ||
| } | ||
|
|
||
| rpc deleteTask (google.protobuf.Int64Value) returns (google.protobuf.Empty) { | ||
| } | ||
|
|
||
| rpc editTask (aelf.Address) returns (google.protobuf.Empty) { | ||
| } | ||
|
|
||
| rpc GetAllTasks (google.protobuf.Empty) returns (PlayAmountLimitMessage) { | ||
| option (aelf.is_view) = true; | ||
| } | ||
|
|
||
| rpc GetOwner (google.protobuf.Empty) returns (google.protobuf.StringValue) { | ||
| option (aelf.is_view) = true; | ||
| } | ||
| } | ||
|
|
||
| // An event that will be emitted from contract method call when Play is called. | ||
| message createTaskEvent { | ||
| option (aelf.is_event) = true; | ||
| int64 name = "Finish frontend"; | ||
| int64 description = "Finish loader feature of the frontend"; | ||
| } | ||
|
|
||
| // An event that will be emitted from contract method call when Withdraw is called. | ||
| message deleteTaskEvent { | ||
| option (aelf.is_event) = true; | ||
| int64 name = "Finish frontend"; | ||
| int64 description = "Finish loader feature of the frontend"; | ||
| } | ||
|
|
||
| // An event that will be emitted from contract method call when Deposit is called. | ||
| message EditTaskEvent { | ||
| option (aelf.is_event) = true; | ||
| int64 name = "Finish frontend"; | ||
| int64 description = "Finish loader feature of the frontend"; | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| #### Define Contract States | ||
|
|
||
| The implementation of file `src/ToDoApp.cs` is as follows: | ||
|
|
||
| ```csharp title="src/ToDoApp.cs" | ||
| using AElf.Sdk.CSharp.State; | ||
| using AElf.Types; | ||
|
|
||
| namespace AElf.Contracts.ToDoApp | ||
| { | ||
| // The state class is access the blockchain state | ||
| public partial class ToDoAppState : ContractState | ||
| { | ||
| // A state to check if contract is initialized | ||
| public BoolState Initialized { get; set; } | ||
| // A state to store the owner address | ||
| public SingletonState<Address> Owner { get; set; } | ||
| } | ||
| } | ||
| ``` |
Oops, something went wrong.