Membuat Aplikasi CRUD Rest API dengan Express dan Firebase

#express #firebase #rest api

Pada tutorial kali ini kita akan membuat sebuah aplikasi CRUD (Create, Read, Update, Delete) REST API sederhana menggunakan express dan firebase.

Persiapan

Sebelum kita memulai, ada beberapa hal yg perlu dipersiapkan,

Pastikan di komputer kamu sudah terinstall Node.js
Sudah memiliki akun Firebase

Membuat project

Pertama-tama kita perlu membuat folder terlebih dahulu, disini saya akan membuat folder dengan nama crud-firebase, tetapi kalian bisa memberi nama folder sesuai keinginan kalian.

mkdir crud-firebase
cd crud-firebase

Setelah kita masuk ke dalam direktori kita, jalankan perintah berikut

npm init -y

Kita akan diberikan sebuah file package.json.

Struktur project

Kita akan membuat beberapa file & folder kita sehingga struktur project kita akan tampil seperti berikut:

crud-firebase/
├── controller/
├── firebase/
│ └── config.js
│ └── index.js
├── routes/
├── .env
├── app.js
└── package.json

Install dependencies

Selanjutnya kita akan menginstall beberapa dependencies.

npm install express cors dotenv firebase

dev dependencies

npm install --save-dev nodemon

Modules

di package.json tambahkan kode berikut:

"type": "module"

Sip!, 😄 kita sekarang dapat menggunakan sintaks seperti import untuk mengimport dependencies ke project kita

Setup Firebase Firestore

Membuat Firebase Project
- Masuk ke firebase console dan buat project baru,
- setelah project berhasil dibuat, aktifkan Firestore dan buat database baru.
Salin Konfigurasi Firebase
- Masuk ke Project Overview > Project Settings > General.
- Scroll kebawah, pada bagian SDK setup and configuration. lalu Salin konfigurasi firebaseConfig yang telah disediakan.

Setup File Konfigurasi

.env

Isi konfigurasi dengan firebase config yang telah digenerate pada firebase console anda.

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=

firebase/config.js

Kamu bisa salin kode berikut ke firebase/config.js.

import dotenv from 'dotenv';
dotenv.config();

const {
    FIREBASE_API_KEY,
    FIREBASE_AUTH_DOMAIN,
    FIREBASE_PROJECT_ID,
    FIREBASE_STORAGE_BUCKET,
    FIREBASE_MESSAGING_SENDER_ID,
    FIREBASE_APP_ID,
} = process.env;

const firebaseConfig = {
    apiKey: FIREBASE_API_KEY,
    authDomain: FIREBASE_AUTH_DOMAIN,
    projectId: FIREBASE_PROJECT_ID,
    storageBucket: FIREBASE_STORAGE_BUCKET,
    messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
    appId: FIREBASE_APP_ID
}

export default firebaseConfig

firebase/index.js

Tambahkan kode berikut di file firebase/index.js untuk menginisialisasi firebase

import { initializeApp } from 'firebase/app';
import firebaseConfig from './config.js';

const firebase = initializeApp(firebaseConfig);

export default firebase;

app.js

Tambahkan kode berikut di app.js

import express from 'express';
import cors from 'cors';

const PORT = 4000;
const app = express();

app.use(cors());
app.use(express.json());

app.listen(PORT, () =>
    console.log(`Server is running at port ${PORT}`),
);

Untuk menyalakan server kita dapat menjalankan perintah berikut

node app.js

atau kita dapat menggunakan nodemon

nodemon app.js

Saat mengembangkan aplikasi Node.js, kamu harus merestart server biar setiap kali ada perubahan yang kita buat. Nodemon dapat membantu kita memantau perubahan dan merestart servernya secara otomatis.

Kita dapat juga menambahkannya di package.json agar dapat kita jalankan dengan perintah npm run dev atau npm run start.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js",
    "dev": "nodemon app.js"
},

Membuat CRUD

Selanjutnya kita akan membuat route api serta operasi CRUD (Create, Read, Update, Delete).

Didalam folder controller kita akan membuat sebuah file baru, saya akan buat dengan nama bookController.js

Controller

import firebase from '../firebase/index.js';
import {
    getFirestore,
    collection,
    doc,
    addDoc,
    getDoc,
    getDocs,
    updateDoc,
    deleteDoc,
} from 'firebase/firestore';

const db = getFirestore(firebase);
const dbName = "books";
const bookCollection = collection(db, dbName);

// CREATE: create new book
export const createBook = async (req, res, next) => {
    try {
        const data = req.body;
        await addDoc(bookCollection, data);
        res.status(200).send('book created successfully');
    } catch (error) {
        res.status(400).send(error.message);
    }
};

// READ: get all book
export const getBooks = async (req, res, next) => {
    try {
        const books = await getDocs(bookCollection);
        if (books.empty) {
            res.status(400).send('No books found');
        } else {
            const booksArray = books.docs.map(doc => ({ id: doc.id, ...doc.data() }));
            res.status(200).send(booksArray);
        }
    } catch (error) {
        res.status(400).send(error.message);
    }
};

// READ: get single book
export const getBook = async (req, res, next) => {
    try {
        const id = req.params.id;
        const book = doc(db, dbName, id);
        const data = await getDoc(book);
        if (data.exists()) {
            res.status(200).send(data.data());
        } else {
            res.status(404).send('book not found');
        }
    } catch (error) {
        res.status(400).send(error.message);
    }
};

// UPDATE: update book
export const updateBook = async (req, res, next) => {
    try {
        const id = req.params.id;
        const data = req.body;
        const book = doc(db, dbName, id);
        await updateDoc(book, data);
        res.status(200).send('book updated successfully');
    } catch (error) {
        res.status(400).send(error.message);
    }
};

// DELETE: delete book
export const deleteBook = async (req, res, next) => {
    try {
        const id = req.params.id;
        await deleteDoc(doc(db, dbName, id));
        res.status(200).send('book deleted successfully');
    } catch (error) {
        res.status(400).send(error.message);
    }
};

Route

Didalam folder route, buat file dengan nama bookRoute.js dan salin kode berikut

import express from 'express';
import {
    getBooks,
    createBook,
    getBook,
    updateBook,
    deleteBook
} from '../controller/bookController.js';

const router = express.Router();

router.get('/books', getBooks);
router.post('/book/new', createBook);
router.get('/book/:id', getBook);
router.put('/book/update/:id', updateBook);
router.delete('/book/delete/:id', deleteBook);

export default router;

penjelasan masing-masing route:

Method	Route	Description
GET	`/books`	Mengambil semua buku.
POST	`/book/new`	Membuat buku baru.
GET	`/book/:id`	Mengambil detail buku.
PUT	`/book/update/:id`	Mengupdate buku.
DELETE	`/book/delete/:id`	Menghapus buku.

App

Agar kita mendapatkan akses yg telah kita buat di folder route, kita perlu melakukan perubahan didalam file app.js seperti berikut

import express from 'express';
import cors from 'cors';
import booksRoute from "./routes/bookRoute.js";

const PORT = 4000;
const app = express();

app.use(cors());
app.use(express.json());

app.use('/api', booksRoute);

app.listen(PORT, () =>
    console.log(`Server is running at port ${PORT}`),
);

Jalankan Server

Di terminal jalankan perintah

npm run dev

sekarang API kamu sudah dapat diakses di halaman localhost:4000/api

Testing API dengan Postman

Selanjutnya yaitu mengetes API kita menggunakan Postman, disini kita akan mengecek apakah semua operasi CRUD kita sudah berjalan dengan benar.

Create (POST)

EndPoint: localhost:4000/api/book/new.

{
    "author": "J.R.R Tolkien",
    "name": "The Lord of the Rings",
    "description": "The Lord of the Rings is an epic high fantasy novel by the English author and scholar J. R. R. Tolkien",
    "price": "$75"
}

Read (GET)

Type	Endpoint
Get All Items	localhost:4000/api/books
Get Single Item	localhost:4000/api/book/[id]

Update (PUT)

EndPoint: localhost:4000/api/book/udpate/[id].

{
    "description": "The Lord of the Rings is an epic high fantasy novel by J. R. R. Tolkien",
    "price": "$100"
}

Delete (DELETE)

EndPoint: localhost:4000/api/book/delete/[id].

Kesimpulan

Selamat, saat ini seharusnya kamu sudah dapat membuat server node js dengan firebase. Kita telah membahas setup, konfigurasi serta melakukan testing api menggunakan postman. 😄