Wyróżniony wykres | Opieranie się na Ethereum za pomocą GraphQL, The Graph i Next.js

Opublikowane ponownie przez Plato

Obserwuje: 0

Korzystanie ze skalowania w celu rozwiązania problemu zatorów w Ethereum jest niewątpliwie pomocne w przypadku szerszego zastosowania. Jak wszyscy wiemy, drogie transakcje w łańcuchu i zwiększone doświadczenie użytkownika to powody, dla których sieć Ethereum wzywa do skalowania. Optimistic Rollup i ZK Rollup to dwa wyróżniające się rozwiązania warstwy 2. Optimistic Rollup jest kompatybilny z EVM przy niskich kosztach technicznych, podczas gdy ZK Rollup ma krótszy czas wycofania i niższy koszt obliczeń w łańcuchu. zkSync, jako pakiet zbiorczy ZK zgodny z EVM, wykazuje dużą dynamikę.

Oto już trzeci warsztat prowadzony przez The Graph z serii w Hackaton IOSG Ventures i Chainlink Layer 2, był transmitowany na żywo 18 lipca o 8:00. Ten koncert spotkał się z ogromnym wsparciem i polubieniami od naszej kochanej publiczności! Nie martw się, jeśli przegapiłeś film, kliknij i obejrzyj powtórkę poniżej! Wszystkim, którzy chcieliby przeczytać i dowiedzieć się więcej na ten temat, udostępniamy także pełne podsumowanie w formie tekstowej.

- Zacznijmy!

Więc tak, jestem na plażyh. To właśnie tam będę transmitować strumieniowo, z plaży. Bo to właśnie robimy. Pracujemy gdzie chcemy, a dziś pracuję z plaży. Będę stąd transmitować. Mógłbym zrobić sobie małą przerwę w trakcie streamowania, wziąć coś do picia, jedzenia czy czegoś, bo będziemy tu około godziny.

Ale dzisiaj robimy wielką premierę The Graph. Właśnie o tym będę dzisiaj mówił. Mamy całkiem fajny projekt, który będziemy rozwijać. Opowiem o niektórych pomysłach związanych z rzeczami, które tutaj zrobiliśmy, więc jesteśmy tym bardzo podekscytowani. Jestem w tym zespole dopiero od trzech miesięcy, ale oni pracowali nad tym od jakichś czterech lat. Zatem niektóre z pomysłów, które dziś wychodzą na rynek, zostały przemyślane, ale były to pomysły teoretyczne, a nawet koncepcje rzucone w branży, ale tak naprawdę nikt nie wdrożył czegoś tak skomplikowanego i wszechstronnego z interfejsem użytkownika, z którego ludzie mogą korzystać wchodzić w interakcję na wielu różnych poziomach. Jesteśmy tym bardzo podekscytowani.

To, co dzisiaj zrobię, to po prostu pokazanie, jak zbudować interfejs API używany w interfejsie użytkownika. Opowiem trochę o sieci i o tym, jak możesz w niej uczestniczyć na kilka różnych sposobów. Dzisiaj będziemy pisać trochę kodu. Więc głównie o to tu chodzi. Jeśli nie widziałeś premiery, pozwolę sobie zamieścić link do niej tutaj. Sprawdź, czy możesz sprawdzić część wykonanej pracy, czytając post na blogu.

Tak, ktoś wspomniał o konferencji Ethereum w Paryżu. Nie mam biletów, ale i tak tam będę. Więc nawet jeśli jesteś w Paryżu i nie przyjedziesz na tę konferencję, zadzwoń do mnie. Chętnie się spotkam i przyniosę trochę gadżetów Graph. Przynoszę koszulki i przynoszę naklejki. Postawię ci drinka albo postawię ci kawę. Może nawet postawię ci obiad. Będę tam przez około tydzień, więc nie mogę się doczekać.

Udostępniłem link do premiery. Wprowadziliśmy na rynek dwa nowe produkty lub dwie nowe funkcje The Graph. Jedno z nich nazywa się Subgraph Studio i umożliwia programistom takim jak ja tworzenie otwartych interfejsów API na podstawie otwartych zbiorów danych. Potrafię stworzyć własny interfejs API, co oznacza, że mogę po prostu powiedzieć: „Hej, chcę, żeby ktoś w sieci zaczął indeksować dane z mojego interfejsu API”. I mogę zacząć zarabiać pieniądze w oparciu o kanały, które jestem w stanie wygenerować. Zasadniczo potrafię znaleźć interfejsy API innych osób i mogę na nich sygnalizować, a także zarabiać na nich. Mogę być inżynierem oprogramowania, który po prostu uruchamia węzeł, indeksator. Mogę w ten sposób zarabiać. Istnieje więc wiele sposobów zarabiania pieniędzy.

Najbardziej interesuje mnie w tym to, że moim zdaniem będzie to stanowić zachętę w sposób umożliwiający ludziom zarabianie pieniędzy. To najlepsza zachęta. To jedna z zachęt, która motywuje mnie najbardziej. Głównie dlatego, że dorastałem, powiedziałbym, biedny lub coś w tym rodzaju, ale powiedziałbym, że przez pierwsze dziesięć lat mojego życia prawie nie zarabiałem żadnych pieniędzy.

Oprogramowanie mi to umożliwiło. Widziałem wielu innych ludzi na całym świecie, wielu ludzi, którzy faktycznie są częścią protokołu The Graph, na całym świecie i od samego początku uczestniczyli w tym, że dzięki temu mają wolność finansową. Dlatego jestem bardzo podekscytowany tą zachętą.

