I let the computer decide what I eat - part 2 - VueJS frontend + raspberry pi

hey baby what are we having for dinner tonight again [Music] this video is the second part of my misogyster project in the first video i wrote the server as well as the database connection if you haven't watched it go check it out now i'll wait [Music] in this video i'm going to write the front end but one word of caution though i'm not a ux expert or ui designer so my front ends tend to look let's call them useful if you spot anything please leave a comment down below and give me some advice everything is appreciated as for the language of choice i use vue.js even though i have way more experience with angular i think vue.js is a better choice for a small project like this so now that we know what to do let's get coding i'm starting out with an empty project i created it using the view cli and edit view router beautify and view xs dependencies then i cleaned up all the boilerplate code that gets created like the home in the about view if i start the project you can see that i get absolutely nothing just what i wanted now that everything is set up let's get coding i'm done with the first coding session and i wanted to show you what i've done so far on the left you can see that i added the meals view under the slash path so it will be the first thing you see when you open the page on the right you can see the result of it a simple list of all the known meals as well as a category selector each meal has one category and if i select let's say fast food meals you can see that only the fast food meals get listed same goes for the low carb or all meals now let's head over to the code let's first start with an html part the category select has all categories as items for now the categories are hard coded and it contains all low carb and fast food the v model here the selected category gets set as soon as the category is selected as for the meals i simply iterate over all the filtered meals and display their name in a span i will explain the filtered meals function in a bit let's skip over the boring css stuff and as i said before the categories are currently hard coded and so are the meals these are the same meals i used in the back end code so as soon as i'm finished with the visual stuff i will make the actual rest calls to my backend but for now having everything hard coded lets me focus on the visuals first after the view instance has been created i execute the sort function which is defined right here and it sorts the mules by the name the filtered mules function i used while iterating over my meals in the html is defined as a computed function this is necessary because i always wanted to show the filtered meals in the html the function itself first checks if the selected category is empty or all if so it returns the complete meal list if the selector category is something other than that it filters the meals by category now that the first few steps are done i need a way to create new meals or edit and delete meals so i think i'm going to write some kind of component that will be a pop-up or dialogue on the left you can see that i added the three mentioned dialogues into the components folder here on the right you can see that apart from the add button it looks the same let me quickly change the view to phone since i will be using the site from my phone most of the time it makes sense to check how it looks there yep iphone is okay it shouldn't matter that much though now let's add a meal if i press the add button you can see that a new dialog pops up here i can select the category and enter a name again we will add a burger cool now let's see if the filtering works yep nice so if i select the burger you can see that two buttons show up to edit the burger press the branch icon and change the nade to yummy burger okay there is a small bug the meals do not get sorted but that's okay let's fix it later but as you can see the name got changed to remove the burger hit the trash icon and press ok and my yummy burger's gone now let's go over the code you can see that i added the add meal dial or component next to the select the v-on directive is used to trigger the on add meal function as soon as we receive the on add meal event from the admiral dialogue the edit meal dialogue as well as the delete meal dialog are placed behind the name span both components get the meal path from the parent in our case the meal view using the v bind directive same as in the add meal dialog the meals viewer listens on events from the child components and executes the corresponding functions these are on edit meal and on delete meal respectively i put a diff around those and bound the meal buttons visible class to it this will be set as soon as the selected meal is the same as the meal in the v4 loop if we go down a bit you can see that the set selected meal function simply sets the selected mirror property you can also see that the functions that are used in the dialogs all operate on the meals array the on add meals function simply pushes the data it receives into the meals area in sorts afterwards the unadded meal function first finds the index of the meal in the array where the id is the same as the edited meal then it sets the new values the on delete meal function also finds the index and removes the meal at the given index now let's have a look at the admiral dialog skip over the boring html part it looks mostly like the example code i copied from the vue.js documentation for v dialog so nothing exciting in here i have two functions that get called on the corresponding buttons cancel and save the cancel function resets all the fields and then closes the dialog by setting dialog to false the save function creates a new data object with the selector category and the end of name then it resets the field closes the dialog and emits the on-add meal event with a new defined meal the edit meal dialogs works almost the same way the cancel function resets the fields and closes the dialogue whereas the save function creates a new data object sets the fields resets and closes and emits the on-edit meal event the only difference is that it receives the meal to edit property from the parent meals view and sets the selector category as well as the meal name field after the view instance has been created the same goes for the delete meal dialog it also receives the meal to delete property from its parent in the cancel function i only close the dialog and in the ok function the dialog also gets closed and the on delete event gets emitted in the end i'm going to have two views the meals view and the suggestions view so i'm going to use the router to switch between those i added two buttons at the bottom of my app to switch between views so if i click on meals nothing happens since i'm already in the meals view but if i click on the suggestions the router pushes to the slash suggestions route and the view changes to the suggestions view here you can see that i have a select for the category as well as for the number of meals if you have watched my previous video you might remember that the slash suggestions endpoint has two url parameters one is the category parameter and the other is the count parameter so the selected fields will be passed as the url parameters once we make the connection to the server pressing the surprise me button will then suggest you with meals but for now as you can see i simply return 5 meals so if i press again the same 5 meals will be displayed now let's go over the code in the app view file i added a div containing 2 buttons when the click event gets fired either the go to meals or go to suggestions function gets called these are defined here and simply push the corresponding route as stated before if you have a look at the suggestions view you can see two selects for the categories as well as for the number of meals if either of these is changed the corresponding v models get set the surprise me button fires suggest meals functions i will show in a bit and for the meals list i simply iterate over the meals i rang here you can see that the categories are still hard coded so are the number of meals i think i will stick to seven since i never planned for more than one week in the created section you can see that i set selected category to all and select the count to 5 as default values the sort function is the same as in the meals view so nothing new here it still sorts after the name and i said before the suggest meals function currently sets the meals to a static area of 5 meals connect to the back end right now ok you're the boss boss while setting up the project i totally forgot to add the axios dependency to make the http call to the back end so i added it now i also needed to add course options to my backend therefore i use this dependency right here and these few lines in the main go file as the allowed origins header i set it to localhost 8080 hence my front end and i also added get post put and delete as the allowed methods this should be enough for a simple web page first let's see if the front that works when i use the real backend i made a oopsy while recording i totally forgot that i also updated the main gs file good thing there's video editing am i right in the main.js file i created an axios instance setting the base url to the url of my server then i defined the global http client instance to use in all my other files now back to thomas thank you thomas first let's see if the front that works when i use the real back end the server as well as npm is running and you can see on the right side that i still have all my meals that i have added last time so the list meals function works even if i select other categories it still works let's add a new meal and see if the post works as always add a yummy burger and there you go the post still works now let's edit the burger and remove the yummy prefix okay this works too let's have a look if the suggestions are also running surprise me and okay i got five minutes from the server and five other meals and another route finally let's check if the categories and the count queries are working yep great success now let's go over the code if you have a look at the meals view you can see that i first set the meals variable to an empty array within the created function i then call the list meals function to ask the backend for all the meals this will make an http request to the server and request all the meals after the view instance has been created the list meals function first builds the url given the category was selected if so the category url parameter gets appended after that the global http client is used to execute the http request if data is returned and the status is 200 i set the meals to whatever the server returned and sold afterwards if something unexpected is returned i simply log to the console this is fine since this is only a personal project usually an error dialogue would be better but this is okay for now i do the same if something goes wrong with the http request i also change the on add meal on edit meal and on delete meal functions although they all work the same way prepare the url make the request and update the meals using the list meals function if something goes wrong log to console the suggestions view also got updated and now uses the http client to request the server same as before prepare the url make the request and be happy to serve my front end i will be using nginx if you don't know engine x i'm sorry there's no help for you so let's put the code onto this shall we as you can see on the right side of the screen i'm already connected to my raspberry pi i also already downloaded engine x but i haven't configured it yet and as you can see port 80 is already used by something else but first let's build and deploy the front end in the package.json file you can see that there are already a build script from the default project setup so i only have to execute npm run build and wait a bit [Music] well that only took ages but as you can see right here the disk directory popped up which contains everything we need now copy the whole directory using the secure copy command to my raspberry pi and here we go the disk directory is on my pi now it's time to configure nginx to do so we need to go over to this directory right here there is a default configuration file right in there that nginx uses to serve whatever is defined now let's change it to meet our needs instead of listening to part 80 it should listen to port 8080. this should solve the part already in use conflict and on the root i need to set the complete path to the this directory since engine x should serve the index html file that lies within this folder the rest should be fine so let's quit and save restart nginx and let's go over to the web browser and see if it's working cool nginx seems to serve our website no meals in here so let's create one well [Music] okay i got it i forgot to start the back end yeah try again nothing so why is this ah i forgot to set the course correctly sorry about that let's quickly set it in the main.js file build and deploy it again and also change it in the main go file build it yeah yeah wrong directory build and deploy the back end again restart the server and let's see if we got a random burger this might have been from the tests last time i guess but okay let's add a salad nice so this works now let's check the suggestions real quick and boom so what are we having next week burger and salad nice thanks for watching i hope you enjoyed this project as much as i did if you want to see more of this please subscribe to the channel and give this video a like until next time keep on coding

Channel: Thomas Langhorst

Views: 48

Keywords: vuejs, raspberry pi, coding, one day projects, programming

Id: WH_CRVYrxwI

Length: 13min 42sec (822 seconds)

Published: Sun Oct 31 2021