범용 편집기를 사용하여 AEM Forms용 Edge Delivery Services 시작하기

1. AEM Forms 상용구 템플릿에 액세스

   • https://github.com/adobe-rnd/aem-boilerplate-forms로 이동

   
   그림: 사전 구성된 적응형 양식 블록이 있는 AEM Forms 상용구 저장소

2. 저장소 만들기

   • 이 템플릿 사용 > 새 저장소 만들기 ​를 클릭합니다.

   
   그림: 템플릿을 사용하여 새 저장소 만들기

3. 저장소 설정 구성

   • 소유자: GitHub 계정 또는 조직 선택
   • 저장소 이름: 설명적인 이름 선택 (예: my-forms-project)
   • 가시성: 공개 선택 (Edge Delivery Services에 권장됨)
   • 저장소 만들기 ​를 클릭합니다.

   
   그림: 공개 가시성을 갖춘 새 저장소 구성

유효성 검사: AEM Forms 상용구 템플릿을 기반으로 한 새 GitHub 저장소가 있는지 확인합니다.

AEM Code Sync는 AEM 저작 환경과 GitHub 저장소 간에 콘텐츠 변경 사항을 자동으로 동기화합니다.

1. GitHub 앱 설치

   • https://github.com/apps/aem-code-sync/installations/new로 이동

2. 액세스 권한 구성

   • 선택한 저장소만 선택
   • 새로 만든 저장소 선택
   • 저장 클릭

   
   그림: 저장소별 권한으로 AEM Code Sync 설치

체크포인트: AEM Code Sync가 설치되었으며 이제 저장소에 액세스할 수 있습니다.

fstab.yaml 파일은 콘텐츠 동기화를 위해 GitHub 저장소를 AEM 저작 환경에 연결합니다.

1. 저장소로 이동

   • 새로 만든 GitHub 저장소로 이동
   • AEM Forms 상용구 파일을 확인해야 합니다.

2. fstab.yaml 파일 만들기

   • 루트 디렉터리에서 파일 추가 > 새 파일 만들기 ​를 클릭
   • fstab.yaml로 파일 이름 지정

   
   그림: fstab.yaml 구성 파일 만들기

3. AEM 연결 세부 정보 추가

   다음 구성을 복사하여 붙여넣고 플레이스홀더를 바꿉니다.

   code language-yaml
   mountpoints: /: url: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main type: "markup" suffix: ".html"

   바꾸기:

   • <aem-author>: AEM as a Cloud Service 작성자 URL (예: author-p12345-e67890.adobeaemcloud.com)
   • <owner>: GitHub 사용자 이름 또는 조직
   • <repository>: 저장소 이름

   예:

   code language-yaml
   mountpoints: /: https://author-p12345-e67890.adobeaemcloud.com/bin/franklin.delivery/mycompany/my-forms-project/main

   
   그림: AEM 통합을 위한 마운트 지점 구성

4. 구성 커밋

   • 커밋 메시지 추가: “AEM 통합 구성 추가”
   • 새 파일 커밋 클릭

   
   그림: fstab.yaml 구성 커밋

유효성 검사: AEM에 대한 GitHub 저장소 연결을 확인합니다.

1. AEM Sites 콘솔 액세스

   • AEM as a Cloud Service 작성자 인스턴스에 로그인
   • Sites ​로 이동

   
   그림: AEM Sites 콘솔 액세스

2. 사이트 생성 시작

   • 만들기 > 템플릿으로 사이트 만들기 선택

   
   그림: 템플릿으로 새 사이트 생성

3. Edge Delivery Services 템플릿 선택

   • Edge Delivery Services 사이트 템플릿 선택
   • 다음 클릭

   
   그림: Edge Delivery Services 사이트 템플릿 선택

   note note
   NOTE
   템플릿을 사용할 수 없습니까? Edge Delivery Services 템플릿이 표시되지 않는 경우:
   가져오기 ​를 클릭하여 템플릿 업로드 GitHub 릴리스에서 템플릿 다운로드

