إنشاء لوحات تحكم مباشرة باستخدام Airtable و React
نشرت: 2022-03-11سواء كانت الشركة مؤسسة كبيرة أو شركة ناشئة ، فإن جمع البيانات من المستخدمين والعملاء ، وإعداد التقارير أو تصور تلك البيانات أمر بالغ الأهمية للأعمال.
عملت مؤخرًا مع شركة ناشئة في مجال الطب عن بُعد مقرها في البرازيل. وتتمثل مهمتها في توفير الرعاية والمراقبة عن بُعد من خلال ربط المرضى بالمهنيين الطبيين والمدربين الصحيين. كانت الحاجة الأساسية هي إنشاء واجهة للمدربين والمهنيين الصحيين لمراجعة معلومات المريض بسهولة وأهم المقاييس المتعلقة بوضعه الخاص: لوحة القيادة.
أدخل Typeform و Airtable.
Typeform
Typeform هي واحدة من أدوات جمع البيانات التي تمكّن المستخدمين الذين يكملون الاستبيان من إجراء تجارب ويب سريعة الاستجابة. كما أنه يأتي بالعديد من الميزات التي تجعل الاستطلاعات أكثر ذكاءً ، خاصةً عند دمجها:
- المنطق يقفز
- الحقول المخفية
يمكن مشاركة الاستطلاعات عبر عناوين URL التي يمكن زرعها مسبقًا بقيم الحقول المخفية ، والتي يمكن استخدامها بعد ذلك لتنفيذ القفزات المنطقية وتغيير سلوك الاستطلاع للمستخدم باستخدام الرابط.
يستخدم Airtable
Airtable عبارة عن قاعدة بيانات جدول بيانات مختلطة ومنصة سحابية تعاونية. يعني تركيزها على وظيفة الإشارة والنقر أنه يمكن للمستخدمين غير التقنيين تكوينها بدون تشفير. يحتوي Airtable على العديد من حالات الاستخدام في أي عمل أو مشروع.
يمكنك استخدام قاعدة Airtable من أجل:
- CRM (إدارة علاقات العملاء)
- HRIS (نظام معلومات الموارد البشرية)
- ادارة مشروع
- تخطيط المحتوى
- تخطيط لحدث
- تعليقات المستخدمين
هناك العديد من حالات الاستخدام المحتملة. يمكنك استكشاف دراسات حالة Airtable هنا.
إذا لم تكن معتادًا على Airtable ، فإن نموذج البيانات المفاهيمي ينهار على النحو التالي:
- مساحة العمل - مكونة من قواعد
- قاعدة - تتكون من طاولات
- الجدول - يتكون من الحقول (الأعمدة) والصفوف
- طريقة العرض - منظور على بيانات الجدول مع عوامل تصفية اختيارية وحقول مختصرة
- حقل - عمود في جدول مع نوع حقل ؛ انظر هنا لمزيد من المعلومات حول أنواع الحقول
بصرف النظر عن توفير قاعدة بيانات مستضافة على السحابة مع ميزات جداول البيانات المألوفة ، فإليك بعض الأسباب التي تجعل النظام الأساسي قويًا للغاية:
للمستخدمين غير التقنيين ، يوفر Airtable:
- واجهة أمامية سهلة الاستخدام
- الأتمتة التي يمكن إنشاؤها باستخدام تكوين التأشير والنقر لإرسال رسائل البريد الإلكتروني ومعالجة صفوف البيانات وجدولة المواعيد في التقويمات والمزيد
- أنواع طرق عرض متعددة تسمح للفرق بالتعاون على نفس القاعدة والجداول
- تطبيقات Airtable التي يمكن تثبيتها من السوق لشحن القاعدة
للمطورين ، يوفر Airtable:
- واجهة برمجة تطبيقات خلفية موثقة جيدًا
- بيئة برمجة نصية تسمح للمطورين بأتمتة الإجراءات داخل القاعدة
- الأتمتة التي يمكنها أيضًا تشغيل برامج نصية مطورة مخصصة يتم تشغيلها داخل بيئة Airtable ، مما يوسع من قدرات الأتمتة
يمكنك معرفة المزيد على Airtable هنا.
الشروع في العمل: Typeform إلى Airtable
تم تكوين استطلاعات Typeform بالفعل من قبل العميل ، وكانت الخطوة التالية هي التخطيط لكيفية هبوط هذه البيانات في Airtable ثم تحويلها إلى لوحة معلومات. هناك العديد من الأسئلة التي يجب مراعاتها عند إنشاء لوحات معلومات فوق أي قاعدة بيانات: كيف يجب علينا هيكلة البيانات؟ ما هي البيانات التي يجب معالجتها قبل التصور؟ هل يجب علينا مزامنة القاعدة مع جداول بيانات Google واستخدام Google Data Studio؟ هل يجب أن نقوم بالتصدير والعثور على أداة أخرى تابعة لجهة خارجية؟
لحسن الحظ بالنسبة للمطورين ، لا يوفر Airtable الأتمتة والبرمجة النصية للتعامل مع خطوات معالجة البيانات فحسب ، بل إنه أتاح أيضًا إنشاء تطبيقات وواجهات مخصصة أعلى قاعدة Airtable باستخدام تطبيقات Airtable.
تطبيقات مخصصة في Airtable
كانت التطبيقات المخصصة في Airtable موجودة منذ إصدار Airtable Blocks SDK في بداية عام 2018 ، وتمت إعادة تسميتها مؤخرًا إلى Apps. كان إصدار Blocks ضخمًا من حيث أنه يعني أن المبدعين لديهم الآن القدرة على التطوير ، كما يقول Airtable ، "مجموعة Lego القابلة لإعادة الدمج بلا حدود."
في الآونة الأخيرة مع التغيير إلى التطبيقات ، أتاح Airtable Marketplace إمكانية مشاركة التطبيقات بشكل عام أيضًا.
تزود تطبيقات Airtable الشركات بمجموعة Lego قابلة لإعادة الدمج بشكل لا نهائي يمكنهم تخصيصها وفقًا لاحتياجاتهم.
من أجل إنشاء تطبيق مخصص في Airtable ، يجب أن يعرف مطور JavaScript كيفية استخدام React ، وهي إحدى مكتبات JavaScript الأكثر شيوعًا لبناء واجهات المستخدم. يوفر Airtable مكتبة مكونة من مكونات وخطافات React الوظيفية ، والتي تساعد بشكل كبير في بناء واجهة مستخدم متسقة بسرعة وتحديد كيفية إدارة الحالة داخل التطبيق ومكوناته.
تحقق من مقالة البدء في Airtable للحصول على مزيد من المعلومات و Airtable على GitHub للحصول على أمثلة من التطبيقات.
متطلبات Airtable لوحة القيادة
بعد مراجعة نماذج لوحة القيادة مع فريق العميل ، كانت أنواع البيانات التي سيتم استخدامها واضحة. سنحتاج إلى سلسلة من مكونات لوحة المعلومات التي سيتم عرضها كنص على لوحة القيادة ومخططات لمقاييس مختلفة يمكن تتبعها بمرور الوقت.
كان المدربون والمهنيون الطبيون بحاجة إلى أن يكونوا قادرين على بناء لوحة معلومات مخصصة لكل مريض ، لذلك كنا بحاجة إلى طريقة مرنة لإضافة الرسوم البيانية وإزالتها. سيتم عرض البيانات الثابتة الأخرى المتعلقة بكل مريض بغض النظر عن المريض المختار.
في هذه الحالة ، يتم اختصار أقسام لوحة القيادة إلى:
- معلومات عامة - اسم المريض ، البريد الإلكتروني ، رقم الهاتف ، تفضيلات الاتصال ، تاريخ الميلاد ، العمر
- الأهداف - الأهداف التي حددها المريض بناءً على نتائج المسح
- بعض الإحصائيات - مؤشر كتلة الجسم والطول والوزن
- استخدام الأدوية - وضع قائمة بجميع الأدوية الموصوفة التي يستخدمها المريض بالفعل
- التاريخ العائلي للحالات - مفيد في تشخيص حالات معينة
- المخططات - قسم حيث يمكن لمستخدم لوحة معلومات Airtable إضافة مخطط وتكوين المقياس الذي سيتخيله بمرور الوقت
تتمثل إحدى الطرق للتعامل مع جميع الأقسام باستثناء المخططات في ترميز جميع الأعمدة للأهداف واستخدام الأدوية وتاريخ العائلة في لوحة القيادة. ومع ذلك ، لن يسمح ذلك لفريق العميل بإضافة أسئلة جديدة إلى استطلاع Typeform ولا إضافة عمود جديد إلى جدول Airtable لتقديم هذه البيانات على لوحة القيادة دون الحاجة إلى قيام مطور بتحديث التطبيق المخصص.
كان الحل الأكثر أناقة وقابلية للتوسعة لهذا التحدي هو إيجاد طريقة لتمييز الأعمدة على أنها ذات صلة بقسم لوحة معلومات معين واسترداد تلك الأعمدة باستخدام البيانات الوصفية التي يعرضها Airtable عند استخدام نماذج الجدول والحقل.
تم تحقيق ذلك باستخدام "أوصاف الحقول" كمكان لوضع علامة على عمود من الجدول باعتباره ذا صلة بقسم لوحة المعلومات ليتم عرضه على المستخدم. بعد ذلك ، يمكننا التأكد من أن أولئك الذين لديهم دور المنشئ (المسؤولين) للقاعدة لديهم القدرة على تعديل أوصاف الحقول هذه لتغيير ما يظهر على لوحة المعلومات. لتوضيح هذا الحل ، سنركز في الغالب على العناصر الموجودة في المعلومات العامة وكيفية تقديم الرسوم البيانية.
إنشاء نظام # TAG #
بالنظر إلى أقسام لوحة المعلومات ، كان من المنطقي إنشاء علامات قابلة لإعادة الاستخدام لبعض الأقسام وعلامات محددة لأعمدة معينة. بالنسبة لعناصر مثل اسم المريض والبريد الإلكتروني ورقم الهاتف ، تمت إضافة #NAME# و #EMAIL# و #PHONE# إلى وصف كل حقل ، على التوالي. سيسمح ذلك باسترداد هذه المعلومات عبر البيانات الوصفية للجدول مثل هذا:
const name = table ? table.fields.filter(field => field.description?.includes("#NAME#"))بالنسبة لمناطق لوحة القيادة التي قد تحتاج إلى السحب من العديد من الأعمدة ذات العلامات ، سيكون لدينا العلامات التالية لكل قسم من أقسام لوحة المعلومات:
- OBJ - الأهداف
- FAM - تاريخ العائلة
- MED - استخدام الطب
- هل - تاريخ عائلي خاص بالسرطان
- المخطط - أي عمود يجب الحصول عليه من أجل إضافة المخططات ؛ يجب أن تكون كمية
بالإضافة إلى ذلك ، كان من المهم فصل اسم العمود في الجدول عن التسمية التي سيتلقاها على لوحة القيادة ، لذا فإن أي شيء يتلقى العلامة #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# هذا ، نحقق ثلاثة أشياء رئيسية:
- يمكن تغيير أسماء الأعمدة (الحقول) في الجدول حسب الرغبة.
- يمكن أن تكون تسميات البيانات في لوحة المعلومات مميزة عن أسماء الأعمدة.
- يمكن تحديث أقسام لوحة المعلومات للأهداف واستخدام الأدوية وتاريخ العائلة والمخططات بواسطة فريق العميل دون لمس سطر من التعليمات البرمجية.
استمرار حالة في طاولة جوية
في React ، نستخدم الحالة ونمررها إلى مكونات كخاصيات لإعادة تصيير هذا المكون إذا تغيرت حالته. عادةً ما يكون هذا مرتبطًا باستدعاء API الذي يغذي مكون لوحة القيادة ، ولكن في Airtable لدينا بالفعل جميع البيانات ونحتاج ببساطة إلى تصفية ما نعرضه بناءً على المريض الذي نشاهده. بالإضافة إلى ذلك ، إذا استخدمنا الحالة ، فلن تستمر البيانات بعد التحديث في لوحة المعلومات نفسها.
لذا ، كيف يمكننا الاستمرار في تحديث القيمة في الماضي للحفاظ على تصفية لوحة القيادة؟ لحسن الحظ ، يوفر Airtable رابطًا لهذا يسمى useGlobalConfig حيث يحتفظ بمخزن قيم مفتاح لتثبيت التطبيق على لوحة القيادة. نحتاج ببساطة إلى تنفيذ منطق استرداد القيم من مخزن القيمة الرئيسية هذا عندما يتم تحميل التطبيق لتزويد مكونات لوحة القيادة بالوقود.
ما هو أكثر فائدة في استخدام الخطاف useGlobalConfig هو أنه عند تعيين قيمه ، يتم إعادة تصيير مكون لوحة القيادة ومكوناته الفرعية ، بحيث يمكنك استخدام التكوين العام كما لو كنت تستخدم متغير حالة في تنفيذ نموذجي لـ React.

تقديم المخططات
يوفر Airtable أمثلة على الرسوم البيانية من خلال تطبيق Simple Chart الخاص به ، والذي يستخدم مخططات React ، وهو غلاف React على Chart.js (مخطط استقبال).
في تطبيق Simple Chart ، لدينا مخطط واحد للتطبيق بأكمله ، ولكن في تطبيق Dashboard الخاص بنا ، نحتاج إلى قدرة المستخدم على إضافة وإزالة المخططات الخاصة به من لوحة القيادة الخاصة به. علاوة على ذلك ، في المناقشة مع فريق العميل ، يبدو أن بعض المقاييس يمكن عرضها بشكل أفضل على نفس الرسم البياني (مثل قراءات ضغط الدم الانبساطي والانقباضي).
بهذا لدينا العناصر التالية التي يجب معالجتها:
- الحالة المستمرة لمخطط كل مستخدم (أو أفضل باستخدام التكوين العام)
- السماح بمقاييس متعددة لكل مخطط
هذا هو المكان الذي تكون فيه قوة التكوين العام في متناول اليد ، حيث يمكننا استخدام متجر القيمة الرئيسية للحفاظ على المقاييس المحددة وأي شيء آخر يتعلق بقائمة المخططات الخاصة بنا. أثناء قيامنا بتكوين مخطط في واجهة المستخدم ، سيتم إعادة تقديم مكون المخطط نفسه بسبب التحديثات التي تم إجراؤها على التكوين العام. بالنسبة لقسم الرسم البياني بلوحة المعلومات ، إليك خلاصة مع المكونات للرجوع إليها ، مع التركيز على مخططات لوحة القيادة والمخطط الفردي.
الجدول الذي يتم تمريره إلى كل مخطط هو ما يتم استخدامه لبيانات التعريف الخاصة به للعثور على الحقول ، بينما تم بالفعل تصفية السجلات التي تم تمريرها بواسطة المريض المحدد في مكون لوحة المعلومات ذي المستوى الأعلى الذي يستورد 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 ، والتي تظهر مع مخططات React. لقد قمنا فقط بتوسيعه عبر واجهة المستخدم مع قدرة المستخدم على إضافة مجموعة بيانات ونوع مخطط (خط أو شريط).
مفتاح استخدام Global Config ، في هذه الحالة ، هو معرفة أن كل مفتاح يمكن أن يحتوي فقط على سلسلة | منطقي | رقم | فارغ | GlobalConfigArray | GlobalConfigObject (راجع مرجع قيمة التكوين العام).
لدينا العناصر التالية للاحتفاظ بها في كل مخطط:
- عنوان المخطط الذي يتم إنشاؤه تلقائيًا ويمكن للمستخدم إعادة تسميته
- مصفوفة الحقول التي يحتوي كل عنصر فيها على:
- الحقل كمعرّف ميداني من Airtable
- المخطط البياني كخط واحد | شريط كما تشير مستندات Chart.js
- اللون كلون Airtable من colorUtils
- عرافة كرمز سداسي عشري يتعلق بلون طاولة الهواء
لإدارة هذا ، وجدت أنه من الأنسب تقييد هذه البيانات ككائن بدلاً من تعيين مفاتيح وقيم التكوين العام على طول الطريق. انظر المثال أدناه (globalConfig.json in the gist) ، والذي يتضمن قيم التهيئة العامة لفلترة السجلات حسب المريض وبعض المتغيرات ذات الصلة المستخدمة لدعم مكون ترشيح الكتابة (بفضل رد فعل-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؟
من أجل التصفية حسب المريض ، احتجنا إلى طريقة لاختيار مريض ثم تصفية السجلات بناءً على هذا المريض. في هذا القسم ، نستعرض كيف تم تحقيق ذلك.
بالنسبة إلى آلة الطباعة ، كان رد فعل bootstrap-typeahead اختيارًا سهلاً ، حيث كانت الخطوات الوحيدة المتبقية هي إعداد خيارات الكتابة ، وخلطها مع مدخلات Airtable للتصميم وتحميل bootstrap ، وبعض الأنماط الأخرى لقائمتنا. إن إسقاط المكونات من مكتبات المكونات المفضلة لديك في تطبيق Airtable ليس أمرًا مباشرًا كما هو الحال في تطوير ويب React النموذجي ؛ ومع ذلك ، لا يوجد سوى بضع خطوات إضافية لجعل كل شيء يبدو بالطريقة التي تتوقعها.
هنا هو النتيجة النهائية:
لتقديم مدخلات Airtable والحفاظ على تناسق جميع أنماطنا ، يأتي رد فعل-تمهيد-أسلوب الكتابة مع خاصية تقديم. شاهد المزيد حول كيفية تعديل طريقة عرض المكون هنا.
بالنسبة لأنماط التمهيد وتجاوز عناصر القائمة الخاصة بنا ، تم استخدام المنفذين التاليين من Airtable:
- loadCSSFromString
- loadCSSFromURLAsync
انظر frontend.js في الخلاصة للحصول على مقتطفات من تنفيذ الكتابة على الآلة الكاتبة.
تم استخدام هذا الخط لتحميل bootstrap عالميًا:
// frontend/index.js loadCSSFromURLAsync('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); ستلاحظ بعض المنطق الإضافي لأشياء مثل التعامل مع تغييرات النمط على روابط التمرير أو إعادة التصميم ( <a></a> ) للحصول على شكل وأسلوب التمهيد المألوف. يتضمن هذا أيضًا معالجة تعيين قيم التكوين العام للكتابة وتصفية السجلات بحيث إذا ترك المستخدم لوحة المعلومات الخاصة به أو قام بتحديث صفحته أو يرغب في مشاركة لوحة المعلومات هذه مع الآخرين ، فسيظل التطبيق ثابتًا على المريض المحدد في لوحة المعلومات تطبيق. يسمح هذا أيضًا للمستخدمين بتثبيت نسخ متعددة من هذا التطبيق نفسه جنبًا إلى جنب في نفس لوحة تحكم Airtable مع مرضى مختلفين مختارين أو بمخططات مختلفة.
ضع في اعتبارك أن لوحة القيادة في Airtable متاحة أيضًا لجميع مستخدمي Base ، لذلك ستتم تصفية عمليات تثبيت التطبيقات المخصصة هذه على لوحة القيادة لنفس المرضى والمخططات بغض النظر عن المستخدمين الذين ينظرون إلى لوحة القيادة في نفس الوقت.
دعنا نلخص ما غطيناه حتى الآن:
- يسمح Airtable لكل من المستخدمين غير التقنيين والمستخدمين التقنيين بالتعاون في Airtable.
- يأتي Typeform مع تكامل Airtable الذي يسمح للمستخدمين غير التقنيين بتعيين نتائج Typeform إلى Airtable.
- توفر تطبيقات Airtable طريقة فعالة لشحن قاعدة Airtable الخاصة بها ، سواء بالاختيار من السوق أو إنشاء تطبيق مخصص.
- يمكن للمطورين توسيع Airtable بسرعة بأي طريقة تقريبًا يمكن تخيلها باستخدام هذه التطبيقات. استغرق مثالنا أعلاه ثلاثة أسابيع فقط لتصميمه وتنفيذه (بمساعدة هائلة من المكتبات الحالية بالطبع).
- يمكن استخدام نظام
#TAG#لتعديل لوحة القيادة دون الحاجة إلى تغييرات التعليمات البرمجية من قبل المطورين. هناك حالات استخدام أفضل وأسوأ لهذا الغرض. تأكد من قصر الأذونات على دور المنشئ إذا كنت تستخدم هذه الإستراتيجية. - يتيح استخدام التكوين العام للمطورين الاحتفاظ بالبيانات داخل تثبيت التطبيق. امزج هذا في إستراتيجية إدارة الدولة الخاصة بك لبذر البيانات لمكوناتك.
- لا تتوقع سحب وإفلات المكونات من المكتبات والمشاريع الأخرى مباشرة في تطبيق Airtable الخاص بك. يمكن تحميل الأنماط باستخدام
loadCSSFromStringوloadCSSFromURLAsyncالتي يوفرها Airtable.
إثبات المستقبل
استخدم برمجيات وسيطة أكثر تطوراً
باستخدام Typeform و Airtable ، من السهل والفعال من حيث التكلفة تكوين تعيين الأسئلة إلى الأعمدة.
ومع ذلك ، هناك عيب كبير: إذا كان لديك استطلاع لأكثر من 100 سؤال معين إلى Airtable وتحتاج إلى تعديل التعيين ، فيجب عليك حذف التعيين بالكامل والبدء من جديد. من الواضح أن هذا ليس مثاليًا ، ولكن من أجل الاندماج الحر ، يمكننا التعامل مع هذا.
من الخيارات الأخرى وجود تكامل Zapier (أو ما شابه) لإدارة البيانات بين Typeform و Airtable ، ثم يمكنك تعديل تعيين أي سؤال إلى أي عمود دون البدء من نقطة الصفر. سيكون لهذا اعتبارات التكلفة الخاصة به في الاعتبار أيضًا.
نأمل أن تساعد بعض الدروس المستفادة والمتصلة هنا الآخرين الذين يتطلعون إلى بناء حلول باستخدام Airtable.
أخيرًا ، يمكنك التحقق من جوهر الملفات التي تمت مناقشتها في هذه المقالة.
