https://d226lax1qjow5r.cloudfront.net/blog/blogposts/office-hours-reservation-using-node-js-and-the-vonage-messages-api/office-hours-reservation.png

Teilen Sie:

Zoe MithaugPraktikantin für Entwicklerbeziehungen

Zoe Mithaug ist Praktikantin für Entwicklerbeziehungen bei Vonage. Sie studiert im 4. Jahr an der University of Florida.

Ihre Leidenschaft gilt dem Programmieren, der Softwareentwicklung, der Entwicklung von Videospielen, der Animation und dem digitalen Design.

Reservierung von Bürozeiten mit Node.js und der Vonage Messages API

Zuletzt aktualisiert am August 16, 2022

#javascript

#nodejs

#messages-api

Lesedauer: 7 Minuten

Einführung

In diesem Tutorial werden wir eine Webanwendung erstellen, mit der Studenten Sprechstundenzeiten bei ihren Professoren reservieren können. Sobald eine Sprechstundenreservierung gebucht ist, erhält der Student eine Textnachricht zur Bestätigung der Reservierung über die Vonage Messages API.

Wir werden es mit Node.js, Express, SQLite und der Vonage Messages API erstellen. Das GitHub-Repository für dieses Projekt ist ebenfalls verfügbar.

Erstellen einer Webanwendung

Homepage

Wir müssen drei HTML-Vorlagen erstellen, die als Eingabeformular (die Homepage), Fehlerseite und Bestätigungsseite dienen. Nachdem wir diese Vorlagen erstellt haben, gehen wir zur "Engine" über, die diese Webanwendung in Node.js antreibt. Wir beginnen mit der Erstellung einer Homepage, auf der ein Benutzer Informationen wie seinen Namen, seine Telefonnummer, sein Wunschdatum, seine Zeitpräferenz und eventuelle Notizen oder Kommentare mit Hilfe eines einfachen Webformulars eingeben kann. Dieses Formular wird zur Verarbeitung an unsere Webanwendung weitergeleitet.

Beginnen wir mit der Erstellung einer index.html Datei, die unseren Seitentitel enthält, unser CSS-Styling importiert und ein einfaches Webformular zur Erfassung von Schülerinformationen enthält. Sie sollte wie folgt aussehen:

<html>
  <head>
    <title>Office Hours Reservation</title>
    <link type="text/css" rel="stylesheet" href="/assets/indexstyles.css" />
    <link
      rel="stylesheet"
      href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"
    />
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  </head>

  <body>
    <h1>Office Hours Reservation Form</h1>
    <div id="statusdiv">Current Status</div>
    <form
      id="scheduleform"
      name="scheduleform"
      method="post"
      action="/schedule"
    >
      <div id="FormInfo">
        <div class="FormTextBox">
          <div id="alignRight">Select Date for Reservation:</div>
          <div>
            <script>
              $(function () {
                $("#datepicker").datepicker();
              });
            </script>
            <input
              type="text"
              name="AppointmentDate"
              value="7/15/2022"
              id="datepicker"
            />
          </div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextBox">
          <div id="alignRight">Select Professor:</div>
          <div>
            <select name="ProfessorName">
              <option value="Professor Nimoy">Professor Nimoy</option>
              <option value="Dr. Rory">Dr. Rory</option>
              <option value="Professor Amanda">Professor Amanda</option>
              <option value="Professor Dwane">Professor Dwane</option>
              <option value="Dr. Zach">Dr. Zach</option>
            </select>
          </div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextAreaBox">
          <div>Choose Appointment Time:</div>
          <div>
            <label>
              <input type="radio" name="AppointmentTime" value="8" /> 8:00 AM
            </label>
            <label>
              <input type="radio" name="AppointmentTime" value="9" /> 9:00 AM
            </label>
            <label>
              <input type="radio" name="AppointmentTime" value="10" /> 10:00 AM
            </label>
            <label>
              <input type="radio" name="AppointmentTime" value="11" /> 11:00 AM
            </label>
          </div>
        </div>
        <!--FormTextAreaBox-->
        <div class="FormTextBox">
          <div id="alignRight">Student First Name:</div>
          <div>
            <input
              type="text"
              name="studentfirstname"
              id="studentfirstname_id"
            />
          </div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextBox">
          <div id="alignRight">Student Last Name:</div>
          <div>
            <input type="text" name="studentlastname" id="studentlastname_id" />
          </div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextBox">
          <div id="alignRight">Student Phone Number:</div>
          <div>
            <input
              type="text"
              name="studentphonenumber"
              id="studentphonenumber_id"
            />
          </div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextAreaBox">
          <div>Comments, Questions, Notes...</div>
          <div>
            <textarea
              name="studentnotes"
              id="studentnotes_id"
              style="width: 300px; height: 100px"
            >
            </textarea>
          </div>
        </div>
        <!--FormTextAreaBox-->
        <div style="text-align: center">
          <button type="submit" name="booknowbutton" class="BigButton">
            Book Now
          </button>
        </div>
      </div>
      <!--FormInfo-->
    </form>
  </body>
