Membuat Dasbor Langsung Dengan Airtable dan React

Baik perusahaan adalah perusahaan besar atau pemula, mengumpulkan data dari pengguna dan pelanggan, dan melaporkan atau memvisualisasikan data itu sangat penting bagi bisnis.

Saya baru-baru ini bekerja dengan startup telemedicine yang berbasis di Brasil. Misinya adalah menyediakan perawatan dan pemantauan jarak jauh dengan menghubungkan pasien dengan profesional medis dan pelatih kesehatan. Kebutuhan inti adalah untuk membuat antarmuka bagi pelatih dan profesional kesehatan untuk dengan mudah meninjau informasi pasien dan metrik terpenting yang terkait dengan situasi khusus mereka: dasbor.

Masukkan Typeform dan Airtable.

Bentuk Ketik

Typeform adalah salah satu alat pengumpulan data masuk yang memungkinkan pengalaman web responsif bagi pengguna yang menyelesaikan survei. Itu juga dilengkapi dengan beberapa fitur yang membuat survei lebih cerdas, terutama jika digabungkan:

• Lompatan Logika
• Bidang Tersembunyi

Survei dapat dibagikan melalui URL yang dapat diunggulkan sebelumnya dengan nilai untuk bidang tersembunyi, yang kemudian dapat digunakan untuk menerapkan lompatan logika dan mengubah perilaku survei untuk pengguna dengan tautan.

Penggunaan Airtable

Airtable adalah hibrida spreadsheet-database dan platform cloud kolaboratif. Fokusnya pada fungsionalitas titik dan klik berarti bahwa pengguna non-teknis dapat mengonfigurasinya tanpa pengkodean. Airtable memiliki banyak kasus penggunaan dalam bisnis atau proyek apa pun.

Anda dapat menggunakan Pangkalan Airtable untuk:

• CRM (Manajemen Hubungan Klien)
• HRIS (Sistem Informasi Sumber Daya Manusia)
• Manajemen proyek
• Perencanaan Konten
• Perencanaan Acara
• Umpan Balik Pengguna

Ada banyak lagi kasus penggunaan potensial. Anda dapat menjelajahi studi kasus Airtable di sini.

Jika Anda tidak terbiasa dengan Airtable, model data konseptual dipecah seperti ini:

• Ruang Kerja - Terdiri dari Basis
• Basis - Terdiri dari Tabel
• Tabel - Terdiri dari Bidang (kolom) dan baris
• Tampilan - Perspektif tentang data Tabel dengan filter opsional dan Bidang yang dikurangi
• Bidang - Kolom Tabel dengan Jenis Bidang; lihat di sini untuk informasi lebih lanjut tentang Jenis Bidang

Selain menyediakan database yang dihosting di cloud dengan fitur spreadsheet yang sudah dikenal, berikut adalah beberapa alasan mengapa platform ini sangat kuat:

Untuk pengguna non-teknis, Airtable menyediakan:

• Antarmuka front-end yang mudah digunakan
• Otomatisasi yang dapat dibuat dengan konfigurasi titik-dan-klik untuk mengirim email, memproses baris data, menjadwalkan janji temu di kalender, dan lainnya
• Beberapa jenis tampilan yang memungkinkan tim untuk berkolaborasi di Pangkalan dan tabel yang sama
• Aplikasi Airtable yang dapat diinstal dari pasar untuk menambah biaya Pangkalan

Untuk pengembang, Airtable menyediakan:

• API back-end yang terdokumentasi dengan baik
• Lingkungan skrip yang memungkinkan pengembang untuk mengotomatiskan tindakan dalam Basis
• Otomatisasi yang juga dapat memicu skrip yang dikembangkan khusus yang berjalan dalam lingkungan Airtable, memperluas kemampuan otomatisasi

Anda dapat mempelajari lebih lanjut tentang Airtable di sini.

Memulai: Typeform ke Airtable

Survei bentuk sudah dikonfigurasi oleh klien, dan langkah selanjutnya adalah merencanakan bagaimana data itu akan mendarat di Airtable dan kemudian diubah menjadi dasbor. Ada banyak pertanyaan yang perlu dipertimbangkan saat membuat dasbor di atas basis data apa pun: Bagaimana seharusnya kita menyusun data? Data apa yang perlu diproses sebelum visualisasi? Haruskah kita menyinkronkan Basis dengan Google Spreadsheet dan menggunakan Google Data Studio? Haruskah kita mengekspor dan mencari alat pihak ketiga lainnya?

