Udvalgte grafer | Bygger på Ethereum med GraphQL, The Graph og Next.js

Brug af skalering til at adressere Ethereum-overbelastning er uden tvivl nyttigt for større adoption. Som vi alle ved, er dyre on-chain-transaktioner og øget brugeroplevelse grunde til, at Ethereum-netværket opfordrer til skalering. Optimistic Rollup og ZK Rollup er to fremtrædende Layer2-løsninger. Optimistic Rollup er EVM-kompatibel med lave tekniske omkostninger, mens ZK Rollup har kortere tilbagetrækningsvarighed og lavere on-chain computing omkostninger. zkSync, som en EVM-kompatibel ZK Rollup, viser robust momentum.

Odin 3. workshop, præsenteret af The Graph, i serien i IOSG Ventures & Chainlink Layer2 Hackathon, sendte live den 18. juli kl. 8. Denne live har modtaget en masse opbakninger og likes fra vores dejlige publikum! Bare rolig, hvis du gik glip af videoen, klik og se gentagelsen nedenfor! Vi bringer også hele teksten til alle, der gerne vil læse og lære mere om den.

- Lad os komme igang!

Så ja, jeg er ved strandenh. Det er der, jeg skal streame, fra stranden. For det er det, vi gør. Vi arbejder, hvor vi vil, og i dag arbejder jeg fra stranden. Jeg vil streame herfra. Jeg tager måske en lille pause midt i streamingen, snupper noget at drikke eller mad eller noget, for vi skal være her i cirka en time.

Men i dag laver vi en stor lancering af The Graph. Det er det, jeg skal tale om i dag. Vi har et ret fedt projekt, som vi skal bygge ud. Jeg vil tale om nogle af ideerne omkring nogle af de ting, vi har lavet her, så vi er ret begejstrede for dette. Jeg har kun været på dette hold i omkring tre måneder, men de har arbejdet på det her i omkring fire år. Så nogle af de ideer, der lanceres i dag, er gennemtænkte, men de har været teoretiske ideer, endda koncepter, der var blevet kastet rundt i industrien, men ingen har faktisk implementeret noget, der er så kompliceret og så omfattende med en brugergrænseflade, som folk faktisk kan interagere med på en masse forskellige niveauer. Så vi er ret spændte på det.

Det, jeg skal lave i dag, er bare at vise, hvordan man opbygger en API, der bruges på frontend. Jeg vil fortælle lidt om netværket, og hvordan du kan deltage på et par forskellige måder. Vi kommer til at skrive noget kode i dag. Så det er primært det, det handler om. Hvis du ikke har set lanceringen, så lad mig gå videre og linke til den her. Se om du kan tjekke noget af det arbejde, der er blevet udført, bare ved at læse over blogindlægget.

Ja, nogen nævnte Ethereum-konferencen i Paris. Jeg har ikke billetter, men jeg vil stadig være der. Så selvom du er i Paris, og du ikke kommer til den konference, så slå mig op. Jeg ville elske at hænge ud og bringe en masse Graph swag ind. Jeg medbringer T-shirts, og jeg medbringer klistermærker. Jeg køber dig en drink, eller jeg køber kaffe til dig. Jeg kan endda købe aftensmad til dig. Jeg skal være der i cirka en uge, så det glæder jeg mig til.

Jeg delte et link til lanceringen. Det, vi lancerede, var to nye produkter eller to nye funktioner i The Graph. Den ene kaldes Subgraph Studio, som giver udviklere som mig selv mulighed for at bygge disse åbne API'er oven på åbne datasæt. Jeg kan kurere min egen API, hvilket betyder, at jeg dybest set kan sige, hej, jeg vil have, at nogen i netværket begynder at indeksere dataene fra min API. Og jeg kan begynde at tjene penge baseret på de feeds, som jeg er i stand til at generere. Jeg kan grundlæggende finde andres API'er, og jeg kan signalere på dem og tjene penge på dem. Jeg kan være en softwareingeniør, der bare kører en node, en indekser. Jeg kan tjene penge på den måde. Så der er alle slags måder, du kan tjene penge på.

Det, der interesserer mig mest ved dette, er, at jeg tror, ​​at dette vil være incitament på en måde, der giver folk mulighed for at tjene penge. Det er det bedste incitament. Det er et af de incitamenter, der driver mig mest. Hovedsageligt fordi jeg voksede op, vil jeg sige, fattig eller sådan noget, men jeg vil sige, at jeg i de første ti år af mit liv næsten ikke tjente nogen penge.

Så softwaren har gjort det muligt for mig. Jeg har set en masse andre mennesker rundt om i verden, en masse mennesker, der faktisk er en del af The Graph-protokollen over hele verden, som har deltaget siden tidligt, at de har økonomisk frihed på grund af det. Så jeg er ret begejstret for incitamentet der.

