DEV Community

Sergio Martinez Marin
Sergio Martinez Marin

Posted on

Analizando el "Hola mundo" en NEAR Contrato y Frontend 🤠

Primeros pasos contratos inteligentes con NEAR
Hola a todos, anteriormente habíamos analizado los pasos básicos del cliente de NEAR basado en RUST. Cliente rust. El día de hoy vamos dar los primeros pasos en los contratos inteligentes en NEAR.

Los contratos en NEAR tradicionalmente se han hecho en el lenguaje RUST, afortunadamente han tenido la buena idea de optar por usar librerías de RUST y no han creado ningún lenguaje único y propietario de NEAR, por lo tanto las personas que manejan RUST escribir contratos inteligentes va a ser algo poco complejo.

Lamentablemente RUST a pesar de ser el lenguaje más “amado 😍” su sintaxis no es en lo absoluto similar a lenguajes como C. C++, C#, JAVA, Javascript, Python, etc…lo cual requiere ponerle amor y dedicación a este lenguaje, ya que es un lenguaje que definitivamente es el presente y futuro en soluciones blockchain.

Por fortuna al generar los contratos inteligentes en NEAR, se genera un WebAssembly, y es por ello que el equipo de NEAR también ha pensado en lenguajes más populares para generar este mismo WebAssembly como lo es JavaScript, el cual es muy conocido, popular y ampliamente usado. Este artículo mostrará como se basará en generación de contratos mediante JavaScript.

Image description
Su majestad Webassembly al rescate!

Prerequisitos:

Image description
Para los usuarios de Windows , si o si, por el momento hay que usar WSL, en el cliente NEAR y la instalación de NodeJS

1) Instalación del cliente de NEAR ( mejor el de RUST)
2) Instalación de NodeJS

Para el paso 2, es más práctico usar NVM : Node Version Manager
Para instalar el nvm vamos al link oficial de este proyecto
https://github.com/nvm-sh/nvm

Una ves instalado el NVM vamos a https://nodejs.org/en y vemos la última versión LTS ( al día de este artículo es la versión 20.14.0), procedemos a instalarla de la siguiente manera:
nvm install 20.14.0

Image description

Ahora vamos a empezar con el clásico Hola mundo

Image description

En la terminal escribimos

npx create-near-app@latest
Enter fullscreen mode Exit fullscreen mode

Image description


Seleccionamos A Smart Contract

Image description
Seleccionamos sobre que lenguaje deseamos trabajar, para este caso en JS/TS

Image description
Le damos un nombre al proyecto:

Image description
Ponemos la opción “Y” para instalar el sdk de NEAR

Image description
Listo , ya tenemos creado el ambiente para crear contratos en NEAR 😊

Image description
Ingresamos al directorio hola mundo con el comando :

 cd hola-mundo
Enter fullscreen mode Exit fullscreen mode

y allí escribimos: code .

Análisis del contrato hola mundo

Image description

import { NearBindgen, near, call, view } from 'near-sdk-js';

NearBindgen Es el decorador de facto que se usa al empezar todos los contratos en NEAR.
Near: tiene las primitivas de envío de fondos, altura del bloque, y logs, entre otros
call: Llamado a métodos del contrato que cambian estados del contrato ( escritura) y poseen un coste asociado a la operación
view: Llamado a métodos del contrato de sólo lectura.

greeting: string = 'Hello';

Atributo de clase tipo string , lo clásico de un hola mundo con clases.

@view({}) // This method is read-only and can be called for free
  get_greeting(): string {
    return this.greeting;
  }
Enter fullscreen mode Exit fullscreen mode

Tenemos el decorador que es una función de sólo lectura y su implementación no tiene alguna particularidad diferente al estándar de typescript.

@call({}) // This method changes the state, for which it cost gas
  set_greeting({ greeting }: { greeting: string }): void {
    near.log(`Saving greeting ${greeting}`);
    this.greeting = greeting;
  }
Enter fullscreen mode Exit fullscreen mode

Tenemos el decorador que es una operación de escritura.
Como particularidad en los parámetros, difiere un poco a como se usan los parámetros en una función normal donde sólo sería (greeting:string):void y en la parte izquierda se ponen los parámetros y en la derecha se especifican su tipo.
Algo muy interesante es que podemos guardar los logs en la blockchain, siempre y cuando sean muy relevantes, ya que tienen un costo asociado.

Compilación del contrato
Ejecutamos el comando:

npm run build
Enter fullscreen mode Exit fullscreen mode

Image description

Si somos observadores, vemos que se ha creado una carpeta llamada build con un código en WebAssembly.

Image description


Creación de subcuentas