Untungnya bagi pengembang, Airtable tidak hanya menyediakan otomatisasi dan skrip untuk menangani langkah-langkah pemrosesan data, tetapi juga memungkinkan untuk membangun aplikasi dan antarmuka khusus di atas Pangkalan Airtable dengan Aplikasi Airtable.

Aplikasi Kustom di Airtable

Aplikasi Kustom di Airtable telah ada sejak Airtable Blocks SDK dirilis pada awal 2018, dan baru-baru ini diganti namanya menjadi Apps. Rilis Blocks sangat besar karena itu berarti bahwa pembuat sekarang memiliki kemampuan untuk mengembangkan, seperti yang dikatakan Airtable, "Kit Lego yang dapat direkombinasi tanpa batas."

Baru-baru ini dengan perubahan pada aplikasi, Airtable Marketplace juga memungkinkan untuk berbagi aplikasi secara publik.

Airtable Apps menyediakan bisnis dengan kit Lego yang dapat digabungkan kembali tanpa batas yang dapat mereka sesuaikan dengan kebutuhan mereka.

Untuk membangun aplikasi khusus di Airtable, pengembang JavaScript harus tahu cara menggunakan React, salah satu pustaka JavaScript paling populer untuk membangun antarmuka pengguna. Airtable menyediakan pustaka komponen komponen dan kait React fungsional, yang merupakan bantuan besar untuk membangun UI yang konsisten dengan cepat dan menentukan bagaimana Anda akan mengelola status dalam aplikasi dan komponennya.

Lihat artikel Memulai Airtable untuk informasi lebih lanjut dan Airtable di GitHub untuk contoh aplikasi.

Persyaratan Dasbor Airtable

Setelah meninjau maket dasbor dengan tim klien, jenis data yang akan digunakan sudah jelas. Kami akan membutuhkan serangkaian komponen dasbor yang akan ditampilkan sebagai teks di dasbor dan bagan dari berbagai metrik yang dapat dilacak dari waktu ke waktu.

Pelatih dan profesional medis harus dapat membuat dasbor khusus untuk setiap pasien, jadi kami membutuhkan cara yang fleksibel untuk menambahkan dan menghapus bagan. Data statis lainnya relatif terhadap setiap pasien akan ditampilkan terlepas dari pasien yang dipilih.

Dalam hal ini, bagian dasbor diringkas menjadi:

• Informasi Umum - Nama Pasien, Email, Nomor Telepon, Preferensi Kontak, Tanggal Lahir, Usia
• Tujuan - Tujuan yang dimiliki pasien berdasarkan hasil survei
• Beberapa Statistik - BMI, Tinggi, dan Berat
• Penggunaan Obat - Mencantumkan semua obat resep yang sudah digunakan oleh pasien
• Riwayat Penyakit Keluarga - Membantu dalam mendiagnosis kondisi tertentu
• Bagan - Bagian di mana pengguna dasbor Airtable dapat menambahkan bagan dan mengonfigurasi metrik mana yang akan divisualisasikan dari waktu ke waktu

Salah satu cara untuk mendekati semua bagian kecuali bagan adalah dengan mengkodekan semua kolom untuk tujuan, penggunaan obat, dan riwayat keluarga ke dalam dasbor. Namun, itu tidak akan memungkinkan tim klien untuk menambahkan pertanyaan baru ke survei Typeform atau menambahkan kolom baru ke tabel Airtable untuk menyajikan data itu di dasbor tanpa pengembang memperbarui aplikasi khusus.

Solusi yang lebih elegan dan dapat diperluas untuk tantangan ini adalah menemukan cara untuk menandai kolom yang relevan dengan bagian dasbor tertentu dan mengambil kolom tersebut menggunakan metadata yang ditampilkan Airtable saat menggunakan model Tabel dan Bidang.

