Bagaimana cara membangun dan menggunakan aplikasi web dengan database PostgreSQL?

How to build and deploy a web application with a PostgreSQL database_
How to build and deploy a web application with a PostgreSQL database_

Pada artikel ini, Anda akan mempelajari cara membuat dan menerapkan aplikasi web dengan database Postgres menggunakan teknologi AI.

Menambahkan AI ke dalam alur kerja pengembangan Anda dapat bermanfaat bagi produktivitas Anda. Anda dapat mengurangi waktu pengembangan dan menghemat biaya dengan mengotomatiskan tugas-tugas yang berulang dan menggunakan fitur AI seperti pembuatan kode.

Keuntungan menggunakan AI dalam Pengembangan Web

Beberapa keuntungan mengintegrasikan AI ke dalam pengembangan web Anda adalah sebagai berikut.

Otomatisasi Tugas yang Berulang

Memperkenalkan AI ke dalam alur kerja pengembangan Anda dapat membantu Anda mengotomatiskan tugas-tugas yang berulang, seperti membuat data tiruan dan kode boilerplate.

Hal ini juga dapat membantu dalam pengujian untuk menghasilkan tes unit dan integrasi.

Namun, meskipun AI dapat mengotomatiskan banyak tugas, penting untuk dicatat bahwa ini bukanlah solusi yang sangat mudah dan masih membutuhkan pengawasan manusia.

Selalu tinjau dan validasi keluaran alat bantu AI untuk memastikan bahwa keluarannya akurat.

Pembuatan Kode

Alat bantu AI dapat membantu Anda dalam menulis cuplikan kode atau bahkan seluruh fungsi. Otomatisasi ini mempercepat proses pengkodean Anda, sehingga Anda dapat fokus pada desain dan pemecahan masalah yang lebih tinggi.

Namun, kode yang dihasilkan AI dapat menyesatkan dan menyebabkan bug yang sulit ditemukan lebih jauh dalam siklus pengembangan perangkat lunak; dengan demikian, kode tersebut harus diperiksa sebelum mendorong kode tersebut ke produksi.

Pengoptimalan Kode yang Ditingkatkan

Alat bantu AI dapat membantu Anda mengoptimalkan kode Anda untuk kecepatan dengan menyarankan bagian kode yang dapat Anda tulis ulang atau refaktor untuk menghasilkan solusi yang lebih efisien dan mudah dipelihara.

Hal ini dapat melibatkan penyederhanaan logika yang kompleks, menghilangkan kode yang berlebihan, atau menggunakan fitur bahasa dengan lebih baik.

Alat bantu AI juga dapat membantu Anda memilih algoritme dan struktur data yang lebih efisien untuk meningkatkan kinerja keseluruhan kode Anda dan efisiensi operasi pada data.

Deteksi dan Koreksi Bug

Alat bantu AI dapat membantu Anda men-debug kode lebih cepat dengan menganalisis kesalahan dan memberikan solusi yang tepat untuk kesalahan Anda.

Misalnya, saat Anda men-deploy aplikasi menggunakan kontainer Back4app, AI Back4app menganalisis kesalahan yang disebabkan oleh kesalahan pada Dockerfile Anda dan memberikan saran yang dapat menyelesaikan kesalahan dan membantu Anda men-deploy aplikasi dengan sukses.

Membangun Backend menggunakan Back4app AI Agent dan PostgreSQL

Pada tutorial ini, Anda akan membangun Library API. Anda akan berinteraksi dengan database PostgreSQL dengan tabel-tabel berikut: Book, Author, BookCheckout, dan LibraryMember.

Struktur dan Desain Basis Data

Tabel Buku berisi sebagian besar informasi tentang sebuah buku, seperti judul, penulis, tahun terbit, jumlah_kopi, dan jumlah_salinan yang tersedia.

Tabel Pengarang memiliki hubungan satu-ke-banyak dengan tabel Buku, yaitu satu pengarang dapat memiliki banyak buku, tetapi setiap buku hanya dapat memiliki satu pengarang. Tabel ini juga berisi rincian kecil tentang penulis, seperti nama lengkap penulis.

Tabel LibraryMemeber berisi informasi tentang anggota perpustakaan, seperti nama, email, nomor telepon.

