This is the main project's repository, where you can found folders like Code's folder, that contains all the stuff related to the application developing code, or the Prototype's folder, where you will be able to see our first ideas and some sketches used to carry out the web application.
PHASE 1.
PHASE 2
- Most important commits
- Most worked files
- Instructions
- New navigation diagrams
- Database diagrams
- Classes and templates diagrams
PHASE 3
- Most important commits
- Most worked files
- API documentation
- Docker steps
- Classes and templates diagrams
PHASE 4
| Daniel Murillo Garzón | d.murillo.2018@alumnos.urjc.es |
| Hamsa Aldrobi Elharti | h.aldrobi@alumnos.urjc.es |
| Manuel León Briz | m.leon.2016@alumnos.urjc.es |
| José María Melero Gimenez | jm.melero.2016@alumnos.urjc.es |
| Raquel Alonso Fernández | r.alonsofe.2017@alumnos.urjc.es |
We're using Trello to make easier the organization for the web product.
Downloading the repository you will be able to view the latest things added.
When you have downloaded the folder wepapp8, click on code and execute Index.html If you want to see the Main page. Through it, you can access to the others!
Instarecipes will be an application web where you can share all of your favorites recipes with the other users. You can also follow or unfollow the users whenever you want to! And, if you really love one recipe, just add it to your favorites list. And even if you don't want to register you will be able to see everyone's recipes.
.gif)
.gif)
Here you can found a list of existing features in Instarecipes.
- Posibility to upload a recipe.
- Posibility to download a recipe.
- Option to have a favorites recipes list.
- Posibility of filtering recipes by ingredients.
- Be able to erase all selected ingredients.
- Interaction between users.
- Comments section.
- Follow and unfollow available.
- Divide recipes by categories.
- Add visual elements (videos, images...).
- Trending recipes. There will be a ranking with 3 recipes with the highest amount of likes in a certain time.
- Posibility of Sign up.
- By Google.
- Ban available to users. Because of 'trolls' comments or recipes.
-
User 👤
-
Recipe 🍔
-
Steps 🔢
-
Ingredient 🍞
-
Cooking Style 🌱
-
Category 📂
-
Comment 💬
There are three types of users:
- Anonymous.
They won't be able to upload any recipes or post comments, but, they can view recipes, search users, filter by ingredients, allergens, cooking style or even search one recipe.
Neither can they follow or unfollow users or have a list of favorite recipes, give likes... but, they do have the option to download recipes with all the steps, ingredients, and photos.
- Permissions.
An anonymous user always has the option to download a recipe and see what users upload without problem.
- Permissions.
- Registered.
They can upload and delete his own recipes. Obviously they have the option of download a recipe, search users, use the filter option, cooking style...
- Permissions. If a registered user upload a recipe, it will have a comments section, but if someone comments something and the owner does not like it, he has the option to delete it. Also, they can edit the recipe post later, so they don't have to delete and upload it again. This means: uploading new photos, modify the steps...
- Administrator.
There is only one admin, and he will be the one that has full control over the information in the Web.
- Permissions.
Receive requests from users about new ingredients that can be added, cooking style and categories. In addition, he can also delete recipes, users and comments that he considers inappropiate.
- Permissions.
One of the complementary technologies that we will use is the possibility of logging in without email.
It is almost always easier to sign up for a new site by accessing through your Google account, and the good thing about this is that practically almost everyone has a Google account, so we will facilitate the registration to new users with a simple click.
In this section we will make a brief explanation of what our advanced search algorithm will consist of.
The first thing we observe when we visit the main page are three slides, which contain three outstanding recipes at a certain time and, that's simple but, the funny thing about this is that, each registered user can emphasize that he is allergic to certain foods so, if one of the trending recipes of the moment contains an allergen that the user has, another recipe will be shown to him.
Finally, we show the first navigation diagrams to make the connections between the pages a little bit clearer.
- Main diagram
.png)
In the diagram we can see above, we observe that Home, User Profile, Ranking, Search User/Recipe and Login/Sign Up are always connected to each other, this is simply because they are in the navbar, but Login/Sign Up button has an arrow directed towards it, this means that you can go to the login and sign up section but once you're there, you cannot go to User Profile, Ranking and Search User/Recipe because there is no Navbar there. (Obviously, you can go to the Home page 🏠)
- Users and profile diagram
In the next diagram, you can see the main differences between the registered users, anonymous users and the administrator. All of them can access to their recipes, the recipes pages, go back to home... (Main diagram) BUT the administrator will have a menu where he can manage things like accept new ingredients, categories...
.png)
| Hamsa Aldrobi Elharti | h.aldrobi@alumnos.urjc.es | @lordkener |
This developer has been doing a lot of functionalities and helping the rest of us!
| Manuel León Briz | m.leon.2016@alumnos.urjc.es | @manuellb97 |
This developer has been doing tasks which are focus on user's experience.
| José María Melero Gimenez | jm.melero.2016@alumnos.urjc.es | @trevod98 |
Textual description of the tasks performed in the phase.
| Raquel Alonso Fernández | r.alonsofe.2017@alumnos.urjc.es | @Muffinous |
This developer has been doing tasks to make the page more visual and functional.
| Daniel Murillo Garzón | d.murillo.2018@alumnos.urjc.es | @dMurill0 |
Textual description of the tasks performed in the phase.
| Daniel Murillo Garzón | d.murillo.2018@alumnos.urjc.es | profile.html, login.js, ProfilePageController.java, index.html, login.html |
| Hamsa Aldrobi Elharti | h.aldrobi@alumnos.urjc.es | security folder, initDatabase.java, add_recipe.js, profile.html, RequestController.java |
| Manuel León Briz | m.leon.2016@alumnos.urjc.es | statistics.js, initDatabase.java, indexController.java, profile.html, recipe.html |
| José María Melero Gimenez | jm.melero.2016@alumnos.urjc.es | recipe.html, RecipeController.java, recipes.css ,add_recipe.js |
| Raquel Alonso Fernández | r.alonsofe.2017@alumnos.urjc.es | search.html, index.html, filter_search_btn.js, SearchPageController.java, login.html |
To access the website, you need:
- Any environment that is for web server development technologies
We recommend Visual Studio Code, since it has been the code editor with which we have developed the project.
- MySQL server community.
- MySQL workbench.
- Once we have both downloaded and installed (follow the steps indicated by the installer and once you have to enter the password for the database you have to put: 'root').
- Now that we have Workbench, access to your MySQL connections (Local instance MySQL80 with the word root) and create a new Schema named: "instarecipes_db".
- Finally, go to Visual Studio Code (or the program you have downloaded) and you must download the following dependencies:
- Spring Boot Extension Pack.
- Java Extension Pack.
- Maven for Java.
- Click 'Start..' button, go to your navegator and put: http://localhost:8443 and enjoy! (or https://localhost:8443)
In this section we can see how our navigation diagram has changed, now, you can search an user or a recipe using the search bar. When you are in the search page, recipe page or profile page, the navbar is still visible: This gives the user the possibility to go home, profile (if it is a registered user) or go to see the ranking.
If the user wants to register or log in, he will click on the Login / Sign up button and will be redirected to the login screen, through which he can access the sign up.
.png)
| Raquel Alonso Fernández | r.alonsofe.2017@alumnos.urjc.es | @Muffinous |
This developer has been doing ...
| Hamsa Aldrobi Elharti | h.aldrobi@alumnos.urjc.es | @lordkener |
This developer has been doing ...
| Manuel León Briz | m.leon.2016@alumnos.urjc.es | @manuellb97 |
This developer has been doing ...
| José María Melero Gimenez | jm.melero.2016@alumnos.urjc.es | @trevod98 |
This developer has been doing ...
| Daniel Murillo Garzón | d.murillo.2018@alumnos.urjc.es | @dMurill0 |
This developer has been doing ...
| Daniel Murillo Garzón | d.murillo.2018@alumnos.urjc.es | ProfileRestController, ProfileService , RequestService |
| Hamsa Aldrobi Elharti | h.aldrobi@alumnos.urjc.es | ProfileRestController, IndexRestController, searchRestController, Services and CommentRestController |
| Manuel León Briz | m.leon.2016@alumnos.urjc.es | Login, Signup, profileRestController, indexRestController and Services |
| José María Melero Gimenez | jm.melero.2016@alumnos.urjc.es | Profile, UsersRestController, RequestRestController, User and Request |
| Raquel Alonso Fernández | r.alonsofe.2017@alumnos.urjc.es | SearchService, SearchRestController, IndexRestController, UsersRestController and Services |
You can see our API documentation in another .md. There you will find information about our APIs requests by every single user type.
1st.
Download and install docker from this url.
2nd.
Prepare Dokerfile wich is the file that we would archieve the necessary resources and dependencies after build the image.
3rd.
Create the network because we need to connect the container.
docker network create insta-network
4th.
Now we can create and run the container based on MySQL database.
docker container run --name insta-mysql --network insta-network -e MYSQL_ROOT_PASSWORD=root -e MYSQL_DATABASE=instarecipes -d mysql:8
5th.
Before continue with docker, we need to change the application.properties:
spring.datasource.url=jdbc:mysql://insta-mysql:3306/instarecipes?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
6th.
And the pom.xml:
<properties>
<java.version>1.8</java.version>
<start-class>com.proyect.instarecipes.DemoApplication</start-class>
</properties>
7th.
Therefore, we could continue with the shell executing the following command to generate the .jar file:
docker run --rm -v "<instarecipes project path>":/usr/src/project -w /usr/src/project maven:alpine mvn package
8th.
Now we can build the image based in the Dockerfile (that should be created before this step), executing the following command in the shell:
docker image build -t lordkener/instarecipes -f Docker/Dockerfile .
NOTE: To execute this command, the shell environment has to be in the same path as the Dockerfile.
9th.
Then, now we have the image created, so we need to login to Dockerhub and publish our image into lordkener's account:
docker login
docker push lordkener/instarecipes:latest
10th.
Create and run the container based on both images that we had created(insta-mysqldb & instarecipes), linked with insta-network:
docker container run --network insta-network --name insta-container -p 8443:8443 -d lordkener/instarecipes
11th. and last step
To set more conffortable, we should create the docker-compose.yml and finally, the script.sh that is better to execute when we're working with docker, avoiding to execute lane to lane everything again. And that is all forks!!
In this section you can see how our diagram has changed.
The purpose of this last phase is to have our angular aplication connected with the api rest that we created in the previous phase 3.
To do this, the first thing we will do is install angular and node.js.
Install node 13.3.0 : https://nodejs.org/download/release/v13.3.0/
npm install -g @angular/cli
Once you have run the commands and everything is installed correctly, we can create a new angular project (we've created it in our instarecipes folder). In addition, in Angular we work with modules, so each part of the application has its components (which contain typed files, html and css). In the typescript files you will be able to make the requests (post, put, get...) to the API Rest.
Finally, we used bootstrap material to make our aplication look better!
npm install --save bootstrap
npm install --save @ng-bootstrap/ng-bootstrap
ng add @angular/localize
| Hamsa Aldrobi Elharti | h.aldrobi@alumnos.urjc.es | @lordkener |
| Raquel Alonso Fernández | r.alonsofe.2017@alumnos.urjc.es | @Muffinous |
| Manuel León Briz | m.leon.2016@alumnos.urjc.es | @manuellb97 |
| Daniel Murillo Garzón | d.murillo.2018@alumnos.urjc.es | |
| Hamsa Aldrobi Elharti | h.aldrobi@alumnos.urjc.es | ProfileComponent, FilteredComponent, TrendingComponent, RecentComponent and Interfaces |
| Manuel León Briz | m.leon.2016@alumnos.urjc.es | RecipeComponent, CommentsService, ContentComponent, Interfaces and Services |
| José María Melero Gimenez | jm.melero.2016@alumnos.urjc.es | |
| Raquel Alonso Fernández | r.alonsofe.2017@alumnos.urjc.es | SearchUserComponent, SearchRecipeComponent, LoginComponent, SignUpComponent and AuthenticationService |
