W dziedzinie tworzenia oprogramowania wykresy C3.js w czasie rzeczywistym oferują skuteczny sposób monitorowania aktywności w organizacji. W przypadku zespołów inżynieryjnych jednym z możliwych do śledzenia wskaźników są zatwierdzenia w serwisie GitHub. Aby zgłębić ten temat, ten wpis na blogu zawiera samouczek, który poprowadzi Cię przez proces wykorzystania interfejsu API GitHub do pobierania i wyświetlania danych zatwierdzeń GitHub na interaktywnym wykresie w czasie rzeczywistym. Wykorzystamy moc HTML, Javascript, CSS i użyjemy PubNub do stworzenia pulpitu nawigacyjnego GitHub i przesyłania strumieniowego danych zatwierdzeń, podczas gdy C3.js pomoże w wizualizacji.

Aby dowiedzieć się więcej o wykresach C3.js w czasie rzeczywistym, przygotowaliśmy świetny samouczek. A teraz do dzieła!

Jak utworzyć pulpit nawigacyjny GitHub w czasie rzeczywistym

Tworzenie pulpitu nawigacyjnego GitHub w czasie rzeczywistym obejmuje łączenie się z różnymi źródłami danych, takimi jak repozytorium GitHub i dbanie o niektóre niezbędne zależności. Należy pamiętać o niezbędnych środkach bezpieczeństwa cybernetycznego, takich jak bezpieczne kodowanie i szyfrowanie danych. Przestrzeganie branżowych protokołów bezpieczeństwa jest koniecznością.

Oto przewodnik krok po kroku:

Dodaj webhook GitHub

Aby skonfigurować webhook, wykonaj następujące kroki:

1. Utwórz repozytorium GitHub lub użyj istniejącego repozytorium git.

2. Kliknij "Ustawienia" po prawej stronie strony.

3. Kliknij "Webhooks" po lewej stronie strony.

4. Kliknij "Dodaj Webhook" w prawym górnym rogu.

5. GitHub poprosi o podanie hasła, wprowadź je.

6. W polu "Payload URL" wpisz: http://pubnub-git-hook.herokuapp.com/github/ORG-NAME/TEAM-NAME. Zastąp ORG-NAME nazwą swojej organizacji, a TEAM-NAME nazwą zespołu kontrolującego repozytorium.

Załaduj wizualny pulpit nawigacyjny

Odwiedźtę stronę. Zobaczysz listę wszystkich commitów wysłanych przez dashboard PubNub - słodkie! Po przesłaniu jednego z commitów do GitHub, w ciągu kilkudziesięciu milisekund na pulpicie commitów GitHub powinna pojawić się wiadomość, a wykresy będą aktualizowane w czasie rzeczywistym.

Jak zbudowaliśmy pulpit nawigacyjny zatwierdzeń Github

Pulpit nawigacyjny jest połączeniem GitHub, PubNub Data Stream Network i wizualizacji wykresów D3 obsługiwanych przez C3.js. Gdy commit jest przesyłany do GitHub, metadane commitu są publikowane w małej instancji Heroku, która publikuje je w sieci PubNub. Hostujemy stronę pulpitu nawigacyjnego na stronach GitHub.

Gdy nasza instancja Heroku otrzyma dane zatwierdzenia z GitHub, publikuje podsumowanie tych danych w PubNub przy użyciu publicznych kluczy publikowania/subskrybowania na kanale pubnub-git. Kanał pubnub-git można monitorować za pośrednictwem naszej konsoli programisty tutaj.

Oto przykładowy ładunek wiadomości:

{ 
  "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"
}

Druga połowa magii dzieje się, gdy dashboard otrzymuje te informacje za pośrednictwem wywołania zwrotnego subskrypcji. Jeśli spojrzysz na źródło dashboardu, zobaczysz ten kod:

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

});

To wywołanie subskrypcji zapewnia, że funkcja JavaScript displayLiveMessage() jest wywoływana za każdym razem, gdy wiadomość zostanie odebrana na kanale pubnub-git. displayLiveMessage() dodaje powiadomienie commit push na górze dziennika i aktualizuje wykresy wizualizacji C3.