Tabel BookCheckout bertindak sebagai tabel persimpangan antara tabel Book dan LibraryMemeber untuk membuat hubungan banyak-ke-banyak di antara keduanya.

Misalnya, seorang anggota dapat meminjam beberapa buku, dan beberapa anggota dapat meminjam sebuah buku. Ini mereferensikan buku dan anggota yang meminjamnya bersama dengan tanggal checkout, tanggal jatuh tempo, dan tanggal pengembalian.

Berikut adalah diagram model basis data untuk basis data.

Diagram Model Basis Data

Membuat Database di Back4app

Buka back4app.com, masuk (buat akun jika belum punya), dan klik tombol “Aplikasi Baru” di sudut kanan atas layar Anda.

Pilih opsi Backend sebagai Layanan, seperti yang ditunjukkan pada gambar di bawah ini.

Buat aplikasi back4app baru

Beri nama aplikasi Anda dan pilih opsi PostgreSQL, seperti yang ditunjukkan pada gambar di bawah ini.

pilih postgres sebagai basis data

Navigasikan ke Agen AI Back4app dan masukkan perintah di bawah ini:

"I need you to create database tables in my Back4app app; what do you need me to provide?"
Persyaratan Tabel Basis Data

Agen AI ini akan mengembalikan daftar hal-hal yang dibutuhkan untuk membuat tabel database untuk Anda. Ini harus mencakup kunci aplikasi dan definisi skema Anda.

Berdasarkan desain database pada bagian sebelumnya, definisi skema Anda harus serupa dengan blok kode di bawah ini:

1. **Authors Class:**
    - Class Name: `Authors`
    - Fields:
        - `authorId` (Auto-generated, Primary Key)
        - `authorName` (String, Required)
2. **Books Class:**
    - Class Name: `Books`
    - Fields:
        - `bookId` (Auto-generated, Primary Key)
        - `title` (String, Required)
        - `author` (Pointer to the `Authors` class)
        - `publicationYear` (Number)
        - `availableCopies` (Number)
        - `totalCopies` (Number)
3. **LibraryMembers Class:**
    - Class Name: `LibraryMembers`
    - Fields:
        - `memberId` (Auto-generated, Primary Key)
        - `name` (String, Required)
        - `email` (String, Required)
        - `phoneNumber` (String)
4. **BookCheckouts Class:**
    - Class Name: `BookCheckouts`
    - Fields:
        - `checkoutId` (Auto-generated, Primary Key)
        - `book` (Pointer to the `Books` class)
        - `member` (Pointer to the `LibraryMembers` class)
        - `checkoutDate` (Date)
        - `dueDate` (Date)
        - `returnDate` (Date)

Blok kode di atas menjelaskan skema database Anda dengan cara yang memungkinkan AI membuat database Anda secara akurat dengan menggambarkan tipe data dan hubungan dengan benar.

Setelah memberikan detail kepada agen AI dan agen mengonfirmasi bahwa ia telah berhasil membuat database Anda, Anda dapat memeriksa dasbor aplikasi Anda untuk memverifikasi bahwa database telah dibuat.

tabel basis data aplikasi perpustakaan

Selanjutnya, minta agen AI untuk mengisi basis data Anda dengan data uji menggunakan perintah di bawah ini.

Populate my database with test data for the Authors, their books, 
and some library members who have checked out books from the library.
Permintaan Data Dummy

Sekarang, Anda memiliki data uji pada basis data Anda untuk digunakan.

Membuat Kode Cloud

Setelah Anda memiliki data uji coba untuk digunakan, Anda perlu mengimplementasikan fungsionalitas untuk sistem manajemen perpustakaan Anda.

Untuk tutorial ini, aplikasi Anda akan memiliki fungsionalitas sebagai berikut.

  • Dapatkan semua buku di perpustakaan.
  • Melihat buku tertentu di perpustakaan.
  • Lihat semua buku oleh penulis tertentu.
  • Meminjam buku dari perpustakaan.
  • Mengembalikan buku yang dipinjam ke perpustakaan.

Anda dapat mengimplementasikan fungsi ini menggunakan fungsi kode cloud Back4app, yang memungkinkan aplikasi Anda untuk menjalankan fungsi JavaScript di Back4app sebagai respons terhadap peristiwa yang dipicu oleh permintaan HTTP.

Anda dapat membuat fungsi kode cloud khusus menggunakan agen AI Back4app untuk menyederhanakan proses pengembangan Anda.

