Recipe ID: hsts-r34
We offer blockchain introduction, Hyperledger for system admin, Ethereum, Solidity, Corda R3, Hyperledger for developers, blockchain cybersecurity and more classes in self-paced video format starting at $60. Click here to learn more and register. For complete self-paced blockchain training, visit our Complete Blockchain Development Training page.
The latest version of this tutorial along with all updated source codes is available via the below link:
https://myhsts.org/blog/ethereum-dapp-with-evm-remix-golang-truffle-and-solidity-part1.html
Ethereum is a general-purpose blockchain that is more suited to describing business logic, through advanced scripts, also known as smart contracts. Ethereum was designed with a broader vision, as a decentralized or world computer that attempts to marry the power of the blockchain, as a trust machine, with a Turing-complete contract engine. Although Ethereum borrows many ideas that were initially introduced by bitcoin, there are many divergences between the two.
The Ethereum virtual machine and smart contracts are key elements of Ethereum, and constitute its main attraction. In Ethereum, smart contracts represent a piece of code written in a high-level language (Solidity, LLL, Viper) and stored as bytecode in the blockchain, in order to run reliably in a stack-based virtual machine (Ethereum Virtual Machine), in each node, once invoked. The interactions with smart contract functions happen through transactions on the blockchain network, with their payloads being executed in the Ethereum virtual machine, and the shared blockchain state being updated accordingly.
For those who are not familiar with blockchain technology reading History and Evolution of Blockchain Technology from Bitcoin article is strongly recommended. Also, if you wish to learn and practice Hyperledger blockchain development, visit Comprehensive Hyperledger Training Tutorials page to get the outline of our Hyperledger tutorial articles.
We have written two sets of tutorials to explore Ethereum and Solidity programming in depth. First set covers the following nine recipes:
In short, you learn about how to set up and configure Ethereum and develop blockchain applications using Solidity programming language. We explore its key components, including smart contracts and Web3.JS API via an Auction Decentralized Application (DApp) step-by-step.
In second set, we will discuss more advance topics in Ethereum blockchain development and solidity while building a Tontine DApp game step-by-step. Specifically, we cover Truffle and Drizzle. For instance, we show you how a tool such as Truffle can be an assistant in building, testing, debugging, and deploying DApps. In summary, we are going to cover four main topics:
The 2nd set consists of 8 recipes as follows:
IMPORTANT: Understanding and completing the first set of recipes are required prior to working on second set of recipes.
After a first validation of the auction contract using Remix in our previous recipe, it's time to move to the frontend and build a simple web interface that allows participants to interact with the auction. Ethereum is JavaScript-friendly, so you can build your DApp's interfaces using whatever JavaScript framework you prefer: JQuery, ReactJS, or AngularJS.
First off, create a new folder called DAPP/, inside of which you create two files: index.html and auction.js.
In the HTML file, we'll create a bidding form and a display board. The following is the HTML code:
<html>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css ">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"><
/script>
<script src="https://cdn.rawgit.com/ethereum/web3.js/develop/dist/web3.js"></script
>
<script src="./auction.js"></script>
</head>
<body onload="init()">
<div class="col-lg-12">
<div class="page-header">
<h4>Car Auction Dapp</h4>
</div>
<div class="col-lg-6">
<div class="well">
<div>
<legend class="lead">Car Details</legend>
<label class="lead"> Brand: </label>
<text id='car_brand'></text>
<br>
<label class="lead">Registration Number: </label>
<text id='registration_number'></text>
</div>
<legend class="lead">Bid value</legend>
<small>eg. 100</small>
<div class="form-group">
<input class="form-control" type="text" id="value" value="10"
></input>
<text id="valueValidation"></text>
</div>
<div>
<button class="btn btn-default" id="transfer" type="button" onClick="bid()">Bid!</button>
<br>
<text id="biding_status"></text>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="well">
<div>
<legend class="lead">Auction Details</legend>
</div>
<div>
<ul id='transfers'>
<li>
<label class="lead">Auction End: </label>
<text id="auction_end"></text>
</li>
<li>
<label class="lead">Auction Highest Bid: </label>
<text id="HighestBid"></text>
</li>
<li>
<label class="lead">My Bid: </label>
<text id="MyBid"></text>
</li>
<li>
<label class="lead">Auction Highest Bider: </label>
<text id="HighestBidder"></text>
</li>
<li>
<label class="lead">Auction Status: </label>
<text id="STATE"></text>
</li>
</ul>
</div>
<br>
<div>
<legend class="lead">Events Logs </legend>
<text id="eventslog"></text>
</div>
</div>
</div>
</div>
<div class="col-lg-6" id="auction_owner_operations">
<div class="well">
<div>
<legend class="lead">Auction Operations</legend>
<button class="btn btn-default" id="transfer" type="button" onClick="cancel_auction()">Cancel auction!</button>
<button class="btn btn-default" id="transfer" type="button" onClick="Destruct_auction()">Destruct auction!</button>
</div>
</div>
</div>
</body>
</html>
I assume you are familiar with HTML; therefore I'll avoid explaining what all these tags mean. In the preceding code, we have introduced four JavaScript functions, namely bid(), init(), destruct_auction(), and cancel_auction (), which need to be defined in the separate auction.js file, in order to represent the basic auction operations.
The other important part is the line importing the Web3Js library:
<script src="https://cdn.rawgit.com/ethereum/web3.js/develop/dist/web3.js">
</script>
In our next recipe, we will discuss Web3.JS API and advance Solidity features in depth.
To conclude this recipe, we like to recommend our Learn Hands-on Blockchain Ethereum Development & Get Certified in 30 Hrs, and Become Blockchain Certified Security Architect in 30 hours courses to those interested in pursuing a blockchain development career. This recipe is written by Brian Wu who is our senior Blockchain instructor in Washington DC. His Blockchain By Example book is highly recommended for learning more about blockchain development.
Hands-on Node.JS, MongoDB and Express.js Training
Advance JavaScript, jQuery Using JSON and Ajax
Learn Hands-on Blockchain Ethereum Development & Get Certified in 30 Hrs
Learn Blockchain Hyperledger Development & Get Certified in 30 Hrs
Become Blockchain Certified Security Architect in 30 hours
Blockchain Certified Solution Architect in 30 hours
Introduction to Python Programming
Object Oriented Programming with UML
We provide private tutoring classes online and offline (at our DC site or your preferred location) with custom curriculum for almost all of our classes for $50 per hour online or $75 per hour in DC. Give us a call or submit our private tutoring registration form to discuss your needs.