Quickstarters
Cara Membuat Aplikasi CRUD dengan Remix?

35min
Ikhtisar
Dalam panduan ini, Anda akan belajar bagaimana membangun aplikasi CRUD (buat, baca, perbarui, hapus) menggunakan Remix JS. 
Kami akan menggunakan Back4app sebagai layanan backend kami untuk menangani penyimpanan data dengan mulus. Panduan ini mencakup pengaturan proyek Back4app, merancang skema data dinamis, dan menghubungkan operasi CRUD dalam aplikasi Remix JS Anda.
Pertama, Anda akan mengatur proyek Back4app, yang akan kami sebut Basic-CRUD-App-Remix, menyediakan penyimpanan data non-relasional yang dapat diskalakan. 
Anda kemudian akan membuat model data dengan secara manual menetapkan koleksi dan bidang melalui dasbor Back4app, atau bahkan menggunakan AI Agent terintegrasi untuk pengaturan otomatis.
Selanjutnya, Anda akan menjelajahi Aplikasi Admin Back4app—antarmuka yang ramah pengguna yang memungkinkan Anda dengan mudah mengelola data Anda menggunakan operasi seret dan lepas. 
Akhirnya, Anda akan menghubungkan aplikasi Remix JS Anda ke Back4app melalui panggilan REST API, memastikan bahwa fungsionalitas CRUD Anda, bersama dengan otentikasi pengguna, kuat dan aman.
Pada akhir tutorial ini, Anda akan memiliki aplikasi Remix JS yang siap produksi yang mampu melakukan operasi CRUD dasar bersama dengan manajemen pengguna yang aman.
Apa yang Akan Anda Pelajari
Cara membangun aplikasi CRUD dengan Remix JS dan backend yang andal.
Praktik terbaik untuk menyusun backend Anda dan mengintegrasikannya dengan frontend Remix JS.
Cara menggunakan Aplikasi Admin Back4app untuk menyederhanakan tugas manajemen data.
Teknik untuk menerapkan aplikasi Remix JS Anda, termasuk kontainerisasi dengan Docker.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek baru yang siap.
Butuh bantuan? Kunjungi Memulai dengan Back4app.
Lingkungan pengembangan Remix JS yang berfungsi.
Anda dapat menggunakan editor kode modern seperti VS Code. Node.js (versi 14 atau lebih baru) harus diinstal.
Pengetahuan dasar tentang JavaScript, React, dan RESTful API.
Untuk penyegaran, lihat dokumentasi Remix.
﻿
Langkah 1 – Menyiapkan Proyek Anda
Meluncurkan Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Tekan tombol “Aplikasi Baru” dari dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-Remix dan ikuti langkah-langkah untuk menyelesaikan proses pembuatan.
Buat Proyek Baru
﻿
Setelah proyek Anda siap, itu akan muncul di dasbor Anda, memberikan fondasi untuk backend Anda.
﻿
Langkah 2 – Membuat Model Data Anda
Membangun Struktur Data
Untuk aplikasi CRUD ini, Anda akan mendefinisikan beberapa koleksi di Back4app. Di bawah ini adalah contoh koleksi utama dan bidang yang akan mendukung fungsionalitas CRUD Anda.
1. Koleksi Item
Koleksi ini akan menyimpan rincian tentang setiap item.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama atau judul item tersebut.
deskripsi
String
Ringkasan singkat yang menggambarkan item tersebut.
dibuatPada
Tanggal
Stempel waktu untuk saat item ditambahkan.
diperbaruiPada
Tanggal
Stempel waktu untuk modifikasi terakhir.
2. Koleksi Pengguna
Koleksi ini mengelola kredensial pengguna dan informasi otentikasi.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna
String
Nama pengguna yang unik untuk pengguna.
email
String
Alamat email unik pengguna.
hashKataSandi
String
Kata sandi yang di-hash untuk otentikasi yang aman.
dibuatPada
Tanggal
Stempel waktu untuk saat akun dibuat.
diperbaruiPada
Tanggal
Stempel waktu untuk saat akun diperbarui.
Anda dapat membuat koleksi ini dan menambahkan bidang langsung dari dasbor Back4app.
Buat Kelas Baru
﻿
Untuk menambahkan field baru, cukup pilih tipe data, masukkan nama field, dan atur nilai default atau opsi wajib sesuai kebutuhan.
Buat Kolom
﻿
Menggunakan Agen AI Back4app untuk Generasi Skema
Agen AI yang terintegrasi ke dalam Back4app dapat secara otomatis menghasilkan skema Anda berdasarkan deskripsi Anda, menyederhanakan pengaturan awal.
Cara Menggunakan Agen AI:
Akses Agen AI:
Masuk ke dasbor Back4app Anda dan temukan Agen AI di pengaturan proyek Anda.
Deskripsikan Model Data Anda:
Berikan penjelasan rinci tentang koleksi dan bidang yang Anda butuhkan.
Tinjau dan Konfirmasi:
Agen AI akan menyajikan skema yang diusulkan. Verifikasi detailnya dan konfirmasikan pengaturannya.
Contoh Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
Metode yang dibantu AI ini mempercepat proses dan memastikan skema Anda disesuaikan dengan kebutuhan aplikasi Anda.
﻿
Langkah 3 – Mengaktifkan Aplikasi Admin & Menangani Operasi CRUD
Ikhtisar Aplikasi Admin
Aplikasi Admin Back4app menyediakan antarmuka tanpa kode yang menyederhanakan manajemen data backend. Fitur seret dan lepasnya membuat operasi CRUD—seperti menambah, mengedit, dan menghapus catatan—lebih intuitif.
Mengaktifkan Aplikasi Admin
Buka menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik pada “Aktifkan Aplikasi Admin.”
Siapkan akun admin Anda dengan memasukkan kredensial Anda. Ini juga akan mengonfigurasi peran (misalnya, B4aAdminUser) dan kelas sistem.
Aktifkan Aplikasi Admin
﻿
Setelah aktivasi, masuk ke Aplikasi Admin untuk mengelola data Anda dengan mudah.
Dasbor Aplikasi Admin
﻿
Melakukan Tugas CRUD melalui Aplikasi Admin
Di dalam Aplikasi Admin, Anda dapat:
Menyisipkan Catatan Baru:
Gunakan tombol “Tambah Catatan” dalam koleksi (seperti Item) untuk membuat entri baru.
Memeriksa dan Mengubah Catatan:
Klik pada catatan mana pun untuk melihat detailnya dan melakukan pengeditan.
Menghapus Catatan:
Hapus catatan yang tidak lagi diperlukan.
Antarmuka yang intuitif ini sangat meningkatkan pengalaman manajemen data Anda.
﻿
Langkah 4 – Menghubungkan Aplikasi Remix JS Anda dengan Back4app
Sekarang setelah backend Anda disiapkan, saatnya untuk mengintegrasikan aplikasi Remix JS Anda dengan Back4app.
Menggunakan Panggilan REST API di Remix JS
Karena Parse SDK biasanya tidak digunakan dengan Remix JS, Anda akan melakukan operasi CRUD melalui permintaan REST API.
1. Menyiapkan Proyek Remix JS Anda
Jika Anda belum melakukannya, buat proyek Remix baru:
Bash
npx create-remix@latest
npx create-remix@latest
﻿
Ikuti petunjuk untuk memilih target penyebaran Anda.
2. Membuat Permintaan API dari Remix
Buat file rute API di bawah app/routes direktori untuk menangani operasi CRUD. Misalnya, Anda mungkin memiliki file bernama items.server.js yang mencakup fungsi untuk mengambil, membuat, memperbarui, dan menghapus item.
Contoh: Mengambil Item
Text
// app/routes/items.server.js
import { json } from "@remix-run/node";

export async function loader() {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "GET",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
    },
  });
  const data = await response.json();
  return json(data);
}
// app/routes/items.server.js
import { json } from "@remix-run/node";

export async function loader() {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "GET",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
    },
  });
  const data = await response.json();
  return json(data);
}
﻿
Demikian pula, Anda dapat membuat rute POST, PUT, dan DELETE untuk menangani pembuatan, pembaruan, dan penghapusan item.
3. Menghubungkan Komponen UI
Dalam komponen Remix Anda, Anda dapat menggunakan hook seperti useLoaderData untuk mengambil data dan fetch API atau fungsi aksi untuk mengirim data kembali ke Back4app.
Sebagai contoh, dalam komponen React Anda:
Text
// app/routes/items.jsx
import { useLoaderData, Form } from "@remix-run/react";

export default function Items() {
  const data = useLoaderData();

  return (
    <div>
      <h1>Items List</h1>
      {data.results.map((item) => (
        <div key={item.objectId}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}

      <Form method="post">
        <input type="text" name="title" placeholder="Item Title" required />
        <textarea name="description" placeholder="Item Description" required />
        <button type="submit">Add Item</button>
      </Form>
    </div>
  );
}
// app/routes/items.jsx
import { useLoaderData, Form } from "@remix-run/react";

export default function Items() {
  const data = useLoaderData();

  return (
    <div>
      <h1>Items List</h1>
      {data.results.map((item) => (
        <div key={item.objectId}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}

      <Form method="post">
        <input type="text" name="title" placeholder="Item Title" required />
        <textarea name="description" placeholder="Item Description" required />
        <button type="submit">Add Item</button>
      </Form>
    </div>
  );
}
﻿
Integrasikan panggilan API serupa untuk operasi pembaruan dan penghapusan dalam aksi Remix Anda.
﻿
Langkah 5 – Mengamankan Backend Anda
Mengimplementasikan Daftar Kontrol Akses (ACL)
Perkuat keamanan data dengan menetapkan ACL untuk objek Anda. Misalnya, untuk membuat item yang hanya dapat diakses oleh penciptanya:
Text
// Example API call to create a private item using ACLs
async function createPrivateItem(title, description, userSessionToken) {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
      "X-Parse-Session-Token": userSessionToken,
    },
    body: JSON.stringify({
      title,
      description,
      ACL: {
        "*": { "read": false, "write": false },
        "USER_OBJECT_ID": { "read": true, "write": true }
      },
    }),
  });
  return response.json();
}
// Example API call to create a private item using ACLs
async function createPrivateItem(title, description, userSessionToken) {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
      "X-Parse-Session-Token": userSessionToken,
    },
    body: JSON.stringify({
      title,
      description,
      ACL: {
        "*": { "read": false, "write": false },
        "USER_OBJECT_ID": { "read": true, "write": true }
      },
    }),
  });
  return response.json();
}
﻿
Izin Tingkat Kelas (CLP)
Sesuaikan CLP di dasbor Back4app Anda untuk menerapkan kebijakan keamanan default, memastikan bahwa hanya pengguna yang terautentikasi yang dapat mengakses koleksi tertentu.
﻿
Langkah 6 – Menambahkan Autentikasi Pengguna
Mengonfigurasi Manajemen Pengguna
Back4app memanfaatkan kelas Pengguna bawaan Parse untuk mengelola otentikasi. Dalam aplikasi Remix Anda, tangani pendaftaran dan login pengguna menggunakan panggilan API.
Contoh: Endpoint Pendaftaran Pengguna
Text
// app/routes/signup.server.js
import { json, redirect } from "@remix-run/node";

export async function action({ request }) {
  const formData = await request.formData();
  const username = formData.get("username");
  const password = formData.get("password");
  const email = formData.get("email");

  const response = await fetch("https://parseapi.back4app.com/users", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username, password, email }),
  });

  if (!response.ok) {
    throw new Error("Signup failed");
  }

  return redirect("/login");
}
// app/routes/signup.server.js
import { json, redirect } from "@remix-run/node";

export async function action({ request }) {
  const formData = await request.formData();
  const username = formData.get("username");
  const password = formData.get("password");
  const email = formData.get("email");

  const response = await fetch("https://parseapi.back4app.com/users", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username, password, email }),
  });

  if (!response.ok) {
    throw new Error("Signup failed");
  }

  return redirect("/login");
}
﻿
Terapkan endpoint serupa untuk login, manajemen sesi, dan pengaturan ulang kata sandi.
﻿
Langkah 7 – Menerapkan Aplikasi Remix JS Anda
Back4app mendukung penerapan yang mulus. Anda dapat menerapkan aplikasi Remix JS Anda menggunakan berbagai strategi, termasuk Docker.
7.1 Membangun Aplikasi Remix JS Anda
Kompilasi dan Bundel:
Gunakan manajer paket dan skrip build Anda (misalnya, melalui npm run build) untuk mengompilasi aplikasi Anda.
Verifikasi Output:
Pastikan output build Anda berisi semua file yang diperlukan.
7.2 Contoh Struktur Proyek
Proyek Remix JS yang khas mungkin terlihat seperti:
Text
Basic-CRUD-App-Remix/
|-- app/
|   |-- routes/
|   |   |-- items.jsx
|   |   |-- items.server.js
|   |   |-- signup.server.js
|   |-- components/
|       |-- ItemForm.jsx
|-- public/
|-- package.json
|-- remix.config.js
|-- README.md
Basic-CRUD-App-Remix/
|-- app/
|   |-- routes/
|   |   |-- items.jsx
|   |   |-- items.server.js
|   |   |-- signup.server.js
|   |-- components/
|       |-- ItemForm.jsx
|-- public/
|-- package.json
|-- remix.config.js
|-- README.md
﻿
7.1 Membangun Aplikasi Remix JS Anda
7.3 Menggunakan Docker untuk Aplikasi Anda
Jika Anda memilih kontainerisasi, tambahkan sebuah Dockerfile di root proyek Anda:
Dockerfile
# Use an official Node.js runtime as a base
FROM node:16-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package files and install dependencies
COPY package.json package-lock.json ./
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the Remix app
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the application
CMD ["npm", "start"]
# Use an official Node.js runtime as a base
FROM node:16-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package files and install dependencies
COPY package.json package-lock.json ./
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the Remix app
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the application
CMD ["npm", "start"]
﻿
7.4 Mengdeploy melalui Back4app Web Deployment
Hubungkan Repositori Anda:
Host kode sumber Remix JS Anda di GitHub.
Konfigurasi Deployment:
Di dasbor Back4app Anda, pilih fitur Web Deployment, tautkan repositori Anda (misalnya, Basic-CRUD-App-Remix), dan pilih cabang yang benar.
Atur Perintah Build dan Output:
Tentukan perintah build Anda (seperti npm run build) dan direktori output.
Deploy Aplikasi Anda:
Klik Deploy dan pantau log hingga aplikasi Anda aktif.
﻿
Langkah 8 – Menyelesaikan dan Arah Masa Depan
Kerja bagus! Anda sekarang telah membangun aplikasi CRUD menggunakan Remix JS yang terintegrasi dengan Back4app. 
Dalam panduan ini, Anda mengatur proyek yang disebut Basic-CRUD-App-Remix, mendefinisikan koleksi untuk Item dan Pengguna, dan mengelola data melalui Aplikasi Admin Back4app. 
Anda kemudian menghubungkan aplikasi Remix JS Anda ke Back4app melalui panggilan REST API, dan menerapkan autentikasi pengguna yang aman serta langkah-langkah perlindungan data.
Langkah Selanjutnya:
Tingkatkan Aplikasi Anda:
Pertimbangkan untuk menambahkan lebih banyak fitur seperti fungsionalitas pencarian, tampilan item yang lebih detail, atau pembaruan waktu nyata.
Perluas Kemampuan Backend:
Lihat fungsi cloud, integrasi API eksternal, atau kontrol akses yang lebih canggih.
Terus Belajar:
Kunjungi dokumentasi Back4app dan jelajahi tutorial Remix JS tambahan untuk lebih mengoptimalkan aplikasi Anda.
Selamat coding dan semoga sukses dalam perjalanan Remix JS Anda!
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama atau judul item tersebut.
deskripsi	String	Ringkasan singkat yang menggambarkan item tersebut.
dibuatPada	Tanggal	Stempel waktu untuk saat item ditambahkan.
diperbaruiPada	Tanggal	Stempel waktu untuk modifikasi terakhir.
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna	String	Nama pengguna yang unik untuk pengguna.
email	String	Alamat email unik pengguna.
hashKataSandi	String	Kata sandi yang di-hash untuk otentikasi yang aman.
dibuatPada	Tanggal	Stempel waktu untuk saat akun dibuat.
diperbaruiPada	Tanggal	Stempel waktu untuk saat akun diperbarui.
Diperbarui 19 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Aplikasi CRUD Dasar dengan Solid?
BERIKUTNYA
Cara Membuat Aplikasi CRUD dengan Gatsby?