Makeswiftを使ったノーコードでのNFTのミントサイトの構築について
※当記事は、こちらの記事を翻訳たものです。
このガイドでは、Next.jsアプリケーションを構築するためのノーコードツールであるMakeswiftを使用して、thridwebのNFT dropスマートコントラクトを搭載したNFT ミントのウェブアプリケーションを作成する方法を紹介します!
前提条件
このチュートリアルを確実に実行するために、以下のものを用意してください。
プロジェクトの作成
Makeswift の thirdweb テンプレート Github Repo にアクセスし、README.md ファイルにある Deploy をクリックして、ビルドを開始しましょう。
では、このレポに makeswift-thirdweb-example という名前を付けてみましょう。
Createをクリックし、完了を待ちます。
完了したら、Makeswiftのintegrationを追加します。
Makeswiftのセットアップページが表示されます。
プロジェクトの詳細を入力し、以下のPick a templateページでテンプレートを選びます。
こちらが、テンプレートの一覧のページになります。
Ecommerce - thirdwebを選択し（翻訳者実行時は「NFT Drop」）、「Use this siteを」クリックしてください。
時間がかかる場合がありますので、読み込みが完了するまでお待ちください。
その後、Vercelアプリケーションのデプロイが開始されます。
デプロイ完了後、リンクをクリックし、Webサイトを確認してください。
これで導入は完了です! さて、いよいよNFT Dropのウェブサイトをカスタマイズしてみましょう
ウェブサイトのカスタマイズ
NFT Dropのウェブサイトをカスタマイズするには、Makeswiftの先ほどのビルダーページにアクセスしてください。
左パネルのPagesの下にあるHomeページが表示されていることを確認してください。
次に、NFT Dropを収容するコンポーネント(下の画像の部分です)をクリックします。
クリックすると、右側にカスタマイズ可能なプロパティが表示されます。
そのうちの2つは、あなたのチェーンとコントラクトアドレスです。
コードを書かずにNFT Dropのコントラクトをデプロイする方法については、このNFT Dropガイドをご覧ください。
独自のコレクションのデプロイが完了したら、NFT DropウェブサイトのChainとContract Addressのプロパティを変更します。
Makeswiftがプレビューを更新し、以下のような状態になるはずです。
エレメントをクリックして内容を変更することで、NFT Dropのウェブサイトをさらにカスタマイズすることができます。
また、左のツールバーから要素をドラッグして、NFT Dropのウェブサイトにビジュアルを追加することも可能です。
設定ができましたら、こちらの「Publish」を選択します。
すると、下のように表示されるので、「View live」を選択します。
このように、「○○.vercel.app」にミントサイトがデプロイされました！
翻訳者の追記はここまでです。
まとめ
SDKを使用して独自のカスタムアプリケーションを作成する準備ができていない場合は、Makeswiftを使用して、thirdwebのNFTドロップコントラクトを搭載したNFTミンティングアプリケーションを作成およびデプロイすることができます。
ご質問がある場合は、Discordで私たちチームと直接お話しください。
Discussion