Il grafico in primo piano | Basandosi su Ethereum con GraphQL, The Graph e Next.js

Usare il ridimensionamento per affrontare la congestione di Ethereum è senza dubbio utile per un'adozione più ampia. Come tutti sappiamo, le costose transazioni on-chain e l'esperienza utente elevata sono i motivi per cui la rete Ethereum richiede la scalabilità. Optimistic Rollup e ZK Rollup sono due importanti soluzioni Layer2. Optimistic Rollup è compatibile con EVM e ha costi tecnici bassi, mentre ZK Rollup ha una durata di ritiro più breve e costi di elaborazione on-chain inferiori. zkSync, in quanto ZK Rollup compatibile con EVM, sta mostrando un forte slancio.

Oil nostro terzo workshop, presentato da The Graph, della serie in IOSG Ventures e Chainlink Layer2 Hackathon, era in diretta il 18 luglio alle 8:00. Questo live ha ricevuto un sacco di supporto e Mi piace dal nostro adorabile pubblico! Non preoccuparti se ti sei perso il video, clicca e guarda il replay qui sotto! Forniamo anche il riepilogo completo sotto forma di testo per tutti coloro che vorrebbero leggere e saperne di più.

- Iniziamo!

Quindi sì, sono alla spiaggiah. È lì che trasmetterò in streaming, dalla spiaggia. Perché è quello che facciamo. Lavoriamo dove vogliamo e oggi lavoro dalla spiaggia. Sarò in streaming da qui. Potrei fare una piccola pausa nel mezzo dello streaming, prendendo qualcosa da bere, da mangiare o qualcosa del genere, perché rimarremo qui per circa un'ora.

Ma oggi faremo un grande lancio di The Graph. Questo è ciò di cui parlerò oggi. Abbiamo un progetto davvero interessante che stiamo per realizzare. Parlerò di alcune idee su alcune delle cose che abbiamo fatto qui, quindi siamo piuttosto entusiasti di questo. Faccio parte di questo team solo da circa tre mesi, ma ci lavorano da circa quattro anni. Quindi alcune delle idee lanciate oggi sono state pensate, ma erano idee teoriche, persino concetti che sono stati lanciati in giro per l'industria ma nessuno ha effettivamente implementato qualcosa che sia così complicato e così completo con un'interfaccia utente che le persone possono effettivamente interagire con un gruppo di livelli diversi. Quindi ne siamo piuttosto entusiasti.

Quello che farò oggi sarà semplicemente mostrare come costruire un'API utilizzata nel front-end. Parlerò un po' della rete e di come potete parteciparvi in ​​diversi modi. Oggi scriveremo del codice. Quindi è principalmente di questo che si tratta. Se non hai visto il lancio, lasciami andare avanti e collegarlo qui. Vedi se riesci a controllare parte del lavoro svolto semplicemente leggendo il post del blog.

Sì, qualcuno ha menzionato la Conferenza Ethereum a Parigi. Non ho i biglietti ma ci sarò lo stesso. Quindi, anche se sei a Parigi e non vieni a quella conferenza, contattami. Mi piacerebbe uscire e portare un po' di gadget di Graph. Porto magliette e porto adesivi. Ti offro da bere o ti offro un caffè. Potrei anche offrirti la cena. Starò lì per circa una settimana, quindi non vedo l'ora.

Ho condiviso un collegamento al lancio. Ciò che abbiamo lanciato sono stati due nuovi prodotti o due nuove funzionalità di The Graph. Uno si chiama Subgraph Studio, che consente agli sviluppatori come me di creare queste API aperte su set di dati aperti. Posso curare la mia API, il che significa che in pratica posso dire, ehi, voglio che qualcuno nella rete inizi a indicizzare i dati dalla mia API. E posso iniziare a guadagnare denaro in base ai feed che sono in grado di generare. Fondamentalmente posso trovare le API di altre persone e posso segnalarle e guadagnare denaro anche da quelle. Posso essere un ingegnere del software che esegue semplicemente un nodo, un indicizzatore. Posso fare soldi in questo modo. Quindi ci sono tutti i tipi di modi in cui puoi fare soldi.

Ciò che mi interessa di più è che penso che questo incentiverà in un modo che consentirà alle persone di fare soldi. Questo è il miglior incentivo. Questo è uno degli incentivi che mi motiva di più. Principalmente perché sono cresciuto, direi, povero, o qualcosa del genere, ma direi che, per i primi dieci anni della mia vita, non ho quasi guadagnato soldi.

Quindi il software mi ha consentito. Ho visto molte altre persone in tutto il mondo, molte persone che fanno effettivamente parte del protocollo The Graph in tutto il mondo che hanno partecipato sin dall'inizio e che grazie ad esso hanno libertà finanziaria. Quindi sono piuttosto entusiasta dell'incentivo lì.

