회사 프로젝트· 벤치링크· 2024

fompet — 반려동물 인바디 측정 서비스

Flutter 네이티브 셸 + Vue 3 · 4개 프로젝트 통합 + 하드웨어 BLE 통신

역할: 프론트엔드 + Flutter 통합 개발

FlutterDartVue 3ViteTailwindBLE

회사 코드 (NDA) — BLE 통신 핵심 코드와 아키텍처로 갈음

Headline

Flutter 셸이 BLE로 인바디 장비와 통신, WebView로 Vue 측정 UI를 호스팅

반려동물 인바디 측정을 위한 4개 프로젝트(Flutter 앱 + Vue 태블릿/병원/어드민) 통합. 하드웨어 개발사가 제공한 BLE 프로토콜로 장비와 통신하고, Flutter ↔ WebView ↔ Vue 3-tier 메시지 디스패치 구조 구현.

Problem

· 측정 장비는 하드웨어 개발사가 BLE 프로토콜만 제공 — 모바일에서 직접 통신 어댑터가 필요
· 측정 UI는 Vue로 작성되어 있고, 카카오/구글/애플 로그인은 네이티브 SDK 필요
· 고객용/병원용/어드민이 각각 다른 UI/플로우 — 하지만 동일한 측정 백엔드를 공유

Action

· Flutter 네이티브 셸을 통신 어댑터 + WebView 컨테이너로 설계
· flutter_reactive_ble 기반 BLE 스캔/연결/캐릭터리스틱 디스커버리 + 양방향 메시지 디스패치
· Vue(WebView) ↔ Flutter ↔ 장비 3-tier 메시지 구조 표준화 (scannedDevices / connectionStatus / bluetoothDisconnected / bluetoothError)
· 4개 프로젝트(fompetmobileapp / fompet-mobile-tablet / fompet-hospital / fompet-mobile-admin)를 develop 브랜치 + Jenkins CI/CD로 통합 배포

Result

· Flutter ↔ Vue 양방향 메시지 표준화로 측정 UI 변경 시 네이티브 영향 없음
· 하드웨어 BLE 통신 + 소셜 로그인 + WebView 호스팅을 단일 Flutter 앱으로 통합

fompet 4-프로젝트 + BLE 통신

fompetmobileapp

Flutter · Dart · BLE · WebView (네이티브 셸)

fompet-mobile-tablet

Vue 3 · Vite (Flutter WebView 내부)

fompet-hospital

Vue 3 · Vite (병원 전용)

fompet-mobile-admin

Vue 3 · TypeScript (어드민)

↳ 통신: 하드웨어 개발사 제공 BLE 프로토콜 — Flutter ↔ 장비 ↔ Vue WebView 양방향 데이터 핸드오프

Core Code

핵심 코드 스니펫

BLE 스캔 · 연결 · 메시지 디스패치 (실제 코드)

// 1) WebView(Vue) → Flutter 명령 수신
switch (jsonData["action"]) {
  case "scanDevices":      checkBluetoothStatus();         break;
  case "connectDevice":    connectToDeviceById(jsonData["id"]); break;
  case "stopScan":         stopScan();                     break;
  case "disconnectDevice": disconnectBluetooth();          break;
  case "checkConnection":  checkIfDeviceConnected();       break;
}

// 2) BLE 디바이스 스캔 (10초 타임아웃, 모든 기기)
_scanSubscription = _ble.scanForDevices(withServices: []).listen(
  (device) {
    if (device.name.isNotEmpty &&
        !deviceList.any((d) => d['id'] == device.id)) {
      deviceList.add({"name": device.name, "id": device.id});
      _dispatchToJavaScript("scannedDevices", deviceList);
    }
  },
  onError: (error) => stopScan(),
);

// 3) 디바이스 연결 + 서비스/캐릭터리스틱 자동 탐색
_ble.connectToDevice(id: deviceId).listen((state) {
  if (state.connectionState == DeviceConnectionState.connected) {
    discoverServicesAndCharacteristics(deviceId);
  } else if (state.connectionState == DeviceConnectionState.disconnected) {
    _dispatchToJavaScript("bluetoothDisconnected", null);
  }
});

WebView에서 보낸 명령을 Flutter가 BLE 통신으로 변환하고, 결과를 다시 JS로 dispatch. flutter_reactive_ble 사용.

다른 프로젝트 보기