4. 사이트 구성

   다음 정보를 입력합니다.

   table 0-row-3 1-row-3 2-row-3 3-row-3
   필드	값	예
   사이트 제목	사이트에 대한 설명적인 이름	“내 양식 프로젝트”
   사이트 이름	URL에 적합한 이름	“my-forms-project”
   GitHub URL	저장소 URL	https://github.com/mycompany/my-forms-project

   
   그림: GitHub 통합으로 새 AEM 사이트 구성

5. 사이트 생성 완료

   • 설정 검토
   • 만들기 ​를 클릭합니다.

   
   그림: 사이트 생성 확인

   성공 AEM 사이트가 이제 생성되어 GitHub에 연결되었습니다.

6. 범용 편집기에서 열기

   • Sites 콘솔에서 새 사이트 찾기
   • index 페이지 선택
   • 편집 클릭

   
   그림: 편집을 위해 사이트 열기

   범용 편집기가 새 탭에서 열리고 WYSIWYG 작성 기능이 제공됩니다.

   
   그림: WYSIWYG 편집을 위해 범용 편집기에서 열린 사이트

유효성 검사: AEM 사이트에서 양식 작성을 수행할 준비가 되었는지 확인합니다.

게시를 통해 귀하의 사이트를 Edge Delivery Services에 제공하면 전 세계에서 액세스할 수 있습니다.

1. Sites 콘솔에서 빠른 게시

   • AEM Sites 콘솔로 돌아가기
   • 사이트 페이지 선택 (또는 Ctrl+A를 눌러 모두 선택)
   • 빠른 게시 클릭

   
   그림: 빠른 게시를 위해 페이지 선택

2. 게시 확인

   • 확인 대화 상자에서 게시 ​를 클릭합니다.

   
   그림: 게시 작업 확인

   대안: 범용 편집기에서 게시 버튼을 사용하여 직접 게시할 수도 있습니다.

   
   그림: 범용 편집기에서 직접 게시

3. 라이브 사이트 액세스

   이제 사이트가 다음 위치에서 활성화됩니다.

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   URL 구조 설명:

   • <branch>: GitHub 분기 (일반적으로 main)
   • <repo>: 저장소 이름
   • <owner>: GitHub 사용자 이름 또는 조직
   • <site-name>: AEM 사이트 이름

   예:

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

유효성 검사: 사이트가 Edge Delivery Services에서 활성화되어 있는지 확인합니다.

다음 단계: 첫 번째 양식 만들기

1. 로컬 프로젝트로 이동

   code language-bash
   cd /path/to/your/aem-project

2. AEM Forms 상용구에서 필요한 파일 다운로드

   AEM Forms 상용구 저장소에서 다음 파일을 복사합니다.

   table 0-row-3 1-row-3 2-row-3 3-row-3
   소스	대상	용도
   blocks/form/	blocks/form/	핵심 양식 기능
   scripts/form-editor-support.js	scripts/form-editor-support.js	범용 편집기 통합
   scripts/form-editor-support.css	scripts/form-editor-support.css	편집기 스타일 지정

3. 편집기 지원 업데이트

   • /scripts/editor-support.js 파일을 AEM Forms 상용구의 editor-support.js로 바꾸기

유효성 검사: 양식 블록 파일이 프로젝트에 있는지 확인합니다.

1. 섹션 모델 업데이트

   /models/_section.json을 열고 필터에 양식 구성 요소를 추가합니다.

   code language-json
   { "filters": [ { "id": "section", "components": [ "text", "image", "button", "form", "embed-adaptive-form" ] } ] }

   이 작업의 기능: 범용 편집기 구성 요소 선택기에서 양식 구성 요소를 활성화합니다.

유효성 검사: 범용 편집기에 양식 구성 요소가 나타나는지 확인합니다.

이 단계를 수행하는 이유: 양식별 파일의 린팅 오류를 방지하고 적절한 유효성 검사 규칙을 구성합니다.

1. .eslintignore 업데이트

   /.eslintignore에 다음 행을 추가합니다.

   code language-bash
   # Form block rule engine files blocks/form/rules/formula/* blocks/form/rules/model/* blocks/form/rules/functions.js scripts/editor-support.js scripts/editor-support-rte.js

