Compose Multiplatform: Construindo um Aplicativo para Android, iOS e Desktop
Introdução
O objetivo deste artigo é apresentar o Framework Compose Multiplatform e demonstrar o uso da arquitetura MVVM com Ktor para networking.
O que é o Compose Multiplatform?
Segundo o site da JetBrains, o Compose Multiplatform é um framework declarativo para compartilhar interfaces de usuário em várias plataformas, baseado em Kotlin e Jetpack Compose. Atualmente é estável no Android e no Desktop, enquanto o iOS ainda está em fase alpha. No entanto, várias funcionalidades podem ser desenvolvidas nele. Em janeiro de 2024, a versão Web é experimental.
Criando um Projeto Compose Multiplatform
⚠️ Antes de prosseguir com os seguintes passos, certifique-se de instalar o kdoctor e executá-lo. Isso garante que tudo esteja instalado corretamente. Se algum componente estiver faltando, o comando no terminal irá exibir isso. Se estiver tudo em ordem, será exibido da seguinte maneira:
Neste projeto, vamos utilizar o JetBrains’ Kotlin Multiplatform Wizard, uma página da web para configurar nosso projeto e baixar o modelo de código-fonte.
Neste assistente, há várias configurações. Por enquanto, vamos selecionar as seguintes configurações:
Nesta seção, vamos definir o nome e o ID do projeto. Vamos chamar este projeto de “got-characters”, um aplicativo simples para exibir personagens de Game of Thrones de uma API REST. Você pode ajustar o ID do Projeto de acordo com sua preferência.
Na seção seguinte, vamos escolher estas opções. Observe que o iOS oferece duas opções; vamos selecionar o Share UI para utilizar o Jetpack Compose para construir a interface do usuário no iOS. Ainda podemos usar o código SwiftUI, dependendo da sua preferência.
Na seção final, vamos selecionar a opção Desktop para gerar um modelo de desktop para nosso aplicativo.
Agora, tudo o que precisamos fazer é baixar o projeto e extrair.
Para abrir este projeto, estarei utilizando a IDE Fleet da JetBrains. Você também pode usar o Android Studio para isso.
O primeiro arquivo que vamos abrir é o libs.versions.toml dentro da pasta gradle. Este arquivo é o catálogo de versões, que lista dependências representadas como coordenadas de dependência que um usuário pode escolher ao declarar dependências em um script de build.
Agora, vamos precisar adicionar algumas dependências para garantir que nosso aplicativo funcione corretamente.
Em seguida, vamos para o arquivo build.gradle dentro da pasta composeApp e adicionar o seguinte código.
Depois disso, sincronize seu projeto e estamos prontos para continuar.
Usando MVVM no Compose Multiplatform
Neste exemplo, vamos usar a biblioteca MokoMVVM, embora haja outras que servem ao mesmo propósito. Escolhi esta por ser mais fácil de entender e escrever.
No diretório composeApp/src/commonMain, estão nossos arquivos e código Kotlin. O arquivo App.kt serve como nosso ponto de entrada.
A primeira coisa que faremos é criar nosso objeto HttpClient.
Vamos definir nossa data class para cada personagem que retorna da API.
Em seguida, vamos criar um arquivo Util para lidar com os retornos da API e o estado da tela.
Agora, vamos criar nossa ViewModel. No diretório commonMain/kotlin, vamos criar HomeViewModel.kt usando a classe ViewModel da lib MokoMVVM. Aqui está um exemplo:
Agora que temos tudo pronto em nossa classe ViewModel, vamos construir uma UI para lidar com a resposta.
Construindo a UI
Se você já tem experiência com Jetpack Compose, não será difícil construir esta parte. Aqui está o arquivo HomeScreen:
O último passo é chamar nosso composable HomeScreen em nosso arquivo App.kt:
É isso! Agora deveríamos ter um aplicativo Compose Multiplatform em execução em vários dispositivos. Aqui está o resultado:
Você pode encontrar o código-fonte do projeto aqui.
