Slides da minha apresentação "Seu primeiro app Android e iOS com Compose Multiplatform" realizada no DevFest Agreste 2023 em Arapiraca-AL (Remoto).

1. Nelson Glauber
Android GDE
@nglauber
Seu primeiro app
Android e iOS com
Compose Multiplatform

2. O que é Kotlin Multiplatform?
• O Kotlin Multiplatform (ou simplesmente KMP) é uma tecnologia
desenvolvida pela Jetbrains para desenvolvimento de aplicações multi-
plataforma.
• Isso signi
fi
ca que é possível compartilhar código entre várias plataformas
(incluindo a parte do servidor)

4. Cross-Platform ou Nativo? E agora?
• Com o KMP você pode ter OS DOIS! Cross-Platform E Nativo. É possível:
1. compartilhar parte da lógica de negócio e deixar a UI nativa;
2. compartilhar toda a lógica de negócio e deixar a UI nativa;
3. ou compartilhar a lógica de negócio E a UI.

6. Kotlin/Native
Kotlin/JVM

10. APIs : Jetpack Compose x Compose Multiplatform
• Compose Multiplatform APIs são quase as mesmas das API de Jetpack
Compose
• Então todo o seu conhecimento em Jetpack Compose pode ser
reaproveitado

11. kdoctor

12. Android Studio + KMP Plugin

13. https://www.jetbrains.com/
fl
eet
• Fleet está disponível para
Windows, Mac and Linux
• Permite criar uma sessão
colaborativa com outro dev.
• Code completion e Refactoring
para código Swift
• Cross-Language navigation
(Kotlin <-> Swift)
• Cross-Language debugging
(Kotlin <-> Swift)
• Free durante o public preview

14. kmp.jetbrains.com

15. Estrutura do Projeto
• composeApp
• commonMain: código comum compartilhado entre as
plataformas. Ex.: expect declarations, ou de
fi
nição de
interfaces entre plataformas. As únicas dependências são
bibliotecas multi-plataforma.
• androidMain: implementação especí
fi
ca para Android (actual
functions e implementação de interface especí
fi
ca para
Android)
• iosMain: implementação especí
fi
ca para iOS (actual functions
e implementação de interface especí
fi
ca para Android).
• iosApp

16. Estrutura do Projeto
• commonMain + androidMain = Android
• commonMain + iosMain = iOS

18. List of Books
Books List
View Model
https://github.com/nglauber/dominando_android3/
blob/master/livros_novatec.json

19. Dependências
• Ktor para requisições web (https://github.com/ktorio/ktor)
• Voyager implementar View Model e Navegação (https://github.com/
adrielcafe/voyager)
• Kamel para carregamento de imagens (https://github.com/Kamel-Media/
Kamel)

20. [versions]
...
ktor = "2.3.6"
voyager = "1.0.0"
kamel = "0.8.3"
[libraries]
...
ktor-serialization-kotlinx-json = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktor" }
ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }
ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" }
ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktor" }
cafe-adriel-voyager-navigator = { module = "cafe.adriel.voyager:voyager-navigator", version.ref = "voyager" }
cafe-adriel-voyager-screenmodel = { module = "cafe.adriel.voyager:voyager-screenmodel", version.ref = "voyager" }
kamel = { module = "media.kamel:kamel-image", version.ref = "kamel" }
[plugins]
...
kotlinxSerialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin"}
gradle/libs.version.toml

21. plugins {
...
alias(libs.plugins.kotlinxSerialization)
}
kotlin {
...
sourceSets {
androidMain.dependencies {
...
implementation(libs.ktor.client.okhttp)
}
iosMain.dependencies {
implementation(libs.ktor.client.darwin)
}
commonMain.dependencies {
...
implementation(libs.ktor.client.core)
implementation(libs.ktor.client.content.negotiation)
implementation(libs.ktor.serialization.kotlinx.json)
implementation(libs.cafe.adriel.voyager.navigator)
implementation(libs.cafe.adriel.voyager.screenmodel)
implementation(libs.kamel)
}
}
}
composeApp/build.gradle.kts

22. O projeto
• Mostrar o JSON que será consumido (https://raw.githubusercontent.com/
nglauber/dominando_android3/master/livros_novatec.json)

23. Data Classes
import kotlinx.serialization.SerialName
import kotlinx.serialization.Serializable
@Serializable
data class Publisher(
@SerialName("novatec")
val categories: List<Category>
)
@Serializable
data class Category(
@SerialName("categoria")
val name: String,
@SerialName("livros")
val books: List<Book>
)
@Serializable
data class Book(
@SerialName("ano")
val year: Int,
@SerialName("autor")
val author: String,
@SerialName("capa")
val coverUrl: String,
@SerialName("paginas")
val pages: Int,
@SerialName("titulo")
val title: String
)

24. ViewModel e Networking
class BooksListViewModel: ScreenModel {
private val jsonUrl = "https://raw.githubusercontent.com/nglauber/dominando_android3/master/
livros_novatec.json"
private val httpClient = HttpClient {
install(ContentNegotiation) {
json()
}
}
override fun onDispose() {
super.onDispose()
httpClient.close()
}
private suspend fun loadPublisher(): Publisher {
return try {
httpClient.get(jsonUrl).body()
} catch (e: NoTransformationFoundException) {
val jsonString = httpClient.get(jsonUrl).body<String>()
Json.decodeFromString(jsonString)
}
}
}
Solução técnica adaptativa…🤭

25. ViewModel e UI State
data class BooksListUiState(
val books: List<Book>
)
class BooksListViewModel : ScreenModel {
private val _uiState = MutableStateFlow(BooksListUiState(emptyList()))
val uiState: StateFlow<BooksListUiState> = _uiState.asStateFlow()
init {
updateBookList()
}
fun updateBookList() {
screenModelScope.launch {
val publisher = loadPublisher()
val books = publisher.categories.flatMap { it.books }
_uiState.update {
it.copy(books = books)
}
}
}
...
}

26. ViewModel e UI State
data class BooksListUiState(
val books: List<Book> = emptyList(),
)
class BooksListViewModel : StateScreenModel<BooksListUiState>(
BooksListUiState(emptyList())
) {
init {
updateBookList()
}
fun updateBookList() {
screenModelScope.launch {
val publisher = loadPublisher()
val books = publisher.categories.flatMap { it.books }
mutableState.update {
it.copy(books = books)
}
}
}
...
}

27. class BooksListScreen : Screen {
@Composable
override fun Content() {
val viewModel = rememberScreenModel {
BooksListViewModel()
}
val uiState by viewModel.state.collectAsState()
LazyColumn {
items(uiState.books) {
Text(it.title)
}
}
}
}
Tela de listagem de livros
@Composable
fun App() {
MaterialTheme {
Navigator(BooksListScreen())
}
}

28. Tela de listagem de livros
@Composable
fun BookListItem(book: Book) {
Row(Modifier.padding(8.dp)) {
KamelImage(
resource = asyncPainterResource(book.coverUrl),
contentDescription = "Capa do livro ${book.title}",
modifier = Modifier.weight(.3f).aspectRatio(3 / 4f)
)
Spacer(Modifier.width(8.dp))
Column(Modifier.weight(.7f)) {
Text(book.title, style = MaterialTheme.typography.h6)
Text(book.author)
Text("Ano: ${book.year} | Pages: ${book.pages}")
}
}
}

29. Filtrando os resultados
data class BooksListUiState(
val publisher: Publisher = Publisher(emptyList()),
val selectedCategory: String? = null,
) {
val categories: List<Category> = publisher.categories
val books: List<Book> =
if (selectedCategory == null)
categories.flatMap { it.books }
else
categories.filter { it.name == selectedCategory }
.flatMap { it.books }
}
fun updateBookList() {
screenModelScope.launch {
val publisher = loadPublisher()
mutableState.update {
it.copy(publisher = publisher)
}
}
}
fun selectCategory(category: String) {
mutableState.update { state ->
if (state.selectedCategory == category) {
state.copy(selectedCategory = null)
} else {
state.copy(selectedCategory = category)
}
}
}

30. Filtrando os resultados
val viewModel = rememberScreenModel {
BooksListViewModel()
}
val uiState by viewModel.state.collectAsState()
Column {
LazyRow {
items(uiState.categories) {
Button(onClick = {
viewModel.selectCategory(it.name)
}) {
Text(it.name)
}
}
}
LazyColumn {
items(uiState.books) {
BookListItem(book = it)
}
}
}

31. Navegando para tela de detalhes
class BooksDetailsScreen(private val book: Book) : Screen {
@Composable
override fun Content() {
val navigator = LocalNavigator.currentOrThrow
Column {
Text(book.title)
Text(book.author)
Button(onClick = {
navigator.pop()
}) {
Text("Voltar")
}
}
}
}
@Composable
fun BookListItem(book: Book) {
val navigator = LocalNavigator.currentOrThrow
Row(
Modifier.padding(8.dp).clickable {
navigator.push(BooksDetailsScreen(book))
},
) { ...

33. Google Libs
• Google está portando suas bibliotecas para KMP
• Annotations
• Collections
• Paging

34. github.com/terrakok/kmp-awesome

35. Navigation
• Voyager (https://github.com/adrielcafe/voyager)
• PreCompose (https://github.com/Tlaster/PreCompose)

36. Resource Management and more…
• Permissions (https://github.com/icerockdev/moko-permissions)
• MVVM (https://github.com/icerockdev/moko-mvvm)
• Resources (https://github.com/icerockdev/moko-resources)
• Biometry (https://github.com/icerockdev/moko-biometry)
• Media (https://github.com/icerockdev/moko-media)
• Geolocation (https://github.com/icerockdev/moko-geo)

37. Image Loading
• Compose Image Loader (https://github.com/qdsfdhvh/compose-
imageloader)
• Kamel (https://github.com/Kamel-Media/Kamel)
• Coil (https://github.com/coil-kt/coil) (not ready yet)

38. Networking
• Ktor (https://github.com/ktorio/ktor)
• Ktor
fi
t (https://github.com/Foso/Ktor
fi
t)

39. Persistence
• SQLDelight (https://github.com/cashapp/sqldelight)
• Kstore (https://github.com/xxfast/kstore)
• MultiPlatform Settings (https://github.com/russhwolf/multiplatform-
settings)
• Google Data Store (https://developer.android.com/jetpack/androidx/
releases/datastore)

40. Compose Look and Feel
• https://github.com/alexzhirkevich/compose-cupertino

41. iOS Gradual adoption

42. iOS

45. Referências
• The state of Kotlin Multiplatform (https://www.youtube.com/watch?
v=bz4cQeaXmsI)
• Getting Started With KMP: Build Apps for iOS and Android With Shared Logic
and Native UIs (https://www.youtube.com/watch?v=zE2LIAUisRI)
• Build Apps for iOS, Android, and Desktop With Compose Multiplatform
(https://www.youtube.com/watch?v=IGuVIRZzVTk)
• Build an iOS & Android app in 100% Kotlin with Compose Multiplatform
(https://www.youtube.com/watch?v=5_W5YKPShZ4)

46. Obrigado!
Dúvidas?
Nelson Glauber
Android GDE
@nglauber