Airtable ve React ile Canlı Gösterge Tabloları Oluşturma

Yayınlanan: 2022-03-11

Bir şirket ister büyük bir kuruluş isterse yeni bir başlangıç ​​olsun, kullanıcılardan ve müşterilerden veri toplamak ve bu verileri raporlamak veya görselleştirmek iş için çok önemlidir.

Geçenlerde Brezilya merkezli bir teletıp girişimiyle çalıştım. Misyonu, hastaları tıp uzmanlarına ve sağlık koçlarına bağlayarak uzaktan bakım ve izleme sağlamaktır. Temel ihtiyaç, koçların ve sağlık profesyonellerinin bir hastanın bilgilerini ve kendi özel durumlarıyla ilgili en önemli ölçütlerini kolayca gözden geçirmeleri için bir arayüz oluşturmaktı: bir gösterge tablosu.

Typeform ve Airtable girin.

yazı biçimi

Typeform, bir anketi tamamlayan kullanıcılar için duyarlı web deneyimleri sağlayan go-to-veri toplama araçlarından biridir. Ayrıca, özellikle birleştirildiğinde anketleri daha akıllı hale getiren çeşitli özelliklerle birlikte gelir:

  • Mantık Sıçramaları
  • Gizli Alanlar

Anketler, daha sonra mantıksal atlamaları uygulamak ve bağlantıyla kullanıcı için anketin davranışını değiştirmek için kullanılabilen, gizli alanlar için değerlerle önceden tohumlanabilen URL'ler aracılığıyla paylaşılabilir.

Airtable Kullanımları

Airtable, bir elektronik tablo-veritabanı melezi ve işbirliğine dayalı bir bulut platformudur. İşaretle ve tıkla işlevine odaklanması, teknik bilgisi olmayan kullanıcıların kodlama yapmadan yapılandırabileceği anlamına gelir. Airtable, herhangi bir iş veya projede çok sayıda kullanım durumuna sahiptir.

Airtable Base'i aşağıdakiler için kullanabilirsiniz:

  • CRM (Müşteri İlişkileri Yönetimi)
  • HRIS (İnsan Kaynakları Bilgi Sistemi)
  • Proje Yönetimi
  • İçerik Planlama
  • Olay planlaması
  • Kullanıcı geribildirimi

Daha birçok potansiyel kullanım durumu var. Airtable vaka çalışmalarını buradan inceleyebilirsiniz.

Airtable'a aşina değilseniz, kavramsal veri modeli şu şekilde bozulur:

  • Çalışma Alanı - Tabanlardan Oluşan
  • Baz - Tablolardan Oluşan
  • Tablo - Alanlar (sütunlar) ve satırlardan oluşan
  • Görünüm - İsteğe bağlı filtreler ve azaltılmış Alanlar ile Tablo verilerine bir bakış açısı
  • Alan - Alan Türüne sahip bir Tablo sütunu; Alan Türleri hakkında daha fazla bilgi için buraya bakın

Bilinen elektronik tablo özelliklerine sahip bulutta barındırılan bir veritabanı sağlamanın yanı sıra, platformun bu kadar güçlü olmasının nedenlerinden bazıları şunlardır:

Airtable ile çalışan teknik ve teknik olmayan kullanıcıların tasviri.

Teknik bilgisi olmayan kullanıcılar için Airtable şunları sağlar:

  • Kullanımı kolay bir ön uç arayüzü
  • E-posta göndermek, veri satırlarını işlemek, takvimlerdeki randevuları planlamak ve daha fazlası için işaretle ve tıkla yapılandırmasıyla oluşturulabilen otomasyonlar
  • Ekiplerin aynı Taban ve tablolar üzerinde işbirliği yapmasına olanak tanıyan birden çok görünüm türü
  • Bir Üssü güçlendirmek için pazardan yüklenebilen Airtable Uygulamaları

