KMM News App A cross-platform news application built using Kotlin Multiplatform for sharing code across Android and iOS, with platform-specific UI built using Jetpack Compose for Android and SwiftUI for iOS.
Table of Contents Introduction Architecture Project Structure Screenshots Getting Started Explanation of Code License Introduction The KMM News App is a demonstration of a Kotlin Multiplatform project where the business logic and data layers are shared between Android and iOS platforms, while the UI is implemented natively using Jetpack Compose and SwiftUI.
Architecture This project follows the MVVM (Model-View-ViewModel) architecture pattern:
Model: Represents the data and business logic of the application. In this project, the NewsRepository is part of the Model layer, handling data fetching and manipulation.
View: Represents the UI of the application. On Android, the UI is implemented using Jetpack Compose, while on iOS, SwiftUI is used.
ViewModel: Acts as a bridge between the Model and the View. It exposes data from the Model to the View via StateFlow in Kotlin and @Published properties in Swift. The NewsViewModel is responsible for managing the state and handling the logic to update the UI.
Project Structure bash Copy code KMMNewsApp/ │ ├── androidApp/ # Android specific code │ ├── src/main/java/com/example/kmmnews/android │ ├── MainActivity.kt # Entry point for the Android app │ ├── NewsScreen.kt # Composable for displaying the list of news articles │ └── DetailsScreen.kt # Composable for displaying the details of a selected article │ ├── iosApp/ # iOS specific code │ ├── ContentView.swift # Entry point for the iOS app │ ├── NewsScreen.swift # SwiftUI view for displaying the list of news articles │ └── DetailsScreen.swift # SwiftUI view for displaying the details of a selected article │ ├── shared/ # Shared code across platforms │ ├── src/commonMain/kotlin/com/example/kmmnews │ ├── NewsRepository.kt # Repository for fetching news articles │ └── NewsArticle.kt # Data model for news articles │ └── README.md # Project overview and setup instructions Screenshots Android
iOS
Getting Started Prerequisites Kotlin Multiplatform Mobile (KMM) Android Studio Xcode for iOS development CocoaPods for managing dependencies in iOS Running the Android App Open the androidApp module in Android Studio. Sync the project to install dependencies. Run the project on an Android emulator or a physical device. Running the iOS App Navigate to the iosApp directory in the terminal. Install CocoaPods dependencies: sh Copy code pod install Open the iosApp.xcworkspace in Xcode. Build and run the project on an iOS simulator or a physical device. Explanation of Code NewsViewModel The NewsViewModel class is responsible for managing the state of the news articles and the selected article. It interacts with the NewsRepository to fetch data and updates the UI via StateFlow in Kotlin (for Android) and @Published properties in Swift (for iOS).
NewsScreen The NewsScreen displays a list of news articles. On Android, this is implemented using Jetpack Compose's LazyColumn, while on iOS, a List is used in SwiftUI. The NewsScreen also handles navigation to the DetailsScreen.
DetailsScreen The DetailsScreen shows the details of a selected news article. It includes a TopAppBar on Android and a NavigationBar on iOS, with the title "KKM News Details Screen". The content is displayed in a scrollable Column on Android and a VStack on iOS.
NewsRepository The NewsRepository class simulates fetching news articles. In a real application, this would involve making network requests to a news API and handling data parsing.