KotlinConf'23 Global in Songdo

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