petjournal / petjournal.web

Pet Journal

Aplicação web que te ajuda a cuidar do seu PET

⚙️ Como usar

0. Faça o download deste repositório através do botão verde Code no topo da página e, em seguida, clicando em Download ZIP. Ou, se preferir, através do terminal (Git Bash, Powershell, etc.), use o comando:

git clone https://github.com/PetJournal/petjournal.web.git

1. Acesse a pasta do projeto através do terminal

2. Instale as dependências do projeto com o comando:

yarn

3. Acesse a branch de desenvolvimento com o comando:

git checkout develop

4. Rode a aplicação com o comando:

yarn dev

5. Acesse as rotas disponíveis seguindo a estrutura localhost:3000/<rota>

   Rotas disponíveis:

   • Home - localhost:3000
   • Register - localhost:3000/register
   • Login - localhost:3000/login
   • Change Password - localhost:3000/change-password
   • Forgot Password - localhost:3000/forgot-password
   • Pet Register - localhost:3000/pet-register
   • Species - localhost:3000/pet-register/species

petjournal.web's Issues

Tela Padrão Espécies

Definição:

Como usuário da Pet Journal, gostaria de poder escolher a espécie do meu pet no fluxo de cadastro, para que eu possa personalizar o perfil do meu pet e receber informações mais personalizadas pela Pet Journal.

Descrição:

Nessa tela o objetivo é que o usuário selecione a espécie do seu pet e prossiga com o cadastro do pet.

Tela Anterior: 
Usuários com Pet cadastrado: Meus Pets (Botão "Adicionar Pet") - Tela Não desenvolvida ainda
Usuários sem Pet Cadastrado: Tela Padrão Inicial (Botão "Continuar") 

Tela Posterior: Nome e Gênero

Protótipo:

Critérios de Aceite:

• Quando o usuário estiver na tela de Espécies, deverá aparecer a mensagem:

“Olá (1º Nome do usuário), gostaríamos de saber qual a espécie do seu Pet:”

• Na mensagem, o Nome do Usuário é variável, e deve ser preenchido conforme respondido pelo usuário da página de cadastro, no campo "Nome".

• Na tela de Espécies, deverá haver 7 opções selecionáveis para o usuário escolher entre as diferentes opções: Cachorro, Pássaro, Gato, Peixe, Réptil, Roedor e Outros... .

• As opções de espécie devem conter o nome da espécie e uma imagem que represente a espécie.

• As opções de espécie devem ficar desabilitadas até que o usuário selecione uma.

• Quando o usuário clilcar em "Outros...", deverá aparecer um campo digitável para o usuário digitar qual é a espécie do seu pet.

• O usuário só poderá escolher uma opção entre as espécies.

• Se o usuário selecionar uma segunda opção entre as espécies, a primeira seleção deverá ser desabilitada.

• O usuário não pode escolher uma das opções de espécie e "Outros...".

• Se o usuário selecionar uma das espécies, e clilcar em "Outros...", automaticamente, a espécie selecionada anteriormente é desabilitada.

• A seleção de qualquer espécie ou o preenchimento da informação em "Outros" é obrigatória para seguir o fluxo de cadastro.

• Se o usuário selecionar uma das éspecies, o botão "Continuar" deverá ser habilitado.

• Se o usuário não escolher entre uma das opções de espécie, mas digitar a éspecie do seu pet no campo digitável, o botão "Continuar" deverá ser habilitado.

• O campo digitável de "Outros.." , não pode conter menos de 3 caracteres.

• O campo digitável de "Outros.." não pode conter números e nem caracteres especiais.

• Quando usuário clicar em “Continuar”, deverá ser levado para a página Nome e Gênero

• Deverá conter um botão de "voltar" sempre habilitado, para que o usuário retorne para a página Inicial de Cadastro de Pet.

Associações:

• Tela Inicial Cadastro de Pet .

• Nome e Gênero

Aguardando Código

Definição:

Como usuário, quero poder digitar o código de verificação para recuperar minha senha.

Descrição:

Nessa tela o objetivo é que o usuário consiga recuperar a senha caso ele tenha perdido ou esquecido. E para isso ele deverá passar por três processos: enviar o código de recuperação para o email ou telefone, digitar o código recebido e criar uma senha nova. Se esses três passos forem feitos, o usuário poderá ter acesso ao aplicativo novamente.

Protótipo Figma - Aguardando Código

Critérios de Aceite:

O código de verificação deve conter 6 dígitos numéricos.

Quando` o usuário digitar o código de verificação corretamente o botão “Enviar” deverá ser habilitado, ao clicar no botão o mesmo deve ser redirecionado para tela onde poderá criar a nova senha.

Caso o usuário selecione a opção “reenviar código", ele será redirecionado para tela onde é possível adicionar o emailpara receber o novo código de verificação.

Se o sistema, após o clique em “Enviar” verificar que o código de verificação esteja incorreto, uma mensagem de aviso deve ser apresentada na tela:

“O código de verificação que você inseriu não é válido. Verifique o código e tente novamente”.

Se o sistema, após o clique em “Enviar” verificar que o código de verificação esteja correto, o usuário deverá ser redirecionado para tela “Troque a Senha”.

Associações:

Troque a Senha

Esqueceu a Senha

Definição:

Como usuário, quero receber o código no meu email para conseguir recuperar a minha senha.

Descrição:

Nessas telas o objetivo é que o usuário consiga recuperar a senha caso ele tenha perdido ou esquecido. E para isso ele deverá passar por três processos: enviar o código de recuperação para o email ou telefone, digitar o código recebido e criar uma senha nova. Se esses três passos forem feitos, o usuário poderá ter acesso ao aplicativo novamente.

Protótipo Figma

Critérios de Aceite:

O campo email deverá ser obrigatório, válido para email (estrutura de um e-mail com user@dominio) e deverá estar cadastrado no banco de dados.

Se o sistema, após o clique Enviar que o "email" está incorreto, então deverá apresentar uma mensagem:

"Não foi possível encontrar seu email"

Se o sistema, após o clique Enviar que o email está correto, ele deverá receber um código de verificação no e-mail associado à sua conta.

Assunto: Nome da pessoa, aqui está seu código
Mensagem:
Olá, Nome da pessoa. 
Recebemos uma solicitação para redefinir a senha de sua conta PetJournal.
XXXXXX
Insira este código para concluir a redefinição.
Obrigado por nos ajudar a manter sua conta segura.
Equipe PetJournal

Quando o usuário disponibilizar o email o botão “Enviar” deverá ser habilitado, ao clicar no botão o mesmo deve ser redirecionado para tela onde poderá digitar o código de verificação.

Associações:

Aguardando Código

Criação de Telas Para Raças de Pet (Fluxo Espécies)

USER STORY TELAS RAÇAS DE PET - FLUXO ÉSPECIES NORMAL (CÃO, GATO, ROEDOR, PEIXE, RÉPTIL)

Definição:

Como usuário da PerJournal, desejo cadastrar a raça do meu pet, para que eu possa manter o registro completo das informações importantes do meu pet, e receber informações mais personalizadas pela PetJournal.

Descrição:

Nessas telas o objetivo é que o usuário consiga cadastrar a raça de seu pet pertinente a espécie selecionada na tela de espécies.

A utilização de um banco de dados para fornecermos as opções de raças ao usuário evitará erros de digitação e a geração de informações duplicadas em nosso banco de dados, nos ajudando depois a copilar esses dados para entendermos o nosso usuário.

• Para selecionar a raça de seu pet, o usuário seguirá um fluxo com 2 opções:

1ª) Buscar e selecionar a raça em nossa listagem de raças.

2ª) Caso o usuário não encontre a raça em nosso banco de dados, deverá ter a opção “Outros”, para o usuário digitar a nova raça, no campo de texto.

Tela Anterior: Nome e Gênero

Tela Posterior:
Fluxo de Espécies Cachorro e Gato: Porte com Peso
Fluxo de Espécies Pássaro, Réptil, Roedor, Peixe e Outros: Nascimento.

Protótipo:

Protótipo não finalizado ainda! Aguardando refinamento do time de UX/UI

Critérios de Aceite:

● Quando o usuário estiver na tela de Raças, deverá aparecer a mensagem:
“Nos conte mais sobre Brutos! Qual a raça dele?.”

● Na mensagem, o Nome do Pet é variável e deve ser preenchido conforme respondido pelo usuário na página “Nome e Gênero”, no campo Nome

● Caso o usuário tenha colocado mais de um nome no campo Nome da página “Nome e Gênero”, deverá ser puxado o Nome completo do pet para a mensagem.

● Na mensagem, a contração “dele” é variável, e deve ser preenchida conforme respondido pelo usuário na página “Nome e Gênero”, caso usuário tenha respondido fêmea, a contração usada deverá ser “dela”, caso o usuário tenha respondido macho, a contração usada no texto deverá ser “dele”.

● Abaixo da mensagem deverá aparecer um campo de busca com a listagem de raças relacionadas à espécie selecionada na página “Espécies”. Ou seja, se o usuário selecionou “Cachorro” na tela “Espécies”, deverá aparecer somente raças de cachorro, se o usuário selecionou “Gato” na tela “Espécies”, deverá aparecer somente raças de gato para o usuário....

● O usuário deverá ver a listagem de raças por ordem alfabética

● O usuário deve ter a opção de digitar (campo de texto) para filtrar pela raça de seu pet dentro da listagem de raças

● Deverá ter opção de “Outros” em todos os bancos de dados de raças.

● A opção “Outros” sempre deverá ser a última informação na listagem de todas as raças

● Caso o usuário selecione Outros na listagem de raças, deverá aparecer um campo de texto para o usuário digitar a raça de seu pet.

● O campo de texto “Outros”, não pode conter números, nem caracteres especiais

● O campo de texto “Outros”, não pode conter menos de 3 caracteres.

● O usuário só pode selecionar uma raça dentro da listagem de raças

● Se o usuário selecionar uma segunda raça, a primeira raça selecionada deverá ser desabilitada.

● Quando o usuário selecionar uma das raças na listagem de raças, o botão “Continuar”, deverá ser habilitado.

● Se o usuário não selecionar nenhuma raça no nosso banco de dados, mas digitar a raça no campo de texto “Outros”, o botão continuar deverá ser habilitado.

● O botão “Voltar” deverá estar sempre habilitado para o usuário retornar para a tela “Nome e Gênero”.

● Se a espécie do pet do usuário for cachorro, ao clicar no botão de “Continuar”, o usuário deverá ser levado para a tela “Porte com Peso - Cahorro”

● Se a espécie do pet do usuário for Gato, ao clicar no botão de “Continuar”, o usuário deverá ser levado para a tela “Porte com Peso - Gato”

● Se a espécie do pet do usuário for Pássaro, Réptil, Roedor, Peixe ou Outros, ao clicar no botão de “Continuar”, o usuário deverá ser levado para a tela “Nascimento”.

● Espécies
● Nome e Gênero
● Porte com Peso Cachorro
● Porte com Peso Gato

Tela Padrão Inicial

US. CADASTRO DE PET - PÁGINA PADRÃO INICIAL

Definição:
Como usuário, eu gostaria de cadastrar meu Pet na Plataforma da Pet Journal, para que eu consiga aproveitar melhor as funcionalidades disponíveis na plataforma.

Descrição:

O objetivo dessa tela é que o usuário que ainda não tenha pet cadastrado, consiga entrar no fluxo de cadastro de pet, para cadastrar seus animais de estimação e ter acesso às funcionalidades da plataforma.

Essa tela só faz parte do fluxo de cadastrado de pet, para usuários que não possuem pet cadastrado.

Tela Anterior: Ambiente do usuário/Home (Botão Pets) 
Tela Posterior: Espécies

Protótipo:

Critérios de Aceite:

● A página deverá conter a opção de retornar para a página home, através de uma seta disponibilizada no canto superior esquerdo da página.

• Quando o usuário estiver na tela “Cadastro de Pet”, deverá aparecer a seguinte mensagem personalizada:

Olá `(1º Nome do usuário)`, sabemos o quanto o seu pet é especial, e estamos muito animados em recebê-los.

Venha se juntar a nossa comunidade de amantes de pets, para melhor aproveitar a nossa plataforma.

● Na mensagem, o Nome do Usuário é variável, e deve ser preenchida conforme respondido pelo usuário da página de cadastro, no campo Nome.

● Deverá conter uma imagem representativa com várias espécies de pets abaixo do texto

● Abaixo da imagem deverá conter o botão de “continuar” habilitado

● Quando o usuário clicar no botão de “continuar”, deverá ser levado para a página de espécies

Associações:
● Cadastro de usuário

● Ambiente do Usuário

● Espécies

Troque sua Senha

Definição:

Como usuário, quero criar minha nova senha para poder ter acesso ao aplicativo.

Descrição:

Nessas telas o objetivo é que o usuário consiga recuperar a senha caso ele tenha perdido ou esquecido. E para isso ele deverá passar por três processos: enviar o código de recuperação para o email ou telefone, digitar o código recebido e criar uma senha nova.
Se esses três dois passos forem feitos, o usuário poderá ter acesso ao aplicativo novamente.

Obs: Fluxo de recuperação de senha foi alterado na US, após começo da Sprint. Para a primeira versão, não teremos mais a opção do usuário recuperar a senha através do SMS, somente recuperação de senha por e-mail.

Protótipo Figma - Troque sua Senha

Critérios de Aceite:

O campo Senha deve ser obrigatório e conter no mínimo 8 caracteres alfanuméricos e especiais e deverá aparecer a seguinte mensagem:

A senha deve ter pelo menos 8 caracteres. Para torná-la mais forte, use letras maiúsculas e minúsculas, números e símbolos como ! @ # $ % & * =

Se o sistema, após clicar em “Redefinir senha” verificar que senha não atinge os requisitos necessários, deverá aparecer a seguinte mensagem:

“ A senha informada não atende os requisitos necessários de 8 caracteres"

Quando o usuário estiver colocando a senhas e optar por não visualizar a senha, a mesma deverá ser apresentada através de “********”.

Quando o usuário estiver colocando a senha ele deverá ser capaz de visualizar a senha caso ele clique na opção “Mostrar” no campo “Senha”.

O campo “Confirmar Senha” deve ser igual ao campo “Senha”.

Se o sistema, após o clique em “Redefinir senha” verificar que as duas senhas não são idênticas, uma mensagem de aviso deve ser apresentada na tela:

“As senhas devem ser idênticas"

Se o sistema, após o clique em “Redefinir senha” verificar que as duas senhas são idênticas, uma mensagem “Redefinição de senha concluída com sucesso” deverá aparecer na tela e em seguida ser redirecionado para tela de login. US Login

Associações:

Login

Home - Ambiente do Usuário

U.S - CRIAÇÃO DA TELA HOME - AMBIENTE DO USUÁRIO

Definição:
Como usuário, quero ter acesso a uma tela inicial do aplicativo para que possa navegar pelas funcionalidades disponíveis.

Descrição:
Essa é a primeira tela que o usuário terá acesso, após executar o login.

Nessa tela o objetivo é que o usuário tenha acesso a algumas funcionalidades iniciais disponíveis na tela e que possa acessar outras funcionalidades através dos botões e menu disponíveis.

Protótipo:

Critérios de Aceite:

• Quando o usuário estiver na tela “Ambiente de usuário”, no canto superior esquerdo deverá aparecer a mensagem “Olá com o primeiro nome da pessoa cadastrada.

• Ao clicar no campo “Menu”(três barras, canto superior direito) uma tela lateral deverá abrir mostrando opções de configurações do aplicativo. – Funcionalidade inativa no momento.

• No primeiro quadrante da página deverá conter um carrossel, apresentando os principais recursos disponíveis para o usuário.

• O carrossel deve conter imagens e textos curtos, tornando a experiencia do usuário mais dinâmica.

• Cada imagem no carrossel deve ficar 4 segundos visíveis para o usuário, a imagem deve mudar no 5º segundo.

• O usuário deve conseguir interagir com o carrossel e mudar as imagens manualmente, se desejar.

• Ao clicar no campo “Ver mais” o usuário deverá ser redirecionado para tela onde terá acesso ao menu funcionalidades. – Funcionalidade inativa no momento.

• Ao clicar no campo “Agenda” o usuário deverá ser direcionado para agenda pet do aplicativo. – Funcionalidade inativa no momento.

• Ao clicar no campo “Localizar Serviços” o usuário deverá ser direcionado para tela onde poderá localizar serviços para o pet na região. – Funcionalidade inativa no momento.

• Ao clicar no campo “Registrar Vacina” o usuário deverá ser direcionado para tela onde poderá registrar as vacinas que o pet tomou. – Funcionalidade inativa no momento.

• Ao clicar no campo “Registrar Vermífugo" o usuário deverá ser direcionado para tela onde poderá registrar o vermífugo que o pet já tomou. – Funcionalidade inativa no momento.

• Ao clicar no botão “Home” o usuário deverá voltar para tela de “Ambiente do Usuário”.

• Caso o usuário não tenha cadastro de Pet, ao clicar no botão “Pets”, o usuário deverá ser levado para a tela inicial de cadastro de pet. – Funcionalidade inativa no momento.

• Caso o usuário já tenha pet cadastrado, ao clicar no botão “Pets”, o usuário deverá ser levado para a página Meus Pets, onde ele poderá visualizar, adicionar, editar e excluir informações dos pets cadastrados. – Funcionalidade inativa no momento.

• Ao clicar no botão “Tutor” o usuário deverá ser direcionado para tela onde ele poderá visualizar, adicionar, editar e excluir informações pessoais. – Funcionalidade inativa no momento.

• Associações:
• Meus Pets
• Agenda Pet
• Informações de Perfil
• Localizar Serviços
• Menu de Configurações
• Menu de funcionalidades
• Registro de Vacinas
• Registro de Vermífugo

Essa Issue se refere a disucussão iniciada no tópico #6 - que se encontra encerrada.

Login

PetJournal/petjournal.product#1

Criação de Telas Para Raças de Pet (Fluxo "Outras Espécies")

USER STORY TELAS RAÇAS DE PET - FLUXO “OUTRA ESPÉCIE”

Definição:

Como usuário da PerJournal, desejo cadastrar a raça do meu pet, para que eu possa manter o registro completo das informações importantes do meu pet, e receber informações mais personalizadas pela PetJournal.

Descrição:
Nessa tela o objetivo é que o usuário consiga cadastrar a raça de seu pet, nos casos em que o usuário selecionou “outra” espécie, na tela de “Espécies”.

Sendo assim, não teremos em nosso BD uma listagem das raças da espécie do usuário, por isso, o usuário deverá digitar manualmente a raça de seu pet no campo de texto.

Tela Anterior: Nome e Gênero

Tela Posterior: Nascimento.

Protótipo:

Protótipo não finalizado ainda! Aguardando refinamento do time de UX/UI

● Na tela “Raças P/ Espécie Outros”, deverá conter a mesma mensagem personalizada que contém na tela de “Raças”, e deve seguir as mesmas regras de negócio:

● Quando o usuário estiver na tela de Raças, deverá aparecer a mensagem:
“Nos conte mais sobre Brutos! Qual a raça dele?.”

● Na mensagem, o Nome do Pet é variável e deve ser preenchido conforme respondido pelo usuário na página “Nome e Gênero”, no campo Nome

● Caso o usuário tenha colocado mais de um nome no campo Nome da página “Nome e Gênero”, deverá ser puxado o Nome completo do pet para a mensagem.

● Na mensagem, a contração “dele” é variável, e deve ser preenchida conforme respondido pelo usuário na página “Nome e Gênero”, caso usuário tenha respondido fêmea, a contração usada deverá ser “dela”, caso o usuário tenha respondido macho, a contração usada no texto deverá ser “dele”.

● Abaixo da mensagem, deverá conter um campo de texto para o usuário digitar manualmente a raça de seu pet.

● O campo de raças não pode conter menos de 3 caracteres

● O campo de raças não pode conter números, nem caracteres especiais.

● O botão continuar deverá ser habilitado quando o usuário preencher o campo de texto.

● O botão “Voltar” deverá estar sempre habilitado para o usuário retornar para a tela “Nome e Gênero”.

Associações:

● Espécies
● Nome e Gênero

Esqueceu a Senha

PetJournal/petjournal.product#5

Tela Padrão Nome e Gênero

Definição:

Como usuário da Pet Journal, gostaria de poder cadastrar o nome e o sexo do meu pet no fluxo de cadastro, para que eu possa personalizar o perfil do meu pet e receber informações mais personalizadas pela Pet Journal.

Descrição:

Nessa tela o objetivo é que o usuário cadastre o nome e selecione o sexo do pet, para prosseguir com o cadastro do pet.

Tela Anterior: Espécies
Tela Posterior: Raça

Protótipo:

Tela Vazia, não Preenchida pelo Usuário:

Fluxo de Erro / Tela com dados inválidos:

Fluxo Ideal/Tela com dados válidos:

Critérios de Aceite:

● Quando o usuário estiver na tela de Nome e Sexo, deverá aparecer as seguintes mensagens:

"Uau! Ficamos muito felizes em receber mais um (espécie cadastrada pelo usuário na página de Espécies) em nossa comunidade! “

“Qual o nome do seu companheiro?”
• Na mensagem, a espécie é variável, e deve ser preenchida conforme respondido pelo usuário da página de espécie

● Abaixo da mensagem solicitando o nome do pet, deverá conter um campo de texto habilitado para o usuário digitar o nome do pet.

● O campo “Nome” é obrigatório

● O campo “Nome” não pode conter menos de 2 caracteres

● O campo “Nome” pode conter números

● O campo “Nome” não pode conter caracteres especiais

● Abaixo do campo de texto para preenchimento do nome do pet, deverá conter um aviso para usuário, indicando:
*Campo Obrigatório

● A validação do campo de texto é obrigatória, e caso o usuário não cumpra com algum dos requisitos citados acima no momento do preenchimento, deverá aparecer a seguinte mensagem de erro padrão:

** O nome fornecido deve conter pelo menos 2 caracteres, não pode conter caracteres especiais, nem números. Por favor, insira um nome válido.

● Quando o usuário preencher o nome do pet de forma correta no campo de texto, deverá aparecer um sinal de verificado no final do campo de texto.

● Abaixo do campo de texto “Nome” deverá conter a seguinte mensagem:
“Qual o sexo do seu pet?”

● Abaixo da mensagem “Qual o sexo do seu pet?”, deverá conter duas opções selecionáveis para o usuário escolher entre: Macho e Fêmea.

● A seleção do sexo é obrigatória no fluxo de cadastro

● Abaixo da opção de Macho, deverá conter um aviso para usuário, indicando:
``*Campo Obrigatório
`
● As duas opções devem ficar desabilitadas até que o usuário selecione uma delas

● O usuário só poderá selecionar uma das opções entre os sexos

● Se o usuário selecionar a opção “Macho”, e depois selecionar a a opção “Fêmea”, a opção “Macho” deverá ser desabilitada imediatamente

● O botão de “continuar” só é habilitado quando o usuário preencher o campo de texto "Nome"(respeitando os requisitidos de preenchimento) e escolher o sexo do pet.

● Quando o usuário clicar em “Continuar” deverá ser levado para a página de raças referente a espécie do seu pet

● Deverá conter um botão de “voltar” sempre habilitado, para que o usuário retorne para a página de Espécies

Associações:
● Espécies

● Raças

Cadastro do Usuário

PetJournal/petjournal.product#2