Welcome to the first lesson of our course on developing a personal tutor web application with Sinatra
! In this lesson, we will focus on setting up a basic tutor interface using Sinatra
and HTML
. This is an essential step in creating a user-friendly web application that enhances the learning experience. A well-designed interface is crucial for engaging students and ensuring they can interact with the tutor seamlessly.
Note: In this lesson, we will focus solely on building the user interface for the tutor application. We will not be connecting the interface to any backend chat logic or actual tutor responses yet. The goal is to create the structure and interactivity of the UI, laying the groundwork for integrating real chat functionality in future lessons.
To help you better visualize the interface we're building, here's a simple mockup of how the tutor web page will look after following the steps in this lesson:
- The header is at the top, welcoming the user.
- The messages area is in the center, where the conversation between the student and tutor appears.
- At the bottom, there is an input field for typing questions, a Send button, and a New Session button.
Sinatra
is a lightweight web framework for Ruby
that makes it easy to build web applications quickly. Sinatra
supports rendering HTML
content using template engines. One of the most common template engines in Ruby
is ERB
(Embedded Ruby), which allows you to embed Ruby
code directly within your HTML
files.
With ERB
, you can:
- Insert dynamic
Ruby
variables intoHTML
- Use control structures like loops and conditionals
- Create reusable partials for common components
By combining Sinatra
with ERB
, you can efficiently generate dynamic HTML
pages while keeping your application logic and presentation separate.
To serve HTML
templates with Sinatra
, we need to create a dedicated views
directory in our project. This directory will store all our ERB
template files that will be rendered by the application.
The views
directory is placed at the root level of our project, making it easily accessible from our main application file. This organization follows the conventional structure for Sinatra
applications and keeps our template files separate from the application logic.
Once we have our directory structure in place, we can configure Sinatra
to use ERB
for template rendering. By default, Sinatra
looks for templates in the views
directory, so no additional configuration is needed for basic usage.
Here is how you can set up your main application file (app.rb
):
The erb :tutor
line tells Sinatra
to render the tutor.erb
template located in the views
directory. This makes it easy to serve HTML
pages with embedded Ruby
code.
With our views
directory and ERB
setup complete, we can now render HTML
templates in our route handlers and pass data to them if needed. In Sinatra
, you can pass a hash of local variables to the template:
Inside your ERB
template, you can access the title
variable like this:
For this lesson, we will keep things simple and focus on rendering the basic interface without dynamic data.
The HTML
template for the tutor interface begins with the basic structure of an HTML
document. This includes the <!DOCTYPE html>
declaration, which defines the document type and version of HTML
being used. The <html>
tag wraps the entire content of the page, and within it, the <head>
section is defined.
In the <head>
section, we set the title of the page to "Your Personal Tutor", establishing the foundation for the tutor interface.
Moving into the <body>
of the document, we start with a header section that sets the tone for the tutor interface. This section is designed to welcome students and encourage them to engage with the personal tutor.
The header includes a main heading (<h1>
) and a paragraph (<p>
), providing a friendly introduction to the tutoring service. This sets the stage for the interactive elements that follow.
Following the header, we define the tutor container, which is the core of the user interface. This section is responsible for displaying the conversation and providing input elements for student interaction.
The #messages
div is where the conversation between the student and tutor will appear, while the input field and buttons allow students to type and send questions. The "Send"
button triggers the sendMessage
function, and the "New Session"
button clears the conversation history, preparing the interface for a new tutoring session.
After setting up the HTML
structure, we move on to adding interactivity to our tutor interface using JavaScript
. This is done by placing a script section at the bottom of the HTML
document, where we'll define the necessary JavaScript
functions.
In this section, we create a script block within our HTML
code to define JavaScript
functions that enable interactivity in the tutor interface. By using plain JavaScript
, we can directly manipulate HTML
elements and handle user events. Placing the script at the end of the document ensures that all HTML
elements are fully loaded before the script runs, preventing errors that might occur if the script tries to access elements that haven't been rendered yet. This approach allows us to seamlessly integrate JavaScript
into our HTML
, enhancing the functionality of our web application.
Before implementing the functions that handle tutor interactions, it's important to obtain references to the necessary DOM
elements. The DOM (Document Object Model) represents the structure of a web page that JavaScript can interact with, allowing scripts to read and manipulate the content, structure, and style of the page. This allows us to manipulate these elements directly within our JavaScript
code.
By retrieving references to the messagesContainer
and messageInput
elements, we can easily update the tutor interface and handle student input. The messagesContainer
is where the conversation will be displayed, and the messageInput
is the field where students type their questions. These references are crucial for implementing the interactive functions that follow.
With the necessary DOM
elements initialized, we can proceed to create functions that enhance the interactivity of our tutor interface. The startNewSession
function is designed to clear the conversation history, allowing students to begin a fresh tutoring session. This function is triggered when the "New Session" button is clicked.
The startNewSession
function currently clears all messages from the tutor interface visually, providing a clean slate for students to start a new learning session. In future lessons, we will also clear the conversation history from our system’s backend, ensuring that both the interface and the underlying data are reset. Additionally, while the current implementation simply echoes the user's input as the assistant's response, we will later replace this with actual AI-generated responses to create a more realistic tutoring experience.
This functionality is essential for resetting the conversation and enhancing the user experience by allowing multiple interactions without refreshing the page. By adding an event listener for the DOMContentLoaded
event, we ensure that the startNewSession
function is automatically called when the page finishes loading, so the tutor interface is always initialized with a clean state, ready for student interaction as soon as the page is accessed.
To effectively display the conversation in our tutor interface, we use the appendMessage
function. This function creates a new message element, assigns it a CSS class based on the message's origin (user or assistant), appends it to the conversation container, and ensures the view scrolls to the latest message.
The appendMessage
function is crucial for dynamically adding messages to the tutor interface. It creates a new <div>
element for each message, assigns a class to differentiate between student and tutor messages, and appends it to the messagesContainer
. This function also ensures that the conversation view automatically scrolls to the bottom, keeping the latest messages in view.
Building on the appendMessage
function, the sendMessage
function handles student input and updates the tutor interface. It processes the student's question, displays it, and simulates a response from the tutor. This function is triggered when the "Send" button is clicked or when the student presses Enter without holding Shift.
The sendMessage
function is responsible for capturing the student's input, ensuring it's not empty, and then displaying it in the tutor interface using the appendMessage
function. After sending the question, it clears the input field to prepare for the next question. It also simulates a response from the tutor by echoing the student's question back after a short delay, demonstrating basic interactivity in the tutoring application.
To enhance the user experience, we can allow students to send questions by pressing the Enter key. This functionality is implemented by listening for the Enter key press event on the input field.
This code snippet listens for the keypress
event on the messageInput
field. When the Enter key is pressed without the Shift key, it prevents the default behavior (which would be to insert a newline) and calls the sendMessage
function. This allows students to quickly send questions using the keyboard, improving the tutor interface's usability.
In this lesson, we covered the essential steps for setting up a basic tutor interface using Sinatra
and ERB
. We explored how Sinatra
serves HTML
templates using ERB
and how JavaScript
is used to handle student interactions. By understanding the integration among Sinatra
, HTML
, and JavaScript
, you have laid the groundwork for building a dynamic web application for personalized tutoring. As you move on to the practice exercises, focus on reinforcing these concepts and experimenting with the code to deepen your understanding. This foundational knowledge will be crucial as we continue to enhance the personal tutor's capabilities in future lessons.
