This is a practice for the subject of web application development simulating the wallapop appp.
| Name | GitHub Name | |
|---|---|---|
| Juan Manuel Verano Garri | [email protected] | juanmaverano |
| Daniel Anguita Viñas | [email protected] | daniel097541 |
| Alvaro Porres Gonzalez | [email protected] | varodpg |
| David Rial Vega | [email protected] | davidrialvega |
| Alberto Alvarez Gomez | [email protected] | alberalgo |
VideoTutorial: https://www.youtube.com/watch?v=VD3XvWlLaqE&feature=youtu.be
User: id(PK), name (UQ), email, password, img ?, location Product: id(PK), id_user(FK), id_category(FK), tags, imgs?, description, specifications, state, price Category: id(PK), name Friend_request: id(PK), from(FK), to(FK), mesage, state Product_request: id(PK), from(FK), to(FK), product(FK), mesage, state
For the advanced funcionality we have thought to include personal recomendations based on your personal info like what you have bought, products near you, etc
We are going to show the user history of purchases and his sales. And for more advanced stadistics we are going to show more info like the places that are more purchases, the bests categories, etc.
To facilitate the contact of the users we will introduce a chat so they can talk in real time with their friends and with the sellers.
Screenshots of the pages
- Inicio: Main page from the Dawllapop web. Include some sections like "Products Near you", "Latest products added","products of interest" and search bar.
- Categorias: Advanced web search for products ordered by categories.
- Perfil: A simple view for an user profile. There are two profile pages: public and private. You can access to your products, my products for sale,my shopping, my sales,reviews, offers received and friend requests. You can see the public information of an user from public profile.
- Editar Perfil: Personal data edition page.
- Producto: The main information about a product and how to buy it.
- Editar Producto: A complete form to create or edit the information about a product for sale.
- Registro: You must login on the "Iniciar sesion" button on the rigth corner where. If you have not an account, you can register on the web through the form.
-
Chat: You can talk to your friends and sellers that you have added to your friends list
-
Admin: Site where the administrator can edit the products and users of the page
To configure the development environment and to develop a Spring Boot application, we will need a program that provides us with the structure of the packages to make the application as well as to manage the dependencies of Maven. To start we will download the program, we have used STS, which can be downloaded from the following link (https://spring.io/tools), once installed to create a project we will have to go to File -> New -> Sring Starter Project and we would have our project ready to start developing and working.
The following image show a diagram of the Entities database:
The following image show a diagram of the classes into the app: Controllers, services, repositories and HTML documents:
Windows: We need to have XAMPP installed to run the MYSQL process or MysqlCommunityServer. We need to have Workbench installed to manage the tables.
The first thing we will do will be to give you start in the xampp part to start the MYSQL process, then we start the workbench and give you run to connect the database. Finally we will give the run spring boot application in our sts and we could already access our application.
MacOs: We need to have XAMPP installed to run the MYSQL process or MysqlCommunityServer. We need to have Workbench installed to manage the tables.
First of all, we need intall MysqlCommunityServer and MysqlWorkbench, an IDE to manage the database. We also may manage the database through the console terminal. After that, we create a database with the name "daw" into MysqlWorkbench. Finally we include the following lines into the application.properties file to indicate how to connect to the datase:
spring.datasource.url=jdbc:mysql://localhost/daw spring.datasource.username=root spring.datasource.password= spring.datasource.driverClassName=com.mysql.jdbc.Driver spring.jpa.hibernate.ddl-auto=create-drop
Note: MacOs maybe will not add to the $PATH the mysql Server process. We need to run server into settings page and include it to the path into ~/.bash_profile
https://github.com/varodpg/daw-wallapop/blob/master/API.md
The following image show a diagram of the classes into the app: Controllers, services, repositories, apiRest and HTML documents:
First of all, we need to download Docker from https://www.docker.com/community-edition Docker will be a process on your computer. Use it through computer console. The image of the java project will be allocated on DockerHub. You can create an account from https://hub.docker.com Into DockerHub we need to create a repository to allocate the java app.
To Dockerize the java application we need to compile the app, build the image, publish the image into the DockerHub repository and launch the application through a Docker-compose into command line console.
To compile the project we need maven. In our case, we will use a maven container.
To build the image we need a DockerFile file that contains the files and settings to build a image. In this case this file will contain the route for sdk java version 8, the java app and configurations like the web port to launch the app.
Docker-compose command instruction need a file called docker-compose.yml. We need to execute the command into the directory that contains the docker-compose.yml. This file contains the route to the image, the route to a mysql image and the rest of settings to prepare the app to be launched (for example, the configuration to connect java application to mysql database).
To make easy the process to launch the app dockerized, its included a shell script (execute_scripts.sh) into Docker Directory for linux and macOs machines that will launch some scripts to compile and build the app image (create_image.sh) and publish the image into DockerHub* (publish_image.sh). *Its needed to have docker process launched and be logged into DockerHub.
docker images: shows images downloaded into the computer.
docker ps: shows containers running.
docker rmi --force: delete an image from the computer.
docker build -t name_of_image . : build an image based on a DockerFile (dot indicate this)
docker tag my_image $DOCKER_ID_USER/my_image : tag an image (needed to push an image into DockerHub)
docker push $DOCKER_ID_USER/my_image: push the tagged image to DockerHub
docker-compose up: launch a docker-compose.
docker-compose down: stop a docker-compose.
docker-compose rm: remove a docker-compose executed. Sometimes its needed to rebuild a docker-compose
First of all, we need to download node.js (https://nodejs.org/en/) and npm (https://www.npmjs.com/package/npm) to build an Angular-cli project. Now, we start a new project with the command "ng new dawllapop" into line command tool. The command "ng build" launchs the app into a local server to develop the project easily. Access to the angular-app through localhost:4200 by default. The angular project use the API Rest calls to interact with backend.
After develop the project, we include it into the java app (fase 3) on src folder and configure some lines in MyWebMvcConfig.java class that permits access through the same url localhost:8443/new (new for angular app, with not new for java app access)
Finally, docker shell script now include some lines to build the angular project, insert it into backend java app and launch global project with java and angular app.
The following image show a diagram of the classes into the angular-app: components, services and templates:
