AEM ヘッドレスの基本を学ぶ - GraphQL

ヘッドレス CMS シナリオで AEM の GraphQL API を使用してコンテンツを作成および公開し、外部アプリで使用する方法を示すエンドツーエンドのチュートリアルです。

このチュートリアルでは、AEM の GraphQL API とヘッドレス機能を使用して、外部アプリで表示されるエクスペリエンスを強化する方法について説明します。

このチュートリアルでは、以下のトピックを扱います。

• プロジェクト設定の作成
• データをモデル化するコンテンツフラグメントモデルの作成
• 以前に作成したモデルに基づいて、コンテンツフラグメントを作成します。
• 統合 GraphiQL 開発ツールを使用して、AEM のコンテンツフラグメントをクエリする方法を調べます。
• GraphQL クエリを AEM に保存または永続化するには：
• サンプル React アプリからの永続 GraphQL クエリの使用

前提条件

このチュートリアルに従うには、以下が必要です。

• HTML と JavaScript の基本的なスキル
• 以下のツールをローカルにインストールする必要があります。
  • Node.js v18
  • Git
  • IDE（例：Microsoft® Visual Studio Code）

AEM 環境

このチュートリアルを完了するには、 AEM as a Cloud Service 環境への AEM 管理者アクセスをお勧めします。AEM as a Cloud Service 環境にアクセスできない場合は、ローカル AEM as a Cloud Service クイックスタート SDK を使用することができます。ただし、コンテンツフラグメントのナビゲーションなど、一部の製品の UI 画面が異なることに注意する必要があります。

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

コンテンツフラグメントモデルの定義からチュートリアルを開始します。

GitHub プロジェクト

ソースコードとコンテンツパッケージは、AEM Guides - WKND GraphQL GitHub プロジェクトで入手することができます。

チュートリアルまたはコードに問題がある場合は、 GitHub の問題.

Business.Adobe.com リソース