実録!Uniqys KitでのDApps開発記 第1回 「CryptOsushiの紹介」

こんにちは!
以前の記事でUniqys Kitの構造や、DAppsの実装方法について簡単に紹介しました。

Uniqys Kitを用いたDAppsの実装方法をより具体的に紹介するために、今回新たなサンプルアプリケーションを開発しました!
その中で私たちが体験した開発時に気を付けるべきところを、連載記事でお届けします。

連載記事は今日から9/14まで毎日公開していく予定なので、お楽しみに!

(追記)CryptOsushiを遊べるサイトを公開しました!

こちらのサイトで、実際にCryptOsushiを遊べます。

ぜひ、あなただけのおすしを握ってみてください。

連載記事一覧


今回は連載第1弾ということで、開発したサンプルアプリケーションの紹介と、それをローカルで動作させる方法を紹介します。

今回開発したサンプルアプリケーションの名前は、「CryptOsushi(クリプトおすし)」といいます。
一体どんなアプリケーションなのでしょうか。

CryptOsushiの紹介

CryptOsushiは代替不可能なトークン(NFT)である「おすし」を、ゲーム内専用通貨である「gari」を用いてやりとりする、分散型アプリケーション(DApp)です。

ソースコードはGitHubに公開されています。
https://github.com/uniqys/Sample-CryptOsushi

CryptOsushiでは以下の操作を行うことができます。

  • 「gari」を消費することで「おすし」を生成する(にぎる)
  • にぎった「おすし」に値段をつけ「マーケット」に売り出す
  • 「gari」を消費することで「マーケット」に売り出されている「おすし」を購入する

各操作について、実際の画面を元に説明します。

起動直後

CryptOsushiを起動すると、以下の画面が表示されます。
「マイSushi」とは、自分が所持しているおすしを表示するページのことです。いまはおすしを所持していないので、なにも表示されていません。

赤い矢印で示している箇所が、所持金(gari)を示しています。初回アクセス時に自動で10000 gariが付与されます。
追加でgariの付与はされません。

おすしを生成する

所持している「gari」を消費することで「おすし」を生成できます。
生成は「にぎる」ボタンから行います。

「にぎる」ボタンをクリックすると、リクエストに署名するための確認モーダルが出ます。
「OK」を押すと、認証されたリクエストとして生成の処理が行われます。

生成されると、100gariが消費され、おすしが「マイSushi」へ追加されます。
生成されるおすしにはいろんな種類があるので、たくさんにぎって遊んでみてください!

おすしをマーケットに売り出す

にぎったおすしは、値段をつけてマーケットに売り出すことができます。

「マイSushi」から「売る」ボタンを押すと値段をつけることができます。
値段は1〜999gariの間で自由につけることができます。

「売り出す」ボタンを押し、リクエストへの署名を許可すると、マーケットに売り出すことができます。
いま売り出されているおすしは「マーケット」のページから確認できます。

おすしを購入する

マーケットに売り出されているおすしはgariを消費することで購入できます。
新しくシークレットウインドウを開き、別のユーザとしてマーケットを開くと、先ほど売り出したおすしが買える状態になっています。

「買う」ボタンを押し、リクエストへの署名を許可すると購入できます。
gariが減り、購入したおすしが「マイSushi」に入っていることが確認できます。

逆に、売り出した方のユーザの画面では、gariが増え、「マイSushi」からは消えています。

以上がCryptOsushiの紹介です!興味をもっていただけましたでしょうか。

CryptOsushiで遊んでみる

CryptOsushiは、以下のサイトで遊ぶことができます!

実際におすしをにぎる・売る・買うなどの操作をすることができるので、ぜひ遊んでみてください。

CryptOsushiを動かす

次は、ローカル環境で実際に動かす方法を紹介します。

CryptOsushiのソースコードは公開されており、ローカル環境で動かすことができます。

https://github.com/uniqys/Sample-CryptOsushi

連載記事が待ちきれない方は実際に動かして遊んでみてください。

環境を整える

CryptOsushiではDockerを利用しています。インストールしていない場合は、こちらからインストールをしてください。

GitHubからcloneする

まずはGitHubからcloneします。

$ git clone https://github.com/uniqys/Sample-CryptOsushi

セットアップする

次はセットアップです。
セットアップには以下のコマンドを実行します。

$ cd Sample-CryptOsushi
$ export COMPOSE_FILE=docker-compose.dev.yml
$ docker-compose build
$ docker-compose run --rm uniqys-node yarn run init --unique "hello cryptosushi"
$ docker-compose up

ブラウザでアクセス

任意のブラウザで http://localhost:3000 にアクセスするとCryptOsushiへアクセスできます。
また、新規シークレットウインドウもしくは別ブラウザでアクセスすると別ユーザとしてアクセスできます。

おすしの売買をするには2人以上のユーザが必要なので、この方法でユーザを増やして遊んでみてください。

おわりに

この記事ではCryptOsushiの紹介とローカル環境での動かし方についてご紹介しました。
動かしてみてなにか気づいた点がありましたら、お気軽にissuesgitterなどでご連絡ください。

次の記事では、「CryptOsushiのローカル環境での構成」についてご紹介します。
今回動かしたアプリケーションが、どんな構成で動いているのかを説明します。
ご期待ください!


Uniqysプロジェクトについてはこちらをご覧ください。

もしこの記事をお楽しみいただけたら、私たちのGitHubTwitterのフォローをお願いします。Uniqysの最新情報をお届けしています。 また、Uniqys KitのPreview版はすでにGitHubで公開されているので、是非お試しください!