</html>

In unserem Beispiel enthalten wir ein Eingabefeld für das Reservierungsdatum, eine Optionsgruppe für die Reservierungszeit, ein Dropdown-Feld für die Auswahl der Professorenoptionen, den Namen des Studenten, die Handynummer des Studenten und ein Kommentarfeld.

Erstellen Sie schließlich eine Schaltfläche "Jetzt buchen", um den Inhalt des Formulars zu übermitteln. Wir stellen dieses Formular auf unserem Webserver unter dieser URL bereit: /postscheduleauf die wir im weiteren Verlauf des Tutorials eingehen werden.

Fehler Seite

Wenn der Benutzer ungültige Daten eingibt oder ein Fehler bei der Verarbeitung der Anfrage auftritt, wird eine HTML-Fehlerseite angezeigt, die den Benutzer darüber informiert, was falsch gelaufen ist. Dabei handelt es sich um eine einfache HTML-Seite, die von Node.js verarbeitet wird und bestimmte serverseitige Variablen (über Nunjucks) anzeigt, die wir je nach dem aufgetretenen Problem festlegen. Hier ist ein Beispiel dafür, wie unsere error.html Seite aussieht:

<html>
  <head>
    <title>There is an Error processing your request</title>

    <link type="text/css" rel="stylesheet" href="/assets/errorstyles.css" />
    <link
      rel="stylesheet"
      href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"
    />
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  </head>

  <body>
    <h1>There was an Error processing your request</h1>
    <div
      id="statusdiv"
    >
      Please correct the following:
      <ul>
        {{ErrorMessage}}
      </ul>
    </div>
    <form
      id="scheduleform"
      name="scheduleform"
      method="post"
      action="/schedule"
    >
      <div id="FormInfo">
        <div class="FormTextBox">
          <div id="alignRight">Date for Reservation:</div>
          <div class="readonlydata">{{AppointmentDate}}</div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextBox">
          <div id="alignRight">Appointment Time:</div>
          <div class="readonlydata">{{AppointmentTime}}</div>
        </div>
        <!--FormTextAreaBox-->
        <div class="FormTextBox">
          <div id="alignRight">Professor:</div>
          <div class="readonlydata">{{ProfessorName}}</div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextBox">
          <div id="alignRight">Student Name:</div>
          <div class="readonlydata">{{StudentName}}</div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextBox">
          <div id="alignRight">Student Phone Number:</div>
          <div class="readonlydata">{{StudentPhoneNumber}}</div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextAreaBox">
          <div>Comments, Questions, Notes...</div>
          <div class="readonlydata">{{StudentNotes}}</div>
        </div>
        <!--FormTextAreaBox-->
        <div id="returnButton">
          <a href="/" class="BigButton"> Return to Reservation Form </a>
        </div>
      </div>
      <!--FormInfo-->
    </form>
  </body>
</html>

Unsere gerenderte Fehlerseite sieht dann so aus:

Error page

