Astar Learning

What it does

AstarLearning Dappは、気軽にWASMやAstar Networkなどについて学べる教育系のWeb3プロダクトです。

ただ学習するだけではなく、用意したコンテンツに最後まで目を通して理解した学習者(ユーザー)には、NFTをミントするチャンスが与えられ、WASM上で動作するNFTコントラクトの機能を使って学習歴のNFTを発行することができます。

ユーザーは、このDappに触れる一環で知識を得るだけでなくWASMコントラクトを利用した実装例を体感できるので、Dappの実装イメージを膨らませることができます。

これにより一人でも多くのエンジニアにWASM Dappの魅力を伝え、まだまだ少数であるWASMコントラクト開発者を増やすきっかけを生み出すことを目的としています。

The problem it solves

この Astar Learning Dappで解決しようとしている課題は下記3点です。

- まだまだWASMコントラクト開発者が少数であること

- 気軽にWASMやAstar Networkについて学べるコンテンツが少ないこと

- WASMを利用したDappの実装例がまだまだ世に広く知れ渡っておらず、メリットなどが伝わりにくいこと

Challenges I ran into

フロントとスマートコントラクトとの繋ぎこみにとても苦労しました。EVMのスマートコントラクトであればなんてことない処理でもpolkadot.jsを使って実装しようとすると簡単な処理でもつまづいたので、テクニカルアンバサダーの高橋さんに質問したりして解決しました。苦労しましたが今後のWASM Dapp開発用のテンプレともなるプロダクトを作ることができたと考えています。

Technologies I used

!ink スマートコントラクト開発言語

Next.js フロントエンド開発フレームワーク

swanky スマートコントラクト開発フレームワーク

TypeScript フロントエンド開発言語

NFTStorage NFT用のメタデータ保管ストレージ

Tailwind フロントエンド用のCSSフレームワーク

Contract-UI スマートコントラクトのデプロイ・検証のため

ShidenNetwork スマートコントラクトへのデプロイのため

How we built it

2月10~11日にかけて行われたWASM MeetupにてWASMコントラクトの開発の基礎を学んだのち、PSP34規格のNFTコントラクトを

OpenBursh+!inkで開発を行いました。

フロントエンドについては、同じくハンズオンで提供していただいたベースのソースコードを改修し、今後のWASM Dappの開発にも移植できるようなテンプレートになるソース構造としました。

開発に使用した言語やフレームワークは下記に記載しています。

What we learned

!inkとopenbrush 、contracts-uiを利用したWASMコントラクトの開発ノウハウを学びました。

また、課題であったフロントエンドとの接続については学んだことが多く、Next.js及びPolkadot.jsを使ってWASMコントラクトと接続する実装パターンを学びました。特にPSP34コントラクトで実装されている機能の呼び出しは通常の関数の呼び出しとは異なっていたのでかなりハマって苦労いたしました。しかし、そのおかげで継承元の機能を利用できるdapp開発の手法を学ぶことができました。

What's next for

1. コンテンツを画面から追加できる機能を実装すること

2. コンテンツを作成した貢献者に報酬を支払えるようにすること

3. NFTをSBTに昇華させること

4. dapp stakingに応募すること