Skip to content
/ Trybnb Public

Aplicativo Android para criar e exibir as reservas feitas pelos hóspedes, utilizando os dados da API restful-booker. Este aplicativo inclui o layout, a validação de estados dos componentes e o código de consumo de uma API Rest com Retrofit, seguindo a arquitetura MVVM.

2 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

thiagocredico/Trybnb

BranchesTags

Repository files navigation

Boas-vindas ao repositório do projeto TRYBNB

Para realizar o projeto, atente-se a cada passo descrito a seguir, e se tiver qualquer dúvida, nos envie no Slack da turma! #vqv 🚀

Aqui, você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir desse repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.


Termos e acordos

Ao iniciar este projeto, você concorda com as diretrizes do Código de Conduta e do Manual da Pessoa Estudante da Trybe.


Entregáveis

🧑‍💻 O que deverá ser desenvolvido

Você é responsável por desenvolver um aplicativo Android para criar e exibir as reservas feitas pelos hóspedes, utilizando os dados da API restful-booker. Este aplicativo inclui o layout, a validação de estados dos componentes e o código de consumo de uma API Rest com Retrofit, seguindo a arquitetura MVVM.


📝 Habilidades a serem trabalhadas

Neste projeto, verificaremos se você é capaz de:

  • Dominar os conceitos fundamentais de Kotlin, como tipos de dados, estruturas de controle de fluxo, funções, lambdas, etc;
  • Compreender a estrutura básica do Android SDK, componentes de UI (User Interface), e ciclo de vida de atividades e fragmentos;
  • Trabalhar com Views, Layouts, e outros elementos da interface do usuário;
  • Familiarizar-se com o padrão de arquitetura MVVM (Model-View-ViewModel) e implementá-lo eficientemente em seu aplicativo;
  • Entender como fazer solicitações de rede usando Retrofit para consumir dados de uma API REST;
  • Aplicar os princípios do Material Design para criar uma interface do usuário intuitiva e agradável;


🗓 Data de Entrega

  • Este projeto é individual;

  • Serão 3 dias de projeto;

  • Data para entrega final do projeto: 16/01/2024 14:00.


Orientações

🎛 Linter

Usaremos o Ktlint para fazer o lint do seu código.

Este projeto já vem com as dependências relacionadas ao linter configuradas no arquivo build.gradle.

Para poder rodar o Ktlint de forma local, rode o comando de acordo com o sistema operacional:

Mac ou Linux:

./gradlew ktlintCheck

Windows:

gradlew ktlintCheck

Se a análise do Ktlint encontrar problemas no seu código, tais problemas serão mostrados no seu terminal.


👀 Analisador estático de código

Usaremos o Detekt para fazer a análise estática do seu código.

Este projeto já vem com as dependências relacionadas ao linter configuradas no arquivo build.gradle.

Para poder rodar o Detekt de forma local, rode o comando de acordo com o sistema operacional:

Mac ou Linux:

./gradlew detekt

Windows:

gradlew detekt

Se a análise do Ktlint encontrar problemas no seu código, tais problemas serão mostrados no seu terminal.

🛠 Testes

Todos os requisitos do projeto serão testados automaticamente por meio do Espresso, uma ferramenta que testa interfaces. Você pode rodar o teste instrumentado no Android Studio ou via linha de comando.

Linha de comando

  • Abra o emulador

  • Execute o comando para os testes de Instrumentação

    • Mac ou Linux: ./gradlew connectedAndroidTest
    • Windows: gradlew connectedAndroidTest

  • Execute o comando para os testes Unitários

    • Mac ou Linux: ./gradlew testDebugUnitTest
    • Windows: gradlew testDebugUnitTest

Android Studio

  • Encontre a Seção de Testes:

  • Abra o arquivo de teste MainInstrumentedTest
Executando todos os teste
  • Para executar todos os testes, basta clicar no ícone de reprodução verde duplo:

  • Em seguida, clique em RunMainInstrumentedTest...

Executando um teste específico
  • Para executar um teste específico, basta clicar no ícone de reprodução ao lado de cada teste de requisito:

  • Em seguida, clique em test_req_01_container...

Avaliação