Jeg synes, det er en af ​​de fedeste ting, nogen kan komme på en idé ved at bruge alle disse åbne datasæt, der er tilgængelige fra enhver af de forskellige typer netværk, som vi understøtter. Lige nu er det primært blockchain og decentraliserede datakilder. Men ideen i fremtiden er, at vi vil være i stand til at få vores indeksere til at håndtere enhver form for åbent datasæt. Mange mennesker kommer faktisk uden om det i dag med faktisk at finde datasæt, som de vil indeksere og bygge dem ind i en eller anden form for eksisterende netværk. Det er også muligt at skrive disse transaktioner selv og indeksere dem på en Graph API.

Med det sagt, lad os komme med en fed idé til en app eller en API. Og jeg har lige sat den API sammen. Jeg implementerede det. Det er nu på brugergrænsefladen. Du kan tjekke det ud i Dashboardet. Enhver, der vil bruge den, kan nu bygge en frontend oven på den. De kan bruge de smarte kontrakter som et transaktionslag, som de ville før, men de kan nu forespørge på dem på deres frontend. Vi skal bygge en brugergrænseflade, der viser det. Hvis du gør det, kan enhver, der vil bruge det, bruge det, og alle penge, der bliver opkrævet for det, går nu i stedet for at gå til massive virksomheder som Google og AWS. Selvfølgelig kan de mennesker, der driver deres infrastruktur, stadig være på dem, men det faktiske overskud går til udviklerne. For mig er det også en af ​​de fedeste dele.

Så når det er sagt, så er det bare en generel oversigt. Hvis du har fulgt The Graph, forstår du allerede noget af dette. Men jeg tror, ​​at mange af de mennesker, de minearbejdere, du kender, er webudviklere, der er i det traditionelle webhotel. Stadig ret tidlige dage. Selvom vi begynder at ramme nogle virkelig vilde og interessante tal, har de for nylig ramt over en milliard forespørgsler på en enkelt dag. Vi vokser på en virkelig hurtig klippe. Den eksponentielle form for vækst er, hvad du leder efter, når du kommer ind i en virksomhed, eller når du vil komme tidligt ind i en teknologi. Det handler ikke om det faktiske samlede antal i dag, det handler om væksten, for om et år forbliver du på den samme vækst, vil du knuse den. Så det er det, jeg er interesseret i.

Når det er sagt, så går jeg i gang med at bygge. For at gøre det vil jeg dele min skærm. Lad os gå videre og gøre det. Jeg vil gå videre og gøre min computer klar. For at begynde at gøre dette, vil jeg lukke nogle af disse apps, der er åbnet. Begynd at dele min skærm. Okay, der går vi. Dette er The Graphs hjemmeside. Du har sikkert allerede set dette. Det, jeg grundlæggende vil gøre i denne video, er at vise dig, hvordan du kan bygge en API og implementere den til den nye brugergrænseflade. Studiet her. Byg derefter en front ud og oven på den ved hjælp af Next.js. Det er det, vi skal gøre.

For at komme i gang vil jeg gå videre og oprette et tomt vindue i min terminal. For at gøre det skal jeg først øge skriftstørrelsen, for den er virkelig lille. Vi vil støde det op til noget i retning af treogtredive. Okay. Jeg er i mit terminalvindue, hvor jeg vil oprette en ny undergraf. Jeg tror, ​​at hvis du kigger på Explorer, som også er noget vi lancerer i dag, kan du se nogle af apps. Nogle af API'erne er allerede på det decentraliserede netværk. PoolTogether er virkelig populær. Uniswap, selvfølgelig, foretager milliarder af dollars i transaktioner. Så ret store apps er her allerede. Disse er ligesom vores lanceringspartnere, folk der lancerer i dag. Men hvis du ser på en af ​​disse API'er, er du måske bekendt med nogle af disse applikationer, som de driver. Mange af disse er økonomiske applikationer. For mig er de mere interessante til demoformål faktisk kunst, de visuelle ting. Det, jeg skal bygge ud, er, at en NFT-markedsplads skal visualisere det. For jeg synes, at finansielle data er sværere at visualisere. Det er ikke interessant for en brugergrænsefladedemo som denne.

Grundlæggende er det, jeg skal lave, at bygge en undergraf. Så vi går til Legacy Explorer, og jeg går til Zora. Du vil se en masse Zora Smart-kontrakter, der var blevet implementeret til Subgraphs. Så ved at bruge disse data som indholdet af en URL som denne, kan du faktisk se en lille smule mere interessante data. Så jeg bestiller efter ID, så trækker vi noget op herfra. Når du har sådan noget, er det lidt sejere som videoer og ting, som du faktisk kan vise. Dette indlæses ikke lige nu. Lad os se her. Måske kan jeg finde et billede. Sådan der. Sådan noget. Det er det, vi skal gøre.

Lad mig lige tjekke og se, om der er nogle spørgsmål, jeg mangler. Jeg burde have. Jeg vender tilbage og besvarer spørgsmål, når jeg har et øjeblik.

