Guida: NFT dinamici basati sul meteo locale

Published in

Phala Italia

7 min readJan 19, 2024

Come costruire NFT dinamici in base al meteo

La capacità di creare/coniare/”mintare” e aggiornare dinamicamente token non fungibili (NFT) sulla base di dati del mondo reale è un concetto facile da comprendere. In questa guida ti guideremo attraverso il processo di creazione di un NFT che aggiorna la sua immagine in base alle condizioni meteorologiche della città locale assegnata all’NFT al momento della pubblicazione. Ciò è ottenuto tramite Phat Contract 2.0 di Phala che controlla il meteo e determina l’immagine appropriata da impostare per l’URI del token NFT.Design

Il percorso dell’utente è costituito da due flussi distinti. Il primo prevede la creazione di un NFT e la selezione di una città per il monitoraggio meteorologico. Nella seconda, gli utenti possono controllare il meteo e, se le condizioni cambiano, aggiornare l’immagine URI del token NFT.

1) Flusso di creazione dell’NFT

Per prima cosa l’utente selezionerà una città valida per richiedere un nuovo conio di un NFT WeatherMojo. Il meteo della città selezionata viene recuperato tramite una richiesta HTTPS all’API wttr.in. Una volta restituiti i risultati, l’immagine IPFS viene selezionata per correlarla alle condizioni meteorologiche attuali e i metadati per il nuovo NFT verranno formattati in una stringa JSON. Successivamente, la stringa JSON verrà archiviata in un bucket S3 su IPFS tramite l’API 4Everland e il tokenURI verrà restituito come parte della risposta al Consumer Contract su Polygon. Ogni volta che viene ricevuta la risposta, il Consumer Contract proverà quindi a coniare un nuovo NFT WeatherMojo sull’account utente che ha richiesto l’NFT WeatherMojo.

2) Flusso di aggiornamento dell’NFT (soleggiato → nuvoloso)

Innanzitutto l’utente selezionerà la città valida del proprio NFT WeatherMojo e richiederà di aggiornare il meteo. Il meteo della città selezionata viene recuperato tramite una richiesta HTTPS all’API wttr.in. Una volta restituiti i risultati, l’immagine IPFS viene selezionata per essere correlata alle condizioni meteorologiche attuali e i metadati per l’NFT corrente verranno formattati in una stringa JSON. Successivamente, la stringa JSON verrà archiviata in un bucket S3 su IPFS tramite l’API 4Everland e il tokenURI verrà restituito come parte della risposta al Consumer Contract su Polygon. Ogni volta che viene ricevuta la risposta, il Consumer Contract emetterà quindi un evento di aggiornamento dei metadati per l’NFT WeatherMojo dell’utente richiedente.

Preparare lo storage 4Everland S3 su IPFS

Nota: questo passaggio richiede la presenza di un account e la generazione di una chiave API per interagire con l’API HTTP S3. Per maggiori informazioni https://www.4everland.org/.

Per prima cosa creiamo un Bucket nella Dashboard 4Everland. Questa si troverà nel pannello laterale di sinistra del sito e lì selezionerete Storage Bucket(S3). A questo punto selezionerete + New Bucket, creandolo. In questo esempio ho scelto weather-mojo come nome.

Dopo aver cliccato OK vedrete il nuovo bucket creato in basso. Il Bucket S3 weather-mojo conterrà le informazioni aggiornate per ognuno dei nostri NFT ERC-721 WeatherMojo.

Per gli sviluppatori

Passo 1: coniare l’NFT

Il primo passo in questo processo è coniare il tuo NFT. Questo NFT sarà unico in quanto la sua immagine sarà determinata dalle condizioni meteorologiche attuali.

Apri mumbai.polygonscan.com e arriva alla funzione request. Inserisci una città. Ho usato Aomori per questo esempio.

2. Seleziona il tab Transactions per vedere la request. Qualche secondo dopo, il Phat Contract recupererà le informazioni meteo, aggiornerà il Bucket S3 con i metadati dell’NFT relativi alla città e darà un feedback al Consumer Contract con una chiamata Meta TX Rollup U256Cond Eq.

3. Conferma che il nuovo NFT WeatherMojo NFT è stato coniato con successo tramite il tuo marketplace preferito. Questo esempio lo mostra nella dashboard di ThirdWeb.

Congratulazioni! Hai appena prodotto il tuo primo NFT basato sul meteo!

Passo 2: aggiornare l’immagine dell’NFT in base al meteo locale

Ora che hai ottenuto il tuo NFT, configuriamolo per aggiornare la sua immagine in base alle condizioni meteorologiche nella città selezionata.

1. Prima di farlo, controlliamo il meteo attuale per un NFT WeatherMojo creato in precedenza. Uso un NFT basato su MexicoCity per avere una città il cui meteo sia cambiato dopo la creazione ma la stessa cosa varrebbe per il precedente.

2. Apri mumbai.polygonscan.com e arriva alla funzione updateWeather. Poi scegli una città. Io ho messo MexicoCity in questo esempio.

3. Come nel passo del conio selezionare il tab Transactions per vedere che la transazione updateWeather è terminata con successo. Qualche secondo dopo, il Phat Contract recupererà le informazioni meteo, aggiornerà il Bucket S3 con i metadati dell’NFT relativi alla città e darà un feedback al Consumer Contract con una chiamata Meta TX Rollup U256Cond Eq.

4. Ora controllate le condizioni meteo per la vostra città e che i metadati dell’NFT sono stati aggiornati appropriatamente.

Passo 3: capire la logica del Phat Contract

La magia dietro questo NFT dinamico è in un Phat Contract. Valuta il meteo nella vostra città e sceglie l’immagine appropriata per l’NFT.

1. Il programma off-chain viene eseguito in background, controllando periodicamente le condizioni meteorologiche per la tua città se c’è una richiesta per un nuovo conio di NFT o per aggiornare il meteo per un NFT già esistente. Il codice per recuperare il meteo è il seguente:


function fetchWeatherApi(apiUrl: string, city: string): any {
  const weatherFormat = '?format={"name":"%l","description":"Weather+in+%l","external_url":"https://wrlx-bucket.4everland.store/%l/weather","image":"%x","attributes":[{"trait_type":"timestamp","value":"%T+%Z"},{"trait_type":"city","value":"%l"},{"trait_type":"weather","value":"%C+%t"}]}';
  const httpUrl = `${apiUrl}${city}${weatherFormat}`;
  let headers = {
    "Content-Type": "application/json",
    "User-Agent": "phat-contract",
  };
  let response = pink.httpRequest({
    url: httpUrl,
    method: "GET",
    headers,
    returnTextBody: true,
  });
  let respBody = response.body;
  if (typeof respBody !== "string") {
    throw Error.FailedToDecode;
  }
  console.log(respBody);
  return JSON.parse(respBody);
}

2. In base ai risultati delle condizioni meteorologiche, il programma seleziona un’immagine appropriata in base al simbolo restituito dalle API wttr.in.

const WEATHER_SYMBOL_PLAIN = {
  "?": "https://ipfs.apillon.io/ipfs/QmV5apTs4snioxEFj5YmhipNpLgjGNk6hcgJj5vEcK7oxv",
  "mm": "https://ipfs.apillon.io/ipfs/QmNYBmQKvfEnAnGRbhTdZ8XxAp9BDpvCnWqS1VkKTzFy1S",
  "=": "https://ipfs.apillon.io/ipfs/QmNYBmQKvfEnAnGRbhTdZ8XxAp9BDpvCnWqS1VkKTzFy1S",
  "///": "https://ipfs.apillon.io/ipfs/QmVUDR7JosCXj2XXBax6rTiJu42vhSv3HSMNaj458ogxxN",
  "//": "https://ipfs.apillon.io/ipfs/QmVUDR7JosCXj2XXBax6rTiJu42vhSv3HSMNaj458ogxxN",
  "**": "https://ipfs.apillon.io/ipfs/QmbofYJo4PyVfckuqQAiPnBRsZ1mL5yo7SfFH8c1TqwhGH",
  "*/*": "https://ipfs.apillon.io/ipfs/QmbofYJo4PyVfckuqQAiPnBRsZ1mL5yo7SfFH8c1TqwhGH",
  "/": "https://ipfs.apillon.io/ipfs/QmVUDR7JosCXj2XXBax6rTiJu42vhSv3HSMNaj458ogxxN",
  ".": "https://ipfs.apillon.io/ipfs/QmVUDR7JosCXj2XXBax6rTiJu42vhSv3HSMNaj458ogxxN",
  "x": "https://ipfs.apillon.io/ipfs/QmVUDR7JosCXj2XXBax6rTiJu42vhSv3HSMNaj458ogxxN",
  "x/": "https://ipfs.apillon.io/ipfs/QmbofYJo4PyVfckuqQAiPnBRsZ1mL5yo7SfFH8c1TqwhGH",
  "*": "https://ipfs.apillon.io/ipfs/QmbofYJo4PyVfckuqQAiPnBRsZ1mL5yo7SfFH8c1TqwhGH",
  "*/": "https://ipfs.apillon.io/ipfs/QmbofYJo4PyVfckuqQAiPnBRsZ1mL5yo7SfFH8c1TqwhGH",
  "m": "https://ipfs.apillon.io/ipfs/QmV5apTs4snioxEFj5YmhipNpLgjGNk6hcgJj5vEcK7oxv",
  "o": "https://ipfs.apillon.io/ipfs/QmV5apTs4snioxEFj5YmhipNpLgjGNk6hcgJj5vEcK7oxv",
  "/!/": "https://ipfs.apillon.io/ipfs/QmVUDR7JosCXj2XXBax6rTiJu42vhSv3HSMNaj458ogxxN",
  "!/": "https://ipfs.apillon.io/ipfs/QmVUDR7JosCXj2XXBax6rTiJu42vhSv3HSMNaj458ogxxN",
  "*!*": "https://ipfs.apillon.io/ipfs/QmbofYJo4PyVfckuqQAiPnBRsZ1mL5yo7SfFH8c1TqwhGH",
  "mmm": "https://ipfs.apillon.io/ipfs/QmNYBmQKvfEnAnGRbhTdZ8XxAp9BDpvCnWqS1VkKTzFy1S",
}

