Get started with Compose Multiplatform!

by OG1

Slide 1

Slide 1 text

ࠓͦ࢝͜Ί͍ͨʂ Compose Multiplatform 2024/06/22 Kotlin Fest 2024 Voicy, Inc. Ԯݪ߶ࢤɹTSUYOSHI Ogihara

Slide 2

Slide 2 text

ࣗݾ঺հ Ԯݪ߶ࢤ 5TVZPTIJ0HJIBSB 0(* ɾ"OESPJE&OHJOFFS!7PJDZ *OD ɾझຯɿπʔϦϯάɺࢄา ɾ,PUMJOྺɿ໿೥ ɾ$PNQPTF.VMUJQMBUGPSNྺɿ໿൒೥

Slide 3

Slide 3 text

ຊηογϣϯʹ͍ͭͯ ຊηογϣϯͷ಺༰ • Compose Multiplatformʹ͍͓ͭͯ͞Β͍ • UI࣮૷࣌ͷͭ·͖ͣϙΠϯτղઆ • ΩϟονΞοϓ্͍ͯ͘͠ͰͷTipsͷ͝঺հ ໨ඪ • UIͷڞ༗ʹ͍ͭͯͲͷΑ͏ͳࣄ͕ग़དྷΔ͔ௐࠪͷΩοΧέͱͳΔ • ࣮ࡍʹCompose MultiplatformͰ࣮૷͢Δࡍͷ଍ֻ͔ΓͱͳΔ

Slide 4

Slide 4 text

ຊηογϣϯʹ͍ͭͯ ஫ҙॻ͖ • Compose Multiplatformʹؔͯ͠ɺiOS͸Beta൛ͷͨΊࠓޙมߋ͕ ՃΘΔՄೳੑ͕͋ΔࣄΛ͝ঝ஌Լ͍͞ɻ

Slide 5

Slide 5 text

Compose Multiplatformͱ͸ʁ

Slide 6

Slide 6 text

Compose Multiplatformͱ͸ Kotlin Multiplatform Logic Compose Multiplatform UI Kotlin Multiplatform iOS Native UI Android Native UI ରԠϓϥοτϑΥʔϜ Bata iOS Android Stable Desktop Stable Web Alpha

Slide 7

Slide 7 text

Compose Multiplatformͱ͸ UIKit Swift UI UIViewController Compose Skiko Skia

Slide 8

Slide 8 text

Compose Multiplatformͱ͸ Jetpack Compose Compose Multiplatform ଟ͘ͷAPI͕ڞ௨

Slide 9

Slide 9 text

Compose Multiplatformͱ͸ Jetpack Compose Compose Multiplatform ଟ͘ͷAPI͕ڞ௨

Slide 10

Slide 10 text

Compose MultiplatformͰ ΞϓϦΛ࡞Δ

Slide 11

Slide 11 text

Compose MultiplatformͰΞϓϦ։ൃ 1 2 3

Slide 12

Slide 12 text

>؀ڥߏங • Android Studio • Kotlin Multiplatform Mobile plugin • Xcode • JDK • Kotlin plugin

Slide 13

Slide 13 text

>؀ڥߏங • Android Studio • Kotlin Multiplatform Mobile plugin • Xcode • JDK • Kotlin plugin username@YourMacbook YourAppProject % kdoctor KDoctorπʔϧͰ ؀ڥߏஙͷ֬ೝՄೳ

Slide 14

Slide 14 text

>ϓϩδΣΫτߏ੒ 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 ...

Slide 15

Slide 15 text

>ϓϩδΣΫτߏ੒ 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 ...

Slide 16

Slide 16 text

>ϓϩδΣΫτߏ੒ 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 ...

Slide 17

Slide 17 text

>ϓϩδΣΫτߏ੒ 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 ...

Slide 18

Slide 18 text

Compose MultiplatformͰ ڞ௨UIΛ࣮૷

Slide 19

Slide 19 text

>ڞ௨Composable >SampleProject/composeApp/src/commonMain/SettingScreen.kt

Slide 20

Slide 20 text

>ڞ௨ComposableͷPreview ཧ૝ >SampleProject/composeApp/src/commonMain/SettingScreen.kt ϓϨϏϡʔ͕දࣔ͞Εͳ͍ 🤔???

Slide 21

Slide 21 text

>ڞ௨ComposableͷPreview ※kotlin2.0͔Β͸ComposeCompilerVersionΛ߹ΘͤΔࢦఆ͸ෆཁ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin MainActivity.kt commonMain ... kotlin App.kt iosMain kotlin MainViewController.kt build.gradle.kts ...

Slide 22

Slide 22 text

>ڞ௨ComposableͷPreview >SampleProject/composeApp/src/androidMain/ComponentsPreview.kt 🎉

Slide 23

Slide 23 text

>ڞ௨ComposableͷPreview

Slide 24

Slide 24 text

>ڞ௨ComposableͷPreview ݱঢ়ͷPreviewͰײͨ͡఺ • Android StudioͰ͸commonMainͰPreviewग़དྷͳ͍ • DesktopΛλʔήοτʹؚΊ͍ͯͳ͍৔߹ɺڞ௨Ϧιʔεͷ drawableΛ࢖͏৔߹ʹPreviewग़དྷͳ͍ Android/iOS/Desktop Android/iOS λʔήοτ

Slide 25

Slide 25 text

Compose MultiplatformͰը໘ભҠ

Slide 26

Slide 26 text

>ը໘ભҠ Voyager Decompose navigation-compose New ɾ ɾ ɾ PreCompose Appyx

Slide 27

Slide 27 text

>ը໘ભҠ

Slide 28

Slide 28 text

>ը໘ભҠ

Slide 29

Slide 29 text

>ը໘ભҠ TopBarͷ࣮૷

Slide 30

Slide 30 text

>ը໘ભҠ Android iOS

Slide 31

Slide 31 text

>ը໘ભҠ ݱঢ়͸੍ݶࣄ߲͋Γ • AndroidҎ֎Ͱ͸backHanderະαϙʔτ • Deeplinkະαϙʔτ Android iOS

Slide 32

Slide 32 text

Compose MultiplatformͰstate؅ཧ

Slide 33

Slide 33 text

>Compose Multiplatform ViewModel Android iOS

Slide 34

Slide 34 text

Compose MultiplatformͰΞϓϦ։ൃ Dialog

Slide 35

Slide 35 text

>Compose MultiplatformͰදࣔ෼͚ Android iOS

Slide 36

Slide 36 text

>Compose MultiplatformͰදࣔ෼͚ Android iOS

Slide 37

Slide 37 text

>Compose MultiplatformͰදࣔ෼͚ >SampleComposeMultiplatformProject/composeApp/src/commomMain/ >SampleComposeMultiplatformProject/composeApp/src/iosMain/ >SampleComposeMultiplatformProject/composeApp/src/androidMain/

Slide 38

Slide 38 text

>Compose MultiplatformͰදࣔ෼͚ SampleComposeMultiplatformProject ... composeApp src androidMain kotlin ... MainActivity.kt commonMain ... kotlin ... App.kt CustomAlertDialog.kt iosMain kotlin ... MainViewController.kt build.gradle.kts ...

Slide 39

Slide 39 text

>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 ...

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Compose MultiplatformͰΞϓϦ։ൃ OSݻ༗ͷॲཧ

Slide 43

Slide 43 text

>OSݻ༗ͷॲཧ Android iOS >SampleComposeMultiplatformProject/composeApp/build.gradle.kts >SampleComposeMultiplatformProject/iosApp/iosApp/Info.plist “com.yourdomain.appname”

Slide 44

Slide 44 text

>OSݻ༗ͷॲཧ

Slide 45

Slide 45 text

>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 ...

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

>OSݻ༗ͷॲཧ Android iOS

Slide 49

Slide 49 text

͜͜·Ͱͷ·ͱΊ

Slide 50

Slide 50 text

>·ͱΊ Compose MultiplatformͷPreview • androidMainͰPreview͢Δ or Fleet IDEͰ֬ೝ ը໘ભҠ / ϥΠϑαΠΫϧͳͲ • ࣮ݧ൛͕ͩެࣜͷରԠ͕ਐΜͰ͍Δ • ݱঢ়͸੍ݶࣄ߲ͳͲ͕͋ΔͨΊଞͷϥΠϒϥϦͷݕ౼΋ඞཁ ϓϥοτϑΥʔϜຖͷදࣔ෼͚΋΋ͪΖΜՄೳ • commonMainͰexpectɺͦΕͧΕͷϓϥοτϑΥʔϜ޲͚ʹactual

Slide 51

Slide 51 text

Kotlin Multiplatform Logic Compose Multiplatform UI Kotlin Kotlin Kotlin iOSݻ༗ͷΫϥε΋ KotlinͰهड़ग़དྷΔ iOS

Slide 52

Slide 52 text

৘ใͷΩϟονΞοϓ

Slide 53

Slide 53 text

৘ใͷΩϟονΞοϓ • JetBrains Kotlin Multiplatform Development • Kotlin Multiplatform samples • Kmp-awesome • Kotlin Multiplatform Overview ·ͣ͸ҎԼ͕͓͢͢Ί

Slide 54

Slide 54 text

ࢀߟ • 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