How to Build a CRUD App with React Native?

ภาพรวม ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน react native ที่ทำการดำเนินการ crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่จำเป็น โดยใช้ back4app เป็นแบ็คเอนด์คลาวด์ของคุณ คู่มือนี้จะพาคุณไปสร้างโปรเจกต์ใน back4app ตั้งค่ารูปแบบข้อมูลที่ยืดหยุ่น และรวมแอป react native ของคุณเข้ากับแบ็คเอนด์โดยใช้ restful apis ในตอนแรก คุณจะสร้างโปรเจกต์ back4app ที่ชื่อว่า basic crud app reactnative เพื่อใช้เป็นแบ็คเอนด์ของคุณ จากนั้นคุณจะออกแบบสคีมาข้อมูลของคุณโดยการกำหนดคลาสและฟิลด์ในแดชบอร์ด back4app ด้วยตนเองหรือใช้ ai agent ที่รวมอยู่เพื่อขอความช่วยเหลือ หลังจากตั้งค่าแบ็คเอนด์ของคุณแล้ว คุณจะใช้ back4app admin app ซึ่งมีอินเทอร์เฟซที่ใช้งานง่ายแบบลากและวางสำหรับการจัดการข้อมูลของคุณ ทำให้การดำเนินการ crud ง่ายขึ้น เมื่อสิ้นสุดคู่มือนี้ คุณจะมีแอปพลิเคชัน react native ที่ทำงานได้อย่างสมบูรณ์ซึ่งสามารถสร้าง อ่าน อัปเดต และลบระเบียน พร้อมทั้งรองรับการตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัยและการจัดการข้อมูล ประโยชน์หลัก สร้างแอปมือถือ เรียนรู้การพัฒนาแอปพลิเคชัน react native crud พร้อมกับแบ็คเอนด์ที่แข็งแกร่ง การรวมแบ็คเอนด์ เข้าใจวิธีการออกแบบและรวมโมเดลข้อมูลที่สามารถขยายได้โดยใช้ back4app การจัดการข้อมูลที่ไม่ยุ่งยาก ใช้แอปผู้ดูแล back4app เพื่อจัดการข้อมูลของแอปพลิเคชันของคุณอย่างรวดเร็ว การดำเนินงานที่ปลอดภัย ใช้การตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัยและมาตรการความเป็นส่วนตัวของข้อมูล ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี บัญชี back4app ที่ใช้งานอยู่พร้อมกับโปรเจกต์ใหม่ที่ตั้งค่าไว้ ต้องการความช่วยเหลือ? ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา react native ติดตั้งเครื่องมือเช่น node js, npm (หรือ yarn) และ react native cli expo ยังสามารถใช้สำหรับการสร้างต้นแบบอย่างรวดเร็ว ความคุ้นเคยกับ react, javascript และ rest apis ปรึกษา เอกสาร react native https //reactnative dev/docs/getting started หากคุณต้องการการทบทวน ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ back4app ของคุณ การสร้างโปรเจกต์ back4app ของคุณ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” บนแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app reactnative และทำตามคำแนะนำเพื่อเสร็จสิ้นการตั้งค่า สร้างโปรเจกต์ใหม่ หลังจากที่โปรเจกต์ของคุณถูกสร้างขึ้น มันจะปรากฏบนแดชบอร์ดของคุณ ซึ่งเป็นการวางรากฐานสำหรับการกำหนดค่าฝั่งหลังของคุณ ขั้นตอนที่ 2 – การสร้างโมเดลข้อมูลของคุณ การจัดโครงสร้างข้อมูลของคุณ สำหรับแอป crud นี้ คุณจะต้องกำหนดคอลเลกชันสองสามรายการภายในโปรเจกต์ back4app ของคุณ ด้านล่างนี้เป็นตัวอย่างของคอลเลกชันหลักและฟิลด์ที่จำเป็นเพื่อสนับสนุนฟังก์ชันการทำงานหลักของ crud 1\ คอลเลกชัน รายการ คอลเลกชันนี้เก็บรายละเอียดสำหรับแต่ละรายการ สนาม ประเภท คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่รายการถูกเพิ่มเข้ามา อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ การเก็บรวบรวม ผู้ใช้ การรวบรวมนี้จัดการข้อมูลประจำตัวของผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภท คำอธิบาย id รหัสวัตถุ สร้างหมายเลขประจำตัวที่ไม่ซ้ำกันโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลของผู้ใช้ (ต้องไม่ซ้ำกัน) รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสสำหรับการเข้าสู่ระบบอย่างปลอดภัย สร้างเมื่อ วันที่ เวลาที่บัญชีถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่รายละเอียดบัญชีได้รับการปรับปรุงล่าสุด คุณสามารถกำหนดคอลเลกชันเหล่านี้และฟิลด์ของพวกเขาผ่านแดชบอร์ด back4app สร้างคลาสใหม่ คุณสามารถเพิ่มฟิลด์ใหม่ได้โดยการเลือกประเภทข้อมูล, ป้อนชื่อฟิลด์, ตั้งค่าค่าปริยาย, และทำเครื่องหมายว่าจำเป็นหรือไม่ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema ai agent ที่รวมอยู่ใน back4app สามารถสร้าง schema ข้อมูลของคุณโดยอัตโนมัติจากคำอธิบายที่ง่าย เครื่องมือนี้ช่วยให้การตั้งค่าโครงการของคุณเป็นไปอย่างราบรื่นและมั่นใจได้ว่ารูปแบบข้อมูลของคุณรองรับการดำเนินการ crud ที่จำเป็น วิธีการใช้ ai agent เปิด ai agent ไปที่การตั้งค่าโปรเจกต์ของคุณในแดชบอร์ด back4app และเลือก ai agent อธิบาย schema ของคุณ ป้อนคำอธิบายรายละเอียดของคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน ai agent จะเสนอ schema; ตรวจสอบและยืนยันเพื่อใช้การกำหนดค่า ตัวอย่างคำสั่ง create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) วิธีนี้ช่วยประหยัดเวลาและรับประกันความสอดคล้องในโมเดลข้อมูลของคุณ ขั้นตอนที่ 3 – การใช้แอปผู้ดูแลระบบสำหรับการจัดการข้อมูล ภาพรวมของแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app ให้ส่วนติดต่อที่ไม่ต้องเขียนโค้ดซึ่งทำให้การจัดการข้อมูลด้านหลังง่ายขึ้น ฟังก์ชันการลากและวางช่วยให้คุณสามารถดำเนินการ crud—การเพิ่ม, การดู, การอัปเดต, และการลบระเบียน—โดยไม่ต้องเขียนคำสั่งที่ซับซ้อน การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ คลิกที่ “แอปผู้ดูแล” และจากนั้นเลือก “เปิดใช้งานแอปผู้ดูแล” ตั้งค่าข้อมูลประจำตัวผู้ดูแล สร้างบัญชีผู้ดูแลเริ่มต้นของคุณ ซึ่งยังตั้งค่าบทบาทระบบเช่น b4aadminuser เปิดใช้งานแอปผู้ดูแล เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลเพื่อจัดการข้อมูลแอปพลิเคชันของคุณ แดชบอร์ดแอปผู้ดูแล การจัดการการดำเนินการ crud ผ่านแอปผู้ดูแล ภายในแอปผู้ดูแล คุณสามารถ เพิ่มระเบียนใหม่ ใช้ฟังก์ชัน “เพิ่มระเบียน” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อแนะนำข้อมูลใหม่ ตรวจสอบ/แก้ไขระเบียน เลือกระเบียนเพื่อตรวจสอบรายละเอียดหรืออัปเดตฟิลด์ของมัน ลบระเบียน ลบรายการที่ไม่จำเป็นอีกต่อไป เครื่องมือนี้ช่วยปรับปรุงการทำงานของคุณโดยทำให้การจัดการข้อมูลเป็นเรื่องง่าย ขั้นตอนที่ 4 – การรวมแอป react native ของคุณกับ back4app หลังจากตั้งค่าพื้นหลังของคุณแล้ว ถึงเวลาที่จะเชื่อมต่อแอป react native ของคุณกับ back4app การใช้ rest api สำหรับการรวมระบบ แม้ว่าจะมี parse sdk สำหรับ javascript แต่ในสภาพแวดล้อม react native คุณอาจเลือกใช้การเรียก rest api มาตรฐานเพื่อความยืดหยุ่น ด้านล่างนี้เป็นตัวอย่างวิธีการดำเนินการ crud โดยใช้ javascript fetch api ตัวอย่าง การดึงรายการ async function fetchitems() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'get', 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 fetching items ', error); } } export default fetchitems; ตัวอย่าง การสร้างรายการใหม่ async function createitem(title, description) { 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({ title, description }) }); const data = await response json(); console log('item created ', data); } catch (error) { console error('error creating item ', error); } } export { createitem }; คุณสามารถดำเนินการฟังก์ชันสำหรับการอัปเดตและลบรายการได้ในลักษณะเดียวกันโดยใช้วิธี http ที่เหมาะสม (put/post สำหรับการอัปเดตและ delete สำหรับการลบ) รวมฟังก์ชันเหล่านี้เข้ากับคอมโพเนนต์ react native ของคุณตามที่จำเป็นเพื่อให้การดำเนินการ crud ของคุณสมบูรณ์ ขั้นตอนที่ 5 – การเสริมความปลอดภัยของแบ็คเอนด์ การกำหนดค่ารายการควบคุมการเข้าถึง (acls) ปกป้องบันทึกของคุณโดยการตั้งค่า acls ตัวอย่างเช่น เพื่อให้แน่ใจว่าสิ่งของนั้นสามารถเข้าถึงได้โดยเจ้าของเท่านั้น async function createprivateitem(title, description, ownerid) { try { const acl = { " " { "read" false, "write" false }, \[ownerid] { "read" true, "write" true } }; 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({ title, description, acl acl }) }); const data = await response json(); console log('private item created ', data); } catch (error) { console error('error creating private item ', error); } } export { createprivateitem }; การตั้งค่าการอนุญาตระดับคลาส (clps) ปรับการอนุญาตเริ่มต้นสำหรับคอลเลกชันของคุณผ่านแดชบอร์ด back4app ซึ่งจะทำให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบแล้วเท่านั้นที่สามารถโต้ตอบกับประเภทข้อมูลบางประเภทได้ ขั้นตอนที่ 6 – การดำเนินการตรวจสอบผู้ใช้ การกำหนดค่าการจัดการผู้ใช้ back4app ใช้คอลเลกชันผู้ใช้ที่สร้างขึ้นในตัวเพื่อจัดการการตรวจสอบ ในแอป react native ของคุณ คุณสามารถจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้โดยใช้การเรียก rest api ตัวอย่าง การลงทะเบียนผู้ใช้ async function signup(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 data = await response json(); console log('user registered successfully ', data); } catch (error) { console error('error during sign up ', error); } } export { signup }; ตัวอย่าง การเข้าสู่ระบบผู้ใช้ async function login(username, password) { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('logged in user ', data); } catch (error) { console error('login failed ', error); } } export { login }; วิธีการนี้สามารถขยายเพื่อรวมการรีเซ็ตรหัสผ่าน การจัดการเซสชัน และฟีเจอร์การตรวจสอบสิทธิ์เพิ่มเติมได้ บทสรุปและขั้นตอนถัดไป ทำได้ดีมาก! คุณได้สร้างแอปพลิเคชัน react native crud ที่เชื่อมต่อกับ back4app สำเร็จแล้ว ในคู่มือนี้ คุณได้ตั้งค่าโครงการชื่อ basic crud app reactnative , ออกแบบสคีมาข้อมูลสำหรับ items และ users และจัดการแบ็กเอนด์ของคุณด้วย back4app admin app นอกจากนี้ คุณได้เชื่อมต่อแอปของคุณผ่าน rest apis และดำเนินการมาตรการด้านความปลอดภัยที่สำคัญและการตรวจสอบสิทธิ์ผู้ใช้ ต่อไปคืออะไร? ขยายแอปของคุณ เพิ่มฟีเจอร์เพิ่มเติม เช่น การกรองขั้นสูง การดูรายละเอียดรายการ หรือการอัปเดตข้อมูลแบบเรียลไทม์ ปรับปรุงความสามารถของแบ็กเอนด์ สำรวจฟังก์ชันคลาวด์ การรวมระบบจากบุคคลที่สาม หรือปรับแต่งนโยบายการควบคุมการเข้าถึงของคุณ เรียนรู้ต่อไป ตรวจสอบ เอกสาร back4app https //www back4app com/docs และบทเรียนเพิ่มเติมเพื่อพัฒนาทักษะของคุณ ขอให้สนุกกับการเขียนโค้ดและโชคดีในโครงการ react native ของคุณ!