DEV Community

Kóredé Bashir
Kóredé Bashir

Posted on • Updated on

What is serverless? A Gentle Introduction to Azure Functions (Part 3)

Azure Functions
Source: Daily Host News' blog

This is the third part of my series on an introduction to serverless computing and Azure Functions. In this part, I would be walking you through how to create and setup a webhook on GitHub, connect this webhook with our newly created API (we would be making changes to the function code) to listen to Wiki update events (Gollum events, in this case).

In the previous part, I covered the downsides of serverless computing and Azure Functions - I walked you through deploying a function code in the cloud using Azure Functions.

It is worthy to note that, webhooks offer a lightweight mechanism for apps to be notified by another service when something of interest happens via an HTTP endpoint. A webhook can be used to trigger an Azure function, and then analyze the message, to determine what exactly has happened and how best to respond.

In order to follow along with this guide, you'd need to have a checklist of these below.

Requirements

• Basic knowledge of Azure Functions, which is covered in the first part of this article
• Basic knowledge of JavaScript
• An Azure Subscription, here
• A GitHub account

After you've gotten set up with the requirements stated above, sign in to your GitHub account.

Create a repo
Create a new repository

Create a new public repository by clicking the New button and provide a meaningful name, something like AzureWebhookTest.

Create a Wiki
Wiki creation page

Create a Wiki
Add basic texts, and save

Next, select the Wiki and Create the first page, add some basic texts before clicking Save page.

Create a Webhook
Add a webhook

Next up, set up a webhook by going back to the Settings tab, select Webhooks then Add a webhook. You'd need to set a payload to the URL for your function, similar to this below:

https://.azurewebsites.net/api/HttpTrigger1?code=

Set a configuration
Webhook configurations

There's a section that says; Which events would you like to trigger this webhook? do select the option labeled Let me select individual events. Do also change Content type to application/json

Set a configuration
More webhook configurations

Be certain to select the Wiki checkbox. No other check boxes should be selected. Also at the bottom of the Webhooks page, ensure Active is checked and select Add webhook.

Verify Webhook

You can now verify that everything is going according to plan, when the Webhooks page is displayed.

Webhooks are basically HTTP callbacks that are triggered by specific events, and are always defined by users. An HTTP request is made to the URL configured for the webhook, by the source site, when an event occurs.

Setting up a webhook is a two-way process. a) You can specify how you want your webhook to behave through GitHub and what events it should listen to. b) You can also set up your function in Azure Functions to receive and manage the payload received from the webhook.

Testing the Project

To test out the newly created Webhooks project, go back to the Wiki tab from your repository, select the created page, edit and input some texts - say, Hello World.

Test Webhook

Click the Save Page button to save this edit. Now to add a payload to the URL for your function app's function, goto Settings, and select Edit. Then scroll down to the Recent Deliveries section.

Select the latest delivery entry by clicking on the options ... button. After expansion, you should see the Header information, which includes the Event Type, similar to this below:


Request URL: https://introfunc.azurewebsites.net/api/HttpTrigger1?code=aUjXIpqdJ0ZHPQuB0SzFegxGJu0nAXmsQBnmkCpJ6RYxleRaoxJ8cQ%3D%3D
Request method: POST
content-type: application/json
Expect: 
User-Agent: GitHub-Hookshot/16496cb
X-GitHub-Delivery: 9ed46280-6ab3-11e9-8a19-f1a14922a239
X-GitHub-Event: gollum

Enter fullscreen mode Exit fullscreen mode

Webhooks require a couple of configuration options before you can use them. We'll go through each of these settings next.

Note:
Payload URL
The payload URL is the URL of the server that will receive the webhook POST requests. Each event type has a specific payload format. That payload contains information about the event that triggered the webhook.

Content Type
Webhooks can be delivered using two different content types:
a)The application/json content type delivers the JSON payload directly as the body of the POST request.
a) The application/x-www-form-urlencoded content type sends the JSON payload as a form parameter, called payload.

You'll also see that the payload contains information indicating that your wiki page was edited. The payload contains pages, repository, and sender sections.

Final Test Webhook

Finally, you'll see a response message generated by your Azure function app. This response message should be same as this: Please pass a name on the query string or in the request body.

What's Next?

In this part, I walked you through how to create and setup a webhook on GitHub, connect this webhook with our newly created API (we would be making changes to the function code) to listen to Wiki update events (Gollum events, in this case).

In the next/last part, I'll walk you through how to update your function to parse information from the GitHub webhook payload, and hence display the results.

See you on the other side. Cheers! 😺

Top comments (0)