Quickstarters
Cara Membuat Aplikasi CRUD dengan Ember.js?

36min
Pendahuluan
Dalam panduan ini, Anda akan belajar bagaimana membangun aplikasi CRUD (buat, baca, perbarui, hapus) sederhana menggunakan Ember.js.
Kami akan mengandalkan Back4app sebagai layanan backend untuk mengelola data Anda dengan mudah. Panduan ini mencakup semua operasi dasar dari sistem CRUD, menunjukkan kepada Anda cara mengatur proyek Back4app, merancang model data dinamis, dan mengintegrasikan operasi CRUD ke dalam aplikasi Ember.js.
Pada awalnya, Anda akan membuat proyek Back4app bernama Basic-CRUD-App-Ember yang menyediakan solusi penyimpanan data non-relasional yang andal untuk aplikasi Anda. Anda akan mendefinisikan struktur data Anda dengan mengatur model dan bidang baik secara manual atau dengan bantuan AI Agent dari Back4app.
Selanjutnya, Anda akan menjelajahi Aplikasi Admin Back4app—antarmuka tanpa kode yang memungkinkan Anda mengelola data dengan interaksi seret dan lepas yang sederhana. Akhirnya, Anda akan mengintegrasikan aplikasi Ember.js Anda dengan Back4app melalui panggilan API, menerapkan kontrol akses yang aman sepanjang jalan.
Pada akhir tutorial ini, Anda akan memiliki aplikasi Ember.js yang siap produksi yang mampu melakukan semua operasi CRUD, termasuk otentikasi pengguna yang aman dan manajemen data yang efektif.
Poin Penting
Membangun aplikasi CRUD berbasis Ember.js yang didukung oleh platform backend yang kuat.
Memahami cara menyusun dan mengintegrasikan backend yang dapat diskalakan dengan front end Ember.js.
Menggunakan Aplikasi Admin Back4app yang intuitif untuk melakukan operasi buat, baca, perbarui, dan hapus dengan mudah.
Belajar tentang strategi penyebaran, termasuk kontainerisasi Docker, untuk pengiriman aplikasi yang mulus.
﻿
Prasyarat
Sebelum memulai, harap konfirmasi Anda memiliki:
Akun Back4app dengan proyek yang baru dibuat.
Butuh bantuan? Kunjungi Memulai dengan Back4app.
Pengaturan pengembangan Ember.js.
Instal Ember CLI dan siapkan lingkungan Anda dengan mengikuti panduan Ember.js.
Pemahaman dasar tentang Ember.js, JavaScript, dan REST API.
Segarkan pengetahuan Anda tentang topik ini jika diperlukan.
﻿
Langkah 1 – Pengaturan Proyek
Memulai Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik pada tombol “Aplikasi Baru” dari dasbor Anda.
Tetapkan nama proyek: Basic-CRUD-App-Ember dan ikuti petunjuk selanjutnya untuk menyelesaikan pengaturan proyek.
Buat Proyek Baru
﻿
Setelah proyek dibuat, itu akan muncul di dasbor Anda dan membentuk dasar untuk konfigurasi backend Anda.
﻿
Langkah 2 – Merancang Model Data
Menyusun Model Data Anda
Untuk aplikasi CRUD ini, Anda akan mendefinisikan beberapa model dalam proyek Back4app Anda. Di bawah ini adalah contoh yang menguraikan model inti dan bidangnya yang diperlukan untuk melakukan operasi CRUD.
1. Model Barang
Model ini menyimpan informasi tentang setiap barang.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama barang.
deskripsi
String
Ringkasan singkat tentang item tersebut.
dibuatPada
Tanggal
Stempel waktu yang menandai kapan item ditambahkan.
diperbaruiPada
Tanggal
Stempel waktu menandai pembaruan terakhir.
2. Model Pengguna
Model ini menangani otentikasi pengguna dan kredensial.
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 pengguna yang terenkripsi.
dibuatPada
Tanggal
Stempel waktu ketika akun dibuat.
diperbaruiPada
Tanggal
Stempel waktu ketika akun diperbarui.
Anda dapat membuat model ini dan mendefinisikan bidangnya langsung di dalam dasbor Back4app.
Buat Kelas Baru
﻿
Anda dapat menambahkan bidang dengan memilih jenis data, memasukkan nama bidang, mengatur nilai default, dan menandai apakah itu wajib.
Buat Kolom
﻿
Memanfaatkan Agen AI Back4app untuk Generasi Skema
Agen AI Back4app adalah fitur cerdas di dalam dasbor Anda yang dapat secara otomatis mengonfigurasi skema data Anda berdasarkan spesifikasi Anda. Alat ini menyederhanakan inisialisasi proyek dengan memastikan model data Anda dioptimalkan untuk operasi CRUD.
Cara Menggunakan Agen AI:
Buka Agen AI:
Masuk ke dasbor Back4app Anda dan temukan Agen AI di pengaturan proyek.
Berikan Detail Model Anda:
Kirimkan deskripsi rinci tentang model dan bidang yang Anda butuhkan.
Tinjau dan Konfirmasi:
Agen AI akan menghasilkan skema yang disarankan. Konfirmasikan detailnya untuk menerapkan konfigurasi.
Contoh Prompt
Text
Create the following models in my Back4app project:

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

2) Model: 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 models in my Back4app project:

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

2) Model: 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 memastikan struktur data Anda konsisten dan dioptimalkan.
﻿
Langkah 3 – Mengaktifkan Aplikasi Admin & Menangani Operasi CRUD
Gambaran Umum Aplikasi Admin
Aplikasi Admin Back4app menyediakan platform yang ramah pengguna dan tanpa kode untuk mengelola data backend Anda. Antarmuka seret dan lepasnya memungkinkan Anda untuk dengan mudah melakukan tugas CRUD seperti menambahkan, melihat, memperbarui, dan menghapus catatan.
Mengaktifkan Aplikasi Admin
Pergi ke menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik pada “Aktifkan Aplikasi Admin.”
Konfigurasikan kredensial admin Anda dengan membuat akun admin awal. Ini juga akan mengatur peran (misalnya, B4aAdminUser) dan model 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:
Menyisipkan Catatan: Klik tombol “Tambahkan Catatan” di dalam model (misalnya, Item) untuk memasukkan data baru.
Memeriksa/Memodifikasi Catatan: Pilih catatan mana pun untuk melihat detailnya atau mengedit bidangnya.
Menghapus Catatan: Hapus entri yang tidak lagi diperlukan.
Antarmuka yang disederhanakan ini secara signifikan meningkatkan efisiensi pengelolaan data.
﻿
Langkah 4 – Menghubungkan Aplikasi Ember.js Anda dengan Back4app
Dengan backend Anda yang sudah dikonfigurasi, saatnya untuk menghubungkan aplikasi Ember.js Anda ke Back4app.
Menggunakan Panggilan API di Ember.js
Ember.js memanfaatkan Ember Data untuk menangani operasi data. Dalam tutorial ini, Anda akan menggunakan adapter REST untuk berinteraksi dengan backend Back4app Anda.
1. Mengonfigurasi Adapter REST
Buat atau perbarui adapter aplikasi Anda (misalnya, app/adapters/application.js) dengan konfigurasi berikut:
JS
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  host = 'https://parseapi.back4app.com';

  headers = {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  };
}
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  host = 'https://parseapi.back4app.com';

  headers = {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  };
}
﻿
2. Mendefinisikan Model Data Ember
Buat model Ember untuk item (misalnya, app/models/item.js):
JS
import Model, { attr } from '@ember-data/model';

export default class ItemModel extends Model {
  @attr('string') title;
  @attr('string') description;
  @attr('date') createdAt;
  @attr('date') updatedAt;
}
import Model, { attr } from '@ember-data/model';

export default class ItemModel extends Model {
  @attr('string') title;
  @attr('string') description;
  @attr('date') createdAt;
  @attr('date') updatedAt;
}
﻿
Dan serupa untuk user (misalnya, app/models/user.js):
JS
import Model, { attr } from '@ember-data/model';

export default class UserModel extends Model {
  @attr('string') username;
  @attr('string') email;
  @attr('string') passwordHash;
  @attr('date') createdAt;
  @attr('date') updatedAt;
}
import Model, { attr } from '@ember-data/model';

