Quickstarters
Cara Membuat Aplikasi CRUD dengan Svelte?

32min
Ikhtisar
Dalam panduan ini, Anda akan belajar bagaimana membangun aplikasi CRUD (buat, baca, perbarui, hapus) lengkap menggunakan Svelte.
Kami akan memanfaatkan Back4app sebagai platform backend kami, yang menawarkan backend low-code yang kuat untuk mengelola data aplikasi Anda.
Panduan ini menjelaskan cara mengatur proyek Back4app, merancang skema data yang fleksibel, dan menerapkan operasi CRUD dalam aplikasi Svelte.
Pertama, Anda akan membuat proyek Back4app berjudul Basic-CRUD-App-Svelte. Proyek ini membentuk dasar pengaturan backend Anda, di mana Anda akan mendefinisikan skema data Anda baik secara manual atau dengan bantuan AI Agent terintegrasi dari Back4app.
Selanjutnya, Anda akan menjelajahi Aplikasi Admin Back4app—antarmuka yang ramah pengguna untuk manajemen data—yang memungkinkan Anda untuk dengan mudah melakukan operasi CRUD.
Akhirnya, Anda akan menghubungkan aplikasi Svelte Anda ke Back4app, memanfaatkan baik Parse JavaScript SDK atau panggilan API REST/GraphQL langsung, sambil memastikan penanganan data yang aman.
Pada akhir tutorial ini, Anda akan memiliki aplikasi Svelte yang sepenuhnya fungsional yang melakukan tugas CRUD dasar bersama dengan otentikasi pengguna yang aman.
Apa yang Akan Anda Pelajari
Cara mengatur aplikasi CRUD berbasis Svelte dengan backend yang fleksibel.
Metode untuk mengorganisir backend Anda dan menghubungkannya ke aplikasi Svelte Anda.
Cara memanfaatkan Aplikasi Admin Back4app untuk operasi data yang mulus.
Strategi untuk menerapkan aplikasi Svelte Anda, termasuk kontainerisasi Docker.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek aktif.
Butuh bantuan? Kunjungi Panduan Memulai Back4app untuk panduan.
Pengaturan pengembangan Svelte.
Anda dapat menggunakan editor kode seperti VSCode dan pastikan Node.js terinstal.
Pemahaman dasar tentang Svelte, JavaScript, dan REST API.
Tinjau dokumentasi Svelte jika diperlukan.
﻿
Langkah 1 – Menyiapkan Proyek Anda
Meluncurkan Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Tekan tombol “Aplikasi Baru” di dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-Svelte dan ikuti instruksi di layar untuk menyelesaikan pengaturan.
Buat Proyek Baru
﻿
Setelah membuat proyek Anda, Anda akan melihatnya di dasbor Anda, yang berfungsi sebagai dasar untuk mengonfigurasi backend Anda.
﻿
Langkah 2 – Membuat Skema Data
Menyusun Data Anda
Untuk aplikasi CRUD ini, Anda perlu mendefinisikan beberapa koleksi di proyek Back4app Anda. Di bawah ini adalah contoh koleksi kunci dan bidang yang diperlukan untuk mendukung operasi CRUD Svelte Anda.
1. Koleksi Item
Koleksi ini menyimpan informasi untuk setiap item.
Bidang
Tipe
Rincian
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama atau judul item.
deskripsi
String
Deskripsi singkat tentang item tersebut.
dibuatPada
Tanggal
Timestamp ketika item dibuat.
diperbaruiPada
Tanggal
Timestamp untuk pembaruan terakhir pada item.
2. Koleksi Pengguna
Koleksi ini mengelola kredensial pengguna dan detail otentikasi.
Bidang
Tipe
Rincian
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna
String
Nama pengguna yang unik untuk setiap pengguna.
email
String
Alamat email pengguna.
hashKataSandi
String
Kata sandi terenkripsi untuk otentikasi.
dibuatPada
Tanggal
Stempel waktu pembuatan akun.
diperbaruiPada
Tanggal
Timestamp untuk pembaruan akun terakhir.
Anda dapat membuat koleksi ini dan mendefinisikan bidang langsung dari dasbor Back4app Anda.
Buat Kelas Baru
﻿
Anda dapat menambahkan bidang dengan memilih jenis yang sesuai, memberi nama pada bidang, mengatur nilai default, dan menandainya sebagai wajib.
Buat Kolom
﻿
Menggunakan Agen AI Back4app untuk Generasi Skema Cepat
Agen AI terintegrasi di Back4app dapat secara otomatis mengatur skema data Anda berdasarkan deskripsi sederhana. Alat ini memperlancar proses pengaturan dan memastikan bahwa skema Anda dioptimalkan untuk operasi CRUD.
Cara Memanfaatkan Agen AI:
Buka AI Agent:
Di pengaturan proyek Anda di dasbor Back4app, temukan AI Agent.
Rincikan Persyaratan Skema Anda:
Berikan prompt yang jelas yang menguraikan koleksi dan bidang yang Anda butuhkan.
Tinjau dan Konfirmasi:
Periksa skema yang diusulkan dan konfirmasi untuk menerapkannya.
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 ini menghemat waktu dan memastikan skema backend Anda selaras dengan kebutuhan aplikasi Anda.
﻿
Langkah 3 – Mengelola Data dengan Aplikasi Admin
Ikhtisar Aplikasi Admin
Aplikasi Admin Back4app menawarkan lingkungan tanpa kode untuk mengelola data backend Anda. Dengan antarmuka seret dan lepas, Anda dapat dengan mudah melakukan operasi seperti menambahkan, mengedit, dan menghapus catatan.
Mengaktifkan Aplikasi Admin
Pergi ke menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan kemudian klik pada “Aktifkan Aplikasi Admin.”
Siapkan akun admin Anda dengan mengikuti petunjuk untuk menetapkan kredensial Anda. Proses ini juga akan mengatur peran (seperti B4aAdminUser) dan konfigurasi sistem lainnya.
Aktifkan Aplikasi Admin
﻿
Setelah diaktifkan, masuk ke Aplikasi Admin untuk mengelola data proyek Anda secara efektif.
Dasbor Aplikasi Admin
﻿
Cara Menggunakan Aplikasi Admin
Masukkan Rekor Baru:
Gunakan fitur “Tambahkan Rekor” dalam koleksi (seperti Item) untuk memperkenalkan data baru.
Periksa atau Edit Rekor:
Klik pada sebuah rekor untuk melihat detailnya atau mengubah bidangnya.
Hapus Rekor:
Hapus entri data yang sudah usang atau tidak diperlukan.
Antarmuka intuitif ini membuat pengelolaan data backend Anda menjadi sederhana dan efisien.
﻿
Langkah 4 – Menghubungkan Aplikasi Svelte Anda ke Back4app
Sekarang setelah backend Anda disiapkan, saatnya menghubungkan aplikasi Svelte Anda ke Back4app.
Opsi A: Menggunakan Parse JavaScript SDK
Instal SDK:
Gunakan npm atau yarn untuk menginstal Parse JavaScript SDK:
Bash
npm install parse
npm install parse
﻿
Inisialisasi Parse di Aplikasi Svelte Anda:
Di file JavaScript utama Anda (misalnya, src/main.js), inisialisasi Parse:
JS
// src/main.js
import Parse from 'parse';

Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';

// Kode inisialisasi aplikasi Svelte Anda mengikuti...
// src/main.js
import Parse from 'parse';

Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';

// Kode inisialisasi aplikasi Svelte Anda mengikuti...
﻿
Implementasikan Fungsi CRUD:
Buat modul (misalnya, src/services/items.js) untuk menangani operasi CRUD:
JS
// src/services/items.js
import Parse from 'parse';

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

export async function addItem(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 berhasil dibuat!");
  } catch (error) {
    console.error("Error creating item:", error);
  }
}

export async function updateItem(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 berhasil diperbarui!");
  } catch (error) {
    console.error("Error updating item:", error);
  }
}

export async function removeItem(objectId) {
  const query = new Parse.Query("Items");
  try {
    const item = await query.get(objectId);
    await item.destroy();
    console.log("Item berhasil dihapus!");
  } catch (error) {
    console.error("Error deleting item:", error);
  }
}
// src/services/items.js
import Parse from 'parse';

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

export async function addItem(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 berhasil dibuat!");
  } catch (error) {
    console.error("Error creating item:", error);
  }
}

export async function updateItem(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 berhasil diperbarui!");
  } catch (error) {
    console.error("Error updating item:", error);
  }
}

export async function removeItem(objectId) {
  const query = new Parse.Query("Items");
  try {
    const item = await query.get(objectId);
    await item.destroy();
    console.log("Item berhasil dihapus!");
  } catch (error) {
    console.error("Error deleting item:", error);
  }
}
﻿
Opsi B: Menggunakan REST/GraphQL API
Jika SDK Parse tidak ideal untuk kasus penggunaan Anda, Anda dapat langsung memanggil endpoint REST atau GraphQL Back4app. Misalnya, untuk mengambil item melalui REST:
JS
export async function getItemsREST() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      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("REST error fetching items:", error);
    return [];
  }
}
export async function getItemsREST() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      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("REST error fetching items:", error);
    return [];
  }
}
﻿
Integrasikan panggilan API ini dalam komponen Svelte Anda sesuai kebutuhan.
﻿
Langkah 5 – Mengamankan Backend Anda
Menggunakan Daftar Kontrol Akses (ACL)
Tingkatkan keamanan data Anda dengan mengatur ACL pada objek Anda. Misalnya, untuk membuat item yang hanya terlihat oleh pemiliknya:
JS
import Parse from 'parse';

export async function createPrivateItem(title, description, owner) {
  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(owner, true);
  acl.setWriteAccess(owner, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

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

export async function createPrivateItem(title, description, owner) {
  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(owner, true);
  acl.setWriteAccess(owner, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log("Private item successfully created!");
  } catch (error) {
    console.error("Error saving private item:", error);
  }
}
﻿
Mengatur Izin Tingkat Kelas (CLP)
Konfigurasikan CLP langsung di dasbor Back4app Anda untuk membatasi akses sehingga hanya pengguna yang terautentikasi yang dapat berinteraksi dengan koleksi tertentu.
﻿
Langkah 6 – Menerapkan Autentikasi Pengguna di Svelte
Mengatur Akun Pengguna
Back4app memanfaatkan koleksi Pengguna bawaan Parse untuk mengelola autentikasi. Di aplikasi Svelte Anda, terapkan fungsi pendaftaran dan login yang mirip dengan contoh di bawah ini:
JS
import Parse from 'parse';

export async function registerUser(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 async function loginUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("User logged in:", user.get("username"));
  } catch (error) {
    console.error("Login failed:", error);
  }
}
import Parse from 'parse';

export async function registerUser(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 async function loginUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("User logged in:", user.get("username"));
  } catch (error) {
    console.error("Login failed:", error);
  }
}
﻿
Pendekatan ini dapat diperluas untuk mengelola sesi, reset kata sandi, dan fitur otentikasi tambahan.
﻿
Langkah 7 – Menerapkan Aplikasi Svelte Anda
Back4app menyederhanakan proses penerapan. Anda dapat menerapkan aplikasi Svelte Anda menggunakan beberapa metode, termasuk kontainerisasi Docker.
7.1 Bangun Aplikasi Svelte Anda
Kompilasi Aplikasi Anda:
Jalankan perintah build Svelte Anda, biasanya:
Bash
npm run build
npm run build
﻿
Tinjau Build:
Pastikan bahwa file yang dihasilkan (biasanya di dalam public atau build folder) mencakup semua aset yang diperlukan.
7.2 Contoh Struktur Proyek
Struktur proyek Svelte yang khas mungkin terlihat seperti:
Text
Basic-CRUD-App-Svelte/
|-- public/
|   |-- build/
|   |-- global.css
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- ItemList.svelte
|   |   |-- ItemForm.svelte
|   |-- services/
|   |   |-- items.js
|   |   |-- auth.js
|   |-- App.svelte
|   |-- main.js
|-- package.json
|-- README.md
Basic-CRUD-App-Svelte/
|-- public/
|   |-- build/
|   |-- global.css
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- ItemList.svelte
|   |   |-- ItemForm.svelte
|   |-- services/
|   |   |-- items.js
|   |   |-- auth.js
|   |-- App.svelte
|   |-- main.js
|-- package.json
|-- README.md
﻿
7.3 Menggunakan Docker untuk Aplikasi Svelte Anda
Jika Anda lebih suka penerapan terkontainer, buat sebuah Dockerfile di root proyek Anda:
Dockerfile
# Use a Node.js image to build the app
FROM node:16-alpine as build

