Welcome back! In the previous lesson, you set up a basic interface for your personal tutor using Axum and Askama in Rust. 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 tools provided by Rust, Axum, and Askama. This will allow us to capture student input and send it to the server, transforming our tutor into a dynamic application.

The communication between the frontend and backend in this context is handled through HTTP requests. When a user interacts with the web interface (for example, by starting a new session or sending a question), the browser sends HTTP requests to specific endpoints defined in your Axum application. The backend processes these requests and returns responses, which are then displayed in the user interface.

Here's how this process works:

1. Making a Request: When the user wants to start a new session or send a question, the frontend sends an HTTP request to the appropriate endpoint (such as /api/create_session or /api/send_query).

2. Handling the Response: The backend, implemented in Rust with Axum, processes the request and returns a response in JSON format. The frontend then updates the interface based on this response.

3. Dealing with Errors: If something goes wrong (for example, if required data is missing), the backend returns an error response. The frontend can then display an appropriate message to the user.

This approach allows for smooth, interactive communication between the user and the tutor system, all powered by Rust and Axum.

To enable dynamic interaction between your frontend and backend, you'll use the Fetch API in your JavaScript code. The Fetch API provides a modern, promise-based way to make HTTP requests from the browser. This allows your application to send data to your Axum backend (such as starting a new session or sending a query) and handle the responses asynchronously, updating the user interface in real time.

For example, to create a new tutoring session, you can use the Fetch API to send a POST request with a JSON payload:

This approach is used throughout your tutor application to connect the frontend interface with your Rust/Axum backend, enabling a seamless and interactive user experience.

Session and student IDs are essential for tracking user interactions in your tutor application. In Rust with Axum and Askama, these IDs are managed as part of the request and response data structures. When a new session is started from the frontend, it sends a request to the /api/create_session endpoint with a student_id. The backend generates a unique session_id and returns it in the response, allowing the frontend to associate future queries with this session.

Here’s how the backend handles session creation in routes.rs:

The frontend receives the new session_id in the response and uses it for subsequent requests, such as sending queries to the tutor. This approach ensures that each tutoring session is uniquely identified and managed throughout the interaction.

To send a student's question to the backend and display the tutor's response, the frontend sends a request to the /api/send_query endpoint. The backend processes the query and returns a response message.

Here is how the backend handles incoming queries in routes.rs:

The backend receives the student_id, session_id, and the query itself, processes the request, and returns a response containing the tutor's message. The frontend can then display this message in the chat interface.

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/send_query endpoint. Seeing these examples will clarify what kind of data your Rust backend is returning and how it can be used in Askama templates or in the frontend logic.

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

On the other hand, 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:

These responses can be used by the frontend to update the user interface or display helpful error messages, ensuring a smooth and user-friendly experience.

In this lesson, you learned how to connect the tutor interface to a backend API using Axum and Askama in Rust. 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!