見出し画像

Create an NFT Mint Farcaster Frame(NFT Mint Farcasterフレームの作成)

勉強のため、以下の記事を簡易翻訳しています。

このガイドでは、ユーザーがどのようなEVMチェーン上でも直接NFTをミントできるFarcaster Frameの作成方法をご紹介します。

GitHubレポへのリンクはこちらです:
https://github.com/thirdweb-dev/thirdweb-engine-farcaster-frame?ref=blog.thirdweb.com

NFTミント契約の展開
Farcaster Frameのセットアップに入る前に、フレームに追加できるNFTスマートコントラクトが必要です。

thirdwebを使用すると、事前に構築された監査済みのスマートコントラクトを任意のEVMチェーンにデプロイできます。このガイドでは、NFT Drop(ERC-721)スマートコントラクトをBaseにデプロイします。

このガイドを使ってスマートコントラクトをデプロイしてください:

https://blog.thirdweb.com/guides/how-to-deploy-a-smart-contract-to-base-network-testnet-coinbase-l2/

はじめに
1.NeynarのAPIキーを取得します。

2.thirdweb Engine APIキーを取得し、Engineインスタンスを作成します。

3.サードウェブエンジンのURL、ウォレット、アクセストークンを取得します。config.tsファイルをこのように設定します:

また、.env.exampleファイルも用意されているので、より早く使い始めることができる:

https://github.com/thirdweb-dev/thirdweb-engine-farcaster-frame/blob/main/.env.example?ref=blog.thirdweb.com

4.<next_js_image_path>をあなたのコードで使いたいものに置き換える。

Mint APIに関する各パーツはこちら:
https://github.com/thirdweb-dev/thirdweb-engine-farcaster-frame/blob/main/src/pages/api/mint.ts?ref=blog.thirdweb.com

通常はpublicフォルダにあります。

以下はその手順です:

始める
mint(Neynar)にいいね!&リキャストする
ミントNFT(サードウェブエンジン)
ミントおめでとうございます
何か失敗したときのためのバックアップHTMLもあります:

5.Farcaster Frameがレスポンスを送信する公開URLをここで変更します:

https://github.com/thirdweb-dev/thirdweb-engine-farcaster-frame/blob/main/src/utils/compute-html.ts?ref=blog.thirdweb.com#L17-L30

6.Neynar APIキー、サードウェブエンジン、設定ファイルなど、すべてのセットアップが完了したら、準備は完了です!また、api/mintをローカルでテストしてください。

7.Farcaster Frame Validatorにアクセスして、ユーザーがあなたのフレームをどのように操作するかをテストしてください: https://warpcast.com/~/developers/frames

キャストをプロダクションに公開すると、どのように見えるかを見ることができます。

それでは、お楽しみください!

詳細はこちら
thirdweb Frame APIは、シンプルなフェッチリクエストでオンチェーン取引を送信するためにthirdweb Engineを使用します。

thirdweb Engineを使用すると、バックエンドのウォレットとnonce管理、ガス料金の最適化、自動再試行などにより、アプリを何百万人ものユーザーに拡張することができます!

thirdweb Engineを始めよう:

https://thirdweb.com/engine?ref=blog.thirdweb.com

いいなと思ったら応援しよう!