Welcome back! In the previous lesson, you set up a basic interface for your personal tutor using PHP and HTML. This laid the foundation for creating a user-friendly educational web application. Now, we will take the next step by connecting this interface to our backend API. This connection is crucial 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.

In this lesson, we will enhance our tutor interface by connecting it to the backend API using the Fetch API. 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:

1. 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.

2. 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.

3. 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:

Now that we have a basic understanding of the Fetch API, let's prepare our tutor application by initializing some variables to store the current session ID. This variable will help us manage and track each tutoring session as we implement dynamic functionalities.

This variable is initialized to null and will be used to store the session ID once a new tutoring session is created. With this setup in place, we can now move on to updating the startNewSession and sendQuery functions to incorporate Fetch API functionalities for dynamic communication.

Previously, the startNewSession function simply cleared the chat history. Now, we will update it to initialize a new tutoring session by making a Fetch request to the backend.

In this updated version, the startNewSession function uses the Fetch API to send a request to the server. Here's how it works:

• url: This is the endpoint on the server where we want to send our request. In this case, it's /api/create_session.
• method: This specifies the type of request we're making. We use POST here because we're sending data to the server to create something new.
• credentials: The include value ensures that cookies are sent with the request, which can be important for maintaining session state.
• then: This method runs if the request is successful. The server sends back a response, and we use the session_id from this response to set up our tutoring session.

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

In this enhanced version, the sendQuery function uses 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.
• credentials: Including credentials ensures that session cookies are sent with the request.
• 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 and the query itself.

To help you better understand how the backend communicates with the frontend, let's look at some sample response bodies you might receive from the API endpoints. Seeing these examples will clarify what kind of data your JavaScript code will be working with and how to handle different scenarios.

When creating a new session with /api/create_session, the backend returns a JSON object containing the session ID:

When a student's question is successfully processed by /api/send_query, the backend returns a JSON object containing the response:

In your JavaScript code, you can access the tutor's reply using data.response and display it in the chat interface.

On the other hand, if something goes wrong, the backend will return an error response:

In your frontend, you check for the presence of an error property and show a helpful message to the user, ensuring a smooth and user-friendly experience.

In this lesson, you learned how to connect the tutor interface to a backend API using PHP and the Fetch API. We covered the setup of API endpoints, the integration of the frontend with the backend, and the implementation of tutoring functionality. This connection is a crucial step in creating a dynamic and interactive educational application.

As you move on to the practice exercises, focus on reinforcing these concepts and experimenting with the code. This hands-on practice will deepen your understanding and prepare you for the next unit, where we will continue to enhance the personal tutor's capabilities. Keep up the great work, and let's continue building this exciting educational tool together!