Geliştiriciler için Airtable şunları sağlar:

  • İyi belgelenmiş bir arka uç API'si
  • Geliştiricilerin bir Üs içindeki eylemleri otomatikleştirmesine olanak tanıyan bir komut dosyası ortamı
  • Airtable ortamında çalışan özel geliştirilmiş komut dosyalarını da tetikleyebilen otomasyonlar, otomasyonların yeteneklerini genişletir

Airtable hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Başlarken: Typeform to Airtable

Typeform anketleri zaten müşteri tarafından yapılandırıldı ve bir sonraki adım, bu verilerin Airtable'a nasıl ineceğini ve ardından bir gösterge panosuna nasıl dönüştürüleceğini planlamaktı. Herhangi bir veritabanı üzerinde gösterge tabloları oluştururken dikkate alınması gereken birçok soru vardır: Verileri nasıl yapılandırmalıyız? Görselleştirmeden önce hangi verilerin işlenmesi gerekecek? Üssü Google E-Tablolar ile senkronize edip Google Data Studio'yu kullanmalı mıyız? Başka bir üçüncü taraf aracı dışa aktarıp bulmalı mıyız?

Neyse ki geliştiriciler için Airtable, veri işleme adımlarını işlemek için otomasyonlar ve komut dosyası sağlamakla kalmıyor, aynı zamanda Airtable Uygulamaları ile bir Airtable Üssü üzerinde özel uygulamalar ve arayüzler oluşturmayı da mümkün kılıyor.

Airtable'da Özel Uygulamalar

Airtable'daki Özel Uygulamalar, Airtable Blocks SDK'nın 2018'in başında piyasaya sürülmesinden bu yana var ve yakın zamanda Uygulamalar olarak yeniden adlandırıldı. Blocks'un piyasaya sürülmesi çok büyüktü, çünkü içerik oluşturucuların artık Airtable'ın dediği gibi "Sonsuz bir şekilde yeniden birleştirilebilir bir Lego kiti" geliştirme yeteneğine sahip oldukları anlamına geliyordu.

Daha yakın zamanda, uygulamalarda yapılan değişiklikle Airtable Marketplace, uygulamaları herkese açık olarak paylaşmayı da mümkün kıldı.

Airtable Uygulamaları, işletmelere ihtiyaçlarına göre uyarlayabilecekleri sonsuz yeniden birleştirilebilir bir Lego kiti sağlar.

Airtable'da özel bir uygulama oluşturmak için bir JavaScript geliştiricisinin, kullanıcı arayüzleri oluşturmak için en popüler JavaScript kitaplıklarından biri olan React'i nasıl kullanacağını bilmesi gerekir. Airtable, hızlı bir şekilde tutarlı bir kullanıcı arayüzü oluşturmak ve uygulama ve bileşenleri içinde durumu nasıl yöneteceğinizi belirlemek için büyük bir yardımcı olan işlevsel React bileşenleri ve kancalarından oluşan bir bileşen kitaplığı sağlar.

Daha fazla bilgi için Airtable'ın Başlarken makalesine ve uygulama örnekleri için GitHub'daki Airtable'a bakın.

Airtable Kontrol Paneli Gereksinimleri

Müşteri ekibiyle birlikte pano maketlerini inceledikten sonra, kullanılacak veri türleri netleşti. Panoda metin olarak görüntülenecek bir dizi pano bileşenine ve zaman içinde izlenebilecek farklı metriklerin grafiklerine ihtiyacımız olacak.

Koçların ve tıp uzmanlarının her hasta için özel bir gösterge panosu oluşturabilmesi gerekiyordu, bu nedenle çizelgeleri eklemek ve kaldırmak için esnek bir yola ihtiyacımız vardı. Her hastayla ilgili diğer statik veriler, seçilen hasta ne olursa olsun görüntülenecektir.

