Build Blockchain dApps using JavaScript

Hello, my name is Russ Fustino, and welcome to Build Blockchain DApps Using JavaScript. I'm a developer advocate for Algorand.

So, blockchain devs need to know, you know, first of all, what is a DApp? And how can I build one? As well as what kind of solutions can I build? I know when I first started doing blockchain development, that was a question that was first and foremost on my mind, what kind of solutions can I build? And what programming languages can I use to build DApps? And how do I verify smart contracts, in other words, audits?

So the agenda for today, we're going to cover Algorand blockchain, layer one. We'll do a little bit on setup your development environment and then creating a simple DApp, which by the way, stands for decentralized applications. And we'll cover verification as well as some UI controls from pipeline.

For those that are brand new to blockchain, what blockchain is, it's a mutable decentralized ledger consist of blocks, which are periods of time. And then the transactions that are associated during that time interval. Now of course, transactions are between a sender and a receiver. So those would be your accounts. And each account has the association of assets to it, as well as applications. Now assets can be your fungible or non-fungible tokens, and applications are smart contracts. So with Elgrand, we use a pure proof-of-stake protocol. The pure proof-of-stake protocol is extremely quick, and it really scales. It lasts pegged at 1400 transactions per second and block times created in under 5 seconds. But not only that, there's infrastructure longevity. The entire project is open sourced, and a lot of technical flexibility with all sorts of SDKs and tools being created and available for developers to build blockchain solutions. Transaction certainty, there is no forking in the Elgrand blockchain. Very extensible platform as well as extremely energy efficient. It is actually a carbon-negative blockchain. Cost efficiency, cost of a transaction is less than 120th of a penny. Also provides true security, because it is a read-only, write-once ledger that is distributed across the globe. DeFi is, by far and away, the biggest vertical marketer type of solution that you can build with Elgrand blockchain. Stablecoins. So what stablecoins are, is still crypto, but they are tied to a US economy. So as the US dollar goes up and down, so will the coin. So it fluctuates the same as the dollar does. So over 3 billion and circulation there you can see for USDC. And we have decentralized exchanges or DEXs. Things like Tinyman, Elgodex, ElgoFi. What's happened here is that, up until now, you've had to go to a bank to use financial tools.

For example, say you want to create a stock portfolio. Well, now these same tools are available to anybody that wants to use them. And you can go to sites like these, and apps like these, to be able to create liquidity pooling, and staking, and a lot of other things.

The Italian Society of Authors and Publishers, another great implementation of blockchain. They're using NFTs to identify copyrights. So NFTs are unique, and you can see here they've put over 4 million NFTs on the Algorand blockchain to close to 100,000 creators. Really, this is the future of the industry for doing copyrights, because think about it, there's no global boundaries. This is, and it's accessible to anybody that wants to have access to it. And other use cases, you know the list goes on and on here, right? A lot of different verticals, mostly every vertical market that really has a use case for a blockchain.

Let's get to the next section here on the heart and soul of your solution, which is Layer 1. Algorand accounts, ASAs or Algorand Standard Assets, Atomic Transactions, Algorand Smart Contracts as well as reporting with Indexer. So first you have a standard account, which represents an individual, let's say for example. And then you also have a multisig account, which could be representative, maybe, of a board of directors, as an example there. Now with a multisig account, you do have the capability of defining a threshold, in other words how many votes do you need out of the group here to pass the transaction or to sign it. And then a logicsig, which you see on the right, or logic account, is a smart contract. So that either returns true or false. And if it returns true, it will go ahead and sign the transaction, if it returns false, it will not.

Now we'll talk about fungible tokens and what these are exactly. So ASAs, or Algorand Standard Assets, can be either fungible or non-fungible tokens. So what we see here is a list of examples of fungible tokens. So things like stable coins, loyalty points, system credit. Each unit of the cryptocurrency is worth exactly the same amount and there could be several of those. Then on the NFT side of things, with non-fungible tokens, these could be used for in-game items when you're playing games. You've got real estate, identity, certification, collectibles is a big item. And that's really the best way I like to think about NFTs, is the fact that they are like a collectible. They're unique. They're one of a kind. So some folks I know collect baseball cards, for example, or coins. Every one of these is in a different condition. Each one of these is a different rarity. Each one of these has a different trait to it. So these are all a bunch of different metadata that can be used to differentiate these. So these are each very, very unique.

So let's take a look at creating one of these. I'm going to bring up Algodesk.io. This is a visual tool. So let's go to use one of our three wallets that are available here. We've got Algosigner, which is a plugin to Chrome. MyAlgoWallet is a web-based wallet.

