DEV Community: Alex Felipe

Como implementar uma busca com filtro no Jetpack Compose

Alex Felipe — Tue, 04 Jul 2023 11:00:00 +0000

Uma funcionalidade muito comum em diversos Apps, é permitir que os usuários façam buscas. A busca pode ser feita a partir de textos, categorias ou alguma informação que permita filtrar dados do App.

Dessa forma, melhoramos a experiência do usuário que tende a encontrar o que ele busca com mais facilidade, concorda? Agora vem a questão:

"Como podemos implementar uma busca com filtro no Jetpack Compose?"

TL;DR

Se o seu objetivo é verificar o código final sem entender as motivações, você pode visualizar abaixo:

O mais importante de todos é o ViewModel que mantém a lógica para filtrar, nesse caso, filtrar produtos:

class ProductsListViewModel : ViewModel() {

    private val products = MutableStateFlow(emptyList<Product>())
    private val _filteredProducts = MutableStateFlow(emptyList<Product>())
    val filteredProducts = _filteredProducts.asStateFlow()

    fun searchProducts(text: String) {
        _filteredProducts.value = if (text.isEmpty()) {
            products.value
        } else {
            products.value.filter {
                it.name
                    .contains(
                        text,
                        ignoreCase = true
                    ) || it.description
                    .contains(
                        text,
                        ignoreCase = true
                    )
            }
        }

    }

    init {
        products.value = List(10) {
            Product(
                name = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                description = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                price = BigDecimal(Random.nextInt(10, 1000))
            )
        }
        _filteredProducts.value = products.value
    }

}

Então temos o código da tela para implementar o campo de texto e lista de produtos:

val viewModel by viewModels<ProductsListViewModel>()
val products by viewModel.filteredProducts.collectAsState(initial = emptyList())
Column {
    var searchText by remember {
        mutableStateOf("")
    }
    OutlinedTextField(
        value = searchText,
        onValueChange = {
            searchText = it
            viewModel.searchProducts(searchText)
        },
        Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        label = {
            Text(text = "Buscar")
        },
        leadingIcon = {
            Icon(Icons.Default.Search, "search icon")
        },
        placeholder = {
            Text(text = "O que você procura?")
        },
        shape = RoundedCornerShape(10.dp)
    )
    ProductsListScreen(
        products = products
    )
}

E o código do composable que representa a lista de produtos:

@Composable
fun ProductsListScreen(
    products: List<Product> = emptyList()
) {
    LazyColumn(Modifier.fillMaxSize()) {
        items(products) { p ->
            Column(
                Modifier
                    .clip(RoundedCornerShape(10.dp))
                    .padding(8.dp)
                    .fillMaxWidth()
                    .border(
                        1.dp,
                        Color.Gray.copy(alpha = 0.5f),
                        RoundedCornerShape(10.dp)
                    )
                    .padding(8.dp)
            ) {
                Text(text = p.name, fontWeight = FontWeight.Bold, fontSize = 24.sp)
                Text(text = p.description)
                Text(
                    text = p.price.toBrazilianCurrency(),
                    fontWeight = FontWeight.Bold,
                    style = TextStyle.Default.copy(color = Color(0xFF4CAF50)),
                    fontSize = 18.sp
                )
            }
        }
    }
}

Caso você queira ver o formatador de moeda também:

private fun BigDecimal.toBrazilianCurrency(): String =
    NumberFormat.getCurrencyInstance(
        Locale("pt", "br")
    ).format(this)

Agora, se a sua intenção é entender os passos para chegar nesse código, é só seguir com a leitura.

Projeto de exemplo

Para exemplificar a implementação, vamos utilizar um App que tem um campo de texto e uma lista de produtos:

Um App simples para focar apenas na funcionalidade de filtrar os produtos.

Código da tela

Se você quer replicar exatamente o mesmo resultado, você pode acessar o código da tela também:

Column {
    val products by remember {
        mutableStateOf(List(10) {
            Product(
                name = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                description = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                price = BigDecimal(Random.nextInt(10, 1000))
            )
        })
    }
    var searchText by remember {
        mutableStateOf("")
    }
    OutlinedTextField(
        value = searchText,
        onValueChange = {
            searchText = it
        },
        Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        label = {
            Text(text = "Buscar")
        },
        leadingIcon = {
            Icon(Icons.Default.Search, "search icon")
        },
        placeholder = {
            Text(text = "O que você procura?")
        },
        shape = RoundedCornerShape(10.dp)
    )
    ProductsListScreen(
        products = products
    )
}

E aqui está o composable para representar a lista de produtos e o formatador de moeda:

@Composable
fun ProductsListScreen(
    products: List<Product> = emptyList()
) {
    LazyColumn(Modifier.fillMaxSize()) {
        items(products) { p ->
            Column(
                Modifier
                    .clip(RoundedCornerShape(10.dp))
                    .padding(8.dp)
                    .fillMaxWidth()
                    .border(
                        1.dp,
                        Color.Gray.copy(alpha = 0.5f),
                        RoundedCornerShape(10.dp)
                    )
                    .padding(8.dp)
            ) {
                Text(text = p.name, fontWeight = FontWeight.Bold, fontSize = 24.sp)
                Text(text = p.description)
                Text(
                    text = p.price.toBrazilianCurrency(),
                    fontWeight = FontWeight.Bold,
                    style = TextStyle.Default.copy(color = Color(0xFF4CAF50)),
                    fontSize = 18.sp
                )
            }
        }
    }
}

private fun BigDecimal.toBrazilianCurrency(): String =
    NumberFormat.getCurrencyInstance(
        Locale("pt", "br")
    ).format(this)

Pronto! Isso é o suficiente para iniciarmos a implementação do filtro.

ViewModel para buscar as informações da tela

A primeira coisa que precisamos pensar, é que o filtro trata-se de uma lógica de manipulação de dados, ou seja, o ideal é que essa lógica fique em algum outro lugar que não seja a tela.

Portanto, precisamos criar um ViewModel para manter essa lógica pra gente e ele pode começar contendo uma lista de produtos que vai representar a fonte de dados, ou seja, todos os produtos da tela:

class ProductsListViewModel : ViewModel() {

    private val products = MutableStateFlow(emptyList<Product>())

    init {
        products.value = List(10) {
            Product(
                name = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                description = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                price = BigDecimal(Random.nextInt(10, 1000))
            )
        }
    }

}

Geralmente a fonte de dados é representada por um banco de dados ou comunicação via uma REST API.

A partir desse momento, temos tudo que precisamos para começar a manipulação dos dados.

Adicionar os dados para representar o filtro

No caso do filtro, precisamos que exista uma outra lista para representar os produtos filtrados, afinal, a lista de produtos representa a fonte de dados e não deve ser modificada:

class ProductsListViewModel : ViewModel() {

    private val products = MutableStateFlow(emptyList<Product>())
    private val _filteredProducts = MutableStateFlow(emptyList<Product>())
    val filteredProducts = _filteredProducts.asStateFlow()

    fun searchProducts(text: String) {
        _filteredProducts.value = if (text.isEmpty()) {
            products.value
        } else {
            products.value.filter {
                it.name
                    .contains(
                        text,
                        ignoreCase = true
                    ) || it.description
                    .contains(
                        text,
                        ignoreCase = true
                    )
            }
        }

    }

    init {
        // ...
        _filteredProducts.value = products.value
    }

}

Se esse código pareceu complexo, vamos entender o que ele faz:

init: inicializa as properties necessárias:
- lista de produtos que vai representar a fonte de dados que não pode ser modificada
- lista de produtos filtrados com o mesmo valor da fonte, pois no estado inicial (sem ter um texto para buscar), apresentam todos os produtos.
searchProducts(): método para fazer a busca a partir de um texto:
- primeiro verificamos se o valor do texto é ou não vazio, caso seja vazio, precisamos indicar que os produtos filtrados tenham o mesmo valor da fonte de dados, caso contrário, aplicamos a lógica de filtro.
- O filtro é feite com o filter() de collection que permite adicionar condições, nesse caso, devolver apenas os produtos com nome ou descrição que contenham o texto recebido via parâmetro.
- a fonte da busca sempre vai ser a fonte dos dados, pois, além de ter todos os produtos, nunca é alterada.
a property filteredProducts é a única que deve ser pública para realizar a leitura na tela.

Agora que temos o código do ViewModel, é só conectar na tela.

Realizando o filtro a partir do evento de mudança de texto

No código de tela, precisamos apenas criar o ViewModel, fazer a leitura dos produtos filtrados e chamar o método de busca de produtos no evento de mudança de texto:

val viewModel by viewModels<ProductsListViewModel>()
val products by viewModel.filteredProducts.collectAsState(initial = emptyList())
Column {
    var searchText by remember {
        mutableStateOf("")
    }
    OutlinedTextField(
        value = searchText,
        onValueChange = {
            searchText = it
            viewModel.searchProducts(it)
        },
        // ...
    )
    ProductsListScreen(
        products = products
    )
}

Pronto! Implementamos um código para realizar filtros em um App com o Jetpack Compose. É válido ressaltar que essa foi uma implementação simples, mas podem haver mais etapas dependendo do escopo, como busca por diversas fontes, tratamentos etc.

O que você achou desta implementação? Faz de uma maneira diferente? Aproveite e deixe um comentário 😄

Problemas comuns na recomposição do Jetpack Compose

Alex Felipe — Fri, 30 Jun 2023 11:00:00 +0000

A recomposição é uma etapa fundamental do funcionamento do Jetpack Compose. Se você não tem ideia do que seja, basicamente, é a etapa que redesenha a tela aplicando as atualizações de estado.

Em outras palavras, cada vez que temos algo novo na tela, seja a edição de um campo de texto, animações, mudança de cores etc, é porque aconteceu a recomposição.

A recomposição acontece cada vez que ocorre uma atualização de State, ou sendo mais preciso, o MutableState que é derivado de State e permite atualizar os valores para acontecer a recomposição... Esse é um resumo de como o Jetpack Compose funciona.

Embora pareça simples, ao desenvolver uma aplicação com esse comportamento, precisamos ter alguns cuidados para evitar certas armadilhas, seja a realização de recomposições desnecessariamente, ou até mesmo loops infinitos!

Para realizar uma simples demonstração, podemos adicionar um contador e exibí-lo na tela:

