[视频文字稿大纲] 手把手教你开发DApp

我们在11月25日举行了第一场Blockchain Coding Day活动 ，活动内容是教大家写一个简单的Dapp。针对线下活动遇到的问题，特意在B站发布了一个视频，方便大家进行回顾。
视频链接：https://www.bilibili.com/video/av37213922/， 时长18分钟。

粘贴到浏览器打开，微信屏蔽了链接：https://first-forever-1257608018.cos-website.ap-beijing.myqcloud.com/

系统推荐

因为Node.js某些类库依赖C++，本地编译需要安装node-gyp，node-gyp在纯windown环境安装非常麻烦。

我们不推荐Window，可以使用虚拟机在Window系统中安装一个Linux的Ubunut系统，直接使用Ubunut非常好， 使用Mac也非常好。

在window安装虚拟环境

• 虚拟机VirtualBox官网下载 https://www.virtualbox.org/wiki/Downloads， 并安装ubunut镜像。

• 开启 Windows 10 的 Linux 子系统并安装Ubunut镜像，切记是Windows10，不是Windows8，也不是Windows7，版本不能低于Window10，参考： https://www.jianshu.com/p/UpwXzQ。

如果一定要使用window原生系统，需要安装 windows build tools，
参考 https://www.jianshu.com/p/2b831714bbff，我们并不能提供更多帮助，很抱歉。

环境配置

1 安装编辑器vscode
https://code.visualstudio.com/

2 安装nodejs
nodejs的官网：https://nodejs.org/en/， 推荐使用最新版v10.14 。
安装完node之后，安装另一个包管理器 yarn。
npm install -g yarn

3 安装Git

git是一个分布式版本控制软件，使用git记录代码的更改记录。

https://git-scm.com/

项目

• 下载源码并安装依赖

一定要使用这里的代码，为了方便大家上手，我们在原来的代码基础上做了很多微调。

git clone https://github.com/NervosBeijingCommunity/first-forever
cd first-forever
yarn install # 安装类库

• 替换地址
  运行 npm run wallet 得到新的地址

--- a/src/config.js
+++ b/src/config.js
@@ -1,8 +1,8 @@
 const config = {
   chain: 'https://node.cryptape.com',
   contractAddress: '0x3D91cafAe0460D9cA810bbD03aac89e10A613703',
-  fromAddress: '0x2D785cF68B4aF1D3Cf49f426E09A7bB773BB76c0',
-  privateKey: '0x452afbe580c3680feaf64adc2755d88c7c796d3e622d4f2645557c09a00623f7',
+  fromAddress: '0xA51f207A915833626bB6a5532ddECAAFf99Ef9Dd',
+  privateKey: '0x32517660eb013d45f8762c0becb0f70e14e2447ceda332a9fedc2eb9c86ba390',
 }

 module.exports = config

• 通过测试网的水龙头充值
  https://dapp.cryptape.com/faucet/

• 替换abi与bytecode

访问https://remix.ethereum.org/，替换src/contracts/compiled.js中的abi与bytecode。

• 部署合约
  执行npm run deploy

• 测试
  执行yarn test，测试有一个bug，测试案例好像不太合理，视频没有展示。

• 运行Dapp
  yarn start

• 部署到腾讯云
  执行 yarn build后，新生成build文件夹，把build出的内容上传到腾讯云的 对象存储，设定对外发布，所有人都可以访问了。
  粘贴到浏览器打开，微信屏蔽了链接：https://first-forever-1257608018.cos-website.ap-beijing.myqcloud.com/list

---

参考：

https://learning.nervos.org/nerv-first