lesson-1_フロントエンドの準備

💻 Web アプリケーションを設定する

このセクションでは、Webサイトの構築を通して、WebアプリとXummの連携方法について学びます。

実装は下記をイメージしてください。

Webアプリ（フロントエンド）↔︎ Xumm（ウォレット）↔︎ XRP Ledger（バックエンド）

それでは、始めましょう 🚀

🍽 Git リポジトリをあなたの GitHub にフォークする

まだGitHubのアカウントをお持ちでない方は、こちら の手順に沿ってアカウントを作成してください。

GitHubのアカウントをお持ちの方は、下記の手順に沿ってプロジェクトの基盤となるリポジトリをあなたのGitHubにフォークしましょう。

1. こちらからunchain-tech/XRPL-NFT-Makerリポジトリにアクセスをして、ページ右上のForkボタンをクリックします。

2. Create a new forkページが開くので、「Copy the main branch only」という項目にチェックが入っていることを確認します。

3. 設定が完了したらCreate forkボタンをクリックします。あなたのGitHubアカウントにXRPL-NFT-Makerリポジトリのフォークが作成されたことを確認してください。

それでは、フォークしたリポジトリをローカル環境にクローンしましょう。

まず、下図のように、CodeボタンをクリックしてSSHを選択し、Gitリンクをコピーしましょう。

ターミナルで任意のディレクトリに移動し、先ほどコピーしたリンクを貼り付け、下記を実行してください。

git clone コピーした_github_リンク

ターミナル上でXRPL-NFT-Makerに移動して下記を実行しましょう。

npm install

npmコマンドを実行することで、JavaScriptライブラリのインストールが行われます。

次に、下記を実行してみましょう。

npm start

次のような形でフロントエンドが確認できれば成功です。

例)ローカル環境で表示されているWebサイト

これからフロントエンドの表示を確認したい時は、XRPL-NFT-Makerディレクトリ上で、npm startを実行します。これからも必要となる作業ですので、よく覚えておいてください。

ターミナルを閉じるときは、以下のコマンドが使えます ✍️

• Mac: ctrl + c
• Windows: ctrl + shift + w

✅ テストスクリプトについて

このプロジェクトには、これから実装を行うNftMinterコンポーネントのテストスクリプトがcomponents/NftMinter/index.test.jsxとして格納されています。これは、期待するMVPの機能が実装されているかをテストする内容となっており、テストフレームワークとしてJestを、UIコンポーネントのテストを行うためにTesting Libraryを活用しています。XRP Ledgerのネットワークとやり取りを行う機能をモック（模擬）しているため、ブラウザ上で実際に動作確認を行うよりもより迅速に機能テストを行うことが可能です。ただし、あくまでも模擬的なので、コンポーネントの実装ができたら実際にXRP Ledgerネットワークを使用した動作確認をブラウザ上で行いましょう！

モック（Mock） モック（Mock）という言葉は、実際のものや状況を「模倣」するものを指します。

テストにおいては、実際のオブジェクトや関数の代わりに使用される模擬的なオブジェクトや関数を指します。今回のプロジェクトでは、コード内で使用する外部モジュールの機能をモックして仮の動作を定義しています。これにより、テスト対象のコードとそれ以外の部分（コンポーネントの外から渡されるデータや外部モジュールなど）を分離し、テスト対象のコードのみを独立してテストできるようになります。

モックの具体的な定義は、src/__test__/__mock__/内の各ファイルで確認できます。

🙋‍♂️ 質問する

ここまでの作業で何かわからないことがある場合は、Discordの#xrplで質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨

1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット