Build bicycle tracker using Kotlin - setting up the client (Part 2)

After laying down the groundwork for the backend of my cycle tracking app, my next step is to establish the basic code structure for the client side. I plan to utilize the Multiplatform Compose framework, which allows for the creation of cross-platform user interfaces using Kotlin.

Prerequisite

To kickstart the project and begin development with the Multiplatform Compose framework. I have installed Android Studio along with all the other tools as outlined in the official Multiplatform Compose documentation.

What my bicycle tracking client should do?

Currently, if you browse through the Apple App Store or Google Play Store, you’ll find numerous applications that simulate bicycle computers or trackers, offering a wide range of features. However, many of these features drain battery quickly, often requiring additional charging for long rides to maintain continuous operation. For the initial version of my bicycle tracker app, I aim to keep things simple with minimal features. Here’s what I envision:

• The client should continuously send the current geographical location to the server.
• The client should be able to track the elapsed time of the activity.

These two features represent the bare essentials. While displaying the current location on a map or incorporating additional metrics like speed and average speed would be beneficial, they’re of lower priority and can be addressed in subsequent iterations. My primary focus is to keep the client as streamlined as possible for this initial release.

Setting up Multiplatform Compose project

I utilized a convenient project generator for Multiplatform Compose to create the project structure. My primary objective is to develop a client for Android devices. Since I possess older Android phones, deploying the app on them is considerably simpler compared to iPhones.

After generating the initial project structure using the Multiform Compose project generator, I proceeded to implement a basic UI for my bicycle tracker Android client.”

Constructing this simple UI is straightforward, even for me as a complete beginner in mobile development. The main file where this UI is defined appears as follows::

@Composable
@Preview
fun App() {
    MaterialTheme {
        var hours by remember { mutableStateOf("00") }
        var minutes by remember { mutableStateOf("00") }
        var seconds by remember { mutableStateOf("00") }
        Column(
            modifier = Modifier.padding(all = 5.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            ActivityCommands(modifier = Modifier.padding(all = 5.dp))
            TotalElapsedTime(hours = hours, minutes = minutes, seconds = seconds)
        }
    }
}

Based on the provided code snippet, the main screen comprises two components. The first is the *ActivityCommands, which consists of buttons for starting and stopping the activity. The second component is TotalElapsedTime, responsible for displaying the current elapsed time.

There are two mutable states representing hours, minutes, and seconds of the total elapsed time. These components are structured similarly to the “main” component, utilizing Kotlin Composable functions for building the Android UI. For instance, the *ActivityCommands component looks like this:

@Composable
internal fun ActivityCommands(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.spacedBy(5.dp)

) {
    Row(
        modifier = modifier,
        horizontalArrangement = horizontalArrangement
    ) {
        Button(onClick = { }) {
            Text("Start")
        }
        Button(onClick = { }) {
            Text("Pause")
        }
        Button(onClick = { }) {
            Text("Stop")
        }
    }

}

Currently, these components do not contain any logic for starting/stopping activity or changing the elapsed time. This functionality will be added in a future post by incorporating corresponding backend endpoints. The objective of this post is to establish the basic project structure for the client-side codebase. Changes described in this post you can see here.