Hello 👋. Today I am going to create and documented building application for my portfolio using Compose Multiplatform. Compose Multiplatform is the latest tech from Jetbrain which enable developer to build app in various platform (Android, iOS, Web, Desktop) using one source code base.
I will be trying to recreate a simple version from https://brittanychiang.com/ website. Her website & resume is pretty impressive.
First step we will need to download the project structure. Go to https://kmp.jetbrains.com/, create new project structure & download it.
Open the project file from Android Studio, it will show the project folder :
composeApp
|- androidMain
|- commonMain
|- iosMain
|- wasmJsMain
We will work mostly on commonMain folder, because this folder will be the share code between all platform. Other folder will be source code for specific platform.
To run the mobile version (Android or iOS), we can configure it on Run/Debug configuration and Run it. My Android Studio is Koala 2024, the Run/Debug configuration look like this :
If we run it on Android, it will show
If we run on Iphone simulator will show :
To run it on web, choose Gradle tab on Android Studio side bar. Under composeApp — Tasks — kotlin browser — wasmJsBrowserDevelopmentRun
The app looks working fine on all platform. Now we can start to customize it per our need.
For the next part, we will try to edit the menu on the frontpage.
