Cipta API Penjadualan Acara anda sendiri menggunakan Express dan Supabase

Pernah memerlukan platform untuk menguruskan acara kelab anda? Atau mungkin menjadualkan mesyuarat di pejabat anda? Tetapi dalam mencari platform mampu milik, anda tersesat dalam pelbagai pilihan yang diberikan kepada anda? Atau mungkin anda hanya mahu mengatur hidup anda dengan lebih baik dan menjadualkan apabila anda perlu menghadiri acara yang mana?

Ikuti siaran ini hingga akhir, dan anda akan mendapat API penjadualan acara asas di mana semua ciri asas seperti penciptaan acara dan pendaftaran akan tersedia.

Repositori GitHub untuk projek ini ada di https://github.com/xerctia/gatherly

Apa itu Express?

Express ialah rangka kerja Javascript untuk menyediakan dan membina pelayan untuk mengendalikan pelbagai jenis permintaan seperti GET, POST dan lain-lain. Express ialah salah satu rangka kerja bahagian belakang yang paling popular digunakan, dan juga merupakan salah satu rangka kerja yang paling mudah untuk dimulakan oleh pemula. . Dalam blog ini, kami akan menggunakan Express untuk membuat pelayan kami dan menyediakan titik akhir yang diperlukan.

Apakah PostgreSQL?

PostgreSQL ialah sistem pengurusan pangkalan data hubungan sumber terbuka (RDBMS), yang terkenal dengan kebolehpercayaan, skalabiliti dan sokongan untuk pertanyaan kompleks. Ia menawarkan ciri lanjutan seperti sokongan untuk data JSON, carian teks penuh dan kebolehlanjutan, menjadikannya serba boleh untuk kedua-dua projek kecil dan aplikasi berskala besar. PostgreSQL popular di kalangan pembangun dan dihargai kerana prestasinya yang mantap.

Terdapat banyak penyedia PostgreSQL tersedia di web yang membenarkan penggunaan pangkalan data PostgreSQL, ada yang percuma dan ada yang dengan pelan berbayar. Dalam projek ini, kami akan menggunakan Supabase dan pangkalan datanya sebagai PostgreSQL kami.

Menyediakan projek

• Buat folder untuk projek ini. Saya akan menamakannya Gatherly, iaitu nama yang telah saya putuskan.
• Sediakan Nod dan npm: npm init -y
• Pasang Express dan pakej lain yang diperlukan: npm pasang express dotenv cors pg Nota: pg ialah pakej yang digunakan untuk menggunakan PostgreSQL dalam Node.js.
• Sekarang buat fail index.js dengan kod boilerplate berikut:

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}`);
})

Tahniah! Anda telah berjaya menyediakan pelayan asas dalam Express!

Menyediakan Supabase dengan Projek anda

Persediaan Supabase

• Pergi ke https://supabase.com dan log masuk atau cipta akaun, kemudian buat projek baharu dengan mana-mana nama yang anda rasa sesuai. Saya telah menamakannya Gatherly (jelas).
• Sekarang pergi ke papan pemuka projek dan kemudian navigasi ke Tetapan Projek -> Pangkalan data.
• Di permulaan halaman, bahagian "Rentetan Sambungan" akan dipaparkan. Klik tab Node.js di sini dan salin rentetan sambungan dan simpan di suatu tempat buat masa ini.
• Sekarang pergi ke Editor SQL dan jalankan pertanyaan berikut untuk mencipta jadual 'acara':

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}`);
})

Menyambung pangkalan data ke Express

• Pergi ke folder projek anda dan buat fail bernama .env. Tulis DATABASE_URL= dan kemudian tampal Rentetan Sambungan yang anda salin tadi (persediaan Supabase: Langkah-3) dan sertakan dalam petikan berganda. Contohnya:

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
);

• Buat fail JS lain db.js untuk menyediakan dan menyambungkan pangkalan data PostgreSQL.

DATABASE_URL="postgresql://username:password@host:port/dbname"

• Sekarang terakhir, kami perlu mengimport pangkalan data yang disambungkan ini ke fail index.js utama kami.

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

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

module.exports = pool;

Tahniah, anda telah berjaya menyambungkan pangkalan data Supabase anda ke fail index.js anda. Kami kini bersedia untuk mula membina titik akhir API sebenar.

Titik Akhir API

GET /events : Ambil semua acara

