Express 및 Supabase를 사용하여 나만의 Event Scheduling API 만들기

클럽 행사를 관리할 플랫폼이 필요하신 적이 있나요? 아니면 사무실에서 회의를 계획하시나요? 하지만 저렴한 플랫폼을 찾다가 제시된 수많은 옵션에서 길을 잃으셨나요? 아니면 인생을 더 잘 정리하고 어떤 행사에 참석해야 하는지 일정을 계획하고 싶으신가요?

이 게시물을 끝까지 따라오시면 이벤트 생성 및 등록과 같은 모든 기본 기능을 사용할 수 있는 기본 이벤트 예약 API가 제공됩니다.

이 프로젝트의 GitHub 저장소는 https://github.com/xerctia/gatherly에 있습니다

익스프레스란 무엇인가요?

Express는 GET, POST 등과 같은 다양한 종류의 요청을 처리하기 위해 서버를 설정하고 구축하기 위한 Javascript 프레임워크입니다. 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 설정

수파베이스 설정

• 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 블록 내에서 필요한 기능에 대한 코드를 작성하겠습니다.
• 데이터베이스의 모든 이벤트를 가져오려면 데이터베이스를 쿼리하고 이를 변수에 저장해야 합니다. 우리는 비동기식 접근 방식을 따르고 있으므로 데이터를 올바르게 저장하려면 대기를 사용해야 합니다.

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'는 배열이므로 하나의 요소를 포함하더라도 행[0]으로 액세스해야 합니다. 따라서 필요한 행은 행[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 접근 방식을 따르고 행.길이가 0이 아닌지, 즉 몇 가지 결과가 있는지 확인합니다.

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이 지난 이벤트가 자동으로 삭제되도록 크론 작업을 추가하는 등의 기능을 더 추가할 수 있습니다.

이 게시물이 마음에 드셨다면 좋아요를 눌러주시고 궁금한 점이 있거나 관련 채팅을 하고 싶으시면 댓글을 남겨주세요. LinkedIn에서도 저를 팔로우하세요: https://www.linkedin.com/in/amartya-chowdhury/

위 내용은 Express 및 Supabase를 사용하여 나만의 Event Scheduling API 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!