Berikan agen AI Back4app perintah di bawah ini untuk menghasilkan kode cloud untuk mendapatkan semua buku di perpustakaan.

Create a cloud code function called `getAllBooks` 
that will return all the books in the database with their respective authors.
Dapatkan semua buku

Selanjutnya, berikan agen AI Back4app perintah di bawah ini untuk menghasilkan kode cloud untuk mengambil buku pada ID.

Create a cloud code function called `viewBook(bookId)`
that allows me to provide a book ID and return a book with the matching ID.
Permintaan Detail Buku

Kemudian, berikan agen AI Back4app perintah di bawah ini untuk menghasilkan kode cloud untuk mendapatkan semua buku dari penulis tertentu.

Create a cloud code function called `getByAuthor(authorName)` that allows me to provide an author name and return all the books by the author.
Dapatkan Buku dari Author Prompt

Selanjutnya, berikan agen AI Back4app perintah di bawah ini untuk menghasilkan kode cloud untuk meminjam buku dari perpustakaan.

Create a cloud code function called `borrowBookFromLibrary(libraryMemberId, bookId)` that allows me to provide a Library member ID and a Book ID  and records a book checkout for the member with the due date and return date set to a month from the current date. 

The function should also check if the book is available (ie `availableCopies` != 0). The book should display a proper error message if it is unavailable.
meminjam buku dari perpustakaan dengan cepat

Terakhir, berikan agen AI Back4app perintah di bawah ini untuk menghasilkan kode cloud untuk mengembalikan buku ke perpustakaan.

Create a cloud code function called `returnBookToLibrary(libraryMemberId, bookId)` that allows me to provide a Library member ID and a Book ID. 

The function should fetch the BookCheckout record  with the libraryMemberId and bookId provided and update  the return date of the BookCheckout record to the current date. 

The function should also increment the book's `availableCopies` by 1.

Anda dapat memeriksa apakah agen AI membuat fungsi cloud Anda dengan benar dengan memeriksanya di dasbor Back4app Anda → Kode Cloud → Fungsi & Hosting Web → cloud → main.js.

Kode Cloud Back4app

Sekarang, Anda telah memiliki backend fungsional yang dibuat dari beberapa perintah. Selanjutnya, Anda akan membangun sebuah UI yang memungkinkan Anda untuk berinteraksi dengan backend Anda.

Membangun Frontend dengan Agen AI Back4app

Pada bagian ini, Anda akan membangun UI aplikasi web Anda menggunakan React.

Pertama, berikan agen AI perintah di bawah ini untuk mendapatkan gambaran umum tentang langkah-langkah yang diperlukan untuk membuat UI untuk aplikasi Anda.

Describe the steps required to build a React Frontend for my backend. I want the app to have the following routes
1. `/books` to display all the books in the library
2. `/books/:bookId` to view a specific book
3. `/books/authors/:authorName` to view all books by a specific author
4. `/books/:bookId/borrow` allows a member to borrow a book
5. `/books/:bookId/return-to-library` allows a member to return a book to the library
I also want the app to be created using vite

Agen akan merespons dengan beberapa langkah, yang mungkin berbeda dari yang ada di bawah ini, namun pada akhirnya akan menghasilkan hasil yang sama. Jika salah satu langkah yang diuraikan oleh AI tidak cukup jelas, Anda dapat meminta AI untuk mengklarifikasi di prompt lain.

Langkah 1: Inisialisasi Proyek Vite baru dan Instal Ketergantungan

Jalankan perintah di bawah ini di terminal Anda untuk membuat aplikasi React baru dengan Vite:

npm create vite@latest library-app -- --template react

Arahkan ke direktori proyek dan jalankan install dependensi dengan menjalankan perintah di bawah ini:

cd library-app && npm install

Instal React Router untuk perutean dan Parse SDK untuk berinteraksi dengan Back4app dengan menjalankan perintah di bawah ini:

npm install react-router-dom parse

Langkah 2: Inisialisasi SDK Parse JavaScript

Tambahkan blok kode di bawah ini ke file main.jsx Anda untuk menginisialisasi Parse di aplikasi Anda.

import Parse from "parse";

