文件AEMAEM 教學課程AEM Headless 教學課程

AEM Headless API和React

Last update: Mon Mar 24 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用對象：
  • Experience Manager as a Cloud Service

建立對象：

  • 中繼
  • 開發人員

歡迎使用本教學課程章節，我們將探索如何設定React應用程式，以使用AEM Headless SDK連線Adobe Experience Manager (AEM) Headless API。 我們將說明如何從AEM的GraphQL API擷取內容片段資料，以及在React應用程式中顯示該資料。

AEM Headless API可讓您從任何使用者端應用程式存取AEM內容。 我們將引導您設定React應用程式，以使用AEM Headless SDK連線至AEM Headless API。 此設定可在您的React應用程式與AEM之間建立可重複使用的通訊通道。

接下來，我們將使用AEM Headless SDK，從AEM的GraphQL API擷取內容片段資料。 AEM中的內容片段提供結構化的內容管理。 利用AEM Headless SDK，您可以使用GraphQL輕鬆查詢和擷取內容片段資料。

取得內容片段資料後，我們會將其整合至您的React應用程式。 您將瞭解如何以吸引人的方式格式化及顯示資料。 我們將介紹在React元件中處理和呈現內容片段資料的最佳實務，以確保與應用程式UI無縫整合。

在本教學課程中，我們將提供說明、程式碼範例和實用秘訣。 到最後，您將能設定React應用程式以連線至AEM Headless API、使用AEM Headless SDK擷取內容片段資料，並將資料順暢地顯示在您的React應用程式中。 讓我們開始吧！

原地複製React應用程式

  1. 在命令列上執行下列命令，從Github複製應用程式。

    code language-none 
    $ git clone git@github.com:lamontacrook/headless-first.git

  2. 變更至headless-first目錄，並安裝相依性。

    code language-none 
    $ cd headless-first
$ npm ci

設定React應用程式

  1. 在專案的根目錄建立名為.env的檔案。 在.env中設定下列值：

    code language-none 
    REACT_APP_AEM=<URL of the AEM instance>
REACT_APP_ENDPOINT=<the name of the endpoint>
REACT_APP_PROJECT=<the name of the folder with Content Fragments>
REACT_APP_TOKEN=<developer token>

  2. 您可以在Cloud Manager中擷取開發人員權杖。 登入Adobe Cloud Manager。 按一下​Experience Manager > Cloud Manager。 選擇適當的計畫，然後按一下「環境」旁邊的省略符號。

    AEM Developer Console

    1. 按一下​ 整合 ​標籤
    2. 按一下「本機開發權杖」索引標籤及「取得本機開發權杖」按鈕
    3. 複製存取權杖，從開啟報價之後開始，直到關閉報價之前。
    4. 將複製的Token貼上為.env檔案中的REACT_APP_TOKEN值。
    5. 現在，讓我們透過在命令列上執行npm ci來建置應用程式。
    6. 現在啟動React應用程式，並在命令列上執行npm run start。
    7. 在中。/src/utils名為context.js的檔案包含程式碼，可將.env檔案中的值設定到應用程式的內容中。

執行React應用程式

  1. 在命令列上執行npm run start以啟動React應用程式。

    code language-none 
    $ npm run start

    React應用程式將啟動，並開啟瀏覽器視窗至http://localhost:3000。 對React應用程式所做的變更會自動在瀏覽器中重新載入。

連線至AEM Headless API

  1. 若要將React應用程式連線至AEM as a Cloud Service，請在App.js中新增一些專案。 在React匯入中，新增useContext。

    code language-javascript 
    import React, {useContext} from 'react';

    從context.js檔案匯入AppContext。

    code language-javascript 
    import { AppContext } from './utils/context';

    現在在應用程式程式碼中，定義內容變數。

    code language-javascript 
    const context = useContext(AppContext);

    最後，將傳回程式碼包裝在<AppContext.Provider> ... </AppContext.Provider>中。

    code language-javascript 
    ...
return(<div className='App'>
    <AppContext.Provider value={context}>
        ...
    </AppContext.Provider>
</div>);

    作為參考，App.js現在應該像這樣。

    code language-javascript 
    import React, {useContext} from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './screens/home/home';
import { AppContext } from './utils/context';

const App = () => {
const context = useContext(AppContext);
return (
    <div className='App'>
    <AppContext.Provider value={context}>
        <BrowserRouter>
        <Routes>
            <Route exact={true} path={'/'} element={<Home />} />
        </Routes>
        </BrowserRouter>
    </AppContext.Provider>
    </div>
);
};

export default App;

  2. 匯入AEMHeadless SDK。 此SDK是應用程式使用的協助程式庫，可與AEM的Headless API互動。

    將此匯入陳述式新增至home.js。

    code language-javascript 
    import AEMHeadless from '@adobe/aem-headless-client-js';

    將下列{ useContext, useEffect, useState }新增至 React匯入陳述式。

    code language-javascript 
    import React, { useContext, useEffect, useState } from 'react';

    匯入AppContext。

    code language-javascript 
    import { AppContext } from '../../utils/context';

    在Home元件內，從AppContext取得context變數。

    code language-javascript 
    const Home = () => {
const context = useContext(AppContext);
...
}

  3. 在useEffect()內初始化AEM Headless SDK，因為context變數變更時AEM Headless SDK必須變更。

    code language-javascript 
    useEffect(() => {
const sdk = new AEMHeadless({
    serviceURL: context.url,
    endpoint: context.endpoint,
    auth: context.token
});
}, [context]);
    note note
    NOTE
    /utils下有context.js個檔案正在從.env檔案讀取專案。 若需參考，context.url是AEM as a Cloud Service環境的URL。 context.endpoint是上一個課程中建立之端點的完整路徑。 最後，context.token是開發人員權杖。

  4. 建立公開來自AEM Headless SDK內容的React狀態。

    code language-javascript 
    const Home = () => {
const [content, setContent] = useState({});
...
}

  5. 將應用程式連線至AEM。 使用上一個課程中建立的持久查詢。 初始化AEM Headless SDK後，在useEffect中新增下列程式碼。 讓useEffect依存於context變數，如下所示。

    code language-javascript 
    useEffect(() => {
...
sdk.runPersistedQuery('<name of the endpoint>/<name of the persisted query>', { path: `/content/dam/${context.project}/<name of the teaser fragment>` })
    .then(({ data }) => {
    if (data) {
        setContent(data);
    }
    })
    .catch((error) => {
    console.log(`Error with pure-headless/teaser. ${error.message}`);
    });
}, [context]);

  6. 開啟開發人員工具的「網路」檢視，以檢閱GraphQL請求。

    <url to environment>/graphql/execute.json/pure-headless/teaser%3Bpath%3D%2Fcontent%2Fdam%2Fpure-headless%2Fhero

    Chrome開發工具

    AEM Headless SDK會編碼GraphQL的請求，並新增提供的引數。 您可在瀏覽器中開啟要求。

    note note
    NOTE
    由於請求將前往作者環境，因此您必須在相同瀏覽器的另一個索引標籤中登入環境。

呈現內容片段內容

  1. 在應用程式中顯示內容片段。 傳回含有Teaser標題的<div>。

    code language-javascript 
    return (
<div className='main-body'>
    <div>{content.component && (content.component.item.title)}</div>
</div>
);

    您應該會看到Teaser的標題欄位顯示在畫面上。

  2. 最後一個步驟是將Teaser新增至頁面。 套件中包含React Teaser元件。 首先，讓我們包含匯入。 在home.js檔案頂端新增以下行：

    import Teaser from '../../components/teaser/teaser';

    更新傳回陳述式：

    code language-javascript 
    return (
<div className='main-body'>
    <div>{content.component && <Teaser content={content.component.item} />}</div>
</div>
);

    您現在應該會看到包含片段內內容的Teaser。

後續步驟

恭喜！您已成功更新React應用程式，以便使用AEM Headless SDK與AEM Headless API整合！

接下來，讓我們建立更複雜的影像清單元件，以動態方式呈現來自AEM的參考內容片段。

下一章：建立影像清單元件

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4