1. 程式人生 > >基於eos的Dapp開發--元素戰爭(一)

基於eos的Dapp開發--元素戰爭(一)

我們前面的內容主要都是在對eos的原始碼體系進行分析,有很多朋友說不夠接地氣,想要學習基於eos的Dapp開發。然而對於很多開發者而言,eos入門並非易事。從環境的搭建到智慧合約的編寫、編譯、前端呼叫等等一系列的過程要耗費不少的時間。

今天eos官推方出了一款小遊戲,生動形象的引領有一定開發基礎的朋友走進基於eos的Dapp開發,官方地址: 元素戰爭 為了讓更多的開發者參與進來,我們以官方的battles為例,簡單的介紹整個元素戰爭的開發過程。

首先需要註冊一個賬號(需科學上網),註冊完成可以看到以下介面:

在這裡插入圖片描述 可以看到介面應該還沒有完全適配(有遇到任何問題的也可以去官方反饋或者和我交流),不過這並不太影響我們下一步的操作。可以看到主介面共分為兩塊,左側是Dapp開發教程區,右側是遊戲體驗區。我們今天要看的是教程區,即如何一步步的完成一個Dapp的開發。系列教程共分為9課,如下: 在這裡插入圖片描述

第零課

在這個系列中我們通過“元素戰爭”遊戲的實現來介紹基於eos的Dapp的開發。課程將會介紹執行在區塊鏈上的智慧合約同時也會使用eosjs架起前段和智慧合約之間的橋樑,我們將會詳細介紹程式碼是如何工作的。在課程中的左側你將會看到code按鈕,點選之後就會展現在右側,相應的程式碼片段也會高亮顯示。同時本課程的程式碼都可以在github上下載到: 元素戰爭原始碼 關於區塊鏈以及eos的介紹此處我們不再單獨進行說明。具體可以參考: 區塊鏈以及EOS的介紹 第一課

歡迎來到元素戰爭第一課,接下來我們將會進行一個基於eos的Dapp的開發,和所有的Dapp一樣,元素戰爭同樣不可或缺的是智慧合約和前端。智慧合約是用c++實現的,所以如果你有一定的c++基礎這是最好的,當然如果沒有c++基礎也不必擔心,這個教程會簡單的讓你理解並跟隨整個開發的過程。前端我們會用一個高效率的JavaScript庫React來實現。本課程結束你就會建立用於Dapp開發的相應的目錄結構以及相應的檔案。為了更好的模組化開發,我們將智慧合約的檔案分為了三個:

  • cardgame.hpp - the C++ 標頭檔案

  • cardgame.cpp - the C++ 原始檔

  • gameplay.cpp - the C++ 原始檔

可以用你最熟悉的文字編輯器或者IDE(如CLion或者Visual Studio Code)建立好這三個檔案,在建立目錄、檔案、類或者action的時候需要遵循eos的規範,關於規範的相關說明可以參考: eosio-cpp的相關說明 我們可以通過以下方式來編寫標頭檔案:

  1. 建立一個基於eosio::contract的類
  2. 在建構函式中將合約本身置為slef
  3. 包含eosiolib/eosio.hpp標頭檔案

完成以上操作之後,標頭檔案原始碼如下: 在這裡插入圖片描述

同樣的我們來建立gameplay.cpp以及cardgame.cpp檔案,並使用EOSIO_ABI對相應的類和action進行序列化操作。接下來我們來看前端如何搭建。

在前端開發進行之前需要確保你的系統中安裝有Node.js,元素戰爭遊戲使用的Node.js版本為Node.js 8.11.3,我們將使用create-react-app來建立一個React web app,create-react-app是用於開發簡單的app最流行的工具,完成以上基本操作之後,即可以立馬執行React app,我們可以通過以下簡單的操作來建立一個簡單的app:

npm init react-app my-app

cd到我們建立的應用的目錄:

cd my-app

然後執行剛建立的app:

npm start

當你看到以下頁面的時候說明你建立成功了: 在這裡插入圖片描述 關於如何構建React app的內容,可以參考官方文件:

https://github.com/facebook/create-react-app.

在github倉庫下載的程式碼中我們可以看到一個做過修改的React app,他是由create-react-app建立,但是為了我們接下來的操作,分別對檔案目錄以及相應的檔案進行了部分修改,我們來看前端資料夾中都有些什麼:

index.html是整個app的入口

App.jsx 是app的主檔案

最後我們會連結起兩個檔案

本文初步講了編寫智慧合約的條件以及如何初步進行智慧合約的編寫,然後使用React構建一個app同時分析了元素戰爭中前端中包含的內容,接下來的文章中我們會進行具體的演示操作. 如果你覺得我的文章對你有一定的幫助,請點選文章末尾的喜歡該作者。

如果你對eos開發感興趣,歡迎關注本公眾號,一起學習eos開發。

在這裡插入圖片描述 微信公眾號

有任何疑問或者指教請新增本人個人微信,當然有對eos開發感興趣或者金庸粉的也可以新增一起交流,備註eos開發或金庸。

在這裡插入圖片描述

                                                                   個人微訊號