블록 생성, 업데이트 및 리팩터링 block-development

지속적인 Edge Delivery Services 개발 및 마이그레이션을 위해 Experience Modernation Agent를 사용하십시오. 작성자의 요구 사항과 실제 콘텐츠로 시작한 다음 이를 지원하는 가장 작은 구현을 선택하십시오.

에이전트는 이 작업에 대한 CDD(콘텐츠 기반 개발)를 따릅니다. 실제 콘텐츠와 작성자가 콘텐츠를 만드는 방법에서 시작하며, 그 이후에 코드를 작성합니다. 이렇게 하면 작성자가 콘텐츠 모델을 쉽게 사용할 수 있으며 개발자만 채울 수 있는 블록을 방지할 수 있습니다.

의도한 리포지토리와 분기를 연결하고 수정 권한을 확인하고 콘텐츠가 저장된 위치를 확인합니다. 공유 코드 또는 콘텐츠 모델을 변경하기 전에 기준선을 유지합니다.

블록을 만들기 전에 구성 composition

HTML 요소는 머리글, 단락, 링크, 목록 및 이미지의 기본 빌딩 단위입니다. 작성자는 가능한 경우 기본 콘텐츠인 블록 외부 콘텐츠를 사용해야 합니다. 전역 스타일 및 CSS 사용자 지정 속성 또는 디자인 토큰을 사용하여 공유 타이포그래피, 색상, 간격 및 링크/단추 프레젠테이션을 정의합니다.

블록을 사용하면 작성자가 카드 세트나 회전 메뉴 등 코드를 통해 주변 기본 컨텐츠와 구별할 수 없는 하나의 구성 요소를 형성하는 컨텐츠를 표시할 수 있습니다. 사이트가 제공하는 HTML에서 블록은 블록 이름을 클래스로 사용하는 div입니다. 프로젝트의 blocks/<name>/<name>.js 및 blocks/<name>/<name>.css이(가) 브라우저에서 장식합니다. 코드가 기본 콘텐츠의 패턴을 인식할 수 있는 경우, 코드가 블록 자체를 빌드할 수 있습니다. 이 블록은 aem.live에서 자동 차단을 호출합니다. 예를 들어 AEM 상용구는 /widgets/ 페이지에 대한 링크를 위젯 블록으로 바꿉니다. 블록을 가볍고 초점을 유지하십시오. 시각적 차이점만으로는 새 블록이 필요하지 않습니다. CSS와 JavaScript은 기본 컨텐츠의 스타일을 지정하고 변형 또는 섹션 스타일은 해당 차이점을 전달할 수 있습니다.

David의 모델은(는) 작성자가 쉽게 만들 수 있는 콘텐츠에 대한 aem.live 규칙을 수집합니다. 기본 콘텐츠를 선호하고, 블록 내부의 블록을 방지하고, 블록 및 변형 수를 작게 유지하며, 단추가 포함된 블록 또는 섹션에서 해당 스타일을 수행하도록 합니다. 블록이 블록 컬렉션과(와) 동일한 작업을 수행하는 경우 해당 블록의 콘텐츠 모델을 다시 사용합니다.

코드를 생성하기 전에 프로젝트의 규칙을 확인합니다.

Edge Delivery Services에는 내장된 단추 그룹 또는 각주 컨트롤이 없습니다. 각 규칙은 프로젝트의 코드가 작성된 콘텐츠에 적용되는 규칙이므로 프로젝트가 구현하는 방법을 확인하고 렌더링된 결과를 테스트합니다.

예: 원자 블록이 없는 유연한 티저 composition-example

구성 요소 기반 Adobe Experience Manager 프로젝트는 종종 티저 구성 요소나 별도의 제목, 이미지, 텍스트 및 버튼 구성 요소를 제공하여 작성자가 결합할 수 있도록 합니다. 예를 들어 WKND 샘플 사이트의 홈 페이지에서는 핵심 구성 요소 티저로 각 여행을 홍보합니다. Edge Delivery Services을 사용하면 작성자가 섹션 또는 블록 셀에서 동일한 요소를 기본 콘텐츠로 직접 작성합니다.

[Image]
## Downhill Skiing Wyoming
A skier's paradise far from crowds and close to nature.
**[View trip](/adventures/downhill-skiing-wyoming)**
_[All adventures](/adventures)_

현재 AEM boilerplate에서 단락에 단독으로 있는 링크는 서식을 지정할 때 단추가 됩니다. 기본 단추는 굵게, 보조 단추는 기울임체로, 강조 단추는 굵은 플러스 기울임체로 지정합니다. 일반 링크 또는 문장 내부의 링크는 링크로 유지됩니다. 전역 스타일을 사용하면 이러한 단추의 기본 콘텐츠와 내부 블록의 모양이 동일합니다.