Os requisitos do seu projeto são avaliados automaticamente. Para verificar se a sua avaliação foi computada com sucesso, você pode verificar os detalhes da execução do avaliador:

  • Na página do seu Pull Request, acima do "botão de merge", procure por Evaluator job e clique no link Details;

  • Na página que se abrirá, procure pela linha Evaluator step e clique nela;

  • Caso tenha dúvidas, peça ajuda no Slack.

⚠️ O avaliador automático não necessariamente avalia seu projeto na ordem em que os requisitos aparecem no README. Isso acontece para deixar o processo de avaliação mais rápido. Então, não se assuste se isso acontecer, ok?

O não cumprimento de um requisito, total ou parcialmente, impactará em sua avaliação.

✅ Avaliador Remoto

Para o avaliador remoto, estamos utilizando um dispositivo virtual com as seguintes configurações:

  • API level: 29
  • Display: 320x640
  • DPI: 160x160
  • Disable animations: true
  • Disable spellchecker: false
  • Disable Linux hardware acceleration: false
  • Enable hardware keyboard: false

O projeto foi configurado para ser executado com versões específicas. Pode ocorrer que, ao baixar o projeto, o Android Studio sugira a atualização com a seguinte pergunta:

⚠️ Não atualize o projeto, pois pode não ser compatível com o avaliador remoto. ⚠️


🏗 Estrutura do projeto

O seu Pull Request deverá conter, obrigatoriamente, os arquivos MainActivity.kt, ApiIdlingResource e activity_main.xml.

As imagens pedidas no projeto estão dentro da pasta /res.

⚠️ É importante que seus arquivos tenham exatamente estes nomes!

Caso sinta a necessidade de adicionar outros arquivos além destes, sinta-se à vontade.

API BACKEND

Neste projeto, estaremos utilizando a API chamada Restful-booker.


Requisitos do projeto

1 - Configure a estrutura inicial da tela incluindo a barra superior com o logotipo

O aplicativo apresentará seu conteúdo principal em um contêiner principal. Dentro desse contêiner principal, teremos outro contêiner que servirá como o topo, e dentro dele, centralizaremos nosso logotipo.

️📱 Tela


👩‍💻 Regras de implementação

Onde desenvolver

  • O arquivo que você implementará o layout deve se chamar activity_main.xml e deve estar dentro do diretório src/res/layout;

Estrutura da árvore de componentes da tela

App
└── LinearLayout
    └── ConstraintLayout
        └── ImageView

Regras de negócio

LinearLayout

  • Configuração
    • Deve ser o elemento raíz da tela
    • Deve ter o id main_container
  • Layout
    • Largura e altura devem ser a mesma do elemento pai
    • Orientação deve ser vertical

ConstraintLayout

  • Configuração
    • Deve ser elemento filho do LinearLayout
    • Deve ter o id navigation_bar_container
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura devem estar definida em 60dp
    • Deve ter uma cor de fundo definida como @color/navigation

ImageView

  • Configuração
    • Deve ser elemento filho do ConstraintLayout
    • Deve ter o id logo_main_activity
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Preenchimento de corte deve estar habilitado
  • Constraints:
    • A constraint top deve ser ancorada no top do elemento pai
    • A constraint bottom deve ser ancorada no bottom do elemento pai
    • A constraint right deve ser ancorada no right do elemento pai
    • A constraint left deve ser ancorada no left do elemento pai
  • Atributos
    • A imagem usada deve ser @drawable/logo

O que será testado?

  • LinearLayout
    • O elemento LinearLayout está visível
    • O elemento LinearLayout é do tipo LinearLayout
    • O elemento LinearLayout possui o id main_container
  • ConstraintLayout
    • O elemento ConstraintLayout está visível
    • O elemento ConstraintLayout é filho do elemento LinearLayout
    • O elemento ConstraintLayout possui o id navigation_bar_container
  • ImageView
    • O elemento ImageView está visível
    • O elemento ImageView é filho do elemento ConstraintLayout
    • O elemento ImageView possui o id logo_main_activity


2 - Configure a estrutura da tela inicial adicionando uma barra de navegação na parte inferior e um fragment container

O aplicativo exibirá em seu conteúdo principal uma BottomNavigation com três itens e um fragmentContainer, ambos sendo filhos do LinearLayout principal.

️📱 Tela


👩‍💻 Regras de implementação

Onde desenvolver

  • O arquivo que você implementará o layout deve se chamar activity_main.xml e deve estar dentro do diretório src/res/layout;