Ale zaraz, w jaki sposób pulpit nawigacyjny jest wypełniany po pierwszym załadowaniu?

Wykorzystanie PubNub Storage & Playback API dla pulpitu nawigacyjnego

PubNub przechowuje zapis każdej wysłanej wiadomości i zapewnia programistom sposób na dostęp do tych zapisanych wiadomości za pomocą interfejsu API Storage & Playback (History). Głębiej w pulpicie nawigacyjnym zobaczysz następujący kod:

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

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

Jest to żądanie pobrania ostatnich 1000 wiadomości wysłanych za pośrednictwem kanału pubnub-git. Tak więc, nawet jeśli pulpit nawigacyjny mógł być offline, gdy te wiadomości zostały wysłane, jest w stanie je pobrać i wykorzystać te dane do wypełnienia pulpitu nawigacyjnego tak, jakby był stale online.

Funkcja ta jest szczególnie przydatna w przypadku urządzeń z przerywaną lub zawodną łącznością, takich jak aplikacje mobilne w sieciach komórkowych lub podłączone samochody. Dzięki sieci PubNub nasz pulpit wizualizacji nie wymaga zaplecza do przechowywania stanu aplikacji.

Tworzenie własnego pulpitu nawigacyjnego GitHub

Aby rozpocząć tworzenie własnego pulpitu nawigacyjnego Github, rozwidl repozytorium Git Commit UI na github.com i postępuj zgodnie z README, aby uzyskać instrukcje konfiguracji. Żądania ściągnięcia są mile widziane w ramach współpracy społeczności open source.

Przyszłe trendy i rozwój pulpitów nawigacyjnych w czasie rzeczywistym

Śledzenie ostatnich trendów i rozwoju w zakresie pulpitów nawigacyjnych w czasie rzeczywistym i powiązanych technologii ma kluczowe znaczenie. Obejmuje to websockety do transmisji danych w czasie rzeczywistym, wykorzystanie powiadomień do natychmiastowego wglądu oraz wykorzystanie pulpitu nawigacyjnego w czasie rzeczywistym w różnych przepływach pracy.

Doświadczenie PubNub

PubNub pomógł wielu klientom osiągnąć sukces dzięki ich aplikacjom działającym w czasie rzeczywistym. Na przykład system powiadomień w czasie rzeczywistym LinkedIn...

Konfiguracja

Zarejestruj konto PubNub, aby uzyskać natychmiastowy dostęp do kluczy PubNub za darmo. Najnowsze funkcje dostępne na koncie PubNub obejmują ...

Rozpocznij

Nasze obszerne dokumenty PubNub pozwolą ci rozpocząć pracę w mgnieniu oka, niezależnie od przypadku użycia lub zestawu SDK.

PubNub oferuje przyjazną dla użytkownika platformę, która zwiększa komfort użytkowania. Nasze usługi zostały zaprojektowane z myślą o programistach, aby zapewnić płynny proces integracji.

Jesteśmy tu po to, by ułatwić i usprawnić proces tworzenia aplikacji w czasie rzeczywistym. Skonfiguruj adres URL ładunku i zaczynajmy!

Oficjalna dokumentacja i wiarygodne źródła mogą być przywoływane w całym wpisie na blogu w celu potwierdzenia ważności informacji.

Jak PubNub może ci pomóc?

Ten artykuł został pierwotnie opublikowany na PubNub.com

Nasza platforma pomaga programistom tworzyć, dostarczać i zarządzać interaktywnością w czasie rzeczywistym dla aplikacji internetowych, aplikacji mobilnych i urządzeń IoT.

Podstawą naszej platformy jest największa w branży i najbardziej skalowalna sieć komunikacyjna w czasie rzeczywistym. Dzięki ponad 15 punktom obecności na całym świecie obsługującym 800 milionów aktywnych użytkowników miesięcznie i niezawodności na poziomie 99,999%, nigdy nie będziesz musiał martwić się o przestoje, limity współbieżności lub jakiekolwiek opóźnienia spowodowane skokami ruchu.

Poznaj PubNub

Sprawdź Live Tour, aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.

Rozpocznij konfigurację

Załóż konto PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.

Rozpocznij

Dokumenty PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub zestawu SDK.