Bionesia

Kenalan sama DataGenetik

DataGenetik, yang di-develop untuk Bionesia, adalah platform kolaboratif untuk informasi genetik keanekaragaman hayati, buat mendukung konservasi, riset, dan pengelolaan ekosistem yang berkelanjutan. Indonesia ada di jantung Coral Triangle, salah satu kawasan dengan kehidupan laut terkaya di dunia, tapi banyak spesiesnya yang belum punya data referensi genetik.

Tantangan

Data genetik itu data ilmiah yang padat: spesies, ID sampel, lokasi pengambilan sampel, sampai detail riset. Peneliti harus bisa nemuin data yang pas dengan cepat, lihat sampelnya diambil di mana, dan nambahin data baru, sementara platformnya tetap gampang dipahami mitra dan publik. Penggunanya juga dua bahasa, jadi tiap layar butuh versi Indonesia dan Inggris.

Peranku

Di Sawala Technology, aku develop front end pakai Vue.js dan Nuxt, yang nyambung ke REST API dari tim backend.

Yang aku bikin

Menjelajahi database

• Tampilan yang bisa dicari dan difilter, yang mengubah data ilmiah rumit jadi tabel dan halaman detail yang gampang dibaca.

• Peta interaktif yang nampilin data genetik berdasarkan lokasi sampel, dengan clustering biar area yang padat tetap kebaca.

• Ekspor data buat peneliti yang udah login.

Ngirim dan ngelola data

• Form pengiriman data yang terpandu, buat bantu peneliti nambahin data baru.

• Area admin buat ngelola data, impor data massal dari Excel, publikasi cerita, dan ngatur user.

Akun dan akses

• Daftar pakai verifikasi email, lalu akunnya ditinjau dulu sebelum peneliti bisa buka database.

• Tiga level akses: halaman publik buat semua orang, database buat user yang disetujui, dan pengelolaan penuh buat admin.

• Bahasa Indonesia dan Inggris di seluruh platform.

Gambaran arsitektur

Gambaran umumnya: satu front end Nuxt melayani semua pengguna. Login ditangani Clerk, dan semua data datang dari REST API platform, yang di-cache di sisi client biar tabel dan peta tetap responsif.

flowchart LR
  accTitle: Gambaran platform DataGenetik
  accDescr: Pengunjung, peneliti, dan admin memakai satu front end Nuxt. Clerk menangani login, dan data berasal dari REST API platform.
  visitor([Pengunjung]) --> publicPages
  researcher([Peneliti]) --> auth
  adminUser([Admin]) --> auth
  subgraph web["Nuxt front end"]
    publicPages["Halaman publik<br/>tentang, cerita, kontak"]
    auth{"Login dan<br/>peninjauan akun"}
    explore["Database explorer<br/>pencarian, filter, peta, ekspor"]
    submit["Pengiriman data"]
    manage["Area admin<br/>data, impor Excel, cerita, user"]
    auth --> explore & submit & manage
  end
  auth -.- clerk["Clerk"]
  explore & submit & manage --> api[("REST API platform<br/>tim backend")]

Akun peneliti

stateDiagram-v2
  accTitle: Siklus akun peneliti
  accDescr: Akun baru mengonfirmasi email, menunggu ditinjau tim, lalu mendapat akses database setelah disetujui.
  state "Terdaftar" as Registered
  state "Email terverifikasi" as Verified
  state "Sedang ditinjau" as Review
  state "Disetujui" as Approved
  [*] --> Registered: Mendaftar
  Registered --> Verified: Konfirmasi email
  Verified --> Review: Menunggu peninjauan
  Review --> Approved: Disetujui tim
  Approved --> [*]

Biar tabel dan peta tetap sinkron

sequenceDiagram
  accTitle: Menjaga tabel dan peta tetap sinkron
  accDescr: Setelah admin mengubah data, query yang ter-cache diperbarui supaya tabel dan peta menampilkan data terbaru.
  actor Admin
  participant UI as App Nuxt
  participant Cache as Query cache
  participant API as REST API
  Admin->>UI: Mengubah data
  UI->>API: Menyimpan perubahan
  API-->>UI: Konfirmasi
  UI->>Cache: Membatalkan cache terkait
  Cache->>API: Mengambil ulang data tabel dan peta
  API-->>Cache: Data terbaru
  Cache-->>UI: Menampilkan ulang dengan perubahan

Tech stack

Nuxt, Vue.js, TypeScript, Tailwind CSS dengan shadcn-nuxt, Clerk, TanStack Query dan TanStack Table, Leaflet, Highcharts, dan Nuxt i18n.

Hasil

DataGenetik udah live dalam versi public beta di datagenetik.id, dengan 200+ data genetik dari 5+ institusi mitra.