Dette bliver optaget. Den vil være tilgængelig på min Twitch såvel som på min YouTube senere. Det, jeg grundlæggende vil gøre, er at bygge ud til Zora. Så zora.co og dette er deres hjemmeside. De har en masse NFT'er, som folk køber og sælger. Det er sådan set det, jeg vil bygge en brugergrænseflade til. En anden interessant er Foundation. Hvis du går til foundation.app, er dette faktisk også rigtig fint. Du ved, at du kan se det aktuelle bud, så denne er som fire tusinde dollars eller to Eth. Denne koster fem tusinde dollars. Så denne ene Foundation og Zora ville hjælpe os med at få en anstændig mængde handling.

Jeg bruger Zora. Zora er igen en NFT-markedsplads. Vi skal bygge en undergraf, og så skal vi bygge en brugergrænseflade til det. For at komme i gang skal jeg til Subgraph Studio. Jeg vil gå videre og oprette en ny undergraf. Det her bliver Zoralivestream. Og se her, vi har vores Subgraph tilgængelig nu i studiet. Vi kan nu grundlæggende oprette og skrive koden lokalt. Så vil vi implementere denne ting og skubbe den op her til det faktiske Studio Dashboard. Vi har nogle instruktioner her om, hvordan man gør det, men faktisk vil de bedste instruktioner være på den nye hjemmeside. De nye dokumenter, vi har. Du kan også gå til bloggen Building Subgraphs with Subgraph Studio. Det er faktisk det, vi går igennem i dag. Faktisk skrev jeg personligt dette blogindlæg. Dette bliver den API, som vi bygger i dag. Det bør lede dig gennem alle trinene.

Så vi har allerede lavet dette. Vi har nu vores snegl. Status er UNEPLOYED, hvilket betyder, at vi ikke er udstationeret lige nu. Vi har vores implementeringsnøgle. Vi har nogle installationsvejledninger, Graph CLI og den slags. Det er det, vi skal bruge. Nu er vi klar til at begynde at skrive nogle koder. Nu hvor vi har dette sted herovre, kan vi gå tilbage til vores CLI.

Jeg vil gå videre og installere CLI. Jeg tror, ​​at dette allerede er installeret, går jeg ud fra. Jeg vil bare installere det igen, og når det er installeret, har vi det binære. Og vi kunne begynde at bruge The Graph CLI. Mens det installeres, vil jeg gennemgå denne tutorial. Det er i bund og grund igen det, jeg går igennem. Dette viser dig, hvordan du sætter dig op. Det har jeg allerede overgivet. Jeg har lavet min Subgraph, og nu er vi ligesom lige her, hvor vi installerer. Nu hvor vi har The Graph CLI installeret, burde du bare kunne køre graf. Og se, at binæren giver dig instruktioner der, graf - hjælp vil på en måde give dig nogle almindelige kommandoer. Det, vi vil gøre, er at starte, så vi vil initialisere undergrafen. Hvad dette dybest set gør, er at skabe al den kedelplade, du har brug for til din API. Dette vil være kommandoen, som vi kører graph init. Her sender vi det et par flag. Så vi videregiver kontraktnavnet. Så det bliver det, vi kalder denne datakilde. Og for os vil det være token, fordi disse vil være digitale aktiver, der bruger OpenZeppelin ERC721-standarden, som er et ikke-fungibelt token. Så Token giver meget mening.

Vi vil sige indeksbegivenheder, hvilket betyder, at vi vil se inde i API'erne eller de binære applikationsgrænseflader, som er en Ethereum smart kontrakt. En API i det væsentlige, som du kan bruge til at interagere med en kontrakt. Det vil se inde i ABI'en og trække de faktiske hændelser, der er indrømmet, ned, skabe en kedelkode lokalt til os. Så dette er bare en hjælper til at skrive noget kode i det væsentlige til os baseret på begivenhederne.

Vi sagde også, at vi ville bruge Subgraph Studio, for nu har vi både den hostede tjeneste og Studio. Studiet er, hvad alle de fleste fremtidige apps kommer til at bruge, men vi ønsker stadig at understøtte den gamle tjeneste. Vi specificerer studie, og så kan vi også specificere den smarte kontrakt, som vi arbejder med. Så jeg sagde, at vi bruger Zora. Dette nummer her er Zora smarte kontrakter. Hvordan ville du få det? Hvis du går til Zara udviklerdokumentation, kan du få det der.

De havde et link til de smarte kontrakter her. Selvfølgelig kan du dog gå til Etherscan. Etherscan har stort set alles smarte kontrakter opført der. Og du kan finde det på nogle andre måder, men jeg vil sige, at mange kontrakter har deres adresse offentlig. Så i dette tilfælde går Zora endda så langt som til at have et websted til udviklerdokumentation. Det gør Foundation også, så Foundation er også fedt. Fnd.dev har alle deres undergrafer. De har endda deres egen Subgraph, som de understøtter. Det tror jeg også, Zora gør. Ja, de har deres egen Subgraph. Så du kunne bruge deres eksisterende Subgraph, men vi bygger grundlæggende på vores egen fra bunden.

