How to Develop a CRUD App with TypeScript?

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) โดยใช้ typescript เราจะใช้ back4app เป็นแพลตฟอร์มแบ็คเอนด์ ทำให้การจัดการข้อมูลเป็นเรื่องง่าย คู่มือนี้ครอบคลุมการตั้งค่าโปรเจกต์ back4app การสร้างโมเดลข้อมูลของคุณ และการรวมฟังก์ชัน crud เข้ากับแอปพลิเคชัน typescript ในตอนแรก คุณจะสร้างโปรเจกต์บน back4app ชื่อ basic crud app typescript ซึ่งมีโซลูชันการจัดเก็บ nosql ที่ยืดหยุ่น คุณจะออกแบบโครงสร้างข้อมูลของคุณโดยการกำหนดคลาสและฟิลด์ด้วยตนเองหรือด้วยความช่วยเหลือจาก ai agent ของ back4app ถัดไป คุณจะใช้ back4app admin app สำหรับการจัดการแบ็คเอนด์ผ่านอินเทอร์เฟซที่ใช้งานง่ายซึ่งทำให้การดำเนินการข้อมูลง่ายขึ้น สุดท้าย คุณจะเชื่อมต่อแอปพลิเคชัน typescript ของคุณกับ back4app โดยใช้ parse javascript sdk เพื่อให้แน่ใจว่ามีการเข้าถึงและการตรวจสอบสิทธิ์ที่ปลอดภัย เมื่อสิ้นสุดการสอนนี้ คุณจะมีแอปพลิเคชัน typescript ที่ทำงานได้อย่างเต็มที่ซึ่งสามารถจัดการงาน crud พื้นฐาน รวมถึงการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูล สิ่งที่คุณจะได้เรียนรู้ วิธีการสร้างแอปพลิเคชัน crud ที่ใช้ typescript กับแบ็กเอนด์ nosql วิธีการออกแบบแบ็กเอนด์ที่สามารถขยายได้ซึ่งรวมเข้ากับฟรอนต์เอนด์ typescript วิธีการใช้แอป admin ของ back4app เพื่อจัดการข้อมูลของคุณได้อย่างง่ายดาย กลยุทธ์สำหรับการปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker เพื่อเปิดตัวแอป typescript ของคุณได้อย่างราบรื่น ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี บัญชี back4app ที่มีการกำหนดค่าโครงการ ต้องการความช่วยเหลือ? เยี่ยมชม เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา typescript ใช้โปรแกรมแก้ไขเช่น visual studio code และตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง node js ความรู้พื้นฐานเกี่ยวกับ typescript, การเขียนโปรแกรมเชิงวัตถุ, และ restful apis หากจำเป็น ให้ดูที่ เอกสาร typescript https //www typescriptlang org/docs/ ขั้นตอนที่ 1 – การเริ่มต้นโครงการ การตั้งค่าโครงการ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” ในแดชบอร์ดของคุณ กรอกชื่อโครงการ basic crud app typescript และทำตามขั้นตอนเพื่อสร้างโครงการให้เสร็จสมบูรณ์ สร้างโครงการใหม่ หลังจากที่โครงการถูกสร้างขึ้น มันจะปรากฏในแดชบอร์ดของคุณ ซึ่งจะเป็นพื้นฐานสำหรับแบ็กเอนด์ของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาข้อมูล การกำหนดโครงสร้างข้อมูลของคุณ สำหรับแอปพลิเคชันนี้ คุณจะสร้างคอลเลกชัน (คลาส) สองสามรายการบน back4app ด้านล่างเป็นตัวอย่างของคลาสที่จำเป็นพร้อมฟิลด์ที่ช่วยในการดำเนินการ crud 1\ คอลเลกชันรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ การรวบรวมผู้ใช้ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่านแฮช สตริง รหัสผ่านที่ถูกแฮชอย่างปลอดภัยสำหรับการเข้าสู่ระบบ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันและฟิลด์เหล่านี้ด้วยตนเองในแดชบอร์ด back4app สร้างชั้นเรียนใหม่ เมื่อเพิ่มฟิลด์ ให้เลือกประเภทข้อมูล ตั้งชื่อฟิลด์ กำหนดค่าเริ่มต้นหากจำเป็น และระบุว่าฟิลด์นั้นเป็นสิ่งจำเป็นหรือไม่ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการกำหนดค่า schema ตัวแทน ai ที่รวมอยู่ใน back4app สามารถสร้างสคีมาข้อมูลของคุณโดยอัตโนมัติจากคำอธิบาย ซึ่งทำให้การตั้งค่าทำได้ง่ายขึ้นและมั่นใจได้ว่าสิ่งที่คุณสร้างพร้อมสำหรับการดำเนินการ crud วิธีการใช้ตัวแทน ai เปิดตัวแทน ai เข้าสู่ระบบแดชบอร์ด back4app ของคุณและค้นหาตัวแทน ai ในการตั้งค่าโปรเจกต์ของคุณ อธิบายสคีมาของคุณ ให้คำอธิบายโดยละเอียดเกี่ยวกับคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน ตัวแทน ai จะเสนอสคีมา ตรวจสอบและยืนยันเพื่อใช้การเปลี่ยนแปลง ตัวอย่างคำสั่ง 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) วิธีการที่ใช้ ai นี้ช่วยประหยัดเวลาและรับประกันว่าสคีมามีโครงสร้างที่ดี ขั้นตอนที่ 3 – การใช้แอปผู้ดูแลระบบสำหรับการดำเนินการ crud ภาพรวมของแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซที่ไม่ต้องเขียนโค้ดซึ่งทำให้การจัดการข้อมูลแบ็กเอนด์ของคุณเป็นเรื่องง่าย ฟีเจอร์การลากและวางช่วยให้คุณสามารถดำเนินการ crud—เช่น การเพิ่ม การอ่าน การอัปเดต และการลบระเบียน—ได้อย่างไม่ยุ่งยาก การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิกที่ “เปิดใช้งานแอปผู้ดูแลระบบ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างบัญชีผู้ดูแลระบบเริ่มต้น ซึ่งจะกำหนดบทบาทเช่น b4aadminuser และคลาสระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งาน ให้ลงชื่อเข้าใช้แอปผู้ดูแลระบบเพื่อจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การจัดการการดำเนินการ crud ด้วยแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบคุณสามารถ เพิ่มบันทึก ใช้ฟังก์ชัน “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อป้อนข้อมูลใหม่ ตรวจสอบและแก้ไข คลิกที่บันทึกเพื่อดูรายละเอียดหรือแก้ไขฟิลด์ ลบบันทึก ลบรายการที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยเพิ่มการจัดการข้อมูลโดยการทำให้การทำงานประจำวันง่ายขึ้น ขั้นตอนที่ 4 – เชื่อมต่อแอป typescript ของคุณกับ back4app เมื่อแบ็กเอนด์ของคุณพร้อมแล้ว ขั้นตอนถัดไปคือการเชื่อมโยงแอป typescript ของคุณกับ back4app ตัวเลือก a การใช้ parse javascript sdk ติดตั้ง parse javascript sdk ใช้ npm รัน npm install parse เริ่มต้น parse ในแอป typescript ของคุณ สร้างไฟล์การกำหนดค่า (เช่น parseconfig ts ) // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 3\ implement crud functions in typescript for example, create a service for managing items ```typescript // itemsservice ts import parse from 'parse'; export async function fetchitems() promise\<parse object\[]> { const query = new parse query('items'); try { return await query find(); } catch (error) { console error('error fetching items ', error); return \[]; } } export async function additem(title string, description string) promise\<void> { const item = new parse object('items'); item set('title', title); item set('description', description); try { await item save(); console log('item added successfully '); } catch (error) { console error('error adding item ', error); } } export async function updateitem(objectid string, newtitle string, newdescription string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); item set('title', newtitle); item set('description', newdescription); await item save(); console log('item updated successfully '); } catch (error) { console error('error updating item ', error); } } export async function removeitem(objectid string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); await item destroy(); console log('item removed successfully '); } catch (error) { console error('error removing item ', error); } } ตัวเลือก b การใช้ rest หรือ graphql หากคุณไม่ต้องการใช้ parse sdk คุณสามารถดำเนินการ crud ผ่าน rest ได้ ตัวอย่างเช่น เพื่อดึงรายการโดยใช้ rest import fetch from 'node fetch'; export async function getitemsviarest() { 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('data retrieved ', data); } catch (error) { console error('error retrieving items ', error); } } รวมการเรียก api เหล่านี้ตามที่จำเป็นภายในโมดูล typescript ของคุณ ขั้นตอนที่ 5 – การรับรองความปลอดภัยของ backend การตั้งค่ารายการควบคุมการเข้าถึง (acls) รักษาความปลอดภัยข้อมูลของคุณโดยการใช้ acls กับวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างรายการที่เจ้าของเท่านั้นที่สามารถเข้าถึงได้ import parse from 'parse'; export async function createsecureitem(title string, description string, owner parse user) { const item = new parse object('items'); item set('title', title); item set('description', description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log('secure item created successfully '); } catch (error) { console error('error creating secure item ', error); } } การจัดการสิทธิ์ระดับคลาส (clps) ปรับ clps ผ่านแดชบอร์ด back4app เพื่อบังคับใช้ข้อจำกัดการเข้าถึงเพื่อให้ผู้ใช้ที่ได้รับการตรวจสอบเท่านั้นที่สามารถโต้ตอบกับคอลเลกชันบางอย่างได้ ขั้นตอนที่ 6 – การนำการตรวจสอบสิทธิ์ผู้ใช้ไปใช้ การจัดการบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ที่สร้างขึ้นใน parse เพื่อจัดการการตรวจสอบสิทธิ์ ในแอปพลิเคชัน typescript ของคุณ ให้ดำเนินการลงทะเบียนผู้ใช้และการเข้าสู่ระบบดังนี้ import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } วิธีนี้สามารถขยายได้สำหรับการจัดการเซสชัน การรีเซ็ตรหัสผ่าน และฟีเจอร์การตรวจสอบสิทธิ์อื่นๆ ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน typescript ของคุณ back4app ทำให้กระบวนการปรับใช้ง่ายขึ้น คุณสามารถปรับใช้แอปพลิเคชัน typescript ของคุณโดยใช้วิธีการต่างๆ เช่น การสร้าง docker 7 1 การสร้างแอป typescript ของคุณ คอมไพล์และบันเดิล ใช้เครื่องมือสร้างของคุณ (เช่น webpack หรือ tsc) เพื่อคอมไพล์และบันเดิลแอปพลิเคชันของคุณ ตัวอย่างเช่น เพื่อคอมไพล์ด้วย tsc tsc ยืนยันผลลัพธ์ ตรวจสอบให้แน่ใจว่าไฟล์ที่สร้างขึ้นรวมถึงทรัพยากรและโมดูลที่จำเป็นทั้งหมด 7 2 การจัดระเบียบโครงสร้างโปรเจกต์ของคุณ โปรเจกต์ typescript ทั่วไปอาจมีลักษณะดังนี้ basic crud app typescript/ \| src/ \| | index ts \| | parseconfig ts \| | services/ \| | itemsservice ts \| | authservice ts \| package json \| tsconfig json \| readme md ตัวอย่าง parseconfig ts // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 7 3 การทำให้แอปพลิเคชัน typescript ของคุณเป็น docker หากคุณเลือกการทำ containerization ให้เพิ่ม dockerfile ลงในรากโปรเจกต์ของคุณ \# use an official node js runtime as a parent image from node 18 alpine \# set the working directory workdir /usr/src/app \# copy package files and install dependencies copy package json / run npm install \# bundle app source code copy \# build the typescript app run npm run build \# expose port (adjust as needed) expose 3000 \# start the app cmd \[ "node", "dist/index js" ] 7 4 การปรับใช้ผ่าน back4app web deployment เชื่อมโยงที่เก็บ github ของคุณ ตรวจสอบให้แน่ใจว่าโปรเจกต์ typescript ของคุณถูกโฮสต์บน github ตั้งค่าการปรับใช้ ในแดชบอร์ด back4app ให้ใช้ web deployment เพื่อเชื่อมต่อที่เก็บของคุณ (เช่น, basic crud app typescript ) และเลือกสาขาที่เหมาะสม กำหนดคำสั่งการสร้างและผลลัพธ์ ระบุคำสั่งการสร้าง (เช่น npm run build ) และระบุไดเรกทอรีผลลัพธ์ ปรับใช้แอปพลิเคชันของคุณ คลิก deploy และติดตามบันทึกจนกว่าแอปพลิเคชันของคุณจะออนไลน์ ขั้นตอนที่ 8 – ความคิดสุดท้ายและการปรับปรุงในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud ที่ใช้ typescript และเชื่อมต่อกับ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app typescript , ออกแบบคอลเลกชันสำหรับ items และ users และจัดการข้อมูลของคุณโดยใช้ back4app admin app นอกจากนี้ คุณได้เชื่อมต่อแอป typescript ของคุณผ่าน parse javascript sdk (หรือ rest/graphql) และดำเนินการมาตรการด้านความปลอดภัยที่เข้มงวด ต่อไปจะทำอย่างไร? ขยายแอปพลิเคชันของคุณ รวมฟีเจอร์เพิ่มเติม เช่น การกรองขั้นสูง, การดูรายละเอียดรายการ, หรือการอัปเดตข้อมูลแบบเรียลไทม์ เพิ่มความสามารถของ backend สำรวจฟังก์ชันคลาวด์, รวม api ของบุคคลที่สาม, หรือดำเนินการกำหนดสิทธิ์ตามบทบาท การเรียนรู้เพิ่มเติม เยี่ยมชม เอกสาร back4app https //www back4app com/docs และตรวจสอบคู่มือเพิ่มเติมเพื่อเพิ่มประสิทธิภาพแอปพลิเคชันของคุณ ขอให้สนุกกับการเขียนโค้ดและเพลิดเพลินกับการสร้างแอปพลิเคชัน crud ด้วย typescript ของคุณ!