Quickstarters
Cara Membangun Aplikasi CRUD Dasar dengan Solid?

34min
Ikhtisar
Dalam panduan ini, Anda akan belajar bagaimana mengembangkan aplikasi CRUD (buat, baca, perbarui, hapus) yang lengkap menggunakan SolidJS.
Kami akan menggunakan Back4app sebagai layanan backend kami, memungkinkan Anda untuk mengelola data dengan mudah. Panduan ini akan memandu Anda melalui proses membangun proyek Back4app, merancang skema data yang fleksibel, dan mengkodekan operasi CRUD dalam aplikasi SolidJS.
Pertama, Anda akan menyiapkan proyek Back4app yang disebut Basic-CRUD-App-SolidJS. Proyek ini menyediakan lingkungan penyimpanan data yang kuat dan tanpa skema. Anda akan mendefinisikan model data Anda dengan membuat koleksi dan bidang baik secara manual atau dengan bantuan AI Agent Back4app.
Selanjutnya, Anda akan menangani data backend Anda menggunakan Aplikasi Admin Back4app yang ramah pengguna. Akhirnya, Anda akan mengintegrasikan aplikasi SolidJS Anda dengan Back4app melalui Parse JavaScript SDK (atau melalui REST/GraphQL API sesuai kebutuhan) sambil menerapkan kontrol akses yang aman.
Pada akhir tutorial ini, Anda akan memiliki aplikasi SolidJS yang siap produksi yang melakukan fungsi CRUD dasar bersama dengan otentikasi pengguna yang aman dan manajemen data.
Apa yang Akan Anda Pelajari
Cara membuat aplikasi CRUD berbasis SolidJS dengan backend modern tanpa kode.
Praktik terbaik untuk merancang backend yang dapat diskalakan dan menghubungkannya dengan aplikasi SolidJS Anda.
Cara menavigasi Aplikasi Admin Back4app untuk operasi data yang lebih efisien.
Strategi penyebaran, termasuk kontainerisasi Docker, untuk meluncurkan aplikasi SolidJS Anda dengan lancar.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek aktif.
Butuh bantuan? Kunjungi Memulai dengan Back4app.
Lingkungan pengembangan yang disiapkan untuk SolidJS.
Kami merekomendasikan menggunakan Visual Studio Code atau editor pilihan lainnya, bersama dengan Node.js (v14 atau lebih tinggi).
Pengetahuan dasar tentang SolidJS, JavaScript modern, dan RESTful API.
Segarkan pengetahuan Anda dengan dokumentasi SolidJS jika diperlukan.
﻿
Langkah 1 – Inisialisasi Proyek
Mengatur Proyek Back4app Anda
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” di dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-SolidJS dan ikuti petunjuk untuk menyelesaikan pengaturan.
Buat Proyek Baru
﻿
Setelah membuat proyek Anda, itu akan muncul di dasbor Anda, meletakkan dasar untuk backend Anda.
﻿
Langkah 2 – Membuat Skema Data Anda
Merancang Struktur Data
Untuk aplikasi CRUD ini, Anda akan menyiapkan beberapa koleksi dalam proyek Back4app Anda. Di bawah ini adalah contoh koleksi utama dan bidang yang diperlukan.
1. Koleksi: Item
Koleksi ini menyimpan informasi tentang setiap item.
Bidang
Tipe
Tujuan
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama barang.
deskripsi
String
Deskripsi singkat tentang item tersebut.
dibuatPada
Tanggal
Timestamp ketika item ditambahkan.
diperbaruiPada
Tanggal
Stempel waktu untuk pembaruan terakhir.
2. Koleksi: Pengguna
Koleksi ini mengelola kredensial pengguna dan data otentikasi.
Bidang
Tipe
Tujuan
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna
String
Pengidentifikasi pengguna yang unik.
email
String
Alamat email yang unik.
hashKataSandi
String
Kata sandi terenkripsi untuk akses yang aman.
dibuatPada
Tanggal
Stempel waktu pembuatan akun.
diperbaruiPada
Tanggal
Stempel waktu untuk pembaruan akun terakhir.
Anda dapat membuat koleksi ini dan menambahkan bidang melalui dasbor Back4app.
Buat Kelas Baru
﻿
Untuk menambahkan bidang baru, pilih tipe data yang sesuai, atur nama bidang, tetapkan nilai default jika diperlukan, dan tandai sebagai wajib jika perlu.
Buat Kolom
﻿
Menggunakan Asisten AI Back4app untuk Pembuatan Skema
Asisten AI Back4app yang terintegrasi dapat secara otomatis membuat skema data Anda berdasarkan instruksi Anda, menghemat waktu dan memastikan konsistensi.
Cara Menggunakan Asisten AI:
Buka Asisten AI:
Akses melalui pengaturan proyek Anda di dasbor Back4app.
Detail Model Data Anda:
Masukkan deskripsi rinci tentang koleksi dan bidang yang diperlukan.
Konfirmasi Pengaturan:
Tinjau skema yang disarankan dan setujui untuk menyelesaikan konfigurasi.
Contoh Prompt
Text
Create two 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 two 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 didukung AI ini menyederhanakan proses pembuatan skema Anda, memastikan model data yang dioptimalkan.
﻿
Langkah 3 – Mengaktifkan Dasbor Admin & Mengelola Operasi Data
Pengantar Dasbor Admin
Dasbor Admin Back4app menyediakan antarmuka tanpa kode untuk manajemen backend yang efisien. Fitur drag-and-drop-nya memudahkan untuk melakukan tugas CRUD seperti menambah, melihat, memperbarui, dan menghapus catatan.
Mengaktifkan Dasbor Admin
Pergi ke menu “More” di dasbor Back4app Anda.
Pilih “Admin App” dan klik “Enable Admin App.”
Atur kredensial admin Anda dengan membuat akun administrator awal. Ini juga akan menetapkan peran yang diperlukan (seperti B4aAdminUser) dan koleksi sistem.
Aktifkan Aplikasi Admin
﻿
Setelah diaktifkan, masuk ke Dasbor Admin untuk mengelola data aplikasi Anda.
Dasbor Aplikasi Admin
﻿
Menangani Operasi CRUD di Dasbor Admin
Di dalam dasbor, Anda dapat:
Tambahkan Rekaman: Gunakan fitur “Tambahkan Rekaman” di koleksi mana pun (misalnya, Item) untuk memasukkan data baru.
Lihat/Edit Rekaman: Klik pada entri untuk memeriksa atau mengubah detailnya.
Hapus Rekaman: Hapus entri yang usang atau tidak diinginkan.
Antarmuka ini menyederhanakan manajemen data, menawarkan pengalaman yang efisien dan intuitif.
﻿
Langkah 4 – Menghubungkan Aplikasi SolidJS Anda dengan Back4app
Dengan backend yang sudah siap, langkah selanjutnya adalah menghubungkan aplikasi SolidJS Anda ke Back4app.
Opsi A: Menggunakan Parse JavaScript SDK
Instal SDK JavaScript Parse:
Jalankan perintah berikut di direktori proyek Anda:
Bash
npm install parse
npm install parse
﻿
Konfigurasi Parse di Aplikasi Anda:
Buat file konfigurasi (misalnya, parseConfig.js):
JS
// parseConfig.js
import Parse from 'parse';
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// parseConfig.js
import Parse from 'parse';
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
﻿
Text

3. **Implement CRUD Operations in SolidJS:**  
Here’s an example SolidJS service for managing items:

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

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

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

export const updateItem = async (objectId, newTitle, newDescription) => {
const Items = Parse.Object.extend("Items");
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 Items = Parse.Object.extend("Items");
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 Operations in SolidJS:**  
Here’s an example SolidJS service for managing items:

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

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

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

export const updateItem = async (objectId, newTitle, newDescription) => {
const Items = Parse.Object.extend("Items");
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 Items = Parse.Object.extend("Items");
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: Memanfaatkan REST atau GraphQL APIs
Jika Anda lebih suka tidak menggunakan Parse SDK, Anda dapat melakukan operasi CRUD melalui REST. Misalnya, berikut adalah cara untuk mengambil item menggunakan REST API:
JS
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();
    return data.results;
  } catch (error) {
    console.error("Error fetching items via REST:", error);
  }
};
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();
    return data.results;
  } catch (error) {
    console.error("Error fetching items via REST:", error);
  }
};
﻿
Integrasikan panggilan API ini ke dalam komponen SolidJS Anda sesuai kebutuhan.
﻿
Langkah 5 – Meningkatkan Keamanan Backend
Mengonfigurasi Daftar Kontrol Akses (ACL)
Lindungi data Anda dengan mengatur ACL untuk setiap objek. Misalnya, untuk membatasi item sehingga hanya pemiliknya yang dapat mengaksesnya:
JS
import Parse from './parseConfig';

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

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

  try {
    await item.save();
    console.log("Private item added.");
  } catch (error) {
    console.error("Error saving private item:", error);
  }
};
import Parse from './parseConfig';

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

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

  try {
    await item.save();
    console.log("Private item added.");
  } catch (error) {
    console.error("Error saving private item:", error);
  }
};
﻿
Mengatur Izin Tingkat Kelas (CLP)
Konfigurasikan CLP di dasbor Back4app Anda untuk memberlakukan pembatasan akses default, memastikan hanya pengguna yang berwenang yang dapat berinteraksi dengan koleksi tertentu.
﻿
Langkah 6 – Menerapkan Autentikasi Pengguna
Mengelola Akun Pengguna
Back4app menggunakan koleksi Pengguna Parse bawaan untuk autentikasi. Dalam aplikasi SolidJS Anda, tangani pendaftaran dan login pengguna sebagai berikut:
JS
import Parse from './parseConfig';

export const registerUser = 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("Registration error:", 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 error:", error);
  }
};
import Parse from './parseConfig';

export const registerUser = 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("Registration error:", 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 error:", error);
  }
};
﻿
Strategi serupa dapat diterapkan untuk manajemen sesi, pengaturan ulang kata sandi, dan fitur otentikasi lainnya.
﻿
Langkah 7 – Menerapkan Aplikasi SolidJS Anda
Back4app menyederhanakan proses penerapan. Anda dapat menerapkan aplikasi SolidJS Anda melalui berbagai metode, termasuk Docker.
7.1 Mempersiapkan Aplikasi Anda
Bangun Aplikasi Anda:
Gunakan manajer paket Anda untuk mengompilasi aplikasi SolidJS Anda. Misalnya:
Bash
npm run build
npm run build
﻿
Periksa Output Build:
Pastikan folder build berisi semua file yang diperlukan.
﻿
7.2 Mengorganisir Struktur Proyek Anda
Struktur proyek yang khas mungkin terlihat seperti:
Text
Basic-CRUD-App-SolidJS/
|-- public/
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- App.jsx
|   |-- services/
|   |   |-- parseConfig.js
|   |   |-- itemsService.js
|   |   |-- authService.js
|   |-- index.jsx
|-- package.json
|-- README.md
Basic-CRUD-App-SolidJS/
|-- public/
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- App.jsx
|   |-- services/
|   |   |-- parseConfig.js
|   |   |-- itemsService.js
|   |   |-- authService.js
|   |-- index.jsx
|-- package.json
|-- README.md
﻿
7.3 Menggunakan Docker untuk Aplikasi Anda
Jika Anda ingin mengemas aplikasi Anda, buatlah sebuah Dockerfile di root proyek:
Dockerfile
# Use a lightweight Node image
FROM node:16-alpine

# Set the working directory
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 application
RUN npm run build

# Expose the port (adjust if needed)
EXPOSE 3000

# Serve the built application
CMD ["npx", "serve", "build"]
# Use a lightweight Node image
FROM node:16-alpine

# Set the working directory
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 application
RUN npm run build

# Expose the port (adjust if needed)
EXPOSE 3000

# Serve the built application
CMD ["npx", "serve", "build"]
﻿
7.4 Penyebaran dengan Back4app Web Deployment
Sambungkan Repositori Git Anda:
Pastikan proyek SolidJS Anda dihosting di GitHub.
Konfigurasi Penyebaran:
Di dasbor Back4app Anda, pilih Web Deployment, tautkan repositori Anda (misalnya, Basic-CRUD-App-SolidJS), dan pilih cabang yang sesuai.
Atur Perintah Build:
Tentukan perintah build (misalnya, npm run build) dan tentukan direktori output.
Sebarkan Aplikasi Anda:
Klik Sebarkan dan pantau log hingga aplikasi Anda aktif.
﻿
Langkah 8 – Pemikiran Akhir dan Peningkatan di Masa Depan
Kerja bagus! Anda telah berhasil membuat aplikasi CRUD SolidJS yang terintegrasi dengan Back4app. 
Anda mengatur proyek bernama Basic-CRUD-App-SolidJS, mendefinisikan koleksi Items dan Users Anda, dan mengelola data melalui Dasbor Admin Back4app. 
Selain itu, Anda menghubungkan aplikasi SolidJS Anda menggunakan Parse JavaScript SDK (atau REST/GraphQL) dan menerapkan langkah-langkah keamanan yang solid.
Langkah Selanjutnya:
Kembangkan Aplikasi:
Tambahkan fitur canggih seperti filter pencarian, tampilan item yang lebih detail, atau pembaruan data secara real-time.
Tingkatkan Backend:
Eksperimen dengan fungsi cloud, integrasi API pihak ketiga, atau manajemen akses berbasis peran.
Pelajari Lebih Lanjut:
Selami dokumentasi Back4app dan tutorial SolidJS tambahan untuk lebih menyempurnakan aplikasi Anda.
Selamat coding dan semoga sukses dengan proyek CRUD SolidJS Anda!
Bidang	Tipe	Tujuan
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama barang.
deskripsi	String	Deskripsi singkat tentang item tersebut.
dibuatPada	Tanggal	Timestamp ketika item ditambahkan.
diperbaruiPada	Tanggal	Stempel waktu untuk pembaruan terakhir.
Bidang	Tipe	Tujuan
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna	String	Pengidentifikasi pengguna yang unik.
email	String	Alamat email yang unik.
hashKataSandi	String	Kata sandi terenkripsi untuk akses yang aman.
dibuatPada	Tanggal	Stempel waktu pembuatan akun.
diperbaruiPada	Tanggal	Stempel waktu untuk pembaruan akun terakhir.
Diperbarui 19 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membuat Aplikasi CRUD dengan Ember.js?
BERIKUTNYA
Cara Membuat Aplikasi CRUD dengan Remix?