Estrutura da árvore de componentes da tela

App
└── LinearLayout
    └── ConstraintLayout
        └── ImageView
    └── FragmentContainerView
    └── BottomNavigationView

Regras de negócio

FragmentContainerView

  • Configuração
    • Deve ter o id main_fragment_container
    • Deve ser elemento filho do LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve ser 0dp
    • O peso deve ser 1
    • Orientação deve ser vertical

BottomNavigationView

  • Configuração
    • Deve ser elemento filho do LinearLayout
    • Deve ter o id navigation_bottom_view
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteudo
    • Deve possuir um espaçamento no topo e na parte inferior de 5dp
    • Modo de visibilidade este ser labeled
  • Atributos
    • O menu deve apontar para um xml chamado bottom_navigation_menu.xml (Você deve criar esse menu na pasta res/menu)
  • Menu
    • O primeiro item deve ter:
      • O título com Reservas
      • Um icone chamado ic_reservation
    • O segundo item deve ter:
      • O título com Criar Reservas
      • Um icone chamado ic_create_reservation
    • O terceiro item deve ter:
      • O título com Perfil
      • Um icone chamado ic_profile

O que será testado?

  • FragmentContainerView
    • O elemento FragmentContainerView está visível
    • O elemento FragmentContainerView é do tipo FragmentContainerView
    • O elemento FragmentContainerView é filho do elemento LinearLayout
    • O elemento FragmentContainerView possui o id main_fragment_container
  • BottomNavigationView
    • O elemento BottomNavigationView está visível
    • O elemento BottomNavigationView é do tipo BottomNavigationView
    • O elemento BottomNavigationView é filho do elemento LinearLayout
    • O elemento BottomNavigationView possui o id navigation_bottom_view


3 - Implemente a navegação do BottomNavigation de forma que, ao clicar em cada item do menu, seja chamado o respectivo fragmento

Ao clicar em cada item do BottomNavigation, deve-se abrir o respectivo fragmento no FragmentContainerView. Cada fragmento deve ter em seu layout um container root com seus respectivos IDs.

👩‍💻 Regras de implementação

Onde desenvolver

  • Voce vai precisar criar tres fragmentos chamados:

    • ReservationFragment
    • CreateReservationFragment
    • ProfileFragment

  • Cada fragmento deve gerar seus respectivos arquvios de layout:

    • fragment_reservation.xml
    • fragment_create_reservation.xml
    • fragment_profile.xml

Estrutura da árvore de componentes da tela

Estrutura do Fragmento Reservas

App
└── FrameLayout

Estrutura do Fragmento Criar Reservas

App
└── ScrollView

Estrutura do Fragmento Perfil

App
└── ScrollView

Regras de negócio

FrameLayout

  • Configuração
    • Deve ter o id reservation_frame_layout
    • Deve ser elemento o elemento root
  • Layout
    • Largura e Altura devem ser a mesma do elemento pai

ScrollView do fragmento Criar Reservas

  • Configuração
    • Deve ter o id create_reservation_scroll_view
    • Deve ser elemento o elemento root
  • Layout
    • Largura e Altura devem ser a mesma do elemento pai
    • Deve possuir a barra de rolagem Oculta

ScrollView do fragmento Perfil

  • Configuração
    • Deve ter o id profile_scroll_view
    • Deve ser elemento o elemento root
  • Layout
    • Largura e Altura devem ser a mesma do elemento pai
    • Deve possuir a barra de rolagem Oculta

O que será testado?

  • Ao clicar no item do menu Reservas o fragmento de reservas deve ser carregado com o container root com id reservation_frame_layout
  • Ao clicar no item do menu Criar Reservas o fragmento de reservas deve ser carregado com o container root com id create_reservation_scroll_view
  • Ao clicar no item do menu Perfil o fragmento de reservas deve ser carregado com o container root com id profile_scroll_view


4 - Crie a estrutura do fragmento Perfil

O aplicativo exibirá em seu conteúdo uma imagem, dois campos de entrada e um botão de acesso.

️📱 Tela


👩‍💻 Regras de implementação

Onde desenvolver

  • O arquivo que você implementará o layout deve se chamar fragment_profile.xml e deve estar dentro do diretório src/res/layout;

Estrutura da árvore de componentes da tela

