วิธีผสานรวมแพลตฟอร์ม Bubble และ AppMaster

ในบทช่วยสอนนี้ เราจะมาดูกันว่าคุณจะสามารถผสานรวม Bubble และ AppMaster ได้อย่างไร สมมติว่าส่วนหน้าของแอปพลิเคชันที่กำลังพัฒนาสร้างขึ้นใน Bubble แต่ความสามารถในการทำงานกับส่วนหลังกลับไม่เพียงพอ และคุณต้องการใช้ฟังก์ชัน AppMaster

ลองหาวิธี:

• ใช้ AppMaster เป็นฐานข้อมูลสำหรับ Bubble
• ส่งคำขอ API ไปยัง Appmaster
• ดำเนินการตรวจสอบผู้ใช้
• ใช้โทเค็นการให้สิทธิ์ในส่วนหัวคำขอ

การกำหนดค่า API Connector

ก่อนอื่น คุณต้องสร้างความเป็นไปได้ในการส่งคำขอ API ภายนอกจาก Bubble ในการดำเนินการนี้ คุณต้องเพิ่มปลั๊กอิน API Connector

มากำหนดค่าทันทีเพื่อส่งคำขอตรวจสอบสิทธิ์ไปยัง AppMaster งานของเราคือส่งการเข้าสู่ระบบและรหัสผ่านเพื่อรับโทเค็นการอนุญาตในการตอบกลับ เราจะใช้ปลายทางมาตรฐานที่สร้างขึ้นในทุกโครงการโดยค่าเริ่มต้น - POST /auth/ (Auth: Authentication) ข้อมูลทั้งหมดเกี่ยวกับเรื่องนี้ พร้อมที่อยู่ที่แน่นอนเพื่อขอในโครงการของคุณ สามารถรับได้จาก Swagger

ในการกำหนดค่า API Connector ให้คลิกที่ปุ่ม Add Another API และตั้งค่าพารามิเตอร์คำขอที่จะใช้ พารามิเตอร์ที่สำคัญคือ:

• วิธีการขอ POST
• URL. เหมือนกับ Request URL จาก Swagger
• Use as. Data คุณต้องได้รับข้อมูลโทเค็นการให้สิทธิ์ในการตอบสนอง
• Data type. JSON
• Body . การตั้งค่าที่สำคัญที่สุดคือคุณต้องระบุข้อมูลที่จะส่งไปยังเซิร์ฟเวอร์ AppMaster ในเวลาเดียวกัน <> มีค่าไดนามิกที่จะต้องได้รับจากฟิลด์อินพุตที่เกี่ยวข้อง

{

"login": "<login>",

"password": "<password>"

}

เมื่อกรอก คุณต้องระบุข้อมูลสำหรับคำขอทดสอบ (กรอกค่าล็อกอินและรหัสผ่านใน Body parameters ) เริ่มต้นคำขอ และตรวจสอบให้แน่ใจว่าทำงานได้อย่างถูกต้องและคำตอบก็มาถึงจริงๆ

การตั้งค่าช่องป้อนข้อมูล

ขั้นตอนต่อไปคือการสร้างอินเทอร์เฟซสำหรับแอปพลิเคชัน เราจำกัดตัวเองให้เหลือน้อยที่สุดที่จำเป็น เราจะต้องสร้างช่องป้อนข้อมูล 3 ช่อง:

• เข้าสู่ระบบ
• รหัสผ่าน
• โทเค็นการให้สิทธิ์

สองอันแรกค่อนข้างชัดเจน พวกเขาจะระบุชื่อผู้ใช้และรหัสผ่านของผู้ใช้สำหรับการตรวจสอบ สิ่งที่น่าสนใจที่สุดคือฟิลด์ที่สาม - ฟิลด์ของโทเค็น ค่าของโทเค็นสามารถป้อนได้ด้วยตนเอง แต่งานของเราคือทำให้สามารถรับข้อมูลจากแบ็กเอนด์ AppMaster และแสดงที่นั่นได้

ในการดำเนินการนี้ คุณต้องกำหนดค่า เนื้อหาเริ่มต้น :

1. Get data from an External API ด้วยการเลือกคำขอที่สร้างไว้ก่อนหน้านี้ใน API Connector (ในตัวอย่างนี้ ชื่อ AppMaster Auth Call )
2. ในฟิลด์ (body) login และ (body) password คุณต้องระบุค่าจากฟิลด์อินพุตที่เกี่ยวข้อง
3. เลือกค่า token (ข้อมูลที่แตกต่างกันจำนวนมากมาในการตอบสนองต่อคำขอ แต่ในตัวอย่างนี้ เฉพาะ token เท่านั้นที่น่าสนใจ)