Myślę, że to jedna z najfajniejszych rzeczy, jaką każdy może wpaść na pomysł, korzystając ze wszystkich otwartych zbiorów danych, które są dostępne w różnych typach sieci, które obsługujemy. Obecnie jest to głównie blockchain i zdecentralizowane źródła danych. Jednak pomysł na przyszłość jest taki, że nasze indeksatory będą mogły obsługiwać dowolny typ otwartego zbioru danych. Wiele osób dzisiaj sobie z tym radzi, szukając zbiorów danych, które chcą zindeksować i wbudowując je w jakiś rodzaj istniejących sieci. Możliwe jest również samodzielne zapisanie tych transakcji i indeksowanie ich w interfejsie API Graph.

Powiedziawszy to, wymyślmy fajny pomysł na aplikację lub interfejs API. Właśnie złożyłem to API w całość. Wdrożyłem to. Jest teraz w interfejsie użytkownika. Możesz to sprawdzić w panelu kontrolnym. Każdy, kto chce z niego skorzystać, może teraz zbudować na nim interfejs. Mogą używać inteligentnych kontraktów jako warstwy transakcji, tak jak robili to wcześniej, ale teraz mogą wysyłać zapytania do kontraktów w swoim interfejsie użytkownika. Zamierzamy zbudować interfejs użytkownika, który to pokaże. Dzięki temu każdy, kto chce z tego skorzystać, będzie mógł z tego skorzystać, a wszelkie pieniądze, które zostaną za to pobrane, nie będą teraz trafiać do ogromnych firm, takich jak Google i AWS. Oczywiście osoby zarządzające infrastrukturą mogą nadal na nich pracować, ale rzeczywiste zyski trafiają do deweloperów. Dla mnie to także jedna z najfajniejszych części.

Biorąc to pod uwagę, jest to tylko ogólny przegląd. Jeśli śledziłeś The Graph, już coś z tego zrozumiałeś. Ale myślę, że wielu ludzi, znanych ci pracowników górników, to twórcy stron internetowych, którzy działają w tradycyjnej przestrzeni internetowej. Wciąż dość wczesne dni. Chociaż zaczynamy trafiać na naprawdę szalone i interesujące liczby, ostatnio trafiliśmy na ponad miliard zapytań w ciągu jednego dnia. Rośniemy na naprawdę szybkim klifie. Tego wykładniczego rodzaju wzrostu szukasz, gdy dołączasz do firmy lub chcesz wcześnie rozpocząć pracę z technologią. Nie chodzi tu o rzeczywistą całkowitą liczbę dzisiaj, ale o wzrost, ponieważ za rok, jeśli utrzymasz ten sam wzrost, zmiażdżysz go. Więc to mnie interesuje.

Mając to na uwadze, rozpoczynam budowę. Aby to zrobić, udostępnię mój ekran. Zróbmy to dalej. Pójdę dalej i przygotuję komputer. Aby zacząć to robić, zamknę niektóre z otwartych aplikacji. Zacznij udostępniać mój ekran. W porządku, zaczynamy. To jest strona Graph. Prawdopodobnie już to widziałeś. W tym filmie zasadniczo chcę pokazać, jak zbudować interfejs API i wdrożyć go w nowym interfejsie użytkownika. Studio tutaj. Następnie utwórz przód i wierzch za pomocą Next.js. To właśnie zamierzamy zrobić.

Na początek zamierzam utworzyć w terminalu puste okno. Aby to zrobić, muszę najpierw zwiększyć rozmiar czcionki, ponieważ jest ona naprawdę mała. Podniesiemy to do około trzydziestu trzech. W porządku. Jestem w oknie terminala, w którym zamierzam utworzyć nowy podgraf. Myślę, że jeśli spojrzysz na Eksploratora, który również wprowadzamy dzisiaj, zobaczysz niektóre aplikacje. Niektóre interfejsy API znajdują się już w zdecentralizowanej sieci. PoolTogether jest naprawdę popularną platformą. Uniswap oczywiście robi miliardowe transakcje. Całkiem duże aplikacje już tu są. To są nasi partnerzy startujący, ludzie, którzy wystartowali dzisiaj. Ale jeśli spojrzysz na jeden z tych interfejsów API, być może znasz niektóre z aplikacji, którymi sterują. Wiele z nich to aplikacje finansowe. Dla mnie bardziej interesujące do celów demonstracyjnych są właściwie dzieła sztuki, elementy wizualne. Zamierzam stworzyć platformę handlową NFT, która będzie to wizualizować. Ponieważ uważam, że dane finansowe są trudniejsze do wizualizacji. Takie demo interfejsu użytkownika nie jest interesujące.

Zasadniczo zamierzam zbudować podgraf. Więc idziemy do Legacy Explorer, a ja do Zory. Zobaczysz kilka kontraktów Zora Smart, które zostały wdrożone dla Subgraphs. Następnie, używając tych danych, np. treści adresu URL, możesz zobaczyć nieco bardziej interesujące dane. Zamawiam więc według identyfikatora, a potem coś stąd pobieramy. Kiedy masz takie rzeczy, jest trochę fajniej, jak filmy i inne rzeczy, które możesz faktycznie pokazać. To się teraz nie ładuje. Zobaczmy tutaj. Może uda mi się znaleźć zdjęcie. No to jedziemy. Takie rzeczy. Właśnie to będziemy robić.

