Quickstarters
Bagaimana Membangun Aplikasi CRUD Dasar dengan Angular?

43min
Pendahuluan
Dalam panduan ini, kami akan memandu Anda melalui proses membangun aplikasi CRUD dasar (Buat, Baca, Perbarui, Hapus) menggunakan Angular.
Anda akan belajar bagaimana mengembangkan aplikasi yang secara efisien mengelola operasi data dengan memanfaatkan kerangka kerja Angular yang kuat.
Untuk memulai, Anda akan membuat dan mengonfigurasi proyek Back4app baru yang berjudul Basic-CRUD-App-Angular, yang akan menjadi tulang punggung manajemen data backend Anda.
Selanjutnya, Anda akan merancang model database yang dapat diskalakan dengan merinci koleksi dan bidang secara rinci—baik secara manual atau dengan bantuan Agen AI Back4app. Langkah ini menjamin bahwa sistem Anda siap untuk menangani semua fungsionalitas CRUD.
Setelah menyiapkan skema Anda, Anda akan menjelajahi Aplikasi Admin Back4app, antarmuka intuitif drag-and-drop, untuk dengan mudah mengelola koleksi dan catatan Anda.
Akhirnya, Anda akan mengintegrasikan frontend Angular Anda dengan Back4app menggunakan REST/GraphQL (atau Parse SDK, jika diinginkan), sambil juga menerapkan langkah-langkah keamanan lanjutan untuk melindungi backend Anda.
Pada akhir tutorial ini, Anda akan telah membangun aplikasi Angular yang siap produksi dengan fitur otentikasi pengguna dan kemampuan CRUD yang komprehensif.
Poin Penting
Kuasi cara membangun aplikasi CRUD yang menangani data secara efisien dengan backend yang andal.
Dapatkan wawasan praktis tentang cara membuat model data yang dapat diskalakan dan menghubungkannya ke frontend Angular.
Pelajari cara memanfaatkan antarmuka pengguna yang ramah dari Aplikasi Admin Back4app untuk manajemen data yang mudah.
Pahami strategi penyebaran, termasuk kontainerisasi Docker, untuk meluncurkan aplikasi Angular Anda dengan cepat.
﻿
Prasyarat
Sebelum Anda mulai, harap pastikan Anda memiliki hal-hal berikut:
Akun Back4app dengan pengaturan proyek baru.
Butuh bantuan? Lihat Memulai dengan Back4app.
Lingkungan pengembangan Angular.
Instal Angular CLI dengan menjalankan npm install -g @angular/cli dan buat proyek baru menggunakan ng new. Pastikan Node.js (versi 14 atau lebih) terinstal.
Pemahaman dasar tentang TypeScript, Angular, dan REST API.
Untuk penyegaran, kunjungi dokumentasi Angular.
﻿
Langkah 1 – Menyiapkan Proyek Anda
Meluncurkan Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” dari dasbor Anda.
Masukkan nama proyek: Basic-CRUD-App-Angular dan ikuti petunjuk pengaturan.
Buat Proyek Baru
﻿
Setelah proyek dibuat, itu akan muncul di dasbor Back4app Anda, memberikan dasar yang kuat untuk konfigurasi backend Anda.
﻿
Langkah 2 – Membuat Skema Database Anda
Membangun Model Data Anda
Untuk aplikasi CRUD ini, Anda akan mendefinisikan beberapa koleksi. Di bawah ini adalah contoh koleksi dan bidangnya yang akan membentuk dasar skema database Anda. Koleksi ini memberdayakan aplikasi untuk melakukan operasi CRUD yang penting.
1. Koleksi Item
Koleksi ini menyimpan informasi untuk setiap item.
Bidang
Tipe Data
Rincian
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Judul item tersebut.
deskripsi
String
Ringkasan singkat tentang item tersebut.
dibuat_pada
Tanggal
Stempel waktu untuk saat item ditambahkan.
diperbarui_pada
Tanggal
Stempel waktu untuk pembaruan terbaru.
2. Koleksi Pengguna
Koleksi ini menyimpan kredensial pengguna dan data otentikasi.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna
String
Pengidentifikasi unik untuk pengguna.
email
String
Alamat email yang berbeda.
hash_kata_sandi
String
Kata sandi yang di-hash dengan aman untuk otentikasi.
dibuat_pada
Tanggal
Timestamp yang menunjukkan kapan akun dibuat.
diperbarui_pada
Tanggal
Stempel waktu pembaruan terbaru.
Anda dapat mengatur koleksi ini secara manual di dasbor Back4app dengan membuat kelas baru untuk masing-masing dan menambahkan kolom untuk mendefinisikan bidang.
Buat Kelas Baru
﻿
Tambahkan kolom dengan memilih jenis data, memberi nama pada field, mengatur nilai default, dan menandai apakah itu diperlukan.
Buat Kolom
﻿
﻿
Memanfaatkan Agen AI Back4app untuk Pengaturan Skema
Agen AI Back4app adalah alat serbaguna yang tersedia di dasbor Anda yang memungkinkan Anda untuk secara otomatis menghasilkan skema database Anda berdasarkan prompt deskriptif. Fitur ini menghemat waktu dan memastikan bahwa backend Anda disesuaikan dengan sempurna untuk operasi CRUD.
Langkah-langkah untuk Menggunakan Agen AI:
Buka Agen AI:
Masuk ke dasbor Back4app Anda dan temukan opsi Agen AI.
Deskripsikan Skema Anda:
Masukkan prompt terperinci yang menjelaskan koleksi dan field yang Anda butuhkan.
Tinjau dan Konfirmasi:
Setelah pengiriman, tinjau skema yang dihasilkan dan terapkan pada proyek Anda.
Contoh Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Pendekatan berbasis AI ini memperlancar proses dan memastikan skema yang konsisten dan teroptimasi.
﻿
Langkah 3 – Mengaktifkan Aplikasi Admin & Mengelola Operasi CRUD
Sekilas tentang Aplikasi Admin
Aplikasi Admin Back4app menyediakan antarmuka tanpa kode, seret dan lepas yang memungkinkan Anda mengelola data backend Anda dengan mudah. 
Dengan ini, Anda dapat dengan mudah melakukan operasi CRUD seperti menambahkan, melihat, memodifikasi, dan menghapus catatan.
Mengaktifkan Aplikasi Admin
Navigasikan ke menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik “Aktifkan Aplikasi Admin.”
Atur Kredensial Admin Anda:
Buat pengguna admin awal Anda, yang juga akan mengonfigurasi peran (misalnya, B4aAdminUser) dan koleksi sistem.
Aktifkan Aplikasi Admin
﻿
Setelah aktivasi, masuk ke Aplikasi Admin untuk mengelola koleksi dan catatan Anda.
Dasbor Aplikasi Admin
﻿
Memanfaatkan Aplikasi Admin untuk Tugas CRUD
Di dalam Aplikasi Admin, Anda dapat:
Menambahkan Catatan Baru: Klik “Tambahkan Catatan” di koleksi mana pun (misalnya, Item) untuk membuat entri baru.
Melihat & Mengedit Catatan: Pilih catatan untuk melihat detailnya atau memperbarui bidangnya.
Menghapus Catatan: Gunakan opsi hapus untuk menghapus catatan yang sudah tidak relevan.
Antarmuka intuitif ini sangat menyederhanakan pengelolaan data backend Anda.
﻿
Langkah 4 – Menghubungkan Frontend Angular Anda ke Back4app
Sekarang setelah backend Anda sepenuhnya disiapkan dan dikelola melalui Aplikasi Admin, saatnya menghubungkan frontend Angular Anda ke Back4app.
Opsi A: Mengintegrasikan SDK Parse dengan Angular
Instal SDK Parse:
Bash
npm install parse
npm install parse
﻿
Siapkan Parse di Proyek Angular Anda:
Buat file konfigurasi (misalnya, src/app/parse-config.ts):
TypeScript
// src/app/parse-config.ts
import Parse from 'parse';
// Ganti dengan kredensial Back4app Anda yang sebenarnya
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/app/parse-config.ts
import Parse from 'parse';
// Ganti dengan kredensial Back4app Anda yang sebenarnya
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
﻿
Text

3. **Implement Parse in an Angular Component:**  
For example, create a component to fetch and display items:

```typescript
// src/app/components/items-list/items-list.component.ts
import { Component, OnInit } from '@angular/core';
import Parse from '../../parse-config';

@Component({
selector: 'app-items-list',
templateUrl: './items-list.component.html',
styleUrls: ['./items-list.component.css']
})
export class ItemsListComponent implements OnInit {
items: any[] = [];

async ngOnInit() {
 const Items = Parse.Object.extend('Items');
 const query = new Parse.Query(Items);
 try {
   const results = await query.find();
   this.items = results;
 } catch (error) {
   console.error('Error retrieving items:', error);
 }
}
}

3. **Implement Parse in an Angular Component:**  
For example, create a component to fetch and display items:

```typescript
// src/app/components/items-list/items-list.component.ts
import { Component, OnInit } from '@angular/core';
import Parse from '../../parse-config';

@Component({
selector: 'app-items-list',
templateUrl: './items-list.component.html',
styleUrls: ['./items-list.component.css']
})
export class ItemsListComponent implements OnInit {
items: any[] = [];

async ngOnInit() {
 const Items = Parse.Object.extend('Items');
 const query = new Parse.Query(Items);
 try {
   const results = await query.find();
   this.items = results;
 } catch (error) {
   console.error('Error retrieving items:', error);
 }
}
}
﻿
Dan di template HTML (items-list.component.html):
HTML
<div>
<h2>Items</h2>
<ul>
 <li *ngFor="let item of items">
   {{ item.get('title') }} – {{ item.get('description') }}
 </li>
</ul>
</div>
<div>
<h2>Items</h2>
<ul>
 <li *ngFor="let item of items">
   {{ item.get('title') }} – {{ item.get('description') }}
 </li>
</ul>
</div>
﻿
Opsi B: Menggunakan REST atau GraphQL
Jika Anda lebih suka tidak menggunakan Parse SDK, Anda dapat melakukan operasi CRUD melalui REST atau GraphQL. Misalnya, untuk mengambil item menggunakan REST di Angular, buat metode layanan seperti ini:
TypeScript
// src/app/services/items.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ItemsService {
  private apiUrl = 'https://parseapi.back4app.com/classes/Items';

  constructor(private http: HttpClient) { }

  getItems(): Observable<any> {
    const headers = new HttpHeaders({
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    });
    return this.http.get(this.apiUrl, { headers });
  }
}
// src/app/services/items.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ItemsService {
  private apiUrl = 'https://parseapi.back4app.com/classes/Items';

  constructor(private http: HttpClient) { }

  getItems(): Observable<any> {
    const headers = new HttpHeaders({
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    });
    return this.http.get(this.apiUrl, { headers });
  }
}
﻿
Anda dapat mengintegrasikan panggilan API ini ke dalam komponen Angular Anda sesuai kebutuhan.
﻿
Langkah 5 – Melindungi Backend Anda
Mengimplementasikan Daftar Kontrol Akses (ACL)
Tingkatkan keamanan data Anda dengan menetapkan ACL ke objek Anda. Misalnya, untuk membuat item yang hanya dapat diakses oleh pemiliknya:
TypeScript
async function createSecureItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Assign ACL: only the owner has read/write access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Secure item created:', savedItem);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
async function createSecureItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Assign ACL: only the owner has read/write access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Secure item created:', savedItem);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
﻿
Mengonfigurasi Izin Tingkat Kelas (CLP)
Di dalam dasbor Back4app, sesuaikan CLP untuk setiap koleksi untuk menetapkan aturan akses default, memastikan bahwa hanya pengguna yang terautentikasi atau berwenang yang dapat mengakses data sensitif.
﻿
Langkah 6 – Mengelola Autentikasi Pengguna
Membuat dan Mengelola Akun Pengguna
Back4app memanfaatkan kelas Pengguna Parse untuk mengelola autentikasi. Dalam proyek Angular Anda, Anda dapat menangani pendaftaran dan login pengguna sebagai berikut:
TypeScript
// src/app/components/auth/auth.component.ts
import { Component } from '@angular/core';
import Parse from '../../parse-config';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp(event: Event) {
    event.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registration successful!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
// src/app/components/auth/auth.component.ts
import { Component } from '@angular/core';
import Parse from '../../parse-config';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp(event: Event) {
    event.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registration successful!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
﻿
Dan template HTML yang sesuai (auth.component.html):
HTML
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
﻿
HTML
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
﻿
HTML
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
﻿
Pendekatan serupa dapat diterapkan untuk login pengguna dan manajemen sesi. Untuk fitur seperti login sosial atau reset kata sandi, sesuaikan pengaturan Anda di dasbor Back4app.
﻿
Langkah 7 – Menerapkan Frontend Angular Anda
Fitur Web Deployment Back4app memungkinkan Anda untuk menghosting aplikasi Angular Anda dengan menerapkan kode langsung dari repositori GitHub. Di bagian ini, Anda akan menyiapkan build produksi Anda, mengkomit kode sumber Anda, dan mengintegrasikan repositori Anda untuk penerapan.
7.1 Membangun Versi Produksi Anda
Buka direktori proyek Anda di terminal.
Jalankan perintah build produksi:
Bash
ng build --prod
ng build --prod
﻿
Perintah ini mengompilasi aplikasi Angular Anda menjadi folder yang dioptimalkan dist/.
Verifikasi Build:
Pastikan bahwa direktori dist/ berisi index.html dan semua aset yang diperlukan.
7.2 Menyusun dan Mengunggah Kode Sumber Anda
Repositori Anda harus berisi seluruh proyek Angular Anda. Struktur file yang khas mungkin terlihat seperti ini:
Text
Basic-CRUD-App-Angular/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── components/
│   │       ├── auth/
│   │       │   ├── auth.component.ts
│   │       │   └── auth.component.html
│   │       └── items-list/
│   │           ├── items-list.component.ts
│   │           └── items-list.component.html
├── angular.json
├── package.json
└── README.md
Basic-CRUD-App-Angular/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── components/
│   │       ├── auth/
│   │       │   ├── auth.component.ts
│   │       │   └── auth.component.html
│   │       └── items-list/
│   │           ├── items-list.component.ts
│   │           └── items-list.component.html
├── angular.json
├── package.json
└── README.md
﻿
Contoh: src/app/parse-config.ts
TypeScript
// src/app/parse-config.ts
import Parse from 'parse';
// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/app/parse-config.ts
import Parse from 'parse';
// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Contoh: src/app/app.component.ts
TypeScript
import { Component } from '@angular/core';
import Parse from './parse-config';

@Component({
  selector: 'app-root',
  template: `
    <div style="padding: 2rem;">
      <h1>Items</h1>
      <app-items-list></app-items-list>
    </div>
  `,
  styles: []
})
export class AppComponent { }
import { Component } from '@angular/core';
import Parse from './parse-config';

@Component({
  selector: 'app-root',
  template: `
    <div style="padding: 2rem;">
      <h1>Items</h1>
      <app-items-list></app-items-list>
    </div>
  `,
  styles: []
})
export class AppComponent { }
﻿
Mengirim Kode Anda ke GitHub
Inisialisasi repositori Git di folder proyek Anda jika Anda belum melakukannya:
Bash
git init
git init
﻿
Tambahkan file proyek Anda:
Bash
git add .
git add .
﻿
Kirim perubahan Anda:
Bash
git commit -m "Kirim awal untuk frontend Angular"
git commit -m "Kirim awal untuk frontend Angular"
﻿
Buat repositori GitHub:
Misalnya, beri nama Basic-CRUD-App-Angular.
Dorong kode Anda ke GitHub:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Angular.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Angular.git
git push -u origin main
﻿
7.3 Menghubungkan Repositori GitHub Anda dengan Web Deployment
Akses fitur Web Deployment:
Masuk ke dasbor Back4app Anda, pilih proyek Anda (Basic-CRUD-App-Angular), dan pilih Web Deployment.
Hubungkan Akun GitHub Anda:
Ikuti petunjuk untuk mengintegrasikan akun GitHub Anda, memungkinkan Back4app mengakses repositori Anda.
Pilih Repositori dan Cabang Anda:
Pilih repositori Anda (misalnya, Basic-CRUD-App-Angular) dan cabang (misalnya, main) yang berisi kode Anda.
7.4 Mengonfigurasi Pengaturan Deployment Anda
Berikan detail konfigurasi yang diperlukan:
Perintah Build:
Jika repositori Anda tidak memiliki folder dist/ yang sudah dibangun, tentukan perintah build (misalnya, ng build --prod).
Direktori Output:
Atur direktori output ke dist/nama-proyek-anda sehingga Back4app tahu di mana file statis Anda berada.
Variabel Lingkungan:
Tambahkan variabel lingkungan yang diperlukan (seperti kunci API) dalam konfigurasi deployment.
7.5 Mengcontainerisasi Aplikasi Angular Anda dengan Docker
Jika Anda lebih suka deployment berbasis Docker, sertakan sebuah Dockerfile di repositori Anda. Misalnya:
Dockerfile
# Use an official Node image to build the Angular app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application and build it
COPY . .
RUN npm run build --prod

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/dist/your-project-name /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image to build the Angular app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application and build it
COPY . .
RUN npm run build --prod

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/dist/your-project-name /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Sertakan Dockerfile ini di repositori Anda, lalu pilih opsi penyebaran Docker di pengaturan Penyebaran Web Back4app.
7.6 Meluncurkan Aplikasi Anda
Klik Tombol Deploy:
Setelah pengaturan penyebaran Anda dikonfigurasi, klik Deploy.
Pantau Proses Penyebaran:
Back4app akan menarik kode Anda, menjalankan perintah build jika diperlukan, dan menyebarkan aplikasi Angular Anda.
Ambil URL Anda:
Setelah penyebaran berhasil, Back4app akan memberikan URL di mana aplikasi Anda dapat diakses.
7.7 Menguji Aplikasi yang Telah Disebarkan
Kunjungi URL yang Diberikan:
Buka URL di browser Anda.
Verifikasi Fungsionalitas:
Pastikan aplikasi Angular Anda dimuat dengan benar, semua rute berfungsi seperti yang diharapkan, dan aset disajikan dengan benar.
Atasi Masalah jika Diperlukan:
Gunakan alat pengembang browser untuk mengidentifikasi dan menyelesaikan masalah. Periksa log penyebaran Back4app dan konfigurasi Anda jika masalah muncul.
﻿
Langkah 8 – Menyelesaikan dan Arah Masa Depan
Selamat! Anda telah berhasil membangun aplikasi CRUD dasar menggunakan Angular dan Back4app. 
Anda telah menyiapkan proyek bernama Basic-CRUD-App-Angular, merancang koleksi database yang komprehensif untuk Item dan Pengguna, dan mengelola data Anda menggunakan Aplikasi Admin yang intuitif. 
Selain itu, Anda menghubungkan frontend Angular Anda ke backend dan menerapkan langkah-langkah keamanan yang kuat.
Langkah Selanjutnya:
Tingkatkan Frontend Anda:
Perluas aplikasi Angular Anda dengan fitur-fitur canggih seperti tampilan item yang detail, fungsi pencarian, dan pembaruan waktu nyata.
Perluas Fungsionalitas:
Pertimbangkan untuk mengintegrasikan logika backend tambahan (seperti Cloud Functions) atau menerapkan kontrol akses berbasis peran.
Jelajahi Sumber Daya Lain:
Periksa dokumentasi Back4app dan sumber daya Angular lainnya untuk memperdalam pemahaman Anda.
Dengan panduan ini, Anda sekarang dilengkapi untuk membangun backend CRUD yang kuat dan skalabel untuk aplikasi Angular Anda menggunakan Back4app. Selamat coding!
Bidang	Tipe Data	Rincian
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Judul item tersebut.
deskripsi	String	Ringkasan singkat tentang item tersebut.
dibuat_pada	Tanggal	Stempel waktu untuk saat item ditambahkan.
diperbarui_pada	Tanggal	Stempel waktu untuk pembaruan terbaru.
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna	String	Pengidentifikasi unik untuk pengguna.
email	String	Alamat email yang berbeda.
hash_kata_sandi	String	Kata sandi yang di-hash dengan aman untuk otentikasi.
dibuat_pada	Tanggal	Timestamp yang menunjukkan kapan akun dibuat.
diperbarui_pada	Tanggal	Stempel waktu pembaruan terbaru.
Diperbarui 13 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Bagaimana Membangun Aplikasi CRUD Dasar dengan Next.js?
BERIKUTNYA
Cara Membangun Aplikasi CRUD dengan ReactJS?