22.3 EXP 뉴스 실시간 대시보드 만들기

목표

  • Project Firefly가 AEP의 정보를 보여주는 사용자 지정 실시간 대시보드를 제공하는 방법을 이해합니다.
  • 이 샘플 대시보드를 만들고 실행하는 방법을 알아봅니다.

전제 조건

이 연습을 시작하기 전에 컴퓨터에 NodeJS 및 Adobe I/O CLI를 설치하고 설정했는지 확인합니다. 자세한 내용은 연습 21.1 - 환경 설정을 참조하십시오.

22.3.1 소스 코드 다운로드

이 프로젝트의 소스 코드는 내부적으로 https://git.corp.adobe.com/IODevEnablement/poc-aep-realtime-dashboard에서 사용할 수 있으며 Adobe I/O 팀의 Duy Nguyen이 개발합니다.
그러나 github 저장소에서 코드를 복제하거나 다운로드하는 방법을 모든 사람이 이해할 수 있도록 이 지원 모듈에서 직접 ZIP 파일로 코드를 사용할 수 있도록 했습니다. github를 사용하는 데 익숙한 경우 여기에서 코드를 복제할 수도 있습니다.

이 지원 모듈 내에서 소스 코드를 받으려면:

  • 여기에서 다운로드합니다.
  • 컴퓨터의 위치에 ZIP 파일을 추출합니다.

22.3.2 실시간 대시보드 만들기

실시간 대시보드를 만들려면 Firefly 앱을 다음과 같이 하십시오.

압축 파일을 압축 해제한 디렉토리(예: 22.3.1)으로 이동합니다.poc-aep-realtime-dashboard-master.

디렉토리에서 npm install을(를) 실행하여 응용 프로그램에 필요한 모든 패키지를 설치합니다.

npminstall

연습 22.2에서 만들고 배포한 [ldap]HelloWorld 프로젝트에서 .env 환경 파일(Adobe I/O 런타임 환경에 대한 모든 구성 포함)을 복사합니다.

예:Mac OS용 cp <rmaurHelloWorld directory>/.env .
또는 copy <rmaurHellowWorld directory>\.env .(Windows의 경우)

환경 파일은 소위 숨겨진 파일이므로 Finder/탐색기에 파일이 표시되지 않을 수 있으므로 명령줄을 사용하여 파일을 복사하는 것이 좋습니다.

cp

좋아하는 텍스트 편집기 또는 명령을 사용하여 .env 환경 파일을 검사할 수 있습니다. Adobe I/O 네임스페이스 및 인증 코드를 정의해야 합니다.

more

aio app deploy을(를) 사용하여 앱을 배포합니다. 다시, 표시되는 출력은 아래 스크린샷과 다를 수 있지만 완료 상태가 표시될 때까지 기다리십시오. 앱이 이제 온라인 ??​입니다.

배포

이제 최종 대시보드 응용 프로그램을 aio app deploy 명령의 출력에 있는 마지막 URL로 사용할 수 있습니다.예: https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://133309-rmaurexpnews-development.adobeio-static.net/index.html

  • URL 복사.
  • 새 Uncognito 브라우저 창을 열고 https://experience.adobe.com에 로그인합니다.
  • 올바른 조직에 있는지 확인합니다(오른쪽 위 모서리 선택).--envName--.
  • URL을 붙여 넣습니다. 대시보드 앱을 사용할 수 있게 됩니다.

aep 대시보드 앱

Project Firefly EXP News Realtime Dashboard 앱이 해당 정보를 어디에서 수신할지 알려주지 않았기 때문에 아직 정보를 제공하지 않습니다. Adobe 실행 서버측 포워딩에서 이전 활성 모듈이 연관성이 있는 다음 연습을 수행합니다.

이제 이 연습을 마쳤습니다.

다음 단계:22.4 Connect EXP 뉴스 데이터 수집을 EXP 뉴스 실시간 대시보드

모듈 22로 돌아가기

모든 모듈로 돌아가기

이 페이지에서는