Sprawdzę tylko, czy brakuje mi jakichś pytań. Powinienem mieć. Odezwę się i odpowiem na pytania w wolnej chwili.

To jest nagrywane. Będzie później dostępny na moim Twitchu i YouTube. Zasadniczo chcę budować dla Zory. Więc zora.co i to jest ich strona internetowa. Mają mnóstwo NFT, które ludzie kupują i sprzedają. Właśnie do tego chcę zbudować interfejs użytkownika. Kolejnym ciekawym rozwiązaniem jest Fundacja. Jeśli wejdziesz na stronę Foundation.app, to też jest naprawdę fajne. Wiesz, że możesz zobaczyć aktualną ofertę, więc ta kosztuje około czterech tysięcy dolarów lub dwóch Eth. Ten jest wart jakieś pięć tysięcy dolarów. Zatem ta Fundacja i Zora pomogłyby nam uzyskać przyzwoitą ilość akcji.

Używam Zory. Zora ponownie jest rynkiem NFT. Stworzymy podgraf, a następnie stworzymy dla niego interfejs użytkownika. Na początek przejdę do Subgraph Studio. Pójdę dalej i utworzę nowy podgraf. To będzie Zoralivestream. I zobaczcie, mamy już nasz Subgraph dostępny w Studio. Możemy teraz w zasadzie tworzyć i pisać kod lokalnie. Następnie wdrożymy tę rzecz i przeniesiemy ją tutaj, do rzeczywistego pulpitu nawigacyjnego Studio. Mamy tutaj instrukcje, jak to zrobić, ale najlepsze instrukcje będą dostępne na nowej stronie internetowej. Nowe dokumenty, które mamy. Możesz także przejść do bloga Budowanie subgrafów za pomocą Subgraph Studio. Właściwie to będzie zasadniczo to, przez co będziemy dzisiaj przechodzić. Właściwie to osobiście napisałem ten post na blogu. To będzie interfejs API, który dzisiaj tworzymy. Powinien przeprowadzić Cię przez wszystkie etapy.

Więc już to stworzyliśmy. Teraz mamy naszego ślimaka. Status to UNDEPLOYED, co oznacza, że nie jesteśmy w tej chwili wdrożeni. Mamy nasz klucz do wdrożenia. Mamy instrukcje instalacji, Graph CLI i tym podobne. Tego właśnie będziemy używać. Teraz możemy zacząć pisać kody. Teraz, gdy mamy już to miejsce, możemy wrócić do naszego CLI.

Zamierzam zainstalować CLI. Zakładam, że to już jest zainstalowane. Po prostu zainstaluję go ponownie, a kiedy już to zainstaluję, będziemy mieli plik binarny. I moglibyśmy zacząć używać interfejsu CLI The Graph. Podczas instalacji przejdę przez ten samouczek. To jest w zasadzie znowu to, przez co przechodzę. To pokazuje, jak się przygotować. Już to przeoczyłem. Stworzyłem mój Subgraph i teraz jesteśmy w tym miejscu, gdzie instalujemy. Teraz, gdy mamy zainstalowany interfejs CLI Graph, powinieneś móc po prostu uruchomić graph. I zobacz, że plik binarny podaje ci instrukcje, wykres — pomoc poda ci kilka typowych poleceń. Chcemy wykonać init, więc chcemy zainicjować Subgraph. Zasadniczo polega to na utworzeniu wszystkich szablonów potrzebnych do interfejsu API. To będzie polecenie, które uruchomimy graph init. Tutaj przekazujemy mu kilka flag. Podajemy więc nazwę kontraktu. Więc to będzie to, co nazwiemy tym źródłem danych. A dla nas będzie to token, bo będą to zasoby cyfrowe wykorzystujące standard OpenZeppelin ERC721, czyli token niewymienny. Zatem Token ma wiele sensu.

Powiemy „index-events”, co oznacza, że zajrzymy do interfejsów API lub binarnych interfejsów aplikacji, co stanowi inteligentny kontrakt Ethereum. Zasadniczo interfejs API, którego można używać do interakcji z umową. Zajrzy do ABI i pobierze faktycznie dopuszczone zdarzenia, a następnie utworzy dla nas lokalnie szablonowy kod. Więc to tylko pomocnik do napisania dla nas kodu w oparciu o zdarzenia.

Powiedzieliśmy również, że chcemy używać Subgraph Studio, ponieważ teraz mamy zarówno usługę hostowaną, jak i Studio. Ze studia będzie korzystać większość przyszłych aplikacji, ale nadal chcemy wspierać starą usługę. Określamy studio, a następnie możemy również określić inteligentną umowę, z którą współpracujemy. Powiedziałem więc, że używamy Zory. Ta liczba to inteligentne kontrakty Zora. Jak byś to zdobył? Jeśli przejdziesz do dokumentacji programisty Zara, możesz ją tam pobrać.

Mieli tutaj link do inteligentnych kontraktów. Oczywiście możesz jednak udać się do Etherscan. Etherscan ma tam listę inteligentnych kontraktów prawie wszystkich. Można to znaleźć na inne sposoby, ale powiedziałbym, że wiele umów ma adres publiczny. W tym przypadku Zora posuwa się nawet do stworzenia witryny z dokumentacją dla programistów. Fundacja też to robi, więc Fundacja też jest fajna. Fnd.dev ma wszystkie swoje podgrafy. Mają nawet własny Subgraph, który obsługują. Myślę, że Zora też. Tak, mają swój własny subgraph. Możesz więc użyć istniejącego Subgraphu, ale w zasadzie budujemy go samodzielnie od zera.

