首頁 >web前端 >js教程 >使用 Express 和 Supabase 建立您自己的事件排程 API

使用 Express 和 Supabase 建立您自己的事件排程 API

Patricia Arquette
Patricia Arquette原創
2024-11-05 12:03:02568瀏覽

Create your own Event Scheduling API using Express and Supabase

曾經需要一個平台來管理您俱樂部的活動嗎?或者也許在您的辦公室安排會議?但在尋找價格實惠的平台時,您是否在眾多的選擇中迷失了方向?或者也許您只是想更好地安排您的生活並安排何時必須參加哪些活動?

按照這篇文章進行到底,您最終將獲得一個基本的事件調度 API,其中將提供事件創建和註冊等所有基本功能。

該專案的 GitHub 儲存庫位於 https://github.com/xerctia/gatherly

什麼是快遞?

Express 是一個 Javascript 框架,用於設定和建立伺服器來處理各種類型的請求,如 GET、POST 等。 Express 是最常用的後端框架之一,也是初學者最容易上手的框架之一。在本部落格中,我們將使用 Express 來製作我們的伺服器並設定所需的端點。

什麼是 PostgreSQL?

PostgreSQL 是一個開源關聯式資料庫管理系統 (RDBMS),以其可靠性、可擴展性和對複雜查詢的支援而聞名。它提供了高級功能,例如對 JSON 資料的支援、全文搜尋和可擴展性,使其適用於小型專案和大型應用程式。 PostgreSQL 深受開發者歡迎,並因其強大的效能而受到重視。

網路上有許多 PostgreSQL 供應商允許使用 PostgreSQL 資料庫,有些是免費的,有些是付費方案。在這個專案中,我們將使用 Supabase 及其資料庫作為我們的 PostgreSQL。

設定項目

  • 為此專案建立一個資料夾。我會把它命名為Gatherly,這是我決定的名字。
  • 設定 Node 和 npm:npm init -y
  • 安裝 Express 和其他所需的軟體包: npm 安裝 Express dotenv cors pg 注意: pg 是 Node.js 中使用 PostgreSQL 的套件。
  • 現在使用以下樣板程式碼建立一個index.js 檔案:
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}`);
})

恭喜!您已成功在 Express 中設定基本伺服器!

使用您的專案設定 Supabase

Supabase 設定

  • 造訪 https://supabase.com 並登入或建立帳戶,然後使用您認為合適的任何名稱建立新專案。我已將其命名為 Gatherly(顯然)。
  • 現在轉到專案儀表板,然後導航到專案設定 ->資料庫。
  • 在頁面的開頭,將出現「連接字串」部分。點擊此處的 Node.js 標籤並複製連接字串並將其暫時儲存在某個位置。
  • 現在轉到 SQL 編輯器並執行以下查詢來建立「事件」表:
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}`);
})

將資料庫連接到 Express

  • 前往您的專案資料夾並建立一個名為 .env 的檔案。寫入 DATABASE_URL=,然後貼上您先前複製的連接字串(Supabase 設定:步驟 3)並將其括在雙引號內。例如:
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
);
  • 建立另一個JS檔案db.js來設定和連接PostgreSQL資料庫。
DATABASE_URL="postgresql://username:password@host:port/dbname"
  • 現在最後,我們需要將此連接的資料庫匯入到我們的主index.js 檔案中。
const { Pool } = require('pg');
require('dotenv').config();

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

module.exports = pool;

恭喜,您已成功將 Supabase 資料庫連接到 index.js 檔案。我們現在準備開始建立實際的 API 端點。

API端點

