Explorons notre projet de départ
Avant de connecter notre application à Internet, prenons quelques minutes pour explorer le projet de départ.
Si ce n’est pas encore fait, clone le projet de départ et assure-toi d’être sur la branche starter-project.
Lance l’application sur un émulateur ou un appareil Android. Voici à quoi ressemble l’application.
L’écran affiche déjà une liste de pays. Pour le moment, ces données ne viennent pas d’une API. Elles sont déclarées directement dans le fichier data/AppData.kt :
object AppData {
val countries = listOf(
Country(
name = "France",
fifaCode = "FRA",
flag = "🇫🇷"
),
Country(
name = "Brésil",
fifaCode = "BRA",
flag = "🇧🇷"
),
Country(
name = "Japon",
fifaCode = "JPN",
flag = "🇯🇵"
)
)
}
Chaque élément est représenté par la classe Country, qui est déclarée dans le fichier model/country.kt.
data class Country(
val name: String,
val fifaCode: String,
val flag: String,
)
L’interface utilise ensuite une LazyColumn pour afficher la liste, dans le fichier ui/screens/CountryScreen.kt.
@Composable
private fun CountryList(
countries: List<Country>,
modifier: Modifier = Modifier
) {
LazyColumn(
modifier = modifier.fillMaxSize(),
contentPadding = PaddingValues(16.dp)
) {
item("title") {
Text(
text = "Country Explorer",
style = MaterialTheme.typography.headlineMedium,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(bottom = 4.dp)
)
}
items(
items = countries,
key = { it.name }
) { country ->
CountryRow(country = country)
HorizontalDivider()
}
}
}
Enfin, CountryRow affiche les trois propriétés du pays dans un composable Text :
@Composable
private fun CountryRow(
country: Country,
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
.fillMaxWidth()
.padding(vertical = 12.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "${country.flag} ${country.name} ${country.fifaCode}",
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.SemiBold,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
}
L’interface est donc déjà prête à recevoir une liste de Country.
Dans la suite du codelab, nous allons remplacer AppData.countries par les véritables données venant d’Internet. Pour cela, nous allons consommer une API REST.