Die von doppelten Klammern eingeschlossenen Variablen, zum Beispiel: {{AppointmentDate}}, sind die serverseitigen Variablen, die über Node.js ausgegeben werden. Wir werden diese Einrichtung später in diesem Lernprogramm besprechen. Zum Schluss erstellen wir eine Return-Schaltfläche. Diese Schaltfläche würde den Benutzer zur Homepage zurückbringen, wenn bei der Bearbeitung seiner Reservierungsanfrage ein Fehler auftritt.

Bestätigungsseite

Da wir nun eine Fehlerantwort haben, müssen wir auch eine Bestätigungsantwort einrichten. Diese Seite wird nur angezeigt, wenn die Anfrage erfolgreich war. Außerdem werden auf dieser Seite alle vom Benutzer eingegebenen Informationen angezeigt. Zu Beginn erstellen wir eine confirmation.html Datei und richten sie ähnlich wie unsere error.html Datei mit serverseitigen (Nunjucks) Variablen. Hier ist ein Beispiel dafür, wie unsere confirmation.html Seite aussieht:

<html>
  <head>
    <title>Your Reservation has been confirmed</title>
    <link
      type="text/css"
      rel="stylesheet"
      href="/assets/confirmationstyles.css"
    />
    <link
      rel="stylesheet"
      href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"
    />
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  </head>
  <body>
    <h1>Your Reservation has been confirmed</h1>
    <form
      id="scheduleform"
      name="scheduleform"
      method="post"
      action="/schedule"
    >
      <div id="FormInfo">
        <div class="FormTextBox">
          <div id="alignRight">Date for Reservation:</div>
          <div class="readonlydata">{{AppointmentDate}}</div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextBox">
          <div id="alignRight">Appointment Time:</div>
          <div class="readonlydata">{{AppointmentTime}}</div>
        </div>
        <!--FormTextAreaBox-->
        <div class="FormTextBox">
          <div id="alignRight">Professor:</div>
          <div class="readonlydata">{{ProfessorName}}</div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextBox">
          <div id="alignRight">Student Name:</div>
          <div class="readonlydata">{{StudentName}}</div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextBox">
          <div id="alignRight">Student Phone Number:</div>
          <div class="readonlydata">{{StudentPhoneNumber}}</div>
        </div>
        <!--FormTextBox-->
        <div class="FormTextAreaBox">
          <div>Comments, Questions, Notes...</div>
          <div class="readonlydata">{{StudentNotes}}</div>
        </div>
        <!--FormTextAreaBox-->
        <div id="returnButton">
          <a href="/" class="BigButton"> Return to Reservation Form </a>
        </div>
      </div>
      <!--FormInfo-->
    </form>
  </body>
</html>

Unsere gerenderte Konfirmationsseite sieht wie folgt aus:

Confirmation page

Bitte beachten Sie, dass unsere serverseitigen Variablen aus dem von den Schülern eingereichten Formular abgeleitet werden und wie folgt lauten: AppointmentDate, AppointmentTime, ProfessorName, StudentName, StudentPhoneNumber, und StudentNotes. Schließlich wird eine Schaltfläche "Zurück" erstellt. Diese Schaltfläche bringt den Benutzer zurück zur Homepage, wenn er eine weitere Reservierungsanfrage stellen möchte.

Backend

Mechanik Option: Dotenv

Bevor wir mit unserer Backend-Implementierung beginnen können, müssen wir eine Datei namens .env. Diese Datei ist äußerst wichtig, da sie unser privates API-Geheimnis und unseren API-Schlüssel speichert. Diese Variablen ermöglichen es uns, unseren Bestätigungstext über die Vonage Messages API zu senden. Beginnen Sie mit der Erstellung einer neuen Datei namens .env und legen Sie sie im Stammverzeichnis Ihres Projekts ab. Fügen Sie nun die folgenden Variablen mit Ihren spezifischen Vonage Account-Informationen hinzu: VONAGE_API_KEY, VONAGE_API_SECRET, und FROM_PHONE_NUMBER.

VONAGE_API_KEY= VONAGE_API_SECRET= FROM_PHONE_NUMBER=

