22.2 Project Firefly 소개

목표

  • Project Firefly 이해.
  • Project Firefly를 사용하여 샘플 프로젝트를 설정하는 방법을 알아봅니다.

전제 조건

이 연습을 시작하기 전에 시스템에 NodeJS 및 Adobe I/O CLI를 설치 및 설정해야 합니다. 자세한 내용은 연습 22.1 - 환경 설정을 참조하십시오.

22.2.1 개인 프로젝트 설정

Project Firefly를 시작하기 위해 Adobe I/O의 콘솔을 사용하여 개인 프로젝트를 설정할 것입니다.

Adobe ID을 사용하여 Adobe 개발자 콘솔에 로그인합니다.

새 Adobe 개발자 콘솔 시작 마법사로 환영 받은 경우 건너뛰기 를 클릭하거나 다음​을 클릭하여 단계별로 진행합니다.

시작 마법사

오른쪽 상단에 있는 올바른 조직을 선택해야 합니다. --envName--

조직

템플릿에서 프로젝트 만들기​를 클릭합니다.

템플릿 찾아보기 마법사 화면에서 Project Firefly​를 선택합니다.

템플릿 Firefly

템플릿 프로젝트 설정 마법사 화면에서 다음 세부 정보를 제공합니다.

템플릿1

  • 프로젝트 제목: [ldapname] Realtime Dashboard for EXP News 여기서 [ldapname] 는 고유한 Adobe LDAP 이름(예: rmaur Realtime Dashboard for EXP News.
  • 앱 이름: [ldapname]EXPNews 여기서 [ldapname] 는 고유한 Adobe LDAP 이름(예: rmaurEXPNews.
  • 각 작업 공간​에 런타임 포함이 선택되었는지 확인합니다.

+ 작업 공간 추가​를 클릭하여 추가 작업 공간을 추가합니다.

작업 공간에 대해 다음 세부 사항을 제공합니다.

  • 작업 공간 이름: Development.

  • 작업 공간 설명: Development workspace for EXP News RT Dashboard.

템플릿2

저장​을 클릭하여 새 작업 공간을 저장합니다.

저장​을 클릭하여 프로젝트를 저장합니다.

프로젝트가 만들어지고 시간이 지나면 개요 화면에 프로젝트가 표시됩니다.

개요

Project Firefly 응용 프로그램을 위해 만든 특정 런타임 환경에 대한 자세한 내용을 보려면 개발 타일에서 개발​을 클릭하십시오.

개요 개발

응용 프로그램의 일부로 만들어진 런타임 네임스페이스 환경을 볼 수 있습니다. 이 예에서 는 133309-rmaurexpnews-development 입니다.

이제 Project Firefly 애플리케이션에 필요한 Adobe I/O 런타임 환경 만들기를 완료했습니다.

22.2.2 Adobe I/O CLI에서 로그인

샘플 Project Firefly 응용 프로그램을 만들려면 Windows 또는 Mac OS에서 명령줄을 사용해야 합니다. 아래 사용된 스크린샷은 Mac OS X를 기반으로 하지만 실행된 명령은 동일합니다.

Mac OS에서 터미널 또는 Windows에서 명령 프롬프트 열기

첫 번째 프로젝트를 만들 드라이브의 특정 위치로 이동합니다. 예: 개발

% cd Development

로그인, 사용

% aio login

TerminalLogin

Adobe ID으로 로그인하라는 브라우저 창이 열립니다. 창이 자동으로 열리지 않은 경우 브라우저에서 인쇄된 URL을 복사하여 붙여 넣어 로그인할 수도 있습니다.

% aio login
Visit this url to log in:
https://aio-login.adobeioruntime.net/api/v1/web/default/applogin?xxxxxxxx

BrowserLoggedIn

로그인하면 브라우저 창을 닫고 터미널로 돌아갈 수 있습니다. 터미널에 줄이 인쇄되어 있습니다 사용자 토큰입니다. 구성이 구성에 자동으로 저장되므로 Project Firefly가 토큰을 사용하여 Adobe 개발자 콘솔에 연결할 수 있습니다.

TerminalLoggedIn

22.2.3 Adobe I/O CLI에서 새 앱 Bootstrap

Mac OS의 터미널 또는 Windows의 명령 프롬프트에서 새 앱 만들기를 시작합니다. 이 앱의 이름은 [ldap]HelloWorld입니다.

예:

% aio app init rmaurHelloWorld

앱을 부트스트랩 및 구성하는 방법에 대한 몇 가지 질문이 표시됩니다.

  • 조직​을 선택합니다. 조직 --envName--을 빠르게 검색하려면 조직 뒤에 첫 번째 문자를 입력합니다. 그런 다음 결과 목록에서 --envName-- 을 선택합니다.

1단계

  • 프로젝트를 선택합니다. 프로젝트를 빠르게 검색하려면 LDAP 이름을 입력한 다음 Experience 22.2.1에서 만든 프로젝트를 선택합니다(예: rmaur을 검색한 다음 결과 목록에서 rmaur Realtime Dashboard for EXP News을 선택하십시오.)

1단계

작업 공간을 선택합니다. 연습 22.2.1의 일부로 만든 Development 작업공간을 선택합니다.

1단계

이 프로젝트에 대해 어떤 Adobe I/O 앱 기능을 활성화하시겠습니까?

포함할 구성 요소를 선택합니다. Actions: Deploy Runtime actions를 선택합니다.

1단계

어떤 유형의 샘플 작업을 생성하시겠습니까?

생성할 작업 유형을 선택합니다. Generic를 선택합니다.

1단계

프로젝트에 어떤 유형의 UI를 추가하시겠습니까?

생성할 템플릿을 선택합니다. React Spectrum 3를 선택합니다. 이것은 디자인 시스템인 Adobe 스펙트럼을 사용하여 앱을 빌드함을 나타냅니다.

1단계

외부 API에 액세스하는 방법을 보여주는 새 샘플 작업을 만들려고 합니다.

이 작업의 이름을 어떻게 지정하시겠습니까? 질문에 답합니다. Return 키를 눌러 기본값 (generic)을 적용합니다.

1단계

클라우드 이벤트 형식으로 메시지를 만들고 Adobe I/O 이벤트에 게시하는 새 샘플 작업을 만들려고 합니다.

이 작업의 이름을 어떻게 지정하시겠습니까? 질문에 답합니다. Return 키를 눌러 기본값 (publish-events)을 적용합니다.

1단계

이제 마법사에 응용 프로그램에 필요한 코드가 생성되며 ✔ App initialization finished!을 사용하여 성공적으로 완료되었음을 표시해야 합니다.

1단계

새로 만든 앱 디렉터리 [ladp]HelloWorld로 이동하여 생성된 파일을 나열합니다.
% cd rmaurHelloWorld
% ls (Mac OS) 또는
> dir (Windows)

1단계

21.2.4 앱 빌드 및 배포

애플리케이션을 빌드/테스트/배포하는 방법에는 여러 가지가 있습니다. 하지만 이 지원을 위해 간단한 방법으로 Experience Cloud 셸을 사용하여 앱을 바로 배포합니다.

앱을 빌드하고 배포하려면:

Mac OS의 터미널 또는 Windows의 명령 프롬프트에서 앱의 일부로 작성된 디렉토리([ldap]rmaurHelloWorld)에 있는지 확인한 다음 다음을 입력합니다.
% aio app deploy

1단계

출력은 케이스와 Project Firefly에서 발생하는 변경 사항에 따라 다를 수 있지만, 먼저 빌드 성공 메시지를 보고, 앱이 다음에 최종 메시지​와 함께 잠시 후에 실행되는 ??을(를) 배포할 준비가 되었습니다. 완료 : 앱이 이제 온라인 ??​입니다.

앱이 배포되면 최종 앱을 볼 URL이 2개 있습니다.

Experience Cloud 셸을 사용하는 URL을 복사합니다. 이 URL은 으로 표시되어 있습니다. Experience Cloud 셸에서 배포된 응용 프로그램을 보려면:…. URL은 Adobe I/O 개발 작업 공간 이름을 고유 식별자로 사용합니다.

새 시크릿 브라우저를 열고 https://experience.adobe.com으로 이동합니다. 로그인한 후 오른쪽 상단에 있는 올바른 조직을 선택해야 합니다. --envName--

2단계의 URL을 브라우저에 붙여 넣습니다. 모두 정상이면 다음 화면이 표시됩니다.

2단계

왼쪽 레일에서 앱 작업​을 선택합니다. 애플리케이션 백엔드 작업 실행​에서

  • 작업 (필수) 드롭다운 목록에서 일반​을 선택합니다.
  • 호출​을 클릭합니다.
  • results 상자에 이 호출 결과가 표시됩니다. 더 많은 콘텐츠를 보려면 확대하십시오.

3단계

이제 첫 번째 Project Firefly 앱을 성공적으로 배포하고 이 연습을 완료했습니다.

다음 단계: 22.3 EXP 뉴스 실시간 대시보드 작성

모듈 22로 돌아가기

모든 모듈로 돌아가기

이 페이지에서는