Skip to content

CodeURJC-DAW-2021-22/webapp5

BranchesTags

Repository files navigation

Demo Video: Click here!

Logo SoftWear

Softwear

Online clothing store web app. We sell our own products, made with the highest quality fabrics and cloths, as well as the best brands on the market. We promote reducing clothing waste, so everything on sale is guaranteed to last more than two years, thus fighting climate change.

Based on minimalistic design bringing user experience upfront.

We provide a catalog that can be filtered through different categories, allowing users to access all products intuitively with ease. Furthermore, users can save a wish list for future transactions. Once the shopping cart is done, a checkout may be fullfilled.

Members

Name Mail Github User
Pablo Pinillos Trigueros p.pinillos.2019@alumnos.urjc.es PabloPinillos
Adrián Sánchez Guirado a.sanchezgu.2019@alumnos.urjc.es a-sanchezgu-2019
Jorge Esteban Pérez j.esteban.2019@alumnos.urjc.es JEstebanPerez

Screens

index index

  • Index: landing page with products ordered by relevance. This filter can be changed to categories. A user can sign in or sign up from this screen. Clothes can be sent to the cart and wishing list from here.
    login
  • Login / register: where a user can create an account or log into it with a mail adress, a nickname and a password.


cart

  • Cart: list with products the user wants to buy. To end the transaction the user must be logged in.


wishlist

  • Wish list: list with products the user likes and can add to cart. They can be added from this list.


productView

  • Product view: where a single product is displayed and specific details are shown.


adminHome

  • Admin home: where admins can choose what to do (manage categories, manage users, manage products) and a sales graph is displayed.


manageUsers

  • Manage users: where an admin can ban a user, make a user admin or revoke admin privilege from a user.


manageProducts

  • Manage products: where an admin can create, modify and delete products.


manageCoupons

  • Manage coupons: where an admin can create, modify and delete products.


about

  • About: some information about us: the brand, our values and the webpage.


purchaseHistory

  • Purchase history: different purchases with the products information.


userProfile

  • User profile: account details of each user.


error

  • Error: shown when there is an error with loading page.


errorPayment

  • Error Payment: shown when there is some error with the product payment.


errorPass

  • Error Pass: shown when user wants to change the password and the new ones don´t match.


outOfStock

  • Out of stock: reports there is no stock of a product that the user is trying to buy.


successfulPayment

  • Successful Payment: landing message when the purchase is correctly done.

Entities

  • User: admin, registered and non registered.
  • Product
  • Coupon
  • Transaction

Property list of each entity:

User

  • rol: USER, ADMIN
  • name
  • lastName
  • eMail
  • password
  • address
  • phoneNumber
  • birthDay
  • transactionHistory
  • userid

Product

  • price
  • name
  • description
  • size
  • stock
  • brand
  • supplier
  • placeMade
  • manufacturingDate
  • productId

Coupon

  • code
  • type
  • startDate
  • dateOfExpiry
  • minimumForAplication
  • discount
  • affectedProducts
  • couponId

Transaction

  • type: WISHLIST, TRANSACTION, CART
  • userID
  • usedCoupons
  • Date
  • ProductList
  • transactionId

Belongings

  • Product:

    • Use: all
    • Owner: admin

  • Coupon

    • Use: registered
    • Owner: admin

  • Transaction

    • Use: registered
    • Owner: registered

Diagrams

*Phase 2 navitagion_diagram.jpeg entity_diagram class_diagram *Phase 3 class_diagram *Phase 4

component diagram

Algorithms

Our app tracks the least favorite products and calculates a discount for them based on their popularity ranking and a minimum price every product has.

Graphs

Our graph is a bar plot located at the admin panel and allows admins to track the volume of sales and their respective earnings.

Extra technologies

We've implemented a mail function that sends the user a mail when they make a purchase with the product summary, price and transaction number for posible incidence.

Tools

Link to our Trello: https://trello.com/b/7PcNfIHM/daw

Execution instructions

