Anahí Salgado
@anncode
Clean Architecture
Android Jetpack
Compose
@anncode
Jetpack Compose
Toolkit para construir
Interfaces móviles nativas
@anncode
Jetpack Compose
Toolkit para construir
Interfaces móviles nativas
Kotlin
@anncode
Android Jetpack Compose
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
}
}
@anncode
Android Jetpack Compose
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
...
}
}
}
@anncode
Android Jetpack Compose
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Text(“Hola Mundo”)
}
}
}
@anncode
Android Jetpack Compose
@Composable
fun Title(text: String) {
@anncode
Android Jetpack Compose
@Composable
fun Title(text: String) {
Text()
}
@anncode
Android Jetpack Compose
@Composable
fun Title(text: String) {
Text(
text = text,
color = deepBlue,
fontSize = 24.sp,
textAlign = TextAlign.Center,
style = TextStyle(fontWeight = FontWeight.Bold)
)
}
@anncode
https://anahisalgado.com/
Jetpack Compose
Los elementos de UI
se acomodan
jerárquicamente
@anncode
Jetpack Compose
Los elementos de UI Composable {
se acomodan
jerárquicamente
@anncode
Jetpack Compose
Los elementos de UI Composable {
se acomodan Composable {
jerárquicamente
}
}
@anncode
Jetpack Compose
Los elementos de UI Composable {
se acomodan Composable {
Composable {
jerárquicamente
}
}
}
@anncode
Jetpack Compose
Los elementos de UI Composable {
se acomodan Composable {
Composable {
jerárquicamente Composable {}
}
}
}
@anncode
Jetpack Compose
Los elementos de UI Composable {
se acomodan Composable {
Composable {
jerárquicamente Composable {}
}
}
}
@anncode
Clean Architecture
@anncode
Clean Architecture
Presentation layer
Data layer Domain layer
@anncode
Arquitectura
@anncode
Arquitectura
@anncode
Arquitectura
Presentation layer
Data layer Domain layer
Activity
UseCase ViewModel
ApiService Repository Fragment
@anncode
Jetpack Compose
Toolkit para construir
Interfaces móviles nativas
Kotlin
@anncode
Arquitectura
Presentation layer
Data layer Domain layer
Activity
UseCase ViewModel
ApiService Repository Fragment
@anncode
Arquitectura
Presentation layer
Activity
ViewModel
Fragment
setContent { }
Composables
@anncode
Arquitectura
Presentation layer
Activity
ViewModel ui
Fragment
setContent { }
Composables
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
setContent { }
Composables
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
@anncode
Android Jetpack Compose
@Inject lateinit var mainViewModel: MainViewModel
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
mainViewModel.getCatFact()
@anncode
Android Jetpack Compose
@Inject lateinit var mainViewModel: MainViewModel
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
mainViewModel.getCatFact()
mainViewModel.catFact LiveData
}
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
LiveData
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
LiveData
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
State
LiveData
@anncode
State
✔ Cualquier valor que pueda
cambiar en el tiempo
@anncode
State
✔ Cualquier valor que pueda
cambiar en el tiempo
✔ Patrón de diseño:
Unidirectional Data Flow
@anncode
Arquitectura
Presentation layer
Activity ui
ViewModel
Fragment composable
State
LiveData
@anncode
Jetpack Compose
@Composable
fun CatFactScreen(
catFact: LiveData<CatFactStates>,
onClick: () -> Unit
) {
@anncode
Jetpack Compose
@Composable
fun CatFactScreen(
catFact: LiveData<CatFactStates>,
onClick: () -> Unit
) {
val catFact: CatFactStates by catFact.observeAsState(initial = CatFactStates.Loading)
@anncode
Jetpack Compose
@Composable
fun CatFactScreen(
catFact: LiveData<CatFactStates>,
onClick: () -> Unit
) {
val catFact: CatFactStates by catFact.observeAsState(initial = CatFactStates.Loading)
} LiveData State
@anncode
Jetpack Compose
val catFact: CatFactStates by catFact.observeAsState(initial = CatFactStates.Loading)
mainViewModel.catFact.observe(this@MainActivity, Observer { catFact ->
updateUI(catFact)
})
@anncode
Android Jetpack Compose
@Inject lateinit var mainViewModel: MainViewModel
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setContent {
CatFactScreen(catFact = mainViewModel.catFact) {
mainViewModel.getCatFact()
}
}
} @anncode
Jetpack Compose
@Composable
fun CatFactScreen(
catFact: LiveData<CatFactStates>,
onClick: () -> Unit
) {
val catFact: CatFactStates by catFact.observeAsState(initial = CatFactStates.Loading)
@anncode
https://anahisalgado.com/
Anahí Salgado
@anncode