2. .eslintrc.js 업데이트

   /.eslintrc.js의 rules 오브젝트에 다음 규칙을 추가합니다.

   code language-javascript

   { "rules": { // Existing rules... // Form component cell limits 'xwalk/max-cells': ['error', { '*': 4, // default limit form: 15, wizard: 12, 'form-button': 7, 'checkbox-group': 20, checkbox: 19, 'date-input': 21, 'drop-down': 19, email: 22, 'file-input': 20, 'form-fragment': 15, 'form-image': 7, 'multiline-input': 23, 'number-input': 22, panel: 17, 'radio-group': 20, 'form-reset-button': 7, 'form-submit-button': 7, 'telephone-input': 20, 'text-input': 23, accordion: 14, modal: 11, rating: 18, password: 20, tnc: 12 }], // Disable this rule for forms 'xwalk/no-orphan-collapsible-fields': 'off' } }

유효성 검사: ESLint가 양식 구성 요소와 함께 작동하는지 확인합니다.

1. 종속성 설치 및 빌드

   code language-bash
   # Install any new dependencies npm install # Build component definitions npm run build:json

   이 작업의 기능:

   • 양식 구성 요소로 component-definition.json 업데이트
   • 양식 모델로 component-models.json 생성
   • 필터링 규칙으로 component-filters.json 생성

2. 생성된 파일 확인

   프로젝트 루트에 있는 다음 파일에 양식 관련 오브젝트가 포함되어 있는지 확인합니다.

   • component-definition.json
   • component-models.json
   • component-filters.json

3. 변경 사항 커밋 및 푸시

   code language-bash
   git add . git commit -m "Add Adaptive Forms Block integration" git push origin main

유효성 검사: 프로젝트에 양식 기능이 포함되어 있는지 확인합니다.

1. 범용 편집기에서 페이지를 엽니다.

   • AEM의 Sites 콘솔로 이동합니다.
   • 양식을 추가할 페이지(예: index)를 선택합니다.
   • 편집 클릭

   WYSIWYG 편집을 위해 페이지가 범용 편집기에서 열립니다.

2. 적응형 양식 구성 요소 추가

   • 콘텐츠 트리 패널(왼쪽 사이드바)을 엽니다.
   • 양식을 추가하려는 섹션으로 이동합니다.
   • 추가(+) 아이콘을 클릭합니다.
   • 구성 요소 목록에서 적응형 양식 ​을 선택합니다.

   
   그림: 페이지에 적응형 양식 블록 추가

유효성 검사: 양식 컨테이너가 비어 있는지 확인합니다.

1. 양식 블록으로 이동

   • 콘텐츠 트리에서 새로 추가된 적응형 양식 섹션을 찾습니다.

   
   그림: 콘텐츠 트리의 적응형 양식 블록

2. 양식 구성 요소 추가

   다음 두 가지 방법으로 구성 요소를 추가할 수 있습니다.

   방법 A: 클릭하여 추가

   • 양식 섹션에서 추가(+) 아이콘을 클릭합니다.
   • 적응형 양식 구성 요소 목록에서 원하는 구성 요소를 선택합니다.

   방법 B: 드래그 앤 드롭

   • 구성 요소 패널에서 양식으로 구성 요소를 직접 드래그합니다.

   
   그림: 양식에 구성 요소 추가

   권장되는 스타터 구성 요소:

   • 텍스트 입력 (이름, 이메일)
   • 텍스트 영역 (메시지)
   • 제출 버튼

3. 구성 요소 속성 구성

   • 양식 구성 요소 선택

   • 속성 패널(오른쪽 사이드바)을 사용하여 다음을 구성합니다.

     • 레이블 및 플레이스홀더
     • 유효성 검사 규칙
     • 필수 필드 설정

   
   그림: 구성 요소 속성 구성

4. 양식 미리보기

   양식이 다음과 같이 표시됩니다.

   
   그림: 범용 편집기로 만든 예제 양식

유효성 검사: 양식을 게시할 준비가 되었는지 확인합니다.

1. 범용 편집기에서 게시

   • 범용 편집기에서 게시 버튼을 클릭합니다.

   
   그림: 범용 편집기에서 양식 게시

2. 게시 확인

   • 확인 대화 상자에서 게시 ​를 클릭합니다.

   
   그림: 게시 작업 확인

   게시를 확인하는 성공 메시지가 표시됩니다.

   
   그림: 정상적 게시 확인

3. 실시간 양식 보기

   이제 양식이 다음 위치에서 활성화됩니다.

   code language-none
   https://<branch>--<repo>--<owner>.aem.live/content/<site-name>/

   예제 URL:

   code language-none
   https://main--my-forms-project--mycompany.aem.live/content/my-forms-project/

   
   그림: Edge Delivery Services에 게시된 양식 페이지

축하합니다! 이제 양식이 활성화되어 제출물을 수집할 준비가 되었습니다.

1. AEM CLI 설치

   AEM CLI는 로컬 개발 작업을 간소화합니다.

   code language-bash
   npm install -g @adobe/aem-cli

2. 저장소 복제

   code language-bash
   git clone https://github.com/<owner>/<repo> cd <repo>

   <owner> 및 <repo>를 실제 GitHub 세부 사항을 포함하도록 바꿉니다.

3. 로컬 개발 서버 시작

   code language-bash
   aem up

   이렇게 하면 핫 리로드 기능이 있는 로컬 서버가 시작됩니다.

4. 사용자 정의

   • 양식 스타일 지정 및 비헤이비어를 위해 blocks/form/ 디렉터리에서 파일을 편집합니다.
   • 스타일 지정을 위해 form.css를 수정합니다.
   • 비헤이비어를 위해 form.js를 업데이트합니다.

   http://localhost:3000에서 브라우저의 변경 사항을 즉시 확인 ​합니다.

5. 변경 내용 배포

   code language-bash
   git add . git commit -m "Custom form styling" git push origin main

   변경 내용은 다음 위치에서 사용할 수 있습니다.

   • 미리보기: https://<branch>--<repo>--<owner>.aem.page/content/<site-name>
   • 프로덕션: https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

문제: 빌드 실패 또는 린팅 오류

솔루션 1: 린팅 오류 처리

린팅 오류가 발생하는 경우:

1. 프로젝트 루트에서 package.json을 엽니다.

2. lint 스크립트를 찾습니다.

   code language-json
   "scripts": { "lint": "npm run lint:js && npm run lint:css" }

3. 린팅을 일시적으로 비활성화합니다.

   code language-json
   "scripts": { "lint": "echo 'skipping linting for now'" }

4. 변경 내용을 커밋하고 푸시합니다.

솔루션 2: 모듈 경로 오류

“모듈 '…/…/scripts/lib-franklin.js'에 대한 경로를 확인할 수 없음” 메시지가 표시되는 경우:

1. 다음으로 이동 blocks/form/form.js

2. Import 문을 업데이트합니다.

   code language-javascript
   // Change this: import { ... } from '/scripts/lib-franklin.js'; // To this: import { ... } from '/scripts/aem.js';

문제: 양식 제출이 작동하지 않음

솔루션:

• 제출 버튼 구성 요소가 있는지 확인합니다.
• 양식 작업 URL 구성을 확인합니다.
• 양식 유효성 검사 규칙을 확인합니다.
• 먼저 미리보기 모드에서 테스트합니다.

문제: 스타일 지정 문제

솔루션:

• blocks/form/에서 CSS 파일 경로를 확인합니다.
• 브라우저 캐시를 지웁니다.
• CSS 구문을 확인합니다.
• 로컬 개발 환경에서 테스트합니다.

문제: 범용 편집기에 양식 구성 요소가 표시되지 않음

솔루션:

• AEM Code Sync가 설치되어 있고 실행 중인지 확인합니다.
• fstab.yaml에 올바른 AEM 작성자 URL이 있는지 확인합니다.
• AEM 인스턴스에 얼리 액세스가 활성화되어 있는지 확인합니다.
• component-definition.json에 양식 구성 요소가 포함되어 있는지 확인합니다.

문제: 게시 후 변경 사항이 표시되지 않음

솔루션:

• CDN 캐시가 새로 고쳐질 때까지 기다립니다.
• 브라우저 캐시를 확인합니다(시크릿/비공개 모드에서 시도).
• 올바른 URL 형식이 사용되고 있는지 확인합니다.