Hal ini dicapai dengan menggunakan Deskripsi Bidang sebagai tempat untuk menandai kolom dari Tabel yang relevan dengan bagian dasbor untuk ditampilkan kepada pengguna. Kemudian, kami dapat memastikan hanya mereka yang memiliki peran Pencipta (administrator) untuk Pangkalan yang memiliki kemampuan untuk mengubah Deskripsi Bidang ini untuk mengubah apa yang muncul di dasbor. Untuk mengilustrasikan solusi ini, kami akan fokus sebagian besar pada item dalam Informasi Umum dan bagaimana menyajikan Bagan.

Membuat Sistem #TAG#

Mengingat bagian dasbor, masuk akal untuk membuat tag yang dapat digunakan kembali untuk beberapa bagian dan tag khusus untuk kolom tertentu. Untuk item seperti nama pasien, email, dan nomor telepon, #NAME# , #EMAIL# , dan #PHONE# ditambahkan ke deskripsi masing-masing Bidang. Itu akan memungkinkan informasi itu diambil melalui metadata Tabel seperti ini:

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

Untuk area dasbor yang perlu diambil dari banyak kolom yang diberi tag, kami akan memiliki tag berikut untuk setiap bagian dasbor:

• OBJ - Tujuan
• FAM - Sejarah Keluarga
• MED - Penggunaan Obat
• CAN - Riwayat Keluarga khusus untuk kanker
• BAGAN - Setiap kolom yang harus bersumber untuk menambahkan grafik; harus berupa kuantitas

Selain itu, penting untuk memisahkan nama kolom dalam Tabel dari label yang akan diterimanya di dasbor, jadi apa pun yang menerima #TAG# juga akan memiliki kemampuan untuk menerima dua tag #LABEL# di Deskripsi Bidangnya . Deskripsi Bidang akan terlihat seperti ini:

Jika tag #LABEL# hilang, kami akan menampilkan nama kolom dari Tabel.

Kita dapat mengurai set label dalam deskripsi dengan fungsi sederhana seperti ini setelah mengambil bidang dengan contoh kode sebelumnya:

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

Dengan sistem #TAG# ini, kami mencapai tiga hal utama:

• Nama kolom (fields) pada Tabel dapat diubah sesuai keinginan.
• Label untuk data di dasbor bisa berbeda dari nama kolom.
• Bagian Dasbor untuk Tujuan, Penggunaan Obat, Riwayat Keluarga, dan Bagan dapat diperbarui oleh tim klien tanpa menyentuh baris kode.

Status yang Bertahan di Airtable

Di React, kita menggunakan state dan meneruskannya ke komponen sebagai props untuk merender ulang komponen tersebut jika statenya berubah. Biasanya ini terkait dengan panggilan API yang mengisi komponen dasbor, tetapi di Airtable kami sudah memiliki semua data dan hanya perlu memfilter apa yang kami tampilkan berdasarkan pasien mana yang kami lihat. Selain itu, jika kami menggunakan status, itu tidak akan mempertahankan data setelah penyegaran di dasbor itu sendiri.

Jadi, bagaimana kita bisa mempertahankan nilai melewati penyegaran agar dasbor tetap terfilter? Untungnya, Airtable menyediakan pengait untuk useGlobalConfig yang disebut ini di mana ia mempertahankan penyimpanan nilai kunci untuk pemasangan aplikasi di dasbor. Kita hanya perlu menerapkan logika pengambilan nilai dari penyimpanan nilai kunci ini saat aplikasi dimuat untuk mengisi bahan bakar komponen dasbor kita.

Apa yang lebih berguna dari penggunaan hook useGlobalConfig adalah ketika nilainya disetel, komponen dasbor dan komponen turunannya dirender ulang, sehingga Anda dapat menggunakan Global Config seperti Anda akan menggunakan variabel status dalam implementasi React pada umumnya.

Memperkenalkan Grafik

Airtable menyediakan contoh bagan dengan Aplikasi Bagan Sederhananya, yang menggunakan React Charts, pembungkus React di Chart.js (pemberian bagan).

Di Aplikasi Bagan Sederhana, kami memiliki satu bagan untuk seluruh aplikasi, tetapi di Aplikasi Dasbor kami, kami membutuhkan kemampuan bagi pengguna untuk menambah dan menghapus bagan mereka sendiri dari dasbor mereka sendiri. Terlebih lagi, dalam diskusi dengan tim klien, tampaknya metrik tertentu akan lebih baik dilihat pada grafik yang sama (seperti pembacaan tekanan darah diastolik dan sistolik).

Dengan ini kami memiliki item berikut untuk menangani:

• Status bertahan untuk setiap bagan pengguna (atau bahkan lebih baik menggunakan Global Config)
• Mengizinkan beberapa metrik per diagram

Di sinilah kekuatan Global Config berguna, karena kita dapat menggunakan penyimpanan nilai kunci untuk mempertahankan metrik yang dipilih dan hal lain tentang daftar bagan kita. Saat kami mengonfigurasi bagan di UI, komponen bagan itu sendiri akan dirender ulang karena pembaruan pada Global Config. Untuk bagian pembuatan bagan di dasbor, berikut adalah intisari dengan komponen untuk referensi, dengan fokus pada dashboard charts.js dan single chart.js.

Tabel yang diteruskan ke setiap bagan digunakan untuk metadatanya untuk menemukan bidang, sedangkan catatan yang diteruskan telah difilter oleh pasien yang dipilih di komponen dasbor tingkat atas yang mengimpor dashboard_charts/index.js .

Perhatikan bahwa bidang yang terdaftar sebagai opsi di dropdown untuk bagan ditarik menggunakan tag #CHART# yang kami sebutkan sebelumnya, dengan baris ini di kait 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]); ...

Kode di atas menunjukkan bagaimana fungsi setLabel yang direferensikan sebelumnya digunakan dengan #TAG# untuk menambahkan apa pun yang disediakan di tag #LABEL# dan menampilkannya untuk opsi di bidang dropdown.

Komponen bagan kami memanfaatkan kemampuan multi-sumbu yang disediakan oleh Chart.js, yang ditunjukkan dengan React Charts. Kami baru saja memperluasnya melalui UI dengan kemampuan pengguna untuk menambahkan kumpulan data dan tipe bagan (garis atau batang).

Kunci untuk menggunakan Global Config, dalam hal ini, adalah mengetahui bahwa setiap kunci hanya dapat menampung string | boolean | nomor | nol | GlobalConfigArray | GlobalConfigObject (lihat referensi Nilai Konfigurasi Global).

Kami memiliki item berikut untuk dipertahankan per grafik:

• chartTitle yang dibuat secara otomatis dan dapat diganti namanya oleh pengguna
• array bidang di mana setiap item memiliki:
  • bidang sebagai fieldId dari Airtable
  • chartOption sebagai satu baris | bar seperti yang ditunjukkan oleh dokumen Chart.js
  • warna sebagai warna Airtable dari colorUtils
  • hex sebagai kode hex yang berkaitan dengan warna Airtable

Untuk mengelola ini, saya merasa paling mudah untuk merangkai data ini sebagai objek daripada menyetel kunci dan nilai Global Config sepenuhnya. Lihat contoh di bawah (globalConfig.json pada intinya), yang menyertakan nilai Global Config untuk memfilter catatan oleh pasien dan beberapa variabel terkait yang digunakan untuk mendukung komponen pemfilteran typeahead (terima kasih kepada 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]\"}]" }

Catatan: Semua data yang terdapat di atas, dan data yang disertakan dalam animasi di bawah ini, bukanlah data pasien yang sebenarnya.

Berikut tampilan hasil akhirnya:

Bagaimana dengan Typeahead?

Untuk memfilter berdasarkan pasien, kami membutuhkan cara untuk memilih pasien dan kemudian menyaring catatan berdasarkan pasien ini. Pada bagian ini, kami meninjau bagaimana hal ini dicapai.

Untuk typeahead, react-bootstrap-typeahead adalah pilihan yang mudah, karena satu-satunya langkah yang tersisa adalah menyiapkan opsi untuk typeahead, mencampurnya dengan input Airtable untuk menata dan memuat bootstrap, dan beberapa gaya lain untuk menu kita. Menjatuhkan komponen dari pustaka komponen favorit Anda ke dalam aplikasi Airtable tidak semudah dalam pengembangan web React pada umumnya; namun, hanya ada beberapa langkah tambahan untuk membuat semuanya terlihat seperti yang Anda harapkan.

Berikut adalah hasil akhirnya:

Untuk merender input Airtable dan menjaga semua gaya kita tetap konsisten, react-bootstrap-typeahead dilengkapi dengan prop renderInput. Lihat selengkapnya tentang cara memodifikasi rendering komponen di sini.

Untuk gaya bootstrap dan untuk mengganti item menu kami, dua utilitas berikut digunakan dari Airtable:

• memuatCSSDariString
• muatCSSDariURLAsinkron

Lihat frontend.js di Intisari untuk kutipan implementasi typeahead.

Baris ini digunakan untuk memuat bootstrap secara global:

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

Anda akan melihat beberapa logika tambahan untuk hal-hal seperti menangani perubahan gaya saat mengarahkan kursor atau mengubah gaya tautan ( <a></a> ) untuk mendapatkan tampilan dan nuansa bootstrap yang sudah dikenal. Ini juga mencakup penanganan pengaturan nilai Global Config untuk jenis huruf dan pemfilteran catatan sehingga jika pengguna meninggalkan dasbor mereka, menyegarkan halaman mereka, atau ingin berbagi dasbor ini dengan orang lain, aplikasi akan mempertahankan pasien yang dipilih di Dasbor Aplikasi. Ini juga memungkinkan pengguna untuk menginstal banyak salinan dari aplikasi yang sama ini secara berdampingan di Dasbor Airtable yang sama dengan pasien yang berbeda yang dipilih atau dengan grafik yang berbeda.

Ingatlah bahwa dasbor di Airtable juga tersedia untuk semua pengguna Pangkalan, jadi pemasangan aplikasi khusus di dasbor ini akan disaring ke pasien dan bagan yang sama, tidak peduli pengguna mana yang melihat dasbor pada saat yang sama.

Mari kita rekap apa yang telah kita bahas sejauh ini:

1. Airtable memungkinkan pengguna non-teknis dan pengguna teknis untuk berkolaborasi di Airtable.
2. Typeform hadir dengan integrasi Airtable yang memungkinkan pengguna non-teknis untuk memetakan hasil Typeform ke Airtable.
3. Aplikasi Airtable menyediakan cara yang ampuh untuk melengkapi Pangkalan Airtable-nya, baik memilih dari pasar atau membangun aplikasi khusus.
4. Pengembang dapat memperluas Airtable dengan cepat di hampir semua cara yang dapat dibayangkan dengan aplikasi ini. Contoh kami di atas hanya membutuhkan waktu tiga minggu untuk merancang dan mengimplementasikan (dengan bantuan besar dari perpustakaan yang ada, tentu saja).
5. Sistem #TAG# dapat digunakan untuk memodifikasi dasbor tanpa memerlukan perubahan kode oleh pengembang. Ada kasus penggunaan yang lebih baik dan lebih buruk untuk ini. Pastikan untuk membatasi izin untuk peran Pencipta jika menggunakan strategi ini.
6. Menggunakan Global Config memungkinkan pengembang untuk menyimpan data dalam penginstalan aplikasi. Campurkan ini ke dalam strategi pengelolaan negara bagian Anda untuk menyemai data untuk komponen Anda.
7. Jangan berharap untuk menarik dan melepas komponen dari perpustakaan dan proyek lain langsung ke Aplikasi Airtable Anda. Gaya dapat dimuat menggunakan loadCSSFromString dan loadCSSFromURLAsync disediakan oleh Airtable.

Pemeriksaan masa depan

Gunakan middleware yang lebih canggih

Dengan Typeform dan Airtable, mudah dan hemat biaya untuk mengonfigurasi pemetaan pertanyaan ke kolom.

Namun, ada satu kelemahan besar: Jika Anda memiliki survei lebih dari 100 pertanyaan yang dipetakan ke Airtable dan Anda perlu mengubah pemetaan, Anda harus menghapus seluruh pemetaan dan mulai lagi. Ini jelas tidak ideal, tetapi untuk integrasi gratis, kami dapat mengatasinya.

Opsi lain adalah memiliki integrasi Zapier (atau serupa) yang mengelola data antara Typeform dan Airtable. Kemudian Anda dapat memodifikasi pemetaan pertanyaan apa pun ke kolom mana pun tanpa memulai dari awal. Ini akan memiliki pertimbangan biaya sendiri untuk diperhitungkan juga.

Semoga, beberapa pelajaran yang dipetik dan dikomunikasikan di sini akan membantu orang lain yang ingin membangun solusi dengan Airtable.

Akhirnya, Anda dapat memeriksa intinya dengan file yang dibahas dalam artikel ini.