Så det er lidt derfra, denne kontrakt kommer. Kontrakterne er lige her. Så nu, hvor vi har gjort det, kan vi bare trykke på Enter, og det skulle gå videre. For at lede os gennem trinene har vi kun brug for en ting mere, Subgraph-navnet. Jeg kan bare kopiere det fra sneglen lige her, så kunne vi bare tage standarderne for alle disse ting. Så dette kommer til at skabe al den kedelkode lokalt for os.

Nu skulle jeg være i stand til at gå ind i denne nye mappe og gå videre og åbne min teksteditor. Okay, fedt. Så dette er vores standardkode, bogstaveligt talt alt hvad du virkelig har brug for for at udgive en Subgraph. Den består af tre andre hoveddele. Hvis du kan forstå disse tre hoveddele, kan du bygge en API oven på et hvilket som helst af de netværk, vi understøtter. Du har schema.graphql, som er grafens skema. Vi kunne slette alt det for nu. Vi har vores subgrph.yaml. Denne subgrph.yaml er din konfiguration. Det er som standard omkring femogtredive linjer kode, der er givet til dig, eller det vil bare være en lille smule mindre, men din subgrph.yaml er dybest set næsten som kodeinfrastrukturen. Vi fortæller indeksøren, at vi implementerer denne API for, hvad vi skal gøre med de datakilder, som vi skal arbejde med. Vi vil se lidt mere på det om et sekund.

Så er det sidste du har din src/mapping. Så disse er kortlægningsskabeloner. Hvis du nogensinde har arbejdet med noget som AppSync eller endda The GraphQL, har du sandsynligvis tidligere arbejdet med en kortlægningsskabelon. Så disse definerer bare ... de er i bund og grund handlerfunktioner. Du har begivenhederne, og du vil gerne håndtere disse begivenheder. I vores tilfælde kan vi have en begivenhed, hvor nogen havde tænkt sig at lave token, og vi ønsker at håndtere disse data. Vi ønsker at gemme det i vores lokale vores egen API, vi vil gemme det og gøre det tilgængeligt. Altså kortlægningerne. Mange af disse ideer overførte mig direkte fra GraphQL-dagene, hvor jeg arbejdede i Web2-rummet i traditionelle applikationer og sådan noget. Så det er de vigtigste ting, dit schema.graphql, din subgraph.yaml og dine tilknytninger.

Den første ting vi roder med er GraphQL-skemaet. Jeg vil kopiere og indsætte nogle af entiteterne af de to typer, som vi arbejder med. Den ene er Token-typen og den anden er brugertypen.

Så hvis vi ser på Zora, ser du, at vi har disse NFT'er, og de er forbundet med en brugers adresse. Så vi vil gerne kunne gemme den information, og vi vil også gerne gemme metadataene om selve tokenet. Så det er derfor, vi har disse to enheder.

For tokenet har vi bare alle de metadata, som vi vil gemme. Vi kan få disse metadata fra den faktiske begivenhed, som vi skal arbejde med. Eller hvis vi virkelig ville, kunne vi faktisk gå ud til en separat smart kontrakt eller datakilde og få data til en type. Eller vi kan faktisk gå direkte ind i selve The Graph node og også få data.

Hvis vi virkelig ville, kunne vi faktisk gå ud til en separat smart kontrakt eller datakilde og hente data for en type, eller vi kan faktisk gå direkte ind i selve The Graph node og også hente data.

Så i kortlægningerne kan du i det væsentlige arbejde med forskellige datakilder, der kommer til at udfylde de typer, der definerede her, og hvis du nogensinde har arbejdet med GraphQL.

Du forstår sikkert, at et udråbstegn betyder, at det er et påkrævet felt, og hvis det ikke er et udråbstegn, betyder det, at det er et valgfrit eller et nullbart felt, så vi gemmer token-id'et, contentURI, metadataURI, createAtTimestamp, skaberen og ejer, så har vi brugertypen brugeren vil grundlæggende have et en-til-mange forhold, så en bruger har mange tokens, som de har oprettet her, og så har de mange tokens, som de har købt, så en bruger kan være en skaberen eller en forbruger og den måde, vi skaber relationerne på eller bruger disse direktiver.

Og hvis du nogensinde har brugt noget som Amplify og mange andre forskellige GraphQL-instruktioner, har du måske set noget som dette, hvor du har et direktiv, og i dette tilfælde siger vi lidt, at vi ønsker at få dette skabte felt fra skaberen her, som er en adresse, så adressen ville være en tegnebogsadresse, og så vil dette grundlæggende give os mulighed for at have et forhold mellem tokenet og brugeren og brugeren og selve tokenet, eller jeg vil sige rækken af ​​tokens.

