Kembali ke artikel
Bangun4 menit baca

Merancang Preview Impor CSV sebelum Data Masuk ke Aplikasi

Tunjukkan pemetaan kolom, kesalahan per baris, perlakuan data berulang, dan ringkasan hasil sebelum pengguna mengonfirmasi impor CSV.

Alur berkas CSV menuju pemetaan kolom, penandaan sel bermasalah, dan konfirmasi impor

Impor CSV sering dimulai dari kebutuhan sederhana: memindahkan daftar produk atau pelanggan dari spreadsheet ke aplikasi. Kesulitan muncul ketika sebuah berkas terlihat rapi di spreadsheet, tetapi kolom, tanggal, atau identitasnya ditafsirkan berbeda oleh aplikasi. Preview memberi pengguna kesempatan melihat keputusan tersebut sebelum data kerja berubah.

Artikel ini memakai contoh inventaris fiktif. Tujuannya adalah merancang alur produk yang dapat diperiksa, bukan menetapkan satu cara impor untuk semua sistem.

Tampilkan arti kolom, bukan hanya isi tabel

Contoh pemetaan sku ke product_code dan name ke display_name dengan kode 0012 tetap berupa teks
Pada contoh ini, sku dipetakan ke product_code dan name ke display_name. Nilai contoh membantu memastikan nol di depan kode 0012 tetap dipertahankan.

Setelah pengguna memilih berkas, tampilkan kolom sumber dan tujuan aplikasi. Kolom kode_barang dapat dipetakan ke identitas barang, sedangkan nama ke nama tampilannya. Jika nama kolom tidak dikenali, minta pengguna memilih tujuan atau menandainya agar diabaikan.

Perlihatkan beberapa nilai contoh pada setiap pemetaan. Nilai 0012 sebagai kode barang perlu diperlakukan sesuai definisi identitas sistem, bukan otomatis menjadi angka 12. Sebelum membangun fitur, tim harus menyepakati kolom wajib, format, dan nilai kosong yang diperbolehkan.

RFC 4180 mendokumentasikan aturan umum CSV, termasuk penggunaan tanda kutip untuk isi dengan koma atau baris baru. Akan tetapi, format berkas saja tidak menjelaskan arti bisnis setiap kolom. Arti tersebut harus ditentukan oleh aplikasi dan ditunjukkan kepada pengguna.

Beri kesalahan pada baris yang tepat

Tabel preview menandai kode kosong di baris 8, kode yang sudah ada di baris 12, dan tanggal ambigu di baris 15
Tunjukkan lokasi masalah: kode wajib belum diisi, identitas sudah ada, atau format tanggal perlu diperiksa. Identitas yang sudah ada memerlukan keputusan sesuai aturan pembaruan.

Contoh preview dapat menampilkan baris 8 dengan kode kosong, baris 12 dengan kode yang sudah ada, dan baris 15 dengan tanggal yang tidak diterima. Pesan “berkas tidak valid” saja tidak memberi arah perbaikan. Sebutkan nomor baris, kolom, masalah, serta bentuk yang diharapkan.

Untuk tanggal seperti 03/04/2026, tampilkan bagaimana aplikasi membacanya. Lebih baik meminta format tanggal yang disepakati daripada menganggap kebiasaan seluruh pengguna sama. Jangan melakukan perubahan nilai secara diam-diam; normalisasi yang dipilih perlu terlihat di preview.

Tampilkan jumlah baris yang diperiksa dan jumlah yang bermasalah. Jika preview hanya menampilkan sebagian tabel, jelaskan bahwa validasi sudah mencakup seluruh berkas atau sebutkan batas pemeriksaannya. Pengguna perlu mengetahui cakupan hasil yang sedang dilihat.

Putuskan apa yang terjadi pada identitas berulang

Kode yang sama dapat muncul dua kali dalam berkas atau sudah tersimpan di aplikasi. Kedua keadaan perlu mempunyai keputusan jelas. Pilihannya dapat berupa menolak baris, melewati data yang sama, atau memperbarui kolom tertentu setelah konfirmasi. Ini merupakan aturan aplikasi, bukan perilaku bawaan CSV.

Sebagai contoh, impor inventaris mungkin mengizinkan pembaruan nama barang tetapi tidak mengubah stok dari berkas yang sama. Preview perlu menyebut kolom yang akan berubah. Hindari satu tombol “gabungkan” yang tidak menjelaskan data mana yang dipertahankan.