# 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 project files and build the app
COPY . .
RUN npm run build

# Use a lightweight server to serve the built files
FROM nginx:alpine
COPY --from=build /app/public /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use a Node.js image to build the app
FROM node:16-alpine as build

# 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 project files and build the app
COPY . .
RUN npm run build

# Use a lightweight server to serve the built files
FROM nginx:alpine
COPY --from=build /app/public /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.4 Penyebaran melalui Penyebaran Web Back4app
Tautkan Repositori GitHub Anda:
Hosting proyek Svelte Anda di GitHub.
Atur Penyebaran di Back4app:
Di dasbor Back4app, pilih opsi Penyebaran Web , sambungkan repositori Anda (misalnya, Basic-CRUD-App-Svelte), dan pilih cabang target Anda.
Tentukan Pengaturan Build:
Tentukan perintah build Anda (seperti npm run build) dan tunjukkan ke direktori output build.
Terapkan Aplikasi Anda:
Klik Terapkan dan pantau log sampai aplikasi Anda aktif.
﻿
Langkah 8 – Penutup dan Peningkatan Masa Depan
Selamat! Anda telah membangun aplikasi CRUD berbasis Svelte yang terhubung ke Back4app. 
Anda mengatur proyek bernama Basic-CRUD-App-Svelte, mengonfigurasi koleksi untuk Item dan Pengguna, dan mengelola data Anda melalui Aplikasi Admin Back4app. 
Anda kemudian mengintegrasikan frontend Svelte Anda menggunakan Parse JavaScript SDK (atau REST/GraphQL) dan menambahkan langkah-langkah keamanan yang kuat.
Apa Selanjutnya?
Perluas Fungsionalitas:
Tambahkan fitur seperti pencarian lanjutan, tampilan detail, atau pembaruan waktu nyata.
Tingkatkan Logika Backend:
Eksperimen dengan fungsi cloud, integrasi API pihak ketiga, atau kontrol akses berbasis peran.
Perdalam Pembelajaran Anda:
Jelajahi tutorial lebih lanjut dan dokumentasi Back4app untuk mengoptimalkan aplikasi Anda.
Selamat coding dan nikmati membangun aplikasi CRUD Svelte Anda!
Bidang	Tipe	Rincian
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama atau judul item.
deskripsi	String	Deskripsi singkat tentang item tersebut.
dibuatPada	Tanggal	Timestamp ketika item dibuat.
diperbaruiPada	Tanggal	Timestamp untuk pembaruan terakhir pada item.
Bidang	Tipe	Rincian
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna	String	Nama pengguna yang unik untuk setiap pengguna.
email	String	Alamat email pengguna.
hashKataSandi	String	Kata sandi terenkripsi untuk otentikasi.
dibuatPada	Tanggal	Stempel waktu pembuatan akun.
diperbaruiPada	Tanggal	Timestamp untuk pembaruan akun terakhir.
Diperbarui 19 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Judul Dokumen Baru Uji Alysson
BERIKUTNYA
Cara Membuat Aplikasi CRUD dengan jQuery?