퀘스트1. Bixby로 햄버거 주문하기

아래 퀘스트 질문과 단계별 가이드를 이용하여 Bixby로 햄버거를 주문하는 Capsule을 만들어보세요 각 퀘스트의 코드들은, 어느 정도 이미 만들어져 있습니다. 하지만, 가이드에서 "===> [실습 코드에 추가해보세요.]" 표시가 있는 부분의 코드는 실습코드에서 빠져있는데요. 이 부분을 실습 코드에 채워서 동작하는 Capsule로 만들어 보세요

시작.

이번 퀘스트에서는, Bixby의 Concept과 Action을 선언하는 법과 Simulator로 Capsule을 테스트하는 법을 알아 보겠습니다.

10KB

playground.burgershop-quest1.zip

archive

playground burgershop practice code

6KB

playground.burgershop.zip

archive

playground burgershop full code

야구팬인 정연이는, 2018년 프로야구 삼성라이온즈 경기를 관람하기로 했습니다. 아침부터 바쁘게 움직인터라, 시간에 맞추어 출발할 수 있었습니다. 그런데, 아차, 야구장에서 먹을 햄버거를 깜빡하고 말았습니다. 정연이는 친구들과 햄버거를 주문하기 위해서 햄버거 가게에 들렀는데요. Driving Thru로 햄버거 주문을 해보고 싶어합니다. 자, 지금부터 정연이를 위해서, 햄버거를 주문하는 Bixby Capsule을 만들어 볼까요?

Step1. Capsule 개발 기본설정

Bixby Developer Studio와 Burgershop Capsule개발은 위한 기본 코드는, CodeLabs 진행공간에 이미 준비되어 있습니다. 부담없이, Bixby Developer Studio와 Capsule 개발 방법을 체험해 보세요.

Step2. Modeling 하기

Modeling은, 정연이가 말한 내용(발화)을 통해 정확히 무슨일을 처리하고 싶어하는지 인지할 수 있도록 하는 작업입니다. 이를 위해서 먼저, 정연이가 사용할 수 있는 "발화 시나리오"들을 정리하고, 발화에서 사용한 Input Concept과 Output Concept을 정리해 보겠습니다.

발화 시나리오	Input Concept	Output
햄버거 2개 주문해줘	햄버거 (name) 2 (integer)	주문리스트 출력 햄버거 2개가 주문되었습니다. (text)
프렌치후라이 1봉지 부탁해	프렌치후라이(name) 1 (integer)	주문리스트 출력 프렌치후라이 1개가 주문되었습니다. (text)
햄버거 1개랑 콜라 1개 주문해	햄버거 (name) 1 (integer) 콜라 (name) 1 (integer)	주문리스트 출력 햄버거 1개 콜라 1개 주문되었습니다. (text)

Concept 생성하기

===> [실습 코드에 추가해보세요.]

자 그럼, 생성한 Concept폴더에, Input Concept과 Output Concept을 생성하여 저장해보겠습니다. Concept은, 정연이의 말한(발화) 전체 내용 중에서, "발화 인식을 위해서, 중요하게 고려되어야 하는 값(Input Concept)"과 "발화의 결과를 리턴할 때 사용할 값(Output Concept)"으로 생각하시면 됩니다. 정연이가 "햄버거 2개 주문해줘" 라고 말했을 때(발화), 우리는 햄버거 (FoodName)과 2(NumberOfFood)개를 중요한 명명으로 사용하고자 합니다. 그럼 이 두가지 Input Concept부터 먼저 선언해 봅시다.

• 동영상 가이드 : https://youtu.be/geW-ymVZ8eE

Input Concept에 대한 설계는 끝났네요. 그런데 정연이의 주문결과를 다시 한번 확인하여 알려주는 Output Concept도 만들어 보겠습니다. 이 Output Concept은 앞으로 만들 Action의 Output으로 사용될 예정입니다.

• 동영상 가이드 : https://youtu.be/WNX_KmfnaOo

Action 생성하기

==> [실습 드에 추가해보세요.]

이렇게 하여, Input Concept에 대한 준비는 모두 끝났네요. 자 그럼, 생성한 Concept을 사용하여 사용자 발화를 처리할 Action도 만들어 보겠습니다. Action을 선언하는 작업은, "정연이가 한 말이 어떤 목적을 가지고, 어떤 명명들을 사용하여, 어떤 작업을 하기를 원하는지를" Bixby가 잘 이해하도록 정의하는 작업이라고 생각하시면 됩니다. 우리는 정연이의 여러가지 음식주문을 받아서, 주문 결과를 알려주는 Action을 만들어 보겠습니다. 아래와 같이, Action을 선언해 보겠습니다.

• 동영상 가이드 : https://youtu.be/Ni3tmVo0l0k

Step3. Javascript 개발하기

지금부터는 Javascript를 활용하여, "빅스비가 알아들은 말의 목적에 맞는, 실제 처리를 진행할 수 있도록 하는" 개발 작업을 진행하도록 하겠습니다. 아래 영상과와 같이, 코드 처리를 하게 되면, Bixby가 정연이가 말한 요청을 처리하는 실제 작업에 대한, 구현이 완료됩니다.

• 동영상 가이드 : https://youtu.be/jXuiD3pE6c4

Step4. endpoint 선언하기

지금부터는, endpoint 선언을 하여, Modeling한 내용 중 Action과 Javascript 부분을 서로 연결하여 보겠습니다. 먼저 resource 폴더 밑에 endpoint 파일을 만들고, 아래 영상과 같이, 코드를 작성해보겠습니다.

• 동영상 가이드 : https://youtu.be/Bjcz3ddaBXw

Step5. Bixby Views 활용하기

burgershop Capsule을 위한 기본적인 코드 처리는 모두 끝났네요. 하지만, Bixby가 burgershop Capsule의 처리결과를 단말에 내려줄때 적절한 Layout을 표현하기 위해서, Bixby Views기능을 사용해보겠습니다.

• 동영상 가이드 : https://youtu.be/Sd-xlzyMNKY

Step6. 자연어 트레이닝하기

주문 발화 입력하여 NL 트레이닝

==> [실습 코드에 추가해보세요.]

이제 Bixby Capsule이 정연이의 말을 잘 알아듣고 처리할 코드 준비가 완료되었습니다. 이 캡슐 코드가 잘 동작하도록 자연어 트레이닝을 진행하고, Simulator를 구동해보겠습니다. 자연어 발화를 입력한 후, 트레이닝하고 Simulator를 구동하는 방법을 알아보겠습니다.

• 동영상 가이드 : https://youtu.be/pKC4BOhzO6w

완성.

아래와 같은, Simulator실행결과가 나왔나요?

playground.burgershop Capsule 완성 모습

수고하셨습니다. 이제 정연이는 Bixby burgershop 캡슐로 즐겁게 햄버거 주문을 할 수 있게 되었습니다. 그럼 이제, CodeLabs튜터님께 실행결과를 보여주세요.

• Simulator 구동이 완료되면, CodeLabs 튜터에게 퀘스트 완료 Stamp를 받고, 선물도 받으세요.

• Private Submission 등 Submission 방법은 CodeLabs 튜터에게 문의하세요.

• 추가적인 Bixby Developer Guide는 https://bixbydevelopers.com 를 참조하세요.

• 추가 문의사항은 [e-mail]으로 문의 부탁드립니다.