クイックセットアップ

クイックセットアップは、WKNDアプリをインストールしてリモートSPAとして実行し、AEM SPA Editorを使用して作成する方法を示す、迅速なウォークスルーです。

クイックセットアップでは、このチュートリアルの終了状態に直接移動します。

クイックセットアップのビデオウォークスルー

前提条件

このチュートリアルでは、次の項目が必要です。

このチュートリアルでは、次の点を前提としています。

  • IDEとしてのMicrosoft® Visual Studio Codeas
  • ~/Code/wknd-appの作業ディレクトリ
  • http://localhost:4502でのAEM SDKのオーサーサービスとしての実行
  • パスワードadminを使用したローカルadminアカウントでのAEM SDKの実行
  • http://localhost:3000でのSPAの実行

AEM SDKクイックスタートの起動

デフォルトのadmin/admin資格情報を使用して、AEM SDK Quickstartをポート4502にダウンロードし、インストールします。

  1. 最新のAEM SDKのダウンロード

  2. AEM SDKを~/aem-sdkに解凍します。

  3. AEM SDK Quickstart Jarの実行

    $ java -jar aem-sdk-quickstart-xxx.jar
    
    # Provide `admin` as the admin user's password
    

AEM SDKはhttp://localhost:4502で起動し、自動的に起動します。 次の資格情報を使用してログインします。

  • ユーザー名: admin
  • パスワード: admin

WKNDサイトパッケージをダウンロードしてインストールする

このチュートリアルは、 WKND 0.3.0+の​プロジェクトに依存しています(コンテンツ用)。

  1. の最新バージョンをダウンロードする aem-guides-wknd.all.x.x.x.zip
  2. http://localhost:4502/crx/packmgrにあるAEM SDKのパッケージマネージャーに、admin資格情報を使用してログインします。
  3. ____ 手順1でダウンロ aem-guides-wknd.all.x.x.x.zip ードしたをアップロードします。
  4. エントリaem-guides-wknd.all-x.x.x.zipの​​をインストール」ボタンをタップします

WKND App SPAパッケージのダウンロードとインストール

簡単なセットアップを実行するために、チュートリアルの最終的なAEM設定とコンテンツを含むAEMパッケージが用意されています。

  1. ダウンロード
  2. ダウンロード
  3. http://localhost:4502/crx/packmgrにあるAEM SDKのパッケージマネージャーに、admin資格情報を使用してログインします。
  4. ____ 手順1でダウンロ wknd-app.all.x.x.x.zip ードしたをアップロードします。
  5. エントリwknd-app.all.x.x.x.zipの​​をインストール」ボタンをタップします
  6. ____ 手順2でダウンロ wknd-app.ui.content.sample.x.x.x.zip ードしたをアップロードします。
  7. エントリwknd-app.ui.content.sample.x.x.x.zipの​​をインストール」ボタンをタップします

WKNDアプリソースのダウンロード

Github.comからWKNDアプリのソースコードをダウンロードし、このチュートリアルで実行するSPAに対する変更を含むブランチを切り替えます。

$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql

SPAアプリケーションの起動

プロジェクトのルートから、SPA projects npmの依存関係をインストールし、アプリケーションを実行します。

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start

npm installの実行時にエラーが発生した場合は、次の手順を実行してください。

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start

SPAがhttp://localhost:3000で実行されていることを確認します。

AEM SPA Editorでのコンテンツのオーサリング

コンテンツをオーサリングする前に、AEMオーサー(http://localhost:4502)が左側に配置され、リモートSPA(http://localhost:3000)が右側に表示されるように、ブラウザーウィンドウを配置します。 この構成により、AEMソースのコンテンツに対する変更がSPAに即座に反映される方法を確認できます。

  1. AEM SDKオーサーサービスadminとしてログインします。
  2. サイト/WKND App > us > en​に移動します。
  3. WKNDアプリのホームページ​を編集
  4. 編集​モードに切り替えます。

ホームビューの固定コンポーネントのオーサリング

  1. テキスト「WKND Adventures」をタップして、固定タイトルコンポーネントをアクティブ化します(SPAのホームビューにハードコード化)。
  2. タイトルコンポーネントのアクションバーにある​レンチ​アイコンをタップします。
  3. タイトルコンポーネントの内容を変更して保存する
  4. http://localhost:3000上で実行中のSPAを更新し、変更が反映されていることを確認します。

ホームビューのコンテナコンポーネントのオーサリング

  1. WKNDアプリのホームページ​を編集中…
  2. SPA Editorのサイドバー(左側)を展開します。
  3. コンポーネント​アイコンをタップします。
  4. WKNDロゴの下、および固定タイトルコンポーネントの上にあるコンテナコンポーネントに、コンポーネントを追加、変更または削除します。
  5. http://localhost:3000上で実行中のSPAを更新し、変更が反映されていることを確認します。

動的ルートでのコンテナコンポーネントのオーサリング

  1. SPAエディターで​プレビュー​モードに切り替えます。
  2. Bali Surf Camp​カードをタップし、動的なルートに移動します。
  3. 旅程​の見出しの上にあるコンテナコンポーネントに対して、コンポーネントを追加、変更、削除します。
  4. http://localhost:3000上で実行中のSPAを更新し、変更が反映されていることを確認します。

WKND App Home page > Adventure の下の新しいAEMページには、対応するアドベンチャーのコンテンツフラグメントの名前と一致するAEMページ名が必要です。 これは、SPAのAEMページマッピングへのルートは、ルートの最後のセグメント(コンテンツフラグメントの名前)に基づいているからです。

バリデーターが

AEM SPA Editorで、制御可能な編集可能な領域を使用してSPAを強化する方法を簡単に理解できました。 興味がある場合は、残りのチュートリアルを確認して、必ず新規に開始してください。このクイックセットアップでは、ローカル開発環境がチュートリアルの最後の状態になっているからです。

このページ