How to Build a CRUD App with Ionic?

บทนำ ในคู่มือนี้ คุณจะสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ครอบคลุมโดยใช้ ionic บทเรียนนี้แสดงให้เห็นถึงวิธีการตั้งค่าแอปที่จัดการข้อมูลได้อย่างมีประสิทธิภาพในขณะที่รวมเข้ากับ back4app เป็นบริการแบ็กเอนด์ของคุณ คุณจะเริ่มต้นด้วยการกำหนดค่าโครงการ back4app ที่เรียกว่า basic crud app ionic เพื่อใช้เป็นที่เก็บข้อมูลที่แข็งแกร่งของคุณ หลังจากนั้น คุณจะออกแบบสคีมาข้อมูลที่สามารถขยายได้โดยการกำหนดคอลเลกชันและฟิลด์—ไม่ว่าจะทำด้วยตนเองหรือโดยการใช้ back4app ai agent สิ่งนี้จะทำให้แน่ใจว่าแบ็กเอนด์ของแอปพลิเคชันของคุณพร้อมที่จะจัดการการดำเนินการข้อมูลที่สำคัญ ถัดไป คุณจะใช้ประโยชน์จาก back4app admin app ที่ใช้งานง่าย ซึ่งมีอินเทอร์เฟซแบบลากและวางสำหรับการจัดการข้อมูลอย่างราบรื่น ทำให้สามารถดำเนินการ crud ได้อย่างง่ายดาย สุดท้าย คุณจะรวมส่วนหน้า ionic ของคุณเข้ากับ back4app โดยใช้ rest/graphql calls และรักษาความปลอดภัยให้กับแบ็กเอนด์ของคุณด้วยการควบคุมการเข้าถึงขั้นสูง เมื่อสิ้นสุดบทเรียนนี้ คุณจะได้สร้างแอปพลิเคชัน ionic ที่พร้อมสำหรับการผลิต ซึ่งไม่เพียงแต่รองรับฟังก์ชัน crud พื้นฐาน แต่ยังรวมถึงการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลที่แข็งแกร่ง ข้อคิดสำคัญ เข้าใจวิธีการสร้างแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพโดยใช้บริการแบ็กเอนด์ที่เชื่อถือได้ เรียนรู้วิธีการออกแบบสคีมาของแบ็กเอนด์ที่สามารถขยายได้และรวมเข้ากับส่วนหน้า ionic เพื่อประสบการณ์ผู้ใช้ที่เหนือกว่า สำรวจวิธีการจัดการข้อมูลผ่านอินเทอร์เฟซที่ใช้งานง่ายแบบลากและวางที่จัดเตรียมโดย back4app admin app รับข้อมูลเชิงลึกเกี่ยวกับการรักษาความปลอดภัยให้กับแบ็กเอนด์ของคุณด้วยมาตรการควบคุมการเข้าถึง ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี บัญชี back4app และโครงการที่ใช้งานอยู่ สำหรับคำแนะนำ โปรดไปที่ เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา ionic ติดตั้ง ionic cli โดยทำตามคำแนะนำที่ เอกสาร ionic framework https //ionicframework com/docs/intro/cli ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง node js (v14 หรือสูงกว่า) แล้ว ความคุ้นเคยกับ typescript, angular (หรือเฟรมเวิร์กที่คุณชื่นชอบสำหรับ ionic), และ rest apis ดูที่ เอกสาร ionic https //ionicframework com/docs เพื่อข้อมูลเพิ่มเติม ขั้นตอนที่ 1 – การตั้งค่าโครงการ การสร้างโครงการ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ เลือก “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโครงการของคุณว่า basic crud app ionic และทำตามคำแนะนำเพื่อเสร็จสิ้นการตั้งค่า สร้างโครงการใหม่ เมื่อโครงการของคุณถูกสร้างขึ้น มันจะปรากฏในแดชบอร์ด back4app ของคุณ ซึ่งเป็นพื้นฐานสำหรับการกำหนดค่าฝั่งหลังของคุณ ขั้นตอนที่ 2 – การออกแบบสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud ของคุณ คุณจะต้องกำหนดหลายคอลเลกชัน ด้านล่างนี้คือตัวอย่างของคอลเลกชันและฟิลด์ที่เกี่ยวข้องเพื่อจัดโครงสร้างฐานข้อมูลของคุณอย่างมีประสิทธิภาพ 1\ คอลเลกชันรายการ คอลเลกชันนี้มีรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือตำแหน่งของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ การเก็บรวบรวมผู้ใช้ การเก็บรวบรวมนี้เก็บข้อมูลประจำตัวของผู้ใช้และรายละเอียดที่เกี่ยวข้อง สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ สร้างเมื่อ วันที่ เวลาที่ผู้ใช้ถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่ข้อมูลผู้ใช้ถูกแก้ไข คุณสามารถตั้งค่าการรวบรวมเหล่านี้โดยตรงในแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละคลาสและเพิ่มคอลัมน์ที่เหมาะสม สร้างคลาสใหม่ กำหนดค่าฟิลด์แต่ละฟิลด์ได้อย่างง่ายดายโดยการเลือกประเภทข้อมูล ตั้งชื่อ และตั้งค่าเริ่มต้นหรือข้อกำหนด สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent ช่วยทำให้กระบวนการสร้าง schema ง่ายขึ้น โดยการอธิบายโมเดลข้อมูลของคุณในคำสั่ง ตัวแทนจะสร้างคอลเลกชันและฟิลด์ที่จำเป็นโดยอัตโนมัติ วิธีการใช้ ai agent เข้าถึง ai agent ไปที่ ai agent ผ่านแดชบอร์ด back4app ของคุณ กำหนดโมเดลข้อมูลของคุณ ป้อนคำสั่งที่ละเอียดซึ่งระบุคอลเลกชันที่ต้องการและฟิลด์ของพวกเขา ตรวจสอบและนำไปใช้ ประเมิน schema ที่แนะนำและนำไปใช้ในโครงการของคุณ ตัวอย่างคำสั่ง create the following collections for 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) วิธีการนี้ไม่เพียงแต่ช่วยประหยัดเวลา แต่ยังช่วยให้มั่นใจในความสอดคล้องและการตั้งค่าที่เหมาะสมสำหรับแบ็กเอนด์ของคุณ ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบและจัดการการดำเนินการ crud ภาพรวมของแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app เป็นเครื่องมือที่ไม่ต้องเขียนโค้ดที่ช่วยให้คุณจัดการข้อมูลแบ็คเอนด์ได้อย่างง่ายดายผ่านอินเทอร์เฟซแบบลากและวาง เครื่องมือนี้ใช้งานง่ายช่วยให้คุณสามารถดำเนินการ crud ได้อย่างไม่มีปัญหา การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างบัญชีผู้ดูแลระบบแรกของคุณ ขั้นตอนนี้ยังตั้งค่าบทบาท (เช่น, b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อเริ่มจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การจัดการการดำเนินการ crud ผ่านแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบ คุณสามารถ เพิ่มบันทึก คลิกที่ปุ่ม “เพิ่มบันทึก” ในคอลเลกชัน (เช่น รายการ) เพื่อแทรกข้อมูลใหม่ ดู/แก้ไขบันทึก เลือกข้อมูลเพื่อดูหรือแก้ไขรายละเอียด ลบบันทึก ใช้ฟังก์ชันลบเพื่อลบข้อมูลที่ไม่จำเป็น อินเทอร์เฟซที่เรียบง่ายนี้ช่วยเพิ่มประสบการณ์ผู้ใช้โดยการทำให้การจัดการข้อมูลง่ายขึ้น ขั้นตอนที่ 4 – การรวม ionic กับ back4app เมื่อคุณตั้งค่าด้านหลังเสร็จแล้ว ถึงเวลาที่จะเชื่อมต่อส่วนหน้า ionic ของคุณกับ back4app การใช้ rest หรือ graphql คุณสามารถดำเนินการ crud โดยใช้ rest หรือ graphql ตัวอย่างเช่น เพื่อดึงข้อมูลรายการโดยใช้ rest // example rest call within an ionic service async function fetchitems() { 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('fetched items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); รวมการเรียก api เหล่านี้เข้ากับส่วนประกอบ ionic ของคุณตามความต้องการของแอปพลิเคชัน ขั้นตอนที่ 5 – การรักษาความปลอดภัยของแบ็คเอนด์ การตั้งค่ารายการควบคุมการเข้าถึง (acls) เพิ่มความปลอดภัยของข้อมูลของคุณโดยการใช้ acls กับวัตถุ ตัวอย่างเช่น เพื่อสร้างรายการส่วนตัว async function createprivateitem(itemdata any, owneruser any) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl so that only the owner can 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 ในการจัดการการตรวจสอบ ในแอปพลิเคชัน ionic ของคุณ ให้ดำเนินการลงทะเบียนผู้ใช้และการเข้าสู่ระบบดังนี้ // src/app/auth/auth page ts import { component } from '@angular/core'; import parse from ' /parseconfig'; @component({ selector 'app auth', templateurl ' /auth page html', styleurls \[' /auth page scss'], }) export class authpage { username string = ''; password string = ''; email string = ''; async signup() { 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 any) { alert('registration error ' + error message); } } } สามารถทำตามรูปแบบที่คล้ายกันเพื่อดำเนินการเข้าสู่ระบบและการจัดการเซสชัน ฟีเจอร์เพิ่มเติมเช่นการเข้าสู่ระบบด้วยโซเชียล การตรวจสอบอีเมล และการกู้คืนรหัสผ่านก็สามารถกำหนดค่าได้ผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – สรุปและทิศทางในอนาคต ขอแสดงความยินดี! คุณได้พัฒนาแอปพลิเคชัน crud เบื้องต้นโดยใช้ ionic ที่รวมเข้ากับ back4app สำเร็จแล้ว ในบทเรียนนี้ คุณ กำหนดโปรเจกต์ชื่อ basic crud app ionic บน back4app ออกแบบคอลเลกชันฐานข้อมูลที่ละเอียดสำหรับ items และ users จัดการข้อมูลของคุณโดยใช้ back4app admin app ที่มีประสิทธิภาพ เชื่อมต่อส่วนหน้า ionic ของคุณกับส่วนหลังโดยใช้ rest/graphql apis รักษาความปลอดภัยให้กับส่วนหลังของคุณด้วย acls และ clps ที่แข็งแกร่ง ดำเนินการตรวจสอบสิทธิ์ผู้ใช้เพื่อจัดการบัญชีผู้ใช้ ขั้นตอนถัดไป ขยายส่วนหน้า เพิ่มมุมมองเพิ่มเติม การนำทาง และการอัปเดตแบบเรียลไทม์ให้กับแอปพลิเคชัน ionic ของคุณ รวมฟีเจอร์ขั้นสูง พิจารณาการรวมฟังก์ชันคลาวด์ การรวม api ของบุคคลที่สาม หรือการควบคุมการเข้าถึงตามบทบาทที่ปรับปรุง ปรึกษาแหล่งข้อมูลเพิ่มเติม สำรวจ เอกสาร back4app https //www back4app com/docs และ แหล่งข้อมูล ionic https //ionicframework com/docs สำหรับเทคนิคการปรับแต่งและเพิ่มประสิทธิภาพขั้นสูง โดยการติดตามบทแนะนำนี้ คุณมีทักษะในการสร้างและรักษาความปลอดภัยให้กับแอปพลิเคชัน crud ที่มีพลศาสตร์และพร้อมใช้งานในผลิตภัณฑ์โดยใช้ ionic และ back4app ขอให้สนุกกับการเขียนโค้ดและการทดลองเพิ่มเติม!