> For the complete documentation index, see [llms.txt](https://bixbydev.gitbook.io/codelabs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bixbydev.gitbook.io/codelabs/master.md).

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

### 시작.

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

{% file src="/files/-LZjc\_oqK-jpBzWWvGbp" %}
playground burgershop practice code
{% endfile %}

{% file src="/files/-LZjcMuhlrMtRInxs3ou" %}
playground burgershop full code
{% endfile %}

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

###

### Step1. Capsule 개발 기본설정

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

###

### Step2. Modeling 하기

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

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

####

####

#### Concept 생성하기 &#x20;

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

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

* 동영상 가이드 :  [https://youtu.be/geW-ymVZ8eE](https://youtu.be/TZ6HDzfEmTo)

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

* 동영상 가이드 :  <https://youtu.be/WNX_KmfnaOo>

#### Action 생성하기&#x20;

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

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

* 동영상 가이드 :  <https://youtu.be/Ni3tmVo0l0k>

### Step3. Javascript 개발하기

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

* 동영상 가이드 :  <https://youtu.be/jXuiD3pE6c4>

### Step4. endpoint 선언하기

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

* 동영상 가이드 :  <https://youtu.be/Bjcz3ddaBXw>

### Step5. Bixby Views 활용하기

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

* 동영상 가이드 :  <https://youtu.be/Sd-xlzyMNKY><br>

### Step6. 자연어 트레이닝하기&#x20;

#### 주문 발화 입력하여 NL 트레이닝&#x20;

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

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

* 동영상 가이드 :  <https://youtu.be/pKC4BOhzO6w>

###

### 완성.

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

![playground.burgershop Capsule 완성 모습](/files/-LRgkzvNdojETClNUuBu)

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

* Simulator 구동이 완료되면, CodeLabs 튜터에게 퀘스트 완료 Stamp를 받고, 선물도 받으세요.&#x20;
* Private Submission 등 Submission 방법은 CodeLabs 튜터에게 문의하세요.&#x20;
* 추가적인 Bixby Developer Guide는 [https://bixbydevelopers.com](https://bixbydevelopers.com/) 를 참조하세요.
* 추가 문의사항은 <support@bixbydevelopers.com>으로 문의 부탁드립니다.&#x20;