图片


Farcaster es un protocolo para construir redes sociales suficientemente descentralizadas.

Farcaster introdujo recientemente el concepto de "marcos" que le permiten convertir cualquier publicación o "transmisión" en una aplicación interactiva.

Este tutorial describe cómo crear y alojar el marco Farcaster completamente en cadena, que también es un ejemplo de cómo crear un servidor descentralizado.

Al alojar su marco en cadena, desbloquea los siguientes casos de uso:

  • El marco puede ser gestionado por una organización autónoma descentralizada (DAO);

  • Los creadores del marco obtienen la propiedad total y no están restringidos por servidores centralizados.

Tutorial

Este tutorial utiliza el marco ExpressJS para crear una API REST e implementarla a través del Protocolo informático de Internet (ICP).

Paso 1: Descargar DFX

dfx es la interfaz de línea de comandos para IC SDK, creada por DFINITY para gestionar contratos inteligentes de contenedores ICP.

Ejecute el siguiente comando para descargar DFX:

图片

Paso 2: Descarga Azle

Azle es una biblioteca para crear contratos inteligentes de contenedores ICP utilizando Typecript y Javascript.

Más específicamente, es un adaptador utilizado por Container Development Kit (CDK) o IC SDK para proporcionar a Typescript y Javascript toda la funcionalidad necesaria para crear y administrar contratos inteligentes de contenedores.

Ejecute el siguiente comando para descargar Azle:

图片

Tenga en cuenta que, dependiendo de su dispositivo, es posible que necesite descargar dependencias adicionales; consulte los siguientes recursos para conocer todos los requisitos de dependencia:

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

Por ejemplo, si usa una Mac, ejecute el siguiente comando:

图片

Paso 3: crea un nuevo proyecto Azle

Ejecute el siguiente comando para crear un nuevo proyecto usando Azle:

图片

Paso 4: crea el marco

Los marcos se crean utilizando etiquetas OpenGraph específicas de Farcaster a las que se hace referencia en este documento.

A continuación se muestra un ejemplo de un marco que contiene una imagen, cuatro botones y un enlace URL:

图片

Guarde esto en un archivo de texto para usarlo más adelante en este tutorial.

Paso 5: configurar el servidor Express en src/index.ts

Azle proporciona un método de servidor que le permite pasar una función de devolución de llamada que debe devolver una instancia de nodo httpServer.

图片

Devuelve una instancia de httpServer de nodo usando ExpressJS. Este es un ejemplo de un httpServer creado con ExpressJS.

图片

Combinando estos dos resultados, los resultados son los siguientes:

图片

Paso 6: Devolver el marco Farcaster para la llamada a la API REST

Al devolver el marco de Farcaster para la llamada a la API REST, el marco del paso 4 tiene una imagen, cuatro botones y una URL.

Este ejemplo pasa el enlace de la imagen, el texto del botón y el contenido del enlace URL, pasa el marco y envía el marco construido completo como una respuesta API:

图片

Paso 7: actualice src/index.ts con el código completo de los pasos 5 y 6

Actualice src/index.ts con el siguiente código:

图片图片

Paso 8: implementar la aplicación

local

Impleméntelo localmente para probar la aplicación, ejecute el siguiente comando para implementarlo localmente:

图片

Después de ejecutar este comando, aparecerá un mensaje de éxito similar a este en el shell.

图片

Tenga en cuenta que la ID del contenedor y la ID proporcionada en el enlace de la interfaz sincera del contenedor backend durante la implementación serán diferentes del ejemplo que se muestra aquí.

Si el repositorio de muestra se ha bifurcado, elimine canister_ids.json antes de implementarlo.

Los enlaces de interfaz sincera del contenedor de backend enumerados son UI para probar la funcionalidad de backend y se proporcionan en el siguiente formato:

图片

Los puntos finales de API son un derivado de este formato y deben seguir la siguiente estructura:

图片

Entonces, si la implementación proporciona un enlace de interfaz sincero del contenedor backend, por ejemplo:

图片

Acceda a su API a través de este punto final básico:

图片

Red principal (producción)

Implemente en la red principal o en producción para obtener una aplicación funcional. Para implementar Cycles o Gas en la red principal, consulte esta guía o transmita jennifertran en Farcaster.

Ejecute el siguiente comando para implementar la aplicación en Internet Computer Mainnet.

图片

Después de ejecutar este comando, aparecerá un mensaje de éxito similar al siguiente en el shell:

图片

Tenga en cuenta que el ID del contenedor y el ID proporcionados en el enlace de la interfaz sincera del contenedor backend durante la implementación serán diferentes del ejemplo que se muestra aquí.

Si el repositorio de muestra se ha bifurcado, elimine canister_ids.json antes de implementarlo.

Los enlaces de interfaz sincera del contenedor de backend enumerados son UI para probar la funcionalidad de backend y se proporcionan en el siguiente formato:

图片

Los puntos finales de API son un derivado de este formato y deben seguir la siguiente estructura:

图片

Entonces, si la implementación proporciona un enlace de interfaz sincero del contenedor backend, por ejemplo:

图片

Acceda a su API a través de este punto final básico:

图片

Paso 9: Obtenga una vista previa del marco de Farcaster utilizando el validador de marco

Puede obtener una vista previa de Farcaster Frame utilizando su herramienta Frame Validator.

Tenga en cuenta que solo se admiten puntos finales de producción de la red principal; no se pueden utilizar puntos finales locales.

Ingrese el punto final que recibió en el paso 8 y haga clic en Cargar, por ejemplo, si su punto final es https://swua7-kqaaa-aaaao-a3fna-cai.raw.icp0.io/ la vista previa debería verse así:

图片

recurso

Código de muestra completo:

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

Ejemplo de cómo construir un servidor ExpressJS en cadena usando Azle:

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


Cree contratos inteligentes de contenedores en ICP con Azle usando Typecript:

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


Muchas gracias a Gekctek por su contribución a este ejemplo y a Jordan Last por su contribución a Azle.

图片

#内容挖矿 >#ICP >#DFINITY


Contenido IC que te interesa

Progreso tecnológico | Información del proyecto | Eventos globales

Recopile y siga el canal IC Binance

Manténgase actualizado con la información más reciente