Oracle JET를 이용하여 간단하게 웹 애플리케이션을 생성하는 예제로 Oracle JET에서 제공하는 Nav Bar Starter 탬플릿을 이용하여 웹애플리케이션 프로젝트를 구성하고, Chatbot Hands On Lab에 필요한 교육생들의 환경 정보 관리 및 실습에서 사용하는 Web Channel과 WebView를 연결해 둔 샘플이다.

환경 구성

이 애플리케이션을 구동하기 위해서는 Oracle JET과 JET을 구동하기위해 필요한 패키지들이 사전에 설치되어 있어야 한다.

애플리케이션 다운로드 및 구동

소스를 Git으로 다운 받아 다음과 같이 ojet 커맨드로 구동하면 샘플 애플리케이션이 구동된다.

  • 기본 포트는 8000으로 동작
git clone https://github.com/mee-nam-lee/jet.git
cd jet/training
ojet serve

training/src/bot-client-sdk-js는 Chatbot에서 제공하는 SDK 파일들이다. Oracle Download Site에서 해당 SDK를 받아서 구동할 환경에 맞게 configure 명령어를 수행 후 생성된 소스들을 이 디렉토리에 두면 된다.

로그인을 수행하고 Environment 페이지로 Routing이 되면 Chatting 창이 열리게 된다. 채팅창이 그림과 깉이 보이지 않을 경우에는 App ID 설정 버튼을 클릭하여 유효한 App ID를 입력하게 되면 채팅 아이콘이 보일 것이다.

채팅 버튼을 클릭하여 채팅을 수행한다.

Chatbot Hands on Lab에서 사용하는 WebView도 여기에서 서비스 되는데 이 서비스는 REST API도 함께 구동되어 있어야 하기 때문에 ojet serve로 구동된 Embedded Web Container에서는 테스트해 볼 수 없고 별도의 Express Http Server를 구동 시켜줘야 한다.

기존의 ojet serve로 구동된 프로세스를 종료하고 다음과 같이 수행한다.

cd training/web
npm install
node server.js

위에서 본 것과 동일한 환경이 별도의 HTTP Container에서 구동되는 환경이다. 동일하게 8000 포트에서 동작하므로 Browser에서 http://localhost:8000 으로 접속하면 된다. 로그인 후 WebView URL 링크를 클릭하면 WebView 샘플을 확인해 볼 수 있다. 챗봇에서의 연결은 WebView Hands On Lab을 그대로 따라 하면 된다.

노트북 이미지는 danawa 사이트에서 참고한 것으로 직접 저장된 이미지는 없고 링크로만 연결되어 있음

참고 자료