Android研修【MIXI 24新卒技術研修】

本スライドは、MIXIの2024年度新卒向け技術研修で使用された資料です。

＜科目名＞
Android研修

＜関連リンク＞
動画▶ https://youtu.be/8bQnUEDPg3Q
リポジトリ▶ https://github.com/mixigroup/2024AndroidTraining

※お願い※ 〜 資料・動画・リポジトリのご利用について〜
公開している資料や動画は、是非、勉強会や社内の研修などにご自由にお使いいただければと思いますが、以下のような場でのご利用はご遠慮ください。
- 受講者から参加費や授業料など金銭を集めるような場での利用
（会場費や飲食費など勉強会の運営に必要な実費を集める場合は問題ありません）
- 出典を削除または改変しての利用

Transcript

1. Android 2024.4.22 Android Google LLC
2. ©MIXI 2 2017 2023 Vantage D
4. ©MIXI 4 Android Android
6. 1 Android 2 3 UI 4 5 6 7 8 9 UI 10 Kotlin Multiplatform
7. Android 1
8. ©MIXI Android 8 Android Auto Android TV PC ChromeOS Wear OS ,
9. ©MIXI Android 9 API (SDK ) 2008.09 1.0 1 Base ... 2018.08 9 28 Pie 2019.09 10 29 Q 2020.09 11 30 R 2021.10 12 31 S 2022.03 12L 32 S v2 2022.08 13 33 Tiramisu 2023.10 14 34 UpsideDownCake - 15 35 VanillaIceCream API ( )
10. ©MIXI Android Studio IntelliJ IDEA ⾒ https://developer.android.com/studio 10
11. ©MIXI 11 Android Studio APK (Android Application Package) AVD (Android Virtual Device)
12. ©MIXI 12 Android Studio AAB (Android App Bundle) Google Play
13. ©MIXI 13 Android Studio AAB (Android App Bundle) Google Play : : xxhdpi CPU: arm : : hdpi CPU: x86 APK
14. ©MIXI 14 Android Studio AAB (Android App Bundle) Google Play l l : : xxhdpi CPU: arm : : hdpi CPU: x86
15. ©MIXI Kotlin Android (2017 ) Java 15 Kotlin l : l Java : Kotlin Java Java Kotlin l Null :
16. ©MIXI l : l Java : Kotlin Java Java Kotlin l Null : Kotlin Android (2017 ) Java 16 Kotlin NullPointerException var count: Int // null var count: Int? // null
17. ©MIXI Kotlin Android, iOS, Desktop, Web https://kotlinlang.org/docs/multiplatform.html 17 Kotlin Multiplatform Kotlin UI ( ) https://developerhttps://developer.android.com/develop/ui/compose?hl=ja Jetpack Compose
18. ©MIXI Wear OS, ChromeOS, Android TV, Android Auto API : Android 14 API 34, UpsideDownCake APK : AAB : Google Play APK : , Java , Null Kotlin : Kotlin Multiplatform, Jetpack Compose 18 Android Kotlin
20. ©MIXI Android Studio New Project 20
21. ©MIXI Empty Activity (Activity ) Jetpack Compose 21
22. ©MIXI Name Package name ID : example.co.jp jp.co.example Minimum SDK 22
23. ©MIXI AVD ( ) ⾒ https://developer.android.com/studio/run/managing-avds?hl=ja 23 AVD
24. ©MIXI 24 , , Kotlin ,
25. ©MIXI ( ) 1. https://developer.android.com/studio/debug/dev-options?hl=ja#enable 2. USB ON 3. USB Android Studio 25 1. USB
26. ©MIXI ( ) 1. Android 11 PC 2. https://developer.android.com/studio/debug/dev-options?hl=ja#enable 3. Android Studio Pair Devices Using Wi-Fi 4. ON 5. Android Studio 6. Android Studio 26 2. Wi-Fi
27. UI 3
28. ©MIXI : 1. Android Studio Get from VCS 28 2. URL git@github.com:mixigroup/2024AndroidTraining.git git clone OK 3. app.ui 1
29. ©MIXI Jetpack l l 29 app Android 14 Android 13 Android 12 if else if else ... app Android 14 Android 13 Android 12 Jetpack
30. ©MIXI Jetpack Compose Jetpack Kotlin UI 2021 UI ( ) https://developer.android.com/develop/ui/compose?hl=ja 30
31. ©MIXI 31 View : UI Compose : UI val textView = TextView(context) textView.setText("Hello") textView.setTextColor(Color.BLUE) Text( text = "Hello", color = Color.Blue, ) View UI View Composable UI Composable
32. ©MIXI 32 View : UI Compose : UI val textView = TextView(context) textView.setText("Hello") textView.setTextColor(Color.BLUE) Text( text = "Hello", color = Color.Blue, ) Composable UI Composable UI Recompose
33. ©MIXI Composable 33 @Composable fun RedText( text: String, modifier: Modifier = Modifier, ) { Text( text = text, modifier = modifier, color = Color.Red ) } RedText( text = "Red text", ) RedText( text = "Red text with blue background", modifier = Modifier.background(Color.Blue), )
34. ©MIXI Composable 34 @Composable fun RedText( text: String, modifier: Modifier = Modifier, ) { Text( text = text, modifier = modifier, color = Color.Red, ) } Composable Compose Composable l ProfileScreen l LoginButton l HeaderImage
35. ©MIXI Composable 35 // modifier RedText( text = "Red text", ) // modifier RedText( text = "Red text with blue background", modifier = Modifier.background(Color.Blue), ) text = modifier API
36. ©MIXI Composable Composable Composable Composable e.g. Button, Tab, Snackbar 36 Snackbar { Text(text = "Hello") } Composable Snackbar: UI
37. ©MIXI Composable 37 @Composable fun Snackbar( ... content: @Composable () -> Unit ) Snackbar(content = { Text(text = "Hello") }) Snackbar() { Text(text = "Hello") } Snackbar { Text(text = "Hello") } ( ) -> () -> Unit { -> } () ()
38. ©MIXI Composable API ( ) 38 Snackbar( action = { ... }, content = { ... }, )
39. ©MIXI Modifier.padding(all = 8.dp) Modifier.padding(horizontal = 8.dp, vertical = 4.dp) Modifier.padding(start = 8.dp, top = 4.dp, end = 8.dp, bottom = 16.dp) Modifier 39 // 96 x 48 dp Modifier.width(96.dp).height(48.dp) // 48 x 48 dp Modifier.size(48.dp) // Modifier.fillMaxWidth().wrapContentHeight() // Modifier.fillMaxSize() dp
40. ©MIXI DP Px 40 DP : density-independent pixels : : : :
41. ©MIXI 41 SP : scalable pixels
42. ©MIXI Button, Checkbox, TopAppBar Composable 42 API https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary https://m3.material.io/components
43. ©MIXI Composable Composable 43 Column Row
44. ©MIXI Composable 44 Column( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(8.dp), ) { Text(text = "Top") Text(text = "Center") Text(text = "Bottom") } Composable (36 )
45. ©MIXI Composable Spacer 45 Column(horizontalAlignment = Alignment.CenterHorizontally) { Text(text = "Top") Spacer(modifier = Modifier.height(8.dp)) Text(text = "Center") Spacer(modifier = Modifier.height(8.dp)) Text(text = "Bottom") }
46. ©MIXI 46 Column(modifier = modifier.height(160.dp)) { Text(text = "Top", modifier = Modifier.weight(1f)) Text(text = "Center") Text(text = "Bottom") } Column(modifier = modifier.height(160.dp)) { Text(text = "Top", modifier = Modifier.weight(1f)) Text(text = "Center", modifier = Modifier.weight(2f)) Text(text = "Bottom", modifier = Modifier.weight(3f)) } 1:2:3 ⾒
47. ©MIXI Composable 47 Row( horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically, ) { Text(text = "Left") Text(text = "Center") Text(text = "Right") } Row : Column
48. ©MIXI : LazyColumn Compose 48 Column LazyColumn Compose Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Compose
49. ©MIXI LazyColumn LazyRow 49 LazyColumn( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(8.dp), ) { // 1 item { Text(text = "Header") } // items(listOf("1", "2", "3")) { text -> Text(text = text) } }
50. ©MIXI Composable @Preview 築 50
51. ©MIXI 3.1 app.ui BookItem 52, 53 51 16 dp 8 dp 8 dp 4 dp 18 sp, 16 sp 16 dp title author
52. ©MIXI 3.1 @Preview 52 app.ui UiScreen @Composable fun UiScreen(modifier: Modifier = Modifier) { Column(...) { ... val book = Book(title = " ", author = " ") BookItem(book = book) ... } } 1 2
53. ©MIXI Android Studio Tips Option + Enter import 53 Unresolved reference Command + B Command +
54. ©MIXI 3.2 ( ) API https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary 54
55. ©MIXI UI 55 Jetpack UI Kotlin Jetpack Compose Composable UI Modifier Composable Column , Row , LazyColumn / LazyRow DP , SP
57. ©MIXI Android 57 ( ) l String resource l Drawable resource l Raw resource src/main/res/
58. ©MIXI res/values/strings.xml 58 <resources> <string name="login"> </string> <string name="settings"> </string> ... </resources> Text(text = stringResource(id = R.string.login)) Text(text = stringResource(id = R.string.settings)) UI
59. ©MIXI 59 strings.xml strings.xml 1 2
60. ©MIXI 60 strings.xml <string name="settings">Settings</string> <string name="settings"> </string> res/values/strings.xml res/values-ja/strings.xml
61. ©MIXI 61 : JPG, PNG, WebP : SVG
62. ©MIXI 62 res/drawable-mdpi/ res/drawable-hdpi/ res/drawable-xhdpi/ res/drawable-xxhdpi/ res/drawable-xxxhdpi/ res/drawable/ UI Android Studio VectorDrawable ( )
63. ©MIXI VectorDrawable 63 SVG or
64. ©MIXI Icon( painter = painterResource(id = R.drawable.ramen), contentDescription = stringResource(R.string.ramen), tint = Color.Red, ) 64 Image( painter = painterResource(id = R.drawable.ramen), contentDescription = stringResource(R.string.ramen), ) Icon
65. ©MIXI Modifier 65 Image( ... modifier = Modifier.clip(CircleShape), ) Image( ... modifier = Modifier.clip(RoundedCornerShape(size = 8.dp)), )
66. ©MIXI 4.1 3.1 BookItem 3.1 ⾒ answer/3.1
67. ©MIXI 8dp padding 4.2 BookItem 67 16 dp 16 dp 48 x 48 dp l Android Studio l Modifier (35 ) l Modifier : https://developer.android.com/jetpack/compose/modifiers?hl=ja#order-modifier-matters
68. ©MIXI 4.3 ( ) 4.1 https://developer.android.com/training/basics/supporting-devices/languages?hl=ja 68 l l
69. ©MIXI 4.4 ( ) https://developer.android.com/develop/ui/compose/resources?hl=ja 69 l l l
70. ©MIXI 70 res/values/strings.xml l l Android Studio VectorDrawable
72. ©MIXI Text(text = " ") Composable (Recompose) UI 72 Text(text = " ")
73. ©MIXI 73 0 1 1 2
74. ©MIXI 1 : 74 var count = 0 Button(onClick = { count++ }) { Text(text = count.toString()) } count Recompose val : var : 0 0
75. ©MIXI 1 : 75 var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text(text = count.toString()) } MutableState Compose Recompose (UI )
76. ©MIXI 1 : 76 var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text(text = count.toString()) } Delegated property MutableState<Int> Int remember Recompose API : https://developer.android.com/jetpack/compose/state#state-in-composables
77. ©MIXI 1 : 77 var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text(text = count.toString()) } 0 1
78. ©MIXI var text by remember { mutableStateOf("") } TextField( value = text, onValueChange = { value -> text = value } ) 2 : 78
79. ©MIXI 5.1 app.login LoginScreen l l ID 4 8 ( ) : userId.length 79
80. ©MIXI 5.2 ( ) UI https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary 80 l Switch l Checkbox l Slider
81. ©MIXI 81 Composable (Recompose) UI MutableState Recompose var state by remember { mutableStateOf( ) } UI Composable onClick onValueChange e.g. Button, TextField, Switch UI UI
83. ©MIXI 83
84. ©MIXI 84
85. ©MIXI 85 1 2 3
86. ©MIXI 86 :
87. ©MIXI 87 val TAG = "LoginScreen" Log.v(TAG, " ") Log.d(TAG, " ") Log.i(TAG, " ") Log.w(TAG, " ") Log.e(TAG, " ") ( )
88. ©MIXI package:mine 88 package: tag: Log level:
89. ©MIXI 89 l l l l
91. ©MIXI ( ) 91 A B A B l l UI l
92. ©MIXI https://developer.android.com/topic/architecture?hl=ja 92 UI l UI l l UI l l UI l ( )
93. ©MIXI 93 UI UI
94. ©MIXI UI 94 UI UI Compose l UI l UI ViewModel l UI l UI UI
95. ©MIXI 95 UI
96. ©MIXI 96 UI Jetpack Room SQLite Jetpack DataStore Key-Value Ktor Kotlin Kotlin HTTP Retrofit HTTP
97. ©MIXI 97 UI UI ( )
98. ©MIXI : ver. 98 Column(...) { var result by remember { mutableStateOf("") } Text(text = result) Button(onClick = { result = listOf(" ", " ", ...).random() }) { Text(text = stringResource(R.string.pick_omikuji)) } }
99. ©MIXI 99 UI l l ( ) l UI l
100. ©MIXI ( ) 100 class OmikujiRepository { fun getResult(): String { return listOf(" ", " ", ...).random() } }
101. ©MIXI UI 101 data class OmikujiUiState( val result: String = "", ) OK
102. ©MIXI UI 102 data class OmikujiUiState( val result: String = "", ) : class OmikujiUiState( val result: String = "", ) { fun copy(result: String = this.result) = OmikujiUiState(result) override fun equals(other: Any?): Boolean { if (this === other) return true if (other !is OmikujiUiState) return false return result == other.result } override fun toString() = "ResultUiState(result='$result')" override fun hashCode() = result.hashCode() }
103. ©MIXI Jetpack 103 class OmikujiViewModel() : ViewModel() { ... } UI ViewModel ViewModel
104. ©MIXI ViewModel 104 class OmikujiViewModel( private val repository: OmikujiRepository = OmikujiRepository(), ) : ViewModel() { ... } (DI)
105. ©MIXI UiState MutableState 105 class OmikujiViewModel(...) : ViewModel() { var uiState by mutableStateOf(OmikujiUiState()) } uiState = uiState.copy(result = " ")
106. ©MIXI UiState ViewModel 106 class OmikujiViewModel(...) : ViewModel() { ... fun pick() { val result = repository.getResult() uiState = uiState.copy(result = result) } } UiState UI
107. ©MIXI UI ViewModel 107 val viewModel: OmikujiViewModel = viewModel() val uiState = viewModel.uiState Text(text = uiState.result) var result by remember { mutableStateOf("") } Text(text = result) Before After Compose ViewModel
108. ©MIXI Button(onClick = viewModel::pick) UI ViewModel 108 Button(onClick = { viewModel.pick() }) Button(onClick = { result = listOf(" ", " ", ...).random() }) Before After OK https://kotlinlang.org/docs/reflection.html#function-references
109. ©MIXI 109 UI UI ViewModel app.omikuji
110. ©MIXI 7.1 : ToDo 110
111. ©MIXI 7.1 : ToDo app.todo 111 ToDoScreen ToDoViewModel uiState l l UI l UI l l ToDoUiState
112. ©MIXI 7.2 ( ) 7.1 ToDo 112 1
113. ©MIXI 7.3 ( ) https://developer.android.com/topic/architecture?hl=ja 113 l l UI l MutableState MutableStateFlow
114. ©MIXI 114 , , Android l UI l UI UI l (DB ) ( )
116. ©MIXI 116 UI ViewModel ( ) UI
117. ©MIXI src/main/java/jp/co/mixi/androidtraining/omikuji/ui/OmikujiViewModel.kt 117 src/test/java/jp/co/mixi/androidtraining/omikuji/ui/OmikujiViewModelTest.kt ViewModel ViewModel Android Studio "Android" "Project"
118. ©MIXI ViewModel 118 class OmikujiViewModelTest { private val viewModel = OmikujiViewModel() @Test fun testPick() { assertEquals("", viewModel.uiState.result) viewModel.pick() assertNotEquals("", viewModel.uiState.result) } }
119. ©MIXI ViewModel 119 class OmikujiViewModelTest { private val viewModel = OmikujiViewModel() @Test fun testPick() { assertEquals("", viewModel.uiState.result) viewModel.pick() assertNotEquals("", viewModel.uiState.result) } } JUnit 4 (Java ) API
120. ©MIXI ViewModel 120 class OmikujiViewModelTest { private val viewModel = OmikujiViewModel() @Test fun testPick() { assertEquals("", viewModel.uiState.result) viewModel.pick() assertNotEquals("", viewModel.uiState.result) } } uiState
121. ©MIXI ViewModel 121 class OmikujiViewModelTest { private val viewModel = OmikujiViewModel() @Test fun testPick() { assertEquals("", viewModel.uiState.result) viewModel.pick() assertEquals(" ", viewModel.uiState.result) } }
122. ©MIXI ViewModel 122 DefaultOmikujiRepository pick() ViewModel FakeOmikujiRepository pick()
123. ©MIXI 123 class OmikujiViewModel( private val repository: OmikujiRepository, ) : ViewModel() DefaultOmikujiRepository FakeOmikujiRepository (104 )
124. ©MIXI 124 interface OmikujiRepository { fun getResult(): String } class DefaultOmikujiRepository : OmikujiRepository { override fun getResult(): String { return listOf(" ", " ", ...).random() } } class FakeOmikujiRepository : OmikujiRepository { override fun getResult(): String { return " " } }
125. ©MIXI 125 class OmikujiViewModelTest { private val viewModel = OmikujiViewModel(FakeOmikujiRepository()) @Test fun testPick() { assertEquals("", viewModel.uiState.result) viewModel.pick() assertEquals(" ", viewModel.uiState.result) } }
126. ©MIXI 126
127. ©MIXI Android Studio Tips 127 Option + Enter
128. ©MIXI 8.1 7.1 ToDoViewModel 128 l l
129. ©MIXI 8.2 ( ) UI Compose https://developer.android.com/develop/ui/compose/testing 129 https://developer.android.com/codelabs/jetpack-compose-testing Codelab
130. ©MIXI 130 (Android ) UI : ViewModel, , : src/test/java/ : JUnit 4
132. ©MIXI : 132
133. ©MIXI 133 data class WeatherUiState( val weather: String = "", val isLoading: Boolean = false, ) fun getWeather() { // uiState = uiState.copy(isLoading = true) // val weather = repository.getWeather() // uiState = uiState.copy(weather = weather, isLoading = false) } ViewModel
134. ©MIXI 134 data class WeatherUiState( val weather: String = "", val isLoading: Boolean = false ) fun getWeather() { // uiState = uiState.copy(isLoading = true) // val weather = repository.getWeather() // uiState = uiState.copy(weather = weather, isLoading = false) } ViewModel (UI )
135. ©MIXI Kotlin 135 viewModelScope.launch { uiState = uiState.copy(isLoading = true) val weather = repository.getWeather() uiState = uiState.copy(weather = weather, isLoading = false) } uiState = uiState.copy(isLoading = true) val weather = repository.getWeather() uiState = uiState.copy(weather = weather, isLoading = false)
136. ©MIXI Kotlin 136 viewModelScope.launch { uiState = uiState.copy(isLoading = true) val weather = repository.getWeather() uiState = uiState.copy(weather = weather, isLoading = false) } getWeather()
137. ©MIXI 137 getWeather()
138. ©MIXI 138 class WeatherRepository { suspend fun getWeather(): String { // } } suspend l suspend l suspend suspend
139. ©MIXI suspend 139 Kotlin API delay(timeMillis = 2000) 2 Ktor (HTTP ) API val response = client.request(urlString = "https://...") DB Jetpack Room (SQLite ) API val user = dao.getUser(userId = ...)
140. ©MIXI 140 viewModelScope.launch { val weather = repository.getWeather() } ViewModel viewModelScope ( )
141. ©MIXI 9.1 : SNS app.sns app.weather 141 TimelineScreen TimelineViewModel TimelineUiState TimelineRepository List<Post> l l UiState l suspend
142. ©MIXI 9.2 ( ) : SNS 9.1 ViewModel app.weather : https://developer.android.com/kotlin/coroutines/test?hl=ja 142 l l UiState
143. ©MIXI 143 UI l l suspend l suspend l suspend l suspend suspend e.g. , DB
144. Kotlin Multiplatform 10
145. ©MIXI 10.1 : Kotlin Multiplatform multiplatform Android / iOS / Desktop 145 https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-multiplatform-setup.html ü Xcode ü Kotlin Multiplatform Mobile plugin ü Xcode ü KDoctor
146. ©MIXI 10.1 : Kotlin Multiplatform 146 ( ) iOS multiplatform
147. ©MIXI 10.1 : Kotlin Multiplatform https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-multiplatform-create-first- app.html#run-on-a-new-ios-simulated-device 147 iOS
148. ©MIXI 10.2 : Compose Multiplatform multiplatform TimelineScreen Compose Multiplatform https://www.jetbrains.com/ja-jp/lp/compose-multiplatform/ 148 l Android UI l l l
150. ©MIXI Compose, , , , https://github.com/android/nowinandroid 150 https://www.jetbrains.com/help/kotlin-multiplatform-dev/multiplatform-samples.html Compose UI https://github.com/android/compose-samples Now in Android App Kotlin Multiplatform Samples Jetpack Compose Samples
151. ©MIXI https://android-developers.googleblog.com/ 151 https://medium.com/androiddevelopers https://material.io/blog/ Android Developers Blog Medium Material Design Blog https://blog.jetbrains.com/kotlin/ Kotlin Blog