14. 튜토리얼 & 실습
초급 튜토리얼
Lucy Studio가 처음이라면 아래 튜토리얼부터 시작하세요. 화면 하나를 처음부터 끝까지 만들어보면서 위젯 배치, 속성 설정, 스크립트 작성까지 핵심 흐름을 10~15분 안에 익힐 수 있습니다.
외부 API로 앱 만들기
공공 API 연동 예시 — 대한민국 축제 정보 (Korea Festival)
공공데이터포털에서 제공하는 축제 정보 공공 API를 연동해서 만든 목록 화면입니다. ListView로 축제 사진과 축제명(한글/영문), 위치, ContextID, 마지막 업데이트 날짜를 표시하고, 하단에 페이지네이션(1 / 14)을 두어 다음 페이지를 불러올 수 있게 구성했습니다.
이 화면은 Lucy Studio의 Tutorial01 프로젝트를 Clone한 후, 16_Tutorials 폴더에 저장된 .lfp 파일을 참조할 수 있습니다.
목록의 축제 행(row)을 클릭하면 화면 오른쪽에 상세 정보를 보여주는 Side 패널(End Drawer)이 열리도록 스크립트가 구성되어 있습니다.
function lsvPlace_onSelected(idx)
{
$log.e("selected : " + idx);
lsvPlace.current = idx;
const filename = "16_Tutorials/Tutorial_API_SIDE";
$form.openEndDrawer(filename, {data:txtContextID.text, width:300});
showFlag = !showFlag;
}
lsvPlace_onSelected(idx)는 ListView lsvPlace에서 행을 선택했을 때 호출되는 이벤트 함수입니다. 선택된 인덱스를 lsvPlace.current에 저장한 뒤, $form.openEndDrawer()로 16_Tutorials/Tutorial_API_SIDE 화면을 오른쪽 Side 패널로 열고, 선택된 행의 txtContextID 텍스트 값을 data 파라미터로 전달해 상세 화면에서 그대로 사용할 수 있게 합니다(width는 패널 너비, showFlag는 열림/닫힌 상태를 표시하는 토글 변수).
공공 API란? 정부·지자체·공공기관이 공공데이터포털(data.go.kr) 등을 통해 무료로 제공하는 REST API입니다. 대부분 회원가입 후 신청하면 발급되는 서비스 키(인증키)를 요청에 포함해야 호출할 수 있습니다.
Lucy Studio에서 외부 API 호출하기
화면(페이지) 스크립트에서 $http 전역 객체로 REST API를 직접 호출할 수 있습니다. get / post / put / patch / delete / head / options / multipart 메서드를 제공하며, 모든 메서드는 콜백 함수를 (상태 코드, 응답 헤더, 응답 본문) 세 인자로 호출합니다. 응답 본문은 문자열로 전달되므로, JSON 응답이면 JSON.parse()로 직접 파싱해야 합니다.
$http.get(
"https://apis.data.go.kr/B551011/EngService2/searchFestival2" +
"?serviceKey=YOUR_SERVICE_KEY&MobileOS=ETC&MobileApp=LucyStudio&_type=json" +
"&numOfRows=10&pageNo=1",
{},
function (status, headers, body) {
if (status !== 200) {
$log.i("API Error! : " + status);
return;
}
var items = JSON.parse(body).response.body.items.item;
$log.i("Received item count : " + items.length);
// items 를 리스트뷰에 표시하는 방법은 아래 참고
}
);
$http 요청은 비동기로 처리됩니다. 응답이 오기 전에 화면이 먼저 그려질 수 있으니, 위젯 갱신은 반드시 콜백 함수 안에서 실행하세요.
응답으로 받은 항목 배열은 $http 콜백 안에서 직접 반복문을 돌며 ListView에 채워 넣습니다. 아래는 대한민국 관광공사 축제 정보 API 응답 필드를 실제 위젯 속성에 대입하는 코드로, lsvPlace.clear()로 기존 목록을 비운 뒤 items 배열을 순회하면서 lsvPlace.add()로 행을 추가하고 lsvPlace.current로 그 행을 가리켜 각 위젯 속성을 채웁니다.
lsvPlace.clear();
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!item) continue;
lsvPlace.add();
lsvPlace.current = i;
txtTitle.text = (item.title || "");
txtAddr.text = (item.addr1 || "");
txtContentID.text = (item.contentid || "");
imgFirst.setProperty("image.url", item.firstimage || "");
txt_startDate.text = item.eventstartdate;
txt_endDate.text = item.eventstartdate;
}
같은 API를 여러 화면에서 반복해서 호출하거나 요청/응답 구조를 저장해두고 재사용하고 싶다면, 매번 $http로 직접 호출하는 대신 Studio의 Provider 기능으로 등록해두는 방법도 있습니다. Provider와 이를 화면에 연결하는 방법은 아래 금융 및 비즈니스 앱 예제 섹션에서 다룹니다.
금융 및 비즈니스 앱 예제
**Provider(데이터 프로바이더)**는 REST API·소켓 등 외부 데이터 소스에 이름을 붙여 Studio에 등록해두는 것이고, **DataSet(데이터 세트)**는 그 Provider가 주고받는 데이터 구조(요청/응답 스키마)를 화면 위젯에 반복 바인딩할 수 있는 형태로 뽑아낸 것입니다. 하나의 Provider를 여러 DataSet·여러 화면에서 재사용할 수 있습니다.
일반적인 사용 흐름은 다음과 같습니다.
- Provider 등록 — 이름, 호출 URL, HTTP 메서드, 요청/응답 스키마를 입력해 데이터 소스를 하나 만듭니다. 실시간 시세처럼 서버가 값을 계속 밀어주는(push) 소스도 등록할 수 있습니다.
- DataSet 생성 — 새로 스키마를 만들거나, 이미 만든 Provider의 응답 스키마를 그대로 가져와(Quick Create) DataSet을 만듭니다.
- 위젯에 바인딩 — DataSet의 필드를 화면 위젯(텍스트, 테이블, 차트 등)에 드래그해서 연결하면, Provider가 받은 값이 바뀔 때마다 위젯이 자동으로 갱신됩니다.
실시간 시세 화면 예시 (증권사 Provider 연동)
증권사에서 제공하는 Provider를 DataSet에 연결해서 실시간 시세 데이터를 화면에 바인딩한 예시입니다. 위 LiveStockPrices 화면처럼, Provider가 수신한 값이 DataSet을 통해 실시간으로 화면에 갱신되는 구조입니다.
이 화면은 Lucy Studio의 Tutorial01 프로젝트를 Clone한 후, 16_Tutorials 폴더에 저장된 .lfp 파일을 참조할 수 있습니다.
이 화면은 LucyStudio의 DataSet 개념을 적용한 예시이며, 현재 Closed Alpha 버전에는 DataSet/Provider 기능이 반영되어 있지 않습니다.