Twitter, LinkedIn, Reddit, Discord에서 SaaS 커뮤니티를 탐색하고 이름을 지정하면 많은 커뮤니티에 공통 주제가 나타나는 것을 볼 수 있습니다. 해당 주제는 BI, 분석, 통찰력 등 다양한 이름으로 불릴 수 있습니다. 우리가 사업을 하고, 데이터를 수집하고, 성공하거나 실패하는 것은 자연스러운 일입니다. 우리는 이 모든 것을 조사하고, 우리가 가지고 있는 데이터를 어느 정도 이해하고 조치를 취하고 싶습니다. 이러한 요구로 인해 데이터를 좀 더 쉽게 살펴보고 싶어하는 모든 사람의 삶을 만들어 주는 많은 프로젝트와 도구가 탄생했습니다. 그러나 인간이 가지면 인간은 더 많은 것을 원합니다. 그리고 BI 및 분석의 세계에서 "더 많은 것"은 임베딩, 브랜딩, 맞춤형 스타일 및 액세스 등의 형태로 나타나는 경우가 많습니다. 이는 결국 개발자에게 더 많은 작업을 수행하고 설명하는 데 더 많은 시간을 의미합니다. 따라서 당연히 모든 것을 갖출 수 있는 BI 도구가 필요하게 되었습니다.
이러한 대시보드를 구축하고 유지 관리하는 사람으로서 직면할 수 있는 과제 목록을 만들어 보겠습니다.
- 자신의 애플리케이션이나 플랫폼 내에서 최종 사용자나 뷰어가 대시보드를 사용할 수 있도록 하려는 경우
- 다양한 대시보드 컬렉션(예: "통합")을 관리할 수 있기를 원합니다.
- 대시보드 및 데이터 세트 컬렉션에 특정 사용자 권한을 부여할 수 있기를 원합니다.
- 사용자가 자신과 관련된 데이터에만 액세스할 수 있도록 하고 싶습니다.
Cumul.io 우리가 호출하는 도구를 제공합니다 통합 이는 이러한 문제를 해결하는 데 도움이 됩니다. 이 문서에서는 통합이 무엇인지, 통합을 설정하는 방법을 안내해 드리겠습니다. 멋진 점은 위의 대부분의 항목에 최소한의 코드가 필요하며 대부분의 경우 Cumul.io UI.
일부 배경 - 통합
An 통합 Cumul.io에서는 함께 사용하도록 의도된 대시보드 모음을 정의하는 구조입니다(예: 동일한 애플리케이션에서). 그것은 또한 우리가 사용하는 것입니다 포함 대시보드를 애플리케이션으로 통합합니다. 즉, 대시보드를 애플리케이션에 포함하기 위해 해당 애플리케이션에 해당 대시보드가 속한 통합에 대한 액세스 권한을 부여합니다. 대시보드를 통합에 연결하고 통합의 최종 사용자가 이러한 대시보드 및 사용하는 데이터 세트에 대해 갖게 될 액세스 권한 유형을 관리할 수 있습니다. 대시보드는 여러 통합의 일부일 수 있지만 다양한 통합에 대해 서로 다른 액세스 권한을 가질 수 있습니다. 임베딩과 관련하여 스택의 모양에 관계없이 삶을 단순하게 만드는 데 사용할 수 있는 SDK가 많이 있습니다. 😊
Cumul.io 계정이 있고 Cumul.io 조직의 "소유자"인 경우 통합 탭을 통해 모든 통합을 관리하고 유지할 수 있습니다. Cumul.io 계정의 예를 살펴보겠습니다. 아래에서는 한 명의 Cumul.io 사용자가 생성했을 수 있는 대시보드를 볼 수 있습니다.
이 사용자가 만든 모든 대시보드가 있지만 모든 대시보드가 동일한 최종 사용자 또는 해당 애플리케이션을 위한 것은 아닐 가능성이 높습니다. 따라서 이 Cumul.io 계정의 소유자는 통합(또는 그 이상!)을 생성하고 유지 관리합니다. 💪 이들에게 어떤 모습일지 살펴보겠습니다.
따라서 이 Cumul.io 계정의 소유자는 두 개의 별도 애플리케이션을 유지 관리하는 것으로 보입니다.
이제 통합을 생성하고 해당 대시보드를 애플리케이션에 포함시키는 프로세스가 어떤 것인지 살펴보겠습니다. 좋은 소식은 앞서 언급했듯이 Cumul.io UI 내에서 수행해야 할 많은 단계를 수행할 수 있다는 것입니다.
면책 조항: 이 기사에서는 통합 부분에만 중점을 둘 것입니다. 따라서 대시보드 생성 및 디자인과 관련된 모든 작업을 건너뛰고 미리 만들어진 가상 대시보드 세트로 시작하겠습니다.
우리가 할 일:
통합 생성
단순화를 위해 지금은 하나의 통합만 생성하겠습니다. 회사를 위해 유지 관리하는 분석 플랫폼이 있다고 가정해 보겠습니다. 최종 사용자에게 제공하려는 대시보드는 마케팅 대시보드, 판매 대시보드, 리드 대시보드의 세 가지입니다.
이 계정이 생성했거나 액세스할 수 있는 모든 대시보드 중에서 이 특정 프로젝트에 대해 다음만 사용하려고 한다고 가정해 보겠습니다.
새로운 통합
통합을 생성하려면 통합 탭으로 이동하여 새 통합을 선택합니다. 나타나는 대화 상자는 이미 다음 단계가 무엇인지에 대한 아이디어를 제공합니다.
대시보드 선택
다음으로 이 통합에 포함될 대시보드를 선택할 수 있습니다. 또한 통합에 이름을 지정할 수도 있습니다. 여기서는 적절하게 "매우 중요한 통합"이라고 결정했습니다.
선택 사항을 확인하면 각 대시보드에 대한 슬러그를 정의할 수 있는 옵션이 제공됩니다(강력 권장). 이는 나중에 대시보드를 애플리케이션에 포함하는 동안 사용할 수 있습니다. 나중에 슬러그를 사용하면 프런트 엔드 코드에서 대시보드를 쉽게 참조하고 필요한 경우 대시보드를 쉽게 교체할 수 있다는 사실을 알게 될 것입니다(프런트 엔드 코드의 대시보드 ID에 대해 걱정할 필요가 없기 때문).
액세스 권한
그런 다음 대시보드에서 사용하는 데이터 세트에 대한 통합 액세스 권한을 설정하게 됩니다. 여기에서는 이를 "보기 가능"으로 설정했습니다. 액세스 권한과 이에 수반되는 사항에 대한 자세한 내용은 당사를 확인하세요. 데이터세트를 통합에 연결:
필터 및 매개변수(및 다중 테넌트 액세스)
참고 사항: 이 가상 설정에서 의미가 있는 다중 테넌트 액세스를 돕기 위해 Cumul.io에서는 대시보드가 사용하는 데이터 세트에 매개변수와 필터를 설정할 수 있습니다. 이는 분석 플랫폼에 로그인하는 각 사용자가 대시보드에서 개인적으로 액세스할 수 있는 데이터만 볼 수 있음을 의미합니다. 이 시나리오에서 액세스는 최종 사용자가 회사에서 어느 부서에 근무하는지에 따라 결정될 것이라고 상상할 수 있습니다. Cumul.io를 사용하여 다중 테넌시를 설정하는 방법에 대한 자세한 내용은 다음 기사를 확인하세요. "Auth0을 사용한 Cumul.io 대시보드의 다중 테넌시". 이 작업은 대시보드 디자인 프로세스(여기에서는 생략) 내에서 수행할 수 있으므로 필터가 수행하는 작업을 더 쉽게 시각화할 수 있습니다. 하지만 여기서는 통합 생성 프로세스에서 이러한 필터를 설정하겠습니다.
여기서는 데이터 세트에 필요할 수 있는 필터를 설정합니다. 이 시나리오에서는 사용자의 부서를 기준으로 필터링하면서 다음을 정의합니다. department
매개변수 및 필터는 다음을 기반으로 합니다.
그리고 짜잔! 설정을 완료하면 통합이 성공적으로 생성된 것입니다. 다음 대화에서는 통합을 포함하기 위한 다음 단계에 대한 지침을 제공합니다.
이제 통합 탭에서 이 새로운 통합을 볼 수 있습니다. 또한 여기에서 나중에 대시보드를 삽입하는 데 사용되는 통합 ID에 빠르게 액세스할 수 있습니다.
좋은 소식! 통합이 생성된 후에는 언제든지 편집할 수 있습니다. 대시보드를 제거 또는 추가하고 대시보드 슬러그 또는 액세스 권한을 변경할 수도 있습니다. 따라서 애플리케이션이 변경되고 발전함에 따라 새로운 통합을 만드는 것에 대해 걱정할 필요가 없습니다. 통합 편집은 모두 UI 내에서 이루어지므로 개발자가 모든 것을 다시 설정해야 하는 것에 대해 걱정할 필요가 없습니다. 기술적인 지식이 없는 사용자도 이동 중에도 이러한 통합을 조정할 수 있습니다.
대시보드 포함
우리가 어디로 가고 싶은지 봅시다. 우리는 맞춤형 앱 내에 대시보드를 제공하고 싶습니다. 간단합니다. 사용자가 앱에 로그인하면 앱에 대시보드가 있고 볼 수 있는 데이터가 포함된 대시보드가 표시됩니다. 예를 들어 다음과 같을 수 있습니다.
누군가는 최종 사용자에게 대시보드를 제공하는 방법에 대해 매우 구체적인 비전을 갖고 있었습니다. 그들은 각 대시보드를 훑어볼 수 있는 사이드바를 원했습니다. 완전히 다른 것일 수도 있습니다. 우리가 집중할 것은 호스트 애플리케이션의 모양에 관계없이 이러한 대시보드를 애플리케이션에 포함할 수 있는 방법입니다.
Cumul.io에는 공개적으로 사용 가능한 SDK 세트가 함께 제공됩니다. 여기서는 다음을 사용한다면 어떻게 되는지 보여드리겠습니다. 노드 SDK우리의 개발자 문서 사용 가능한 다른 SDK와 사용 방법에 대한 지침을 확인하세요.
1단계: 최종 사용자를 위한 SSO 토큰 생성
최종 사용자를 위한 SSO 토큰을 생성하려면 먼저 Cumul.io에서 API 키와 토큰을 생성해야 합니다. Cumul.io 프로필에서 이 작업을 수행할 수 있습니다. SSO 인증 요청을 수행하기 위해 이 API 키와 토큰을 생성하고 사용하는 통합에 대한 액세스 권한이 있는 조직 소유자여야 합니다. 이 작업을 완료한 후에는 먼저 애플리케이션의 서버 측에서 수행될 Cumul.io 클라이언트를 생성해 보겠습니다.
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
이제 최종 사용자를 위한 SSO 토큰을 생성할 수 있습니다. 이 API 호출 및 필수 필드에 대한 자세한 내용은 다음을 확인하세요. 생성에 대한 개발자 문서 SSO 토큰.
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: {}
});
여기에서 선택사항을 어떻게 추가했는지 확인하세요. metadata
필드. 여기에서 대시보드의 데이터세트를 필터링하는 데 사용할 매개변수와 값을 제공할 수 있습니다. 우리가 겪은 예에서는 부서를 기준으로 필터링했기 때문에 이를 메타데이터에 추가할 것입니다. 이상적으로는 사용하는 인증 공급자로부터 이 정보를 얻는 것이 좋습니다. 참조 Auth0으로 이 작업을 수행한 방법에 대한 자세한 설명.
이 요청은 나중에 클라이언트 측에 대시보드를 포함하기 위한 키/토큰 조합으로 사용되는 인증 ID와 토큰을 포함하는 JSON 개체를 반환합니다.
여기에 선택적으로 추가할 수 있는 또 다른 멋진 기능은 CSS 속성입니다. 이를 통해 각 사용자(또는 사용자 그룹)에 대한 사용자 정의 모양과 느낌을 정의할 수 있습니다. 동일한 애플리케이션의 경우 Angelina와 Brad에 대한 마케팅 대시보드는 다음과 같습니다.
2단계: 삽입
우리는 거기에서 조금 앞서 나갔습니다. 최종 사용자를 위한 SSO 토큰을 만들었지만 아직 실제로 대시보드를 애플리케이션에 포함하지 않았습니다. 그것을 살펴보겠습니다. 먼저, 다음을 설치하고 가져와야 합니다. 웹 구성요소.
import '@cumul.io/cumulio-dashboard';
구성 요소를 가져온 후에는 HTML 태그인 것처럼 사용할 수 있습니다. 대시보드를 삽입할 위치는 다음과 같습니다.
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
여기에는 몇 가지 옵션이 있습니다. 포함하려는 대시보드에 대해 대시보드 ID를 제공하거나 통합 설정에서 정의한 대시보드 슬러그를 제공할 수 있습니다(이것이 제가 이 방법을 적극 권장하는 이유이며 이 방법을 사용하는 것이 훨씬 더 읽기 쉽습니다). 대시보드를 삽입하는 방법에 대한 자세한 내용은 다음을 참조하세요. 개발자 문서.
이 단계를 수행하는 좋은 방법은 물론 HTML 파일에서 대시보드 구성 요소의 뼈대를 정의하고 애플리케이션의 클라이언트 측에서 나머지 부분을 채우는 것입니다. 물론 이것이 유일한 방법은 아니지만 나는 다음을 수행했습니다.
ID가 포함된 대시보드 구성요소를 추가했습니다. dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
그런 다음 다음과 같이 클라이언트 코드에서 이 구성 요소를 검색했습니다.
const dashboardElement = document.getElementById("dashboard");
그런 다음 대시보드 구성 요소에 추가하는 데 필요한 키와 토큰을 반환하는 애플리케이션의 서버 측에서 SSO 토큰을 요청합니다. 래퍼 함수가 있다고 가정해 보겠습니다. getDashboardAuthorizationToken()
이는 우리를 위해 이 작업을 수행하고 서버 측 SSO 토큰 요청의 응답을 반환합니다. 다음으로 대시보드 구성요소를 적절하게 작성합니다.
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
이전 단계에서 이 통합의 일부인 대시보드에 대한 슬러그를 정의하기로 선택한 방법에 유의하세요. 즉, 대시보드 ID를 조회하고 추가하지 않아도 됩니다. dashboardId
내 매개 변수 중 하나로 dashboardElement
. 대신 슬러그 중 하나만 제공하면 됩니다. marketing
, sales
or leads
그리고 난 끝났어! 물론 어떤 대시보드를 어디에 언제 포함할지 결정하려면 애플리케이션에 일종의 선택 프로세스를 설정해야 합니다.
그게 다야! Cumul.io에서 통합을 성공적으로 생성했으며 몇 줄의 코드만으로 대시보드를 애플리케이션에 포함할 수 있었습니다 🎉 이제 여러 애플리케이션을 한 번에 유지해야 하는 시나리오를 상상해 보세요. 같은 회사든, 다른 회사든. 귀하의 시나리오가 무엇이든, 각각 다른 장소로 이동해야 하고 각 대시보드가 어디에 있는지에 따라 서로 다른 액세스 권한을 가져야 하는 대시보드가 여러 개 있는 경우 어떻게 될지 상상할 수 있을 것입니다. .. 어떻게 빨리 손에서 벗어날 수 있습니까? 통합을 사용하면 이 모든 것을 한 곳에서 간단하고 깔끔한 방식으로 관리할 수 있으며 보시다시피 대부분 Cumul.io UI 내에서 관리할 수 있습니다.
여기에서 할 수 있는 일이 더 많지만 자세히 다루지 않았습니다. 사용자별 맞춤 테마 및 CSS를 추가하는 등. 또한 대시보드에서 매개변수와 필터를 설정하는 방법이나 다중 테넌트 설정을 위해 호스트 애플리케이션 내에서 이를 사용하는 방법도 다루지 않았습니다. 관심이 있는 경우 아래에서 이러한 단계에 대한 유용한 자습서 및 문서에 대한 링크를 찾을 수 있습니다.
출처: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- ACCESS
- 계정
- 동작
- All
- 분석
- API를
- 앱
- 어플리케이션
- 어플리케이션
- 기사
- 인증
- 권한 부여
- 비트
- 브랜드
- 건축업자
- 사업
- 전화
- 이전 단계로 돌아가기
- 암호
- 공통의
- 커뮤니티
- 회사
- 구성 요소
- 만들기
- 계기반
- 데이터
- 디자인
- 세부 묘사
- 개발자
- 개발자
- 불일치
- 이메일
- 종료
- 페이스메이크업
- Fields
- 필터
- 먼저,
- 초점
- 형태
- 기능
- 좋은
- 그룹
- 여기에서 지금 확인해 보세요.
- 방법
- How To
- HTTPS
- 인간
- 생각
- 가져 오기
- 정보
- 정보
- 통찰력
- 완성
- 통합
- IT
- 자바 스크립트
- 키
- 링크드인
- 명부
- 마케팅
- 이름
- 산뜻한
- news
- 선택권
- 옵션
- 조직
- 기타
- 소유자
- 플랫폼
- 생산
- 프로필
- 프로젝트
- 프로젝트
- 재산
- 레딧
- 응답
- REST
- 반품
- SaaS는
- 판매
- 감각
- 세트
- 설정
- 단순, 간단, 편리
- So
- 풀다
- 후원
- 세계
- 테마
- 시간
- 토큰
- 토큰
- 자습서
- 트위터
- ui
- us
- 사용자
- 관측
- 시력
- 누구
- 이내
- 말
- 작업
- 일
- 세계