/webapp11

Primary LanguageCSSApache License 2.0Apache-2.0

PETSHELTER

It’s a web application on animal adoption. Animal shelters and dog pounds can upload their animals data for users to adopt them, and in conclussion for letting users see elegible pets for adoption.

Demo Video

Members of group

NAME UNIVERSITY MAIL GITHUB ACCOUNT
Arshia Ambar Saleem aa.saleem.2017@alumnos.urjc.es ArshiaSaleem98
Borja Castro Cruces b.castro.2018@alumnos.urjc.es borja123456
Marina Fernández Suárez m.fernandezsu@alumnos.urjc.es IhoFenixMFS
Rodrigo Cadena Rodríguez r.cadenar.2019@alumnos.urjc.es CadenaR

Used Tools

Trello

Link to our board.

Entities:

User:

Registered users can request the adoption of any animal that the search shows them. In addition, they can upload images to their profiles.

  • Attributes:
    • Photo.
    • Name.
    • DNI.
    • Adress.
    • House size (Big/Medium/Little).
    • Garden (No/Little/Medium/Big).
    • Children number.
    • People living in the house.
    • E-mail.
    • Password.
    • Galery.

Animals:

The available animals list would be visible, here will appear an image of the animal, his/her name, the age, the owner and if it has been already adopted or not.

  • Attributes:
    • Photo.
    • Name.
    • Age.
    • Animal type (Dog/Cat/Bird/Reptile/Equine).
    • Size (XL/Big/Medium/Little).
    • Description.
    • Owner.
    • Status (Adopted or not).

Shelter:

The shelter can upload animals for them to get adopted, and accept or deny user adoption requests.

  • Attributes:
    • Name.
    • NIF.
    • E-mail.
    • Password.
    • Average Rating.
    • Description.
    • Address.
    • Animal list.
    • Adoption Requests Received (Animal/User).

Adoptions:

In order to have a register of the adoptions made by the users an adption table is needed.

  • Attributes:
    • Date.
    • Animal ID.
    • User ID.

Users permissions:

Anonimous

Anonymously or through any user type it is possible to access Home, the animal list Animals and the animal profile, the shelter or users profile, and Contact Us.

User

This user type can request adoptions, edit his/her profile data, and upload images to his/her gallery.

Shelter

This user type can edit its profile data, accept or deny its adoption requests, and upload new animals to the platform.

Images:

Registered users and animals have their profile image which can be edited and updated by them or their shelter in case that is an animal profile. In addition, users have an image gallery associated in which they can upload all the pictures they want.

Graphs:

The adoption statistics are going to be shown through a diagram in the graph view.

Complementary Technology:

When a user requests an adoption, an e-mail will be sent to the proprietary shelter.

Advanced Query or Algorithm:

The shown animal list will filter available animals and change depending on the house size of the user navigating through the web. For example, a big dog wouldn’t appear in the list of a small house owner.

Screenshots

This is the initial page, wher all users are going to be address when opening our web App, it has a header and footer that is shared with all the other pages and also the graph with adoption statistics is going to be shown.

This page is going to show all the images of the animals that have been registered over time.

In this page the user is going to see the profile of the animal that he wants to adopt.

This page is going to show user's profile.

This is where users can log in.

This page is to be shown when an error occurs.

This page is for registering a new animal to adopt.

This image shows how the request is going to look.

This page is to register a new user.

This page is to register a new shelter.

This is the page is for the users of the Web App to get in contact with us.

Navigation Diagram

This diagram shows how the navigation in our aplication is intended to be.

This diagram shows the differents templates, controller and services used in the web server

Entity Diagram

This diagram shows entities with thier fields and relationship of them with Database.

PARTICIPATION PHASE 2

Borja Castro Cruces

  • Custom Error Page and CustomError Controller
  • Algorithm for search by userSizeHouse and userGarden and match with the best animal for him
  • ModelAttributeController
  • Class and Template Diagrams

Arshia Ambar Saleem

  • Add Animals to adopt
  • Show Animal into animal page
  • Pagination
  • Graph
  • Entity Diagram
  • Filter Animal (search by type, search by name)

Marina Fernandez

  • Adoption finished implementation
  • Animal Carusel implemented and animal profile revision
  • User Profile finished with gallery implemented
  • Mailing implementation
  • Entity relations implemented

Rodrigo Cadena

  • User creation
  • CSRF implementation
  • Security BCrypt configuration
  • https on port 8443
  • Session scope component to save logged user/shelter

PHASE 3

Developing the API REST and Dockerization of the application More detailed information

PARTICIPATION PHASE 3

Arshia Ambar Saleem

I have contributed in creating Api rest url to get and post animal, user's profile and user's gallery images.Moreover, i have done Api Rest for Pagination and contributed in creating user's gallery service .

Commits:

Files:

Borja Castro Cruces

I create the instructions to use docker(creatin the DockerFile of the application) and modify the applications properties to use docker easy. I have done the classes diagram of the current proyect.

Commits:

Files:

Marina Fernandez

I mainly initialized the workflow again for the API creating the templates for the team, I did collaborate with the services and controllers for the API REST and dockerized the application.

Commits:

Files:

Rodrigo Cadena

I have participated in the completion of the rest controllers, created services that share similar functions and the security configuration for the API requests.

Commits:

Files:

Classes diagram

This diagram shows the differents templates, controller and services used in the web server

PHASE 4

Implementation of Web Application with Angular.

Environment Requirement

  • Install Angular Cli
    npm install -g @angular/cli
  • Install dependencies for the proyect in the root of the proyect ( We need at least 124 Mb in the hard disk) npm install
  • Start the server

npm start

PARTICIPATION PHASE 4:

Arshia Ambar Saleem

Description:

I have worked on creating animals and show their information, along with i have also done filter search where a user can search animals by their names or by their type .I have done the task of creating gallery for user and show user's detail with gallery.Moreover, i have created paging on both animal's and user's gallery page.

Commits:

Files:

Borja Castro Cruces:

Description:

I have create the contact component for sending email for different issues found and I have created a live bar graph for the las 6 month adoptions. I have done the SPA diagram with the connections within componets, services , templates and models.

Files:

Commits:

Marina Fernandez Suárez:

Description:

I have reorganized the project structure and adopted the angular routing to the structure style.I was in charge of formulary adaptation to angular and to make validations for each field. I have implemented the adoptions and requests systems to make shelters able to acceept and deny them.Finally i was in charge of publication and updating docker with angular assets.

Files:

Commits:

Rodrigo Cadena:

Description:

I have participated in the project initialization, creation of models, creation of web users, shelters and animals, configured the authorization's component and service.

Commits:

Files:

SPA DIAGRAM