Build an SMS Reminder Tool for Teachers Using Google Classroom

Published June 04, 2020 by Karl Hughes

blog spotlight banner

I’ve worked in education technology for several years now, and one challenge that I often hear from teachers is that students don’t check their email accounts. There are whole businesses, like Remind, built around this communication problem.

In this walk-through, we’re going to build an SMS reminder app that allows teachers to remind their students about upcoming assignments in Google Classroom. We’ll use the Google Classroom API to enforce authentication and get course and assignment data, and the Vonage Messages API to power the text messages that teachers send to their students.

Planning the Application

Before we get started, let’s understand the core functionality and architecture of our application. In this tutorial, we’ll address three user stories:

  • Teachers can log in to our application using their Google account.
  • Teachers can see a list of their most recent assignments and select the one they want to remind students about.
  • Teachers can remind each student via SMS about the upcoming assignment.

Let’s look at the flow of data between our application and the two supporting APIs (Google Classroom and Vonage Messages):

Planning an SMS reminder tool for teachers using Google Classroom

We’ll use Node and Express for this demo, but Google and Vonage both offer API clients in most major programming languages. If you’d like to skip ahead, you can download the code on Github and follow the “Quick Start” section in the Readme to get the app up and running.

Prerequisites

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard

Start building with Vonage

Building the Application

Step 1: Creating a New Express Application

First, let’s create a new Express application that uses Handlebars for templating and express-session for session storage. We’ll use the Express application generator to make this easier:

This command will create a new directory called classroom-reminders with a boilerplate Express app inside. Let’s navigate into that directory and install the Express session storage package as well as our other packages provided by Express:

In order to use the session package, we’ll need to add it to our app.js file. Add the following lines where indicated in the comment:

If you want to make sure everything is working so far, run SESSION_SECRET=<A SECURE STRING FOR PROTECTING SESSIONS> npm start and visit localhost:3000 in your browser. You should see the default Express welcome page.

Step 2: Adding Google Authentication

Now that we’ve got a new Express application let’s add authentication using Google’s OAuth client.

If you haven’t already, create a new Project in the Google API portal and add OAuth 2.0 credentials to it. Be sure to set your OAuth callback URL to localhost:3000 for this tutorial, but if you deploy this application to a production environment, you’ll want to change the callback URL.

Creating a Client ID in the Google Developer Console

Google will generate a Client ID and Client Secret that we’ll use throughout this tutorial.

Next, we’ll install the Google APIs npm package:

To help keep our code organized, we’ll create a new file in our classroom-reminders project just for our Google API code. Create a new folder called helpers/ and a file in it called google-api.js. Add the following to this file:

I won’t dive into all the details about how OAuth works, but the three exported functions are all part of a standard server-side OAuth workflow. The loginUrl generates a unique login URL that users will see before they’ve authenticated. The getToken function trades a one-time code generated by Google’s servers for a long-lived access token. The getCurrentUser function uses that access token to get the currently authenticated user’s information from the Google API.

Another worthwhile consideration are the scopes that we’re requesting:

Scopes limit the data that our application can access. In general, you should ask for as little access as possible to build your application, so we’re just asking for user profile information and Google Classroom read access.

Next, we’ll update our Express application’s routes/index.js file. This route will check for a code in the query string, and if found, will use the google-api helper file we created to trade that code for an authorization token. Then, it will save that token (along with a refresh token and expiration date) to session storage. Finally, it will redirect users to the /assignments page after they’re logged in:

We’ll also need to modify the views/index.hbs file to display this login link:

If we want to test our application so far, we’ll need to start it with our Google OAuth ID, secret, and redirect URL:

This time when we navigate to localhost:3000, we’ll see a login link:

Login screen for Google Classroom Reminders application

After you click login, Google will take us through the approval process for our new app:

Permissions approval for Google Classroom Reminders application

After you approve our application, you’ll be taken to localhost:3000/assignments, but that URL doesn’t exist yet. We’ll create it in the next section.

Step 3: Displaying a Teacher’s Assignments and Courses from Google Classroom

Now that we’ve built a login process for our application, we need to use the user’s access token to get their courses and assignments from Google Classroom’s API.

First, we’ll need to add two new functions to the helpers/google-api.js file:

