Skip to content

Commit

Permalink
Feature: Merge todo dapp tutorial (#206)
Browse files Browse the repository at this point in the history
* Feat/update git commands (#188)

* Adding new git commands for DAO

* minor change

* Added github instruction in nft contract page

---------

Co-authored-by: RutvikGhaskataEalf <[email protected]>

* Quick start Todo dApp Tutorial (#203)

* feat: Added NFT tutorial Initial Draft

* Adding new file before merging to dev

* Removing extra file

* Updating the contract address for deploy and build

* Adding command to interact

* Adding commands for NFT

* Adding new steps

* Prepared some doucment content for NFT (Frontend)

* Pushing new commands for NFT

* moving the commands to last

* Added create-nft all steps

* Refector create nft functions

* Completed all nft functions

* Adding the desciption of the functions

* Updated Docs for nft page

* Adding more desciption for fetch and transfer

* Completed nft tutorial page

* Update content on nft page

* Update function logic

* Updated nft page content

* fix: updated document with fixes

* fix: updated document for next steps

* fix: updated document for further steps

* fix: doc update for validate NFT section

* feat:Added document for todo-app

* Adding smart contract code

* Worked on Todo dApp Frontend Documentation

* Updated Text

* Updated Github Commands

* feat: Adding Reviewed Documentation

---------

Co-authored-by: AelfHarsh <[email protected]>
Co-authored-by: RutvikAelf <[email protected]>
Co-authored-by: Harsh <[email protected]>

* Added nft-fe-directory.png

* fix: shifted nft-fe-directory.png directory

* feat: file listing

* fix: updated  todo dApp

* fix: updated todo dApp main page title

* fix: Removed duplicate nft tutorial folder

* fix: Updated ToDo dApp title for consistency

* fix: Updated todo app URL

* feat: Added youtube video inside todo dapp tutorial

* fix: Updated youtube video link for todo dapp tutorial

* fix: Updated youtube embed link for todo dapp tutorial

* fix: Updated width of youtube embed link

---------

Co-authored-by: AelfHarsh <[email protected]>
Co-authored-by: RutvikGhaskataEalf <[email protected]>
Co-authored-by: Harsh <[email protected]>
Co-authored-by: yongen.loong <[email protected]>
  • Loading branch information
5 people authored Sep 1, 2024
1 parent aa49e55 commit a6a735b
Show file tree
Hide file tree
Showing 32 changed files with 1,582 additions and 21 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,4 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn.lock*
2 changes: 2 additions & 0 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ aelf is a high-performance, cloud-native, layer-1 blockchain with Mainnet nodes
- [Lottery Game](/quick-start/developers/lottery-game-smart-contract/) contract
- [DAO](/quick-start/developers/dao-dapp/) dApp
- [NFT](/quick-start/developers/nft-dapp/) dApp
- [ToDo](/quick-start/developers/todo-dapp/) dApp

- For node operators
- [Simulate](/quick-start/node-operators/simulating-a-bp-node/) a BP node
- [Set up](/quick-start/node-operators/set-up-a-node-on-testnet/) a node on testnet
Expand Down
113 changes: 113 additions & 0 deletions docs/quick-start/developers/_deploy_todo.md
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
```

![result](/img/create_wallet_output.png)

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

![result](/img/get-token-ui.png)

</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 ToDoApp.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.
![result](/img/deploy-result.png)

- Copy the smart contract address from the `address` field
![result](/img/Contract_Address.png)

- 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 quest!
:::

:::info
🎉 You have successfully deployed your Voting dApp smart contract on the aelf testnet! In the next quest, we will be building the frontend components that allow us to interact with our deployed smart contract!
:::


63 changes: 63 additions & 0 deletions docs/quick-start/developers/dao-dapp/_tree.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
{
"type": "directory",
"uri": "2-dapp",
"expanded": true,
"children": [
{
"type": "directory",
"uri": "app"
},
{
"type": "directory",
"uri": "assets"
},
{
"type": "directory",
"uri": "public"
},
{
"type": "directory",
"uri": "src"
},
{
"type": "file",
"uri": ".gitignore"
},
{
"type": "file",
"uri": "components.json"
},
{
"type": "file",
"uri": "index.html"
},
{
"type": "file",
"uri": "package.json"
},
{
"type": "file",
"uri": "postcss.config.js"
},
{
"type": "file",
"uri": "README.md"
},
{
"type": "file",
"uri": "tailwind.config.js"
},
{
"type": "file",
"uri": "tsconfig.json"
},
{
"type": "file",
"uri": "tsconfig.node.json"
},
{
"type": "file",
"uri": "vite.config.ts"
}
]
}
74 changes: 69 additions & 5 deletions docs/quick-start/developers/dao-dapp/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -676,18 +676,82 @@ Let's start by cloning the frontend project repository from GitHub.
- Run the following command in the `capstone_aelf` directory:

```bash title="Terminal"
git clone https://github.com/AElfProject/vote-contract-frontend.git
git clone https://github.com/AElfProject/aelf-samples.git
```

- Next, navigate to the frontend project directory with this command:

```bash title="Terminal"
cd vote-contract-frontend
cd aelf-samples/vote/2-dapp
```

- Once you're in the `vote-contract-frontend` directory, open the project with your preferred IDE (e.g., VSCode). You should see the project structure as shown below.
- Once you're in the `2-dapp` directory, open the project with your preferred IDE (e.g., VSCode). You should see the project structure as shown below.

![result](/img/vote-fe-directory.png)
export const tree = {
"type": "directory",
"uri": "2-dapp",
"expanded": true,
"children": [
{
"type": "directory",
"uri": "app"
},
{
"type": "directory",
"uri": "assets"
},
{
"type": "directory",
"uri": "public"
},
{
"type": "directory",
"uri": "src"
},
{
"type": "file",
"uri": ".gitignore"
},
{
"type": "file",
"uri": "components.json"
},
{
"type": "file",
"uri": "index.html"
},
{
"type": "file",
"uri": "package.json"
},
{
"type": "file",
"uri": "postcss.config.js"
},
{
"type": "file",
"uri": "README.md"
},
{
"type": "file",
"uri": "tailwind.config.js"
},
{
"type": "file",
"uri": "tsconfig.json"
},
{
"type": "file",
"uri": "tsconfig.node.json"
},
{
"type": "file",
"uri": "vite.config.ts"
}
]
}

<div style={{height: 500}}><FileTree tree={tree} /></div>

#### Install necessary libraries

Expand Down Expand Up @@ -1012,7 +1076,7 @@ npm run dev
:::info
ℹ️ Note: Ensure that you are running this command under the **Developer_DAO** folder.
ℹ️ Note: Ensure that you are running this command under the **vote/2-dapp** folder.
:::
Expand Down
85 changes: 72 additions & 13 deletions docs/quick-start/developers/nft-dapp/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,28 +45,87 @@ import TabItem from '@theme/TabItem';

### Project Setup

Let's start by creating a separate folder called `nft_aelf`. Move to `nft_aelf` directory using following commands.
Let's start by cloning the frontend project repository from GitHub.

```bash title="Terminal"
mkdir nft_aelf
cd nft_aelf
```

- Clone the NFT tutorial github project using the following command inside the `nft_aelf` directory:
- Run the following command your Terminal:

```bash title="Terminal"
git clone https://github.com/AElfProject/nft-tutorial.git
git clone https://github.com/AElfProject/aelf-samples.git
```

- Next, navigate to the frontend project directory, `nft-tutorial` with the following command:
- Next, navigate to the frontend project directory with this command:

```bash title="Terminal"
cd nft-tutorial
cd aelf-samples/nft/2-dapp
```
- Once you're in the `2-dapp` directory, open the project with your preferred IDE (e.g., VSCode). You should see the project structure as shown below.

export const tree = {
"type": "directory",
"uri": "2-dapp",
"expanded": true,
"children": [
{
"type": "directory",
"uri": "app"
},
{
"type": "directory",
"uri": "assets"
},
{
"type": "directory",
"uri": "public"
},
{
"type": "directory",
"uri": "src"
},
{
"type": "file",
"uri": ".gitignore"
},
{
"type": "file",
"uri": "components.json"
},
{
"type": "file",
"uri": "index.html"
},
{
"type": "file",
"uri": "package.json"
},
{
"type": "file",
"uri": "postcss.config.js"
},
{
"type": "file",
"uri": "README.md"
},
{
"type": "file",
"uri": "tailwind.config.js"
},
{
"type": "file",
"uri": "tsconfig.json"
},
{
"type": "file",
"uri": "tsconfig.node.json"
},
{
"type": "file",
"uri": "vite.config.ts"
}
]
}

- Once you're inside the `nft-tutorial` directory, open the project with your preferred IDE (e.g., VSCode). You should see the project structure as shown below.

![result](/img/nft-fe-directory.png)
<div style={{height: 500}}><FileTree tree={tree} /></div>

#### Install necessary packages and libraries

Expand Down Expand Up @@ -1378,7 +1437,7 @@ npm run dev
:::info
ℹ️ Note: Ensure that you are running this command under the **NFT Tutorial** folder.
ℹ️ Note: Ensure that you are running this command under the **nft/2-dapp** folder.
:::
Expand Down
Loading

0 comments on commit a6a735b

Please sign in to comment.