手把手教你玩eos:卡牌游戏第一课——搭建前后端框架

in eos •  last year  (edited)

文章由EOS节点EOSWing(柚翼)首发于eoswing.io博客,内容将不定期更新,仅供学习交流之用。
1581265020.jpg
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
eost07-00.png

本项目大体分为智能合约和前端两个部分。
EOSIO智能合约采用C++编写。不过,如我们在第4篇教程介绍智能合约时所说,即使你不会C++也没关系,毕竟入门学习智能合约开发,需要掌握的C++知识并不多。
前端部分,采用React+Redux。

1.2 进入docker容器
下载容器

docker pull eosio/eos-dev:v1.4.1
eost07-01.png

建立项目文件夹

mkdir /eosapp
mkdir /eosapp/contracts
mkdir /eosapp/contracts/cardgame

命令行输出如下:
eost07-02.png

配置容器

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

命令行输出如下:
eost07-03.png

进入docker容器

docker exec -it eosdev /bin/bash

命令行输出如下:
eost07-04.png

2 构建后端智能合约代码框架
创建智能合约的3个文件

cd /eos-work/contracts/cardgame

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

命令行输出如下:
eost07-05.png

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

编码cardgame.hpp

vi cardgame.hpp
输入如下代码:

#include <eosiolib/eosio.hpp>

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

public:

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

};
输入:wq 保存退出

编码gameplay.cpp

vi gameplay.cpp
输入如下代码:

#include "cardgame.hpp"
输入:wq 保存退出

编码cardgame.cpp

vi cardgame.cpp
输入如下代码:

#include "gameplay.cpp"

EOSIO_ABI(cardgame, BOOST_PP_SEQ_NIL)
输入:wq 保存退出

3 构建前端框架
安装node
中间遇到[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/,查看:
eost07-06.png

修改文件夹代码组织
清空src文件夹中的文件

cd src
rm *

添加components文件夹及相关代码

mkdir components
mkdir ./components/App

vi ./components/App/App.jsx
输入如下代码:

import React, { Component } from 'react';

class App extends Component {

render() {
return (


EOS Game!

);
}

}

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 保存退出

修改src/index.js文件

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

命令行输出如下:
eost07-07.png

再次运行前端

cd /eos-work/frontend
npm start
输入网址查看:
eost07-08.png

4 后记
延伸阅读
在本文的学习中如果遇到问题,欢迎留言或者在如下链接寻找解决方案:
●EOS官方游戏开发第一课: https://battles.eos.io/tutorial/lesson1/chapter1

如果觉得这一系列教程有点意思,请投票给柚翼节点(eoswingdotio)。您的投票是本教程持续更新的动力源泉,谢谢。

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!