こんにちは！
以前の記事で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の紹介とローカル環境での動かし方についてご紹介しました。
動かしてみてなにか気づいた点がありましたら、お気軽にissuesやgitterなどでご連絡ください。
次の記事では、「CryptOsushiのローカル環境での構成」についてご紹介します。
今回動かしたアプリケーションが、どんな構成で動いているのかを説明します。
ご期待ください！