Webhook receivers in No-Code - Mini Project: Build & Apply

Webhook Receivers

📖 Scenario: You are building a simple system to receive notifications from an online service. This service sends data automatically to your system whenever an event happens, like a new user signing up or a payment being made. Your system needs to be ready to accept these messages and process them.

🎯 Goal: Create a basic webhook receiver setup that can accept incoming data, check for a specific event type, and store the event details for later use.

📋 What You'll Learn

Create a data structure to hold incoming webhook events

Add a configuration variable to specify the event type to listen for

Write logic to filter and store only the events matching the specified type

Complete the setup by adding a confirmation step to acknowledge receipt

💡 Why This Matters

🌍 Real World

Webhook receivers are used in many online services to get real-time updates, like payment notifications, user signups, or system alerts.

💼 Career

Understanding webhook receivers is important for roles in web development, system integration, and automation where services need to communicate instantly and reliably.

1

Create the initial data structure for webhook events

Create a list called incoming_events with these three dictionaries exactly: {'event': 'user_signup', 'data': 'User A'}, {'event': 'payment_made', 'data': 'Order 123'}, and {'event': 'user_signup', 'data': 'User B'}.

No-Code

# Create a list called incoming_events with three event dictionaries
# Your code here

Hint

Think of incoming_events as a list that holds all the messages your system receives.

2

Add a configuration variable for event type

Create a variable called event_type_to_listen and set it to the string 'user_signup'.

No-Code

incoming_events = [
    {'event': 'user_signup', 'data': 'User A'},
    {'event': 'payment_made', 'data': 'Order 123'},
    {'event': 'user_signup', 'data': 'User B'}
]
# Create a variable event_type_to_listen set to 'user_signup'
# Your code here

Hint

This variable tells your system which event messages to pay attention to.

3

Filter and store matching events

Create an empty list called filtered_events. Then use a for loop with variables event to go through incoming_events. Inside the loop, use an if statement to check if event['event'] equals event_type_to_listen. If yes, add event to filtered_events.

No-Code

incoming_events = [
    {'event': 'user_signup', 'data': 'User A'},
    {'event': 'payment_made', 'data': 'Order 123'},
    {'event': 'user_signup', 'data': 'User B'}
]
event_type_to_listen = 'user_signup'
# Create filtered_events list and add matching events from incoming_events
# Your code here

Hint

This step picks only the events you want to handle and saves them separately.

4

Add confirmation of receipt

Create a variable called confirmation_message and set it to the string 'Webhook received and processed'.

No-Code

incoming_events = [
    {'event': 'user_signup', 'data': 'User A'},
    {'event': 'payment_made', 'data': 'Order 123'},
    {'event': 'user_signup', 'data': 'User B'}
]
event_type_to_listen = 'user_signup'
filtered_events = []
for event in incoming_events:
    if event['event'] == event_type_to_listen:
        filtered_events.append(event)
# Create confirmation_message variable with text 'Webhook received and processed'
# Your code here

Hint

This message confirms your system has successfully handled the webhook events.

Practice

1. What is the main purpose of a webhook receiver in a web application?

easy

A. To display images on a webpage

B. To send emails to users when they sign up

C. To listen for automatic messages from other apps and react instantly

D. To store user passwords securely

Solution

1. Step 1: Understand what webhook receivers do

   Webhook receivers are designed to listen for messages or events sent automatically from other applications.

2. Step 2: Identify the main function in the options

   Only To listen for automatic messages from other apps and react instantly describes listening and reacting instantly to events, which matches the webhook receiver's role.

3. Final Answer:

   To listen for automatic messages from other apps and react instantly -> Option C

4. Quick Check:

   Webhook receivers listen and react = D [OK]

Hint: Webhook receivers listen and react to events automatically [OK]

Common Mistakes:

• Confusing webhook receivers with email services
• Thinking webhook receivers store data permanently
• Assuming webhook receivers handle UI display

2. Which HTTP method is commonly used by webhook receivers to accept data?

easy

A. GET

B. POST

C. DELETE

D. PUT

Solution

1. Step 1: Recall the HTTP methods used for sending data

   POST is the standard method used to send data to a server, especially for webhook payloads.

2. Step 2: Match the method with webhook receivers

   Webhook receivers accept data via POST requests, not GET, DELETE, or PUT in typical setups.

3. Final Answer:

   POST -> Option B

4. Quick Check:

   Webhook data sent via POST = A [OK]

Hint: Webhook receivers accept data using POST requests [OK]

Common Mistakes:

• Choosing GET which is for fetching data
• Confusing PUT or DELETE with webhook data sending
• Not knowing HTTP methods clearly

3. A webhook receiver URL endpoint receives this JSON payload: {"event":"payment_success","amount":50}. What should the receiver do next?

medium

A. Delete the payment record

B. Ignore the payload and do nothing

C. Send a GET request back to the sender

D. Parse the JSON and trigger payment success actions

Solution

1. Step 1: Understand the payload content

   The JSON shows an event named "payment_success" with an amount, indicating a successful payment.

2. Step 2: Determine the correct response to the event

   The webhook receiver should parse this JSON and trigger actions related to payment success, like updating records or notifying users.

3. Final Answer:

   Parse the JSON and trigger payment success actions -> Option D

4. Quick Check:

   Webhook parses JSON and acts = A [OK]

Hint: Webhook receivers parse JSON payloads to act on events [OK]

Common Mistakes:

• Ignoring the payload instead of processing it
• Sending GET requests back which is not standard
• Deleting data without reason

4. You set up a webhook receiver but it never receives data. Which of these is a likely cause?

medium

A. The receiver URL is not publicly accessible

B. The webhook sender is sending POST requests correctly

C. The receiver is correctly parsing JSON

D. The webhook receiver is logging all events

Solution

1. Step 1: Identify why no data is received

   If the receiver URL is not publicly accessible, the sender cannot reach it to deliver data.

2. Step 2: Evaluate other options

   Options A, B, and D describe correct or positive behaviors that would not cause failure to receive data.

3. Final Answer:

   The receiver URL is not publicly accessible -> Option A

4. Quick Check:

   URL must be public for webhook delivery = C [OK]

Hint: Ensure webhook URL is public and reachable [OK]

Common Mistakes:

• Assuming parsing issues cause no data reception
• Thinking logging affects data delivery
• Ignoring network accessibility

5. You want your webhook receiver to only process events where the JSON field status equals "completed". Which approach is best?

hard

A. Check the status field in the JSON and only act if it equals "completed"

B. Process all events and ignore the status field

C. Reject all webhook requests with a 404 error

D. Process events only if the JSON is empty

Solution

1. Step 1: Understand the filtering requirement

   You want to act only on events where the status is "completed", so filtering based on this field is necessary.

2. Step 2: Identify the correct filtering method

   Checking the JSON field and acting only when it matches "completed" ensures correct processing and avoids unnecessary actions.

3. Final Answer:

   Check the status field in the JSON and only act if it equals "completed" -> Option A

4. Quick Check:

   Filter events by status field = B [OK]

Hint: Filter webhook events by checking JSON fields before acting [OK]

Common Mistakes:

• Ignoring the status field and processing all events
• Rejecting all requests which stops processing
• Processing empty JSON which has no data