And then the PairWallet is a wallet that's based in Android or IRS. We'll go ahead and use the Algosigner here for the demo. We'll go ahead and sign into our wallet, and I'm going to pick an account that's in our to go ahead and use to create these assets.

So what we're going to do now is we're going to create an ASA. So we have the ability to create a name test. Let's give it a name of pizza. After the very first transaction in Bitcoin was for pizza. Now, if I make a supply of one, that would be an NFT. So what I'm going to do is actually create a fungible token. Let's create 100,000 of these. We also have the ability to put a decimal point in there. Also, we have the ability to put a URL that might be associated with this, more information, and then also a meta hat.

So next up, let's talk about Algorand atomic transfers. So this is where all must succeed or all will fail. You have a person A, for example, wants to send 50 Algos to person B. And then person B, in return, is going to send a concert ticket to person A. Now, when we used to do this through things like Craigslist or something like that, it was always a crapshoot whether this actually was going to work or not. Sometimes you'd pay the money, but you wouldn't get the ticket. Here, this guarantees the exchange of goods is what atomic transfers actually do. And so this really does facilitate and really is the secret sauce for many solutions that are built with decentralized applications. Very easy to do, and it's secure. So some examples of this would be simplified expedited settlements, circular trades, group payments, instant settlement for complex multiparty asset transactions, distributed payments. And again, these could be utilized with all the other Layer 1 features of Algorand standard assets and Smart Contracts.

Speaking of which, Smart Contracts. So this is the transaction execution approval language, is the assembly language that's used. Short name for that is Teal. And it's assembly because it's very lean and mean it's got to perform on the blockchain and be very, very scalable. So there's nothing leaner than assembly to do that. And then you have a Python enabled compiler, which you can use Python to generate Teal and also JavaScript is used in a product called Rea. And there's a new Visual Studio extension as well in using C sharp to create Teal.

So these are all basically Teal generators is each one of those products I just listed and more are on the way. Smart signatures basically approve spending transactions and then smart contracts themselves provide the transactions and facilitate both global and local storage. Local storage would be at the account level global storage would be at the blockchain level. These are all combinable with other Algorand technologies including atomic transfers and algorithm assets.

So to wrap up DApp architecture, basically you have a UI front end, perhaps maybe there's some smart signatures going on there using the Algorand SDKs or REST APIs. And then you got three different transaction types shown here. You have a payment transaction would be between your accounts. Asset transactions would be revolving around NFTs and Fungible Tokens. And then application calls would be your smart contracts and those would facilitate local state and global state out to the blockchain. So the index is basically just a Postgres SQL database which offloads the Algod process. And then it's indexed and searchable and a lot quicker and responsive. So it's a really a nice reporting tool.

Okay, next up we're going to cover setup development environment and what's involved there. Well, the first thing you want to do is go out to the developer portal, developer.algorand.org an award-winning developer portal in the blockchain space. And then also Algorand Discord. If you want to sign up there and it's really great for support and getting your questions answered. And then also there's a discord server as well for reach. And I've got both of those on here as well.

So the first thing I want to do is get the sandbox loaded up, very simple. Just create a Docker instance and then clone the GitHub repo for the sandbox. And then also, the Vultr private network which includes Indexer, which is doing a sandbox up. It also supports other networks, the beta net, test net, main net. These are all supported with the use of sandbox. So mentioned some STKs, those are the ones that are highlighted in red are supported by Algorand. The ones down below it, Rust, PHP, Dart, C sharp swift and some more are supported by the community, the ecosystem. Lot of great tools on the right, including AlgoDesk.io. You saw that as well as Algorand studio. Algodia is a really great tool as well for doing very quick development with minimal amount of coding.

So with PyTL, basically, this is what you have is the Python and then you compile it and it returns the TL and then both TL looks like there on the right. Great PyTL course to go out to YouTube. There's a nice playlist there, excellent work there by the instructor. So your first transaction, let's go ahead and take a look at this in JavaScript. We're gonna bring up this page here on the developer portal. And you see, you scroll down, it gives you the step-by-step on getting started. This is where you install the sandbox. Like we talked about, this is where you install the SDK for JavaScript. You can see the information there, there's videos on each one of these. There's also a try-me live demo right here that you can click on and just hit the run button. You'll see it all execute. And then you start getting into the code and creating accounts and instantiating your clients. That brings us to Reach. What is Reach? Well, it's a programming language, it's a high-level language, it's also a compiler, and it does deploy your DApp to blockchain.

So the focus is on the business logic. So Reach programmers don't need to think about the details of things like contract storage, protocol diagrams, state validation, network details. So you have the back end. We'll start there, over there on the right. You can see this is responsible for generating and deploying the solution to the blockchain. Also, it interacts with the smart contracts automatically. So it's a solution implementation. It defines the interfaces for the front end that you're gonna be talking to, and you define things like participants and APIs as well as verification and commitment.

