Quickstarters
Cara Membangun Aplikasi CRUD dengan JavaScript?

35min
Ikhtisar
Dalam tutorial ini, Anda akan belajar bagaimana membangun aplikasi CRUD (buat, baca, perbarui, hapus) yang lengkap menggunakan JavaScript. 
Kami akan memanfaatkan Back4app untuk mengelola data backend Anda dengan mudah. Panduan ini mencakup operasi CRUD yang penting, mulai dari mengonfigurasi proyek Back4app hingga mengintegrasikan aplikasi JavaScript Anda dengan Parse JavaScript SDK atau REST API.
Pertama, Anda akan mengatur proyek di Back4app yang berjudul Basic-CRUD-App-JavaScript, yang menawarkan solusi backend yang kuat. 
Anda kemudian akan mendefinisikan skema data Anda—baik secara manual atau dengan bantuan AI Agent Back4app—agar sesuai dengan kebutuhan aplikasi Anda.
Selanjutnya, Anda akan mengelola backend Anda melalui Aplikasi Admin Back4app yang ramah pengguna, memungkinkan Anda untuk melakukan operasi data melalui antarmuka seret dan lepas yang sederhana. 
Akhirnya, Anda akan menghubungkan aplikasi JavaScript Anda ke Back4app, menerapkan otentikasi pengguna yang aman dan fungsionalitas CRUD dasar.
Pada akhir panduan ini, Anda akan membangun aplikasi JavaScript yang siap produksi yang mampu melakukan semua operasi CRUD dasar dengan kontrol akses yang aman.
Poin Kunci untuk Diingat
Kuasi cara mengembangkan aplikasi CRUD berbasis JavaScript dengan backend yang dapat diskalakan.
Pahami cara menyusun backend Anda dan mengintegrasikannya dengan mulus dengan kode JavaScript Anda.
Pelajari cara memanfaatkan Aplikasi Admin Back4app untuk manipulasi data yang mudah dan operasi CRUD.
Jelajahi opsi penyebaran, termasuk kontainerisasi dengan Docker, untuk meluncurkan aplikasi JavaScript Anda.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek yang dikonfigurasi.
Butuh bantuan? Kunjungi Memulai dengan Back4app.
Pengaturan pengembangan JavaScript.
Anda dapat menggunakan Visual Studio Code atau editor lain yang disukai bersama dengan Node.js (versi 14 atau lebih baru).
Pengetahuan dasar tentang JavaScript, kerangka kerja modern, dan REST API.
Rujuk ke dokumentasi JavaScript jika diperlukan.
﻿
Langkah 1 – Menginisialisasi Proyek Anda
Menyiapkan Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” dari dasbor Anda.
Masukkan nama proyek: Basic-CRUD-App-JavaScript dan selesaikan proses pengaturan.
Buat Proyek Baru
﻿
Setelah proyek dibuat, proyek tersebut muncul di dasbor Anda, meletakkan dasar untuk konfigurasi backend Anda.
﻿
Langkah 2 – Membuat Skema Data Anda
Merancang Struktur Data
Untuk aplikasi CRUD kami, kami akan menetapkan dua kelas utama (koleksi) di Back4app. Kelas-kelas ini dan bidang-bidangnya sangat penting untuk menangani operasi CRUD yang diperlukan.
1. The Items Collection
Koleksi ini menyimpan rincian untuk setiap item.
Bidang
Tipe
Rincian
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama item.
deskripsi
String
Ringkasan singkat tentang item tersebut.
dibuatPada
Tanggal
Stempel waktu pembuatan item.
diperbaruiPada
Tanggal
Timestamp pembaruan terbaru.
2. PenggunaUsers Koleksi
Koleksi ini menangani kredensial pengguna dan detail otentikasi.
Bidang
Tipe
Rincian
_id
ObjectId
ID unik yang dihasilkan secara otomatis.
nama pengguna
String
Pengidentifikasi unik untuk pengguna.
email
String
Alamat email unik pengguna.
hashKataSandi
String
Kata sandi yang di-hash untuk otentikasi yang aman.
dibuatPada
Tanggal
Stempel waktu pembuatan akun.
diperbaruiPada
Tanggal
Timestamp pembaruan akun terakhir.
Anda dapat membuat kelas-kelas ini dan bidang-bidangnya langsung di dasbor Back4app.
Buat Kelas Baru
﻿
Anda dapat menambahkan kolom dengan memilih jenis, memberi nama pada field, menetapkan nilai default, dan mengatur opsi wajib.
Buat Kolom
﻿
Menggunakan AI Agent Back4app untuk Generasi Skema
AI Agent Back4app menyederhanakan pembuatan skema dengan menghasilkan model data Anda secara otomatis berdasarkan deskripsi Anda. Fitur ini mempercepat pengaturan proyek dan memastikan skema Anda sesuai dengan kebutuhan CRUD Anda.
Cara Memanfaatkan AI Agent:
Buka AI Agent:
Masuk ke dasbor Back4app Anda dan temukan AI Agent di pengaturan proyek.
Deskripsikan Skema Anda:
Masukkan deskripsi rinci tentang koleksi dan bidang yang dibutuhkan.
Tinjau dan Konfirmasi:
Setelah diproses, AI Agent akan menampilkan skema yang diusulkan. Tinjau dan konfirmasi untuk menerapkannya.
Contoh Deskripsi
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)
﻿
Pendekatan yang dibantu AI ini menghemat waktu dan menjamin model data yang terstruktur dengan baik untuk aplikasi Anda.
﻿
Langkah 3 – Mengaktifkan Aplikasi Admin & Melakukan Operasi CRUD
Ikhtisar Aplikasi Admin
Aplikasi Admin Back4app menawarkan antarmuka tanpa kode untuk manajemen data backend yang efisien. Dengan fitur seret dan lepas yang intuitif, Anda dapat dengan mudah melakukan operasi CRUD seperti menambah, melihat, memodifikasi, dan menghapus catatan.
Mengaktifkan Aplikasi Admin
Pergi ke bagian “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik pada “Aktifkan Aplikasi Admin.”
Konfigurasikan kredensial admin Anda dengan mengatur akun admin awal. Ini juga menetapkan peran seperti B4aAdminUser dan kelas sistem.
Aktifkan Aplikasi Admin
﻿
Setelah diaktifkan, masuk ke Aplikasi Admin untuk mengelola data aplikasi Anda.
Dasbor Aplikasi Admin
﻿
Mengelola Operasi CRUD melalui Aplikasi Admin
Di dalam Aplikasi Admin, Anda dapat:
Sisipkan Rekaman: Gunakan opsi “Tambahkan Rekaman” untuk membuat entri baru dalam koleksi seperti Item.
Lihat dan Edit Rekaman: Klik pada rekaman mana pun untuk melihat detail atau mengubah bidang.
Hapus Rekaman: Hapus rekaman yang tidak lagi diperlukan.
Antarmuka sederhana ini mempermudah manajemen data dan meningkatkan kegunaan secara keseluruhan.
﻿
Langkah 4 – Menghubungkan Aplikasi JavaScript Anda dengan Back4app
Dengan backend yang sudah diatur, langkah selanjutnya adalah mengintegrasikan aplikasi JavaScript Anda dengan Back4app.
Opsi A: Menggunakan Parse JavaScript SDK
Sertakan Parse SDK:
Jika Anda menggunakan npm, instal SDK dengan menjalankan:
Bash
npm install parse
npm install parse
﻿
Inisialisasi Parse di Aplikasi Anda:
Buat file inisialisasi (misalnya, parseConfig.js):
JS
// parseConfig.js
import Parse from 'parse';
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';

// parseConfig.js
import Parse from 'parse';
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';
﻿
﻿
Text

3. **Implement CRUD Functions:**  
For example, create a module to handle item operations:

```javascript
// itemsService.js
import Parse from 'parse';

export const getItems = async () => {
const query = new Parse.Query("Items");
try {
 const results = await query.find();
 return results;
} catch (error) {
 console.error("Error retrieving items:", error);
 return [];
}
};

export const createItem = async (title, description) => {
const Item = Parse.Object.extend("Items");
const item = new Item();
item.set("title", title);
item.set("description", description);
try {
 await item.save();
 console.log("Item created successfully.");
} catch (error) {
 console.error("Error creating item:", error);
}
};

export const updateItem = async (objectId, newTitle, newDescription) => {
const query = new Parse.Query("Items");
try {
 const item = await query.get(objectId);
 item.set("title", newTitle);
 item.set("description", newDescription);
 await item.save();
 console.log("Item updated successfully.");
} catch (error) {
 console.error("Error updating item:", error);
}
};

export const deleteItem = async (objectId) => {
const query = new Parse.Query("Items");
try {
 const item = await query.get(objectId);
 await item.destroy();
 console.log("Item deleted successfully.");
} catch (error) {
 console.error("Error deleting item:", error);
}
};

3. **Implement CRUD Functions:**  
For example, create a module to handle item operations:

```javascript
// itemsService.js
import Parse from 'parse';

