Lesson 2: FarcasterでMini Appを起動する
ついに最終レッスンです。これまでに作成し、デプロイしたMini AppをFarcaster上で実際に起動し、動作を確認します。
🚀 Farcasterに投稿(Cast)する
- Farcasterクライアント(例: Warpcast)を開きます。
- 新規投稿画面で、あなたのアプリケーションのVercel URL(例:
https://your-app-name.vercel.app
)を貼り付けます。 - URLを貼り付けると、Farcasterが自動的にメタデータを読み込み、Mini Appのプレビューが表示されるはずです。
- そのまま「Cast」ボタンを押して投稿します。
すると以下のような投稿画面となるはずです!
Launchボタン押してアプリの動作確認を行なってみましょう!
起動するとウォレット接続が求められるのでウォレットを選択して接続処理を進めます。
以下のようにシューティングゲームが立ち上がればOKです! !
🔨 Base Buildへの登録
では最後にBase Buildへの登録を試してみようと思います!
Base Buildにアクセスします。
SignInを行いま しょう。
SignInが完了したら以下のような画面に遷移するはずなのでImport your mini app
をクリックして自作したMiniAppをBase Buildに登録しましょう!
App UrlにはVercelにデプロイした時のURLを入力します。
正常に登録が完了したら以下のようにFarcaster
の右上のMini App
に自分のアプリが表示されるようになります!
Mini Appをクリックすると自分のアプリが起動するはずです! !
🎮 動作確認
最後に以下の手順で動作を確認しましょう。
- Mini Appの起動: フィードに表示されたプレビュー内の「Play Game」ボタンや画像をクリックすると、アプリがフィード内で直接起動します。
- ウォレット接続: アプリが 起動したら、左上の
<Wallet />
コンポーネントを使ってウォレットを接続します。 - ゲームプレイ: ウォレットを接続するとゲーム画面が表示されます。キーボードで操作してゲームをプレイし、敵を倒してスコアを獲得してください。
- NFTミント: ゲームオーバーになると、スコアと「Mint Score NFT」ボタンが表示されます。ボタンをクリックすると、ウォレットがトランザクションの確認を求めてきます。
- トランザクション確認: トランザクションを承認すると、
TransactionCard
が表示され、ミント処理の進行状況がわかります。
- ブロックエクスプローラーで確認:
View on Explorer
のリンクをクリックすると、Basescanが開き、ミントされたNFTのトランザクション詳細を確認できます。倒した敵の数(スコア)と同じIDのNFTが、あなたのアドレスにミントされていれば成功です!
NFTマーケットプレイスでの様子
ブロックチェーンエクスプローラーの様子
おめでとうございます!
これで、Base上で動作するMini Appの開発からデプロイ、公開までの一連の流れをすべて体験しました。
🌍 プロジェクトをアップグレードする
UNCHAIN のプロジェクトは UNCHAIN License により運用されています。
プロジェクトに参加していて、「こうすればもっと分かりやすいのに!」「これは間違っている!」と思ったら、ぜひpull request
を送ってください。
- 新しい敵やアイテムを追加する: ゲームをより面白くしてみましょう。
- リーダーボードを実装する: スマートコントラクトを改良して、ハイスコアを記録できるようにしてみましょう。
- デザインを改善する: CSSを駆使して、オリジナルのゲーム画面を作成してみましょう。
このプロジェクトで学んだ知識を活かして、ぜひあなただけのオリジナルMini App開発に挑戦してみてください!
🙋♂️ 質問する
ここまでの作業で何かわからないことがある場合は、Discordの#base
で質問をしてください。
ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨
- 質問が関連しているセクション番号とレッスン番号
- 何をしようとしていたか
- エラー文をコピー&ペースト
- エラー画面のスクリーンショット