시나리오에서 공공데이터포털 API 데이터 사용하기
이전 강의를 통해 공공데이터포털 Open API 연동 설정을 완료했다면 이제 실제로 데이터를 앱 화면에 표현할 차례예요. 이번 글에서는 플렉스튜디오 시나리오에서 공공데이터포털 Open API를 연결해 데이터를 호출하고 표시하는 방법을 소개할게요. 예시로 제로페이 가맹점 목록을 조회하는 앱을 만들어보겠습니다.
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/01/5-1%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8F%AC%ED%84%B8%20%ED%99%9C%EC%9A%A9%20%EC%8B%A0%EC%B2%AD%ED%95%98%EA%B8%B0_%EC%95%B1%EC%86%8C%EA%B0%9C.gif?width=800&height=450&name=5-1%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8F%AC%ED%84%B8%20%ED%99%9C%EC%9A%A9%20%EC%8B%A0%EC%B2%AD%ED%95%98%EA%B8%B0_%EC%95%B1%EC%86%8C%EA%B0%9C.gif)
👉 플렉스튜디오 유튜브에서 영상 강의 보러 가기
1단계: 이벤트 설정
- 스텝 구성
- 데이터 호출을 반복할 그룹에 데이터 연결 - 카테고리 : list
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/03/5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_01.jpg?width=800&height=450&name=5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_01.jpg)
- 하위 컨트롤(예: 텍스트나 버튼 등)에는 컬렉션키 연결
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/03/5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_02.jpg?width=800&height=450&name=5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_02.jpg)
- 이벤트를 설정할 스텝(Step) 선택
- 스텝 이벤트 사용 활성화 - 이벤트 발생 시점 : 최초 시작전 (Init) / 이벤트명 : API조회
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/03/5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_03.jpg?width=800&height=450&name=5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_03.jpg)
4. 이벤트 연결 버튼 클릭
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/03/5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_04.jpg?width=800&height=450&name=5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_04.jpg)
2단계: 시나리오에서 API 호출 설정
- API 항목 추가
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/03/5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_05.jpg?width=800&height=450&name=5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_05.jpg)
-
- API명 : 가맹점 정보 / 모듈명 : 조회
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/03/5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_06.jpg?width=800&height=450&name=5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_06.jpg)
3. 보내는 데이터 제거
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/03/5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_07.jpg?width=800&height=450&name=5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_07.jpg)
4. 받는 데이터 카테고리명 : list / 덮어쓰기 설정
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/03/5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_08.jpg?width=800&height=450&name=5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_08.jpg)
3단계: 디버깅을 통한 API 호출 확인
- 시나리오 우측 상단의 화살표( ▶ ) 클릭하여 디버거 실행
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/03/5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_09.jpg?width=800&height=450&name=5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_09.jpg)
2. 우측 디버거에서 호출 로그 확인 가능
-
- 스텝 시작 전 이벤트 실행 → 지정한 API 호출 → 카테고리에 반영 → 데이터를 화면에 표현
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/03/5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_10.jpg?width=800&height=450&name=5-3%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B8%B0%EB%B3%B8%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A1%B0%ED%9A%8C_10.jpg)
다음 강의: 페이징 기능으로 데이터 더 효율적으로 표현하기
지금까지는 연동된 API 데이터를 시나리오에 간단하게 표시하는 과정을 살펴보았어요. 다음 강의에서는 페이징 기능을 적용해 더 많은 데이터를 효율적으로 다루는 방법을 알려드릴게요. 다음 포스팅에서 만나요!