このたびは、 SPA Editor Adobe Experience Manager(AEM) の機能を使用できます。 このチュートリアルでは、架空のライフスタイルブランドである WKND 向けのAngularアプリケーションの実装について説明します。 angularアプリは、AEM SPA Editor を使用してデプロイされるように開発および設計されます。このエディターは、AngularコンポーネントをAEMコンポーネントにマッピングします。 AEMにデプロイされた完成したSPAは、AEMの従来のインライン編集ツールを使用して動的にオーサリングできます。
WKND SPAの実装
この複数パートから成るチュートリアルの目的は、AEMのSPAエディター機能と連携するAngularアプリケーションを実装する方法を開発者に教えることです。 実際のシナリオでは、開発アクティビティは、多くの場合、 フロントエンド開発者 および バックエンド開発者. AEM SPA Editor プロジェクトに参加するすべての開発者が、このチュートリアルを完了できると便利です。
このチュートリアルは、 AEMas a Cloud Service との後方互換性がある AEM 6.5.4 以降 および AEM 6.4.8 以降. SPAは、次を使用して実装されます。
チュートリアルの各パートの所要時間は 1~2 時間です。
チュートリアルコードはすべて、 GitHub.
この 最新のコードベース は、ダウンロード可能なAEMパッケージとして入手できます。
このチュートリアルを開始する前に、次の手順を実行する必要があります。
必須ではありませんが、基本的な理解を持つことは有益です 従来のAEM Sitesコンポーネントの開発.
このチュートリアルを完了するには、ローカルの開発環境が必要です。スクリーンショットとビデオは、Mac OS 環境で動作しているAEMas a Cloud ServiceSDK を使用して、 Visual Studio Code を IDE として使用します。 特に断りのない限り、コマンドとコードはローカルのオペレーティングシステムから独立している必要があります。
AEM as a Cloud Service は初めてですか? 以下を確認します。 AEM as a Cloud Service SDK を使用したローカル開発環境の設定に関する以下のガイド.
AEM 6.5 を初めて使用する場合 以下を確認します。 次のガイドでは、ローカル開発環境を設定します.
何を待ってる?!チュートリアルを開始するには、 SPA Editor Project この章では、AEMプロジェクトアーキタイプを使用してSPA Editor が有効なプロジェクトを生成する方法について説明します。
このチュートリアルのプロジェクトコードは、AEM as a Cloud Service用に構築されています。 プロジェクトコードをに後方互換性を持たせるため 6.5.4 以上 および 6.4.8 以上 いくつかの変更が加えられました。
この UberJar v6.4.4 は依存関係として含まれています:
<!-- Adobe AEM 6.x Dependencies -->
<dependency>
<groupId>com.adobe.aem</groupId>
<artifactId>uber-jar</artifactId>
<version>6.4.4</version>
<classifier>apis</classifier>
<scope>provided</scope>
</dependency>
という名前の追加の Maven プロファイル classic
を追加して、target AEM 6.x 環境のビルドを変更しました。
<!-- AEM 6.x Profile to include Core Components-->
<profile>
<id>classic</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
...
</profile>
この classic
プロファイルはデフォルトで無効になっています。 AEM 6.x でチュートリアルに従う場合は、 classic
Maven ビルドの実行を指示された場合は常に、次のプロファイルを使用します。
$ mvn clean install -PautoInstallSinglePackage -Pclassic
AEM実装用の新しいプロジェクトを生成する場合、常に最新バージョンの AEM Project Archetype を更新し、 aemVersion
をクリックして、AEMの意図したバージョンをターゲットにします。