Conference-app-2024の良さげな実装を勝手にいくつか紹介する

Transcript

1. 1 Conference-app-2024の良さげな実装を 勝手にいくつか紹介する KINTOテクノロジーズ株式会社 長谷川
2. 2 自己紹介 ・長谷川 / @gotlinan ・2022/9~ KINTOテクノロジーズ株式会社 ・myrouteアプリ開発
3. 3 myrouteとは
4. conference-app-2024の良さげな実装 4 ・Full Compose (2024~) ・SnackBarの管理 (2023~) ・SharedTransitionLayout(2024~) ・CMP切り替え(2024~) ・テスト(BDDやRobot Patternなど) (2022~)
5. 5 Full Compose UI ViewModel Repository
6. 6 Full Compose UI ViewModel Repository ちょっと昔 View + Compose
7. 7 Full Compose UI ViewModel Repository 少し前 Compose
8. 8 Full Compose UI Presenter Repository 2024 Compose
9. 9 Full Compose 簡易版アプリを作ってみよう
10. 10 Full Compose UI @Composable fun TimetableScreen( viewModel: TimetableViewModel = viewModel(), ) { val uiState = viewModel.uiState.collectAsStateWithLifecycle().value TimetableScreen( uiState = uiState, ) }
11. 11 Full Compose UI @Composable fun TimetableScreen( viewModel: TimetableViewModel = viewModel(), ) { val uiState = viewModel.uiState.collectAsStateWithLifecycle().value TimetableScreen( uiState = uiState, ) } @Composable fun TimetableScreen( uiState: TimetableScreenUiState = timetableScreenPresenter(), ) { TimetableScreen( uiState = uiState, }
12. 12 Full Compose UI @Composable fun TimetableScreen( viewModel: TimetableViewModel = viewModel(), ) { val uiState = viewModel.uiState.collectAsStateWithLifecycle().value TimetableScreen( uiState = uiState, ) } @Composable fun TimetableScreen( uiState: TimetableScreenUiState = timetableScreenPresenter(), ) { TimetableScreen( uiState = uiState, }
13. 13 Full Compose Presenter @Composable fun timetableScreenPresenter( sessionsRepository: SessionsRepository = localSessionsRepository(), ): TimetableScreenUiState { val sessions by rememberUpdatedState(sessionsRepository.timetable()) var timetableUiType by rememberRetained { mutableStateOf(List) } ... return TimetableScreenUiState(timetableUiState, timetableUiType) }
14. 14 Full Compose Presenter @Composable fun timetableScreenPresenter( sessionsRepository: SessionsRepository = localSessionsRepository(), ): TimetableScreenUiState { val sessions by rememberUpdatedState(sessionsRepository.timetable()) var timetableUiType by rememberRetained { mutableStateOf(List) } ... return TimetableScreenUiState(timetableUiState, timetableUiType) }
15. 15 Full Compose Presenter @Composable fun timetableScreenPresenter( sessionsRepository: SessionsRepository = localSessionsRepository(), ): TimetableScreenUiState { val sessions by rememberUpdatedState(sessionsRepository.timetable()) var timetableUiType by rememberRetained { mutableStateOf(List) } ... return TimetableScreenUiState(timetableUiState, timetableUiType) }
16. 16 Full Compose Presenter @Composable fun timetableScreenPresenter( sessionsRepository: SessionsRepository = localSessionsRepository(), ): TimetableScreenUiState { val sessions by rememberUpdatedState(sessionsRepository.timetable()) var timetableUiType by rememberRetained { mutableStateOf(List) } ... return TimetableScreenUiState(timetableUiState, timetableUiType) }
17. 17 Full Compose Presenter @Composable fun timetableScreenPresenter( sessionsRepository: SessionsRepository = localSessionsRepository(), ): TimetableScreenUiState { val sessions by rememberUpdatedState(sessionsRepository.timetable()) var timetableUiType by rememberRetained { mutableStateOf(List) } ... return TimetableScreenUiState(timetableUiState, timetableUiType) }
18. 18 Full Compose Repository interface SessionsRepository { @Composable fun timetable(): Timetable @Composable fun timetableItemWithBookmark( id: TimetableItemId ): Pair<TimetableItem, Boolean>? fun toggleBookmark(id: TimetableItemId) }
19. 19 Full Composeの疑問 ・回転や遷移でデータ保持 ・RepositoryのDI ・イベントのハンドリング
20. 20 Full Composeの疑問 ・回転や遷移でデータ保持 ・RepositoryのDI ・イベントのハンドリング
21. 21 回転や遷移でデータ保持 画面1 画面2 画面1 画面1 画面1 View Model 画面2 View Model 画面2 View Model 画面2 View Model
22. 22 回転や遷移でデータ保持 画面1 画面2 画面1 画面1 画面1 View Model 画面2 View Model 画面2 View Model 画面2 View Model
23. 23 回転や遷移でデータ保持 Rinを使う https://github.com/takahirom/Rin
24. 24 回転や遷移でデータ保持 Rinを使う @Composable fun Counter() { var count by remember { mutableIntStateOf(0) } var count by rememberRetained { mutableIntStateOf(0) } Button( onClick = { count++ } ) { Text(text = "Count: $count") } }
25. 25 回転や遷移でデータ保持 Rinを使う https://github.com/takahirom/Rin
26. 26 回転や遷移でデータ保持 Rinを使う Rinの動作確認
27. 27 RepositoryのDI UI ViewModel Repository @HiltViewModel class MyViewModel @Inject constructor( private val myRepository: MyRepository, ) : ViewModel()
28. 28 RepositoryのDI Presenter @Composable fun timetableScreenPresenter( sessionsRepository: SessionsRepository = localSessionsRepository(), ): TimetableScreenUiState { ... return TimetableScreenUiState(timetableUiState, timetableUiType) } UI Repository
29. 29 RepositoryのDI Presenter @Composable fun timetableScreenPresenter( sessionsRepository: SessionsRepository = localSessionsRepository(), ): TimetableScreenUiState { ... return TimetableScreenUiState(timetableUiState, timetableUiType) } UI Repository
30. 30 RepostoryのDI Multibindings interface SessionsRepository { @Composable fun timetable(): Timetable @Composable fun timetableItemWithBookmark( id: TimetableItemId ): Pair<TimetableItem, Boolean>? fun toggleBookmark(id: TimetableItemId) } class DefaultSessionsRepository: SessionsRepository { ... }
31. 31 full Composeの疑問 ・回転や遷移でデータ保持 ・RepositoryのDI ・イベントのハンドリング
32. 32 RepositoryのDI ・Multibindings ・CompositionLocal
33. 33 RepositoryのDI ・Multibindings ・CompositionLocal
34. 34 RepostoryのDI Multibindings @Module @InstallIn(SingletonComponent::class) object MyModule { @Provides @IntoMap @IntKey(1) fun provideInt1(): String { return "1" } @Provides @IntoMap @IntKey(2) fun provideInt2(): String { return "2" } }
35. 35 RepostoryのDI Multibindings @Module @InstallIn(SingletonComponent::class) object MyModule { @Provides @IntoMap @IntKey(1) fun provideInt1(): String { return "1" } @Provides @IntoMap @IntKey(2) fun provideInt2(): String { return "2" } }
36. 36 RepostoryのDI Multibindings @AndroidEntryPoint class MainActivity : ComponentActivity() { @Inject lateinit var intMap: Map<Int, String> override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) println(intMap) // {1="1", 2="2"} } }
37. 37 RepostoryのDI Multibindings @AndroidEntryPoint class MainActivity : ComponentActivity() { @Inject lateinit var intMap: Map<Int, String> override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) println(intMap) // {1="1", 2="2"} } }
38. 38 RepostoryのDI Multibindings @Module @InstallIn(SingletonComponent::class) object RepositoryModule { @Provides @ClassKey(SessionsRepository::class) @IntoMap fun bindSessionsRepository(): Any { return DefaultSessionsRepository() } }
39. 39 RepostoryのDI Multibindings @Module @InstallIn(SingletonComponent::class) object RepositoryModule { @Provides @ClassKey(SessionsRepository::class) @IntoMap fun bindSessionsRepository(): Any { return DefaultSessionsRepository() } }
40. 40 RepostoryのDI Multibindings @Module @InstallIn(SingletonComponent::class) object RepositoryModule { @Provides @ClassKey(SessionsRepository::class) @IntoMap fun bindSessionsRepository(): Any { return DefaultSessionsRepository() } }
41. 41 RepostoryのDI Multibindings @AndroidEntryPoint class MainActivity : ComponentActivity() { @Inject lateinit var repositories: Map<Class<out Any>, @JvmSuppressWildcards Any> override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) println(repositories) } }
42. 42 RepostoryのDI Multibindings @AndroidEntryPoint class MainActivity : ComponentActivity() { @Inject lateinit var repositories: Map<Class<out Any>, @JvmSuppressWildcards Any> override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) println(repositories) } }
43. 43 RepositoryのDI ・Multibindings ・CompositionLocal
44. 44 RepostoryのDI CompositionLocal @Composable fun MyComposable(context: Context) { // Use context } @Composable fun MyComposable() { val context = LocalContext.current // Use context }
45. 45 RepostoryのDI CompositionLocal val LocalRepositories = compositionLocalOf<Map<KClass<*>, Any>> { error("No LocalRepository provided") } // Use MyRepository in Compose LocalRepositories.current[MyRepository::class] as MyRepository
46. 46 RepostoryのDI CompositionLocal class RepositoryProvider @Inject constructor( repositories: Map<Class<out Any>, @JvmSuppressWildcards Any>, ) { private val repositoriesMap = repositories .map { (k, v) -> k.kotlin to v as Any }.toMap() @Composable fun Provide(content: @Composable () -> Unit) { CompositionLocalProvider( LocalRepositories provides repositoriesMap, ) { content() } } } }
47. 47 RepostoryのDI CompositionLocal class RepositoryProvider @Inject constructor( repositories: Map<Class<out Any>, @JvmSuppressWildcards Any>, ) { private val repositoriesMap = repositories .map { (k, v) -> k.kotlin to v as Any }.toMap() @Composable fun Provide(content: @Composable () -> Unit) { CompositionLocalProvider( LocalRepositories provides repositoriesMap, ) { content() } } } }
48. 48 RepostoryのDI CompositionLocal class RepositoryProvider @Inject constructor( repositories: Map<Class<out Any>, @JvmSuppressWildcards Any>, ) { private val repositoriesMap = repositories .map { (k, v) -> k.kotlin to v as Any }.toMap() @Composable fun Provide(content: @Composable () -> Unit) { CompositionLocalProvider( LocalRepositories provides repositoriesMap, ) { content() } } } }
49. 49 RepostoryのDI CompositionLocal @AndroidEntryPoint class MainActivity : ComponentActivity() { @Inject lateinit var repositoryProvider: RepositoryProvider override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { repositoryProvider.Provide { // Use Repository val myRepository = localSessionsRepository() } } } } @Composable fun localSessionsRepository(): SessionsRepository { return LocalRepositories.current[SessionsRepository::class] as SessionsRepository }
50. 50 RepostoryのDI CompositionLocal @AndroidEntryPoint class MainActivity : ComponentActivity() { @Inject lateinit var repositoryProvider: RepositoryProvider override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { repositoryProvider.Provide { // Use Repository val myRepository = localSessionsRepository() } } } } @Composable fun localSessionsRepository(): SessionsRepository { return LocalRepositories.current[SessionsRepository::class] as SessionsRepository }
51. 51 RepostoryのDI CompositionLocal @AndroidEntryPoint class MainActivity : ComponentActivity() { @Inject lateinit var repositoryProvider: RepositoryProvider override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { repositoryProvider.Provide { // Use Repository val myRepository = localSessionsRepository() } } } } @Composable fun localSessionsRepository(): SessionsRepository { return LocalRepositories.current[SessionsRepository::class] as SessionsRepository }
52. 52 RepostoryのDI CompositionLocal @AndroidEntryPoint class MainActivity : ComponentActivity() { @Inject lateinit var repositoryProvider: RepositoryProvider override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { repositoryProvider.Provide { // Use Repository val myRepository = localSessionsRepository() } } } } @Composable fun localSessionsRepository(): SessionsRepository { return LocalRepositories.current[SessionsRepository::class] as SessionsRepository }
53. 53 Full Composeの疑問 ・回転や遷移でデータ保持 ・RepositoryのDI ・イベントのハンドリング
54. 54 画面イベントの定義 sealed interface TimetableScreenEvent { data class Bookmark( val id: Int, val bookmarked: Boolean, ): TimetableScreenEvent data object UiTypeChange: TimetableScreenEvent }
55. 55 画面イベントの定義 @Composable fun TimetableScreen( eventFlow: MutableSharedFlow<TimetableScreenEvent> = remember { MutableSharedFlow(extraBufferCapacity = 20) }, uiState: TimetableScreenUiState = timetableScreenPresenter( events = eventFlow ), ) { TimetableScreen( uiState = uiState, onTimetableUiChangeClick = { eventFlow.tryEmit(TimetableScreenEvent.UiTypeChange) }, onBookmarked = { id -> eventFlow.tryEmit(TimetableScreenEvent.Bookmark(id)) }, ) }
56. 56 画面イベントの定義 @Composable fun TimetableScreen( eventFlow: MutableSharedFlow<TimetableScreenEvent> = remember { MutableSharedFlow(extraBufferCapacity = 20) }, uiState: TimetableScreenUiState = timetableScreenPresenter( events = eventFlow ), ) { TimetableScreen( uiState = uiState, onTimetableUiChangeClick = { eventFlow.tryEmit(TimetableScreenEvent.UiTypeChange) }, onBookmarked = { id -> eventFlow.tryEmit(TimetableScreenEvent.Bookmark(id)) }, ) }
57. 57 画面イベントの定義 @Composable fun TimetableScreen( eventFlow: MutableSharedFlow<TimetableScreenEvent> = remember { MutableSharedFlow(extraBufferCapacity = 20) }, uiState: TimetableScreenUiState = timetableScreenPresenter( events = eventFlow ), ) { TimetableScreen( uiState = uiState, onTimetableUiChangeClick = { eventFlow.tryEmit(TimetableScreenEvent.UiTypeChange) }, onBookmarked = { id -> eventFlow.tryEmit(TimetableScreenEvent.Bookmark(id)) }, ) }
58. 58 画面イベントの定義 @Composable fun TimetableScreen( eventFlow: MutableSharedFlow<TimetableScreenEvent> = remember { MutableSharedFlow(extraBufferCapacity = 20) }, uiState: TimetableScreenUiState = timetableScreenPresenter( events = eventFlow ), ) { TimetableScreen( uiState = uiState, onTimetableUiChangeClick = { eventFlow.tryEmit(TimetableScreenEvent.UiTypeChange) }, onBookmarked = { id -> eventFlow.tryEmit(TimetableScreenEvent.Bookmark(id)) }, ) }
59. 59 画面イベントの定義 @Composable fun timetableScreenPresenter( events: MutableSharedFlow<TimetableScreenEvent>, ... ): TimetableScreenUiState { ... LaunchedEffect(events) { events.collect { event -> launch { when (event) { is TimetableScreenEvent.Bookmark -> {} // Call repository function TimetableScreenEvent.UiTypeChange -> {} // Update retained state } } } } ... }
60. 60 Full Composeの疑問 ・回転や遷移でデータ保持 ・RepositoryのDI ・イベントのハンドリング Full Composeアーキテクチャを理解した！
61. Robot Pettern 61 ・画面定義に合わせてロボットの動作を定義する ・Unit Testの範囲がかなり広くなる