Twitter, LinkedIn, Reddit, Discord'daki SaaS topluluklarına göz atın, adını verin ve çoğunda ortak bir temanın göründüğünü göreceksiniz. Bu temanın birçok adı olabilir: BI, analitik, içgörüler vb. Doğaldır, iş yaparız, veri toplarız, başarılı oluruz veya başarısız oluruz. Bunların hepsini incelemek, elimizdeki verilerden bir anlam çıkarmak ve harekete geçmek istiyoruz. Bu ihtiyaç, verilere bakmak isteyen herkesin hayatını biraz olsun kolaylaştıran birçok proje ve araç üretti. Ancak insanlar sahip olduklarında daha fazlasını isterler. İş Zekası ve analitik dünyasında, "daha fazlası" genellikle yerleştirme, markalaştırma, özelleştirilmiş stil ve erişim vb. şeklinde gelir. Bu da geliştiriciler için daha fazla çalışma ve hesaba katmak için daha fazla zaman anlamına gelir. Bu nedenle, doğal olarak, her şeye sahip olmanızı sağlayacak BI araçlarına ihtiyaç duyulmuştur.
Bu gösterge panolarının oluşturucusu ve koruyucusu olarak karşılaşabileceğiniz zorlukların bir listesini yapalım:
- Panoları kendi uygulamanız veya platformunuz içinden son kullanıcıların veya görüntüleyenlerin kullanımına sunmak istiyorsunuz
- Farklı pano koleksiyonlarını yönetebilmek istiyorsunuz (ör. "entegrasyonlar")
- Gösterge tabloları ve veri kümelerinden oluşan bir koleksiyona belirli kullanıcı hakları verebilmek istiyorsunuz
- Kullanıcıların yalnızca kendileriyle ilgili verilere erişebildiğinden emin olmak istiyorsunuz.
kümül.io dediğimiz bir araç sağlar. Entegrasyonlar bu zorlukların çözülmesine yardımcı olur. Bu makalede, entegrasyonların ne olduğu ve nasıl kurulacağı konusunda size yol göstereceğim. Harika olan şey, yukarıdaki noktaların çoğu için gereken minimum kod olması ve çoğunlukla içinde ayarlanabilmesidir. kümül.io UI.
Biraz Arka Plan — Entegrasyonlar
An Bütünleşme Cumul.io'da, birlikte (örneğin aynı uygulamada) kullanılması amaçlanan bir pano koleksiyonunu tanımlayan bir yapıdır. Aynı zamanda kullandığımız şey gömmek panoları bir uygulamaya dönüştürün. Başka bir deyişle, panoları bir uygulamaya gömmek için, uygulamaya ait oldukları entegrasyona erişim izni veririz. Panoları bir entegrasyonla ilişkilendirebilir ve entegrasyonun son kullanıcılarının bu panolarda ve kullandıkları veri kümelerinde ne tür erişim haklarına sahip olacağını yönetebilirsiniz. Bir pano, birden fazla entegrasyonun parçası olabilir, ancak farklı entegrasyonlarda farklı erişim haklarına sahip olabilir. Yerleştirme söz konusu olduğunda, yığınız nasıl görünürse görünsün, hayatı kolaylaştıracak bir dizi SDK mevcuttur. 😊
Cumul.io hesabına sahip olduktan sonra ve Cumul.io'da bir kuruluşun “sahibi” iseniz, Entegrasyonlar sekmesinden tüm entegrasyonlarınızı yönetebilecek ve sürdürebileceksiniz. Örnek bir Cumul.io hesabına bakalım. Aşağıda, bir Cumul.io kullanıcısının oluşturmuş olabileceği Dashboard'ları görebilirsiniz:
Bunların tümü, bu kullanıcının oluşturmuş olabileceği panolar olsa da, büyük olasılıkla tüm panolar aynı son kullanıcılara veya bu konudaki uygulamaya yönelik değildir. Yani, bu Cumul.io hesabının sahibi bir Entegrasyon (veya daha fazlasını!) oluşturup sürdürür 💪 Bunun onlar için nasıl görünebileceğine bir göz atalım:
Görünüşe göre bu Cumul.io hesabının sahibi iki ayrı uygulamaya sahip.
Şimdi bir entegrasyon oluşturma ve gösterge panolarını bir uygulamaya yerleştirme sürecinin nasıl görüneceğini görelim. İyi haber şu ki, daha önce de belirtildiği gibi, atmanız gereken adımların çoğu Cumul.io kullanıcı arayüzünde yapılabilir.
Feragatname: Bu makalenin amaçları doğrultusunda, yalnızca Entegrasyon bölümüne odaklanacağım. Bu yüzden, pano oluşturma ve tasarlama ile ilgili her şeyi atlayacağım ve önceden hazırlanmış bir dizi hayali pano ile başlayacağız.
Ne yapacağız:
Entegrasyon Oluşturma
Basit olması için şimdilik sadece bir entegrasyon oluşturalım. Şirketimiz için sürdürdüğümüz bir analitik platformumuz olduğunu düşünelim. Son kullanıcılarımıza sağlamak istediğimiz üç gösterge paneli vardır: Pazarlama Kontrol Paneli, Satış Kontrol Paneli ve Müşteri Talepleri Kontrol Paneli.
Diyelim ki bu hesabın oluşturduğu veya erişebildiği tüm panolardan bu belirli proje için yalnızca aşağıdakileri kullanmak istiyorlar:
Yeni Entegrasyon
Entegrasyonu oluşturmak için Entegrasyonlar sekmesine gidip New Entegrasyon seçiyoruz. Açılan diyalog, sonraki adımlarınızın ne olacağı konusunda size bir fikir verecektir:
Gösterge Tablolarını Seçme
Ardından, bu entegrasyona panolarınızdan hangilerinin dahil edileceğini seçebileceksiniz. Ayrıca Entegrasyona burada uygun bir şekilde "Çok Önemli Entegrasyon" olacağına karar verdiğim bir isim de verebileceksiniz:
Seçiminizi onayladığınızda, her pano için bir bilgi tanımlama seçeneğine sahip olacaksınız (şiddetle tavsiye edilir). Bunlar daha sonra panoları uygulamanıza yerleştirirken kullanılabilir. Daha sonra, sümüklü böceklerin ön uç kodunuzdaki panolara başvurmayı kolaylaştırdığını ve gerekirse panoları değiştirmeyi kolaylaştırdığını göreceksiniz (çünkü ön uç kodundaki pano kimlikleri hakkında endişelenmenize gerek kalmayacaktır).
Erişim Hakları
Ardından, gösterge panolarının kullandığı veri kümeleri için entegrasyonun erişim haklarını ayarlayacaksınız. Burada bunu "Görüntüleyebilir" olarak ayarladık. Erişim hakları ve bunların neleri kapsadığı hakkında daha fazla bilgi için şu sayfamıza göz atın: veri kümelerini entegrasyonlarla ilişkilendirme:
Filtreler ve Parametreler (ve Çok Kiracılı Erişim)
Yan Not: Bu hayali kurulumda mantıklı olan çok kiracılı erişime yardımcı olmak için Cumul.io, bir panonun kullandığı veri kümelerinde parametreler ve filtreler ayarlamayı mümkün kılar. Bu, analitik platformunuzda oturum açan her kullanıcının panolarda yalnızca kişisel olarak erişebildiği verileri göreceği anlamına gelir. Bu senaryoda erişimin, son kullanıcının şirkette hangi departmanda çalıştığına bağlı olacağını düşünebilirsiniz. Cumul.io ile çoklu kiracılığın nasıl kurulacağı hakkında daha fazla bilgi için makalemize göz atın, "Auth0 ile Cumul.io Panolarında Çoklu Kiracılık". Bu, filtrelerin ne yaptığını görselleştirmeyi kolaylaştıran pano tasarım sürecinde (biz bunu atlıyoruz) yapılabilir. Ancak burada, Entegrasyon oluşturma sürecinde bu filtreleri ayarlayacağız.
Burada, veri kümelerinin sahip olması gerekebilecek filtreleri ayarlıyoruz. Bu senaryoda, kullanıcıların departmanlarına göre filtreleme yaptığımız için, department
buna göre parametre ve filtre:
Ve işte! Bunları ayarlamayı bitirdiğinizde, başarıyla bir entegrasyon oluşturmuş olursunuz. Bir sonraki diyalog size entegrasyonunuzu yerleştirmek için sonraki adımlarınızın ne olacağına dair talimatlar verecektir:
Artık bu yepyeni Entegrasyonu Entegrasyon sekmenizde görebileceksiniz. Burası aynı zamanda, daha sonra gösterge tablolarını yerleştirmek için kullanılacak olan Entegrasyon Kimliğine hızlı erişime sahip olacağınız yerdir.
İyi haberler! Entegrasyonunuz oluşturulduktan sonra her zaman düzenleyebilirsiniz. Panoları kaldırabilir veya ekleyebilir, panoların bilgilerini veya erişim haklarını değiştirebilirsiniz. Böylece, uygulamanız değiştikçe ve geliştikçe yeni entegrasyonlar oluşturma konusunda endişelenmenize gerek kalmaz. Ve bir entegrasyonu düzenleme tamamen kullanıcı arayüzü içinde olduğundan, bir geliştiricinin her şeyi yeniden kurması konusunda endişelenmenize gerek kalmayacak. Teknik olmayan kullanıcılar bu entegrasyonları hareket halindeyken uyarlayabilir.
Gösterge Tablolarını Gömme
Bakalım nereye varmak istiyoruz. Panoları özel bir uygulama içinde sağlamak istiyoruz. Basit, kullanıcı bir uygulamada oturum açar, uygulamanın panoları vardır, panoları görmelerine izin verilen verilerle birlikte görürler. Örneğin aşağıdaki gibi görünebilir:
Birisinin panoları son kullanıcıya nasıl sağlamak istediğine dair çok özel bir vizyonu vardı. Panoların her birini çevirebilecekleri bir kenar çubuğu istediler. Tamamen farklı bir şey de olabilirdi. Ana bilgisayar uygulaması nasıl görünürse görünsün, bu gösterge panolarını uygulamamıza nasıl yerleştirebileceğimize odaklanacağız.
Cumul.io, herkese açık bir dizi SDK ile birlikte gelir. Burada, eğer kullansaydınız ne yapacağınızı göstereceğim. Düğüm SDK'sı. Çıkış bizim geliştirici belgeleri Başka hangi SDK'ların mevcut olduğunu ve bunların nasıl kullanılacağına ilişkin talimatları görmek için.
1. Adım: Son Kullanıcılarınız İçin SSO Jetonları Oluşturun
Son kullanıcılarınız için SSO belirteçleri oluşturmadan önce, Cumul.io'da bir API anahtarı ve belirteci oluşturduğunuzdan emin olmanız gerekir. Bunu Cumul.io Profilinizden yapabilirsiniz. SSO yetkilendirme isteğinde bulunmak için bu API anahtarını ve belirtecini oluşturan ve kullanan, entegrasyona erişimi olan kuruluş sahibi olmalıdır. Bunu yaptıktan sonra, uygulamanın sunucu tarafında yapılacak olan bir Cumul.io istemcisi oluşturalım:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Artık son kullanıcı için SSO belirtecini oluşturabiliriz. Bu API çağrısı ve gerekli alanlar hakkında daha fazla bilgi için şu sayfamıza göz atın: oluşturma hakkında geliştirici belgeleri TOA token kazanabilirsiniz..
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: {}
});
Burada, isteğe bağlı olanı nasıl eklediğimize dikkat edin. metadata
alan. Panoların veri kümelerini filtrelemek istediğiniz parametreleri ve değerleri burada sağlayabilirsiniz. İncelediğimiz örnekte departman bazında filtreleme yapıyorduk bu yüzden bunu metadataya ekleyecektik. İdeal olarak, bu bilgiyi kullandığınız kimlik doğrulama sağlayıcısından alırsınız. Bkz Auth0 ile bunu nasıl yaptığımıza dair ayrıntılı açıklama.
Bu istek, daha sonra istemci tarafında panoları gömmek için anahtar/belirteç kombinasyonu olarak kullanılan bir yetkilendirme kimliği ve belirteç içeren bir JSON nesnesi döndürür.
İsteğe bağlı olarak buraya ekleyebileceğiniz ve oldukça havalı olan başka bir şey de bir CSS özelliğidir. Bu, her kullanıcı (veya kullanıcı grubu) için özel görünüm ve his tanımlamanıza olanak tanır. Aynı uygulama için, Pazarlama Panosu Angelina ve Brad için şöyle görünebilir:
2. Adım: Yerleştirin
Orada biraz öne geçtik. Son kullanıcılar için SSO belirteçleri oluşturduk, ancak panoları uygulamaya henüz yerleştirmedik. Şuna bir bakalım. İlk önce, yüklemeli ve içe aktarmalısınız. Web bileşeni.
import '@cumul.io/cumulio-dashboard';
Bileşeni içe aktardıktan sonra, onu bir HTML etiketiymiş gibi kullanabilirsiniz. Panolarınızı yerleştireceğiniz yer burasıdır:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Burada birkaç seçeneğiniz olacak. Gömmek istediğiniz herhangi bir gösterge panosu için gösterge tablosu kimliği sağlayabilir veya Entegrasyon kurulumunda tanımladığımız gösterge tablosu bilgisini sağlayabilirsiniz (bu yüzden bunu şiddetle tavsiye ediyorum, bu şekilde yapmak çok daha okunabilir). Panoların nasıl yerleştirileceği hakkında daha ayrıntılı bilgi için ayrıca şu sayfamıza da göz atabilirsiniz: geliştirici belgeleri.
Bu adımı gerçekleştirmenin güzel bir yolu elbette HTML dosyanızdaki pano bileşeninin iskeletini tanımlamak ve geri kalanını uygulamanızın istemci tarafından doldurmaktır. Elbette tek yol olmasa da aşağıdakileri yaptım:
Pano bileşenini kimliğe ekledim dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Ardından, müşteri kodundaki bu bileşeni şu şekilde aldım:
const dashboardElement = document.getElementById("dashboard");
Ardından, gösterge panosu bileşenine eklemek için gerekli anahtarı ve belirteci döndüren uygulamamın sunucu tarafından SSO belirtecini talep ediyorum. Bir sarmalayıcı işlevimiz olduğunu varsayalım getDashboardAuthorizationToken()
bu bizim için bunu yapar ve sunucu tarafı SSO belirteç isteğinden gelen yanıtı döndürür. Ardından, pano bileşenini uygun şekilde dolduruyoruz:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Önceki adımlarda panolarım için bu entegrasyonun bir parçası olan bilgileri nasıl tanımlamayı seçtiğime dikkat edin. Bu, pano kimliklerini aramaktan ve eklemekten kaçınabileceğim anlamına gelir dashboardId
parametrelerimden biri olarak dashboardElement
. Bunun yerine sümüklü böceklerden birini sağlayabilirim marketing
, sales
or leads
ve bitirdim! Elbette, hangi kontrol panelini nereye ve ne zaman yerleştireceğinize karar vermek için uygulamanızda bir tür seçim süreci ayarlamanız gerekir.
İşte bu millet! Cumul.io'da başarıyla bir Entegrasyon oluşturduk ve birkaç satır kodla gösterge panolarını uygulamamıza yerleştirebildik 🎉 Şimdi birden fazla uygulamayı aynı anda sürdürmeniz gereken bir senaryo hayal edin. aynı şirket veya ayrı olanlar. Senaryonuz ne olursa olsun, her birinin farklı yerlere gitmesi gereken ve her birinin nerede olduklarına bağlı olarak farklı erişim haklarına sahip olması gereken bir dizi panonuz varsa nasıl olacağını hayal edebileceğinizden eminim. .. Nasıl çabucak kontrolden çıkabilir. Entegrasyonlar, bunu basit ve düzenli bir şekilde, hepsi tek bir yerde ve görebileceğiniz gibi, çoğunlukla Cumul.io kullanıcı arayüzü içinden yönetmenize olanak tanır.
Burada ayrıntılı olarak ele almadığımız daha birçok şey yapabilirsiniz. Kullanıcıya özel özel temalar ve CSS eklemek gibi. Ayrıca, panolarda parametreleri ve filtreleri nasıl ayarlayacağınızı veya çok kiracılı bir kuruluma sahip olmak için bunları ana bilgisayar uygulamanızın içinden nasıl kullanacağınızı da incelemedik. Aşağıda, ilgileniyorsanız, bu adımlar için yararlı eğitimlere ve belgelere bazı bağlantılar bulabilirsiniz.
Kaynak: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- erişim
- Hesap
- Action
- Türkiye
- analytics
- api
- uygulamayı yükleyeceğiz
- Uygulama
- uygulamaları
- göre
- Doğrulama
- yetki
- Bit
- dağlama
- oluşturucu
- iş
- çağrı
- değişiklik
- kod
- ortak
- topluluklar
- şirket
- bileşen
- Oluşturma
- gösterge paneli
- veri
- Dizayn
- ayrıntı
- Geliştirici
- geliştiriciler
- anlaşmazlık
- E-posta
- uçları
- Yüz
- Alanlar
- filtreler
- Ad
- odak
- Airdrop Formu
- işlev
- Tercih Etmenizin
- grup
- okuyun
- Ne kadar
- Nasıl Yapılır
- HTTPS
- İnsanlar
- Fikir
- ithal
- bilgi
- bilgi
- anlayışlar
- bütünleşme
- entegrasyonlar
- IT
- JavaScript
- anahtar
- Liste
- Pazarlama
- isimleri
- temiz
- haber
- seçenek
- Opsiyonlar
- kuruluşlar
- Diğer
- sahip
- platform
- Üretilmiş
- Profil
- proje
- Projeler
- özellik
- yanıt
- DİNLENME
- İade
- SaaS
- satış
- duyu
- set
- ayar
- Basit
- So
- ÇÖZMEK
- Sponsor
- Dünya
- tema
- zaman
- simge
- Jeton
- Öğreticiler
- ui
- us
- kullanıcılar
- Görüntüle
- vizyonumuz
- DSÖ
- içinde
- sözler
- İş
- çalışır
- Dünya