ホームページ > ウェブフロントエンド > jsチュートリアル > Express と Supabase を使用して独自のイベント スケジューリング API を作成する

Express と Supabase を使用して独自のイベント スケジューリング API を作成する

Patricia Arquette
リリース: 2024-11-05 12:03:02
オリジナル
564 人が閲覧しました

Create your own Event Scheduling API using Express and Supabase

クラブのイベントを管理するためのプラットフォームが必要になったことはありませんか?あるいは、オフィスで会議をスケジュールすることもできますか?しかし、手頃な価格のプラットフォームを探していると、提示される多数のオプションの中で迷ってしまいますか?それとも、生活をよりよく整理して、どのイベントにいつ参加するかをスケジュールしたいだけですか?

この投稿を最後まで実行すると、イベントの作成や登録などのすべての基本機能が利用できる基本的なイベント スケジュール API が完成します。

このプロジェクトの GitHub リポジトリは https://github.com/xerctia/gatherly にあります

エクスプレスとは何ですか?

Express は、GET、POST などのさまざまな種類のリクエストを処理するサーバーをセットアップおよび構築するための Javascript フレームワークです。Express は、最もよく使用されているバックエンド フレームワークの 1 つであり、初心者にとって最も簡単に始めることができるフレームワークの 1 つでもあります。 。このブログでは、Express を使用してサーバーを作成し、必要なエンドポイントを設定します。

PostgreSQLとは何ですか?

PostgreSQL は、信頼性、拡張性、複雑なクエリのサポートで知られるオープンソースのリレーショナル データベース管理システム (RDBMS) です。 JSON データのサポート、全文検索、拡張性などの高度な機能を提供し、小規模プロジェクトと大規模アプリケーションの両方に多用途に使用できます。 PostgreSQL は開発者の間で人気があり、その堅牢なパフォーマンスが高く評価されています。

Web 上には、PostgreSQL データベースの使用を可能にする多数の PostgreSQL プロバイダーがあり、無料のものと有料プランのあるものがあります。このプロジェクトでは、Supabase とそのデータベースを PostgreSQL として使用します。

プロジェクトのセットアップ

  • このプロジェクト用のフォルダーを作成します。私が決めた名前なので「Gathally」とさせていただきます。
  • ノードと npm をセットアップします: npm init -y
  • Express およびその他の必要なパッケージをインストールします。 npm install 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 をセットアップする

スーパーベースのセットアップ

  • 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
);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
  • PostgreSQL データベースをセットアップして接続するための別の JS ファイル db.js を作成します。
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」は配列なので、要素が 1 つ含まれている場合でも、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 /event/:id/register

  • 入力値だけでなく、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 が正常に作成されました。あなたは長い道のりを歩んできました。

end_time が経過したイベントが自動的に削除されるように cron ジョブを追加するなど、さらに機能を追加できます。

この投稿が気に入った場合は、「いいね!」をドロップし、疑問がある場合、またはこれに関連してチャットしたい場合はコメントしてください。 LinkedIn でもフォローしてください: https://www.linkedin.com/in/amartya-chowdhury/

以上がExpress と Supabase を使用して独自のイベント スケジューリング API を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート