Integrating Dynamic Tutor Interaction with Go and Fiber

Integrating API Requests for Dynamic Tutor Interaction

Welcome back! In the previous lesson, you set up a basic interface for your personal tutor using Go and the Fiber web framework. This provided the foundation for a user-friendly educational web application. Now, we will take the next step by connecting this interface to our backend API built with Go and Fiber. This connection is essential for transforming our static interface into a dynamic, interactive tutoring experience. By the end of this lesson, you will understand how to integrate the frontend with the backend, enabling real-time communication between the student and the tutor system.

Understanding Fetch API

In this lesson, we will enhance our tutor interface by connecting it to the backend API using the Fetch API in JavaScript. This tool will allow us to capture student input and send it to the server, transforming our tutor into a dynamic application. The Fetch API is a modern interface that allows you to make network requests from your web page. It provides a more powerful and flexible feature set for handling HTTP requests and responses. With Fetch, you can send and receive data from the server in the background, creating a smoother and more interactive educational experience. Here's how it works: Making a Request: When you want to get or send data, you use the fetch() function. You tell it where to send the request (the URL) and what kind of request it is. Handling the Response: After the request is sent, the server will reply. The Fetch API lets you handle this reply using .then(). You can think of this as receiving an answer from your tutor. Dealing with Errors: Sometimes things go wrong, like if the server is down. The Fetch API lets you handle these problems using .catch(), so your web page can show a message or try again. Here's a simple example of how the Fetch API works within a function: JavaScriptfunction fetchData() { fetch('/your_endpoint', { method: 'GET' }) .then(response => response.json()) // Convert the response to JSON .then(data => { console.log('Success:', data); // Do something with the data }) .catch(error => { console.error('Error occurred:', error); // Handle any errors }); } In this example, the fetchData function uses the fetch() method to send a request to the server. You specify the endpoint and HTTP method and use the then and catch methods to handle the server's response and any errors. This process happens in the background, so your web page stays responsive and interactive.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Implementing the sendMessage Function

The sendMessage function will now send the student's question to the server and display the tutor's response in the interface.

HTML

<script>
    function sendMessage() {
        const message = messageInput.value.trim();
        if (!message) return;

        // Add user message
        appendMessage('user', message);
        messageInput.value = '';

        // Send to server
        fetch('/api/send_query', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                session_id: currentSessionId,
                query: message
            })
        })
        .then(response => response.json())
        .then(data => {
            appendMessage('assistant', data.message);
        })
        .catch(() => {
            alert('Error sending message');
        });
    }

    // Handle Enter key
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendQuery();
        }
    });
</script>

<script>
    function sendMessage() {
        const message = messageInput.value.trim();
        if (!message) return;

        // Add user message
        appendMessage('user', message);
        messageInput.value = '';

        // Send to server
        fetch('/api/send_query', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                session_id: currentSessionId,
                query: message
            })
        })
        .then(response => response.json())
        .then(data => {
            appendMessage('assistant', data.message);
        })
        .catch(() => {
            alert('Error sending message');
        });
    }

    // Handle Enter key
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendQuery();
        }
    });
</script>

In this function, we use the Fetch API to send a request to the /api/send_query endpoint. Here's a breakdown of the key parts:

url: We specify the server endpoint /api/send_query where the question should be sent.
method: We use POST again because we're sending data to the server.
headers: This tells the server what kind of data we're sending. Here, it's application/json, which means we're sending JSON data.
body: We use JSON.stringify() to convert our data into a JSON string. This includes the session_id and the query itself.
then: If the request is successful, the tutor's response is added to the interface.
catch: If there's an error, an alert is shown to inform the user.

We also add an event listener to handle the Enter key, allowing users to send messages by pressing Enter.

Example Go/Fiber Endpoint for Handling Queries

Below is a simple example of how you might implement the /api/send_query endpoint in Go using Fiber:

package main

import (
    "github.com/gofiber/fiber/v2"
)

type QueryRequest struct {
    SessionID string `json:"session_id"`
    Query     string `json:"query"`
}

func main() {
    app := fiber.New()

    app.Post("/api/send_query", func(c *fiber.Ctx) error {
        var req QueryRequest
        if err := c.BodyParser(&req); err != nil || req.SessionID == "" || req.Query == "" {
            return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
                "status": "error",
                "error": fiber.Map{
                    "message": "Missing session_id or query",
                    "code":    400,
                },
            })
        }

        // For demonstration, we return a static response.
        return c.JSON(fiber.Map{
            "session_id": req.SessionID,
            "message":    "Great question! The Pythagorean theorem states that in a right triangle, the square of the hypotenuse is equal to the sum of the squares of the other two sides.",
        })
    })

    app.Listen(":3000")
}

package main

import (
    "github.com/gofiber/fiber/v2"
)

type QueryRequest struct {
    SessionID string `json:"session_id"`
    Query     string `json:"query"`
}

func main() {
    app := fiber.New()

    app.Post("/api/send_query", func(c *fiber.Ctx) error {
        var req QueryRequest
        if err := c.BodyParser(&req); err != nil || req.SessionID == "" || req.Query == "" {
            return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
                "status": "error",
                "error": fiber.Map{
                    "message": "Missing session_id or query",
                    "code":    400,
                },
            })
        }

        // For demonstration, we return a static response.
        return c.JSON(fiber.Map{
            "session_id": req.SessionID,
            "message":    "Great question! The Pythagorean theorem states that in a right triangle, the square of the hypotenuse is equal to the sum of the squares of the other two sides.",
        })
    })

    app.Listen(":3000")
}

This handler checks for the required fields and returns either an error or a sample tutor response.

Integrating API Requests for Dynamic Tutor Interaction

Understanding Fetch API

Join the 1M+ learners on CodeSignal

Initializing Tutor Variables

Implementing the startNewSession Function

Example Go/Fiber Endpoint for Creating a Session

Implementing the appendMessage Function

Implementing the sendMessage Function

Example Go/Fiber Endpoint for Handling Queries

Sample API Response Bodies

Summary and Next Steps