一步步教你开发、部署第一个去中心化应用(Dapp) - 宠物商店
今天我们来编写一个完整的去中心化(区块链)应用(Dapps), 本文可以和编写智能合约结合起来看。
写在前面
阅读本文前,你应该对以太坊、智能合约有所了解,如果你还不了解,建议你先看以太坊是什么
除此之外,你最好还了解一些HTML及JavaScript知识。
本文通过实例教大家来开发去中心化应用,应用效果如图:
从本文,你可以学习到:
- 搭建智能合约开发环境
- 创建Truffle项目
- 编写智能合约
- 编译和部署智能合约到区块链
- 如何通过Web3和智能合约交互
- MetaMask 的使用
小专栏用户在教程结尾处可以下载完整的Dapp代码。
项目背景
Pete有一个宠物店,有16只宠物,他想开发一个去中心化应用,让大家来领养宠物。
在truffle box中,已经提供了pet-shop的网站部分的代码,我们只需要编写合约及交互部分。
环境搭建
Ganache(或Ganache CLI)已经取代了 testrpc。
创建项目
建立项目目录并进入
1
2> mkdir pet-shop-tutorial
> cd pet-shop-tutorial使用truffle unbox 创建项目
1
2
3
4
5
6
7
8
9
10
11
12> truffle unbox pet-shop
Downloading...
Unpacking...
Setting up...
Unbox successful. Sweet!
Commands:
Compile: truffle compile
Migrate: truffle migrate
Test contracts: truffle test
Run dev server: npm run dev
这一步需要等待一会
也可以使用truffle init 来创建一个全新的项目。
项目目录结构
contracts/
智能合约的文件夹,所有的智能合约文件都放置在这里,里面包含一个重要的合约Migrations.sol(稍后再讲)migrations/
用来处理部署(迁移)智能合约 ,迁移是一个额外特别的合约用来保存合约的变化。test/
智能合约测试用例文件夹truffle.js/
配置文件
其他代码可以暂时不用管
编写智能合约
智能合约承担着分布式应用的后台逻辑和存储。智能合约使用solidity编写,可阅读
solidity系列文章
在contracts目录下,添加合约文件Adoption.sol
1 |
pragma solidity ^0.4.17; |
编译部署智能合约
Truffle集成了一个开发者控制台,可用来生成一个开发链用来测试和部署智能合约。
编译
Solidity是编译型语言,需要把可读的Solidity代码编译为EVM字节码才能运行。
dapp的根目录pet-shop-tutorial下,
1 |
> truffle compile |
输出
1 |
Compiling ./contracts/Adoption.sol... |
部署
编译之后,就可以部署到区块链上。
在migrations文件夹下已经有一个1_initial_migration.js部署脚本,用来部署Migrations.sol合约。
Migrations.sol 用来确保不会部署相同的合约。
现在我们来创建一个自己的部署脚本2_deploy_contracts.js
1 |
var Adoption = artifacts.require("Adoption"); |
在执行部署之前,需要确保有一个区块链运行, 可以使用
Ganache来开启一个私链来进行开发测试,默认会在7545端口上运行一个开发链。
Ganache 启动之后是这样:
接下来执行部署命令:
1 |
> truffle migrate |
执行后,有一下类似的输出,
1 |
Using network 'develop'. |
在打开的Ganache里可以看到区块链状态的变化,现在产生了4个区块。
这时说明已经智能合约已经部署好了。
测试
现在我们来测试一下智能合约,测试用例可以用 JavaScript or Solidity来编写,这里使用Solidity。
在test
目录下新建一个TestAdoption.sol
,编写测试合约
1 |
|
Assert.sol 及 DeployedAddresses.sol是Truffle框架提供,在test目录下并不提供truffle目录。
TestAdoption合约中添加adopt的测试用例
运行测试用例
在终端中,执行
1 |
truffle test |
如果测试通过,则终端输出:
1 |
Using network 'develop'. |
创建用户接口和智能合约交互
我们已经编写和部署及测试好了我们的合约,接下我们为合约编写UI,让合约真正可以用起来。
在Truffle Box pet-shop
里,已经包含了应用的前端代码,代码在src/
文件夹下。
在编辑器中打开src/js/app.js
可以看到用来管理整个应用的App对象,init函数加载宠物信息,就初始化web3.
web3是一个实现了与以太坊节点通信的库,我们利用web3来和合约进行交互。
初始化web3
接下来,我们来编辑app.js修改initWeb3():
删除注释,修改为:
1 |
initWeb3: function() { |
代码中优先使用Mist 或 MetaMask提供的web3实例,如果没有则从本地环境创建一个。
实例化合约
使用truffle-contract会帮我们保存合约部署的信息,就不需要我们手动修改合约地址,修改initContract()代码如下:
1 |
initContract: function() { |
处理领养
修改markAdopted()代码:
1 |
markAdopted: function(adopters, account) { |
修改handleAdopt()代码:
1 |
handleAdopt: function(event) { |
在浏览器中运行
安装 MetaMask
MetaMask 是一款插件形式的以太坊轻客户端,开发过程中使用MetaMask和我们的dapp进行交互是个很好的选择,通过此链接安装,安装完成后,浏览器工具条会显示一个小狐狸图标。
配置钱包
在接受隐私说明后,会出现页面如下:
这里我们通过还原一个Ganache为我们创建好的钱包,作为我们的开发测试钱包。点击页面的Import Existing DEN,输入Ganache显示的助记词。
1 |
candy maple cake sugar pudding cream honey rich smooth crumble sweet treat |
然后自己想要的密码,点击OK。
如图:
连接开发区块链网络
默认连接的是以太坊主网(左上角显示),选择Custom RPC,添加一个网络:http://127.0.0.1:7545,点返回后,显示如下:
这是左上角显示为Private Network,账号是Ganache中默认的第一个账号。
至此MetaMask的安装,配置已经完成。
安装和配置lite-server
接下来需要本地的web 服务器提供服务的访问, Truffle Box pet-shop里提供了一个lite-server可以直接使用,我们看看它是如何工作的。
bs-config.json指示了lite-server的工作目录。
1 |
{ |
./src 是网站文件目录
./build/contracts 是合约输出目录
以此同时,在package.json文件的scripts中添加了dev命令:
1 |
"scripts": { |
当运行npm run dev的时候,就会启动lite-server
启动服务
1 |
> npm run dev |
会自动打开浏览器显示我们的dapp,如本文的第一张图。
现在领养一直宠物看看,当我们点击Adopt时,MetaMask会提示我们交易的确认,如图:
点击Submit确认后,就可以看到成功领养了这次宠物。
在MetaMask中,也可以看到交易的清单:
好了,恭喜你,即将成为一名去中心化式应用开发者的你已经成为迈出了坚实的一步。
如果学习中遇到问题,欢迎来我的知识星球交流。
参考文档
圆方圆区块链汇集大批区块链名师,采取导师值班制,为学员实时解决技术疑难。请关注圆方圆区块链知识星球与导师。(培训咨询请联系船长13826054890微信手机同号)
作者Tiny熊
,专注于 区块链底层技术研究,更多Tiny熊老师的文章和视频请关注圆方圆链圈公众号。
一步步教你开发、部署第一个去中心化应用(Dapp) - 宠物商店的更多相关文章
- 从零构建以太坊(Ethereum)智能合约到项目实战——第23章 从零构建和部署去中心化投票App,decentralization Voting Dapp
P90 .1-从零构建和部署去中心化投票App-01 P91 .2-从零构建和部署去中心化投票App-02 P92 .3-从零构建和部署去中心化投票App-03 参考博文:http://liyuech ...
- Redis从单机到集群,一步步教你环境部署以及使用
Redis作为缓存系统来说还是很有价值的,在大数据方向里,也是需要有缓存系统的.一般可以考虑tachyon或者redis,由于redis安装以及使用更简单,所以还是优先考虑了它.那么在一些场景下为了保 ...
- 一步步教你创建自己的数字货币(代币)进行ICO
本文从技术角度详细介绍如何基于以太坊ERC20创建代币的流程. 写在前面 本文所讲的代币是使用以太坊智能合约创建,阅读本文前,你应该对以太坊.智能合约有所了解,如果你还不了解,建议你先看以太坊是什么 ...
- 使用Git Hooks实现开发部署任务自动化
前言 版本控制,这是现代软件开发的核心需求之一.有了它,软件项目可以安全的跟踪代码变更并执行回溯.完整性检查.协同开发等多种操作.在各种版本控制软件中,git是近年来最流行的软件之一,它的去中心化架构 ...
- [币严区块链]以太坊(ETH)Dapp开发入门教程之宠物商店领养游戏
阅读本文前,你应该对以太坊.智能合约有所了解,如果你还不了解,建议你先看以太坊是什么 除此之外,你最好还了解一些HTML及JavaScript知识. 本文通过实例教大家来开发去中心化应用,应用效果如图 ...
- 一步步教你如何在Ubuntu虚拟机中安装QEMU并模拟模拟arm 开发环境(一)uImage u-boot(转)
初次接触qemu是因为工作的需要,有时候下了班,可能需要在家研究一些东西,因为博主用到arm环境,这时候博主比较小气,不愿花钱买开发板,当然博主在这里给大家的建议是,如果要真正学懂arm构架的相关知识 ...
- 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...
- SharePoint使用BCS开发你第一个应用程序(一)
SharePoint使用BCS开发你第一个应用程序(一) 本系列教你使用BCS(Business Connectivity Service)创建OBA(Office business ...
- 一步步教你轻松学K-means聚类算法
一步步教你轻松学K-means聚类算法(白宁超 2018年9月13日09:10:33) 导读:k-均值算法(英文:k-means clustering),属于比较常用的算法之一,文本首先介绍聚类的理 ...
随机推荐
- POJ - 1182 食物链 并查集经典
思路:设r(x)表示节点x与根结点的关系,px表示x的根结点.记录每个节点与其父节点的关系,就能很方便知道每个节点以及和它的父节点的关系. struct node{ int par; //父亲节点 i ...
- CEPH RGW集群和bucket的zone group 不一致导致的404异常解决 及 使用radosgw-admin metadata 命令设置bucket metadata 的方法
问题现象: 最近在研究zonegroup的配置操作,发现在配置zonegroup后修改了default zone,导致访问对象报404错误. 问题原因: rgw 日志 报异常'request fo ...
- Web渗透测试笔记(基础部分)
信息收集: dns信息收集 格式:dns... -参数 域名 -参数 示例: root@xxSec:~# dnsenum baidu.com root@xxSec:~# dnsenum -f dns. ...
- linux RHCS集群 高可用web服务器
RHCS集群,高可用服务器 高可用 红帽集群套件,提供高可用性,高可靠性,负载均衡,快速的从一个节点切换到另一个节点(最多16个节点)负载均衡 通过lvs提供负载均衡,lvs将负载通过负载分配策略,将 ...
- 把mmapv1存储引擎存储的mongodb3.0数据库数据复制到WiredTiger存储引擎的mongodb3.2中
mongodb3.0在mmapv1的存储引擎基础上添加了一个新的存储引擎WiredTiger.但是3.0的默认存储引擎依旧是mmapv1,因此我们项目之前也就用的默认方式. 但是mongodb更新实在 ...
- sudo:无法解析主机 解决方案
你如果电脑中没有vim,用gedit也可以. 打开文件以后,将其中的 127.0.1.1 xxxxx xxx 替换成你电脑的自己的名字即可.
- org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException
1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...
- 【原】eclipse创建maven工程时,如何修改默认JDK版本?
问题描述:eclipse建立maven项目时,JDK版本默认是1.5,想创建时默认版本设置为1.8,如何修改? 解决方案: 找到本机maven仓库存放位置,比如:${user.home}/.m2/路径 ...
- Linux中挂载Windows共享出来的目录
Windows中1.新建文件夹,创建共享目录 右键文件夹,共享 2.设置访问方式 Everyone,添加确认 Linux-ubuntu中1.安装cifs#sudo apt-get install ci ...
- pat1081-1090
1081 #include<cmath> #include<map> #include<iostream> #include<cstring> #inc ...