Build Your First App Using Kotlin Multiplatform Mobile(Part 1)
This Story is from the Kotlin- Series, now we will start learn KMM
Directly jump to Part 2
Kotlin Multiplatform became a massive thing in the past year. It allows you to share the code between multiple platforms. Using Kotlin Multiplatform, you can share the same business logic code that applies to various platforms like iOS, Android, and web applications. It will save your time and effort by writing business logic only once. Moreover, you don’t need to maintain and upgrade yourselves for different platforms.
KMM is now in the Alpha stage, but you can start sharing the code. The main advantage of KMM is that it provides a plugin for the android studio. So you can share code, debug, test, run the app on android and iOS devices through the android studio itself. There is no need to switch the IDE to check the iOS/Android device or simulator’s output. That’s a fantastic feature!
Steps Of Creating Your First Kotlin Multiplatform Mobile App
Step 1:
Install Kotlin Multiplatform Mobile plugin in your android studio. After that, open your Android Studio -> Click on configure -> Select plugins
Step 2:
Under the marketplace section, search for “KMM.” Install this plugin and restart your android studio. In my case, I have already installed it.
Step 3:
So you have restarted your android studio. Now click on “Start a new android studio project.”
Step 4:
Under the Phone and table section, Select the “KMM application.” Click Next.
Step 5:
In this section, you will have to set a few information like project name, package name, minimum SDK version, and save location. Click Finish.
Step 6:
Your very first Kotlin Multiplatform Mobile project is ready, and you can start coding.
Step 7:
To run the project in a simulator/device, you need to configure it. Click on the edit configurations button shown in the below image.
Step 8:
Click on the + icon. You will see the android and ios Applications options. Create and configure both by setting a device or simulator on which you would like to run your application. You need to install the Xcode on your machine to see the list of iOS simulators.
Once you configured the iOS and Android devices/simulators. It will show you both configurations. See step 7 for the same. Now let’s run our project on iOS and Android simulators. It’s so cool that we can run our project and see the output on both simulators.
Hierarchy Of Folder Structure
In the below image, you can see the different folders. Android app and ios app folders contain the android and ios app project files, respectively, where you can create the native UI and write the code to bind the data.
Our Kotlin MultiPlatform code goes into the shared folder. You can not only write the code, but you can also write test cases for both platforms. Once you expand the shared folder, you will see the three main folders.
androidMain: Here, you can write the android platform-specific code and use native Android APIs.
iosMain: Here, you can write the iOS platform-specific code and use native iOS frameworks.
commonMain: Here, you can write a shared code
Now, if you go to the greeting file in the commonMain folder. You will see the shared greeting function already written in the file, and this function is used by both iOS and Android apps when we run our project.Let’s make some changes in our shared code and see whether it’s reflecting on our app or not. I’m going to add the reversed() function to reverse the string. This is how our code looks like:
Step 9:
After making this change, when you run your project, you will see the below output:
Thanks for reading this article. Be sure to clap to recommend this article if you found it helpful. It means a lot to me.