var counter = 0

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PlaygroundTheme {
                Surface(
                    Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background,
                ) {
                    var text by remember {
                        mutableStateOf("")
                    }
                    Column {
                        Text(text = "${counter++}")
                        TextField(value = text, onValueChange = {
                            text = it
                        })
                    }
                }
            }
        }
    }

}

Veja que apenas em escrever "alex felipe" e apagar todas as letras, acontecem 22 recomposições!

Por mais que pareça uma quantidade grande, é bastante comum ocorrerem muito mais recomposições, afinal, uma tela pode realizar diversas atualizações, ter animações, estruturas lazy etc.

Entretanto, há situações que temos mais recomposições do que deveria! E vamos começar a explorar um pouco, como por exemplo, tentar buscar informações e atualizar o estado em código de composição.

Simulando recomposições desnecessárias

Para exemplificar, vou criar um código que simula a busca de todos os usuários:

class User(
    val id: Long,
    val name: String
)

fun findAllUsers() = flow {
    delay(Random.nextLong(100, 500))
    emit(listOf(User(1, "alex")))
}

Mesmo que seja um código que devolva a "mesma lista de usuário" (cada vez é criada uma nova referência de lista), é uma situação bastante interessante para observar a recomposição desnecessária!

O delay() com um período de 100 a 500 milissegundos é para facilitar a visualização do resultado durante o teste. Então, no composable podemos apresentar o conteúdo da lista:

val users by findAllUsers().collectAsState(initial = emptyList())
Column {
    Text(text = "${counter++}")
    for (user in users) {
        Column {
            Text(text = user.id.toString())
            Text(text = user.name)
        }
    }
}

Um resultado curioso... Concorda? Por mais que a tela "não esteja adicionando novos usuários", a recomposição ocorre várias vezes tendendo ao infinito...

Entendendo os perigos das armadilhas na recomposição

É importante observar que essa é uma implementação controlada com um certo delay, mas agora imagine em situações que a busca da informação é a partir de uma integração que consome recursos do dispositivo, internet etc.

Iremos criar uma solução ineficiente, que compromete a qualidade do App, experiência de uso e pode tornar o produto mais caro! Afinal, há determinados serviços, como REST APIs, que cobram por acesso...

Em outras palavras, devido ao excesso de looping da recomposição, todos os códigos que fazem modificações de estado, devem ser executados fora do código de composição! Agora vem a grande questão:

"Como eu executo um código que não é afetado pela recomposição?"

Utilizando códigos com API do Side Effect

Para executar códigos que não são afetados pela recomposição, precisamos utilizar APIs de Side-effect. Basicamente, essa API oferece diversas ferramentas que permitem executar códigos que modificam o estado e não são afetados pela recomposição.

Uma das possibilidades bastante comum é o LaunchedEffect(), um composable que não emite elemento visual e roda uma coroutine via expressão lambda:

var users by remember {
    mutableStateOf(emptyList<User>())
}
LaunchedEffect(null) {
    findAllUsers().collect {
        users = it
    }
}
Column {
    Text(text = "${counter++}")
    for (user in users) {
        Column {
            Text(text = user.id.toString())
            Text(text = user.name)
        }
    }
}

Com esse ajuste, o App não apresenta mais o comportamento de looping! E isso acontece, pois o findAllUsers() é executado apenas uma única vez... Agora, vamos entender o que aconteceu.

Entendendo a API de chaves do Jetpack Compose

Existem diversas APIs do Jetpack Compose que recebem chaves como argumentos, como por exemplo, o remember e agora o LaunchedEffect(). O mecanismo de chave, é uma forma de indicar a quantidade de execuções do composable a mudança de valor na chave enviada.

Por exemplo, ao usar o remember sem enviar nenhuma chave, significa que ele será executado somente uma vez, logo, ao usar o LaunchedEffect() enviando null, significa também que será executado apenas uma vez! Afinal, o null não altera o seu valor...

Em outras palavras, se você tem a intenção de rodar mais de uma vez esses composables, é só enviar um valor mutável. Meio abstrato? Então vamos seguir com o exemplo do LaunchedEffect():

var users by remember {
    mutableStateOf(emptyList<User>())
}
LaunchedEffect(users) {
    findAllUsers().collect {
        users = it
    }
}

Com apenas esse ajuste, o looping infinito volta novamente, pois cada vez que ocorre a recomposição, temos um novo valor para users... Portanto, escolha sabiamente a chave em APIs de side-effect.

O mecanismos de chaves pode recebe mais de uma chave via varargs, podendo reexecutar cada vez que uma das chaves tiverem novos valores...

Evitando a recomposição em eventos dos composables

Uma outra maneira de evitar problemas na recomposição, é utilizar eventos dos composables, como por exemplo, o evento de clique:

var users by remember {
    mutableStateOf(emptyList<User>())
}
val scope = rememberCoroutineScope()
Column {
    Button(onClick = {
        scope.launch {
            findAllUsers().collect {
                users = it
            }
        }
    }) {
        Text(text = "Find all users")
    }
    // ...
}

Veja que a recomposição acontece apenas ao realizar os cliques! O segredo desse comportamento é que esses eventos utilizam as APIs de side-effect internamente!

Evitando looping com o Flow na recomposição

Um outro detalhe importante, é que o uso do Flow no Jetpack Compose geralmente é feito a partir da coleção convertida para o State, assim como vimos na amostra inicial...

Para usar essa abordagem e evitar o looping infinito, a implementação do Flow NÃO DEVE alterar o estado! Isso significa que o código exposto do Flow, deve ser apenas para ler ou modificar o fluxo de leitura do dado.

Logo, a alteração para novas emissões, devem ser feitas em uma outra chamada que não será executada em um código de composição. Vamos seguir com um exemplo de um ViewModel:

class UsersViewModel : ViewModel() {

    private val _users = MutableStateFlow(emptyList<User>())
    val users = _users.asStateFlow()

    fun findAllUsers() {
        _users.update {
            listOf(User(1, "alex"))
        }
    }

}

Neste código, o findAllUsers() não é mais responsável em devolver o Flow para leitura, e sim, emitir novos valores. E considerando essa abordagem, esse código tende a ser chamado fora do escopo da composição, como é o caso das APIs de side-effect.

Para ler os usuários encontrados com essa implementação, fazemos a coleção com a conversão de State da property users (que é um StateFlow) que vai notificar a mudança cada vez que o findAllUsers() for chamado. Veja só como fica no composable:

val viewModel by viewModels<UsersViewModel>()
val users by viewModel.users.collectAsState(
    initial = emptyList()
)
Column {
    Button(onClick = {
        viewModel.findAllUsers()
    }) {
        Text(text = "Find all users")
    }
    Text(text = "${counter++}")
    for (user in users) {
        Column {
            Text(text = user.id.toString())
            Text(text = user.name)
        }
    }
}

Note que mesmo o código de coleção do Flow esteja em composição, não temos o problema de looping, pois é um código que apenas reage a atualizações que são feitas somente na API e side-effect!

E ai, o que achou desses detalhes da recomposição no Jetpack Compose? Já passou por alguns desafios que foram complicados neste tipo de código? Aproveite para compartilhar nos comentários.

Implementando debounce no Kotlin com Coroutines

Alex Felipe — Wed, 28 Jun 2023 11:00:00 +0000

Se você não tem ideia do que seja o debounce, trata-se de um design pattern com o objetivo de evitar múltiplas execuções em um curto período.

Os exemplos mais notáveis são em formulários, que pode realizar comportamentos inesperados em múltiplas ações, como por exemplo, clicar várias vezes no botão para fazer um cadastro, autenticação etc e resultar em um bug!

Com o uso do debounce, podemos evitar esses comportamentos com facilidade! E agora que tivemos a introdução, vamos partir para a implementação.

TL;DR

O objetivo deste artigo é chegar no seguinte resultado em um App de tarefas:

Criar apenas uma tarefa mesmo que ocorra múltiplos cliques. Se o seu objetivo é ver apenas a amostra de código, então vamos começar pela Activity:

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PlaygroundTheme {
                Surface(
                    Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background,
                ) {
                    val viewModel by viewModels<TasksListViewModel>()
                    val uiState by viewModel.uiState.collectAsState()
                    TasksListScreen(
                        uiState = uiState,
                        onCreateClick = {
                            viewModel.create()
                        })
                }
            }
        }
    }

}

Então o código do modelo, UI State e ViewModel:

data class Task(
    val title: "String"
)

data class TasksListUiState(
    val title: "String = \"\","
    val onTitleChange: (String) -> Unit = {},
    val tasks: List<Task> = emptyList()
)

class TasksListViewModel : ViewModel() {

    private val _uiState = MutableStateFlow(TasksListUiState())
    val uiState = _uiState.asStateFlow()
    private var job: Job = Job()

    init {
        _uiState.update { currentState ->
            currentState.copy(
                onTitleChange = {
                    _uiState.value = _uiState.value.copy(
                        title = it
                    )
                }
            )
        }
    }

    fun create() {
        job.cancel()
        job = viewModelScope.launch {
            delay(3000)
            _uiState.update { currentState ->
                currentState.copy(
                    tasks = _uiState.value.tasks +
                            Task(title = _uiState.value.title)
                )
            }
        }

    }
}

E o código de tela:

@Composable
fun TasksListScreen(
    uiState: TasksListUiState,
    onCreateClick: () -> Unit = {}
) {
    val tasks = uiState.tasks
    Column {
        TextField(
            value = uiState.title,
            onValueChange = uiState.onTitleChange,
            Modifier
                .padding(8.dp)
                .fillMaxWidth(),
            placeholder = {
                Text("New task...")
            }
        )
        Button(
            onClick = onCreateClick,
            Modifier
                .padding(8.dp)
                .fillMaxWidth()
        ) {
            Text(text = "Create task")
        }
        if (tasks.isEmpty()) {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(
                    text = "No tasks...",
                    Modifier.align(Alignment.Center),
                    fontSize = 18.sp,
                    style = TextStyle.Default.copy(
                        color = Color.Gray.copy(alpha = 0.5f)
                    )
                )
            }
        } else {
            LazyColumn(
                contentPadding = PaddingValues(8.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                items(tasks) { task ->
                    Box(
                        Modifier
                            .clip(RoundedCornerShape(20.dp))
                            .border(
                                1.dp,
                                color = Color.Gray.copy(
                                    alpha = 0.5f
                                ),
                                RoundedCornerShape(20.dp)
                            )
                            .padding(8.dp)
                            .fillMaxWidth()
                    ) {
                        Text(text = task.title)
                    }
                }
            }
        }
    }
}