Okay, når det er sagt, kan vi gå videre og gemme det, og vi har vores subgraph.yaml, så her vil vi lave et par ændringer, vi har allerede adressen, som blev indstillet, da vi oprettede dette. Den næste ting, vi vil gøre, er at indstille startBlock. Den starkBlock vil dybest set fortælle indekseren, hvor de skal begynde at indeksere disse data, fordi hvis du implementerer dem, som de er, vil de starte fra blockchains tilblivelsesblok, så den vil gå til den allerførste transaktion på Ethereum og arbejde sig op fra der, hvilket er tidskrævende, så i stedet, hvad vi grundlæggende kan gøre, er at sætte startBlocken, så for startBlocken kan du gå til selve smart kontrakten.

Lad os se her. Jeg tror, ​​at dette er selve kontrakten, så hvordan ville du finde dette, så du kan gå til Transaktioner. Du kan gå til den allersidste transaktion, og dette er den lige her, så det er den første startblok, som vi ville sige, som bogstaveligt talt er den blok, vi bruger her.

For entiteterne er dette det næste skridt, at vi ønsker at få disse til at matche GraphQL-entiteterne, så vi har et token, og vi har en bruger, det sidste vi vil gøre er at håndtere eventHandlers de tre begivenheder, som vi 're going to be work with will be transfer denne begivenhed udløses hver gang et token oprettes eller et token overføres, så hvis jeg opretter et token, bliver denne begivenhed udløst, hvis jeg overfører den til en anden, bliver denne begivenhed udløst er en god måde at holde styr på alle de tokens, der findes, og så skal de to andre behandlere håndtere opdateringer, så hvis jeg ændrer metadataURI, ændrer jeg tokenURI, det kan jeg spore her.

Så disse vil kalde funktioner, der er i vores kortlægninger kaldet handleTokenMetadataURIUpdated, handleTokenURIUpdated og handleTransfer og det er det.

Vi kan nu gå videre tilbage til vores CLI, hvad vi måske ønsker at gøre er at skrive vores kortlægninger for at skrive vores kortlægninger, vi havde faktisk et bibliotek kaldet GraphTS, som er et Graph-typescript-bibliotek, som vi understøtter sammen med CLI ved at bruge dette bibliotek, du kan tale direkte til selve blockchainen, du kan tale med Ethereum, men du kan også tale med The Graph node, hvis du allerede har gemt nogle data der, og du vil hente de data, du kan tale med den.

Vi bruger faktisk The Graph CLI til at generere en masse af denne kode for dig, der gør det ret nemt at arbejde med for at generere den kode, alt hvad vi skal gøre er at køre et grafkodegen. Dette vil gøre en kombination af ting, det vil undersøge vores GraphQL-skema såvel som ABI'erne for den smarte kontrakt. Det vil fortsætte og generere en masse funktioner såvel som typer, som vi kan bruge, så typerne er blevet genereret med succes.

Vi burde være i stand til at gå til vores genererede mappe og se nogle ting, der er blevet genereret, de to klasser, som vi burde have, er token og bruger, så det er godt, at vi ikke behøver at opdatere dette eller noget, der bare viser dig, hvad det gør. næste ting vi skal gøre er at åbne kortlægningerne.

Jeg vil bare gå videre og slette alle disse ting. Vi vil gå videre og importere de ting, vi vil bruge, så hvis jeg går til blogindlægget her. Denne kode er formateret ikke for godt, men jeg vil formatere den på blot et sekund. De første ting, vi importerer, er fra token-mappen, som er under den genererede mappe. TokenURIUpdatedEvent og TransferEvent er hændelser, der tillader os at have typesikkerhed. Tokenkontrakten, der refereres til her, er Token som TokenContract. Dette er en klasse, der giver os mulighed for at interagere med den faktiske smarte kontrakt, så vi kan foretage opkald til den smarte kontrakt ved at bruge denne og derefter Token og User. Jeg tror, ​​det er klasser, der giver dig mulighed for at tale med The Graph node, så det betyder grundlæggende, at hvis jeg gemmer noget som en indekser, vil jeg gerne hente disse data. Jeg kan bruge disse klasser her, vi har tre funktioner, vi skal beskæftige os med, så handleTokenMetadataURIUpdated, handleTokenURIUpdated handleTransfer, så vi skal grundlæggende have tre handler-funktioner i vores kortlægninger, så den største er denne handleTransfer, dette er en funktion, der vil håndtere prægningen eller overførsel af et token, så med det forstået skal vi håndtere et par forskellige sager her.

Vi er nødt til at håndtere, hvis tokenet aldrig er blevet oprettet før, og vi kan også håndtere, hvis det allerede er blevet oprettet. For hvis det bliver præget, betyder det, at det ikke er der endnu, hvis det bliver overført til en anden, hvilket betyder, at det er der, så Den første ting, vi kan gøre, er, at vi grundlæggende kan bruge tokenet her fra vores genererede kode til først at se på den eksisterende node, så vi kalder grundlæggende ind i den database. Hvis dette token findes, skal du returnere det. Hvis ikke, vil vi gå videre og oprette det, og her sætter vi i bund og grund bare en masse metadata som skaberen, tokenID'et og createdAtTimestamp. Vi vil derefter ringe til selve den smarte kontrakt, fordi i tilfældet får vi kun visse data, men vi kan ringe tilbage til den smarte kontrakt for at få andre data, så det, vi har brug for fra den smarte kontrakt, er contentURI og metadataURI, så vi kalder den smarte kontrakt her, vi tilføjer yderligere felter til dette objekt her

