5. Crear un frontend Hello World
En los ejemplos anteriores, invocamos los contratos utilizando Stellar CLI, y en esta última parte de la guía vamos a crear una aplicación web que interactúa con el contrato Hello World a través de enlaces de TypeScript.
Este ejemplo muestra una forma de crear un enlace entre un contrato y un frontend, para una guía más completa consulta la documentación Crear un frontend Dapp.
Inicializar una cadena de herramientas para frontend
Puedes crear un dapp Stellar con cualquier cadena de herramientas para frontend o integrarlo en cualquier aplicación de stack completo existente. Para este tutorial, vamos a utilizar Astro. Astro trabaja con React, Vue, Svelte, cualquier otra biblioteca de interfaz de usuario o sin biblioteca de interfaz de usuario en absoluto. En este tutorial, no estamos utilizando una biblioteca de interfaz de usuario. Las partes específicas del contrato inteligente de este tutorial serán similares sin importar qué cadena de herramientas para frontend utilices.
Si eres nuevo en el frontend, no te preocupes. No profundizaremos demasiado. Pero será útil para ti ver y experimentar el proceso de desarrollo de frontend utilizado por aplicaciones de contratos inteligentes. Cubriré los aspectos relevantes de JavaScript y Astro, pero enseñar todo el desarrollo de frontend y Astro está más allá del alcance de este tutorial.
Vamos a comenzar.
Vas a necesitar Node.js v20 o superior. Si aún no lo has hecho, instálalo ahora.
Queremos crear un proyecto Astro con el contrato Hello World de las lecciones anteriores integrado. Para hacerlo, instalamos el proyecto Astro por defecto:
npm create astro@latest
Este proyecto tiene la siguiente estructura de directorios.
extra-escape
├── astro.config.mjs
├── package-lock.json
├── package.json
├── packages
├── public
├── README.md
├── src
│ ├── assets
│ │ ├── astro.svg
│ │ └── background.svg
│ ├── components
│ │ └── Welcome.astro
│ ├── layouts
│ │ └── Layout.astro
│ └── pages
│ └── index.astro
└── tsconfig.json
Como ya hemos desplegado estos contratos con alias, podemos reutilizar los archivos de ID de contrato generados copiándolos del directorio soroban-hello-world/.stellar en este proyecto:
cp -R ../.stellar/ .stellar
Generar un paquete NPM para el contrato Hello World
Antes de abrir los nuevos archivos de frontend, generemos un paquete NPM para el contrato Hello World. Esta es nuestra forma sugerida de interactuar con contratos desde frontends. Estas bibliotecas generadas funcionan con cualquier proyecto JavaScript (no con una UI específica como React), y facilitan trabajar con algunos de los aspectos más complicados de los contratos inteligentes en Stellar, como codificar XDR.
Esto va a utilizar el comando CLI stellar contract bindings typescript:
stellar contract bindings typescript \
--network testnet \
--contract-id hello_world \
--output-dir packages/hello_world
¡Ten en cuenta que pudimos utilizar el alias del contrato, hello_world, en lugar del ID del contrato!
El enlace se creará como un paquete NPM en el directorio packages/hello_world como se especifica en el comando CLI. Necesitaremos compilar el paquete de enlaces, ya que (en su estado inicial) el paquete es mayormente tipos y stubs de TypeScript para las diversas funciones del contrato.
cd packages/hello_world
npm install
npm run build
cd ../..
Intentamos mantener el código en estas bibliotecas generadas legible, así que ve y explora. Abre el nuevo directorio packages/hello_world en tu editor. Si has construido o contribuido a proyectos de Node, todo te parecerá familiar. Verás un archivo package.json, un directorio src, un tsconfig.json, e incluso un README.
Llamar al contrato desde el frontend
Ahora abramos src/pages/index.astro y utilicemos el enlace para llamar a la función del contrato hello con un argumento.
El proyecto Astro por defecto consiste en una página (pages/index.astro) y un componente de bienvenida (component/Welcome.astro), y no necesitamos ninguno de esos códigos. Reemplaza el código de pages/index.astro con este código (el componente de bienvenida no será necesario):
---
import * as Client from './packages/hello_world';
const contract = new Client.Client({
...Client.networks.testnet,
rpcUrl: 'https://soroban-testnet.stellar.org:443'
});
const { result } = await contract.hello({to: "Devs!"});
const greeting = result.join(" ");
---
<h1>{greeting}</h1>
Primero importamos la biblioteca de enlaces, y luego necesitamos definir un cliente de contrato que podamos usar para invocar la función del contrato que desplegamos en testnet en un paso anterior.
La función del contrato hello() se invoca de forma sincrónica con el argumento {to: "Devs!"} y la respuesta esperada es un arreglo que consiste en "Hello" y "Devs!". Unimos el arreglo de resultados y la constante greeting debería ahora contener el texto Hello Devs!
Bajando a la sección HTML ahora queremos mostrar el texto greeting en el navegador. ¡Veámoslo en acción! Inicia el servidor de desarrollo:
npm run dev
Y abre localhost:4321 en tu navegador. ¡Deberías ver el saludo del contrato!
Puedes intentar actualizar el argumento a { to: 'Stellar' }. Cuando guardes el archivo, la página se actualizará automáticamente.
Cuando inicies el servidor de desarrollo con npm run dev, verás una salida similar en tu terminal a cuando ejecutaste npm run init. Esto es porque el script dev en package.json está configurado para ejecutar npm run init y astro dev, para que puedas asegurarte de que tu contrato desplegado y tu paquete NPM generado estén siempre sincronizados. Si quieres simplemente iniciar el servidor de desarrollo sin el script initialize.js, puedes ejecutar npm run astro dev.