How to Build a Basic CRUD App with Angular?

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 berfungsi sebagai 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 https //www back4app com/docs/get started/new parse app 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 https //angular io/docs 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 timestamp 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 ke proyek anda contoh prompt 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 untuk menghubungkan frontend angular anda ke back4app opsi a mengintegrasikan sdk parse dengan angular instal sdk parse npm install parse siapkan parse di proyek angular anda buat file konfigurasi (misalnya, src/app/parse config ts ) // 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; 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 ) items {{ item get('title') }} – {{ item get('description') }} 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 // 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 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 // 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 ) register register register register 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 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 repository anda harus berisi seluruh proyek angular anda struktur file yang khas mungkin terlihat seperti ini 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 // 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 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 git init tambahkan file proyek anda git add kirim perubahan anda git commit m "kirim awal untuk frontend angular" buat repositori github misalnya, beri nama basic crud app angular dorong kode anda ke github 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 # 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 https //www back4app com/docs 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!