Penso che sia una delle cose più interessanti che chiunque possa avere un'idea utilizzando tutti questi set di dati aperti disponibili da uno qualsiasi dei diversi tipi di reti che supportiamo. Al momento si tratta principalmente di blockchain e fonti di dati decentralizzate. Ma l'idea per il futuro è che saremo in grado di far sì che i nostri indicizzatori si occupino di qualsiasi tipo di set di dati aperto. Molte persone oggi stanno effettivamente aggirando questo problema per trovare effettivamente i set di dati che desiderano indicizzare e inserirli in qualche tipo di rete esistente. È anche possibile scrivere tali transazioni e indicizzarle su un'API grafica.

Detto questo, troviamo un'idea interessante per un'app o un'API. E ho appena messo insieme quell'API. L'ho distribuito. Ora è sull'interfaccia utente. Puoi andare a dare un'occhiata nella Dashboard. Chiunque voglia usarlo ora può costruirci sopra un front-end. Possono utilizzare i contratti intelligenti come livello di transazione come facevano prima, ma ora possono interrogarli sul loro front-end. Costruiremo un'interfaccia utente che lo dimostri. In questo modo, chiunque voglia usarlo può usarlo, e tutto il denaro che viene addebitato per questo ora viene invece destinato a grandi aziende come Google e AWS. Naturalmente, le persone che gestiscono la loro infrastruttura potrebbero ancora farne parte, ma i profitti effettivi andranno agli sviluppatori. Per me, anche questa è una delle parti più belle.

Quindi, detto questo, questa è solo una panoramica generale. Se hai seguito The Graph, qualcosa di questo lo hai già capito. Ma penso che molte persone, i minatori che conosci, siano sviluppatori web che operano nello spazio web tradizionale. Ancora abbastanza presto. Anche se stiamo iniziando a raggiungere numeri davvero selvaggi e interessanti, recentemente hanno raggiunto oltre un miliardo di query in un solo giorno. Stiamo crescendo su un precipizio davvero veloce. Questo tipo di crescita esponenziale è ciò che cerchi quando entri in un'azienda o quando vuoi entrare presto in una tecnologia. Non si tratta del numero totale effettivo di oggi, ma della crescita, perché tra un anno se rimani alla stessa crescita, la schiaccerai. Quindi è questo che mi interessa.

Detto questo comincio a costruire. Per fare ciò, condividerò il mio schermo. Andiamo avanti e facciamolo. Vado avanti e preparo il computer. Per iniziare a farlo, chiuderò alcune di queste app che sono state aperte. Inizia a condividere il mio schermo. Va bene, eccoci qua. Questo è il sito web di The Graph. Probabilmente l'hai già visto. Ciò che fondamentalmente voglio fare in questo video è mostrarti come creare un'API e distribuirla nella nuova interfaccia utente. Lo studio qui. Quindi crea un fronte e sopra di esso utilizzando Next.js. Questo è quello che faremo.

Per iniziare, andrò avanti e creerò nel mio terminale una finestra vuota. Per fare ciò, devo prima aumentare la dimensione del carattere, perché è davvero piccola. Lo porteremo a qualcosa come trentatré. Va bene. Sono nella finestra del terminale dove creerò un nuovo sottografo. Penso che se guardi Explorer, che è anche qualcosa che stiamo lanciando oggi, puoi vedere alcune app. Alcune API sono già sulla rete decentralizzata. PoolTogether è davvero popolare. Uniswap, ovviamente, fa transazioni per miliardi di dollari. Quindi le app piuttosto grandi sono già qui. Questi sono come i nostri partner di lancio, persone che lanciano oggi. Ma se guardi una di queste API, forse hai familiarità con alcune di queste applicazioni che guidano. Molte di queste sono applicazioni finanziarie. Per me quelli più interessanti a scopo dimostrativo sono in realtà le opere d'arte, il materiale visivo. La cosa che costruirò è che un mercato NFT lo visualizzi. Perché penso che i dati finanziari siano più difficili da visualizzare. Non è interessante per una demo dell'interfaccia utente come questa.

Fondamentalmente, quello che farò è costruire un sottografo. Quindi andiamo al Legacy Explorer e io vado a Zora. Vedrai un sacco di contratti Zora Smart che sono stati distribuiti per Subgraphs. Quindi, utilizzando questi dati come il contenuto di un URL come questo, puoi effettivamente vedere dati un po' più interessanti. Quindi ordino per ID, poi prendiamo qualcosa da qui. Quando hai cose del genere, è un po' più interessante come video e cose che puoi effettivamente mostrare. Questo non si sta caricando in questo momento. Vediamo qui. Forse riesco a trovare un'immagine. Eccoci qua. Roba del genere. Questo è quello che faremo.

Fammi solo controllare e vedere se ci sono domande che mi sfuggono. Avrei dovuto. Tornerò e risponderò alle domande quando avrò un momento.

