Śledzenie zatwierdzeń na pulpicie nawigacyjnym GitHub w czasie rzeczywistym
Published: 2024-05-30 19:31:31

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](https://pubnub.com/blog/building-realtime-live-updating-animated-graphs-c3-js/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl). 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](https://www.pubnub.com/learn/glossary/what-is-a-webhook/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl)" 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.
    

![](https://www.pubnub.com/cdn/3prze68gbwl1/3ClKsiJfxkUjxO6wIEgADI/51ef64eb2a41df60ba14db62255e2c70/Screenshot_2024-05-30_at_3.09.23_PM.png "Github Webhook Settings")

### Załaduj wizualny pulpit nawigacyjny

Odwiedź[tę stronę](https://pubnub.github.io/git-commits-ui/). 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](https://c3js.org/). 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.](https://pubnub.github.io/git-commits-ui/)

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](https://www.pubnub.com/docs/console/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl).

Oto przykładowy ładunek wiadomości:

```js
{ 
  "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:

```js
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)](https://www.pubnub.com/products/pubnub-platform/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl). Głębiej w pulpicie nawigacyjnym zobaczysz następujący kod:

```js
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.

![](https://www.pubnub.com/cdn/3prze68gbwl1/asset-17suaysk1qa1huv/16fe7d9c1c2eb1d0d182c33c37a40f57/687474703a2f2f692e696d6775722e636f6d2f4d524b32304b622e676966.gif?w=700&h=550 "687474703a2f2f692e696d6775722e636f6d2f4d524b32304b622e676966")

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](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) PubNub pozwolą ci rozpocząć pracę w mgnieniu oka, niezależnie od przypadku użycia lub [zestawu SDK](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl).

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](https://www.pubnub.com/blog/tracking-realtime-github-dashboard-commits/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl)

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](https://www.pubnub.com/tour/introduction/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl), aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.

Rozpocznij konfigurację
-----------------------

Załóż [konto](https://admin.pubnub.com/signup/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.

Rozpocznij
----------

[Dokumenty](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub [zestawu SDK](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl).