การสร้างแดชบอร์ดสดด้วย Airtable และ React

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

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

ป้อน Typeform และ Airtable

แบบฟอร์ม

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

• กระโดดลอจิก
• ฟิลด์ที่ซ่อนอยู่

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

การใช้งาน Airtable

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

คุณสามารถใช้ฐาน Airtable สำหรับ:

• CRM (การจัดการความสัมพันธ์กับลูกค้า)
• HRIS (ระบบสารสนเทศทรัพยากรบุคคล)
• การบริหารโครงการ
• การวางแผนเนื้อหา
• การวางแผนงาน
• ความคิดเห็นของผู้ใช้

มีกรณีการใช้งานที่เป็นไปได้อีกมากมาย คุณสามารถสำรวจกรณีศึกษาของ Airtable ได้ที่นี่

หากคุณไม่คุ้นเคยกับ Airtable ตัวแบบข้อมูลแนวคิดจะแบ่งออกเป็นดังนี้:

• พื้นที่ทำงาน - ประกอบด้วย ฐาน
• ฐาน - ประกอบด้วย ตาราง
• ตาราง - ประกอบด้วย เขตข้อมูล (คอลัมน์) และแถว
• มุมมอง - มุมมองเกี่ยวกับข้อมูลตารางพร้อมตัวกรองเสริมและ Fields ที่ลดลง
• ฟิลด์ - คอลัมน์ของตารางที่มีประเภทฟิลด์; ดูข้อมูลเพิ่มเติมเกี่ยวกับ Field Types . ที่นี่

นอกเหนือจากการจัดหาฐานข้อมูลที่โฮสต์บนคลาวด์ด้วยคุณสมบัติสเปรดชีตที่คุ้นเคย ต่อไปนี้คือสาเหตุบางประการที่แพลตฟอร์มมีประสิทธิภาพ:

สำหรับผู้ใช้ที่ไม่ใช่ด้านเทคนิค Airtable ให้:

• อินเทอร์เฟซฟรอนต์เอนด์ที่ใช้งานง่าย
• ระบบอัตโนมัติที่สามารถสร้างได้ด้วยการกำหนดค่าแบบชี้แล้วคลิกเพื่อส่งอีเมล ประมวลผลแถวข้อมูล จัดกำหนดการการนัดหมายในปฏิทิน และอื่นๆ
• มุมมองหลายประเภทที่อนุญาตให้ทีมทำงานร่วมกันบนฐานและตารางเดียวกัน
• แอพ Airtable ที่สามารถติดตั้งจากตลาดเพื่อเติมพลังให้ Base

สำหรับนักพัฒนา Airtable ให้:

• API แบ็คเอนด์ที่มีเอกสารประกอบอย่างดี
• สภาพแวดล้อมการเขียนสคริปต์ที่ช่วยให้นักพัฒนาดำเนินการอัตโนมัติภายใน Base
• ระบบอัตโนมัติที่สามารถทริกเกอร์สคริปต์ที่พัฒนาขึ้นเองซึ่งทำงานภายในสภาพแวดล้อม Airtable ซึ่งขยายขีดความสามารถของระบบอัตโนมัติ

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Airtable ได้ที่นี่

เริ่มต้นใช้งาน: Typeform to Airtable

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

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

แอพที่กำหนดเองใน Airtable

แอพแบบกำหนดเองใน Airtable มีมาตั้งแต่เปิดตัว Airtable Blocks SDK เมื่อต้นปี 2018 และเพิ่งเปลี่ยนชื่อเป็นแอพ การเปิดตัว Blocks นั้นยิ่งใหญ่มาก นั่นหมายความว่าผู้สร้างมีความสามารถในการพัฒนาตามที่ Airtable กล่าวไว้ว่า "ชุดเลโก้ที่รวมเข้าด้วยกันได้ไม่จำกัด"

เมื่อเร็วๆ นี้ด้วยการเปลี่ยนแปลงแอป Airtable Marketplace ทำให้สามารถแชร์แอปแบบสาธารณะได้เช่นกัน

แอพ Airtable ให้ธุรกิจต่างๆ ด้วยชุดเลโก้ที่รวมเข้าด้วยกันได้ไม่จำกัด ซึ่งพวกเขาสามารถปรับแต่งให้เข้ากับความต้องการของพวกเขาได้

ในการสร้างแอปที่กำหนดเองใน Airtable นักพัฒนา JavaScript ต้องรู้วิธีใช้ React ซึ่งเป็นหนึ่งในไลบรารี JavaScript ที่ได้รับความนิยมมากที่สุดสำหรับการสร้างอินเทอร์เฟซผู้ใช้ Airtable มีไลบรารีส่วนประกอบของส่วนประกอบ React และ hooks ที่ใช้งานได้ ซึ่งช่วยได้มากสำหรับการสร้าง UI ที่สอดคล้องกันอย่างรวดเร็ว และกำหนดวิธีที่คุณจะจัดการสถานะภายในแอปและส่วนประกอบต่างๆ

ดูบทความการเริ่มต้นใช้งานของ Airtable สำหรับข้อมูลเพิ่มเติมและ Airtable บน GitHub สำหรับตัวอย่างแอป

ข้อกำหนดแดชบอร์ด Airtable

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

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

ในกรณีนี้ ส่วนของแดชบอร์ดสรุปเป็น:

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

วิธีหนึ่งในการเข้าถึงส่วนต่างๆ ทั้งหมดยกเว้นแผนภูมิคือการฮาร์ดโค้ดคอลัมน์ทั้งหมดสำหรับวัตถุประสงค์ การใช้ยา และประวัติครอบครัวลงในแดชบอร์ด อย่างไรก็ตาม นั่นจะไม่อนุญาตให้ทีมลูกค้าเพิ่มคำถามใหม่ให้กับแบบสำรวจ Typeform หรือเพิ่มคอลัมน์ใหม่ในตาราง Airtable เพื่อนำเสนอข้อมูลนั้นบนแดชบอร์ดโดยไม่ต้องให้นักพัฒนาอัปเดตแอปที่กำหนดเอง

โซลูชันที่หรูหราและขยายได้มากขึ้นสำหรับความท้าทายนี้คือการหาวิธี แท็ก คอลัมน์ที่เกี่ยวข้องกับส่วนแดชบอร์ดเฉพาะ และดึงข้อมูลคอลัมน์เหล่านั้นโดยใช้ข้อมูลเมตาที่ Airtable แสดงเมื่อใช้โมเดลตารางและฟิลด์

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

การสร้างระบบ #TAG#

ในส่วนของแดชบอร์ด คุณควรสร้างแท็กที่ใช้ซ้ำได้สำหรับบางส่วนและแท็กเฉพาะสำหรับบางคอลัมน์ สำหรับรายการต่างๆ เช่น ชื่อผู้ป่วย อีเมล และหมายเลขโทรศัพท์ #NAME# , #EMAIL# และ #PHONE# ถูกเพิ่มลงในคำอธิบายของแต่ละฟิลด์ตามลำดับ ซึ่งจะทำให้สามารถดึงข้อมูลนั้นผ่านข้อมูลเมตาของตารางดังนี้:

 const name = table ? table.fields.filter(field => field.description?.includes("#NAME#"))

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

• OBJ - วัตถุประสงค์
• FAM - ประวัติครอบครัว
• MED - การใช้ยา
• CAN - ประวัติครอบครัวที่เฉพาะเจาะจงสำหรับโรคมะเร็ง
• CHART - คอลัมน์ใดๆ ที่ควรมีที่มาสำหรับการเพิ่มแผนภูมิ ต้องเป็นปริมาณ

นอกจากนี้ การแยกชื่อคอลัมน์ในตารางออกจากป้ายชื่อที่จะได้รับบนแดชบอร์ดเป็นสิ่งสำคัญ ดังนั้นสิ่งใดก็ตามที่ได้รับ #TAG# จะสามารถได้รับแท็ก #LABEL# สองแท็กในคำอธิบายช่อง . คำอธิบายฟิลด์จะมีลักษณะดังนี้:

ในกรณีที่ไม่มีแท็ก #LABEL# เราจะแสดงชื่อคอลัมน์จากตาราง

เราสามารถแยกวิเคราะห์ชุดป้ายกำกับในคำอธิบายด้วยฟังก์ชันง่ายๆ เช่นนี้ หลังจากที่ดึงฟิลด์ด้วยตัวอย่างโค้ดก่อนหน้า:

 // utils.js export const setLabel = (field, labelTag = "#LABEL#") => { const labelTags = (field.description?.match(new RegExp(labelTag, "g")) || []).length; let label; if (labelTags === 2) label = field.description?.split(`${labelTag}`)[1]; if (!label || label?.trim() === '') label = field.name; return {...field, label, name: field.name, description: field.description}; }

ด้วยระบบ #TAG# นี้ เราบรรลุสามสิ่งหลัก:

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

สถานะคงอยู่ใน Airtable

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

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

สิ่งที่มีประโยชน์มากขึ้นเกี่ยวกับการใช้ useGlobalConfig hook คือเมื่อมีการตั้งค่า องค์ประกอบแดชบอร์ดและส่วนประกอบย่อยจะแสดงผลใหม่ ดังนั้นคุณสามารถใช้ Global Config ได้เหมือนกับที่คุณใช้ตัวแปรสถานะในการใช้งาน React ทั่วไป

แนะนำชาร์ต

Airtable ให้ตัวอย่างแผนภูมิด้วยแอป Simple Chart ซึ่งใช้ React Charts ซึ่งเป็น wrapper React บน Chart.js (chart-ception)

ในแอป Simple Chart เรามีแผนภูมิเดียวสำหรับทั้งแอป แต่ในแอป Dashboard ของเรา เราต้องการความสามารถสำหรับผู้ใช้ในการเพิ่มและลบแผนภูมิของตนเองออกจากแดชบอร์ดของตนเอง ยิ่งไปกว่านั้น ในการหารือกับทีมลูกค้า ดูเหมือนว่าตัวชี้วัดบางอย่างน่าจะดูดีกว่าบนแผนภูมิเดียวกัน (เช่น การอ่านค่าความดันโลหิตช่วงไดแอสโตลิกและความดันโลหิตซิสโตลิก)

ด้วยสิ่งนี้ เรามีรายการที่ต้องจัดการดังต่อไปนี้:

• สถานะคงอยู่สำหรับแผนภูมิของผู้ใช้แต่ละราย (หรือดีกว่าเมื่อใช้ Global Config)
• อนุญาตให้ใช้เมตริกหลายรายการต่อแผนภูมิ

นี่คือจุดที่พลังของ Global Config มีประโยชน์ เนื่องจากเราสามารถใช้ที่เก็บคีย์-ค่าเพื่อคงเมตริกที่เลือกไว้และสิ่งอื่นใดเกี่ยวกับรายการแผนภูมิของเรา ขณะที่เรากำหนดค่าแผนภูมิใน UI ส่วนประกอบแผนภูมิจะแสดงผลใหม่เนื่องจากมีการอัปเดต Global Config สำหรับส่วนการสร้างแผนภูมิของแดชบอร์ด นี่คือส่วนสำคัญที่มีส่วนประกอบสำหรับการอ้างอิง โดยเน้นที่ Dashboard charts.js และ single chart.js

ตาราง ที่ส่งไปยังแต่ละแผนภูมิคือสิ่งที่ใช้สำหรับข้อมูลเมตาเพื่อค้นหาฟิลด์ ในขณะที่เรก คอร์ด ที่ส่งผ่านได้รับการกรองโดยผู้ป่วยที่เลือกที่องค์ประกอบแดชบอร์ดระดับบนสุดที่นำเข้า dashboard_charts/index.js

โปรดทราบว่าฟิลด์ที่แสดงรายการเป็นตัวเลือกในดรอปดาวน์สำหรับแผนภูมิจะถูกดึงโดยใช้แท็ก #CHART# เรากล่าวถึงก่อนหน้านี้ ด้วยบรรทัดนี้ในเบ็ด useEffect :

 // single_chart/index.js … useEffect(() => { (async () => { ... if (table) { const tempFieldOptions = table.fields.filter(field => field.description?.includes('#CHART#')).map(field => { return { ...setLabel(field), value: field.id } }); setFieldSelectOptions([...tempFieldOptions]); } })(); }, [table, records, fields]); ...

โค้ดด้านบนแสดงวิธีการใช้ฟังก์ชัน setLabel ที่อ้างอิงก่อนหน้านี้กับ #TAG# เพื่อเพิ่มข้อมูลใดๆ ที่มีให้ในแท็ก #LABEL# และแสดงตัวเลือกดังกล่าวในช่องดรอปดาวน์

องค์ประกอบแผนภูมิของเราใช้ประโยชน์จากความสามารถแบบหลายแกนที่จัดทำโดย Chart.js ซึ่งแสดงด้วยแผนภูมิปฏิกิริยา เราเพิ่งขยายผ่าน UI ด้วยความสามารถของผู้ใช้ในการเพิ่มชุดข้อมูลและประเภทแผนภูมิ (เส้นหรือแถบ)

กุญแจสำคัญในการใช้ Global Config ในกรณีนี้คือต้องรู้ว่าแต่ละคีย์สามารถเก็บสตริงได้เท่านั้น | บูลีน | หมายเลข | null | GlobalConfigArray | GlobalConfigObject (ดูการอ้างอิงค่า Global Config)

เรามีรายการต่อไปนี้ที่จะรักษาต่อแผนภูมิ:

• chartTitle ซึ่งสร้างโดยอัตโนมัติและผู้ใช้สามารถเปลี่ยนชื่อได้
• อาร์เรย์ เขตข้อมูล ที่แต่ละรายการมี:
  • ฟิลด์ เป็น fieldId จาก Airtable
  • chartOption เป็นหนึ่งบรรทัด | แถบตามที่เอกสาร Chart.js ระบุ
  • สี เป็นสี Airtable จาก colorUtils
  • hex เป็นรหัสฐานสิบหกที่เกี่ยวข้องกับสี Airtable

ในการจัดการสิ่งนี้ ฉันพบว่าสะดวกที่สุดในการทำให้ข้อมูลนี้เป็นออบเจ็กต์แทนการตั้งค่าคีย์ Global Config และค่าลงจนสุด ดูตัวอย่างด้านล่าง (globalConfig.json ใน gist) ซึ่งรวมถึงค่า Global Config เพื่อกรองบันทึกโดยผู้ป่วยและตัวแปรที่เกี่ยวข้องบางส่วนที่ใช้เพื่อสนับสนุนองค์ประกอบการกรอง typeahead (ขอบคุณ react-bootstrap-typeahead):

 { "xCharts": { "chart-1605425876029": "{\"fields\":[{\"field\":\"fldxLfpjdmYeDOhXT\",\"chartOption\":\"line\",\"color\":\"blueBright\",\"hex\":\"#2d7ff9\"},{\"field\":\"fldqwG8iFazZD5CLH\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 2:37:56 AM\"}", "chart-1605425876288": "{\"fields\":[{\"field\":\"fldGJZIdRlq3V3cKu\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 2:37:56 AM\"}", "chart-1605425876615": "{\"fields\":[{\"field\":\"fld1AnNcfvXm8DiNs\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"},{\"field\":\"fldryX5N6vUYWbdzy\",\"chartOption\":\"line\",\"color\":\"blueDark1\",\"hex\":\"#2750ae\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 2:37:56 AM\"}", "chart-1605425994036": "{\"fields\":[{\"field\":\"fld9ak8Ja6DPweMdJ\",\"chartOption\":\"line\",\"color\":\"blueLight2\",\"hex\":\"#cfdfff\"},{\"field\":\"fldxVgXdZSECMVEj6\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 2:39:54 AM\"}", "chart-1605430015978": "{\"fields\":[{\"field\":\"fldwdMJkmEGFFSqMy\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"},{\"field\":\"fldqwG8iFazZD5CLH\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"}],\"chartTitle\":\"New Chart\"}", "chart-1605430916029": "{\"fields\":[{\"field\":\"fldCuf3I2V027YAWL\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"},{\"field\":\"fldBJjtRkWUTuUf60\",\"chartOption\":\"line\",\"color\":\"blueDark1\",\"hex\":\"#2750ae\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 4:01:56 AM\"}", "chart-1605431704374": "{\"fields\":[{\"field\":\"fld7oBtl3iiHNHqoJ\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 4:15:04 AM\"}" }, "xPatientEmail": "[email protected]", "xTypeaheadValue": "Elle Gold ([email protected])", "xSelectedValue": "[{\"label\":\"Elle Gold ([email protected])\",\"id\":\"[email protected]\",\"name\":\"Elle Gold\",\"email\":\"[email protected]\"}]" }

หมายเหตุ: ข้อมูลทั้งหมดที่อยู่ด้านบน และข้อมูลที่รวมอยู่ในภาพเคลื่อนไหวด้านล่าง ไม่ใช่ข้อมูลของผู้ป่วยจริง

มาดูผลลัพธ์สุดท้ายกัน:

สิ่งที่เกี่ยวกับการพิมพ์ล่วงหน้า?

ในการกรองตามผู้ป่วย เราต้องการวิธีเลือกผู้ป่วยแล้วกรองบันทึกตามผู้ป่วยรายนี้ ในส่วนนี้ เราจะทบทวนว่าสิ่งนี้บรรลุผลได้อย่างไร

สำหรับ typeahead, react-bootstrap-typeahead เป็นตัวเลือกที่ง่าย เนื่องจากขั้นตอนเดียวที่เหลือคือการเตรียมตัวเลือกสำหรับ typeahead ผสมกับอินพุต Airtable สำหรับใส่สไตล์และโหลดบูตสแตรป และสไตล์อื่นๆ สำหรับเมนูของเรา การวางส่วนประกอบจากไลบรารีส่วนประกอบที่คุณชื่นชอบลงในแอพ Airtable นั้นไม่ตรงไปตรงมาเหมือนในการพัฒนาเว็บ React ทั่วไป อย่างไรก็ตาม มีขั้นตอนเพิ่มเติมเพียงไม่กี่ขั้นตอนเพื่อให้ทุกอย่างเป็นไปตามที่คุณคาดหวัง

นี่คือผลลัพธ์สุดท้าย:

ในการเรนเดอร์อินพุต Airtable และรักษาสไตล์ทั้งหมดของเราให้สอดคล้องกัน react-bootstrap-typeahead มาพร้อมกับ renderInput prop ดูเพิ่มเติมเกี่ยวกับวิธีการแก้ไขการแสดงผลของส่วนประกอบที่นี่

สำหรับรูปแบบบูตสแตรปและเพื่อแทนที่รายการเมนูของเรา มีการใช้ยูทิลิตี้สองรายการต่อไปนี้จาก Airtable:

• loadCSSFromString
• loadCSSFromURLAsync

ดู frontend.js ในสาระสำคัญสำหรับข้อความที่ตัดตอนมาของการใช้งานแบบพิมพ์ล่วงหน้า

บรรทัดนี้ใช้เพื่อโหลด bootstrap ทั่วโลก:

 // frontend/index.js loadCSSFromURLAsync('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

คุณจะสังเกตเห็นตรรกะเพิ่มเติมสำหรับสิ่งต่างๆ เช่น การจัดการการเปลี่ยนแปลงรูปแบบบนโฮเวอร์หรือลิงก์การรีสไตล์ ( <a></a> ) เพื่อให้ได้รูปลักษณ์และความรู้สึกบูตที่คุ้นเคย ซึ่งรวมถึงการจัดการการตั้งค่า Global Config สำหรับการพิมพ์ล่วงหน้าและการกรองระเบียน ดังนั้นหากผู้ใช้ออกจากแดชบอร์ด รีเฟรชหน้าของตน หรือต้องการแชร์แดชบอร์ดนี้กับผู้อื่น แอปจะคงผู้ป่วยที่เลือกไว้ในแดชบอร์ด แอป. นอกจากนี้ยังช่วยให้ผู้ใช้สามารถติดตั้งแอปเดียวกันนี้ได้หลายชุดพร้อมกันใน Airtable Dashboard เดียวกันกับผู้ป่วยที่เลือกไว้หรือแผนภูมิที่แตกต่างกัน

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

มาสรุปสิ่งที่เราได้กล่าวถึงไปแล้ว:

1. Airtable อนุญาตให้ทั้งผู้ใช้ที่ไม่ใช่ด้านเทคนิคและผู้ใช้ทางเทคนิคสามารถทำงานร่วมกันใน Airtable
2. Typeform มาพร้อมกับการรวม Airtable ที่ช่วยให้ผู้ใช้ที่ไม่ใช่ด้านเทคนิคสามารถแมปผลลัพธ์ของ Typeform กับ Airtable
3. แอป Airtable เป็นวิธีที่มีประสิทธิภาพในการเติมพลังให้ Airtable Base ไม่ว่าจะเลือกจากตลาดหรือสร้างแอปที่กำหนดเอง
4. นักพัฒนาสามารถขยาย Airtable ได้อย่างรวดเร็วในแทบทุกวิถีทางที่จะจินตนาการได้ด้วยแอปเหล่านี้ ตัวอย่างข้างต้นของเราใช้เวลาเพียงสามสัปดาห์ในการออกแบบและนำไปใช้ (ด้วยความช่วยเหลือมหาศาลจากห้องสมุดที่มีอยู่)
5. ระบบ #TAG# สามารถใช้เพื่อแก้ไขแดชบอร์ดโดยไม่ต้องเปลี่ยนโค้ดโดยนักพัฒนา มีกรณีการใช้งานที่ดีและแย่ลงสำหรับสิ่งนี้ อย่าลืมจำกัดการอนุญาตสำหรับบทบาทผู้สร้างหากใช้กลยุทธ์นี้
6. การใช้ Global Config ช่วยให้นักพัฒนาสามารถยืนยันข้อมูลภายในการติดตั้งแอพได้ ผสมผสานสิ่งนี้เข้ากับกลยุทธ์การจัดการสถานะของคุณเพื่อเริ่มต้นข้อมูลสำหรับส่วนประกอบของคุณ
7. อย่าคาดหวังให้ลากและวางส่วนประกอบจากไลบรารีและโปรเจ็กต์อื่นๆ ลงในแอป Airtable ของคุณโดยตรง สามารถโหลดสไตล์ได้โดยใช้โปรแกรม loadCSSFromString และ loadCSSFromURLAsync ที่จัดเตรียมโดย Airtable

พิสูจน์อนาคต

ใช้มิดเดิลแวร์ที่ซับซ้อนมากขึ้น

ด้วย Typeform และ Airtable การกำหนดค่าการแมปคำถามกับคอลัมน์เป็นเรื่องง่ายและคุ้มค่า

อย่างไรก็ตาม มีข้อเสียอยู่อย่างหนึ่งคือ หากคุณมีแบบสำรวจมากกว่า 100 คำถามซึ่งจับคู่กับ Airtable และคุณจำเป็นต้องแก้ไขการแมป คุณต้องลบการแมปทั้งหมดแล้วเริ่มใหม่อีกครั้ง เห็นได้ชัดว่าไม่เหมาะ แต่สำหรับการผสานรวมฟรี เราสามารถจัดการกับสิ่งนี้ได้

ตัวเลือกอื่นๆ คือการรวม Zapier (หรือคล้ายกัน) จัดการข้อมูลระหว่าง Typeform และ Airtable จากนั้นคุณสามารถแก้ไขการแมปคำถามไปยังคอลัมน์ใดก็ได้โดยไม่ต้องเริ่มต้นใหม่ สิ่งนี้จะมีการพิจารณาต้นทุนของตัวเองเช่นกัน

หวังว่าบทเรียนบางส่วนที่เรียนรู้และสื่อสารที่นี่จะช่วยผู้อื่นที่ต้องการสร้างโซลูชันด้วย Airtable

สุดท้าย คุณสามารถตรวจสอบส่วนสำคัญด้วยไฟล์ต่างๆ ที่กล่าวถึงในบทความนี้