Quickstarters
Cara Mengembangkan Aplikasi CRUD dengan Nuxt.js?

33min
Ikhtisar
Dalam panduan ini, Anda akan menemukan cara membangun aplikasi CRUD (buat, baca, perbarui, hapus) yang sepenuhnya operasional menggunakan Nuxt.js.
Kami akan menggunakan Back4app sebagai layanan backend kami untuk menangani penyimpanan dan manajemen data dengan mudah.
Panduan ini mencakup fungsi CRUD yang penting, merinci cara mengatur proyek Back4app, membuat model data yang serbaguna, dan mengintegrasikan operasi CRUD dengan aplikasi Nuxt.js Anda.
Pertama, Anda akan mengonfigurasi proyek Back4app bernama Basic-CRUD-App-Nuxt yang menawarkan lingkungan penyimpanan data NoSQL yang kuat.
Anda akan mendefinisikan struktur data Anda dengan menetapkan kelas dan bidang baik secara manual atau melalui AI Agent cerdas Back4app.
Selanjutnya, Anda akan mengelola backend Anda menggunakan Aplikasi Admin Back4app—antarmuka yang ramah pengguna, seret dan lepas untuk operasi data yang efisien.
Akhirnya, Anda akan menghubungkan aplikasi Nuxt.js Anda ke Back4app menggunakan panggilan REST API untuk melakukan operasi CRUD yang aman.
Pada akhir panduan ini, Anda akan telah membuat aplikasi Nuxt.js yang siap produksi yang mampu menangani operasi CRUD dasar bersama dengan otentikasi pengguna yang aman dan manajemen data.
Poin Utama
Pelajari cara membangun aplikasi CRUD Nuxt.js dengan backend berkinerja tinggi.
Pahami proses merancang backend yang dapat diskalakan dan menghubungkannya ke frontend Nuxt.js Anda.
Jelajahi bagaimana Aplikasi Admin Back4app menyederhanakan operasi data seperti buat, baca, perbarui, dan hapus.
Dapatkan wawasan tentang metode penyebaran termasuk kontainerisasi Docker untuk peluncuran produksi yang mulus.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek yang baru dikonfigurasi.
Jika Anda memerlukan bantuan, lihat Memulai dengan Back4app.
Lingkungan pengembangan untuk Nuxt.js.
Pastikan Anda telah menginstal Node.js dan mengatur IDE atau editor teks pilihan Anda.
Pengetahuan dasar tentang Nuxt.js, Vue.js, dan REST API.
Konsultasikan dokumentasi Nuxt.js jika Anda memerlukan penyegaran.
﻿
Langkah 1 – Inisialisasi Proyek
Menyiapkan Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Pilih opsi “Aplikasi Baru” dari dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-Nuxt dan ikuti instruksi pengaturan.
Buat Proyek Baru
﻿
Setelah proyek dibuat, itu akan muncul di dasbor Anda, siap untuk konfigurasi backend lebih lanjut.
﻿
Langkah 2 – Membuat Model Data
Membangun Struktur Data Anda
Untuk aplikasi CRUD ini, Anda akan menyiapkan beberapa kelas (atau koleksi) dalam proyek Back4app Anda. Di bawah ini adalah contoh kelas kunci dan bidang yang diperlukan untuk fungsionalitas CRUD dasar.
1. Koleksi Item
Koleksi ini menyimpan rincian tentang setiap item.
Bidang
Tipe
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan sistem.
judul
String
Nama barang.
deskripsi
String
Deskripsi singkat tentang item tersebut.
dibuatPada
Tanggal
Stempel waktu menandai pembuatan item.
diperbaruiPada
Tanggal
Stempel waktu menandai pembaruan terakhir.
2. Koleksi Pengguna
Koleksi ini mengelola rincian pengguna dan informasi otentikasi.
Bidang
Tipe
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 pembuatan akun.
diperbaruiPada
Tanggal
Stempel waktu untuk modifikasi akun.
Anda dapat mendefinisikan koleksi dan bidang ini secara manual di dasbor Back4app.
Buat Kelas Baru
﻿
Anda menambahkan field dengan memilih tipe data yang sesuai, memberi nama field, secara opsional mengatur nilai default, dan menentukan apakah field tersebut wajib.
Buat Kolom
﻿
Memanfaatkan Agen AI Back4app untuk Generasi Skema
Agen AI Back4app adalah alat yang berguna di dalam dasbor Anda yang dapat secara otomatis membangun skema Anda dari deskripsi yang diberikan. Fitur ini mempercepat proses pengaturan dan memastikan model data Anda dioptimalkan untuk operasi CRUD.
Cara Menggunakan Agen AI:
Buka AI Agent:
Akses dari pengaturan proyek Anda di dasbor Back4app.
Deskripsikan Skema Anda:
Berikan prompt yang rinci yang menjelaskan kelas dan bidang yang Anda butuhkan.
Tinjau dan Konfirmasi:
AI Agent akan menghasilkan proposal skema. Tinjau dan konfirmasi untuk menerapkan perubahan.
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)
﻿
Fitur cerdas ini menghemat waktu dan memastikan struktur data Anda diatur secara konsisten untuk operasi CRUD yang optimal.
﻿
Langkah 3 – Mengaktifkan Aplikasi Admin & Menangani Operasi CRUD
Ikhtisar Aplikasi Admin
Aplikasi Admin Back4app menyediakan antarmuka tanpa kode untuk manajemen data backend yang mulus. Fitur drag-and-drop-nya memudahkan untuk melakukan operasi CRUD seperti menambah, mengedit, melihat, dan menghapus catatan.
Mengaktifkan Aplikasi Admin
Pergi ke menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik pada “Aktifkan Aplikasi Admin.”
Siapkan akun admin Anda dengan membuat kredensial awal. Langkah ini juga akan membuat peran sistem seperti B4aAdminUser dan mengonfigurasi koleksi sistem yang penting.
Aktifkan Aplikasi Admin
﻿
Setelah diaktifkan, masuk ke Aplikasi Admin untuk mengelola data aplikasi Anda dengan mudah.
Dasbor Aplikasi Admin
﻿
Menggunakan Aplikasi Admin untuk Operasi CRUD
Di dalam Aplikasi Admin, Anda dapat:
Menambahkan Entri Baru: Gunakan tombol “Tambahkan Rekaman” dalam koleksi (seperti Item) untuk memasukkan data.
Melihat dan Mengedit: Klik pada rekaman mana pun untuk memeriksa detailnya atau melakukan modifikasi.
Menghapus Entri: Hapus rekaman yang tidak lagi diperlukan.
Antarmuka intuitif ini mempermudah pengelolaan data untuk aplikasi Anda.
﻿
Langkah 4 – Menghubungkan Aplikasi Nuxt.js Anda ke Back4app
Dengan backend Anda sudah siap, tugas selanjutnya adalah mengintegrasikan aplikasi Nuxt.js Anda dengan Back4app.
Menggunakan Panggilan REST API
Karena Parse SDK tidak umum digunakan dengan Nuxt.js, Anda akan melakukan operasi CRUD menggunakan panggilan REST API.
Mengatur Permintaan API di Nuxt.js
Instal Axios:
Jika belum terinstal, tambahkan Axios ke proyek Nuxt.js Anda:
Bash
npm install @nuxtjs/axios
npm install @nuxtjs/axios
﻿
Konfigurasi Modul Axios:
Di dalam nuxt.config.js, sertakan modul Axios dan atur konfigurasi dasar:
Text
export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'https://parseapi.back4app.com'
  }
}
export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'https://parseapi.back4app.com'
  }
}
﻿
Melakukan Operasi CRUD:
Buat layanan (misalnya, services/items.js) untuk menangani panggilan API. Di bawah ini adalah contoh bagaimana Anda dapat mengambil, membuat, memperbarui, dan menghapus item:
Text
// services/items.js
export default {
  async fetchItems() {
    try {
      const response = await this.$axios.$get('/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.results;
    } catch (error) {
      console.error('Error fetching items:', error);
      return [];
    }
  },

  async addItem(title, description) {
    try {
      const response = await this.$axios.$post('/classes/Items', {
        title,
        description
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error creating item:', error);
    }
  },

  async updateItem(objectId, newTitle, newDescription) {
    try {
      const response = await this.$axios.$put(`/classes/Items/${objectId}`, {
        title: newTitle,
        description: newDescription
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error updating item:', error);
    }
  },

  async removeItem(objectId) {
    try {
      const response = await this.$axios.$delete(`/classes/Items/${objectId}`, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error deleting item:', error);
    }
  }
}
// services/items.js
export default {
  async fetchItems() {
    try {
      const response = await this.$axios.$get('/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.results;
    } catch (error) {
      console.error('Error fetching items:', error);
      return [];
    }
  },

  async addItem(title, description) {
    try {
      const response = await this.$axios.$post('/classes/Items', {
        title,
        description
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error creating item:', error);
    }
  },

  async updateItem(objectId, newTitle, newDescription) {
    try {
      const response = await this.$axios.$put(`/classes/Items/${objectId}`, {
        title: newTitle,
        description: newDescription
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error updating item:', error);
    }
  },

  async removeItem(objectId) {
    try {
      const response = await this.$axios.$delete(`/classes/Items/${objectId}`, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error deleting item:', error);
    }
  }
}
﻿
Integrasikan metode API ini dalam halaman atau komponen Nuxt.js Anda untuk mengaktifkan fungsionalitas CRUD penuh.
﻿
Langkah 5 – Meningkatkan Keamanan
Mengimplementasikan Daftar Kontrol Akses (ACL)
Amankan data Anda dengan mengatur ACL untuk objek individu. Misalnya, Anda dapat membatasi suatu item sehingga hanya penciptanya yang dapat melihat atau memodifikasinya:
Text
async function createPrivateItem(title, description, userId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [userId]: { "read": true, "write": true }
    };

    const response = await this.$axios.$post('/classes/Items', {
      title,
      description,
      ACL: acl
    }, {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    console.log('Private item created:', response);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}
async function createPrivateItem(title, description, userId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [userId]: { "read": true, "write": true }
    };

    const response = await this.$axios.$post('/classes/Items', {
      title,
      description,
      ACL: acl
    }, {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    console.log('Private item created:', response);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}
﻿
Mengatur Izin Tingkat Kelas (CLP)
Di dasbor Back4app Anda, konfigurasikan CLP untuk menegakkan kebijakan akses default, memastikan bahwa hanya pengguna yang terautentikasi yang dapat berinteraksi dengan koleksi tertentu.
﻿
Langkah 6 – Mengimplementasikan Autentikasi Pengguna
Mengatur Pendaftaran dan Masuk Pengguna
Back4app memanfaatkan koleksi Pengguna bawaan untuk mengelola autentikasi. Dalam aplikasi Nuxt.js Anda, implementasikan pendaftaran dan masuk menggunakan panggilan REST API.
Contoh: Pendaftaran dan Masuk Pengguna
Text
export default {
  async registerUser(username, password, email) {
    try {
      const response = await this.$axios.$post('/users', {
        username,
        password,
        email
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User registered:', response);
      return response;
    } catch (error) {
      console.error('Registration error:', error);
    }
  },

  async loginUser(username, password) {
    try {
      const response = await this.$axios.$get('/login', {
        params: { username, password },
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User logged in:', response);
      return response;
    } catch (error) {
      console.error('Login error:', error);
    }
  }
}
export default {
  async registerUser(username, password, email) {
    try {
      const response = await this.$axios.$post('/users', {
        username,
        password,
        email
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User registered:', response);
      return response;
    } catch (error) {
      console.error('Registration error:', error);
    }
  },

  async loginUser(username, password) {
    try {
      const response = await this.$axios.$get('/login', {
        params: { username, password },
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User logged in:', response);
      return response;
    } catch (error) {
      console.error('Login error:', error);
    }
  }
}
﻿
Pendekatan ini mendukung manajemen sesi, pemulihan kata sandi, dan fitur otentikasi tambahan.
﻿
Langkah 7 – Menerapkan Aplikasi Nuxt.js Anda
Back4app menyederhanakan proses penerapan. Anda dapat menerapkan aplikasi Nuxt.js Anda menggunakan berbagai metode, termasuk kontainerisasi Docker.
7.1 Membangun Proyek Nuxt.js Anda
Bangun Aplikasi:
Jalankan perintah berikut untuk menghasilkan build produksi:
Bash
npm run build
npm run build
﻿
Mulai Aplikasi:
Uji build produksi Anda secara lokal menggunakan:
Bash
npm run start
npm run start
﻿
7.2 Mengorganisir Struktur Proyek Anda
Struktur proyek Nuxt.js yang khas mungkin terlihat seperti:
Text
Basic-CRUD-App-Nuxt/
|-- assets/
|-- components/
|-- layouts/
|-- pages/
|-- plugins/
|-- services/
|   |-- items.js
|   |-- auth.js
|-- static/
|-- nuxt.config.js
|-- package.json
|-- Dockerfile
Basic-CRUD-App-Nuxt/
|-- assets/
|-- components/
|-- layouts/
|-- pages/
|-- plugins/
|-- services/
|   |-- items.js
|   |-- auth.js
|-- static/
|-- nuxt.config.js
|-- package.json
|-- Dockerfile
﻿
7.3 Menggunakan Docker untuk Aplikasi Nuxt.js Anda
Jika Anda lebih suka kontainerisasi, sertakan sebuah Dockerfile di root proyek Anda:
Dockerfile
# Use a Node.js image as the base
FROM node:16-alpine

# Set working directory
WORKDIR /app

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

# Copy the rest of the application
COPY . .

# Build the application
RUN npm run build

# Expose the port (adjust if necessary)
EXPOSE 3000

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

# Set working directory
WORKDIR /app

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

# Copy the rest of the application
COPY . .

# Build the application
RUN npm run build

# Expose the port (adjust if necessary)
EXPOSE 3000

# Start the application
CMD ["npm", "run", "start"]
﻿
7.4 Mengdeploy melalui Back4app Web Deployment
Hubungkan Repositori Anda:
Pastikan proyek Nuxt.js Anda dihosting di GitHub.
Konfigurasi Deployment:
Di dasbor Back4app Anda, navigasikan ke bagian Web Deployment, tautkan repositori Anda (misalnya, Basic-CRUD-App-Nuxt), dan pilih cabang yang sesuai.
Atur Instruksi Build:
Tentukan perintah build (seperti npm run build) dan tentukan direktori output.
Deploy:
Klik Deploy dan ikuti log sampai aplikasi Anda aktif.
﻿
Langkah 8 – Menyelesaikan dan Langkah Selanjutnya
Kerja bagus! Anda sekarang telah membangun aplikasi CRUD Nuxt.js yang terintegrasi dengan Back4app.
Anda membuat proyek bernama Basic-CRUD-App-Nuxt, merancang koleksi untuk Item dan Pengguna, dan mengelola data Anda melalui Aplikasi Admin Back4app.
Selain itu, Anda menghubungkan aplikasi Nuxt.js Anda melalui panggilan REST API dan menerapkan langkah-langkah keamanan yang kuat.
Apa Selanjutnya:
Ekspansi Fitur:
Pertimbangkan untuk menambahkan fungsionalitas seperti filter pencarian lanjutan, tampilan item yang lebih detail, atau pembaruan waktu nyata.
Peningkatan Backend:
Periksa fungsi cloud, integrasi dengan API eksternal, atau izin berbasis peran.
Pembelajaran Lebih Lanjut:
Jelajahi dokumentasi Back4app dan panduan tambahan untuk mengoptimalkan aplikasi Anda lebih lanjut.
Selamat coding dan nikmati membangun dengan Nuxt.js dan Back4app!
Bidang	Tipe	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan sistem.
judul	String	Nama barang.
deskripsi	String	Deskripsi singkat tentang item tersebut.
dibuatPada	Tanggal	Stempel waktu menandai pembuatan item.
diperbaruiPada	Tanggal	Stempel waktu menandai pembaruan terakhir.
Bidang	Tipe	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 pembuatan akun.
diperbaruiPada	Tanggal	Stempel waktu untuk modifikasi akun.
Diperbarui 19 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membuat Aplikasi CRUD dengan Gatsby?
BERIKUTNYA
Judul Dokumen Baru Uji Alysson 2