export const getItems = async () => {
const query = new Parse.Query("Items");
try {
 const results = await query.find();
 return results;
} catch (error) {
 console.error("Error retrieving items:", error);
 return [];
}
};

export const createItem = async (title, description) => {
const Item = Parse.Object.extend("Items");
const item = new Item();
item.set("title", title);
item.set("description", description);
try {
 await item.save();
 console.log("Item created successfully.");
} catch (error) {
 console.error("Error creating item:", error);
}
};

export const updateItem = async (objectId, newTitle, newDescription) => {
const query = new Parse.Query("Items");
try {
 const item = await query.get(objectId);
 item.set("title", newTitle);
 item.set("description", newDescription);
 await item.save();
 console.log("Item updated successfully.");
} catch (error) {
 console.error("Error updating item:", error);
}
};

export const deleteItem = async (objectId) => {
const query = new Parse.Query("Items");
try {
 const item = await query.get(objectId);
 await item.destroy();
 console.log("Item deleted successfully.");
} catch (error) {
 console.error("Error deleting item:", error);
}
};
﻿
Opsi B: Menggunakan REST atau GraphQL
Jika Anda lebih suka tidak menggunakan Parse SDK, Anda dapat berinteraksi dengan Back4app melalui panggilan REST. Misalnya, untuk mengambil item menggunakan REST:
JS
import fetch from 'node-fetch';

export const fetchItemsREST = async () => {
  try {
    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();
    console.log("Items fetched:", data);
  } catch (error) {
    console.error("Error fetching items via REST:", error);
  }
};
import fetch from 'node-fetch';

export const fetchItemsREST = async () => {
  try {
    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();
    console.log("Items fetched:", data);
  } catch (error) {
    console.error("Error fetching items via REST:", error);
  }
};
﻿
Integrasikan panggilan API ini dalam modul JavaScript Anda sesuai kebutuhan.
﻿
Langkah 5 – Melindungi Backend Anda
Mengonfigurasi Kontrol Akses
Pastikan data Anda aman dengan mengatur Daftar Kontrol Akses (ACL). Misalnya, untuk membuat item yang hanya dapat diakses oleh penciptanya:
JS
import Parse from 'parse';

export const createPrivateItem = async (title, description, user) => {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  const acl = new Parse.ACL();
  acl.setReadAccess(user, true);
  acl.setWriteAccess(user, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log("Private item created successfully.");
  } catch (error) {
    console.error("Error creating private item:", error);
  }
};
import Parse from 'parse';

export const createPrivateItem = async (title, description, user) => {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  const acl = new Parse.ACL();
  acl.setReadAccess(user, true);
  acl.setWriteAccess(user, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log("Private item created successfully.");
  } catch (error) {
    console.error("Error creating private item:", error);
  }
};
﻿
Menyesuaikan Izin Tingkat Kelas (CLP)
Atur aturan akses default untuk koleksi Anda melalui dasbor Back4app, memastikan bahwa hanya pengguna yang terautentikasi yang dapat mengakses data sensitif.
﻿
Langkah 6 – Menerapkan Autentikasi Pengguna
Mengatur Akun Pengguna
Back4app menggunakan kelas Pengguna Parse bawaan untuk menangani autentikasi. Dalam aplikasi JavaScript Anda, kelola pendaftaran dan login pengguna sebagai berikut:
JS
import Parse from 'parse';

export const signUpUser = async (username, password, email) => {
  const user = new Parse.User();
  user.set("username", username);
  user.set("password", password);
  user.set("email", email);

  try {
    await user.signUp();
    console.log("User registered successfully!");
  } catch (error) {
    console.error("Error during sign up:", error);
  }
};

export const logInUser = async (username, password) => {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("Logged in as:", user.get("username"));
  } catch (error) {
    console.error("Login failed:", error);
  }
};
import Parse from 'parse';

export const signUpUser = async (username, password, email) => {
  const user = new Parse.User();
  user.set("username", username);
  user.set("password", password);
  user.set("email", email);

  try {
    await user.signUp();
    console.log("User registered successfully!");
  } catch (error) {
    console.error("Error during sign up:", error);
  }
};

export const logInUser = async (username, password) => {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("Logged in as:", user.get("username"));
  } catch (error) {
    console.error("Login failed:", error);
  }
};
﻿
﻿
Metode ini dapat diperluas untuk manajemen sesi, pemulihan kata sandi, dan lainnya.
﻿
Langkah 7 – Menerapkan Aplikasi JavaScript Anda
Back4app menyederhanakan penerapan. Anda dapat menerapkan aplikasi JavaScript Anda menggunakan metode seperti kontainerisasi Docker.
7.1 Membangun Aplikasi Anda
Kemas Aplikasi Anda:
Gunakan alat build Anda (seperti webpack atau bundler serupa) untuk mengompilasi kode Anda.
Verifikasi Build:
Pastikan bahwa file yang dikemas Anda berisi semua modul dan aset yang diperlukan.
﻿
7.2 Mengorganisir Struktur Proyek Anda
Struktur proyek JavaScript yang khas mungkin terlihat seperti:
Text
Basic-CRUD-App-JavaScript/
|-- src/
|   |-- index.js
|   |-- parseConfig.js
|   |-- services/
|       |-- itemsService.js
|       |-- authService.js
|-- public/
|   |-- index.html
|-- package.json
|-- README.md
Basic-CRUD-App-JavaScript/
|-- src/
|   |-- index.js
|   |-- parseConfig.js
|   |-- services/
|       |-- itemsService.js
|       |-- authService.js
|-- public/
|   |-- index.html
|-- package.json
|-- README.md
﻿
Contoh: parseConfig.js
JS
// parseConfig.js
import Parse from 'parse';

Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';
// parseConfig.js
import Parse from 'parse';

Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';
﻿
7.3 Menggunakan Docker untuk Aplikasi JavaScript Anda
Jika Anda memilih kontainerisasi, sertakan sebuah Dockerfile di root proyek Anda:
Dockerfile
# Use an official Node.js runtime as the base image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /app

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

# Copy the rest of the application code
COPY . .

# Expose the application port (adjust if necessary)
EXPOSE 3000

# Define the command to run your application
CMD ["npm", "start"]
# Use an official Node.js runtime as the base image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /app

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

# Copy the rest of the application code
COPY . .

# Expose the application port (adjust if necessary)
EXPOSE 3000

# Define the command to run your application
CMD ["npm", "start"]
﻿
7.4 Mengdeploy melalui Back4app Web Deployment
Hubungkan Repositori GitHub Anda:
Pastikan proyek JavaScript Anda dihosting di GitHub.
Konfigurasi Pengaturan Deployment:
Di dasbor Back4app, gunakan opsi Web Deployment untuk menghubungkan repositori Anda (misalnya, Basic-CRUD-App-JavaScript) dan pilih cabang yang diinginkan.
Atur Perintah Build dan Output:
Tentukan perintah build Anda (seperti npm run build) dan direktori output.
Deploy:
Tekan Deploy dan lihat log sampai aplikasi Anda aktif.
﻿
Langkah 8 – Pemikiran Akhir dan Peningkatan di Masa Depan
Selamat! Anda telah berhasil mengembangkan aplikasi CRUD berbasis JavaScript yang terintegrasi dengan Back4app. 
Anda telah menyiapkan proyek yang disebut Basic-CRUD-App-JavaScript, menyusun koleksi Items dan Users Anda, dan mengelola backend Anda menggunakan Aplikasi Admin Back4app. 
Selain itu, Anda menghubungkan aplikasi JavaScript Anda melalui Parse SDK (atau REST API) dan menerapkan langkah-langkah keamanan yang kuat.
Apa yang Harus Dieksplorasi Selanjutnya:
Tingkatkan Fungsionalitas:
Pertimbangkan untuk menambahkan fitur seperti filter pencarian, tampilan detail, atau pembaruan data secara real-time.
Perluas Fitur Backend:
Teliti fungsi cloud, integrasi API pihak ketiga, atau penerapan kontrol akses berbasis peran yang lebih canggih.
Perdalam Keahlian Anda:
Kunjungi dokumentasi Back4app dan jelajahi tutorial tambahan untuk lebih mengoptimalkan aplikasi Anda.
Selamat coding, dan nikmati membangun aplikasi CRUD JavaScript Anda yang canggih!
Bidang	Tipe	Rincian
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama item.
deskripsi	String	Ringkasan singkat tentang item tersebut.
dibuatPada	Tanggal	Stempel waktu pembuatan item.
diperbaruiPada	Tanggal	Timestamp pembaruan terbaru.
Bidang	Tipe	Rincian
_id	ObjectId	ID unik yang dihasilkan secara otomatis.
nama pengguna	String	Pengidentifikasi unik untuk pengguna.
email	String	Alamat email unik pengguna.
hashKataSandi	String	Kata sandi yang di-hash untuk otentikasi yang aman.
dibuatPada	Tanggal	Stempel waktu pembuatan akun.
diperbaruiPada	Tanggal	Timestamp pembaruan akun terakhir.
Diperbarui 17 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Mengembangkan Aplikasi CRUD dengan Vue.js?
BERIKUTNYA
Cara Membangun Aplikasi CRUD dengan Python?