Learn Blockchain Development: How to Build Your First DApp on Algorand

Decentralized applications (dApps) are arguably one of the most exciting innovations built using blockchain technology. But building your first dApp can be tricky given the number of blockchains and programming languages to choose from. Fortunately, Algorand allows anyone to build blockchain applications in a developer-friendly environment that welcomes blockchain newcomers.

Read on to learn blockchain development by coding and deploying your first DApp on Algorand -

Algorand: A Beginner-Friendly Blockchain Ecosystem

Algorand has focused on user experience since its inception, providing users and developers with the best tools to build smart contracts and mint new assets.

The blockchain founded by MIT Professor Silvio Micali is making the dApp building process even more accessible thanks to a programming language called Reach. The blockchain development platform received support from the Algorand Foundation last year and has managed to build the easiest dApp programming language, which builds dApps for multiple blockchains with one set of source code.

In May 2021, Reach raised $12 million in its bid to simplify blockchain development and unlock the next-gen dApps.

Moreover, Algorand helps you learn blockchain development by providing a dedicated developer page that contains useful tutorials and documentation.

While there are many different approaches to building dApps on Algorand, in this post we will focus on getting started using Reach - a free, easy and quick way to get your feet wet in the Algorand ecosystem. One huge benefit of Reach is verification. Reach provides verification on dApps via compile time and runtime verification of the solution. For more info see the opening paragraph in a tutorial on Using Loop invariants for Verification in Reach.

How to Build dApps With Reach?

To build dApps on Algorand, users can rely on Reach, which is easy to learn as it’s similar to JavaScript. The language has been modeled from a user perspective rather than the low-level logic of a state machine.

Before building with Reach, you should know that it is designed to work on POSIX systems with Docker, make), and Docker Compose installed. You can use Docker Desktop to install Docker on Windows or Mac. As for make, you probably have it installed, although some versions of Linux don’t include it by default.

To make sure that you have everything installed, you can run the following three commands without errors:

$ make –version
$ docker –version
$ docker-compose --version

You can go through this guide if you’re using Reach on Windows.

After installation, select a directory for this project. It is recommended that you use:

$ mkdir -p ~/reach/AlgoReach && cd ~/reach/AlgoReach

Next, you can download the Reach program by running

$ curl https://docs.reach.sh/reach -o reach ; chmod +x reach

You can make sure that the download was successful by running

$ ./reach version

Now it’s time to open a text editor and get ready to write your first dApp with Reach! If using VS Code, there is a Reach Extension.

Building Your First dApp on Algorand

In the following short dApp tutorial, you’ll explore a version of Tic, Tac, Toe, in which two players, Alice and Bob, can wager on the result of the game.

This kind of simple game is understood intuitively by everyone, so it’s a great way to focus on the programming process rather than the rules of the game.

You should start by creating a file named index.rsh. Using the command `reach init` will generate a sample index.rsh (back end) and index.mjs (frontend).You can put this file anywhere you like, but we recommend putting it in the current directory, which in our case would be ~/reach/AlgoReach.

You can check the entire code of our Tic Tac Toe dApp example in our video tutorial.

????

As you can see, the syntax is almost identical to JavaScript, which makes the development process more familiar.

Now, let’s define the main components of the Reach program in which there is some form of interaction between Alice and Bob. In this dApp example provided by Reach, Alice has some information that she can send to Bob in exchange for a number of tokens.

You can check the entire example backend program here, and the example frontend here. The frontend can also be written using the Remote Procedure Call (RPC) feature of Reach, in many languages including JavaScript, Go, Python, C# and more, but we’ll take a look at the main part only:

????

In this example:

• Line 1 indicates that this is a Reach program. You’ll have this at the top of every program.
• Line 2 specifies that the program is compiled with strict mode, which enables unused variable checks for all subsequent declarations within the current scope. If a variable is declared but never used, there will be an error emitted at compile time.
• Line 4 defines the main export from this program. main is the default used by Reach. When you compile, this is what the compiler will look at.
• Line 4 also indicates that it is an application.
• Line 5 specifies that the program identifier A will represent the Alice participant.
• Lines 6 and 7 specify the interface between Alice’s participant and frontend. In this specific case, Alice’s frontend must provide a number called request, and a string called info.
• Line 9 specifies that the program identifier B will represent the Bob participant.
• Lines 10 and 11 specify the interface for Bob, which includes a function named want, that takes a number and returns null, as well as a function called got, which receives the information.
• Line 13 actually deploys the dApp, allowing the program to start doing things.

Reach presents a full dApp example of a Rock, Paper, Scissors! game that can be implemented on Algorand as well.

As for our Tic Tac Toe application the logic for the backend program will look like the below and the sample frontend for example program can be found here:

????

In the dApp, we have two different players that wager on the result of the game based on predetermined rules. You’ll have to define the behavior of each participant in the program.

For instance, if we speak about financial applications, you can define the behavior of every participant in a loan application, in which there is a lender and a borrower. Next, you can define the steps of the program.

For more details about how to reflect the interactions between players and shape the code, feel free to watch the Developer Office Hours session dedicated to building dApps on Algorand using Reach.

https://www.algorand.com/resources/blog/blockchain-development-build-your-first-dapp-algorand