Stąd w pewnym sensie pochodzi ta umowa. Umowy są właśnie tutaj. Skoro już to zrobiliśmy, możemy po prostu nacisnąć Enter i wszystko powinno działać. Aby przeprowadzić nas przez kolejne kroki, tak naprawdę potrzebujemy jeszcze tylko jednej rzeczy – nazwy Subgraph. Mogę po prostu skopiować to z ślimaka tutaj, a wtedy wszystkie te rzeczy moglibyśmy po prostu przyjąć wartości domyślne. Spowoduje to utworzenie dla nas całego tego standardowego kodu lokalnie.

Teraz powinienem móc wejść do tego nowego katalogu i otworzyć edytor tekstu. W porządku, spoko. To jest nasz szablonowy kod, dosłownie wszystko, czego naprawdę potrzebujesz, aby opublikować podgraf. Składa się z trzech pozostałych głównych części. Jeśli rozumiesz te trzy główne elementy, możesz zbudować interfejs API na dowolnej sieci, którą obsługujemy. Masz schema.graphql, który jest schematem wykresu. Moglibyśmy to wszystko na razie usunąć. Mamy nasz plik subgrph.yaml. Ten subgrph.yaml to Twoja konfiguracja. Domyślnie otrzymujesz około trzydziestu pięciu linii kodu lub po prostu będzie trochę mniej, ale plik subgrph.yaml jest w zasadzie prawie podobny do infrastruktury kodu. Mówimy osobie indeksującej, że wdrażamy ten interfejs API, aby dowiedzieć się, co zrobić ze źródłami danych, z którymi będziemy pracować. Za chwilę przyjrzymy się temu bliżej.

Ostatnią rzeczą, którą masz, jest plik src/mapping. To są szablony mapowania. Jeśli kiedykolwiek pracowałeś z czymś takim jak AppSync lub nawet The GraphQL, prawdopodobnie w przeszłości pracowałeś z szablonem mapowania. Zatem one po prostu definiują... są to zasadniczo funkcje obsługi. Masz wydarzenia i chcesz sobie z nimi poradzić. W naszym przypadku możemy mieć zdarzenie, w którym ktoś miał zamiar wykonać token, a my chcemy obsłużyć te dane. Chcemy przechowywać to w naszym lokalnym, własnym API, będziemy to przechowywać i udostępniać. Zatem mapowania. Wiele z tych pomysłów przeniosło mnie bezpośrednio z dni, gdy GraphQL pracował w przestrzeni Web2 przy tradycyjnych aplikacjach i innych rzeczach. To są najważniejsze rzeczy: plik schema.graphql, subgraph.yaml i mapowania.

Pierwszą rzeczą, którą się zajmiemy, jest schemat GraphQL. Skopiuję i wkleję niektóre elementy dwóch typów, z którymi pracujemy. Jeden to typ Token, a drugi to typ Użytkownika.

Jeśli więc spojrzymy na Zorę, zobaczymy, że mamy te NFT i są one powiązane z adresem użytkownika. Chcemy więc mieć możliwość przechowywania tych informacji, ale chcemy także przechowywać metadane dotyczące samego tokena. Dlatego mamy te dwa byty.

W przypadku tokena mamy po prostu wszystkie metadane, które chcemy przechowywać. Możemy uzyskać te metadane z rzeczywistego wydarzenia, nad którym będziemy pracować. Lub gdybyśmy naprawdę chcieli, moglibyśmy faktycznie skorzystać z osobnego inteligentnego kontraktu lub źródła danych i uzyskać dane dla danego typu. Możemy też przejść bezpośrednio do samego węzła Wykres i również uzyskać dane.

Gdybyśmy naprawdę chcieli, moglibyśmy faktycznie skorzystać z osobnego inteligentnego kontraktu lub źródła danych i uzyskać dane dla danego typu, albo też moglibyśmy przejść bezpośrednio do samego węzła The Graph i również uzyskać dane.

Tak więc w mapowaniach możesz zasadniczo pracować z różnymi źródłami danych, które będą wypełniać typy, które tutaj zdefiniowałeś i jeśli kiedykolwiek pracowałeś z GraphQL.

Prawdopodobnie rozumiesz, że wykrzyknik oznacza, że jest to pole wymagane, a jeśli nie jest to wykrzyknik, oznacza to, że jest to pole opcjonalne lub dopuszczające wartość null, dlatego będziemy przechowywać identyfikator tokena, identyfikator URI treści, identyfikator URI metadanych, utworzony znacznik czasu, twórca i właścicielem, mamy typ użytkownika, który zasadniczo będzie miał relację jeden do wielu, więc użytkownik ma wiele tokenów, które tutaj utworzył, a następnie ma wiele tokenów, które kupił, więc użytkownik może być twórcą lub konsumentem oraz sposobem, w jaki tworzymy relacje lub korzystamy z tych dyrektyw.

A jeśli kiedykolwiek korzystałeś z czegoś takiego jak Amplify i wielu innych instrukcji GraphQL, mogłeś widzieć coś takiego, gdzie masz dyrektywę i w tym przypadku chcemy powiedzieć, że chcemy, aby to utworzone pole pochodziło od twórcy tutaj, co to adres, więc adres byłby adresem portfela, a wtedy w zasadzie dałoby nam to możliwość posiadania relacji pomiędzy tokenem a użytkownikiem oraz użytkownikiem i samym tokenem, lub powiedziałbym, że tablicą tokenów.