Installation: -Install PostgreSQL -Install pgAdmin4 (https://www.pgadmin.org/) and introduce a master password.

Versions:
-Java: 17
-Maven: 4
-SpringBoot: 2.6.3

Project compilation:

-In our github, download the project as a zip.
-Create a database named softwear.
-In the IDE, execute
	>cd backend
	>mvn spring-boot:run
then go to the browser and access https://localhost:8443/
-To stop the proccess, press Ctr+C, enter and "S".

Heroku

Url: https://codeurjc-daw-2021-22-webapp5.herokuapp.com/

User credentials:

  • admin:pass
  • user:pass

Heroku Deployment

In order to deploy the application with heroku, you must create a heroku account and install heroku and docker clients.

First, you need to log in and create a new application with the following commands:

heroku login
heroku create <app-id>

Then, you need to pull our application image from DockerHub for pushing it into the heroku repository:

docker image pull softwearDAW/codeurjc-daw-2021-22-webapp5

You need to log in heroku repository and push the downloaded application image into your application repository. You could do it with the following commands:

# Log in heroku repository
heroku container:login
# Change image name
docker image tag softweardaw/codeurjc-daw-2021-22-webapp5:latest registry.heroku.com/<app-id>/web:latest
# Push image
docker push registry.heroku.com/<app-id>/web

Then you need to configure the database. You can add the database to your heroku app running the following command:

heroku addons:create heroku-postgresql --app <app-id>

You need to set the environment variables running the following command:

heroku config:set \
	SERVER_SSL_ENABLED=false \
	SPRING_JPA_HIBERNATE_DDL-AUTO=update \
	MAILER_EMAIL=<mailer-email> \
	MAILER_PASS=<mailer-pass> \
	--app <app-id>

Finally, you could release the application running the following command:

heroku container:release web --app <app-id>

You could destroy the application running the following command:

heroku apps:destroy --app <app-id>

Docker

Application Execution - Docker Compose

You need to install the docker client and docker-compose. You would use the docker-compose.yml file in the docker directory.

You need to specify an email for your mail service. If you don't, the application's mail service will not work. You should specify it in a environment variable named MAILER_EMAIL.

You need to do the same in order to specify the service's password. It is set in the variable MAILER_PASS.

You could execute the following command in order to set those variables and run the application:

# If you have a docker-compose version previous to version 2, you should use the command docker-compose up

env MAILER_EMAIL=<your-mailer-email> MAILER_PASS=<your-mailer-pass> docker compose up

Build the image

In order to build the image with the executable file you sould change your wd to docker directory and execute:

./create_image.sh

You need to install docker in your system in order to execute this script. Also, you may need execute it as root.

Api REST documentation

Angular

Dependencies:

  • npm
  • angular

In order to execute and build the application with angular, you would need to install npm (Node Package Manager) on your system

Once installed, you could install angular client running the following command in frontend directory:

npm install -g @angular/cli

Now, you could install the application dependencies running:

npm install

Execution

You could execute the spa running:

ng serve --proxy-config src/app/proxy.config.json

NOTE: You might need to modify the file src/app/proxy.config.json

Building

You could build the SPA running the following command:

ng build --base-href="/new/"

NOTE: We use --base-href="/new/" in order to serve it from the same service than the old application. If you do not need it, you could skip this argument.

Participation

Phase 2

Adrián

I've been focused on transaction's block and coupon's block but I've been making changes and functions for nearly all classes.

Important Commits

Among others, the more outstanding commits are:

Those commits are develop versions of the files and they may have errors that have been fixed in other commits. For further information about it, you should check the version history of the file.

Important Files

Among others, the more outstanding files are:

Apart from those files, i've been working on a lot of the project files. For further information about them, you should check commits filtering by my user.

Mario and Ana

Mario and Ana have been working together at the same files. We have created Admin Home graphic with sellings data of database, created access to available sizes of each product, product entity creation and all its main classes to control, creation of example data of data base in databaseinitializer and readme documentation.

Important Commits

Among others, the more outstanding commits are:

Important Files

Among others, the more outstanding files are:

  • Chart.js
  • TransactionController.java
  • Product.java
  • ProductRepository.java
  • Databaseinitializer.java

Also other files of the project. For further information about them, you should check commits filtering by our users.

Jorge

I developed almost all things relationated with users, also i worked on doing the web pageable and on the security package but I helped on the develop of other classes and functionalities.

Important Commits

Maybe this commits dont show the final version of the files.

Important Files

I also worked on other files but the most time i spent working are on this files.

Pablo

I developed the managers for the entities in the admin side: manage users, manage products and manage coupons. They all had an HTML, js and AJAX in the frontside and backend related in AdminController and RestAdminController, as well as in the services and repositories they used. I also developed the about and error page and divided the HTMLs in header (or adminHeader), body and footer in separate files. I helped develop the Coupon entity. I coded the general algorithm to suggest coupons that looks at the least frequently bought products and suggest a coupon for them.

Important Commits
Important Files

Phase 3

Pablo

I developed the coupon and transaction REST controllers, as well as the needed methods in the controllers and respositories that were missing.

Important Commits
Important Files

Jorge

I worked on the user REST controller, also deployed the security jwt and Login Controller, but i worked on other controllers and javascripts files to fix some errors.

Important Commits
Important Files

Adrián

I've been working on the docker files and the deploy on heroku. Also, I worked in other parts of the project, like REST controllers.

Important Commits
Important Files
Ana

I have been working in Images uploads, being possible to upload more than a single one, in manageProducts, as well as some changes in productRestController.

Important Commits
Important Files
Mario

I have worked in the images uploads when creating a new product, as well as creating the api REST of product and the product Postman petitions.

Important Commits
Important Files

Phase 4

Pablo

I developed the product-related files (models, services, components).

Important Commits
Important Files

Jorge

I worked on components, service and models on angular.

Important Commits
Important Files

Adrián

I worked on components, service and models of transactions on angular.

Important Commits
Important Files

About

No description, website, or topics provided.

Resources

Readme

License

Apache-2.0 license
Activity
Custom properties

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

32 tags

Packages

No packages published

Contributors 6

Languages