Compose로 Android&Desktop 멀티플랫폼 만들기

KotlinConf'23 Global in Songdo

Transcript

1. Compose Android/Desktop KotlinConf’23 Global in Songdo
2. ) GDG Songdo Organizer GDSC TUK Core @kisa002 @kisa002 @holykisa Compose Android/Desktop
3. Compose 👋 👋 👋
4. DevFest 2022 Songdo Jetpack Compose 사내 도입기 - https://bit.ly/3mPcpLu
5. • UI Android UI • , UI • XML Kotlin API Jetpack Compose Compose ?
6. Compose ? Shape XML Layout XML Animation XML Controller Jetpack Compose
7. Written by Jetpack Compose Compose ?
8. In PlayStore Compose ? 23% Top 1,000 2
9. Android UI .
10. • Jetpack Compose • Android • Compose for Desktop • Windows • Mac • Linux • Compose for Web Compose Multiplatform Android UI .
11. Compose Multiplatform Android UI .
12. Compose Multiplatform Android UI .
13. Compose Multiplatform
14. Compose Multiplatform Android/Desktop Git Repository
15. Compose Multiplatform Web
16. Android/iOS Compose Multiplatform AOS & iOS UI: Compose API: Ktor With Coroutine + Flow
17. ?
18. Kotlin Multiplatform
19. • • • Kotlin Multiplatform ?
20. Kotlin Multiplatform ?
21. Kotlin/Compose Multiplatform ? Kotlin Multiplatform Compose Multiplatform New Project Existing Project
22. Compose on SKIA ? SKIKO
24. New Project
25. New Project
26. Project Structure
27. Project Structure Android Desktop Common
28. Project Structure Android Desktop Common
29. Project Structure Android ‒ MainActivity.kt Desktop ‒ Main.kt Common ‒ App.kt
30. Android ‒ MainActivity.kt Desktop ‒ Main.kt Common ‒ App.kt Project Structure Common ‒ App.kt
31. Expect - Actual Expect(commonMain) - Actual(androidMain) - Actual(desktopMain)
32. Running
34. Stopwatch
35. UI
36. UI @Composable fun PrimaryButton(text: String, enabled: Boolean = true, onClick: () -> Unit) { Button( onClick = onClick, modifier = Modifier.widthIn(min = 168.dp), enabled = enabled, contentPadding = PaddingValues(vertical = 12.dp) ) { Text(text) } } @Composable fun SecondaryButton(text: String, enabled: Boolean = true, onClick: () -> Unit) { OutlinedButton(onClick = onClick, ...) { Text(text) } } PrimaryButton(text = "PangMoo", onClick = {}) SecondaryButton(text = "Secondary", onClick = {}) ButtonComponent.kt
37. : UI @Composable fun HomeScreen(modifier: Modifier = Modifier) { val infiniteTransition = rememberInfiniteTransition() val animateBackgroundColor by infiniteTransition.animateColor(…) Column(…) { Text( text = "KotlinConf'23 Global in Songdo", modifier = Modifier .background( color = animateBackgroundColor, shape = MaterialTheme.shapes.medium) ) ... ) } } HomeSreen.kt
38. : UI @Composable fun SettingsScreen(modifier: Modifier = Modifier) { var value by remember { mutableStateOf(0f) } var checked by remember { mutableStateOf(false) } Column(…) { SomethingValue(value = value, onValueChange = { value = it }) SomethingSwitch(checked = checked, onCheckedChange = { checked = it }) Spacer(modifier = Modifier.weight(1f)) VersionText(version = "1.0.0") } } @Composable private fun SomethingValue(...) {...} @Composable private fun SomethingSwitch(...) {...} @Composable private fun VersionText(...) {...} SettingsSreen.kt
39. : UI @Composable fun StopwatchScreen( modifier: Modifier = Modifier, stopwatchState: StopwatchState, formattedTimeString: String, onStart: () -> Unit, onPause: () -> Unit, onResume: () -> Unit, onReset: () -> Unit ) { Column(…) { ActionButtons( stopwatchState = stopwatchState, formattedTimeString = formattedTimeString, onStart = onStart, onPause = onPause, onResume = onResume, onReset = onReset ) } } ... StopwatchSreen.kt
40. Material Theme
41. Light/Dark Theme Material Theme val KawaiBlue = Color(0xFF25AAFF) val KawaiDark = Color(0xFF1E1F22) val LightColors = lightColors( primary = KawaiBlue ) val DarkColors = darkColors( primary = KawaiBlue, surface = KawaiDark ) @Composable fun PangmooTheme( isSystemInDarkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { MaterialTheme( colors = if (isSystemInDarkTheme) DarkColors else LightColors, content = content ) } Theme.kt Colors.kt
42. Light/Dark Theme Material Theme Dark Theme Light Theme
44. API Database Calculate Others…
45. class StopwatchUtil { private val _state = MutableStateFlow<StopwatchState>(StopwatchState.STOP) val state = _state.asStateFlow() private val _time = MutableStateFlow(0) val time = _time.asStateFlow() private val coroutineScope = CoroutineScope(Dispatchers.IO) private var job: Job? = null val formattedTimeString = time.map { val hour = time.value / 3600 val minute = (time.value % 3600) / 60 val second = time.value % 60 "%02d:%02d:%02d".format(hour, minute, second) }.stateIn(coroutineScope, SharingStarted.Lazily, "00:00:00") fun start() {...} fun pause() {...} ... } StopwatchUtil.kt
46. Version
47. Version Android Desktop 1.0.0 1.0.0 1.0.1 Local Storage 1.0.1 Local Storage 1.0.2 Social Login 1.0.2 Social Login 1.0.3 Analytics 1.0.3 Analytics
48. Version Android Desktop 1.0.0 1.0.0 1.0.1 Local Storage 1.0.1 Local Storage 1.0.2 Social Login 1.0.2 Social Login 1.0.3 Analytics 1.0.3 Analytics Permission Error!
49. Version Android Desktop 1.0.0 1.0.0 1.0.1 Local Storage 1.0.1 Local Storage 1.0.2 Social Login 1.0.2 Social Login 1.0.3 Analytics 1.0.3 Analytics Permission Error! 1.0.31 Hotfix Permission Error
50. Version Expect! Actual!
51. Version common/commonMain common/androidMain common/desktopMain
52. Version @Composable fun SettingsScreen(modifier: Modifier = Modifier) { var value by remember { mutableStateOf(0f) } var checked by remember { mutableStateOf(false) } Column(...) { ... VersionText(version = getVersionName()) } } @Composable fun SettingsScreen(modifier: Modifier = Modifier) { var value by remember { mutableStateOf(0f) } var checked by remember { mutableStateOf(false) } Column(...) { ... VersionText(version = "1.0.0") } }
53. Version In Android... BuildConfig
54. Android ‒ BuildConfig Version android { defaultConfig { ... applicationId = "com.haeyum.android" versionCode = 1 versionName = version.toString() buildConfigField("String", "VERSION_NAME", "\"${versionName}\"") } ... }
55. Android ‒ BuildConfig Version BuildConfig(Common) != BuildConfig(Android)
56. Android ‒ BuildConfig Version Android ( common )
57. Version Desktop Android
58. ViewModel
59. ViewModel ViewModel
60. ViewModel class AppViewModel(private val stopwatchUtil: StopwatchUtil = StopwatchUtil()) : ViewModel() { { val stopwatchState = stopwatchUtil.state val formattedTimeString = stopwatchUtil.formattedTimeString fun start() = stopwatchUtil.start() fun pause() = stopwatchUtil.pause() fun resume() = stopwatchUtil.resume() fun reset() = stopwatchUtil.reset() fun destroy() = stopwatchUtil.destroy() }
61. class AppViewModel(private val stopwatchUtil: StopwatchUtil = StopwatchUtil()) : ViewModel() { { val stopwatchState = stopwatchUtil.state val formattedTimeString = stopwatchUtil.formattedTimeString fun start() = stopwatchUtil.start() fun pause() = stopwatchUtil.pause() fun resume() = stopwatchUtil.resume() fun reset() = stopwatchUtil.reset() fun destroy() = stopwatchUtil.destroy() } ViewModel ViewModel ?
62. ViewModel class AppViewModel(private val stopwatchUtil: StopwatchUtil = StopwatchUtil()) : ViewModel() { val stopwatchState = stopwatchUtil.state val formattedTimeString = stopwatchUtil.formattedTimeString fun start() = stopwatchUtil.start() fun pause() = stopwatchUtil.pause() fun resume() = stopwatchUtil.resume() fun reset() = stopwatchUtil.reset() fun destroy() = stopwatchUtil.destroy() } ViewModel Android Common class AppViewModel(private val stopwatchUtil: StopwatchUtil = StopwatchUtil()) : ViewModel() { { val stopwatchState = stopwatchUtil.state val formattedTimeString = stopwatchUtil.formattedTimeString fun start() = stopwatchUtil.start() fun pause() = stopwatchUtil.pause() fun resume() = stopwatchUtil.resume() fun reset() = stopwatchUtil.reset() fun destroy() = stopwatchUtil.destroy() }
63. ViewModel
64. BaseViewModel Desktop CoroutineScope destroy() viewMoelScope.cancel() Android ViewModel ViewModel viewModelScope
65. BaseViewModel Android ViewModel ViewModel viewModelScope Desktop CoroutineScope destroy() viewMoelScope.cancel()
66. BaseViewModel Desktop CoroutineScope destroy() viewMoelScope.cancel() Android ViewModel ViewModel viewModelScope
67. ViewModel class AppViewModel(private val stopwatchUtil: StopwatchUtil = StopwatchUtil()) : BaseViewModel() { val stopwatchState = stopwatchUtil.state val formattedTimeString = stopwatchUtil.formattedTimeString fun start() = stopwatchUtil.start() // 혹은 suspend로 구현 후 viewModelScope 사용 fun pause() = stopwatchUtil.pause() fun resume() = stopwatchUtil.resume() fun reset() = stopwatchUtil.reset() override fun destroy() { super.destroy() stopwatchUtil.destroy() } }
68. AppViewModel Composable Desktop Configuration remember ViewModel DisposableEffect destroy Android viewModel, viewModels , ViewModelProvider ViewModel viewModel() Composable . androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1
69. Android viewModel, viewModels , ViewModelProvider ViewModel viewModel() Composable . androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1 AppViewModel Composable Desktop Configuration remember ViewModel DisposableEffect destroy
70. Desktop Configuration remember ViewModel DisposableEffect destroy AppViewModel Composable Android viewModel, viewModels , ViewModelProvider ViewModel viewModel() Composable . androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1
71. Desktop Configuration remember ViewModel DisposableEffect destroy AppViewModel Composable Android viewModel, viewModels , ViewModelProvider ViewModel viewModel() Composable . androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1 produceState
72. UI
73. UI @Composable fun App(viewModel: AppViewModel) { var screenState by rememberSaveable { mutableStateOf(ScreenState.HOME) } val stopwatchState by viewModel.stopwatchState.collectAsState() val formattedTimeString by viewModel.formattedTimeString.collectAsState() PangmooTheme { Surface { Column(modifier = Modifier.fillMaxSize()) { Header(title = screenState.title) when (screenState) { ScreenState.HOME -> HomeScreen(modifier = Modifier.fillMaxWidth().weight(1f)) ScreenState.STOPWATCH -> StopwatchScreen( modifier = Modifier.fillMaxWidth().weight(1f), stopwatchState = stopwatchState, formattedTimeString = formattedTimeString, onStart = viewModel::start, onPause = viewModel::pause, onResume = viewModel::resume, onReset = viewModel::reset ) ScreenState.SETTINGS -> SettingsScreen(modifier = Modifier.fillMaxWidth().weight(1f)) } MainBottomNavigation(screenState = screenState, onScreenChange = { screenState = it }) } } } }
74. Preview
75. Preview
77. Git Repository
79. ?
80. ?
81. ? DI - Koin API - Ktor RDB ‒ SQLDelight Kotlinx(Coroutine, Serialization, …) Reaktive - Rx And then more…
82. Awt, Swing ?
83. • & • https://holix.com/ch/OnwYAkw8 Jetpack Compose Workspace
84. Any Question?
85. Any Question?
86. . ) GDG Songdo Organizer GDSC TUK Core vnycall74@naver.com @kisa002 @kisa002 @holykisa