-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #50 from PetJournal/gusoliveira21-patch-2
Update README.md
- Loading branch information
Showing
16 changed files
with
454 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
|
|
||
| - **Visão Geral da Arquitetura**: MVVM para separação da lógica de negócios e interface do usuário. | ||
|
|
||
|  | ||
|
|
||
| - **Diagrama da Arquitetura expandido**: | ||
|
|
||
|  | ||
|
|
||
| - **Organização das pastas:** | ||
| - **Modulos** : | ||
|
|
||
|  | ||
|
|
||
| - **App, Domain, Data, Database** : | ||
|
|
||
| <p> | ||
| <img src='https://github.com/PetJournal/petjournal.android/assets/42920754/b0a54bb3-3288-4a34-a6ff-707d31621ace' width='20.5%'> | ||
| <img src='https://github.com/PetJournal/petjournal.android/assets/42920754/96ec7de2-339c-4d0b-bfac-5b44faec8a5b' width='20.5%'> | ||
| <img src='https://github.com/PetJournal/petjournal.android/assets/42920754/2849611f-15a4-454c-b5ab-19221e8c16d4' width='20.5%'> | ||
| <img src='https://github.com/PetJournal/petjournal.android/assets/42920754/7e14cb34-1652-4a4c-aba2-b64655cd85c4' width='20.5%'> | ||
| </p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| ### O que é FormEvent? | ||
|
|
||
| `FormEvent` é uma classe selada (sealed class) em Kotlin, usada na tela de cadastro de usuário do nosso aplicativo. Esta classe representa diferentes tipos de eventos que podem ocorrer durante a interação do usuário com o formulário de cadastro. | ||
|
|
||
| ### O que isso faz no código? | ||
|
|
||
| Cada subclasse de `FormEvent` corresponde a um evento específico no formulário, como mudança de nome, sobrenome, e-mail, etc. Quando um usuário interage com o formulário (por exemplo, digitando um nome), um evento correspondente (neste caso, `NameChanged`) é emitido. Este evento é então tratado pelo ViewModel, que atualiza o estado do formulário de acordo com a ação do usuário, garantindo que a interface do usuário reflita essas mudanças de forma eficiente e evitando recomposições desnecessárias. | ||
|
|
||
| ### Como devo utilizar em outras telas? | ||
|
|
||
| Para utilizar um padrão semelhante em outras telas, siga estas etapas: | ||
|
|
||
| 1. **Defina uma classe selada para eventos**: Crie uma classe selada para representar os diferentes tipos de eventos que podem ocorrer na tela. | ||
| ```kotlin | ||
| sealed class ScreenEvent { | ||
| object EventA : ScreenEvent() | ||
| data class EventB(val data: String) : ScreenEvent() | ||
| data class EventC(val value: Int) : ScreenEvent() | ||
| } | ||
| ``` | ||
| 2. **Manipule os eventos no ViewModel**: No ViewModel da tela, implemente um método para lidar com os eventos, atualizando o estado da tela conforme necessário. | ||
| ```kotlin | ||
| data class ScreenState( | ||
| val isLoading: Boolean = false, | ||
| val data: String = "", | ||
| val error: String? = null | ||
| ) | ||
| ``` | ||
|
|
||
| ```kotlin | ||
| class ScreenViewModel : ViewModel() { | ||
| private val _state = MutableLiveData<ScreenState>() | ||
| val state: LiveData<ScreenState> = _state | ||
|
|
||
| fun onEvent(event: ScreenEvent) { | ||
| when (event) { | ||
| is ScreenEvent.EventA -> { | ||
| // Lógica para o EventA | ||
| } | ||
| is ScreenEvent.EventB -> { | ||
| // Lógica para o EventB, utilizando event.data | ||
| } | ||
| is ScreenEvent.EventC -> { | ||
| // Lógica para o EventC, utilizando event.value | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| ``` | ||
| 3. **Emita eventos a partir da UI**: Na interface do usuário, emita os eventos apropriados em resposta às ações do usuário. | ||
| ```kotlin | ||
| @Composable | ||
| fun ScreenUI(viewModel: ScreenViewModel) { | ||
| Button(onClick = { viewModel.onEvent(ScreenEvent.EventA) }) { | ||
| Text("Acionar EventA") | ||
| } | ||
| TextField( | ||
| value = "", | ||
| onValueChange = { viewModel.onEvent(ScreenEvent.EventB(it)) } | ||
| ) | ||
| Slider( | ||
| value = 0f, | ||
| onValueChange = { viewModel.onEvent(ScreenEvent.EventC(it.toInt())) } | ||
| ) | ||
| } | ||
| ``` | ||
| ### Como sei quando devo usar? | ||
|
|
||
| Você deve usar `FormEvent` ou um padrão similar sempre que precisar gerenciar o estado de uma tela de forma eficiente, especialmente em formulários ou em interfaces onde as ações do usuário resultam em mudanças de estado. Esse padrão é particularmente útil em aplicações que utilizam Jetpack Compose, onde a eficiência na recomposição da UI é crucial. | ||
|
|
||
| ### Conclusão | ||
|
|
||
| Usar `FormEvent` ajuda a manter uma arquitetura clara e reativa, facilitando o gerenciamento de estado e melhorando a performance da interface do usuário. | ||
|
|
||
| --- | ||
|
|
||
| Nota: Sinta-se à vontade para adaptar ou expandir este texto conforme necessário para nossa documentação! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| ## **O que é o FormState?** | ||
|
|
||
| O `FormState` é uma estrutura de dados utilizada para gerenciar o estado de formulários em aplicações que usam Jetpack Compose. Ele encapsula todos os dados relacionados ao formulário, como valores de campos, erros de validação e o estado de submissão. | ||
|
|
||
| ## **O que isso faz no código?** | ||
|
|
||
| No código, `FormState` é responsável por: | ||
|
|
||
| - Armazenar os valores de cada campo do formulário. | ||
| - Manter informações de erro para validação de campos. | ||
| - Controlar o estado geral do formulário, como se está pronto para ser enviado ou se está passando por validação. | ||
|
|
||
| Essa abordagem centraliza a lógica de gerenciamento do estado do formulário, facilitando a manutenção e a atualização da UI conforme as mudanças de estado. | ||
|
|
||
| ## **Como devo utilizar em outras telas?** | ||
|
|
||
| Para utilizar o `FormState` em outras telas, siga estes passos: | ||
|
|
||
| 1. **Defina um `FormState` para o seu formulário**: Crie uma classe que represente o estado do seu formulário. Por exemplo, para um formulário de login: | ||
|
|
||
| ```kotlin | ||
| data class LoginFormState( | ||
| val username: String = "", | ||
| val password: String = "", | ||
| val isError: Boolean = false | ||
| ) | ||
| ``` | ||
|
|
||
| 2. **Use o `FormState` no seu ViewModel**: No ViewModel, crie uma instância do `FormState` e use-a para controlar as mudanças no formulário. | ||
|
|
||
| ```kotlin | ||
| class LoginViewModel : ViewModel() { | ||
| var loginFormState by mutableStateOf(LoginFormState()) | ||
| private set | ||
|
|
||
| // Lógica de atualização de estado | ||
| } | ||
| ``` | ||
|
|
||
| 3. **Atualize o `FormState` com base em eventos da UI**: Use eventos para atualizar o estado. Por exemplo, quando o usuário altera um campo: | ||
|
|
||
| ```kotlin | ||
| fun onUsernameChanged(newUsername: String) { | ||
| loginFormState = loginFormState.copy(username = newUsername) | ||
| } | ||
| ``` | ||
|
|
||
| 4. **Observe o `FormState` na UI**: Na UI, observe o `FormState` para refletir as mudanças e mostrar erros se necessário. | ||
|
|
||
| ```kotlin | ||
| @Composable | ||
| fun LoginForm(viewModel: LoginViewModel) { | ||
| val formState = viewModel.loginFormState | ||
| // Crie campos de texto e botões que utilizam formState | ||
| } | ||
| ``` | ||
|
|
||
| ## **Como sei quando devo usar?** | ||
|
|
||
| Você deve usar o `FormState` quando: | ||
|
|
||
| - O formulário contém múltiplos campos de entrada e você precisa gerenciar seus estados de forma centralizada. | ||
| - É necessário realizar validações e mostrar erros nos campos de entrada. | ||
| - Você quer evitar recomposições desnecessárias da UI, atualizando apenas as partes necessárias do formulário. | ||
|
|
||
| Utilizar o `FormState` ajuda a manter seu código organizado, facilita a leitura e a manutenção, e melhora o desempenho da UI no Jetpack Compose. | ||
|
|
||
| --- | ||
|
|
||
| Nota: Sinta-se à vontade para adaptar ou expandir este texto conforme necessário para nossa documentação! |
Oops, something went wrong.