How to Create a CRUD Application with Elm?

ภาพรวม ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) แบบครบวงจรโดยใช้ elm เราจะใช้ back4app เป็นบริการแบ็กเอนด์เพื่อจัดการข้อมูลได้อย่างง่ายดาย คู่มือนี้อธิบายวิธีการตั้งค่าโครงการ back4app ออกแบบสคีมาข้อมูลที่ยืดหยุ่น และรวมการดำเนินการ crud เข้ากับแอปพลิเคชัน elm โดยใช้การเรียก rest api ในตอนแรก คุณจะตั้งค่าโครงการ back4app ซึ่งที่นี่เรียกว่า basic crud app elm , ซึ่งให้บริการฐานข้อมูลที่ไม่สัมพันธ์กันที่แข็งแกร่ง คุณจะออกแบบโมเดลข้อมูลของคุณ—ไม่ว่าจะด้วยตนเองหรือใช้ ai agent อัจฉริยะของ back4app ถัดไป คุณจะจัดการแบ็กเอนด์ของคุณด้วย back4app admin app ซึ่งมีอินเทอร์เฟซที่ใช้งานง่ายสำหรับการจัดการข้อมูล สุดท้าย คุณจะเชื่อมต่อแอป elm ของคุณกับ back4app โดยการทำคำขอ api แบบ restful ในขณะที่มั่นใจว่าการดำเนินการข้อมูลมีความปลอดภัย เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอปพลิเคชัน elm ที่พร้อมใช้งานในผลิตภัณฑ์ซึ่งรองรับฟังก์ชัน crud หลักและการตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัย ข้อมูลเชิงลึกที่สำคัญ เรียนรู้วิธีการสร้างแอปพลิเคชัน elm crud ที่เชื่อมโยงกับแบ็กเอนด์ที่ไม่สัมพันธ์กัน เข้าใจวิธีการจัดโครงสร้างแบ็กเอนด์ที่สามารถขยายได้และเชื่อมต่อกับฟรอนต์เอนด์ elm ใช้แอป back4app admin สำหรับการสร้าง อ่าน อัปเดต และลบอย่างราบรื่น สำรวจตัวเลือกการปรับใช้ รวมถึง docker เพื่อเปิดตัวแอปพลิเคชัน elm ของคุณได้อย่างง่ายดาย ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมี บัญชี back4app ที่มีการตั้งค่าโปรเจกต์ ต้องการความช่วยเหลือ? เยี่ยมชม เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา elm ติดตั้ง elm และใช้โปรแกรมแก้ไขที่คุณชื่นชอบ ความคุ้นเคยกับพื้นฐานของ elm การเขียนโปรแกรมเชิงฟังก์ชัน และคำขอ http ตรวจสอบที่ คู่มือ elm https //guide elm lang org/ หากจำเป็น ขั้นตอนที่ 1 – การเริ่มต้นโปรเจกต์ของคุณ การสร้างโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app elm และทำตามคำแนะนำเพื่อเสร็จสิ้นการตั้งค่า สร้างโปรเจกต์ใหม่ เมื่อโปรเจกต์ของคุณพร้อมแล้ว มันจะปรากฏบนแดชบอร์ดของคุณ ซึ่งจะเป็นการตั้งเวทีสำหรับการกำหนดค่าฝั่งหลังของคุณ ขั้นตอนที่ 2 – การสร้างโครงสร้างข้อมูล การตั้งค่าโครงสร้างข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะสร้างหลายคอลเลกชัน (หรือคลาส) ใน back4app ด้านล่างนี้คือตัวอย่างของคอลเลกชันหลักและฟิลด์ของพวกเขาเพื่อสนับสนุนการดำเนินการ crud 1\ การรวบรวมรายการ การรวบรวมนี้เก็บรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภท รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่ทำเครื่องหมายการสร้าง อัปเดตเมื่อ วันที่ เวลาที่ทำเครื่องหมายการอัปเดตครั้งล่าสุด 2\ การรวบรวมผู้ใช้ การรวบรวมนี้จัดการการตรวจสอบสิทธิ์และข้อมูลประจำตัวของผู้ใช้ สนาม ประเภท รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสเพื่อความปลอดภัย สร้างเมื่อ วันที่ เวลาที่บัญชีถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถเพิ่มคอลเลกชันและฟิลด์เหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app สร้างคลาสใหม่ คุณสามารถเพิ่มฟิลด์ได้โดยการเลือกประเภทที่เหมาะสม ตั้งชื่อฟิลด์ และระบุว่าฟิลด์นั้นเป็นฟิลด์ที่จำเป็นหรือไม่ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการกำหนดโครงสร้างข้อมูล back4app ai agent ช่วยให้การสร้างโครงสร้างข้อมูลของคุณง่ายขึ้นตามคำอธิบายของคุณ กระบวนการอัตโนมัตินี้ทำให้แน่ใจว่าโครงสร้างข้อมูลของคุณถูกตั้งค่าเพื่อการดำเนินการ crud ที่จำเป็นทั้งหมด ในการใช้ ai agent เข้าถึง ai agent ลงชื่อเข้าใช้แดชบอร์ด back4app ของคุณและค้นหา ai agent ในการตั้งค่าโปรเจกต์ของคุณ รายละเอียดโครงสร้างข้อมูลของคุณ อธิบายคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน ตรวจสอบโครงสร้างข้อมูลที่เสนอและอนุมัติเพื่อกำหนดค่าด้านหลังของคุณ ตัวอย่างคำสั่ง 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 – เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบและจัดการการดำเนินการ crud แนะนำเกี่ยวกับอินเทอร์เฟซผู้ดูแลระบบ แอปผู้ดูแลระบบของ back4app ให้คุณมีอินเทอร์เฟซที่ไม่ต้องเขียนโค้ดเพื่อจัดการข้อมูลแบ็กเอนด์ของคุณ การออกแบบที่ใช้งานง่ายช่วยให้คุณสามารถดำเนินการ crud เช่น การเพิ่ม การดู การแก้ไข และการลบระเบียน การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” สร้างบัญชีผู้ดูแลระบบของคุณ, ซึ่งจะตั้งค่าบทบาทเช่น b4aadminuser และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ในแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบ คุณสามารถ เพิ่มระเบียน เลือก “เพิ่มระเบียน” ในคอลเลกชัน (เช่น รายการ) เพื่อสร้างรายการใหม่ ตรวจสอบ/แก้ไขระเบียน คลิกที่ระเบียนใด ๆ เพื่อดูรายละเอียดหรือแก้ไขข้อมูล ลบระเบียน ลบรายการที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยให้การจัดการข้อมูลมีประสิทธิภาพมากขึ้น ขั้นตอนที่ 4 – เชื่อมต่อแอปพลิเคชัน elm ของคุณกับ back4app เมื่อคุณตั้งค่าด้านหลังเสร็จแล้ว ถึงเวลาที่จะเชื่อมต่อแอปพลิเคชัน elm ของคุณกับ back4app การใช้ rest api calls ใน elm เนื่องจาก elm ไม่รองรับ parse sdk ที่เฉพาะเจาะจง เราจะใช้ความสามารถ http ที่มีอยู่ในตัวเพื่อโต้ตอบกับ rest endpoints ของ back4app ตัวอย่าง การดึงข้อมูลจากคอลเลกชันรายการ ด้านล่างนี้คือตัวอย่างโมดูล elm ที่ใช้แพ็คเกจ http เพื่อดึงรายการของรายการ module items exposing (item, fetchitems, itemdecoder) import http import json decode as decode exposing (decoder) type alias item = { id string , title string , description string } itemdecoder decoder item itemdecoder = decode map3 item (decode field "objectid" decode string) (decode field "title" decode string) (decode field "description" decode string) fetchitems cmd msg fetchitems = http get { url = "https //parseapi back4app com/classes/items" , expect = http expectjson handleresponse (decode field "results" (decode list itemdecoder)) } handleresponse result http error (list item) > msg handleresponse result = \ map the http result to your application's message type debug todo "handle the response appropriately" ตัวอย่าง การสร้างรายการใหม่ คุณยังสามารถดำเนินการ post requests ใน elm เพื่อเพิ่มบันทึกใหม่ createitem string > string > cmd msg createitem title description = let body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } handlepostresponse result http error decode value > msg handlepostresponse result = debug todo "process the post response" createitem string > string > cmd msg createitem title description = let body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } handlepostresponse result http error decode value > msg handlepostresponse result = debug todo "process the post response" createitem string > string > cmd msg createitem title description = let body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } handlepostresponse result http error decode value > msg handlepostresponse result = debug todo "process the post response" ทำซ้ำรูปแบบที่คล้ายกันสำหรับการอัปเดตและลบข้อมูลโดยใช้วิธี put และ delete ขั้นตอนที่ 5 – การปกป้องแบ็กเอนด์ของคุณ การกำหนดการควบคุมการเข้าถึง (acls) ปกป้องข้อมูลของคุณโดยการตั้งค่า acls บนวัตถุของคุณ ตัวอย่างเช่น เพื่อจำกัดรายการให้กับผู้สร้าง คุณสามารถใช้ \ in elm, you can add acl details to your json payload createprivateitem string > string > string > cmd msg createprivateitem title description ownerid = let acl = encode object \[ ( ownerid, encode object \[ ("read", encode bool true), ("write", encode bool true) ] ) , ( " ", encode object \[ ("read", encode bool false), ("write", encode bool false) ] ) ] body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) , ( "acl", acl ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } การตั้งค่าการอนุญาตระดับคลาส (clps) กำหนด clps ในแดชบอร์ด back4app เพื่อให้ผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์เท่านั้นที่สามารถเข้าถึงคอลเลกชันเฉพาะได้ ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การจัดการบัญชีผู้ใช้ back4app ใช้ประโยชน์จากคอลเลกชันผู้ใช้ที่สร้างขึ้นในตัวเพื่อจัดการการตรวจสอบสิทธิ์ ในแอป elm ของคุณ คุณจะจัดการการลงทะเบียนและการเข้าสู่ระบบผ่านการเรียก rest api ตัวอย่าง คำขอลงทะเบียนผู้ใช้ signupuser string > string > string > cmd msg signupuser username password email = let body = http jsonbody <| encode object \[ ( "username", encode string username ) , ( "password", encode string password ) , ( "email", encode string email ) ] in http post { url = "https //parseapi back4app com/users" , body = body , expect = http expectjson handleauthresponse decode value } handleauthresponse result http error decode value > msg handleauthresponse result = debug todo "process the authentication response" ใช้วิธีการที่คล้ายกันสำหรับการเข้าสู่ระบบและการจัดการเซสชัน ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน elm ของคุณ back4app รองรับการปรับใช้ที่ราบรื่น คุณสามารถปรับใช้แอปพลิเคชัน elm ของคุณโดยใช้วิธีการต่างๆ รวมถึง docker 7 1 การสร้างแอปพลิเคชัน elm ของคุณ คอมไพล์โค้ด elm ของคุณ เรียกใช้คอมไพเลอร์ elm เพื่อสร้าง javascript elm make src/main elm output=dist/main js เตรียมทรัพย์สินของคุณ ตรวจสอบให้แน่ใจว่าไฟล์ javascript และ html ที่สร้างขึ้นของคุณพร้อมสำหรับการปรับใช้ 7 2 การจัดระเบียบโครงสร้างโปรเจกต์ของคุณ เลย์เอาต์โปรเจกต์ elm แบบทั่วไปอาจมีลักษณะดังนี้ basic crud app elm/ \| src/ \| | main elm \| | api elm \| dist/ \| | index html \| | main js \| elm json \| package json \| dockerfile 7 3 การทำให้แอปพลิเคชัน elm ของคุณเป็น docker หากทำการบรรจุภัณฑ์ ให้เพิ่ม dockerfile \# use a lightweight node image for serving static files from node 16 alpine \# set the working directory workdir /app \# copy compiled files copy dist/ /app/dist/ \# expose the desired port expose 8080 \# serve the static files using a simple server cmd \["npx", "http server", "dist", " p", "8080"] 7 4 การปรับใช้ด้วย web deployment ของ back4app เชื่อมโยงที่เก็บของคุณ โฮสต์โปรเจกต์ elm ของคุณบน github กำหนดค่าการตั้งค่าการปรับใช้ ในแดชบอร์ด back4app ให้เลือก web deployment ฟีเจอร์ เชื่อมต่อที่เก็บของคุณ (เช่น basic crud app elm ) และเลือกสาขาที่ต้องการ ตั้งค่าคำสั่งการสร้าง ระบุคำสั่งการสร้าง (เช่น elm make src/main elm output=dist/main js ) และตำแหน่งของอาร์ติแฟกต์ ปรับใช้แอปของคุณ กด deploy และติดตามบันทึกจนกว่าแอปของคุณจะออนไลน์ ขั้นตอนที่ 8 – ความคิดสุดท้ายและทิศทางในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud ที่ใช้ elm ซึ่งเชื่อมต่อกับ back4app คุณได้ตั้งค่าโครงการชื่อ basic crud app elm , ออกแบบคอลเลกชันสำหรับ items และ users และจัดการข้อมูลผ่าน back4app admin app นอกจากนี้ คุณได้เชื่อมต่อแอปพลิเคชัน elm ของคุณโดยใช้การเรียก rest api และดำเนินการมาตรการด้านความปลอดภัย การปรับปรุงในอนาคต ขยายฟีเจอร์ รวมความสามารถในการค้นหาขั้นสูง มุมมองรายละเอียด หรือการอัปเดตแบบเรียลไทม์ เพิ่มฟังก์ชัน backend ทดลองใช้ฟังก์ชันคลาวด์ การรวมระบบจากบุคคลที่สาม หรือการเข้าถึงตามบทบาท เพิ่มพูนความรู้ของคุณ เยี่ยมชม เอกสาร back4app https //www back4app com/docs และแหล่งข้อมูลอื่น ๆ เพื่อปรับปรุงแอปของคุณ ขอให้สนุกกับการเขียนโค้ดและเพลิดเพลินกับการสร้างด้วย elm และ back4app!