작성자는 새 구성 요소 없이 제목, 텍스트, 이미지 및 링크를 추가, 제거 또는 순서를 변경할 수 있습니다. 티저 또는 히어로 블록은 작성자가 함께 속한 요소를 표시해야 하는 경우에만 필요합니다. CSS와 JavaScript은 기본 콘텐츠의 텍스트 옆에 이미지를 배치할 수도 있습니다. 프로젝트는 이러한 규칙을 변경할 수 있으므로 에이전트에 프로젝트의 스크립트 및 스타일을 확인하라는 요청을 한 후 해당 스크립트를 사용하도록 합니다.

차단 확인 block-prompts

"추천 차단 만들기"와 같은 간단한 프롬프트로 시작할 수 있습니다. 에이전트가 특정 항목을 일치시키는 데 도움이 되는 컨텍스트를 추가합니다.

참조 페이지 또는 스크린샷은 대상 모양을 보여 줍니다. 작성자가 편집하는 내용은 정의되어 있지 않으므로 이에 대해서도 설명합니다.

기존 블록 재사용 reuse-blocks

에이전트가 블록을 만들기 전에 프로젝트의 blocks 폴더와 참조 코드의 컬렉션 차단 및 파티 차단에서 재사용 또는 조정할 블록을 찾습니다. 마이그레이션하는 동안 블록 라이브러리가 있으면 확인합니다.

한 번에 하나씩 블록 빌드 iterate-blocks

여러 블록이 필요한 경우 한 번에 모든 블록을 요청하지 마십시오. 먼저 하나 또는 두 개의 대표 블록을 빌드하고 콘텐츠 모델, 스타일 지정 및 작성을 확인합니다. 그런 다음 다른 항목을 계속 사용하여 이름, 변형, 간격 등 결정한 사항을 이월합니다. 마이그레이션에서 나머지 항목 앞에 하나의 대표 템플릿의 블록을 생성하고 검증하십시오. 일괄 가져오기 워크플로우를 참조하십시오.

마이그레이션 전 블록 동작 설정 block-instructions

마이그레이션은 소스 페이지에서 찾은 콘텐츠에서 블록을 생성합니다. 에이전트가 블록을 생성하기 전에 블록이 만들어지는 방법을 제어하려면 다음을 수행합니다.

자동 모드는 실행 중에 지침을 받지 않습니다. 나중에 콘솔에서 블록을 세분화합니다.

블록 만들기 create

작성자 작업(예: 콘텐츠, 원하는 동작 및 디자인, 콘텐츠가 저장된 위치 및 테스트 페이지)을 제공합니다.

예:

문서 기반 페이지에 대한 추천 블록을 만듭니다. 실제 콘텐츠 예제 /about 및 /customers부터 시작합니다. 먼저 기존 블록을 확인합니다. 작성자는 레이아웃 구성 없이 견적, 속성 및 선택적 이미지를 편집해야 합니다. 토큰을 사용하십시오. 긴 텍스트 및 이미지 없는 예제를 포함합니다. 업로드, 푸시 또는 게시하지 마십시오.

예제 경로를 고유한 경로로 바꿉니다.

그 결과는 재사용할 수 있는 코드, 작성자가 필요로 하는 모델 및 작성자가 편집할 수 있는 예제 콘텐츠입니다.

에이전트가 블록에 제공하는 항목 block-deliverables

기존 블록 업데이트 update

블록 이름, 현재 예/변형, 요청된 변경 사항 및 호환성 요구 사항을 제공합니다.

예:

승인된 보조 링크 변형이 /products 및 /blog에서 작동하도록 cards을(를) 업데이트합니다. 기존 기본 및 이미지 변형과 작성된 콘텐츠를 유지합니다. 키보드 상호 작용 및 모바일 래핑을 확인합니다. 다른 페이지를 다시 작성하거나 콘텐츠를 업로드하지 마십시오.

예제 경로를 고유한 경로로 바꿉니다.

변경된 비헤이비어, 영향을 받는 변형, 작성자 지침 및 필요한 콘텐츠 변경 사항을 전달합니다.

결과를 변경하지 않고 리팩터링 refactor

리팩터링은 합의된 동작을 유지하면서 구현을 향상시킵니다. 이는 카탈로그를 다시 그룹화하거나, 블록을 다시 디자인하거나, 콘텐츠 모델을 마이그레이션하는 것과 동일하지 않습니다.