W porządku, biorąc to pod uwagę, możemy to zapisać i mamy nasz plik subgraph.yaml, więc tutaj dokonamy kilku zmian, ponieważ mamy już adres ustawiony podczas tworzenia tego pliku. Następną rzeczą, którą chcemy zrobić, jest ustawienie startBlock. starkBlock w zasadzie powie indeksatorowi, od czego zacząć indeksowanie tych danych, ponieważ jeśli wdrożysz je w niezmienionej postaci, zacznie się od bloku genezy łańcucha bloków, więc przejdzie do pierwszej transakcji w Ethereum i przeszedł od co jest czasochłonne, więc zamiast tego możemy w zasadzie ustawić startBlock, aby w przypadku startBlock można było przejść do samej inteligentnej umowy.

Zobaczmy tutaj. Myślę, że jest to sama umowa, więc jak ją znaleźć, aby móc przejść do Transakcji. Możesz przejść do ostatniej transakcji i to jest właśnie tutaj, więc jest to pierwszy blok startowy, o którym powiedzielibyśmy, że jest to dosłownie blok, którego tutaj używamy.

Teraz dla encji jest to kolejny krok, który chcemy wykonać. Będą one pasować do encji GraphQL, więc mamy token i mamy użytkownika. Ostatnią rzeczą, którą chcemy zrobić, to zająć się eventHandlers trzema zdarzeniami, które mamy z którym będę pracować, zostaną przeniesione. To zdarzenie jest uruchamiane za każdym razem, gdy tworzony jest token lub jest przesyłany token. Więc jeśli utworzę token, to zdarzenie zostanie wywołane, jeśli przekażę go komuś innemu, to zdarzenie zostanie uruchomione w ten sposób to dobry sposób na śledzenie wszystkich istniejących tokenów, a następnie pozostałe dwa moduły obsługi będą obsługiwać aktualizacje, więc jeśli zmienię metadataURI, zmienię tokenURI, mogę to śledzić tutaj.

Będą więc wywoływać funkcje znajdujące się w naszych mapowaniach o nazwach handleTokenMetadataURIUpdated, handleTokenURIUpdated i handleTransfer i to wszystko.

Możemy teraz wrócić do naszego interfejsu CLI. Moglibyśmy chcieć napisać nasze mapowania, aby móc pisać nasze mapowania. Właściwie mieliśmy bibliotekę o nazwie GraphTS, która jest biblioteką maszynopisu Graph, którą obsługujemy razem z CLI przy użyciu tej biblioteki, możesz rozmawiać bezpośrednio z samym blockchainem, możesz rozmawiać z Ethereum, ale możesz także rozmawiać z węzłem The Graph, jeśli masz już tam zapisane jakieś dane i chcesz je odzyskać, możesz z nim porozmawiać.

Właściwie używamy The Graph CLI do generowania dużej ilości tego kodu, co znacznie ułatwia pracę nad wygenerowaniem tego kodu. Jedyne, co musimy zrobić, to uruchomić kodgen graficzny. Spowoduje to wykonanie kombinacji rzeczy, sprawdzenie naszego schematu GraphQL, a także ABI dla inteligentnego kontraktu. Następnie wygeneruje szereg funkcji i typów, których będziemy mogli użyć, aby typy zostały pomyślnie wygenerowane.

Powinniśmy móc przejść do wygenerowanego folderu i zobaczyć wygenerowane elementy, dwie klasy, które powinniśmy mieć: token i user, więc dobrze, że nie będziemy musieli aktualizować tego ani niczego innego, po prostu pokażemy, co to robi następną rzeczą, którą zrobimy, będzie otwarcie mapowań.

Po prostu pójdę dalej i usunę te wszystkie rzeczy. Zamierzamy zaimportować rzeczy, których chcemy użyć, więc przejdę do wpisu na blogu tutaj. Ten kod nie jest zbyt dobrze sformatowany, ale sformatuję go za chwilę. Pierwsze rzeczy, które importujemy, pochodzą z folderu tokenów, który znajduje się w wygenerowanym folderze. TokenURIUpdatedEvent i TransferEvent to zdarzenia, które pozwalają nam zachować bezpieczeństwo typu. Umowa tokenowa, o której mowa tutaj, to Token as TokenContract. Jest to klasa, która pozwala nam na interakcję z rzeczywistym inteligentnym kontraktem, dzięki czemu możemy wykonywać połączenia z inteligentnym kontraktem za pomocą tego, a następnie Tokena i Użytkownika. Myślę, że są to klasy, które pozwalają rozmawiać z węzłem The Graph, więc zasadniczo oznacza to, że jeśli przechowuję coś jako indeksator, chcę odzyskać te dane. Mogę tutaj użyć tych klas. Mamy trzy funkcje, z którymi musimy sobie poradzić, więc handleTokenMetadataURIUpdated, handleTokenURIUpdated handleTransfer, więc musimy mieć w zasadzie trzy funkcje obsługi w naszych mapowaniach, więc największą z nich jest handleTransfer. Jest to funkcja, która zajmie się wybiciem lub przeniesienie tokena, więc mając to na uwadze, musimy tutaj zająć się kilkoma różnymi przypadkami.

