Starcoin and Dapp in Action
By Starcoin community, WGB1. Background of Dapp
With the continuous development of computer and Internet technology, from handphone to pager, from pager to mobile phone,until now smart wearables,we have been exploring portable interactive experiences. However,with the progress of technology, people are seeking more functions, therefore, the functions of mobile phones have changed from communication devices at the beginning to multi-function devices with multimedia entertainment, communication and office.,all these functions are provided by App. Each software company has launched their own apps to provide services, and we have also experienced the convenience brought by technological advances. But, since the apps launched by various companies are centralized, this also leads to the fact that if software companies do not run the App server or maintain the App due to various reasons , this will cause the App to be abandoned. If software companies shut down their server ,the data stored in the server will disappear permanently . If the information is game data, then you hard work and valuable equipment and achievements will become “tears of the times”.
But with the current blockchain technology, we can take advantage of blockchain’s immutable and permanent features to upgrade App to Dapp(Decentralized application), Dapps are created and run in a decentralized manner,even one blockchain has been forgotten, you still can own your data by running a node. In this article, we will learn how to develop one Dapp with Move language in Starcoin.
2. Dapp Development
From the structure perspective, Dapp has backend and frontend, Dapp’s frontend is similar to the frontend of traditional app, but Dapp’s backend is blockchain, this is different from traditional app. Traditional app is: frontend-API-database,Dapp is: frontend-smart contract-blockchain, so the main development of Dapp is the interaction of frontend interface. Here we have a official example: Starmask-test-dapp.
- Preparation before developing the frontend interface
1）Multiple account in Chrome
If you need multiple test account in you DEV environment, it’s convenient to use Chrome’s multiple account functionality.
2）Install Starmask
Login to your new account in Chrome, download .zip file and decompress this file, then install Starmask, or you can go to Chrome web store, search Starmask and install it. You can click click official document to read detailed installation guide.
Chrome Web Store
Decompress file
3）Create new account
After installing Starmask, you can create or import account,then you can use your new account to develop or debug.
3.StarMask
Dapp depends on blockchain, but since the interaction with blockchain requires private keys to do signatures and other operations, so most of Dapps won’t get private keys directly, prefer to use a middleware plug-in wallet, to manage user’s secret key,so that Dapp won’t obtain user’s private key. When users need to interact with blockchain,the wallet plug-in initiates a confirmation request to users, users need to respond to this request, after this process, the wallet plug-in will send signed transaction to the blockchain for interaction, if this transaction is rejected, the Dapp will get rejection information.
Starcoin’s wallet plug-in is offical wallet plug-in StarMask, this plug-in can help us to securely store and use our accests.
StarMask has a similar architecture to MetaMask, and provides a global variable similar to web3 so that the JavaScript SDK can easily interact with the wallet plug-in.
MetaMask structure
Starcoin’s Gloabal Variable
StarMask’s dependency library
StarMask is official and open source wallet plug-in, it’s programming language is JavaScript, below figure show its dependency library
3.Official Example: Starmask-test-dapp
Starcoin, same with Ethereum, also provides a JavaScript SDK, which can be used to develop front-end webpages. We also provides a official Dapp example, which can test the wallet link, send STC, call contract, cast example NFT, and verify the signature ., etc. commonly used functions have been covered , the source code is also open source on Github, we can develop Dapp based on this example.
Official Example Dapp
Entry Link: https://starmask-test-dapp.starcoin.org/
GitHub repository: https://github.com/starcoinorg/starmask-test-dapp
4.Starmask-test-dapp Analysis
We can analyse the function and process of Starmask-test-dapp during development, and learn the process of Dapp development and the use of code in this procedure. The overall development process and code are similar to those on Ethereum. If you have development experience on Ethereum,it’s really easy to develop on Starcoin.
1）Starmask-test-dapp dependency library
The main libraries: starmask-onboarding、starmask-forwarder and starcoin.js
starmask-onboarding: it’s used to to detect whether StarMask is installed, if not, you can click the button to jump to the installation, if it is already installed, it can be displayed as “click to connect to the wallet”.
starcoin.js: it’s use to interact with blockchain,covert format, it’s main library during development of Dapp.
2）Brief Function Analysis
Main operations in Starmask-test-dapp are connecting wallet, obtaining chain information, obtaining accounts, requesting permissions, signing and verifying, sending transactions, deploying and calling contracts.
Connect Wallet
This is the first step to use one Dapp, connect Dapp to Starmask, then the Dapp can perform subsequent operations.
Obtain chain information
To check whether the current chain is the main network, test network or local network
Obtain Account
To get the connected account
Request permission
If you have multiple accounts in StarMask, after connecting, switch between accounts through requesting permission function.
Signature and verification
It’s used to sign information fragments, and also can verify the signer of the information
Send transaction
It’s generally used to send STC
Deployment contract
The contract can be deployed in bytecode, without the need to synchronize the main network or test network
Call contract
Call the contract on the Dapp, which is the main way of interaction between the Dapp and the blockchain
3. Brief Function Analysis
1）Connect Wallet
In Starmask-test-app, connect StarMask by the following code,call stc_requestAccounts by global variable starcoin to connect wallet
2）Obtain Blockchain Information
In Starmask-test-app,obtain blockchain information by the following code,call chain.id by global variable starcoin
3）Obtain Account
In Starmask-test-app,obtain account by the following code,call stc_accounts by global variable starcoin
4）Request Permission
In Starmask-test-app,request permission by the following code,call wallet_requestPermissions by global variable starcoin
5）Signature and Verify
In Starmask-test-app,signature and verify by the following code,call personal_sign by global variable starcoin to verify, use tools in starcoin.js to verify signature address
signature:
verify:
6.Send Transaction
In Starmask-test-dapp,send transaction by the following code,pack amount and payee information into the transaction,then send it.
7. Deploy Contract
In Starmask-test-dapp,deploy contract by the following code,first, compile code to bytecode package on local,then put it into Starmask-test-dapp, send the transaction after grouping the package, then the contract can be deployed
8.Call Contract
In Starmask-test-dapp, the contract is called in the following two ways. Contracts that do not require signatures can be called through Call, and contracts that require signatures need to be called by grouping and sending transactions.
Contracts that do not require signatures:
Contracts that require signatures :
5.Develop Tool — Postman
- When you need to interact with backend from frontend,we usually need to debug contract’s call. Take Postman as an example for Starcoin contract call debugging, after forking collection is in your workspace, you can easily use the API to interact with the contract or debug by adding network information such as Main, barnard, and localhost.
1）Fork Collection
In official website, find Postman guide page,then click Run in Postman button,fork Starcoin’s API to your own workspace.
Postman
2）Add Environment Json File
In official website, find Postman guide page,scroll down to the bottom of this page, you can find links,copy each link and add to Postman Environment, then you can send request in Postman, and do interaction with contract. Detailed settings you can find in Postman guide page.
3）Call API
Originally published at https://starcoin.org.