예:

blocks/cards/cards.js 및 blocks/teaser/teaser.js에서 중복된 카드 장식 논리를 리팩터링합니다. 작성된 모델, 출력 의미 체계, 모양, 링크 동작, 키보드 액세스 및 분석 훅을 유지합니다. /products 및 /blog을(를) 회귀 예제로 사용합니다. 호환성 위험 및 테스트 결과를 보고합니다. 콘텐츠를 마이그레이션하거나 변경 내용을 푸시하지 마십시오.

예제 경로를 고유한 경로로 바꿉니다.

별도의 리팩터링 명령은 없습니다. 채팅을 통해 요청하면 에이전트는 사용자가 설정한 제한 내에서 개발자와 마찬가지로 코드를 변경합니다.

동적 블록 작성 dynamic-blocks

동적 블록은 작성자가 작성한 내용만 표시하지 않고 브라우저에서 콘텐츠를 로드하거나 계산합니다. 예를 들어 최신 문서 목록, 검색 결과 또는 필터링된 목록이 있습니다. 에이전트에게 마이그레이션 후 다른 블록과 같은 블록을 만들도록 요청하거나 마이그레이션된 블록을 이 방식으로 작동하도록 변경하십시오. 설명:

예:

이미지, 제목, 날짜 등과 함께 사이트의 쿼리 색인에서 가장 최근 6개의 문서를 표시하는 문서 목록 블록을 만듭니다. 작성자가 키-값 테이블에 나열할 문서 및 폴더의 수를 설정합니다. 문서가 없을 때 짧은 메시지를 표시합니다. /news에서 테스트하십시오. 업로드, 푸시 또는 게시하지 마십시오.

쿼리 인덱스에는 게시된 페이지만 포함되며 해당 구성이 추출하는 속성만 포함되므로 테스트하기 전에 둘 다 확인하십시오. 일반적인 결과와 빈 및 오류 상태를 확인합니다.

서비스 및 응용 프로그램 연결 integrations

에이전트는 사이트를 다른 시스템(추가 기능에서 다루지 않는 시스템 포함)에 연결하는 코드를 작성합니다. Edge Delivery Services을 넘어서 작업에서는 통합 작업을 수행하는 방법에 대해 설명합니다. 이 섹션에서는 해당 코드가 실행되는 위치를 다룹니다.

Edge Delivery Services 페이지는 방문자의 브라우저에서 이 코드를 실행하므로 각 연결은 블록, 위젯 또는 프로젝트 스크립트의 일부입니다. 에이전트가 작동하는 동안 키가 필요한 API를 호출해야 하는 경우 채팅이 아닌 설정​에 키를 추가하십시오.

추가 기능은 작업이 필요할 때 에이전트가 켜도록 제공하는 선택적 기능입니다. 어떤 시스템이 연결되는지, 누가 이 시스템을 소유하고 있는지, 그리고 누가 이 결과를 받아들일지에 대한 결정은 프로젝트 결정입니다. 프로젝트 작업 유지를 참조하십시오.

양식 제출 form-submissions

Edge Delivery Services은 양식을 제공하지만 제출물을 저장하거나 따르도록 실행하지 않습니다. 소스 사이트에서 서버가 각 제출을 처리했으며 페이지 가져오기로 해당 서버를 볼 수 없습니다. 대상 연결은 마이그레이션되거나 되지 않은 Edge Delivery Services 사이트에서와 동일한 작업이며, 에이전트가 범용 코딩 에이전트이므로 언제든지 요청할 수 있습니다.

Forms 추가 기능의 기능 forms-add-on

양식 추가 기능은 Adobe Experience Manager Forms에 라이선스를 부여하는 조직을 위해 빌드되었습니다. Experience Manager Forms용 Edge Delivery Services에 대한 양식을 준비합니다. 둘 이상의 필드가 있는 각 소스 양식의 경우 양식 정의에서 필드를 기록하고, 페이지 옆에 저장된 시트를 필드당 하나의 행(이름, 레이블, 유형, 옵션 및 유효성 검사)으로 기록합니다. 그런 다음 정의로 연결되는 양식 블록을 페이지에 배치합니다. 필드 및 레이블은 해당 정의의 콘텐츠이며 Forms 백엔드에 저장된 데이터가 아닙니다. 모든 양식에서 이름이 form인 동일한 블록을 사용하며 해당 정의에 따라 표시되는 내용이 결정되므로 에이전트가 블록의 변형을 만들지 않습니다. 이 추가 기능은 페이지의 폴더에 소스 양식의 이름을 딴 각 정의를 저장하고 다른 페이지에서 동일한 양식을 찾지 않습니다. 여러 페이지가 한 위치에 표시되는 양식을 유지 관리하려면 에이전트에게 해당 페이지를 단일 정의에 연결하라고 요청합니다.

