Welcome back! In the previous lesson, you set up a basic interface for your personal tutor using Django and HTML. 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 using Django. 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 in Django, enabling real-time communication between the student and the tutor system.

To manage each tutoring session, we need to keep track of the current session. In Django, this is typically handled by passing context variables from the view to the template or by initializing variables in the frontend as needed. In our example, we use a variable to store the current session ID, which will be updated when a new session is created.

Here is how you can initialize the session variable in your template:

This variable is set to null initially and will be updated when a new tutoring session is started. This setup allows us to manage the session state as we implement dynamic functionalities.

Previously, the startNewSession function simply cleared the chat history. Now, we will update it to initialize a new tutoring session by making a request to the Django backend. The backend will generate a new session and return its ID, which we will use to track the conversation.

Here is how the function is implemented in the template:

In this implementation:

• The function sends a POST request to the /api/create_session/ endpoint provided by your Django backend.
• If the request is successful, the backend responds with a new session_id, which is stored in the currentSessionId variable, and the studentId, which is stored in the currentStudentId variable.
• The chat history is cleared to start a fresh session.
• If there is an error, an alert is shown to inform the user.

This approach allows the frontend to communicate with the Django backend and manage tutoring sessions dynamically.

The sendQuery function is responsible for sending the student's question to the backend and displaying the tutor's response in the interface. In Django, you can set up an API endpoint to handle these queries and return responses in JSON format.

Here is how the function is implemented in the template:

In this function:

• The student's question is sent to the /api/send_query/ endpoint using a POST request.
• The request includes the current session_id, student_id and the query in JSON format.
• If the request is successful, the tutor's response (contained in data.message) is displayed in the chat interface.
• If there is an error, an alert is shown to inform the user.

This structure enables dynamic communication between the frontend and the Django backend, creating an interactive tutoring experience.

To better understand how the Django backend communicates with the frontend, let's look at some sample response bodies you might receive from the /api/send_query/ endpoint.

When a student's question is successfully processed, the backend returns a JSON object containing the session ID and the tutor's response message:

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

If something goes wrong, such as a missing or invalid session ID, the backend will return an error response. This response includes a status, an error message, and an error code:

In your frontend code, you can check for the presence of an error 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 Django. We covered the setup of API endpoints, the integration of the frontend with the backend, and the implementation of tutoring functionality using Django's approach. 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 using Django. Keep up the great work, and let's continue building this exciting educational tool together!