build onchain apps

オンチェーンアプリテンプレートを作成する（⛵️）

Build OnchainアプリテンプレートでOnchainの創造性を加速します。 ☕☕️

オンチェーンアプリテンプレート（別名ボート⛵️）を構築すると、最初のアプリのセットアップとOnchainコンポーネントをWeb2インフラストラクチャと統合する手間を節約できます。 ？

これを行い、Onchainアプリを構築する際に行わなければならない早期の決定を合理化するために意見のあるアプローチをとることでこれを行います。

あなたがハッカソンの参加者であろうと、次の大きなものを構築しようとしている野心的な起業家であろうと、このテンプレートはあなたを念頭に置いて設計されています。 ？

箱から出して？ ？

• next.jsを使用したプログレッシブWebアプリサポート
• ベースを介したイーサリアムL2サポート？
• スマートウォレットを使用した簡単なアカウント作成
• WagmiとViemでの造りと支払いの経験のためのライブ例とドキュメント
• Tailwind CSSを使用した最新のスタイリングベストプラクティス？
• 糸くず、フォーマット、およびテストでの簡単なメンテナンス
• fefume.jsを使用したWebバイタルパフォーマンスメトリックに関する洞察？
• Foundryによるスマートコントラクトの展開
• ANVILを使用したスマートコントラクトをテストするためのローカルテストネットノードのサポート。 ？

はじめる

ステップ1：環境変数のセットアップ

• Coinbase開発者プラットフォームからベースRPC URLを取得し、 .env.localファイルに割り当てます

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE

ステップ2：Onchainアプリをインストールして実行します

 # Install
yarn

# Run
yarn dev

開発する

パッケージをフォーマットしてリントするには、これらのクイックステップをローカルで使用します。

 # Format fix
yarn format

# Lint fix
yarn lint

ABIの更新

ボートを使用してプロジェクトを作成した後、これらはスマートコントラクトを更新するときに興味のあるフォルダーとファイルです。

 < project-name >
├── contracts
│   ├── src
│   │   └── BuyMeACoffee.sol          ← smart contract code
│   └──out/BuyMeACoffee.sol
│       └── BuyMeACoffee.json         ← output from " forge build " which contains the updated ABI
│
└── web/app/buy-me-coffee
    └── _contracts
        ├── BuyMeACoffeeABI.ts             ← copy of ABI from contracts/out/BuyMeACoffee.json
        └── useBuyMeACoffeeContract.ts     ← deploy address

更新されたABIをフロントエンドコードにインポートします

スマート契約コードを更新した後、 contractsフォルダーでforge build実行します。これによりcontracts/outディレクトリにJSONが作成されます。

出力JSONには追加情報が含まれています。そのJSONオブジェクトからのabiプロパティのみが必要です。 jqを使用して、 abiプロパティのみを抽出しましょう

 # from the "contract" folder

jq .abi out/BuyMeACoffee/BuyMeACoffee.json

jqの出力を取り、 web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.tsを更新します

最初のステップで完了！

スマートコントラクトを展開し、フロントエンドコードを更新します

すべての環境変数がcontracts/.envで四角になっていることを確認し、蛇口からベースのセポリアETHを入手してください！

スマートコントラクトを展開するには、

 # from the "contract" folder

source .env && forge script script/LocalContract.s.sol:LocalContractScript  --broadcast --rpc-url https://sepolia.base.org

長い出力で、 Contract Addressの値を見つけます。

その値をコピーして、 web/app/buy-me-coffee/_contracts/useBuyMeACoffeeContract.ts新しいアドレスで更新します。

アウトロ

これは、よりエラーが発生しやすい手順の1つです。段階的に進んでください。

新しいスマート契約展開の場合は、既存のBuyMeACoffee契約を展開して契約アドレスを交換してみてください。その後、 BuyMeACoffee.sol更新して、フロントエンドコードで新しいABIを取得してください。

将来、このステップを簡単にする方法を考えています！ハッピーハッキング！

ベースセポリアにガスが必要ですか？ ？

ここで無料のテストネット資金を入手する方法：https：//docs.base.org/tools/network-faucets/。

コミュニティ☁️？ ☁☁️

より多くのボート関連のコンテンツについては、次の場所をチェックしてください。

• プロジェクトの更新については、@zizzamia（x、Farcaster）をフォローしてください
• Onchainkit Warpcastチャンネルでディスカッションに参加してください

著者

• @zizzamia（x）
• @sneh1999（x）
• @wespickett（x）
• @mochikuan（x）
• @renanmav（x）
• @robpolak（x）
• @kyhyco
• @cnasc（warpcast）
• @arsood（x）
• @eragon512（x）

ライセンス

このプロジェクトはMITライセンスに基づいてライセンスされています - 詳細については、license.mdファイルを参照してください