Modified all Quick Start tutorial and replaced all images for Beta - in tutorial

This commit is contained in:
davidkartuzinski 2019-06-14 18:53:32 +02:00
parent 97c0cab131
commit 5f02286fa8
43 changed files with 90 additions and 132 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 887 KiB

View File

@ -10,10 +10,9 @@ By following this tutorial, we will get Strapi installed globally onto your syst
::: tip NOTE
You need to have ***Node.js and npm*** installed on your system prior to following these steps. If you do not have Node.js and npm installed or are not sure, please visit our [Installation Requirements](http://localhost:8080/documentation/3.0.0-alpha.x/getting-started/install-requirements.html).
You need to have **_Node.js and npm_** installed on your system prior to following these steps. If you do not have Node.js and npm installed or are not sure, please visit our [Installation Requirements](http://localhost:8080/documentation/3.0.0-alpha.x/getting-started/install-requirements.html).
:::
**Table of contents:**
1. [Install Strapi globally](#_1-install-strapi-globally)
@ -59,9 +58,6 @@ Commands:
*
```
## 2. Create a new project
Navigate to your parent `Projects/` directory in your command line. Enter the following command to create a Strapi Quick Start project.
@ -113,12 +109,10 @@ $ cd cms
$ strapi start
```
This will open your default browser to the Welcome page for creating an admin user.
![Strapi Welcome Page for creating admin user](../assets/quick-start-detailed/strapi-welcome-screen.png 'Strapi Welcome Page for creating admin user')
::: tip NOTE
Using the `--quickstart` flag will install Strapi using a [SQLite](https://www.sqlite.org/index.html) database. You may leave off the flag, but will need to follow the configuration steps for a different database.
:::
@ -141,21 +135,13 @@ After your admin user is registered, you will see the Strapi admin panel:
![Strapi Admin Panel](../assets/quick-start-detailed/AfterRegistrationScreenAdminPanel.png 'Strapi Admin Panel')
---
Every user is found by clicking in the left menu: **CONTENT TYPES** --> **Users**.
From here you can add and edit users.
![Strapi Users Page](../assets/quick-start-detailed/AdminUserInUsers.png 'Strapi Users Page')
## 4. Create a Content Type
At this point, your project is empty. You need to create a **Content Type**.
We can define a **Content Type** as a collection of entered data represented by fields. For example, a **Content Type** called `restaurant` may be intended to display information regarding restaurants. A `restaurant` has a `name`, a main `image`, a `description`, maybe even a link to the `restaurant menu`.
We can define a **Content Type** as a collection of entered data represented by fields. For example, a **Content Type** called `restaurant` may be intended to display information regarding restaurants. A `restaurant` has a `name`, a main `image`, a `description`, maybe even a link to the `restaurant menu`.
Another example, is a **Content Type** called `menu` which is made up of `menu items`. These have a `name`, `description of the menu item`, an `image` and perhaps even a `list of ingredients`.
Another example, is a **Content Type** called `menu` which is made up of `menu items`. These have a `name`, `description of the menu item`, an `image` and perhaps even a `list of ingredients`.
Any collection of entered data that can have fields can be a **Content Type**. They allow you to manage a class of information in an organized manner.
@ -293,7 +279,6 @@ A new directory has been created in the `Project/cms/` folder of your applicatio
---
## 5. Manage and add data to Content Type
After creating the **Content Types**, we now need to manage and add data to the new Content Types.
@ -350,7 +335,6 @@ If you want to add Categories directly from the **Restaurants** Content Type, yo
:::
---
## 6. Set roles and permissions
@ -395,10 +379,11 @@ Forbidden Access Looks like this:
::: tip CONGRATULATIONS
👏 Congratulations, you have now completed the Strapi Quick Start. Where to go next?
- Learn how to use Strapi with React ([Gatsby](https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi) or [Next.js](https://blog.strapi.io/strapi-next-setup/)) or Vue.js ([Nuxt.js](https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7/)).
- Read the [concepts](../concepts/concepts.html) and [articles](../articles/) to deep dive into Strapi.
- Get help on [StackOverflow](https://stackoverflow.com/questions/tagged/strapi).
- Read the [source code](https://github.com/strapi/strapi), [contribute](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md) or [give a star](https://github.com/strapi/strapi) on GitHub.
- Follow us on [Twitter](https://twitter.com/strapijs) to get the latest news.
- [Join the vibrant and active Strapi community](https://slack.strapi.io) on Slack.
:::
- Learn how to use Strapi with React ([Gatsby](https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi) or [Next.js](https://blog.strapi.io/strapi-next-setup/)) or Vue.js ([Nuxt.js](https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7/)).
- Read the [concepts](../concepts/concepts.html) and [articles](../articles/) to deep dive into Strapi.
- Get help on [StackOverflow](https://stackoverflow.com/questions/tagged/strapi).
- Read the [source code](https://github.com/strapi/strapi), [contribute](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md) or [give a star](https://github.com/strapi/strapi) on GitHub.
- Follow us on [Twitter](https://twitter.com/strapijs) to get the latest news.
- [Join the vibrant and active Strapi community](https://slack.strapi.io) on Slack.
:::

Binary file not shown.

Before

Width:  |  Height:  |  Size: 929 KiB

After

Width:  |  Height:  |  Size: 984 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 897 KiB

After

Width:  |  Height:  |  Size: 955 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 887 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 903 KiB

After

Width:  |  Height:  |  Size: 953 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 969 KiB

After

Width:  |  Height:  |  Size: 819 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 898 KiB

After

Width:  |  Height:  |  Size: 754 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 896 KiB

After

Width:  |  Height:  |  Size: 969 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 977 KiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 904 KiB

After

Width:  |  Height:  |  Size: 963 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 884 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 896 KiB

After

Width:  |  Height:  |  Size: 953 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 987 KiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 973 KiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 753 KiB

After

Width:  |  Height:  |  Size: 802 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 897 KiB

After

Width:  |  Height:  |  Size: 956 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 912 KiB

After

Width:  |  Height:  |  Size: 968 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1015 KiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 950 KiB

After

Width:  |  Height:  |  Size: 875 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 933 KiB

After

Width:  |  Height:  |  Size: 996 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1014 KiB

After

Width:  |  Height:  |  Size: 866 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 978 KiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 919 KiB

After

Width:  |  Height:  |  Size: 962 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 949 KiB

After

Width:  |  Height:  |  Size: 803 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 963 KiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 990 KiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 842 KiB

After

Width:  |  Height:  |  Size: 895 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 854 KiB

After

Width:  |  Height:  |  Size: 909 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 916 KiB

After

Width:  |  Height:  |  Size: 997 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 978 KiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 848 KiB

After

Width:  |  Height:  |  Size: 902 KiB

View File

@ -1,12 +1,12 @@
# Tutorial
This Tutorial is written for developers who prefer a more detailed step-by-step introduction. (A less detailed introduction can be found at [Quick Start Guide](/3.0.0-beta.x/getting-started/quick-start.html).)
This Tutorial is written for developers who prefer a more detailed step-by-step introduction. (A less detailed version can be found at [Quick Start Guide](/3.0.0-beta.x/getting-started/quick-start.html).)
<div class="video-container">
<iframe width="800" height="450" src="https://www.youtube.com/embed/nux0djdHmY8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="800" height="450" src="https://www.youtube.com/embed/_uSZpxy7B8E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
By following this tutorial, we will get Strapi installed globally onto your system, and then create your first Strapi project.
By following this tutorial, you will install Strapi globally on your system, and then you will create your first Strapi project.
::: tip NOTE
@ -44,16 +44,16 @@ Options:
Commands:
version output your version of Strapi
console open the Strapi framework console
new [options] create a new application
develop|dev [options] Start your Strapi application in development mode
new [options] [name] create a new application
start Start your Strapi application
build Builds the strapi admin app
develop|dev [options] Start your Strapi application in development mode
generate:api [options] <id> [attributes...] generate a basic API
generate:controller [options] <id> generate a controller for an API
generate:model [options] <id> [attributes...] generate a model for an API
generate:policy [options] <id> generate a policy for an API
generate:service [options] <id> generate a service for an API
generate:plugin [options] <id> generate a basic plugin
build Builds the strapi admin app
install [plugins...] install a Strapi plugin
uninstall [options] [plugins...] uninstall a Strapi plugin
help output the help
@ -66,42 +66,43 @@ Navigate to your parent `Projects/` directory in your command line. Enter the fo
Path: `~/Desktop/Projects/ $`
```bash
strapi new cms --quickstart
strapi new my-project --quickstart
```
The command will automatically create a Strapi project `cms` folder within your parent `Projects/` directory.
The command will automatically create a Strapi project `my-project` folder within your parent `Projects/` directory.
::: tip NOTE
When you create a new Quick Start project in Strapi, you will download all the node modules, the Strapi files necessary and the Strapi plugin files. THIS STEP CAN TAKE SEVERAL MINUTES DEPENDING ON YOUR INTERNET CONNECTION SPEED. Please wait for the process to complete before cancelling or trying to continue.
When you create a new Quick Start(`--quickstart`) project in Strapi, you will download all the node modules, the Strapi files necessary and the Strapi plugin files. **THIS STEP CAN TAKE SEVERAL MINUTES DEPENDING ON YOUR INTERNET CONNECTION SPEED**.
Please wait for the process to complete before cancelling or trying to continue.
:::
::: tip NOTE
You can replace the `/cms` project name with any name you want.
You can replace the `my-project` name with any name you want. E.g. `strapi new newProjectName --quickstart`, this creates a folder `./Projects/newProjectName`.
:::
You will see something like this:
```bash
🚀 Start creating your Strapi application. It might take a minute, please take a coffee ☕️
🚀 Creating your Strapi application.
⏳ Testing database connection...
The app has been connected to the database successfully!
 Connected to the database
🏗 Application generation:
✔ Copy dashboard
✔ Installing dependencies
✔ Copying files ...
✔ Installing dependencies ...
✔ Building your admin UI ...
👌 Your new application cms is ready at /home/str/Desktop/Strapi/Projects/cms
👌 Your application was created at /Users/userName/Desktop/Projects/my-project.
⚡️ Change directory:
$ cd cms
⚡️ Starting your application...
> my-project@0.1.0 develop /Users/UserName/Desktop/Projects/my-project
> strapi develop
⚡️ Start application:
$ strapi develop
```
This will open your default browser to the Welcome page for creating an admin user.
@ -109,7 +110,7 @@ This will open your default browser to the Welcome page for creating an admin us
![Strapi Welcome Page for creating admin user](../assets/quick-start-detailed/strapi-welcome-screen.png 'Strapi Welcome Page for creating admin user')
::: tip NOTE
Using the `--quickstart` flag will install Strapi using a [SQLite](https://www.sqlite.org/index.html) database. You may leave off the flag, but will need to follow the configuration steps for a different database.
Using the `--quickstart` flag will install Strapi using a [SQLite](https://www.sqlite.org/index.html) database. You may leave off the flag, but will need to follow the configuration steps for a different database. You will need to have your database choice already up and running prior to creating your project.
:::
## 3. Create an admin user
@ -119,7 +120,7 @@ The first user you create is the root user for your project. This user has all p
1. **Username**, create a username for login access to your project, eg. `paulbocuse`
2. **Password**, create a unique password for your project
3. **Email address**, this will be used for recovery
4. Check **Receive news**, this is optional but recommended
4. Check **Receive news**, this is optional but **recommended**
5. Click the **Ready to Start** button
![Example completed Welcome Screen with Admin User information](../assets/quick-start-detailed/welcome-screen-entered-information.png 'Example completed Welcome Screen with Admin User information')
@ -130,29 +131,23 @@ After your admin user is registered, you will see the Strapi admin panel:
![Strapi Admin Panel](../assets/quick-start-detailed/AfterRegistrationScreenAdminPanel.png 'Strapi Admin Panel')
---
## 4. Create a new Content Type
Every user is found by clicking in the left menu: **CONTENT TYPES** --> **Users**.
**Content Types** are a collection of entered data represented by fields. For example, a **Content Type** called `restaurant` may be intended to display information regarding restaurants. A `restaurant` could have a `name`, a main `image`, a `description`, maybe even a link to the `restaurant menu`.
From here you can add and edit users.
Another example, could be a **Content Type** called `menu` which is made up of `menu items`. These could have a `name`, `description of the menu item`, an `image` and perhaps even a `list of ingredients`.
![Strapi Users Page](../assets/quick-start-detailed/AdminUserInUsers.png 'Strapi Users Page')
::: tip NOTE
## 4. Create a Content Type
More **Restaurant** themed **Content Types** can be seen in the Strapi demo site: [Strapi Foodadvisor](https://foodadvisor.strapi.io/).
At this point, your project is empty. You need to create a **Content Type**.
:::
We can define a **Content Type** as a collection of entered data represented by fields. For example, a **Content Type** called `restaurant` may be intended to display information regarding restaurants. A `restaurant` has a `name`, a main `image`, a `description`, maybe even a link to the `restaurant menu`.
Another example, is a **Content Type** called `menu` which is made up of `menu items`. These have a `name`, `description of the menu item`, an `image` and perhaps even a `list of ingredients`.
Any collection of entered data that can have fields can be a **Content Type**. They allow you to manage a class of information in an organized manner.
We will use the **Content Type Builder** plugin to make the process easy to create a **Content Type**.
At this point, your project is empty. You need to create a new **Content Type**.
Go to the **Content Type Builder** plugin, located in the left menu: **PLUGINS** --> **Content Type Builder**.
We will create two content types. We will create a content type called `Restaurant` and one called `Category`.
You will create two content types. You will create a content type called `Restaurant` and another called `Category`.
![Create Content Type Screen](../assets/quick-start-detailed/CreateContentTypeScreen.png 'Create Content Type Screen')
@ -166,33 +161,31 @@ Content Type `name` is always **singular**. For example, `restaurant` not `resta
The Restaurant Content Type will have a **String** field for the restaurant name, and a **Text** field (with a **WYSIWYG editor**) for the restaurant description.
1. Let's now add a content type.
1. Now add a new **Content Type**.
Click the **"+ Add Content Type"** button.
Now enter a "Name" for your **New Content Type** (we will call this one `restaurant`), and below write a "description". We will write `Recommended Restaurants` for the description.
Now enter a **Name** for your new **Content Type** (call this `restaurant`), and you can write `Restaurant Listings` for the **Description**.
Then click the **Save** button.
![Restaurant Name and Descriptions](../assets/quick-start-detailed/RestaurantNameAndDescription.png 'Restaurant Name and Descriptions')
2. Now you are ready to add the content type fields. We will add a **String** field for the Name and a **Text** field for a short Restaurant description. Click on the **+ Add New Field** button.
2. Now you are ready to add the Content Type fields. Add a **String** field for the **Restaurant** name and a **Text** field for a **Restaurant description**.
![Add Restaurant Fields](../assets/quick-start-detailed/restaurantAddFields.png 'Add Restaurant Fields')
Next we will click on the **String** field.
Next, click on the **String** field.
![String Field](../assets/quick-start-detailed/restaurantStringAndText.png 'String Fields')
You should be under the **BASE SETTINGS** tab, in the **Name** field, type `Name`. This will be the name of the restaurant.
You should be under the **BASE SETTINGS** tab, in the **Name** field, type `Restaurant`. This will be the name of the restaurant.
![Input Restaurant Name Field](../assets/quick-start-detailed/saveRestaurantNameField.png 'Input Restaurant Name Field')
Now, click on the **ADVANCED SETTINGS** tab, check **Required field** and **Unique field**. This field is required for each restaurant and is not optional. Also, we want each restaurant to have a unique name, so we check the **Unique field** box. And then click the **Continue** button.
Now, click on the **ADVANCED SETTINGS** tab, check **Required field** and **Unique field**. This field is required for each restaurant and is not optional. Also, each restaurant is to have a unique name, so check the **Unique field** box. And then click the **Continue** button.
![Advanced Settings String Field](../assets/quick-start-detailed/restaurantAdvancedSettingsStringField.png 'Advanced Settings String Field')
We are now ready to add the second field, **Text** for the restaurant description. Click the **+ Add New Field** button.
You are now ready to add the second field, **Text** for the restaurant description. Click the **+ Add New Field** button.
![Add new restaurant field](../assets/quick-start-detailed/restaurantAddNewField.png 'Add new restaurant field')
@ -204,55 +197,53 @@ You should be under the **BASE SETTINGS** tab, in the **Name** field, type `Desc
![Input Restaurant Description Field](../assets/quick-start-detailed/restaurantTextFieldBaseSettings.png 'Input Restaurant Description Field')
Now, click on the **ADVANCED SETTINGS** tab, check **Display as a WYSIWYG**. This field will provide a rich text editor. And then click the **Continue** button.
Now, click on the **ADVANCED SETTINGS** tab, check **Display as a WYSIWYG**. This field will provide a rich text editor.
And then click the **Continue** button.
![Advanced Settings Text Field](../assets/quick-start-detailed/restaurantTextFieldAdvancedSettings.png 'Advanced Settings Text Field')
Lastly, we will save this **Content Type**. Click the **Save** button.
Lastly, click the **Save** button.
![Save Restaurant Content Type](../assets/quick-start-detailed/saveRestaurantContentType.png 'Save Restaurant Content Type')
Wait for Strapi to restart, and then we will be able to create the `Category` **Content Type**.
Wait for Strapi to restart, and then continue to create the `Category` **Content Type**.
![Wait for Strapi Restart](../assets/quick-start-detailed/waitForRestart.png 'Wait for Strapi Restart')
### The Category Content Type
The Category Content Type will have a **String** field named `category` for categories assigned to restaurants, and a **Relation field** with a **Many to Many** relationship.
The Category Content Type will have a **String** field named `category`, and a **Relation field** with a **Many to Many** relationship.
Let's now add this second content type. Click the **+ Add Content Type** menu item.
Now add this second content type. Click the **+ Add Content Type** menu item.
![Add Content Type Menu Item](../assets/quick-start-detailed/AddContentTypeMenuItem.png 'Add Content Type Menu Item')
Now enter a name for this new **Content Type** (we will call this one `category`), and write a Description. We will write `Restaurant Categories` for the description. Then click the **Save** button.
Now enter a name for this new **Content Type** (call this one `category`), and write a Description. We will write `Restaurant Categories` for the description. Then click the **Save** button.
![Category Content Type Name and Description](../assets/quick-start-detailed/categoryNameAndDescription.png 'Category Content Type Name and Description')
Now you are ready to add the content type fields. We will add a **String** field for the Name and a **Relation Field** for creating a **Many to Many** relation between the Category Content Type and Restaurant Content Type. Click on the **+ Add New Field** button.
Now you are ready to add the content type fields. Next, add a **String** field for the Name and a **Relation Field** for creating a **Many to Many** relation between the Category Content Type and Restaurant Content Type.
![Category Add New Field Button](../assets/quick-start-detailed/categoryAddNewField.png 'Category Add New Field Button')
Next we will click on the **String** field.
Next, click on the **String** field.
![Category add String Field](../assets/quick-start-detailed/categoryAddStringField.png 'Category add String Field')
You should be under the **BASE SETTINGS** tab, in the **Name** field, type `Name`. This will be the name of the category.
You should be under the **BASE SETTINGS** tab, in the **Name** field, type `Catgeory`. This will be the name of the category.
![Category String Field Name](../assets/quick-start-detailed/categoryStringNameField.png 'Category String Field Name')
Now, click on the **ADVANCED SETTINGS** tab, check **Required field** and **Unique field**. This field is required for each category and is not optional. Also, we want each category to have a unique name, so we check the **Unique field** box. And then click the **Continue** button.
Now, click on the **ADVANCED SETTINGS** tab, check **Required field** and **Unique field**. This field is required for each category and is not optional. Also, each category to have a unique name, so check the **Unique field** box. And then click the **Continue** button.
![Category String Field Advanced Settings](../assets/quick-start-detailed/categoryStringAdvancedSettings.png 'Category String Field Advanced Settings')
We are now ready to add the second field, the **Relation** field for the **Many to Many relation** setting between Categories and Restaurants. Click the **+ Add New Field** button.
![Category Add New Field for Relation Field](../assets/quick-start-detailed/categoryAddClickNewFieldRelation.png 'Category Add New Field for Relation Field')
You are now ready to add the second field, the **Relation** field for the **Many to Many relation** setting between Categories and Restaurants. Click the **+ Add New Field** button.
From here, click the **Relation** field.
![Category Click Relation Field](../assets/quick-start-detailed/clickRelationFieldCategory.png 'Category Click Relation Field')
This will bring you to the **Add New Relation** screen. We will change two elements on this page for the **Relation** field.
This will bring you to the **Add New Relation** screen. You will change two elements on this page for the **Relation** field.
![Add new Relation Field screen](../assets/quick-start-detailed/addNewRelationScreen.png 'Add new Relation Field screen')
@ -260,41 +251,31 @@ First, click on **Permission (Users-Permissions)** and change it to **Restaurant
![Change Permission to Restaurant](../assets/quick-start-detailed/categoryChangePermissionToRestaurant.png 'Change Permission to Restaurant')
The second element to change is to click the **Many to Many** icon (in the middle). It should now read, **"Categories has and belongs to many Restaurants"**. Then click the **Continue** button.
The second element to change is to click the **Many to Many** icon (in the middle). It should now read, **"Categories has and belongs to many Restaurants"**. Then click the **Save** button.
![Category Has Many To Many Relation](../assets/quick-start-detailed/categoryHasManyToMany.png 'Category Has Many To Many Relation')
Lastly, we will save this **Content Type**. Click the **Save** button.
Lastly, you will save this **Content Type**. Click the **Save** button.
![Now Save Category](../assets/quick-start-detailed/nowSaveCategory.png 'Now Save Category')
Wait for Strapi to restart.
![Now Wait for Strapi to Restart](../assets/quick-start-detailed/saveCategoryWaiting.png 'Now Wait for Strapi to Restart')
Verify in the left menu under **CONTENT TYPES**, that you see **Categories**, **Restaurants** and **Users**.
![Verify Content Types](../assets/quick-start-detailed/verifyContentTypes.png 'Verify Content Types')
![Now Wait for Strapi to Restart](../assets/quick-start-detailed/waitForRestart.png 'Now Wait for Strapi to Restart')
### Files structure
A new directory has been created in the `Project/cms/` folder of your application which contains all the needed files related to your `restaurant` and `category` Content Types. Take a look at the [API structure documentation](../concepts/concepts.md#files-structure) for more information.
A new directory has been created in the `./Projects/my-project/` folder of your application which contains all the needed files related to your `restaurant` and `category` Content Types. (You may take a look at the [API structure documentation](../concepts/concepts.md#files-structure) for more information.)
---
## 5. Add content to each Content Type
## 5. Manage and add data to Content Type
After creating the **Content Types**, we now need to manage and add data to the new Content Types.
We will create an entry of a restaurant called, `Strapi Restaurant` with a description saying, `Strapi restaurant is a cosy restaurant delivering one of the very fastest and nicest dining experiences in the world, combining nods to tradition with fierce modernity, warmth with daring.`
We will then assign two Categories, `Italian` and `Contemporary` to this restaurant.
Now you can add content to the new Content Types.
Click on **Restaurants** under the **CONTENT TYPES** menu in order to **Add New Restaurant**.
![Add Restaurant to Content Type](../assets/quick-start-detailed/AddStrapiRestaurant.png 'Add Restaurant to Content Type')
Next click on the **+ Add New Restaurant** button (in the top right corner). Go ahead and type `Strapi Restaurant` in the **Name** field, and type the content (above) into the **Description** field. Then press the **Save** button (in the top right corner).
Next click on the **+ Add New Restaurant** button (in the top right corner). Go ahead and type `Strapi Restaurant` in the **Name** field, with a description saying, `Strapi restaurant is a cosy restaurant delivering one of the very fastest and nicest dining experiences in the world, combining nods to tradition with fierce modernity, warmth with daring.` into the **Description** field. Then press the **Save** button..
![Add Restaurant Name and Description](../assets/quick-start-detailed/addTheRestaurantData.png 'Add Restaurant Name and Description')
@ -302,71 +283,63 @@ When it is saved, you will see your restaurant listed in the entries. From here
![Restaurant is now listed](../assets/quick-start-detailed/listedRestaurant.png 'Restaurant is now listed')
We have **NOT** added a **Category** to the **Restaurant** we created. We first have to add the actual Category items to the **Categories** content type.
You have **NOT** yet added a **Category** to the **Restaurant** that was created. You first have to add the actual Category items to the **Categories** content type.
We will next assign two Categories, `Italian` and `Contemporary` to this restaurant.
You will then assign two Categories, `Convenient` and `Time Saving` to this restaurant.
Click on **Categories** under the **CONTENT TYPES** menu on the left.
![Category Add Content Type Screen](../assets/quick-start-detailed/categoryContentTypeScreen.png 'Category Add Content Type Screen')
Now we will add each of the categories. Click the **+ Add New Category** button to add the first category **Italian**. Type `Italian` into the **Name** field. Next, you will see **Restaurants (0)** to the right. Select **Strapi Restaurant** to add this category to the restaurant.
Click the **+ Add New Category** button to add the first category **Convenient**. Type `Convenient` into the **Name** field. Next, you will see **Restaurants (0)** to the right. Select **Strapi Restaurant**, to add this category to the restaurant.
After selecting, **Restaurants (0)** to the right, will change to **Restaurants (1)** (see below). And then press the **Save** button.
After selecting, **Restaurants (0)** to the right, it will change to **Restaurants (1)**. And then press the **Save** button.
![Add Italian category to Restaurant](../assets/quick-start-detailed/addItalianCategoryToRestaurant.png 'Add Italian category to Restaurant')
![Add Convenient category to Restaurant](../assets/quick-start-detailed/addItalianCategoryToRestaurant.png 'Add Convenient category to Restaurant')
You now see the Category listed. Click the **+ Add New Category** button to add the second category `Contemporary`.
You now see the Category listed. Click the **+ Add New Category** button to add the second category `Time Saving`.
![Listed Italian Category](../assets/quick-start-detailed/listedItalianCategory.png 'Listed Italian Category')
![Listed Convenient Category](../assets/quick-start-detailed/listedItalianCategory.png 'Listed Convenient Category')
Now let's add **Contemporary**. Type `Contemporary` into the **Name** field. You will see **Restaurants (0)** to the right. You will see **Restaurants** to the right. Select **Strapi Restaurant** to add this category to the restaurant.
Now let's add **Time Saving**. Type `Time Saving` into the **Category** field. Go ahead and save it **WITHOUT** adding it to the **Strapi Restaurant** field.
After selecting, **Restaurants (0)** to the right, will change to **Restaurants (1)** (see below). And then press the **Save** button.
![Add Time Saving category to Restaurant](../assets/quick-start-detailed/addContemporaryCategoryToRestaurant.png 'Add Time Saving category to Restaurant')
![Add Contemporary category to Restaurant](../assets/quick-start-detailed/addContemporaryCategoryToRestaurant.png 'Add Contemporary category to Restaurant')
You return to the **Category** Content Type page. You see both categories listed. Both have been assigned to the **Restaurant** we created earlier.
You return to the **Category** Content Type page. You see both categories listed. Both have been assigned to the **Restaurant** you created earlier.
![Both categories listed](../assets/quick-start-detailed/categoriesListed.png 'Both categories listed')
::: tip NOTE
If you want to add Categories directly from the **Restaurants** Content Type, you simply click on the Restaurant and add, edit or change **EXISTING** categories. Otherwise, you can create and add new **Categories** from the **Category Content Type** as we did above.
If you want to add Categories directly from the **Restaurants** Content Type, you simply click on the Restaurant and add, edit or change **EXISTING** categories. Otherwise, you can create and add new **Categories** from the **Category Content Type** as you did above.
Go ahead and add `Time Saving`, the the `Strapi Restaurant`.
![Select Category from Restaurant](../assets/quick-start-detailed/selectCategoryFromRestaurant.png 'Select Category from Restaurant')
:::
---
## 6. Set roles and permissions
By default, Strapi publishes all **Content Types** with restricted permissions. Which means you have to explicitly give permissions to each **Content Type** you create. We are going to give **Public** (any web browser with the correct link) access to the **Restaurant** Content Type.
By default, Strapi publishes all **Content Types** with restricted permissions. Which means you have to explicitly give permissions to each **Content Type** you create. You are going to give **Public** API (or URL) access to the **Restaurant** Content Type.
Locate and click on the **Roles & Permission** menu item under **PLUGINS** on the left menu. (The **Roles & Permission** plugin can accomplish many tasks related to permissions. For now we will focus on the **Public** role.)
Locate and click on the **Roles & Permissions** menu item under **PLUGINS** on the left menu. (The **Roles & Permissions** plugin can accomplish many tasks related to permissions. For now, focus on the **Public** role.)
Next, click on the **pencil** edit icon to the right of the **Public** Role.
Next, click on the **Public** Role.
![Roles and Permissions Panel](../assets/quick-start-detailed/rolesAndPermissions.png 'Roles and Permissions Panel')
From here, scroll down under **Permissions** and find **Restaurant**. Click the checkbox next to **find**. To the right, you will see the URL route. It should say, `/restaurants`. Scroll back to the top, and click the **Save** button.
From here, scroll down under **Permissions** and find **Restaurant** and **Category**. Click the checkbox next to **find** and **findone** for each of them. Scroll back to the top, and click the **Save** button.
![Check Find for Restaurant](../assets/quick-start-detailed/rolesFindAndRoute.png 'Check Find for Restaurant')
You are returned to the **Roles and Permission** panel.
![Roles and Permissions Panel](../assets/quick-start-detailed/rolesAndPermissions.png 'Roles and Permissions Panel')
---
## 7. Consume the Content Type API
The project is accessible by following the `http://localhost:1337/` link. You will see the **'Welcome'** screen.
![Strapi Welcome Page](../assets/quick-start-detailed/strapiWelcomePage.png 'Strapi Welcome Page')
What we want is the **Restaurant Content Type**. The route is `/restaurants`. In your browser, type `http://localhost:1337/restaurants`.
What you want is the **Restaurant Content Type**. The route is `/restaurants`. In your browser, type `http://localhost:1337/restaurants`.
![Successful API call to Restaurant Content Type](../assets/quick-start-detailed/successApiCall.png 'Successful API call to Restaurant Content Type')
@ -381,7 +354,7 @@ Forbidden Access Looks like this:
:::
::: tip CONGRATULATIONS
👏 Congratulations, you have now completed the Strapi Quick Start. Where to go next?
👏 Congratulations, you have now completed the Strapi Quick Start Tutorial. Where to go next?
- Learn how to use Strapi with React ([Gatsby](https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi) or [Next.js](https://blog.strapi.io/strapi-next-setup/)) or Vue.js ([Nuxt.js](https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7/)).
- Read the [concepts](../concepts/concepts.html) and [articles](../articles/) to deep dive into Strapi.