Bu durumda, gösterge tablosu bölümleri şu şekilde özetlendi:

  • Genel Bilgiler - Hasta Adı, E-posta, Telefon Numarası, İletişim Tercihi, Doğum Tarihi, Yaş
  • Hedefler - Hastanın anket sonuçlarına dayalı olarak sahip olduğu hedefler
  • Bazı İstatistikler - BMI, Boy ve Kilo
  • İlaç Kullanımı - Bir hasta tarafından halihazırda kullanılan tüm reçeteli ilaçların listelenmesi
  • Aile Koşullarının Tarihçesi - Belirli koşulların teşhisinde yardımcı olur
  • Grafikler - Airtable kontrol paneli kullanıcısının bir grafik ekleyebileceği ve zaman içinde hangi ölçümü görselleştireceğini yapılandırabileceği bir bölüm

Airtable Dashboard maketini gösteren resim.

Çizelgeler dışındaki tüm bölümlere yaklaşmanın bir yolu, hedefler, ilaç kullanımı ve aile geçmişi için tüm sütunları gösterge tablosuna sabit kodlamak olacaktır. Ancak bu, müşteri ekibinin bir Typeform anketine yeni sorular eklemesine veya bir geliştiricinin özel uygulamayı güncellemesine gerek kalmadan bu verileri gösterge tablosunda sunmak için Airtable tablosuna yeni bir sütun eklemesine izin vermez.

Bu zorluğun daha zarif ve genişletilebilir bir çözümü, sütunları belirli bir gösterge panosu bölümüyle alakalı olarak etiketlemenin ve Airtable'ın Tablo ve Alan modellerini kullanırken gösterdiği meta verileri kullanarak bu sütunları almanın bir yolunu bulmaktı.

Bu, Tablodaki bir sütunu kullanıcıya görüntülenecek bir pano bölümüyle alakalı olarak etiketlemek için bir yer olarak Alan Açıklamaları kullanılarak gerçekleştirildi. Ardından, yalnızca Üs için Oluşturucu rolüne sahip olanların (yöneticiler), gösterge tablosunda görünenleri değiştirmek için bu Alan Açıklamalarını değiştirme yeteneğine sahip olmasını sağlayabilirdik. Bu çözümü göstermek için, çoğunlukla Genel Bilgilerdeki maddelere ve Grafiklerin nasıl sunulacağına odaklanacağız.

#TAG# Sistemi Oluşturma

Pano bölümleri göz önüne alındığında, bazı bölümler için yeniden kullanılabilir etiketler ve belirli sütunlar için özel etiketler yapmak mantıklıydı. Hasta adı, e-posta adresi ve telefon numarası gibi öğeler için sırasıyla her bir Alanın açıklamasına #NAME# , #EMAIL# ve #PHONE# eklenmiştir. Bu, bu bilgilerin aşağıdaki gibi Tablo meta verileri aracılığıyla alınmasına izin verir:

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

Gösterge tablosunun birçok etiketli sütundan alınması gereken alanları için, her bir gösterge tablosu bölümü için aşağıdaki etiketlere sahip olurduk:

  • OBJ - Hedefler
  • FAM - Aile Tarihi
  • MED - İlaç Kullanımı
  • CAN - Kansere Özgü Aile Öyküsü
  • CHART - Grafik eklemek için kaynaklanması gereken herhangi bir sütun; bir miktar olmalı

Ayrıca, bir Tablodaki bir sütunun adını, gösterge tablosunda alacağı etiketten ayırmak önemliydi, böylece #TAG# alan herhangi bir şey, Alan Açıklamasında iki #LABEL# etiketi alma yeteneğine sahip olacaktı. . Bir Alan Açıklaması şöyle görünür:

Bir alan açıklamasında etiketlerin kullanımını gösteren ekran görüntüsü.

#LABEL# etiketlerinin eksik olması durumunda Tablodan sütun adını görüntüleyeceğiz.

Önceki kod örneğindeki alanı aldıktan sonra, açıklamadaki etiket kümesini bunun gibi basit bir fonksiyonla ayrıştırabiliriz:

 // 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}; }

Bu #TAG# sistemiyle üç ana şey başarıyoruz:

  • Tablodaki sütun adları (alanları) istenildiği gibi değiştirilebilir.
  • Panodaki veriler için etiketler, sütun adlarından farklı olabilir.
  • Hedefler, İlaç Kullanımı, Aile Geçmişi ve Grafikler için Dashboard bölümleri, bir kod satırına dokunmadan müşteri ekibi tarafından güncellenebilir.

Airtable'da Kalıcı Durum

React'te, durumu kullanır ve durumu değişirse o bileşeni yeniden oluşturmak için onu bileşenlere sahne olarak iletiriz. Normalde bu, bir gösterge panosu bileşenini besleyen bir API çağrısına bağlıdır, ancak Airtable'da zaten tüm verilere sahibiz ve görüntülediğimiz hastaya göre görüntülediğimiz şeyi filtrelememiz yeterlidir. Ayrıca, durumu kullanırsak, gösterge tablosunun kendisinde bir yenilemeden sonra verileri sürdürmez.

Öyleyse, bir gösterge tablosunu filtrelenmiş halde tutmak için yenilemeden sonra bir değeri nasıl sürdürebiliriz? Neyse ki, Airtable, bir gösterge panosunda bir uygulama yüklemesi için bir anahtar-değer deposunu koruduğu useGlobalConfig adlı buna bir kanca sağlar. Uygulama, gösterge tablosu bileşenlerimizi beslemek için yüklendiğinde, bu anahtar/değer deposundan değer alma mantığını uygulamamız yeterlidir.

useGlobalConfig kancasını kullanma konusunda daha da yararlı olan şey, değerleri ayarlandığında, gösterge panosu bileşeninin ve alt bileşenlerinin yeniden işlenmesidir, böylece Global Config'i, tipik bir React uygulamasında bir durum değişkenini kullanır gibi kullanabilirsiniz.

Grafiklerle Tanışın

Airtable, Chart.js'de (chart-ception) bir React sarmalayıcı olan React Charts'ı kullanan Simple Chart App ile çizelge örnekleri sunar.

Basit Grafik Uygulamasında, tüm uygulama için bir grafiğimiz var, ancak Gösterge Tablosu Uygulamamızda, kullanıcının kendi gösterge tablosundan kendi çizelgelerini ekleme ve kaldırma yeteneğine ihtiyacımız var. Dahası, müşteri ekibiyle yapılan görüşmede, belirli ölçümlerin aynı çizelgede daha iyi görülebileceği görülüyor (diyastolik ve sistolik kan basıncı ölçümleri gibi).

Bununla, ele almamız gereken aşağıdaki öğelere sahibiz:

  • Her kullanıcının grafiği için kalıcı durum (veya Global Config kullanarak daha da iyisi)
  • Grafik başına birden çok ölçüme izin verme

Seçili metrikleri ve çizelge listemizle ilgili diğer her şeyi korumak için anahtar/değer deposunu kullanabileceğimizden, Global Config'in gücünün işe yaradığı yer burasıdır. Kullanıcı arayüzünde bir grafik yapılandırırken, Global Config'deki güncellemeler nedeniyle grafik bileşeninin kendisi yeniden oluşturulacaktır. Gösterge tablosunun grafik bölümü için, gösterge tablosu charts.js ve tek chart.js'ye odaklanan referans için bileşenleri içeren bir özet aşağıda verilmiştir.

Her grafiğe iletilen tablo , alanları bulmak için meta verileri için kullanılan şeydir, oysa geçirilen kayıtlar , dashboard_charts/index.js içe aktaran üst düzey gösterge panosu bileşeninde seçilen hasta tarafından zaten filtrelenmiştir.

Bir grafik için açılır menüde seçenekler olarak listelenen alanların, daha önce bahsettiğimiz #CHART# etiketi kullanılarak, bu satır bir useEffect kancasında olacak şekilde çekildiğini unutmayın:

 // 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]); ...

Yukarıdaki kod, #LABEL# etiketlerinde sağlanan herhangi bir şeyi eklemek ve bunu alan açılır menüsündeki seçenek için görüntülemek için daha önce referans verilen setLabel işlevinin #TAG# ile nasıl kullanıldığını gösterir.

