Androidアプリ開発研修【MIXI 23新卒技術研修】

23新卒技術研修で実施したAndroidアプリ開発研修の講義資料です。

動画：https://youtu.be/VfZMuEL2tGk

ハンズオン用リポジトリ：https://github.com/mixigroup/2023AndroidTraining

資料の利用について
公開している資料は勉強会や企業の研修などで自由にご利用頂いて大丈夫ですが、以下の形での利用だけご遠慮ください。
・受講者から参加費や授業料などを集める形での利用（会場費や飲食費など勉強会運営に必要な実費を集めるのは問題ありません）
・出典を削除または改変しての利用

Transcript

1. Android 2023.4.26 Android Google LLC
2. ©MIXI 2 2017 Vantage KARASTA 2015 Vantage M
4. ©MIXI 4 Android Android
6. ©MIXI 6 1 Android 2 3 UI 4 5 6 7 8 9 10
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 ... 2017.08 8.0 26 Oreo 2017.12 8.1 27 Oreo MR1 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 - 14 34 Upside Down Cake 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 Null : l Java : Kotlin Java Java Kotlin
16. ©MIXI Kotlin Android (2017 ) Java 16 Kotlin l : l Null : l Java : Kotlin Java Java Kotlin NullPointerException var count: Int // null var count: Int? // null
17. ©MIXI Kotlin Android, iOS, Web https://kotlinlang.org/docs/multiplatform.html 17 Kotlin Multiplatform Kotlin UI ( ) https://developer.android.com/jetpack/compose?hl=ja Jetpack Compose
18. ©MIXI Wear OS, ChromeOS, Android TV, Android Auto API : Android 13 API 33, Tiramisu APK : AAB : Google Play APK : , Null , Java 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 { }.{ } : jp.co.mixi.karasta 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/2023AndroidTraining.git git clone OK 3. app.ui 1
29. ©MIXI Jetpack l l 29 app Android 13 Android 12 Android 11 if else if else ... app Android 13 Android 12 Android 11 Jetpack
30. ©MIXI Jetpack Compose Jetpack Kotlin UI 2021 UI ( ) https://developer.android.com/jetpack/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 API ( ) 36 Button { Text(text = "Hello") } Composable
37. ©MIXI Composable 37 @Composable fun Button( ... content: @Composable () -> Unit ) Button(content = { Text(text = "Hello") }) Button() { Text(text = "Hello") } Button { Text(text = "Hello") } ( ) -> () -> Unit { -> } () ()
38. ©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 38 // 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
39. ©MIXI DP Px 39 DP : density-independent pixels : : : :
40. ©MIXI 40 SP : scalable pixels
41. ©MIXI Button, Checkbox, TopAppBar Composable 41 API https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary https://m3.material.io/components
42. ©MIXI Composable Composable 42 Column Row
43. ©MIXI Composable 43 Column( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(8.dp) ) { Text(text = "Top") Text(text = "Center") Text(text = "Bottom") } Composable (36 )
44. ©MIXI Composable Spacer 44 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") }
45. ©MIXI 45 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 ⾒
46. ©MIXI Composable 46 Row( horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically ) { Text(text = "Left") Text(text = "Center") Text(text = "Right") } Row : Column
47. ©MIXI : LazyColumn Compose 47 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
48. ©MIXI LazyColumn LazyRow 48 LazyColumn( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(8.dp) ) { // 1 item { Text(text = "Header") } // items(listOf("1", "2", "3")) { text -> Text(text = text) } }
49. ©MIXI Composable @Preview 築 49
50. ©MIXI 3.1 app.ui BookItem Android Studio Tips 50 16 dp 8 dp 8 dp 4 dp 18 sp, 16 sp 16 dp title author
51. ©MIXI Android Studio Tips Option + Enter import 51 Unresolved reference Command + B Command +
52. ©MIXI 3.2 ( ) API https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary 52
53. ©MIXI UI 53 Jetpack UI Kotlin Jetpack Compose Composable UI Modifier Composable Column , Row , LazyColumn / LazyRow DP , SP
55. ©MIXI Android 55 ( ) l String resource l Drawable resource l Raw resource src/main/res/
56. ©MIXI res/values/strings.xml 56 <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
57. ©MIXI 57 strings.xml strings.xml 1 2
58. ©MIXI 58 strings.xml <string name="settings">Settings</string> <string name="settings"> </string> res/values/strings.xml res/values-ja/strings.xml
59. ©MIXI 59 : JPG, PNG, WebP : SVG
60. ©MIXI 60 res/drawable-mdpi/ res/drawable-hdpi/ res/drawable-xhdpi/ res/drawable-xxhdpi/ res/drawable-xxxhdpi/ res/drawable/ Adobe XD Sketch Android Studio VectorDrawable ( )
61. ©MIXI VectorDrawable 61 SVG or
62. ©MIXI Icon( painter = painterResource(id = R.drawable.ramen), contentDescription = stringResource(R.string.ramen), tint = Color.Red ) 62 Image( painter = painterResource(id = R.drawable.ramen), contentDescription = stringResource(R.string.ramen) ) Icon
63. ©MIXI Modifier 63 Image( ... modifier = Modifier.clip(CircleShape) ) Image( ... modifier = Modifier.clip(RoundedCornerShape(size = 8.dp)) )
64. ©MIXI 4.1 3.1 BookItem 3.1 ⾒ answer/3.1
65. ©MIXI 8dp padding 4.2 BookItem 65 16 dp 16 dp 48 x 48 dp l Android Studio l Modifier (33 ) l Modifier : https://developer.android.com/jetpack/compose/modifiers?hl=ja#order-modifier-matters
66. ©MIXI 4.3 ( ) 4.1 https://developer.android.com/training/basics/supporting-devices/languages?hl=ja 66 l l
67. ©MIXI 67 res/values/strings.xml l l Android Studio VectorDrawable
69. ©MIXI Text(text = " ") Composable (Recompose) UI 69 Text(text = " ")
70. ©MIXI 70 0 1 1 2
71. ©MIXI 1 : 71 var count = 0 Button(onClick = { count++ }) { Text(text = count.toString()) } count Recompose val : var : 0 0
72. ©MIXI 1 : 72 var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text(text = count.toString()) } MutableState Compose Recompose (UI )
73. ©MIXI 1 : 73 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
74. ©MIXI 1 : 74 var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text(text = count.toString()) } 0 1
75. ©MIXI var text by remember { mutableStateOf("") } TextField( value = text, onValueChange = { value -> text = value } ) 2 : 75
76. ©MIXI 5.1 app.login LoginScreen l l ID 4 8 ( ) 76
77. ©MIXI 5.2 ( ) UI https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary 77 l Switch l Checkbox l Slider
78. ©MIXI 78 Composable (Recompose) UI MutableState Recompose var state by remember { mutableStateOf( ) } UI Composable onClick onValueChange e.g. Button, TextField, Switch UI UI
80. ©MIXI 80
81. ©MIXI 81
82. ©MIXI 82 1 2 3
83. ©MIXI 83 :
84. ©MIXI 84 Log.v(TAG, " ") Log.d(TAG, " ") Log.i(TAG, " ") Log.w(TAG, " ") Log.e(TAG, " ") ( )
85. ©MIXI package:mine 85 package: tag: Log level:
86. ©MIXI 86 l l l l
88. ©MIXI ( ) 88 A B A B l l UI l
89. ©MIXI https://developer.android.com/topic/architecture?hl=ja 89 UI l UI l l UI l l UI l ( )
90. ©MIXI UI 90 UI UI Compose l UI l UI ViewModel l UI l UI UI
91. ©MIXI 91 UI UI ( )
92. ©MIXI UI 92 Jetpack Room SQLite Jetpack DataStore Key-Value Retrofit HTTP Ktor Kotlin Kotlin HTTP
93. ©MIXI : ver. 93 Column(...) { var result by remember { mutableStateOf("") } Text(text = result) Button(onClick = { result = listOf(" ", " ", ...).random() }) { Text(text = stringResource(R.string.pick_omikuji)) } }
94. ©MIXI 94 UI l l ( ) l UI l
95. ©MIXI ( ) 95 class OmikujiRepository { fun getResult(): String { return listOf(" 規", "規", ...).random() } }
96. ©MIXI UI 96 data class OmikujiUiState( val result: String = "" ) equals() copy() OK
97. ©MIXI Jetpack 97 class OmikujiViewModel() : ViewModel() { ... } UI ViewModel ViewModel
98. ©MIXI ViewModel 98 class OmikujiViewModel( private val repository: OmikujiRepository = OmikujiRepository() ) : ViewModel() { ... } (DI) Hilt DI
99. ©MIXI UiState MutableState 99 class OmikujiViewModel(...) : ViewModel() { var uiState by mutableStateOf(OmikujiUiState()) private set } MutableStateFlow l MutableState Compose API l MutableStateFlow Kotlin API
100. ©MIXI UiState ViewModel 100 class OmikujiViewModel(...) : ViewModel() { ... fun pick() { val result = repository.getResult() uiState = uiState.copy(result = result) } } UiState UI
101. ©MIXI UI ViewModel 101 val viewModel: OmikujiViewModel = viewModel() val uiState = viewModel.uiState Text(text = uiState.result) var result by remember { mutableStateOf("") } Text(text = result) Before After Compose ViewModel
102. ©MIXI Button(onClick = viewModel::pick) UI ViewModel 102 Button(onClick = { viewModel.pick() }) Button(onClick = { result = listOf(" ", " ", ...).random() }) Before After OK
103. ©MIXI 103 UI UI ViewModel app.omikuji
104. ©MIXI 7.1 : ToDo 104
105. ©MIXI 7.1 : ToDo app.todo 105 ToDoScreen ToDoViewModel uiState l l UI l UI l l l ToDoUiState
106. ©MIXI 7.2 ( ) 5.1 LoginScreen 106 LoginScreen LoginViewModel uiState l l UI l UI l LoginUiState
107. ©MIXI 107 , , Android l UI l UI UI l (DB ) ( )
109. ©MIXI 109 UI ViewModel ( ) UI
110. ©MIXI src/main/java/jp/co/mixi/androidtraining/omikuji/ui/OmikujiViewModel.kt 110 src/test/java/jp/co/mixi/androidtraining/omikuji/ui/OmikujiViewModelTest.kt ViewModel ViewModel Android Studio "Android" "Project"
111. ©MIXI ViewModel 111 class OmikujiViewModelTest { private val viewModel = OmikujiViewModel() @Test fun testPick() { assertEquals("", viewModel.uiState.result) viewModel.pick() assertNotEquals("", viewModel.uiState.result) } }
112. ©MIXI ViewModel 112 class OmikujiViewModelTest { private val viewModel = OmikujiViewModel() @Test fun testPick() { assertEquals("", viewModel.uiState.result) viewModel.pick() assertNotEquals("", viewModel.uiState.result) } } JUnit 4 (Java ) API
113. ©MIXI ViewModel 113 class OmikujiViewModelTest { private val viewModel = OmikujiViewModel() @Test fun testPick() { assertEquals("", viewModel.uiState.result) viewModel.pick() assertNotEquals("", viewModel.uiState.result) } } uiState
114. ©MIXI ViewModel 114 class OmikujiViewModelTest { private val viewModel = OmikujiViewModel() @Test fun testPick() { assertEquals("", viewModel.uiState.result) viewModel.pick() assertEquals(" ", viewModel.uiState.result) } }
115. ©MIXI 115 class OmikujiViewModel( private val repository: OmikujiRepository ) : ViewModel() DefaultOmikujiRepository FakeOmikujiRepository
116. ©MIXI 116 interface OmikujiRepository { fun getResult(): String } class DefaultOmikujiRepository : OmikujiRepository { override fun getResult(): String { return listOf(" ", " ", ...).random() } } class FakeOmikujiRepository : OmikujiRepository { override fun getResult(): String { return " " } }
117. ©MIXI 117 class OmikujiViewModelTest { private val viewModel = OmikujiViewModel(FakeOmikujiRepository()) @Test fun testPick() { assertEquals("", viewModel.uiState.result) viewModel.pick() assertEquals(" ", viewModel.uiState.result) } }
118. ©MIXI 118
119. ©MIXI 8.1 7.1 ToDoViewModel 119 l l l l
120. ©MIXI 8.2 ( ) 7.2 LoginViewModel 120 l ID 3 7 l ID 4 7 l ID 4 8
121. ©MIXI 121 (Android ) UI : ViewModel, , : src/test/java/ : JUnit 4
123. ©MIXI : 123
124. ©MIXI 124 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
125. ©MIXI 125 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 )
126. ©MIXI Kotlin 126 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)
127. ©MIXI Kotlin 127 viewModelScope.launch { uiState = uiState.copy(isLoading = true) val weather = repository.getWeather() uiState = uiState.copy(weather = weather, isLoading = false) } getWeather()
128. ©MIXI 128 getWeather()
129. ©MIXI 129 class WeatherRepository { suspend fun getWeather(): String { // } } suspend l suspend l suspend suspend
130. ©MIXI suspend 130 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 = ...)
131. ©MIXI 131 viewModelScope.launch { val weather = repository.getWeather() } ViewModel viewModelScope ( )
132. ©MIXI 132 UI l l suspend l suspend l suspend l suspend suspend e.g. , DB
134. ©MIXI : 134
135. ©MIXI 135 data class WeatherUiState( val weather: String = "", val isLoading: Boolean = false, val isError: Boolean = false ) sealed class WeatherUiState { data class Success(val weather: String) : WeatherUiState() object Loading : WeatherUiState() object Error : WeatherUiState() } OK UiState
136. ©MIXI 136 sealed class WeatherUiState { data class Success(val weather: String) : WeatherUiState() object Loading : WeatherUiState() object Error : WeatherUiState() } sealed class WeatherUiState WeatherUiState
137. ©MIXI try-catch 137 fun getWeather() { viewModelScope.launch { uiState = WeatherUiState.Loading try { val weather = repository.getWeather() uiState = WeatherUiState.Success(weather = weather) } catch (error: SomeException) { uiState = WeatherUiState.Error } } }
138. ©MIXI try-catch 138 fun getWeather() { viewModelScope.launch { uiState = WeatherUiState.Loading try { val weather = repository.getWeather() uiState = WeatherUiState.Success(weather = weather) } catch (error: SomeException) { uiState = WeatherUiState.Error } } } catch Exception catch throw ( )
139. ©MIXI UI when app.weather 139 @Composable fun WeatherScreen(...) { val uiState = viewModel.uiState when (uiState) { is WeatherUiState.Success -> SuccessScreen(...) is WeatherUiState.Loading -> LoadingScreen(...) is WeatherUiState.Error -> ErrorScreen(...) } }
140. ©MIXI 140 try-catch sealed class / /
141. 7 8 9 10
142. ©MIXI 10.1 : SNS app.sns app.weather 142 TimelineScreen TimelineViewModel TimelineUiState TimelineRepository List<Post> l l UiState l suspend
143. ©MIXI 10.2 : / / UI app.sns / app.weather IOException throw 143
144. ©MIXI 10.3 : SNS 10.1 ViewModel app.weather : https://developer.android.com/kotlin/coroutines/test?hl=ja 144 l l UiState
146. ©MIXI Compose, , , , https://github.com/android/nowinandroid 146 https://github.com/android/architecture-samples Compose UI https://github.com/android/compose-samples Now in Android App Android Architecture Samples Jetpack Compose Samples
147. ©MIXI https://android-developers.googleblog.com/ 147 https://medium.com/androiddevelopers https://material.io/blog/ Android Developers Blog Medium Material Design Blog https://blog.jetbrains.com/kotlin/ Kotlin Blog