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