20.3 Luma 보트 - 클라우드 기능 구축

클라우드 함수를 사용하면 봇이 런타임에 사용자 지정 Node.js 코드를 실행하여 동적 채팅 컨텐츠를 표시할 수 있습니다. API에서 가져오는 Luma 제품 데이터를 표시하는 클라우드 기능을 Luma Bot에 추가해 보겠습니다.

전제 조건

  • 최신 버전의 Node.js 설치 Node v12 이상을 실행 중인지 확인하십시오.
  • 데스크탑용 최신 Github 버전

20.3.1 자리 표시자 클라우드 함수 설정

보트 메뉴에서 클라우드 함수 단추를 클릭하여 편집기를 표시합니다. 클라우드 함수를 만드는 두 가지 방법이 있습니다. 자주 사용하는 IDE(Integrate Development Environment)( Visual Studio Code)를 사용하여 코드를 로컬에서 개발하고 코드를 업로드하거나 Stackchat Studio의 클라우드 기능 편집기에서 바로 코드를 작성할 수 있습니다. 이렇게 하면 됩니다. 처음부터 시작 옵션을 선택합니다.

데모

Luma Bot을 게시하지 못하게 하는 오류가 있습니다. 이러한 모든 것이 누락된 클라우드 함수에 해당합니다. 수정하려는 문제 목록을 보려면 오류 보트 메뉴 항목을 클릭합니다.

다음은 누락된 클라우드 함수 목록입니다.

  • getProducts
  • getRecentlyViewedProducts
  • notifyAEPOfUserIdentified
  • extractMetadaAndPopulateSlots

조금 후에 최종 클라우드 기능을 추가하겠습니다. 우선 화난 보트 검사기를 달래기 위해 자리 표시자 기능을 만들어 보죠. 유효성 검사 오류 패널을 닫고 아래 코드를 복사하여 보트 편집기에 붙여 넣은 다음 오른쪽 상단에 있는 저장 단추를 누릅니다. Luma Bot과 상호 작용할 때 로그를 캡처하는 데 도움이 됩니다.

export function getProducts(userData) {
  console.info(`getProducts called :: userdata:\n ${ JSON.stringify(userData) }`);
}

export function getRecentlyViewedProducts(userData) {
  console.info(`getRecentlyViewedProducts called :: userdata:\n ${ JSON.stringify(userData) }`);
}

export function notifyAEPOfUserIdentified(userData) {
  console.info(`notifyAEPOfUserIdentified called :: userdata:\n ${ JSON.stringify(userData) }`);
}

export function extractMetadaAndPopulateSlots(userData) {
  console.info(`extractMetadaAndPopulateSlots called :: userdata:\n ${ JSON.stringify(userData) }`);
}

이제 보트가 오류가 없고 유효성 검사기가 더 이상 화나지 않습니다! Stackchat Studio에서 감지한 모든 기능 목록을 보려면 4개의 내보내기 단추를 클릭합니다.

데모

20.3.2 루마 보트 게시 및 테스트

이제 오류가 없으므로 보트 메뉴에서 게시 단추를 눌러 보트를 게시합니다.

데모

보트가 게시가 완료되면(2분 정도 걸릴 수 있음) 채팅 배지가 더 이상 비활성화되지 않음을 확인할 수 있습니다. 채팅 배지를 클릭하고 Luma 보트에게 인사해 대화를 시작합니다.

데모

이름을 지정한 다음 아이디어 메뉴 항목을 선택합니다.

노트

언제든지 분실되면 언제든지 보트 에 대해 지정하거나 재설정할 수 있습니다. 이는 모든 슬롯을 지우고 채팅 세션을 다시 시작하는 재설정 흐름에 대한 키워드로 구성되었습니다. 작동 방식을 확인하려면 CDML의 나머지 흐름을 확인합니다.

데모

그러면 이것을 보실 수 있습니다. 예 를 클릭합니다.

데모

