创建智能合约

　　目前以太坊官方全力支持的智能合约开发环境是Remix IDE，我们在合约编辑页面编写如下代码：

　　pragma solidity^0.4.21;

　　contract InfoContract{

　　string fName;

　　uint age;

　　function setInfo(string _fName,uint _age)public{

　　fName=_fName;

　　age=_age;

　　}

　　function getInfo()public constant returns(string,uint){

　　return(fName,age);

　　}

　　}

创建 UI

在项目目录下创建index.html，在这里我们将创建基础的 UI，功能包括name和age的输入框，以及一个按钮，这些将通过 jQuery 实现：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="main.css">

    <script src="./node_modules/web3/dist/web3.min.js"></script>

</head>

<body>

    <div>

        <h1>Info Contract</h1>

        <h2 id="info"></h2>

        <label for="name" class="col-lg-2 control-label">Name</label>

        <input id="name" type="text">

        <label for="name" class="col-lg-2 control-label">Age</label>

        <input id="age" type="text">

        <button id="button">Update Info</button>

    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script>

       // Our future code here..

    </script>

</body>

</html>

接下来需要编写main.css文件设定基本的样式：

body {

    background-color:#F0F0F0;

    padding: 2em;

    font-family: 'Raleway','Source Sans Pro', 'Arial';

}

.container {

    width: 50%;

    margin: 0 auto;

}

label {

    display:block;

    margin-bottom:10px;

}

input {

    padding:10px;

    width: 50%;

    margin-bottom: 1em;

}

button {

    margin: 2em 0;

    padding: 1em 4em;

    display:block;

}

#info {

    padding:1em;

    background-color:#fff;

    margin: 1em 0;

}

使用Web3与智能合约交互

UI 创建好之后，在<script>标签中间编写web.js的代码与智能合约交互。首先创建web3实例，并与我们的测试环境连接：

<script>

    if (typeof web3 !== 'undefined') {

        web3 = new Web3(web3.currentProvider);

    } else {

        // set the provider you want from Web3.providers

        web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));

    }

</script>