How to Create a Basic CRUD Application with Blazor?

ภาพรวม คู่มือนี้จะพาคุณไปสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) แบบครบวงจรโดยใช้ blazor ในบทเรียนนี้ คุณจะตั้งค่าโปรเจกต์ back4app ออกแบบสคีมาฐานข้อมูลของคุณ และรวมส่วนหน้า blazor ของคุณกับ back4app ผ่าน rest apis กระบวนการนี้จะช่วยให้คุณสร้างแบ็คเอนด์ที่แข็งแกร่งในขณะที่มั่นใจว่าแอปพลิเคชันเว็บของคุณสามารถจัดการข้อมูลได้อย่างมีประสิทธิภาพ ในตอนแรก คุณจะตั้งค่าโปรเจกต์ back4app ที่ชื่อว่า basic crud app blazor , ซึ่งจะทำหน้าที่เป็นกระดูกสันหลังของระบบการจัดการข้อมูลของคุณ ถัดไป คุณจะสร้างการออกแบบฐานข้อมูลที่สามารถขยายได้โดยการสร้างคอลเลกชันและฟิลด์ที่ละเอียด ไม่ว่าจะทำด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent หลังจากนั้น คุณจะใช้พลังของ back4app admin app—ซึ่งเป็นอินเทอร์เฟซที่ใช้งานง่ายแบบลากและวาง—เพื่อจัดการคอลเลกชันของคุณได้อย่างง่ายดาย สุดท้าย คุณจะเชื่อมต่อส่วนหน้า blazor ของคุณกับ back4app โดยใช้ rest apis และรักษาความปลอดภัยให้กับแบ็คเอนด์ของคุณด้วยการควบคุมการเข้าถึงที่เหมาะสม เมื่อสิ้นสุดการสอนนี้ คุณจะมีแอปพลิเคชันเว็บที่พร้อมใช้งานในระดับการผลิต ซึ่งรองรับการดำเนินการ crud ที่สำคัญพร้อมกับการตรวจสอบสิทธิ์ผู้ใช้และการอัปเดตข้อมูลอย่างปลอดภัย จุดเรียนรู้ที่สำคัญ สร้างแอปพลิเคชัน crud ที่จัดการการดำเนินการข้อมูลได้อย่างราบรื่นโดยใช้แบ็คเอนด์ที่เชื่อถือได้ รับข้อมูลเชิงลึกเกี่ยวกับการสร้างแบ็คเอนด์ที่สามารถขยายได้และการรวมเข้ากับฟรอนต์เอนด์ blazor ใช้ความสามารถในการลากและวางของแอป back4app admin เพื่อทำให้การจัดการข้อมูลง่ายขึ้น เรียนรู้เทคนิคการปรับใช้ รวมถึงการสร้าง docker container เพื่อเปิดตัวแอปพลิเคชันของคุณอย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น โปรดตรวจสอบว่าคุณมี บัญชี back4app และโปรเจกต์ใหม่ที่ตั้งค่าไว้ เยี่ยมชม เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app หากคุณต้องการความช่วยเหลือ สภาพแวดล้อมการพัฒนา blazor ใช้ visual studio หรือ visual studio code พร้อมกับ net sdk เวอร์ชันล่าสุด (เวอร์ชัน 6 หรือสูงกว่า) ความรู้พื้นฐานเกี่ยวกับ c#, blazor, และ restful apis ตรวจสอบ เอกสาร blazor https //docs microsoft com/en us/aspnet/core/blazor หากจำเป็น ขั้นตอนที่ 1 – การตั้งค่าโครงการเบื้องต้น การสร้างโครงการ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ เลือกปุ่ม “แอปใหม่” จากแดชบอร์ดของคุณ กรอกชื่อโครงการ basic crud app blazor และทำตามคำแนะนำบนหน้าจอเพื่อเสร็จสิ้นกระบวนการสร้าง สร้างโครงการใหม่ หลังจากตั้งค่า โครงการใหม่ของคุณจะแสดงบนแดชบอร์ดของคุณ ซึ่งจะเป็นพื้นฐานที่มั่นคงสำหรับการกำหนดค่าด้านหลัง ขั้นตอนที่ 2 – การออกแบบสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud พื้นฐานนี้ คุณจะต้องสร้างหลายคอลเลกชัน ด้านล่างนี้คือตัวอย่างของคอลเลกชันพร้อมกับฟิลด์และประเภทข้อมูลที่จำเป็นในการตั้งค่าฐานข้อมูลของคุณอย่างมีประสิทธิภาพ 1\ การรวบรวมรายการ สนาม ประเภทข้อมูล วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือตำแหน่งของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาที่รายการถูกแก้ไขล่าสุด 2\ การรวบรวมผู้ใช้ สนาม ประเภทข้อมูล วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการเข้าสู่ระบบอย่างปลอดภัย สร้างเมื่อ วันที่ เวลาที่สร้างบัญชี อัปเดตเมื่อ วันที่ เวลาของการอัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละคอลเลกชันและเพิ่มคอลัมน์ที่จำเป็น สร้างคลาสใหม่ คุณสามารถกำหนดคอลัมน์ได้โดยการเลือกประเภทข้อมูล ตั้งชื่อฟิลด์ ตั้งค่าดีฟอลต์ และกำหนดว่าฟิลด์นั้นเป็นฟิลด์บังคับหรือไม่ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent ช่วยให้การสร้าง schema ง่ายขึ้นโดยตรงจากแดชบอร์ดของคุณ โดยการป้อนข้อความที่อธิบายคอลเลกชันและฟิลด์ของคุณ ai agent จะสร้าง schema ฐานข้อมูลที่จำเป็นโดยอัตโนมัติ วิธีการใช้ ai agent เข้าถึง ai agent เข้าสู่ระบบแดชบอร์ด back4app ของคุณและค้นหา ai agent ในการตั้งค่าหรือเมนูหลัก กำหนดโมเดลข้อมูลของคุณ วางข้อความที่อธิบายซึ่งระบุคอลเลกชันและฟิลด์ของพวกเขา ตรวจสอบและยืนยัน ตรวจสอบ schema ที่แนะนำและนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างข้อความ create the following 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) การใช้ ai agent นี้ไม่เพียงแต่ช่วยประหยัดเวลา แต่ยังช่วยให้การตั้งค่า schema มีความสอดคล้องและมีประสิทธิภาพ ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบ & จัดการการดำเนินการ crud บทนำสู่แอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app ให้ส่วนติดต่อที่ไม่ต้องเขียนโค้ดและลากและวางเพื่อจัดการข้อมูลแบ็กเอนด์ของคุณ เครื่องมือนี้ใช้งานง่ายช่วยให้คุณสามารถดำเนินการ crud ได้อย่างง่ายดาย เปิดใช้งานแอปผู้ดูแลระบบ ไปที่ “เพิ่มเติม” เมนูในแดชบอร์ด back4app ของคุณ คลิกที่ “แอปผู้ดูแลระบบ” และจากนั้นเลือก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณโดยการสร้างผู้ใช้ผู้ดูแลระบบเริ่มต้น ซึ่งจะกำหนดบทบาทเริ่มต้นและคอลเลกชันระบบด้วย เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการคอลเลกชันและข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ด้วยแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบคุณสามารถ สร้างบันทึก คลิกที่ปุ่ม “เพิ่มบันทึก” ภายในคอลเลกชัน (เช่น รายการ) เพื่อเพิ่มรายการใหม่ อ่าน/อัปเดตบันทึก คลิกที่บันทึกเพื่อดูรายละเอียดหรือแก้ไขฟิลด์ ลบบันทึก ลบรายการที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซที่เรียบง่ายและลากและวางนี้ช่วยเพิ่มประสบการณ์การจัดการข้อมูลอย่างมีนัยสำคัญ ขั้นตอนที่ 4 – เชื่อมต่อ blazor กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกกำหนดค่าแล้ว ถึงเวลาที่จะรวมฟรอนต์เอนด์ blazor ของคุณกับ back4app การใช้ rest apis ใน blazor เนื่องจาก parse sdk ไม่สามารถใช้กับ blazor ได้ คุณจะใช้ rest apis เพื่อดำเนินการ crud ในแอปพลิเคชัน blazor ของคุณ ใช้ httpclient เพื่อโต้ตอบกับ rest endpoints ของ back4app ตัวอย่าง การดึงรายการผ่าน rest สร้างบริการในโปรเจกต์ blazor ของคุณเพื่อดึงรายการ ตัวอย่างเช่น // services/itemservice cs using system net http; using system net http headers; using system text json; using system threading tasks; using system collections generic; public class item { public string id { get; set; } public string title { get; set; } public string description { get; set; } } public class itemservice { private readonly httpclient httpclient; private const string baseurl = "https //parseapi back4app com/classes/items"; public itemservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task\<list\<item>> getitemsasync() { var response = await httpclient getasync(baseurl); response ensuresuccessstatuscode(); var json = await response content readasstringasync(); var itemsdata = jsonserializer deserialize\<itemsresponse>(json); return itemsdata results; } } public class itemsresponse { public list\<item> results { get; set; } } รวมการเรียก api เช่นนี้ภายในคอมโพเนนต์ blazor ของคุณเพื่อจัดการการดำเนินการ crud ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง (acls) ปกป้องข้อมูลของคุณโดยการตั้งค่า acls บนวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างรายการส่วนตัว public async task createprivateitemasync(item newitem, string ownerid) { // prepare your item data with proper access controls // in your rest call, include acl information as required by your backend // this is a conceptual example; refer to back4app documentation for acl details } การกำหนดค่าการอนุญาตระดับคลาส (clps) ภายในแดชบอร์ด back4app ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงหรือแก้ไขข้อมูลที่ละเอียดอ่อน ขั้นตอนที่ 6 – การจัดการการตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าบัญชีผู้ใช้ใน blazor back4app ใช้คลาสผู้ใช้ของ parse เพื่อจัดการการตรวจสอบสิทธิ์ ในแอป blazor ของคุณ ให้จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ผ่านการเรียก rest ตัวอย่างเช่น // services/authservice cs using system net http; using system net http json; using system threading tasks; public class authservice { private readonly httpclient httpclient; private const string signupurl = "https //parseapi back4app com/users"; public authservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task signupasync(string username, string password, string email) { var user = new { username, password, email }; var response = await httpclient postasjsonasync(signupurl, user); response ensuresuccessstatuscode(); // handle success, such as storing tokens or redirecting the user } } วิธีการที่คล้ายกันสามารถนำไปใช้สำหรับการเข้าสู่ระบบและการจัดการเซสชัน ฟังก์ชันเพิ่มเติมเช่นการเข้าสู่ระบบด้วยโซเชียล การตรวจสอบอีเมล และการกู้คืนรหัสผ่านสามารถตั้งค่าได้ผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ frontend ของคุณด้วย blazor ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณสามารถโฮสต์แอปพลิเคชัน blazor ของคุณได้อย่างราบรื่นโดยการปรับใช้โค้ดจากที่เก็บ github 7 1 การสร้าง build สำหรับการผลิตของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่ง publish dotnet publish c release คำสั่งนี้จะสร้างโฟลเดอร์ที่เผยแพร่พร้อมไฟล์สถิตที่ปรับให้เหมาะสมสำหรับแอป blazor ของคุณ ตรวจสอบการสร้าง ยืนยันว่าโฟลเดอร์ผลลัพธ์มีไฟล์ที่จำเป็น (เช่น, index html , javascript, css, ฯลฯ) 7 2 การจัดระเบียบและอัปโหลดโค้ดของคุณ ที่เก็บ git ของคุณควรบรรจุแหล่งที่มาทั้งหมดของแอปพลิเคชัน blazor ของคุณ โครงสร้างโฟลเดอร์ตัวอย่างอาจเป็น basic crud app blazor frontend/ \| wwwroot/ \| | index html \| pages/ \| | index razor \| | items razor \| | login razor \| services/ \| | itemservice cs \| | authservice cs \| program cs \| basic crud app blazor csproj \| readme md ไฟล์ตัวอย่าง program cs using microsoft aspnetcore components web; using microsoft aspnetcore components webassembly hosting; using basic crud app blazor; using basic crud app blazor services; var builder = webassemblyhostbuilder createdefault(args); builder rootcomponents add\<app>("#app"); builder rootcomponents add\<headoutlet>("head after"); builder services addscoped(sp => new httpclient { baseaddress = new uri(builder hostenvironment baseaddress) }); builder services addscoped\<itemservice>(); builder services addscoped\<authservice>(); await builder build() runasync(); คอมมิตและผลักดันไปยัง github เริ่มต้น git ในโฟลเดอร์โปรเจกต์ของคุณ (ถ้ายังไม่ได้ทำ) git init เพิ่มไฟล์ของคุณ git add คอมมิตการเปลี่ยนแปลงของคุณ git commit m "คอมมิตเริ่มต้นของโค้ดต้นฉบับ blazor frontend" สร้างที่เก็บ github ตั้งชื่อว่า basic crud app blazor frontend ผลักดันที่เก็บของคุณ git remote add origin https //github com/your username/basic crud app blazor frontend git git push u origin main 7 3 การรวมที่เก็บของคุณกับการปรับใช้เว็บ เข้าถึงตัวเลือกการปรับใช้เว็บ ในแดชบอร์ด back4app ของคุณ เปิดโปรเจกต์ของคุณ ( basic crud app blazor ) และไปที่ การปรับใช้เว็บ ส่วน เชื่อมต่อบัญชี github ของคุณ ทำตามคำแนะนำเพื่อลิงก์บัญชี github ของคุณ เพื่อให้ back4app สามารถเข้าถึงที่เก็บของคุณ เลือกที่เก็บและสาขา เลือกที่เก็บ (เช่น basic crud app blazor frontend ) และสาขา (เช่น main ) ที่มีโค้ด blazor ของคุณ 7 4 การกำหนดค่าการปรับใช้ ให้รายละเอียดเพิ่มเติมเช่น คำสั่งสร้าง หากโฟลเดอร์ที่เผยแพร่ยังไม่ได้สร้างล่วงหน้า ให้ระบุคำสั่งเช่น dotnet publish c release ไดเรกทอรีเอาต์พุต ตั้งค่าเส้นทางเอาต์พุต (เช่น bin/release/net6 0/wwwroot ) ตัวแปรสภาพแวดล้อม เพิ่มการตั้งค่าสภาพแวดล้อมที่จำเป็น (เช่น คีย์ api) ในการกำหนดค่า 7 5 การทำให้แอปพลิเคชัน blazor ของคุณเป็นคอนเทนเนอร์ด้วย docker หากคุณชอบ docker สำหรับการปรับใช้ ให้รวม dockerfile ในที่เก็บของคุณ นี่คือตัวอย่าง \# use the official net sdk image for building the app from mcr microsoft com/dotnet/sdk 6 0 as build workdir /src copy \["basic crud app blazor csproj", " /"] run dotnet restore "basic crud app blazor csproj" copy run dotnet publish "basic crud app blazor csproj" c release o /app/publish \# use the official asp net core runtime image to run the app from mcr microsoft com/dotnet/aspnet 6 0 as runtime workdir /app copy from=build /app/publish expose 80 entrypoint \["dotnet", "basic crud app blazor dll"] จากนั้นในการตั้งค่าการปรับใช้เว็บของคุณ ให้เลือกตัวเลือก docker เพื่อปรับใช้แอปพลิเคชันที่เป็นคอนเทนเนอร์ของคุณ 7 6 การเปิดตัวแอปพลิเคชันของคุณ เริ่มการปรับใช้ คลิกที่ deploy ปุ่มในแดชบอร์ด back4app ตรวจสอบการสร้าง back4app จะดึงโค้ดของคุณจาก github รันคำสั่งสร้างหากจำเป็น และปรับใช้แอปของคุณในคอนเทนเนอร์ รับ url ของคุณ เมื่อกระบวนการปรับใช้เสร็จสิ้น back4app จะจัดเตรียม url สำหรับแอป blazor ที่โฮสต์ของคุณ 7 7 การยืนยันการปรับใช้ เปิด url ที่จัดเตรียมไว้ เยี่ยมชม url ในเบราว์เซอร์เพื่อดูแอปที่ปรับใช้ของคุณ ทดสอบแอปพลิเคชัน ตรวจสอบให้แน่ใจว่าหน้าทั้งหมดโหลดได้อย่างถูกต้องและการดำเนินการ crud ทำงานตามที่คาดหวัง แก้ไขปัญหาหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์และตรวจสอบบันทึกการปรับใช้บน back4app เพื่อวินิจฉัยปัญหาใด ๆ ขั้นตอนที่ 8 – สรุปและการสำรวจเพิ่มเติม ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud เบื้องต้นโดยใช้ blazor และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app blazor , ออกแบบคอลเลกชันสำหรับ items และ users และใช้ back4app admin app สำหรับการจัดการข้อมูลอย่างราบรื่น นอกจากนี้ คุณได้รวมส่วนหน้า blazor ของคุณกับ back4app โดยใช้ rest apis และใช้มาตรการรักษาความปลอดภัยที่เข้มงวด ขั้นตอนในอนาคต ขยายส่วนหน้า ปรับปรุงแอป blazor ของคุณด้วยมุมมองที่ละเอียดมากขึ้น ฟังก์ชันการค้นหา หรือการแจ้งเตือนแบบสด เพิ่มฟีเจอร์ขั้นสูง พิจารณาการรวม cloud functions การรวมกับบุคคลที่สาม หรือการอนุญาตตามบทบาท ปรึกษาแหล่งข้อมูลเพิ่มเติม ตรวจสอบ เอกสาร back4app https //www back4app com/docs และบทเรียนขั้นสูงอื่น ๆ เพื่อเพิ่มประสิทธิภาพและขยายแอปพลิเคชันของคุณ โดยการติดตามคู่มือนี้ คุณมีพื้นฐานในการสร้าง backend crud ที่สามารถปรับขนาดได้และปลอดภัยสำหรับแอปพลิเคชัน blazor ของคุณโดยใช้ back4app ขอให้สนุกกับการเขียนโค้ด!