Cara menyilangkan Excel dengan aplikasi web interaktif

Bukan rahasia lagi bahwa Excel adalah alat yang cukup kuat untuk bekerja dengan data tabular numerik. Namun, alat yang disediakan Microsoft untuk berintegrasi dengannya masih jauh dari ideal. Secara khusus, sulit untuk mengintegrasikan antarmuka pengguna modern ke dalam Excel. Kami perlu memberi pengguna Excel kemampuan untuk bekerja dengan antarmuka yang cukup kaya dan fungsional. Kami mengambil jalan yang sedikit berbeda, yang pada akhirnya menunjukkan hasil yang baik. Pada artikel ini saya akan memberi tahu Anda bagaimana Anda dapat mengatur interaksi interaktif Excel dengan aplikasi web di Angular dan memperluas Excel dengan hampir semua fungsi yang dapat kita terapkan dalam aplikasi web modern.







Jadi, nama saya Mikhail dan saya CTO di Exerica. Salah satu masalah yang kami selesaikan adalah mempermudah analis keuangan untuk bekerja dengan data numerik. Mereka biasanya bekerja baik dengan dokumen asli pelaporan keuangan dan statistik, dan semacam alat untuk membuat dan memelihara model analitis. Kebetulan 99% analis bekerja di Microsoft Excel dan melakukan hal-hal yang cukup rumit di sana. Oleh karena itu, mentransfernya dari Excel ke solusi lain tidaklah efisien dan secara praktis tidak mungkin. Secara obyektif, layanan spreadsheet "awan" belum mencapai fungsionalitas Excel. Namun di dunia modern, alat harus nyaman dan memenuhi harapan pengguna: buka dengan klik mouse, dapatkan pencarian yang mudah. Dan implementasi dalam bentuk berbagai aplikasi yang tidak terkait akan cukup jauh dari harapan pengguna.



Apa yang dikerjakan analis terlihat seperti ini: Data utama di sini adalah "indikator keuangan" numerik, misalnya, pendapatan untuk kuartal pertama tahun 2020. Demi kesederhanaan, saya akan menyebutnya sebagai "angka" saja. Seperti yang Anda lihat, hampir tidak ada hubungan antara angka-angka dalam dokumen dan dalam model analitik, semuanya hanya ada di kepala analis. Dan pekerjaan dengan mengisi dan memelihara model membutuhkan waktu berjam-jam untuk mencari dan menyela nomor dari dokumen ke dalam tabel, dan kemudian mencari kesalahan masukan. Pada saat yang sama, kami ingin menawarkan alat yang sudah dikenal pengguna: "seret dan lepas", sisipkan melalui papan klip, dan seterusnya, serta tampilan cepat dari data sumber.











Apa yang sudah kita miliki



Pada saat kami mulai mengimplementasikan interaksi interaktif dengan Excel dalam bentuk yang dijelaskan dalam artikel ini, kami sudah memiliki database di MongoDB, backend dalam bentuk REST API di .NET Core, SPA front- end di Angular, dan beberapa layanan lainnya. Pada titik ini, kami telah mencoba berbagai opsi untuk mengintegrasikan ke dalam aplikasi spreadsheet, termasuk Excel, dan semuanya tidak melampaui MVP, tetapi ini adalah topik untuk artikel terpisah.







Menghubungkan data



Di Excel, ada dua alat umum yang dapat digunakan untuk memecahkan masalah penautan data dalam tabel dengan data di sistem: RTD (RealTimeData) dan UDF (Fungsi yang Ditentukan Pengguna). RTD murni kurang ramah pengguna dalam hal sintaksis dan membatasi fleksibilitas solusi. Menggunakan UDF, Anda bisa membuat fungsi kustom yang akan bekerja dengan cara yang familiar bagi pengguna Excel. Ini dapat digunakan dalam fungsi lain, memahami referensi seperti A1 atau R1C1 dan secara umum berperilaku sebagaimana mestinya. Pada saat yang sama, tidak ada yang mau menggunakan mekanisme RTD untuk memperbarui nilai fungsi (yang kami lakukan). Kami mengembangkan UDF dalam bentuk addin Excel menggunakan C # dan .NET Framework yang sudah dikenal. Kami menggunakan perpustakaan DNA Excel untuk mempercepat pengembangan



Selain UDF, addin kami mengimplementasikan pita (toolbar) dengan pengaturan dan beberapa fungsi yang berguna untuk bekerja dengan data.



Tambahkan interaktivitas



Untuk mentransfer data ke Excel dan untuk membangun interaktivitas, kami telah mengembangkan layanan terpisah yang menyediakan koneksi Websocket menggunakan pustaka SignalR dan sebenarnya adalah perantara untuk pesan tentang peristiwa yang harus dipertukarkan oleh bagian front-end sistem secara real time. Kami menyebutnya Layanan Pemberitahuan.







Masukkan data ke dalam Excel



