チェーンの特徴とアプリの概要を理解しよう
👋 ASTAR SNS 開発プロジェクトへようこそ!
本プロジェクトでは、ASTAR
というチェーン上でスマートコントラクトの実装とそれとやりとりをするwebアプリケー ションを作成します。
使用する技術は以下のものです。
- Rust
- Terminalの基本操作
- React
- Next.js
今すべてを理解している必要はありません。
わからないことがあったらインターネットで検索したり、コミュニティで質問しながらプロジェクトを進めていきましょう!
👁🗨 ASTAR の特徴は?
最近話題になっている日本初のパブリックブロックチェーンASTAR
をご存じの方も多いのではないかと思いますが、そのチェーンの特徴とはどのようなものなのでしょうか?
その最大の特徴はPolkadot
のパラチェーン(Polkadotに接続するための特別なチェーン)であることです。なぜこれがすごいのかというと、Polkadot
のパラチェーンとして認められるのは100個までと決められているのですが、ASTARは世界で 3 番目の速さでその中に選ばれたからです!
では技術的な特徴とは何なのでしょうか?
主なものは以下の4つとなります。
1.開発者への報酬制度
ASTARはEVM
とWASM
を用いたスマートコントラクトの開発者をサポートしています。これらどちらかで作成されたdAppをAstar上にデプロイしてASTARトークンの保有者に気に入ってもらえればASTARトークンを受け取れるという仕組みが用意されています。
2.スケーラビリティ
TPS(Transaction Per Second)
が他のチェーンと比べて小さく、ユーザーはトランザクションを待つのに時間を無駄にすることが少ないです。
3.サブストレイト
ASTARが用意してくれている基礎的なシステムをしようすれば、開発者は独自のチェーンを簡単に作成することができます。
🦀 アプリの概要
本アプリはブラウザで使用可能なフルオンチェーンSNS webアプリです。
また投稿に対して受け取ったいいねの数に従って、トークンを獲得できるという特徴があります!
では具体的にこのアプリが持つ機能を画面ごとに簡単に紹介していきます。
[ログイン画面
]
この画面のConnect
ボタンを押すことでウォレットを接続できるようになっています。
うまく接続が完了すれば次にホーム画面へ飛ぶようにできています。
[ホーム画面
]
この画面では全体のユーザーの投稿を最新のものから順番に見られるようになっています。
また、それらの投稿にいいね
を押せたりまだフォローしていないユーザーをフォローすることもできます。
このフォローによってそのアカウントとメッセージでやりとりを行うことができます。
加えて、いいねの数に従ってトークンを獲得できる機能も備えておりロゴとプロフィールアイコンの間に残高が表示されます。
[プロフィール画面
]
自分のプロフィール、フォロワー数、フォロー数、投稿内容を見ることができます。
また、プロフィールの画像と名前を変更することもできます。
[メッセージ画面
]
フォローしている、またはされているユーザーとメッセージのやりとりができる画面です。
以上を踏まえて実装する機能は下のようになっています。
1.ウォレット接続
2.投稿
3.メッセージのやりとり
4.フォロー
これらの機能をRust, Next.js
を使って実装していきます!
🌍 プロジェクトをアップグレードする
この学習コンテンツは、UNCHAIN License のもとで運用されています。
プロジェクトに参加していて、「こうすればもっと分かりやすいのに!」「これは間違っている!」と思ったら、ぜひpull request
を送ってください。
GitHubから直接コードを編集して直接pull request
を送る方法は、こちらを参照してください。
どんなリクエストでも大歓迎です 🎉
また、プロジェクトを自分のGitHubアカウントにFork
して、中身を編集してからpull request
を送ることもできます。
👋 UNCHAIN-projects
にpull request
を送る! ⏩ UNCHAIN の GitHub にアクセス!
⚡️ Issue
を作成する
pull request
送るほどでもないけど、提案を残したい! と思ったら、こちら にIssue
を作成してみましょう。
Issue
の作成方法に関しては、こちらを参照してください。
pull request
やissue
の作成は、実際にチームで開発を行う際に重要な作業になるので、ぜひトライしてみてください。
UNCHAINのプロジェクトをみんなでより良いものにしていきましょう ✨
環境構築をしよう
🧞♂️ 環境構築しよう
ではプロジェクトを作成するにあたって環境構築をしていきましょう!
まず、node
/ yarn
を取得する必要があります。お持ちでない場合は、こちらにアクセスしてください。
node v16
をインストールすることを推奨しています。
🌚 バックエンドの環境構築
まずはスマートコントラクトを作成するための環境を整えていきましょう!
では下のコマンドをターミナルで実行してrustを使用できるよう にしていきます。(Windows OSの場合はhttps://rust.sh/
からインストール用のinit.exeをダウンロードし実行しましょう。)
curl --proto '=https' --tlsv1.2 -sSf `https://sh.rustup.rs` | sh
下のようなメッセージが帰ってくるはずです。
1) Proceed with installation (default)
2) Customize installation
3) Cancel installation
>
処理が終わったら下のコマンドを実行して環境変数を設定します。
source "$HOME/.cargo/env"
次にrustの特定のバージョンを下のコマンドをターミナルで実行することでインストールします。
rustup install 1.68.0
その後指定したバージョンがインストールされているか、下のコマンドをターミナルで実行することで確認します。
rustup toolchain list
すると下のような結果が出てきます。
赤字で囲っているところがインストールしたrustのコンパイラーのバージョンを示すものです。こちらをコピーしましょう。
では下のコマンドをターミナルで実行することでrustのコンパイラーとして1.68.0のものを使用できるようにしましょう。
rustup component add rust-src --toolchain
に続く部分は先ほどコピーしたものと入れ替えてください。筆者はmacを使用しているので1.68.0-aarch64-apple-darwin
となっています。
rustup override set 1.68.0
rustup component add rust-src --toolchain 1.68.0-aarch64-apple-darwin
ここで注意点です。Astar-SocialFiで使用しているパッケージの中には、開発環境によってはエラーで動かなくなるものが含まれています。なのでもしどこかでどうしてもエラーが発生して進まないということがあればここから説明するコマンドを使用してrustのコンパイラーのバージョンをnightlyに変更してみてください。
nightlyとは、rustのコンパイラーのバージョンの種類の1つです。毎日rustのコンパイラーは更新されており、それが毎日反映されているのがnightly
です。
stableバージョンには安定的に動作すると認められたものしか入れられていません。
ではAstar-SocialFiが動く(教材更新日:2023/6/14時点)nightlyのバージョンに切り替えるコマンドを以下に示します。
rustup toolchain install nightly-2023-01-01
rustup target add wasm32-unknown-unknown --toolchain nightly-2023-01-01
rustup component add rust-src --toolchain nightly-2023-01-01
これでコンパイラーのバージョンは変更できました。このバージョンのコンパイラーを用いるにはcargo
コマンドの次に+nightly-2023-01-01
という文字列を入れる必要があります。注意してください。
次にcargo-contracts CLI
を使用できるようにするための準備をします。下のコマンドを順番にターミナルで実行してください。
その前にmacで開発をされる方はこちらを参考にHomebrew
をインストールしてください。こちらはパッケージをインストールするのに使用します。
rustup component add rust-src
(Macの場合のみ)brew install openssl
cargo install cargo-dylint dylint-link
cargo install --force --locked cargo-contract
これでコントラクトをデプロイする準備が完了しました!
それでは本プロジェクトで使用するフォルダーを作成してきましょう。作業を始めるディレクトリに移動したら、次のコマンドを実行します。
mkdir ASTAR-SocialFi
cd ASTAR-SocialFi
yarn init --private -y
ASTAR-SocialFiディレクトリ内に、package.jsonファイルが生成されます。
ASTAR-SocialFi
└── package.json
それでは、package.json
ファイルを以下のように更新してください。
{
"name": "ASTAR-SocialFi",
"version": "1.0.0",
"description": "ASTAR SNS dApp",
"private": true,
"workspaces": {
"packages": ["packages/*"]
},
"scripts": {
"contract": "yarn workspace contract",
"client": "yarn workspace client",
"test": "yarn workspace contract test"
}
}
package.json
ファイルの内容を確認してみましょう。
モノレポを作成するにあたり、パッケージマネージャーの機能であるWorkspacesを利用しています。
この機能により、yarn installを一度だけ実行すれば、すべてのパッケージ(今回はコントラクトのパッケージとクライアントのパッケージ)を一度にインストールできるようになります。
workspacesの定義をしている部分は以下になります。
"workspaces": {
"packages": [
"packages/*"
]
},
また、ワークスペース内の各パッケージにアクセスするためのコマンドを以下の部分で定義しています。
"scripts": {
"contract": "yarn workspace contract",
"client": "yarn workspace client",
"test": "yarn workspace contract test"
}
これにより、各パッケージのディレクトリへ階層を移動しなくてもプロジェクトのルート直下から以下のようにコマンドを実行することが可能となります(ただし、各パッケージ内にpackage.json
ファイルが存在し、その中にコマンドが定義されていないと実行できません。そのため、現在は実行してもエラーとなります。ファイルは後ほど作成します)。
yarn <パッケージ名> <実行したいコマンド>
次に、ASTAR-SocialFiディレクトリ下に.gitignore
ファイルを作成して以下の内容を書き込みます。
**/yarn-error.log*
# dependencies
**/node_modules
# misc
**/.DS_Store
最後にpackagesフォルダーを作成しましょう。
最終的に以下のようなフォルダー構成となっていることを確認してください。
ASTAR-SocialFi
├── .gitignore
├── package.json
└── packages/
これでモノレポの雛形が完成しました!