gatsby-tutorials (20 Part Series)
Welcome to part-9 of the series.
As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga
Now, it’s time to get out data and display it in our project. We can do this with internal data, but we will use headless CMS to store our data and then will consume it.
We will use contentful for our project. So, go ahead and signup. Now, when you go to the dashboard for the first time you will get the below screen.
Once we click on Add a space, we will be displayed the below pop-up. It shows that we have two free spaces and can have up-to 5000 records in the free account.
Once you click on the Free tab, it will open the below pop-up. Here, you have to type the Space name.
Once you clicked on Proceed to confirmation on the above screen, it will show the below Confirmation screen.
Once you clicked on Confirm and create space, it will take to the below screen. Here, Content model and Content are the important tabs.
The Content model describes the fields of data and the Content describes the data. So, head over to the Content model tab and click on Add content type.
Next, we have to give a Name and Description and click on Create.
We are basically creating data about different places to visit in Hampi. The next screen will ask us to add some fields.
So, let’s add some fields by clicking on the Add field button. The next screen will show as the type of fields. We will select Text by clicking on it.
In the below screen give a Name. In our case it is name and then click on Create and configure.
Then in the next screen first click on the tab Validations and then select the checkbox Required field. We are doing this, so that the user cannot leave this field empty. After this click on the Save button.
The next field will be slug and it will be a text field and required like name. This field basically for the text at the end of url, which represent each place. Follow the same process as name and create the field.
Next, we will create Time Required field. This field tells the tourist the time required to visit a place. This will be an integer field, but not a required field.
So, once you clicked on Add field, in the pop-up click on Number.
Give it a Name and then click on Create, since it is not a required field.
Next, create Timings and Entry Fees field. Both of them will be short text and not required.
Next, we will create the field Description. It will be Long text and required.
In the Home page we will have Featured places, which will contain the top 3 places to visit in Hampi. So, let’s create a Boolean field for it.
Once you click on Add Field, select Boolean as below screen.
Give it a name featured and click on Create and configure to make it required field.
Next, we will create the field for images. It will hold one or more images, required for a place.
Once you click on Add Field, select Media as below screen.
In the Name give images, then select the radio box for Many files. Then click on Create and configure to make it required field, before Saving.
Now, we are done with all the model. So, press the Save button on the top right corner.
This completes part-9 of the series.
We will start adding data in part-10.