App
└── ScrollView
    └── LinearLayout
        └── ImageView
        └── TextInputLayout
            └── TextInputEditText
        └── TextInputLayout
            └── TextInputEditText
        └── Button

Regras de negócio

LinearLayout

  • Configuração
    • Deve ter o id profile_container
    • Deve ser elemento filho do ScrollView
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Orientação deve ser vertical
    • Margem de 16dp
    • Gravidade do layout Centralizado

ImageView

  • Configuração
    • Deve ser elemento filho do LinearLayout
    • Deve ter o id person_image_profile
  • Layout
    • Largura e Altura definidas em 120dp
    • Margem inferior definida em 50dp
    • Gravidade do layout Centralizado na Horizontal
  • Atributos
    • Sua imagem deve ser ic_person

TextInputLayout

  • Configuração
    • Deve ser elemento filho do LinearLayout
    • Deve ter o id login_input_profile
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior definida em 20dp
  • Atributos
    • O campo deve ter um ícone de início ic_login
    • A label do campo deve ser Login

TextInputLayout

  • Configuração
    • Deve ser elemento filho do LinearLayout
    • Deve ter o id password_input_profile
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior definida em 50dp
  • Atributos
    • O campo deve ter um ícone de início ic_password
    • O campo deve ter um modo de ícone de final password_toggle
    • A label do campo deve ser Password

Button

  • Configuração
    • Deve ser elemento filho do LinearLayout
    • Deve ter o id login_button_profile
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
  • Atributos
    • O texto do botão deve ser Login

O que será testado?

  • ScrollView
    • O elemento ScrollView está visível
    • O elemento ScrollView possui o id profile_scroll_view
  • LinearLayout
    • O elemento LinearLayout está visível
    • O elemento LinearLayout é do tipo LinearLayout
    • O elemento LinearLayout é filho do elemento ScrollView
    • O elemento LinearLayout possui o id profile_container
  • ImageView
    • O elemento ImageView está visível
    • O elemento ImageView é do tipo ImageView
    • O elemento ImageView é filho do elemento LinearLayout
    • O elemento ImageView possui o id person_image_profile
  • TextInputLayout
    • O elemento TextInputLayout está visível
    • O elemento TextInputLayout é do tipo TextInputLayout
    • O elemento TextInputLayout é filho do elemento LinearLayout
    • O elemento TextInputLayout possui o id login_input_profile
  • TextInputLayout
    • O elemento TextInputLayout está visível
    • O elemento TextInputLayout é do tipo TextInputLayout
    • O elemento TextInputLayout é filho do elemento LinearLayout
    • O elemento TextInputLayout possui o id password_input_profile
  • Button
    • O elemento Button está visível
    • O elemento Button é do tipo Button
    • O elemento Button é filho do elemento LinearLayout
    • O elemento Button possui o id login_button_profile


5 - Implemente a validação do campo Login e Password

As pessoas podem inserir qualquer valor nos campos de login e senha. Considerando isso, vamos implementar a validação no aplicativo! Se o campo de login ou senha estiver vazio, será exibida uma mensagem de erro.

️📱 Tela


👩‍💻 Regras de implementação

Regras de negócio

  • Se o campo de login estiver vazio, ele deve exibir a mensagem de erro com o texto O campo Login é obrigatório
  • Se o campo de senha estiver vazio, ele deve exibir a mensagem de erro com o texto O campo Password é obrigatório
  • A validação será realizada após o clique no botão Login.

O que será testado?

  • Que ao clicar no menu Perfil, o fragmento do perfil será carregado
  • Que os campos de Login e Password são deixados em branco, eles devem exibir suas respectivas mensagens de erro


6 - Realizar requisição ao endpoint POST /auth via Retrofit

Para realizar a autenticação da API, é necessário criar uma interface com a assinatura do método que representa o endpoint POST /auth e a anotação necessária para utilizar juntamente com o Retrofit.

👩‍💻 Regras de implementação

Regras de implementação

O objetivo deste requisito é implementar ou criar uma interface para realizar requisições à API, utilizando-a em conjunto com o Retrofit.

Para que este requisito funcione corretamente, você precisará usar a classe ApildlingResource dentro de todas as suas Coroutines, como no exemplo a seguir:

CoroutineScope(Main).launch {
    try {
        // ADICIONAR ESSA LINHA
        ApiIdlingResource.increment()

        //...
        // Seu Codigo das Rotinas
        // ...

        // ADICIONAR ESSA LINHA
        ApiIdlingResource.decrement()
    } catch (e: HttpException) {
        // ADICIONAR ESSA LINHA
        ApiIdlingResource.decrement()

        //...
        // Seu Codigo de erro de HttpException
        // ...
    } catch (e: IOException) {
        // ADICIONAR ESSA LINHA
        ApiIdlingResource.decrement()

        //...
        // Seu Codigo de erro de IOException
        // ...
    }
}

O que será testado?

  • Ao clicar no menu `Perfil``, o fragmento do perfil será carregado
  • Será digitado o login admin com a senha password123
  • A requisição será realizada ao clicar no botão Login
  • Após uma requisição bem-sucedida, a mensagem Login feito com sucesso! aparecerá na tela


7 - Crie a estrutura do layout do fragmento Reservas

O aplicativo exibirá em seu conteúdo uma lista de reservas usando o componente RecyclerView.

👩‍💻 Regras de implementação

Onde desenvolver

  • O arquivo que você implementará o layout deve se chamar fragment_reservation.xml e deve estar dentro do diretório src/res/layout;

Estrutura da árvore de componentes da tela

App
└── FrameLayout
    └── RecyclerView

Regras de negócio

RecyclerView

  • Configuração
    • Deve ter o id reservation_recycler_view
    • Deve ser elemento filho do FrameLayout
  • Layout
    • Largura e Altura devem ser a mesma do elemento pai

O que será testado?

  • FrameLayout
    • O elemento FrameLayout está visível
    • O elemento FrameLayout possui o id reservation_frame_layout
  • RecyclerView
    • O elemento RecyclerView está visível
    • O elemento LinearLayout é do tipo RecyclerView
    • O elemento LinearLayout é filho do elemento FrameLayout
    • O elemento RecyclerView possui o id reservation_frame_layout


8 - Desenvolva o layout do item e popule a lista com as informações provenientes da API

Você deverá criar o arquivo de layout para o item da lista, e as informações dessa lista virão das seguintes rotas da API:

  • GET /booking
  • GET /booking/:id

⚠️ A rota /booking é responsável por fornecer todos os IDs das reservas. Utilizando o ID, é necessário consultar a rota /booking/:id para obter as informações específicas. Ao lidar com essa lista, recomendo filtrar pelos cinco primeiros IDs ao buscar, evitando consultas extensas que podem resultar em timeouts e prejudicar o teste. ⚠️

️📱 Tela


👩‍💻 Regras de implementação

Onde desenvolver

  • O arquivo que você implementará o layout deve se chamar list_item_reservation.xml e deve estar dentro do diretório src/res/layout
  • Não esqueça de atribuir o layout do item à propriedade listitem no RecyclerView do arquivo fragment_reservation.xml

Estrutura da árvore de componentes da tela

App
└── MaterialCardView
    └── LinearLayout
        └── ImageView
        └── LinearLayout
            └── TextView
            └── TextView
            └── LinearLayout
                └── TextView
                └── TextView
            └── LinearLayout
                └── TextView
                └── TextView
            └── TextView
            └── TextView
            └── LinearLayout
                └── TextView
                └── TextView

Regras de negócio

MaterialCardView

  • Configuração
    • Deve ter o id card_view_item_reservation
    • Deve ser o elemento root do layout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • O item não pode ser clicável
    • Uma margem definida com 16dp
    • Orientação deve ser vertical

LinearLayout

  • Configuração
    • Deve ser filho do elemento MaterialCardView
  • Layout
    • Largura e Altura devem ser a mesma do elemento pai
    • O item não pode ser clicável
    • Deve possuir um espaçamento de 16dp
    • Orientação deve ser horizontal

ImageView

  • Configuração
    • Deve ter o id depositpaid_item_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura e Altura devem ser definidas em 50dp
    • Deve possuir uma margem final de 16dp
  • Atributos
    • A imagem padrão deve ser ic_depositpaid_false

LinearLayout

  • Configuração
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Orientação deve ser Vertical

TextView

  • Configuração
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura e Altura devem envolver o conteúdo
    • Aparencia do texto deve ser TitleMedium
  • Atributos
    • O texto padrão deve ser Nome do Hóspede

TextView

  • Configuração
    • Deve ter o id name_item_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura e Altura devem envolver o conteúdo
    • Aparencia do texto deve ser BodyMedium
    • Margim de baixo com 10dp

LinearLayout

  • Configuração
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Orientação deve ser horizontal

TextView

  • Configuração
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Deve possuir um peso de 1
    • Aparencia do texto deve ser TitleMedium
  • Atributos
    • O texto padrão deve ser Checkin

TextView

  • Configuração
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Deve possuir um peso de 1
    • Aparencia do texto deve ser TitleMedium
  • Atributos
    • O texto padrão deve ser Checkin

LinearLayout

  • Configuração
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior de 10dp
    • Orientação deve ser horizontal

TextView

  • Configuração
    • Deve ter o id checkin_item_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Deve possuir um peso de 1
    • Aparencia do texto deve ser BodyMedium

TextView

  • Configuração
    • Deve ter o id checkout_item_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Deve possuir um peso de 1
    • Aparencia do texto deve ser BodyMedium

TextView

  • Configuração
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura e Altura devem envolver o conteúdo
    • Aparencia do texto deve ser TitleMedium
  • Atributos
    • O texto padrão deve ser Informações Adicionais

TextView

  • Configuração
    • Deve ter o id additional_needs_item_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura e Altura devem envolver o conteúdo
    • Margem inferior de 10dp
    • Aparencia do texto deve ser BodyMedium

LinearLayout

  • Configuração
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura e Altura devem envolver o conteúdo
    • Posicionamento do layout como end
    • Orientação deve ser horizontal

TextView

  • Configuração
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura e Altura devem envolver o conteúdo
    • Aparencia do texto deve ser TitleMedium
  • Atributos
    • O texto padrão deve ser R$

TextView

  • Configuração
    • Deve ter o id total_price_item_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura e Altura devem envolver o conteúdo
    • Aparencia do texto deve ser TitleMedium

O que será testado?

  • Ao clicar no menu Reservas, o fragmento de reservas será carregado
  • RecyclerView
    • O elemento RecyclerView está visível
    • O elemento RecyclerView possui o id reservation_frame_layout
  • MaterialCardView
    • O elemento MaterialCardView está visível
    • O elemento MaterialCardView possui o id card_view_item_reservation
  • ImageView
    • O elemento ImageView está visível
    • O elemento ImageView possui o id depositpaid_item_reservation
  • TextView
    • O elemento TextView está visível
    • O elemento TextView possui o id name_item_reservation
  • TextView
    • O elemento TextView está visível
    • O elemento TextView possui o id checkin_item_reservation
  • TextView
    • O elemento TextView está visível
    • O elemento TextView possui o id checkout_item_reservation
  • TextView
    • O elemento TextView está visível
    • O elemento TextView possui o id additional_needs_item_reservation
  • TextView
    • O elemento TextView está visível
    • O elemento TextView possui o id total_price_item_reservation


9 - Desenvolva o layout da tela Criar uma Reserva

Você deverá implementar o layout da tela de criação de reserva. Esse layout está construído com um contêiner principal, um ScrollView, e os demais componentes como filhos deste.

️📱 Tela


👩‍💻 Regras de implementação

Onde desenvolver

  • O arquivo que você implementará o layout deve se chamar fragment_create_reservation.xml e deve estar dentro do diretório src/res/layout

Estrutura da árvore de componentes da tela

App
└── ScrollView
    └── LinearLayout
        └── MaterialTextView
        └── TextInputLayout
            └── TextInputEditText
        └── TextInputLayout
            └── TextInputEditText
        └── TextInputLayout
            └── TextInputEditText
        └── TextInputLayout
            └── TextInputEditText
        └── TextInputLayout
            └── TextInputEditText
        └── TextInputLayout
            └── TextInputEditText
        └── CheckBox
        └── MaterialButton

Regras de negócio

ScrollView

  • Configuração
    • Deve ter o id create_reservation_scroll_view
    • Deve ser o elemento root do layout
  • Layout
    • Largura e Altura devem ser a mesma do elemento pai
    • Barra de rolagem deve estar oculta

LinearLayout

  • Configuração
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem definida em 16dp
    • Orientação deve ser Vertical

MaterialTextView

  • Configuração
    • Deve ter o id title_create_reservationd
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior de 20dp
    • Aparencia do texto deve ser TitleLarge
    • O texto deve ser alinhado ao centro
  • Atributos
    • O texto padrão deve ser Criar Reserva

TextInputLayout

  • Configuração
    • Deve ter o id first_name_create_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior de 20dp
  • Atributos
    • O label do input deve ser Nome do hóspede

TextInputEditText

  • Configuração
    • Deve ser filho do elemento TextInputLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo

TextInputLayout

  • Configuração
    • Deve ter o id last_name_create_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior de 20dp
  • Atributos
    • O label do input deve ser Sobrenome do hóspede

TextInputEditText

  • Configuração
    • Deve ser filho do elemento TextInputLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo

TextInputLayout

  • Configuração
    • Deve ter o id checkin_create_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior de 20dp
    • O icone do inicio deve ser ic_calendar
  • Atributos
    • O label do input deve ser Checkin

TextInputEditText

  • Configuração
    • Deve ser filho do elemento TextInputLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo

TextInputLayout

  • Configuração
    • Deve ter o id checkout_create_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior de 20dp
    • O icone do inicio deve ser ic_calendar
  • Atributos
    • O label do input deve ser Checkout

TextInputEditText

  • Configuração
    • Deve ser filho do elemento TextInputLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo

TextInputLayout

  • Configuração
    • Deve ter o id additional_needs_create_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior de 20dp
  • Atributos
    • O label do input deve ser Necessidades adicionais

TextInputEditText

  • Configuração
    • Deve ser filho do elemento TextInputLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Gravidade do layout ao início
    • Gravidade no topo e no início
    • Maximo de linhas 3
    • Tipo do input textMultiline

TextInputLayout

  • Configuração
    • Deve ter o id total_price_create_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • O icone do inicio deve ser ic_money
    • Margem inferior de 20dp
  • Atributos
    • O label do input deve ser Preço total

TextInputEditText

  • Configuração
    • Deve ser filho do elemento TextInputLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo

CheckBox

  • Configuração
    • Deve ter o id depositpaid_create_reservation
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior de 20dp
  • Atributos
    • O texto deve ser Depósito Pago

MaterialButton

  • Configuração
    • Deve ter o id create_reservation_button
    • Deve ser filho do elemento LinearLayout
  • Layout
    • Largura deve ser a mesma do elemento pai
    • Altura deve envolver o conteúdo
    • Margem inferior de 20dp
  • Atributos
    • O texto deve ser Criar Reserva

O que será testado?

  • Ao clicar no menu Criar Reserva, o fragmento de reservas será carregado
  • ScrollView
    • O elemento ScrollView está visível
    • O elemento ScrollView possui o id create_reservation_scroll_view
  • MaterialTextView
    • O elemento MaterialTextView está visível
    • O elemento MaterialTextView é do tipo MaterialTextView
    • O elemento MaterialTextView possui o id title_create_reservation
  • TextInputLayout
    • O elemento TextInputLayout está visível
    • O elemento TextInputLayout é do tipo TextInputLayout
    • O elemento TextInputLayout possui o id first_name_create_reservation
  • TextInputLayout
    • O elemento TextInputLayout está visível
    • O elemento TextInputLayout é do tipo TextInputLayout
    • O elemento TextInputLayout possui o id last_name_create_reservation
  • TextInputLayout
    • O elemento TextInputLayout está visível
    • O elemento TextInputLayout é do tipo TextInputLayout
    • O elemento TextInputLayout possui o id checkin_create_reservation
  • TextInputLayout
    • O elemento TextInputLayout está visível
    • O elemento TextInputLayout é do tipo TextInputLayout
    • O elemento TextInputLayout possui o id checkout_create_reservation
  • TextInputLayout
    • O elemento TextInputLayout está visível
    • O elemento TextInputLayout é do tipo TextInputLayout
    • O elemento TextInputLayout possui o id additional_needs_create_reservation
  • TextInputLayout
    • O elemento TextInputLayout está visível
    • O elemento TextInputLayout é do tipo TextInputLayout
    • O elemento TextInputLayout possui o id total_price_create_reservation
  • CheckBox
    • O elemento CheckBox está visível
    • O elemento CheckBox é do tipo CheckBox
    • O elemento CheckBox possui o id depositpaid_create_reservation
  • MaterialButton
    • O elemento MaterialButton está visível
    • O elemento MaterialButton é do tipo MaterialButton
    • O elemento MaterialButton possui o id create_reservation_button


10 - Implemente a validação da tela de Criar Reserva

As pessoas podem inserir qualquer valor nos campos. Considerando isso, vamos implementar a validação no aplicativo! Se algum dos campso estiverem vazio, será exibida uma mensagem de erro.

️📱 Tela


👩‍💻 Regras de implementação

Regras de negócio

  • Se o campo de Nome do hóspede estiver vazio, ele deve exibir a mensagem de erro com o texto O campo Nome é obrigatório
  • Se o campo de Sobrenome estiver vazio, ele deve exibir a mensagem de erro com o texto O campo Sobrenome é obrigatório
  • Se o campo de Checkin estiver vazio, ele deve exibir a mensagem de erro com o texto O campo Checkin é obrigatório
  • Se o campo de Checkout estiver vazio, ele deve exibir a mensagem de erro com o texto O campo Checkout é obrigatório
  • Se o campo de Necessidades Adicionais estiver vazio, ele deve exibir a mensagem de erro com o texto O campo Necessidades Adicionais é obrigatório
  • Se o campo de Preço Total estiver vazio, ele deve exibir a mensagem de erro com o texto O campo Preço Total é obrigatório
  • A validação será realizada após o clique no botão Criar Reserva.

O que será testado?

  • Que ao clicar no menu Criar Reserva, o fragmento será carregado
  • Que os campos de Nome, Sobrenome, Checkin, Checkout, Necessidades Adicionais e Preço Total são deixados em branco, eles devem exibir suas respectivas mensagens de erro


11 - Realizar requisição ao endpoint POST /booking usando Retrofit

Você deve criar uma requisição à API na rota POST /booking, enviando as informações inseridas na tela de criação de reserva

👩‍💻 Regras de implementação

Onde desenvolver

O objetivo deste requisito é implementar ou criar uma interface para realizar requisições à API, utilizando-a em conjunto com o Retrofit.

Para que este requisito funcione corretamente, você precisará usar a classe ApildlingResource dentro de todas as suas Coroutines, como no exemplo a seguir:

CoroutineScope(Main).launch {
    try {
        // ADICIONAR ESSA LINHA
        ApiIdlingResource.increment()

        //...
        // Seu Codigo das Rotinas
        // ...

        // ADICIONAR ESSA LINHA
        ApiIdlingResource.decrement()
    } catch (e: HttpException) {
        // ADICIONAR ESSA LINHA
        ApiIdlingResource.decrement()

        //...
        // Seu Codigo de erro de HttpException
        // ...
    } catch (e: IOException) {
        // ADICIONAR ESSA LINHA
        ApiIdlingResource.decrement()

        //...
        // Seu Codigo de erro de IOException
        // ...
    }
}

O que será testado?

  • Ao clicar no menu Criar Reserva, o fragmento será carregado
  • Será digitado no campo nome o texto Italo
  • Será digitado no campo sobrenome o texto Moura
  • Será digitado no campo checkin o texto 10/11/2023
  • Será digitado no campo checkout o texto 19/11/2023
  • Será digitado no campo necessidades adicionais o texto Central de ar
  • Será digitado no campo preço total o texto 223
  • A requisição será realizada ao clicar no botão Criar Reserva
  • Após uma requisição bem-sucedida, a mensagem Reserva feita com sucesso! aparecerá na tela


🗣 Nos dê feedbacks sobre o projeto!

Ao finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!

Formulário de avaliação do projeto


🗂 Compartilhe seu portfólio!

Você sabia que o LinkedIn é a principal rede social profissional e compartilhar o seu aprendizado lá é muito importante para quem deseja construir uma carreira de sucesso? Compartilhe esse projeto no seu LinkedIn, marque o perfil da Trybe (@trybe) e mostre para a sua rede toda a sua evolução.

About

Aplicativo Android para criar e exibir as reservas feitas pelos hóspedes, utilizando os dados da API restful-booker. Este aplicativo inclui o layout, a validação de estados dos componentes e o código de consumo de uma API Rest com Retrofit, seguindo a arquitetura MVVM.

Topics

android kotlin api retrofit mvvm android-application api-rest android-studio android-app mvvm-architecture mvvm-android

Resources

Readme
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages