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

Starting the Projectโ€‹

You have two options to start using the project. The first and recommended is to use the app through Gitpod, which will open a web-based interactive environment. The second option is to clone the repository locally, for which you will need to install all the Prerequisites.

GitpodClone locally
Open in Gitpod๐ŸŒ https://github.com/near-examples/guest-book-js

If you choose Gitpod a new browser window will open automatically with the code, give it a minute and the frontend will pop-up (make sure the pop-up window is not blocked).

If you are running the app locally, enter the directory where you cloned it and use yarn to install dependencies, and yarn start to start it.

cd guest-book
yarn
yarn deploy
yarn start

Your contract will then be compiled and deployed to an account in the testnet network. When done, a browser window should open.

Interacting With the Guest Bookโ€‹

img Frontend of the Guest Book app

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

Structure of a dAppโ€‹

Now that you understand what the dApp does, let us take a closer look to its structure:

  1. The frontend code lives in the /frontend folder.
  2. The smart contract code is in the /contract folder.

Contractโ€‹

The contract presents 2 methods: add_message and get_message.

contract/src/contract.ts
loading...

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 /assets/js/index.js the following code:

frontend/index.js
loading...

It setups the necessary variables and starts the app.

Testingโ€‹

When writing smart contracts it is very important to test all methods exhaustively. In this project you have two types of tests: unit and integration. Before digging in them, go ahead and perform the tests present in the dApp through the command yarn test.

Unit testโ€‹

Unit tests check individual functions in the smart contract. Right now only rust implements unit testing.

contract/src/lib.rs
loading...

Integration testโ€‹

Integration tests are generally written in JavaScript. They automatically deploy your contract and execute methods on it. In this way, integration tests simulate interactions between the contract and the users in a realistic scenario. You will find the integration tests for hello-near in integration-tests/.

integration-tests/src/main.ava.ts
loading...