Analizando el "Hola mundo" en NEAR Contrato y Frontend 🤠
Published: 2024-07-01 03:54:31

**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](https://dev.to/sergiotechx/primeros-pasos-con-cliente-de-near-escrito-en-rust-near-cli-rs-4amn). 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpkfl8yqys4ic1zq2cp7.png)
              _Su majestad Webassembly al rescate!_


**Prerequisitos:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxpp6t7pag5gwvw6shxb.png)
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](https://github.com/nvm-sh/nvm)

Una ves instalado el NVM vamos a [https://nodejs.org/en](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ernc79j333m6jlxc00p8.png)

Ahora vamos a empezar con el clásico Hola mundo 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxyelsllydfn9njltwmq.png)

En la terminal escribimos

```
npx create-near-app@latest
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xt358u6yr3gzsjaluy8b.png)

---


Seleccionamos A Smart Contract

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbuanu79c1i68k9zme07.png)
Seleccionamos sobre que lenguaje deseamos trabajar, para este caso en JS/TS

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfguvloiytbfqx9u4re1.png)
Le damos un nombre al proyecto:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggwcl45fbnes7ovsb67e.png)
Ponemos la opción “Y” para instalar el sdk de NEAR

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p44dx8e0fnnvcevoy0hk.png)
Listo , ya tenemos creado el ambiente para crear contratos en NEAR 😊

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c72sng716dbx89u71u8g.png)
Ingresamos al directorio hola mundo con el comando :

```
 cd hola-mundo
```
 y allí escribimos: `code .`

**Análisis del contrato hola mundo**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnkn2yotk3aqjr7ecqla.png)

_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
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uv6qiqp26wl45e7m0qmb.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/496bnryrbyas5s7jr5fw.png)

---

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3wvsl1yyycq4w3pr2ea.png)

Ponemos la opción de create-account

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/734tsl5yqoc1mns01okd.png)
Opción fund-myself

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x59flzsdt2gjc1f5kdh.png)
Ponemos el nombre de la subcuenta: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbx1sfaeiwgdwexfaqpb.png)
Ponemos la verificación que la subcuenta no exista

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv5b1l2k33utp0pwdzdx.png)
Indicamos la cantidad de near con que deseamos darle fondos a la cuenta:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz3jxjdya68hb6054mt9.png)
Elegimos la opción de generar la llave automáticamente.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6uaaizfzl12l29soefm.png)
Ponemos la opción de grabar en el sistema legacy


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8tgzle21j7rr7577efp.png)
Elegimos opción de testnet

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0njjewdl0ddtn81gxcba.png)
Seleccionamos sign-with-key-chain

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onrrwqee4pkewo7xfc9v.png)
Finalmente la opción de  de send

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k3z4k15djutrza13trm.png)
En el explorador de bloques vemos nuestra subcuenta creada exitosamente

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzsga7i5tl0qgul751jg.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifl6ud2w8nmbsbps9p7e.png)

---

<u>**Despliegue del contrato**</u>

_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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxb0awesuobw0p7hj8n9.png)
Seleccionamos deploy

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kk820i5danl5d6f5sca.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ievcqdnt5kqdfh3511dk.png)

Ponemos la ruta del contrato compilado:   _./build/hello_near.wasm_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f41morbo1kr80jp7l4z.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a13eq1ynsib0fmbcw41g.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su5rymkxk20j0l5vfuja.png)
Elegimos que va para testnet

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjln3ze5izmpj2baxl8e.png)

Opción sign-with-keychain

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f1whlwxziul4n0e8ck2.png)

Finalmente en send

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbubqetocs3mtlfqft1l.png)

Si todo sale exitoso: vamos al nuevo explorador de bloques

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rs3itiujb99ghlz1sw63.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fr251au3smurlp24d8q.png)
Click en contract methods

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od631zpb9i45ar6m1xfm.png)

<u>**Cómo interactuar con el contrato**</u>

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cn0vpeto52s9zz4e23n.png)
Seleccionamos la billetera:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8jg4dizc3r1iw9ulk8y.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqegwol4w8vb3w31pq68.png)

A continuación vamos a poner la dirección donde tenemos el contrato:
_holamundodev.testnet_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfb7e22j4g5a8hokp8gc.png)
Entramos por la parte de contrato:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tdpv66s8ic786palip1.png)

Seleccionamos contract methods

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zb1qw6jatkmbxrd9rkjh.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt6d4ejtzd1a6hg90won.png)
Verificamos que estemos conectados.

**Llamado de lectura** _get_greeting_

Desplegamos get_greeting y click en query

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/empw81g2q3b297258zgv.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/798vu7wkxfvkeotlceyf.png)
Damos click en confirmar

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ck8cq4yun5vakwixokn6.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvqdzxhuzwksglpauxqn.png)
Para confirmar el nuevo valor podemos  usar el método get_greeting

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79q2j9pdbj0ny4w4kom8.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l43i83emq69ltgi9suze.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcajoijlspd0zz9308xs.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cod39auhmxytxarefpyg.png)

**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](https://testnet.nearblocks.io/en/txns/7HKTJGu5AVYoXL9ccWLx5SN8j6mNqXzrmzstCpm2Dxm7?tab=execution)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwbum53rzupy7lg0xenz.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/624h1csbj3wq94kscxi7.png)

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
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3la8dh30lfijpog2dttx.png)
Elegimos que es una Web app
Esta para Next-JS, por convenciones más actualizadas, seleccionamos ( App-Router)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spqoakpx6idluhygggvu.png)
Seleccionamos que no queremos componentes BOS

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkvuurekaevy34xlm01m.png)
Para este ejemplo ponemos de nombre del proyecto: hello-near-web


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy76dk4fwznywidmlbi3.png)
Finalmente ponemos en Y que deseamos instalar los módulos necesarios para poder ejecutar.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0rfojgc6mtl8thent1x.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zz0ighx53uicmjw80u7a.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh5huitvxjioini5ptap.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uldwag6chjifd4zaczlo.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/478em4ejvma67dqr3hgw.png)

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/](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of8o44f4ncp1lkznpe2o.png)
Ingresamos a este link: [https://www.npmjs.com/package/@near-wallet-selector/meteor-wallet](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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2oyrpwtyhgdcwddwkzy.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ivf4zgundenqpm308if.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5eywiyd0467iaggow1wj.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nda023skvbz8mrdyhw42.png)
Dentro de la carpeta _app/hello-near_ está el archivo _page.js_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br13jce3u5hanntw9lp5.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bejiithd97p3y867z12.png)
Si sómos analíticos, vemos que el objeto wallet está dentro del _context.js_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27o67x40hfk8xkzlfy50.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f4fv2b0zramqjkes3n9.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bg06obeumvfymi94nzpz.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcendexmfbh38c7rsx2l.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuqaxdax2lt6rsqu6hwi.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chapt2yfm2fc5dhj7fln.png)

Ahora si, vamos a correr esta aplicación:

```
npm run dev
```
Le damos click en _near integration_



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irvjvxch6o8mz5c3x47s.png)
Ya podemos ver el método de lectura de contrato

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxmv5b8qcmbae33mzh3l.png)
Si damos click en  _login_ vemos que ya incorpora la billetera de Meteor

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmmlnamiix7nkyxpagiq.png)
 Y ya estamos en la capacidad de grabar un nuevo saludo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua77qtdslp0yyl9s4c24.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yf25fpsvv0wit92go03q.png)

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](https://github.com/sergiotechx/near-Hello-World)