How to Develop a Basic CRUD Application with SwiftUI?

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการพัฒนาแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, และลบ) ที่ทำงานได้อย่างสมบูรณ์โดยใช้ swiftui swiftui เป็นเฟรมเวิร์กสำหรับสร้างส่วนติดต่อผู้ใช้สำหรับ ios, ipados, watchos, tvos, visionos, และ macos เราจะใช้ back4app เป็นบริการแบ็กเอนด์ในการจัดการข้อมูลของเรา คู่มือนี้จะพาคุณไปตั้งค่าโปรเจกต์ back4app ของคุณ ออกแบบสคีมาฐานข้อมูลของคุณ รวมถึงการรวมเข้ากับ swiftui โดยใช้การเรียก api และการรักษาความปลอดภัยให้กับแบ็กเอนด์ของคุณ สิ่งที่คุณจะได้เรียนรู้ วิธีการสร้างแอป crud ที่จัดการการดำเนินการข้อมูลได้อย่างราบรื่น เทคนิคในการออกแบบแบ็กเอนด์ที่แข็งแกร่งและสามารถขยายได้ วิธีการเชื่อมต่อส่วนติดต่อ swiftui กับ back4app โดยใช้ rest apis วิธีการจัดการข้อมูลอย่างปลอดภัยด้วยการควบคุมการเข้าถึงขั้นสูง ข้อกำหนดเบื้องต้น บัญชี back4app ตรวจสอบให้แน่ใจว่าคุณได้ลงทะเบียนและตั้งค่าโปรเจกต์ใหม่บน back4app ดูที่ back4app quickstart https //www back4app com/docs/get started/new parse app เพื่อขอความช่วยเหลือ สภาพแวดล้อม swiftui ยืนยันว่าคุณได้ติดตั้ง xcode และสร้างโปรเจกต์ swiftui พื้นฐานแล้ว ความคุ้นเคย ความรู้พื้นฐานเกี่ยวกับ swift, swiftui, และ restful apis จะเป็นประโยชน์ ก่อนที่คุณจะเริ่ม ขั้นตอนที่ 1 – การสร้างโปรเจกต์ back4app ของคุณ เริ่มโปรเจกต์ใหม่บน back4app เข้าถึงแดชบอร์ด back4app ของคุณ โดยการเข้าสู่ระบบบัญชีของคุณ เลือก “แอปใหม่” เพื่อเริ่มโปรเจกต์ใหม่ ตั้งชื่อโปรเจกต์ของคุณ ตัวอย่างเช่น, basic crud app swiftui , และทำตามคำแนะนำบนหน้าจอเพื่อเสร็จสิ้นการตั้งค่า สร้างโปรเจกต์ใหม่ เมื่อโปรเจกต์ของคุณถูกสร้างขึ้น มันจะปรากฏในแดชบอร์ดของคุณ พร้อมที่จะตั้งค่าสำหรับการดำเนินการด้านหลัง ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การกำหนดโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณต้องกำหนดหลายคอลเลกชัน (คลาส) ด้านล่างนี้เป็นตัวอย่างที่สรุปคอลเลกชันหลักพร้อมกับฟิลด์และประเภทของพวกเขา 1\ การเก็บรวบรวม รายการ การเก็บรวบรวมนี้เก็บรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือตำแหน่งของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ เกี่ยวกับรายการ สร้างเมื่อ วันที่ เวลาที่ทำเครื่องหมายการสร้าง อัปเดตเมื่อ วันที่ เวลาของการอัปเดตล่าสุด 2\ การเก็บรวบรวม ผู้ใช้ การเก็บรวบรวมนี้ประกอบด้วยข้อมูลรับรองผู้ใช้และรายละเอียดโปรไฟล์ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับการเข้าสู่ระบบ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่มีการแก้ไขบัญชีล่าสุด คุณสามารถกำหนดคลาสเหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app โดยการสร้างคลาสใหม่และเพิ่มคอลัมน์สำหรับแต่ละฟิลด์ สร้างคลาสใหม่ ใช้เครื่องมือในแดชบอร์ดเพื่อกำหนดชื่อฟิลด์ ประเภท ค่าเริ่มต้น และสถานะที่จำเป็น สร้างคอลัมน์ การใช้ประโยชน์จาก back4app ai agent เอเจนต์ ai ของ back4app ช่วยให้กระบวนการสร้างสคีมาง่ายขึ้น มันสามารถสร้างสคีมาฐานข้อมูลของคุณโดยอัตโนมัติตามข้อความที่ให้ไว้ วิธีการใช้เอเจนต์ ai ค้นหาเอเจนต์ ai ลงชื่อเข้าใช้และไปที่ส่วนเอเจนต์ ai ในการตั้งค่าโปรเจกต์ของคุณ ส่งคำอธิบายสคีมาของคุณ ป้อนข้อความที่ละเอียดซึ่งระบุคอลเลกชันและฟิลด์ที่ต้องการ ตรวจสอบและดำเนินการ หลังจากการสร้าง ให้ตรวจสอบสคีมาและนำการเปลี่ยนแปลงไปใช้ ตัวอย่างข้อความ create these 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) ฟีเจอร์นี้ช่วยประหยัดเวลาและรับประกันความสอดคล้องในการตั้งค่าฐานข้อมูลของคุณ ขั้นตอนที่ 3 – การจัดการข้อมูลด้วยอินเทอร์เฟซผู้ดูแลระบบ ภาพรวมของอินเทอร์เฟซผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app เป็นเครื่องมือที่ไม่ต้องเขียนโค้ดซึ่งช่วยให้การจัดการข้อมูลง่ายขึ้น อินเทอร์เฟซที่ใช้งานง่ายแบบลากและวางช่วยให้คุณสามารถดำเนินการ crud ได้อย่างง่ายดาย เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแล” และจากนั้นเลือก “เปิดใช้งานแอปผู้ดูแล ” ตั้งค่าข้อมูลประจำตัว สร้างผู้ใช้ผู้ดูแลระบบเริ่มต้นของคุณ ซึ่งจะกำหนดบทบาทของระบบโดยอัตโนมัติ เปิดใช้งานแอปผู้ดูแล หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลเพื่อจัดการคอลเลกชันของคุณ แดชบอร์ดแอปผู้ดูแล การดำเนินการ crud ในอินเทอร์เฟซผู้ดูแลระบบ สร้าง ใช้ตัวเลือก “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อเพิ่มข้อมูลใหม่ อ่าน/อัปเดต คลิกที่บันทึกเพื่อดูรายละเอียดและแก้ไขฟิลด์ ลบ ลบบันทึกโดยใช้ฟังก์ชันลบเมื่อไม่ต้องการอีกต่อไป อินเทอร์เฟซนี้ช่วยเพิ่มความสะดวกในการใช้งานและทำให้การดำเนินการข้อมูลในชีวิตประจำวันง่ายขึ้น ขั้นตอนที่ 4 – การรวม swiftui กับ back4app เมื่อคุณมีแบ็กเอนด์แล้ว ถึงเวลาที่จะเชื่อมต่อแอปพลิเคชัน swiftui ของคุณกับ back4app การใช้ rest api calls ใน swiftui แทนที่จะพึ่งพา sdk เราจะใช้ rest api calls เพื่อโต้ตอบกับ back4app จากแอป swiftui ของเรา ตัวอย่าง การดึงรายการ สร้างมุมมอง swiftui ใหม่ (เช่น, itemslistview\ swift ) และเพิ่มโค้ดต่อไปนี้ import swiftui import combine struct item identifiable, codable { let id string let title string let description string } class itemsviewmodel observableobject { @published var items \[item] = \[] private var cancellables = set\<anycancellable>() func fetchitems() { guard let url = url(string "https //parseapi back4app com/classes/items") else { return } var request = urlrequest(url url) request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") urlsession shared datataskpublisher(for request) map { $0 data } decode(type itemsresponse self, decoder jsondecoder()) receive(on dispatchqueue main) sink(receivecompletion { completion in if case let failure(error) = completion { print("error fetching items \\(error)") } }, receivevalue { response in self items = response results }) store(in \&cancellables) } } struct itemsresponse codable { let results \[item] } struct itemslistview view { @stateobject private var viewmodel = itemsviewmodel() var body some view { navigationview { list(viewmodel items) { item in vstack(alignment leading) { text(item title) font( headline) text(item description) font( subheadline) } } navigationtitle("items") onappear { viewmodel fetchitems() } } } } struct itemslistview previews previewprovider { static var previews some view { itemslistview() } } มุมมองนี้ดึงข้อมูลจาก back4app ผ่าน rest และแสดงในรายการ การดำเนินการ api เพิ่มเติม การสร้างรายการใหม่ ใช้ urlsession พร้อมกับคำขอ post เพื่อเพิ่มรายการใหม่ การอัปเดตรายการ ใช้คำขอ put สำหรับการแก้ไขข้อมูลที่มีอยู่ การลบรายการ ใช้คำขอ delete เพื่อลบข้อมูล รวมการดำเนินการเครือข่ายเหล่านี้ภายในมุมมอง swiftui ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง ปกป้องข้อมูลของคุณโดยการตั้งค่า access control lists (acls) สำหรับวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างบันทึกไอเท็มที่ปลอดภัย func createsecureitem(title string, description string, ownerid string) { guard let url = url(string "https //parseapi back4app com/classes/items") else { return } var request = urlrequest(url url) request httpmethod = "post" request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") request addvalue("application/json", forhttpheaderfield "content type") let itemdata \[string any] = \[ "title" title, "description" description, "acl" \[ ownerid \["read" true, "write" true], " " \["read" false, "write" false] ] ] request httpbody = try? jsonserialization data(withjsonobject itemdata) urlsession shared datatask(with request) { data, response, error in if let error = error { print("error creating item \\(error)") } } resume() } การกำหนดสิทธิ์ระดับคลาส ภายในแดชบอร์ด back4app ของคุณ ปรับสิทธิ์ระดับคลาส (clps) สำหรับแต่ละคอลเลกชันเพื่อบังคับใช้ว่าใครสามารถอ่านหรือเขียนข้อมูลได้ตามค่าเริ่มต้น ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การสร้างบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้เพื่อจัดการการตรวจสอบสิทธิ์ ในแอป swiftui ของคุณ จัดการการลงทะเบียนและการเข้าสู่ระบบผ่านการเรียก rest api ตัวอย่าง การลงทะเบียนผู้ใช้ func signupuser(username string, password string, email string) { guard let url = url(string "https //parseapi back4app com/users") else { return } var request = urlrequest(url url) request httpmethod = "post" request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") request addvalue("application/json", forhttpheaderfield "content type") let userdata \[string any] = \[ "username" username, "password" password, "email" email ] request httpbody = try? jsonserialization data(withjsonobject userdata) urlsession shared datatask(with request) { data, response, error in if let error = error { print("sign up error \\(error)") } else { print("user registered successfully") } } resume() } วิธีการนี้สามารถขยายไปใช้สำหรับการเข้าสู่ระบบของผู้ใช้และการจัดการเซสชัน ขั้นตอนที่ 7 – สรุปและการปรับปรุงในอนาคต ทำได้ดีมาก! คุณได้สร้างแอปพลิเคชัน crud เบื้องต้นโดยใช้ swiftui และ back4app สำเร็จแล้ว คุณได้สร้างโปรเจกต์ที่ชื่อว่า basic crud app swiftui , ออกแบบสคีมาฐานข้อมูลของคุณสำหรับ items และ users และเชื่อมต่อส่วนหน้า swiftui ของคุณกับแบ็กเอนด์ผ่านการเรียก rest api นอกจากนี้ คุณยังได้เรียนรู้วิธีการรักษาความปลอดภัยข้อมูลของคุณด้วย acls และการดำเนินการตรวจสอบสิทธิ์ผู้ใช้ ต่อไปจะทำอย่างไร? ขยาย ui ของคุณ ปรับปรุงอินเทอร์เฟซ swiftui ของคุณด้วยมุมมองที่ละเอียด, การเคลื่อนไหว, และองค์ประกอบที่โต้ตอบได้ ฟีเจอร์ขั้นสูง รวมตรรกะแบ็กเอนด์เพิ่มเติม เช่น cloud functions หรือการอัปเดตข้อมูลแบบเรียลไทม์ สำรวจเพิ่มเติม เยี่ยมชม เอกสาร back4app https //www back4app com/docs เพื่อข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่งแอปของคุณและการรวมฟังก์ชันการทำงานที่ซับซ้อนมากขึ้น โดยการติดตามคู่มือนี้ คุณมีทักษะพื้นฐานในการสร้างแบ็กเอนด์ crud ที่แข็งแกร่งและปรับขนาดได้สำหรับแอปพลิเคชัน swiftui ของคุณโดยใช้ back4app สนุกกับการสร้างและนวัตกรรม!