export default class UserModel extends Model {
  @attr('string') username;
  @attr('string') email;
  @attr('string') passwordHash;
  @attr('date') createdAt;
  @attr('date') updatedAt;
}
﻿
3. Mengimplementasikan Operasi CRUD
Gunakan layanan store Ember Data untuk melakukan operasi CRUD. Misalnya, untuk mengambil semua item, Anda mungkin membuat rute yang mirip dengan:
JS
import Route from '@ember/routing/route';

export default class ItemsRoute extends Route {
  model() {
    return this.store.findAll('item');
  }
}
import Route from '@ember/routing/route';

export default class ItemsRoute extends Route {
  model() {
    return this.store.findAll('item');
  }
}
﻿
Anda juga dapat menambahkan, memperbarui, atau menghapus catatan menggunakan metode API Ember Data.
Alternatif: Menggunakan Fetch Native untuk Panggilan API
Jika Anda lebih suka tidak menggunakan Ember Data, Anda dapat memanfaatkan panggilan fetch native. Misalnya, untuk mengambil item:
JS
async function fetchItems() {
  try {
    let 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'
      }
    });
    let data = await response.json();
    console.log('Fetched Items:', data);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}
async function fetchItems() {
  try {
    let 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'
      }
    });
    let data = await response.json();
    console.log('Fetched Items:', data);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}
﻿
Integrasikan panggilan API ini ke dalam komponen atau layanan Ember Anda sesuai kebutuhan.
﻿
Langkah 5 – Meningkatkan Keamanan untuk Backend Anda
Mengimplementasikan Kontrol Akses
Lindungi data Anda dengan mengonfigurasi Daftar Kontrol Akses (ACL) untuk setiap objek. Misalnya, saat membuat item yang hanya boleh dilihat oleh pemiliknya, Anda dapat menyesuaikan pengaturan ACL melalui panggilan API Anda.
Izin Tingkat Kelas (CLP)
Di dalam dasbor Back4app, atur CLP untuk memastikan bahwa hanya pengguna yang terautentikasi yang memiliki akses ke model tertentu. Ini menambah lapisan keamanan tambahan dengan menerapkan aturan akses default.
﻿
Langkah 6 – Mengimplementasikan Autentikasi Pengguna di Ember.js
Menyiapkan Akun Pengguna
Back4app memanfaatkan model Pengguna Parse untuk menangani otentikasi. Dalam aplikasi Ember.js Anda, Anda dapat membuat layanan untuk mengelola pendaftaran dan login pengguna melalui panggilan API.
Sebagai contoh, buat layanan otentikasi (app/services/auth.js):
JS
import Service from '@ember/service';

export default class AuthService extends Service {
  async register(username, password, email) {
    try {
      let 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 })
      });
      let result = await response.json();
      console.log('User registered successfully:', result);
    } catch (error) {
      console.error('Registration error:', error);
    }
  }

  async login(username, password) {
    try {
      let response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
        method: 'GET',
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      let result = await response.json();
      console.log('User logged in:', result);
    } catch (error) {
      console.error('Login error:', error);
    }
  }
}
import Service from '@ember/service';

export default class AuthService extends Service {
  async register(username, password, email) {
    try {
      let 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 })
      });
      let result = await response.json();
      console.log('User registered successfully:', result);
    } catch (error) {
      console.error('Registration error:', error);
    }
  }

  async login(username, password) {
    try {
      let response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
        method: 'GET',
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      let result = await response.json();
      console.log('User logged in:', result);
    } catch (error) {
      console.error('Login error:', error);
    }
  }
}
﻿
Layanan ini dapat disuntikkan ke dalam rute atau komponen Anda untuk menangani manajemen sesi, pengaturan ulang kata sandi, dan tugas terkait otentikasi lainnya.
﻿
Langkah 7 – Menerapkan Aplikasi Ember.js Anda
Back4app mendukung berbagai strategi penerapan. Anda dapat menerapkan aplikasi Ember.js Anda menggunakan metode seperti kontainerisasi Docker.
7.1 Membangun Aplikasi Ember Anda
Bangun Aplikasi Anda:
Jalankan perintah berikut di terminal Anda:
Bash
ember build --environment=production
ember build --environment=production
﻿
Verifikasi Output:
Pastikan folder dist/ berisi aset siap produksi Anda.
﻿
7.2 Ikhtisar Struktur Proyek
Proyek Ember.js yang khas mungkin diorganisir sebagai berikut:
Text
Basic-CRUD-App-Ember/
|-- app/
|   |-- adapters/
|   |   |-- application.js
|   |-- models/
|   |   |-- item.js
|   |   |-- user.js
|   |-- routes/
|   |   |-- items.js
|   |-- services/
|       |-- auth.js
|-- config/
|   |-- environment.js
|-- public/
|-- tests/
|-- ember-cli-build.js
|-- package.json
|-- README.md
Basic-CRUD-App-Ember/
|-- app/
|   |-- adapters/
|   |   |-- application.js
|   |-- models/
|   |   |-- item.js
|   |   |-- user.js
|   |-- routes/
|   |   |-- items.js
|   |-- services/
|       |-- auth.js
|-- config/
|   |-- environment.js
|-- public/
|-- tests/
|-- ember-cli-build.js
|-- package.json
|-- README.md
﻿
7.3 Menggunakan Docker untuk Aplikasi Ember Anda
Jika Anda lebih suka penyebaran terkontainer, sertakan Dockerfile di root proyek Anda:
Dockerfile
# Use an official Node.js image as the base
FROM node:16-alpine

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application code
COPY . .

# Build the Ember application
RUN npm run build -- --environment=production

# Use a lightweight web server to serve static files
FROM nginx:stable-alpine
COPY --from=0 /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
# Use an official Node.js image as the base
FROM node:16-alpine

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application code
COPY . .

# Build the Ember application
RUN npm run build -- --environment=production

# Use a lightweight web server to serve static files
FROM nginx:stable-alpine
COPY --from=0 /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
﻿
7.4 Penyebaran melalui Penyebaran Web Back4app
Hubungkan Repositori GitHub Anda:
Hosting proyek Ember.js Anda di GitHub.
Konfigurasi Pengaturan Penyebaran:
Di dasbor Back4app Anda, navigasikan ke Penyebaran Web, tautkan repositori Anda (misalnya, Basic-CRUD-App-Ember), dan pilih cabang yang diinginkan.
Atur Perintah Build:
Tentukan perintah build Anda (misalnya, ember build --environment=production) dan tentukan direktori output.
Sebarkan Aplikasi Anda:
Klik Sebarkan dan pantau log hingga aplikasi Anda aktif.
﻿
Langkah 8 – Kesimpulan dan Langkah Selanjutnya
Kerja bagus! Anda sekarang telah membangun aplikasi CRUD berbasis Ember.js yang terintegrasi dengan Back4app.
Dalam tutorial ini, Anda mengatur proyek yang disebut Basic-CRUD-App-Ember, merancang model untuk Item dan Pengguna, dan mengelola backend Anda melalui Aplikasi Admin Back4app.
Anda juga menghubungkan aplikasi Ember.js Anda menggunakan panggilan API dan menerapkan praktik keamanan yang kuat.
Langkah Selanjutnya:
Tingkatkan Aplikasi Anda:
Pertimbangkan untuk menambahkan fitur seperti fungsionalitas pencarian lanjutan, tampilan rinci, atau pembaruan langsung.
Perluas Kemampuan Backend:
Jelajahi fungsi cloud, integrasikan API pihak ketiga, atau atur kontrol akses berbasis peran.
Perdalam Pemahaman Anda:
Kunjungi dokumentasi Back4app dan sumber daya Ember.js lainnya untuk topik yang lebih lanjut.
Selamat coding dan semoga sukses dalam perjalanan Anda dengan Ember.js!
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama barang.
deskripsi	String	Ringkasan singkat tentang item tersebut.
dibuatPada	Tanggal	Stempel waktu yang menandai kapan item ditambahkan.
diperbaruiPada	Tanggal	Stempel waktu menandai pembaruan 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 pengguna yang terenkripsi.
dibuatPada	Tanggal	Stempel waktu ketika akun dibuat.
diperbaruiPada	Tanggal	Stempel waktu ketika akun diperbarui.
Diperbarui 19 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Tutorial Back4app
BERIKUTNYA
Cara Membangun Aplikasi CRUD Dasar dengan Solid?