Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการพัฒนาแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ทำงานได้อย่างสมบูรณ์โดยใช้ polymer การเดินผ่านนี้จะแสดงให้เห็นถึงวิธีการดำเนินการที่จำเป็นสำหรับการจัดการและปรับเปลี่ยนข้อมูล คุณจะเริ่มต้นด้วยการตั้งค่าโครงการ back4app ที่ชื่อว่า basic crud app polymer , ซึ่งจะทำหน้าที่เป็นแบ็กเอนด์สำหรับแอปพลิเคชันของคุณ หลังจากนั้น คุณจะสร้างโมเดลข้อมูลที่สามารถขยายได้โดยการกำหนดคอลเลกชันและฟิลด์ที่ชัดเจน—ไม่ว่าจะด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent—เพื่อให้แน่ใจว่าฐานข้อมูลของคุณได้รับการปรับให้เหมาะสมสำหรับการดำเนินการ crud ถัดไป คุณจะใช้ back4app admin app ซึ่งเป็นอินเทอร์เฟซการจัดการที่ใช้งานง่ายแบบลากและวาง เพื่อทำให้การดำเนินการข้อมูลของคุณมีประสิทธิภาพมากขึ้น สุดท้าย คุณจะรวมส่วนหน้า polymer ของคุณเข้ากับ back4app โดยใช้ rest/graphql apis ในขณะที่เสริมความปลอดภัยของแบ็กเอนด์ด้วยการควบคุมการเข้าถึงที่ซับซ้อน เมื่อสิ้นสุดการสอนนี้ คุณจะได้สร้างแอปพลิเคชันเว็บที่พร้อมใช้งานในผลิตภัณฑ์ซึ่งรองรับการดำเนินการ crud หลักและรวมถึงการตรวจสอบสิทธิ์ผู้ใช้และฟีเจอร์การจัดการข้อมูลที่แข็งแกร่ง สิ่งที่คุณจะได้เรียนรู้ พัฒนาแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพด้วยแบ็คเอนด์ที่เชื่อถือได้ ออกแบบแบ็คเอนด์ที่สามารถขยายได้และเชื่อมต่อกับฟรอนต์เอนด์ที่ใช้ polymer ใช้ส่วนติดต่อผู้ดูแลระบบแบบลากและวาง (back4app admin app) เพื่ออำนวยความสะดวกในการดำเนินการข้อมูล ปรับใช้แอปพลิเคชันของคุณโดยใช้เทคนิคสมัยใหม่รวมถึงการทำให้เป็นคอนเทนเนอร์ด้วย docker ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโปรเจกต์ที่ใช้งานอยู่ หากต้องการความช่วยเหลือ โปรดดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app การตั้งค่าการพัฒนา polymer ใช้ polymer cli หรือเครื่องมือที่คล้ายกันและตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (v14 หรือใหม่กว่า) แล้ว ความเข้าใจพื้นฐานเกี่ยวกับ javascript, polymer, และ rest apis คุณสามารถดูที่ เอกสาร polymer https //www polymer library polymer project org/3 0/docs/devguide/feature overview เพื่อดูรายละเอียดเพิ่มเติม ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ของคุณ เริ่มต้นโปรเจกต์ back4app ใหม่ เข้าถึงบัญชี back4app ของคุณ เลือกตัวเลือก “แอปใหม่” จากแดชบอร์ดของคุณ กำหนดชื่อโปรเจกต์ basic crud app polymer และทำตามคำแนะนำเพื่อเสร็จสิ้นการสร้างโปรเจกต์ สร้างโปรเจกต์ใหม่ หลังจากทำตามขั้นตอนเหล่านี้เสร็จสิ้น โปรเจกต์ของคุณจะปรากฏบนแดชบอร์ด back4app ซึ่งเป็นฐานสำหรับการกำหนดค่าด้านหลังของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การจัดโครงสร้างโมเดลข้อมูลของคุณ สำหรับแอป crud นี้ จำเป็นต้องมีหลายคอลเลกชัน ด้านล่างนี้คือตัวอย่างคอลเลกชันพร้อมกับฟิลด์และประเภทที่เกี่ยวข้อง ซึ่งจะช่วยให้คุณออกแบบสคีมาฐานข้อมูลที่แข็งแกร่งซึ่งสามารถจัดการการดำเนินการ crud ได้ 1 คอลเลกชันรายการ สนาม ประเภท คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่ทำเครื่องหมายการสร้างรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2 การรวบรวมผู้ใช้ สนาม ประเภท รายละเอียด id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสเพื่อความปลอดภัย สร้างเมื่อ วันที่ เวลาที่บัญชีถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองบนแดชบอร์ด back4app โดยการสร้างคลาสใหม่และเพิ่มคอลัมน์ที่ соответств สร้างชั้นเรียนใหม่ เพิ่มฟิลด์ใหม่ได้อย่างง่ายดายโดยการเลือกประเภทข้อมูล ตั้งชื่อฟิลด์ และระบุค่าดีฟอลต์หรือพารามิเตอร์ที่จำเป็นใดๆ สร้างคอลัมน์ การใช้ประโยชน์จาก back4app ai agent สำหรับการสร้าง schema back4app ai agent ซึ่งเข้าถึงได้จากแดชบอร์ดของคุณ จะสร้าง schema ฐานข้อมูลโดยอัตโนมัติตามคำสั่งที่ระบุคอลเลกชันและฟิลด์ของคุณ ฟีเจอร์นี้ช่วยประหยัดเวลาได้มาก ทำให้แน่ใจว่าด้านหลังของคุณถูกปรับแต่งอย่างแม่นยำสำหรับการดำเนินการ crud วิธีการใช้ ai agent เริ่ม ai agent เข้าถึงได้ผ่านการตั้งค่าโปรเจกต์หรือเมนูหลักในแดชบอร์ด back4app ป้อนรายละเอียด schema ของคุณ ให้คำสั่งที่มีรายละเอียดซึ่งระบุคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน หลังจากที่ ai agent ประมวลผลคำขอของคุณ ให้ตรวจสอบ schema ที่สร้างขึ้นและนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างคำสั่ง 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) การใช้ ai agent จะทำให้แน่ใจว่า schema ของคุณมีความสอดคล้องและเหมาะสมกับความต้องการของแอปพลิเคชันของคุณ ขั้นตอนที่ 3 – เปิดใช้งาน admin app และดำเนินการ crud ภาพรวมของ admin app back4app admin app มีอินเทอร์เฟซแบบไม่มีโค้ดสำหรับการจัดการด้านหลัง การออกแบบที่ใช้งานง่ายแบบลากและวางช่วยให้การดำเนินการ crud ง่ายขึ้น—ทำให้คุณสามารถสร้าง ดู อัปเดต และลบระเบียนได้อย่างง่ายดาย การเปิดใช้งาน admin app ไปที่เมนู “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแล” จากนั้นคลิกที่ “เปิดใช้งานแอปผู้ดูแล ” ตั้งค่าข้อมูลประจำตัวผู้ดูแล โดยการสร้างผู้ใช้ผู้ดูแลเริ่มต้น ซึ่งจะกำหนดบทบาท (เช่น b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแล หลังจากเปิดใช้งาน ให้ลงชื่อเข้าใช้แอปผู้ดูแลเพื่อจัดการข้อมูลเบื้องหลังของคุณ แดชบอร์ดแอปผู้ดูแล การจัดการข้อมูลโดยใช้แอปผู้ดูแล ภายในแอปผู้ดูแล คุณสามารถ เพิ่มบันทึก ใช้ปุ่ม “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อสร้างรายการใหม่ ดู/แก้ไขบันทึก คลิกที่บันทึกเพื่อดูรายละเอียดหรือแก้ไขฟิลด์ ลบบันทึก ใช้ฟังก์ชันลบเพื่อลบข้อมูลที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซนี้ช่วยเพิ่มความสะดวกในการใช้งานโดยการทำให้ฟังก์ชัน crud ทั้งหมดเป็นไปอย่างราบรื่น ขั้นตอนที่ 4 – เชื่อมต่อ polymer กับ back4app เมื่อคุณตั้งค่าข้อมูลเบื้องหลังผ่านแอปผู้ดูแลแล้ว ถึงเวลาที่จะเชื่อมต่อส่วนหน้า polymer ของคุณกับ back4app ตัวเลือก a การใช้ rest/graphql apis เราจะใช้ rest หรือ graphql apis เพื่อดำเนินการ crud ตัวอย่างเช่น เพื่อดึงรายการโดยใช้ 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(); รวมการเรียก api ที่คล้ายกันเข้ากับองค์ประกอบ polymer ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – เสริมความปลอดภัยของ backend การนำ access control lists (acls) ไปใช้ ปกป้องข้อมูลของคุณโดยการใช้ acls กับวัตถุ ตัวอย่างเช่น เพื่อสร้างรายการที่จำกัด 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); } } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ให้ตั้งค่า clps สำหรับแต่ละคอลเลกชันเพื่อกำหนดกฎการเข้าถึงเริ่มต้น การกำหนดค่านี้จะทำให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การตรวจสอบสิทธิ์ผู้ใช้ใน polymer การสร้างบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse ในการจัดการการตรวจสอบสิทธิ์ ในโปรเจกต์ polymer ของคุณ ให้ดำเนินการลงทะเบียนและเข้าสู่ระบบผู้ใช้ตามที่แสดงด้านล่าง // 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); } } สามารถใช้วิธีการที่คล้ายกันสำหรับการเข้าสู่ระบบและการจัดการเซสชัน โดยมีฟีเจอร์เพิ่มเติมเช่นการตรวจสอบอีเมลและการรีเซ็ตรหัสผ่านที่กำหนดค่าผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ frontend polymer ของคุณด้วยการปรับใช้เว็บ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์แอปพลิเคชัน polymer ของคุณได้อย่างราบรื่นโดยการเชื่อมโยงกับที่เก็บ github ของคุณ ปฏิบัติตามขั้นตอนเหล่านี้เพื่อปรับใช้แอปของคุณ 7 1 การสร้างเวอร์ชันการผลิตของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล ดำเนินการคำสั่งสร้าง polymer build คำสั่งนี้จะสร้าง build โฟลเดอร์ที่มีไฟล์สแตติกที่ปรับให้เหมาะสมทั้งหมด ตรวจสอบการสร้าง ตรวจสอบให้แน่ใจว่า build โฟลเดอร์มีไฟล์ index html พร้อมกับไดเรกทอรีทรัพย์สินที่จำเป็น 7 2 การจัดระเบียบและอัปโหลดโค้ดต้นฉบับของคุณ ที่เก็บของคุณควรมีโค้ดต้นฉบับทั้งหมดสำหรับส่วนหน้า polymer ของคุณ โครงสร้างไดเรกทอรีตัวอย่างอาจมีลักษณะดังนี้ 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 ตัวอย่าง 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'; ตัวอย่าง 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); การส่งโค้ดของคุณไปยัง github เริ่มต้นรีโพซิทอรี git (ถ้ายังไม่ได้ทำ) git init จัดเตรียมไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "initial commit for polymer frontend" สร้างรีโพซิทอรี github ตั้งชื่อว่า basic crud app polymer frontend ส่งโค้ดของคุณไปยัง github git remote add origin https //github com/your username/basic crud app polymer frontend git git push u origin main 7 3 การเชื่อมต่อรีโพซิทอรี github ของคุณกับการปรับใช้เว็บ เข้าถึงการปรับใช้เว็บ ลงชื่อเข้าใช้ back4app ไปที่โปรเจกต์ของคุณ ( basic crud app polymer ), และเลือกฟีเจอร์ web deployment รวม github ทำตามคำแนะนำเพื่อเชื่อมต่อบัญชี github ของคุณ เพื่อให้ back4app สามารถเข้าถึงรีโพซิทอรีของคุณได้ เลือกรีโพซิทอรีและสาขาของคุณ เลือกรีโพซิทอรี (เช่น basic crud app polymer frontend ) และสาขาที่เหมาะสม (เช่น main ) 7 4 การกำหนดค่าการตั้งค่าการปรับใช้ ระบุรายละเอียดดังต่อไปนี้ คำสั่งสร้าง หาก build โฟลเดอร์ยังไม่ได้ถูกสร้างล่วงหน้า ให้ตั้งค่าคำสั่ง (เช่น polymer build ) back4app จะดำเนินการนี้ในระหว่างการปรับใช้ ไดเรกทอรีผลลัพธ์ ตั้งค่าให้เป็น build เพื่อให้ back4app ระบุไฟล์เว็บไซต์แบบสแตติกของคุณ ตัวแปรสภาพแวดล้อม รวมตัวแปรที่จำเป็น (เช่น คีย์ api) ในการกำหนดค่าการปรับใช้ 7 5 การสร้าง container สำหรับแอปพลิเคชัน polymer ของคุณด้วย docker หาก docker เป็นตัวเลือกการปรับใช้ของคุณ ให้รวม dockerfile ในที่เก็บของคุณคล้ายกับ # 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;"] รวม dockerfile นี้ในโปรเจกต์ของคุณและเลือก docker เป็นตัวเลือกการปรับใช้ใน back4app 7 6 การปรับใช้แอปพลิเคชันของคุณ คลิกปุ่มปรับใช้ เมื่อการตั้งค่าของคุณได้รับการยืนยัน ให้กด ปรับใช้ ดูขั้นตอนการสร้าง back4app จะดึงโค้ดของคุณ รันคำสั่งสร้าง และปรับใช้แอปที่บรรจุในคอนเทนเนอร์ของคุณ ดึง url ของคุณ หลังจากการปรับใช้ คุณจะได้รับ url ที่แอปพลิเคชัน polymer ของคุณสามารถเข้าถึงได้ 7 7 การทดสอบการปรับใช้ของคุณ เยี่ยมชม url เปิดลิงก์ที่ให้ไว้ในเบราว์เซอร์ของคุณ ตรวจสอบฟังก์ชันการทำงาน ตรวจสอบว่าทุกเส้นทางโหลดได้อย่างถูกต้องและทรัพย์สินเช่น css, javascript และภาพแสดงตามที่คาดไว้ แก้ไขปัญหา หากเกิดปัญหาใด ๆ ให้ตรวจสอบบันทึกการปรับใช้และการตั้งค่าการรวม github บน back4app ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ทำได้ดีมาก! คุณได้สร้างแอปพลิเคชัน crud ที่สมบูรณ์แบบโดยใช้ polymer และ back4app สำเร็จแล้ว โครงการของคุณ, basic crud app polymer , ตอนนี้มีการจัดการคอลเลกชันที่ชัดเจนสำหรับรายการและผู้ใช้ ซึ่งจัดการได้อย่างราบรื่นผ่านแอปผู้ดูแลระบบ พร้อมกับส่วนหน้า polymer ที่ปลอดภัยและรวมเข้าด้วยกัน ขั้นตอนถัดไป ปรับปรุงส่วนหน้า เพิ่มฟีเจอร์เช่น การดูรายละเอียดรายการ, ฟังก์ชันการค้นหา, หรือการอัปเดตแบบเรียลไทม์ ขยายฟังก์ชันการทำงาน รวมตรรกะด้านหลังเพิ่มเติมด้วย cloud functions หรือ api ของบุคคลที่สาม สำรวจเพิ่มเติม ตรวจสอบ เอกสาร back4app https //www back4app com/docs สำหรับการกำหนดค่าที่ซับซ้อนและการปรับปรุงประสิทธิภาพ ด้วยทักษะเหล่านี้ คุณมีความพร้อมที่จะสร้างแบ็กเอนด์ crud ที่สามารถขยายได้และปรับใช้แอปพลิเคชันเว็บที่แข็งแกร่งด้วย polymer และ back4app ขอให้สนุกกับการเขียนโค้ด!