Catat juga hasil ketika pengguna mengunggah berkas yang sama lagi. Pengulangan tidak seharusnya menghasilkan tambahan barang yang tidak disengaja. Uji keputusan tersebut memakai data contoh yang memang memiliki kode berulang.

Coba satu berkas kecil sebelum alur lengkap

Siapkan berkas contoh yang memuat satu barang baru, satu kode yang sudah ada, satu baris tanpa kode, dan satu nilai tanggal yang ambigu. Minta pengguna membaca preview sebelum tim menjelaskan hasil yang diharapkan. Jika mereka belum dapat mengetahui barang mana yang akan dibuat atau diubah, ringkasan perlu diperjelas. Uji pemahaman tersebut pada data fiktif agar percobaan tidak mengubah data operasional.

Dalam contoh inventaris, kode 0012 telah tersimpan dengan nama lama. Preview harus menunjukkan identitas yang dicocokkan, nama lama, serta nama baru apabila aturan mengizinkan pembaruan. Baris tanpa kode ditandai dengan alasan yang spesifik. Tampilkan perubahan ini berdampingan agar pengguna tidak perlu membuka aplikasi lain untuk memahami akibat impor.

Bedakan preview dan pelaksanaan

Ada kemungkinan data aplikasi berubah setelah preview dibuat tetapi sebelum impor dikonfirmasi. Tentukan bagaimana sistem menangani keadaan itu: melakukan pemeriksaan ulang, menolak konflik tertentu, atau meminta pengguna memuat ulang preview. Pilihan yang dipakai perlu diketahui tim dan terlihat dalam pesan hasil. Preview yang lama tidak boleh dianggap bukti bahwa keadaan data tetap sama.

Catat identitas proses impor dan ringkasan hasil agar pengguna dapat menelusuri pekerjaan yang telah selesai. Bila proses terputus, jelaskan apakah perubahan sudah tersimpan dan langkah berikutnya yang tersedia. Uji pengulangan menggunakan berkas serta akun contoh yang sama, kemudian cocokkan jumlah data akhir dengan aturan identitas yang telah disepakati.

Minta konfirmasi sesudah keputusan terlihat

Ringkasan empat baris berisi satu data baru, satu pembaruan, dan dua baris bermasalah yang tidak ikut diimpor
Contoh kebijakan impor sebagian: satu data baru dan satu pembaruan diproses, sedangkan dua baris ditahan untuk diperbaiki. Jumlah pada tombol mengikuti keputusan tersebut.

Sebelum impor, tampilkan ringkasan: berapa barang baru, berapa pembaruan, dan berapa baris ditolak. Jika aplikasi mendukung impor sebagian, jelaskan bahwa baris bermasalah tidak akan masuk. Jika seluruh berkas harus diperbaiki dahulu, tombol konfirmasi perlu mengikuti aturan itu.

Setelah proses selesai, tampilkan hasil aktual dengan informasi kegagalan yang dapat ditindaklanjuti. Preview bukan bukti bahwa semua perubahan akhirnya tersimpan. Tentukan pula cara membatalkan atau mengoreksi hasil sesuai kemampuan sistem, lalu jelaskan batasnya sebelum konfirmasi.

Model data tabular W3C membantu membedakan data tabel dan metadata yang menjelaskan kolom serta nilai. Dalam perencanaan aplikasi, gunakan pemisahan itu untuk menuliskan kontrak impor yang mudah dibaca pengguna.

Sampaikan contoh berkas, aturan identitas, dan kebutuhan koreksi ketika membahas pengembangan aplikasi dengan Creatyf. Tim dapat meninjau alur yang dibutuhkan melalui kontak Creatyf sebelum fitur impor menjadi bagian dari pekerjaan harian.

Sumber resmi

Bangun

Lanjutkan dengan panduan terkait.

Bangun

Menyiapkan Proyek Website Bisnis

Panduan mendalam untuk menyelaraskan tujuan, pengguna, konten, kepemilikan, ruang lingkup, dan kesiapan operasional sebelum proyek website dimulai.

Bangun

Website, Web App, atau Aplikasi Mobile

Kerangka keputusan untuk memilih website, web app, atau aplikasi mobile berdasarkan tugas pengguna, kebutuhan perangkat, data, distribusi, dan biaya operasional.