Einrichten von Node.js als Webanwendungsserver

Um unsere Webanwendung zu vervollständigen, werden wir unsere HTML-Dateien mit Hilfe von Node.js, Express und SQLite um weitere Funktionen ergänzen. Der Einfachheit halber werden wir alle Funktionen unserer Webanwendung in einer einzigen Datei namens index.js. Sobald wir Node.js erfolgreich auf unserem System installiert haben, müssen wir einige weitere Pakete zur Konfiguration hinzufügen: Express, Nunjucks, Fetch und SQLite.

npm install express 

npm install nunjucks 

npm install node-fetch 

npm install sqlite3

npm install dotenv 

npm install @vonage/server-sdk

Wir richten unsere index.js Datei so ein, dass sie die neu installierten Bibliotheken verwendet und unserer Anwendung die Möglichkeit gibt, Webseiten auf Port 3000 zu bedienen. Der Anfang unserer index.js Datei sieht wie folgt aus:

require("dotenv").config();
const express = require("express");
const nunjucks = require("nunjucks");
const webserver = express();
const Vonage = require("@vonage/server-sdk");
const SMS = require("@vonage/server-sdk/lib/Messages/SMS");

const fetch = (...args) =>
  import("node-fetch").then(({ default: fetch }) => fetch(...args));

webserver.use("/assets", express.static("assets"));

nunjucks.configure("html", { autoescape: false, express: webserver });

webserver.use(express.json());

webserver.use(express.urlencoded({ extended: true }));

// Global database
const sqlite3 = require("sqlite3").verbose();
const db = new sqlite3.Database("reservations.db");

const vonage = new Vonage({
  apiKey: process.env.VONAGE_API_KEY,
  apiSecret: process.env.VONAGE_API_SECRET,
});

webserver.listen(3000);

Ein paar Anmerkungen zum Code:

Wir rufen den Webserver der Express-Instanz auf
Wir platzieren unsere drei HTML-Dateien (index.html, error.html, confirmation.html) in ein Unterverzeichnis mit dem Namen HTML, das Nunjucks so konfiguriert ist, dass es sie durchsucht.
Wir haben SQLite so eingestellt, dass es eine Datenbank namens reservations.db die sich im Stammverzeichnis dieser Webanwendung befinden wird.
Wir verstecken die Variablen für den API-Schlüssel und das API-Geheimnis, die uns von Vonage Messages API zur Verfügung gestellt wurden, in einer .env Datei, aber Sie müssen diese Variablen durch Ihre eigenen gesicherten Anmeldedaten ersetzen.

Wir stellen den Webserver so ein, dass er auf Webanfragen an Port 3000 wartet. Das bedeutet, dass Sie zum Ausführen dieser Anwendung diesen Port angeben müssen, z. B. http://localhost:3000.

Verwendung von Node.js als Webanwendungsserver

Wir stellen unseren index.js Code so ein, dass er drei Funktionen bereitstellt:

Richten Sie die Datenbank zum Speichern von Reservierungsanfragen ein (reservations.db)
Anzeige einer Homepage, auf der ein Student eine Terminanfrage stellen kann (index.html)
Bearbeiten Sie die Reservierungsanfrage des Studenten, die an /schedule gesendete Reservierungsanfrage, und geben Sie nach Überprüfung der Anfrage entweder eine Erfolgsmeldung (confirmation.html) oder Fehler (error.html)

SetUpDatabase();

DisplayHomePage();

PostSchedule();

Einrichten der Datenbank

In diesem Projekt verwenden wir SQLite als Backend-Datenbank, um unsere Informationen zu speichern. Sie können jedoch jede Datenbank verwenden, die mit Node.js funktioniert.

function SetUpDatabase() {
  db.serialize(() => {
    db.run(
      "CREATE TABLE if not exists Appointments (appointmentdate text,    appointmenttime text, professorname text, studentfirstname text, studentlastname text, studentphonenumber text, studentnotes text)"
    );
  });
}

Ein paar Hinweise zu dieser Funktion:

