퀘스트2. Bixby로 주변 맛집 찾기

아래 퀘스트 질문과 단계별 가이드를 이용하여 Bixby로 주변 맛집을 조회하는 캡슐을 만들어 보세요. 각 퀘스트는 실습코드의 빈칸을 채우는 형식으로 되어있습니다. 이 부분을 채워넣어 정상적으로 동작하는 캡슐을 만들어 보세요.

1. 퀘스트 개요

이번 퀘스트에서는 Default-init 기능을 활용하여 input 값을 채우는 방법과 JavaScript의 API Reference인 http를 활용하여 Data를 얻어오는 방법, 그리고 Expression Language를 사용하여 Output Data를 표시하는 방법에 알아보도록 하겠습니다.

40KB

playground.restaurant(practice).zip

캡슐 개발 4요소

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

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

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

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

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

2. 퀘스트 미리보기

Modeling

캡슐(playground.restaurant) - models - action 하위 action(GetCurrentPosition)은 default-init 기능을 사용하여 input parameter인 point에 사용자의 현재 위치정보를 저장할 수 있도록 설계되어 있습니다. 가이드를 참조하시어 Error가 발생하는 부분에 코드를 채워보세요.

page2-1 Default Initializations

intent의 goal은 입력받고자 하는 input concept과 type이 일치해야 합니다. 위 링크를 클릭하시면 Default Initializations에 대한 자세한 내용을 확인하실 수 있습니다.

Business Logic

캡슐(playground.restaurant) - code 하위에 getCurrentPosition.js는 현재 위치정보를 저장하고 있는 parameter인 point를 사용하여 주변 맛집 정보에 대한 API 호출을 할 수 있도록 설계되어 있습니다. 현재, API를 호출하여 변수에 저장하는 부분이 비워져 있습니다. 가이드를 참조하시어 API를 호출하여 필요한 데이터를 받아올 수 있도록 코드를 채워보세요.

page2-2 JavaScript API Reference

data 변수 안에 들어갈 정보는 GET 방식을 통한 API 호출로 저장되게 됩니다. 위 링크를 클릭하시면 JavaScript API Reference에 대한 자세한 내용을 확인하실 수 있습니다.

Views

캡슐(playground.restaurant) - resources - base - views 하위에 Restaurant-Result.view.bxb는 Business Logic에서 받아온 데이터를 보여주는 역할을 합니다. Thumbnail-card를 활용하여 주변 맛집의 이름, 주소 그리고 이미지를 보여주도록 설계되어 있습니다. 현재, slot1, slot2 그리고 image-url에 들어갈 value값이 비워져 있습니다. 가이드를 참조하시어 데이터를 정상적으로 화면에서 보여줄 수 있도록 코드를 채워보세요.

page2-3 Expression Language

#{} block을 사용하여 Expression Language를 사용하실 수 있습니다. 위 링크를 클릭하시면 Expression Language에 대한 자세한 내용을 확인하실 수 있습니다.

Training

캡슐(playground.restaurant) - base - ko-KR 하위에 Training 파일에는 한 가지의 Training 데이터("근처 맛집 보여줘")가 존재합니다. 자유롭게 Training 데이터를 추가하셔서 캡슐이 동작하는 범위를 넓혀보세요.

page2-4 Training

Training 데이터 추가는 퀘스트에 포함되지 않습니다. 원하시는 분들만 자유롭게 이용하시면 됩니다.

3. 지금부터 캡슐 개발을 시작하지!

현재, Bixby Studio에 열려있는 주변 맛집 조회 캡슐은 완성되지 않은 상태입니다. 여러분은 코드랩 가이드를 따라가며 주변 맛집 조회 캡슐을 완성해볼 것입니다. 퀘스트 상세 페이지를 참조하셔서 주변 맛집 조회 캡슐을 만들어 보세요.

4. 참고사항

라이브러리 캡슐

실습을 위해 제공되는 캡슐(playground.restaurant)은 Bixby의 라이브러리 캡슐인 viv.geo를 사용하여 사용자의 현재 위치정보(위도, 경도)를 가져오게 됩니다. 그 후 사용자의 위치정보를 기반으로 API 호출을 통해 사용자 주변의 맛집을 조회할 수 있습니다.

사용자의 위치정보를 가져오기 위해서는 capsule.bxb 파일에 2가지 작업이 필요합니다.

Step 1. 라이브러리 캡슐 import

capsule-imports {    
    import (viv.geo) {        
        as(geo)        
        version(9.21.0)
    }
}

라이브러리 캡슐은 기능이 추가되거나 수정이 이루어질 때 업데이트가 될 수 있습니다. 따라서, 최신 버전을 확인하시고 업데이트 하는 것이 중요합니다.

링크 : https://bixbydevelopers.com/dev/docs/dev-guide/developers/library#top

Step 2. Permission 추가

Permissions{    
    user-profile-access
}

사용자의 위치정보는 개인정보에 해당합니다. 따라서, 캡슐에 Permission을 추가하여 개인정보 제공 동의를 받는 것이 중요합니다.

Previous1-5 퀘스트 완료 Next2-1 Default Initializations

Last updated 4 years ago