Here you can find information about the members that form the developer team for TripScanner
| Name | Surname | URJC Mail | Github |
|---|---|---|---|
| Marcos | Ferrer Zalve | m.ferrer.2020@alumnos.urjc.es | @LovetheFrogs |
| Anna | Trofimova | a.trofimova.2020@alumnos.urjc.es | @anna-trofimova |
| Iván | Penedo Ventosa | i.penedo.2020@alumnos.urjc.es | @xIvqn |
| Adaya María | Ruíz Mayoral | a.ruiz.2020@alumnos.urjc.es | @AdayaUwU |
The team will be organized using the intregration with the native GitHub Projects. That way, team members can use GitHub Issues and other GitHub options to automate the workflow of the web application development. GitHub Project can be accessed through the following link.
Here you can see the features of our web application TripScanner.
We'll have the following entities users, places, destinations and itineraries.
Our web app will have the following types of users:
-
Unregistered users: Not registered users can search for itineraries, destinations and places, but can not save them anywhere.
-
Registered users: Registerd users can do the same as unregistered ones, but they can also create new itineraries (either public or private), save public ones and edit them privately. Registered users also have a personal account in the website where they can create a biography and change their profile picture and how they appear to other users.
-
Administrator: Administrators can do all the previous tasks. They can also edit the public itineraries and create new ones, add new places and destinations.
Out of our four entities, three of them will have images asociated to them. Users will have a profile picture of their liking, places will have a photo of them and destinations will have a picture of an iconic landmark they have.
Inside each destination, users will be able to see a bar graph containing the most popular places inside them. There will also be a graph in the main page where you can see the most popular destinations.
The app will be able to send confirmation emails to users when they register, and anytime they save or edit an itinerary.
It will also be able to generate pdf documents with a selected itinerary that a user has saved.
Our app will use the OpenStreetMap API which is an Open Source map API. We will also be using SkyScanner's and TripAdvisor API to get information about hotels, destinations and flights.
TripScanner will have a selection of algorithms. These are:
- An algorithm to search for the shortest path between places of an itinerary.
- A search algorithm with different search criteria, for both places and destinations.
Here you can see screenshots of the webpage developed during phase 1.
The main page will show popular itineraries, destinations and places. Those are the ones most seen by the users. It will also allow for manual search using the search bar, and login into your account.
The login popup allows users to log into their account or create an account if they don't have one.
The registration page allows for unregistered users to create a new account to get all the features of TripScanner.
Results are shown after using the search bar and can be filtered by public results or private ones you have created as a registered user. You also have a number of filters to narrow down the search results.
The details of an item are shown when you click on it and show some more information about it.
Registered users can see their profile information here, as well as editing it, and their itineraries.
At last, administrators can see a panel with the options they have. This panel (as well as the user information one) is not accesible yet by navigating through the webpage.
The main page will show popular itineraries, destinations and places. Those are the ones most seen by the users. It will also allow for manual search using the search bar, and login into your account.
The login page allows users to log into their account or create an account if they don't have one.
The registration page allows for unregistered users to create a new account to get all the features of TripScanner.
The search page allows to search for an specific keyword, as well as filter the results showed.
The details of an item are shown when you click on it and show some more information about it.
Registered users can see their profile information here, as well as editing it, and their itineraries.
This page shows a registered user created and saved itineraries, as well as allowing them to create new ones.
Administrators can see a panel with the options they have. Here they can filter by users, itineraries, places or destinations, as well as editing existing entries or creating new ones.
The views for adding a new element or user to the webpage are all the same, so the add new destination one is shown for reference.
Users can edit the itineraries they own, similarly to admins being able to edit all itineraries.
They can also edit their profile. This view is similar to the register page.
Users can generate a pdf of an itinerary and download it.
An email is sent when a user registers to the app.
An email is also sent if you change the email you have linked to your account.
Finally, above is the updated navigation diagram of the webpage.
In order to execute the app, you will need to follow this steps:
-
Install all the needed dependencies. This are:
- Git bash. Use command
sudo apt get install gitto install. - Java version 11. Use command
sudo apt get install openjdk-11-jdkto install. - Maven. Use command
sudo apt get install mavento install.
- Git bash. Use command
-
Once you have all the required dependencies, clone the repo from github using the commad
git clone https://github.com/CodeURJC-DAW-2022-23/webapp9and login to your github account. -
After cloning the repo to your local machine, go to the directory where the repository was cloned and navigate to the root directory of the spring-boot project by using the command
cd webapp9/TripScanner. -
Finally, use the command
mvn spring-boot:runto boot up the project and navigate to https://localhost:8443 to use the website.
Below there is an entity-relationship diagram that shows the database entities, its fields and the relations between them.
This is the class diagram of TripScanner.
Here, each member of the team shows what they have contributed to during the development of this phase.
-
- Description of tasks: In this phase, I've developed the functionality to show item's details and its related information, interface and creation of user itineraries and the admin management view and functionality, including editing, deleting and adding all kinds of items.
- 5 biggest commits: These commits are:
- 5 files with most participation: These files are:
-
-
Description of tasks: I've been in charge of deploying the H2 database at the begining of the stage to start working with it and at the end, when everything was implemented, migrating it to MySQL. Also, I've been developing the pagination section in all pages that required it such as details (for information and reviews for the itineraries) and search results; the controller for downloading database images, aditional technologies (pdf exportation and email sending), private/public itinerary visibility functionality and some diagrams (such as the database entity-relationship diagram) for the documentation. Apart from that, I've been reviewing code and helping others.
-
5 biggest commits: Note that I usually upload more commits with less changes each, so I have a lot of contributions but each one has less changes. These commits are:
-
5 files with most participation: These files are:
-
-
- Description of tasks: I developed home page, search page, the necessary algorithms to search for different elements, search filters and the ability to see your own private itineraries. These commits are:
- 5 biggest commits: These commits are:
- 5 files with most participation: These files are:
-
- Description of tasks: I've developed the secure login and user functionality, and added the missing touches for editing and saving itineraries, as well as adding custom error pages and the graph for the most poppular destinations.
- 5 biggest commits: Note that I usually upload more commits with less changes each, so I have a lot of contributions but each one has less changes.These commits are:
- 5 files with most participation: These files are:
The API REST documentation has been generated using OpenAPI specification. As so, it has been automatically generated into a .yml and .html file. Both files are accessible from this repository, through the following links:
The classes and templates diagram has been updated with the new @RestController classes. Please note that the @Service classes have been implemented before, in the Stage 2.
In the following sections, it'll be explaned everything about the Docker usage in the application, including the execution of the dockerized webapp and the building of the docker image
To run the Docker image using the docker-compose.yml file you might need to install Docker first:
- Windows:
- Microsoft Windows 10 Professional or Enterprise 64-bit or Windows 10:
- Linux:
- Ubuntu: https://store.docker.com/editions/community/docker-ce-server-ubuntu
- Fedora: https://store.docker.com/editions/community/docker-ce-server-fedora
- Debian: https://store.docker.com/editions/community/docker-ce-server-debian
- CentOS: https://store.docker.com/editions/community/docker-ce-server-centos
- Mac:
- Apple macOS Mojave (10.14) or newer:
These are the instructions to run it:
- Open a terminal.
- Clone this repository using
git clone https://github.com/CodeURJC-DAW-2022-23/webapp9.git. - Go to the docker folder using
cd webapp9/docker. - If you use Mac M1, you also need to run command
docker pull --platform linux/x86_64 mysql. - Run the
docker-compose.ymlfile usingdocker-compose up. - Now you've got both webapp and API running on
https://localhost:8443.
To build the Docker image using the create_image.sh file you might need to install Docker first as the previous step shows.
After that, you should:
- Cretae an account on DockerHub and log-in locally.
- Open a terminal.
- Clone this repository using
git clone https://github.com/CodeURJC-DAW-2022-23/webapp9.git. - Go to the docker folder using
cd webapp9/docker. - Run
./create_image.sh %username%/tripscanner-webappreplacing %username% with your DockerHub username.
Here, each member of the team shows what they have contributed to during the development of this phase.
-
- Description of tasks: In this phase I have been in charge of the admin functionality for places and users in the API. Initially I was going to work on Railway too, but since it was removed, I was also in charge of the documentation (README, diagrams and API) and of checking that everything was working properly and fixing errors.
- 5 biggest commits: These commits are:
- 5 files with most participation: These files are:
-
- Description of tasks: In this phase I have been in charge of the unregistered user's funcitonality in the API REST, such as Destinations, Places and Itineraries search and details. Also, I've developed the the sign-up request and the graph's controller. Initially I was going to work on Railway with @AdayaUwU , but since it was removed frmo this stage, I was also in charge of the documentation (README, diagrams and API) and of checking that everything was working properly and fixing errors for the Docker section. Apart from that, I've been lending a hand to other members when they required any help.
- 5 biggest commits: These commits are:
- 5 files with most participation: These files are:
-
- Description of tasks: In this phase I participated in creating manager rest controllers for destinations and itineraries. Also i was in charge of docker and adding more items to database. Apart from it, I did API documantation and Postman requests for my rest controllers.
- 5 biggest commits: These commits are:
- 5 files with most participation: These files are:
-
- Description of tasks: This phase, I've been in charge of coding the Rest Controllers used by registered users, as well as its documentation. This controllers implement functionalities such as managing your itineraries and creating new ones, and editing your profile info. I've also been in charge of developing the Docker functionalities with @anna-trofimova.
- 5 biggest commits: These commits are:
- 5 files with most participation: These files are:
Follow the steps to set up your environment to develop the Angular application:
- Open a terminal.
- Clone this repository using
git clone https://github.com/CodeURJC-DAW-2022-23/webapp9.git. - Go to the angular project folder using
cd frontend/angularclient/. - Initialize the node project using
npm i. - Install Angular CLI using
npm i -g @angular/cli. - Run the angular application on development mode using
ng serve --proxy-config proxy.conf.json. - Now you've got the Angular applciation running on
https://localhost:4200.
For the Angular application to work properly, make sure you have the API and the MySQL database up and running on its specified ports. See documentation above for help.
New classes and templates diagram has been created with Angular componenets, templates and services.
In this section we will explain the steps that we have taken to achieve the deployment of our app on a URJC virtual machine.
- We connected to the machine via SSH using the following command:
ssh -i appWeb-09 vmuser@10.100.139.31 - We installed Docker and Docker Compose on said machine. Since the machine's operating system is Ubuntu 22.04, we followed the instructions provided on the Docker docs website for that operating system.
- We cloned our app repository using the following GIT command:
git clone https://github.com/CodeURJC-DAW-2022-23/webapp9 - We finally deployed our application by using the docker-compose.yml file and, in order for the app to keep running after closing the SSH connection, we ran it in background by using the following command:
docker compose up -d
In order to connect to our app, these are the links that can be used:
Notes:
- The
appWeb-09file might need execute permissions for step 1. Usechmod 600 appWep-09to change them on a Unix terminal. - Both web application and virtual machine are only accessible through the private URJC network.
Here, each member of the team shows what they have contributed to during the development of this phase.
-
- Description of tasks: In this phase I have been in charge of the management general page and the adding and editing items page. I have also developed the search page with my partner Iván. Also, I have been correcting errors and merging all the changes, and finally, I have been in charge of the deployment as well as my partner Iván.
- 5 biggest commits: These commits are:
- 5 files with most participation: These files are:
-
- Description of tasks: I have been in charge of developing the details section of the Angular application, including details, information and review controllers. Apart from that, I have been working on the search section of the application with my partner Adaya applying the pair programming technique. Also, I have improved the previous TypeScript models and services; as well as reviewing code, pull requests and lending a hand to other members when they required any help, such as fixing the navigation and reloading components after changes on model. Finally, I have also realized the deployment of the webapp with my partner Adaya, since we couldn't deploy it on Railway in the 3rd stage.
- 5 biggest commits: These commits are:
- 5 files with most participation: These files are:
-
- Description of tasks: I have been in charge of creating initial angular project with first components and services. Also I have created home page, chart information, navbar, logIn and signUp functionality. Also I recorded a video and made a diagram.
- 5 biggest commits: These commits are:
- 5 files with most participation: These files are:
-
- Description of tasks: I've been tasked with the development of the myItineraries page, wich include creating and editing a registered user itineraries, as well as the profile page, wich also included editing and loging out. Lastly, I've been in charge of generating the new docker image containing both the springboot application and the angular SPA.
- 5 biggest commits: These commits are:
- 5 files with most participation: These files are: