I want to have an html/Javascript code interact with a smart contract. Can someone please outline the basic/high level steps? I am seeing too many things spread across the net, finally confusing.
-
For more advanced JavaScript developers, here is a tutorial tokenmarket.net/blog/… - However it assumes you are well versed in JavaScript. – Mikko Ohtamaa Feb 1 '17 at 21:39
-
You could run this example to get an idea about how we develop a dapp github.com/bellaj/Ballot-Dapp – Badr Bellaj♦ Feb 3 '17 at 11:20
This might be of some help. http://hypernephelist.com/2016/06/21/a-simple-smart-contract-ui-web3.html
There are frameworks that conveniently deal with dependencies, so a lot of us prefer to go that route. A very high-level overview if what's described in the link, is you will need to:
- load the web3 API
- get the ABI (a JSON helper that describes the interface to the contract)
- initialize an instance of the contract at the address where the contract resides using web3.
- call() (read-only, fast and gas-free, returns value) or sendTransaction() (state-changing, needs mining, costs gas, returns txnHash).
- you get a callback from step 4. Wait for the transaction to be mined and then get the mined transaction to see the values, if it was a state-changing transaction.
I hope I didn't miss a step. It's high-level. The link above seems to cover the steps described. :-)
Hope it helps.
-
Thanks for your answer. I downloaded its source code from its githup repositoty here : github.com/tomconte/solarchain-dashboard However, when I open index.html it looks like different with its output screen shot inserted in hypernephelist.com. For compare: ibb.co/d2Rjin and ibb.co/heLc3n – Questioner May 8 '18 at 17:11
Have a look at the JavaScript Web3 API. It has almost everything you need such as connection to your blockchain, creating and deploying a smart contract, interacting with them.
In my opinion, no need to describe an example, the doc speaks by itself.
Give a try to Embark, the embark demo
route is a very good way to quickly get started.