Smart contract and front end app communcation questions

Hey folks,

Just started reading the algorand documentation and I’m still very new to this so maybe I’m getting a bit ahead of myself. I’m coming from the ethereum development framework and solidity and I’m trying to get an overview of how to replicate some simple smart contracts I developed on ethereum.

I have a few questions, so on ethereum you develop your smart contracts on solidity, compile them to generate the binaries (ABI) and artifacts and deploy the contract to the network. Then from the front end you can use web3.js and the generated smart contract artifacts to connect to your account and make calls to the smart contract methods.

I’m having a bit of trouble understanding exactly how this works on Algorand (or maybe it’s very different?). So at the moment I’m looking at developing a dummy smart contract using pyteal. I can compile it and generate the binary (.teal) file and then deploy it to the network. Then let’s say I want to use a simple web app that I can interact with the deployed smart contract on the algorand network to do something very simple (like updating a global variable with the press of a button), what would the equivalent of web3.js would be? The test web app I’m trying to use is just a simple front end HTML/CSS/JS app with a button, do I need to use reach for this?

The Algorand documentation is great! But haven’t been able to find a simple dapp tutorial where I can deploy a smart contract using pyteal and update its variables or call methods from a HTML/JS.

Another question, eventually I would like to create a dapp that users can mint digital assets, with solidity I used the mapping data structure to store the creators addresses and map that to the minted digital assets as well as wether the nft is for sale or not, is that dynamic array data structure supported by Algorand’s smart contracts or that functionality is available by utilizing a different kind of architecture?

Any suggestions or a tutorials on these be appreciated :slight_smile:

Thanks!

I can compile it and generate the binary (.teal) file and then deploy it to the network.

The .teal file is really a source file, it’d need to be compiled to the bytecode in order to deploy it. This can be accomplished through a call to the REST api or via the goal cli.

The js-algorand-sdk is used to interact with the network by submitting transactions. One type of transaction is an ApplicationCallTransaction that can invoke the logic of a smart contract.

There are a number of examples/demos on the docs page in the blog section and also in Developer Relations at Algorand · GitHub

Using a smart contract you can have a global state (contract level) map and/or a local state (contract/account level) map. I expect you could implement similar functionaltiy that way, or just inspect the ASA parameters like creator at runtime.

Ben

3 Likes

This is a good example of doing basically what you said with a global variable. That said this example was written prior to releasing the ABI, which will make it even easier in the future. This example uses React for a front end and deploys a simple contract.

3 Likes

Thanks for the info Ben, I will dig into these ASAP!

Fantastic thanks JasonW, I was looking for something like this. Just a note, I cannot find the contract code on the git page smart-contracts/devrel/algosigner-react at master · algorand/smart-contracts · GitHub. On the tutorial page it’s mentioned that this is the hello world smart contract but points to the example auction dapp? Build with Python - Algorand Developer Portal

I think it uses this contract. PyTeal - Algorand Developer Portal

1 Like

@kubot , if you are looking for a Truffle or Hardhat equivalent in Algorand then definitely check https://algobuilder.dev

You can find there interesting examples (both in beginner level - asa, like more advanced, eg: DAO): algo-builder/examples at master · scale-it/algo-builder · GitHub

1 Like

Thanks @robert, will have a look ASAP. Would love to have a truffle like deployment process for algo dev.