Agora, se a sua intenção é entender a motivação do código, continue lendo o artigo 😉

Coroutines do Kotlin para implementar o Debounce

Primeiro, é importante saber que vou considerar a biblioteca de Coroutine que dá suporte para códigos assíncronos no Kotlin.

Essa é uma ferramenta bastante comum em diversos códigos Kotlin, e também, oferece recursos que facilita a implementação do debounce.

App de exemplo do artigo

Como exemplo, vou usar um App com o Jetpack Compose para simular uma interação com o usuário, um criador de tarefas:

Para você chegar no mesmo resultado, segue o código de implementação:

Código da tela:

@Composable
fun TasksListScreen(
    uiState: TasksListUiState,
    onCreateClick: () -> Unit = {}
) {
    val tasks = uiState.tasks
    Column {
        TextField(
            value = uiState.title,
            onValueChange = uiState.onTitleChange,
            Modifier
                .padding(8.dp)
                .fillMaxWidth(),
            placeholder = {
                Text("New task...")
            }
        )
        Button(
            onClick = onCreateClick,
            Modifier
                .padding(8.dp)
                .fillMaxWidth()
        ) {
            Text(text = "Create task")
        }
        if (tasks.isEmpty()) {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(
                    text = "No tasks...",
                    Modifier.align(Alignment.Center),
                    fontSize = 18.sp,
                    style = TextStyle.Default.copy(
                        color = Color.Gray.copy(alpha = 0.5f)
                    )
                )
            }
        } else {
            LazyColumn(
                contentPadding = PaddingValues(8.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                items(tasks) { task ->
                    Box(
                        Modifier
                            .clip(RoundedCornerShape(20.dp))
                            .border(
                                1.dp,
                                color = Color.Gray.copy(
                                    alpha = 0.5f
                                ),
                                RoundedCornerShape(20.dp)
                            )
                            .padding(8.dp)
                            .fillMaxWidth()
                    ) {
                        Text(text = task.title)
                    }
                }
            }
        }
    }
}

Implementação do modelo, UI State e ViewModel:

data class Task(
    val title: String
)

data class TasksListUiState(
    val title: String = "",
    val onTitleChange: (String) -> Unit = {},
    val tasks: List<Task> = emptyList()
)

class TasksListViewModel : ViewModel() {

    private val _uiState = MutableStateFlow(TasksListUiState())
    val uiState = _uiState.asStateFlow()

    init {
        _uiState.update { currentState ->
            currentState.copy(
                onTitleChange = {
                    _uiState.value = _uiState.value.copy(
                        title = it
                    )
                }
            )
        }
    }

    fun create() {
        _uiState.update { currentState ->
            currentState.copy(
                tasks = _uiState.value.tasks +
                        Task(title = _uiState.value.title)
            )
        }
    }
}

Código da Activity que cria o ViewModel, usa o UI State e chama a tela:

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PlaygroundTheme {
                Surface(
                    Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background,
                ) {
                    val viewModel by viewModels<TasksListViewModel>()
                    val uiState by viewModel.uiState.collectAsState()
                    TasksListScreen(
                        uiState = uiState,
                        onCreateClick = {
                            viewModel.create()
                        })
                }
            }
        }
    }

}

É uma implementação de gerenciamento de estado com ViewModel e UI State. Agora que conhecemos o código, podemos seguir com o próximo passo que é introduzir cenários comuns que tornam essa solução um problema.

Situações problemáticas em Apps com delay

A situação mais comum é quando a criação da tarefa tende a demorar, como por exemplo, ao tentar enviar para uma API. Podemos fazer essa simulação a partir de um delay usando coroutines:

suspend fun create() {
    delay(3000)
    _uiState.update { currentState ->
        currentState.copy(
            tasks = _uiState.value.tasks +
                    Task(title = _uiState.value.title)
        )
    }
}

Observe que é um delay de 3 segundos! No código da tela, precisamos usar uma coroutine para chamar a suspend function:

...
val scope = rememberCoroutineScope()
TasksListScreen(
    uiState = uiState,
    onCreateClick = {
        scope.launch {
            viewModel.create()
        }
    })

Então, podemos testar o App e clicar mais de uma vez ao tentar criar uma tarefa:

Veja que após alguns segundos as tarefas vão aparecendo! E para evitar isso, podemos aplicar o debounce 😎

Implementando o debounce com o Job de Coroutine

A implementação do debounce baseada em coroutines é controlada pela referência Job, logo, podemos criar essa referência como uma property do ViewModel e podemos aplicar algumas configurações:

class TasksListViewModel : ViewModel() {

    private var job: Job = Job()

    ...

    fun create() {
        job.cancel()
        job = viewModelScope.launch {
            delay(3000)
            _uiState.update { currentState ->
                currentState.copy(
                    tasks = _uiState.value.tasks +
                            Task(title = _uiState.value.title)
                )
            }
        }
    }

}

Esta implementação pode parecer complexa, mas é mais simples do que parece! Então vamos entender cada etapa:

Criamos um Job mutável para o ViewModel
Ao tentar criar uma tarefa, cancelamos o job que cancela todas as coroutines vinculadas a ele.
Ao rodar a coroutine, reatribuímos o Job a partir do retorno de launch
o Job do launch é vinculado a coroutine que cria a nova tarefa
Ao rodar novamente e cancelar o job com o valor novo, a coroutine anterior é cancelada e é criada uma nova seguindo o mesmo looping.

Veja que com esse looping o código só vai rodar caso não for cancelado durante o tempo de 3 segundos! Outro detalhe interessante desta implementação, é que quem chama o métode de criação do ViewModel, não precisa mais usar uma coroutine!

Agora é criada apenas uma tarefa! Mesmo que sejam vários cliques 😎

Para saber mais

Debounce para botões é um caso de uso, mas é possível aplicar em outras situações também! Como por exemplo, ao tentar preencher automaticamente campos de endereço a partir de um CEP:

Veja que ele só carrega após um tempo depois que para de escrever o CEP. Essa técnica é interessante, pois evita o consumo desnecessário de recursos do dispositivo, como processamento, internet etc.

Essa amostra foi uma implementação de um desafio sugerido no curso de Jetpack Compose: comunicação com REST API, que tal tentar fazê-lo?

Caso você não seja assinante da Alura e tenha interesse, eu posso te ajudar com esse cupom de desconto 😉

O que achou do debounce com coroutine? Você utiliza uma outra abordagem? Aproveite para compartilhar nos comentários.

Boas práticas com Modifiers no Jetpack Compose

Alex Felipe — Mon, 26 Jun 2023 11:00:00 +0000

Ao escrever composables é natural o uso de modificadores - Modifiers para personalizar ou adicionar comportamentos para os nossos componentes visuais.

Dado que o uso de Modifiers é intuitivo, é muito comum escrevermos códigos sem considerar algumas boas práticas que fazem muita diferença em Apps, seja para simplificar o código ou até mesmo em questões de performance...

E considerando esses detalhes, neste artigo eu vou te mostrar as técnicas que você pode utilizar para otimizar o seu código e performance com o Jetpack Compose a partir de Modifiers, bora lá?

Modifier padrão

A primeira boa prática está mais para uma convenção! O famoso Modifier padrão:

Column(Modifier.fillMaxSize()) {
    Button(
        onClick = { /*TODO*/ },
        Modifier.fillMaxWidth()
    ) {
        Text(
            text = "button text test",
            Modifier
                .padding(8.dp)
                .background(
                    Color.Gray.copy(alpha = 0.5f),
                    RoundedCornerShape(20.dp)
                )
        )
    }
}

Não sei se você já notou, mas todo composable disponibilizado pela lib do Jetpack Compose ou outras libs como os do Material Design, possuem um Modifier padrão como primeiro parâmetro opcional.

O motivo dessa prática, é permitir a personalização de qualquer composable a partir de Modifiers, seja na modificação visual, eventos etc. Em outras palavras, quando criamos um composable nosso, é extremamente recomendado que exista um Modifier padrão para flexbilizar a personalização!

Adicionando um Modifier padrão

A adição do Modifier padrão exige apenas que seja o primeiro parâmetro opcional com o valor Modifier e que modifique o primeiro Composable:

@Composable
fun MyButton(
    text: String,
    modifier: Modifier = Modifier
) {
    Box(
        modifier
            .padding(8.dp)
    ) {
        Text(
            text = text,
            Modifier
                .align(Alignment.Center)
        )
    }
}

Com essa abordagem, podemos usar o mesmo botão com aparências diferentes:

Column {
    MyButton("meu primeiro botão")
    MyButton(
        "meu segundo botão",
        Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .background(Color.Gray, RoundedCornerShape(20.dp))
    )
}

Essa é de longe uma das características que mais gosto do Jetpack Compose! 😎

Reutilizando o Modifier

A próxima boa prática está na reutilização de Modifiers, isso mesmo! Temos a capacidade de extrair Modifiers e reutilizá-los:

Column {
    val myButtonModifier = Modifier
        .fillMaxWidth()
        .padding(8.dp)
        .background(Color.Gray, RoundedCornerShape(20.dp))
    MyButton("meu primeiro botão")
    MyButton(
        "meu segundo botão",
        myButtonModifier
    )
    Box(
        modifier = myButtonModifier
            .height(200.dp)
    )
}

Nesta amostra, reutilizamamos a mesma aparência do segundo botão no terceiro Box! Inclusive, note que ainda mantemos a flexibilidade para ajustar o Box conforme a sua necessidade, como por exemplo, aplicar uma altura diferente.

Vantagens de reutilização de Modifiers

Além de reduzir a quantidade de código, a reutilização de Modifier ajuda na otimização da recomposição, pois os Modifiers também são executados novamente nos composables afetados.

Os casos de maiores impactos são em implementações que tendem a realizar a recomposição constantemente, como a utilização de animações ou implementações lazies (LazyColumn, LazyRow etc).

Extração de Modifier fora do escopo de composables

Para otimizar essas situações, devemos considerar a extração de modifiers fora do escopo dos composables. Em um primeiro momento pode parecer abstrato, então vamos considerar um exemplo:

val myButtonModifier = Modifier
    .padding(8.dp)
    .fillMaxWidth()
    .background(Color.Gray, RoundedCornerShape(20.dp))

