Building a Basic CRUD Application with Lit?

ikhtisar dalam panduan ini, anda akan membuat aplikasi crud (buat, baca, perbarui, hapus) yang berfungsi penuh menggunakan lit kami akan menunjukkan cara mengelola data secara dinamis dengan membangun aplikasi yang melakukan operasi penting ini pertama, anda akan menyiapkan proyek back4app yang disebut basic crud app lit yang berfungsi sebagai backend yang kuat setelah menetapkan proyek anda, anda akan merancang skema basis data yang fleksibel dengan mendefinisikan koleksi dan bidang, baik secara manual atau dengan bantuan agen ai back4app langkah ini sangat penting untuk memastikan bahwa sistem anda dapat menangani operasi crud dengan andal selanjutnya, anda akan memanfaatkan aplikasi admin back4app—antarmuka yang ramah pengguna, seret dan lepas—untuk mengelola koleksi anda dengan efisien akhirnya, anda akan mengintegrasikan frontend lit anda dengan back4app menggunakan rest/graphql, memastikan bahwa backend anda tetap aman dengan kontrol akses yang tepat pada akhir tutorial ini, anda akan memiliki aplikasi web yang siap produksi yang tidak hanya melakukan fungsi crud dasar tetapi juga mencakup otentikasi pengguna dan penanganan data yang aman poin kunci kuasi pengembangan aplikasi crud yang secara efektif mengelola data dengan backend yang dapat diandalkan pelajari cara merancang database yang dapat diskalakan dan mengintegrasikannya dengan frontend berbasis lit manfaatkan alat admin drag and drop (aplikasi admin back4app) untuk menyederhanakan operasi crud pahami strategi penyebaran, termasuk kontainerisasi dengan docker, untuk meluncurkan aplikasi web anda dengan efisien prasyarat sebelum memulai, pastikan anda memiliki akun back4app dengan proyek baru untuk bantuan, lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app lingkungan pengembangan lit siapkan proyek anda menggunakan kit starter pilihan anda dan pastikan node js (v14 atau lebih baru) terinstal pengetahuan dasar tentang javascript, lit, dan rest api konsultasikan dokumentasi lit https //lit dev/docs/ jika diperlukan langkah 1 – menginisialisasi proyek anda mendirikan proyek back4app baru masuk ke akun back4app anda pilih opsi “aplikasi baru” dari dasbor anda beri nama proyek anda basic crud app lit dan ikuti instruksi untuk membuatnya buat proyek baru setelah proyek anda dibuat, itu akan muncul di dasbor, memberikan anda fondasi untuk konfigurasi backend dan manajemen proyek 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 dengan bidang dan tipe data yang disarankan, yang akan membantu anda menyiapkan skema yang efektif yang mampu menangani operasi crud 1\ koleksi barang bidang tipe data rincian id objectid kunci utama yang dihasilkan secara otomatis judul string nama barang deskripsi string rincian singkat tentang item tersebut dibuat pada tanggal stempel waktu ketika item dibuat diperbarui pada tanggal timestamp ketika item terakhir dimodifikasi 2\ koleksi pengguna bidang tipe data rincian id objectid kunci utama yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk pengguna email string alamat email unik pengguna hash kata sandi string kata sandi yang di hash untuk otentikasi yang aman dibuat pada tanggal stempel waktu untuk pembuatan akun diperbarui pada tanggal timestamp untuk pembaruan akun terbaru anda dapat menambahkan koleksi ini secara manual melalui dasbor back4app dengan membuat kelas baru dan mendefinisikan kolom yang sesuai buat kelas baru untuk setiap field, cukup pilih tipe data, tetapkan nama, atur nilai default jika diperlukan, dan tentukan apakah itu wajib buat kolom memanfaatkan ai agent back4app untuk pembuatan skema ai agent back4app, yang tersedia dari dasbor anda, dapat secara otomatis menghasilkan skema anda berdasarkan prompt deskriptif fitur ini mempermudah manajemen proyek dengan memastikan konsistensi dalam pengaturan backend anda cara menggunakan ai agent luncurkan ai agent navigasikan ke ai agent dari dasbor back4app anda atau dalam pengaturan proyek detailkan model data anda tempelkan prompt komprehensif yang menggambarkan koleksi dan bidang yang anda perlukan tinjau dan terapkan periksa saran yang dihasilkan dan konfirmasikan untuk memperbarui proyek anda contoh prompt create the following collections in my back4app application 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) menggunakan fitur ai ini menghemat waktu berharga sambil memastikan bahwa database anda terstruktur secara optimal langkah 3 – mengaktifkan aplikasi admin & fungsionalitas crud pengantar aplikasi admin aplikasi admin back4app menawarkan antarmuka tanpa kode untuk manajemen data backend yang mudah fungsionalitas seret dan lepas yang intuitif memungkinkan anda untuk melakukan operasi crud—membuat, membaca, memperbarui, dan menghapus catatan—dengan mudah cara mengaktifkan aplikasi admin akses bagian “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan klik “aktifkan aplikasi admin ” atur kredensial admin anda dengan membuat pengguna admin awal, yang akan mengonfigurasi peran (seperti b4aadminuser ) dan koleksi sistem aktifkan aplikasi admin setelah aktivasi, masuk ke aplikasi admin untuk mengelola koleksi anda dasbor aplikasi admin melakukan operasi crud melalui aplikasi admin di dalam aplikasi admin, anda dapat buat entri klik tombol “tambahkan rekaman” dalam koleksi (misalnya, item) untuk menghasilkan entri baru baca/ubah rekaman klik pada sebuah rekaman untuk memeriksa detailnya atau mengubah bidangnya hapus rekaman gunakan fungsi hapus untuk menghilangkan entri yang tidak lagi diperlukan antarmuka yang sederhana ini secara signifikan meningkatkan pengalaman pengguna dengan menyederhanakan manajemen data langkah 4 – menghubungkan lit dengan back4app sekarang setelah backend anda dikonfigurasi dan dikelola, saatnya untuk mengintegrasikan frontend lit anda dengan back4app opsi a menggunakan parse sdk (jika berlaku) instal parse sdk npm install parse siapkan parse di aplikasi lit anda buat file konfigurasi (misalnya, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // masukkan kredensial back4app anda di sini parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; terapkan parse dalam komponen lit buat komponen lit yang mengambil dan menampilkan item // src/components/itemslist js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class itemslist extends litelement { static properties = { items { type array } }; constructor() { super(); this items = \[]; } connectedcallback() { super connectedcallback(); this fetchitems(); } async fetchitems() { 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 fetching items ", error); } } render() { return html` \<h2>items\</h2> \<ul> ${this items map( (item) => html` \<li>${item get("title")} — ${item get("description")}\</li> ` )} \</ul> `; } } customelements define('items list', itemslist); export default itemslist; opsi b memanfaatkan rest atau graphql jika parse sdk tidak cocok untuk proyek anda, lakukan operasi crud menggunakan rest atau graphql misalnya, untuk mengambil item melalui rest // example rest request 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 retrieved ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integrasikan panggilan api ini ke dalam komponen lit anda sesuai kebutuhan langkah 5 – melindungi backend anda mengimplementasikan daftar kontrol akses (acl) amankan objek anda dengan mengatur acl misalnya, untuk membuat item pribadi async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } mengonfigurasi izin tingkat kelas (clp) di dalam dasbor back4app, sesuaikan clp untuk setiap koleksi untuk menerapkan aturan akses default ini memastikan bahwa hanya pengguna yang terautentikasi atau yang berwenang yang dapat mengakses informasi sensitif langkah 6 – menerapkan autentikasi pengguna membuat akun pengguna back4app memanfaatkan kelas pengguna parse untuk mengelola autentikasi dalam aplikasi lit anda, terapkan pendaftaran pengguna dan login seperti yang ditunjukkan di bawah ini // src/components/auth js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class signupform extends litelement { static properties = { username { type string }, password { type string }, email { type string } }; constructor() { super(); this username = ''; this password = ''; this email = ''; } async handlesignup(e) { e 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) { alert('registration error ' + error message); } } render() { return html` \<form @submit="${this handlesignup}"> \<input type="text" placeholder="username" value="${this username}" @input="${e => this username = e target value}" /> \<input type="password" placeholder="password" value="${this password}" @input="${e => this password = e target value}" /> \<input type="email" placeholder="email" value="${this email}" @input="${e => this email = e target value}" /> \<button type="submit">register\</button> \</form> `; } } customelements define('sign up form', signupform); export default signupform; anda juga dapat menerapkan login dan manajemen sesi dengan cara yang sama fitur tambahan seperti autentikasi sosial, verifikasi email, dan pengaturan ulang kata sandi dapat diatur melalui dasbor back4app langkah 7 – menyebarkan frontend lit anda melalui penyebaran web fitur penyebaran web back4app memungkinkan anda untuk menghosting aplikasi lit anda dengan menyebarkan kode dari repositori github ikuti langkah langkah ini untuk menyiapkan build produksi anda, mendorong kode anda ke github, dan menyebarkan situs anda 7 1 membuat build produksi anda buka direktori proyek anda di terminal jalankan perintah build npm run build ini akan membuat sebuah build folder yang berisi aset statis yang dioptimalkan periksa build konfirmasi bahwa build folder mencakup sebuah index html file beserta subdirektori yang diperlukan 7 2 mengorganisir dan mengunggah kode anda repositori github anda harus menyimpan seluruh kode sumber untuk frontend lit anda struktur proyek yang tipikal mungkin terlihat seperti basic crud app lit frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md contoh file konfigurasi src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; contoh file aplikasi utama src/app js import { litelement, html } from 'lit'; import parse from ' /parseconfig'; class approot extends litelement { static properties = { items { type array }, newtitle { type string }, newdescription { type string } }; constructor() { super(); this items = \[]; this newtitle = ''; this newdescription = ''; } connectedcallback() { super connectedcallback(); this loaditems(); } async loaditems() { 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("failed to load items ", error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error("error adding item ", error); } } render() { return html` \<div style="padding 2rem;"> \<h1>items\</h1> \<div> \<input type="text" placeholder="title" value="${this newtitle}" @input="${e => this newtitle = e target value}" /> \<input type="text" placeholder="description" value="${this newdescription}" @input="${e => this newdescription = e target value}" /> \<button @click="${this additem}">add item\</button> \</div> \<ul> ${this items map(item => html` \<li> \<strong>${item get("title")}\</strong> ${item get("description")} \</li> `)} \</ul> \</div> `; } } customelements define('app root', approot); export default approot; mengunggah kode ke github inisialisasi git di direktori proyek anda git init tambahkan semua file anda git add komit perubahan anda git commit m "komit frontend lit awal" buat repositori baru di github (misalnya, basic crud app lit frontend ) dorong kode anda git remote add origin https //github com/your username/basic crud app lit frontend git git push u origin main 7 3 menghubungkan repositori github anda dengan penyebaran web back4app akses penyebaran web masuk ke dasbor back4app anda, pilih proyek anda (basic crud app lit), dan pilih opsi penyebaran web tautkan akun github anda ikuti petunjuk untuk menghubungkan akun github anda, memungkinkan back4app mengakses repositori anda pilih repositori dan cabang anda pilih repositori (misalnya, basic crud app lit frontend ) dan cabang (misalnya, main ) yang berisi kode lit anda 7 4 mengonfigurasi pengaturan penyebaran tentukan pengaturan build anda perintah build jika folder build yang sudah dibangun hilang, gunakan perintah seperti npm run build back4app akan menjalankan perintah ini selama penyebaran direktori output atur ini ke build agar back4app dapat menemukan file statis anda variabel lingkungan sertakan kunci api yang diperlukan atau nilai spesifik lingkungan lainnya 7 5 mengcontainerisasi aplikasi lit anda dengan docker jika anda lebih suka docker, sertakan sebuah dockerfile di repositori anda \# use a lightweight node image for building the 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 remaining source code and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] dalam pengaturan penyebaran back4app anda, pilih opsi penyebaran docker untuk mengcontainerisasi aplikasi anda 7 6 meluncurkan aplikasi anda inisialisasi penyebaran klik tombol deploy setelah menyelesaikan pengaturan anda pantau proses back4app akan mengambil kode github anda, menjalankan perintah build, dan menyebarkan kontainer anda dapatkan url langsung anda setelah penyebaran selesai, url akan disediakan di mana aplikasi lit anda dihosting 7 7 memvalidasi penyebaran anda kunjungi url buka tautan yang disediakan di browser anda uji fungsionalitas pastikan aplikasi dimuat dengan benar, navigasi berfungsi, dan semua aset disajikan dengan benar debug jika diperlukan gunakan alat pengembang browser untuk memeriksa masalah apa pun jika masalah muncul, tinjau log penyebaran di back4app langkah 8 – pemikiran akhir dan peningkatan masa depan kerja bagus! anda telah berhasil mengembangkan aplikasi crud dasar menggunakan lit dan back4app anda telah menyiapkan proyek bernama basic crud app lit , mendefinisikan skema database yang rinci untuk item dan pengguna, dan mengelola data anda dengan admin app selanjutnya, anda mengintegrasikan frontend lit anda dengan backend dan menerapkan langkah langkah keamanan yang kuat langkah selanjutnya tingkatkan frontend anda tambahkan fitur seperti halaman item yang rinci, fungsionalitas pencarian, dan pembaruan waktu nyata perluas kemampuan backend integrasikan fungsionalitas canggih seperti cloud functions, layanan api eksternal, atau kontrol akses berbasis peran jelajahi lebih banyak sumber daya kunjungi dokumentasi back4app https //www back4app com/docs dan tutorial lainnya untuk wawasan yang lebih dalam tentang kinerja dan kustomisasi dengan mengikuti panduan ini, anda sekarang memiliki keterampilan untuk membuat backend crud yang dapat diskalakan dan aman untuk aplikasi lit anda menggunakan back4app selamat coding dan terus berinovasi!