图片


Farcaster è un protocollo per costruire reti sociali sufficientemente decentralizzate.

Farcaster ha recentemente introdotto il concetto di "frame" che consente di trasformare qualsiasi post o "cast" in un'applicazione interattiva.

Questo tutorial illustra come creare e ospitare il framework Farcaster interamente on-chain, che è anche un esempio di come creare un server decentralizzato.

Ospitando il tuo framework on-chain, sblocchi i seguenti casi d'uso:

  • Il quadro può essere gestito da un'organizzazione autonoma decentralizzata (DAO);

  • I creatori del framework acquisiscono la piena proprietà e non sono limitati dai server centralizzati.

Esercitazione

Questo tutorial utilizza il framework ExpressJS per creare un'API REST e distribuirla tramite Internet Computer Protocol (ICP).

Passaggio 1: scarica DFX

dfx è l'interfaccia della riga di comando per IC SDK, creata da DFINITY per la gestione dei contratti intelligenti dei contenitori ICP.

Esegui il comando seguente per scaricare DFX:

图片

Passaggio 2: scarica Azle

Azle è una libreria per la creazione di contratti intelligenti per contenitori ICP utilizzando Typescript e Javascript.

Più nello specifico, si tratta di un adattatore utilizzato dal Container Development Kit (CDK) o IC SDK per fornire a Typescript e Javascript tutte le funzionalità necessarie per creare e gestire i contratti intelligenti dei container.

Esegui il comando seguente per scaricare Azle:

图片

Tieni presente che, a seconda del tuo dispositivo, potrebbe essere necessario scaricare dipendenze aggiuntive, consulta le seguenti risorse per tutti i requisiti delle dipendenze:

demergent-labs.github.io/azle/get_started.html

Ad esempio, se utilizzi un Mac, esegui il comando seguente:

图片

Passaggio 3: crea un nuovo progetto Azle

Esegui il comando seguente per creare un nuovo progetto utilizzando Azle:

图片

Passaggio 4: crea la cornice

I fotogrammi vengono creati utilizzando i tag OpenGraph specifici di Farcaster a cui si fa riferimento in questo documento.

Ecco un esempio di frame che contiene un'immagine, quattro pulsanti e un collegamento URL:

图片

Salvalo in un file di testo per un utilizzo successivo in questo tutorial.

Passaggio 5: configura il server Express in src/index.ts

Azle fornisce un metodo Server che consente di passare una funzione di callback che deve restituire un'istanza httpServer del nodo.

图片

Restituisce un'istanza httpServer del nodo utilizzando ExpressJS. Questo è un esempio di un httpServer creato con ExpressJS.

图片

Combinando questi due risultati, i risultati sono i seguenti:

图片

Passaggio 6: restituire il framework Farcaster per la chiamata API REST

Restituendo il frame Farcaster per la chiamata API REST, il frame del passaggio 4 contiene un'immagine, quattro pulsanti e un URL.

Questo esempio passa il collegamento dell'immagine, il testo del pulsante e il contenuto del collegamento URL, passa il frame e invia l'intero frame costruito come risposta API:

图片

Passaggio 7: aggiorna src/index.ts con il codice completo dei passaggi 5 e 6

Aggiorna src/index.ts con il seguente codice:

图片图片

Passaggio 8: distribuire l'applicazione

Locale

Distribuiscilo localmente per testare l'applicazione, esegui il comando seguente per distribuirlo localmente:

图片

Dopo aver eseguito questo comando, nella shell verrà visualizzato un messaggio di successo simile a questo.

图片

Tieni presente che l'ID del contenitore e l'ID forniti nel collegamento all'interfaccia Candid del contenitore backend durante la distribuzione saranno diversi dall'esempio mostrato qui.

Se il repository di esempio è stato biforcato, elimina canister_ids.json prima della distribuzione.

I collegamenti all'interfaccia Candid del contenitore backend elencati sono interfacce utente per testare la funzionalità di backend e vengono forniti nel seguente formato:

图片

Gli endpoint API sono un derivato di questo formato e dovrebbero seguire la seguente struttura:

图片

Pertanto, se la distribuzione fornisce un collegamento all'interfaccia Candid del contenitore backend, ad esempio:

图片

Accedi alla tua API tramite questo endpoint di base:

图片

Mainnet (produzione)

Distribuisci sulla rete principale o in produzione per ottenere un'applicazione funzionale Per distribuire Cycles o Gas sulla rete principale, consulta questa guida o lancia jennifertran su Farcaster.

Eseguire il comando seguente per distribuire l'applicazione sulla rete principale del computer Internet.

图片

Dopo aver eseguito questo comando, nella shell verrà visualizzato un messaggio di successo simile al seguente:

图片

Tieni presente che l'ID del contenitore e l'ID forniti nel collegamento all'interfaccia Candid del contenitore backend durante la distribuzione saranno diversi dall'esempio mostrato qui.

Se il repository di esempio è stato biforcato, elimina canister_ids.json prima della distribuzione.

I collegamenti all'interfaccia Candid del contenitore backend elencati sono interfacce utente per testare la funzionalità di backend e vengono forniti nel seguente formato:

图片

Gli endpoint API sono un derivato di questo formato e dovrebbero seguire la seguente struttura:

图片

Pertanto, se la distribuzione fornisce un collegamento all'interfaccia Candid del contenitore backend, ad esempio:

图片

Accedi alla tua API tramite questo endpoint di base:

图片

Passaggio 9: visualizzare in anteprima il framework Farcaster utilizzando il validatore del framework

Puoi visualizzare l'anteprima del Farcaster Frame utilizzando il suo strumento Frame Validator.

Tieni presente che sono supportati solo gli endpoint di produzione della rete principale, non è possibile utilizzare gli endpoint locali.

Inserisci l'endpoint che hai ricevuto nel passaggio 8 e fai clic su Carica, ad esempio se il tuo endpoint è https://swua7-kqaaa-aaaao-a3fna-cai.raw.icp0.io/ l'anteprima dovrebbe assomigliare a questa:

图片

risorsa

Codice di esempio completo:

  • github.com/Gekctek/farcaster-frame-azle

Esempio di come creare un server ExpressJS in catena utilizzando Azle:

  • github.com/demergent-labs/azle/tree/main/examples/express


Crea contratti intelligenti per contenitori su ICP con Azle utilizzando Typescript:

  • demergent-labs.github.io/azle/the_azle_book.html


Un sentito ringraziamento a Gekctek per il suo contributo a questo esempio e Jordan Last per il suo contributo ad Azle.

图片

#内容挖矿 >#ICP >#DFINITY


Contenuti IC che ti interessano

Progresso tecnologico |. Informazioni sul progetto |

Raccogli e segui il canale IC Binance

Rimani aggiornato con le informazioni più recenti