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

KotlinConf'23 Global in Songdo

Transcript

1. Compose
   Android/Desktop
   KotlinConf’23
   Global in Songdo
   

   View Slide

2. )
   GDG Songdo Organizer
   GDSC TUK Core
   @kisa002
   @kisa002
   @holykisa
   Compose Android/Desktop
   

   View Slide

3. Compose 👋 👋 👋
   

   View Slide

4. DevFest 2022 Songdo
   Jetpack Compose 사내 도입기
   - https://bit.ly/3mPcpLu
   

   View Slide

5. • UI Android UI
   • , UI
   • XML Kotlin API
   Jetpack Compose
   Compose ?
   

   View Slide

6. Compose ?
   Shape XML
   Layout XML
   Animation XML
   Controller
   Jetpack Compose
   

   View Slide

7. Written by Jetpack Compose
   Compose ?
   

   View Slide

8. In PlayStore
   Compose ?
   23% Top 1,000
   2
   

   View Slide

9. Android UI .
   

   View Slide

10. • Jetpack Compose
    • Android
    • Compose for Desktop
    • Windows
    • Mac
    • Linux
    • Compose for Web
    Compose Multiplatform
    Android UI .
    

    View Slide

11. Compose Multiplatform
    Android UI .
    

    View Slide

12. Compose Multiplatform
    Android UI .
    

    View Slide

13. Compose Multiplatform
    

    View Slide

14. Compose Multiplatform
    Android/Desktop
    Git Repository
    

    View Slide

15. Compose Multiplatform
    Web
    

    View Slide

16. Android/iOS
    Compose Multiplatform
    AOS & iOS
    UI: Compose
    API: Ktor
    With Coroutine + Flow
    

    View Slide

17. ?
    

    View Slide

18. Kotlin Multiplatform
    

    View Slide

19. •
    •
    •
    Kotlin Multiplatform
    ?
    

    View Slide

20. Kotlin Multiplatform
    ?
    

    View Slide

21. Kotlin/Compose Multiplatform
    ?
    Kotlin Multiplatform Compose Multiplatform
    New Project Existing Project
    

    View Slide

22. Compose on SKIA
    ?
    SKIKO
    

    View Slide

23. View Slide

24. New Project
    

    View Slide

25. New Project
    

    View Slide

26. Project Structure
    

    View Slide

27. Project Structure
    Android Desktop
    Common
    

    View Slide

28. Project Structure
    Android Desktop Common
    

    View Slide

29. Project Structure
    Android ‒ MainActivity.kt
    Desktop ‒ Main.kt
    Common ‒ App.kt
    

    View Slide

30. Android ‒ MainActivity.kt
    Desktop ‒ Main.kt
    Common ‒ App.kt
    Project Structure
    Common ‒ App.kt
    

    View Slide

31. Expect - Actual
    Expect(commonMain)
    - Actual(androidMain)
    - Actual(desktopMain)
    

    View Slide

32. Running
    

    View Slide

33. View Slide

34. Stopwatch
    

    View Slide

35. UI
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

40. Material Theme
    

    View Slide

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
    

    View Slide

42. Light/Dark Theme
    Material Theme
    Dark Theme Light Theme
    

    View Slide

43. View Slide

44. API Database Calculate Others…
    

    View Slide

45. class StopwatchUtil {
    private val _state = MutableStateFlow(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
    

    View Slide

46. Version
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

50. Version
    Expect! Actual!
    

    View Slide

51. Version
    common/commonMain
    common/androidMain
    common/desktopMain
    

    View Slide

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")
    }
    }
    

    View Slide

53. Version
    In Android... BuildConfig
    

    View Slide

54. Android ‒ BuildConfig
    Version
    android {
    defaultConfig {
    ...
    applicationId = "com.haeyum.android"
    versionCode = 1
    versionName = version.toString()
    buildConfigField("String", "VERSION_NAME", "\"${versionName}\"")
    }
    ...
    }
    

    View Slide

55. Android ‒ BuildConfig
    Version
    BuildConfig(Common) != BuildConfig(Android)
    

    View Slide

56. Android ‒ BuildConfig
    Version
    Android
    ( common )
    

    View Slide

57. Version
    Desktop
    Android
    

    View Slide

58. ViewModel
    

    View Slide

59. ViewModel
    ViewModel
    

    View Slide

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()
    }
    

    View Slide

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 ?
    

    View Slide

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()
    }
    

    View Slide

63. ViewModel
    

    View Slide

64. BaseViewModel
    Desktop CoroutineScope
    destroy() viewMoelScope.cancel()
    Android ViewModel
    ViewModel viewModelScope
    

    View Slide

65. BaseViewModel
    Android ViewModel
    ViewModel viewModelScope
    Desktop CoroutineScope
    destroy() viewMoelScope.cancel()
    

    View Slide

66. BaseViewModel
    Desktop CoroutineScope
    destroy() viewMoelScope.cancel()
    Android ViewModel
    ViewModel viewModelScope
    

    View Slide

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()
    }
    }
    

    View Slide

68. AppViewModel Composable
    Desktop Configuration
    remember ViewModel
    DisposableEffect destroy
    Android viewModel, viewModels , ViewModelProvider
    ViewModel
    viewModel() Composable .
    androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1
    

    View Slide

69. Android viewModel, viewModels , ViewModelProvider
    ViewModel
    viewModel() Composable .
    androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1
    AppViewModel Composable
    Desktop Configuration
    remember ViewModel
    DisposableEffect destroy
    

    View Slide

70. Desktop Configuration
    remember ViewModel
    DisposableEffect destroy
    AppViewModel Composable
    Android viewModel, viewModels , ViewModelProvider
    ViewModel
    viewModel() Composable .
    androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1
    

    View Slide

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
    

    View Slide

72. UI
    

    View Slide

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 })
    }
    }
    }
    }
    

    View Slide

74. Preview
    

    View Slide

75. Preview
    

    View Slide

76. View Slide

77. Git Repository
    

    View Slide

78. View Slide

79. ?
    

    View Slide

80. ?
    

    View Slide

81. ?
    DI - Koin
    API - Ktor
    RDB ‒ SQLDelight
    Kotlinx(Coroutine, Serialization, …)
    Reaktive - Rx
    And then more…
    

    View Slide

82. Awt, Swing ?
    

    View Slide

83. • &
    • https://holix.com/ch/OnwYAkw8
    Jetpack Compose Workspace
    

    View Slide

84. Any Question?
    

    View Slide

85. Any Question?
    

    View Slide

86. .
    )
    GDG Songdo Organizer
    GDSC TUK Core
    vnycall74@naver.com
    @kisa002
    @kisa002
    @holykisa
    

    View Slide