Grafik bileşenimiz, React Charts ile gösterilen Chart.js tarafından sağlanan çok eksenli yeteneklerden yararlanır. Kullanıcının bir veri kümesi ve bir grafik türü (çizgi veya çubuk) ekleme yeteneği ile kullanıcı arayüzü aracılığıyla genişlettik.

Bu durumda Global Config kullanmanın anahtarı, her anahtarın yalnızca bir dize tutabileceğini bilmektir | boole | sayı | boş | GlobalConfigArray | GlobalConfigObject (bkz. Global Yapılandırma Değeri referansı).

Grafik başına korumamız gereken aşağıdaki öğelere sahibiz:

  • otomatik oluşturulan ve kullanıcı tarafından yeniden adlandırılabilen chartTitle
  • her öğenin sahip olduğu alanlar dizisi:
    • Airtable'dan fieldId olarak alan
    • tek satır olarak chartOption | bar Chart.js belgelerinin gösterdiği gibi
    • colorUtils'den Airtable rengi olarak renk
    • Airtable rengiyle ilgili hex kodu olarak hex

Bunu yönetmek için, Global Config anahtarlarını ve değerlerini baştan aşağı ayarlamak yerine bu verileri bir nesne olarak dizgeleştirmeyi en uygun buldum. Kayıtları hastaya göre filtrelemek için Global Config değerlerini ve bir typeahead filtreleme bileşenini desteklemek için kullanılan bazı ilgili değişkenleri (react-bootstrap-typeahead sayesinde) içeren aşağıdaki örneğe (özde globalConfig.json) bakın:

 { "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]\"}]" }

Not: Yukarıda yer alan tüm veriler ve aşağıdaki animasyonlarda yer alan veriler gerçek hasta verileri değildir.

İşte nihai sonuca bir bakış:

Airtable kontrol paneli kullanıcı arayüzünün animasyonlu görüntüsü.

Typeahead'e ne oldu?

Hastaya göre filtreleme yapmak için bir hasta seçmenin ve ardından kayıtları bu hastaya göre filtrelemenin bir yoluna ihtiyacımız vardı. Bu bölümde, bunun nasıl başarıldığını inceleyeceğiz.

Daktilo için, tepki-önyükleme-yazı tipi kolay bir seçimdi, çünkü geriye kalan tek adım daktilo için seçenekleri hazırlamak, onu önyüklemeyi şekillendirmek ve yüklemek için bir Airtable girişi ve menümüz için diğer bazı stiller ile karıştırmaktı. Bileşen kitaplıklarınızdaki bileşenleri bir Airtable uygulamasına bırakmak, tipik React web geliştirmedeki kadar kolay değildir; ancak, her şeyin beklediğiniz gibi görünmesini sağlamak için yalnızca birkaç ekstra adım vardır.

İşte nihai sonuç:

Hastaya göre filtreleme işlevini gösteren animasyonlu GIF.

Airtable girdisini işlemek ve tüm stillerimizi tutarlı tutmak için tepki-önyükleme-yazı tipi, bir renderInput desteğiyle birlikte gelir. Bileşenin oluşturulmasının nasıl değiştirileceği hakkında daha fazla bilgiyi burada bulabilirsiniz.

Önyükleme stilleri ve menü öğelerimizi geçersiz kılmak için Airtable'dan aşağıdaki iki araç kullanıldı:

  • yükCSSFromString
  • loadCSSFromURLAsync

Yazılı uygulamadan bir alıntı için özetteki frontend.js'ye bakın.

Bu satır, önyüklemeyi global olarak yüklemek için kullanıldı:

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

