Full-stack Compose Kotlin Multiplatform Masterclass - KMP

Explore how Kotlin Multiplatform with Compose Multiplatform enables sharing 100% of business logic and UI across Android, iOS, web, and desktop, and compare native look with efficiency.

Discover why compose multiplatform accelerates UI development by writing once for all platforms, using Android UI skills across iOS and web, backed by JetBrains' production-ready Kotlin libraries.

Explore the daily pulse GitHub repository by Petros Efthymiou, featuring branch-based solutions from the KMP Masterclass to a common compose UI across Android, iOS, desktop, and web.

Open the project in Android Studio and integrate the compose multiplatform plugin and material dependencies across modules, using a shared version reference for consistency and syncing.

Configure compose multiplatform plugin in the project and apply it to the module. Add runtime, foundation, resources, and material dependencies in commonMain and sync Gradle for Android and iOS UI.

Explore composing a multiplatform shared UI by creating a common hello world screen with a composable text inside a material themed scaffold, usable on Android and iOS.

Create a main iOS view controller from compose multiplatform to display the hello world app in the iOS simulator, using xcode for the iOS project.

Create a compose view that extends ui view controller representable to host the main iOS Kotlin file's view controller. Connect the content view to instantiate and render the compose UI.

Align dependency versions for compose multi-platform, update kotlin to 1.9.22 and coin to A36 Wasm alpha two, remove the Skia plugin, then clean, sync, and verify iOS and Android builds.

Complete the first section and dive into the composed, multi-platform ecosystem. Start sharing UI between platforms as the real deal begins, and prepare for the next section.

Port the user interface from Jetpack Compose to Compose Multiplatform for mobile, enabling a single UI to run on both Android and iOS.

Porting the Android Jetpack Compose UI to the multi-platform module, you will port shared composable functions and tackle navigation, view model injection, and image loading with Camel instead of Coil.

Port the about screen to the shared compose multi-platform module and paste it into the shared screens directory. Then test by building and running on Android and iOS.

Port and refactor the sources screen in a Kotlin Multiplatform project, replacing Android-only view model injection with Coin Compose, and wiring HTTP fetch, database storage, and UI display.

Test the sources screen on iOS using Android Studio, then port implementation to Android with Compose Multiplatform, ensuring the HTTP call, database storage, and article retrieval on both platforms.

Port and adapt the article screen for compose multiplatform, replacing android-specific dependencies with koin injection, removing coil and swipe refresh, and creating a shared error UI for reuse.

Demonstrates implementing pull to refresh with compose material, managing refreshing state, and triggering a network fetch via the view model to refresh articles in a lazy column.

Integrate the camel image library version 0.9.4 into a full-stack compose kotlin multiplatform project to load web images, replacing coil with an async painter resource for article images.

Test the articles screen on Android and iOS, confirming loading from a local database and pull-to-refresh, while addressing experimental API build issues and preparing navigation for the next video.

Apply a shared theme with colors and typography to a material surface in compose multiplatform. Implement navigation across screens using the Voyager library, because the navhost controller has limitations.

Integrate the voyager library into a compose multiplatform project by adding the voyager navigator to common main, syncing Gradle, and extending screens from the voyager screen interface for navigation.

Master the Voyager navigation flow by converting screens into classes that implement the Voyager screen interface, composing screen content, and injecting view models for article, about, and sources screens.

Apply navigation between the Voyager screens by obtaining a navigator instance and using push to move from the article screen to the source and about screens, then pop to return.

Test navigation across Android and iOS by building and running the app, then use action buttons to reach source and about screens, verifying back navigation on both platforms.

Cleanup removes android-specific UI, unused screens and dependencies, syncs Gradle, and confirms the app runs without issues; plan to add screen transition animations in the next video.

Apply screen transition animations with the Voyager transitions library, add the Voyager transitions dependency, wire it into the navigator using the slide transition, and test on Android and iOS.

Compare compose multiplatform with native UIs for Android and iOS, weighing shared UI up to the data layer against native Jetpack Compose and SwiftUI, and consider budget and time-to-market.

Unlock the power of compose multiplatform to enable the daily pulse app to run as a desktop application across Mac OS, Microsoft Windows, and Linux.

Configure a new desktop target in the common Gradle file, declare desktop main dependencies, and sync to enable CIO and SQLite driver support for the Kotlin multiplatform app.

Explore adding the actual desktop platform implementation for Kotlin Multiplatform, wiring the platform class and coroutine scope using the dispatcher IO, aligned with Android and iOS patterns.

Implement the desktop platform class for the full-stack Kotlin Multiplatform masterclass, retrieving OS name and version via system properties, applying defaults, and logging with println.

Implement the desktop database driver factory using the jdbc sqlite driver, configure the database url and the daily pulse database schema, and commit the changes to git.

Build a desktop Koin dependency graph by creating a database module with SQL driver and daily pulse database, then initialize Koin with shared modules like articles, sources, and network.

Create a desktop project by adding a desktop directory and build.gradle.js, set up kotlin multiplatform and compose multiplatform, and configure the JVM main source set.

Configure the desktop block in gradle part 2 to declare the main class and set distributions and target formats for macOS, Windows, and Linux.

Implement the desktop main class to run the app on startup, configure the desktop directory, set up a Kotlin build directory, and sync Gradle to build the module.

Initialize the desktop main by calling the init coin function to set up the app graph. Create a window with remember window state; exit on close.

Create a Gradle desktop run configuration and test the desktop app, ensuring the UI mirrors the mobile experience, with coroutines, dependency injection, http calls, and a local database.

Complete the final section by expanding your multi-platform skill set with web capabilities for the Pulse app, enabling it to run in any browser as a web app.

Port the app to the web using JavaScript as the target, declare the web target, configure core dependencies, and make the database optional for browser environments.

Implement the web base view model for Kotlin multiplatform by adding the JS main target, providing a coroutine scope with the default dispatcher, and aligning with the desktop implementation.

Implement the web platform class for the Kotlin multiplatform project, using placeholders and a log string with OS name, OS version, device model, and density, and log with print lines.

Implement the SQL driver factory across multiplatform targets, converting the expected return type to nullable for web, and update actual platform implementations and dependency injection accordingly.

Explore how removing the database affects the Kotlin Multiplatform architecture, from the article repository and data sources to the nullable database and network-first fallback process.

Make the database nullable and return an empty list when absent to prevent null pointer exceptions, isolating changes in the data source layer.

Implement the web coin initializer by adding a Kotlin file and configuring the dependency graph with shared coin modules, excluding the database module.

Create a new web directory with a build.gradle.css file and wire the web project into Gradle setup alongside Android, iOS, and desktop apps, enabling Kotlin Multiplatform and Compose Multiplatform plugins.

Prepare the web build by adding Kotlin and JS tags, configure common webpack with daily pulse.js, and include Compose runtime, Foundation, UI, Material, and Coin libraries in the web build.gradle.

Refactor dependency injection by manually passing the coin instance to the article screen and its content, enabling articles view model access across web, android, ios, and desktop via coin compose.

Pass the coin instance to the application bar and source screen to inject the review model and view models, using platform-specific coin injection or a manual init for web.

Set up web assets for a compose multiplatform app by creating index.html, a resources directory, style.css, and wiring the Daily Pulse JS bundle to a canvas.

Configure a new Gradle setup to run the web app from Android Studio, then verify the Compose multi-platform app builds and runs in Chrome with a responsive web page.

Visit Petros efthymiou.com to access educational materials and discount coupons. Subscribe to the newsletter to receive new materials, free articles, and social updates.