Skip to content

Latest commit

 

History

History
125 lines (92 loc) · 7.59 KB

Mix:-The-DApp-IDE.md

File metadata and controls

125 lines (92 loc) · 7.59 KB
Raw

Welcome to Mix IDE!

This guide provides a very simple and quick introduction to the Mix IDE workflow by walking you through the creation of a simple ÐApp. Once you are done with this tutorial, you will have a general knowledge of how to create and run applications in the IDE.

Note that the software is in still in proof-of-concept state. Thing are changing rapidly and this tutorial might nob be up to date with the latest version. In such case please open an issue on github

Getting started.

This tutorial assumes you have Mix release binary or source build with Qt 5.4. See wiki for building instructions.

Creating a new project

Let's create a simple DApp that will allow user to store and query personal movie ratings.

In the IDE, choose File > New Project. Enter the contract name "MovieRaings" and a path for the project file. A new empty project will be created. To the left there is a project items list with two items added by default: Contract and index.html. Contract contains solidity contract code, and index.html is for the front end web page. You can add new contract files to the project using file menu. All files will be copied to the project directory.

Select Contract and enter the text for the rating contract:

contract Rating {
	function setRating(string32 _key, uint256 _value) {
		ratings[_key] = _value;
	}
	mapping (string32 => uint256) public ratings;
}

Check Solidity tutorial for solidity reference.

Now select index.html and enter the following html code:

	<!doctype>
	<html>
	<head>
	<script type="text/javascript">
	function getRating() {
        var param = document.getElementById("query").value;
        var res = contracts["Rating"].contract.ratings(param);
        document.getElementById("queryres").innerText = res;
    }

	function setRating() {
        var key = document.getElementById("key").value;
		var value = parseInt(document.getElementById("value").value);
        var res = contracts["Rating"].contract.setRating(key, value);
    }
	</script>
	</head>
	<body bgcolor="#E6E6FA">
    	<h1>Ratings</h1>
		<div>
			Store:
        	<input type="string" id="key">
			<input type="number" id="value">
			<button onclick="setRating()">Save</button>
    	</div>
		<div>
			Query:
	        <input type="string" id="query" onkeyup='getRating()'>
			<div id="queryres"></div>
		</div>
	</body>
	</html>

Note that Mix exposes the following objects into the global window context:

  • web3 - Ethereum JavaScript API

  • contracts - A collection of contract objects. A key to the collection is the contract name. A value is an object with the following properties:

  • contract - Contract object instance (created as in web3.eth.contract)

  • address - Contract address from the last deployed state (see below)

  • interface - Contract ABI

Check the JavaScript API Reference for further information.

Select File > Save to save project files. You should see the web preview in the web preview pane.

Setting up state

Now we need to configure a state for debugging. Mix has its own blockchain that is reset on each debugging session. States are used to get the blockchain to a point where it is possible to make transactions and calls to a contract. A state is defined by a sequence of transactions that create DApp and all dependencies on the blockchain and set up DApp initial storage. Open the debugger pane by pressing F7 or selecting Windows > Show right view from the menu. At the top of the right pane you can see a state selector and a transaction log. The Default state is already created with two transaction that deploy basic standard contracts: Config and NameReg. Edit that state by clicking Edit State button. Add a transaction by clicking the + button. Select the function called Rating from the Function combo box. This is the contract constructor, running this transaction will effectively deploy the contract on a blockchain. Close the windows by pressing OK and add another transaction with +. This time select a setContract function and enter parameter values, e.g. Titanic for key and 4 for value, and select OK. This will add a single rating key-value pair to the state. Close the state editor with OK. Now once you press F5 the blockchain will be cleared and a state will be re-deployed. You can see the state transactions running in the transaction log.

Transaction log

Now let's test out contract. Type "Titanic" in the web preview query input and you should see the result returned. Enter a name and a rating in store fields and click Save to add a new rating. Note that all transactions and calls made to the contract during state deployment and debugging session are recorded into Transaction log to the right. Double click on any entry to load the execution into the debugger. There is also a mine button to instantly mine a new block on the chain and put all pending transactions there.

Debugging

Mix currently supports assembly level contract code debugging. Source level debugging is a work in progress.

Assembly level debugging

Double-click a setRating transaction in the transaction log to debug it. The VM assembly code is loaded into the assembly view and the execution slider is reset to a first position. You can navigate the execution using the slider and/or step buttons. At any execution point the following information is available:

  • VM stack.
  • Call stack - Grows when contract is calling into another contract. Double click a stack frame to view the machine state in that frame
  • Storage - Storage data associated with the contract
  • Memory - Machine memory allocated up to this execution point
  • Call data - Transaction or call parameters

See the Ethereum Yellow Paper for VM instruction description.

Deployment to network

The deployment step allows users to deploy the current project as a Dapp in the main blockchain. This will deploy contracts and package/register front end resources.

Click on Deploy, Deploy to Network. This modal dialog displays:

  • A combobox to select the account to use.
  • Ethereum Application URL is the address that users should use in AlethZero to access to the Dapp. (ex: eth/user1/app1).
  • Web Application Resources URL is the URL where the front resources (html/js/...) will be stored.
  • Amount of gas to use.. is the amount of gas that the deployment process will use to deploy contracts.
  • Package (Base64) is filled only when the resources are packaged. This is the Base64 conversion of the current package.

The first step is to click on Deploy contract / Package resources. This step will:

  • Deploy contracts on the main blockchain.
  • Package the front end resources (with encryption).
  • Register the dapp into an owned registrar. (Basically a mapping between DappName (project title) => Hash of the front end package).

Users can now (if they need) click on Package resources only, this action will repackage the resources without redeploying contracts on the blockchain.

Open Package Directory will open the deployment directory in a file browser.

Register Web Application is mandatory, this action will associate the package with an http location (Web Application Resources URL). Used by AlethZero to retrieve the package and display the content in a webview.

Once the Register Web Application step is done, users can use AlethZero to access to the dapp, using the Ethereum URL (ex: eth/user1/app1).