Heim > Web-Frontend > js-Tutorial > Erstellen Sie Ihre eigene Event Scheduling API mit Express und Supabase

Erstellen Sie Ihre eigene Event Scheduling API mit Express und Supabase

Patricia Arquette
Freigeben: 2024-11-05 12:03:02
Original
565 Leute haben es durchsucht

Create your own Event Scheduling API using Express and Supabase

Benötigten Sie jemals eine Plattform, um die Veranstaltungen Ihres Clubs zu verwalten? Oder vielleicht Besprechungen in Ihrem Büro vereinbaren? Doch auf der Suche nach bezahlbaren Plattformen verlierst du dich in den zahlreichen Möglichkeiten, die dir geboten werden? Oder vielleicht möchten Sie einfach Ihr Leben besser organisieren und planen, wann Sie an welchen Veranstaltungen teilnehmen müssen?

Folgen Sie diesem Beitrag bis zum Ende, und Sie erhalten eine grundlegende API zur Veranstaltungsplanung, in der alle grundlegenden Funktionen wie Veranstaltungserstellung und -registrierung verfügbar sind.

Das GitHub-Repository für dieses Projekt befindet sich unter https://github.com/xerctia/gatherly

Was ist Express?

Express ist ein Javascript-Framework zum Einrichten und Erstellen von Servern zur Verarbeitung verschiedener Arten von Anfragen wie GET, POST usw. Express ist eines der am häufigsten verwendeten Backend-Frameworks und auch eines der einfachsten Frameworks für Anfänger . In diesem Blog verwenden wir Express für die Erstellung unseres Servers und die Einrichtung der erforderlichen Endpunkte.

Was ist PostgreSQL?

PostgreSQL ist ein relationales Open-Source-Datenbankverwaltungssystem (RDBMS), das für seine Zuverlässigkeit, Skalierbarkeit und Unterstützung komplexer Abfragen bekannt ist. Es bietet erweiterte Funktionen wie Unterstützung für JSON-Daten, Volltextsuche und Erweiterbarkeit, wodurch es sowohl für kleine Projekte als auch für große Anwendungen vielseitig einsetzbar ist. PostgreSQL ist bei Entwicklern beliebt und wird für seine robuste Leistung geschätzt.

Es gibt viele PostgreSQL-Anbieter im Internet, die die Nutzung einer PostgreSQL-Datenbank ermöglichen, einige kostenlos und andere mit einem kostenpflichtigen Plan. In diesem Projekt werden wir Supabase und seine Datenbank als unser PostgreSQL verwenden.

Einrichten des Projekts

  • Erstellen Sie einen Ordner für dieses Projekt. Ich werde es Gatherly nennen, für diesen Namen habe ich mich entschieden.
  • Knoten und npm einrichten: npm init -y
  • Express und andere erforderliche Pakete installieren: npm install express dotenv cors pg Hinweis: pg ist das Paket, das für die Verwendung von PostgreSQL in Node.js verwendet wird.
  • Erstellen Sie nun eine index.js-Datei mit dem folgenden Boilerplate-Code:
const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Herzlichen Glückwunsch! Sie haben erfolgreich einen Basisserver in Express eingerichtet!

Einrichten von Supabase mit Ihrem Projekt

Supabase-Setup

  • Gehen Sie zu https://supabase.com, melden Sie sich an oder erstellen Sie ein Konto und erstellen Sie dann ein neues Projekt mit einem beliebigen Namen, den Sie für richtig halten. Ich habe es (natürlich) Gatherly genannt.
  • Gehen Sie nun zum Projekt-Dashboard und navigieren Sie dann zu Projekteinstellungen -> Datenbank.
  • Am Anfang der Seite wird ein Abschnitt mit der „Verbindungszeichenfolge“ vorhanden sein. Klicken Sie hier auf die Registerkarte Node.js, kopieren Sie die Verbindungszeichenfolge und speichern Sie sie vorerst irgendwo.
  • Gehen Sie nun zum SQL-Editor und führen Sie die folgende Abfrage aus, um eine „Ereignis“-Tabelle zu erstellen:
const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Datenbank mit Express verbinden

  • Gehen Sie zu Ihrem Projektordner und erstellen Sie eine Datei mit dem Namen .env. Schreiben Sie DATABASE_URL=, fügen Sie dann die Verbindungszeichenfolge ein, die Sie zuvor kopiert haben (Supabase-Setup: Schritt 3), und schließen Sie sie in doppelte Anführungszeichen ein. Zum Beispiel:
CREATE TABLE events (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  start_time TIMESTAMP NOT NULL,
  end_time TIMESTAMP,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • Erstellen Sie eine weitere JS-Datei db.js, um die PostgreSQL-Datenbank einzurichten und zu verbinden.
DATABASE_URL="postgresql://username:password@host:port/dbname"
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • Zuletzt müssen wir diese verbundene Datenbank in unsere Hauptdatei index.js importieren.
const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
});

module.exports = pool;
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Herzlichen Glückwunsch, Sie haben Ihre Supabase-Datenbank erfolgreich mit Ihrer index.js-Datei verbunden. Wir sind jetzt bereit, mit dem Aufbau der eigentlichen API-Endpunkte zu beginnen.

API-Endpunkte

GET /events: Alle Ereignisse abrufen

  • Erstellen Sie eine neue GET-Methode wie folgt:
const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • Innerhalb dieser Funktion schreiben wir den eigentlichen Code, der uns die Daten abruft. Lassen Sie uns zunächst einen Try-Catch-Block für eine bessere Fehlerbehandlung implementieren.
CREATE TABLE events (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  start_time TIMESTAMP NOT NULL,
  end_time TIMESTAMP,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • Dieses Format wird für alle Endpunkte beibehalten, die wir erstellen werden. Innerhalb des Try-Blocks schreiben wir den Code für die erforderliche Funktion.
  • Um alle Ereignisse in der Datenbank abzurufen, müssen wir die Datenbank abfragen und sie in einer Variablen speichern. Da wir einen asynchronen Ansatz verfolgen, müssen wir „await“ verwenden, um die Daten korrekt zu speichern.
DATABASE_URL="postgresql://username:password@host:port/dbname"
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • Die Ausgabe dieser Abfrage, d. h. das Ergebnis, enthält ein Array von Objekten namens „Zeilen“. Hier müssen wir alle Ereignisse zurückgeben, also geben wir nur die gesamten „Zeilen“ zurück.
const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
});

module.exports = pool;
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • Damit ist unser erster Endpunkt fertig! Um es zu testen, können Sie zum Tabelleneditor im Dashboard des Supabase-Projekts gehen und zu Testzwecken zwei oder drei Ereignisse hinzufügen. Der gesamte Code für diesen Endpunkt lautet:
const pool = require('./db');
Nach dem Login kopieren
Nach dem Login kopieren

POST /events: Erstellen Sie ein neues Ereignis

  • Lassen Sie uns zunächst einen Grundbaustein für einen Endpunkt einrichten:
app.get('/events', async (req, res) => {
  // code to be written
})
Nach dem Login kopieren
Nach dem Login kopieren
  • Da wir in diesem Fall einige Daten vom Benutzer benötigen, können wir diese außerhalb des Try-Catch-Blocks definieren.
try {
  // code to be written
} catch (e) {
  console.error(e);
  res.status(500).json({error: "Database error."}); // 500 = Internal Server Error
}
Nach dem Login kopieren
Nach dem Login kopieren
  • Jetzt müssen wir im Try-Block die Abfrage schreiben, um eine Zeile in eine Tabelle einzufügen. Mit der Methode query() können Sie Variablenwerte in der Zeichenfolgenabfrage als $1, $2 usw. bezeichnen und diese Variablen dann der Reihe nach in einem Array bereitstellen. Auf diese Weise fügen wir unsere variablen Eingaben vom Benutzer zur Abfrage hinzu.
const result = await pool.query("SELECT * FROM events");
Nach dem Login kopieren
Nach dem Login kopieren
  • Auch hier drucken wir wie beim vorherigen Mal die Ergebniszeilen aus. Aber dieses Mal müssen wir nur das erste Element des Arrays „rows“ drucken, das die gerade eingefügte Zeile sein wird.
res.status(200).json(result.rows); // 200 = OK
Nach dem Login kopieren
  • Hurra, wir haben unseren Endpunkt erstellt, um neue Ereignisse hinzuzufügen! Hier ist der gesamte Code:
app.get('/events', async (req, res) => {
    try {
        // Getting all events
        const result = await pool.query("SELECT * FROM events");
        res.status(200).json(result.rows); // 200 = OK
    } catch (e) {
        console.error(e);
        res.status(500).json({error: 'Database error'}); // 500 = Internal Server Error
    }
})
Nach dem Login kopieren

GET /event/:id : Details eines einzelnen Ereignisses abrufen

  • Ich bin mir sicher, dass Sie klug genug sind, eine Grundfunktion für jeden Endpunkt einzurichten, daher werde ich das nicht jedes Mal zeigen.
  • Hier ist es unser Ziel, einen dynamischen Endpunkt zu schaffen, bei dem sich der Wert von „id“ ständig ändert. Wir haben es also als :id markiert und können wie folgt auf seinen Wert zugreifen:
