Building a CRUD App with Jetpack Compose?

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการพัฒนาแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) โดยใช้ jetpack compose สำหรับ android เราจะแสดงให้เห็นถึงวิธีการจัดการการดำเนินการข้อมูลอย่างมีประสิทธิภาพโดยการรวมแอปของคุณเข้ากับ back4app โครงการเริ่มต้นด้วยการตั้งค่าอินสแตนซ์ back4app ที่ชื่อว่า basic crud app jetpackcompose , ซึ่งจะทำหน้าที่เป็นโครงสร้างพื้นฐานด้านหลังที่มั่นคง เราจะสรุปวิธีการออกแบบสคีมาฐานข้อมูลที่เหมาะสมโดยการกำหนดคอลเลกชันและฟิลด์เฉพาะ—ไม่ว่าจะทำด้วยตนเองหรือโดยการใช้เครื่องมือที่ขับเคลื่อนด้วย ai ของ back4app ซึ่งจะทำให้โครงสร้างข้อมูลของแอปของคุณมีความแข็งแกร่งพอสำหรับการดำเนินการ crud ที่ราบรื่น ถัดไป คุณจะกำหนดค่าคอนโซลผู้ดูแล back4app ซึ่งเป็นอินเทอร์เฟซที่ใช้งานง่ายและสามารถลากและวางได้ที่ทำให้การจัดการข้อมูลง่ายขึ้น ทำให้การดำเนินการ crud เป็นเรื่องง่าย สุดท้าย คุณจะเชื่อมต่อส่วนหน้า jetpack compose ของคุณกับ back4app โดยใช้ parse android sdk (เมื่อมีการใช้งาน) หรือการเรียก rest api โดยตรง ในขณะที่บังคับใช้มาตรการรักษาความปลอดภัยที่เข้มงวดด้วยการควบคุมการเข้าถึงขั้นสูง เมื่อสิ้นสุดการสอนนี้ คุณจะมีแอปพลิเคชัน android ที่รองรับฟังก์ชัน crud ที่จำเป็น พร้อมด้วยการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลอย่างปลอดภัย สิ่งที่คุณจะได้เรียนรู้ วิธีการสร้างแอปพลิเคชันที่ใช้ crud บน android โดยใช้ jetpack compose วิธีการสร้างแบ็กเอนด์ที่สามารถขยายได้ด้วย back4app กลยุทธ์ในการใช้ back4app admin console ที่ใช้งานง่ายสำหรับการจัดการข้อมูล เทคนิคการรวมเข้ากับ parse android sdk หรือ rest apis ข้อกำหนดเบื้องต้น ก่อนดำเนินการ โปรดตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้พร้อม บัญชี back4app ที่มีโปรเจกต์ใหม่สร้างขึ้นแล้ว หากคุณต้องการความช่วยเหลือ โปรดดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app การตั้งค่าการพัฒนา android ด้วย android studio โปรดตรวจสอบให้แน่ใจว่าคุณติดตั้ง android studio เวอร์ชันล่าสุดพร้อมกับ kotlin ความคุ้นเคยกับ kotlin, jetpack compose และ restful apis สำหรับการทบทวนอย่างรวดเร็ว โปรดเยี่ยมชม เอกสาร jetpack compose https //developer android com/jetpack/compose ขั้นตอนที่ 1 – เริ่มต้นโปรเจกต์ของคุณ สร้างโปรเจกต์ back4app ลงชื่อเข้าใช้บัญชี back4app ของคุณ เลือกตัวเลือก “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app jetpackcompose และทำตามขั้นตอนการตั้งค่า สร้างโปรเจกต์ใหม่ หลังจากตั้งค่าเสร็จสิ้น โปรเจกต์ของคุณจะปรากฏในคอนโซล back4app ซึ่งเป็นการวางรากฐานสำหรับการกำหนดค่าฝั่งหลังของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การกำหนดโครงสร้างข้อมูลของคุณ สำหรับแอป crud นี้ คุณจะกำหนดหลายคอลเลกชัน ด้านล่างนี้เป็นตัวอย่างคอลเลกชันพร้อมกับฟิลด์และประเภทข้อมูลที่จำเป็น เพื่อให้แน่ใจว่าด้านหลังของคุณพร้อมสำหรับการจัดการข้อมูล 1\ คอลเลกชัน รายการ คอลเลกชันนี้ใช้เพื่อเก็บรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภท รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง ภาพรวมสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่รายการถูกเพิ่มเข้ามา อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตครั้งล่าสุด 2\ การเก็บรวบรวม ผู้ใช้ การรวบรวมนี้จัดการโปรไฟล์ผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภท คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวผู้ใช้ที่ไม่ซ้ำกัน อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสเพื่อความปลอดภัย สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่อัปเดตบัญชีล่าสุด คุณสามารถเพิ่มคอลเลกชันและฟิลด์เหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app โดยการสร้างคลาสใหม่และระบุคอลัมน์ที่จำเป็น สร้างชั้นเรียนใหม่ คุณสามารถตั้งค่าคอลัมน์แต่ละคอลัมน์โดยการเลือกประเภทข้อมูล ตั้งชื่อมัน กำหนดค่าเริ่มต้น และกำหนดว่ามันเป็นสิ่งจำเป็นหรือไม่ สร้างคอลัมน์ การใช้ ai ของ back4app สำหรับการตั้งค่า schema เครื่องมือ ai ของ back4app สามารถทำให้การสร้าง schema ฐานข้อมูลของคุณเป็นไปโดยอัตโนมัติ โดยการตีความคำสั่งที่ระบุคอลเลกชันและฟิลด์ที่คุณต้องการ ฟีเจอร์นี้ช่วยเร่งการกำหนดค่าของโครงการได้อย่างมาก วิธีการใช้เครื่องมือ ai เข้าถึงเครื่องมือ ai เข้าสู่ระบบ back4app console ของคุณและไปที่ส่วน ai ป้อนคำอธิบาย schema ของคุณ ให้คำสั่งที่ละเอียดซึ่งระบุคอลเลกชันและฟิลด์ที่เกี่ยวข้อง ตรวจสอบและใช้ หลังจากการสร้าง ให้ตรวจสอบ schema ที่เสนอและรวมเข้ากับโครงการของคุณ ตัวอย่างคำสั่ง ai create the following collections in my back4app project collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto assigned) \ updated at date (auto updated) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto assigned) \ updated at date (auto updated) การใช้วิธี ai นี้ช่วยให้ฐานข้อมูลของคุณมีโครงสร้างที่ถูกต้องและเหมาะสมกับความต้องการของแอปของคุณ ขั้นตอนที่ 3 – เปิดใช้งาน admin console & จัดการฟังก์ชัน crud บทนำสู่ admin console back4app admin console เป็นโซลูชันที่หลากหลายและไม่มีโค้ดที่ช่วยให้คุณสามารถดูแลและจัดการข้อมูลแบ็กเอนด์ของคุณได้อย่างง่ายดาย อินเทอร์เฟซที่ใช้งานง่ายสนับสนุนการดำเนินการ crud แบบลากและวาง ทำให้การจัดการข้อมูลเป็นเรื่องง่าย เปิดใช้งานคอนโซลผู้ดูแลระบบ ไปที่ส่วน “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “คอนโซลผู้ดูแลระบบ” และจากนั้นเลือก “เปิดใช้งานคอนโซลผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการลงทะเบียนผู้ใช้ผู้ดูแลระบบคนแรกของคุณ ซึ่งจะกำหนดบทบาทและคอลเลกชันระบบที่จำเป็นด้วย เปิดใช้งานแอปผู้ดูแลระบบ เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบคอนโซลผู้ดูแลระบบเพื่อจัดการคอลเลกชันของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ผ่านคอนโซล ภายในคอนโซลผู้ดูแลระบบ คุณสามารถ เพิ่มบันทึก ใช้ฟีเจอร์ “เพิ่มบันทึก” ภายในคอลเลกชัน (เช่น รายการ) เพื่อแทรกข้อมูลใหม่ ดู/แก้ไขบันทึก คลิกที่บันทึกใด ๆ เพื่อดูหรือแก้ไขฟิลด์ของมัน ลบบันทึก เลือกตัวเลือกลบเพื่อลบบันทึกที่ล้าสมัย อินเทอร์เฟซที่เรียบง่ายนี้ช่วยเพิ่มประสิทธิภาพการทำงานโดยทำให้การดำเนินการด้านหลังเข้าถึงได้และมีประสิทธิภาพ ขั้นตอนที่ 4 – เชื่อมต่อ jetpack compose กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกตั้งค่าแล้ว ถึงเวลาที่จะเชื่อมโยงแอป android ของคุณที่สร้างด้วย jetpack compose กับ back4app ตัวเลือก a การใช้ parse android sdk เพิ่มการพึ่งพา parse sdk อัปเดตไฟล์ build gradle ของคุณ implementation 'com parse\ parse android\ latest version' เริ่มต้น parse ในคลาสแอปพลิเคชันของคุณ สร้างหรืออัปเดตคลาสแอปพลิเคชันของคุณ (เช่น myapplication kt ) // myapplication kt package com example basiccrud import android app application import com parse parse class myapplication application() { override fun oncreate() { super oncreate() parse initialize( parse configuration builder(this) applicationid("your application id") clientkey("your client key") server("https //parseapi back4app com") build() ) } } ดำเนินการ crud ในหน้าจอ compose ตัวอย่างเช่น สร้างหน้าจอเพื่อแสดงรายการ // itemsscreen kt package com example basiccrud import androidx compose foundation layout import androidx compose foundation lazy lazycolumn import androidx compose foundation lazy items import androidx compose material button import androidx compose material text import androidx compose runtime import androidx compose ui modifier import androidx compose ui unit dp import com parse parseobject import com parse parsequery import kotlinx coroutines dispatchers import kotlinx coroutines withcontext @composable fun itemsscreen() { var items by remember { mutablestateof(listof\<parseobject>()) } launchedeffect(unit) { withcontext(dispatchers io) { val query = parsequery getquery\<parseobject>("items") try { val result = query find() items = result } catch (e exception) { e printstacktrace() } } } column(modifier = modifier padding(16 dp)) { text(text = "items", modifier = modifier padding(bottom = 8 dp)) lazycolumn { items(items) { item > row( modifier = modifier fillmaxwidth() padding(8 dp), horizontalarrangement = arrangement spacebetween ) { text(text = item getstring("title") ? "ไม่มีชื่อ") button(onclick = { / trigger edit action / }) { text(text = "แก้ไข") } } } } } } ตัวเลือก b การใช้ rest หรือ graphql หากคุณไม่ต้องการใช้ parse sdk คุณสามารถโต้ตอบกับ back4app โดยตรงโดยใช้ restful apis หรือ graphql ตัวอย่างเช่น เพื่อดึงรายการผ่าน rest suspend fun fetchitems() { try { val response = khttp get( url = "https //parseapi back4app com/classes/items", headers = mapof( "x parse application id" to "your application id", "x parse rest api key" to "your rest api key" ) ) // process json response accordingly } catch (e exception) { e printstacktrace() } } รวมการเรียก api เหล่านี้เข้ากับส่วนประกอบ compose ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง (acls) เพิ่มความปลอดภัยของข้อมูลโดยการกำหนด acls ให้กับวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างบันทึกที่เข้าถึงได้เฉพาะเจ้าของเท่านั้น suspend fun createsecureitem(itemdata map\<string, string>, owneruser parseobject) { val item = parseobject("items") item put("title", itemdata\["title"]) item put("description", itemdata\["description"]) // define acl so that only the owner has read/write privileges val acl = parseacl(owneruser) acl publicreadaccess = false acl publicwriteaccess = false item acl = acl try { item save() println("secure item saved successfully") } catch (e exception) { e printstacktrace() } } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในคอนโซล back4app ของคุณ ปรับ clps สำหรับแต่ละคอลเลกชัน เพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตหรือผู้ใช้ที่ผ่านการตรวจสอบแล้วเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การจัดการการตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ที่สร้างขึ้นใน parse สำหรับการจัดการการตรวจสอบสิทธิ์ ในแอป jetpack compose ของคุณ ให้จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้โดยใช้ parse sdk ด้านล่างนี้คือตัวอย่างหน้าจอการลงทะเบียนโดยใช้ compose // signupscreen kt package com example basiccrud import androidx compose foundation layout import androidx compose material button import androidx compose material outlinedtextfield import androidx compose material text import androidx compose runtime import androidx compose ui modifier import androidx compose ui unit dp import com parse parseuser @composable fun signupscreen() { var username by remember { mutablestateof("") } var email by remember { mutablestateof("") } var password by remember { mutablestateof("") } column(modifier = modifier padding(16 dp)) { outlinedtextfield( value = username, onvaluechange = { username = it }, label = { text("username") }, modifier = modifier fillmaxwidth() ) spacer(modifier = modifier height(8 dp)) outlinedtextfield( value = email, onvaluechange = { email = it }, label = { text("email") }, modifier = modifier fillmaxwidth() ) spacer(modifier = modifier height(8 dp)) outlinedtextfield( value = password, onvaluechange = { password = it }, label = { text("password") }, modifier = modifier fillmaxwidth() ) spacer(modifier = modifier height(16 dp)) button(onclick = { val user = parseuser() user username = username user email = email user setpassword(password) user signupinbackground { e > if (e == null) { println("user registered successfully!") } else { println("registration error ${'$'}{e message}") } } }) { text(text = "sign up") } } } คุณสามารถสร้างหน้าจอที่คล้ายกันสำหรับการเข้าสู่ระบบและการจัดการเซสชัน ฟีเจอร์เพิ่มเติมเช่นการเข้าสู่ระบบด้วยโซเชียล การตรวจสอบอีเมล และการกู้คืนรหัสผ่านสามารถจัดการได้ผ่านคอนโซลของ back4app ขั้นตอนที่ 7 – (ไม่สามารถใช้ได้) หมายเหตุ การปรับใช้ผ่านเว็บไม่สามารถใช้ได้ในบริบทของแอปมือถือนี้ ขั้นตอนที่ 8 – ความคิดสุดท้ายและขั้นตอนถัดไป ขอแสดงความยินดี! ตอนนี้คุณได้พัฒนาแอปพลิเคชัน crud ที่สมบูรณ์ด้วย jetpack compose และ back4app แล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app jetpackcompose , ออกแบบสคีมาฐานข้อมูลที่มีประสิทธิภาพสำหรับ items และ users และใช้ back4app admin console สำหรับการจัดการข้อมูลที่ง่าย นอกจากนี้ คุณได้รวมส่วนหน้า android ของคุณกับ back4app โดยใช้มาตรการรักษาความปลอดภัยที่เข้มงวดในระหว่างทาง ต่อไปจะทำอย่างไร? ขยาย ui compose ของคุณ ปรับปรุงแอปพลิเคชันของคุณด้วยฟีเจอร์เพิ่มเติม เช่น มุมมองรายการที่ละเอียด, ความสามารถในการค้นหา, และการอัปเดตข้อมูลแบบเรียลไทม์ รวมตรรกะด้านหลังเพิ่มเติม พิจารณาใช้ cloud functions, รวม api ของบุคคลที่สาม, หรือใช้การควบคุมการเข้าถึงตามบทบาท การเรียนรู้เพิ่มเติม สำรวจ เอกสาร back4app https //www back4app com/docs และบทเรียน compose เพิ่มเติมเพื่อเพิ่มประสิทธิภาพและสำรวจการรวมที่กำหนดเอง โดยการติดตามบทแนะนำนี้ คุณมีเครื่องมือในการสร้างแบ็กเอนด์ crud ที่ปลอดภัยและมีประสิทธิภาพสำหรับแอปพลิเคชัน android ของคุณโดยใช้ jetpack compose และ back4app ขอให้สนุกกับการเขียนโค้ด!