퀘스트1. Bixby로 음료수 뽑기

아래 퀘스트 질문과 단계별 가이드를 따라서 Bixby로 자동판매기에서 음료수를 뽑는 캡슐을 만들어 보세요. 각 퀘스트는 실습코드의 빈칸을 채우는 형식으로 되어있습니다. 이 부분을 채워넣어 정상적으로 동작하는 캡슐을 만들어 보세요.

1. 퀘스트 개요

이번 퀘스트에서는 Bixby의 캡슐 개발 4요소를 따라가며, 음료수를 뽑는 로직의 간단한 자동판매기 캡슐을 만들어 볼 것입니다. 이 자동판매기 캡슐의 시나리오는 유저가 말하는 음료수 이름을 받아서 내부 DB에 저장이 되어 있는 음료수 정보를 가져와 캡슐 사용자에게 보여주는 것입니다.

16KB

playground.vendingmachine(practice).zip

캡슐 개발 4요소

캡슐 개발에는 크게 4개의 요소로 분류됩니다. Modeling, Business Logic, Views 그리고 Training입니다.

Modeling: 사용자의 말과 의도를 파악할 수 있도록, 캡슐의 구조를 잡는 부분입니다. 이 부분은 Bixby Language를 통하여 구현하게 됩니다.

Business Logic: 이해된 사용자의 말을 토대로 사용자가 원하는 일을 처리하는 부분입니다. 이 부분은 Javascript로 구현하게 됩니다.

Views: 입력 혹은 처리된 결과등을 UI/UX 적으로 구성하는 부분입니다. 이 부분은 Bixby Language로 구현하게 됩니다.

Training: 캡슐이 사용자의 말을 잘 알아들을 수 있도록 학습하는 부분입니다.

2. 퀘스트 미리보기

퀘스트 미리보기에서는 앞으로 진행될 codelab 퀘스트에 대한 간략한 설명이 포함되어 있습니다. 각 단계별로 무엇을 할 것인지 미리 알아봅니다. 이 부분에서는 각 내용을 간략히 읽어보시고 각 단계로 가서 실제로 코딩을 진행하여 보시기 바랍니다.

Modeling

캡슐(playground.vendingmachine_ex)내의 action(OrderDrink)은 input concept인 name과 drinkStatus를 사용자의 발화로부터 받아옵니다. 그 input을 기반으로 output concept인 Result를 반환하도록 구성이 되어 있습니다. 가이드를 참조하시어 Error가 발생하는 부분에 코드를 채워보세요.

자동판매기 캡슐은 음료수의 정보를 제공합니다. 이를 위하여, 사용자의 말로부터 음료수 이름을 받아들일 수 있도록 모델링을 구성해야 합니다.

page1-1. Modeling

위 링크를 클릭하시면 Modeling에 대한 자세한 내용을 확인하실 수 있습니다.

Business Logic

캡슐(playground.vendingmachine_ex)내의 OrderDrink.js는 음료수 데이터를 가져와 사용자가 원하는 음료수의 정보를 뽑아내도록 설계되어 있습니다. 현재, 음료수 데이터 불러오는 부분이 비워져 있습니다. 가이드를 참조하시어 API를 호출하여 필요한 데이터를 받아올 수 있도록 코드를 채워보세요.

자동판매기 캡슐에서는 모델링을 통하여 받아들인 음료수 이름을 가지고 음료수 데이터를 찾아서 사용자에게 보여줄 것입니다.

page1-2. Business Logic

위 링크를 클릭하시면 Business Logic에 대한 자세한 내용을 확인하실 수 있습니다.

Views

캡슐(playground.vendingmachine_ex)내의 Result_result.view.bxb는 결과 데이터를 보여주는 역할을 합니다. Cell-card를 활용하여 음료수 정보를 사용자에게 보여주도록 설계되어 있습니다. 현재, Views 구성에 필요한 선언문과 데이터로부터 값을 가져오는 value값 부분이 비워져 있습니다. 가이드를 참조하시어 데이터를 정상적으로 화면에서 보여줄 수 있도록 코드를 채워보세요.

자동판매기 캡슐의 Views에서는 음료수 정보를 사용자에게 어떠한 UI/UX로 보여줄지를 결정하게 됩니다.

page1-3. Views

위 링크를 클릭하시면 Views에 대한 자세한 내용을 확인하실 수 있습니다.