Skip to main content

Guest Book

Our Guest Book example is a simple app composed by two main components:

  1. A smart contract that stores messages from users, allowing to attach money to them.
  2. A simple web-based frontend that displays the last 10 messages posted.

img


Obtaining the Guest book Exampleโ€‹

You have two options to start the Guest book Example.

  1. You can use the app through GitHub Codespaces, which will open a web-based interactive environment.
  2. Clone the repository locally and use it from your computer.
CodespacesClone locally
Open in GitHub Codespaces๐ŸŒ https://github.com/near-examples/guest-book-examples

Structure of the Exampleโ€‹

The example is divided in two main components:

  1. The smart contract, available in two flavors: Rust and JavaScript
  2. The frontend, that interacts with an already deployed contract.
โ”Œโ”€โ”€ sandbox-ts # sandbox testing
โ”‚ โ”œโ”€โ”€ src
โ”‚ โ”‚ โ””โ”€โ”€ main.ava.ts
โ”‚ โ”œโ”€โ”€ ava.config.cjs
โ”‚ โ””โ”€โ”€ package.json
โ”œโ”€โ”€ src # contract's code
โ”‚ โ”œโ”€โ”€ contract.ts
โ”‚ โ””โ”€โ”€ model.ts
โ”œโ”€โ”€ package.json # package manager
โ”œโ”€โ”€ README.md
โ””โ”€โ”€ tsconfig.json # test script

Frontendโ€‹

The guest book example includes a frontend that interacts with an already deployed smart contract, allowing user to sign a message.


Running the Frontendโ€‹

To start the frontend you will need to install the dependencies and start the server.

cd frontend
yarn
yarn start

Go ahead and login with your NEAR account. If you don't have one, you will be able to create one in the moment. Once logged in, you will be able to sign a message in the guest book. You can further send some money alongside your message. If you attach more than 0.01โ“ƒ then your message will be marked as "premium".


Understanding the Frontendโ€‹

The frontend is composed by a single HTML file (/index.html) and uses REACT. Check /App.js and /index.js to understand how components are displayed in the screen.

You will notice in /src/App.jsx the following code:

frontend/src/App.jsx
loading...

It setups the necessary variables and starts the app.


Smart Contractโ€‹

The contract presents 3 methods: add_message, get_message and total_messages.

contract-ts/src/contract.ts
loading...

Testing the Contractโ€‹

The contract readily includes a set of unit and sandbox testing to validate its functionality. To execute the tests, run the following commands:

cd contract-ts
yarn
yarn test
tip

The integration tests use a sandbox to create NEAR users and simulate interactions with the contract.


Deploying the Contract to the NEAR networkโ€‹

In order to deploy the contract you will need to create a NEAR account.

# Optional - create an account
near create-account <accountId> --useFaucet

# Deploy the contract
cd contract-ts
yarn build
near deploy <accountId> ./build/guestbook.wasm
tip

To interact with your contract from the frontend, simply replace the variable CONTRACT_NAME in the index.js file.


CLI: Interacting with the Contractโ€‹

To interact with the contract through the console, you can use the following commands

# Get messages with optional arguments for pagination
near view guestbook.near-examples.testnet get_messages --args='{"from_index": "0","limit": "10"}'

# Get total number of messages
near view guestbook.near-examples.testnet total_messages

# Add a message
# Replace <accountId> with your account ID
# Required a text
# Optional deposit to make the message premium
near call guestbook.near-examples.testnet add_message '{"text":"Hello Near"}' --accountId <accountId> --deposit 0.1
tip

If you're using your own account, replace guestbook.near-examples.testnet with your accountId.


Moving Forwardโ€‹

A nice way to learn is by trying to expand a contract. You can modify the guestbook example to incorporate a feature where users can give likes to messages. Additionally, implement a method to toggle the like.

Was this page helpful?