Building a Basic CRUD Application with Lit?

ภาพรวม ในคู่มือนี้ คุณจะสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ทำงานได้อย่างสมบูรณ์โดยใช้ lit เราจะแสดงให้เห็นถึงวิธีการจัดการข้อมูลแบบไดนามิกโดยการสร้างแอปพลิเคชันที่ทำงานเหล่านี้ให้สำเร็จ ในเบื้องต้น คุณจะตั้งค่าโปรเจกต์ back4app ที่เรียกว่า basic crud app lit ซึ่งทำหน้าที่เป็นแบ็กเอนด์ที่แข็งแกร่งของคุณ หลังจากตั้งค่าโปรเจกต์ของคุณแล้ว คุณจะออกแบบสคีมาฐานข้อมูลที่ยืดหยุ่นโดยการกำหนดคอลเลกชันและฟิลด์ ไม่ว่าจะทำด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent ขั้นตอนนี้มีความสำคัญต่อการทำให้ระบบของคุณจัดการการดำเนินการ crud ได้อย่างเชื่อถือได้ ถัดไป คุณจะใช้ back4app admin app ซึ่งเป็นอินเทอร์เฟซที่ใช้งานง่ายแบบลากและวาง เพื่อจัดการคอลเลกชันของคุณอย่างมีประสิทธิภาพ สุดท้าย คุณจะรวมฟรอนต์เอนด์ lit ของคุณเข้ากับ back4app โดยใช้ rest/graphql เพื่อให้แน่ใจว่าแบ็กเอนด์ของคุณยังคงปลอดภัยด้วยการควบคุมการเข้าถึงที่เหมาะสม เมื่อสิ้นสุดการสอนนี้ คุณจะมีแอปพลิเคชันเว็บที่พร้อมสำหรับการผลิตซึ่งไม่เพียงแต่ทำฟังก์ชัน crud พื้นฐานได้ แต่ยังรวมถึงการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลอย่างปลอดภัย จุดสำคัญ เชี่ยวชาญในการพัฒนาแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพด้วยแบ็คเอนด์ที่เชื่อถือได้ เรียนรู้การออกแบบฐานข้อมูลที่สามารถขยายได้และรวมเข้ากับส่วนหน้าที่ใช้ lit ได้อย่างราบรื่น ใช้เครื่องมือจัดการแบบลากและวาง (แอป back4app admin) เพื่อทำให้การดำเนินการ crud ง่ายขึ้น เข้าใจกลยุทธ์การปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ด้วย docker เพื่อเปิดตัวแอปพลิเคชันเว็บของคุณอย่างมีประสิทธิภาพ ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app พร้อมโปรเจกต์ใหม่ สำหรับความช่วยเหลือ ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา lit ตั้งค่าโปรเจกต์ของคุณโดยใช้ชุดเริ่มต้นที่คุณชื่นชอบและตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (v14 หรือใหม่กว่า) ความรู้พื้นฐานเกี่ยวกับ javascript, lit, และ rest apis ปรึกษา เอกสาร lit https //lit dev/docs/ หากจำเป็น ขั้นตอนที่ 1 – การเริ่มต้นโปรเจกต์ของคุณ การสร้างโปรเจกต์ back4app ใหม่ ลงชื่อเข้าใช้บัญชี back4app ของคุณ เลือกตัวเลือก “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app lit และทำตามคำแนะนำเพื่อสร้างมัน สร้างโปรเจกต์ใหม่ เมื่อโปรเจกต์ของคุณถูกสร้างขึ้น มันจะปรากฏบนแดชบอร์ด ซึ่งจะให้พื้นฐานสำหรับการกำหนดค่าด้านหลังและการจัดการโปรเจกต์ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะต้องกำหนดหลายคอลเลกชัน ด้านล่างนี้เป็นตัวอย่างคอลเลกชันพร้อมฟิลด์และประเภทข้อมูลที่แนะนำ ซึ่งจะช่วยให้คุณตั้งค่าสคีมาที่มีประสิทธิภาพซึ่งสามารถจัดการการดำเนินการ crud ได้ 1\ การรวบรวมรายการ สนาม ประเภทข้อมูล รายละเอียด id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง รายละเอียดสั้น ๆ เกี่ยวกับรายการ สร้างเมื่อ วันที่ เวลาที่รายการถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่รายการถูกแก้ไขล่าสุด 2\ การรวบรวมผู้ใช้ สนาม ประเภทข้อมูล รายละเอียด id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ที่ปลอดภัย สร้างเมื่อ วันที่ เวลาสำหรับการสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถเพิ่มคอลเลกชันเหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app โดยการสร้างคลาสใหม่และกำหนดคอลัมน์ที่เหมาะสม สร้างคลาสใหม่ สำหรับแต่ละฟิลด์ เพียงแค่เลือกประเภทข้อมูล กำหนดชื่อ ตั้งค่าค่าปริยายหากจำเป็น และระบุว่าจำเป็นต้องใช้หรือไม่ สร้างคอลัมน์ การใช้ตัวแทน ai ของ back4app สำหรับการสร้างสคีมา ตัวแทน ai ของ back4app ที่มีให้จากแดชบอร์ดของคุณ สามารถสร้างสคีมาโดยอัตโนมัติตามคำอธิบายที่ให้ไว้ ฟีเจอร์นี้ช่วยให้การจัดการโครงการมีความราบรื่นโดยการรับประกันความสอดคล้องในการตั้งค่าด้านหลังของคุณ วิธีการใช้ตัวแทน ai เริ่มต้นตัวแทน ai ไปที่ตัวแทน ai จากแดชบอร์ด back4app ของคุณหรือภายในการตั้งค่าโครงการ รายละเอียดโมเดลข้อมูลของคุณ วางคำอธิบายที่ครอบคลุมเกี่ยวกับคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและใช้ ตรวจสอบข้อเสนอที่สร้างขึ้นและยืนยันเพื่ออัปเดตโครงการของคุณ ตัวอย่างคำอธิบาย 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) การใช้ฟีเจอร์ ai นี้ช่วยประหยัดเวลาอันมีค่าในขณะที่มั่นใจได้ว่าฐานข้อมูลของคุณมีโครงสร้างที่เหมาะสมที่สุด ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบ & ฟังก์ชัน crud บทนำสู่แอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซแบบไม่มีโค้ดสำหรับการจัดการข้อมูลด้านหลังอย่างง่ายดาย ฟังก์ชันการลากและวางที่ใช้งานง่ายช่วยให้คุณสามารถดำเนินการ crud—สร้าง, อ่าน, อัปเดต, และลบระเบียน—ได้อย่างสะดวก วิธีเปิดใช้งานแอปผู้ดูแลระบบ เข้าถึงส่วน “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างผู้ใช้ผู้ดูแลระบบเริ่มต้น ซึ่งจะกำหนดบทบาท (เช่น b4aadminuser ) และคอลเลกชันระบบ เปิดแอปผู้ดูแลระบบ หลังจากเปิดใช้งาน ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการคอลเลกชันของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ผ่านแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบ คุณสามารถ สร้างรายการ คลิกที่ปุ่ม “เพิ่มบันทึก” ภายในคอลเลกชัน (เช่น รายการ) เพื่อสร้างรายการใหม่ อ่าน/แก้ไขบันทึก คลิกที่บันทึกเพื่อดูรายละเอียดหรือแก้ไขฟิลด์ ลบบันทึก ใช้ฟังก์ชันลบเพื่อลบรายการที่ไม่ต้องการอีกต่อไป อินเทอร์เฟซที่เรียบง่ายนี้ช่วยปรับปรุงประสบการณ์ผู้ใช้ได้อย่างมีนัยสำคัญโดยการทำให้การจัดการข้อมูลเป็นไปอย่างราบรื่น ขั้นตอนที่ 4 – เชื่อมต่อ lit กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกกำหนดค่าและจัดการแล้ว ถึงเวลาที่จะรวมฟรอนต์เอนด์ lit ของคุณกับ back4app ตัวเลือก a ใช้ parse sdk (เมื่อมีความเหมาะสม) ติดตั้ง parse sdk npm install parse ตั้งค่า parse ในแอป lit ของคุณ สร้างไฟล์กำหนดค่า (เช่น, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // ใส่ข้อมูลประจำตัว back4app ของคุณที่นี่ parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; นำ parse ไปใช้ในคอมโพเนนต์ lit สร้างคอมโพเนนต์ lit ที่ดึงและแสดงรายการ // 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>รายการ\</h2> \<ul> ${this items map( (item) => html` \<li>${item get("title")} — ${item get("description")}\</li> ` )} \</ul> `; } } customelements define('items list', itemslist); export default itemslist; ตัวเลือก b ใช้ rest หรือ graphql หาก parse sdk ไม่เหมาะสมกับโปรเจกต์ของคุณ ให้ทำการดำเนินการ crud โดยใช้ rest หรือ graphql ตัวอย่างเช่น เพื่อดึงรายการผ่าน 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(); รวมการเรียก api เหล่านี้ภายในคอมโพเนนต์ lit ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – ปกป้อง backend ของคุณ การใช้งาน access control lists (acls) รักษาความปลอดภัยให้กับวัตถุของคุณโดยการตั้งค่า acls ตัวอย่างเช่น เพื่อสร้างรายการส่วนตัว 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); } } การกำหนดสิทธิ์ระดับคลาส (clps) ในแดชบอร์ด back4app ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อบังคับใช้กฎการเข้าถึงเริ่มต้น สิ่งนี้จะทำให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบหรือได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การสร้างบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse เพื่อจัดการการตรวจสอบสิทธิ์ ในแอปพลิเคชัน lit ของคุณ ให้ดำเนินการลงทะเบียนผู้ใช้และการเข้าสู่ระบบตามที่แสดงด้านล่าง // 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; คุณสามารถดำเนินการเข้าสู่ระบบและการจัดการเซสชันได้ในลักษณะเดียวกัน ฟีเจอร์เพิ่มเติมเช่นการตรวจสอบสิทธิ์ทางสังคม การตรวจสอบอีเมล และการรีเซ็ตรหัสผ่านสามารถตั้งค่าได้ผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ frontend ของคุณผ่านการปรับใช้เว็บ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์แอปพลิเคชัน lit ของคุณโดยการปรับใช้โค้ดจากที่เก็บ github ทำตามขั้นตอนเหล่านี้เพื่อเตรียมการสร้างผลิตภัณฑ์ของคุณ ดันโค้ดของคุณไปยัง github และปรับใช้เว็บไซต์ของคุณ 7 1 การสร้างการสร้างผลิตภัณฑ์ของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้าง npm run build สิ่งนี้จะสร้าง build โฟลเดอร์ที่มีทรัพย์สินสถิตที่ปรับให้เหมาะสม ตรวจสอบการสร้าง ยืนยันว่า build โฟลเดอร์รวมถึง index html ไฟล์พร้อมกับไดเรกทอรีย่อยที่จำเป็น 7 2 การจัดระเบียบและอัปโหลดโค้ดของคุณ ที่เก็บ github ของคุณควรมีโค้ดต้นฉบับทั้งหมดสำหรับ frontend ของ lit ของคุณ โครงสร้างโปรเจกต์ทั่วไปอาจมีลักษณะดังนี้ basic crud app lit frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md ไฟล์การกำหนดค่าตัวอย่าง 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; ไฟล์แอปพลิเคชันหลักตัวอย่าง 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; การส่งโค้ดไปยัง github เริ่มต้น git ในไดเรกทอรีโปรเจกต์ของคุณ git init เพิ่มไฟล์ทั้งหมดของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "initial lit frontend commit" สร้างที่เก็บใหม่บน github (เช่น, basic crud app lit frontend ) ผลักดันโค้ดของคุณ git remote add origin https //github com/your username/basic crud app lit frontend git git push u origin main 7 3 การเชื่อมต่อที่เก็บ github ของคุณกับการปรับใช้เว็บ back4app เข้าถึงการปรับใช้เว็บ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ เลือกโปรเจกต์ของคุณ (basic crud app lit) และเลือก การปรับใช้เว็บ ตัวเลือก เชื่อมโยงบัญชี github ของคุณ ทำตามคำแนะนำเพื่อเชื่อมต่อบัญชี github ของคุณ โดยอนุญาตให้ back4app เข้าถึงที่เก็บของคุณ เลือกที่เก็บและสาขาของคุณ เลือกที่เก็บ (เช่น, basic crud app lit frontend ) และสาขา (เช่น, main ) ที่มีโค้ด lit ของคุณ 7 4 การกำหนดค่าการตั้งค่าการปรับใช้ ระบุการตั้งค่าการสร้างของคุณ คำสั่งสร้าง หากไม่มี โฟลเดอร์การสร้าง ที่สร้างไว้ล่วงหน้า ให้ใช้คำสั่งเช่น npm run build back4app จะดำเนินการคำสั่งนี้ระหว่างการปรับใช้ ไดเรกทอรีผลลัพธ์ ตั้งค่านี้เป็น build เพื่อให้ back4app สามารถค้นหาไฟล์สถิตของคุณ ตัวแปรสภาพแวดล้อม รวมคีย์ api ที่จำเป็นหรือค่าที่เฉพาะเจาะจงกับสภาพแวดล้อมอื่น ๆ 7 5 การทำให้แอปพลิเคชัน lit ของคุณเป็นคอนเทนเนอร์ด้วย docker หากคุณชอบ docker ให้รวม dockerfile ในที่เก็บของคุณ \# 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;"] ในการตั้งค่าการปรับใช้ back4app ของคุณ ให้เลือกตัวเลือกการปรับใช้ docker เพื่อทำให้แอปของคุณเป็นคอนเทนเนอร์ 7 6 การเปิดตัวแอปพลิเคชันของคุณ เริ่มการปรับใช้ คลิกที่ deploy ปุ่มหลังจากที่คุณตั้งค่าทุกอย่างเสร็จสิ้น ติดตามกระบวนการ back4app จะดึงโค้ด github ของคุณ รันคำสั่งสร้าง และปรับใช้คอนเทนเนอร์ของคุณ รับ url สดของคุณ เมื่อการปรับใช้เสร็จสิ้น จะมี url ที่ให้บริการแอปพลิเคชัน lit ของคุณ 7 7 การตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url เปิดลิงก์ที่ให้ไว้ในเบราว์เซอร์ของคุณ ทดสอบฟังก์ชันการทำงาน ตรวจสอบให้แน่ใจว่าแอปพลิเคชันโหลดได้อย่างถูกต้อง การนำทางทำงาน และทรัพยากรทั้งหมดถูกให้บริการอย่างถูกต้อง ดีบักหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์เพื่อตรวจสอบปัญหาใด ๆ หากมีปัญหาเกิดขึ้น ให้ตรวจสอบบันทึกการปรับใช้ใน back4app ขั้นตอนที่ 8 – ความคิดสุดท้ายและการปรับปรุงในอนาคต ทำได้ดีมาก! คุณได้พัฒนาแอปพลิเคชัน crud เบื้องต้นโดยใช้ lit และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการที่เรียกว่า basic crud app lit , กำหนดโครงสร้างฐานข้อมูลที่ละเอียดสำหรับ items และ users และจัดการข้อมูลของคุณด้วย admin app นอกจากนี้ คุณได้รวมส่วนหน้าของ lit เข้ากับส่วนหลังและดำเนินการมาตรการรักษาความปลอดภัยที่แข็งแกร่ง ขั้นตอนถัดไป ปรับปรุงส่วนหน้าของคุณ เพิ่มฟีเจอร์เช่น หน้าไอเท็มที่ละเอียด ฟังก์ชันการค้นหา และการอัปเดตแบบเรียลไทม์ ขยายความสามารถของส่วนหลัง รวมฟังก์ชันขั้นสูงเช่น cloud functions, บริการ api ภายนอก หรือการควบคุมการเข้าถึงตามบทบาท สำรวจแหล่งข้อมูลเพิ่มเติม เยี่ยมชม เอกสาร back4app https //www back4app com/docs และบทเรียนอื่น ๆ เพื่อให้เข้าใจลึกซึ้งยิ่งขึ้นเกี่ยวกับประสิทธิภาพและการปรับแต่ง โดยการติดตามคู่มือนี้ คุณมีทักษะในการสร้างส่วนหลัง crud ที่สามารถปรับขนาดได้และปลอดภัยสำหรับแอปพลิเคชัน lit ของคุณโดยใช้ back4app สนุกกับการเขียนโค้ดและสร้างสรรค์นวัตกรรมต่อไป!