Vi har et token, vi tilføjer skaberen, tokenID'et og createAtTimestamp. Der er også andre indholdsoplysninger. Vi opdaterer derefter ejeren, eller vi indstiller ejeren, måske fordi det kunne være et helt nyt token uden ejer, så gemmer vi det i The Graph node. Vi gør så også det samme med brugeren, hvis brugeren eksisterer, vi indlæser brugeren, og hvis ikke, går vi videre og opretter brugeren de sidste to funktioner, som vi har brug for eller til håndtering af handleTokenURIUpdated og håndtering af TokenContentURIUpdated, så tokenURIUpdated henter bare token og derefter opdaterer contentURI og gemmer den, den anden vi har er TokenMetadataURIUpdated, så det har vi ikke defineret endnu, så jeg vil gå videre og gøre det.

Jeg vil bare kopiere denne begivenhed faktisk kommer til at være. Github Copilot laver noget arbejde for mig der, så vi har denne tokenMetadataURIUpdated begivenhed. Vi ønsker at indstille den metadataURI. Jeg synes, vi er gode, så nu har vi skrevet vores kortlægninger. Vi har tre funktioner, som vi har at gøre med handleTransfer, handleTokenURIUpdated og tokenMetadataURIUpdated, og så har vi vores undergraf her, der definerer disse begivenheder. Jeg tror, ​​vi er klar til at implementere denne ting.

Så det, jeg vil gøre, er at gå til CLI, og jeg vil køre grafimplementering, og her kan vi faktisk definere studiet, så vi vil sige dash dash studio, så vil jeg gå videre og sende subgrafnavnet, som er lige her.

Jeg vil give det en etiket af en version af nulpunkt 1, og åh, jeg er nødt til at gå videre, og først så lad mig gå videre og tegne graf auth dash dash studio. Jeg kan få min implementeringsnøgle lige her, okay, så dette burde blive implementeret. Så hvis dette ser godt ud, så skulle vi være klar til at gå tilbage til vores dashboard her, og som du kan se, er det allerede blevet opdateret med GraphQL-legepladsen. Og nu kan vi gå videre og begynde at køre nogle forespørgsler, og så overfører vi dette til vores næste JS-app. Så vi sender måske nogle argumenter ind som orderDirection, descending og så måske orderBy createdAtTimestamp, og så begynder vi allerede at se nogle data kommer tilbage. Hvis vi ser på contentURI, ser vi, at vi har den faktiske contentURI på vej tilbage, for indholdet kommer tilbage. Okay, så vores undergraf er blevet implementeret. Hvis vi vil vide, hvordan man forespørger på dette fra vores frontend, kan vi faktisk gå her for detaljer, og vi har vores forespørgsels-URL, så jeg kan kopiere dette. Jeg kan gå til noget som en graphQL bin. Jeg tror det er.

Du kan se, at vi også kan bruge denne graphql bin, eller en hvilken som helst af disse forskellige GraphQL UI'er. Så vores API virker. Det er den URL, vi skal bruge. Nu kan vi gå videre og hoppe ind i en frontend-applikation. Så det, jeg vil gøre, er at oprette en ny næste JS-app. Vi vil kalde dette som zora UI. Jeg gætter på, at det burde dukke op her, og det, vi vil gøre, er at bygge en brugergrænseflade oven på denne API, så det, jeg vil gøre, er at bruge medvind, for medvind er ret rart. Og jeg vil gå videre og installere de ting, jeg har brug for til medvind, så vil jeg initialisere medvindsprojektet, og så går vi ind i globals.css, og vi vil gå videre og gøre det .

Og nu er vi klar til at gå. Så i brugergrænsefladen vil jeg nok gå til index.js, og det er det, vi vil gøre vores arbejde. Gå videre og slet al denne kode her, og de ting, jeg skal bruge, vil være useState og useEffect fra reagere. Og jeg skal nok også have noget kode, som jeg kan henvise til her. Jeg ønsker ikke at kunne lide referencer direkte, men jeg vil gerne bruge det til at komme i gang. Så vi har getServerSideProps. Det bliver her, vi kalder vores fetchData-funktion, og fetchData vil kalde vores GraphQL API, og så kommer det ind her som rekvisitter, og så konsoller vi bare sådan, og måske gør vi det ikke. har endda brug for useState, fordi vi skal bruge næste år, så vi kan bare videregive det hele i denne rekvisitter. Så det er sådan set her, vi skal i gang.