app.post("/events", async (req, res) => {
  try {
    // code to be written
  } catch (e) {
    console.error(e);
    res.status(500).json({error: "Failed to create event."}); // 500 = Internal Server Error
  }
})
Nach dem Login kopieren

Dies kann auch außerhalb des Try-Catch erfolgen, genau wie die Eingabewerte im vorherigen Endpunkt.

  • Jetzt müssen wir im Try-Block die Abfrage zum Auswählen von Zeilen schreiben, bei denen das Feld „id“ mit der angegebenen ID übereinstimmt. Wenn keine Ergebnisse gefunden werden, bedeutet das, dass das Ereignis mit dieser ID nicht existiert, sodass wir einen 404-Fehler zurückgeben können.
const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • Wenn dies nicht der Fall ist, bedeutet das, dass das Ereignis existiert. Da es sich bei „rows“ jedoch um ein Array handelt, müssen wir über rows[0] darauf zugreifen, selbst wenn es ein Element enthält. Die erforderliche Zeile befindet sich also in rows[0].
CREATE TABLE events (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  start_time TIMESTAMP NOT NULL,
  end_time TIMESTAMP,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • Und voilà! Sie können jetzt erfolgreich die Details einer bestimmten Veranstaltung abrufen! Hier ist der vollständige Code:
DATABASE_URL="postgresql://username:password@host:port/dbname"
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Benutzerregistrierung

Supabase

Um diese Funktion zu implementieren, müssen Sie zunächst eine neue Tabelle in Supabase erstellen.

Gehen Sie zum SQL-Editor und führen Sie die folgende Abfrage aus:

const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
});

module.exports = pool;
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

POST /event/:id/register

  • Wir können die Eingabewerte sowie den Parameterwert außerhalb des Try-Catch übernehmen.
const pool = require('./db');
Nach dem Login kopieren
Nach dem Login kopieren
  • Jetzt prüfen wir zunächst, ob das Event mit „id“ existiert. Dazu folgen wir dem Ansatz von GET /event/:id und prüfen, ob rows.length ungleich Null ist, d. h. einige Ergebnisse liefert.
app.get('/events', async (req, res) => {
  // code to be written
})
Nach dem Login kopieren
Nach dem Login kopieren
  • Da das Ereignis nun existiert, können wir die Abfrage zum tatsächlichen Hinzufügen einer Registrierung zur Datenbank in die neue Tabelle schreiben, die wir gerade erstellt haben, d. h. „Registrierungen“.
try {
  // code to be written
} catch (e) {
  console.error(e);
  res.status(500).json({error: "Database error."}); // 500 = Internal Server Error
}
Nach dem Login kopieren
Nach dem Login kopieren
  • Daher haben wir auch eine Funktion zur Registrierung von Benutzern für eine Veranstaltung implementiert! Hier ist der gesamte Code:
const result = await pool.query("SELECT * FROM events");
Nach dem Login kopieren
Nach dem Login kopieren

GET /event/:id/registrations: Alle Anmeldungen für eine bestimmte Veranstaltung abrufen

Das ist eine Hausaufgabe für euch. (Seien Sie nicht böse, wenn Sie es auch nach dem Versuch nicht schaffen, ist der GitHub-Code immer verfügbar)
Ein Hinweis: Sie können auf die gleiche Weise überprüfen, ob das Ereignis existiert, wie wir es in POST /event/:id/register getan haben. Danach müssen Sie eine SELECT-Abfrage für die Registrierungstabelle schreiben, um alle Zeilen mit der angegebenen event_id abzurufen.

Ähnlich können Sie auch versuchen, einen Endpunkt zum Löschen eines bestimmten Ereignisses zu erstellen, wie z. B. DELETE /event/:id .

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich Ihre eigene API zum Planen von Ereignissen und zum Verwalten von Benutzerregistrierungen erstellt. Du hast einen langen Weg zurückgelegt.

Sie können weitere Funktionen hinzufügen, z. B. das Hinzufügen eines Cron-Jobs, damit Ereignisse, deren Endzeit abgelaufen ist, automatisch gelöscht werden.

Wenn Ihnen dieser Beitrag gefallen hat, hinterlassen Sie ein „Gefällt mir“ und kommentieren Sie, wenn Sie Zweifel haben oder einfach nur darüber chatten möchten. Folgen Sie mir auch auf LinkedIn: https://www.linkedin.com/in/amartya-chowdhury/

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihre eigene Event Scheduling API mit Express und Supabase. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage