소프트웨어 개발 영역에서 실시간 C3.js 차트는 조직의 활동을 효과적으로 모니터링할 수 있는 방법을 제공합니다. 엔지니어링 팀의 경우 추적 가능한 메트릭 중 하나는 GitHub 커밋입니다. 이 블로그 게시물에서는 이 주제를 살펴보면서 GitHub의 API를 활용하여 실시간 대화형 그래프로 GitHub 커밋 데이터를 검색하고 표시하는 프로세스를 안내하는 튜토리얼을 제공합니다. HTML, Javascript, CSS의 기능을 활용하고 PubNub를 사용하여 GitHub 대시보드를 만들고 커밋 데이터를 스트리밍하는 한편, C3.js가 시각화에 도움을 줄 것입니다.

실시간 C3.js 차트에 대해 자세히 알아보려면 훌륭한 튜토리얼을 참조하세요. 이제 시작해 보겠습니다!

실시간 GitHub 대시보드 만드는 방법

실시간 GitHub 대시보드를 만들려면 GitHub 리포지토리와 같은 다양한 데이터 소스에 연결하고 몇 가지 필요한 종속성을 처리해야 합니다. 보안 코딩 및 데이터 암호화와 같은 필요한 사이버 보안 조치에 유의하세요. 업계 표준 보안 프로토콜을 준수하는 것은 필수입니다.

다음은 단계별 가이드입니다:

GitHub 웹후크 추가하기

웹훅을 설정하려면 다음 단계를 따르세요:

1. GitHub 리포지토리를 만들거나 기존 Git 리포지토리를 사용합니다.

2. 페이지 오른쪽의 '설정'을 클릭합니다.

3. 페이지 왼쪽의 '웹훅'을 클릭합니다.

4. 오른쪽 상단의 '웹후크 추가'를 클릭합니다.

5. GitHub에서 비밀번호를 묻는 메시지가 표시되면 입력합니다.

6. '페이로드 URL'에 http://pubnub-git-hook.herokuapp.com/github/ORG-NAME/TEAM-NAME 을 입력합니다. ORG-NAME을 조직의 이름으로, TEAM-NAME을 리포지토리를 제어하는 팀으로 바꿉니다.

시각적 대시보드 로드

이 페이지를 방문합니다. PubNub 대시보드를 통해 전송된 모든 커밋의 목록이 표시됩니다. 커밋 중 하나를 GitHub로 푸시하면 수십 밀리초 내에 GitHub 커밋 대시보드에 메시지가 표시되고 차트가 실시간으로 업데이트됩니다.

Github 커밋 대시보드 구축 방법

이 대시보드는 GitHub, PubNub 데이터 스트림 네트워크, C3.js로 구동되는 D3 차트 시각화의 매시업입니다. 커밋이 GitHub로 푸시되면, 커밋 메타데이터가 작은 Heroku 인스턴스에 게시되어 PubNub 네트워크에 게시됩니다. 우리는 GitHub 페이지의 대시보드 페이지에서 호스팅하고 있습니다.

Heroku 인스턴스가 GitHub에서 커밋 데이터를 받으면 pubnub-git 채널의 공개 게시/구독 키를 사용하여 해당 데이터의 요약을 PubNub에 게시합니다. 여기에서 개발자 콘솔을 통해 pubnub-git 채널을 모니터링할 수 있습니다.

다음은 메시지 페이로드 예시입니다:

{ 
  "name":"drnugent",
  "avatar_url":"https://avatars.githubusercontent.com/u/857270?v=3",
  "num_commits":4,
  "team":"team-pubnub",
  "org":"pubnub",
  "time":1430436692806,
  "repo_name":"drnugent/test"
}

대시보드가 구독 콜백을 통해 이 정보를 수신할 때 마법의 후반부가 시작됩니다. 대시보드의 소스를 보면 이 코드를 볼 수 있습니다:

pubnub.subscribe({
  channel: 'pubnub-git',
  message: displayLiveMessage

});

이 구독 호출은 pubnub-git 채널에서 메시지가 수신될 때마다 JavaScript 함수 displayLiveMessage() 가 호출되도록 합니다. displayLiveMessage()는 로그의 맨 위에 커밋 푸시 알림을 추가하고 C3 시각화 차트를 업데이트합니다.

하지만 대시보드가 처음 로드될 때 어떻게 채워질까요?

대시보드에 PubNub 저장 및 재생 API 활용하기

PubNub는 전송된 각 메시지의 기록을 보관하며, 개발자가 저장 및 재생(기록) API를 통해 저장된 메시지에 액세스할 수 있는 방법을 제공합니다. 웹 대시보드의 더 깊은 곳에 다음 코드가 표시됩니다:

var displayMessages = function(ms) { ms[0].forEach(displayMessage); };

pubnub.history({
  channel: 'pubnub-git',
  callback: displayMessages,
  count: 100
});

이것은 pubnub-git 채널을 통해 전송된 마지막 1,000개의 메시지를 검색하는 요청입니다. 따라서 해당 메시지가 전송되었을 때 웹 대시보드가 오프라인 상태였더라도 해당 메시지를 검색하고 해당 데이터를 사용하여 마치 영구적으로 온라인 상태인 것처럼 대시보드를 채울 수 있습니다.

이 기능은 셀룰러 네트워크의 모바일 앱이나 커넥티드 카처럼 연결이 간헐적이거나 불안정한 디바이스를 다룰 때 특히 유용합니다. PubNub 네트워크 덕분에 시각화 대시보드에는 애플리케이션의 상태를 저장하기 위한 백엔드가 필요하지 않습니다.

나만의 GitHub 대시보드 구축

Github 대시보드 구축을 시작하려면 github.com에서 Git Commit UI 리포지토리를 포크하고 설정 지침을 위한 README를 따르세요. 오픈 소스 커뮤니티 협업의 일환으로 풀 리퀘스트를 환영합니다.

실시간 대시보드의 향후 트렌드 및 발전 방향

실시간 대시보드 및 관련 기술의 최신 동향과 발전을 주시하는 것은 매우 중요합니다. 여기에는 실시간 데이터 전송을 위한 웹 소켓, 즉각적인 인사이트를 얻기 위한 알림 사용, 다양한 워크플로우에서 실시간 대시보드 사용 등이 포함됩니다.

PubNub 체험하기

PubNub은 수많은 고객이 실시간 애플리케이션으로 성공을 거두는 데 도움을 주었습니다. 예를 들어, LinkedIn의 실시간 알림 시스템...

설정하기

PubNub 계정에 가입하면 PubNub 키에 무료로 즉시 액세스할 수 있습니다. PubNub 계정에서 사용할 수 있는 최신 기능은 다음과 같습니다...

시작하기

사용 사례나 SDK에 관계없이 포괄적인 PubNub 문서를 통해 즉시 시작하고 실행할 수 있습니다.

PubNub은 사용자 경험을 향상시킬 수 있는 사용자 친화적인 플랫폼을 제공합니다. 저희 서비스는 원활한 통합 프로세스를 위해 개발자를 염두에 두고 설계되었습니다.

여러분의 실시간 개발 여정을 더욱 원활하고 효율적으로 만들어드리겠습니다. 페이로드 URL을 설정하고 시작하세요!

블로그 게시물 전체에서 공식 문서와 공신력 있는 출처를 참조하여 정보의 유효성을 확인할 수 있습니다.

펍넙이 어떤 도움을 줄 수 있나요?

이 문서는 원래 PubNub.com에 게시되었습니다.

저희 플랫폼은 개발자가 웹 앱, 모바일 앱 및 IoT 디바이스를 위한 실시간 인터랙티브를 구축, 제공 및 관리할 수 있도록 지원합니다.

저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 월간 8억 명의 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한 또는 트래픽 폭증으로 인한 지연 문제를 걱정할 필요가 없습니다.

PubNub 체험하기

라이브 투어를 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.

설정하기

PubNub 계정에 가입하여 PubNub 키에 무료로 즉시 액세스하세요.

시작하기

사용 사례나 SDK에 관계없이 PubNub 문서를 통해 바로 시작하고 실행할 수 있습니다.