These will allow us to request a list of Courses and CourseWork (Google Classroom’s name for assignments) from the Google Classroom API on behalf of the current user. Next, create a new route file at routes/assignments.js:

This will loop through all of the user’s courses and get the latest assignments for each of them. We’ll also need to add this route to the app.js file:

Finally, we’ll create a new view file (views/assignments.hbs) to display all of the current user’s courses and assignments:

If you start the application as you did in the previous step and login to it again, you should see a list of your Google Classroom courses and assignments:

Viewing Google Classroom courses and assignments

At this point, users can log in to our application using their Google account and see a list of the most recent assignments from their Google Classroom courses. Next, we’ll let users drill down and view the students in each course and whether they’ve turned a particular assignment in or not.

Step 4: Displaying a Teacher’s Roster and Student Work for a Particular Google Classroom Assignment

To show a list of students enrolled in a course and check whether they’ve turned in that particular assignment, we’ll need to access a few new endpoints in the Google Classroom API.

Let’s add these new functions the the google-api.js helper file:

Next, let’s create a new route in the routes/assignments.js file to get the following:

  • A single Course
  • The roster of students for that Course
  • A single Course Work object
  • Student Submissions for that Course Work

Interestingly, the Google Classroom API won’t let us get a single Course Work without both a Course ID and Course Work ID. In order to pass both IDs in as a single route parameter, we concatenated them with a : in the previous step. Hence this line in the views/assignments.hbs file:

Now we need to parse these two IDs in our new route and then pass them into the appropriate functions we created in the google-api.js file. Add the following lines to your routes/assignments.js file:

Finally, we’ll need a new view to see all the students and their submission status for a particular assignment. Create a file at views/assignment.hbs and add the following:

Now, if we start the application and log in again, we can drill down into a particular assignment and see each student’s submission status (denoted by ✅ or ❗️).

In the final step, we’ll allow users to send SMS messages to students using the Vonage Messages API.

Step 5: Adding Text Message Reminders Using the Vonage Messages API

The Vonage Messages API can send and receive messages across several channels, but for this application, we’ll only use SMS text messages.

Assuming you’ve already created a Vonage API application, the next step is to install the JavaScript client. In addition to this client, we’ll also add the google-libphonenumber package to help format phone numbers:

Next, let’s create another helper file for our code that formats phone numbers and sends SMS messages via the Nexmo library. Create a new file at helpers/nexmo-api.js:

In order to process inputs from a user and call the sendSms function we just created, let’s make a new route file at routes/messages.js:

This file iterates over an array of telephone numbers and messages and calls the sendSms method for each one that has a phone number. We’ll also need to update our app.js file to use this new route:

Because Google’s API doesn’t give us access to students’ phone numbers, we’ll have to make teachers enter these numbers in our interface along with a message for each student. Let’s edit the views/assignment.hbs file to include these two form fields for each student and a submit button:

Our application is basically finished, but we need to get all our Vonage credentials in order before we can use it. First, download your Vonage API private key and save it to a new file called .private_key. Now, start your application with all of the Google and Vonage API environment variables:

This time when you log in and view a single assignment, you’ll be able to enter a phone number for each of your students and customize a message to send them. When you’re ready, click “Send Reminders” to test the whole thing out.

Sending SMS Reminders using Google Classroom and the Vonage Messages API

Next Steps

While this demo application covers a relatively simple use-case, it’s easy to see how powerful the Vonage Messages API can be when coupled with an LMS like Google Classroom. There are several ways you could continue to enhance the user experience with an application like this:

  • Storing phone numbers in a database so that teachers don’t have to enter them every time
  • Allowing users to change the default reminder message
  • Adding support for other messaging channels like Facebook, What’s App, or Viber
  • Caching Google Classroom data to improve performance and avoid rate limits
  • User-friendly error and success messages
  • Custom design and styling

If you have questions or other ideas for implementing a reminder system using Vonage and Google Classroom, reach out to us on Twitter or the Vonage Developer Community Slack!

Leave a Reply

Your email address will not be published.

Get the latest posts from Nexmo’s next-generation communications blog delivered to your inbox.

By signing up to our communications blog, you accept our privacy policy , which sets out how we use your data and the rights you have in respect of your data. You can opt out of receiving our updates by clicking the unsubscribe link in the email or by emailing us at [email protected].