@Composable
fun MyLazyColumn() {
    LazyColumn {
        items(1000) {
            MyButton(
                "meu segundo botão",
                myButtonModifier
            )
        }
    }
}

Sim! Apenas essa pequena extração, pode otimizar e muito implementações com recomposições frequentes! Além disso, é possível reutilizar o Modifier em outros composables, pois ele é globalmente acessível.

Extração de Modifier dentro do escopo de composables

Embora a extração de Modifier fora de escopo tenha as suas vantagens, existirão casos em que não é possível, como por exemplo, os Modifiers de escopo de composables específicos.

Os composables mais notáveis para essa situação, são os de layout como Box, Column ou Row. Ambos oferecem escopos específicos que dão acesso a Modifiers exclusivos, como por exemplo o align() que permite alinhar filhos:

@Composable
fun MyColumn() {
    Column {
        val myButtonModifier = Modifier
            .padding(8.dp)
            .width(200.dp)
            .background(Color.Gray, RoundedCornerShape(20.dp))
            .align(CenterHorizontally)
        MyButton("meu primeiro botão")
        MyButton(
            "meu segundo botão",
            myButtonModifier
        )
        Box(
            modifier = myButtonModifier
                .height(200.dp)
        )
    }
}

Uma alternativa seria extrair um novo composable apenas adicionando os Modifiers daquele escopo:

val myButtonModifier = Modifier
    .padding(8.dp)
    .width(200.dp)
    .background(Color.Gray, RoundedCornerShape(20.dp))

@Composable
fun MyColumn() {
    Column {
        val myButtonColumnModifier =
            myButtonModifier
                .align(CenterHorizontally)
        MyButton("meu primeiro botão")
        MyButton(
            "meu segundo botão",
            myButtonColumnModifier
        )
        Box(
            modifier = myButtonColumnModifier
                .height(200.dp)
        )
    }
}

O que você achou dessas boas práticas com o Modifiers? Tem alguma técnica diferente que utiliza e acha interessante compartilhe, aproveite e deixe aqui nos comentários. 😉

Como implementar uma tela de carregamento no Jetpack Compose

Alex Felipe — Fri, 23 Jun 2023 11:00:00 +0000

Ao desenvolver um App Android, é muito comum buscarmos informações para apresentar na tela, seja a busca de um banco de dados interno ou por uma API.

Independente da fonte de dados que usamos, uma coisa é certa, a disponibilidade dos dados nem sempre será garantida! Ou seja, enquanto o dado não está pronto, o que podemos mostrar para o nosso usuário?

Uma das abordagens comuns é apresentar uma tela ou um componente de carregamento. Existem várias maneiras de representar o carregamento, pode ser apenas um texto com a mensagem 'carregando', ou então, indicadores de progresso do Material Design.

TL;DR

Para você que quer apenas o código completo para testar e chegar neste resultado:

A tela é representada por esse composable:

@Composable
fun ProductsListScreen(uiState: ProductsListUiState) {
    val products = uiState.products
    val isLoading = uiState.isLoading
    if (isLoading) {
        Box(modifier = Modifier.fillMaxSize()) {
            CircularProgressIndicator(Modifier.align(Center))
        }
    } else {
        LazyColumn(Modifier.fillMaxSize()) {
            items(products) { p ->
                Column(
                    Modifier
                        .clip(RoundedCornerShape(10.dp))
                        .padding(8.dp)
                        .fillMaxWidth()
                        .border(
                            1.dp,
                            Color.Gray.copy(alpha = 0.5f),
                            RoundedCornerShape(10.dp)
                        )
                        .padding(8.dp)
                ) {
                    Text(text = p.name, fontWeight = FontWeight.Bold, fontSize = 24.sp)
                    Text(text = p.description)
                    Text(
                        text = p.price.toBrazilianCurrency(),
                        fontWeight = FontWeight.Bold,
                        style = TextStyle.Default.copy(color = Color(0xFF4CAF50)),
                        fontSize = 18.sp
                    )
                }
            }
        }
    }
}

o modelo de produto, lista de produtos de amostra e o UiState:

class ProductsListUiState(
    val products: List<Product> = emptyList(),
    val isLoading: Boolean = true
)

val sampleProducts = List(10) {
    Product(
        name = LoremIpsum(Random.nextInt(1, 5)).values.first(),
        description = LoremIpsum(Random.nextInt(1, 10)).values.first(),
        price = BigDecimal(Random.nextInt(1, 100) * it)
    )
}

class Product(
    val name: String,
    val description: "String,"
    val price: BigDecimal
)

O formatador de moeda brasileira:

private fun BigDecimal.toBrazilianCurrency(): String =
    NumberFormat.getCurrencyInstance(
        Locale("pt", "br")
    ).format(this)

o código para o gerenciamento de estado com o UiState:

var uiState by remember {
    mutableStateOf(ProductsListUiState())
}
LaunchedEffect(null) {
    delay(3000)
    uiState = ProductsListUiState(
        products = sampleProducts,
        isLoading = false
    )
}
ProductsListScreen(uiState)

Caso o seu interesse é entender como esse código funciona e as motivações para implementá-lo dessa forma, continue a leitura do artigo 😄

Como representar um carregamento na tela?

No Jetpack Compose, podemos apresentar um indicador de progresso circular da seguinte maneira:

Box(modifier = Modifier.fillMaxSize()) {
    CircularProgressIndicator(
        Modifier.align(Alignment.Center)
    )
}

Observe que temos um indicador indeterminado, ou seja, ele fica girante pra sempre! Novamente, essa é apenas uma possibilidade de representação e poderíamos usar qualquer outro componente... O grande detalhe é:

"Como podemos escrever uma lógica para apresentar ou esconder o carregamento no momento esperado?" 🤔

Gerenciamento de estado

Para isso, precisamos utilizar gerenciamento de estado no Jetpack Compose. Há mais de uma implementação de gerenciamento de estado, seja direto nos composables ou a partir de ViewModel que é o mais recomendado.

Dado que o objetivo deste artigo é focar em mostrar apenas como fazer a representação de carregamento, farei a implementação direta no composable. Antes de mexer no código, vamos entender o que precisamos fazer:

tela principal que precisa buscar os produtos
- ao acessar a tela, apresenta uma representação de carregamento
- após carregar produtos, mostra os produtos em lista

Agora que sabemos o que precisamos implementar, vamos seguir com o código.

Definindo o modelo e criando amostras de produtos

Primeiro, vamos começar com o modelo para o produto e a criação de algumas amostras:

class Product(
    val name: String,
    val description: String,
    val price: BigDecimal
)

val sampleProducts = List(10) {
    Product(
        name = LoremIpsum(Random.nextInt(1, 5)).values.first(),
        description = LoremIpsum(Random.nextInt(1, 10)).values.first(),
        price = BigDecimal(Random.nextInt(1, 100) * it)
    )
}

Com esse código, geramos 10 produtos com valores aleatórios para nome, descrição e preço.

Implementação da tela da lista de produtos

Para apresentar os produtos, vamos criar a tela de lista de produtos:

@Composable
fun ProductsListScreen(products: List<Product>) {
    LazyColumn(Modifier.fillMaxSize()) {
        items(products) { p ->
            Column(
                Modifier
                    .clip(RoundedCornerShape(10.dp))
                    .padding(8.dp)
                    .fillMaxWidth()
                    .border(
                        1.dp,
                        Color.Gray.copy(alpha = 0.5f),
                        RoundedCornerShape(10.dp)
                    )
                    .padding(8.dp)
            ) {
                Text(text = p.name, fontWeight = FontWeight.Bold, fontSize = 24.sp)
                Text(text = p.description)
                Text(
                    text = p.price.toBrazilianCurrency(),
                    fontWeight = FontWeight.Bold,
                    style = TextStyle.Default.copy(color = Color(0xFF4CAF50)),
                    fontSize = 18.sp
                )
            }
        }
    }
}

E para melhorar o visual do preço, vamos também adicionar o formatador de moeda brasileira:

private fun BigDecimal.toBrazilianCurrency(): String =
    NumberFormat.getCurrencyInstance(
        Locale("pt", "br")
    ).format(this)

Com a tela implementada, podemos focar no gerenciamento de estado da mesma.

Representando o estado da interface de usuário - UI State

Para representar os dados da tela, utilizamos o padrão de estado de interface do usuário ou UI State. A ideia de um UI State é conter os dados que devem ser apresentados na tela, ou então, um estado do dado, como por exemplo, um estado que indique se o dado foi carregado, se houve falha ou se está carregando!

Essa representação pode ser feita a partir de uma classe qualquer:

class ProductsListUiState(
    val products: List<Product> = emptyList(),
    val isLoading: Boolean = true
)

E então, a nossa tela pode receber ProductsListUiState via parâmetro e apresentar o conteúdo com base nos dados do UI State:

@Composable
fun ProductsListScreen(uiState: ProductsListUiState) {
    val products = uiState.products
    val isLoading = uiState.isLoading
    if (isLoading) {
        Box(modifier = Modifier.fillMaxSize()) {
            CircularProgressIndicator(Modifier.align(Center))
        }
    } else {
        LazyColumn(Modifier.fillMaxSize()) { ... }
    }
}

Nesta configuração, enquanto o isLoading estiver como true, a lista não é apresentada!

Testando o App simulando a busca de produtos

Agora que temos a representação, precisamos modificar a lógica de chamada para que faça a busca das informações e atualize o UI State:

var uiState by remember {
    mutableStateOf(ProductsListUiState())
}
LaunchedEffect(null) {
    delay(3000)
    uiState = ProductsListUiState(
        products = sampleProducts,
        isLoading = false
    )
}
ProductsListScreen(uiState)

Veja que agora o App apresenta o indicador de progresso circular, e então, após 3 segundos, mostra a lista de produtos! Não entendeu o código? Vamos para uma breve explicação.

Definimos o UI State a partir de um remember para que a inicialização não seja afetada pela recomposição
o LaunchedEffect(null) é um composable de Side Effect que não emite componente visual.
Componentes de Side Effect dão suporte para códigos que não são afetados pela recomposição. Ao enviar null como argumento, indicamos que ele vai executar apenas uma vez!
O LaunchedEffect() também permite executar coroutines, e é por isso que ele não trava a execução mesmo aplicando um delay de segundos via coroutine.
Ao modificar o uiState acontece a recomposição e é enviado um novo uiState com os produtos novos e a sinalização de que não está mais carregando para a tela de lista de produtos.

Para saber mais

É importante ressaltar que essa é uma implementação simples e objetiva, ou seja, existem abordagens mais sofisticadas e recomendadas para implementar o gerenciamento de estado com UI State. Um dos exemplos mais usados, é a partir de ViewModels, embora seja mais complexo ele resolve uma série de detalhes a nível de arquitetura de App.

Se você tem interesse no assunto e quer aprender a partir de um conteúdo mais estruturado, posso te recomendar a formação de Jetpack Compose: gerenciamento de estado da Alura. Caso você ainda não seja assinante, eu posso te ajudar com um cupom de desconto da assinatura da Alura.

O que você achou desta implementação? Já conhecia essas técnicas de gerenciamento de estado para apresentar um conteúdo dinâmico nos composables? Aproveite para compartilhar outras técnicas que utiliza pra isso 😉

Usando funções de escopo no Kotlin

Alex Felipe — Wed, 21 Jun 2023 11:25:00 +0000

Se tem uma funcionalidade no Kotlin que é usada com muita frequência, mas muitas pessoas não tem ideia do que seja, são as funções de escopo.

fun main() {
    val user: User? = findUserById(1)
    user?.let {
        println(it)
    }
}

Conseguiu identificar a função de escopo? Não? Não se preocupe que vamos entendê-las!

Conhecendo as funções de escopo

Basicamente, função de escopo é uma função que executa um bloco de código dentro de um contexto de um objeto! Definição bem abstrata, né? Então vamos para a prática:

user.let {
    ...
}

Neste código, let é uma função de escopo que executa no contexto do user que é do tipo User?. Dentro deste contexto, temos acesso a user a partir do parâmetro da lambda, podemos até mesmo mudar o nome:

user.let { u ->
    println(u)
}

Usar funções de escopo dessa forma, não tem diferença de apenas chamar println(user), concorda? Então porque elas existem?

Safe call com funções de escopo

Uma das maiores utilidades de funções de escopo é combinar com a safe call:

user?.let {
    println(it.name)
}

Todo parâmetro único em expressões lambdas são subentendidos como it por padrão.

Essa abordagem tem o mesmo resultado de usar um if que garante que não é nulo. A diferença fica na sintax que é mais sucinta, permitindo até mesmo usar o it ou um nome que identifica melhor o contexto, como por exemplo, nonNullUser:

user?.let { nonNullUser ->
    println(nonNullUser.name)
}

Variáveis apenas dentro do escopo esperado

Um outro caso que auxilia bastante, é que podemos trabalhar com variáveis que irão existir apenas nas funções de escopo. Se pegarmos a amostra inicial como exemplo, podemos criar a seguinte variação:

findUserById(1)?.let { user ->
    println(user.name)
}

Notou a diferença? Com essa abordagem, a existência da variável user é só dentro de let! Logo, você não precisa mais se preocupar com nullable ou criar uma variável desnecessária no resto da aplicação.

Retornos em funções de escopo

Outro detalhe interessante, as funções de escopo podem retornar valores diferentes! Se usarmos o let como exemplo, ele sempre devolve o valor da última instrução, logo, se println() for a última instrução, será retornado Unit:

val result: Unit? = findUserById(1)?.let { user ->
    println(user.name)
}

Nesse caso em específico é Unit? por conta da safe call que sempre retorna um nullable! Caso modificarmos a última instrução, teremos um nullable diferente:

val result: Long? = findUserById(1)?.let { user ->
    println(user.name)
    user.id
}

Portanto, se atente aos retornos do let e de outras funções de escopo!

Função de escopo para configurar objetos durante a criação

Uma função de escopo bastante usada por conta do seu retorno, é a apply. Um dos principais motivos é que ela sempre retorna o objeto do contexto.

Isso pode ser um pouco confuso, mas tem seus casos de uso. No artigo de datas do Jetpack Compose, eu fiz a implementação de um formatador de datas utilizando a apply:

fun Long.toBrazilianDateFormat(
    pattern: String = "dd/MM/yyyy"
): String {
    val date = Date(this)
    val formatter = SimpleDateFormat(
        pattern, Locale("pt-br")
    ).apply {
        timeZone = TimeZone.getTimeZone("GMT")
    }
    return formatter.format(date)
}

Veja que ao criar o SimpleDateFormat, é feita uma configuração de TimeZone e o retorno é o próprio formatador criado!

Em outras palavras, o apply serve para aplicar configurações extras após criação de um objeto. Logo, a variável retornada será criada com as configurações esperadas!

Inclusive, essa mesma implementação poderia ser mais sucinta e sem nenhuma variável:

fun Long.toBrazilianDateFormat(
    pattern: String = "dd/MM/yyyy"
): String = SimpleDateFormat(pattern, Locale("pt-br"))
    .apply {
        timeZone = TimeZone.getTimeZone("GMT")
    }.format(Date(this))

Para saber mais

Esses são os casos mais comuns que utilizo funções de escopo no Kotlin, mas não para por aqui! Caso você quiser conhecer as demais funções como run, also, with etc, recomendo que veja a documentação sobre funções de escopo.

Também, você pode aplicar outras técnicas, como chamadas encadeadas que permite usar mais de uma função de escopo em uma única chamada.

E ai, o que achou das funções de escopo do Kotlin? Você também usa no seu código? Aplica outras técnicas? Me conte aqui nos comentários 😄

Datas no Jetpack Compose com Date Picker

Alex Felipe — Mon, 19 Jun 2023 11:00:00 +0000

Utilizar datas é uma tarefa bastante comum em diversos Apps, seja para um cadastro, agendamento, indicação de conclusão etc... Nas bibliotecas padrões do Jetpack Compose, não temos acesso a um componente para lidar com datas!

Em outras palavras, ou precisamos implementar manualmente um composable ou podemos usar os pickers do SDK do Android... Felizmente, a partir da versão 1.2.0 dos componentes do Material Design 3 para Jetpack Compose, temos acesso a novos pickers, como por exemplo, o DateTimerPicker!

E neste artigo eu vou te mostrar como usá-lo no seu App com o Jetpack Compose.

Verificando as dependências

Antes de tudo, é muito importante que você verifique a versão da dependência androidx.compose.material3:material3. Geralmente, as versões não são especificadas, ou seja, dependendo do momento que implementar, pode ser que utilize uma versão anterior a 1.2.0!

Nesse caso, vá até o build.gradle.kts e adicione manualmente a versão:



dependencies {
    // dependências
    implementation("androidx.compose.material3:material3:1.2.0-alpha02")
}

Caso existir um aviso indicando que tem versões mais recentes, talvez não precise especificar a versão, pois provavelmente a 1.2.0 ou uma mais recente entrou em release.

Com a dependência adicionada, podemos implementar o composable.

TL;DR

Para você que quer apenas um código de amostra, segue a versão final do composable:



val focusManager = LocalFocusManager.current
var showDatePickerDialog by remember {
    mutableStateOf(false)
}
val datePickerState = rememberDatePickerState()
var selectedDate by remember {
    mutableStateOf("")
}
if (showDatePickerDialog) {
    DatePickerDialog(
        onDismissRequest = { showDatePickerDialog = false },
        confirmButton = {
            Button(
                onClick = {
                    datePickerState
                        .selectedDateMillis?.let { millis ->
                            selectedDate = millis.toBrazilianDateFormat()
                        }
                    showDatePickerDialog = false
                }) {
                Text(text = "Escolher data")
            }
        }) {
        DatePicker(state = datePickerState)
    }
}
TextField(
    value = selectedDate,
    onValueChange = { },
    Modifier
        .padding(8.dp)
        .fillMaxWidth()
        .onFocusEvent {
            if (it.isFocused) {
                showDatePickerDialog = true
                focusManager.clearFocus(force = true)
            }
        },
    label = {
        Text("Date")
    },
    readOnly = true
)

O formatador de data você pode implementar como preferir, mas também pode usar essa extensão que criei:



fun Long.toBrazilianDateFormat(
    pattern: String = "dd/MM/yyyy"
): String {
    val date = Date(this)
    val formatter = SimpleDateFormat(
        pattern, Locale("pt-br")
    ).apply {
        timeZone = TimeZone.getTimeZone("GMT")
    }
    return formatter.format(date)
}

Esse código deve apresentar o seguinte resultado:

Para entender as motivações desse código, acompanhe o restante do conteúdo. 😎

Utilizando o DatePicker na tela

A utilização do picker é relativamente simples:



val datePickerState = rememberDatePickerState()
DatePicker(state = datePickerState)

Veja que apenas chamando o composable DatePicker, temos uma tela dedicada para selecionar a data. Porém, apenas esse código não é o suficiente para obter a data escolhida!

Para isso, o DatePicker oferece a propriedade selectedDateMillis a partir do DatePickerState, mas, apenas ter acesso ao valor não vai entregar uma experiência de uso completa!

Adicionando o campo de texto para a data

Quando queremos apresentar uma data a partir de pickers, geralmente utilizamos um outro componente para abrir o picker e exibir a data escolhida, como por exemplo, em um formulário, teríamos um campo de texto pra isso:



var selectedDate by remember() {
    mutableStateOf("")
}
TextField(
    value = selectedDate,
    onValueChange = { },
    Modifier
        .padding(8.dp)
        .fillMaxWidth(),
    label = {
        Text("Date")
    },
    readOnly = true
)

Então, precisamos integrar o TextField com o DatePicker. Embora seja possível usar o DatePicker para essa solução, a implementação apenas com o picker tende ser um pouco mais complexa, pois existe a lógica para mostrá-lo ou escondê-lo...

Utilizando caixa de diálogo para o date picker

Para facilitar a implementação do DatePicker, vamos o DatePickerDialog. Basicamente, temos o comportamento padrão de caixa de diálogo do Android. Um dos casos comuns é não querer selecionar uma data, com a caixa de diálogo basta apenas clicar fora do contexto:



var selectedDate by remember {
    mutableStateOf("")
}
val datePickerState = rememberDatePickerState()
DatePickerDialog(
    onDismissRequest = { /*TODO*/ },
    confirmButton = { /*TODO*/ }) {
    DatePicker(state = datePickerState)
}
TextField(
    value = selectedDate,
    onValueChange = { },
    Modifier
        .padding(8.dp)
        .fillMaxWidth(),
    label = {
        Text("Date")
    },
    readOnly = true
)

Agora, precisamos integrar a lógica para exibir o date picker apenas quando clicar no TextField.

Exibindo o DatePickerDialog a partir do TextField

Dado que usamos o readOnly, ele não reage mais a cliques! Logo, precisamos reagir a outros eventos, como a mudança de foco:



var showDatePickerDialog by remember {
    mutableStateOf(false)
}
var selectedDate by remember {
    mutableStateOf("")
}
val datePickerState = rememberDatePickerState()
if (showDatePickerDialog) {
    DatePickerDialog(
        onDismissRequest = { /*TODO*/ },
        confirmButton = { /*TODO*/ }) {
        DatePicker(state = datePickerState)
    }
}
TextField(
    value = selectedDate,
    onValueChange = { },
    Modifier
        .padding(8.dp)
        .fillMaxWidth()
        .onFocusChanged {
            if (it.isFocused) {
                showDatePickerDialog = true
            }
        },
    label = {
        Text("Date")
    },
    readOnly = true
)

Veja que a caixa de diálogo exibe o date picker, porém, ele não é fechado ao clicar fora do seu contexto, um comportamento que não esperamos neste tipo de componente.

Implementando a lógica para fechar a caixa de diálogo

Para implementar essa solução, precisamos configurar os parâmetros onDismissRequest ou confirmButton e adicionar esse comportamento:



if (showDatePickerDialog) {
    DatePickerDialog(
        onDismissRequest = { showDatePickerDialog = false },
        confirmButton = {
            Button(onClick = { showDatePickerDialog = false }) {
                Text(text = "Escolher data")
            }
        }) {
        DatePicker(state = datePickerState)
    }
}

Observe que o comportamento para fechar a caixa de diálogo funciona, mas não é possível abrí-la novamente! Isso acontece, pois no Jetpack Compose, ao focar em um campo de texto, o evento de foco só muda se interagirmos com outro elemento que ganhe o foco, ou então, quando modificamos via código.

Manipulando o foco dos elementos

Dado que não temos um outro elemento para ganhar foco na tela, e também, depender de outro elemento para exibir o date picker, é uma péssima experiência de uso, nós iremos modificar o foco manualmente!

Para isso, utilizamos o gerenciador de foco e limpamos o foco no evento desejado, nesse caso, ao ganhar o foco no TextField:



val focusManager = LocalFocusManager.current
...
TextField(
    value = selectedDate,
    onValueChange = { },
    Modifier
        .padding(8.dp)
        .fillMaxWidth()
        .onFocusEvent {
            if (it.isFocused) {
                showDatePickerDialog = true
                focusManager.clearFocus(force = true)
            }
        },
    label = {
        Text("Date")
    },
    readOnly = true
)

Veja que agora a caixa de diálogo é aberta e fechada nas situações esperadas! O que falta é pegar o valor da data escolhida e apresentá-la no campo de texto.

Exibindo a data escolhida no TextField

Para isso, precisamos reagir ao evento correto que deve preencher o campo de texto. No contexto atual, temos o botão 'Escolher data', ele será o responsável em manipular o estado selectedDate que preenche o TextField.

Formatando data em Long (milisegundos) para String

Considerando que a exibição de datas em Apps geralmente não é apresentada via milisegundos, vamos adicionar um formatador de Long para String que faça isso pra gente, podemos até mesmo considerar uma extension:



fun Long.toBrazilianDateFormat(
    pattern: String = "dd/MM/yyyy"
): String {
    val date = Date(this)
    val formatter = SimpleDateFormat(
        pattern, Locale("pt-br")
    ).apply {
        timeZone = TimeZone.getTimeZone("GMT")
    }
    return formatter.format(date)
}

E com a função de conversão pronta, precisamos apenas ajustar o evento de clique do botão:



DatePickerDialog(
    onDismissRequest = { showDatePickerDialog = false },
    confirmButton = {
        Button(
            onClick = {
                datePickerState
                    .selectedDateMillis?.let { millis ->
                        selectedDate = millis.toBrazilianDateFormat()
                    }
                    showDatePickerDialog = false
            }) {
            Text(text = "Escolher data")
        }
    }) {
    DatePicker(state = datePickerState)
}
...

Veja que agora o nosso date picker funciona corretamente!

O que achou dessa implementação de date picker no Jetpack Compose? Gostou do conteúdo? Aproveita para deixar um like e compartilhar com a galera 😉

Situações que NullPointerException podem acontecer no Kotlin

Alex Felipe — Fri, 16 Jun 2023 11:23:00 +0000

Uma das motivações de usar o Kotlin é por ser uma linguagem segura, muito por conta da segurança a referências nulas ou Null Safety.

De uma forma resumida, é a habilidade para evitar que apps escritos em Kotlin lancem a famosa NullPointerException ou NPE. Para isso, a linguagem oferece o suporte a variáveis/parâmetros que podem ou não serem nulos.

Tipos que podem ser nulos (nullables) são identificados com o sufixo ?, como por exemplo String?, Int? etc e isso significa que para chamar qualquer membro de um nullable, seja propriedade ou método, precisamos garantir que ele não é nulo.

Null Safety no Kotlin

O Kotlin oferece uma série de recursos para lidar com nullables, seja por condições com if, chamada segura, operador elvis e outras possibilidades que você pode conferir na página da documentação sobre null safety.

Embora exista diversas opções para escrever códigos que nos protejam do NPE, nem sempre temos essaa garantia!

"Como assim, Alex? Me explica melhor isso ai..."

Pois é, a partir do momento que a nossa aplicação precisa realizar alguma integração, o risco de NPE aumenta!

Reflexão sobre o uso de nullables

O primeiro caso comum é o uso de código escrito em Java no Kotlin, pois não tem um suporte rigoroso como o do Kotlin que nos indique se variáveis, parâmetros ou retornos podem ser nulos.

Em outras palavras, se usarmos um código Java que tenha a possibilidade de retornar null, temos o risco de receber um NPE! Vamos seguir com uma demonstração, criando um modelo para representar um usuário:

public class User {
    private final int id;
    private final String userName;

    User(Integer id, String userName) {
        this.id = id;
        this.userName = userName;
    }

    public Integer getId() {
        return id;
    }

    public String getUserName() {
        return userName;
    }
}

Então, vamos implementar um gerenciador de usuário que permite buscar usuários criados a partir de um id:

import java.util.stream.Stream;

public class UserManager {

    public User findUserById(int userId) {
        var userFound = Stream.of(
                        new User(1, "alex"),
                        new User(2, "felipe"))
                .filter(user -> user.getId() == userId)
                .findFirst();
        return userFound.orElse(null);
    }

}

Observe que o código devolve null caso o usuário não for encontrado. Ao testar esse código em Kotlin com um id que não existe:

println(
    UserManager()
        .findUserById(3)
        .userName
)

Pois é, temos um NPE! E não para por aqui, qualquer código de integração que envolva fazer uma conversão, buscar dados etc, pode resultar em um NPE se não utilizarmos nullables.

Portanto, utilizou um código Java no Kotlin, ou fez uma integração com banco de dados ou API que precisa fazer uma busca, integração etc, considere o uso de nullables mesmo que a interface de comunicação não indique o problema!

Evitando NPE com nullables

Vamos verificar como ficam os códigos utilizando nullables:

val user: User? = UserManager().findUserById(3)
println(
    user?.userName
)

Com apenas essa modificação simples, você diminui a fragilidade da sua aplicação a qualquer mudança que ocorra.

Um caso comum em códigos de integração é o processo de parsing de objetos, como por exemplo, um DTO. A implementação desse tipo de objeto seria:

data class UserDTO(
    val id: Int?,
    val userName: String?
)

E sim, para cada propriedade nova, você deve considerá-la um nullable! E por fim, você pode oferecer métodos de conversão, como por exemplo, um toUser():

data class UserDTO(
    val id: Int?,
    val userName: String?
) {
    fun toUser(): User = User(
        id ?: 0,
        userName ?: ""
    )
}

A regra de preenchimento de valores padrão você pode personalizar da maneira que preferir, até mesmo pode lançar exceptions caso não receba valores necessário, como por exemplo, o id:

data class UserDTO(
    val id: Int?,
    val userName: String?
) {
    fun toUser(): User = User(
        id ?: throw IllegalStateException("usuário deve conter um id"),
        userName ?: ""
    )
}

O que você achou desses pontos em relação a referências nulas no Kotlin? Tem outras dicas ou práticas que aplica no seu dia a dia? Aproveite para compartilhar nos comentários.

Como desenhar telas no Jetpack Compose

Alex Felipe — Wed, 14 Jun 2023 11:00:00 +0000

O Jetpack Compose é uma ferramenta bastante poderosa para criar telas nativas no Android.

Embora a ideia da ferramenta seja facilitar a implementação de telas, se não compreendermos a finalidade de cada componente, não será uma tarefa fácil!

Considerando esses detalhes, vamos entender como devemos pensar no momento que criamos uma tela.

Amostra de implementação

Como demonstração, vamos utilizar a seguinte tela:

Agora que conhecemos a tela, precisamos compreender a lógica de analise antes de começar a implementação.

Identificando os elementos visuais

Como primeiro passo, podemos começar a analise identificando os elementos visuais. De uma forma genérica, temos:

imagem de capa
texto de título
texto de subtítulo
ícone de favorito
botão de leitura

Analisando o layout da tela

Então, precisamos analisar o layout geral. Observe que todos os elementos estão organizados em coluna, sendo que o ícone e botão, estão em linha!

Com apenas essa analise, podemos implementar o primeiro código da tela com composable de layout:

Column {
    AsyncImage(
        "https://picsum.photos/1920/1080",
        contentDescription = "Imagem de capa"
    )
    Text(text = "Título")
    Text(text = "Subtitulo")
    Row {
        Icon(
            Icons.Outlined.FavoriteBorder,
            contentDescription = "ícone de favorito"
        )
        Button(onClick = { /*TODO*/ }) {
            Text(text = "Ler agora")
        }
    }
}

Embora o design não esteja fiel a amostra, já temos tudo que precisamos para seguir com o próximo passo, personalizar os componentes da tela.

Fazendo uma analogia ao front-end na web, basicamente, adicionamos o HTML para estruturar a página!

Personalizando a tela com o Modifier

Assim como há os composables para estruturar a tela, temos o Modifier como entidade responsável em personalizar, dar comportamentos e reagir a eventos dos composables. Sendo assim, vamos utilizá-lo para modificar os composables

Seguindo a analogia com front-end, o Modifier seria um CSS do Jetpack Compose.

Ajustando o container principal

Podemos começar a personalização por qualquer componente, mas, geralmente tendo seguir uma estratégia, começar pelo componente mais externo até o mais interno, portanto, vamos começar com o Column mais externo:

Column(
    Modifier
        .padding(8.dp)
        .fillMaxWidth()
        .border(
            0.5.dp,
            Color.Gray.copy(alpha = 0.5f),
            RoundedCornerShape(20.dp)
        )
) {
    ...
}

Todo composable recebe como primeiro parâmetro opcional um Modifier, pois existe o Modifier padrão. Para mais detalhes, você pode verificar nesta thread sobre modificadores..

Note que agora já temos um destaque ao container que representa o card, exibindo um espaçamento e bordas arredondadas.

Personalizando a imagem de capa

Por mais que o container do card foi ajustado corretamente, a imagem ainda apresenta o aspecto quadrado e ultrapassa as extremidades do container principal, para resolver isso, podemos aplicar o modificador na imagem também:

Column(
    ...
) {
    AsyncImage(
        "https://picsum.photos/1920/1080",
        contentDescription = "Imagem de capa",
        Modifier
            .height(100.dp)
            .clip(
                RoundedCornerShape(
                    topStart = 20.dp,
                    topEnd = 20.dp
                )
            ),
        contentScale = ContentScale.Crop,
        placeholder = ColorPainter(Color.Gray)
    )
    ...
}

Note que além do modificador, utilizei alguns parâmetros próprios do AsyncImage:

contentScale: o container da imagem vai ter uma altura fixa, na escala padrão, ela fica distorcida ao tentar exibir todo conteúdo da imagem. Aplicando o corte com o ContentScale.Crop, apresenta a imagem cortada no espaço disponível.
placeholder: apresenta conteúdo no preview e durante o carregamento da imagem via internet, nesse caso, um fundo cinza

Agora que a imagem de capa foi ajustada, vamos para os textos.

Modificando os textos

Podemos modificar os textos da seguinte maneira:

Column(
    ...
) {
    ...
    Text(
        text = "Título",
        Modifier.padding(
            start = 16.dp,
            top = 16.dp,
            end = 16.dp,
            bottom = 8.dp
        ),
        fontSize = 24.sp
    )
    Text(
        text = "Subtitulo",
        Modifier.padding(
            start = 16.dp,
            end = 16.dp,
            bottom = 16.dp
        ),
        fontSize =
        14.sp
    )
    ...
}

}

Mesmo que os textos foram modificados como esperado, é válido notar que tivemos que aplicar diversos números para o espaçamento...

Em casos como esses, podemos utilizar composables de layout para simplificar a implementação, como por exemplo, envolver os Texts em coluna e modificar o espaçamento da coluna e ajustar o arranjo vertical:

Column(
    ...
) {
    ...
    Column(
        Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text(
            text = "Título",
            fontSize = 24.sp
        )
        Text(
            text = "Subtitulo",
            fontSize = 14.sp
        )
    }
    ...
}

Tanto o Row como o Column, possuem parâmetros extras para manipular os seus filhos, ou seja, os composables que são organizados por eles.

Com esse ajuste, temos o mesmo resultado de antes! Mais simples, concorda? Por fim, precisamos apenas ajustar a linha final.

Ajustando o ícone e botão em linha

O ajuste da linha é bastante similar ao que fizemos na coluna anterior:

Column(
    ...
) {
    ...
    Row(
        Modifier
            .padding(16.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            Icons.Outlined.FavoriteBorder,
            contentDescription = "ícone de favorito"
        )
        Button(onClick = { /*TODO*/ }) {
            Text(text = "Ler agora")
        }
    }
}

A grande diferença fica na aplicação da largura com o fillMaxWidth() em conjunto do arranjo e alinhamento.

Essa técnica é utilizada para que seja possível aplicar o Arrangement.SpaceBetween que organiza os filhos nas extremidades, já o alinhamento, centraliza os filhos verticalmente.

Conclusão

Em um primeiro momento, a implementação de telas no Jetpack Compose pode parecer complexa, porém, vimos que podemos aplicar algumas técnicas para facilitar a escrita de código.

Considerando o que vimos, temos:

identificação dos elementos visuais
analise do layout
aplicação de modificadores em cada componente
ordem de modificação para facilitar

O que achou de criar telas no Jetpack Compose? Você já usa essas técnicas ou tem outros macetes para facilitar a implementação?

Expressão lambda, tipo função e funções de alta ordem no Kotlin

Alex Felipe — Mon, 12 Jun 2023 11:36:08 +0000

Antes de começar a estudar Kotlin, eu tive uma boa experiência com Java, e uma das dúvidas que mais me pegou foi:

"Como implemento um método/função que recebe uma expressão lambda?"

Se pensarmos em um código Java, basicamente, precisamos receber uma interface com apenas uma assinatura, como por exemplo, uma interface para calcular uma taxa:

interface Tax {

    double calculate();

}

E podemos implementar essa interface da seguinte forma:

class TaxCalculator {
    public double calculate(double value, Tax tax) {
        return tax.calculate(value);
    }
}

Uma calculadora de taxa que recebe o valor e oferece a interface para fazer o cálculo. Então podemos implementar a interface via expressão lambda passando uma regra de 10% adicionais:

var value = 100.0;
var calculator = new TaxCalculator();
var calculatedValue = calculator.calculate(value,
        (v) -> v + (v * 0.1)
);
System.out.println(calculatedValue);
// 110.0

Esse é um dos exemplos de expressão lambda no Java, mas existe uma série de possibilidades, principalmente se considermos a classe Stream introduzida desde o Java 8...

Utilizando expressão lambda no Kotlin a partir de código Java

Com esse mesmo código podemos utilizar expressões lambda no Kotlin:

val value = 100.0
val calculator = TaxCalculator()
val calculatedValue = calculator
    .calculate(value) { v: Double -> v + v * 0.1 }
println(calculatedValue)
// 110.0

E isso é possível, pois interfaces de um único método abstrado (Single Abstract Method - SAM) ou também conhecidas como interfaces funcionais, podem ser convertidas em expressões lambda.

O grande detalhe é que a interface "precisa ser implementada em Java", ou seja, se a calculadora e interface de taxa forem em Kotlin:

interface Tax {
    fun calculate(value: Double): Double
}

class TaxCalculator {
    fun calculate(value: Double, tax: Tax): Double {
        return tax.calculate(value)
    }
}

Recebemos o seguinte problema de compilação:

Isso mesmo! Uma incompatibilidade de tipos indicando que é esperado um Tax ao invés de (Double) -> Double.

Nesse momento você pode se perguntar:

"Que tipo estranho é esse?" 🤔

Inicialmente posso indicar que é um tipo especial do Kotlin, mas, antes de falarmos dele, vamos entender como podemos usar interfaces funcionais e expressões lambda apenas no Kotlin.

Interfaces funções

A partir da versão 1.4 do Kotlin, foram introduzidas as interfaces funcionais! Para implementá-las, basta apenas adicionar o fun no início da assinatura:

fun interface Tax {
    fun calculate(value: Double): Double
}

Pronto! Apenas com esse ajuste podemos usar a expressão lambda sem problemas 😄

Só que não vamos parar por aqui! Agora chegou o momento de entender aquele tipo estranho que vimos anteriormente 😅

O tipo função

Esse tipo com essa sintax diferente, é uma notação do tipo função ou Function Type. Basicamente, essa notação simplifica a implementação de funções permitindo armazená-las em variáveis ou parâmetros.

Em outras palavras, a expressão lambda que escrevemos em Kotlin poderia ser representada pela seguinte variável:

val calculateTax: (Double) -> Double = { v: Double -> v + v * 0.1 }

E podemos simplificar a implementação da calculadora:

class TaxCalculator {
    fun calculate(
        value: Double,
        calculate: (Double) -> Double
    ): Double {
        return calculate(value)
    }
}

E com apenas esse ajuste, ainda mantemos a mesma chamada via expressão lambda! Se preferir, pode até mesmo enviar a variável do tipo (Double) -> Double:

val value = 100.0
val calculateTax: (Double) -> Double = { v: Double -> v + v * 0.1 }
val calculator = TaxCalculator()
val calculatedValue = calculator
    .calculate(value, calculateTax)
println(calculatedValue)
// 110.0

Funções de alta ordem

A partir do momento que declaramos parâmetros ou retorno do tipo função, significa que criamos uma função de alta ordem ou Higher-Order Functions - HOF.

HOF são bastante comuns em diversos códigos em Kotlin, principalmente no ambiente do Android! Se você já teve a experiência com o Jetpack Compose, muito provavelmente já viu códigos similares a esses:

Column {
    Row {

    }
    Button(onClick = { }) {

    }
}

E se eu te disser que todos esses composables são HOF? Vamos verificar a implementação de cada um:

@Composable
inline fun Column(
    ...,
    content: @Composable ColumnScope.() -> Unit
) {
    ...
}

@Composable
inline fun Row(
    ...,
    content: @Composable RowScope.() -> Unit
) {
    ...
}

@Composable
fun Button(
    onClick: () -> Unit,
    ...
) {
    ...
}

Veja que todos esperam uma função via parâmetro! O único detalhe é que o Button não é capaz de receber a lambda à direita (famoso trailing lambda) assim como vemos no Column ou Box. O motivo dessa diferença é, apenas as HOFs com o último parâmetro sendo uma função, podem implementar o trailing lambda.

Embora você viu o que é o tipo função, HOF etc, pode ser que não seja tão claro a utilidade no dia a dia, concorda? Sendo assim, vamos fazer algumas conclusões e ver mais exemplos. 😎

Quando usar o tipo função?

HOFs em geral, são utilizadas para códigos que devem ser executados em um escopo específico ou em eventos. Um dos exemplos bastante utilizados são em funções de escopo (scope functions) em valores não nulos:

val words = listOf(
    "alex",
    "felipe",
    "instrutor"
)
val name = words
    .find { it == "alex" }
    ?.let { name ->
        println(name)
        // alex
    }

Nesta amostra de código, só vai chegar no println(), quando o valor não for nulo. Outro caso são listeners, como onClick do Button:

Button(
    onClick = {
        authenticate()
    }) {
    Text(text = "Login")
}