Di SPA kami, kami menyorot semua angka yang telah dideteksi oleh sistem. Pengguna dapat memilih, menavigasi, dll. Untuk penyisipan data, kami telah menerapkan 3 mekanisme untuk menutup berbagai kasus penggunaan:



  • Seret dan lepas
  • Penyisipan otomatis di klik di SPA
  • Salin dan tempel melalui papan klip


Ketika pengguna memulai drag'n'drop nomor tertentu dari SPA, tautan dengan pengenal nomor ini dari sistem kami ( .../unifiedId/005F5549CDD04F8000010405FF06009EB57C0D985CD001) dibentuk untuk menyeret . Saat menempelkan ke Excel, addin kami memotong acara penyisipan dan mem-parsing teks yang disisipkan dengan regexp. Ketika tautan yang valid ditemukan dengan cepat, itu menggantikannya dengan rumus yang sesuai =ExrcP(...).



Ketika Anda mengklik nomor di SPA melalui Layanan Pemberitahuan, pesan dikirim ke addin, berisi semua data yang diperlukan untuk memasukkan rumus. Selanjutnya, rumus dimasukkan ke dalam sel yang saat ini dipilih.



Metode ini bagus ketika pengguna perlu memasukkan satu nomor ke dalam modelnya, tetapi jika dia perlu mentransfer seluruh tabel atau sebagian, diperlukan mekanisme lain. Menyalin melalui papan klip sepertinya yang paling familiar bagi pengguna. Namun, metode ini ternyata lebih rumit dari dua yang pertama. Faktanya adalah, untuk kenyamanan, data yang dimasukkan harus disajikan dalam format Excel asli - OpenXML Spreadsheet. Ini paling mudah diimplementasikan menggunakan model objek Excel, yaitu dari addin. Oleh karena itu, proses pembentukan clipboard terlihat seperti ini:



  • Pengguna memilih area dengan nomor di SPA
  • Larik nomor yang dialokasikan diteruskan ke Layanan Pemberitahuan
  • Layanan Pemberitahuan meneruskannya ke addin
  • Addin menghasilkan OpenXML dan memasukkannya ke clipboard
  • Pengguna dapat menempelkan data dari clipboard di mana saja di spreadsheet Excel mana pun.






Terlepas dari kenyataan bahwa data sangat berguna, berkat SignalR dan RTD, ini terjadi cukup cepat dan disarikan dari pengguna. 



Kami menyebarkan data



Setelah pengguna memilih data awal untuk modelnya, mereka perlu "menyebarkan" semua periode (tahun, semester, dan kuartal) yang diinginkan. Untuk keperluan ini, salah satu parameter UDF kami adalah tanggal (periode) tanggal ini (ingat: "pendapatan kuartal pertama tahun 2020"). Excel memiliki mekanisme "penyebaran" rumus asli yang memungkinkan Anda untuk mengisi sel dengan rumus yang sama, dengan mempertimbangkan referensi yang ditentukan dalam parameter. Artinya, alih-alih tanggal tertentu, tautan ke sana dimasukkan ke dalam rumus, dan kemudian pengguna "memperluas" ke periode lain, sementara angka "sama" dari periode lain secara otomatis dimuat ke dalam tabel. 



Dan berapa angka itu?



Pengguna sekarang memiliki model dengan beberapa ratus baris dan beberapa lusin kolom. Dan dia mungkin punya pertanyaan, berapa angka di sel L123? Untuk mendapatkan jawaban, dia hanya perlu mengklik sel ini dan di SPA kami laporan yang sama akan terbuka, tepat di halaman di mana nomor yang diklik tertulis, dan nomor di laporan akan disorot. Seperti ini:







Dan jika ini bukan hanya satu angka dari laporan, tetapi hasil dari beberapa penghitungan pada angka yang diambil dari laporan, maka kami akan menyorot semua angka yang termasuk dalam ekspresi yang dihitung di Excel. Ini tidak mengunduh seluruh aplikasi dan mengunduh semua data yang diperlukan, seperti dalam kasus mengikuti tautan.



Sebagai sebuah kesimpulan



Ini, menurut pendapat saya, implementasi interaksi non-standar antara Excel dan aplikasi web, yang ternyata cukup ramah pengguna. Berkat penggunaan Excel, ambang masuk untuk pengguna dari audiens target cukup rendah. Pada saat yang sama, kami juga mendapatkan semua kekuatan Excel untuk bekerja dengan data numerik. Datanya sendiri selalu terkait dengan sumbernya, serta terkait dengan waktu. Untuk pelanggan sasaran, tidak perlu mengintegrasikan sistem eksternal yang benar-benar baru ke dalam proses bisnis bekerja dengan data. Solusi kami disematkan sebagai "alat" tambahan di dalam Excel, yang merupakan standar de facto untuk penyedia data keuangan.



Pendekatan arsitektural serupa untuk mengintegrasikan aplikasi web dengan Microsoft Excel dapat diterapkan ke tugas lain yang memerlukan interaktivitas dan antarmuka pengguna yang kompleks saat bekerja dengan data numerik dan tabular.



All Articles