Cómo integrar contratos NEAR en frontend con API JavaScript
Contenido del curso
0:00/66:57
Construye Dapps con confianza: integra contratos inteligentes de NEAR en tu front end con Near API.js y controla el flujo completo, desde la conexión al RPC hasta la ejecución de métodos view y call. Aprende a gestionar llaves, seguridad y el uso de testnet en flujos reales con React, Vue.js o vanilla JavaScript.
¿Cómo integrar contratos inteligentes de NEAR en front end con Near API.js?
Para consumir un contrato desde el navegador se usan tres piezas: Near API.js, la conexión al RPC y la wallet. La lógica es simple: te conectas al endpoint, autenticas con la wallet y ejecutas métodos del contrato como view (lectura) o call (escritura). En un ejemplo básico se cargó Near API.js vía CDN minimizada v0.43 y también se mostró la instalación vía npm en proyectos con package.json.
Habilidades y conceptos practicados:
viewFunction y functionCall.¿Cómo configurar la conexión RPC y keystore?
connect de Near API.js con una configuración que apunte a la red: mainnet o testnet.Ejemplo de flujo con Near API.js en vanilla JavaScript:
import { connect, keyStores, WalletConnection } from 'near-api-js'; const keyStore = new keyStores.BrowserLocalStorageKeyStore(); const config = { /* config de testnet con RPC y urls de wallet/helper */ }; const near = await connect({ keyStore, ...config }); const wallet = new WalletConnection(near); const account = wallet.account(); const contractId = 'dev-xxxx.testnet'; // método de lectura (view) const hello = await account.viewFunction({ contractId, methodName: 'hello_world', args: {} }); // método de escritura (call) const tx = await account.functionCall({ contractId, methodName: 'write', args: { key: '678', value: 'Hola, Platzi' }, gas, // gas suficiente. attachedDeposit: 0 // si el método no es payable. });
¿Cómo autenticar con wallet y ejecutar métodos?
wallet.account() para ejecutar viewFunction (no escribe en blockchain) y functionCall (sí escribe).¿Cómo estructurar métodos view y change?
hello_world (lectura) y read/write (lectura/escritura con clave y valor tipo key–pair).¿Qué diferencia hay entre view y call, llaves y seguridad en NEAR?
La distinción es clave para evitar errores y costos innecesarios. view solo consulta estado; call modifica el contrato. En CLI, la relación es directa: near view vs near call. En front end, viewFunction vs functionCall. Además, la seguridad se apoya en tipos de llaves y en cómo se almacenan.
Puntos esenciales:
¿Cómo escalar, almacenar datos y trabajar con frameworks?
En NEAR, el backend es la blockchain: se guardan colecciones de datos tipo key–pair dentro del contrato. Por eso se habla de enfoque serverless en el backend: no configuras servidores para estado o lógica; el contrato vive en la red y los nodos ejecutan tus métodos. El front end, en cambio, sí se despliega en un hosting tradicional.
Para escalar lecturas y ofrecer consultas rápidas:
Trabajo con frameworks y tooling:
viewFunction y functionCall.npx create-near-app y bandera de frontend; integración modular de wallet, contrato y vistas.near-api-js y gestiona dependencias desde package.json.¿Te gustaría compartir dudas, tu avance o una idea de Dapp que combine contrato y front end? Deja un comentario y cuéntanos qué vas a construir.
Harvy Garcia
Gracias por este curso !!