E-Bikes Lightning Web Components サンプルアプリケーション

This is Localized Repository. Original is here.

https://github.com/trailheadapps/ebikes-lwc

E-BikesはLightning Web Componentsを使ってどの様にアプリケーションを開発するかを表したサンプルのアプリケーションです。E-Bikesか架空の自転車メーカーで、このアプリケーションはリッチーなユーザ体験を提供し、自社の製品及びリセラーの注文を管理するのに役立ちます。

目次

• インストール手順

  • スクラッチ組織を使ってE-Bikesをインストール
  • ロック解除済みパッケージを使ってE-Bikesをインストール

• 追加のインストール手順

• アプリケーションの説明

インストール手順

E-Bikesのインストールには2種類の方法があります:

• スクラッチ組織の利用: おすすめのインストールオプションです。アプリ及びコードを体験したい開発者はこのオプションを使用して下さい。
• ロック解除済みパッケージの利用: このオプションはサンプルアプリケーションをローカルの開発環境を使わずに、誰でも体験することができます。

スクラッチ組織を使ったE-Bikesのインストール

1. クイックスタート: Lightning Web Components Trailheadプロジェクトに従って、環境をセットアップします。このステップには以下が含まれます:

• Trailhead PlaygroundでのDev Hubの有効化
• Salesforce CLIのインストール
• Visual Studio Codeのインストール
• Visual Studio Code Salesforce extensionsのインストール(Lightning Web Components extension を含む)

2. まだ実施していない場合には, Hub組織への認証とエイリアスを設定します(以下のコマンドでは myhuborg):

sfdx force:auth:web:login -d -a myhuborg

3. リポジトリをクローンします:

git clone https://github.com/trailheadapps-jp/ebikes-lwc-jp
cd ebikes-lwc-jp

4. スクラッチ組織を作成し、エイリアスを設定します(以下のコマンドではebikes):

sfdx force:org:create -s -f config/project-scratch-def.json -a ebikes

5. スクラッチ組織にアプリケーションをプッシュします:

sfdx force:source:push

6. ebikes 権限セットをデフォルトユーザにアサインします:

sfdx force:user:permset:assign -n ebikes

7. サンプルデータをロードします:

sfdx force:data:tree:import --plan ./data/sample-data-plan.json

8. スクラッチ組織を開きます:

sfdx force:org:open

9. 設定から、テーマおよびブランド設定に行き、Lightning Liteテーマを有効化します。

10. アプリケーションランチャーからE-Bikesアプリケーションを選択します。

ロック解除済みパッケージを使ったE-Bikesのインストール

1. サインアップ からDeveloper Edition (DE) 組織を取得します。

2. 私のドメインをDE組織で有効化します。手順についてはこちらを参考にして下さい。

3. このリンクをクリックしてE-Bikesのロック解除済みパッケージをDE組織にインストールします。

4. すべてのユーザにインストールを選択します。

5. 設定から、テーマおよびブランド設定に行き、Lightning Liteテーマを有効化します。

6. 取引先のデータをインポートします:

• こちらをクリックしてaccounts.csv ファイルへアクセスします。ブラウザ上で右クリックし、ファイルをaccounts.csvとして保存します。
• 設定からデータインポートとクイック検索ボックスに入力し、データインポートウィザードを選択します。
• ウィザードを起動するをクリックします。
• 標準オブジェクトタブをクリックし取引先と取引先責任者をクリックし、新規レコードを追加をクリックします。
• 保存したaccounts.csvファイルをアップロードエリアにドロップします。
• 次へ、次へとクリックし、インポート開始をクリックします。

7. 製品ファミリーデータのインポート:

• こちらをクリックしてproduct_families.csv ファイルへアクセスします。ブラウザ上で右クリックし、ファイルをproduct_families.csvとして保存します。
• 設定からデータインポートとクイック検索ボックスに入力し、データインポートウィザードを選択します。
• ウィザードを起動するをクリックします。
• カスタムオブジェクトタブをクリックし製品ファミリーをクリックし、新規レコードを追加をクリックします。
• 保存したproduct_families.csvファイルをアップロードエリアにドロップします。
• 次へ、次へとクリックし、インポート開始をクリックします。

8. 製品データのインポート:

• こちらをクリックしてproducts.csv ファイルへアクセスします。ブラウザ上で右クリックし、ファイルをproducts.csvとして保存します。
• 設定からデータインポートとクイック検索ボックスに入力し、データインポートウィザードを選択します。
• ウィザードを起動するをクリックします。
• カスタムオブジェクトタブをクリックし製品をクリックし、新規レコードを追加をクリックします。
• 新規レコードを追加 メニューの中の 製品ファミリー参照項目を設定するためにファイルのどの製品ファミリー項目を照合しますか? ドロップダウンメニューから製品ファミリー 名前を選択します。
• 保存したproducts.csvファイルをアップロードエリアにドロップします。
• 次へ、次へとクリックし、インポート開始をクリックします。

9. アプリケーションランチャーからE-Bikesアプリケーションを選択します。

追加のインストール手順

このリポジトリトリには、モダンなWeb開発ツールをSalesforce開発のプロセスに統合したり、継続的インテグレーション及び継続的デプロイメントプロセスを実施するのに役立ついくつかのファイルが含まれています。

コードフォーマット

Prettier はコードベースを横断して統一したフォーマットを保証するコードフォーマッタです。PrettierをVisual Studio Codeと一緒に使うにはこのextensionをVisual Studio Code Marketplaceからインストールします。リポジトリの一部として提供されている .prettierignore と .prettierrc ファイルがPrettierフォーマッタの挙動をコントロールします。

コードのlint

ESLint は構文エラーや誤った構成要素を見つける一般的なJavaScriptのlintツールです。ESLintをVisual Studio Codeと一緒に使うにはこのextensionをVisual Studio Code Marketplaceからインストールします。 リポジトリの一部として提供されている .eslintignore ファイルで、Lighning Web Components開発において不必要なファイルへのlintプロセスを除外します。

Pre-commit hook

リポジトリにはgit commit による変更のたびに、pre-commit hookによってPrettierおよびESLintを動作させコードフォーマット及びlintを行うための package.json ファイルが含まれています。

フォーマット及びlintをpre-commit hookで動作させる設定を行います:

1. まだ実施していない場合にはNode.jsをインストールします。
2. npm install をプロジェクトルートフォルダで実行し、ESLint及びPrettierモジュールをインストールします (注意: MacユーザはXcode command line toolsがインストールされていることをこのコマンドの実行前に確認してください)。

Prettier及びESLintは自動的にcommitによる変更を行うたびに実行されます.lintエラーが検出された場合にcommitは失敗します.また以下のコマンドでフォーマット及びlintをコマンドラインから実行できます (package.jsonで完全なリストを確認できます):

npm run lint:lwc
npm run prettier

アプリケーションの説明

製品エクスプローラー

1. 製品エクスプローラー タブをクリックします。

2. 左側にあるフィルターでコンポーネントでリストをフィルタリングします。

3. タイル上のリストの製品をクリックして製品カードの詳細を確認します。

4. 製品カードの拡張アイコンをクリックして、製品レコードページへ遷移します。

製品レコードページ

1. 製品レコードページでは類似製品コンポーネントの機能があります。

2. 詳細を見るボタンをクリクして、類似製品のレコードページへ遷移します。

代理店注文

1. 代理店注文タブの矢印メニューをクリックし新規代理店注文をクリックします。

2. ホイールワークなどの取引先を選択し保存を押します。

3. 右側の製品リストから中央のグレーのパネルへ製品をドラッグします。製品が注文明細として自動的に注文に追加されます。

4. 小(S), 中(M), 大(L)などの注文の数量などを変更し、保存ボタンをクリックします(チェックアイコン).

5. 3 及び 4 のステップを繰り返し、製品を注文に追加します。

6. 注文アイテムのタイルの上にマウスを置き、ごみ箱アイコンをクリックして、注文から注文明細を削除します。

取引先レコードページ

取引先レコードページでは取引先地図コンポーネントが取引先の所在地を地図上に表示する機能があります。