做一個抓 NMEA 的 Android App：使用 Jetpack Compose 和 Kotlin

NMEA GPS App

學校車聯網第二章，定位系統分析。這個專案需要實現一個 Android 應用程式，顯示三個不同來源的 GPS 定位點。

專案需求

功能要點

第一點：使用 Google Maps API 獲取的座標

第二點：從衛星傳輸的原始 NMEA 資料經演算法處理後的座標

第三點：手動輸入並計算的座標

在開始開發前，我先架設了一個測試網站來驗證演算法的正確性： https://nyust-iov-nmea-maps.web.app

認識 Jetpack Compose

Jetpack Compose 是 Android 推薦的新型 UI 工具包，用於建構原生界面。它能夠簡化及加速 Android 平台上的 UI 開發，透過較少的程式碼、強大的工具和直觀的 Kotlin API，讓應用程式開發更加高效。

官方文件：[Jetpack Compose](https://developer.android.com/jetpack/compose?hl=zh-tw)

專案初始化

在 Android Studio 建立專案時選擇 Jetpack Compose 模板：

Android Studio Project Setup

優化使用者體驗

由於剛開始學習 Kotlin 和 Jetpack Compose，我使用了 google/accompanist 中的 System UI Controller 來簡化系統欄和導航欄的顏色管理。

安裝依賴

repositories {
    mavenCentral()
}
 
dependencies {
    implementation "com.google.accompanist:accompanist-systemuicontroller:<version>"
}

設定系統 UI

val systemUiController = rememberSystemUiController()
val useDarkIcons = !isSystemInDarkTheme()
 
val color = MaterialTheme.colorScheme.background
SideEffect {
    systemUiController.setNavigationBarColor(
        color = color,
        darkIcons = useDarkIcons
    )
 
    systemUiController.setStatusBarColor(
        color = color,
        darkIcons = useDarkIcons
    )
}

如果要在導航列或狀態列下方渲染內容，可以在 setContent 前使用：

window.setFlags(
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
)

**學習筆記**：本作業完成時，我學習 Jetpack Compose 和 Kotlin 不足 1 週，程式碼仍有優化空間。

核心功能實作

初始化變數

宣告三種經緯度座標和鏡頭起始位置：

var isLocationPermissionGranted = mutableStateOf(false)
 
val current_Latitude = mutableStateOf(-1.0)
val current_Longitude = mutableStateOf(-1.0)
 
var nmea_latitude = mutableStateOf(-1.0)
var nmea_longitude = mutableStateOf(-1.0)
 
var fist_latitude = mutableStateOf(-1.0)
var fist_longitude = mutableStateOf(-1.0)

在主 @Composable 方法內宣告：

val current = LatLng(current_Latitude.value, current_Longitude.value)
var manualLatitude by remember { mutableStateOf(-1.0) }
var manualLongitude by remember { mutableStateOf(-1.0) }

NMEA 資料處理

獲取原始定位資料

要抓取原始位置資料需要使用 LocationManager：

private lateinit var locationManager: LocationManager

權限檢查與初始化

private fun InitGPSGettingLogic() {
    // 建立 location manager
    locationManager = getSystemService(Context.LOCATION_SERVICE) as LocationManager
    val gspEnabled = locationManager.isProviderEnabled(LocationManager.GPS_PROVIDER)
    
    if (gspEnabled) {
        Log.d("NMEA_APP", javaClass.name + ":" + "GPS ON :)")
        
        // 檢查定位權限
        if (ContextCompat.checkSelfPermission(
                this,
                Manifest.permission.ACCESS_FINE_LOCATION
            ) != PackageManager.PERMISSION_GRANTED
        ) {
            // 請求權限
            ActivityCompat.requestPermissions(
                this, arrayOf(
                    Manifest.permission.ACCESS_FINE_LOCATION,
                    Manifest.permission.ACCESS_COARSE_LOCATION
                ), 101
            )
        } else {
            // 已有權限，開始監聽
            isLocationPermissionGranted.value = true
            locationManager.requestLocationUpdates(
                LocationManager.GPS_PROVIDER,
                10000,
                10000f,
                this
            )
            locationManager.addNmeaListener(this)
        }
    } else {
        Log.d("NMEA_APP", javaClass.name + ":" + "GPS NOT ON")
    }
 
    // 初始化 fusedLocationClient 
    fusedLocationClient = LocationServices.getFusedLocationProviderClient(this)
}

NMEA 資料解析

NMEA Format

建立資料模型

// data/Location.kt
package dev.koukeneko.nmea.data
 
data class Location(
    val latitude: Double,
    val longitude: Double
)

NMEA 格式轉換工具

// utility/NMEAFormatter.kt
package dev.koukeneko.nmea.utility
 
import dev.koukeneko.nmea.data.Location
 
class NMEAFormatter constructor(
    val nmea: String
) {
    private var latitude: String = ""
    private var longitude: String = ""
    private val nmeaArray = nmea.split(",")
 
    fun getLatLong(): Location? {
        if (nmeaArray[0] == "\$GNGGA") {
            latitude = if (nmeaArray[3] == "S") {
                (nmeaArray[2].toInt() * -1).toString()
            } else {
                nmeaArray[2]
            }
 
            longitude = if (nmeaArray[5] == "W") {
                (nmeaArray[4].toInt() * -1).toString()
            } else {
                nmeaArray[4]
            }
 
            latitude = latitude.substring(0, 2) + '.' + 
                ((latitude.substring(2).replace(Regex("\\."), "")
                    .toInt() / 60).toString()).replace(".", "")
            
            longitude = longitude.substring(0, 3) + '.' + 
                ((longitude.substring(3).replace(Regex("\\."), "")
                    .toInt() / 60).toString()).replace(".", "")
        }
        
        if (latitude == "" || longitude == "") {
            return null
        }
        return Location(latitude.toDouble(), longitude.toDouble())
    }
}

接收 NMEA 訊息

override fun onNmeaMessage(message: String?, timestamp: Long) {
    Log.d("NMEA_APP", javaClass.name + ":" + "[" + timestamp + "] " + message)
    Log.d("NMEA_APP_MESSAGE", message.toString())
 
    val nmea = NMEAFormatter(message.toString()).getLatLong()
    if (nmea != null) {
        nmea_latitude.value = nmea.latitude
        nmea_longitude.value = nmea.longitude
    }
 
    Log.d("NMEA_APP", "nmea_latitude : ${nmea_latitude.value}")
    Log.d("NMEA_APP", "nmea_longitude : ${nmea_longitude.value}")
 
    // 獲取 Google Maps API 定位
    if (ActivityCompat.checkSelfPermission(
            this,
            Manifest.permission.ACCESS_FINE_LOCATION
        ) == PackageManager.PERMISSION_GRANTED
    ) {
        fusedLocationClient.lastLocation
            .addOnSuccessListener { location: Location? ->
                if (location != null) {
                    Log.d("Location", location.toString())
                    current_Latitude.value = location.latitude
                    current_Longitude.value = location.longitude
                } else {
                    Log.d("Location", "Location is null")
                }
            }
    }
}

Google Maps 整合

建立鏡頭位置

// 建立 camera position
val cameraPosition = rememberCameraPositionState {
    position = if (current_Latitude.value != 0.0 && current_Longitude.value != 0.0) {
        CameraPosition.fromLatLngZoom(kaohsiung, 10f)
    } else {
        CameraPosition.fromLatLngZoom(
            LatLng(fist_latitude.value, fist_longitude.value), 10f
        )
    }
    Log.d("CameraLocationUpdate", "${fist_latitude.value},${fist_longitude.value}")
}
 
// 當座標第一次變更時，移動鏡頭
LaunchedEffect(fist_latitude.value, fist_longitude.value) {
    cameraPosition.move(
        CameraUpdateFactory.newCameraPosition(
            CameraPosition.fromLatLngZoom(
                LatLng(fist_latitude.value, fist_longitude.value),
                17f
            )
        )
    )
}

GoogleMap 元件

GoogleMap(
    modifier = Modifier,
    cameraPositionState = cameraPosition,
    uiSettings = settings,
    properties = MapProperties(
        mapType = MapType.SATELLITE,
        isMyLocationEnabled = true,
        isBuildingEnabled = true,
    )
) {
    // NMEA 定位點標記（紅色）
    Marker(
        state = MarkerState(
            position = LatLng(nmea_latitude.value, nmea_longitude.value)
        ),
        visible = nmea_latitude.value != -1.0 && nmea_longitude.value != -1.0,
        title = "NMEA",
        snippet = "${nmea_latitude.value},${nmea_longitude.value}",
        icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED)
    )
 
    // 手動輸入定位點標記（綠色）
    Marker(
        state = MarkerState(
            position = LatLng(manualLatitude, manualLongitude)
        ),
        visible = manualLatitude != -1.0 && manualLatitude != -1.0,
        title = "Manual",
        snippet = "${manualLatitude},${manualLongitude}",
        icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN)
    )
}

UI 元件設計

座標資訊顯示

Text("GMS API Location", fontWeight = FontWeight.Medium, color = MaterialTheme.colorScheme.primary)
Text("${current_Latitude.value},${current_Longitude.value}")
 
Text("NMEA Location", fontWeight = FontWeight.Medium, color = MaterialTheme.colorScheme.primary)
Text("${nmea_latitude.value},${nmea_longitude.value}")
 
Text("Manual Location", fontWeight = FontWeight.Medium, color = MaterialTheme.colorScheme.primary)
Text("${manualLatitude},${manualLongitude}")

手動輸入對話框

Input Dialog

var openDialog by remember { mutableStateOf(false) }
var editMessage by remember { mutableStateOf("") }
var editMessage1 by remember { mutableStateOf("") }
 
val focusManager = LocalFocusManager.current
 
if (openDialog) {
    AlertDialog(
        onDismissRequest = { openDialog = false },
        title = { Text("Change manual location") },
        text = {
            Column {
                OutlinedTextField(
                    value = editMessage,
                    onValueChange = { editMessage = it },
                    label = { Text("Latitude") },
                    keyboardOptions = KeyboardOptions.Default.copy(
                        keyboardType = KeyboardType.Number,
                        imeAction = ImeAction.Next
                    ),
                    shape = RoundedCornerShape(16.dp),
                    keyboardActions = KeyboardActions(
                        onDone = {
                            focusManager.moveFocus(FocusDirection.Down)
                            try {
                                manualLatitude = editMessage.toDouble()
                            } catch (e: Exception) {
                                // 忽略錯誤輸入
                            }
                        }
                    )
                )
 
                OutlinedTextField(
                    value = editMessage1,
                    onValueChange = { editMessage1 = it },
                    label = { Text("Longitude") },
                    keyboardOptions = KeyboardOptions.Default.copy(
                        keyboardType = KeyboardType.Number,
                        imeAction = ImeAction.Done
                    ),
                    shape = RoundedCornerShape(16.dp),
                    keyboardActions = KeyboardActions(
                        onNext = {
                            focusManager.clearFocus()
                            try {
                                manualLongitude = editMessage1.toDouble()
                            } catch (e: Exception) {
                                // 忽略錯誤輸入
                            }
                        }
                    )
                )
            }
        },
        confirmButton = {
            Button(
                onClick = {
                    try {
                        manualLatitude = editMessage.toDouble()
                        manualLongitude = editMessage1.toDouble()
                    } catch (e: Exception) {
                        // 忽略錯誤輸入
                    }
                    openDialog = false
                }
            ) {
                Text("Confirm")
            }
        },
        dismissButton = {
            Button(onClick = { openDialog = false }) {
                Text("Cancel")
            }
        }
    )
}