Musimy sobie poradzić, jeśli token nigdy wcześniej nie był tworzony, ale poradzimy sobie również, jeśli został już utworzony, prawda, ponieważ jeśli jest wybijany, oznacza to, że jeszcze go nie ma, jeśli jest przenoszony na kogoś innego, oznacza to, że tam jest, więc Pierwszą rzeczą, którą możemy zrobić, to w zasadzie użyć tutaj Tokena z wygenerowanego kodu, aby najpierw zajrzeć do istniejącego węzła, więc po prostu wywołujemy tę bazę danych. Jeśli ten token istnieje, zwróć go. Jeśli nie, zamierzamy go utworzyć, a następnie tutaj po prostu ustawiamy kilka metadanych, takich jak twórca, tokenID i utworzonyAtTimestamp. Następnie wywołamy sam inteligentny kontrakt, ponieważ w takim przypadku otrzymamy tylko określone dane, ale możemy oddzwonić do inteligentnego kontraktu, aby uzyskać inne dane, więc z inteligentnego kontraktu potrzebujemy treści URI i metadanych URI, więc tutaj nazywamy inteligentny kontrakt, tutaj dodajemy dodatkowe pola do tego obiektu

Mamy token, dodajemy twórcę, tokenID i createAtTimestamp. Istnieją również inne informacje dotyczące zawartości. Następnie aktualizujemy właściciela lub ustalamy właściciela, być może dlatego, że może to być zupełnie nowy token bez właściciela, a następnie zapisujemy go w węźle The Graph. Następnie robimy to samo z użytkownikiem, jeśli użytkownik istnieje, ładujemy użytkownika, a jeśli nie, tworzymy dla użytkownika dwie ostatnie funkcje, których potrzebujemy lub do obsługi handleTokenURIUpdated i obsługi TokenContentURIUpdated, więc tokenURIUpdated po prostu pobiera token, a następnie aktualizuje contentURI i zapisuje go. Drugi, który mamy, to TokenMetadataURIUpdated, więc nie mamy jeszcze tego zdefiniowanego, więc zamierzam to zrobić.

Po prostu skopiuję, jak to wydarzenie faktycznie się odbędzie. Github Copilot wykonuje tam dla mnie trochę pracy, więc mamy to zdarzenie tokenMetadataURIUpdated. Chcemy ustawić ten metadataURI. Myślę, że wszystko w porządku, więc teraz napisaliśmy nasze mapowania. Mamy trzy funkcje, z którymi mamy do czynienia handleTransfer, handleTokenURIUpdated i tokenMetadataURIUpdated, a następnie mamy tutaj nasz Subgraph, który definiuje te zdarzenia. Myślę, że jesteśmy gotowi wdrożyć tę rzecz.

Chcę więc przejść do interfejsu CLI i uruchomić wdrażanie wykresu i tutaj możemy zdefiniować studio, więc powiemy: dash dash studio. Następnie chcę przejść dalej i przekazać nazwę podgrafu, która jest tutaj.

Nadam mu etykietę wersji punktu zerowego 1 i och, muszę iść dalej, a najpierw pozwólcie, że pójdę dalej i wykreślę wykres auth dash dash studio. Mogę tu zdobyć klucz do wdrażania, OK, więc powinien zostać wdrożony. Jeśli więc wygląda to dobrze, powinniśmy być gotowi wrócić do naszego pulpitu nawigacyjnego, który, jak widać, został już zaktualizowany o plac zabaw GraphQL. A teraz możemy kontynuować i zacząć uruchamiać kilka zapytań, a następnie przeniesiemy to do naszej następnej aplikacji JS. Możemy więc przekazać pewne argumenty, takie jak OrderDirection, malejąco, a następnie może OrderBy createAtTimestamp i wtedy już zaczniemy widzieć, że niektóre dane wracają. Jeśli spojrzymy na contentURI, zobaczymy, że mamy powracający faktyczny contentURI dla powracającej treści. W porządku, więc nasz podgraf został wdrożony. Jeśli chcemy wiedzieć, jak zadać to pytanie z naszego interfejsu, możemy faktycznie przejść tutaj, aby uzyskać szczegółowe informacje i mamy adres URL zapytania, więc mogę go skopiować. Mógłbym przejść do czegoś w rodzaju pojemnika graphQL. Myślę, że to jest.

Jak widać, możemy również użyć tego bin graphql lub dowolnego z tych różnych interfejsów użytkownika GraphQL. Zatem nasze API działa. To jest adres URL, którego będziemy używać. Teraz możemy przejść dalej i przejść do aplikacji front-end. Chcę więc stworzyć nową, następną aplikację JS. Nazwiemy to jak interfejs Zora. Myślę, że powinno się to tutaj pojawić, a my chcemy zbudować interfejs użytkownika na podstawie tego API, więc zamierzam użyć tylnego wiatru, ponieważ tylny wiatr jest całkiem niezły. Zamierzam zainstalować wszystko, czego potrzebuję do tailwind, następnie zainicjuję projekt tailwind, a następnie przejdziemy do globals.css i zrobimy to .

A teraz jesteśmy gotowi do wyjścia. Zatem w interfejsie użytkownika prawdopodobnie przejdę do pliku Index.js i właśnie nad tym będziemy pracować. Śmiało, usuń cały ten kod tutaj, a rzeczy, których będę potrzebować, to useState i useEffect z React. Prawdopodobnie będę też musiał mieć jakiś kod, do którego mogę się tutaj odwołać. Nie chcę bezpośrednio lubić odniesień, ale chcę w pewnym sensie skorzystać z nich, aby zacząć. Mamy więc getServerSideProps. To będzie miejsce, w którym wywołamy naszą funkcję fetchData, a fetchData wywoła nasze API GraphQL, a następnie pojawi się tutaj jako rekwizyty, a potem po prostu zrobimy console.log w ten sposób, ale może tego nie zrobimy nawet potrzebujemy useState, ponieważ będziemy używać w przyszłym roku, więc możemy po prostu przekazać to wszystko w tych rekwizytach. Więc w pewnym sensie od tego zaczniemy.

