232 lines
5.5 KiB
Markdown
232 lines
5.5 KiB
Markdown
# 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만 해당)
|
|
|
|
### 설치
|
|
|
|
```bash
|
|
# 의존성 설치
|
|
npm install
|
|
|
|
# iOS 의존성 설치 (macOS만)
|
|
cd ios && pod install && cd ..
|
|
```
|
|
|
|
### Android 실행
|
|
|
|
```bash
|
|
# Android 에뮬레이터 또는 실제 기기에서 실행
|
|
npm run android
|
|
```
|
|
|
|
### iOS 실행
|
|
|
|
```bash
|
|
# iOS 시뮬레이터 또는 실제 기기에서 실행 (macOS만)
|
|
npm run ios
|
|
```
|
|
|
|
## 웹-네이티브 통신 API
|
|
|
|
### 웹에서 네이티브로 메시지 전송
|
|
|
|
웹 페이지에서 다음 함수들을 사용할 수 있습니다:
|
|
|
|
```javascript
|
|
// 로그인 성공 시 호출
|
|
window.notifyLoginSuccess({
|
|
userId: "user123",
|
|
userName: "홍길동",
|
|
userEmail: "user@example.com",
|
|
token: "jwt_token_here"
|
|
});
|
|
|
|
// 로그아웃 시 호출
|
|
window.notifyLogout();
|
|
|
|
// 현재 위치 요청
|
|
window.requestCurrentLocation();
|
|
|
|
// 위치 추적 시작
|
|
window.startLocationTracking();
|
|
|
|
// 위치 추적 중지
|
|
window.stopLocationTracking();
|
|
```
|
|
|
|
### 네이티브에서 웹으로 메시지 수신
|
|
|
|
웹 페이지에서 네이티브 메시지를 수신하려면:
|
|
|
|
```javascript
|
|
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}
|
|
```
|
|
|
|
**요청 본문**:
|
|
```json
|
|
{
|
|
"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` 파일에서 다음 상수를 수정:
|
|
|
|
```typescript
|
|
const LOCATION_UPDATE_INTERVAL = 10000; // 밀리초 단위 (기본값: 10초)
|
|
```
|
|
|
|
### 서버 API 엔드포인트 변경
|
|
|
|
`App.tsx` 파일에서 다음 상수를 수정:
|
|
|
|
```typescript
|
|
const API_ENDPOINT = 'https://logistream.kpslp.kr/api/location';
|
|
```
|
|
|
|
### 웹사이트 URL 변경
|
|
|
|
`App.tsx` 파일에서 다음 상수를 수정:
|
|
|
|
```typescript
|
|
const WEBSITE_URL = 'https://logistream.kpslp.kr';
|
|
```
|
|
|
|
## APK/IPA 빌드
|
|
|
|
### Android APK 빌드
|
|
|
|
```bash
|
|
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가 활성화되어 있는지 확인
|
|
- 브라우저 콘솔에서 에러 메시지 확인
|
|
|
|
## 라이선스
|
|
|
|
이 프로젝트는 차량 위치 공차 시스템을 위한 내부 사용 목적으로 개발되었습니다.
|
|
|
|
## 지원
|
|
|
|
문제가 발생하거나 질문이 있으시면 개발팀에 문의해주세요.
|
|
|