From the course: Kotlin Multiplatform Development

Building our first multiplatform app - Kotlin Tutorial

From the course: Kotlin Multiplatform Development

Start my 1-month free trial Buy for my team

Building our first multiplatform app

“

- [Narrator] In this video, we'll take a hands-on approach to building your first multiplatform app, guiding you through the process of using the custom template that you just downloaded. By the end of this session, you'll have a working app running on multiple platforms and a clear understanding of how to make impactful changes to its functionality. First, let's open the template that you just downloaded. You'll need to uncompress the zip file into a directory. In most cases, you can double-click the file in the file manager of your operating system, and this will start the process. Next, we're going to open the project from within Android Studio. If needed, we may be required to allow permission to let it build the project. Then we want it to Gradle sync and choose the project view instead of Android, which is what we always use for Kotlin Multiplatform development. First, I'm going to go into the Gradle directory and update some versions. This should be 8.11.1. It's the current today, and we'll update these to the current latest, 8.9.1. If you hit Option + Enter, you can change to the latest version of each and then Gradle sync and wait for it. If you press the elephant button up here, that will sync your project with the Gradle files. It will also, if you've changed the Gradle files at all for a sync now option with the button at the top, and this is fine at the bottom there. Now we are going to add any missing run configurations. I'll go to edit configurations, add, application, we call it Desktop, select the Java version, desktopMain, the main class, and hit OK. And then we'll add the web assembly version, which is Gradle. We call this Web, and this has to be exactly this, wasmJSBrowserDevelopment, which is the branch we're running, then Run -t, just like that, and hit OK. Now one by one, we can run each of these targets. You try to run them all at once, you may run into some problems, so we're going to wait until the emulator starts to start the next one. As you can see, I've got Android running here. Close that now. Here's JVM. Says Hello, Java. This is running in Mac OS right now. I am going to then run web. Here's web running, and now I can actually run iOS last. And there's iOS. Okay, I'm now running all four projects side by side. Now you may notice I ran into some problems earlier on trying to build and run all four of them at the same time. It does seem that there is a issue in Android Studio where it doesn't seem to want to execute all four at once. You may need to try potentially stopping a task to start another and see if that helps. But right now I have all four running and I can now demonstrate how you would add some changes to your project. So after going through the steps for each platform, we should have our project running on Mac OS, an Android emulator, an iOS simulator, and a web browser. If your device is not running Mac OS, you can instead run only on Android, web, and your desktop operating system. Let's make a small change to our project and observe that the results have changed in each. As you can see, I now have all four running at once. I have made a small change and changed the text to read Hello LinkedIN Learning! in the shared code, and it's reflected in all four. You've now seen how to set up, run, and customize your first Kotlin Multiplatform app using the custom template. By following our steps, you successfully built a very simple project for multiple platforms. Additionally, you made a small change and observed its impact across all of the platforms, reinforcing the power of this shared code. With this setup complete, you're ready to dive deeper into Kotlin Multiplatform development and we're going to explore some more advanced features.

Contents