다음으로 이메일 주소를 입력하고 [예]를 클릭합니다.

데모

그러면 Luma Bot에서 어떤 제품도 표시하지 않는 방법을 확인할 수 있습니다. 클라우드 기능이 비어 있기 때문에 단일 console.info 호출을 위해 저장합니다.

데모

다른 말을 하기 전에 보트 로그를 통해 Luma Bot 내부에서 일어나고 있는 일에 대한 아이디어를 얻도록 하겠습니다. 보트 메뉴에서 로그 단추를 클릭하고 로그가 로드될 때까지 기다립니다.

데모

장소 소유자 클라우드 함수에서 수행된 Console.info가 로그에 표시됩니다. getProducts 메서드에서 기록된 출력을 볼 수 있어야 합니다. 결과를 클릭하여 출력을 확장하고 userData 인수를 통해 클라우드 기능에서 사용할 수 있는 데이터를 확인합니다. 이름과 이메일이 캡처되었음을 알 수 있습니다.

데모

Luma Bot은 유용하지만 로그 항목만 만드는 많은 클라우드 기능에는 별로 유용하지 않습니다. 이 기능들을 진짜 논리적이고 운이 좋은 것으로 채워야 하는데, 이미 이러한 기능을 준비했습니다.

20.3.3 VSCode에서 클라우드 함수 프로젝트 설정

이전 연습 문제 중 하나 에서 압축을 푼 로컬 데스크탑에 Stackchat 자산의 최신 릴리스를 zip 파일로다운로드했습니다. 데스크탑에 다음 폴더가 있습니다.

데모

그런 다음 Visual Studio 코드 UI에서 adobe-experience-league-module-X.X .X 폴더를 드래그하여 놓아 Visual Studio 코드에서 폴더를 엽니다.

데모

열린 후에는 해당 위치로 이동합니다./cloud-functions 폴더.

vsc_cloudfunctions-folder

이제 터미널(보기 -> 터미널)을 엽니다.

vs_terminal-open

그러면 VS 코드 창 아래쪽에 패널이 열립니다. 그런 다음 일부 프로젝트 종속성을 설치해야 합니다.

노트

터미널에서 명령을 실행할 때 몇 가지 사항을 확인해야 합니다.

  • 최신 버전의 Node가 설치되어 있습니다. Node v12를 실행 중인지 확인하십시오. 최신 버전을 다운로드하여 설치하려면 Node.js를 방문하십시오. 또는 Terminal에서 직접 v12로 업그레이드하거나 설치할 수 있지만 필요에 따라 nvm을 사용하여 노드 버전을 관리하여 버전을 손쉽게 변경하는 것이 좋습니다. 자세한 내용은 여기를 참조하십시오.

  • 작업 중인 디렉토리에 쓸 권한이 있습니다. 그렇지 않은 경우 /usr/local/lib/node_modules/npm/node_modules에 대한 쓰기 액세스 누락 등의 오류가 표시될 수 있습니다. 이러한 경우 문제 및 가능한 해결 방법을 설명하는 유용한 블로그를여기에제공합니다.

  • 올바른 디렉토리에서 작업 중입니다. 다음 단계를 수행하려면 /cloud-functions 디렉터리 내에서 작업해야 합니다. 터미널 내의 pwd (인쇄 작업 디렉토리)를 확인하고 Enter 키를 누릅니다. 인쇄되는 경로가 /cloud-functions 로 끝나는 경우 cd 클라우드 기능을 실행하여 올바른 디렉토리를 설정하지 않으면 모두 설정됩니다. 이제 pwd를 다시 실행하면​이제 /cloud-functions로 끝나는 경로가 표시됩니다.

최신 버전의 Node Package Manager(npm)가 설치되어 있어야 합니다. 설치되어 있는지 확인하기 전에 Node Package Manager(npm)가 설치된 디렉토리에 사용하고 쓸 수 있는 올바른 권한이 있는지 확인해야 합니다.