const PARSE_APPLICATION_ID = "YOUR_APPLICATION_ID";
const PARSE_HOST_URL = "<https://parseapi.back4app.com/>";
const PARSE_JAVASCRIPT_KEY = "YOUR_JAVASCRIPT_KEY";

Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = PARSE_HOST_URL;

Ingatlah untuk mengganti “YOUR_APPLICATION_ID” dan “YOUR_JAVASCRIPT_KEY” dengan nilai yang sebenarnya, yang dapat Anda temukan di dasbor Back4app Anda → Pengaturan Aplikasi → Keamanan dan Kunci.

Langkah 3: Mengatur Perutean

Ganti kode di file App.jsx Anda dengan blok kode di bawah ini:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Books from './components/Books';
import BookDetails from './components/BookDetails';
import BooksByAuthor from './components/BooksByAuthor';
import BorrowBook from './components/BorrowBook';
import ReturnBook from './components/ReturnBook';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/books" element={<Books />} />
        <Route path="/books/:bookId" element={<BookDetails />} />
        <Route path="/books/authors/:authorName" element={<BooksByAuthor />} />
        <Route path="/books/:bookId/borrow" element={<BorrowBook />} />
        <Route path="/books/:bookId/return-to-library" element={<ReturnBook />} />
      </Routes>
    </Router>
  );
};

export default App;

Langkah 4: Membangun dan Menata Komponen

Menurut agen AI, aplikasi Anda harus memiliki lima komponen:

  • Komponen Buku
  • Komponen BooksDetails
  • Komponen BooksByAuthor
  • Komponen Buku Pinjam
  • Komponen Buku Pengembalian

Pertama, buat folder “komponen” di direktori proyek Anda dan buat masing-masing file untuk komponen Anda. Kemudian, buat folder CSS di folder “components” dan buat file CSS untuk masing-masing komponen.

Folder komponen Anda akan terlihat seperti gambar di bawah ini:

Struktur file komponen

Selanjutnya, berikan AI perintah di bawah ini untuk membuat dan menata komponen Buku Anda:

Create the component for the `books` route. 

Be sure to add proper class names for styling and ensure that you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects). 

When the book card is clicked, I want to go to the route /books/:bookId ⁠ using the bookId ⁠ of the bookcard I clicked. 

For the styling, the books should be displayed in a grid at the center of the webpage, taking the full width of the browser. 

The component should also have a proper header like "Books".

AI akan merespons dengan stylesheet untuk file Books.css Anda dan cuplikan kode jsx untuk Books.jsx Anda.

Tambahkan blok kode ke file masing-masing dan impor Books.css Anda ke file main.jsx.

Sepertinya begitu:

//main.jsx
import "./components/css/Books.css";

Catatan: Nonaktifkan fileindex.css Anda untuk mencegah gaya menimpa gaya kustom Anda.

Daftar Buku Perpustakaan

Berikan AI perintah di bawah ini untuk membuat dan menata komponen BookDetails Anda.

Create a component for the `books/:bookId` route. The component should have a button that takes you to the `books/:bookId/borrow` route to allow the user to borrow the book. 

The component should also have a button that takes you to the `books/:bookId/return-to-library` route that allows a user to return a book.  

The component should also include a link to the author names of the book that takes the user to the `/books/authors/:authorName` route, allowing them to view books from other authors. 

Be sure to add proper class names for styling and ensure that you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects).

AI akan merespons dengan stylesheet untuk file BookDetails.css dan potongan kode jsx untuk BookDetails.jsx. Tambahkan blok kode ke file masing-masing.

Halaman detail buku

Berikan perintah di bawah ini kepada AI untuk membuat komponen BooksByAuthor Anda:

Create a component for the `books/authors/:authorName` route. 

Be sure to add proper class names for styling and ensure you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects).  

When the book card is clicked, I want to go to the route /books/:bookId ⁠ using the bookId ⁠ of the bookcard I clicked.

For the styling, the books should be displayed in a grid at the center of the webpage, taking the full width of the browser. 

The component should also have a proper header, such as `AuthorName's Books` for example "Jane Austen's Books".

Tambahkan kode yang dihasilkan ke file yang tepat.

Dapatkan buku berdasarkan penulis

Berikan perintah kepada AI di bawah ini untuk membuat komponen BorrowBook Anda:

Create a component for the `/books/:bookId/borrow`. 

The component should display a form that allows users to enter their `libraryMemberId` and borrow the book. 