GET /events :取得所有事件

  • 建立一個新的 GET 方法,如下所示:
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}`);
})
  • 在這個函數中,我們將編寫實際的程式碼來取得資料。首先,讓我們實作一個 try-catch 區塊以更好地處理錯誤。
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
);
  • 我們將建構的所有端點都會保留這種格式。在 try 區塊中,我們將編寫所需功能的程式碼。
  • 要取得資料庫中的所有事件,我們需要查詢資料庫並將其儲存在變數中。由於我們採用非同步方法,因此我們需要使用await 來正確儲存資料。
DATABASE_URL="postgresql://username:password@host:port/dbname"
  • 此查詢的輸出(即結果)有一個稱為「行」的物件陣列。在這裡,我們需要返回所有事件,因此我們將只返回整個“行”。
const { Pool } = require('pg');
require('dotenv').config();

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

module.exports = pool;
  • 這樣,我們的第一個端點就準備好了!若要對其進行測試,您可以前往 Supabase 專案儀表板的表編輯器並新增 2 或 3 個事件以進行測試。該端點的完整程式碼為:
const pool = require('./db');

POST /events :建立一個新事件

  • 首先,讓我們設定一個端點的基本樣板:
app.get('/events', async (req, res) => {
  // code to be written
})
  • 在這種情況下,由於我們需要從使用者那裡獲得一些數據,因此我們可以在 try-catch 區塊之外定義這些數據。
try {
  // code to be written
} catch (e) {
  console.error(e);
  res.status(500).json({error: "Database error."}); // 500 = Internal Server Error
}
  • 現在在 try 區塊中,我們需要編寫查詢以在表中插入一行。 query() 方法可讓您將字串查詢中的變數值表示為 $1、$2 等,然後在陣列中依序提供這些變數。這就是我們將使用者的變數輸入加入查詢的方式。
const result = await pool.query("SELECT * FROM events");
  • 與上次一樣,我們將再次列印結果行。但這次,我們只需要列印“rows”數組的第一個元素,這將是我們剛剛插入的行。
res.status(200).json(result.rows); // 200 = OK
  • 萬歲,我們已經建立了端點來新增事件!這是完整的程式碼:
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
    }
})

GET /event/:id :取得單一事件的詳細信息

  • 我相信您夠聰明,能夠為任何端點設定基本功能,所以我不會每次都展示它。
  • 在這裡,我們的目標是建立一個動態端點,其中「id」的值將不斷變化。因此,我們將其標記為 :id,並且可以如下存取其值:
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
  }
})

這也可以在 try-catch 之外完成,就像前一個端點中的輸入值一樣。

  • 現在在 try 區塊中,我們需要編寫查詢來選擇「id」欄位等於提供的 id 的行。如果沒有找到結果,則表示該 id 的事件不存在,因此我們可以傳回 404 錯誤。
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}`);
})
  • 如果不是這種情況,則表示該事件存在。但由於'rows'是一個數組,所以即使它包含一個元素,我們也需要透過rows[0]來存取它。所以所需的行位於 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
);
  • 瞧!現在您可以成功獲取特定活動的詳細資訊!這是完整的程式碼:
DATABASE_URL="postgresql://username:password@host:port/dbname"

用戶註冊

蘇帕貝斯

要實現此功能,您需要先在 Supabase 中建立一個新表。

前往 SQL 編輯器並執行以下查詢:

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

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

module.exports = pool;

POST /事件/:id/註冊

  • 我們可以在 try-catch 之外取得輸入值以及參數值。
const pool = require('./db');
  • 現在我們先檢查有「id」的事件是否存在。為此,我們將遵循 GET /event/:id 的方法,並檢查 rows.length 是否非零,即它有一些結果。
app.get('/events', async (req, res) => {
  // code to be written
})
  • 現在事件已經存在,我們可以編寫查詢,將資料庫中的註冊實際添加到我們剛剛建立的新表中,即「registrations」。
try {
  // code to be written
} catch (e) {
  console.error(e);
  res.status(500).json({error: "Database error."}); // 500 = Internal Server Error
}
  • 因此,我們也實作了一項為使用者註冊活動的功能!這是完整的程式碼:
const result = await pool.query("SELECT * FROM events");

GET /event/:id/registrations :取得給定事件的所有註冊

這是給你們的作業。 (別生氣,如果你嘗試了還是不行,GitHub 程式碼總是可用的)
提示:您可以像我們在 POST /event/:id/register 中那樣檢查事件是否存在。之後,您需要為註冊表編寫 SELECT 查詢來取得具有給定 event_id 的所有行。

類似地,您也可以嘗試建立一個端點來刪除特定事件,例如 DELETE /event/:id 。

總結

恭喜!您已成功建立自己的 API,用於安排活動和管理使用者註冊。你已經走了很長的路。

您可以新增更多功能,例如新增 cron 作業,以便自動刪除 end_time 已過的事件。

如果您喜歡這篇文章,請點贊,如果您有任何疑問或只是想與此相關的聊天,請發表評論。也可以在 LinkedIn 追蹤我:https://www.linkedin.com/in/amartya-chowdhury/

以上是使用 Express 和 Supabase 建立您自己的事件排程 API的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn