Strapi Tutorial and Introduction

hello and welcome to this tutorial we are doing a step by step introduction is strapping in this tutorial we'll go through the beginning steps how you could start a project just like the food advice wrap the foodie of Iser app looks like this here we have a list of restaurants in Paris and you see as we scroll down we have more restaurants now if we visit the cafe Bulevar what we'll see is a bunch of images opening hours details location and contact information and some reviews now what we're doing this tutorial is create a strappy app similar to this where you get to see how you would start it so let's go ahead and close this window and begin let's go ahead and open up the terminal navigate to whichever folder you'd like to put the strappy project into once you're there we have a choice of two different commands to install and create a new strappy project one uses yarn and one uses MPX you have in px if you have not installed we recommend using yarn so in this project we are going to use that if you don't have yarn and you don't want to install it use the following command MPX create strapping app the project name which is my project and then quick start for the quick start flag the yarn command looks like this yarn create strappy app my project then quick start strappy will take a few moments to install and because we use the QuickStart strappy will automatically install the needed packages but also set up a sequel Lite database which we'll use to prototype this project in production you would use another database such as my sequel PostgreSQL or Maria DB you can use MongoDB with strappy but you would need to also develop using MongoDB on your development environment which means that you can't use quick start using MongoDB and setting it up is just as easy as setting it up a quick start you just need to have MongoDB running in the background and leave off the quick start flag let's go ahead and just wait for this to finish as you can see my browser when they're open to the welcome screen here we're going to go ahead and create a new administrator we recommend clicking this to get all the news and then just click ready to start these are the getting started videos and you can access them anytime but for now we're going to close them underneath your name here you're gonna see manage the administrators and here we have each of the administrators that are part of this project from the dashboard we can see users underneath the content types we're going to go ahead and create a user for Pabu cose a user and an administrator are different an administrator has access and rights to the administration dashboard administrators can for example add content add plugins and upload images they can also create content types and otherwise deal with roles and permissions in a front-end user or simply just user is someone who interacts with your project to the front end and front end user can for example be an author of an article make a purchase it has an account let me leave a review or may leave a comment right now we just have an administrator so our next thing to do is to create a new front end user for públicos to do so click the add new user add his name email give my password we'll go ahead and confirm it and then give them a role of authenticated and there we go we have now saved it let's go back to the dashboard as you can see here there's a big button here saying create your first content type but what is a content type a content type is a collection of data that's represented by different types of fields for example a content type that's a called restaurant be used to show information about restaurants a restaurant could have a name a restaurant could have an image and a description and that would be at a minimum a content type of restaurants but we could also add things like categories or a nother restaurant that it's with including you know the hours of operation basically a content type is a sort of blueprint for the type of data that you want to keep track of and enter you could say that a content type is the schema of your data structure in the next part we're gonna go ahead and create a restaurant content type so let's get going let's go ahead and create the restaurant content type the first thing you need to do is actually give your content type a name these names are singular and all lower case in this case they'll be restaurants down here in the description will say restaurant listings and then click done the next thing you see is a large selection of different fields that we can attach to this content type we're going to do the name and that's going to be a string we'll call it name and under Advanced Settings here we'll go ahead and say it's required and that needs to be unique and it's at another field this one would be a rich text field we're going to call this one description it also is required and now let's go ahead and add another field this field is going to be the media because we're gonna have a large image for the restaurant we'll go ahead and call this image in other advanced settings also say it's required let's say that we're done and we'll go ahead and save Strappies going to restart and when it's done we'll go ahead and go back to the dashboard when you come back to the dashboard you'll see that the create your first content type is no longer there but we do need to create another content type this is going to be for the categories so let's go back to the content type builder click on I had a content type and then from here we're gonna call it category remember it needs to be lowercase in singular and these are going to be called restaurant categories let's go ahead and click done so the first thing for category it needs a name so we'll go to string and say name and this is gonna be required and a unique field let's go ahead and add the second field this is a special kind of field called a relational field so let's click on that and in here we can go down and click on restaurant because that's where the relation is going to happen between categories and restaurants and in this case calories can and do belong to many restaurants and restaurants can and do have many categories and with this we're good to go so let's go ahead and go done and then save this content type with the category content types saved we can now add a group and in this case we're going to make a group for the hours of operation for a restaurant so down here we see add a group and put a name we're gonna go hours of operation and in the description we can simply say hours of operation in the Advanced Settings there's nothing we need to do here so let's go ahead and click done now this is gonna have three strings the first string is going to be called day interval is there going to be the days that the hours applied to and in the invent settings this is required let's add another field and another string and this one's gonna be called opening hours and it is required and now let's add another field call it a string and call it closing hours we're done and let's go ahead and save this and wait for strap you to restart now we have content type showing category content type in the restaurant content type and we have the group showing the hours of operation we could have other content types that use this group so we need to attach it specifically to the restaurant one we do that by clicking on restaurant adding another field called group and on the group we make sure that we select the right one in this case it's called hours of operation we got to give this a name so we'll call it restaurant hours it's repeatable because restaurant could have multiple hours for different days under event setting we're gonna go ahead and click required we're going to click done and then we're gonna go ahead and save it now that's saved let's go ahead and modify how the group is going to be displayed in the actual entry screen for the restaurants content type we're gonna change the labels and we're going to rearrange it a little bit in terms of the fields themselves we do that in the Content Manager we're going to go to groups and then in the hours Operations Group here these are the view settings now let's go ahead and start by clicking on opening hours and dragging it right next to closing so now this will show up before closing hours the next thing we want to do is change label four-day interval it makes more sense if it said they four days and then a description we can paste in some instructions that say how to fill out this field the next thing we want to do is go to opening hours and make this also a little reader nicer to read it's at the end opening hours and let's go ahead and do that also for closing hours with that done we can go ahead and save this it will ask us if we really want to confirm and we'll say confirm for yes now that that is done saving we can go ahead and add our first restaurant let's go over to restaurants click on add a new restaurant give it a name my Scottie restaurant will paste in some content there upload an image and now we need to enter in our restaurant hours so add a new entry this is gonna be for Sunday through Monday and it's going to be closed it's at another entry this will be for Tuesday through Friday and the hours for Tuesday and Friday are from noon all the way to closing hours which is that twenty to thirty or ten thirty and then the last entry is going to be for Saturday and on Saturday it's open from 11:30 all the way until four o'clock or 1600 so we can scroll up and play safe so you see the biscotti restaurant listed here and the next thing to do is to add some categories and then assign them to this restaurant so let's go ahead over here and click on categories we're gonna add the first category by clicking on add new category and we'll call this one French food and we'll go ahead and attach it here to the biscotti restaurant then it's saving and it's at a second category we'll click on add new category and then click brunch now we could go ahead and add it like we did the other one but I want to show you the other and more common way to add categories to content types click back to restaurant go back to the same restaurant we were working on before and if we click here it's going to show us all the categories that are available to attach in this case we now see brunch so let's go ahead and save that so now we've done everything we need to do for this restaurant we've added the content uploaded image set the hours and we've assigned it some categories so what's that the next step is to modify the roles and permissions so let's go now to the roles and permissions here in the menu we're going to go ahead and click on the public what exactly our roles and permissions well what this means is when we're accessing our API who can access the data and what can you do with it let me give you an example for the restaurant if we go find and find one we see here that's going to give us the route so let's open up here and go localhost and go restaurants and we're getting an error code it's saying forbidden and status code 403 and what that means is that we just can't get the data so let's go ahead now and go find and find one for restaurant and do the same thing for category and then we'll save it now that it's Sade and we refresh we're able to get the restaurant and we can also do it with a fine one by typing in the ID which is one so now you've seen the whole process so how to setup and create a strappy project how to create a content type add data and otherwise start a food advisor project or any project that you would like to create your next actions could include doing additional tutorials that you'll find on our blog or in our documentation you can get help if you need it from Stack Overflow you can follow us on twitter to get the latest news or you could join our vibrant and active strapy community at slack

Channel: Strapi

Views: 52,679

Keywords: Strapi, headless CMS, react, strapi blog

Id: yH6cQRRWNFI

Length: 14min 44sec (884 seconds)

Published: Thu Sep 12 2019