LogiStream 차량 위치 공차 시스템 - 모바일 앱

React Native 기반의 크로스 플랫폼(Android/iOS) 모바일 앱입니다. 웹뷰를 통해 https://logistream.kpslp.kr 사이트를 표시하고, 실시간 위치 정보를 수집하여 서버로 전송합니다.

주요 기능

1. 웹뷰 통합

• https://logistream.kpslp.kr 사이트를 네이티브 앱 내에서 표시
• 웹과 네이티브 간 양방향 통신 지원
• 로그인/로그아웃 상태 동기화

2. 위치 추적

• GPS를 통한 실시간 위치 정보 수집
• 백그라운드에서도 지속적인 위치 추적
• 10초 간격으로 자동 업데이트 (설정 변경 가능)
• 고정밀 위치 정보 (위도, 경도, 정확도, 고도, 방향, 속도)

3. 서버 통신

• 위치 정보를 서버로 자동 전송
• 사용자 정보와 함께 전송 (userId, userName, userEmail)
• 디바이스 정보 포함 (플랫폼, 버전)
• JWT 토큰 기반 인증 지원

4. 권한 관리

• Android: 위치 권한, 백그라운드 위치 권한
• iOS: 위치 권한 (항상 허용)
• 앱 실행 시 자동 권한 요청

프로젝트 구조

logistream-mobile/
├── App.tsx                 # 메인 앱 컴포넌트
├── index.js               # 앱 진입점
├── package.json           # 의존성 관리
├── tsconfig.json          # TypeScript 설정
├── babel.config.js        # Babel 설정
├── metro.config.js        # Metro 번들러 설정
├── android/               # Android 네이티브 코드
│   ├── app/
│   │   ├── src/main/AndroidManifest.xml
│   │   └── build.gradle
│   └── build.gradle
└── ios/                   # iOS 네이티브 코드
    ├── Podfile
    └── LogiStream/
        └── Info.plist

설치 및 실행

사전 요구사항

1. Node.js (v18 이상)
2. React Native 개발 환경
   • Android: Android Studio, JDK 11
   • iOS: Xcode (macOS만 해당)

설치

# 의존성 설치
npm install

# iOS 의존성 설치 (macOS만)
cd ios && pod install && cd ..

Android 실행

# Android 에뮬레이터 또는 실제 기기에서 실행
npm run android

iOS 실행

# iOS 시뮬레이터 또는 실제 기기에서 실행 (macOS만)
npm run ios

웹-네이티브 통신 API

웹에서 네이티브로 메시지 전송

웹 페이지에서 다음 함수들을 사용할 수 있습니다:

// 로그인 성공 시 호출
window.notifyLoginSuccess({
  userId: "user123",
  userName: "홍길동",
  userEmail: "user@example.com",
  token: "jwt_token_here"
});

// 로그아웃 시 호출
window.notifyLogout();

// 현재 위치 요청
window.requestCurrentLocation();

// 위치 추적 시작
window.startLocationTracking();

// 위치 추적 중지
window.stopLocationTracking();

네이티브에서 웹으로 메시지 수신

웹 페이지에서 네이티브 메시지를 수신하려면:

window.addEventListener('nativeMessage', function(event) {
  const data = event.detail;
  
  switch(data.type) {
    case 'NATIVE_INFO':
      console.log('플랫폼:', data.platform);
      console.log('위치 권한:', data.hasLocationPermission);
      break;
      
    case 'LOCATION_UPDATE':
      console.log('현재 위치:', data.location);
      break;
  }
});

서버 API 엔드포인트

앱은 다음 형식으로 위치 정보를 서버로 전송합니다:

엔드포인트: POST https://logistream.kpslp.kr/api/location

요청 헤더:

Content-Type: application/json
Authorization: Bearer {token}

요청 본문:

{
  "userId": "user123",
  "userName": "홍길동",
  "userEmail": "user@example.com",
  "location": {
    "latitude": 37.5665,
    "longitude": 126.9780,
    "accuracy": 10.5,
    "altitude": 50.0,
    "heading": 180.0,
    "speed": 5.5,
    "timestamp": 1700000000000
  },
  "deviceInfo": {
    "platform": "android",
    "version": "13"
  }
}

설정 변경

위치 업데이트 간격 변경

App.tsx 파일에서 다음 상수를 수정:

const LOCATION_UPDATE_INTERVAL = 10000; // 밀리초 단위 (기본값: 10초)

서버 API 엔드포인트 변경

App.tsx 파일에서 다음 상수를 수정:

const API_ENDPOINT = 'https://logistream.kpslp.kr/api/location';

웹사이트 URL 변경

App.tsx 파일에서 다음 상수를 수정:

const WEBSITE_URL = 'https://logistream.kpslp.kr';

APK/IPA 빌드

Android APK 빌드

cd android
./gradlew assembleRelease
# APK 위치: android/app/build/outputs/apk/release/app-release.apk

iOS IPA 빌드

Xcode에서:

1. ios/LogiStream.xcworkspace 파일 열기
2. Product > Archive 선택
3. Distribute App 선택

문제 해결

Android 권한 오류

• AndroidManifest.xml에 필요한 권한이 모두 포함되어 있는지 확인
• Android 10 이상에서는 백그라운드 위치 권한이 별도로 필요

iOS 위치 권한 오류

• Info.plist에 위치 사용 설명이 포함되어 있는지 확인
• iOS 13 이상에서는 "항상 허용" 권한 필요

웹뷰 통신 오류

• 웹 페이지가 HTTPS로 제공되는지 확인
• JavaScript가 활성화되어 있는지 확인
• 브라우저 콘솔에서 에러 메시지 확인

라이선스

이 프로젝트는 차량 위치 공차 시스템을 위한 내부 사용 목적으로 개발되었습니다.

지원

문제가 발생하거나 질문이 있으시면 개발팀에 문의해주세요.