On the front end, now the front end can be done, the back end is like JavaScript-like code. All right, and on the front end, this could be done in Python, Go, or JavaScript or C-sharp. And basically what you have here is a user interface that is provided, and it does things like create accounts and a lot of traditional algorithm SDK methods. And you can also put blockchain-specific code in there, so if you have something that is slightly different between blockchains, you can tweak that a little bit on the front end as well. You can compile it, run it, and then deploy it out to the blockchain. All right, it's pretty easy to install. You just bring up Docker, download a reach executable, and if you're running this on Windows, you would need the Windows subsystem for Linux, and then also, this is the code you write here, you go ahead and create your directory for the project, and then you curl the reach executable down, giving it executable rights.

A simple DAP walkthrough. So this is the backend file we're looking at here. So either player, Bob or Ellis, gets the fingers they played, and gets a guess, and sees who won the winning game. And you can see that up at the top is really, that's just the interface of the methods that are actually defined on the front end. And then also you have other participants that are involved, right?

So the end-of-the-play get fingers thrown and total guess, and publish them, and then commit means you're done. You're committing that out to the blockchain. So the backend now also continues with rules and outcome. So this is the logic to a game. I've got a game I'm gonna show you here, Mora, where you're throwing fingers and a guess between the two opponents. And if either one of them guessed it correctly, then they win that particular match. So by doing this, everyone agrees on the rules for the outcome, and everyone sees the outcome of the engine that we have.

Now on the front end, this is you take the common number of 10, for example, into whatever native platform support. So it takes like 10 algos, for example, you convert it to micro-algos. And then you have the ability to create a new test account in the Dev environment with that starting balance. And then you see down below, this is where Alice is deploying the contract. And then Bob's going to attach to the contract, in other words, opt in, and then we go ahead and run the game. And then also, these are the interact methods. So we saw the interfaces to these on the back end, and now this is the actual code in the JavaScript in the front end that this provides. So you can see, we're just using some random functions here.

Next, let's talk about verification. This is a very, very important topic. And this is what it does, is it protects against blockchain attacks. And it guarantees things like the contract balance is zero. Because think about it, you're creating accounts on the fly potentially in these contracts. And there you're funding them. And if it's created on the fly, it's in the contract, only that contract knows what the private key is, right? No one else would know that. And if the contract ends executing and there's funds still in that account and haven't been exhausted, guess what? You're gonna lose those funds. There's no way of getting at them because the contract gets done running, it goes away. And you know that's a problem, that's an issue. And there have been, you know, some big monies lost in the past because of this particular problem.

So what verification does and audits do are prevent locked away tokens, right? By the contract and hence become inaccessible. So with, as far as auditing goes, the non-reach solution is an auditor proves that program with their own analysis and they're doing the verification of a version of the program. If you got a minor change, then the audit is useless for a prior version. They have to do everything from scratch. With the REACH, the compiler verifies and then the auditor verifies that you provided to the REACH compiler enough assertions. And code changes, well, the REACH auditor just needs to check the right assertions were included on the code changes.

So you see here Alice shoots four fingers and guesses a total of five. This is just demonstration of doing some printing in the back end and then also you see Bob shoots zero fingers and guesses four. So the actual thrown is four and Bob wins the wager. And so you can see as a count value increases. What happens if I change this to just going one times the wager? So right now you have two times because each player is providing a wager amount. So two times a wager is the total that's in the pot. So if we try to run this, it's going to realize that, hey, you know, this doesn't work because you're gonna leave money on the table. And now you can see some violations down below. So you could see here that message zero balance at application exit that assert failed. It's not a zero balance, there's some stuff left in there. I have a solution I wrote up on the developer portal. Here's a link that really goes into detail step by step on building that particular solution that we just looked at.

So that brings us to the front end, right? Pipeline UI, it's a vanilla JS SDK and React component library. And you can see here, there are controls that are available that you just copy snippets of code and HTML into your solution. You can see on the right is an example showing an account, but not only the account number, but also a QR. Also, there are Algorand specific React components as well. And we've got Twitter spaces with Algorand dev Twitter and follow our Algo Devs Twitter. So in summary, we took a look at Algorand blockchain at a high level as well as some use cases, what you can build solutions with. And we looked at all the layer one features. Then we took a look at what was involved in setting up the environment. We took a look at Reach and Building a Simple Dapp. This is a fascinating product. It does build in things like verification as a good benefit. But again, you're writing it in a JavaScript like code for the backend, the front end can be in JavaScript as well. And the verification process is very, very important there in building solid decentralized applications. And finally, we looked at the pipeline UI controls. Thank you very much.