Bilinen önyükleme görünümünü ve hissini elde etmek için fareyle üzerine gelindiğinde stil değişikliklerinin ele alınması veya bağlantıların yeniden biçimlendirilmesi ( <a></a> ) gibi şeyler için ek bir mantık göreceksiniz. Bu ayrıca, bir kullanıcı gösterge tablosundan ayrılırsa, sayfasını yenilerse veya bu gösterge tablosunu başkalarıyla paylaşmak isterse, uygulama seçilen hastayı Gösterge Tablosunda sürdürecek şekilde, daktilo için Global Config değerlerinin ayarlanmasını ve kayıtların filtrelenmesini içerir. Uygulama. Bu ayrıca, kullanıcıların aynı Airtable Dashboard'da farklı hastalar veya farklı çizelgeler ile aynı uygulamanın birden fazla kopyasını yan yana yüklemelerine olanak tanır.

Airtable'daki bir gösterge tablosunun Base'in tüm kullanıcıları için de mevcut olduğunu unutmayın, bu nedenle bir gösterge tablosundaki bu özel uygulama yüklemeleri, gösterge tablosuna aynı anda hangi kullanıcılar bakarsa baksın aynı hastalara ve çizelgelere göre filtrelenecektir.

Şimdiye kadar ele aldıklarımızı tekrarlayalım:

  1. Airtable, hem teknik olmayan kullanıcıların hem de teknik kullanıcıların Airtable'da işbirliği yapmasına olanak tanır.
  2. Typeform, teknik bilgisi olmayan kullanıcıların Typeform sonuçlarını Airtable ile eşleştirmesine olanak tanıyan bir Airtable entegrasyonuyla birlikte gelir.
  3. Airtable Uygulamaları, ister pazardan seçim yapın ister özel bir uygulama oluşturun, Airtable Base'i güçlendirmenin güçlü bir yolunu sunar.
  4. Geliştiriciler, bu uygulamalarla Airtable'ı neredeyse akla gelebilecek her şekilde hızla genişletebilir. Yukarıdaki örneğimizin tasarlanması ve uygulanması yalnızca üç hafta sürdü (elbette mevcut kütüphanelerden gelen muazzam yardımla).
  5. Geliştiriciler tarafından kod değişikliği gerektirmeden kontrol panelini değiştirmek için bir #TAG# sistemi kullanılabilir. Bunun için daha iyi ve daha kötü kullanım durumları vardır. Bu stratejiyi kullanıyorsanız, izinleri Oluşturucu rolüyle sınırladığınızdan emin olun.
  6. Global Config'i kullanmak, geliştiricilerin bir uygulama yüklemesinde verileri kalıcı hale getirmesine olanak tanır. Bileşenleriniz için veri tohumlamak için bunu durum yönetimi stratejinize karıştırın.
  7. Bileşenleri diğer kitaplıklardan ve projelerden doğrudan Airtable Uygulamanıza sürükleyip bırakmayı beklemeyin. Stiller, Airtable tarafından sağlanan loadCSSFromString ve loadCSSFromURLAsync yardımcı programları kullanılarak yüklenebilir.

Geleceğe yönelik

Daha gelişmiş bir ara katman yazılımı kullanın

Typeform ve Airtable ile soruların sütunlara eşlenmesini yapılandırmak kolay ve uygun maliyetlidir.

Ancak, büyük bir dezavantaj var: Airtable ile eşlenmiş 100'den fazla sorudan oluşan bir anketiniz varsa ve bir eşlemeyi değiştirmeniz gerekiyorsa, tüm eşlemeyi silmeli ve yeniden başlamalısınız. Bu açıkça ideal değil, ancak ücretsiz bir entegrasyon için bununla başa çıkabiliriz.

Diğer seçenekler, Typeform ve Airtable arasındaki verileri yönetmek için bir Zapier (veya benzeri) entegrasyonuna sahip olmak olabilir. Ardından, herhangi bir sorunun eşlenmesini sıfırdan başlatmadan herhangi bir sütunla değiştirebilirsiniz. Bunun da hesaba katılması gereken kendi maliyet hususları olacaktır.

Umarım burada öğrenilen ve aktarılan bazı dersler, Airtable ile çözümler oluşturmak isteyen diğer kişilere yardımcı olacaktır.

Son olarak, bu makalede tartışılan dosyalarla özü kontrol edebilirsiniz.