This content originally appeared on DEV Community and was authored by Sergio Martinez Marin
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.
Su majestad Webassembly al rescate!
Prerequisitos:
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
Ahora vamos a empezar con el clásico Hola mundo
En la terminal escribimos
npx create-near-app@latest
Seleccionamos A Smart Contract
Seleccionamos sobre que lenguaje deseamos trabajar, para este caso en JS/TS
Le damos un nombre al proyecto:
Ponemos la opción “Y” para instalar el sdk de NEAR
Listo , ya tenemos creado el ambiente para crear contratos en NEAR 😊
Ingresamos al directorio hola mundo con el comando :
cd hola-mundo
y allí escribimos: code .
Análisis del contrato hola mundo
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;
}
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;
}
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
Si somos observadores, vemos que se ha creado una carpeta llamada build con un código en WebAssembly.
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
Ponemos la opción de create-account
Opción fund-myself
Ponemos el nombre de la subcuenta:
Ponemos la verificación que la subcuenta no exista
Indicamos la cantidad de near con que deseamos darle fondos a la cuenta:
Elegimos la opción de generar la llave automáticamente.
Ponemos la opción de grabar en el sistema legacy
Elegimos opción de testnet
Seleccionamos sign-with-key-chain
Finalmente la opción de de send
En el explorador de bloques vemos nuestra subcuenta creada exitosamente
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:
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.
Seleccionamos deploy
Elegimos la cuenta con la que queremos hacer el deploy, en este caso holamundo.colombiadev.testnet
Ponemos la ruta del contrato compilado: ./build/hello_near.wasm
Ponemos la opción without-init-call: el init call es el “constructor” de la clase y se pueden poner parámetros”
Elegimos que va para testnet
Opción sign-with-keychain
Finalmente en send
Si todo sale exitoso: vamos al nuevo explorador de bloques
https://testnet.nearblocks.io/
Allí ponemos la subcuenta que creamos anteriormente: holamundo.nearcolombiadev.testnet
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
Click en contract methods
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
Seleccionamos la billetera:
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!
A continuación vamos a poner la dirección donde tenemos el contrato:
holamundodev.testnet
Entramos por la parte de contrato:
Seleccionamos contract methods
Verificamos que estemos conectados.
Llamado de lectura get_greeting
Desplegamos get_greeting y click en query
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
Damos click en confirmar
A continuación sale el fee que se va a gastar y le damos aprobar a la billetera
Para confirmar el nuevo valor podemos usar el método get_greeting
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
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
Podemos repetir desde consola para ver el valor nuevo en la variable del contrato
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
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.
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
Elegimos que es una Web app
Esta para Next-JS, por convenciones más actualizadas, seleccionamos ( App-Router)
Seleccionamos que no queremos componentes BOS
Para este ejemplo ponemos de nombre del proyecto: hello-near-web
Finalmente ponemos en Y que deseamos instalar los módulos necesarios para poder ejecutar.
Puedes ejecutar el programa tal cual está, pero, hagámosle unas adaptaciones 👨🔧
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
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
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
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";
Finalmente incluimos setupMeteorWallet en la parte de modules
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?
Dentro de la carpeta app/hello-near está el archivo page.js
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
Si sómos analíticos, vemos que el objeto wallet está dentro del context.js
El objeto wallet no pertenece a la el sdk de near, es algo generardo localmente.
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.
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 {}
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.
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.
Ahora si, vamos a correr esta aplicación:
npm run dev
Le damos click en near integration
Ya podemos ver el método de lectura de contrato
Si damos click en login vemos que ya incorpora la billetera de Meteor
Y ya estamos en la capacidad de grabar un nuevo saludo.
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
This content originally appeared on DEV Community and was authored by Sergio Martinez Marin
Sergio Martinez Marin | Sciencx (2024-07-01T03:54:31+00:00) Analizando el “Hola mundo” en NEAR Contrato y Frontend 🤠. Retrieved from https://www.scien.cx/2024/07/01/analizando-el-hola-mundo-en-near-contrato-y-frontend-%f0%9f%a4%a0/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.