• Buat kaedah GET baharu seperti berikut:

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}`);
})

• Di dalam fungsi ini, kami akan menulis kod sebenar yang akan membawa kami data. Pertama sekali, mari kita laksanakan blok cuba-tangkap untuk pengendalian ralat yang lebih baik.

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
);

• Format ini akan dikekalkan untuk semua titik akhir yang akan kami bina. Dalam blok percubaan, kami akan menulis kod untuk ciri yang diperlukan.
• Untuk mengambil semua peristiwa dalam pangkalan data, kita perlu menanyakan pangkalan data dan menyimpannya dalam pembolehubah. Memandangkan kami mengikuti pendekatan tak segerak, jadi kami perlu menggunakan await untuk menyimpan data dengan betul.

DATABASE_URL="postgresql://username:password@host:port/dbname"

• Output pertanyaan ini, iaitu hasil, mempunyai tatasusunan objek yang dipanggil 'baris'. Di sini, kita perlu mengembalikan semua acara, jadi kita hanya akan mengembalikan keseluruhan 'baris'.

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

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

module.exports = pool;

• Dengan ini, titik akhir pertama kami sudah sedia! Untuk mengujinya, anda boleh pergi ke Editor Jadual di papan pemuka projek Supabase dan menambah 2 atau 3 acara untuk tujuan ujian. Keseluruhan kod untuk titik akhir ini ialah:

const pool = require('./db');

POST /events : Buat acara baharu

• Pertama sekali, mari kita sediakan pelat dandang asas titik akhir:

app.get('/events', async (req, res) => {
  // code to be written
})

• Dalam kes ini, kerana kami mempunyai beberapa data yang kami perlukan daripada pengguna, kami boleh menentukan data di luar blok cuba-tangkap.

try {
  // code to be written
} catch (e) {
  console.error(e);
  res.status(500).json({error: "Database error."}); // 500 = Internal Server Error
}

• Sekarang dalam blok cuba, kita perlu menulis pertanyaan untuk memasukkan baris dalam jadual. Kaedah query() membolehkan anda menandakan nilai pembolehubah dalam pertanyaan rentetan sebagai $1, $2 dsb. dan kemudian menyediakan pembolehubah tersebut mengikut susunan dalam tatasusunan. Ini akan menjadi cara kami menambah input pembolehubah kami daripada pengguna kepada pertanyaan.

const result = await pool.query("SELECT * FROM events");

• Sekali lagi, seperti masa sebelumnya, kami akan mencetak baris keputusan. Tetapi kali ini, kita hanya perlu mencetak elemen pertama tatasusunan 'baris', yang akan menjadi baris yang baru kita masukkan.

res.status(200).json(result.rows); // 200 = OK

• Hore, kami telah membina titik akhir kami untuk menambah acara baharu! Berikut ialah keseluruhan kod:

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 : Ambil butiran acara individu

• Saya pasti anda cukup bijak untuk dapat menyediakan fungsi asas untuk mana-mana titik akhir, jadi saya tidak akan menunjukkannya setiap masa.
• Di sini, matlamat kami adalah untuk mencipta titik akhir dinamik, di mana nilai 'id' akan terus berubah. Jadi, kami telah menandainya sebagai :id, dan kami boleh mengakses nilainya seperti berikut:

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
  }
})

Ini juga boleh dilakukan di luar tangkapan cuba, sama seperti nilai input dalam titik akhir sebelumnya.

• Sekarang dalam blok cuba, kita perlu menulis pertanyaan untuk memilih baris di mana medan 'id' akan sama dengan id yang disediakan. Jika tiada hasil ditemui, ini bermakna acara dengan id ini tidak wujud, jadi kami boleh mengembalikan ralat 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}`);
})

• Jika ini tidak berlaku, itu bermakna acara itu wujud. Tetapi oleh kerana 'baris' ialah tatasusunan, jadi walaupun ia mengandungi satu elemen, kita perlu mengaksesnya mengikut baris[0]. Jadi baris yang diperlukan adalah dalam baris[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
);

• Dan voila! Anda kini boleh berjaya mendapatkan butiran acara tertentu! Inilah kod penuh:

DATABASE_URL="postgresql://username:password@host:port/dbname"

Pendaftaran Pengguna

Supabase

Untuk melaksanakan ciri ini, anda perlu mencipta jadual baharu dalam Supabase terlebih dahulu.

Pergi ke SQL Editor dan jalankan pertanyaan berikut:

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

• Kita boleh mengambil nilai input serta nilai parameter di luar tangkapan cuba.

const pool = require('./db');

• Sekarang kita akan semak dahulu sama ada acara dengan 'id' wujud. Untuk ini, kami akan mengikuti pendekatan GET /event/:id, dan menyemak sama ada rows.length adalah bukan sifar, iaitu ia mempunyai beberapa hasil.

app.get('/events', async (req, res) => {
  // code to be written
})

• Sekarang acara itu wujud, kami boleh menulis pertanyaan untuk menambahkan pendaftaran pada pangkalan data pada jadual baharu yang baru kami buat, iaitu 'pendaftaran'.

try {
  // code to be written
} catch (e) {
  console.error(e);
  res.status(500).json({error: "Database error."}); // 500 = Internal Server Error
}

• Oleh itu, kami telah melaksanakan ciri untuk mendaftarkan pengguna untuk acara juga! Berikut ialah keseluruhan kod:

const result = await pool.query("SELECT * FROM events");

GET /event/:id/registrations : Ambil semua pendaftaran untuk acara tertentu

Ini adalah kerja rumah untuk kamu semua. (Jangan marah, jika anda tidak dapat melakukannya walaupun selepas mencuba, kod GitHub sentiasa tersedia)
Petunjuk: Anda boleh menyemak sama ada acara itu wujud dengan cara yang sama seperti yang kami lakukan dalam POST /event/:id/register. Selepas itu, anda perlu menulis pertanyaan PILIH untuk jadual pendaftaran untuk mengambil semua baris dengan event_id yang diberikan.

Begitu juga, anda juga boleh mencuba dan membina titik akhir untuk memadamkan acara tertentu, seperti DELETE /event/:id .

Membungkus

Tahniah! Anda telah berjaya mencipta API anda sendiri untuk menjadualkan acara dan mengurus pendaftaran pengguna. Anda telah pergi jauh.

Anda boleh menambah lebih banyak ciri, seperti menambahkan tugas cron supaya acara yang telah berlalu masa tamatnya dipadamkan secara automatik.

Jika anda menyukai siaran ini, letakkan suka, dan komen jika anda mempunyai sebarang keraguan atau hanya mahu bersembang berkaitan dengan ini. Ikuti juga saya di LinkedIn: https://www.linkedin.com/in/amartya-chowdhury/

Atas ialah kandungan terperinci Cipta API Penjadualan Acara anda sendiri menggunakan Express dan Supabase. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!