Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough

ikhtisar dalam panduan ini, anda akan belajar bagaimana mengembangkan aplikasi crud (buat, baca, perbarui, hapus) yang sepenuhnya fungsional menggunakan polymer panduan ini menunjukkan cara melakukan operasi penting untuk mengelola dan memodifikasi data anda akan mulai dengan menyiapkan proyek back4app, yang diberi judul basic crud app polymer , yang akan berfungsi sebagai backend untuk aplikasi anda setelah itu, anda akan merancang model data yang dapat diskalakan dengan merinci koleksi dan bidang yang tepat—baik secara manual atau dengan bantuan agen ai back4app—untuk memastikan database anda dioptimalkan untuk operasi crud selanjutnya, anda akan memanfaatkan aplikasi admin back4app, antarmuka manajemen yang ramah pengguna dengan fitur seret dan lepas, untuk menyederhanakan operasi data anda akhirnya, anda akan mengintegrasikan frontend polymer anda dengan back4app menggunakan api rest/graphql sambil memperkuat keamanan backend dengan kontrol akses yang canggih pada akhir tutorial ini, anda akan telah membangun aplikasi web yang siap produksi yang mendukung operasi crud inti dan mencakup otentikasi pengguna serta fitur manajemen data yang kuat apa yang akan anda pelajari kembangkan aplikasi crud yang secara efisien mengelola data dengan backend yang andal rancang backend yang dapat diskalakan dan hubungkan dengan frontend berbasis polymer manfaatkan antarmuka admin drag and drop (aplikasi admin back4app) untuk memfasilitasi operasi data terapkan aplikasi anda menggunakan teknik modern termasuk kontainerisasi dengan docker prasyarat sebelum memulai, pastikan anda memiliki akun back4app dengan proyek yang aktif untuk bantuan, lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app pengaturan pengembangan polymer gunakan polymer cli atau alat serupa dan verifikasi bahwa node js (v14 atau lebih baru) terinstal pemahaman dasar tentang javascript, polymer, dan rest api anda dapat merujuk ke dokumentasi polymer https //www polymer library polymer project org/3 0/docs/devguide/feature overview untuk detail lebih lanjut langkah 1 – menyiapkan proyek anda memulai proyek back4app baru akses akun back4app anda pilih opsi “aplikasi baru” dari dasbor anda tetapkan nama proyek basic crud app polymer dan ikuti instruksi untuk menyelesaikan pembuatan proyek buat proyek baru setelah menyelesaikan langkah langkah ini, proyek anda akan terlihat di dasbor back4app, membentuk tulang punggung untuk konfigurasi backend anda langkah 2 – merancang skema database anda menyusun model data anda untuk aplikasi crud ini, beberapa koleksi diperlukan di bawah ini adalah contoh koleksi beserta bidang dan tipe masing masing, yang akan membantu anda merancang skema basis data yang kuat yang mampu menangani operasi crud 1 koleksi item bidang tipe deskripsi id objectid kunci utama yang dihasilkan secara otomatis judul string judul item deskripsi string deskripsi singkat tentang item tersebut dibuat pada tanggal stempel waktu menandai pembuatan item diperbarui pada tanggal timestamp untuk pembaruan terbaru 2 koleksi pengguna bidang tipe rincian id objectid kunci utama yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk pengguna email string alamat email yang unik hash kata sandi string kata sandi terenkripsi untuk keamanan dibuat pada tanggal stempel waktu ketika akun dibuat diperbarui pada tanggal timestamp untuk pembaruan akun terbaru anda dapat membuat koleksi ini secara manual di dasbor back4app dengan membuat kelas baru dan menambahkan kolom yang sesuai buat kelas baru dengan mudah menambahkan bidang baru dengan memilih jenis data, memberi nama bidang, dan menentukan nilai default atau parameter yang diperlukan buat kolom memanfaatkan agen ai back4app untuk pembuatan skema agen ai back4app, yang dapat diakses dari dasbor anda, secara otomatis menghasilkan skema database berdasarkan prompt yang merinci koleksi dan bidang anda fitur ini sangat menghemat waktu, memastikan backend anda disesuaikan dengan tepat untuk operasi crud cara menggunakan agen ai luncurkan agen ai akses melalui pengaturan proyek anda atau menu utama di dasbor back4app masukkan detail skema anda berikan prompt deskriptif yang mencantumkan koleksi dan bidang yang anda butuhkan tinjau dan konfirmasi setelah agen ai memproses permintaan anda, 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) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) menggunakan agen ai memastikan skema anda konsisten dan dioptimalkan untuk kebutuhan aplikasi anda langkah 3 – mengaktifkan aplikasi admin dan melakukan operasi crud ikhtisar aplikasi admin aplikasi admin back4app menawarkan antarmuka tanpa kode untuk manajemen backend desain drag and drop yang intuitif menyederhanakan operasi crud—memungkinkan anda untuk membuat, melihat, memperbarui, dan menghapus catatan dengan mudah mengaktifkan aplikasi admin pergi ke menu “more” di dasbor back4app anda pilih “admin app” dan kemudian klik pada “enable admin app ” atur kredensial admin anda dengan membuat pengguna admin awal, yang juga akan menetapkan peran (seperti b4aadminuser ) dan koleksi sistem aktifkan admin app setelah aktivasi, masuk ke admin app untuk mengelola data backend anda dasbor admin app mengelola data menggunakan admin app di dalam admin app, anda dapat menambahkan rekaman gunakan tombol “add record” di koleksi mana pun (misalnya, items) untuk membuat entri baru melihat/mengubah rekaman klik pada sebuah rekaman untuk memeriksa detailnya atau untuk mengedit bidangnya menghapus rekaman manfaatkan fungsi hapus untuk menghilangkan data yang tidak lagi diperlukan antarmuka ini sangat meningkatkan kegunaan dengan menyederhanakan semua fungsi crud langkah 4 – menghubungkan polymer dengan back4app dengan backend anda dikonfigurasi melalui admin app, saatnya untuk menghubungkan frontend polymer anda ke back4app opsi a menggunakan rest/graphql apis kami akan menggunakan rest atau graphql apis untuk melakukan operasi crud misalnya, untuk mengambil item menggunakan rest // example rest call to get items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integrasikan panggilan api serupa ke dalam elemen polymer anda sesuai kebutuhan langkah 5 – memperkuat keamanan backend mengimplementasikan daftar kontrol akses (acl) lindungi data anda dengan menerapkan acl pada objek misalnya, untuk membuat item yang dibatasi async function createrestricteditem(data, owner) { const itemdata = { title data title, description data description }; // configure acl to permit only the owner access const acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { 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({ itemdata, acl acl }) }); const result = await response json(); console log('restricted item created ', result); } catch (error) { console error('error creating item ', error); } } mengonfigurasi izin tingkat kelas (clp) di dalam dasbor back4app, atur clp untuk setiap koleksi untuk mendefinisikan aturan akses default konfigurasi ini memastikan hanya pengguna yang berwenang yang dapat mengakses data sensitif langkah 6 – autentikasi pengguna di polymer membangun akun pengguna back4app menggunakan kelas pengguna parse untuk mengelola autentikasi dalam proyek polymer anda, terapkan pendaftaran dan login pengguna seperti yang ditunjukkan di bawah ini // example function for user registration using rest api async function signupuser(username, password, email) { try { const 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 }) }); const result = await response json(); alert('user registered successfully!'); console log(result); } catch (error) { alert('registration error ' + error message); } } pendekatan serupa dapat diadopsi untuk manajemen login dan sesi, dengan fitur tambahan seperti verifikasi email dan pengaturan ulang kata sandi yang dikonfigurasi melalui dasbor back4app langkah 7 – menyebarkan frontend polymer anda dengan penyebaran web fitur penyebaran web back4app memungkinkan anda untuk menghosting aplikasi polymer anda dengan mulus dengan menghubungkan repositori github anda ikuti langkah langkah ini untuk menyebarkan aplikasi anda 7 1 membangun versi produksi anda buka direktori proyek anda di terminal jalankan perintah build polymer build perintah ini menghasilkan sebuah build folder dengan semua file statis yang dioptimalkan periksa build pastikan bahwa build folder berisi sebuah index html file bersama dengan direktori aset yang diperlukan 7 2 mengorganisir dan mengunggah kode sumber anda repositori anda harus berisi kode sumber lengkap untuk frontend polymer anda struktur direktori contoh mungkin terlihat seperti basic crud app polymer frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── my app js │ ├── api config js │ └── components/ │ ├── items list js │ └── auth form js ├── polymer json └── readme md contoh src/api config js // src/api config js export const app id = 'your application id'; export const rest api key = 'your rest api key'; export const api url = 'https //parseapi back4app com'; contoh src/my app js import { polymerelement, html } from '@polymer/polymer/polymer element js'; class myapp extends polymerelement { static get template() { return html` \<style> / your css styles here / \</style> \<h1>item manager\</h1> \<items list>\</items list> \<auth form>\</auth form> `; } } customelements define('my app', myapp); contoh src/my app js mengirim kode anda ke github inisialisasi repositori git (jika belum dilakukan) git init stage file anda git add commit perubahan anda git commit m "commit awal untuk frontend polymer" buat repositori github namai basic crud app polymer frontend dorong kode anda ke github git remote add origin https //github com/your username/basic crud app polymer frontend git git push u origin main 7 3 menghubungkan repositori github anda dengan web deployment akses web deployment masuk ke back4app, navigasikan ke proyek anda ( basic crud app polymer ), dan pilih fitur web deployment integrasikan github ikuti petunjuk untuk menghubungkan akun github anda, memungkinkan back4app mengakses repositori anda pilih repositori dan cabang anda pilih repositori (misalnya, basic crud app polymer frontend ) dan cabang yang sesuai (misalnya, main ) 7 4 mengonfigurasi pengaturan deployment tentukan detail berikut perintah build jika folder build tidak dibangun sebelumnya, atur perintahnya (misalnya, polymer build ) back4app akan mengeksekusi ini selama penyebaran direktori output atur ke build agar back4app mengidentifikasi file situs statis anda variabel lingkungan sertakan variabel yang diperlukan (seperti kunci api) dalam konfigurasi penyebaran 7 5 mengcontainerisasi aplikasi polymer anda dengan docker jika docker adalah pilihan penyebaran anda, sertakan dockerfile di repositori anda mirip dengan # use an official node image for building from node 16 alpine as builder \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy the project files copy \# build the polymer app run polymer build \# use nginx to serve the built files from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] integrasikan dockerfile ini ke dalam proyek anda dan pilih docker sebagai opsi penyebaran di back4app 7 6 menerapkan aplikasi anda klik tombol deploy setelah pengaturan anda dikonfirmasi, tekan deploy tonton proses build back4app akan mengambil kode anda, menjalankan perintah build, dan menerapkan aplikasi terkontainer anda ambil url anda setelah penerapan, anda akan menerima url di mana aplikasi polymer anda dapat diakses 7 7 menguji penerapan anda kunjungi url buka tautan yang diberikan di browser anda verifikasi fungsionalitas periksa bahwa semua rute dimuat dengan benar dan bahwa aset seperti css, javascript, dan gambar ditampilkan seperti yang diharapkan pecahkan masalah jika ada masalah yang terjadi, tinjau log penerapan dan pengaturan integrasi github di back4app langkah 8 – penutupan dan arah masa depan kerja bagus! anda telah berhasil membangun aplikasi crud lengkap menggunakan polymer dan back4app proyek anda, basic crud app polymer , sekarang memiliki koleksi yang terdefinisi dengan baik untuk item dan pengguna, dikelola dengan lancar melalui aplikasi admin, dengan frontend polymer yang aman dan terintegrasi langkah selanjutnya tingkatkan frontend tambahkan fitur seperti tampilan item yang lebih detail, fungsi pencarian, atau pembaruan waktu nyata perluas fungsionalitas integrasikan logika backend tambahan dengan cloud functions atau api pihak ketiga jelajahi lebih banyak lihat dokumentasi back4app https //www back4app com/docs untuk konfigurasi yang lebih canggih dan optimasi kinerja dengan keterampilan ini, anda siap untuk membangun backend crud yang dapat diskalakan dan menerapkan aplikasi web yang kuat dengan polymer dan back4app selamat coding!