สามารถทดสอบผลได้ เมื่อป้อนข้อมูลในช่องเข้าสู่ระบบและรหัสผ่าน ระบบจะส่งคำขอไปยังส่วนหลังของ AppMaster โดยอัตโนมัติ เมื่อป้อนข้อมูลอย่างถูกต้อง และคำขอส่งคืนผลลัพธ์ที่สำเร็จ โทเค็นการให้สิทธิ์ที่ได้รับจะปรากฏในฟิลด์ที่สาม

GET คำขอไปยังฐานข้อมูล

ขั้นตอนต่อไปคือการสร้างคำขอ API ใหม่ คราวนี้งานจะรับข้อมูลจากฐานข้อมูล ในขณะเดียวกัน สถานการณ์ก็ซับซ้อนเนื่องจากข้อเท็จจริงที่ว่าข้อมูลเหล่านี้ไม่มีให้ใช้งานโดยเสรีแต่มีให้เฉพาะผู้ใช้ที่ได้รับอนุญาตเท่านั้น

ในการดำเนินการนี้ คุณจะต้องเพิ่มส่วนหัวพิเศษในคำขอ ควรเรียกว่า Authorization และค่าควรเป็น " Bearer " และรหัสการให้สิทธิ์ที่ได้รับก่อนหน้านี้

ลองทำในทางปฏิบัติ คุณต้องกลับไปที่ปลั๊กอิน API Connector และสร้างคำขอ API ใหม่ ในตัวอย่างในภาพหน้าจอ นี่คือการเรียกฐานข้อมูลร้านอาหารเพื่อรับรายการอาหารและสร้างเมนู

ความแตกต่างที่สำคัญจากคำขอก่อนหน้านี้คือแทนที่จะใช้พารามิเตอร์ (แม้ว่าจะสามารถเพิ่มได้) จะใช้ส่วนหัว:

• Key = Authorization
• Value = Bearer {authorization token} (ในการเริ่มต้นคำขอ คุณต้องระบุโทเค็นจริงที่คุณได้รับก่อนหน้านี้ในทันที)

โปรดทราบว่าในการตั้งค่าส่วนหัว คุณต้องยกเลิกการเลือกช่องทำเครื่องหมาย Private มิฉะนั้น จะไม่สามารถสร้างไดนามิกได้ สุดท้าย อย่าลืมเริ่มต้นคำขอและตรวจสอบให้แน่ใจว่าใช้งานได้

Repeating Group

ตอนนี้เราควรกลับไปที่ผู้ออกแบบ เพิ่มองค์ประกอบกลุ่มซ้ำ แล้วตั้งค่า:

• Type of content - ข้อมูลคำขอ AppMaster Get Data
• Data source - จำเป็นต้องระบุส่วนหัว Authorization อย่างถูกต้อง ประกอบด้วยสองส่วน ค่าคงที่แรกคือ " Bearer ." ตัวแปรที่สองต้องมีโทเค็นการให้สิทธิ์และนำมาจากช่องป้อนข้อมูลที่เกี่ยวข้อง

หากทุกอย่างถูกต้องแล้วจะได้รับข้อมูลและเหลือเพียงขั้นตอนสุดท้าย - คุณต้องแสดง ในการดำเนินการนี้ คุณสามารถเพิ่มช่องข้อความสองช่องใน Repeating Group และปรับแต่งได้ หนึ่งจะแสดงชื่อของอาหาร และที่สองจะแสดงราคา

คุณสามารถเปิดแอปที่ได้และตรวจสอบว่าการรวม Bubble และ AppMaster สำเร็จหรือไม่ ส่วนหน้าสร้างขึ้นใน Bubble.io และทุกอย่างที่เกี่ยวข้องกับแบ็กเอนด์นั้นขับเคลื่อนโดย AppMaster.io :

• กำลังดำเนินการตรวจสอบผู้ใช้
• โทเค็นการให้สิทธิ์ที่ได้รับจะปรากฏขึ้น
• ดำเนินการทำงานกับฐานข้อมูล
• ข้อมูลที่มีให้เฉพาะผู้ใช้ที่ได้รับอนุญาตจะปรากฏขึ้น