イントロ。 JavaScript を使用した Cardano ウォレット チェッカーの Web 構築へ。
このプロジェクトは私の最初の Web3 アプリケーションであり、Yoroi ウォレットを通じて Cardano ブロックチェーンに接続します。これは実際には非常にシンプルで、ウォレットの残高を確認するだけの方法ですが、今後多くのエキサイティングなプロジェクトの始まりを示します。このチュートリアルを進めながら、私の学習プロセスを皆さんと共有したいと思います。
?私たちは何を構築しているのでしょうか?
始める前に、何を作成しているのかを明確にしておきましょう。これは、次のことを可能にするシンプルかつシンプルなツールです。
- Cardano ウォレットの残高を覗いてみましょう (もちろん合法的に! ?)
- Yoroi ウォレットに接続します
- ADA の残高を表示
?必要なもの
JavaScript の基本的な知識 (console.log("hello world") ができれば大丈夫です!)
- - テキスト エディタ (VS Code、Sublime、または冒険したい場合はメモ帳でも)
- - Yoroi ウォレット拡張機能がインストールされています (テストのためにこれが必要になります)
- - Blockfrost API キー (心配しないでください。取得方法は説明します) さあ、始めましょう!
ステップ 1: プロジェクトをセットアップする
コンピュータ上に CardanoWalletExplorer という名前の新しいフォルダーを作成します (または、ジャンク justyk という名前でも構いません)。コード エディターでフォルダーを開きます (Visual Studio Code を使用します)。
フォルダー内に 2 つのファイルを作成します:
Index.html と style.css
次に、index.html を開いてこれを貼り付けます:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cardano Wallet Explorer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Let's add some style to our creation. Inside the style.css file paste this in:<br>
</p>
<pre class="brush:php;toolbar:false">:root {
--primary-color: #0033ad;
--secondary-color: #2a71d4;
--accent-color: #17d1aa;
--background-color: #f8faff;
--card-background: #ffffff;
--text-primary: #1a202c;
--text-secondary: #4a5568;
--border-color: #e2e8f0;
--shadow: 0 4px 6px rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--background-color);
color: var(--text-primary);
line-height: 1.5;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.container {
background: var(--card-background);
border-radius: 1.5rem;
box-shadow: var(--shadow);
width: 100%;
max-width: 800px;
overflow: hidden;
}
.app-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 2rem;
text-align: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.logo i { font-size: 2rem; }
h1 { font-size: 1.8rem; font-weight: 600; }
.subtitle { opacity: 0.9; }
.content { padding: 2rem; }
.search-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.search-box {
display: flex;
gap: 1rem;
width: 100%;
max-width: 600px;
}
#wallet-search {
flex: 1;
padding: 0.875rem 1rem;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 0.95rem;
transition: 0.3s ease;
}
#wallet-search:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(23, 209, 170, 0.1);
}
button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
border: none;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: 0.3s ease;
}
#search-button {
background: var(--accent-color);
color: white;
}
#search-button:hover {
background: #15bea0;
transform: translateY(-2px);
}
.divider {
width: 100%;
max-width: 600px;
text-align: center;
position: relative;
color: var(--text-secondary);
}
.divider::before,
.divider::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 2rem);
height: 1px;
background: var(--border-color);
}
.divider::before { left: 0; }
.divider::after { right: 0; }
.connect-button {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 1rem 2rem;
}
.connect-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.wallet-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.info-card {
background: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 1.5rem;
transition: 0.3s ease;
}
.info-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--text-secondary);
}
.card-header i {
font-size: 1.25rem;
color: var(--primary-color);
}
.card-content {
font-size: 0.95rem;
color: var(--text-primary);
word-break: break-all;
}
.app-footer {
text-align: center;
padding: 1.5rem;
background: var(--background-color);
color: var(--text-secondary);
font-size: 0.9rem;
}
.app-footer a {
color: var(--primary-color);
text-decoration: none;
}
.app-footer a:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
body {
padding: 1rem;
}
.container {
border-radius: 1.5rem;
}
.app-header {
padding: 1.5rem;
}
.content {
padding: 1.5rem;
}
.search-box {
flex-direction: column;
}
button {
width: 100%;
justify-content: center;
}
.wallet-info {
grid-template-columns: 1fr;
}
}
ステップ 2: Blockfrost API キーを取得するには?
ウォレットの残高を取得するには、Cardano ブロックチェーンとの対話を可能にする Blockfrost が必要になります。 API キーを取得する方法は次のとおりです:
- Blockfrost.io にアクセスしてサインアップします。
- ログインしたら、[新しいプロジェクトの作成] をクリックします。
- 実際の ADA にはメインネットを選択するか、テストにはテストネットを選択します。
- プロジェクトが作成されると、API キーを取得します。
ステップ 3: オペレーションの頭脳 ?
ここからは楽しい部分ですが、すべてを機能させる作業です。作成したフォルダーに script.js という名前のファイルを作成します。
function checkYoroiInstalled() {
return window.cardano && window.cardano.yoroi;
}
?この関数は、Yoroi ウォレット拡張機能がブラウザにインストールされているかどうかを確認します。 Window.cardano は、Yoroi などの Cardano ウォレットによって公開されるオブジェクトです。これが存在するかどうか、および window.cardano.yoroi が利用可能かどうかを確認して、Yoroi ウォレットがインストールされていることを確認します。
両方が true の場合、関数は true を返します。それ以外の場合は false を返します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cardano Wallet Explorer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Let's add some style to our creation. Inside the style.css file paste this in:<br>
</p>
<pre class="brush:php;toolbar:false">:root {
--primary-color: #0033ad;
--secondary-color: #2a71d4;
--accent-color: #17d1aa;
--background-color: #f8faff;
--card-background: #ffffff;
--text-primary: #1a202c;
--text-secondary: #4a5568;
--border-color: #e2e8f0;
--shadow: 0 4px 6px rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--background-color);
color: var(--text-primary);
line-height: 1.5;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.container {
background: var(--card-background);
border-radius: 1.5rem;
box-shadow: var(--shadow);
width: 100%;
max-width: 800px;
overflow: hidden;
}
.app-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 2rem;
text-align: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.logo i { font-size: 2rem; }
h1 { font-size: 1.8rem; font-weight: 600; }
.subtitle { opacity: 0.9; }
.content { padding: 2rem; }
.search-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.search-box {
display: flex;
gap: 1rem;
width: 100%;
max-width: 600px;
}
#wallet-search {
flex: 1;
padding: 0.875rem 1rem;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 0.95rem;
transition: 0.3s ease;
}
#wallet-search:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(23, 209, 170, 0.1);
}
button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
border: none;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: 0.3s ease;
}
#search-button {
background: var(--accent-color);
color: white;
}
#search-button:hover {
background: #15bea0;
transform: translateY(-2px);
}
.divider {
width: 100%;
max-width: 600px;
text-align: center;
position: relative;
color: var(--text-secondary);
}
.divider::before,
.divider::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 2rem);
height: 1px;
background: var(--border-color);
}
.divider::before { left: 0; }
.divider::after { right: 0; }
.connect-button {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 1rem 2rem;
}
.connect-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.wallet-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.info-card {
background: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 1.5rem;
transition: 0.3s ease;
}
.info-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--text-secondary);
}
.card-header i {
font-size: 1.25rem;
color: var(--primary-color);
}
.card-content {
font-size: 0.95rem;
color: var(--text-primary);
word-break: break-all;
}
.app-footer {
text-align: center;
padding: 1.5rem;
background: var(--background-color);
color: var(--text-secondary);
font-size: 0.9rem;
}
.app-footer a {
color: var(--primary-color);
text-decoration: none;
}
.app-footer a:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
body {
padding: 1rem;
}
.container {
border-radius: 1.5rem;
}
.app-header {
padding: 1.5rem;
}
.content {
padding: 1.5rem;
}
.search-box {
flex-direction: column;
}
button {
width: 100%;
justify-content: center;
}
.wallet-info {
grid-template-columns: 1fr;
}
}
この関数は、ADA の残高を使いやすい方法でフォーマットします。
Cardano は最小単位として lovelace を使用するため (1 ADA = 1,000,000 lovelace)、1,000,000 で割って ADA に変換する必要があります。
また、残高が小数点以下 6 桁で表示されるようにするか (1.234567 ADA など)、残高が無効または空の場合は「0.000000」を返します。
function checkYoroiInstalled() {
return window.cardano && window.cardano.yoroi;
}
Fetch API を使用して Blockfrost への GET リクエストを行っています。 Blockfrost は、Cardano ブロックチェーンと対話するための API を提供します。承認用の API キーを使用して、特定のウォレット アドレスのエンドポイントに GET リクエストを送信します。この関数は、Blockfrost の API にリクエストを送信することで、特定のウォレット アドレスの残高を取得します。
応答が成功した場合、JSON データを解析し、そのアドレスの ADA の数量を返します。
エラーがある場合 (無効なアドレスや API の問題など)、エラーがスローされ、コンソールに記録されます。エンドポイント URL には、確認したいウォレット アドレスが含まれています。 checkWalletBalance 関数の YOUR_API_KEY プレースホルダーを API キーに置き換えてください。
function formatBalance(lovelaceBalance) {
if (!lovelaceBalance || isNaN(lovelaceBalance)) {
return "0.000000";
}
const adaBalance = parseFloat(lovelaceBalance) / 1_000_000;
return adaBalance.toFixed(6);
}
- この UI 更新機能は、ウォレットのアドレスと残高を使用してユーザー インターフェイス (UI) を更新します。
- アドレスを短縮して最初の 8 文字と最後の 8 文字を表示し (読みやすくするため)、「ウォレット アドレス」カードに表示します。
- formatBalance 関数を使用して残高をフォーマットし、「ウォレット残高」カードに表示します。
- 住所テキストの上にカーソルを置くと、完全な住所を示すツールチップも設定されます。
**Fetching Wallet Balance Using Blockfrost API
async function checkWalletBalance(address) {
try {
const API_KEY = 'YOUR_API_KEY';
const response = await fetch(`https://cardano-mainnet.blockfrost.io/api/v0/addresses/${address}`, {
headers: {
'project_id': API_KEY
}
});
if (!response.ok) {
throw new Error('Invalid address or API error');
}
const data = await response.json();
return data.amount[0].quantity;
} catch (error) {
console.error('Error fetching balance:', error);
throw error;
}
}
このコードは、HTML 要素にイベント リスナーをアタッチします。
「ヨロイウォレットに接続」ボタンをクリックするとconnectWallet関数が呼び出されます。
「残高確認」ボタンをクリックすると、handleWalletSearch 関数が呼び出されます。
ユーザーがウォレットアドレス入力フィールドで「Enter」キーを押すと、残高チェックもトリガーされます。
おめでとうございます、やったね！ ?
これで、Web3 のマスターにまた一歩近づきました! ?このプロジェクトは技術的な成果だけでなく、ブロックチェーン開発の広大な世界へのエキサイティングな一歩でもありました。 ?
Yoroi ウォレットにシームレスに接続し、残高を確認し、ブロックチェーンの力をすぐに活用できるようになりました。
?テストの時間です!
- vs code に liveserver 拡張機能をインストールし、「ライブ開始」ボタンをクリックして実行されていることを確認します。
- これにより、ブラウザで HTML ファイルが開きます
- ぜひ試してみてください!
?このプロジェクトから学んだこと
- Yoroi のようなブロックチェーン ウォレットがどのように機能し、分散型ネットワークと相互作用するかについてしっかりと理解しました。
- window.cardano API を使用してブラウザ ウォレットを Web アプリに安全に接続するプロセスを習得しました。
- Blockfrost API を探索して、Cardano ブロックチェーンからウォレットの残高とアドレスの詳細を取得しました。
- スムーズなユーザー エクスペリエンスを保証するための、非同期と待機、エラー処理、データ形式に関する知識が強化されています。
- リアルタイムのブロックチェーン データに基づいて Web ページ要素を動的に更新する方法を学びました。
- 暗号通貨単位を Lovelace から ADA に変換し、ユーザーが読みやすいようにフォーマットする仕組みを理解しました。
- 中断を防ぐために、API リクエストとユーザー入力に対する堅牢なエラー処理の重要性を認識しました。
- ウォレットの構造、アドレス管理、ブロックチェーン上のトランザクション表現について貴重な洞察を得ることができました。
- ユーザー インタラクションを強化するために、読み込みスピナー、ツールヒント、アラートなどの機能を実装しました。
- エッジケースとデバッグの課題に取り組み、分析スキルとコーディングスキルを強化しました。
?レベルアップのアイデア
このプロジェクトは、ブロックチェーン開発の世界への足がかりです。これをさらに進めるためのアイデアをいくつか紹介します:
- ウォレット アドレスの過去の取引を表示する取引履歴ビューアを追加します。
- マルチウォレットのサポートを実装し、ユーザーが Yoroi、Nami、Eternal などのウォレットを切り替えられるようにします。
- 送受信トランザクションの概要など、ウォレットのアクティビティの傾向を表示するダッシュボードを作成します。
- リアルタイムの価格データを統合して、USD や EUR などの法定通貨で ADA 残高を表示します。
- トランザクション構築機能を統合することで、アプリから ADA を直接送信できるようにします。
- ダークモードの切り替えを追加して、視覚的に魅力的でアクセスしやすいデザインにします。
- モバイル デバイスとの互換性を確保するためにインターフェイスの応答性を高めます。
- 無効なウォレット アドレスなどの問題の解決をユーザーに案内する、より適切なエラー メッセージを組み込みます。
?貢献方法
このプロジェクトは私にとって Web3 への最初のステップであり、最高の人材から学びたいと思っています。あなたの経験、洞察、提案は、このプロジェクトをより良いものにすると同時に、開発者としての私の成長にも役立ちます。貢献する方法は次のとおりです:
- GitHub でプロジェクトをフォークし、新機能や改善を追加します。
- ツールの使用中に発生したバグや問題を報告し、解決策を提案します。
- GitHub リポジトリで機能リクエストやディスカッションを開いて機能拡張を提案します。
- 追加する新機能については詳細なドキュメントを作成し、他の人が簡単に使用したり構築したりできるようにします。
✨ 考慮すべき新機能
- ウォレット アドレスの共有とスキャンを簡単にするための QR コード サポートを追加します。
- 残高の更新や取引の確認などのイベントの通知を実装します。
- 初心者向けにブロックチェーンの基本を説明する教育セクションを含めます。
- 頻繁にウォレットを使用するための実績や新機能の探索など、ゲーム化された要素を導入します。
- ステーキング報酬と委任ステータスを表示するステーキング機能を開発します。
構築と革新を続けましょう。あなたの貢献と創造力がこのツールの未来を形作ることができます。 ?
?助けが必要ですか?
行き詰まった?バグが見つかりましたか?チャットしたいですか?以下にコメントをドロップするか、Twitter で私を見つけてください。
覚えておいてください、私たちは皆どこかから始めています、そして唯一の愚かな質問はあなたが尋ねなかった質問です!
ブロックチェーン探索者の皆さん、コーディングを楽しんでください! ?
以上がイントロ。 JavaScript を使用した Cardano ウォレット チェッカーの Web 構築へ。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1655
14
1413
52
1306
25
1252
29
1226
24
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
javascriptの分解：それが何をするのか、なぜそれが重要なのか
Apr 09, 2025 am 12:07 AM
JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
誰がより多くのPythonまたはJavaScriptを支払われますか？
Apr 04, 2025 am 12:09 AM
スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。
Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？
または：
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？
Apr 04, 2025 pm 05:36 PM
この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。
JavaScriptの進化：現在の傾向と将来の見通し
Apr 10, 2025 am 09:33 AM
JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？
Apr 04, 2025 pm 05:09 PM
同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...
JavaScriptエンジン：実装の比較
Apr 13, 2025 am 12:05 AM
さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
フロントエンド開発でVSCodeと同様に、パネルドラッグアンドドロップ調整機能を実装する方法は？
Apr 04, 2025 pm 02:06 PM
フロントエンドのVSCodeと同様に、パネルドラッグアンドドロップ調整機能の実装を調べます。フロントエンド開発では、VSCODEと同様のVSCODEを実装する方法...
