Construye una Dapp End-to-End en Aptos

Una forma común de aprender un nuevo framework o lenguaje de programación es construir una simple lista de tareas (todo list). En este tutorial, aprenderemos cómo construir una dapp de lista de tareas end-to-end, comenzando desde el lado del smart contract, pasando por el frontend y finalmente usando una wallet para interactuar con ambos.

Mira el código completo en el source-code.

Prerrequisitos

Debes tener:

• node y npm
• VSCode IDE o Cursor

Aunque explicaremos algunas decisiones de React, no vamos a profundizar en cómo funciona React; así que asumimos que tienes experiencia previa con React.

Setup

En esta sección, vamos a configurar tres cosas:

1. Una API key usando Geomi
2. Un proyecto usando create-aptos-dapp que contendrá los archivos de nuestro proyecto, tanto el código client-side (basado en React) como el código Move (nuestro smart contract)
3. La extensión de VSCode Move On Aptos

Configurar API key

Primero creemos una API key usando Geomi. El TypeScript SDK de Aptos usa la API de Geomi por defecto, y sin una API key, tendrás rate limits muy bajos.

1. Visita Geomi: Ve a geomi.dev en tu navegador web.

2. Regístrate o Inicia Sesión: Crea una nueva cuenta o haz log in en tu cuenta existente de Geomi.

3. Crea un nuevo proyecto: Haz clic en “Create New Project” para crear un nuevo proyecto y llámalo my-first-dapp.

4. Navega a la pestaña API Resource: Ve a la pestaña API Resource en tu dashboard.

5. Crea un Nuevo Recurso de API: Llámalo my-first-dapp-api y configura la red (network) en Devnet.

6. Configura la API Key: Dado que usaremos la API key en nuestra web app, activa la opción Client usage. Aquí puedes configurar las URLs permitidas y los IDs de extensión que pueden usar la API key. Configura Allowed URLs en http://localhost, que es el servidor de desarrollo que usaremos. También configura Per IP rate limit en 100,000.

7. Copia y Guarda: Ahora tienes tu API key. Copia la key ya que la usaremos en el siguiente paso.

Configurar el Proyecto con create-aptos-dapp

A continuación, usaremos create-aptos-dapp para crear el proyecto.

1. Abre una terminal y navega al directorio deseado para el proyecto (por ejemplo, el escritorio o Desktop).

2. Ejecuta el comando create-aptos-dapp para crear el proyecto:

   npx create-aptos-dapp@latest

3. Sigue las instrucciones para crear el proyecto con estas configuraciones:

   • Elige un nombre para el proyecto, por ejemplo my-first-dapp
   • Elige la opción Full-stack project
   • Elige la opción Boilerplate Template
   • Por simplicidad, elige no usar Surf
   • Elige la opción de framework Vite app
   • Elige la opción de red Devnet
   • Di Yes para usar la API key y pega la API key de Geomi que copiaste antes
   • Di No para personalizar las selecciones por defecto

4. La herramienta creará el proyecto en un directorio con el mismo nombre que el proyecto e instalará las dependencias requeridas.

5. Sigue las instrucciones de Next Steps.

Configurar la extensión Move On Aptos para VSCode

Finalmente, instalemos la extensión de VSCode Move On Aptos.

1. Abre VSCode (o Cursor) y navega a la pestaña de Extensions.
2. Busca Move On Aptos publicada por aptoslabs e instala la extensión.

Capítulos

Después de cumplir con los prerrequisitos y configurar el entorno como se describe arriba, seguirás este tutorial en este orden:

1. Crear un smart contract
2. Configurar un frontend
3. Hacer Fetch de Datos de la Chain
4. Enviar datos a la chain
5. Manejar Tareas

Ahora vamos a crear el smart contract de Todo List.