Difference between revisions of "Drupal/C4/RESTful-API-Implementation/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with " {| style="border-spacing:0;" | style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| <cent...")
 
 
(One intermediate revision by one other user not shown)
Line 15: Line 15:
 
* Understand what is '''RESTful API'''
 
* Understand what is '''RESTful API'''
 
* Learn to implement '''RESTful API '''using '''Views'''
 
* Learn to implement '''RESTful API '''using '''Views'''
 
 
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In this tutorial, we will  
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In this tutorial, we will  
  
 
* Understand what is '''RESTful API'''
 
* Understand what is '''RESTful API'''
 
* Learn to implement '''RESTful API '''using '''Views'''
 
* Learn to implement '''RESTful API '''using '''Views'''
 
 
  
 
|-
 
|-
Line 34: Line 30:
 
* Drupal 8
 
* Drupal 8
 
* Firefox web browser
 
* Firefox web browser
 
 
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| To record this tutorial, I am using
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| To record this tutorial, I am using
  
Line 68: Line 62:
  
 
* It is based on '''RE'''presentational '''S'''tate '''T'''ransfer ('''REST''') technology  
 
* It is based on '''RE'''presentational '''S'''tate '''T'''ransfer ('''REST''') technology  
* It is also referred to as a RESTful web service
+
* It is also referred to as a '''RESTful web service'''
  
  
Line 74: Line 68:
  
 
* '''RESTful API '''is based on''' REpresentational State Transfer (i.e REST) '''technology.
 
* '''RESTful API '''is based on''' REpresentational State Transfer (i.e REST) '''technology.
* It is also referred to as a RESTful web service.
+
* It is also referred to as a '''RESTful web service'''.
* '''RESTful API''' provides methods to external clients to fetch, add or modify data on the server.  
+
* '''RESTful API''' provides methods to external '''clients''' to fetch, add or modify data on the '''server'''.  
 
+
 
+
  
 
|-
 
|-
Line 83: Line 75:
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| For example:
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| For example:
  
* Using the same server, we can do a bank transaction either using a mobile app or desktop website.
+
* Using the same '''server''', we can do a bank transaction either using a mobile app or desktop website.
 
+
 
+
  
 
|-
 
|-
Line 92: Line 82:
  
  
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| RESTful API is a general purpose API.  
+
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''RESTful API''' is a general purpose '''API'''.  
  
  
 
So any application, such as  
 
So any application, such as  
 
 
* another website,  
 
* another website,  
* native mobile apps and
+
* native '''mobile apps''' and
* IoT devices  
+
* '''IoT devices'''
  
can exchange data with your server.
+
can exchange data with your '''server'''.
  
 
|-
 
|-
Line 135: Line 124:
  
 
|-
 
|-
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Put a check mark on '''HAL, HTTP Basic Authentication, RESTful Web Services '''and''' Serialization'''
+
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Put a check mark on '''HAL, HTTP Basic Authentication, RESTful Web Services '''
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Put a check mark on the following modules:
+
  
 +
and''' Serialization'''
 +
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Put a check mark on the following modules:
  
 
'''HAL, HTTP Basic Authentication, RESTful Web Services '''and''' Serialization.'''
 
'''HAL, HTTP Basic Authentication, RESTful Web Services '''and''' Serialization.'''
Line 213: Line 203:
  
  
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In general, there are three kind of users that can use '''RESTful API'''.
+
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In general, there are three kind of '''users''' that can use '''RESTful API'''.
  
 +
1. '''anonymous user'''
  
1. anonymous user
+
2. '''authenticated user''' and
  
2. authenticated user and
+
3. '''authenticated users''' with permission to modify content
  
3. authenticated users with permission to modify content
 
  
 
+
Now, we will setup our '''Drupal''' for an '''authenticated user''' who can create, edit, and delete their own contents.
Now, we will setup our '''Drupal''' for an authenticated user who can create, edit, and delete their own contents.
+
  
 
|-
 
|-
Line 242: Line 231:
 
* Basic Page: Delete own content  
 
* Basic Page: Delete own content  
 
* Basic Page: Edit own content  
 
* Basic Page: Edit own content  
 
  
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Scroll down and for '''AUTHENTICATED USER''', put a checkmark on  
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Scroll down and for '''AUTHENTICATED USER''', put a checkmark on  
Line 252: Line 240:
 
Click on the '''Save permissions''' button at the bottom.
 
Click on the '''Save permissions''' button at the bottom.
  
 
+
|-
I have enabled the '''authenticated users''' to create, edit and delete their own content.
+
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"|
 +
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| I have enabled the '''authenticated users''' to create, edit and delete their own content.
  
  
Line 397: Line 386:
  
  
We will click on the '''Save''' button at the bottom to save this '''view'''.
+
We will click on the '''Save''' button to save this '''view'''.
  
  
Line 446: Line 435:
 
|-
 
|-
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click''' No path is set'''
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click''' No path is set'''
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Under '''PATH SETTINGS''', we will set the path by clicking on the '''No path is set''' button.
+
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Under '''PATH SETTINGS''', we will set the path by clicking on the '''No path is set''' link.
  
 
|-
 
|-
Line 520: Line 509:
  
 
In this tutorial, we have learnt about-
 
In this tutorial, we have learnt about-
 
 
* '''RESTful API '''and
 
* '''RESTful API '''and
 
* Implementation of '''RESTful API''' using '''Views'''
 
* Implementation of '''RESTful API''' using '''Views'''
 
 
  
 
|-
 
|-
Line 532: Line 518:
  
 
* Implement the '''RESTful API '''on the '''Article content type'''
 
* Implement the '''RESTful API '''on the '''Article content type'''
 
 
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| As an assignment
 
| style="background-color:#ffffff;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| As an assignment
  
 
* Implement the '''RESTful API '''on the '''Article content type'''
 
* Implement the '''RESTful API '''on the '''Article content type'''
 
 
  
 
|-
 
|-

Latest revision as of 13:55, 11 June 2018

Visual cue
Narration
Slide 1:

RESTful API Implementation

Welcome to the spoken tutorial on RESTful API Implementation.
Slide 2:Learning Objectives
  • Understand what is RESTful API
  • Learn to implement RESTful API using Views
In this tutorial, we will
  • Understand what is RESTful API
  • Learn to implement RESTful API using Views
Slide 3:

System requirement

To record this tutorial, I am using

  • Ubuntu Linux 16.04 OS
  • Drupal 8
  • Firefox web browser
To record this tutorial, I am using
  • Ubuntu Linux 16.04
  • Drupal 8 and
  • Firefox web browser

You can use any web browser as per your choice.

Slide 4:

Pre-requisites

  • You should have basic knowledge of Drupal
  • If not, for relevant Drupal tutorials please visit http://spoken-tutorial.org
  • A working Internet connection


To practise this tutorial, you should have basic knowledge of Drupal.


If not, for relevant Drupal tutorials, please visit the link shown.


You should also have a working Internet connection.

Slide 5:

What is RESTful API

  • It is based on REpresentational State Transfer (REST) technology
  • It is also referred to as a RESTful web service


What is RESTful API?
  • RESTful API is based on REpresentational State Transfer (i.e REST) technology.
  • It is also referred to as a RESTful web service.
  • RESTful API provides methods to external clients to fetch, add or modify data on the server.
Slide 5: (cont.) For example:
  • Using the same server, we can do a bank transaction either using a mobile app or desktop website.
image


RESTful API is a general purpose API.


So any application, such as

  • another website,
  • native mobile apps and
  • IoT devices

can exchange data with your server.

Show text RESTful API implementation process


Show text Bitnami Drupal Stack

Let us learn the RESTful API implementation process step by step.


The following steps are applicable to Bitnami Drupal Stack.


But most of the steps are applicable to any other Drupal installation, as well.

Show text Step No. 1


Open Drupal8 site

Step No. 1


First we will open our Drupal8 site and install the required core modules.

Click Extend tab To do so, go to the Extend tab.
Scroll down to WEB SERVICES Scroll down and go to the WEB SERVICES section.
Put a check mark on HAL, HTTP Basic Authentication, RESTful Web Services

and Serialization

Put a check mark on the following modules:

HAL, HTTP Basic Authentication, RESTful Web Services and Serialization.

Click Install button Then click on the Install button at the bottom, to enable them.
Show text REST UI


Show text Creating Dummy Content

We will also need to install the REST UI module manually.


I have already installed and enabled it in my machine.


To know how to install a module, go through the Creating Dummy Content tutorial in this series.

Show text Step No. 2


Go to Configuration tab -> WEB SERVICES → REST

Step No. 2


Next we will configure the REST resources to accept the requests from a REST client.


To do so, go to the Configuration tab.


Click on REST under WEB SERVICES.

Point to REST resources


Click on Edit of Content

The REST resources page appears now.


We will restrict the formats by clicking on the Edit button of Content.

Scroll down


Check json

Scroll down.


Under Accepted request formats, put a check mark on the json.

Click Save configuration Click on the Save configuration button at the bottom to save it.


Now our Drupal site will accept the json format requests from a REST client.

Show text Step No. 3 Step No. 3


Next we need to set the proper permissions for authenticated users.

Slide 6


In general, there are three kind of users that can use RESTful API.

1. anonymous user

2. authenticated user and

3. authenticated users with permission to modify content


Now, we will setup our Drupal for an authenticated user who can create, edit, and delete their own contents.

Go to People tab To do so, go to People tab.
Click Permissions tab Click on the Permissions tab.
Scroll down


For AUTHENTICATED USER, check

  • Basic Page: Create new content
  • Basic Page: Delete own content
  • Basic Page: Edit own content
Scroll down and for AUTHENTICATED USER, put a checkmark on
  • Basic Page: Create new content
  • Basic Page: Delete own content
  • Basic Page: Edit own content

Click on the Save permissions button at the bottom.

I have enabled the authenticated users to create, edit and delete their own content.


You can give permissions based on your requirements.

Show text Step No. 4


Go to Structure -> Content types


Point to Events


Step No. 4


Now we need a content type on which we want to implement the RESTful API.


Go to Structure tab and click on the Content types.


I will use the Events content type to implement the RESTful API.


You can use any content type as per your requirement.

Show text Step No. 5


Show text Displaying Contents using Views

Step No. 5


Now we need a View for our Events content type.


To know about Views, go through the tutorial Displaying Contents using Views of this series.

Click Structure → Views To create a new view, go to Structure and Views.
Click Add new view

Type Events_view

Click Add view and let’s name it as Events underscore view.
Change type as Events Change the content of type from All to Events.
Under REST EXPORT SETTINGS, check Provide a REST export Under REST EXPORT SETTINGS, check Provide a REST export.
Type REST export path as events We will type the REST export path as events.
Click Save and edit Click Save and edit button at the bottom.
Go to FORMAT → Show → Entity Now we will set up the display of our events.


Under FORMAT section, in the Show option, click on the Entity.

Choose Fields


Click Apply

In the REST export dialog box that appears, choose Fields option.


Click on the Apply button.

Click Apply In the Row style options dialog box, keep the settings as it is.


Then click on the Apply button.


This will enable us to add fields to our view.

Click Add Now we can add all the fields of our Events content type.


Click on the Add button.


This brings up the list of available fields.

In the Search box, type body In the Search box, type body.
Choose Body, click Add and configure fields Choose Body from the list, then click on the Add and configure fields button.
Click Apply Click on the Apply button.
Click Add Again click on the Add button to add another field.
Type id and choose ID Search for id and choose ID from the list.
Click Add and configure fields


Click Apply

Click on the Add and configure fields button.


Then click on the Apply button.

Point to the path /events


Click Save

Under PATH SETTINGS, we can see the path of our events view.


We will click on the Save button to save this view.


<<PAUSE>>

Show text Step No. 6


Click Add

Step No. 6


Next we will create a new view to retrieve the data.


Click on the Add button in the Displays panel.

Select REST export Select REST export option.


Now let us configure this new view.

Click Entity Under FORMAT section, click on the Entity.
Choose Fields, click Apply Choose Fields option and click on the Apply button.
Put check mark to all the fields


Click Apply

Check all the fields that we want in our content type.


And click on the Apply button.

Point to FIELDS Here you can see that our required fields are added now.
Click No path is set Under PATH SETTINGS, we will set the path by clicking on the No path is set link.
In Path field, type events/%


Highlight the hint under the field.

In the Path field, type events slash percentage sign.


Percentage sign is used to represent values that will be used for the contextual filter.

Click Apply Click on the Apply button at the bottom.
Click ADVANCED Now, in the right hand side, click on the ADVANCED option.
Under CONTEXTUAL FILTERS, click Add Under CONTEXTUAL FILTERS, click on the Add button.
Type id in the search box

Choose ID

We will add an ID for the contextual filter to refer our node.


Search for id and choose the ID from the list.

Click Apply Click on the Apply button.
Click Apply Keep the other settings as it is.


Then click on the Apply button.

Click Save Click on the Save button to save this configuration.


With this, we have successfully implemented the RESTful API in our Drupal site using Views.


<<PAUSE>>

Later in the series, we will learn how to check our RESTful API using a REST Client.


With this, we come to the end of this tutorial.

Slide 7:

Summary

  • RESTful API
  • Implementation of RESTful API using Views


Let us summarize.


In this tutorial, we have learnt about-

  • RESTful API and
  • Implementation of RESTful API using Views
Slide 8:

Assignment

  • Implement the RESTful API on the Article content type
As an assignment
  • Implement the RESTful API on the Article content type
Slide 9:

Acknowledgement


The video at the following link summarises the Spoken Tutorial project.


Please download and watch it.

Slide 10:

Spoken Tutorial Workshops


The Spoken Tutorial Project Team conducts workshops and gives certificates to those who pass online tests.


For more details, please write to us.

Slide 11:

Acknowledgement


Spoken Tutorial Project is funded by
  • NMEICT, Ministry of Human Resource Development and
  • NVLI, Ministry of Culture

Government of India.

This tutorial is contributed by Vishal Jindal.


This is Priya from IIT Bombay signing off. Thanks for joining.

Contributors and Content Editors

Nancyvarkey, Priyacst