In the previous part of this tutorial, we guided you through the process of creating a Calimero Network account and deploying a developer shard. Now that you have a private shard up and running, it's time to start building your first decentralized application (dApp) from the Calimero examples repository. In the second part of the tutorial, we will use the Tic Tac Toe game as an example to showcase how to deploy a smart contract, interact with it, and display the game board using Next.js. Let's get started!
To get started, ensure that you have the following:
Before deploying the Tic Tac Toe dApp on our private shard, we must first issue a Calimero auth token. This token will authenticate and authorize external applications to communicate with our shard. Calimero is a permissioned chain and it allows for granular control over the token's time to live and associated permissions.
To create an auth token, follow these steps:
Once you have created your auth token, be sure to store it in a secure location, as it will be required to communicate with your private shard. The token cannot be obtained afterwards, which means you’ll have to issue a new token if you forget its value. With your auth token in hand, we're ready to move on to the next step.
Before deploying the contract we need to set up near-cli to make it work with a Calimero shard. For that we need to set the token value which will be passed with the requests showing that we have permissions to deploy contracts and make function calls. This can be done using the “near set-api-key” command of near-cli.
At the time of writing this post the near cli ignores the –nodeUrl option passed to the commands so we have to set it to the default node in the config which is https://rpc.testnet.near.org. This issue has been reported and we will update this tutorial as soon as a fixed version is released.
Open your terminal and run the following commands:
The previous command has generated a new keypair and stored it in ~/.near-credentials/ folder. After successfully running this command a public key it’s prompted in the terminal (ed25519:PUBLICKEY). Copy it and move to the final step.
Great! We are now able to manage our resources in the shard using the CLI.
After successfully creating your account, it's time to move on to compiling your smart contract and deploying it on the Calimero shard. Calimero is built on top of NEAR and it’s compatible with the same tooling.
The tictactoe example includes the source code of a smart contract written in Rust. Before deploying it to your shard you’ll need to build it. Here's a step-by-step guide to help you through the process.
This command will create a wasm file in "/target/wasm32-unknown-unknown/release/tic_tac_toe.wasm" which contains the compiled smart contract code.
Check that your working directory is calimero-examples/tic-tac-toe/contracts/calimero-tictactoe. From here, you can follow the next steps in the tutorial to configure the contracts and deploy them to your private shard.
After creating your account on the Calimero shard, saving your credentials, building your contract wasm file, and successfully deploying it to the Calimero Shard, it's time to set up the frontend. To do this, you'll need to configure your connection settings in the "calimeroSdk.ts" file.
To access the connection configuration settings, open up the calimeroSdk.ts file. We recommend using environment variables to save these settings. Here's a breakdown of what each configuration property does:
Once you've configured your connection settings, you're ready to navigate to the "UI" folder in the Tic Tac Toe example and run the following command from the terminal:
For the last step open up your browser and navigate to the http://localhost:3000 where you should see dApp login screen. You can check out how it looks on this url: https://calimero-tictactoe-demo.netlify.app
You now have an application that can access shard contracts. However, this is just the beginning. The game is played privately within the shard. In the upcoming parts of this tutorial, we'll walk you through how to use the Calimero Rust SDK to create contracts that can call other contracts on the public chain and vice versa. So, stay tuned to learn how to utilize Calimero SDK's. By the end of the tutorial, you'll have a comprehensive understanding of how to leverage the Calimero shards to develop complex apps that can interact seamlessly with both the shard and public chain.