我是此系列教程作者，eoswing团队肖南飞,区块链技术开发人员。
手把手教你玩eos系列教程，从最基础开始，一步一步教你学会用eos。比如发代币，开发DAPP等等。
本文是第七篇,从这一篇开始，我们将开始学习如何搭建一个EOS卡牌游戏。本篇教程主要是搭建前后端框架。
- 相关准备
- 构建后端智能合约代码框架
- 构建前端框架
- cpu: 1核
- 内存: 8G
- 操作系统：CentOS 7.4 64位
- 服务器所在地：香港
推荐将服务器放在网络较为优质的环境，比如香港。不然会有很多配置依赖下载上的问题。
此项目来源于eosio官网: https://battles.eos.io/main
本项目大体分为智能合约和前端两个部分。
EOSIO智能合约采用C++编写。不过，如我们在第4篇教程介绍智能合约时所说，即使你不会C++也没关系，毕竟入门学习智能合约开发，需要掌握的C++知识并不多。
前端部分，采用React+Redux。
docker pull eosio/eos-dev:v1.4.1
mkdir /eosapp
mkdir /eosapp/contracts
mkdir /eosapp/contracts/cardgame命令行输出如下：
docker run -it -d --net=host --rm --name eosdev -v /eosapp:/eos-work eosio/eos-dev:v1.4.1 /bin/bash命令行输出如下：
docker exec -it eosdev /bin/bash命令行输出如下：
cd /eos-work/contracts/cardgame
touch cardgame.hpp
touch cardgame.cpp
touch gameplay.cpp命令行输出如下：
三个文件分别为：
- cardgame.hpp - 定义智能合约的C ++头文件。
- cardgame.cpp - 实现智能合约操作主体文件。
- gameplay.cpp - 智能合约中使用的内部函数。
vi cardgame.hpp输入如下代码：
#include <eosiolib/eosio.hpp>
using namespace std;
class cardgame : public eosio::contract {
public:
cardgame( account_name self ):contract(self){}
};输入:wq 保存退出
vi gameplay.cpp输入如下代码：
#include "cardgame.hpp"输入:wq 保存退出
vi cardgame.cpp输入如下代码：
#include "gameplay.cpp"
EOSIO_ABI(cardgame, BOOST_PP_SEQ_NIL)输入:wq 保存退出
中间遇到[y/n]时，直接输入 y 即可
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 npm init react-app frontend
cd frontend
npm start在浏览器中输入服务器网址，我的是http://47.75.214.239:3000/，查看：
cd src
rm * mkdir components
mkdir ./components/App
vi ./components/App/App.jsx输入如下代码：
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
EOS Game!
</div>
);
}
}
export default App;
输入:wq 保存退出
vi ./components/App/index.js输入如下代码:
import App from './App';
export default App;
输入:wq 保存退出
vi ./components/index.js输入如下代码:
import App from './App';
export {
App,
}
输入:wq 保存退出
vi index.js删除默认代码，输入如下代码：
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './components';
ReactDOM.render(
<App />,
document.getElementById('root')
);
输入:wq 保存退出
apt-get install tree
tree命令行输出如下：
cd /eos-work/frontend
npm start输入网址查看：
在本文的学习中如果遇到问题，欢迎留言或者在如下链接寻找解决方案：
- EOS官方游戏开发第一课: https://battles.eos.io/tutorial/lesson1/chapter1
如果觉得这系列教程有点意思，请投票给柚翼节点（eoswingdotio）。您的投票是本教程持续更新的动力源泉，谢谢。