How to Create a Basic CRUD App with StencilJS? A Comprehensive Tutorial

ikhtisar dalam panduan ini, anda akan belajar bagaimana membangun aplikasi crud dasar (buat, baca, perbarui, dan hapus) menggunakan stenciljs tutorial ini membimbing anda melalui pembuatan aplikasi web yang menjalankan operasi penting untuk mengelola data secara efektif kita akan mulai dengan meluncurkan proyek back4app yang disebut basic crud app stenciljs , yang akan berfungsi sebagai backend yang kuat setelah itu, anda akan merancang database yang dapat diskalakan dengan mendefinisikan koleksi dan bidang—baik secara manual atau dengan bantuan dari agen ai back4app langkah ini memastikan bahwa database anda disesuaikan untuk mendukung semua operasi crud dengan andal selanjutnya, anda akan memanfaatkan aplikasi admin back4app, antarmuka drag and drop yang intuitif, untuk mengelola koleksi anda dengan lancar alat tanpa kode ini menyederhanakan penanganan tindakan crud akhirnya, anda akan menghubungkan frontend stenciljs anda ke back4app melalui api rest/graphql meskipun sdk parse tersedia, kita akan fokus pada integrasi api yang cocok untuk stenciljs, memastikan backend anda tetap aman melalui kontrol akses yang canggih pada akhir tutorial ini, anda akan memiliki aplikasi web yang siap produksi yang mendukung fungsi crud penting bersama dengan otentikasi pengguna dan manajemen data yang kuat wawasan penting kuasi proses membangun aplikasi crud dengan sistem backend yang dapat diandalkan pahami cara merancang backend yang dapat diskalakan dan menghubungkannya dengan frontend stenciljs pelajari cara menggunakan alat admin tanpa kode (aplikasi admin back4app) untuk operasi data yang efisien temukan strategi penyebaran, termasuk kontainerisasi docker, untuk meluncurkan aplikasi web anda dengan cepat prasyarat sebelum anda memulai, pastikan anda memiliki akun back4app dengan proyek aktif butuh bantuan? lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app pengaturan pengembangan stenciljs gunakan dokumentasi stenciljs https //stenciljs com/docs/introduction untuk mengatur lingkungan anda pastikan node js (v14 atau lebih baru) terinstal pengetahuan dasar tentang javascript, komponen web, dan rest api segarkan pengetahuan tentang konsep stenciljs https //stenciljs com/docs jika perlu langkah 1 – mulai proyek anda meluncurkan proyek back4app baru masuk ke akun back4app anda pilih opsi “aplikasi baru” dari dasbor anda beri nama proyek anda basic crud app stenciljs dan ikuti instruksi di layar untuk menyelesaikan pengaturan buat proyek baru setelah disiapkan, proyek anda akan terlihat di dasbor, memberikan dasar yang solid untuk konfigurasi backend anda langkah 2 – membuat skema database anda mendefinisikan model data untuk aplikasi crud ini, anda perlu menyiapkan beberapa koleksi di bawah ini adalah contoh koleksi beserta bidang dan tipe data mereka untuk membantu anda menyusun database anda untuk operasi crud yang efisien 1\ koleksi item koleksi ini menyimpan rincian untuk setiap item bidang tipe data rincian id objectid kunci utama yang dihasilkan secara otomatis judul string nama atau judul item deskripsi string deskripsi singkat tentang item tersebut dibuat pada tanggal timestamp ketika item dibuat diperbarui pada tanggal timestamp untuk pembaruan terakhir 2\ koleksi pengguna koleksi ini mengelola profil pengguna dan otentikasi bidang tipe data rincian id objectid pengidentifikasi unik 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 otentikasi dibuat pada tanggal stempel waktu pembuatan akun diperbarui pada tanggal timestamp terakhir diperbarui untuk akun pengguna anda dapat menambahkan koleksi ini secara manual di dasbor back4app dengan membuat kelas baru untuk masing masing dan menambahkan kolom dengan tipe data yang sesuai buat kelas baru ikuti petunjuk untuk memilih jenis data, menentukan nama field, mengatur nilai default, dan menandai apakah field tersebut wajib buat kolom memanfaatkan agen ai back4app untuk pembuatan skema agen ai back4app adalah alat inovatif yang tersedia di dalam dasbor anda yang mengotomatiskan pembuatan skema database anda berdasarkan prompt sederhana fitur ini mempercepat pengaturan proyek dan memastikan skema anda sesuai dengan kebutuhan aplikasi anda cara memanfaatkan agen ai akses agen ai buka dasbor back4app anda dan temukan agen ai di dalam menu atau di bawah pengaturan proyek masukkan persyaratan skema anda berikan prompt rinci yang menggambarkan koleksi dan field yang anda butuhkan tinjau dan konfirmasi setelah agen ai memproses prompt anda, tinjau saran skema yang dihasilkan dan terapkan pada proyek anda contoh prompt create these 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) metode ini memastikan skema anda konsisten dan dioptimalkan langkah 3 – mengaktifkan aplikasi admin & fungsi crud pengantar aplikasi admin aplikasi admin back4app menawarkan antarmuka tanpa kode yang memudahkan pengelolaan data backend sistem drag and drop yang intuitif memungkinkan anda melakukan semua operasi crud—membuat, membaca, memperbarui, dan menghapus—dengan mudah mengaktifkan aplikasi admin buka menu “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan kemudian klik pada “aktifkan aplikasi admin ” atur kredensial admin anda dengan membuat pengguna admin proses ini juga mengonfigurasi peran default seperti b4aadminuser dan koleksi sistem aktifkan aplikasi admin setelah diaktifkan, masuk ke aplikasi admin untuk mulai mengelola data anda dasbor aplikasi admin mengelola tindakan crud melalui aplikasi admin dalam antarmuka ini anda dapat menambahkan rekaman klik opsi “tambahkan rekaman” dalam koleksi mana pun (misalnya, item) untuk membuat entri baru melihat dan mengedit rekaman pilih sebuah rekaman untuk memeriksa atau memodifikasi bidangnya menghapus rekaman gunakan fungsi hapus untuk menghilangkan rekaman yang sudah tidak relevan alat yang disederhanakan ini meningkatkan pengalaman pengguna dengan menyederhanakan tugas pengelolaan data langkah 4 – menghubungkan stenciljs dengan back4app dengan backend anda dikonfigurasi dan dikelola melalui aplikasi admin, langkah selanjutnya adalah menghubungkan frontend stenciljs anda ke back4app opsi a menggunakan rest atau graphql api untuk stenciljs kita akan fokus pada integrasi api untuk menjaga kesederhanaan contoh mengambil data melalui rest // example rest api call to retrieve 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 retrieving items ', error); } }; fetchitems(); integrasikan panggilan api ini ke dalam komponen stenciljs anda sesuai kebutuhan opsi b menggunakan parse sdk (jika diinginkan) jika anda lebih suka menggunakan parse sdk, anda masih dapat mengintegrasikannya dalam proyek stenciljs anda karena ini adalah pustaka javascript namun, contoh kami di sini berfokus pada panggilan api langkah 5 – memperkuat backend anda mengimplementasikan daftar kontrol akses (acl) pastikan keamanan data dengan menetapkan acl pada objek anda misalnya, untuk membuat item pribadi async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl restrict read/write access to the owner 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, atur clp untuk setiap koleksi untuk memastikan bahwa hanya pengguna yang berwenang yang dapat mengakses data sensitif langkah 6 – mengelola autentikasi pengguna mendirikan akun pengguna back4app menggunakan kelas pengguna parse untuk mengelola autentikasi dalam proyek stenciljs anda, terapkan pendaftaran dan login pengguna sebagai berikut // example component for user signup import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app auth', styleurl 'app auth css', shadow true, }) export class appauth { @state() username string = ''; @state() password string = ''; @state() email string = ''; async handlesignup(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 registered successfully!'); } catch (error) { alert('registration error ' + error message); } } render() { return ( \<form onsubmit={(e) => this handlesignup(e)}> \<input type="text" placeholder="username" value={this username} oninput={(e any) => this username = e target value} /> \<input type="password" placeholder="password" value={this password} oninput={(e any) => this password = e target value} /> \<input type="email" placeholder="email" value={this email} oninput={(e any) => this email = e target value} /> \<button type="submit">register\</button> \</form> ); } } struktur serupa dapat diterapkan untuk login dan manajemen sesi anda juga dapat mengaktifkan fitur seperti login sosial, verifikasi email, dan pengaturan ulang kata sandi langsung dari dasbor back4app langkah 7 – meluncurkan frontend stenciljs anda dengan penyebaran web fitur penyebaran web back4app memungkinkan anda untuk menghosting aplikasi stenciljs anda dengan menyebarkan kode langsung dari repositori github 7 1 membangun bundel produksi anda buka direktori proyek anda di terminal jalankan perintah build npm run build ini menghasilkan folder www yang berisi aset statis yang dioptimalkan konfirmasi build pastikan folder www menyertakan sebuah index html bersama dengan file css, js, dan gambar yang diperlukan 7 2 mengorganisir dan mengunggah kode sumber anda repositori anda harus mencakup semua file sumber untuk aplikasi stenciljs anda struktur contoh mungkin seperti ini basic crud app stenciljs frontend/ ├── node modules/ ├── www/ │ └── index html ├── src/ │ ├── components/ │ │ ├── app auth tsx │ │ └── app items tsx │ ├── global/ │ └── parseconfig ts ├── stencil config ts ├── package json └── readme md contoh file sumber src/parseconfig ts // src/parseconfig ts import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; contoh file sumber src/components/app items tsx import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app items', styleurl 'app items css', shadow true, }) export class appitems { @state() items any\[] = \[]; @state() newtitle string = ''; @state() newdescription string = ''; @state() editingid string | null = null; @state() editingtitle string = ''; @state() editingdescription string = ''; async componentwillload() { await 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('error fetching 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); } } async deleteitem(id string) { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (error) { console error('error deleting item ', error); } } startedit(item any) { this editingid = item id; this editingtitle = item get("title"); this editingdescription = item get("description"); } async updateitem() { try { const items = parse object extend("items"); const item = new items(); item id = this editingid!; item set("title", this editingtitle); item set("description", this editingdescription); await item save(); this editingid = null; this editingtitle = ''; this editingdescription = ''; this loaditems(); } catch (error) { console error('error updating item ', error); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this newtitle} oninput={(e any) => this newtitle = e target value} /> \<input type="text" placeholder="description" value={this newdescription} oninput={(e any) => this newdescription = e target value} /> \<button onclick={() => this additem()}>add item\</button> \</div> \<ul> {this items map(item => \<li key={item id}> {this editingid === item id ? ( \<div> \<input type="text" value={this editingtitle} oninput={(e any) => this editingtitle = e target value} /> \<input type="text" value={this editingdescription} oninput={(e any) => this editingdescription = e target value} /> \<button onclick={() => this updateitem()}>save\</button> \<button onclick={() => this editingid = null}>cancel\</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)}>edit\</button> \<button onclick={() => this deleteitem(item id)}>delete\</button> \</div> )} \</li> )} \</ul> \</div> ); } } mengirim kode anda ke github inisialisasi repositori git di direktori proyek anda (jika belum dilakukan) git init stage file anda git add commit perubahan anda git commit m "commit awal kode frontend stenciljs" buat repositori github baru beri nama sesuatu seperti basic crud app stenciljs frontend dorong kode anda ke github git remote add origin https //github com/your username/basic crud app stenciljs frontend git git push u origin main 7 3 menghubungkan repositori anda melalui web deployment akses web deployment masuk ke dasbor back4app anda, pilih proyek anda ( basic crud app stenciljs ), dan klik pada bagian web deployment integrasikan github hubungkan akun github anda mengikuti instruksi yang diberikan ini akan memungkinkan back4app untuk mengakses repositori anda pilih repositori dan cabang pilih repositori anda (misalnya, basic crud app stenciljs frontend ) dan pilih cabang yang sesuai (misalnya, main ) 7 4 menyiapkan deployment anda masukkan detail penyebaran tambahan perintah build jika repositori anda tidak menyertakan www folder yang sudah dibangun, tentukan perintah build (misalnya, npm run build ) back4app akan mengeksekusi ini selama penyebaran direktori output atur direktori output ke www sehingga back4app tahu di mana menemukan file statis anda variabel lingkungan tambahkan variabel lingkungan yang diperlukan (misalnya, kunci api) di pengaturan penyebaran 7 5 mengkontainerisasi proyek stenciljs anda dengan docker jika anda lebih memilih docker untuk penyebaran, sertakan sebuah dockerfile di repositori anda seperti \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy source code copy \# build the app run npm run build \# use nginx to serve the app from nginx\ stable alpine copy from=build /app/www /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] sertakan file ini di repositori anda dan pilih penyebaran docker di back4app 7 6 menerapkan aplikasi anda inisialisasi penerapan klik tombol deploy setelah mengonfigurasi pengaturan anda tonton proses pembangunan back4app akan mengambil kode anda dari github, menjalankan perintah build (jika diatur), dan menerapkan aplikasi terkontainer anda akses aplikasi anda setelah diterapkan, back4app akan menyediakan url di mana aplikasi stenciljs anda aktif 7 7 memvalidasi penerapan anda kunjungi url buka url yang diberikan di browser web anda uji fungsionalitas pastikan aplikasi dimuat dengan benar, rute berfungsi dengan baik, dan semua aset (css, js, gambar) disajikan tanpa masalah debug jika diperlukan gunakan alat pengembang browser untuk memeriksa kesalahan periksa log back4app dan verifikasi konfigurasi github dan build jika terjadi masalah langkah 8 – ringkasan dan arah masa depan kerja bagus! anda telah berhasil membangun aplikasi crud lengkap menggunakan stenciljs dan back4app anda telah menyiapkan proyek berjudul basic crud app stenciljs , merancang koleksi untuk item dan pengguna, dan mengelola data dengan aplikasi admin selain itu, anda menghubungkan frontend stenciljs anda ke backend dan menerapkan langkah langkah keamanan yang kuat langkah selanjutnya tingkatkan frontend pertimbangkan untuk memperluas aplikasi stenciljs anda dengan fitur fitur canggih seperti tampilan item yang lebih detail, kemampuan pencarian, dan notifikasi waktu nyata tambahkan lebih banyak fungsionalitas integrasikan logika backend yang kompleks (misalnya, cloud functions), integrasi api pihak ketiga, atau terapkan izin berbasis peran perdalam pengetahuan anda jelajahi dokumentasi back4app https //www back4app com/docs dan tutorial lainnya untuk wawasan lebih lanjut tentang pengoptimalan kinerja dan integrasi kustom dengan mengikuti tutorial ini, anda telah memperoleh keterampilan yang diperlukan untuk membuat aplikasi yang kuat