Erstellen eines SMS-Erinnerungstools für LehrerInnen mit Google Classroom

Ich arbeite seit mehreren Jahren im Bereich der Bildungstechnologie, und ein Problem, das ich oft von Lehrern höre, ist, dass die Schüler ihre E-Mail-Konten nicht abrufen. Es gibt ganze Unternehmen, wie Remindum dieses Kommunikationsproblem herum aufgebaut.

In dieser Anleitung werden wir eine SMS-Erinnerungs-App erstellen, mit der Lehrer ihre Schüler an anstehende Aufgaben in Google Classroom erinnern können. Wir verwenden die Google Klassenzimmer-API um die Authentifizierung zu erzwingen und Kurs- und Aufgabendaten abzurufen, und die Vonage Messages API um die Textnachrichten zu erstellen, die Lehrer an ihre Schüler senden.

Planung der Anwendung

Bevor wir beginnen, sollten wir die Kernfunktionen und die Architektur unserer Anwendung verstehen. In diesem Tutorial werden wir uns mit drei User Stories befassen:

• Lehrkräfte können sich mit ihrem Google Account bei unserer Anwendung anmelden.

• Lehrer können eine Liste ihrer letzten Aufgaben einsehen und diejenige auswählen, an die sie die Schüler erinnern möchten.

• Die Lehrer können jeden Schüler per SMS an die anstehende Aufgabe erinnern.

Schauen wir uns den Datenfluss zwischen unserer Anwendung und den beiden unterstützenden APIs (Google Classroom und Vonage Messages) an:

Wir verwenden Knoten und Express für diese Demo, aber sowohl Google als auch Vonage bieten API-Clients in den meisten gängigen Programmiersprachen an. Wenn Sie weitermachen möchten, können Sie den Code auf Github herunterladen herunterladen und dem Abschnitt "Schnellstart" in der Readme-Datei folgen, um die Anwendung zum Laufen zu bringen.

Voraussetzungen

• A Google APIs-Konto und Projekt mit OAuth 2.0 Client-Anmeldeinformationen

• A Google-Klassenzimmer-Konto mit einer Klasse, an der mehrere Schüler teilnehmen, und mit mindestens einer Aufgabe

• Knotenpunkt und npm (Ich verwende Node v10 und npm v6)

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Erstellung der Anwendung

Schritt 1: Erstellen einer neuen Express-Anwendung

Erstellen wir zunächst eine neue Express-Anwendung, die Handlebars für die Schablonenerstellung und express-session für die Speicherung von Sitzungen verwendet. Wir verwenden den Express-Anwendungsgenerator um dies zu vereinfachen:

npx express-generator --hbs --git classroom-reminders

Dieser Befehl erstellt ein neues Verzeichnis namens classroom-reminders mit einer Standard-Express-Anwendung darin. Navigieren wir in dieses Verzeichnis und installieren wir das Express-Sitzungsspeicherpaket sowie unsere anderen von Express bereitgestellten Pakete:

npm i --save express-session && npm i

Um das Sitzungspaket verwenden zu können, müssen wir es zu unserer app.js Datei hinzufügen. Fügen Sie die folgenden Zeilen an den im Kommentar angegebenen Stellen ein:

// Add this line to the top of your app.js file
var session = require("express-session");
...
var app = express();
...
// And this block after the app has been created
app.use(session({
  secret: process.env.SESSION_SECRET,
  resave: true,
  saveUninitialized: true,
}));
...

Wenn Sie sich vergewissern wollen, dass bisher alles funktioniert, führen Sie SESSION_SECRET=<A SECURE STRING FOR PROTECTING SESSIONS> npm start und besuchen Sie localhost:3000 in Ihrem Browser auf. Sie sollten die standardmäßige Express-Begrüßungsseite sehen.

Schritt 2: Hinzufügen der Google-Authentifizierung