A diferencia de las EVM, donde un contrato es un ente autónomo donde una billetera (address) paga un fee por su despliegue y nada más, en NEAR los contratos se asocian a una dirección.
Por ello lo más común es crear algo llamado subcuentas, una subcuenta aplica lo mismo que los domnios y subdominios de internet.
EJ: neacolombiadev.testnet es la cuenta principal ( dominio)
Una subcuenta para este ejemplo seria holamundo.nearcolombiadev.testnet
No hay limite de subcuentas, entonces no tendríamos problema con el despliegue de contatos.
Para crear una subcuenta entramos al cliete de near y ponemos la opción de account

Image description

Ponemos la opción de create-account

Image description
Opción fund-myself

Image description
Ponemos el nombre de la subcuenta:

Image description
Ponemos la verificación que la subcuenta no exista

Image description
Indicamos la cantidad de near con que deseamos darle fondos a la cuenta:

Image description
Elegimos la opción de generar la llave automáticamente.

Image description
Ponemos la opción de grabar en el sistema legacy

Image description
Elegimos opción de testnet

Image description
Seleccionamos sign-with-key-chain

Image description
Finalmente la opción de de send

Image description
En el explorador de bloques vemos nuestra subcuenta creada exitosamente

Image description
En la cuenta de nearcolombiadev.testnet teníamos 10 NEAR, menos el conste de la creación de la subcuenta y fondeo , podemos ver el nuevo saldo:

Image description


Despliegue del contrato

Si por alguna razón nos quedamos sin fondos, podemos ir a la faucet de near:
https://near-faucet.io/

Por la terminal ingresamos al cliente de near y seleccionamos la opción de contrato.

Image description
Seleccionamos deploy

Image description

Elegimos la cuenta con la que queremos hacer el deploy, en este caso holamundo.colombiadev.testnet

Image description

Ponemos la ruta del contrato compilado: ./build/hello_near.wasm

Image description

Image description

Ponemos la opción without-init-call: el init call es el “constructor” de la clase y se pueden poner parámetros”

Image description
Elegimos que va para testnet

Image description

Opción sign-with-keychain

Image description

Finalmente en send

Image description

Si todo sale exitoso: vamos al nuevo explorador de bloques

https://testnet.nearblocks.io/
Allí ponemos la subcuenta que creamos anteriormente: holamundo.nearcolombiadev.testnet

Image description
En el explorador de bloques vemos la transacción de despliegue de contratos y podemos ver los métodos del contrato por la opción contract

Image description
Click en contract methods

Image description

Cómo interactuar con el contrato

Lo podemos hacer por el cliente de near o por la página https://testnet.nearblocks.io/
Empecemos de la forma fácil y visual, por nearblocks! 😉
Primero debemos ingresar por sign in

Image description
Seleccionamos la billetera:

Image description

En nuestro caso particular tenemos la cuenta asociada con meteorWallet

Super importante la pantalla siguiente: sólo autorizamos a saber billeteras y saldos, pero no a realizar transacciones o firmar transacciones a nombre de nosotros!

Image description

A continuación vamos a poner la dirección donde tenemos el contrato:
holamundodev.testnet

Image description
Entramos por la parte de contrato:

Image description

Seleccionamos contract methods

Image description

Image description
Verificamos que estemos conectados.

Llamado de lectura get_greeting

Desplegamos get_greeting y click en query

Image description
Acá observamos el contenido de la variable greeting del contato

Llamado de escritura: set_greeting
Ampliamos set_greeting, click en add en arguments, el parámetro se llama greeting y es tipo string, Ponemos el valor deseado y click en write

Image description
Damos click en confirmar

Image description

A continuación sale el fee que se va a gastar y le damos aprobar a la billetera

Image description
Para confirmar el nuevo valor podemos usar el método get_greeting

Image description

Ahora hagámoslo con el cliente de near , ( para los amantes de la consola 😎)
Llamado de lectura get_greeting
1) Por terminal ponemos near
2) Seleccionamos contract
3) Call-function
4) As-read-only
5) Seleccionamos la cuenta holamundo.nearcolombiadev.testnet
6) Ponemos que la función es: get_greeting
7) Seleccionamos que los parámetros son json-args
8) Como no hay parámetros escribimos {}
9) Seleccionamos que está en testnet
10) Finalmente ponemos que lo queremos realizar con la altura del bloque actual

Image description

Llamado de escritura: set_greeting
1) Llamamos a termnial el programa de near
2) Opción contract
3) Opción Call-function
4) Opción as-transaction
5) Opción holamundo.nearcolombiadev.testnet
6) La función es : set_greeting
7) Opción json-args
8) Escriibimos el parámetro en formato json {"greeting":"Hola desde la consola 😍"}
9) Dejamos por defecto el valor sugerido de la aplicación del gas a pagar
10) No hay desposito, entonces lo dejamos en 0NEAR
11) Seleccionamos desde que cuenta lo queremos firmar, para este caso desde nearcolombiadev.testnet
12) Opción testnet
13) Opción sign-with-keychain
14) Finalmente en send

Image description

Podemos repetir desde consola para ver el valor nuevo en la variable del contrato

Image description

Y donde dejamos a near.log del contato?

Esta opción se graba por cada transacción, en este caso al revisar la última transacción de escritura
https://testnet.nearblocks.io/en/txns/7HKTJGu5AVYoXL9ccWLx5SN8j6mNqXzrmzstCpm2Dxm7?tab=execution

Image description
Podemos ver claramente donde se guardan los logs. Estos deben ser bien pensados, que sea algo relevante con fines de auditoria, seguimiento o información relevante.


Image description

Ahora vamos a realizar la parte web. Near de por si crea toda la app por defecto del “hola mundo”, esto implica contrato y conexión a la billetera, pero obviamente otro contrato y no el de nosotros, así también apenas tiene conexiones por defecto a HereWallet y MyNear Wallet.

Primeros pasos:
En la terminal escribimos

npx create-near-app@latest
Enter fullscreen mode Exit fullscreen mode

Image description
Elegimos que es una Web app
Esta para Next-JS, por convenciones más actualizadas, seleccionamos ( App-Router)

Image description
Seleccionamos que no queremos componentes BOS

Image description
Para este ejemplo ponemos de nombre del proyecto: hello-near-web

Image description
Finalmente ponemos en Y que deseamos instalar los módulos necesarios para poder ejecutar.

Image description

Puedes ejecutar el programa tal cual está, pero, hagámosle unas adaptaciones 👨‍🔧

Image description

Nos ubicamos en el directorio generado hello-near-web y abrimos el visual studio code o editor favorito.

En config.js vemos que tenemos las subcuentas donde tenemos alojado el contrato.
Cómo estamos ejecutando todo el tutorial en testnet, reemplazamos la subcuenta holamundo.nearcolombiadev.testnet

Image description

Image description

Abrimos la carpeta wallets y abrimos el archivo near.js

Como podemos observar sólo hay 2 billeteras instaladas, para que el usuario elija, estas son HereWallet y MyNearWallet

Image description

Para añadir más billeteras entramos al buscardor de paquetes Para añadir más billeteras entramos al buscardor de paquetes https://www.npmjs.com/

Allí ponemos en la búsqueda lo siguiente: _ @near-wallet-selector_.

Aparecen más billeteras, sólo es instalar las billeteras que deseamos incluir en la lista de billeteras que el usuario desee elegir.

Para nuestro caso vamos a incluir la billetera meteor

Image description
Ingresamos a este link: https://www.npmjs.com/package/@near-wallet-selector/meteor-wallet Y seguimos las instrucciones para su instalación.
npm install @near-wallet-selector/meteor-wallet

Luego incluimos el import del instructivo

import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet";
Enter fullscreen mode Exit fullscreen mode

Finalmente incluimos setupMeteorWallet en la parte de modules

Image description

Image description

Image description
Si no eres análitico y no deseas ir a fondo eso es todo, ya puede ejecutar el front 😆

Y donde se invocan los métodos de lectura y escritura del contrato?

Image description
Dentro de la carpeta app/hello-near está el archivo page.js

Image description

Función de lectura:
Acá vemos que al empezar el user effect llamamos el llamado al método tipo de lectura “ViewMethod” con parámetos del contrato y su respectivo método

Image description
Si sómos analíticos, vemos que el objeto wallet está dentro del context.js

Image description

El objeto wallet no pertenece a la el sdk de near, es algo generardo localmente.

Image description
La clase Wallet nos crea una capa de abstracción para usarlo más facilmente los llamados al SDK de near en operaciones de lectura y escritura.

Image description

En el llamado vemos que si tenemos un RPC (proveedor de servicio), donde se va la cuenta , para este caso hola-mundo.nearcolombiadev.testnet, el método get_greeting y sin ningún parámeto {}

Image description

Función de escritura:
Volviendo a page.js dentro de la carpeta _hello-nea_r,se invoca la escritura y luego la parte de lectura para reflejar el cambio.

Image description

En near.js dentro del directorio wallet, vemos que no se interactúa con un RPC, se interactúa con la billetera que hayamos seleccionado al hacer login, y se hace la operación firmándola y enviando la transacción.

Image description

Ahora si, vamos a correr esta aplicación:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Le damos click en near integration

Image description
Ya podemos ver el método de lectura de contrato

Image description
Si damos click en login vemos que ya incorpora la billetera de Meteor

Image description
Y ya estamos en la capacidad de grabar un nuevo saludo.

Image description

Image description

Bueno, esperamos que haya quedado un poco claro cómo funcionan estos contratos y su parte web.

La base que deja NEAR con viewMethod y callMethod en near.js prácticamente los podemos usar para nuestros propios llamados a los métodos de cualquier contrato en la parte web.
Hasta la próxima 🤗.

Código fuente: github

Top comments (0)