3. Questa immagine viene quindi impostata come nuova immagine per il tuo NFT, aggiornandola effettivamente per riflettere le condizioni meteorologiche attuali. Queste informazioni sono formattate in JSON e aggiornate nel bucket 4Everland S3 per la città selezionata. Per aggiornare il bucket S3, il Phat Contract deve chiamare invokeContract() relativo al Phat Contract Rust dello storage S3.

function updateS3Storage(city: string, metadata: string) {
  console.log(metadata)
  let uint8Array = new Uint8Array(metadata.length);
  for (let i = 0; i < metadata.length; i++) {
    uint8Array[i] = metadata.charCodeAt(i);
  }
  const endpoint = 'endpoint.4everland.co'
  const region = 'us-west-1'
  const bucket = 'wrlx-bucket'
  const object_key = `${city}/weather`;
  const value = uint8Array;
  const bytes = WalkerImpl.encode([
    endpoint,
    region,
    bucket,
    object_key,
    Array.from(value)
  ], encodeS3Put)
  const decoded = WalkerImpl.decode(bytes, decodeS3Put)
  console.info(`input decoded: ${decoded}`)
  console.log(bytes);
  const delegateOutput = pink.invokeContract({
    callee:
        "0x6295f7139ce955037419c444341f29e5ccc7a1e2165d6ca8591a4c401fb37abe",
    selector: 0xa2cb64e1,
    input: bytes,
  });
  console.log(`output: ${delegateOutput}`);
}

Passo 4: modifica dinamica dell’NFT

Se le condizioni meteorologiche cambiano e un proprietario NFT richiede di aggiornare il meteo, il Phat Contract seguirà un processo simile al passaggio 3 e aggiornerà di conseguenza i metadati dell’NFT. Ciò significa che il tuo NFT viene modificato dinamicamente e riflette sempre le ultime condizioni meteorologiche.

Quando le condizioni meteorologiche cambiano, il programma off-chain attiva un aggiornamento dell’NFT.
Vengono controllate le nuove condizioni meteorologiche e viene selezionata una nuova immagine insieme ai metadati NFT formattati in JSON da aggiornare nel bucket 4Everland S3.
L’NFT viene aggiornato con la nuova immagine, che riflette il cambiamento delle condizioni meteorologiche.

Conclusioni

Voilà! Ora possiedi un NFT che aggiorna la sua immagine con il meteo della tua città. Questo tocco speciale ne migliora l’interattività, distinguendo il tuo NFT come una risorsa digitale davvero unica nel suo genere.

Happy minting!

Questo è percorso completo.

Per prima cosa chiediamo di coniare un nuovo NFT meteo, ma questo fallisce perché la collezione NFT MojosWeather non dispone delle autorizzazioni concesse al Consumer Contract come Minter.
Concediamo al Consumer Contract un ruolo di Minter e richiediamo il conio di un NFT MojosWeather con la città impostata a MexicoCity.
L’NFT viene coniato per il richiedente e possiamo vedere l’NFT apparire con le ultime informazioni meteorologiche per Città del Messico.
Fortunatamente per noi, il giorno successivo il tempo è cambiato e quando chiediamo di aggiornare il meteo per Città del Messico, i metadati NFT vengono aggiornati dinamicamente con la nuova immagine e i nuovi dati.