Jetzt, wo wir eine neue Express-Anwendung haben, können wir die Authentifizierung mit dem OAuth-Client von Google hinzufügen.

Wenn Sie es noch nicht getan haben, erstellen Sie ein neues Projekt im Google API-Portal und fügen Sie OAuth 2.0-Anmeldeinformationen hinzu. Stellen Sie sicher, dass Ihre OAuth-Callback-URL auf localhost:3000 Wenn Sie diese Anwendung jedoch in einer Produktionsumgebung einsetzen, müssen Sie die Callback-URL ändern.

Creating a Client ID in the Google Developer Console

Google generiert eine Client-ID und ein Client-Geheimnis, die wir im Verlauf dieses Tutorials verwenden werden.

Als nächstes installieren wir das Google APIs npm-Paket:

npm i --save googleapis

Um unseren Code übersichtlich zu halten, erstellen wir eine neue Datei in unserem classroom-reminders Projekt eine neue Datei nur für unseren Google API Code. Erstellen Sie einen neuen Ordner namens helpers/ und darin eine Datei mit dem Namen google-api.js. Fügen Sie Folgendes zu dieser Datei hinzu:

const google = require("googleapis").google;

const googleConfig = {
  clientId: process.env.GOOGLE_OAUTH_ID,
  clientSecret: process.env.GOOGLE_OAUTH_SECRET,
  redirect: process.env.GOOGLE_OAUTH_REDIRECT,
};

const createConnection = () => {
  return new google.auth.OAuth2(
    googleConfig.clientId,
    googleConfig.clientSecret,
    googleConfig.redirect
  );
};

const getConnectionUrl = (auth) => {
  return auth.generateAuthUrl({
    access_type: "offline",
    prompt: "consent",
    scope: [
      "https://www.googleapis.com/auth/userinfo.profile",
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/classroom.courses.readonly",
      "https://www.googleapis.com/auth/classroom.rosters.readonly",
      "https://www.googleapis.com/auth/classroom.coursework.students.readonly",
    ],
  });
};

/**
 * Exported functions
 */

module.exports.loginUrl = () => {
  const auth = createConnection();
  return getConnectionUrl(auth);
};

module.exports.getToken = async (code) => {
  const auth = createConnection();
  const data = await auth.getToken(code);
  return data.tokens;
};

module.exports.getCurrentUser = async (tokens) => {
  const auth = createConnection();
  auth.setCredentials(tokens);

  const res = await google
    .oauth2({
      auth,
      version: "v2",
    })
    .userinfo.get();

  return { ...res.data };
};

Ich werde nicht in alle Details eintauchen, wie OAuth funktioniertaber die drei exportierten Funktionen sind alle Teil eines standardmäßigen serverseitigen OAuth-Workflows. Die loginUrl generiert eine eindeutige Anmelde-URL, die die Benutzer sehen, bevor sie sich authentifiziert haben. Die getToken Funktion tauscht einen einmaligen Code, der von Googles Servern generiert wird, gegen ein langlebiges Zugriffstoken. Die Funktion getCurrentUser Funktion verwendet dieses Zugriffstoken, um die Informationen des aktuell authentifizierten Nutzers von der Google-API abzurufen.

Eine weitere Überlegung wert sind die scopes die wir beantragen:

scope: [
  "https://www.googleapis.com/auth/userinfo.profile",
  "https://www.googleapis.com/auth/userinfo.email",
  "https://www.googleapis.com/auth/classroom.courses.readonly",
  "https://www.googleapis.com/auth/classroom.rosters.readonly",
  "https://www.googleapis.com/auth/classroom.coursework.students.readonly",
],

Scopes schränken die Daten ein, auf die unsere Anwendung zugreifen kann. Im Allgemeinen sollten Sie so wenig Zugriff wie möglich verlangen, um Ihre Anwendung zu erstellen. Wir verlangen also nur Nutzerprofilinformationen und Lesezugriff auf Google Classroom.

Als nächstes aktualisieren wir die Express-Anwendung in der routes/index.js Datei. Diese Route wird nach einem code in der Abfragezeichenkette, und wenn sie gefunden wird, verwendet sie die google-api Helper-Datei, die wir erstellt haben, um diesen Code gegen ein Autorisierungs-Token einzutauschen. Anschließend wird dieses Token (zusammen mit einem Refresh-Token und einem Ablaufdatum) im Sitzungsspeicher gespeichert. Schließlich werden die Benutzer zur /assignments Seite um, nachdem sie eingeloggt sind:

const express = require("express");
const router = express.Router();
const googleApi = require("../helpers/google-api");

router.get("/", function (req, res, next) {
  if (req.query.code) {
    googleApi.getToken(req.query.code).then((tokens) => {
      req.session.tokens = tokens;
      req.session.save(() => {
        res.redirect("/assignments");
      });
    });
  } else {
    res.render("index", {
      loginUrl: googleApi.loginUrl(),
    });
  }
});

module.exports = router;

Wir müssen auch die Datei views/index.hbs Datei ändern, um diesen Anmeldelink anzuzeigen:

<h1>Google Classroom Reminders</h1>
<p>Log in with Google to remind your students about their upcoming assignments.</p>

<p>
  <a href="{{ loginUrl }}">Login</a>
</p>

Wenn wir unsere Anwendung testen wollen, müssen wir sie mit unserer Google OAuth ID, dem Geheimnis und der Umleitungs-URL starten:

GOOGLE_OAUTH_ID=<YOUR GOOGLE OAUTH ID> \
GOOGLE_OAUTH_SECRET=<YOUR GOOGLE OAUTH SECRET> \
GOOGLE_OAUTH_REDIRECT=http://localhost:3000/ \
SESSION_SECRET=<A SECURE STRING FOR PROTECTING SESSIONS>  \
npm start

Wenn wir dieses Mal zu localhost:3000navigieren, wird ein Anmeldelink angezeigt:

Login screen for Google Classroom Reminders application

Nachdem Sie auf Anmelden geklickt haben, führt Google uns durch den Genehmigungsprozess für unsere neue App:

Permissions approval for Google Classroom Reminders application

Nachdem Sie unseren Antrag genehmigt haben, werden Sie zu localhost:3000/assignmentsweitergeleitet, aber diese URL existiert noch nicht. Wir werden sie im nächsten Abschnitt erstellen.

Schritt 3: Anzeigen der Aufgaben und Kurse eines Lehrers aus Google Classroom

Nachdem wir nun einen Anmeldeprozess für unsere Anwendung erstellt haben, müssen wir das Zugriffstoken des Nutzers verwenden, um seine Kurse und Aufgaben von der API von Google Classroom zu erhalten.

Zunächst müssen wir zwei neue Funktionen in die helpers/google-api.js Datei hinzufügen:

...
module.exports.getCourses = async (tokens) => {
  const auth = createConnection();
  auth.setCredentials(tokens);

  const res = await google
    .classroom({ version: "v1", auth })
    .courses.list({ teacherId: "me", courseStates: "ACTIVE" });

  return res.data.courses ? [...res.data.courses] : [];
};

module.exports.getCourseWorks = async (tokens, courseId) => {
  const auth = createConnection();
  auth.setCredentials(tokens);

  const res = await google
    .classroom({ version: "v1", auth })
    .courses.courseWork.list({ courseId: courseId, orderBy: "dueDate desc" });

  return res.data.courseWork ? [...res.data.courseWork] : [];
};

Diese ermöglichen es uns, eine Liste anzufordern mit Kurse und CourseWork (der Name von Google Classroom für Aufgaben) von der Google Classroom API im Namen des aktuellen Nutzers anzufordern. Als nächstes erstellen Sie eine neue Routendatei unter routes/assignments.js:

const express = require("express");
const router = express.Router();
const googleApi = require("../helpers/google-api");

router.get("/", function (req, res, next) {
  if (!req.session.tokens) {
    res.redirect("/");
  }

  googleApi.getCourses(req.session.tokens).then(async (courses) => {
    Promise.all(
      courses.map(async (course) => {
        course.assignments = await googleApi.getCourseWorks(
          req.session.tokens,
          course.id
        );
        return course;
      })
    ).then((courses) => {
      res.render("assignments", { courses });
    });
  });
});

module.exports = router;

Damit werden alle Kurse des Benutzers in einer Schleife durchlaufen und die neuesten Aufgaben für jeden von ihnen abgerufen. Wir müssen diese Route auch in die app.js Datei hinzufügen:

var assignmentsRouter = require('./routes/assignments');
...
app.use('/', indexRouter);
app.use('/assignments', assignmentsRouter);
...

Schließlich erstellen wir eine neue Ansichtsdatei (views/assignments.hbs), um alle Kurse und Aufgaben des aktuellen Benutzers anzuzeigen:

<h1>Google Classroom Reminders</h1>
<p>Select an Assignment to remind your students about.</p>

{{#each courses}}
<h2>{{ this.name }}</h2>
  {{#if assignments}}
  <ul>
      {{#each assignments}}
        <li>
          <a href="/assignments/{{ ../id }}:{{ this.id }}">{{ this.title }}</a><br/>
          Due on {{ this.dueDate.month }}/{{ this.dueDate.day }}/{{ this.dueDate.year }}
        </li>
      {{/each}}
  </ul>
  {{else}}
  <p>No assignments found</p>
  {{/if}}
{{/each}}

Wenn Sie die Anwendung wie im vorherigen Schritt starten und sich erneut anmelden, sollten Sie eine Liste Ihrer Google Classroom-Kurse und -Aufgaben sehen:

Viewing Google Classroom courses and assignments

An dieser Stelle können sich die Nutzer mit ihrem Google-Konto bei unserer Anwendung anmelden und eine Liste der neuesten Aufgaben aus ihren Google Classroom-Kursen sehen. Als Nächstes können die Nutzer die Schüler in jedem Kurs aufschlüsseln und sehen, ob sie eine bestimmte Aufgabe abgegeben haben oder nicht.

Schritt 4: Anzeigen des Lehrerverzeichnisses und der Schülerarbeiten für eine bestimmte Google Classroom-Zuweisung

Um eine Liste der in einem Kurs eingeschriebenen Schüler anzuzeigen und zu überprüfen, ob sie eine bestimmte Aufgabe abgegeben haben, müssen wir auf einige neue Endpunkte in der Google Classroom API zugreifen.

Fügen wir diese neuen Funktionen in die google-api.js Hilfedatei hinzu:

...
module.exports.getCourse = async (tokens, courseId) => {
  const auth = createConnection();
  auth.setCredentials(tokens);

  const res = await google
    .classroom({ version: "v1", auth })
    .courses.get({ id: courseId });

  return { ...res.data };
};

module.exports.getCourseRoster = async (tokens, courseId) => {
  const auth = createConnection();
  auth.setCredentials(tokens);

  const res = await google
    .classroom({ version: "v1", auth })
    .courses.students.list({ courseId: courseId });

  return res.data.students ? [...res.data.students] : [];
};

module.exports.getCourseWork = async (tokens, courseId, assignmentId) => {
  const auth = createConnection();
  auth.setCredentials(tokens);

  const res = await google
    .classroom({ version: "v1", auth })
    .courses.courseWork.get({ courseId: courseId, id: assignmentId });

  return { ...res.data };
};

module.exports.getStudentSubmissions = async (
  tokens,
  courseId,
  assignmentId
) => {
  const auth = createConnection();
  auth.setCredentials(tokens);

  const res = await google
    .classroom({ version: "v1", auth })
    .courses.courseWork.studentSubmissions.list({
      courseId: courseId,
      courseWorkId: assignmentId,
    });

  return res.data.studentSubmissions ? [...res.data.studentSubmissions] : [];
};

Als nächstes erstellen wir eine neue Route in der routes/assignments.js Datei eine neue Route an, um Folgendes zu erhalten:

• Ein einzelner Kurs

• Die Liste der Studenten für diesen Kurs

• Ein einzelnes Objekt "Kursarbeit

• Einreichungen von Studenten für diese Kursarbeit

Interessanterweise lässt uns die Google Classroom API nicht zu, eine einzelne Kursarbeit ohne eine Kurs-ID und eine Kursarbeits-ID zu erhalten. Um beide IDs als einen einzigen Routenparameter zu übergeben, haben wir sie mit einem : im vorherigen Schritt. Daher diese Zeile in der views/assignments.hbs Datei:

...
<a href="/assignments/{{ ../id }}:{{ this.id }}">{{ this.title }}</a>
...

Nun müssen wir diese beiden IDs in unserer neuen Route parsen und sie dann an die entsprechenden Funktionen übergeben, die wir in der google-api.js Datei erstellt haben. Fügen Sie die folgenden Zeilen in Ihre routes/assignments.js Datei hinzu:

...
router.get("/:id", function (req, res, next) {
  if (!req.session.tokens) {
    res.redirect("/");
  }

  const ids = req.params.id.split(":");
  const courseId = ids[0];
  const assignmentId = ids[1];

  Promise.all([
    googleApi.getCourse(req.session.tokens, courseId),
    googleApi.getCourseRoster(req.session.tokens, courseId),
    googleApi.getCourseWork(req.session.tokens, courseId, assignmentId),
    googleApi.getStudentSubmissions(req.session.tokens, courseId, assignmentId),
  ]).then(([course, students, courseWork, submissions]) => {
    // Match submissions to students
    if (
      students &&
      students.length > 0 &&
      submissions &&
      submissions.length > 0
    ) {
      students.map((student) => {
        student.submission = submissions.find(
          (submission) => submission.userId === student.userId
        );
        if (student.submission && student.submission.state === "TURNED_IN") {
          student.turnedIn = true;
        }
        return student;
      });
    }

    res.render("assignment", {
      course,
      students,
      courseWork,
      submissions,
    });
  });
});
...

Schließlich brauchen wir eine neue Ansicht, um alle Schüler und ihren Abgabestatus für eine bestimmte Aufgabe zu sehen. Erstellen Sie eine Datei unter views/assignment.hbs und fügen Sie das Folgende hinzu:

<h1>Google Classroom Reminders</h1>
<p>
  Send your students reminders about <a href="{{ courseWork.alternateLink }}">{{ courseWork.title }}</a>
  in <a href="{{ course.alternateLink }}">{{ course.name }}</a>.
</p>

{{#if students}}
<div>
  {{#each students}}
  <p>
    {{#if this.turnedIn}}
      <a href="{{ this.alternateLink }}" title="Assignment turned in">✅</a>
    {{else}}
      <span title="Assignment not turned in">❗️</span>
    {{/if}}
    <strong>{{ this.profile.name.fullName }}</strong>
  </p>
  {{/each}}
</div>
{{else}}
<p>No students found</p>
{{/if}}
<p><a href="/assignments">↩️ Back to all assignments</a></p>

Wenn wir nun die Anwendung starten und uns erneut anmelden, können wir eine bestimmte Aufgabe aufschlüsseln und den Abgabestatus jedes Schülers/jeder Schülerin sehen (gekennzeichnet durch oder ❗️).

Im letzten Schritt ermöglichen wir es den Benutzern, über die Vonage Messages API SMS-Nachrichten an Schüler zu senden.

Schritt 5: Hinzufügen von Textnachrichtenerinnerungen mit der Vonage Messages API

Die Vonage Messages API kann Nachrichten über mehrere Kanäle senden und empfangen, aber für diese Anwendung werden wir nur SMS-Textnachrichten verwenden.

Angenommen, Sie haben bereits eine eine Vonage API-Anwendung erstellt habenerstellt haben, ist der nächste Schritt die Installation des JavaScript-Clients. Zusätzlich zu diesem Client fügen wir auch die google-libphonenumber Paket hinzu, um die Formatierung von Telefonnummern zu unterstützen:

npm i --save nexmo@beta google-libphonenumber

Als nächstes erstellen wir eine weitere Hilfsdatei für unseren Code, der Telefonnummern formatiert und SMS-Nachrichten über die Nexmo-Bibliothek versendet. Erstellen Sie eine neue Datei unter helpers/nexmo-api.js:

const Nexmo = require("nexmo");
const PNF = require("google-libphonenumber").PhoneNumberFormat;
const phoneUtil = require("google-libphonenumber").PhoneNumberUtil.getInstance();

const nexmo = new Nexmo({
  apiKey: process.env.NEXMO_API_KEY,
  apiSecret: process.env.NEXMO_API_SECRET,
  applicationId: process.env.NEXMO_APP_ID,
  privateKey: process.env.NEXMO_PRIVATE_KEY_PATH,
});

module.exports.sendSms = (telephone, message, callback) => {
  const formattedPhoneNumber = phoneUtil.format(
    phoneUtil.parseAndKeepRawInput(telephone, "US"),
    PNF.E164
  );
  nexmo.channel.send(
    { type: "sms", number: formattedPhoneNumber },
    { type: "sms", number: process.env.NEXMO_PHONE_NUMBER },
    {
      content: {
        type: "text",
        text: message,
      },
    },
    callback,
    { useBasicAuth: true }
  );
};

Um die Eingaben eines Benutzers zu verarbeiten und die sendSms Funktion, die wir gerade erstellt haben, erstellen wir eine neue Routendatei unter routes/messages.js:

const express = require("express");
const router = express.Router();
const nexmoApi = require("../helpers/nexmo-api");

router.post("/", function (req, res, next) {
  if (!req.session.tokens) {
    res.redirect("/");
  }
  const { telephones, messages } = req.body;
  Promise.all(
    telephones.map((telephone, key) => {
      if (telephone) {
        return nexmoApi.sendSms(telephone, messages[key]);
      }
    })
  ).then((results) => {
    res.redirect("/assignments");
  });
});

module.exports = router;

Diese Datei iteriert über ein Array von Telefonnummern und Nachrichten und ruft die sendSms Methode für jede Nachricht mit einer Telefonnummer auf. Wir müssen auch unsere app.js Datei aktualisieren, um diese neue Route zu verwenden:

var messagesRouter = require('./routes/messages');
...
app.use('/', indexRouter);
app.use('/assignments', assignmentsRouter);
app.use('/messages', messagesRouter);
...

Da wir über die API von Google keinen Zugriff auf die Telefonnummern der Schüler haben, müssen wir die Lehrer dazu bringen, diese Nummern zusammen mit einer Nachricht für jeden Schüler in unsere Schnittstelle einzugeben. Bearbeiten wir die views/assignment.hbs Datei so, dass sie diese beiden Formularfelder für jeden Schüler und eine Übermittlungsschaltfläche enthält:

<h1>Google Classroom Reminders</h1>
<p>
  Send your students reminders about <a href="{{ courseWork.alternateLink }}">{{ courseWork.title }}</a>
  in <a href="{{ course.alternateLink }}">{{ course.name }}</a>.
</p>

{{#if students}}
<form action="/messages" method="post">
  {{#each students}}
  <p>
    {{#if this.turnedIn}}
      <a href="{{ this.alternateLink }}" title="Assignment turned in">✅</a>
    {{else}}
      <span title="Assignment not turned in">❗️</span>
    {{/if}}
    <strong>{{ this.profile.name.fullName }}</strong>
  </p>
  <div>
    <label for="message-{{ this.userId }}" style="display: block;">Reminder message</label>
    <textarea id="message-{{ this.userId }}" name="messages" maxlength="140" minlength="3" rows="5" cols="30">Hey {{ this.profile.name.givenName }}, don't forget about your assignment for {{ ../course.name }}. It's due on {{ ../courseWork.dueDate.month }}/{{ ../courseWork.dueDate.day }}/{{ ../courseWork.dueDate.year }}</textarea>
  </div>
  <div>
    <label for="telephone-{{ this.userId }}" style="display: block;">Telephone</label>
    <input type="tel" id="telephone-{{ this.userId }}" autocomplete="off" name="telephones" />
  </div>
  {{/each}}
  <div style="margin-top: 10px;">
    <input type="submit" value="Send Reminders">
  </div>
</form>
{{else}}
<p>No students found</p>
{{/if}}
<p><a href="/assignments">↩️ Back to all assignments</a></p>

Unsere Anwendung ist im Grunde fertig, aber wir müssen noch alle Vonage-Anmeldedaten in Ordnung bringen, bevor wir sie verwenden können. Laden Sie zunächst Ihren privaten Vonage-API-Schlüssel herunter und speichern Sie ihn in einer neuen Datei namens .private_key. Starten Sie nun Ihre Anwendung mit allen Umgebungsvariablen von Google und Vonage API:

GOOGLE_OAUTH_ID=<YOUR GOOGLE OAUTH ID> \
GOOGLE_OAUTH_SECRET=<YOUR GOOGLE OAUTH SECRET> \
GOOGLE_OAUTH_REDIRECT=http://localhost:3000/ \
SESSION_SECRET=<A SECURE STRING FOR PROTECTING SESSIONS>  \
NEXMO_API_KEY=<YOUR VONAGE MESSAGES API KEY> \
NEXMO_API_SECRET=<YOUR VONAGE MESSAGES API SECRET> \
NEXMO_PHONE_NUMBER=<YOUR VONAGE MESSAGES PHONE NUMBER> \
NEXMO_APP_ID=<YOUR VONAGE MESSAGES APP ID> \
NEXMO_PRIVATE_KEY_PATH=./.private_key \
npm start

Wenn Sie sich jetzt anmelden und eine einzelne Aufgabe anzeigen, können Sie für jeden Ihrer Schüler eine Telefonnummer eingeben und eine Nachricht an sie senden. Wenn Sie bereit sind, klicken Sie auf "Erinnerungen senden", um das Ganze zu testen.

Sending SMS Reminders using Google Classroom and the Vonage Messages API

Nächste Schritte

Diese Demo-Anwendung deckt zwar einen relativ einfachen Anwendungsfall ab, aber es ist leicht zu erkennen, wie leistungsfähig die Vonage Messages API in Verbindung mit einem LMS wie Google Classroom sein kann. Es gibt verschiedene Möglichkeiten, die Nutzererfahrung mit einer Anwendung wie dieser weiter zu verbessern:

• Speicherung von Telefonnummern in einer Datenbank, damit die Lehrer sie nicht jedes Mal neu eingeben müssen

• Benutzer können die Standard-Erinnerungsnachricht ändern

• Hinzufügen von Unterstützung für andere Messaging-Kanäle wie Facebook, What's App oder Viber

• Zwischenspeicherung von Google Classroom-Daten zur Verbesserung der Leistung und Vermeidung von Ratenbeschränkungen

• Benutzerfreundliche Fehler- und Erfolgsmeldungen

• Kundenspezifisches Design und Styling

Wenn Sie Fragen oder andere Ideen für die Implementierung eines Erinnerungssystems mit Vonage und Google Classroom haben, wenden Sie sich an uns auf Twitter oder der Vonage Entwickler-Community Slack!