프로젝트에 아직 양식 블록이 없는 경우 추가 기능은 Experience Manager Forms의 양식 블록을 추가합니다. 이 블록은 모든 제출을 Forms 제출 서비스(으)로 보냅니다. 이 서비스는 정의 경로로 양식을 식별하고 정의의 제출 행에 연결된 스프레드시트에 데이터를 저장합니다. 추가 기능은 스프레드시트를 연결하지 않으며 소스 양식이 제출한 주소를 유지하지 않으므로 양식을 시작하기 전에 대상을 연결하십시오. 대상 선택을 참조하세요. 추가 기능 자체에는 라이선스가 필요하지 않지만 양식 블록 및 Forms 제출 서비스에는 Experience Manager Forms 라이선스가 필요합니다.

Experience Manager Forms이 없으면 추가 기능의 필드 인벤토리가 각 양식의 필드, 레이블, 유형, 옵션 및 유효성 검사를 캡처하는 데 여전히 도움이 되는 부분입니다. 에이전트에는 다른 양식 플랫폼에 대한 기술이 없으므로 Edge Delivery Services을 넘어 작업에 설명된 대로 먼저 플랫폼의 설명서를 읽어야 합니다. 그런 다음 동일한 정의를 읽고 플랫폼에 제출하는 양식 블록을 작성하거나 플랫폼이 호스팅하는 양식을 포함할 수 있습니다.

추가 기능은 소스 서버가 보내는 HTML의 각 양식을 읽으며, 해당 HTML에 해당 필드가 있을 때 서드파티 공급자의 양식도 읽습니다. 마케팅 플랫폼에서 임베드된 양식과 같이 스크립트가 브라우저에 추가하는 양식은 해당 HTML에 없으므로 추가 기능이 이 양식을 가져오지 않습니다. 에이전트에게 해당 양식을 다시 작성하도록 요청하거나 플랫폼에서 다시 임베드하도록 요청하십시오.

대상 선택 form-destination

리드 양식은 팀이 마케팅 자동화 플랫폼 또는 CRM(고객 관계 관리) 시스템에서 이미 리드를 처리하는 곳에 속합니다. 예를 들면 다음과 같습니다.

제출이 여러 시스템에 도달해야 하는 경우 Adobe Workfront Fusion 또는 Microsoft Power Automate와 같은 통합 플랫폼이나 자체 API로 전송합니다. Experience Manager Forms을 사용하면 Forms 제출 서비스는 제출 서류를 스프레드시트에 저장하거나 이메일로 전송하고 Experience Manager에서 실행되는 작업을 제출하여 Marketo Engage, Workfront Fusion, Power Automate 또는 REST 끝점과 같은 다른 시스템에 전달합니다. 제출 동작 구성을 참조하세요.

이러한 플랫폼 중 대부분은 비밀이 필요 없는 양식 끝점에서 브라우저의 제출을 수락합니다. 플랫폼의 API에 키가 필요한 경우 위의 암호​에 설명된 대로 키를 유지하는 서버측 서비스를 통해 제출을 전송하십시오.

에이전트에게 알립니다.

예:

먼저 https://developer.example.com/forms에서 양식 제출에 대한 CRM의 설명서를 읽어 보십시오. /contact의 양식을 https://forms.example.com/submit/contact-us의 CRM 양식 contact-us에 연결합니다. 이름, 성, 전자 메일, 회사 및 국가를 CRM 필드 FirstName, LastName, Email, Company 및 Country에 매핑합니다. 전자 메일 및 회사는 필수입니다. 잠재 고객 소스 “웹 사이트”, 페이지 URL 및 방문의 UTM 매개 변수에 대해 숨겨진 필드를 추가합니다. 이 동의 확인란 표시, 선택 해제: “이메일로 제품 뉴스 수신에 동의합니다.” 제출 후 "감사합니다. 연락 드리겠습니다."를 표시합니다. 실패하면 방문자 항목을 유지하고 재시도에 오류를 표시합니다. https://sandbox.example.com에서 CRM의 샌드박스에 대해 테스트합니다. 업로드, 푸시 또는 게시하지 마십시오.

예제 URL, 이름 및 단어를 자신의 URL로 바꿉니다.

에이전트는 양식 정의 및 양식 블록의 코드를 업데이트합니다. 팀이 암호와 함께 배포하는 서버측 서비스의 코드를 작성할 수도 있습니다. 수신 플랫폼에서 해당 관리자는 다음을 구성합니다.

미리보기 사이트에서 테스트 항목을 제출합니다. 모든 필드에 도달하고, 예상 워크플로우를 시작하고, 테스트로 표시되었는지 확인합니다. 스위치 다음에 프로덕션 도메인에 대한 검사를 반복합니다.

상거래 페이지 commerce-pages

상거래 페이지 추가 기능은 Adobe Commerce 스토어에 대한 Experience 현대화 에이전트의 페이지 가져오기 워크플로우를 확장합니다. 제품 구조 데이터, URL 패턴 및 페이지 요소(예: 수량 필드, 제품 그리드 또는 필터)와 같은 신호에서 소스 사이트의 제품 세부 사항 페이지 및 제품 목록 페이지(어떤 플랫폼에서 실행하든)를 인식합니다. 각 페이지를 상거래 블록의 제품 SKU 또는 카테고리 경로와 표준 블록의 배너 및 프로모션과 같은 주변 콘텐츠가 포함된 페이지로 다시 빌드합니다. 제품 데이터를 가져오지 않습니다. 상거래 블록은 방문자가 페이지를 열 때마다 카탈로그에서 데이터를 로드합니다. 에이전트는 표준 워크플로를 사용하여 다른 페이지를 마이그레이션합니다.

추가 기능이 상거래 블록을 쓰지 않습니다. 프로젝트에 이미 있는 제품 및 목록 블록을 사용하며 commerce storefront boilerplate의 product-details 및 product-list-page 블록이 필요합니다. 해당 보일러판에서 프로젝트를 시작하고, 가져온 페이지에 제품을 확인할 때 표시되도록 상점 전면을 카탈로그에 연결합니다. 추가 기능 자체에는 라이선스가 필요하지 않지만 스토어프론트의 드롭인 구성 요소에는 Adobe Commerce as a Cloud Service 또는 Adobe Commerce Optimizer 라이선스가 필요합니다. 다른 상거래 플랫폼이 장바구니, 체크아웃 및 주문을 처리할 때 Adobe Commerce Optimizer이 카탈로그를 제공할 수도 있습니다. 백엔드 옵션을 참조하십시오.

Adobe Commerce Optimizer이 없는 다른 상거래 플랫폼의 경우 추가 기능이 적용되지 않습니다. 에이전트는 Edge Delivery Services을 넘어 작업에 설명된 대로 플랫폼의 설명서에서 작업하여 플랫폼의 API에서 데이터를 로드하는 제품 및 목록 블록을 빌드합니다.

추가 기능은 문서 기반 콘텐츠에서 작동합니다. Experience Manager 작성을 사용하는 프로젝트의 경우 에이전트는 표준 마이그레이션을 사용하며, 이 마이그레이션은 해당 시점에 각 제품 페이지에 표시되는 내용을 가져옵니다. 해당 페이지가 카탈로그에 연결되는 방식을 팀과 결정하십시오.

유효성 검사 및 전달 validation

프로젝트의 선언된 lint 및 테스트 명령과 실제 콘텐츠에 대한 브라우저 검사를 사용합니다. 에이전트에게 단순히 테스트한 것이 아니라 명령 및 결과를 보고하도록 요청합니다.

확인:

검사가 실패하면 실패한 예제를 유지하고 영향을 가장 적게 받는 레이어를 수정합니다. 부실 미리보기/코드 분기 문제를 모델 또는 구현 실패와 구분합니다. 실패한 확인 및 관련 회귀를 다시 실행합니다.

차이를 검토하고 의도한 파일만 스테이징한 다음 저장소 정책을 통해 푸시합니다. 승인된 경우에만 테스트 또는 프로덕션 콘텐츠를 업로드합니다. 코드 푸시는 이를 저장하지 않습니다. main에 병합되면 블록을 사용하는 라이브 사이트의 모든 페이지에 블록 코드가 적용됩니다. 변경 내용이 실시간으로 적용되는 방법을 참조하세요.

복구를 위해 Git을 통해 코드를 되돌리고 변경된 원격 콘텐츠를 별도로 복원합니다. 필요한 컨텐츠 마이그레이션이 수락될 때까지 호환되는 이전 예제를 유지합니다.

프로젝트 인계를 사용하여 변경된 파일, 모델, 예제, 유효성 검사 결과, 남은 위험 및 다음 사용자 또는 에이전트에 대한 복구 접근 방식을 유지하십시오.