Chcę więc dowiedzieć się, jak właściwie wywołać interfejs API GraphQL. Cóż, wiesz, mamy swój wkład tutaj w naszych dokumentach. Mamy też trochę dokumentacji. Wiesz, różnych klientów GraphQL, więc możesz użyć czegoś takiego jak Apollo lub możesz użyć czegoś takiego jak URQL. Myślę, że wybiorę URQL tylko dlatego, że jest trochę mniej kodu. Więc pójdę dalej i zainstaluję URQL i GraphQL, więc mamy już zainstalowane URQL i GraphQL, a ja chcę po prostu powiedzieć, że skopiuję cały ten kod, a potem w pewnym sensie go podzielimy w naszej aplikacji. Mamy więc createClient z urql. Mamy nasz adres URL interfejsu API, adres URL interfejsu API, z którym chcemy pracować, będzie tym interfejsem API. Ten adres URL jest tutaj. W przypadku zapytania chcemy po prostu użyć zapytania, o którym wiemy, że zadziała. Wracamy więc do mojego interfejsu API i po prostu piszemy zapytanie, a następnie je skopiuję i wkleję, a także powiemy, że chcemy uzyskać pierwsze 10.

Oto nasze zapytanie. To będzie nasz klient. Mówimy, że utwórz klienta. Ustawiamy adres URL, a następnie możemy wywołać go dla danych, więc po prostu zróbmy to, a następnie po prostu pocieszmy dane dziennika. Po prostu zwrócimy jak pusta tablica. W porządku, w porządku, więc mamy gotową podstawową funkcjonalność. Możemy to kontynuować. Wygląda więc na to, że muszę zatrzymać inny serwer, który mam uruchomiony, więc localhost 3000, a kiedy to się uruchomi, myślę, że powinniśmy zobaczyć to tutaj wylogowane. Więc proszę bardzo, mamy to. Mamy tam swoje dane, więc mamy data.data.tokens. Mógłbym więc powiedzieć, że zwróć dane.data.tokens, a następnie w naszym interfejsie użytkownika zobaczymy, że mamy nasze tokeny, które powinny się pojawić. W porządku, zaczynamy. Mamy więc 10 żetonów.

Mamy nasz contentURI. Mamy nasze metadaneURI. MetadataURI zawiera takie elementy, jak typ mimeType, nazwa, wersja, opis i tym podobne rzeczy, których możesz użyć w swoim interfejsie użytkownika. To świetnie. Mamy więc w zasadzie całą podstawową funkcjonalność. Teraz musimy tylko stworzyć na jego podstawie jakiś projekt. Jeśli chodzi o kwestie projektowe, a właściwie o jeszcze jedną rzecz, którą być może będziemy musieli rozważyć, to mapowanie samych danych ze względu na sposób, w jaki wracają. Moglibyśmy chcieć to trochę zmienić, więc na przykład jedna rzecz, której nie wiemy bezpośrednio z tych danych, to takie rzeczy jak mimeType, więc aby uzyskać mimeType, który pozwoli nam pokaż to, tak naprawdę musimy wywołać pobieranie, wywołać axios lub niektóre typy żądań HTTP, aby uzyskać te dane JSON. W ten sposób możemy w pewnym sensie wiedzieć, czy jest to obraz, czy wideo, czy gif, jak to wyświetlimy.

Chcemy też tylko tych danych, w każdym razie tych metadanych. Zatem zasadniczo możemy zrobić coś w rodzaju funkcji, która mapuje te dane. Więc powiemy coś w rodzaju data.data.tokens.map, a potem zrobimy coś w rodzaju mapy na wszystkim, a potem wywołamy fetch to kind uzyskać te metadane teraz. Na szczęście stworzyłem już funkcję, która to robi. Dzięki temu nie będziemy musieli lubić chodzić przez to wszystko. Idę do mojego GitHuba. Mam tę funkcję pobierania danych. Zamierzam to po prostu zastąpić tym. Może usuń część pliku console.log. Ok spoko. Zatem ta funkcja w zasadzie będzie mapować wszystkie tokeny i wywołamy żądanie pobrania metadanych, a następnie w pewnym sensie zaktualizujemy typ w oparciu o metadane.

Więc jeśli jest to mp4, chcemy pokazać wideo. Jeśli jest to dźwięk, chcemy pokazać dźwięk. Jeśli jest to obraz, chcemy pokazać obraz, a gdy będziemy mieli nowe, zaktualizowane metadane lub odświeżymy je, chyba że coś tutaj zepsuliśmy, powinniśmy zobaczyć te metadane. Myślę, że zamierzam zaktualizować zapytanie, aby na razie zwrócić pierwsze. Teraz zamierzam zrestartować serwer. W porządku, więc oto nasze tokeny, mamy nasze metadane, mamy nasz opis, mamy nasz typ MIME, mamy naszą nazwę i mamy wersję.

Ostatnią rzeczą, którą chcemy zrobić, to stworzyć rzeczywistą stylizację za pomocą tylnego wiatru i mieć do tego przykładowy interfejs użytkownika, którego będziemy używać. Więc zamierzam to skopiować, opublikuję tweeta i udostępnię wszystkie te rzeczy, i prawdopodobnie umieszczę to również w komentarzach, ale kod do tego, ale nie jest to nic nadzwyczajnego. To po prostu podstawowy CSS wykorzystujący tailwind, ale zrobimy tak — mamy nasze rekwizyty, mamy nasze tokeny, więc jeśli odświeżymy, zobaczymy teraz, że mamy tutaj nasz interfejs użytkownika i co mogę zrobić teraz jest zamiast zwracać jedną, zwiększmy ją z powrotem do około 10. Och, to brzydkie. Och, myślę, że wiem, czego mi brakuje, tęsknię za tym. No to jedziemy. Więc teraz nasz interfejs użytkownika pokazuje, no wiesz, wszystkie różne NFT i najwyraźniej nie wziąłem pod uwagę jakiegoś typu MIME, więc zobaczmy, jaki to typ MIME, lub po prostu może się nie ładować z jakiegoś powodu.

Wygląda na to, że może. OK, wygląda na to, że się ładuje. Wygląda więc na to, że to jest dźwięk. Nie jestem pewien, dlaczego dźwięk nie działa, ale mogę się temu przyjrzeć, ale to rodzaj demonstracji, którą chcieliśmy po prostu pokazać, jak to zbudować, i myślę, że interesującą rzeczą może być co zrobić w tym momencie, jeśli jesteś programistą i chcesz zarabiać pieniądze na jednym ze swoich interfejsów API, myślę, że to jest jak siła posiadania samorządnej aplikacji, która jest dostępna na wolności, a ludzie zasadniczo mogą konkurować ze sobą w oparciu o jakość w celu opracowania najcenniejszych różnych interfejsów API, a ponadto możesz opublikować je w sieci i zacząć zarabiać na opłatach za zapytania. Jeśli więc to opublikujesz, każdy, kto będzie chciał z tego skorzystać, będzie mógł z tego skorzystać, a na podstawie wykorzystania zarobisz pieniądze. Nawet nie musisz nic robić. Po prostu to publikujesz, a potem, jeśli ludzie z tego skorzystają, w zasadzie zarobisz część pieniędzy z wykorzystania, a dzieje się to poprzez zapisanie twoich informacji i transakcji publikacji w blockchainie.

To całkiem interesujące, ponieważ w zasadzie publikujesz, a kiedy już to będzie, zawsze tam będzie, i wiesz, dla mnie to całkiem potężna rzecz, a jeśli chcesz to zrobić, w zasadzie musiałbyś mieć trochę tokenów, więc ja mam trochę tokenów i zasadniczo mogę publikować albo w Rinkeby, albo w głównej sieci. Mogę więc udać się tutaj, do Rinkeby, a tutaj mam kilka testów, śmiało i opublikuję to, wybierz sieć Rinkeby i prawdopodobnie będę musiał coś z tym zrobić, odłącz się od wszystkich tych różnych kont, a następnie połącz się ponownie. Próbujemy tego jeszcze raz. Wygląda na to, że mam problemy z publikowaniem. Muszę sprawdzić, co się z tym dzieje. Wygląda na to, że mam. Z jakiegoś powodu pokazuje, że mam zerowe eth, ale tak nie jest. Och, myślę, że chyba wiem, co muszę zrobić. Pozwól, że rozłączę się, a następnie połączę ponownie. Myślę więc, że zostałem uwierzytelniony przy użyciu niewłaściwego portfela, więc po opublikowaniu pojawi się on w sieci i będę mógł go przetestować, ponieważ jest to sieć testowa Rinkeby, ale jeśli opublikujesz to w sieci głównej, będzie to kiedy ludzie zaczęliby w zasadzie być w stanie płacić, jeśli z tego korzystają.

Zamierzam więc przestać udostępniać swój ekran i zasadniczo zacząć sprawdzać, czy ktoś ma jakieś pytania lub coś w tym rodzaju.

Wywiad ten był bardzo owocny, dzięki Naderowi Dabitowi z The Graph, projektu, który rozwiązuje ten problem za pomocą hostowanej usługi indeksującej dane blockchain. Te indeksy („podgrafy”) można następnie odpytywać przy użyciu standardowego API GraphQL. Mówiąc najprościej, podgrafy przypominają napisane przez programistów indeksy danych dla określonej logiki biznesowej, a po wdrożeniu logika biznesowa będzie na bieżąco aktualizować odpowiednią bazę danych w oparciu o wdrożenie, aby ułatwić programistom wyodrębnienie i wywołanie w dowolnym momencie . Będziemy w dalszym ciągu zapraszać kolejnych gości do udziału, czy to w formie wywiadów, warsztatów, czy w jakikolwiek inny sposób. Mamy nadzieję, że dostarczymy więcej inspiracji tym, którzy są zainteresowani dogłębną eksploracją warstwy 2 i dołożymy wszelkich starań, aby to osiągnąć!

- KONIEC

Nadera Dabita obecnie pracuje w Edge and Node, aby pomóc w budowaniu zdecentralizowanej przyszłości. Wcześniej kierował rzecznictwem programistów w zakresie front-endowych rozwiązań internetowych i mobilnych w Amazon Web Services; koncentruje się na GraphQL, tworzeniu aplikacji internetowych i mobilnych obsługujących wiele platform i chmurę. Tworzył aplikacje i architektury referencyjne na platformie AWS, wykorzystując kombinację GraphQL i technologii bezserwerowych.

Następnie projekty Polygon, Aztec i inne przyniosą nam solidne doświadczenie i świetne spostrzeżenia! Już wkrótce ogłosimy kolejne warsztaty. Czekać na dalsze informacje!

Wielokąt