Es wird geprüft, ob eine Tabelle für Ernennungen in der reservations.db Datenbank vorhanden ist; wenn die Tabelle nicht existiert, wird sie erstellt
Je nach dem Datenbanksystem, das Sie mit Node.js verwenden möchten, müssen Sie das Datum und die Uhrzeit des Termins so ändern, dass sie mit den Datetime-Funktionen der jeweiligen Engine funktionieren

Einrichten der Homepage

Unsere DisplayHomePage() Funktion wartet einfach auf die Anfrage an der Wurzel des Verzeichnisses ('/') und rendert dann unsere index.html im HTML-Verzeichnis gefundene Datei. Sie erinnern sich, dass wir bereits die Datei index.html Datei bereits als Formular für die Reservierung der Sprechzeiten eingerichtet haben.

function DisplayHomePage() {
  // Displaying Homepage after reading an HTML file locally

  webserver.get("/", function (req, res) {
    res.render("index.html");
  });
}

Einrichten der Funktion Post Schedule

PostSchedule() ist das Arbeitspferd unserer Webanwendung. Dieser Prozess wartet auf den /schedule Handler und führt einige grundlegende Fehlerprüfungen der Benutzereingaben durch. Wenn die Eingabedaten unsere rudimentäre Fehlerprüfung bestehen, speichern wir diese Informationen in unserer Termintabelle in der reservations.db Datenbank. Anschließend kapseln wir diese Informationen in ein JSON-Objekt, das wir an die Backend-API von Vonage Messages API senden, um eine Bestätigungsnachricht zu versenden.

function PostSchedule() {
  // POST /new Route Handler
  webserver.post("/schedule", function (req, res) {
    // Student info/variables collected from HTML form

    let professorname = req.body.ProfessorName;
    let appointmentdate = req.body.AppointmentDate;
    let appointmenttime = req.body.AppointmentTime;
    let studentfirstname = req.body.studentfirstname;
    let studentlastname = req.body.studentlastname;
    let studentphonenumber = req.body.studentphonenumber;
    let studentnotes = req.body.studentnotes;

    // Text message info sent to Student
    let message =
      "Dear " +
      studentfirstname +
      " " +
      studentlastname +
      "," +
      " you have successfully booked your appointment! Here are your additional notes: " +
      studentnotes;

    let ValidationCheck = true; // Assume success, prove otherwise
    let ErrorMessage = "";

    if (appointmentdate == "") {
      ValidationCheck = false;
      ErrorMessage = ErrorMessage + "<li>Enter an appointment date</li>";
    } else if (appointmenttime == "" || !appointmenttime) {
      ValidationCheck = false;
      ErrorMessage = ErrorMessage + "<li>Enter an appointment time</li>";
    } else if (professorname == "") {
      ValidationCheck = false;
      ErrorMessage = ErrorMessage + "<li>Select a Professor</li>";
    } else if (studentfirstname == "") {
      ValidationCheck = false;
      ErrorMessage = ErrorMessage + "<li>Enter a Student first name</li>";
    } else if (studentlastname == "") {
      ValidationCheck = false;
      ErrorMessage = ErrorMessage + "<li>Enter a Student last name</li>";
    } else if (studentphonenumber == "") {
      ValidationCheck = false;
      ErrorMessage = ErrorMessage + "<li>Enter a mobile phone number</li>";
    }

    if (ValidationCheck == false) {
      res.render("error.html", {
        ProfessorName: professorname,
        StudentName: studentfirstname + " " + studentlastname,
        AppointmentDate: appointmentdate,
        AppointmentTime: appointmenttime,
        StudentNotes: studentnotes,
        StudentPhoneNumber: studentphonenumber,
        ErrorMessage: ErrorMessage,
      });
    } else {

Ein paar Anmerkungen zu diesem Code:

Unsere Express-Instanz mit dem Namen Webserver wartet auf eine Nachricht, die an /schedule und wird nur ausgeführt, wenn diese Bedingung eintritt
Wir haben die folgenden Node.js-Variablen zu den entsprechenden Name/Wert-Paaren des HTML-Anfrageformulars erstellt:

professorname = req.body.ProfessorName
  appointmentdate = req.body.AppointmentDate
  appointmenttime = req.body.AppointmentTime
  studentfirstname = req.body.studentfirstname
  studentlastname = req.body.studentlastname
  studentphonenumber = req.body.studentphonenumber
  studentnotes = req.body.studentnotes

Unsere boolesche ValidationCheck Variable testet auf leere Zeichenketten und wird bei einem Fehler auf false gesetzt. Sie möchten zusätzliche Fehlerprüfungen für andere fehlerhafte Datenszenarien durchführen, wie z. B. ungültige Termindaten und -zeiten
Wenn ein Fehler auftritt, rendern wir die error.html Seite, die das Setzen der Nunjucks-Variable {{ErrorMessage}} mit einer Beschreibung des Problems
Bei ValidationCheck Erfolg (Rückgabe: true) fügen wir die Termindaten in die Termintabelle ein und senden die Textbestätigung über die Messaging-API von Vonage

Nach erfolgreicher Eingabevalidierung kapseln wir nun die Nachricht in ein JSON-Objekt, das wir an Vonage senden werden. Wir haben die Instanz der Vonage-Client-Klasse erstellt und mit dem Vonage-API-Schlüssel und -Geheimnis initialisiert, die Sie zuvor zu Ihrer .env-Datei hinzugefügt haben, und die benötigten Variablen sind die Telefonnummer, die Telefonnummer für den Text, der Nachrichtentext und unser API-Schlüssel und API-Geheimnis.

else {

    vonage.messages.send(
      new SMS(message, studentphonenumber, process.env.FROM_PHONE_NUMBER),
      (err, data) => {
        if (err) {
          console.error(err);
        } else {
          console.log(data.message_uuid);
        }
      }
    );

    // Build SQL string --> insert string to add record to appointments table
    let sqlstring =
      "INSERT INTO Appointments (appointmentdate, appointmenttime, professorname, studentfirstname, studentlastname, studentphonenumber, studentnotes) " +
      "VALUES (?, ?, ?, ?, ?, ?, ?)";

    // Execute SQL string into database (Using paramaterized queries to prevent SQL injection)
    db.run(
      sqlstring,
      appointmentdate,
      appointmenttime,
      professorname,
      studentfirstname,
      studentlastname,
      studentphonenumber,
      studentnotes
    );
    
    // For testing purposes query all records in appointments table and display to console
    // The last record shown should be the record we just inserted
    db.each(
      "SELECT appointmentdate, appointmenttime, professorname, studentfirstname, studentlastname info FROM Appointments",
      (err, row) => {
        console.log(
          row.appointmentdate +
            ": " +
            row.appointmenttime +
            ":" +
            row.professorname
        );
      }
    );

    res.render("confirmation.html", {
      ProfessorName: professorname,
      StudentName: studentfirstname + " " + studentlastname,
      AppointmentDate: appointmentdate,
      AppointmentTime: appointmenttime + ":00 AM",
      StudentNotes: studentnotes,
      StudentPhoneNumber: studentphonenumber,
    });
}

Anschließend erstellen wir unsere SQL-Einfügeanweisung unter Verwendung der Variablen, die wir im HTML-Anmeldeformular festgelegt haben, und führen diese Anweisung mit der db.run Funktion aus. Schließlich rendern wir die confirmation.html Seite so, dass die Nunjucks-Variablen angezeigt werden.

Nächste Schritte

Wir freuen uns immer über die Beteiligung der Gemeinschaft. Bitte zögern Sie nicht uns auf GitHub und dem Vonage Community Slack oder senden Sie uns eine Nachricht auf Twitter.

Teilen Sie:

Zoe MithaugPraktikantin für Entwicklerbeziehungen

Zoe Mithaug ist Praktikantin für Entwicklerbeziehungen bei Vonage. Sie studiert im 4. Jahr an der University of Florida.

Ihre Leidenschaft gilt dem Programmieren, der Softwareentwicklung, der Entwicklung von Videospielen, der Animation und dem digitalen Design.