How to Develop a Basic CRUD Mobile App with NativeScript?

ภาพรวม ในคู่มือนี้ คุณจะสร้างแอปพลิเคชันมือถือ crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่มีฟีเจอร์ครบถ้วนโดยใช้ nativescript บทเรียนนี้จะพาคุณไปตั้งค่าโปรเจกต์ของคุณ, กำหนดค่าพื้นหลังที่แข็งแกร่งบน back4app, และรวม frontend ของ nativescript เพื่อจัดการและอัปเดตข้อมูลได้อย่างราบรื่น เราจะเริ่มต้นด้วยการสร้างโปรเจกต์ back4app ใหม่ชื่อ basic crud app ns , ซึ่งทำหน้าที่เป็นกระดูกสันหลังสำหรับการดำเนินการข้อมูลของคุณ จากนั้นคุณจะกำหนดโครงสร้างฐานข้อมูลที่ยืดหยุ่นโดยการตั้งค่าคอลเลกชันและฟิลด์ ไม่ว่าจะทำด้วยตนเองหรือโดยการใช้ back4app ai agent หลังจากนั้น คุณจะใช้ back4app admin app—อินเทอร์เฟซที่ไม่ต้องเขียนโค้ดที่ออกแบบมาเพื่อการจัดการข้อมูลที่ง่ายดาย—เพื่อทำงาน crud อย่างมีประสิทธิภาพ สุดท้าย คุณจะรวมแอปมือถือ nativescript ของคุณกับ back4app โดยใช้ rest apis เพื่อให้แน่ใจว่าพื้นหลังของคุณมีความปลอดภัยด้วยการควบคุมการเข้าถึงที่ทันสมัย เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอปพลิเคชันมือถือที่พร้อมสำหรับการผลิตซึ่งไม่เพียงแต่ทำงาน crud ที่จำเป็น แต่ยังรวมถึงการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลอย่างปลอดภัย ข้อมูลเชิงลึกหลัก เชี่ยวชาญในการสร้างแอปมือถือ crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพโดยใช้พื้นหลังที่เชื่อถือได้ เรียนรู้วิธีการออกแบบฐานข้อมูลที่สามารถขยายได้และรวมเข้ากับ frontend ของ nativescript ได้อย่างราบรื่น ค้นพบวิธีการใช้ส่วนติดต่อผู้ดูแลระบบแบบลากและวาง (back4app admin app) เพื่อทำให้การจัดการข้อมูลง่ายขึ้น เข้าใจแนวทางปฏิบัติที่ดีที่สุดในการรักษาความปลอดภัยพื้นหลังของคุณด้วย acls และ class level permissions ข้อกำหนดเบื้องต้น บัญชี back4app พร้อมตั้งค่าโครงการใหม่ หากคุณต้องการความช่วยเหลือ โปรดดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา nativescript ติดตั้ง nativescript cli และตั้งค่าสภาพแวดล้อมของคุณโดยทำตาม เอกสาร nativescript https //docs nativescript org/start/quick setup ความรู้พื้นฐานเกี่ยวกับ javascript/typescript, nativescript และ restful apis ทำความคุ้นเคยกับ คู่มือ nativescript https //docs nativescript org/ หากจำเป็น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมี ขั้นตอนที่ 1 – การเริ่มต้นโครงการ การสร้างโครงการ back4app ใหม่ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ เลือกตัวเลือก “แอปใหม่” ตั้งชื่อโครงการของคุณ basic crud app ns และทำตามคำแนะนำเพื่อสร้างมัน สร้างโครงการใหม่ เมื่อโครงการของคุณถูกตั้งค่าแล้ว มันจะปรากฏในแดชบอร์ดของคุณ พร้อมสำหรับการกำหนดค่าและการจัดการด้านหลัง ขั้นตอนที่ 2 – การออกแบบสคีมาฐานข้อมูล การสร้างโมเดลข้อมูลของคุณ สำหรับแอปมือถือ crud นี้ คุณจะสร้างคอลเลกชันหลัก ด้านล่างนี้คือคอลเลกชันตัวอย่างพร้อมกับฟิลด์และประเภทข้อมูลที่จำเป็นในการตั้งค่าโครงสร้างข้อมูลของคุณ ซึ่งช่วยให้สามารถดำเนินการพื้นฐานในการสร้าง อ่าน อัปเดต และลบข้อมูลได้ 1\ คอลเลกชันรายการ คอลเลกชันนี้มีรายละเอียดสำหรับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวหลักที่สร้างโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่รายการถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่รายการถูกแก้ไขล่าสุด 2\ การรวบรวมผู้ใช้ คอลเลกชันนี้เก็บข้อมูลรับรองและรายละเอียดของผู้ใช้ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวหลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันของผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่ถูกแฮชอย่างปลอดภัย สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่อัปเดตล่าสุดสำหรับโปรไฟล์ผู้ใช้ คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการเพิ่มคลาสใหม่สำหรับแต่ละคอลเลกชันและกำหนดคอลัมน์ที่เกี่ยวข้อง สร้างคลาสใหม่ กำหนดแต่ละฟิลด์โดยการเลือกประเภทข้อมูล ตั้งชื่อ และระบุค่าเริ่มต้นหรือข้อกำหนด สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการตั้งค่า schema back4app ai agent เป็นเครื่องมือที่มีประสิทธิภาพภายในแดชบอร์ดของคุณที่สามารถสร้าง schema ฐานข้อมูลของคุณโดยอัตโนมัติตามคำสั่งที่อธิบายถึงคอลเลกชันและฟิลด์ที่คุณต้องการ ฟีเจอร์นี้ช่วยให้กระบวนการเป็นไปอย่างราบรื่นและมั่นใจในความสอดคล้อง วิธีการใช้ ai agent เริ่มใช้งาน ai agent เข้าถึงได้จากแดชบอร์ด back4app หรือการตั้งค่าโปรเจกต์ รายละเอียดโมเดลข้อมูลของคุณ ป้อนคำสั่งที่อธิบายถึงคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน ตรวจสอบข้อเสนอ schema ที่สร้างขึ้นและนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างคำสั่ง create these 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) กระบวนการนี้ช่วยประหยัดเวลาและทำให้ schema ของคุณมีความสอดคล้องและได้รับการปรับให้เหมาะสม ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบและดำเนินการ crud แนะนำแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซที่ไม่ต้องเขียนโค้ดเพื่อจัดการข้อมูลแบ็กเอนด์ของคุณได้อย่างง่ายดาย การออกแบบแบบลากและวางช่วยให้การดำเนินการ crud เป็นไปอย่างรวดเร็วและมีประสิทธิภาพ วิธีเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” จากนั้นคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างผู้ใช้ผู้ดูแลระบบคนแรก ซึ่งจะกำหนดบทบาท (เช่น, b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อเริ่มจัดการคอลเลกชันของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ด้วยแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบ คุณสามารถ สร้างบันทึก ใช้ตัวเลือก “เพิ่มบันทึก” ภายในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อแทรกข้อมูลใหม่ อ่าน/แก้ไขบันทึก คลิกที่บันทึกใด ๆ เพื่อดูรายละเอียดหรือแก้ไขข้อมูล ลบบันทึก เลือกตัวเลือกลบเพื่อลบบันทึกที่ไม่ต้องการอีกต่อไป เครื่องมือนี้ช่วยเพิ่มประสบการณ์ผู้ใช้โดยการทำให้การจัดการข้อมูลง่ายขึ้น ขั้นตอนที่ 4 – เชื่อมต่อ nativescript กับ back4app หลังจากตั้งค่าแบ็คเอนด์และจัดการข้อมูลผ่านแอปผู้ดูแลระบบ ขั้นตอนถัดไปคือการเชื่อมต่อแอปมือถือ nativescript ของคุณกับ back4app การใช้ rest apis สำหรับการรวมระบบ เนื่องจากการรวม sdk อาจไม่เหมาะสมสำหรับ nativescript ในสถานการณ์นี้ คุณสามารถใช้ rest apis เพื่อดำเนินการ crud ตัวอย่าง การดึงข้อมูลด้วย rest ด้านล่างนี้เป็นตัวอย่างวิธีการดึงรายการจากฐานข้อมูล back4app ของคุณโดยใช้การเรียก rest ในไฟล์บริการ nativescript // app/services/item service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function fetchitems() { try { const response = await http request({ url 'https //parseapi back4app com/classes/items', method 'get', headers { 'x parse application id' application id, 'x parse rest api key' rest api key } }); const data = response content tojson(); return data results; } catch (error) { console error('error fetching items ', error); throw error; } } รวมการเรียก rest api ที่คล้ายกันภายในส่วนประกอบ nativescript ของคุณเพื่อจัดการการสร้าง การอัปเดต และการลบ ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend การใช้ access control lists (acls) ปกป้องข้อมูลของคุณโดยการตั้งค่า acl สำหรับแต่ละวัตถุ ตัวอย่างเช่น เพื่อสร้างรายการส่วนตัว ให้ใช้วิธีการดังต่อไปนี้ // app/services/item service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function createprivateitem(itemdata { title string; description string }, ownerid string) { const payload = { title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }; try { const response = await http request({ url 'https //parseapi back4app com/classes/items', method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, content json stringify(payload) }); return response content tojson(); } catch (error) { console error('error creating item ', error); throw error; } } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อกำหนดสิทธิ์การเข้าถึงเริ่มต้น สิ่งนี้ช่วยให้มั่นใจได้ว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงหรือแก้ไขข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าการจัดการบัญชี back4app ใช้คลาสผู้ใช้ของ parse ในการจัดการการตรวจสอบสิทธิ์ ในแอป nativescript ของคุณ ให้ดำเนินการลงทะเบียนและกระบวนการเข้าสู่ระบบตามที่แสดงด้านล่าง ตัวอย่าง การลงทะเบียนผู้ใช้ // app/services/auth service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function signup(username string, password string, email string) { const payload = { username, password, email }; try { const response = await http request({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, content json stringify(payload) }); return response content tojson(); } catch (error) { console error('sign up error ', error); throw error; } } สามารถใช้วิธีการที่คล้ายกันในการเข้าสู่ระบบและจัดการเซสชันผู้ใช้ ฟังก์ชันเพิ่มเติมเช่นการเข้าสู่ระบบด้วยโซเชียล การยืนยันอีเมล และการรีเซ็ตรหัสผ่านสามารถกำหนดค่าได้ผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – สรุปและทิศทางในอนาคต ทำได้ดี! ตอนนี้คุณได้สร้างแอปพลิเคชันมือถือ crud เบื้องต้นที่สมบูรณ์โดยใช้ nativescript และ back4app โครงการของคุณ, basic crud app ns , รวมถึงแบ็กเอนด์ที่กำหนดไว้อย่างชัดเจนพร้อมคอลเลกชันสำหรับ items และ users ซึ่งจัดการได้อย่างราบรื่นผ่าน admin app คุณยังได้รวมส่วนหน้า nativescript ของคุณกับ back4app ผ่าน rest apis และปกป้องข้อมูลของคุณด้วย acls และ clps ที่แข็งแกร่ง ขั้นตอนถัดไป ปรับปรุงแอปมือถือของคุณ เพิ่มฟีเจอร์เช่นมุมมองรายละเอียด ฟังก์ชันการค้นหา และการแจ้งเตือนแบบพุช ขยายฟังก์ชันการทำงาน รวมฟีเจอร์แบ็กเอนด์ขั้นสูงเช่น cloud functions หรือบริการ api ของบุคคลที่สาม การเรียนรู้เพิ่มเติม สำรวจ เอกสาร back4app https //www back4app com/docs และแหล่งข้อมูล nativescript เพิ่มเติมเพื่อปรับปรุงทักษะของคุณ ขอให้สนุกกับการเขียนโค้ดและโชคดีในโครงการแอปมือถือในอนาคตของคุณ!