O authenticate() só vai ser executado quando o evento de clique acontecer! E essa técnica pode ser estendida para códigos que implementamos! Um dos casos muito comuns são os famosos callbacks:

class UserRepository(
    private val userAPI: UserAPI
) {
    fun findUserById(
        id: String,
        onSuccess: (User) -> Unit = {},
        onFailure: (Throwable) -> Unit = {}
    ) {
        userAPI.findUserById(id).enqueue(
            object : Callback<User?> {
                override fun onResponse(
                    call: Call<User?>,
                    response: Response<User?>
                ) {
                    if (response.isSuccessful) {
                        response.body()?.let { user ->
                            onSuccess(user)
                        }
                    }
                }
                override fun onFailure(
                    call: Call<User?>,
                    t: Throwable
                ) {
                    onFailure(t)
                }
            }
        )
    }
}

Essa é uma chamada assíncrona com o Retrofit, basicamente, chamamos o enqueue() de Call que exige a implementação de Callback e nele temos 2 eventos:

onResponse() -> quando ocorre resposta
onFailure() -> quando ocorre a falha

Então, você pode fazer as validações que deseja e rodar a função onSuccess enviando o usuário necessário, como também, no momento da falha, pode simplesmente chamar a função onFailure enviando o Throwable. O uso desse método fica da seguinte maneira:

val repository = UserRepository(
     //some implementation of UserAPI
)
repository.findUserById("some id",
    onSuccess = { user ->
        println("user found: $user")
    },
    onFailure = { t ->
        println("failure to find user")
        t.printStackTrace()
    })

E é por conta dessas possibilidades que o uso do tipo função, higher-order functions e expressão lambda é BASTANTE comum em códigos Kotlin 😄

O que achou dessas técnicas? Já usa no seu dia a dia? Compartilhe nos comentários.

Sobrecarga de operadores do Kotlin

Alex Felipe — Tue, 06 Jun 2023 16:03:21 +0000

Um detalhe bastante curioso no Kotlin é que podemos "somar", "subtrair" ou fazer diversas operações com os nossos objetos. Um exemplo bastante interessante seria a soma de listas:

val words = listOf("alex", "felipe")
val numbers = listOf(1, 2, 3)
val someList = words + numbers
println(someList)
println(words)
println(numbers)

Qual o resultado você espera? Vejamos:

[alex, felipe, 1, 2, 3]
[alex, felipe]
[1, 2, 3]

Olha que interessante! Uma nova lista foi criada adicionando os itens de cada lista, e mais, a soma não é restrita apenas entre as listas, podemos somar com qualquer objeto, até mesmo os nossos:

data class User(
    val id: Long,
    val name: String
)

val numbersWithUser = listOf(1, 2) + User(
    id = 1,
    name = "alexfelipe"
)
val wordsWithNumber = listOf(
    "alex",
    "felipe"
) + 1
println(numbersWithUser)
println(wordsWithNumber)

E o resultado que temos é:

[1, 2, User(id=1, name=alexfelipe)]
[alex, felipe, 1]

Neste momento você pode pensar:

"Como isso é possível?" 🤔

Conhecendo a sobrecarga de operadores

Essa funcionalidade é conhecida como sobrecarga de operadores ou operator overloading, embora o nome poça assustar, basicamente, são métodos "especiais" com a keyword operator que permitem adicionar o comportamento que desejamos.

Vamos considerar o exemplo do +, ele é traduzido para o método plus(). Podemos até mesmo ver algumas implementações na interface de Collection:

public operator fun <T> Collection<T>.plus(element: T): List<T> {
    val result = ArrayList<T>(size + 1)
    result.addAll(this)
    result.add(element)
    return result
}

public operator fun <T> Iterable<T>.plus(elements: Iterable<T>): List<T> {
    if (this is Collection) return this.plus(elements)
    val result = ArrayList<T>()
    result.addAll(this)
    result.addAll(elements)
    return result
}

Veja que tem mais de uma implementação e é por isso que podemos somar listas com listas ou listas com objetos e por ai vai... Aqui você pode ver alguns operadores comuns:

Expressão	Traduzido para
`a + b`	`a.plus(b)`
`a - b`	`a.minus(b)`
`a * b`	`a.times(b)`
`a / b`	`a.rem(b)`
`a..b`	`a.rangeTo(b)`

Em outras palavras, se você é capaz de fazer alguma dessas operações com objetos em Kotlin, é porque existe essa sobrecarga!

Implementando sobrecarga de operadores

Inclusive, podemos implementar operadores em nossas classes:

data class Product(
    val id: Long,
    val name: String,
    val description: String
)

class Cart(
   val products: List<Product> = listOf()
) {
    operator fun plus(product: Product): Cart =
        Cart(products + product)
}

Nesta implementação, podemos criar novos carrinhos com os produtos que desejamos somar:

val cart = Cart()
val cartWithKeyboard = cart + Product(
    id = 1,
    name = "Teclado mecânico",
    description = "Teclado com switches brown"
)
println(cartWithKeyboard.products)
val cartWithTShirt = cartWithKeyboard + Product(
    id = 2,
    name = "Camiseta",
    description = "Material 100% algodão"
)
println(cartWithTShirt.products)

Olha só o resultado que temos:

[Product(id=1, name=Teclado mecânico, description=Teclado com switches brown)]
[Product(id=1, name=Teclado mecânico, description=Teclado com switches brown), Product(id=2, name=Camiseta, description=Material 100% algodão)]

Interessante, né? Outras possibilidades de implementação seriam:

somar objetos de pedidos e o retorno ser um resumo com todos os produtos, quantidades e valores somados.
somar objetos de pagamentos ou taxas para obter o valor final com as adições
somar um usuário e um produto para criar um pedido

Enfim, uma série de ações comuns no nosso dia a dia.

Outros casos de uso de operadores

Atualmente existem diversas implementações de operadores, se observarmos a própria Collection, identificamos que é possível subtrair também:

val words = listOf("alex", "felipe", "instrutor", "alura") - "felipe"
val numbers = listOf(1, 2, 3) - 2
println(words)
println(numbers)

Veja o resultado:

[alex, instrutor, alura]
[1, 3]

Ou seja, uma forma mais sucinta de criar uma lista nova sem os elementos que não queremos!

E não para por aqui, se pegarmos classes como BigDecimal, podemos até mesmo fazer operações aritméticas sem problemas:

val total = BigDecimal("2.99") + BigDecimal("4.35")
println(total)

E chegamos no seguinte resultado:

7.34

O mesmo resultado sem a sobrecarga de operador seria assim:

val total = BigDecimal("2.99")
    .add(BigDecimal("4.35"))

Para saber mais: outros tipos de operadores

Neste artigo foquei na sobrecarga de operadores aritméticos, mas existem outras possibilidades, operações unárias e binárias, sendo que as aritméticas fazem parte das binárias.

O que achou da sobrecarga de operadores no Kotlin? Já usava no seu código? Compartilhe sua experiência nos comentários

Argumentos nomeados e opcionais no Kotlin

Alex Felipe — Wed, 31 May 2023 15:54:46 +0000

Um dos recursos que mais gosto do Kotlin são os argumentos nomeados (named arguments) seguido dos argumentos padrões (default arguments), a partir deles, temos uma maior flexibilidade no nosso código, seja na implementação ou reutilização de uma classe ou função.

E para demonstração vamos começar com uma classe que representa um usuário:

class User(
    val firstName: String,
    val lastName: String,
    val age: Int,
    val bio: String,
    val site: String?,
    val address: Address?
)

Então, vamos considerar a criação de um objeto para representar o usuário:

val alex = User(
    "Alex",
    "Felipe",
    28,
    "Instrutor na Alura",
    null,
    null
)

Observe que essa amostra precisa apenas do nome, sobrenome, idade e biografia, mas, mesmo assim, tivemos que enviar valores nulos dado que não indicamos um site ou endereço e isso poderia acontecer para qualquer propriedade que não é necessária!

Utilizando argumentos padrões

Para melhorar a experiência de escrita do código, podemos considerar o seguinte: em parâmetros que podem ser nulos ou opcionais, utilizamos os argumentos padrões!

class User(
    val firstName: String,
    val lastName: String,
    val age: Int,
    val bio: String = "",
    val site: String? = null,
    val address: Address? = null
)

Apenas com esse ajuste, podemos criar um usuário apenas com nome, sobrenome e idade:

val alex = User(
    "Alex",
    "Felipe",
    28
)

Veja que agora, conseguimos flexibilizar o uso da classe que representa o usuário!

Problemas ao adicionar novos parâmetros

Entretanto, apenas argumentos padrões não é o suficiente para que a instância não evit problemas com mudanças futuras, como por exemplo, se adicionarmos um campo novo para definir um id opcional:

class User(
    val id: Long = 0L,
    val firstName: String,
    val lastName: String,
    val age: Int,
    val bio: String = "",
    val site: String? = null,
    val address: Address? = null
)

Com apenas essa pequena alteração, precisamos modificar qualquer criação de usuário que não define um id dentro do nosso código.

Utilizando argumentos nomeados

Para flexibilizar a mudança de parâmetros nos construtores da classe ou funções, utilizamos os argumentos nomeados:

val alex = User(
    firstName = "Alex",
    lastName = "Felipe",
    age = 28
)

Pronto! Apenas com essa abordagem, podemos modificar a nossa classe ou função, adicionando novos parâmetros com argumentos padrões, que não haverá a necessidade de modificações das chamadas dentro do código.

Também, os argumentos nomeados podem ser enviados em qualquer ordem:

val alex = User(
    age = 28,
    lastName = "Felipe",
    firstName = "Alex"
)

Mais exemplos

Um caso de uso bastante comum são em implementações de Composables, observe a implementação do composable Box:

@Composable
inline fun Box(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
) {
    ...
}

Note que precisamos apenas enviar o argumento para content (geralmente um trailing lambda), e podemos usar argumentos nomeados para garantir a compatibilidade e por ai vai... Aqui vão algumas variações de chamada do Box:

Box {

}
Box(modifier = Modifier) {

}
Box(
    content = { },
    contentAlignment = Alignment.Center
)

Entenda que esse tipo de abordagem é bastante comum e usar sabiamente esses dois recursos vai garantir que você escreva um código mais consistente e com maiores facilidades de crescimento.

O que você achou desses recursos do Kotlin, já utilizava no seu dia a dia? Se sim compartilhe comigo aqui nos comentários 😄