Criando um

Jetpack aplicativo do Zero

Compose
 Firebase
Jetpack
Compose

KMM
AdMob

Play Store Open AI

 VISÃO GERAL
Jetpack
Compose
GERAL

O Jetpack Compose é um Framework de Interface.

Onde tu define a UI do teu aplicativo de forma declarativa.

Uma mudança significativa em como os desenvolvedores Android criam aplicativos.

Uma tecnologia relativamente nova ainda a se provar.

JETPACK COMPOSE VS. XML

A abordagem em XML é imperativa: ela diz como e em que sequência criar a UI.

Jetpack Compose é declarativa: ela diz o estado e o sistema atualiza a UI.

A maioria dos projetos em 2023 estão ainda usando XML.

Widgets nativos do Android definidos em XML são AOT já compose é JIT.

VISÃO GERAL
INTRODUÇÃO AO JETPACK COMPOSE

O Jetpack Compose é um Framework de Interface que transforma a forma como

os desenvolvedores Android criam aplicativos. Com ele, a UI é definida de

forma declarativa, o que é uma mudança significativa em relação à abordagem

tradicional baseada em XML.

VISÃO GERAL
O QUE É O JETPACK COMPOSE?

O Jetpack Compose é um framework desenvolvido inicialmente para Android e

escrito em Kotlin. Ele é dividido em duas partes principais: o Compose

Compiler/Runtime e o Compose UI. O primeiro é responsável pela compilação e

execução do código Compose, enquanto o segundo fornece os componentes da UI

que são utilizados para construir a interface do usuário.

VISÃO GERAL
MUDANÇAS E EVOLUÇÃO DO JETPACK COMPOSE

O Jetpack Compose, sendo uma tecnologia nova, ainda está passando por

muitas alterações e amadurecimento. Como resultado, é crucial acompanhar as

atualizações e ajustar o código conforme necessário. A comunidade Android

também está se adaptando a essa nova tecnologia, o que significa que os

padrões de melhores práticas e convenções de codificação estão em constante

desenvolvimento e evolução.

VISÃO GERAL
JETPACK COMPOSE VS. XML

Ao contrário do XML que é imperativo e exige que o desenvolvedor diga ao

sistema como criar a interface do usuário, o Jetpack Compose adota uma

abordagem declarativa. Isso significa que você só precisa definir o estado

desejado e o sistema se encarrega de atualizar a UI para refletir esse

estado. Embora o Jetpack Compose seja promovido como uma solução de

performance, é importante ter uma visão crítica. Comparando a inicialização

do aplicativo, algo que já está compilado (XML) pode ser mais rápido do que

algo que será compilado em tempo de execução (Jetpack Compose).

VISÃO GERAL
VANTAGENS DO JETPACK COMPOSE

O Jetpack Compose tem várias vantagens, como menos código para os mesmos

resultados, uma UI consistente e elegante, facilidade de teste,

interoperabilidade com código existente baseado em View e a potência do

Kotlin.

VISÃO GERAL
COMO O ANDROID DESENHA O QUE É DECLARADO COM JETPACK COMPOSE?

1. Declaração: Cada função Composable representa um pedaço da interface.

2. Árvore Composable: O Composer usa essas funções para criar uma árvore Composable. A

árvore composable é similar à árvore de elementos do DOM em uma página web.

3. Recomposição: Quando o estado dos dados observados por uma função Composable muda, o

Compose marca essa função para ser "recomposta".

4. Aplicação: O Compose então compara a nova descrição da IU com a antiga e atualiza

apenas as partes que mudaram na tela. Isso é feito usando à árvore composable.

5. Desenho: Finalmente, o Compose usa o sistema de renderização do Android para desenhar

o resultado final na tela.

VISÃO GERAL
FRAMEWORK COMPOSE: COMPOSE UI

O Compose UI é a biblioteca que fornece os componentes da IU para construir a interface de

usuário. Ele fornece elementos básicos como botões e caixas de texto, até componentes mais

complexos como listas e grades. Além disso, fornece funcionalidades para lidar com temas,

animações e acessibilidade. Importante destacar que o Compose UI é "unbundled", não está

vinculado a uma versão específica do Android, permitindo o uso da versão mais recente

independente da versão do Android que os usuários estão usando.

VISÃO GERAL
 LAYOUTS
Jetpack
Compose
GERAL

Use Layouts Composable Column, Row e Box para construir uma UI.

Column é um layout composable que coloca seus filhos em uma única coluna vertical.

Row é um layout composable que coloca seus filhos em uma única linha horizontal.

Box é um layout composable que empilha seus filhos um em cima do outro.

Você pode combinar esses layouts para criar interfaces de usuário mais complexas.

Layout Measure e Layout Place: Cada composable decide seu tamanho e posição na tela.

@Composable é um tijolinho que você usa para construir a sua UI.

Modifiers são usados para modificar ou adicionar comportamento aos Composables.

LAYOUTS
FRAMEWORK COMPOSE: COMPOSE UI

O Compose UI é a biblioteca que fornece os componentes da IU para construir a interface de

usuário. Ele fornece elementos básicos como botões e caixas de texto, até componentes mais

complexos como listas e grades. Além disso, fornece funcionalidades para lidar com temas,

animações e acessibilidade. Importante destacar que o Compose UI é "unbundled", não está

vinculado a uma versão específica do Android, permitindo o uso da versão mais recente

independente da versão do Android que os usuários estão usando.

VISÃO GERAL
 STATES
Jetpack
Compose
JETPACK COMPOSE E GERENCIAMENTO DE ESTADOS

Em Jetpack Compose, o estado é qualquer valor que possa mudar ao longo do tempo e que

pode causar a interface do usuário a ser recomposta. A recomposição é o processo pelo

qual a IU é atualizada para refletir as mudanças no estado.

O estado é "lembrado" usando a função remember. A função rememberSaveable permite salvar

o estado de uma composição para que ele possa ser restaurado se a Activity for destruída

e recriada.

STATES
STATELESS E STATEFUL COMPOSABLES

Stateless Composables: Não possuem um estado interno. Eles apenas recebem dados e os

exibem. Benefícios dos Stateless Composables: Separation of Concerns, Reutilização de

código, Testabilidade, Prevenção de bugs.

Stateful Composables: Possuem um estado interno. Eles têm a capacidade de manter e

alterar o estado.

STATES
STATE HOISTING E VIEWMODEL

State Hoisting: Padrão em que o estado é movido para a parte mais alta possível na

árvore de composição, para que ele possa ser compartilhado entre várias composições.

ViewModel: Componente do Jetpack Compose que pode ser usado para gerenciar o estado em

um escopo maior, como em uma tela ou em todo o aplicativo.

Existem dois tipos de estados de interface: o estado da tela (informações necessárias

para renderizar a IU) e o estado do elemento da IU (estado intrínseco aos elementos

individuais da IU). A lógica de negócios e a lógica da IU estão relacionadas ao

gerenciamento do estado da IU.

STATES