Cara Membuat Frontend Angular dan Menghubungkannya ke Backend?

dalam tutorial ini, anda akan membangun aplikasi daftar tugas menggunakan angular dan menghubungkannya ke layanan backend yang dikelola yang didukung oleh back4app panduan ini dirancang untuk anda jika anda ingin menguasai operasi crud (buat, baca, perbarui, hapus) yang penting dan membuat antarmuka yang dinamis dan responsif dengan angular pada akhir tutorial ini, aplikasi anda akan berkomunikasi dengan lancar dengan backend yang menangani penyimpanan data, otentikasi, dan lainnya membangun aplikasi full stack sering kali melibatkan konfigurasi backend yang kompleks dan manajemen basis data untuk menyederhanakan alur kerja anda, kami menggunakan back4app— sebuah backend as a service yang kuat —sehingga anda dapat fokus pada pengembangan frontend angular yang kaya fitur back4app menyediakan basis data nosql yang sepenuhnya dikelola, otentikasi pengguna, cloud code untuk logika kustom, dan sdk untuk integrasi yang mulus ini memungkinkan anda untuk membangun dan menerapkan aplikasi yang dapat diskalakan tanpa mengelola infrastruktur server poin penting dengan mengikuti tutorial ini, anda akan menginisialisasi proyek angular modern menggunakan angular cli mengintegrasikan layanan backend dengan mulus untuk mengelola data aplikasi anda menerapkan operasi crud yang penting untuk sebuah daftar tugas menerapkan aplikasi fungsional penuh anda menggunakan alur kerja terkontainer di back4app prasyarat sebelum anda mulai, pastikan anda memiliki node js dan npm terinstal di mesin anda verifikasi instalasi dengan node v dan npm v pengetahuan dasar angular , termasuk komponen, layanan, dan injeksi ketergantungan akun back4app untuk mengelola layanan backend anda daftar di back4app https //www back4app com/ jika anda belum melakukannya dengan prasyarat ini, anda siap untuk mulai membangun proyek anda pengaturan proyek mulailah dengan mengatur lingkungan pengembangan lokal anda dan menginisialisasi proyek angular baru menggunakan angular cli pastikan anda memiliki node js (versi lts) terinstal jika tidak, unduh dari nodejs org https //nodejs org/ instal angular cli secara global jika anda belum melakukannya npm install g @angular/cli buat proyek angular baru ng new todo app routing style=css navigasikan ke direktori proyek anda cd todo app mulai server pengembangan untuk memverifikasi pengaturan ng serve buka http //localhost 4200 di browser anda untuk melihat aplikasi angular anda beraksi dengan frontend siap, lanjutkan untuk membuat backend anda di back4app membuat backend todo back4app menawarkan layanan backend yang sepenuhnya dikelola yang didukung oleh parse , termasuk database nosql, otentikasi, cloud code, dan api yang dihasilkan secara otomatis ikuti langkah langkah ini untuk mengatur backend anda masuk ke dasbor back4app https //www back4app com/ dan klik "buat aplikasi baru " beri nama aplikasi anda (misalnya, todoapp ) dan pilih nodejs/parse sebagai jenis backend navigasikan ke "database" > "browser" , klik "buat kelas" , dan pilih "kustom" beri nama kelas task dan atur izin untuk memungkinkan baca dan tulis publik (anda dapat memperbaiki ini nanti) di kelas task , tambahkan bidang berikut judul (string) – judul dari tugas deskripsi (string) – detail tentang tugas selesai (boolean) – status penyelesaian tugas tanggaljatuhtempo (tanggal) – tenggat waktu untuk tugas klik "simpan" untuk membuat skema mengintegrasikan back4app dengan angular anda akan menggunakan parse javascript sdk untuk menghubungkan aplikasi angular anda ke backend back4app instal parse sdk npm install parse konfigurasikan sdk di proyek angular anda buka src/app/app module ts (atau buat layanan khusus) dan inisialisasi parse dengan application id anda dan javascript key dari dasbor back4app (ditemukan di app settings > security & keys ) sebagai contoh, buat layanan parse service ts di direktori src import { injectable } from '@angular/core'; import parse from 'parse'; @injectable({ providedin 'root', }) export class parseservice { constructor() { const parse app id = "your application id"; const parse js key = "your javascript key"; parse initialize(parse app id, parse js key); (parse as any) serverurl = 'https //parseapi back4app com/'; } } kemudian, di komponen anda, cukup injeksikan parseservice di konstruktor layanan ini akan menjalankan konstruktornya sekali (pada saat aplikasi dimulai), menginisialisasi parse untuk anda dengan backend anda terhubung, anda sekarang dapat membangun ui daftar tugas dan menerapkan operasi crud mengembangkan frontend aplikasi angular anda akan terdiri dari komponen dan layanan untuk menambah, menampilkan, memperbarui, dan menghapus tugas anda akan memanfaatkan arsitektur komponen angular dan injeksi ketergantungan untuk manajemen data yang lancar menyusun komponen anda hasilkan komponen berikut menggunakan angular cli ng generate component components/task form ng generate component components/task list ng generate component components/task item taskformcomponent komponen ini merender sebuah formulir untuk menambahkan tugas baru ini menangkap input pengguna dan mengirimkan data tugas ke back4app add task // src/app/components/task form/task form component ts import { component, eventemitter, output } from '@angular/core'; import { formsmodule } from '@angular/forms'; import as parse from 'parse'; @component({ selector 'app task form', templateurl ' /task form component html', styleurls \[' /task form component css'], imports \[formsmodule] }) export class taskformcomponent { title = ''; description = ''; @output() refreshtasks = new eventemitter\<void>(); async onsubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this refreshtasks emit(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } tasklistcomponent komponen ini menampilkan daftar tugas dengan mengiterasi array dan merender setiap tugas menggunakan taskitemcomponent no tasks available // src/app/components/task list/task list component ts import { component, input, oninit } from '@angular/core'; import { commonmodule } from '@angular/common'; import as parse from 'parse'; import { taskitemcomponent } from ' /task item/task item component'; @component({ selector 'app task list', templateurl ' /task list component html', styleurls \[' /task list component css'], imports \[commonmodule, taskitemcomponent] }) export class tasklistcomponent implements oninit { @input() tasks any\[] = \[]; @input() fetchtasks! () => void; ngoninit() void {} } taskitemcomponent komponen ini mewakili tugas individu dan menyediakan tombol untuk mengubah status penyelesaian atau menghapus tugas {{ task title }} {{ task description }} {{ task completed ? 'undo' 'complete' }} delete // src/app/components/task item/task item component ts import { component, eventemitter, input, output } from '@angular/core'; import as parse from 'parse'; @component({ selector 'app task item', templateurl ' /task item component html', styleurls \[' /task item component css'] }) export class taskitemcomponent { @input() task any; @output() taskchanged = new eventemitter\<void>(); async togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this taskchanged emit(); } catch (error) { console error('error updating task ', error); } } async deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this taskchanged emit(); } catch (error) { console error('error deleting task ', error); } } } integrasi appcomponent di komponen utama anda, kelola status tugas dan integrasikan komponen tugas to do list // src/app/app component ts import { component, oninit } from '@angular/core'; import { parseservice } from ' /parse service'; import as parse from 'parse'; import { taskformcomponent } from ' /components/task form/task form component'; import { tasklistcomponent } from ' /components/task list/task list component'; @component({ selector 'app root', imports \[taskformcomponent, tasklistcomponent], templateurl ' /app component html', styleurl ' /app component css' }) export class appcomponent implements oninit { constructor(private parseservice parseservice) {} tasks any\[] = \[]; async fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); this tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } ngoninit() void { this fetchtasks(); } } styling aplikasi buat atau perbarui gaya di file css komponen anda atau di src/styles css / src/styles css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } }// src/app/app component ts import { component, oninit } from '@angular/core'; import { parseservice } from ' /parse service'; import as parse from 'parse'; import { taskformcomponent } from ' /components/task form/task form component'; import { tasklistcomponent } from ' /components/task list/task list component'; @component({ selector 'app root', imports \[taskformcomponent, tasklistcomponent], templateurl ' /app component html', styleurl ' /app component css' }) export class appcomponent implements oninit { constructor(private parseservice parseservice) {} tasks any\[] = \[]; async fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); this tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } ngoninit() void { this fetchtasks(); } } menyebarkan frontend di back4app web deployment back4app web deployment menyediakan lingkungan terkontainer untuk menghosting aplikasi angular anda mengonfigurasi angular untuk produksi bangun aplikasi angular anda yang siap produksi ng build perintah ini menghasilkan sebuah dist/ folder yang berisi aplikasi angular anda yang telah dikompilasi membuat dockerfile buat sebuah dockerfile di root proyek anda dengan konten berikut from node 18 alpine as build workdir /app copy package json package lock json / run npm install g @angular/cli run npm install copy run ng build cmd \["ng", "serve", " host", "0 0 0 0"] menguji kontainer docker secara lokal bangun gambar docker anda docker build t todo frontend jalankan kontainer docker run p 4201 4200 todo frontend buka http //localhost 4201 di browser anda untuk memverifikasi bahwa aplikasi angular anda disajikan dengan benar menyebarkan ke back4app inisialisasi repositori git, tambahkan file proyek anda, dan lakukan commit git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main masuk ke back4app web deployment https //www back4app com/containers klik "buat aplikasi baru" , berikan nama proyek anda, dan pilih repositori github anda otorisasi back4app dan pilih dockerfile deployment konfirmasi pengaturan build dan klik "deploy" untuk memulai proses deployment memantau deployment anda setelah deployment, gunakan dashboard back4app untuk melihat log untuk debugging memantau kinerja kontainer dan penggunaan sumber daya memicu rebuild pada commit baru mengonfigurasi domain kustom jika diperlukan akses aplikasi langsung anda di https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ pengujian dan debugging setelah penerapan, konfirmasikan bahwa frontend angular anda berkomunikasi secara efektif dengan backend back4app verifikasi api gunakan alat pengembang browser anda (f12 → jaringan) untuk memeriksa permintaan api operasi tugas tambahkan, selesaikan, dan hapus tugas melalui ui dan verifikasi pembaruan di browser database back4app penanganan kesalahan periksa log konsol untuk kesalahan dan uji kasus tepi seperti pengiriman kosong pengujian kinerja simulasikan kondisi jaringan lambat menggunakan alat browser untuk menilai responsivitas praktik terbaik untuk menggunakan back4app dengan angular untuk mengoptimalkan aplikasi anda permintaan efisien gunakan operasi batch untuk menangani beberapa tugas const tasks = \[task1, task2, task3]; parse object saveall(tasks); kueri yang dioptimalkan ambil hanya bidang yang diperlukan query select('title', 'completed'); manajemen lingkungan simpan kunci sensitif dalam variabel lingkungan ng app parse app id=your app id ng app parse js key=your js key keamanan gunakan acl untuk membatasi akses data task setacl(new parse acl(parse user current())); pengalihan backend manfaatkan cloud code untuk logika kompleks untuk mengurangi beban frontend kesimpulan anda sekarang telah membangun aplikasi to do list full stack dengan membuat frontend angular, mengintegrasikannya dengan backend back4app, dan menyebarkannya menggunakan alur kerja terkontainer tutorial ini membimbing anda melalui setiap langkah—dari pengembangan lokal hingga penyebaran cloud—memastikan interaksi yang kuat antara ui angular anda dan layanan backend melihat ke depan, pertimbangkan peningkatan seperti pembaruan waktu nyata, autentikasi yang lebih baik, dan integrasi pihak ketiga untuk pembelajaran lebih lanjut, kunjungi dokumentasi back4app https //www back4app com/docs dan jelajahi sumber daya komunitas