UI 확장성을 위한 프로젝트 만들기

터미널을 엽니다.

터미널에서 프로젝트를 보관하는 폴더로 이동합니다.

실행:

aio app init my-fusion-extension --standalone-app

• my-fusion-extension은(는) 폴더/앱 이름입니다. 이 이름을 선택할 수 있지만 소문자, 하이픈을 사용하고 공백을 사용하지 않습니다.
• --standalone-app은(는) 제품 템플릿을 선택하라는 대신 CLI에 일반 응용 프로그램 구조​를 만들도록 지시합니다. 이는 AEM(또는 기타) 템플릿을 피하는 데 필요한 핵심 요소입니다.

메시지가 표시되면 조직을 선택​합니다(둘 이상의 조직에 속해 있는 경우).

메시지가 표시되면 새 프로젝트 만들기​를 선택하고 제안된 이름을 수락하거나 기존 빈 프로젝트를 선택하십시오.

명령이 Stage 및 Production 작업 영역을 자동으로 설정합니다.

또한 이 명령은 my-fusion-extension 폴더에 파일을 생성하고 npm install을(를) 실행합니다.

프로젝트 만들기 확인을 계속합니다.

터미널에서 생성된 폴더로 이동합니다.

cd my-fusion-extension

다음과 유사한 구조가 표시되어야 합니다(일부 파일 생략).

my-fusion-extension/
|--- app.config.yaml   // main configuration (you will edit this)
|---  package.json   //dependencies and scripts
|---  src/    // your source code
|---  web-src/  or  src/.../web-src/  // front-end files (HTML/JS)

가장 중요한 두 파일은 다음과 같습니다.

• app.config.yaml: 중앙 구성. 나중에 이 프로세스에서 앱을 Fusion 확장 지점에 연결하는 extensions: 섹션을 여기에 추가합니다.
• package.json: 앱에서 사용하는 라이브러리를 나열합니다. 여기에 Adobe UI 확장성 게스트 라이브러리를 추가합니다.

필요한 라이브러리 추가를 계속합니다.

터미널에서 다음을 실행합니다.

npm install @adobe/uix-guest @adobe/react-spectrum

(조건부) 생성된 프로젝트에 React가 아직 포함되지 않은 경우 설치하십시오.

npm install react react-dom react-router-dom

프로젝트 빌드 확인을 계속합니다.

터미널에서 다음을 실행합니다.

aio app build

오류 없이 완료되면 도구 및 프로젝트가 올바르게 구성됩니다. 프로젝트를 Fusion에 연결할 준비가 되었습니다.

Fusion용 프로젝트 구성을 계속합니다.

프로젝트가 다음과 같이 표시되도록 파일을 만듭니다.

my-fusion-extension/
|-- app.config.yaml
|-- src/
       |-- fusion-nav-organization-1/          // one folder per extension point
          |-- ext.config.yaml
          |-- web-src/
             |-- src/
                |-- components/
                   |-- App.js
                   |-- ExtensionRegistration.js
                   |-- DashboardWidget.js
                   |-- Constants.js

확장 지점(fusion-nav-organization-1) 뒤에 폴더 이름을 지정하는 것이 좋습니다. 정확한 이름은 사용자가 지정하지만 app.config.yaml에서 참조하는 이름과 일치해야 합니다.

계속 app.config.yaml에서 확장 지점을 선언합니다.

app.config.yaml을(를) 열고 내용을 다음으로 업데이트:

extensions:
  fusion/nav-organization/1:
    $include: src/fusion-nav-organization-1/ext.config.yaml

이러한 내용은 다음을 설명합니다.

• extensions:: 이 앱은 하나 이상의 확장 지점을 구현합니다.
• fusion/nav-organization/1: 연결 중인 Fusion 슬롯입니다. 버전 1을(를) 포함하여​과(와) 정확히 일치해야 합니다.
• $include:: 이 확장의 내용을 설명하는 두 번째 구성 파일(다음 단계에서 만들어짐)을 가리킵니다. 별도의 파일에 보관하면 app.config.yaml이(가) 깔끔하게 유지되고 나중에 더 많은 확장 지점을 추가할 수 있습니다.

extensions:
        fusion/nav-organization/1:
            $include: src/fusion-nav-organization-1/ext.config.yaml
        fusion/nav-team/1:
            $include: src/fusion-nav-team-1/ext.config.yaml

1. 계속 ext.config.yaml에서 확장 설명

다음을 사용하여 src/fusion-nav-organization-1/ext.config.yaml 만들기:

operations:
   view:
    - type: web
      impl: index.html
web: web-src
hooks:
  pre-app-build: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js
   pre-app-run: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js

이러한 내용은 다음을 설명합니다.

• operations.view: 확장이 index.html에서 제공되는 보기(표시되는 UI)를 제공함을 선언합니다. 이렇게 하면 확장 프로그램이 백그라운드에서만 실행되는 것이 아니라 화면을 표시합니다.
• web: web-src: 프런트 엔드 파일이 들어 있는 폴더입니다. App Builder은 여기에 모든 것을 빌드하고 Adobe의 CDN(Content Delivery Network)에서 호스팅합니다.
• hooks: 빌드/실행 시 자동으로 실행되는 작은 명령입니다. generate-metadata.js 스크립트는 @adobe/uix-guest과(와) 함께 제공되며 등록 코드에 필요한 app-metadata.json 파일을 생성합니다(4단계 참조). 이 스크립트를 작성하지 않고 참조만 하면 됩니다.

안정적인 확장 ID를 설정합니다.

src/fusion-nav-organization-1/web-src/src/components/Constants.js 만들기:

module.exports = {
  extensionId: 'my-fusion-extension'
};

코드가 확장 ID를 참조하는 모든 곳에서 동일한 값을 사용합니다.

위젯 등록을 계속합니다.

src/fusion-nav-organization-1/web-src/src/components/ExtensionRegistration.js 만들기.
중요한 부분은 register(...) 호출입니다.

import { register } from "@adobe/uix-guest";
import metadata from "../../../../app-metadata.json";
import { extensionId } from "./Constants";

async function init() {
  await register({
    id: extensionId,
    metadata,
    methods: {
      dashboard: {
        getWidget() {
          return {
            id: extensionId,
            title: "My Fusion tool",        // shown on the Fusion nav button
            description: "What this tool does",
            url: "/index.html#/my-widget",  // route to your visible UI
            hideWidgetHeader: false          // false = Fusion shows the title
          };
        }
      }
    }
   });
}

init().catch(console.error);

주요 사항:

• title​은(는) Fusion이 탐색 단추에 입력하는 레이블입니다. hideWidgetHeader이(가) false인 경우 Fusion은 제목도 UI 위에 헤더로 표시합니다.
• url​은(는) 이 동일한 앱 내에서 보이는 UI에 대한 경로입니다. 다음 페이지에 설정된 프런트 엔드 라우터에서 처리하는 해시 경로(#/my-widget)입니다. 화면을 렌더링하는 구성 요소로 확인해야 합니다.
• metadata​은(는) 빌드 시 generate-metadata 후크에서 만들어지는 app-metadata.json에서 가져옵니다. 표시된 대로 가져옵니다.
• dashboard.getWidget 메서드 이름은 위젯을 검색하기 위해 합의된 약정 Fusion 호출입니다. dashboard 네임스페이스와 getWidget 이름을 유지합니다.