Strapi v4 Crash Course

hello everybody and welcome back to the channel in this video what we're gonna do is cover strappy version four so we're gonna learn the ins and outs of strap strappy and we're also going to build a real life application that utilizes strappy so you know what let's just get right into it and let's ask the question what is strappy well strappy is known as a headless cms and this might not mean anything to you what is a headless cms well let's actually just take it one word at a time and we're going to begin with cms what is acms well cms stands for content management system so it is a system that manages your content now that might not make all too much sense as well so let's actually look at a real life example so i'm on this website and this website was built utilizing strappy so over here you can see that we have a bunch of different restaurants so this website is listing a bunch of different restaurants and when you click on the restaurant you can see that there's a bunch of information within each restaurant so we have the restaurant name we have a bunch of image we have you know opening hours you know you know what's the cooking is french what neighborhood is it's in ninth neighborhood we have the phone number we have the website we have everything so you can see here that we have a bunch of things so this right here all this information the name the image you know the opening hours the details the locations all of this is content and actually if we go all the way back over here each particular restaurant is content as well so where do we store where do we store and where do we manage this content well we can use a content management system like strappy so i actually went ahead and kind of tried to duplicate a content management system for this particular website so over here this is strappy itself and you can see you have categories so we have categories we can group restaurants into categories over here we have all restaurants and if we want what we can do is we can actually add a new restaurant so if you want we can go ahead and add maybe maybe you want to add this restaurant over here so we can go ahead and we can add a restaurant we can add the name we can add the description we can add you know the opening hours we can also add some images so you can see here see this cms strappy is acting as a content management system where we can manage our restaurant content and what's great about strappy is it handles really a lot of the back-end capabilities so we don't have to worry about configuring a database we don't have to worry about you know authentication all we have to do is very simply just add the content and it's going to just save that content to our database so again you can see here that it's a content management system so i hope that makes it clear now what does headless mean so it's a headless cms well headless basically means that it is completely isolated from the ui so sometimes content management systems what they do is they allow you to manage your content and they also create the ui itself so for example over here maybe we wanted to add a restaurant well we would also have to create this ui through that content management system a headless cms is hey all we want to do is manage the content and we're going to serve that data to you and you are responsible for the front end so you can configure you can make the front end however way you want and strappy is just responsible for serving that data to you so with a headless cms you can have an you can have an angular application you can have a react application you can have a view application you can have just plain old vanilla javascript you can have whatever front-end application you want and you can configure it and make it look as you know however way you want and all you have to do is very simply just make a request to strappy asking it for you know restaurant data or categories data and strappy just sends it back so it is not associated to any part of the ui so you can create the ui however way you want and just make requests to get data and what's really great about strappy is if you are a graphql fanatic then you can actually configure a strappy to instead of being a restful api we can just have it be a graphql server so we can make you know queries or mutations and to strappy and we can actually get that inside of our front end so i hope that is clear and we are actually going to be duplicating what we have here so you can see this website what we're going to want to do is we want to create strappy so that we can actually serve this data now we're not going to be creating the front-end aspect aspect of this because really all the front-end is is just making requests to the to strappy to the server strappy and then you know it creates the ui and renders those data so we're not going to worry about that i really just want to focus on the strappy portion but again we're going to try to uh replicate this in terms of the server-side capabilities and return the data that is necessary now one thing that i want to note is that we're not going to cover absolutely every single case over here because this is a relatively large website and there's a lot of things that we would have to do in order to complete this and this course would get very long so we're just going to work focus on kind of the main things and trust me you're still going to learn quite a bit of strappy so let's just get right into it in this section of the course what we're going to do is learn how to create a strappy application and luckily this is really really easy all you have to do is open up your terminal or your command prompt if you're on windows and execute a very simple command so i opened up my terminal and as you can see i moved into my desktop directory because this is where i want to create my strappy application now in order to execute this command and create a strappy app you first need to have node installed so make sure you have node installed on your local machine you can do a very quick check by doing node v and what this should do is give you the version of node that you have installed so if you get any version that means well you have it installed if you get an error saying that hey i don't know what node is that means you don't have it installed and you should go on google just search no download find the web page it's a really really easy process and download so with that being said let's actually execute the command to create a strappy application so the command is npx and then create strappy app so create strappy app and then we're gonna append at latest to get the latest version which is version four and then we're gonna do space and we're gonna call we're gonna give our strappy app a name so we're gonna say you know restaurant cms let's just call it that restaurant cms and then we're going to add a flag and this is an optional flag but for development purposes i'm going to add the at or dash dash quick start flag and let me just so you can see it all in one line let me just make this a little bit bigger and what this does it's going to do a lot of configuration for us so for example it's going to configure our database for us it's going to utilize a sql lite database and that sql lite database is going to live on our local machine and that way we don't have to actually create a you know postgres database and then get the configuration get the credentials and configure it with this strappy application you know it just makes development a lot easier once this application is ready for production we can very easily change all of these things that we utilized with quickstart for example if you wanted to use a postgres database we can we can just get those credentials and add them inside of the end file that is created with this application and i'll show you guys that in a quick second so let's go ahead and execute this now i already executed this because this is going to take quite a long time to run and i just want this course to be as quick as possible so you can of course pause the video if you want so once you execute this it's going to say hey that's it's not going to work because um you already created one maybe if i called added another s in there you can see the process is is is starting up and you can see here that i have a new folder inside of my application so that's really all you have to do i'm not going to go ahead with this process because i already did this and once you're in there what i want you to do is to move into that directory so ct into that directory and what i want you to do is a yarn install so do a yarn install uh the reason why i want you to do a yarn install is because there's actually a known bug right now that occurs when you use npm and if you don't get that bug completely fine uh you can try it with npm install but i would suggest stick with the iron yarn i think is probably the more popular one at this point so do yarn install if you don't have yarn installed you can just simply do a mpm install dash yarn and you can give it the global flag and that should install yarn inside of your local machine so do a yarn install again i already did this and then once you do that what you can do is you can execute yarn develop so let's go ahead and execute that and i actually have to add sudo you are in develop you might not have to do this and i have to write my password let's go ahead and write that and then what we're doing is we're executing something called strappy develop and now you can see that well our application is running on localhost uh one or one three three seven so let's actually just copy this right now and let's go here and let's well enter so the first thing that strappy is gonna ask you to do because this is your very first time accessing this application is you're going to create a admin user so this user can create whatever records they can create other users so so this user is going to be a user that has access to this strappy dashboard so let's just go ahead i'm going to say lathe hard and let's give my email here and then let's give my password of i'm just gonna say password very weak password i'll show you that it's password for some reason uh and then and then you know you can also keep me updated blah blah blah let's not do that and okay very weak password so let's change that to capital case capital case and then must contain one number okay there we go and once you do that you can see here that you have access to the strappy dashboard how terrific is that and so you can see here you can go to the content management system and we'll talk about all of this stuff but you can go ahead and kind of explore around see what's going on uh but in the next section we're actually gonna start working on adding restaurants so let's actually get into that in this section what we're gonna do is learn about collection types inside of strappy so let's first remember what we're trying to do so we're trying to serve the data for a website that looks like this so what we want to do is we want to serve data regarding multiple restaurants so how do we do that inside of strappy let me just zoom in here for you guys so it looks a little bit more legible so in order to do that what we are going to do is go to our content type builder so this is the content manager this is where you actually add your content here is where you build your content type and you can see here right in the middle right between this nav bar and this right here you can see we have something called a collection type we also have this other thing called a single type and we also have this thing called a component and we'll talk about these two a little bit later but for now i want to focus in on the collection type so the collection type is where we can store multiple entities so for example in our case what we want to do is we want to store multiple restaurants so we're going to add that inside of the collection type the single type is where we store that entity just one time so for example in our store there is an about us page so what we can do is we can add a single type for that about us page and then we can have the content for that about us page we're not gonna have multiple about us pages so we're not gonna of course add that in the collection type but we are going to have multiple restaurants so that's why we're going to put it in here so you can kind of think of this in programming sense as this is going to be an array of things whereas this is just going to be one thing all right so let's get right into it so what we're going to do is we're going to click on this create new collection type and then in here you can see that there's a bit of configuration so the first thing that we want to do is we want to give this collection type a name so i'm going to call it restaurant and you can see here that it that you can see here the singulars restaurant and over here this is restaurant so this you don't really have to touch so now what we can do is we can click on continue and this is going to be what the entity is called restaurant now what is going to be inside of this entity what are the content that a restaurant has so if we were to go here you can let's just click on a particular restaurant you can see that you know the content we have multiple images okay so we probably want to store that somewhere we have the name of the restaurant we have you know the opening hours and i know right here there isn't a description of the restaurant but let's you know what let's just add that in as well so let's actually just go over here and you can see that we can add multiple fields for the restaurant collection type and the fields symbolize the different pieces of content that we want a restaurant type to have for example again the name the images opening hours etc so let's go in here and the first thing i'm going to add is a name so you can see here and let me just zoom out you can see that we have multiple different types of fields we have text we have email password enum media boolean whatever so we we can utilize any one of these now for a name i want to utilize text because well that makes the most sense i'm not gonna have you know a date for a name i'm gonna have text and we're just gonna call this name because this is gonna be the name of the restaurant so name and let's let's just capitalize it so this is gonna be the name of the restaurant and over here you can see we have two different uh types of text we can have short text this is just best for titles names urls etc and long text is better for descriptions or biblio bibliographies we're going to of course go with short text because well well the name is very short it shouldn't be that large and then what i want to do is i want to also go to these advanced settings and you can see here in the event settings we can actually set a bunch of different things we can have a default value now of course we don't want to have a default value for something like the name you can also have some regex expression so again this is not something that we want to have but we can also add you know some regex if we want to now over here you can see that we can add some additional settings so for example we can say that this is a required field so you cannot create a restaurant without providing a name and honestly i think that makes a little bit of sense so we're just going to go ahead and check that off over here you can see that this is another field called a unique field and this ensures that while we can't have two restaurants with the same name i think this also makes sense so we can go ahead and check that off we can also give it a maximum length and a minimum length i'm not gonna do that and we can also make it a private field which i won't do so that is the uh that is the name so let's add another field let's say we also want to add a description of the uh restaurant so what we could do is we can go over here we can add another field called text and we can say here description and you know we can make this long text however there's actually a better option for this in my opinion so what we can do is we can click cancel and this is going to actually cancel the whole thing so what we can do is we can click on this button right here add another field and i want to utilize rich text and what rich text allows us to do is utilize markdown so if we just used a large text before we won't be able to do something like you know highlighting bolding italics and and things of that nature having you know real good spacing whereas with rich text we're able to do all this because what ends up happening is it utilizes markdown so we're just gonna say description here and we can go to the advanced settings i think i'm okay with not providing it so we'll just leave it not you know not making this required and etc so i'm just going to leave it like that now what's the next thing that we want well we want some images so let's actually store that in as well so we want to use media for this so we're going to say media and we're going to say image now we can say multiple media or single so single means that you can only put one image in there or one media item in there it doesn't necessarily have to be an image whereas multiple is well when we want to have multiple images associated with this entity restaurants in this case we want to have multiple images as you can see we have a carousel so let's go ahead and we're going to utilize multiple media let's add that in now what else do we want to add well let's look look at what's happening over here let me just zoom in and my cat is going bonkers playing with a little toy so don't mind him so what i want to add is i want to add this the opening hours i want to forget about these other two for now well let's just not add those because well they they take i don't know they're kind of redundant so i want to add the opening hours so what i need to add is well i need to add first the uh the days that we are open so tuesday to saturday and we also need to add the um the times that we are open so i can go over here and add text and i can say days we are open and then add another field and we can say you know times that we are open or what we can do is we can actually group these content together and this is where a component comes in to place so we can add another field and we can call this component and we can create a new component we can say over here we can call this component opening hours and we can give this um we can give this a you know component a category i'm going to give this you know restaurant information so this is the category of this component we have to also give it an icon let's give it an icon of this whatever and then we can go ahead and we can configure this component so restaurant info configure this component let's call it let's remove that space what's going on here it's not letting me work all right let's do restaurants info and we're going to configure this component so let's go ahead configure please what are we missing this time seems like there we go okay there we go so in here what we can do is we can have a repeatable so here we can have an array of it or we can have a single component so we're going to click on a single component and then what we want to do is we want to add fields to this component so in here we're going to first name our component so we're going to call this opening hours opening hours and we're going to add fields to this component and again let's make it like that add fields to this component so inside of this component what we want to do is we want to add a text and we want to call this text um let's call it hours so hours and then we want to add another field and then in here we want to have days so this is the the opening hours where we are uh in hours and in days as well and then we are pretty much done so what we can do now is we can go ahead here close this off and save it and now you can see here that we have this opening hours component and then we have this hours and days so we can actually store you know common fields inside of components so the last thing that we have to do we have our name we have our description we have our image we have this stuff over here the last thing we have to do is go ahead and save this now once we save it and once we save it what we can do is we can go over here and you can see now we have another collection type now if you ever made a mistake and you want to edit some things of course what you can do is you can just edit them over here so you can edit the name you can even completely delete the type if you want to by clicking delete and of course we don't want to do that because well we didn't make a mistake yet so right now what you can do is you can go to the content manager and now when you go to restaurant what you can do is you can add a new entry and so over here you can add whatever entry you want so let's go over here and let's add i don't know if this is a real name of a restaurant let's make a let's let's click on this let's get this name over here we're gonna add that in there we're gonna add this is a terrific um i don't know what kind of restaurant this is it says vegan vegan vegan whatever i was going to say this is a terrific vegan restaurant um restaurants that serves vegan food what a terrific description um and then if we were to go here let's actually uh steal some of these images so we're going to go here we're going to do a copy image or we're actually going to go ahead and save this image so let's go ahead and save this image and what we're going to do is we're going to click here and we're going to go ahead and just drag and drop this image or i guess we can't do that we're going to go ahead and click that and then we're going to do drag and drop this image and now we can upload this asset and of course we can upload multiple assets if we want to we can upload another asset so let's go here maybe we want to show this image so let's save this image to our machine first so we can drag and drop it and then we can go ahead and drag and drop it and now we can upload these two images click finish now you can see we have these two images attached to this restaurant now in here we can also add the opening hours so we can add the hour you know is this and then in here we can say something like monday to wednesday is when we're open now if we wanted to have multiple hours for example maybe on the weekends we have different hours we could have made this an array type so that's where the array would have come into place so now what we can do is we can actually save this and if we go where to go back you can see now we have a new restaurant inside of our application so now what we should be able to theoretically do is make an http request and get this data back so get this restaurant data back and potentially render it inside of our you know either react next nux view front end and so let's actually do that in the next section we created our restaurant collection type and we added a restaurant in there but now what we want to do is we want to query for that restaurant so in order to do this let's just quickly remind ourselves exactly how strappy works so we have a front end which could either be react view angular or any other front-end framework or even again vanilla javascript and what it's going to do is make a request to our strappy server and then strappy is going to forward that data to us so what we need to do is we need to hit a specific endpoint to get all of the restaurants that we want now in order to do this what i'm going to utilize is a tool called postman so postman is an excellent tool to test out your apis and you can do a bunch of different requests get requests post request delete requests so if you don't have that installed go ahead and install it i'm just gonna zoom in here and i'm going to create a new new collection called strappy so i'm going to say strappy and then inside of strappy what i'm going to do is i'm going to add a request i'm going to call this request get restaurants get restaurants so let's go ahead and in here we're going to paste the endpoint for our application or our get restaurants um endpoint so let me just get rid of all these other ones let's get rid of this get rid of that get rid of that so what is the endpoint well the endpoint is going to be our strappy server which is going to be localhost 1337 and then it's going to be slash api and then slash restaurant so whatever your um whatever your collection name is if you want to get a list of all the restaurants you're just going to make it plural so you're going to be slash restaurants and now if you were to make this request send this request off it is not going to work because right now it is forbidden so what this means is that strappy by default is going to make everything not accessible to the public so what we have to say is manually say that hey this restaurant data is accessible to the public in order to do this we're going to go to settings right over here and then let me just zoom in once more and then we are going to go to roles right over here so there's two roles there's the the administrative administration panel roles we're not going to go there yet we're going to go over here to the user and permissions plugin we're going to go to roles then we're going to click on public and this right here will allow us to define and let me just zoom out a bit what this is going to do is allow us to define all of the endpoints as well as the things that anybody can do so over here what we can do is we can go to permissions and we can go to restaurants and then in here let me just zoom in once more i guess we can't kind of looks a little awkward once we zoom in at that point uh what we can do is we can say okay the public can find and find one restaurant so fine means they can find multiple so a list of restaurants find one means they can query for one specific restaurant based on the id and you can see here that the endpoint is actually shown over here now we probably don't want the public to have the ability to create a restaurant delete a restaurant or update a restaurant we probably want our own admin users that actually have access to the strappy dashboard to do that but we want them to have access to this so let's go ahead and save that and once we actually save this let me just get rid of this for now it's in the way at this point so let's go here and what we want to do is we want to execute this again so let's execute that and now you can see that we're actually getting back some data let me zoom out a bit we are actually getting back some data however we're getting back an empty array so what's going on there we actually have a restaurant inside of our application what's going on why is it that we're only getting back an empty array because remember if you go back to our content manager well we have a restaurant well you probably guessed the restaurant state is in draft so we have to explicitly say that we want to publish this so in order to publish it all we have to do is click on publish and there we go we published it and now if we were to make this request again you can see here that well we're getting that restaurant so we're getting the id and then we're getting the attributes and the attributes is the name the description and then there's additional attributes such as when it was created at when it was updated at when it was published and you might be thinking well wait a second where is the images where is the image information where is the opening hours information and it's actually not displayed on purpose so we actually have to explicitly ask for these types of information and the reason for that is because of performance because sometimes when we try to query these things it might get really really really big and it can decrease the performance of your application so what we have to do is explicitly ask for some of the things like the media types the relationships that we'll talk about a little bit later as well as the components but i'll talk about how we can actually query for this as well as do some filtration in the next section we saw that we are able to query for our restaurants however all of the fields weren't populated for example we couldn't see any of the images we also couldn't see any of the opening hours now again by default what ends up happening is the component fields the image fields as well as the relationship fields that we'll talk about in a later section aren't going to be populated for performance reasons we have to explicitly ask for them inside of the route so let's actually learn how to do that so in order to do that what we need to do is modify our url but before we actually get into that i want to go and take a side tangent and talk about this data that we get back as you can see here the data that we get back most of the case it's in a camel case that's the format that we get back however over here we can see that this right here is capitalized so i actually don't like this and i want everything to be camel case so let's quickly fix this right now so in order to fix this what we're going to do is we're going to go to our content builder we're going to edit the name field and we're simply just going to lowercase it and we're going to click finish and then if we edit it again we should see lowercase now let's go back to our content manager or let's give this a quick save let's give it a quick second [Music] and if if this stays stuck forever what you can simply do is just oh it doesn't so that's fine so now what you can do is you can see everything is completely fine let's actually do the same thing for the opening hours what i want to do is i want to camel case this so just lowercase this and then let's finish that off let's go over here finish it off what we can do is we can go over here now or let's let's see let's go over here and let's edit this we're gonna edit this so that uh so that the hours are also lower case we're gonna say this we're gonna finish this one and then over here we're gonna say that the days are also lower case so finish that let's quickly save that i think we're going to have to lower case the opening hours again um let's give it a quick second awesome and then over here let's go back to the restaurant i think i didn't yeah let's just go ahead i didn't save it let's finish that save that again and there we go so now if we were to make this request again and let's do it so let's go here let's make this request again i get the data all lower case all in camel case all right awesome but that doesn't of course solve the issue of uh well i want to maybe populate the images i want to populate the opening hours so in order to populate something what we're going to have to do is modify this route so over here let me just zoom in once more what we're going to do is we're going to add query params so query params are uh specified by adding the question mark so adding the question mark after the route so we're gonna do shift question mark and then in here we're going to say populate and we're going to specify exactly what we want to populate so do we want to populate the opening hours well if you want to populate the opening hours we just say populate and then we can say opening hours so if we were to execute this now and we were to scroll to our data you can see now we have the opening hours now you can see the opening hours turned into null because of our modified changes so let's quickly go over here and let's fix that so we're going to go here let's add monday to wednesday or this should be in the days section and then here we can say um 9 a.m to 6 p.m so let's go ahead and save that very quickly saved and now if you were to make this request again you can see that we get our opening hours there we go awesome and of course we can specify other things maybe we want the images so if we go to our content manager maybe we want to get these images as well so what we can very simply do is say comma and then image and if you were to make this request again you can see that this time let me just zoom out of here this time we get our opening hours and we also get our images and specifically for the images and what's really nice about strappy is it really modifies these images for you so you can see here we have thumbnail images we also have medium sized images and we also have small images but you can see that this is a lot of json code so by default it is actually really good that we're not getting this data back and we have to explicitly ask for it now just just to show you quickly how the images work you can grab this over here let's grab the url so you can see here that everything has a url so let's just grab that url and the url looks like let me just paste it in here for now so the url looks something like this so it's going to be whatever our api is then slash upload slash thumbnail and then that specific image so for us we're working locally so let's go here and it's going to look something like this http slash localhost and then slash upload slash uh whatever so what we can do is we can just very simply add that in here and you can see that we get our image so you can see that over here now this image is a this image is let's see here what size it is it's mostly i think for thumbnails if you want to use you know maybe an image for desktop you can pick a larger image so let's see what the right image for this you can see here medium and then over here small so maybe this image right here would be more suited for larger images because you can see that this one's a little bit blurry so if you were to execute that okay you can see that that's a lot better less blurry and bigger so if you want to use the thumbnail you want to use the thumbnail images if you want to use larger images like this then you can use this one obviously the reason why you would want to use the thumbnail image even though it might be smaller and lower quality is because it's just better for rendering performance and obviously you know what the smaller thing is is you probably don't have to worry that much about quality all right cool so that's pretty much populate that's that's really all we have to know about populating things if however you just want to populate everything and you really don't care um what it is you don't want to specifically specify it all you have to do is populate and then you can do just populate star and then if you were to execute this you can see that well we get everything back so that is pop eulation we learned how to populate fields that we don't get right off the bat we don't get by default now in this section i want to teach you how we can filter for specific fields that we don't want to see so we learned how we can populate things that we don't get right off the bat we don't get by default in this section what i want to teach you is how we can actually filter out for certain fields so for example if we were to run this request over here slash restaurants you can see that we always are going to get back the name describe created at updated at and purchased act now let's say what we were doing is we were rendering we're trying to simply render this page right over here and all we really needed is the image and the name we didn't care about when it was published we didn't care about when it was created at we didn't care we don't care about the description for now in terms of the attributes that we automatically get back well we just need the name and then we also need the image which we don't get back so how are we able to do this well in order to do this what we need to do is specify the fields query param so by default what ends up happening is we have this fields query param and it's equal to star so it's equal to star which means hey we want to give you back everything however in this case we only want the name so what we're going to say is fields is equal to name and you can see right now all we get back is the name let me just kind of get rid of that maybe i can actually zoom in at this point there we go and you know what no i can't i apologize if this is too small but you can see here that we're only getting back the name now in order to populate the things that we normally don't get back like again the images the relationships the component types we have to add another query param which is populate so what we can say here is and populate and then we can say that's equal to image and now you can see that we have the name and the image so this is the only data that we need to render this stuff right over here so yeah so that's that's pretty much it and of course inside of the fields we can ask for multiple things so maybe we also want the published act so we can say is comma published at we can execute this and now you can see we get the name we get to publish that so this is kind of acting like a graphql and now of course if you want to really just utilize graphql rather than rest api you can just utilize graphql because scrappy supports creating a graphql server which we'll look at a little bit later but that's pretty much really all we have to know so of course what we can do is we can have uh specify what fields we want and we can specify what things we want to populate in this section we're going to move on to a very important concept in strategy called relationships now to explain this what we're going to do is we're going to implement a new feature inside of our app what we want to be able to do is to group restaurants into specific categories so for example maybe we had a bunch of french restaurants we want to put that in the french category maybe we only have we have a bunch of breakfast restaurants that only serve breakfast well i want to put that inside of the breakfast category now of course we can actually put multiple restaurants into multiple categories maybe for example this restaurant over here only serves breakfast and they only serve french breakfast so well we want to put that inside of both the french category as well as the uh breakfast category so what we need to do is we need to create a new entity called category and somehow related to the existing entity which is the restaurants so let's let's just begin with what we know and that is creating a new entity and remember the entity is going to be a collection type because we could have multiple categories we can have again french breakfast african italian etc so in order to create eu collection type let's go to our content type builder and i'm just going to click here hopefully i didn't really make any changes and in here let me zoom out a bit in here what we're going to do is click on a new collection type and then right inside of this collection type we're going to call this category and you can see here that we get we get the singular as well as the plural so this is if you wanted to make a query for one specific category here if we want to make a query for multiple categories so what we're going to do is we're going to click continue and then in here very simply we're going to make this as simple as possible we just want to add text the name of the category so we're going to call this name and it's going to be a short text finish we're going to go ahead and save that let's give that a quick moment let's give it a quick moment hopefully there we go awesome cool so now what we want to do is let's just go ahead and let's add a new category and of course to do this we're going to go to our content manager and we're going to add a new entry we're going to call this entry let's say french so french food let's go ahead and save that and let's go back so now we can see that we have french food in there let's add a new entry as well let's add breakfast so we're going to say breakfast and we're gonna go ahead and save that and let's add one more entry so let's go here and let's say italian italian food awesome so let's save this so let's publish all of them because right now they're none of them are published so let's go here publish and then lastly let's go here and publish cool so now we have these uh categories however they're not linked to any particular restaurants so what i'm going to do is i'm going to add maybe another three restaurants and i'm really just going to focus in on the name so you can see here when we actually change the um the name of the name you can see that the order has changed you can see that now is all the way in the bottom i would actually prefer all the way at the top so what we could do is configure the view and we can move the name all the way up here so we can move that name save it give it a few moments and then if you go back you can see that we have the name all the way back up awesome and of course you can configure the view however way you want so the only thing that's required is the name so that's what that's the only thing i'm going to add just for time's sake let's just go here and let's just get some of these names so this name right here let's get that and let's save that and we are going to publish it as well and let's get some more restaurants up in here so we can have more entries so let's go here let's get this one this one looks very french and and of course if you're not on the website i'll have this on in the link in the description below but you can just make up whatever name you want doesn't really matter let's add a few more entries maybe two more let's have whatever this is let's copy that more french food you know what let's get an italian food this right here says italian so we're gonna say italian save publish and then the last thing that i want to get is uh let's get this cheese restaurant that just serves you cheese uh so let's go to back here we're going to add one more and we're going to add this save and publish so now you can see we have a bunch of different restaurants we have three different categories but the link between these two doesn't exist yet so in order to create this link what we're going to do is we're going to go to the categories and we're going to go actually we're going to go to the content builder we're going to go to the categories and we're going to add another field now this field is going to be a special field because it's going to be right here inside in the bottom which is going to be the relation field so we're going to click on this let me zoom in here so you can see here that we have two we have this this uh uh output right over here so what we're trying to do is we're trying to say that a category is gonna have a relationship with a restaurant so a category is gonna have a relationship with the restaurant now by default it's saying that a category has a relationship with a category what we can do is very simply change this entity to restaurant and now we have to specify what type of relationship we want to have so right here we're saying that a category has one restaurant well this doesn't really make that many sense because a category can have multiple restaurants in it and then a restaurant can also have multiple categories within it so what we want to actually specify is this right over here so categories has and belongs to many restaurants so a category can have multiple restaurants and then a restaurant can have multiple categories and this is known as a many to many relationship so what we can do is we can actually click finish here let me zoom out a bit and now what we can do is we can click save and at that point we should have the categories so we should have the categories so now what we can do is we can go back to our content manager and then if we go to french food for example let me zoom out once more you can see here that we have this relation so we have this relation that we didn't have before and then in here we can just simply select all of the restaurants that fall into the french french food category so for example we can select this we can select this we can select to this and now what we can do is we can save that and now we have this many too many relationships so you can see here that uh we have a category and it's related to multiple restaurants now what we can do is we can go to breakfast as well and select whatever we feel is also breakfast so maybe this and then this our breakfast and then lastly let's go to italian maybe there's one italian restaurant so what was that called again whatever this thing is i can't pronounce any of these so let's go here let's save that so now we have these relationships how terrific is that and you can see that the relationships actually go two ways let me zoom in once more actually i can't do that you can see here that uh if i were to click on a particular restaurant you can see that now this is in the french food category as well as the breakfast category all right awesome so maybe what we want to do is we want to do something like this where we query for all of the restaurants in a particular category so we want to have something like this let me just zoom in once more so we want to click on french and we only get the french food well what we can actually do now is query for a specific category and then query for the relationship which is the restaurants within that category so just for a quick example what we can do is well before we do that we need to do is we may need to make the categories accessible to everybody so let's go to settings let's go to roles let's go to public and let's go here and we're going to check off find and find one we're going to save that and then what we're going to do here is we're going to change the api to slash catigorees so what this is going to do is going to give us all of the categories you can see it's giving us french food it's going to give us breakfast it's going to give us italian and well we don't want all the categories what we what we want is we want the category as well as the restaurants so let's specify that we don't want any of these other stuff so let's we just want the name of the category so what we can say here is um fields we're going to say name so that we don't get any of the other stuff back and then we also want to populate the relationship so we're going to say and populate and we're going to say populate is equal to and we want to get the restaurant so we're going to say restaurants and if you were to execute this now you can see that we're getting the name and we're getting all of the restaurants and this is actually how we can really perform this filter over here uh this filter right over here now the only issue that we're really facing is that we're getting all of the categories and all of the restaurants however what we might want to do is just simply query for one category and get all of those restaurants now in order to do this we need to change our route so we over here we specify the singular we want to get just one category and then we do slash whatever that category id is so in this case it's one for uh for well no it's gonna be for french food it's gonna be one yes so one so we're looking at this id and then we are going to put one in there slash one and then if you were to execute this we get it's not found for some reason so let me actually just remove this for now so we're getting it's not found maybe two three okay let's for i'm not sure actually what is not found let's go over here oh okay so it's category so it's not it's not uh it's not uh singular it's still category slash one and now we only get one now we can add these other fields and you can see here that now we only get the french restaurant as well as their categories awesome and that is really how we perform relationships now one thing i want to quickly note is the relationship uh the relationship types that we can have so i'm just going to quickly add maybe not a new entry i'm going to quickly add another field i'm going to have the relationship now over here you can see that we have multiple different relationship types so you can see here you know category maybe we can add it to restaurant as well so over here a category has and belongs to one restaurant so this is a one-to-one relationship this is a one-to-many relationship where a category has multiple restaurants and then over here we have another relationship where a restaurant has multiple categories so this is another one-to-many relationship over here we have another mini to manual relationship and these are relatively self-explanatory i hope they make sense and you can just pretty much utilize the one that you want all right so that is relationships in this section of the course we're going to learn how we can sort our entities back so for example maybe we want to get the categories inside of alphabetical order so let's remove this over here and you can see that we get back and let's remove also populate restaurants what we can see here is we get back french food breakfast italian maybe for some reason we want to get these back in alphabetical order well this is actually really really easy all we have to do is add another query param so we're going to say and and this query param is called sort and then what we're going to do is we're going to say sort is equal to and then well the field that we want to sort by in this case we want to sort by the name of the uh the name of the attribute so or the name of the category so we're gonna say uh search or we're gonna send off this request and you can see here that now this is getting sorted now by default what ends up happening is that it sends in ascending order if we want to sort by descending order what we can very simply do is add colon and then descending or des which is the abbreviation so you can see here that now we're doing this in uh descending order now of course we can sort by multiple things so if for example you know we have two names that are italian which shouldn't be possible but if we do what we can do is we can say okay well if we have two names that are italian then what we want to do is we want to sort by another field at that point so what we can say is maybe created at so when it was created so now if you were to send off this request nothing really is going to change but again this symbolizes that we can sort by multiple things so this is really really simple it's not that difficult and quite a small lecture in this section what we're going to do is learn about how we can filter for specific fields now in order to do this what i want to do is go to our content builder and then i want to go to restaurants and i don't want to i want to add another field and this field is going to be the average price of a particular meal at that restaurant and so this is going to be a number so we're going to say number and then in here i'm going to say av so av and then price standing for the average price of a meal and over here we can choose our format it could be an integer it could be a big integer i'm going to use decimal so we're going to use decimal for this and then we're just going to go ahead and finish we're going to click finish we're going to go ahead and save this let's give it a few moments let's wait wait wait come on let's go awesome and so now what i want to do is let's go to our content manager and inside of our restaurants i want to add some average price so over here the average price of whatever this restaurant is so maybe the average meal cost thirty dollars so let's save that and then let's go back to restaurants and then over here maybe the average meal here cost forty five dollars super expensive let's go here and let's go over here let's add ten dollars for this one this one's very cheap uh and then let's go here let's say this one twenty dollars and then the last one which is the cheese one let's say this one you know this cheese is super expensive 90 is the average spend okay so let's go back here and what i want to do is i want to query for a bunch of restaurants so we're going to go here query for all these restaurants and now you can see here that we also get the average price but what if we wanted to query for all of the restaurants that are below 30 dollars average price so any anything that's super top-notch expensive i'm not interested in and we want to actually have that feature inside of our application i know here it doesn't have it but maybe we do maybe we want to have a feature where they can filter by price well how do we do that well what we can actually utilize is the well filter param so we can say filter and then in here we can very simply say that we want to filter by well what do we want to filter well we want to filter by the average price so we're going to say average price and then here we're going to specify what we want to filter by with brackets so these square brackets then we're going to say we want to filter by average price and then we want to specify uh that we want the average price to be less than or equal to 30. so how do we do that well we add another square bracket and then in here we need to add something known as an operator now this operator is going to specify how we want to filter in this case we want to filter by less than or equal to a specific number so we're going to say dollar sign and then let's less than or equal to so over here is l t e which is stands for less than or equal to and then we're going to say equal to 30. so right here what we're doing is we're saying that hey we want to uh filter for the average price that is less than or equal to 30. so now if we were to execute this so if we were to quickly execute this now you can quickly see that of course it doesn't work now i wonder why that is let's look at that again let's execute it again it does not work the reason why that didn't work is first of all this should be filters and then second of all we shouldn't have this equal sign so it should be filters and then square bracket right over here so now if we were to execute this again you can see that it works so now you can see here that we're filtering by all the restaurants that have a price that is less than or equal to 30. so we have this we get this and then we get this now if we want all of the restaurants that are less than 30 we can just change the operator so we could just say less than now we only get these two restaurants now you might be asking yourself well what are the different operators that i can utilize in order to do this the best thing that you can utilize is the documentation so let's go to the documentation the developer docs and then let's go to the api reference let me just zoom in here for you guys so you would go to the developer resources api reference and you would go to the rest api and then in here you can just click on filters and you can see many of the different operators so we have equal equal to not equal to less than less than or equal to greater than greater than or equal to in which uh you would just specify an array and it makes sure that this thing is inside of that array not in contains not contains so you can see here there's a bunch of different things that you can do and there's also a bunch of different examples in this section of the video what we're going to do is add another entity as well as another relationship within our strappy application so specifically what i want to do is if i were to click on a particular restaurant you can see here that if i were to scroll down you can see that i can get the reviews and you can see that there are multiple reviews associated to a particular restaurant and so what i want to do is i want to add this reviews entity so in order to do this let's go here to our content manager we're going to go to our builder we're going to add review so we're going to say review so we're going to say review here we're going to go continue and then in here we're going to make this as simple as possible so what we're going to do is we're going to go over here to text and inside of the text or we're going to just say long text for this we're going to say the review itself or maybe we can call this content content and then advanced setting we're going to say that this is required you need to have a review and unique well we don't you don't want a unique field and then we want to just give it a star rating so some sort of star rating now what we could do is we could give this a number so it could be something like one two three four five six seven eight whatever however i wanna be more precise with it you can only really give us a review of one two three four or five so instead what i'm gonna do is i'm gonna pick an enum so an enum is going to look something like this and in here i'm going to say rating now in here i'm going to say you can give us a rating of one two three four or five so these are the only values that you can give us you can't give us anything other than this so we're gonna go ahead and we're gonna say that this is also a required field and we can just say um finish now the other thing that we want to do is actually add another field and this is going to be the relationship now in relationship the review is going to be related to the restaurant not a category so we're not going to be able to review a category we're going to be able to review a restaurant now what is the relationship here well a restaurant can have multiple reviews but any one review should belong to only one restaurant let me quickly say that again so any one restaurant so for example this restaurant right here can have multiple reviews so you can see here it has five reviews however this one review specifically should not belong to multiple restaurants so this review specifically shouldn't be with this restaurant and then another restaurant it should only be tied to one restaurant so what we want is a one-to-many relationship so if you go over here we're going to say that a rest or or a review so a review can have multiple um i can can only belong to one restaurant so a better way of phrasing it is a restaurant can have multiple reviews so we want to do is we want to specify this relationship restaurant has many reviews so let's click on finish zoom out a bit out one more we're going to click on save and there we go so we're gonna save that now here's the thing we don't want our admin users that have access to this particular this particular dashboard to add reviews we don't want to have that we actually want the the users to have the ability to create reviews so what we might want to do is give those users the ability to create data inside of our database so in order to do this what we're going to do is we're going to go to settings i don't know what happened there let's refresh we're going to go to settings we're going to go to roles we're going to go to public and what we can say here is well a public can find they can also find one review and if they want they can also uh um create a review so they can also create a review so what we can do is we can go ahead and save this and now what we need to do is learn how we can give our users the ability to create entities let's actually get to that in the next section in this section what we're going to do is learn how we can execute post requests in order to create data now specifically what we want to do is we want to have the ability to create a review so what we're going to do is we're going to go to postman and then right in here we're going to create a post request so we're going to say here apis slash review and let's actually take a very quick look at the end point so you can see here slash api slash reviews and then inside of the request body we need to add some data so we're going to say raw and then we're going to say json and then in here we need to specify the content of the review as well as the stars so over here we can we can specify that by first specifying that we want to add some data and then in here we're going to say the content and then we can say that this is going to be um you know maybe this this was great i love this restaurant this is a great restaurant great restaurant and then we can specify a rating of four maybe now of course what we want to do is we want to link this restaurant or we want to link this review to a particular restaurant so in order to do that all we have to do is say a quote restaurant and then specify the id of the restaurant i'm gonna say id of three and that should correlate to whatever restaurant has an id of three which is let's see here which is the which is this restaurant cafe whatever so if i were to click on this you can see that this restaurant at this point has zero reviews if i were to execute this now and if you were to look here it seems like everything is successful this is a great restaurant rating of four and now if i were to refresh this now you can see that this restaurant actually has a review so you can see here that we have this review right over here now if we were to go to the review you can see that we got this is a great restaurant and we also have a rating of four and now this is linked to this restaurant awesome so that's really all we have to do to learn about um creating data now one thing that i want to note and we aren't going to get to this in this crash course uh but of course you can update data as well as delete data and i just want to show you if you want to learn more about that what you can very simply do is go to the documentation i'll have this in the link in the description below let's zoom in once more so you can see different ways that you can get entries get a one entry create entries update entries and create and delete entries by the way all of the information that that i'm just talking about in this video is coming straight from this documentation here and actually they have more details as well if you want to read up more and you want to become an even better graphql expert or not graphql strappy expert so what we can do here is we can just click on update and entry so to update an entry this is going to be the um the request so it's going to be slash api slash restaurants and then slash whatever restaurant id you want to update and then inside of the rec.body you're going to have the data so we're going to say here data just like we had inside of the post request but here we're going to specify that we want to change the title of the restaurant to hello maybe we want to change the relationship so we can change the relationship of the restaurant to maybe four or whatever so that's updating and then this is deleting so deleting is a lot simpler actually we don't have to put anything inside of the body now notice that uh um for update it's a put request it's not a post request and for delete it's a delete request and it looks exactly the same as the put except we're not going to put anything inside of our body we're just going to click on this over here now we're not going to get to that in this because it's relatively simple and if you understand how to make a post request i'm going to assume you know you this would be relatively easy how to make a a put or a delete request okay so that is really pretty much it another thing i want to quickly cover is authentication so what if this route over here we just wanted our authenticated users to have access to that route only people that are logged into our application have access to uh creating a review so let's actually talk about that in the next section in this section we're gonna learn all about how we can add authentication to our strappy application now one thing i want to note is the different types of users that we can have inside of strappy so if you were to go to settings over here and you go to administration panel what you can do is you can create users that have access to this strappy dashboard and you can have multiple users you can have an author so a person that can manage content over here an editor so this is person that can edit content and a super admin a person that can do whatever but these administration panel users are users that have access to the strappy dashboard that we're in right now and you can see that we have myself over here and i have super admin access if i want if i have another person that i want working on my project i can create a new user and then i can give them okay i can input their email and they can give them whatever access they want now there's another type of user known as just simple authenticated users and these are the users that you actually see right over here and these are any users that can come into our applications visit our website and very simply log in and now they're just authenticated users within our application however they don't have access to the strappy dashboard they're just authenticated they're limited to what we present inside of the front end so over here what we can actually do is we can go to these settings we can go to the roles and we can specify what authenticated users can do so over here we've been primarily dealing with public users so what i'm going to do is i'm going to go to reviews i'm going to say public users cannot create uh um cannot create a under overview only authenticated users can do that so now what we can do is we can click on authenticated and then we go to categories let's say that they can find they can find one they can also find to find one restaurant however they cannot create a restaurant and then in here they can find to find one and create a review so now if we were to save this that is awesome and now if i try to make this exact same request again i get an error and i get a forbidden error so only users that are authenticated within my application are able to make this post request now you might be asking well how am i going to authenticate users well very simple strappy has an end point called slash api slash local slash register so any user that wants to get authenticated what they need to do is hit this particular route right over here and this is going to be a post request now inside of the rec.body we need to specify the credentials of the user so if you go to our content manager you can see that a user has a username as well as an email so we're going to go over here and we're going to say username is going to be let's just call myself latheharb and we're going to say email is going to be um let's just say lathatlath.lathe what a great email and then we're going to specify the password of that particular user so password and we're not going to be so the user is going to actually hit this endpoint or we're going to be passing this data in so then we're going to say let's say the password is password 1 or password exclamation mark and now once we hit this endpoint this method is not allowed the reason why that didn't work is that it should be slash api slash auth slash local slash register and we also for authentication we don't want to have this data object so it's just going to be an object with user email and password so now if we were to send this off you can see that we get back a response and specifically we get back this json web token and if you don't know what json web tokens are and you're really interested in learning about authentication i do have a jw2 crash course that you can take but this is what we're going to utilize in order to send authenticated requests so this is a token that ensures we are who we are and we are authenticated so let's actually just quickly copy this and let's go to our content manager if you go to users you can see that we have created this new user and now what i want to do is i want to add a review this user wants to add a review so in order to add a review let's go slash api and we're going to go slash reviews so we're going to go slash reviews and then inside of the body i'm just going to quickly do a control z until i can go back to what we had before and i want to add this request however at this point we're not authenticated so so this is an unauthenticated request just because we created this user what we need to do is we need to attach this token to this request so if i were to make this request again let me just quickly copy this token to make sure we still have it so if i were to make this request again you can see that we get a 403 forbidden now in order to make this an authenticated request what we need to do is go to our header and inside of our header we need to specify a um a authorization key and then in here we can say bearer and then that token so this doesn't make much sense to you this is how we make authenticated requests and again i do have a crash course that teaches this so go ahead and take that if you want to learn so now what we can do is we can send this off again and now it works completely fine so this is how we can make authenticated requests so now if we go to reviews you can see now we have two reviews for the same restaurant awesome and of course we can change the restaurant but that right here is authentication in this section we're going to learn about single types so let's go over to our food website and what if we wanted to manage the content with this about us page well what we can do is add a content type but that doesn't really make all that much sense the reason why it doesn't make much sense to add this collection type is because we don't have a multiple about us pages we only have one well at this point what we're going to do is we're going to add a single type and we're going to call this something like about us so about us so we're gonna say about us like that and then we're gonna go here we're gonna say continue and then over here we can add whatever it is that we want so we can go back to our website really all we have inside of this content type is um is the rich media so let's go here or the rich text we can say here let me just say content and if we want we can also add other fields for the links as well so the the facebook links the twitter links the slack links but i don't want to do that because you guys probably get the point so we're going to say here we're going to go ahead and save this let's just wait wait wait wait wait wait and now what we can do is we can go to the content manager and you can see that whereas over here we can have a list of different things the single type we only have one thing now you can add whatever it is that you want so you can see here you can add whatever you want you can add spacing you can also make things bold if you want so over here you can bold it over here you can italicize some things and this is in markdown so now if you go to preview mode you get this for some reason i'm not sure why that's not really working let's let's fix that a little bit let's see i'm actually a little surprised i should show you the preview where everything is bolded but it's not you guys probably get the point though i'm not sure actually why that's not working but that's pretty much all you have to know about single types i'm not really gonna um query for this or anything because the way that we query for things is exactly the same i'm just gonna go ahead and save it i just wanted to show you in this video what we're gonna do is learn how we can convert our strappy rest api to a strappy graphql server and luckily this is really really easy all we have to do is we need to go to our terminal we need to move into our restaurants directory wherever our strappy application is we're going to execute yarn strappy and then install graphql and i'm always getting this error you guys probably are not getting this error i have to append sudo or prepend sudo and now you can see now we're installing the graphql dependencies so let's just wait a little bit here this might take some time so i might have to pause the video but this is how we can uh add graphql into our strappy application so let's just wait here a bit i don't care how long this ends up being i am just going to wait it out now once that's done what you can do now is very simply do yarn develop again and now of course i'm getting a permission error so i'm going to do sudo yarn develop and what this should do is just rerun our application so right now it's it's off because we close the terminal so i should re-run it and if i were to refresh this you can see that everything is fine however now what we can actually do is go to localhost a one three three seven and then we can say slash graphql so slash graphql and now if you were to enter this you can see we enter the graphql playground if you're familiar with graphql this is what it looks like and then in here you can perform whatever query you want so you want the me query we also have review query reviews queries a lot of different queries so we can say restaurants and we can ask specifically for what we want we want the data let me zoom in here for a bit we want the name what's going on here the name or the id i guess the id of the restaurant let's actually go to the documentation i'm not really sure exactly uh how this looks like so let's go over to the docs and let's filter for a specific over here we get the data and then okay then we have the attributes and then the attributes is going to have the name the description image opening hours all these different things so we can say here id we can say attributes we can say name and now if we were to run this query you can see that we get all of the restaurants as well as our names we can also if you want the opening hours you can specify that we want the hours there we go if we want the images you can specify that we want i don't know maybe the the the large image uh let's see here id they have attributes as well as to get the attributes and then let's get the uh let's get the width oh i guess the width is the type itself i'm not sure you're gonna have to read the documentation on this uh but you can see here that we're getting the width i'm not really sure how we can get the url we're gonna have to look at the docs for that of course you can also perform mutations and if you want to add that authorization header you can add it right over here this is just for all of you graphql fanatics and everything that we learned about when it comes to filtering sorting all these things you can also do inside of graphql now we're not going to cover that because then this course will be insanely long however what you can very simply do is well as per usual go to the documentation go to api reference and then you can go to graphql api and you can see here it teaches you how you can query for things mutate things filter so you can see here filter so you can see that this is how we filter for things so it seems as though we can just have a filter field right over here inside of the restaurants so let's just say here we have sort filters pagination whatever uh and that's how we can work with graphql inside of strappy

Channel: Laith Harb

Views: 5,210

Keywords:

Id: vcopLqUq594

Length: 85min 29sec (5129 seconds)

Published: Tue Dec 07 2021