(七)卡牌游戏第一课:搭建前后端框架

手把手教你玩eos

我是此系列教程作者,eoswing团队肖南飞,区块链技术开发人员。

0.引言

0.1教程概况

手把手教你玩eos系列教程,从最基础开始,一步一步教你学会用eos。比如发代币,开发DAPP等等。
本文是第七篇,从这一篇开始,我们将开始学习如何搭建一个EOS卡牌游戏。本篇教程主要是搭建前后端框架。

0.2 学习内容

  1. 相关准备
  2. 构建后端智能合约代码框架
  3. 构建前端框架

0.3 机器环境

  • cpu: 1核
  • 内存: 8G
  • 操作系统:CentOS 7.4 64位
  • 服务器所在地:香港

推荐将服务器放在网络较为优质的环境,比如香港。不然会有很多配置依赖下载上的问题。

1 相关准备

1.1 项目技术栈

此项目来源于eosio官网:
https://battles.eos.io/main

本项目大体分为智能合约和前端两个部分。

EOSIO智能合约采用C++编写。不过,如我们在第4篇教程介绍智能合约时所说,即使你不会C++也没关系,毕竟入门学习智能合约开发,需要掌握的C++知识并不多。

前端部分,采用React+Redux。

1.2 进入docker容器

下载容器

1
docker pull eosio/eos-dev:v1.4.1

建立项目文件夹

1
2
3
mkdir /eosapp
mkdir /eosapp/contracts
mkdir /eosapp/contracts/cardgame

命令行输出如下:

配置容器

1
docker run -it -d --net=host --rm --name eosdev -v /eosapp:/eos-work eosio/eos-dev:v1.4.1 /bin/bash

命令行输出如下:

进入docker容器

1
docker exec -it eosdev /bin/bash

命令行输出如下:

2 构建后端智能合约代码框架

创建智能合约的3个文件

1
2
3
4
5
cd /eos-work/contracts/cardgame

touch cardgame.hpp
touch cardgame.cpp
touch gameplay.cpp

命令行输出如下:

三个文件分别为:

  • cardgame.hpp - 定义智能合约的C ++头文件。
  • cardgame.cpp - 实现智能合约操作主体文件。
  • gameplay.cpp - 智能合约中使用的内部函数。

编码cardgame.hpp

1
vi cardgame.hpp

输入如下代码:

1
2
3
4
5
6
7
8
9
10
#include <eosiolib/eosio.hpp>

using namespace std;
class cardgame : public eosio::contract {

public:

cardgame( account_name self ):contract(self){}

};

输入:wq 保存退出

编码gameplay.cpp

1
vi gameplay.cpp

输入如下代码:

1
#include "cardgame.hpp"

输入:wq 保存退出

编码cardgame.cpp

1
vi cardgame.cpp

输入如下代码:

1
2
3
#include "gameplay.cpp"

EOSIO_ABI(cardgame, BOOST_PP_SEQ_NIL)

输入:wq 保存退出

3 构建前端框架

安装node

中间遇到[y/n]时,直接输入 y 即可

1
2
3
4
5
6
7
cd /eos-work
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
apt-get install -y nodejs
apt-get install npm
npm install n -g
n stable
npm i -g pm2

构建前端

1
2
3
npm init react-app frontend
cd frontend
npm start

在浏览器中输入服务器网址,我的是http://47.75.214.239:3000/,查看:

修改文件夹代码组织

清空src文件夹中的文件

1
2
cd src
rm *

添加components文件夹及相关代码

1
2
3
4
mkdir components
mkdir ./components/App

vi ./components/App/App.jsx

输入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component } from 'react';

class App extends Component {

render() {
return (
<div className="App">
EOS Game!
</div>
);
}

}

export default App;

输入:wq 保存退出

1
vi ./components/App/index.js

输入如下代码:

1
2
3
import App from './App';

export default App;

输入:wq 保存退出

1
vi ./components/index.js

输入如下代码:

1
2
3
4
5
import App from './App';

export {
App,
}

输入:wq 保存退出

修改src/index.js文件

1
vi index.js

删除默认代码,输入如下代码:

1
2
3
4
5
6
7
8
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './components';

ReactDOM.render(
<App />,
document.getElementById('root')
);

输入:wq 保存退出

最终文件夹结构如下:

1
2
apt-get install tree
tree

命令行输出如下:

再次运行前端

1
2
cd /eos-work/frontend
npm start

输入网址查看:

4 后记

延伸阅读

在本文的学习中如果遇到问题,欢迎留言或者在如下链接寻找解决方案:

下一篇:(八)卡牌游戏第二课:存储状态和登录