Get started with Compose Multiplatform!

資料内のリンク先を記載致します。
情報のキャッチアップ
JetBrains Kotlin Multiplatform Development
Kotlin Multiplatform samples
Kmp-awesome
Kotlin Multiplatform Overview
参考
Compose Multiplatform 1.5.10 – The Perfect Time To Get Started
Create a Compose Multiplatform app — tutorial
Compose Multiplatform for iOS Is in Alpha
Use platform-specific APIs
Create a multiplatform app using Ktor and SQLDelight
Navigation and routing
Common ViewModel
Compose Multiplatform on iOS - KotlinConf’23
JetBrains/compose-multiplatform/compose
JetBrains/compose-multiplatform-core
Compose to Kotlin Compatibility Map
Kotlin Slack Community

Transcript

1. ࠓͦ࢝͜Ί͍ͨʂ Compose Multiplatform 2024/06/22 Kotlin Fest 2024 Voicy, Inc. Ԯݪ߶ࢤɹTSUYOSHI Ogihara
2. ࣗݾ঺հ Ԯݪ
   ߶ࢤ 5TVZPTIJ
   0HJIBSB
   
   0(*
   ɾ"OESPJE
   &OHJOFFS
   !
   7PJDZ
   *OD
   ɾझຯɿπʔϦϯάɺࢄา
   ɾ,PUMJOྺɿ໿೥
   ɾ$PNQPTF
   .VMUJQMBUGPSNྺɿ໿൒೥
3. ຊηογϣϯʹ͍ͭͯ ຊηογϣϯͷ಺༰ • Compose Multiplatformʹ͍͓ͭͯ͞Β͍ • UI࣮૷࣌ͷͭ·͖ͣϙΠϯτղઆ • ΩϟονΞοϓ্͍ͯ͘͠ͰͷTipsͷ͝঺հ ໨ඪ • UIͷڞ༗ʹ͍ͭͯͲͷΑ͏ͳࣄ͕ग़དྷΔ͔ௐࠪͷΩοΧέͱͳΔ • ࣮ࡍʹCompose MultiplatformͰ࣮૷͢Δࡍͷ଍ֻ͔ΓͱͳΔ
4. ຊηογϣϯʹ͍ͭͯ ஫ҙॻ͖ • Compose Multiplatformʹؔͯ͠ɺiOS͸Beta൛ͷͨΊࠓޙมߋ͕ ՃΘΔՄೳੑ͕͋ΔࣄΛ͝ঝ஌Լ͍͞ɻ
5. Compose Multiplatformͱ͸ʁ
6. Compose Multiplatformͱ͸ Kotlin Multiplatform Logic Compose Multiplatform UI Kotlin Multiplatform iOS Native UI Android Native UI ରԠϓϥοτϑΥʔϜ Bata iOS Android Stable Desktop Stable Web Alpha
7. Compose Multiplatformͱ͸ UIKit Swift UI UIViewController Compose Skiko Skia
8. Compose Multiplatformͱ͸ Jetpack Compose Compose Multiplatform ଟ͘ͷAPI͕ڞ௨
9. Compose Multiplatformͱ͸ Jetpack Compose Compose Multiplatform ଟ͘ͷAPI͕ڞ௨
10. Compose MultiplatformͰ ΞϓϦΛ࡞Δ
11. Compose MultiplatformͰΞϓϦ։ൃ 1 2 3
12. >؀ڥߏங • Android Studio • Kotlin Multiplatform Mobile plugin • Xcode • JDK • Kotlin plugin
13. >؀ڥߏங • Android Studio • Kotlin Multiplatform Mobile plugin • Xcode • JDK • Kotlin plugin username@YourMacbook YourAppProject % kdoctor KDoctorπʔϧͰ ؀ڥߏஙͷ֬ೝՄೳ
14. >ϓϩδΣΫτߏ੒ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin MainActivity.kt commonMain ... kotlin App.kt iosMain kotlin MainViewController.kt build.gradle.kts gradle iosApp iosApp ContentView.swift iOSApp.swift.swift ...
15. >ϓϩδΣΫτߏ੒ Android޲͚ͷ࣮૷ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin MainActivity.kt commonMain ... kotlin App.kt iosMain kotlin MainViewController.kt build.gradle.kts gradle iosApp iosApp ContentView.swift iOSApp.swift.swift ...
16. >ϓϩδΣΫτߏ੒ Android޲͚ͷ࣮૷ ڞ௨ͷ࣮૷ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin MainActivity.kt commonMain ... kotlin App.kt iosMain kotlin MainViewController.kt build.gradle.kts gradle iosApp iosApp ContentView.swift iOSApp.swift.swift ...
17. >ϓϩδΣΫτߏ੒ Android޲͚ͷ࣮૷ iOS޲͚ͷ࣮૷ ڞ௨ͷ࣮૷ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin MainActivity.kt commonMain ... kotlin App.kt iosMain kotlin MainViewController.kt build.gradle.kts gradle iosApp iosApp ContentView.swift iOSApp.swift.swift ...
18. Compose MultiplatformͰ ڞ௨UIΛ࣮૷
19. >ڞ௨Composable >SampleProject/composeApp/src/commonMain/SettingScreen.kt
20. >ڞ௨ComposableͷPreview ཧ૝ >SampleProject/composeApp/src/commonMain/SettingScreen.kt ϓϨϏϡʔ͕දࣔ͞Εͳ͍ 🤔???
21. >ڞ௨ComposableͷPreview ※kotlin2.0͔Β͸ComposeCompilerVersionΛ߹ΘͤΔࢦఆ͸ෆཁ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin MainActivity.kt commonMain ... kotlin App.kt iosMain kotlin MainViewController.kt build.gradle.kts ...
22. >ڞ௨ComposableͷPreview >SampleProject/composeApp/src/androidMain/ComponentsPreview.kt 🎉
23. >ڞ௨ComposableͷPreview
24. >ڞ௨ComposableͷPreview ݱঢ়ͷPreviewͰײͨ͡఺ • Android StudioͰ͸commonMainͰPreviewग़དྷͳ͍ • DesktopΛλʔήοτʹؚΊ͍ͯͳ͍৔߹ɺڞ௨Ϧιʔεͷ drawableΛ࢖͏৔߹ʹPreviewग़དྷͳ͍ Android/iOS/Desktop Android/iOS λʔήοτ
25. Compose MultiplatformͰը໘ભҠ
26. >ը໘ભҠ Voyager Decompose navigation-compose New ɾ ɾ ɾ PreCompose Appyx
27. >ը໘ભҠ
28. >ը໘ભҠ
29. >ը໘ભҠ TopBarͷ࣮૷
30. >ը໘ભҠ Android iOS
31. >ը໘ભҠ ݱঢ়͸੍ݶࣄ߲͋Γ • AndroidҎ֎Ͱ͸backHanderະαϙʔτ • Deeplinkະαϙʔτ Android iOS
32. Compose MultiplatformͰstate؅ཧ
33. >Compose Multiplatform ViewModel Android iOS
34. Compose MultiplatformͰΞϓϦ։ൃ Dialog
35. >Compose MultiplatformͰදࣔ෼͚ Android iOS
36. >Compose MultiplatformͰදࣔ෼͚ Android iOS
37. >Compose MultiplatformͰදࣔ෼͚ >SampleComposeMultiplatformProject/composeApp/src/commomMain/ >SampleComposeMultiplatformProject/composeApp/src/iosMain/ >SampleComposeMultiplatformProject/composeApp/src/androidMain/
38. >Compose MultiplatformͰදࣔ෼͚ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin ... MainActivity.kt commonMain ... kotlin ... App.kt CustomAlertDialog.kt iosMain kotlin ... MainViewController.kt build.gradle.kts ...
39. >Compose MultiplatformͰදࣔ෼͚ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin ... MainActivity.kt CustomAlertDialog.android.kt commonMain ... kotlin ... App.kt CustomAlertDialog.kt iosMain kotlin ... MainViewController.kt build.gradle.kts ...
40. >Compose MultiplatformͰදࣔ෼͚ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin ... MainActivity.kt CustomAlertDialog.android.kt commonMain ... kotlin ... App.kt CustomAlertDialog.kt iosMain kotlin ... MainViewController.kt CustomAlertDialog.ios.kt build.gradle.kts ...
41. >Compose MultiplatformͰදࣔ෼͚ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin ... MainActivity.kt CustomAlertDialog.android.kt commonMain ... kotlin ... App.kt CustomAlertDialog.kt iosMain kotlin ... MainViewController.kt CustomAlertDialog.ios.kt build.gradle.kts ... Android iOS
42. Compose MultiplatformͰΞϓϦ։ൃ OSݻ༗ͷॲཧ
43. >OSݻ༗ͷॲཧ Android iOS >SampleComposeMultiplatformProject/composeApp/build.gradle.kts >SampleComposeMultiplatformProject/iosApp/iosApp/Info.plist “com.yourdomain.appname”
44. >OSݻ༗ͷॲཧ
45. >OSݻ༗ͷॲཧ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin ... MainActivity.kt Platform.android.kt CustomAlertDialog.android.kt commonMain ... kotlin ... App.kt Platform.kt CustomAlertDialog.kt iosMain kotlin ... MainViewController.kt Platform.ios.kt CustomAlertDialog.ios.kt build.gradle.kts ...
46. >OSݻ༗ͷॲཧ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin ... MainActivity.kt Platform.android.kt CustomAlertDialog.android.kt commonMain ... kotlin ... App.kt Platform.kt CustomAlertDialog.kt iosMain kotlin ... MainViewController.kt Platform.ios.kt CustomAlertDialog.ios.kt build.gradle.kts ...
47. >OSݻ༗ͷॲཧ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin ... MainActivity.kt Platform.android.kt CustomAlertDialog.android.kt commonMain ... kotlin ... App.kt Platform.kt CustomAlertDialog.kt iosMain kotlin ... MainViewController.kt Platform.ios.kt CustomAlertDialog.ios.kt build.gradle.kts ...
48. >OSݻ༗ͷॲཧ Android iOS
49. ͜͜·Ͱͷ·ͱΊ
50. >·ͱΊ Compose MultiplatformͷPreview • androidMainͰPreview͢Δ or Fleet IDEͰ֬ೝ ը໘ભҠ / ϥΠϑαΠΫϧͳͲ • ࣮ݧ൛͕ͩެࣜͷରԠ͕ਐΜͰ͍Δ • ݱঢ়͸੍ݶࣄ߲ͳͲ͕͋ΔͨΊଞͷϥΠϒϥϦͷݕ౼΋ඞཁ ϓϥοτϑΥʔϜຖͷදࣔ෼͚΋΋ͪΖΜՄೳ • commonMainͰexpectɺͦΕͧΕͷϓϥοτϑΥʔϜ޲͚ʹactual
51. Kotlin Multiplatform Logic Compose Multiplatform UI Kotlin Kotlin Kotlin iOSݻ༗ͷΫϥε΋ KotlinͰهड़ग़དྷΔ iOS
52. ৘ใͷΩϟονΞοϓ
53. ৘ใͷΩϟονΞοϓ • JetBrains Kotlin Multiplatform Development • Kotlin Multiplatform samples • Kmp-awesome • Kotlin Multiplatform Overview ·ͣ͸ҎԼ͕͓͢͢Ί
54. ࢀߟ • Compose Multiplatform 1.5.10 – The Perfect Time To Get Started • Create a Compose Multiplatform app — tutorial • Compose Multiplatform for iOS Is in Alpha • Use platform-speci f ic APIs • Create a multiplatform app using Ktor and SQLDelight • Navigation and routing • Common ViewModel • Compose Multiplatform on iOS - KotlinConf’23 • JetBrains/compose-multiplatform/compose • JetBrains/compose-multiplatform-core • Compose to Kotlin Compatibility Map • Kotlin Slack Community