Jelajahi komunitas SaaS di Twitter, LinkedIn, Reddit, Discord, apa saja dan Anda akan melihat tema umum muncul di banyak komunitas tersebut. Tema tersebut bisa memiliki banyak nama: BI, analitik, wawasan, dan sebagainya. Wajar saja, kita berbisnis, mengumpulkan data, berhasil atau gagal. Kami ingin mengkaji semua hal tersebut, memahami data yang kami miliki, dan mengambil tindakan. Kebutuhan ini telah menghasilkan banyak proyek dan alat yang membuat hidup siapa saja yang ingin melihat data menjadi lebih mudah. Tapi, ketika manusia punya, manusia menginginkan lebih. Dan dalam dunia BI dan analitik, โlebih banyakโ sering kali muncul dalam bentuk penyematan, pencitraan merek, gaya dan akses yang disesuaikan, dan sebagainya. Hal ini berarti lebih banyak pekerjaan bagi pengembang dan lebih banyak waktu untuk memperhitungkannya. Jadi, tentu saja ada kebutuhan akan alat BI yang memungkinkan Anda memiliki semuanya.
Mari buat daftar tantangan yang mungkin Anda hadapi sebagai pembuat dan pengelola dasbor ini:
- Anda ingin membuat dasbor tersedia bagi pengguna akhir atau pemirsa dari dalam aplikasi atau platform Anda sendiri
- Anda ingin dapat mengelola koleksi dasbor yang berbeda (yaitu โintegrasiโ)
- Anda ingin dapat memberikan hak pengguna tertentu pada kumpulan dasbor dan kumpulan data
- Anda ingin memastikan pengguna hanya memiliki akses ke data yang relevan bagi mereka
Cumul.io menyediakan alat yang kami sebut Integrasi yang membantu memecahkan tantangan-tantangan ini. Dalam artikel ini saya akan memandu Anda memahami apa itu integrasi, dan cara menyiapkannya. Yang keren adalah untuk sebagian besar poin di atas, hanya ada sedikit kode yang diperlukan dan sebagian besar dapat diatur di dalam Cumul.io UI.
Beberapa Latar BelakangโโโIntegrasi
An integrasi di Cumul.io adalah struktur yang mendefinisikan kumpulan dasbor yang dimaksudkan untuk digunakan bersama (misalnya dalam aplikasi yang sama). Itu juga yang biasa kami lakukan menanamkan dashboard ke dalam suatu aplikasi. Dengan kata lain, untuk menyematkan dasbor ke dalam aplikasi, kami memberikan aplikasi tersebut akses ke integrasi miliknya. Anda dapat mengaitkan dasbor ke integrasi dan mengatur jenis hak akses apa yang akan dimiliki pengguna akhir integrasi pada dasbor ini dan kumpulan data yang mereka gunakan. Dasbor mungkin merupakan bagian dari beberapa integrasi, namun mungkin memiliki hak akses berbeda pada integrasi berbeda. Dalam hal penyematan, ada sejumlah SDK yang tersedia untuk membuat hidup menjadi sederhana, apa pun tampilan tumpukan Anda. ๐
Setelah Anda memiliki akun Cumul.io dan jika Anda adalah โpemilikโ organisasi di Cumul.io, Anda akan dapat mengelola dan memelihara semua integrasi Anda melalui tab Integrasi. Mari kita lihat contoh akun Cumul.io. Di bawah ini Anda dapat melihat Dasbor yang mungkin dibuat oleh salah satu pengguna Cumul.io:
Meskipun ini semua adalah dasbor yang mungkin dibuat oleh pengguna ini, kemungkinan besar tidak semua dasbor ditujukan untuk pengguna akhir, atau aplikasi yang sama. Jadi, pemilik akun Cumul.io ini akan membuat dan memelihara Integrasi (atau lebih!) ๐ช Mari kita lihat seperti apa integrasinya:
Jadi sepertinya pemilik akun Cumul.io ini memiliki dua aplikasi terpisah.
Sekarang mari kita lihat seperti apa proses pembuatan integrasi dan penyematan dasbornya ke dalam aplikasi. Kabar baiknya adalah, seperti disebutkan sebelumnya, banyak langkah yang harus Anda ambil dapat dilakukan di UI Cumul.io.
Penafian: Untuk keperluan artikel ini, saya hanya akan fokus pada bagian Integrasi. Jadi, saya akan melewatkan semua hal yang berhubungan dengan pembuatan dan desain dasbor dan kita akan mulai dengan serangkaian dasbor imajiner yang sudah jadi.
Apa yang akan kami lakukan:
Menciptakan Integrasi
Untuk mempermudah, mari kita buat satu integrasi saja untuk saat ini. Bayangkan kita memiliki platform analitik yang kita kelola untuk perusahaan kita. Ada tiga dasbor yang ingin kami berikan kepada pengguna akhir kami: Dasbor Pemasaran, Dasbor Penjualan, dan Dasbor Prospek.
Katakanlah dari semua dasbor yang dibuat atau dapat diakses oleh akun ini, untuk proyek khusus ini mereka hanya ingin menggunakan yang berikut:
Integrasi baru
Untuk membuat integrasi, kita buka tab Integrasi dan pilih Integrasi Baru. Dialog yang muncul sudah memberi Anda gambaran tentang langkah Anda selanjutnya:
Memilih Dasbor
Selanjutnya, Anda dapat memilih dasbor mana yang akan disertakan dalam integrasi ini. Anda juga dapat memberi nama pada Integrasi, yang di sini saya putuskan akan menjadi โIntegrasi Sangat Pentingโ:
Setelah Anda mengonfirmasi pilihan Anda, Anda akan memiliki opsi untuk menentukan slug untuk setiap dasbor (sangat disarankan). Ini nantinya dapat digunakan saat menyematkan dasbor ke dalam aplikasi Anda. Nanti Anda akan melihat bahwa slug memudahkan untuk mereferensikan dasbor di kode front-end Anda, dan mempermudah penggantian dasbor jika diperlukan juga (karena Anda tidak perlu khawatir tentang ID dasbor di kode front-end).
Hak akses
Anda kemudian dapat mengatur hak akses integrasi untuk kumpulan data yang digunakan dasbornya. Di sini kami menyetelnya ke โDapat melihat.โ Untuk informasi lebih lanjut tentang hak akses dan apa saja yang diperlukan, lihat kami mengaitkan kumpulan data ke integrasi:
Filter dan Parameter (dan Akses Multi-Penyewa)
Catatan Tambahan: Untuk membantu akses multi-penyewaโโโyang masuk akal dalam pengaturan imajiner iniโโโCumul.io memungkinkan untuk menyetel parameter dan filter pada kumpulan data yang digunakan dasbor. Artinya, setiap pengguna yang masuk ke platform analitik Anda hanya akan melihat data yang dapat mereka akses secara pribadi di dasbor. Anda dapat membayangkan bahwa dalam skenario ini akses akan didasarkan pada departemen mana pengguna akhir bekerja di perusahaan tersebut. Untuk informasi lebih lanjut tentang cara mengatur multi-tenancy dengan Cumul.io, lihat artikel kami, โMulti-Sewa di Dasbor Cumul.io dengan Auth0โ. Hal ini dapat dilakukan dalam proses desain dasbor (yang kita lewati), yang membuatnya lebih mudah untuk memvisualisasikan apa yang dilakukan filter. Namun di sini, kami akan mengatur filter ini dalam proses pembuatan Integrasi.
Di sini, kami menetapkan filter yang mungkin diperlukan oleh kumpulan data. Dalam skenario ini, saat kami memfilter berdasarkan departemen pengguna, kami mendefinisikan a department
parameter dan filter berdasarkan itu:
Dan voila! Setelah Anda selesai mengaturnya, Anda telah berhasil membuat integrasi. Dialog berikutnya akan memberi Anda petunjuk tentang langkah selanjutnya dalam menyematkan integrasi Anda:
Sekarang Anda dapat melihat Integrasi baru ini di tab Integrasi Anda. Di sinilah Anda juga akan memiliki akses cepat ke ID Integrasi, yang nantinya akan digunakan untuk menyematkan dasbor.
Kabar baik! Setelah Integrasi Anda dibuat, Anda selalu dapat mengeditnya. Anda dapat menghapus atau menambahkan dashboard, mengubah slug dashboard atau hak akses juga. Jadi Anda tidak perlu khawatir untuk membuat integrasi baru seiring perubahan dan perkembangan aplikasi Anda. Dan karena pengeditan integrasi semuanya dilakukan di UI, Anda tidak perlu khawatir jika pengembang akan mengatur semuanya lagi. Pengguna non-teknis dapat mengadaptasi integrasi ini saat bepergian.
Menyematkan Dasbor
Mari kita lihat kemana kita ingin pergi. Kami ingin menyediakan dasbor dalam aplikasi khusus. Sederhananya, pengguna masuk ke suatu aplikasi, aplikasi tersebut memiliki dasbor, mereka melihat dasbor dengan data yang boleh mereka lihat. Contohnya bisa terlihat seperti berikut:
Seseorang memiliki visi yang sangat spesifik tentang bagaimana mereka ingin menyediakan dasbor kepada pengguna akhir. Mereka menginginkan sidebar tempat mereka dapat menelusuri setiap dasbor. Itu juga bisa menjadi sesuatu yang sangat berbeda. Apa yang akan kami fokuskan adalah bagaimana kami dapat menyematkan dasbor ini ke dalam aplikasi kami, apa pun tampilan aplikasi hostnya.
Cumul.io hadir dengan serangkaian SDK yang tersedia untuk umum. Di sini saya akan menunjukkan kepada Anda apa yang akan Anda lakukan jika Anda menggunakan SDK Node. Lihat dokumen pengembang untuk melihat SDK lain apa saja yang tersedia dan petunjuk tentang cara menggunakannya.
Langkah 1: Hasilkan Token SSO Untuk Pengguna Akhir Anda
Sebelum Anda dapat membuat token SSO untuk pengguna akhir, Anda harus memastikan bahwa Anda membuat kunci API dan token di Cumul.io. Anda dapat melakukan ini dari Profil Cumul.io Anda. Pemilik organisasi yang memiliki akses ke integrasi haruslah yang membuat dan menggunakan kunci dan token API ini untuk membuat permintaan otorisasi SSO. Setelah Anda selesai melakukannya, pertama-tama mari buat klien Cumul.io yang akan dilakukan di sisi server aplikasi:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Sekarang kita dapat membuat token SSO untuk pengguna akhir. Untuk informasi lebih lanjut tentang panggilan API ini dan bidang yang wajib diisi, lihat dokumentasi pengembang tentang pembuatan SSO token.
let promise = client.create('authorization', { integration_id: '<THE INTEGRATION ID>', type: 'sso', expiry: '24 hours', inactivity_interval: '10 minutes', username: '< A unique identifier for your end user >', name: '< end-user name >', email: '< end-user email >', suborganization: '< end-user suborganization >', role: 'viewer', metadata: {}
});
Di sini, perhatikan bagaimana kami menambahkan opsional metadata
bidang. Di sinilah Anda dapat memberikan parameter dan nilai yang ingin Anda gunakan untuk memfilter kumpulan data dasbor. Dalam contoh yang telah kita lalui, kami telah memfilter berdasarkan departemen sehingga kami akan menambahkan ini ke metadata. Idealnya Anda mendapatkan informasi ini dari penyedia otentikasi yang Anda gunakan. Melihat sebuah penjelasan mendetail tentang bagaimana kami melakukan ini dengan Auth0.
Permintaan ini akan mengembalikan objek JSON yang berisi id otorisasi dan token yang nantinya digunakan sebagai kombinasi kunci/token untuk menyematkan dasbor di sisi klien.
Hal lain yang dapat Anda tambahkan secara opsional di sini yang cukup keren adalah properti CSS. Ini akan memungkinkan Anda menentukan tampilan dan nuansa khusus untuk setiap pengguna (atau grup pengguna). Untuk aplikasi yang sama, seperti inilah tampilan Dashboard Pemasaran untuk Angelina vs Brad:
Langkah 2: Sematkan
Kami melompat sedikit ke depan di sana. Kami membuat token SSO untuk pengguna akhir namun kami belum benar-benar menyematkan dasbor ke dalam aplikasi. Mari kita lihat itu. Pertama, Anda harus menginstal dan mengimpor Komponen web.
import '@cumul.io/cumulio-dashboard';
Setelah mengimpor komponen, Anda dapat menggunakannya seolah-olah itu adalah tag HTML. Di sinilah Anda akan menyematkan dasbor Anda:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Di sini Anda akan memiliki beberapa pilihan. Anda dapat memberikan Id dasbor untuk dasbor apa pun yang ingin Anda sematkan, atau Anda dapat memberikan slug dasbor yang kami tentukan di pengaturan Integrasi (itulah sebabnya saya sangat merekomendasikan hal ini, akan lebih mudah dibaca jika melakukannya dengan cara ini). Untuk informasi lebih rinci tentang cara menyematkan dasbor, Anda juga dapat melihat kami dokumentasi pengembang.
Cara yang bagus untuk melakukan langkah ini tentu saja adalah dengan mendefinisikan kerangka komponen dasbor di file HTML Anda dan mengisi sisanya dari sisi klien aplikasi Anda. Saya telah melakukan hal berikut, meskipun tentu saja ini bukan satu-satunya cara:
Saya telah menambahkan komponen dashboard dengan ID dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Kemudian, saya mengambil komponen ini dalam kode klien sebagai berikut:
const dashboardElement = document.getElementById("dashboard");
Lalu saya meminta token SSO dari sisi server aplikasi saya yang mengembalikan kunci dan token yang diperlukan untuk ditambahkan ke komponen dasbor. Anggaplah kita mempunyai fungsi wrapper getDashboardAuthorizationToken()
yang melakukan ini untuk kami dan mengembalikan respons dari permintaan token SSO sisi server. Selanjutnya kita cukup mengisi komponen dashboard sesuai:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Perhatikan bagaimana pada langkah sebelumnya saya memilih untuk mendefinisikan slug untuk dashboard saya yang merupakan bagian dari integrasi ini. Ini berarti saya dapat menghindari mencari ID dasbor dan menambahkan dashboardId
sebagai salah satu parameter saya dashboardElement
. Sebagai gantinya saya hanya bisa memberikan salah satu siputnya marketing
, sales
or leads
dan aku sudah selesai! Tentu saja Anda harus menyiapkan semacam proses seleksi pada aplikasi Anda untuk memutuskan di mana dan kapan Anda menyematkan dasbor yang mana.
Itu saja teman-teman! Kami telah berhasil membuat Integrasi di Cumul.io dan dalam beberapa baris kode, kami telah dapat menyematkan dasbornya ke dalam aplikasi kami ๐ Sekarang bayangkan sebuah skenario di mana Anda harus memelihara beberapa aplikasi sekaligus, baik untuk di dalam perusahaan yang sama atau perusahaan yang terpisah. Apa pun skenario Anda, saya yakin Anda dapat membayangkan bagaimana jika Anda memiliki sejumlah dasbor yang masing-masing harus menuju ke tempat yang berbeda dan masing-masing harus memiliki hak akses yang berbeda tergantung di mana mereka berada dan seterusnya. .. Bagaimana hal itu bisa dengan cepat menjadi tidak terkendali. Integrasi memungkinkan Anda mengelola ini dengan cara yang sederhana dan rapi, semuanya di satu tempat, dan seperti yang Anda lihat, sebagian besar dari dalam UI Cumul.io.
Masih banyak lagi yang dapat Anda lakukan di sini yang belum kami bahas secara detail. Seperti menambahkan tema khusus dan CSS khusus pengguna. Kami juga tidak membahas cara Anda menyetel parameter dan filter di dasbor, atau cara menggunakannya dari dalam aplikasi host sehingga Anda memiliki penyiapan multi-penyewa. Di bawah ini Anda dapat menemukan beberapa tautan ke tutorial dan dokumentasi berguna untuk langkah-langkah ini jika Anda tertarik.
Sumber: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- mengakses
- Akun
- Tindakan
- Semua
- analisis
- api
- aplikasi
- Aplikasi
- aplikasi
- artikel
- Otentikasi
- otorisasi
- Bit
- merek
- pembangun
- bisnis
- panggilan
- perubahan
- kode
- Umum
- Masyarakat
- perusahaan
- komponen
- membuat
- dasbor
- data
- Mendesain
- rinci
- Pengembang
- pengembang
- perselisihan
- berakhir
- Menghadapi
- Fields
- filter
- Pertama
- Fokus
- bentuk
- fungsi
- baik
- Kelompok
- di sini
- Seterpercayaapakah Olymp Trade? Kesimpulan
- How To
- HTTPS
- Manusia
- ide
- pengimporan
- Info
- informasi
- wawasan
- integrasi
- integrasi
- IT
- JavaScript
- kunci
- Daftar
- Marketing
- nama
- Rapi
- berita
- pilihan
- Opsi
- organisasi
- Lainnya
- pemilik
- Platform
- Diproduksi
- Profil
- proyek
- memprojeksikan
- milik
- tanggapan
- ISTIRAHAT
- Pengembalian
- SaaS
- penjualan
- rasa
- set
- pengaturan
- Sederhana
- So
- MEMECAHKAN
- Disponsori
- Dunia
- tema
- waktu
- token
- Token
- tutorial
- ui
- us
- Pengguna
- View
- penglihatan
- SIAPA
- dalam
- kata
- Kerja
- bekerja
- dunia