.svg)
.svg)
4부: 모바일 앱 개발
이전 회차에서는 라즈베리파이의 온습도 센서 데이터를 와탭 프로젝트에 저장하는 방법을 알아보았습니다. 이번에는 와탭의 Open API를 활용하여 저장된 데이터를 조회하고, Flutter를 사용해 모바일 앱에서 시각화하는 방법을 살펴보겠습니다. 개발 환경으로는 Android 시뮬레이터를 사용할 예정입니다.
준비물
1) Open API
와탭 Open API를 사용하기 위해서는 다음 세 가지 정보가 필요합니다:
- 계정 API 토큰
- 프로젝트 API 토큰
- 프로젝트 코드
자세한 설정 방법은 와탭 공식 문서를 참고하시기 바랍니다.
2) MXQL
MXQL은 와탭의 성능 데이터(메트릭스)를 조회하기 위한 와탭의 전용 쿼리 언어입니다. 3부에서 살펴본 것처럼, MXQL을 사용하면 수집된 데이터를 차트로 시각화할 수 있습니다.
위의 예제와 같이 저장된 데이터를 단순 조회 할 수 있습니다.
3) MXQL Open API
Open API를 통하여 MXQL을 호출하고 결과를 수신 할 수 있습니다. (MXQL Open API 사용 안내)
MXQL Open API 테스트
준비된 정보를 바탕으로 데이터를 조회해 보는 테스트를 진행합니다.
- x-whatap-token : 프로젝트 API Key
- x-whatap-pcode : 프로젝트 ID
- stime : 조회 시작 시간(UNIX epoch time, millisecond)
- etime : 조회 종료 시간(UNIX epoch time, millisecond)
최근 7일간 데이터를 3개 제한으로 조회합니다.
결과는 위와 같습니다.
모바일 앱 개발
Flutter
Flutter는 구글이 개발한 크로스 플랫폼 프레임워크입니다. 단일 코드베이스로 iOS와 Android 앱을 모두 개발할 수 있어 효율적입니다. 특징은 다음과 같습니다:
- 다트(Dart) 프로그래밍 언어 사용
- 풍부한 내장 위젯으로 빠른 UI 개발 가능
- 핫 리로드 기능으로 실시간 코드 수정 및 확인 가능
- 네이티브 수준의 높은 성능 제공
도구
Flutter 개발을 위해 다음 도구들을 설치해야 합니다:
- Flutter SDK: 개발 PC의 운영체제에 맞는 버전 설치
- Android Studio: 공식 Android IDE
- Android Studio 플러그인:
- Dart 플러그인
- Flutter 플러그인
자세한 설치 방법은 Flutter 공식 웹사이트의 가이드를 참조하시기 바랍니다.
프로젝트 생성
빈 프로젝트를 빌드 후 실행
Android Studio에서 새로운 Flutter 프로젝트를 생성하면 기본적으로 카운터 앱 예제가 포함됩니다. 이 예제 코드는 lib/main.dart 파일에서 확인할 수 있습니다.
라이브러리 설치
프로젝트에 필요한 주요 라이브러리는 다음과 같습니다:
- Dio: HTTP 통신을 위한 강력한 라이브러리
- fl_chart: 데이터 시각화를 위한 차트 라이브러리
이 두 라이브러리를 사용하여 와탭의 API를 호출하고 온습도 데이터를 차트로 표시하겠습니다.
main.dart 화면 정리
lib/main.dart 를 간결하게 정리합니다.
자동 생성되는 불필요한 코드를 정리한 뒤 빈 화면입니다.
Open API 테스트 코드 작성
와탭 Open API 통신 코드를 작성합니다.
와탭 Open API 테스트 코드를 작성합니다.
AndroidStudio 콘솔에 수신한 데이터가 정상 출력되는 것을 확인합니다.
실제 동작 코드 수정
데이터 모델 클래스를 작성합니다.
차트가 표시되는 UI 화면을 수정합니다.
마무리
이번 프로젝트에서는 IoT 디바이스의 데이터를 와탭에 저장하고 모바일 앱으로 시각화하는 전체 과정을 살펴보았습니다. 현재 구성은 기본적인 데모를 위한 것으로, 실제 활용을 위해서는 다음과 같은 기능을 추가로 고려해볼 수 있습니다:
- 시간/날짜 범위 선택
- 데이터 필터링
- 상세 분석 도구
이 프로젝트의 전체 소스 코드는 GitHub 저장소에서 확인하실 수 있습니다.
와탭은 사용자 데이터 저장, 알림 설정, Open API를 통한 데이터 조회 등 다양한 기능을 제공합니다. 이러한 기능들을 활용하면 기존의 서버 모니터링, APM 솔루션과 연계하여 더욱 포괄적인 모니터링 시스템을 구축할 수 있습니다.
