Our purpose is to create an APP web to sell second-hand clothes through a monetary change or virtual money to use in the same APP.
If you want get a copy of our proyect to development and testing you will download the project in: https://github.com/CodeURJC-DAW-2019-20/webapp3.git
The name of the App Web is Swap It!
We recommend the use of Brackets to change de code of the APP Web.
The entities could be User Types and Second Entities.
-
Admin User: Each of the managers of the App Web, responsible for the control of the proper functioning of the App. A Registered User do a request to a Admin User to upload a product. If the admin check the request and all are ok, the product will upload.
-
Registered User: A person who can sell or buy something in the App Web. They must register, their id will become their NID and they must choose a alphanumeric password.
-
Anonymous User: A person who can only see the published information in the App Web.
-
Product: Our products are clothes and accessories which people can sell or/and buy in the App Web.
-
Complain: A Registered User do a complain to other Register User or product. If the admin check the complain and find a problem, the Registeres User could be penalized and even expelled from the Registered Users.
-
Transfer: A transfer is the relation between a Registered User and a product, also could have a complain if the buyer isn't according with the bought product.
-
To Buy: Web App products can be bought.
-
To Sell: New products can be added to be sold in the App Web.
An example of relation, is Registered User buys Product, or Registered User sells Product in the APP web.
An anonymous user that has registered it in the App Web becomes a Registered User. A Registered User after logging in can buy products, check his historical movements or upload products to sell.
The App Web must allow to upload pictures, for example, a Registered User wants to change his user avatar.
Always the uploaded product will be accompanied with its respective photo.
In the profile a Registered User can see their expenses and benefits in form of graphics.
In this moment we don't use any complementary technology, but in the future we will use it. For example, the database that collects all the information.
We will use a Advanced Query Algorithm to recommend products to a customer based on their previous purchases.
Our Start Page is index.html, in this page you can see the categories of the Sales App Web, the new products, the acess to the profile section, the opening month offer, the record to the news and another themes.
In the page product we can see a particular product with its details and other similar products.
In the Profile page we can change our information and we can see the graphics about our expenses and incomes, also we can see recommended articles based on our purchases.
In the checkout page we can finish a purchase introducing tha address data and payment details.
By last, the store page show a lot of products and filters to search a particular product according to the search wish of the customer.
Our Start Page is index.html, in this page you can see the categories of the Sales App Web, the new products, the acess to the profile section, the opening month offer, the record to the news and another themes.
In the page product we can see a particular product with its details and other similar products.
In the Profile page we can change our information and we can see the graphics about our expenses and incomes, also we can see recommended articles based on our purchases.
In the checkout page we can finish a purchase introducing tha address data and payment details.
By last, the store page show a lot of products and filters to search a particular product according to the search wish of the customer.
- Create the html template with CSS and JS
- Create a spring project with maven and web dependencies, jpa, h2, mustache.
- Create in resources a static folder and another of templates.
- We put all our css, js, images and static elements that we already had in the static folder.
- We have to put the html in the templates folder because we will use mustache and it is the configuration that it requires.
- We will have to change the links to all the css, js from the html because the static address does not work, so we will have to put, for example, /css/bootstrap.min.css
- In the application.properties file we add: a. spring.mustache.suffix = .html i. so that mustache understands the .html files. b. spring.h2.console.enabled = true i. For h2 to work.
- We tried to make everything work.
- To see that the bbdd works, we load localhost: port / h2-console and on the screen that comes out, we will have to leave everything the same changing what is in JDBC URL by jdbc: h2: mem: testdb and should connect and see the administrator of the bbdd. 10 .The project could already be uploaded to github, because it works, even if it doesn't detect the links between html (index load only).
Document Api documentation with information about the REST API.
- The first step is installing node.js, npm and angular cli. With all this correctly installed, we can create a new angular proyect in the IDE you are working on.
- The next step is creating all the configuration necessary to create each module.
- Each part is in a folder with a component.ts where is all the logic connected with a componen.html, also a component.css with the style for this html and service.ts where you make the get, post, put or delete request to the API.
- You can modify the html template making it more beautiful using ng-material, Bootstrap or primeng. The last step, if you want to upload to Docker.
DOCKER:
add the node.js container to Docker-compose and in the dockerfile, add the configuration for doing ng-build.- Last step, there is an angular application connected with an api, and working all of this in Docker, with an springboot backend and an independent front with mustache.
Name | Github user | % Participation | |
---|---|---|---|
Javier Barrio Martín | j.barrio.2016@alumnos.urjc.es | (https://github.com/JaviBarrio6) | 100 % |
Maria Gutierrez | m.gutierrezt.2016@alumnos.urjc.es | (https://github.com/Mariagt97) | 100 % |
Alejandro Aguilar | a.aguilarf.2016@alumnos.urjc.es | (https://github.com/Aaguilarf) | 100 % |
David Roble | d.robles.2016@alumnos.urjc.es | (https://github.com/davidrobl) | 100 % |
Alvaro Noguerales | j.noguerales.2016@alumnos.urjc.es | (https://github.com/Anogue) | 0 % |
If you want to execute the project you must open it with a browser.
Open index.HTML with a browser
To test the App Web you can try to interact with the elements of the APP Web.
We use HTML5 to design the format of the APP Web and CSS3 to add styles.
- Javier Barrio Martín - Programmer - Git Account - Mail: j.barrio.2016@alumnos.urjc.es
- Maria Gutierrez - Programmer - Git Account - Mail: m.gutierrezt.2016@alumnos.urjc.es
- Alejandro Aguilar - Programmer - Git Account - Mail: a.aguilarf.2016@alumnos.urjc.es
- David Robles - Programmer - Git Account - Mail: d.robles.2016@alumnos.urjc.es
- Alvaro Noguerales - Programmer - Git Account - Mail: j.noguerales.2016@alumnos.urjc.es
If you check the list with all the contributors you will check contributors.
This project is down the licency LICENSE.md for details