Questo è in fase di registrazione. Sarà disponibile sul mio Twitch e sul mio YouTube in seguito. Quello che fondamentalmente voglio fare è costruire per Zora. Quindi zora.co e questo è il loro sito web. Hanno un sacco di NFT che le persone acquistano e vendono. Questo è il motivo per cui voglio creare un'interfaccia utente. Un altro interessante è Foundation. Se vai su Foundation.app, anche questo è davvero carino. Sai che puoi vedere l'offerta attuale, quindi questa è come quattromila dollari o due Eth. Questo costa circa cinquemila dollari. Quindi questa Fondazione e Zora ci aiuterebbero a ottenere una discreta quantità di azione.

Sto usando Zora. Zora è ancora una volta un mercato NFT. Costruiremo un sottografo e poi creeremo un'interfaccia utente per quello. Per iniziare, andrò su Subgraph Studio. Vado avanti e creo un nuovo sottografo. Questo sarà Zoralivestream. Ed ecco, vediamolo, ora abbiamo il nostro sottografo disponibile nello Studio. Ora possiamo sostanzialmente creare e scrivere il codice localmente. Quindi distribuiremo questa cosa e la invieremo qui all'attuale Studio Dashboard. Qui abbiamo alcune istruzioni su come farlo, ma in realtà le migliori istruzioni si troveranno sul nuovo sito web. I nuovi documenti che abbiamo. Puoi anche andare al blog Building Subgraphs con Subgraph Studio. Questo in realtà sarà essenzialmente ciò che affronteremo oggi. In realtà ho scritto personalmente questo post sul blog. Questa sarà l'API che costruiremo oggi. Dovrebbe guidarti attraverso tutti i passaggi.

Quindi l'abbiamo già creato. Ora abbiamo la nostra lumaca. Lo stato è UNDEPLOYED, il che significa che non siamo schierati in questo momento. Abbiamo la nostra chiave di distribuzione. Abbiamo alcune istruzioni di installazione, Graph CLI e cose del genere. Questo è ciò che useremo. Ora siamo pronti per iniziare a scrivere alcuni codici. Ora che abbiamo questo posto qui, possiamo tornare alla nostra CLI.

Vado avanti e installo la CLI. Penso che questo sia già installato, presumo. Lo installerò di nuovo e, una volta installato, avremo il binario. E potremmo iniziare a utilizzare The Graph CLI. Durante l'installazione, seguirò questo tutorial. Questo è essenzialmente ancora ciò che sto attraversando. Questo ti mostra come impostarlo. Ci ho già rinunciato. Ho creato il mio Subgraph e ora siamo proprio qui dove lo installiamo. Ora che abbiamo installato The Graph CLI, dovresti essere in grado di eseguire semplicemente graph. E vedi che il binario ti sta dando istruzioni lì, grafico: l'aiuto ti darà alcuni comandi comuni. Quello che vogliamo fare è init, quindi vogliamo inizializzare il Subgraph. Ciò che fondamentalmente fa è creare tutto il boilerplate di cui hai bisogno per la tua API. Questo sarà il comando che eseguiremo graph init. Qui gli passiamo un paio di bandiere. Quindi stiamo passando il nome del contratto. Quindi questo sarà il modo in cui chiameremo questa origine dati. E per noi sarà un token, perché saranno risorse digitali che utilizzano lo standard OpenZeppelin ERC721, che è un token non fungibile. Quindi Token ha molto senso.

Diremo eventi indice, il che significa che esamineremo le API o le interfacce binarie dell'applicazione, che è uno smart contract di Ethereum. Essenzialmente un'API che puoi utilizzare per interagire con un contratto. Esaminerà l'interno dell'ABI e selezionerà gli eventi effettivi ammessi, creando un codice standard a livello locale per noi. Quindi questo è solo un aiuto per scrivere del codice essenzialmente per noi in base agli eventi.

Stavamo anche dicendo che vogliamo utilizzare Subgraph Studio, perché ora abbiamo sia il servizio in hosting che Studio. Lo studio è ciò che utilizzeranno tutte le future app, ma vogliamo comunque supportare il vecchio servizio. Specifichiamo studio e quindi possiamo anche specificare il contratto intelligente con cui stiamo lavorando. Quindi ho detto che useremo Zora. Questo numero qui sono i contratti intelligenti Zora. Come lo otterresti? Se vai alla documentazione per gli sviluppatori di Zara, puoi trovarla lì.

Avevano un collegamento ai contratti intelligenti qui. Naturalmente, però, puoi andare su Etherscan. Etherscan ha praticamente elencati i contratti intelligenti di tutti. E puoi trovarlo in altri modi, ma direi che molti contratti hanno l'indirizzo pubblico. Quindi, in questo caso, Zora arriva addirittura ad avere un sito di documentazione per gli sviluppatori. Anche Foundation fa lo stesso, quindi anche Foundation è fantastico. Fnd.dev ha tutti i suoi sottografi. Hanno anche il proprio sottografo che supportano. Penso che anche Zora lo faccia. Sì, hanno il loro sottografo. Quindi potresti usare il loro sottografo esistente, ma fondamentalmente stiamo costruendo il nostro da zero.

Quindi è da lì che arriva questo contratto. I contratti sono proprio qui. Quindi ora che lo abbiamo fatto, possiamo semplicemente premere Invio e tutto dovrebbe andare avanti. Per guidarci attraverso i passaggi, abbiamo solo bisogno di un'altra cosa, il nome Subgraph. Posso semplicemente copiarlo dallo slug proprio qui, quindi tutte queste cose potremmo semplicemente prendere le impostazioni predefinite. Quindi questo creerà tutto quel codice standard localmente per noi.

Ora dovrei essere in grado di accedere a questa nuova directory e andare avanti e aprire il mio editor di testo. Va bene, bello. Quindi questo è il nostro codice standard, letteralmente tutto ciò di cui hai veramente bisogno per pubblicare un sottografo. È composto da altre tre parti principali. Se riesci a comprendere questi tre elementi principali, puoi creare un'API su qualsiasi rete che supportiamo. Hai schema.graphql, che è lo schema del grafico. Potremmo eliminare tutto questo per ora. Abbiamo il nostro subgrph.yaml. Questo subgrph.yaml è la tua configurazione. Per impostazione predefinita, ti vengono fornite circa trentacinque righe di codice, o semplicemente un po' meno, ma il tuo subgrph.yaml è fondamentalmente quasi come l'infrastruttura del codice. Stiamo dicendo all'indicizzatore che stiamo distribuendo questa API per sapere cosa fare con le origini dati con cui lavoreremo. Lo vedremo un po' di più tra un secondo.

Quindi l'ultima cosa che hai è il tuo src/mapping. Quindi questi sono modelli di mappatura. Se hai mai lavorato con qualcosa come AppSync o anche The GraphQL, probabilmente in passato hai lavorato con un modello di mappatura. Quindi questi definiscono semplicemente... sono essenzialmente funzioni di gestione. Hai gli eventi e vuoi gestirli. Nel nostro caso potremmo avere un evento in cui qualcuno intendeva creare un token e noi vogliamo gestire tali dati. Vogliamo memorizzarlo nella nostra API locale, lo memorizzeremo e lo renderemo disponibile. Quindi le mappature. Molte di queste idee mi hanno trasferito direttamente dai giorni in cui GraphQL lavorava nello spazio Web2 in applicazioni e cose tradizionali. Quindi queste sono le cose principali, il tuo schema.graphql, il tuo subgraph.yaml e le tue mappature.

La prima cosa con cui ci occuperemo è lo schema GraphQL. Copierò e incollerò alcune delle entità dei due tipi con cui stiamo lavorando. Uno è il tipo Token e l'altro è il tipo Utente.

Quindi, se guardiamo Zora, vedi che abbiamo questi NFT e sono associati all'indirizzo di un utente. Quindi vogliamo essere in grado di archiviare tali informazioni e vogliamo anche archiviare i metadati sul token stesso. Ecco perché abbiamo queste due entità.

Per il token, abbiamo solo tutti i metadati che vogliamo archiviare. Possiamo ottenere questi metadati dall'evento reale con cui lavoreremo. Oppure, se lo volessimo davvero, potremmo effettivamente accedere a un contratto intelligente o a un'origine dati separata e ottenere dati per un tipo. Oppure possiamo effettivamente andare direttamente nel nodo Grafico stesso e ottenere anche i dati.

Se davvero lo volessimo, potremmo effettivamente accedere a un contratto intelligente o a un'origine dati separata e ottenere dati per un tipo oppure possiamo effettivamente andare direttamente nel nodo Grafico stesso e ottenere anche i dati.

Quindi, nelle mappature, puoi essenzialmente lavorare con diverse origini dati che popoleranno i tipi che stavano definendo qui e se hai mai lavorato con GraphQL.

Probabilmente capisci che un punto esclamativo significa che è un campo obbligatorio e se non è un punto esclamativo significa che è un campo facoltativo o nullable, quindi memorizzeremo l'ID token, il contentURI, il metadataURI, il CreateAtTimestamp, il creatore e il proprietario allora abbiamo il tipo di utente l'utente avrà fondamentalmente una relazione uno-a-molti quindi un utente ha molti token che ha creato qui e poi ha molti token che ha acquistato in modo che un utente possa essere un creatore o consumatore e il modo in cui creiamo le relazioni o utilizzando queste direttive.

E se hai mai usato qualcosa come Amplify e molte altre istruzioni GraphQL diverse potresti aver visto qualcosa di simile in cui hai una direttiva e in questo caso stiamo dicendo che vogliamo che questo campo creato derivi dal creatore qui che è un indirizzo quindi l'indirizzo sarebbe un indirizzo di portafoglio e quindi fondamentalmente questo ci darà la possibilità di avere una relazione tra il token e l'utente e tra l'utente e il token stesso o direi l'array di token.

Va bene, detto questo, possiamo andare avanti e salvarlo e abbiamo il nostro subgraph.yaml quindi qui apporteremo alcune modifiche, abbiamo già l'indirizzo, che è impostato quando lo abbiamo creato. La prossima cosa che vogliamo fare è impostare startBlock. Lo starkBlock sostanzialmente dirà all'indicizzatore dove iniziare a indicizzare questi dati perché se lo distribuisci così com'è inizierà dal blocco genesi della blockchain quindi andrà alla primissima transazione su Ethereum e risalirà da lì, il che richiede molto tempo, quindi ciò che possiamo fare in pratica è impostare lo startBlock in modo che per lo startBlock tu possa andare allo smart contract stesso.

Vediamo qui. Penso che questo sia il contratto stesso, quindi come lo troverai per poter andare su Transazioni. Puoi andare all'ultima transazione e questo è proprio qui, quindi questo è il primo blocco di avvio che diremmo che è letteralmente il blocco che stiamo usando qui.

Ora, per le entità questo è il prossimo passo che vogliamo fare, queste corrisponderanno alle entità GraphQL quindi abbiamo un token e un utente, l'ultima cosa che vogliamo fare è gestire gli eventHandlers i tre eventi che vogliamo lavoreremo verrà trasferito questo evento viene attivato ogni volta che viene creato un token o viene trasferito un token, quindi se creo un token questo evento viene attivato se lo trasferisco a qualcun altro, questo evento viene attivato questo è un buon modo per tenere traccia di tutti i token esistenti e quindi gli altri due gestori gestiranno gli aggiornamenti, quindi se cambio il metadataURI, cambio il tokenURI, posso tenerne traccia qui.

Quindi chiameranno le funzioni presenti nelle nostre mappature chiamate handleTokenMetadataURIUpdated, handleTokenURIUpdated e handleTransfer e il gioco è fatto.

Ora possiamo tornare alla nostra CLI, quello che potremmo voler fare è scrivere le nostre mappature per scrivere le nostre mappature, in realtà avevamo una libreria chiamata GraphTS che è una libreria dattiloscritta Graph che supportiamo insieme alla CLI utilizzando questa libreria, puoi parlare direttamente con la blockchain stessa, puoi parlare con Ethereum ma puoi anche parlare con il nodo The Graph se hai già archiviato alcuni dati lì e vuoi recuperare quei dati puoi parlare con esso.

In realtà utilizziamo The Graph CLI per generare molto di questo codice per te, il che rende abbastanza facile lavorare per generare quel codice, tutto ciò che dobbiamo fare è eseguire un codegen grafico. Questo farà una combinazione di cose, esaminerà il nostro schema GraphQL e gli ABI per il contratto intelligente. Andrà avanti e genererà una serie di funzioni e tipi da utilizzare in modo che i tipi siano stati generati con successo.

Dovremmo essere in grado di andare nella nostra cartella generata e vedere alcune cose che sono state generate, le due classi che dovremmo avere sono token e utente, quindi va bene, non avremo bisogno di aggiornare questo o altro semplicemente mostrandoti cosa fa la prossima cosa che faremo sarà aprire le mappature.

Vado avanti e cancellerò tutta questa roba. Andremo avanti e importeremo il materiale che vogliamo utilizzare, quindi se vado al post del blog qui. Questo codice non è formattato molto bene ma lo formatterò tra un secondo. Le prime cose che stiamo importando provengono dalla cartella token che si trova sotto la cartella generata, TokenURIUpdatedEvent e TransferEvent sono eventi che ci consentono di avere l'indipendenza dai tipi. Il contratto token a cui si fa riferimento qui è Token come TokenContract. Questa è una classe che ci consente di interagire con l'effettivo contratto intelligente in modo da poter effettuare chiamate allo smart contract utilizzando questo e poi Token e Utente. Penso che queste siano classi che ti consentono di parlare con il nodo The Graph, quindi in pratica significa che se memorizzo qualcosa come indicizzatore, voglio recuperare quei dati. Posso usare queste classi qui abbiamo tre funzioni di cui dobbiamo occuparci, quindi handleTokenMetadataURIUpdated, handleTokenURIUpdated handleTransfer quindi dobbiamo avere fondamentalmente tre funzioni di gestione nelle nostre mappature, quindi la più grande è questa handleTransfer questa è una funzione che gestirà il conio o il trasferimento di un token quindi, fermo restando questo, dobbiamo gestire un paio di casi diversi qui.

Dobbiamo gestire se il token non è mai stato creato prima e possiamo anche gestire se è già stato creato, giusto perché se viene coniato significa che non è ancora lì se viene trasferito a qualcun altro significa che è lì quindi il La prima cosa che possiamo fare è fondamentalmente utilizzare il token qui dal nostro codice generato per esaminare prima il nodo esistente, quindi in pratica stiamo chiamando quel database. Se questo token esiste, restituiscilo. In caso contrario, andremo avanti e lo creeremo e poi qui fondamentalmente imposteremo solo una serie di metadati come il creatore, il tokenID e il CreateAtTimestamp. Quindi chiameremo lo smart contract stesso perché in tal caso otterremo solo determinati dati ma possiamo richiamare lo smart contract per ottenere altri dati quindi ciò di cui abbiamo bisogno dallo smart contract sono contentURI e metadataURI quindi qui chiamiamo contratto intelligente e qui aggiungiamo campi aggiuntivi a questo oggetto

Abbiamo un token, stiamo aggiungendo il creatore, il tokenID e il CreateAtTimestamp. Ci sono anche altre informazioni sul contenuto. Quindi aggiorniamo il proprietario o impostiamo il proprietario forse perché potrebbe essere un token nuovo di zecca senza proprietario, quindi lo salviamo nel nodo The Graph. Quindi facciamo la stessa cosa anche con user se l'utente esiste, carichiamo l'utente e in caso contrario, andiamo avanti e creiamo per l'utente le ultime due funzioni di cui abbiamo bisogno o per gestire handleTokenURIUpdated e gestire TokenContentURIUpdated in modo che tokenURIUpdated recuperi semplicemente il token e quindi aggiorna contentURI e lo salva, l'altro che abbiamo è TokenMetadataURIUpdated quindi non l'abbiamo ancora definito, quindi andrò avanti e lo farò.

Copierò semplicemente questo evento che in realtà avverrà. Github Copilot sta facendo del lavoro per me lì, quindi abbiamo questo evento tokenMetadataURIUpdated. Vogliamo impostare quel metadataURI. Penso che siamo a posto, quindi ora abbiamo scritto le nostre mappature. Abbiamo tre funzioni con cui abbiamo a che fare handleTransfer, handleTokenURIUpdated e tokenMetadataURIUpdated e poi abbiamo il nostro Subgraph qui che definisce quegli eventi. Penso che siamo pronti a schierare questa cosa.

Quindi quello che voglio fare è andare sulla CLI ed eseguire il deploy del grafico e qui possiamo effettivamente definire lo studio quindi diremo dash dash studio poi voglio andare avanti e passare il nome del sottografo che è giusto qui.

Gli darò un'etichetta di una versione di zero punto 1, e oh devo andare avanti, e prima quindi lasciami andare avanti e rappresentare graficamente auth dash dash studio. Posso ottenere la mia chiave di distribuzione proprio qui, va bene, quindi questa dovrebbe essere distribuita. Quindi, se tutto sembra a posto, dovremmo essere pronti per tornare alla nostra dashboard qui e, come puoi vedere, è già stata aggiornata con il parco giochi GraphQL. E ora possiamo andare avanti e iniziare a eseguire alcune query, quindi le trasferiremo nella nostra prossima app JS. Quindi potremmo passare alcuni argomenti come orderDirection, descending e poi magari orderBy createAtTimestamp, e poi inizieremo già a vedere che alcuni dati stanno tornando. Se guardiamo l'URI del contenuto, vediamo che abbiamo l'URI del contenuto effettivo che ritorna, per il contenuto che ritorna. Va bene, quindi il nostro sottografo è stato distribuito. Se vogliamo sapere come interrogarlo dal nostro front-end, possiamo andare qui per i dettagli e abbiamo il nostro URL di query, quindi posso copiarlo. Potrei andare in qualcosa come un contenitore graphQL. Io penso che sia.

Puoi vedere che possiamo anche utilizzare questo bin graphql o una qualsiasi di queste diverse interfacce utente GraphQL. Quindi la nostra API funziona. Questo è l'URL che utilizzeremo. Ora possiamo andare avanti e passare all'applicazione front-end. Quindi quello che voglio fare è creare una nuova prossima app JS. Lo chiameremo come zora UI. Immagino che dovrebbe apparire qui, e quello che vogliamo fare è creare un'interfaccia utente su questa API, quindi quello che farò è usare tailwind, perché tailwind è piuttosto carino. E andrò avanti e installerò il materiale di cui ho bisogno per Tailwind, poi inizializzerò il progetto Tailwind, e poi andremo in globals.css, e andremo avanti e lo faremo .

E ora siamo pronti a partire. Quindi nell'interfaccia utente probabilmente andrò su index.js e questo è ciò su cui faremo il nostro lavoro. Vai avanti ed elimina tutto questo codice qui e le cose di cui avrò bisogno saranno useState e useEffect da react. E probabilmente dovrò anche procurarmi del codice a cui posso fare riferimento qui. Non voglio che i riferimenti mi piacciano direttamente, ma voglio usarlo per iniziare. Quindi abbiamo getServerSideProps. Questo sarà il punto in cui chiameremo la nostra funzione fetchData, e fetchData chiamerà la nostra API GraphQL, e poi arriverà qui come oggetto di scena, e poi eseguiremo semplicemente console.log in quel modo e forse non lo faremo abbiamo anche bisogno di useState perché lo useremo l'anno prossimo, quindi possiamo semplicemente passare tutto in questi oggetti di scena. Quindi è da qui che inizieremo.

Quindi quello che voglio fare è come chiamiamo effettivamente l'API GraphQL. Beh, sai, abbiamo il nostro contributo qui nei nostri documenti. Abbiamo anche della documentazione in giro. Sai, diversi client GraphQL, quindi puoi usare qualcosa come Apollo, oppure puoi usare qualcosa come URQL. Penso che sceglierò URQL solo perché è un po' meno codice. Quindi andrò avanti e installerò URQL e GraphQL, quindi ora abbiamo URQL e GraphQL installati, e quello che voglio fare è fondamentalmente dire semplicemente copiare tutto questo codice, e poi lo spezzeremo nella nostra app. Quindi abbiamo createClient da urql. Abbiamo il nostro URL API, l'URL API con cui vogliamo lavorare sarà questa API. Questo URL qui mi trovo. Per la query, vogliamo utilizzare semplicemente una query che sappiamo funzionerà. Quindi torniamo alla mia API e scriviamo semplicemente una query, quindi la copierò e la incollerò e diremo anche che vogliamo ottenere i primi 10.

Quindi questa è la nostra domanda. Questo sarà il nostro cliente. In un certo senso diciamo creare client. Impostiamo l'URL e poi possiamo chiamarlo per i dati, quindi andiamo avanti e facciamo semplicemente questo, quindi consoliamo i dati di registro. Torneremo semplicemente come un array vuoto. Va bene, va bene, quindi abbiamo la nostra funzionalità di base pronta. Possiamo andare avanti ed eseguirlo. Quindi sembra che devo fermare un altro server che ho in esecuzione, quindi localhost 3000, e quando viene eseguito, penso che dovremmo vederlo disconnesso qui. Quindi eccoci qua, ecco fatto. Abbiamo i nostri dati lì, quindi abbiamo data.data.tokens. Quindi potrei dire restituisci data.data.tokens e poi nella nostra interfaccia utente vediamo che abbiamo i nostri token che dovrebbero essere visualizzati. Va bene, eccoci qua. Quindi abbiamo i nostri 10 token.

Abbiamo il nostro contentURI. Abbiamo i nostri metadatiURI. Il metadataURI contiene cose del genere in cui hai tipo mimeType, il nome, la versione, la descrizione, cose del genere che puoi utilizzare nella tua interfaccia utente. Quindi è fantastico. Quindi abbiamo tutte le funzionalità di base. Ora dobbiamo solo creare un design su di esso. Quindi, per quanto riguarda gli aspetti di progettazione e in realtà un'altra cosa che potremmo dover considerare è come la mappatura dei dati stessi, a causa del modo in cui ritornano. Potremmo volerlo cambiare un po', quindi per esempio, una cosa che non sappiamo proviene direttamente da questi dati sono cose come mimeType, quindi per ottenere il mimeType che ci permetterà di per visualizzarlo, dobbiamo effettivamente chiamare un fetch, chiamare un axios o alcuni tipi di richiesta HTTP per ottenere questi dati JSON. E in questo modo, possiamo sapere se è un'immagine, un video o una gif e come lo mostreremo.

Vogliamo anche solo questi dati, questi metadati comunque. Quindi quello che possiamo fare in pratica è avere una funzione proprio qui che mappa questi dati. Quindi quello che faremo è dire qualcosa come data.data.tokens.map, e poi diremo una sorta di map su tutto, e poi chiameremo fetch to kind di ottenere quei metadati adesso. Fortunatamente ho già creato una funzione che fa questo. In questo modo, non ci deve piacere camminare attraverso tutto ciò. Vado sul mio GitHub. Ho questa funzione di recupero dei dati. Lo sostituirò semplicemente con questo. Forse eliminare parte del file console.log. Va bene, d'accordo. Quindi questa funzione sostanzialmente mapperà tutti i token e chiameremo per recuperare i metadati, quindi aggiorneremo il tipo in base ai metadati.

Quindi, se è mp4, vogliamo mostrare un video. Se è audio, vogliamo mostrare l'audio. Se è un'immagine, vogliamo mostrare l'immagine e, una volta che abbiamo i nuovi metadati aggiornati o aggiornati, a meno che non abbiamo rotto qualcosa qui, dovremmo vedere quei metadati. Penso che aggiornerò la query per restituire solo la prima per ora. Ora riavvierò il server. Va bene, quindi ecco i nostri token, abbiamo i nostri metadati, abbiamo la nostra descrizione, abbiamo il nostro mimeType, abbiamo il nostro nome e abbiamo la versione.

L'ultima cosa che vogliamo fare è creare lo stile effettivo utilizzando Tailwind e avere anche un'interfaccia utente di esempio per quello che utilizzeremo. Quindi andrò avanti e copierò questo, twitterò e renderò disponibile tutta questa roba, e probabilmente la inserirò anche nei commenti, ma il codice per questo, ma non è niente di troppo sofisticato. È solo una specie di CSS di base che utilizza tailwind, ma quello che faremo è questo: abbiamo i nostri oggetti di scena, abbiamo i nostri token, quindi se aggiorniamo, ora vediamo che abbiamo la nostra interfaccia utente qui e cosa potrei fare ora invece di restituirne uno, andiamo avanti e lo riportiamo a 10. Oh, è brutto. Oh penso di sapere cosa mi sto perdendo, mi manca questo. Eccoci qua. Quindi ora la nostra interfaccia utente mostra, sai, tutti i diversi NFT e devo non aver preso in considerazione qualche tipo di mimetype, quindi vediamo di che tipo mime si tratta o semplicemente potrebbe non essere caricato per qualsiasi motivo.

Sembra che potrebbe esserci. Ok, sembra che questo sia in fase di caricamento. Quindi sembra che questo sia audio. Non sono sicuro del motivo per cui l'audio non funziona, ma posso darci un'occhiata, ma è una specie di demo che volevamo solo mostrarti come realizzarlo, e penso che la cosa interessante che potresti fai a questo punto, se sei uno sviluppatore e sei disposto a guadagnare con una delle tue API, penso che questo sia come, ancora una volta, il potere di avere un'applicazione autogovernata che è là fuori e che le persone possono sostanzialmente competere tra loro in base alla qualità per creare le diverse API più preziose e puoi effettivamente pubblicarle sulla rete e iniziare a guadagnare commissioni di query su di esse. Quindi se pubblichi questo, chiunque voglia usarlo potrà usarlo e, in base all'utilizzo, guadagnerai soldi. Non devi nemmeno fare davvero nulla. Lo metti semplicemente là fuori, e poi se le persone lo usano, sostanzialmente guadagnerai una parte del denaro dall'utilizzo, e questo viene fatto scrivendo le tue informazioni e la transazione della pubblicazione sulla blockchain.

Quindi questo è piuttosto interessante, perché fondamentalmente stai pubblicando e una volta che è lì, è sempre lì, e sai, per me è piuttosto potente, e se vuoi farlo, fondamentalmente dovresti avere dei token, quindi io ho alcuni token e posso praticamente pubblicare su Rinkeby o sulla rete principale. Quindi posso andare qui su Rinkeby, e qui ho alcuni test, andare avanti e pubblicarlo, selezionare la rete Rinkeby e probabilmente devo fare qualcosa con il mio andare avanti e disconnettermi da tutti questi diversi account, quindi riconnettermi. Proviamolo ancora una volta. Sembra che io abbia dei problemi con la pubblicazione. Dovrò esaminare cosa sta succedendo. Sembra di sì. Mostra che per qualche motivo ho zero eth, ma non è così. Oh, penso di poter sapere cosa devo fare. Lasciami andare avanti e disconnettermi, quindi connettermi di nuovo. Quindi penso di essere stato autenticato con il portafoglio sbagliato, quindi dopo che questo sarà stato pubblicato, verrà visualizzato sulla rete e posso testarlo perché questa è la rete di test Rinkeby, ma se lo pubblichi sulla rete principale, è quando le persone inizierebbero a essere praticamente in grado di pagare se lo utilizzano.

Quindi smetterò di condividere il mio schermo e, fondamentalmente, inizierò a vedere se qualcuno ha domande o qualcosa del genere.

Questa intervista è stata molto fruttuosa, grazie a Nader Dabit di The Graph, un progetto che risolve questo problema con un servizio ospitato che indicizza i dati blockchain. Questi indici ("sottografi") possono quindi essere interrogati utilizzando l'API GraphQL standard. In termini semplici, i sottografi sono come indici di dati scritti dagli sviluppatori per una logica aziendale specifica e, una volta distribuita la logica aziendale, continuerà ad aggiornare il database corrispondente in base alla distribuzione per facilitare agli sviluppatori l'estrazione e la chiamata in qualsiasi momento . Continueremo a invitare più ospiti a partecipare, sotto forma di interviste, workshop o in qualsiasi altro modo, speriamo di portare più ispirazione a coloro che sono interessati ad esplorare in profondità il livello 2 e di fare del nostro meglio per questo!

- FINE

Nadir Dabit attualmente lavora presso Edge e Node per aiutare a costruire un futuro decentralizzato. In precedenza ha guidato la difesa degli sviluppatori per il web front-end e i dispositivi mobili presso Amazon Web Services; focalizzato su GraphQL, sviluppo di applicazioni web e mobili multipiattaforma e abilitato per il cloud. Ha sviluppato applicazioni e architetture di riferimento su AWS utilizzando una combinazione di GraphQL e tecnologie serverless.

Successivamente, Polygon, Aztec e altri progetti ci forniranno una solida esperienza e grandi intuizioni! Altri workshop saranno annunciati presto. Rimani sintonizzato!

Poligono

• Argomento: Ridimensionare i tuoi Dapps utilizzando Polygon
• Orario:2021.7.20

👀 Vivi qui:http://live.bilibili.com/23288126

azteco

• Argomento: da definire
• Tempo: in sospeso

👀 Vivi qui:http://live.bilibili.com/23288126

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