터미널 창에서 다음 명령을 실행합니다. sudo chown -R $USER /usr/local/lib/node_modules. 현재 컴퓨터에 로그온한 사용자의 암호인 암호가 필요합니다.

vs_npminstall-crunch

다음으로 최신 버전의 npm이 설치되어 있는지 확인해야 합니다. 이렇게 하려면 터미널 창에 npm i -g npm 명령을 입력합니다.

vs_npminstall-crunch

그런 다음 터미널 창에 cd 클라우드 기능을 입력하여 폴더 클라우드 함수로 이동합니다.

vs_npminstall-crunch

다음으로 노드 패키지 관리자(npm)를 사용하여 프로젝트의 종속성을 설치해야 합니다. 이 유형을 수행하려면 터미널 창 내에서 npm i (Node Package Manager 설치)를 입력하고 Enter 키를 누릅니다. npm이 프로젝트의 종속성을 설치하기 시작하는 것을 볼 수 있습니다.

vs_npminstall-crunch

그런 다음 파일을 엽니다 ./src/_constants.ts이 두 줄을 참고하시기 바랍니다.

export const CUSTOM_EVENT_SCHEMA_ID = 'XXXX';
...
export const CUSTOM_EVENT_DATASET_ID = 'XXXX';

vs_cf-src-constants2

아직 이러한 필드를 구성하지 않았기 때문에 Adobe Experience Platform 통합이 올바르게 작동하지 않지만 잠시 후 이 문제로 다시 이동하여 이 문제를 해결할 것입니다. 이제 채팅 보트 기능의 나머지 작업도 사용할 수 있습니다.

NPM 설치가 완료되면 터미널 내에서 npm 실행 빌드를 실행하여 프로젝트를 구축하겠습니다. 이렇게 하려면 터미널 창 내에 npm run build 를 입력하고 Enter 키를 누릅니다.

vs_npminstall-crunch

그러면 라는 폴더가 생성됩니다 ./dist - cloud-functions.js라는 단일 파일을 포함할 것입니다.

vs-dist-cloud-functions

cloud-functions.js 파일을 열고 모든 것을 복사합니다.

Stackchat Studio로 돌아가 클라우드 기능을 사용할 수 있습니다.

ui_cloud-functions-updated

이제 Stackchat Studio의 클라우드 함수 편집기에 해당 코드를 붙여 넣어 Visual Studio 코드에서 cloud-functions.js 파일에서 복사한 코드로 현재 있는 코드를 바꿉니다.

저장​을 클릭합니다.

ui_cloud-functions-updated

그런 다음 왼쪽 탐색 아래쪽에 있는 [게시] 단추를 누릅니다.

스택 채팅 AEP 통합

보트가 게시를 완료한 후 채팅 위젯을 열고 메시지 /재설정 메시지를 보내 채팅 세션을 지우고 다시 시작합니다.

데모

그러면 이것을 보실 수 있습니다. 이름을 지정하고 전송을 클릭합니다.

데모

그런 다음 아이디어 필요한 메뉴 항목을 선택합니다.

데모

그러면 이것을 보실 수 있습니다. 예 를 클릭합니다.

데모

다음으로 이메일 주소를 입력합니다.

데모

예를 클릭하여 이메일 주소를 확인합니다.

데모

그러면 Luma 제품이 채팅 보트 내에 표시됩니다.

데모

루마 보트가 모양을 만들고 있습니다! 곧 Adobe Experience Platform 통합을 통해 경험을 향상시키고 여러 채널에서 대화를 연결하는 데 도움을 드리겠지만, 먼저 고객이 채팅 보트 흐름의 일부로 제품을 좋아하면 트리거되는 Journey Orchestration을 사용하여 여정을 설정해 봅니다.

다음 단계: 20.4 Journey Orchestration을 사용하여 채팅 보트와 상호 작용 후 이메일 후속 작업을 트리거합니다.

모듈 20으로 돌아가기

모든 모듈로 돌아가기

이 페이지에서는