Skip to content

Commit 64ea092

Browse files
authored
update: take into account the KMP wizard updates and Kotlin 2.0.0
1 parent b2e80ae commit 64ea092

9 files changed

+109
-137
lines changed

topics/compose-onboard/compose-multiplatform-explore-composables.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ platform-specific dependencies. These dependencies could be created by hand or u
140140

141141
### On web
142142

143-
For web, look again at the `main()` function in `composeApp/src/wasmJsMain/kotlin`. The function has two variants:
143+
For web, look at the `main()` function in `composeApp/src/wasmJsMain/kotlin`. The function has two variants:
144144

145145
```kotlin
146146
// First variant:

topics/compose-onboard/compose-multiplatform-modify-project.md

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,7 @@ To use this library:
2525

2626
```kotlin
2727
commonMain.dependencies {
28-
implementation(compose.runtime)
29-
implementation(compose.foundation)
30-
implementation(compose.material)
31-
implementation(compose.ui)
32-
@OptIn(ExperimentalComposeLibrary::class)
33-
implementation(compose.components.resources)
28+
// ...
3429
implementation("org.jetbrains.kotlinx:kotlinx-datetime:%dateTimeVersion%")
3530
}
3631
```
@@ -62,8 +57,8 @@ To use this library:
6257
2. Modify the `App` composable to include the `Text` composable that invokes this function and displays the result:
6358

6459
```kotlin
65-
@OptIn(ExperimentalResourceApi::class)
6660
@Composable
61+
@Preview
6762
fun App() {
6863
MaterialTheme {
6964
var showContent by remember { mutableStateOf(false) }

topics/compose-onboard/compose-multiplatform-new-project.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ To get started, implement a new `App` composable:
2929

3030
```kotlin
3131
@Composable
32+
@Preview
3233
fun App() {
3334
MaterialTheme {
3435
var timeAtLocation by remember { mutableStateOf("No location selected") }
@@ -88,6 +89,7 @@ a `TextField` composable:
8889
8990
```kotlin
9091
@Composable
92+
@Preview
9193
fun App() {
9294
MaterialTheme {
9395
var location by remember { mutableStateOf("Europe/Paris") }
@@ -142,6 +144,7 @@ The next step is to use the given input to calculate time. To do this, create a
142144

143145
```kotlin
144146
@Composable
147+
@Preview
145148
fun App() {
146149
MaterialTheme {
147150
var location by remember { mutableStateOf("Europe/Paris") }
@@ -174,6 +177,7 @@ time message could be rendered more prominently.
174177

175178
```kotlin
176179
@Composable
180+
@Preview
177181
fun App() {
178182
MaterialTheme {
179183
var location by remember { mutableStateOf("Europe/Paris") }
@@ -209,9 +213,10 @@ time message could be rendered more prominently.
209213

210214
![Improved style of the Compose Multiplatform app on desktop](first-compose-project-on-desktop-7.png){width=350}
211215

216+
<!--
212217
> You can find this state of the project in our [GitHub repository](https://github.com/kotlin-hands-on/get-started-with-cm/tree/main/ComposeDemoStage2).
213218
>
214-
{type="tip"}
219+
{type="tip"}-->
215220

216221
## Refactor the design
217222

@@ -242,6 +247,7 @@ list.
242247
)
243248

244249
@Composable
250+
@Preview
245251
fun App(countries: List<Country> = countries()) {
246252
MaterialTheme {
247253
var showCountries by remember { mutableStateOf(false) }
@@ -294,9 +300,9 @@ list.
294300
295301
![The country list in the Compose Multiplatform app on desktop](first-compose-project-on-desktop-8.png){width=350}
296302
297-
> You can find this state of the project in our [GitHub repository](https://github.com/kotlin-hands-on/get-started-with-cm/tree/main/ComposeDemoStage3).
303+
<!--> You can find this state of the project in our [GitHub repository](https://github.com/kotlin-hands-on/get-started-with-cm/tree/main/ComposeDemoStage3).
298304
>
299-
{type="tip"}
305+
{type="tip"}-->
300306
301307
> You can further improve the design using a dependency injection framework, such as [Koin](https://insert-koin.io/),
302308
> to build and inject the table of locations. If the data is stored externally,
@@ -329,7 +335,6 @@ code to load and display them:
329335
3. Change the codebase to support images:
330336
331337
```kotlin
332-
@OptIn(ExperimentalResourceApi::class)
333338
data class Country(val name: String, val zone: TimeZone, val image: DrawableResource)
334339
335340
fun currentTimeAt(location: String, zone: TimeZone): String {
@@ -341,7 +346,6 @@ code to load and display them:
341346
return "The time in $location is ${localTime.formatted()}"
342347
}
343348
344-
@OptIn(ExperimentalResourceApi::class)
345349
val defaultCountries = listOf(
346350
Country("Japan", TimeZone.of("Asia/Tokyo"), Res.drawable.jp),
347351
Country("France", TimeZone.of("Europe/Paris"), Res.drawable.fr),
@@ -350,8 +354,8 @@ code to load and display them:
350354
Country("Egypt", TimeZone.of("Africa/Cairo"), Res.drawable.eg)
351355
)
352356
353-
@OptIn(ExperimentalResourceApi::class)
354357
@Composable
358+
@Preview
355359
fun App(countries: List<Country> = defaultCountries) {
356360
MaterialTheme {
357361
var showCountries by remember { mutableStateOf(false) }

topics/multiplatfrom-onboard/multiplatform-create-first-app.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ The shared module consists of three source sets: `androidMain`, `commonMain`, an
5151
concept for a number of files logically grouped together where each group has its own dependencies.
5252
In Kotlin Multiplatform, different source sets in a shared module can target different platforms.
5353

54-
The common source set uses common Kotlin code, and platform source sets use Kotlin code specific to each target.
54+
The common source set contains shared Kotlin code, and platform source sets use Kotlin code specific to each target.
5555
Kotlin/JVM is used for `androidMain` and Kotlin/Native for `iosMain`:
5656

5757
![Source sets and modules structure](basic-project-structure-2.png){width=200}
@@ -103,7 +103,7 @@ the IDE will show a warning:
103103
Writing the code only in common Kotlin has obvious limitations because it can't use any platform specifics.
104104
Using interfaces and the [expect/actual](multiplatform-connect-to-apis.md) mechanism solves this.
105105
106-
### Add platform-specific implementations
106+
### Check out platform-specific implementations
107107
108108
The common source set can define an interface or an expected declaration. Then each platform source set,
109109
in this case `androidMain` and `iosMain`, has to provide actual platform-specific implementations for the expected
@@ -112,7 +112,8 @@ declarations from the common source set.
112112
While generating the code for a specific platform, the Kotlin compiler merges expected and actual declarations
113113
and generates a single declaration with actual implementations.
114114
115-
1. When creating a project in Android Studio, you get a template with the `Platform.kt` file in the `commonMain` module:
115+
1. When creating a project with the web wizard or using the Kotlin Multiplatform plugin in Android Studio,
116+
you get a template with the `Platform.kt` file in the `commonMain` module:
116117
117118
```kotlin
118119
interface Platform {
@@ -121,6 +122,7 @@ and generates a single declaration with actual implementations.
121122
```
122123
123124
It's a common `Platform` interface with information about the platform.
125+
124126
2. Switch between the `androidMain` and the `iosMain` modules.
125127
You'll see that they have different implementations of the same functionality for the Android and the iOS source sets:
126128
@@ -176,7 +178,7 @@ That's why expected and actual declarations should be defined in the same packag
176178
in the resulting platform code. Any invocation of the expected `getPlatform()` function in the generated platform code
177179
calls a correct actual implementation.
178180

179-
Now you can run the apps to ensure everything works.
181+
Now you can run the apps and see all of this in action.
180182

181183
#### Explore the expect/actual mechanism (optional) {initial-collapse-state="collapsed"}
182184

@@ -221,10 +223,10 @@ such as properties and classes. Let's implement an expected property:
221223
return "$firstWord [$num] Guess what this is! > ${platform.name.reversed()}!"
222224
}
223225
```
224-
226+
<!--
225227
> You can find this state of the project in our [GitHub repository](https://github.com/kotlin-hands-on/get-started-with-kmp/tree/main/step2).
226228
>
227-
{type="tip"}
229+
{type="tip"}-->
228230

229231
## Run your application
230232

topics/multiplatfrom-onboard/multiplatform-dependencies.md

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,11 @@ There are two types of dependencies that you can use in Kotlin Multiplatform pro
2222

2323
Many modern Android libraries already have multiplatform support, like [Koin](https://insert-koin.io/),
2424
[Apollo](https://www.apollographql.com/), and [Okio](https://square.github.io/okio/).
25-
* _Native dependencies_. These are regular libraries from relevant ecosystems. You usually work with them in native iOS
26-
projects using CocoaPods or another dependency manager and in Android projects using Gradle.
27-
28-
When you work with a shared module, you can also depend on native dependencies and use them in the native source sets,
29-
`androidMain` and `iosMain`. Typically, you'll need these dependencies when you want to work with platform APIs,
30-
for example, security storage, and there is common logic.
25+
* _Native dependencies_. These are regular libraries from relevant ecosystems. In native projects you usually work with them
26+
using Gradle for Android and using CocoaPods or another dependency manager for iOS.
27+
28+
When you work with a shared module, typically, you still need native dependencies when you want to use platform APIs
29+
such as security storage. You can add native dependencies to the native source sets, `androidMain` and `iosMain`.
3130

3231
For both types of dependencies, you can use local and external repositories.
3332

@@ -38,11 +37,11 @@ For both types of dependencies, you can use local and external repositories.
3837
>
3938
{type="tip"}
4039

41-
Let's now go back to the app and make the greeting a little more festive. In addition to the device information, add a
40+
Let's go back to the app and make the greeting a little more festive. In addition to the device information, add a
4241
function to display the number of days left until New Year's Day. The `kotlinx-datetime` library, which has full
4342
multiplatform support, is the most convenient way to work with dates in your shared code.
4443

45-
1. Navigate to the `build.gradle.kts` file in the `shared` directory.
44+
1. Open the `build.gradle.kts` file located in the `shared` directory.
4645
2. Add the following dependency to the `commonMain` source set dependencies:
4746

4847
```kotlin
@@ -92,10 +91,10 @@ multiplatform support, is the most convenient way to work with dates in your sha
9291
7. To see the results, re-run your **composeApp** and **iosApp** configurations from Android Studio:
9392

9493
![Updated mobile multiplatform app with external dependencies](first-multiplatform-project-3.png){width=500}
95-
94+
<!--
9695
> You can find this state of the project in our [GitHub repository](https://github.com/kotlin-hands-on/get-started-with-kmp/tree/main/step4).
9796
>
98-
{type="tip"}
97+
{type="tip"}-->
9998

10099
## Next step
101100

topics/multiplatfrom-onboard/multiplatform-setup.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@ We recommend that you install the latest stable versions for compatibility and b
4545
</tr>
4646
<tr>
4747
<td><a href="https://www.oracle.com/java/technologies/javase-downloads.html">JDK</a></td>
48-
<td>To check whether it's installed, run the following command in the Android Studio terminal or your command line: <code style="block"
48+
<td>To check whether Java is installed, run the following command in the Android Studio terminal or your command line: <code style="block"
4949
lang="bash">java -version</code></td>
5050
</tr>
5151
<tr>
5252
<td><a href="https://kotlinlang.org/docs/multiplatform-plugin-releases.html">Kotlin Multiplatform plugin</a></td>
53-
<td>In Android Studio, select <strong>Settings/Preferences | Plugins</strong>, search <strong>Marketplace</strong> for <i>Kotlin Multiplatform</i>, and then install it.</td>
53+
<td>In Android Studio, open <strong>Settings</strong> (<strong>Preferences</strong>) and find the <strong>Plugins</strong> page. Search the <strong>Marketplace</strong> tab for <i>Kotlin Multiplatform</i>, and then install it.</td>
5454
</tr>
5555
<tr>
5656
<td><a href="https://kotlinlang.org/docs/releases.html#update-to-a-new-release">Kotlin plugin</a></td>

topics/multiplatfrom-onboard/multiplatform-update-ui.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ The `composeApp` module contains an Android application, defines its main activi
2323
Make some changes and see how they are reflected in the UI:
2424

2525
1. Navigate to the `App.kt` file in `composeApp/src/androidMain/kotlin`.
26-
2. Find the `Greeting` class invocation. Select the `greet()` function and use the <shortcut>⌘ B</shortcut> shortcut to go to the function's declaration.
26+
2. Find the `Greeting` class invocation. Select the `greet()` function, right-click it and select the **Go To** | **Declaration or Usages** menu item.
2727
You'll see that it's the same class from the `shared` module you edited in the previous step.
2828
3. In `Greeting.kt`, update the `greet()` function:
2929

@@ -40,6 +40,7 @@ Make some changes and see how they are reflected in the UI:
4040

4141
```kotlin
4242
@Composable
43+
@Preview
4344
fun App() {
4445
MaterialTheme {
4546
val greeting = remember { Greeting().greet() }
@@ -57,10 +58,10 @@ Make some changes and see how they are reflected in the UI:
5758
}
5859
```
5960

60-
Here the `Column` composable shows each of the `Text` items, adds padding around the content, and adds a space between the list items.
61+
Here the `Column` composable shows each of the `Text` items, adding padding around them and space between them.
6162

6263
5. Follow Android Studio's suggestions to import the missing dependencies.
63-
6. Now you can run the Android app to ensure it displays the list:
64+
6. Now you can run the Android app to see how it displays the list:
6465

6566
![Updated UI of Android multiplatform app](first-multiplatform-project-on-android-2.png){width=300}
6667

@@ -71,17 +72,18 @@ framework. The UI of the app is written in Swift.
7172

7273
Implement the same changes as in the Android app:
7374

74-
1. Navigate to the `iosApp` folder in the Project window.
75-
2. Right-click the `iosApp.xcodeproj` folder and select **Open In** | **Xcode**.
76-
3. In the `ContentView.swift` file, select the `greet()` function and use the <shortcut>⌃ ⌘ J</shortcut> shortcut to jump to the function's definition.
75+
1. Find the `iosApp` folder at the root of your project in the **Project** tool window.
76+
2. Inside `iosApp`, right-click the `iosApp.xcodeproj` folder and select **Open In** | **Xcode**.
77+
3. In the `ContentView.swift` file, select the `greet()` function and use the <shortcut>⌃ ⌘ J</shortcut> shortcut,
78+
or right-click the function name and select **Jump to Definition**.
7779

7880
You'll see the Objective-C declarations for the Kotlin functions defined in the `shared` module. Kotlin types are
7981
represented as Objective-C types when used from Objective-C/Swift. Here the `greet()` function
8082
returns `List<String>` in Kotlin and is seen from Swift as returning `NSArray<NSString>`. For more on type mappings,
8183
see [Interoperability with Swift/Objective-C](https://kotlinlang.org/docs/native-objc-interop.html).
8284

83-
4. If you try to run the project, the build will fail. The Swift code that uses the `greet()` function doesn't compile
84-
because its declaration is now different. Change the SwiftUI code to display a list of items:
85+
4. If you run the app, it will display an array of strings: the Swift code that uses the `greet()` function
86+
doesn't take into account its changed declaration. Update the SwiftUI code to display a list of items:
8587

8688
```Swift
8789
struct ContentView: View {
@@ -101,10 +103,10 @@ Implement the same changes as in the Android app:
101103
5. Run the app to see the changes:
102104

103105
![Updated UI of your iOS multiplatform app](first-multiplatform-project-on-ios-2.png){width=300}
104-
106+
<!--
105107
> You can find this state of the project in our [GitHub repository](https://github.com/kotlin-hands-on/get-started-with-kmp/tree/main/step3).
106108
>
107-
{type="tip"}
109+
{type="tip"}-->
108110

109111
## Next step
110112

0 commit comments

Comments
 (0)