Be sure to add proper class names for styling and ensure you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects). 

For the styling, the elements should be properly spaced and have a proper header like "Borrow <NAME_OF_BOOK>". 
The form should be at the center of the webpage, taking the full width of the browser. 

The component should also display the number of remaining books.

Tambahkan kode yang dihasilkan ke file yang tepat.

Meminjam Halaman Buku

Berikan perintah kepada AI di bawah ini untuk membuat komponen ReturnBook Anda:

Create a component for the `/books/:bookId/return-to-library`.

The component should display a form that allows users to enter their `libraryMemberId` and `bookId` of the book they want to return. 

For the styling, the elements should be properly spaced and have a proper header like "Return Book". 

The form should be at the center of the webpage, taking the full width of the browser.

Tambahkan kode yang dihasilkan ke file yang tepat.

Komponen Buku Pengembalian

Menerapkan aplikasi Web Anda di Back4app Containers

Setelah Anda selesai membuat aplikasi, Anda perlu men-deploy aplikasi agar tersedia untuk publik. Dalam tutorial ini, Anda akan men-deploy aplikasi Anda menggunakan kontainer Back4app.

Berikan perintah di bawah ini kepada agen AI:

What steps do I need to follow to deploy my app on Back4app containers?

AI akan merespons dengan langkah-langkah yang serupa dengan yang berikut ini:

  1. Membuat berkas Docker
  2. Dorong kode Anda ke repositori publik
  3. Hubungkan repositori publik Anda ke back4app
  4. Menyebarkan

Berikan perintah kepada agen AI:

Generate a dockerfile for my application

Buat berkas Dockerfile di direktori root aplikasi Anda dan tambahkan kode yang dihasilkan.

Selanjutnya, dorong kode Anda ke repositori publik dan berikan perintah di bawah ini kepada agen AI Anda:

Connect to my "YOUR_REPOSITORY_URL" repository on GitHub and deploy it to Back4app Containers.

Agar perintah di atas dapat bekerja, aplikasi GitHub Back4app harus diintegrasikan dengan tepat dengan akun GitHub Anda. Sebagai alternatif, Anda dapat menggunakan aplikasi React secara manual dengan kontainer Back4app.

Kesimpulan

Back4app AI Agent merampingkan seluruh siklus pengembangan, mulai dari membuat tabel basis data hingga membuat fungsi kode cloud hingga membangun UI frontend React dan bahkan men-deploy aplikasi.

Pendekatan ini memungkinkan Anda untuk mengembangkan back end dan front end aplikasi Anda dengan upaya manual yang minimal.

Namun, penting untuk meninjau output dari alat AI untuk memastikan keakuratan dan mengatasi potensi masalah.


David Ekete

Keahlian ganda David Ekete sebagai penulis teknis berpengalaman dan pengembang backend yang sukses secara unik memposisikannya sebagai otoritas terkemuka dalam menyajikan dokumentasi teknis yang jelas dan komprehensif serta membangun aplikasi web yang tangguh dan skalabel. Latar belakangnya yang luas mencakup peran-peran profil tinggi—berkontribusi kepada pemimpin industri seperti back4app, Draft.dev, dan MUO—serta unggul sebagai Backend Engineer dan Engineering Intern di perusahaan-perusahaan seperti Elevate Apps dan Terrahaptix. Melengkapi pengalaman langsungnya, David memegang sertifikasi yang diakui industri dari The Linux Foundation, Sololearn, dan Udemy, yang menekankan penguasaannya dalam dokumentasi teknis, pengembangan API, dan bahasa pemrograman modern. Kredensial dan rekam jejaknya yang terbukti menjadikannya aset yang tak ternilai bagi tim-tim yang menuntut keunggulan teknis dan pemecahan masalah yang inovatif. Jelajahi proyek-proyek terdepan dan repositori kodenya di GitHub 🛠️, dan hubungkan dengan dia di LinkedIn 🔗 untuk mengetahui bagaimana keahliannya dapat meningkatkan inisiatif teknologi Anda. Apakah Anda membutuhkan dokumentasi teknis ahli, pengembangan backend yang kuat, atau pemecah masalah yang kolaboratif dengan dasar rekayasa yang solid, David Ekete siap memberikan dampak yang signifikan.

Leave a reply

Your email address will not be published.