Så det, jeg vil gøre, er, hvordan kalder vi faktisk GraphQL API. Du ved, vi har vores input her i vores dokumenter. Vi har også noget dokumentation omkring. Du ved, forskellige GraphQL-klienter, så du kan bruge noget som Apollo, eller du kan bruge noget som URQL. Jeg tror, ​​jeg vil gå med URQL, bare fordi det er lidt mindre kode. Så jeg går videre og installerer URQL og GraphQL, så vi har URQL og GraphQL installeret nu, og det, jeg vil gøre, er i bund og grund, at lad os bare sige kopiere al denne kode, og så vil vi på en måde bryde det op. i vores app. Så vi har createClient fra urql. Vi har vores API URL, API URL'en, som vi vil arbejde med, bliver denne API. Denne URL her er jeg i. Til forespørgslen vil vi bare bruge en forespørgsel, som vi ved vil virke. Så vi går tilbage til min API og skriver bare en forespørgsel, og så kopierer jeg den og indsætter den over, og vi vil også sige, at vi vil have de første 10.

Så det er vores forespørgsel. Det her bliver vores klient. Vi siger lidt opret klient. Vi indstiller URL'en, og så kan vi kalde det for dataene, så lad os gå videre og bare gøre dette, og så bare trøste logdataene. Vi vender bare tilbage som et tomt array. Okay, okay, så vi har vores basisfunktionalitet klar til brug. Vi kan gå videre og køre det her. Så det ser ud til, at jeg er nødt til at stoppe en anden server, jeg har kørende, så localhost 3000, og når dette kører, tror jeg, at vi skal se, at dette er logget ud her. Så der går vi, der har vi det. Vi har vores data der, så vi har data.data.tokens. Så jeg kan sige returnere data.data.tokens, og så i vores brugergrænseflade ser vi, at vi har vores tokens, der skulle dukke op. Okay, der går vi. Så vi har vores 10 tokens.

Vi har vores contentURI. Vi har vores metadataURI. MetadataURI'en har ting som dette, hvor du har lidt som mimeType, navnet, versionen, beskrivelsen, sådan noget, som du kan bruge i din brugergrænseflade. Så det er fantastisk. Så vi har sådan set al basisfunktionaliteten. Nu mangler vi bare at bygge noget design på det. Så for design-ting og faktisk en anden ting, vi måske skal overveje, er som at kortlægge selve dataene, fordi den måde, det kommer tilbage på. Vi vil måske gerne ændre det lidt, så for eksempel, en ting, som vi ikke ved, er direkte fra disse data, er ting som mimeTypen, så for at få den mimeType, som vil give os mulighed for at vise, at vi faktisk skal kalde en hentning, kalde en axios eller nogle typer HTTP-anmodninger for at få disse JSON-data. Og på den måde kan vi på en måde vide, om det er et billede, eller om det er en video, eller om det er en gif, hvordan skal vi vise det.

Vi vil også bare have disse data, disse metadata alligevel. Så hvad vi dybest set kan gøre, er ligesom at have en funktion lige her, der kortlægger disse data. Så det, vi skal gøre, er, at vi vil sige noget som data.data.tokens.map, og så vil vi ligesom kort over alt, og så vil vi kalde fetch to kind for at få de metadata nu. Heldigvis har jeg allerede lavet en funktion, der gør dette. På den måde behøver vi ikke kunne lide at gå igennem alt det. Jeg vil gå til min GitHub. Jeg har denne hente data funktion. Jeg vil bare erstatte det med det her. Slet måske noget af console.log. Okay cool. Så denne funktion kommer grundlæggende til at kortlægge alle tokens, og vi vil ringe ud for at hente metadataene, og så vil vi ligesom opdatere typen baseret på metadataene.

Så hvis det er mp4, vil vi gerne vise en video. Hvis det er lyd, vil vi gerne vise lyd. Hvis det er et billede, vil vi gerne vise billedet, og så snart vi har de nye opdaterede metadata, eller opdatere, medmindre vi har ødelagt noget her, bør vi se de metadata. Jeg tror, ​​jeg vil opdatere forespørgslen til bare at returnere den første for nu. Nu skal jeg genstarte serveren. Okay, så her er vores tokens, vi har vores metadata, vi har vores beskrivelse, vi har vores mimeType, vi har vores navn, og vi har versionen.

Den sidste ting, vi vil gøre, er at bygge den faktiske styling ud ved hjælp af medvind og også have et eksempel på brugergrænsefladen til det, som vi skal bruge. Så jeg vil gå videre og kopiere dette, og jeg vil tweete ud og gøre alt det her tilgængeligt, og jeg vil sikkert også lægge det i kommentarerne, men koden til dette, men det er ikke noget for fancy. Det er bare en slags grundlæggende css, der bruger medvind, men hvad vi skal gøre er dette - vi har vores rekvisitter, vi har vores tokens, så hvis vi opdaterer, ser vi nu, at vi har vores brugergrænseflade her, og hvad jeg kan gøre nu er i stedet for at returnere en, lad os gå videre og støde den tilbage til 10. Åh det er grimt. Åh jeg tror jeg ved hvad jeg går glip af, savner det her. Sådan der. Så nu viser vores brugergrænseflade, du ved, alle de forskellige NFT'er, og jeg må ikke have taget en eller anden form for mimetype i betragtning, så lad os se, hvilken mimetype det er, eller måske ikke indlæses af en eller anden grund.

Det ser ud til at der evt. Okay det ser ud til, at denne indlæses. Så det ser ud til, at dette er lyd. Jeg er usikker på, hvorfor lyden ikke virker, men jeg kan godt se nærmere på det, men det er en slags demo, vi bare gerne ville vise dig, hvordan du bygger det ud, og jeg synes, det er interessant, du måske gør på dette tidspunkt, hvis du er en udvikler og du er villig til at tjene penge på en af ​​dine API'er, tror jeg, at det er som igen kraften i at have en selvstyrende applikation, der er derude i naturen, som folk kan dybest set konkurrere mod hinanden baseret på kvalitet for at opbygge de mest værdifulde forskellige API'er, og du kan faktisk publicere dette til netværket og begynde at tjene forespørgselsgebyrer på det. Så hvis du udgiver dette, så kan alle, der vil bruge det, bruge det, og baseret på brugen, vil du tjene penge. Du behøver ikke engang at gøre noget. Du lægger det bare derude, og hvis folk så bruger det, så kommer du som udgangspunkt til at tjene en del af pengene på brugen, og det gøres ved at skrive dine oplysninger og din transaktion af udgivelsen til blockchain.

Så det er ret interessant, fordi du dybest set udgiver, og når det først er der, er det der altid, og du ved, det er for mig ret kraftfuldt, og hvis du vil gøre det, skal du grundlæggende have nogle tokens, så jeg har nogle tokens og jeg kan som udgangspunkt udgive enten til Rinkeby eller hovednetværket. Så jeg kan gå her til Rinkeby, og her har jeg nogle tests, gå videre og publicer dette, vælg Rinkeby netværk og skal nok gøre noget med min gå videre og afbryde forbindelsen fra alle disse forskellige konti, og så genoprette forbindelsen. Vi prøver dette en gang til. Det ser ud til, at jeg har nogle problemer med at udgive. Jeg må se på, hvad der sker med det. Det ser ud til, at jeg har. Det viser, at jeg af en eller anden grund har nul eth, men det er ikke tilfældet. Åh, jeg tror, ​​jeg ved, hvad jeg skal gøre. Lad mig gå videre og afbryde forbindelsen og derefter oprette forbindelse igen. Så jeg tror, ​​jeg blev godkendt med den forkerte tegnebog, så efter at dette er offentliggjort, vil det dukke op på netværket, og jeg kan teste det, fordi dette er Rinkeby-testnetværket, men hvis du udgiver dette til mainnet, er det når du ville have folk, der stort set begynder at kunne lide at betale, hvis de bruger det.

Så jeg vil holde op med at dele min skærm og i bund og grund begynde at se, om nogen har spørgsmål eller lignende.

Dette interview var meget frugtbart, takket være Nader Dabit fra The Graph, et projekt, der løser dette problem med en hostet tjeneste, der indekserer blockchain-data. Disse indekser ("undergrafer") kan derefter forespørges ved hjælp af standard GraphQL API. Enkelt sagt er undergrafer som udviklerskrevne dataindekser for specifik forretningslogik, og når først forretningslogikken er implementeret, vil den blive ved med at opdatere den tilsvarende database baseret på implementeringen for at gøre det nemt for udviklere at udtrække og ringe til enhver tid . Vi vil fortsat invitere flere gæster til at deltage, hvad enten det er i form af interviews, workshops eller på anden måde, vi håber at bringe mere inspiration til dem, der er interesseret i at udforske lag2 i dybden, og at gøre vores bedste for dette!

— SLUT

Nader Dabit arbejder i øjeblikket hos Edge og Node for at hjælpe med at bygge en decentral fremtid. Han har tidligere ledet udvikleradvokatvirksomhed for front-end web og mobil hos Amazon Web Services; fokuseret på GraphQL, cross-platform og cloud-aktiveret web- og mobilapplikationsudvikling. Han udviklede applikationer og referencearkitekturer på AWS ved hjælp af en kombination af GraphQL og serverløse teknologier.

Dernæst vil vi have Polygon, Aztec og andre projekter, der giver os solid erfaring og stor indsigt! Flere workshops annonceres snart. Bliv hængende!

Polygon

• Emne: Skalering af dine Dapps ved hjælp af polygon
• Tid: 2021.7.20

👀 Bor her:http://live.bilibili.com/23288126

Aztec

• Emne: TBD
• Tid: afventer

👀 Bor her:http://live.bilibili.com/23288126

Kilde: https://iosgvc.medium.com/the-graph-featured-building-on-ethereum-with-graphql-the-graph-and-next-js-b19be457b71f?source=rss——-8——— ——–kryptovaluta