Homestead_19 – Mix

Mix

The IDE Mix is intended to help you as a developer to create, debug and deploy contracts and dapps (both contracts backend and frontend).

WARNING – There are numerous reports of crash-at-boot issues for Mix on OS X. The issue is aHeisenbug which we have been chasing for a month or two. The best workaround we have for right now is to use the Debug configuration, like so:

cmake -DCMAKE_BUILD_TYPE=Debug ..

WARNING – A replacement for Mix called Remix is being worked on, so if you are experiencing issues with Mix, you might be better to look for alternatives until Remix is more mature.

Start by creating a new project that consists of

  • contracts
  • html files
  • JavaScript files
  • style files
  • image files

Project Editor

You can use projects to manage the creation and testing of a dapp. The project will contain data related to both backend and frontend as well as the data related to your scenarios (blockchain interaction) for debugging and testing. The related files will be created and saved automatically in the project directory.

Creating a new project

The development of a dapp start with the creation of a new project. Create a new project in the “edit” menu. Enter the project name, e.g. “Ratings” and select a path for the project file.

Editing backend contract file

By default, a new project contains a contract “Contract” for backend development on the blockchain using the Solidity language and the “index.html” for the frontend. Check the Solidity tutorial for references.

Edit the empty default contract “Contract”, e.g.

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

Check the Solidity tutorial for help getting started with the solidity programming language.

Save changes

Editing frontend html files

Select default index.html file and enter the following code

 .... <script>

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>

Then it is possible to add many contract files as well as many HTML, JavaScript, css files

Scenarios Editor

Scenarios can be used to test and debug contracts.

A scenario is effectively a local blockchain where blocks can be mined without PoW – otherwise testing would be quite slow ;).

A scenario consists of a sequence of transactions. Usually, a scenario would start with the contract creation scenarios of the dapp. In addition, further transactions can be added to test and debug the dapp. Scenarios can be modified, i.e. transactions can be removed. Note that a scenario needs to be rebuilt for modifications to become effective. Further testing can be done using local JS calls via the JS API.

In case it’s not open, access the scenario and debugger pane by pressing F7 or Windows > Show right or the debug button in the upper right corner of the main window.

Creating and setting up a new scenario

When you launch Mix for the first time, an empty scenario, i.e. not containing any transactions, will be created. Add an account named “MyAccount” and set it’s initial balance to 1 ether. Click OK. Rename the scenario to “Deploy”.

Modifying initial ether balance of an account

Actually, we want to do a lot of tests Edit the Genesis block parameters and set your initial account balance to 1000 ether. Rebuild the scenario for the change to become effective.

Rebuilding a scenario

Each time a transaction is modified or an account added, the scenario has to be rebuilt for modifications to become effective. Note that if a scenario is rebuilt the web frontend (local storage) may also need to be reset (this is not done automatically be Mix).

Creating a transaction

Let’s get some ether sent to Bob. Create another account named “Bob” with zero ether balance. Create a new transaction in the scenario pane. Click “Add Tx…” and send 300 ether to Bob. Add a block.

Altering and reusing scenarios

Create a new scenario or start from a scenario with several transactions that you duplicate first

Rename the scenario

Modify scenario by specifying transactions that shall be removed

Rebuild the scenario

Display calls

A contract call is a function invokation. This is not a transaction as a contract call cannot change the state. A contract call is not part of the blockchain but for practical and ux design reason, it is convenient to display calls at the same functional level as a transaction. The JS icon warn you that this is not a transaction but a call. To show/hide call, click on the menu Scenario -> Display calls.

State Viewer

This panel is located below the block chain panel, in the scenario view. Once the blockchain has been run, this panel shows the state of the blockchain.

By state we mean all accounts balance (including contract and normal account), and the storage (global variable of all deployed contract). The content of this panel is not static, it depends on the selected transaction on the blockchain panel. The state shown here is the state resulting of the execution of the selected transaction.

image0

In that case, 2 contracts are deployed, the selected transaction (deployment of testCtr) is the last one. so the state view shows the storage of both TestCtr and BasicContract.

Transaction Explorer

Using the transaction pane

The transaction pane enables you to explore transactions receipts, including

  • Input parameters
  • Return parameters
  • Event logs

To display the transaction explorer, click on the down triangle icon which is on the right of each transaction, this will expand transaction details:

image0

Then you can either copy the content of this transaction in the clipboard, Edit the current transaction (you will have to rerun the blockchain then), or debug the transaction.

JavaScript console

Mix exposes the following objects into the global window context

web3 – Ethereum JavaScript API

contracts: A collection of contract objects. keys represents contracts name. values are is an objects containing 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.

Using the JS console to add transactions and local calls

In case the name of the contract is “Sample” with a function named “set”, it is possible to make a transaction to call “set” by writing:

contracts["Sample"].contract.set(14)

If a call can be made this will be done by writing:

contracts["Sample"].contract.get.call()
It is also possible to use all properties and functions of the web3 object:

Transaction debugger

Mix supports both Solidity and assembly level contract code debugging. You can toggle between the two modes to retrieve the relevant information you need.

At any execution point the following information is available:

VM stack – See Yellow Paper for VM instruction description

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

Accessing the debug mode

When transaction details are expanded, you can switch to the debugger view by clicking on the “Debug Transaction” button

Toggling between debug modes and stepping through transactions

This opens the Solidity debugging mode. Switch between Solidity and EVM debugging mode using the Menu button (Debug -> Show VM code)

  • Step through a transaction in solidity debugging mode
  • Step through a transaction in EVM debugging mode

Dapps deployment

This feature allows users to deploy the current project as a Dapp in the main blockchain.
This will deploy contracts and register frontend resources.

The deployment process includes three steps:

  • Deploy contract:
    This step will deploy contracts in the main blockchain.
  • Package dapp:
    This step is used to package and upload frontend resources.
  • Register:
    To render the Dapp, the Ethereum browser (Mist or AlethZero) needs to access this package. This step will register the URL where the resources are stored.

To Deploy your Dapp, Please follow these instructions:

Click on Deploy, Deploy to Network.
This modal dialog displays three parts (see above):
  • Deploy contract
  • Select Scenario

“Ethereum node URL” is the location where a node is running, there must be a node running in order to initiate deployment.

“Pick Scenario to deploy” is a mandatory step. Mix will execute transactions that are in the selected scenario (all transactions except transactions that are not related to contract creation or contract call). Mix will display all the transactions in the panel below with all associated input parameters.

“Gas Used”: depending on the selected scenario, Mix will display the total gas used.

  • Deploy Scenario

“Deployment account” allow selecting the account that Mix will use to execute transactions.

“Gas Price” shows the default gas price of the network. You can also specify a different value.

“Deployment cost”: depending on the value of the gas price that you want to use and the selected scenario. this will display the amount ether that the deployment need.

“Deployed Contract”: before any deployment this part is empty. This will be filled once the deployment is finished by all contract addresses that have been created.

“Verifications”. This will shows the number of verifications (number of blocks generated on top of the last block which contains the last deployed transactions). Mix keep track of all the transactions. If one is missing (unvalidated) it will be displayed in this panel.

  • Package dapp

The action “Generate Package” will create a new folder named ‘www’, this folder will contain all the resources and scripts will be mapped to the current deployed contract. In order to publish your dapp, you need to host the www folder in a webserver (to be replace soon by IPFS and SWARM). by default the library web3.js is not included. If you want to be able to use the dapp in a standard web browser, you wiil need to include this library.

Code Editor

This editor provides basic functionalities of a code editor.

  • In Solidity or JavaScript mode, an autocompletion plugin is available (Ctrl + Space).
  • Increasing/decreasing the font size (Ctrl +, Ctrl -)
  • In Solidity mode, you can display the gas estimation (Tools -> Display Gas Estimation). This will highlight all statements which requires a minimum amount of gas. Color turns to red if the gas required becomes important. It will also display the max execution cost of a transaction (for each function).

 

You must be logged in to take the quiz.

Deja un comentario