Nesta seção estão descritos os artefatos e estruturas de dados criados para atender aos requisitos previstos nas Especificações do Projeto, bem como as instruções para acesso e verificação da implementação. As tecnologias utilizadas se baseiam nas linguagens HTML, CSS e JavaScript.
- RF-001 Permitir que o usuário cadastre um animal para adoção
- RF-002 Permitir que o usuário cadastre um animal perdido
Para atender aos requisitos RF-001 e RF-002 foi desenvolvido os formulários de preenchimentos para os cadastros dos pets, os formulários são acessados através dos botões diponibilizados nas paginas Pets perdidos /lost-pets/ ou adoção /adoption-pets/ .
- RF-003 Permitir que o usuário marque o animal como "encontrado"
- RF-004 Permitir que o usuário marque o animal como "adotado"
Para atender aos requisitos RF-003 e RF-004 foi desenvolvido o botão INFORMAR ADOÇÃO (fig. 01) para os animais de adoção e INFORMAR DEVOLUÇÃO (fig. 02) para os animais perdidos, ao clicar no botão será exibido um modal de confirmação (fig. 03), solicitando o e-mail para validar a marcação do pet (fig. 04). Os animais encontrados e adotados com a marcação, automaticamente alimentaram o carrossel na home page (fig. 05).
Fig.01
Fig.02
Fig.03
Fig.04
Fig.05
- RF-005 Disponibilizar funcionalidade que permita pesquisar animais com filtro personalizado
Para atender ao requisito RF-005 foi desenvolvido o filtro de pesquisa de acordo com o tipo do animal. O filtro está disponível nas galerias /lost-pets/lost-gallery.html e /adoption-pets/adoption-gallery.html.
- RF-006 Disponibilizar funcionalidade que permita pesquisar ONG cadastradas
- RF-007 Disponibilizar sessão com dados para doações às ONGs
A seções relacionadas às ONGs será disponibilizada na versão 2.0 da aplicação.
Foi desenvolvido uma barra de navegação do tipo nav-link horizontal que contém botões relacionados as páginas da aplicação.
Além da barra de navegação, foi criado na Homepage os Banners relacionados aos tipos de buscas ou cadastrados que direciona o usuário ao destino desejado ao clicar no botão Saiba mais.
Ao clicar nos botões Saiba mais, o usuário são direcionados para as páginas abaixo:
Nas páginas dos Pets perdidos e Adoções, foi desenvolvido um botão que direciona o usuário para a galeria que contém todos os pets cadastrados nas suas respectivas seções /lost-pets/lost-gallery.html ou /adoption-pets/adoption-gallery.html:
Logo abaixo do botão Ver galeria foi implementado através da api OpenStreetMap um map com os pins relacionados aos pets catradastados.
Ao clicar em um dos pet casdastrado será exibido a página abaixo relacionado ao pet escolhido, o usuário terá acesso a todas as informações do animal e do tutor.
essa página conta com botões de:
ENCONTREI , SOU DONO E QUERO ADOTAR esses botões direciona o usuário para a tela de contato, que envia um e-mail ao tutor através da API Formspree.
Além desses botões a página possui outros dois botões:
Ao clicar no botão CONTATO o usuário será direcionado para a página de contato da PetSearch:
Clicando no botão ALGUM PROBLEMA, o usuário será direcionado para um formulário de preenchimento, onde ele poderá descrever o problema encontrado:
No final da página encontra-se um mapa com a geolocalização do pet:
A estrutura de dados utilizada é JSON, conforme exemplo a seguir:
"adoption-pets":[
{
"name": "Acerola",
"species": "felino",
"race": "Siamês",
"color": "Laranja",
"foundDate": "2022-05-28",
"observations": "Encontrado na rua, já está vacinado e vermifugado",
"tutorName": "João da Silva",
"tutorPhone": "2899999999",
"tutorEmail": "[email protected]",
"tutorObservations": "Interessados favor entrar em contato",
"cep": "30140-100",
"street": "Rua Cláudio Manoel",
"neighborhood": "Funcionários",
"city": "Belo Horizonte",
"state": "MG",
"imageUrl": "https://i.imgur.com/jF7Az6I.jpg",
"id": 3,
"adopted": false
}
]