How to Build a Backend for Ionic?

บทนำ ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการสร้างแบ็คเอนด์ที่สมบูรณ์สำหรับแอป ionic โดยใช้ back4app เราจะพูดถึงการจัดการฐานข้อมูล, ฟังก์ชัน cloud code, rest และ graphql apis, การตรวจสอบสิทธิ์ผู้ใช้, การจัดการไฟล์ และอื่นๆ เป้าหมายของเราคือการแสดงให้คุณเห็น วิธีการสร้างแบ็คเอนด์สำหรับ ionic ที่มีความปลอดภัย, ขยายขนาดได้, และง่ายต่อการบำรุงรักษา เราจะใช้สภาพแวดล้อมที่ใช้งานง่ายของ back4app เพื่อลดความยุ่งยากในการตั้งค่าเซิร์ฟเวอร์ ทำให้คุณไม่ต้องตั้งค่าเซิร์ฟเวอร์หรือฐานข้อมูลด้วยตนเอง คุณจะได้เรียนรู้เครื่องมือที่จำเป็น เช่น การกำหนดตารางงานด้วย cloud jobs, การใช้กฎความปลอดภัยขั้นสูง, และการรวม webhook กับบริการอื่นๆ เมื่อสิ้นสุดบทเรียน คุณจะพร้อมที่จะขยายแบ็คเอนด์พื้นฐานนี้ให้เป็นระบบที่พร้อมสำหรับการผลิตสำหรับแอป ionic ของคุณ ข้อกำหนดเบื้องต้น บัญชี back4app และโครงการ back4app ใหม่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app หากคุณไม่มีบัญชี ให้สร้างบัญชีฟรีและทำตามคำแนะนำข้างต้นเพื่อตั้งค่าโครงการของคุณ สภาพแวดล้อมการพัฒนา ionic พื้นฐาน ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง ionic cli https //ionicframework com/docs/intro/cli และสามารถสร้างและรันแอป ionic ได้ ติดตั้ง node js (เวอร์ชัน 14 หรือสูงกว่า) ดาวน์โหลด node js https //nodejs org/en/download/ เพื่อจัดการการพึ่งพาและสร้างโครงการของคุณ ความคุ้นเคยกับ javascript/typescript และแนวคิด ionic เอกสารประกอบอย่างเป็นทางการของ ionic https //ionicframework com/docs ความเข้าใจในโครงสร้างของ ionic, ส่วนประกอบ, และ lifecycle hooks จะเป็นประโยชน์ ขั้นตอนที่ 1 – การสร้างโครงการใหม่บน back4app และการเชื่อมต่อ เข้าสู่ระบบบัญชี back4app ของคุณ สร้างแอปใหม่ โดยใช้ปุ่ม “แอปใหม่” ในแดชบอร์ด back4app ของคุณ ตั้งชื่อแอปของคุณ (เช่น “ionic backend tutorial”) โครงการ back4app นี้เป็นฐานสำหรับแบ็กเอนด์ของคุณ แตกต่างจากการใช้ parse sdk ฝั่งไคลเอนต์ บทเรียนนี้จะแสดงให้เห็นถึงการเรียกผ่าน rest และ graphql จากแอป ionic ของคุณ การดึงข้อมูลรับรองของคุณ ในแดชบอร์ด back4app ให้ไปที่ app settings หรือ security & keys บันทึก application id , rest api key , และ graphql endpoint คุณจะต้องใช้สิ่งเหล่านี้เพื่อส่งคำขอจากแอป ionic ของคุณ ขั้นตอนที่ 2 – การตั้งค่าฐานข้อมูล การมีฐานข้อมูลที่มีโครงสร้างดีเป็นกระดูกสันหลังของแอปทุกตัว แดชบอร์ดของ back4app ทำให้การออกแบบโมเดลข้อมูลและจัดการความสัมพันธ์เป็นเรื่องง่าย 1\ การสร้างโมเดลข้อมูล ไปที่ database ในแดชบอร์ด back4app ของคุณ สร้างคลาสใหม่ (เช่น “todo”) และเพิ่มคอลัมน์ (เช่น title เป็น string, iscompleted เป็น boolean) 2\ การสร้างโมเดลข้อมูลโดยใช้ ai agent เปิด ai agent จากแดชบอร์ด back4app ของคุณ อธิบายสคีมาที่คุณต้องการ เช่น “สร้างคลาส todo พร้อมฟิลด์สำหรับชื่อ (string) และ iscompleted (boolean) ” ai agent จะสร้างสคีมาโดยอัตโนมัติ 3\ การอ่านและเขียนข้อมูลโดยใช้ rest api จากโค้ด ionic ของคุณ คุณสามารถดำเนินการคำขอ http ได้ ตัวอย่างเช่น เพื่อ สร้าง todo curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo เพื่อ ดึงข้อมูล todos ทั้งหมด curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo คุณสามารถรวมการเรียกเหล่านี้โดยใช้ fetch , axios , หรือไลบรารี http client ใดๆ ภายในไฟล์บริการหรือคอมโพเนนต์ของแอป ionic ของคุณ 4\ การอ่านและเขียนข้อมูลโดยใช้ graphql api ในทำนองเดียวกัน คุณสามารถส่งการเปลี่ยนแปลงและคำถาม graphql จากแอป ionic ของคุณได้ ตัวอย่างเช่น เพื่อ สร้าง todo ใหม่ mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } ตัวอย่าง การเรียก rest หรือ graphql สามารถวางไว้ในไฟล์ผู้ให้บริการ/บริการในโครงสร้าง ionic ของคุณ จากนั้นเรียกใช้จากหน้าเพจของคุณ 5\ การทำงานกับ live queries (ตัวเลือก) live queries ให้การอัปเดตข้อมูลในแอปของคุณแบบเรียลไทม์ แม้ว่าจะต้องการ parse sdk หรือวิธีการสมัครสมาชิกเฉพาะ หากคุณต้องการข้อมูลแบบเรียลไทม์ คุณสามารถเปิดใช้งาน live queries จากการตั้งค่าเซิร์ฟเวอร์ back4app ของคุณ โดยทั่วไปคุณจะใช้การเชื่อมต่อ websocket เพื่อติดตามการเปลี่ยนแปลงในคลาสของคุณ อย่างไรก็ตาม สำหรับการเรียกที่ใช้ http แบบมาตรฐาน คุณสามารถสอบถาม rest หรือ graphql endpoints เป็นระยะ ขั้นตอนที่ 3 – การใช้ความปลอดภัยด้วย acls และ clps ภาพรวมสั้นๆ acls (access control lists) ช่วยให้คุณตั้งค่าการอนุญาตในการอ่าน/เขียนบนวัตถุแต่ละรายการ clps (class level permissions) ช่วยให้คุณจัดการการเข้าถึงในระดับคลาสได้กว้างขึ้น ฟีเจอร์เหล่านี้มีความสำคัญต่อการปกป้องข้อมูลส่วนตัวและทำให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถแก้ไขข้อมูลได้ การตั้งค่าการอนุญาตในระดับคลาส ในแดชบอร์ด back4app ของคุณ ไปที่ database > class level permissions กำหนดค่าเริ่มต้นของคลาสของคุณ (เช่น ผู้ใช้ที่ได้รับการรับรองเท่านั้นที่สามารถสร้าง todo ใหม่ได้) การกำหนดค่า acls เมื่อสร้างหรืออัปเดตบันทึก คุณสามารถส่ง acl ผ่าน rest curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "title" "private task", "acl" { "user object id here" { "read" true, "write" true } } }' \\ https //parseapi back4app com/classes/todo สำหรับข้อมูลเพิ่มเติม โปรดดูที่ แนวทางความปลอดภัยของแอป https //www back4app com/docs/security/parse security ขั้นตอนที่ 4 – การเขียนฟังก์ชัน cloud code ทำไมต้องใช้ cloud code cloud code ช่วยให้คุณสามารถเรียกใช้ javascript ฝั่งเซิร์ฟเวอร์สำหรับงานต่างๆ เช่น การตรวจสอบข้อมูล ทริกเกอร์ หรือการรวมระบบ คุณสามารถสร้างจุดสิ้นสุดที่กำหนดเองเพื่อรวมศูนย์ตรรกะ ซึ่งมีประโยชน์โดยเฉพาะหากคุณต้องการเก็บโค้ดให้ออกจากไคลเอนต์ ฟังก์ชันและทริกเกอร์ตัวอย่าง ใน main js ของคุณในฝั่งเซิร์ฟเวอร์ (back4app) คุณสามารถเขียน // main js parse cloud define('validatetodo', (request) => { const { title } = request params; if (!title) { throw 'a title is required '; } return `title "${title}" looks good `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); นำไปใช้งานผ่าน back4app cli https //www back4app com/docs/local development/parse cli หรือในส่วน cloud code ของแดชบอร์ด การเรียกใช้ cloud code จาก ionic คุณสามารถส่งคำขอ post curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "check this out"}' \\ https //parseapi back4app com/functions/validatetodo // main js parse cloud define('validatetodo', (request) => { const { title } = request params; if (!title) { throw 'a title is required '; } return `title "${title}" looks good `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); คุณจะได้รับการตอบกลับ json ที่มีข้อมูลที่ส่งกลับหรือข้อความแสดงข้อผิดพลาด โมดูล npm คุณสามารถติดตั้งแพ็คเกจเช่น axios ในสภาพแวดล้อม cloud code ของคุณเพื่อรวมบริการจากบุคคลที่สาม รวมไว้ใน main js const axios = require('axios'); parse cloud define('fetchdata', async (request) => { const url = request params url; const response = await axios get(url); return response data; }); ปรับใช้และเรียกใช้ในลักษณะเดียวกับที่คุณจะทำกับฟังก์ชัน cloud code ใด ๆ ขั้นตอนที่ 5 – การกำหนดค่าการตรวจสอบสิทธิ การเปิดใช้งานการตรวจสอบสิทธิผู้ใช้ การลงทะเบียนและเข้าสู่ระบบของผู้ใช้สามารถทำได้ด้วยการเรียก rest ไปยัง user class ตัวอย่างเช่น เพื่อ ลงทะเบียน curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "username" "jon", "password" "somepassword", "email" "jon\@example com" }' \\ https //parseapi back4app com/users เข้าสู่ระบบ curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ \ data urlencode 'username=jon' \\ \ data urlencode 'password=somepassword' \\ https //parseapi back4app com/login เมื่อสำเร็จ คุณจะได้รับ sessiontoken เก็บมันไว้อย่างปลอดภัยและรวมไว้ในส่วนหัวของคำขอในอนาคตสำหรับการดำเนินการที่ตรวจสอบสิทธิ การเข้าสู่ระบบด้วยโซเชียล คุณสามารถกำหนดค่าการเข้าสู่ระบบด้วยโซเชียล (เช่น google หรือ facebook) โดยการตั้งค่า oauth flow ผ่าน back4app หรือโดยการใช้ผู้ให้บริการภายนอก อ้างอิงจาก เอกสารการเข้าสู่ระบบด้วยโซเชียล https //www back4app com/docs/platform/sign in with apple สำหรับขั้นตอนที่ละเอียด ขั้นตอนที่ 6 – การจัดการการจัดเก็บไฟล์ การตั้งค่าการจัดเก็บไฟล์ back4app มีการจัดเก็บไฟล์ที่ปลอดภัย คุณสามารถแนบไฟล์กับวัตถุหรือจัดเก็บไฟล์แยกต่างหาก ตัวอย่างเช่น curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary "@path/to/your/image png" \\ https //parseapi back4app com/files/myimage png การตอบกลับจะรวมถึง url ของไฟล์ที่คุณสามารถจัดเก็บในคลาส curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "imagefile" { " type" "file", "name" "myimage png", "url" "response url here" } }' \\ https //parseapi back4app com/classes/photo ข้อควรพิจารณาด้านความปลอดภัย คุณสามารถเปิดใช้งานกฎความปลอดภัยของไฟล์ใน การตั้งค่าเซิร์ฟเวอร์ ของ back4app เพื่อกำหนดให้ต้องมีการตรวจสอบสิทธิ์หรือจำกัดการอัปโหลดไฟล์ไปยังบทบาทเฉพาะ ขั้นตอนที่ 7 – การตรวจสอบอีเมลและการรีเซ็ตรหัสผ่าน ทำไมการตรวจสอบจึงสำคัญ การตรวจสอบอีเมลช่วยรับรองความถูกต้องของอีเมลของผู้ใช้ การรีเซ็ตรหัสผ่านให้วิธีที่ปลอดภัยในการกู้คืนข้อมูลประจำตัวที่หายไป สิ่งนี้ช่วยรักษาความไว้วางใจและการจัดการผู้ใช้ที่เหมาะสมในแอป ionic ของคุณ การกำหนดค่าคอนโซล back4app ไปที่ การตั้งค่าแอป > การตั้งค่าอีเมล เปิดใช้งาน การตรวจสอบอีเมล ปรับแต่งเทมเพลตอีเมลสำหรับการตรวจสอบและการรีเซ็ตรหัสผ่าน ขั้นตอนที่ 8 – การกำหนดตารางงานด้วย cloud jobs cloud jobs ทำอะไร cloud jobs ช่วยให้คุณสามารถกำหนดตารางงานที่เกิดขึ้นซ้ำได้ เช่น การทำความสะอาดข้อมูลหรือการส่งอีเมลสรุป คุณเขียนมันใน main js parse cloud job('cleanupoldtodos', async (request) => { const query = new parse query('todo'); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); หลังจากการปรับใช้ ไปที่ การตั้งค่าแอป > การตั้งค่าเซิร์ฟเวอร์ > งานเบื้องหลัง กำหนดตาราง cleanupoldtodos ให้ทำงานทุกวัน ขั้นตอนที่ 9 – การรวม webhooks webhooks ช่วยให้คุณส่งข้อมูลไปยังบริการภายนอกเมื่อเกิดเหตุการณ์บางอย่างในโปรเจกต์ back4app ของคุณ หากแอป ionic ของคุณต้องการกระตุ้นการทำงานใน stripe หรือ slack หลังจากสร้างระเบียนใหม่ คุณสามารถใช้ webhooks เพื่อทำให้กระบวนการนั้นเป็นอัตโนมัติได้ ไปที่ เพิ่มเติม > webhooks ในแดชบอร์ด back4app ของคุณ เพิ่ม webhook ใหม่ และตั้งค่าจุดสิ้นสุดของมัน (เช่น, https //your service com/webhook endpoint ) เลือก เหตุการณ์ (เช่น, “หลังจากบันทึก” ใน คลาส todo ) คุณยังสามารถเริ่มต้นการร้องขอออกจาก cloud code triggers ใน main js โดยใช้ไลบรารี http มาตรฐาน ขั้นตอนที่ 10 – การสำรวจแผงผู้ดูแล back4app การ back4app admin app เป็นอินเทอร์เฟซที่ง่ายขึ้นสำหรับผู้มีส่วนได้ส่วนเสียที่ไม่ใช่เทคนิค มันให้วิธีที่ง่ายในการทำ crud operations บนคลาสของคุณโดยไม่ต้องเข้าไปใน parse dashboard หลัก การเปิดใช้งาน admin app ในแดชบอร์ด ให้ไปที่ เพิ่มเติม > admin app คลิก เปิดใช้งาน admin app และสร้างผู้ใช้แอดมิน เลือกซับโดเมนสำหรับการเข้าถึงอินเทอร์เฟซแอดมินของคุณ แผงนี้ช่วยให้คุณจัดการข้อมูลโดยไม่ต้องเขียนคำสั่งค้นหา ทำให้เหมาะสำหรับลูกค้าหรือสมาชิกในทีมที่ชอบอินเทอร์เฟซกราฟิก บทสรุป โดยการทำตามคู่มือนี้เกี่ยวกับ วิธีสร้างแบ็กเอนด์สำหรับ ionic , คุณได้ สร้างแบ็กเอนด์ที่ปลอดภัย บน back4app ด้วยโมเดลข้อมูลและความสัมพันธ์ที่แข็งแกร่ง รวมเข้ากับ rest และ graphql apis เพื่ออ่านและเขียนข้อมูลจากแอป ionic ของคุณ ดำเนินการด้านความปลอดภัย ด้วย acls และ clps ปรับใช้ cloud code สำหรับตรรกะและทริกเกอร์ที่กำหนดเอง กำหนดค่าการตรวจสอบสิทธิ์ผู้ใช้ และการจัดเก็บไฟล์ ตั้งค่า cloud jobs สำหรับการกำหนดตารางงาน ใช้ webhooks สำหรับการรวมภายนอก สำรวจ admin panel เพื่อทำให้การจัดการข้อมูลง่ายขึ้น ด้วยพื้นฐานนี้ แอป ionic ของคุณ สามารถพัฒนาเป็นแพลตฟอร์มที่พร้อมสำหรับการผลิต เพิ่มตรรกะเพิ่มเติม เชื่อมต่อกับ apis ของบุคคลที่สาม หรือปรับแต่งกฎความปลอดภัยให้ตรงกับกรณีการใช้งานของคุณ ขั้นตอนถัดไป ปรับปรุงการสร้างผลิตภัณฑ์ของคุณ โดยการใช้การแคช การเข้าถึงตามบทบาท และการตรวจสอบประสิทธิภาพ รวมฟีเจอร์ขั้นสูง เช่น live queries แบบเรียลไทม์หรือการตรวจสอบสิทธิ์หลายปัจจัย ปรึกษาเอกสารทางการของ back4app สำหรับการสำรวจเชิงลึกเกี่ยวกับการวิเคราะห์ บันทึก และการปรับแต่งประสิทธิภาพ สำรวจบทเรียนอื่นๆ ที่แสดงให้เห็นถึงแอปแชท การรวม iot หรือฟีเจอร์ที่ใช้ตำแหน่งร่วมกับบริการแบ็กเอนด์ที่แข็งแกร่งของ back4app