Aptos Move dApp
En esta guía, aprenderemos cómo crear una dApp "onchain bio" de extremo a extremo. Comenzaremos con el contrato Move. Luego, construiremos una interfaz de React y permitiremos que las billeteras se conecten y registren una biografía.
Requisitos
Asegúrese de tener instalado Movement CLI . Si utiliza Aptos CLI, consulte nuestra guía sobre cómo configurar Aptos CLI para Movement .
Vea un ejemplo de la dApp terminada aquí .
Configuración
Cree un nuevo directorio y navegue hasta él:
Copiar
mkdir my-onchain-bio && cd my-onchain-bioAbra un editor de código para que pueda ver la estructura de archivos de su dApp. Aquí usaremos VS Code:
Copiar
code .Creación y publicación del contrato inteligente Onchain Bio
Ahora que nuestro entorno está configurado, escribamos algo de código, ¡comenzando con el contrato Move!
Primero, cree un movedirectorio y navegue hasta él:
Copiar
mkdir move && cd moveLuego cree un moveproyecto que contenga código para un paquete en cadena:
Copiar
movement aptos move init --name my_todo_listSu estructura de archivos ahora debería verse así:
Creando un módulo
Cree un nuevo archivo nombrado onchain_bio.movedentro del sourcesdirectorio y agregue lo siguiente a ese archivo:
Escribiendo nuestro módulo biológico en cadena
Aquí está el módulo Bio Move completo en cadena:
Copiar
module onchain_bio_addr::onchain_bio {
use std::string::{String};
use std::signer;
struct Bio has key, store, drop {
name: String,
bio: String,
}
public entry fun register(account: &signer, name: String, bio: String) acquires Bio {
// Check if an Bio already exists for the account
if (exists<Bio>(signer::address_of(account))) {
// Remove the existing Bio
let _old_Bio = move_from<Bio>(signer::address_of(account));
};
// Create the new Bio
let bio = Bio {
name,
bio,
};
// Store the new Bio under the account
move_to<Bio>(account, bio);
}
}¡A continuación, implementemos en M1!
Implementación del módulo en la cadena de bloques M1 de Movement
Primero, desde dentro del movedirectorio, inicialice su configuración de Movement Aptos:
Copiar
movement aptos initCuando se le solicite elegir una red, ingrese custom.
Luego ingrese el siguiente punto final REST:
Copiar
https://aptos.devnet.m1.movementlabs.xyzY la misma URL para el punto final del faucet.
Cuando se le solicite una clave privada, presione Entrar para generar un nuevo par de claves.
Tras una inicialización exitosa, verá el mensaje de éxito (con la dirección de su cuenta en lugar de 0x39883cbc29500a8bf79911ea1469e1c3b58104547a88fb0fbdf17470f80b2a91):
Copiar
No key given, generating key...
Account 0x39883cbc29500a8bf79911ea1469e1c3b58104547a88fb0fbdf17470f80b2a91 doesn't exist, creating it and funding it with 100000000 Octas
Account 0x39883cbc29500a8bf79911ea1469e1c3b58104547a88fb0fbdf17470f80b2a91 funded successfully
---
Aptos CLI is now set up for account 0x39883cbc29500a8bf79911ea1469e1c3b58104547a88fb0fbdf17470f80b2a91 as profile default! Run `aptos --help` for more information about commands
{
"Result": "Success"
}Ahora su movedirectorio contendrá una .aptoscarpeta oculta que contiene un config.yamlarchivo. Puede ver el contenido de ese archivo para ver sus claves públicas y privadas.
En la línea debajo [addresses]de Move.toml, agregue la dirección de su cuenta:
Copiar
onchain_bio_addr = "<your-account-address>"Después de compilar, verá un mensaje de resultado con el formato siguiente:
Copiar
{
"Result": [
"39883cbc29500a8bf79911ea1469e1c3b58104547a88fb0fbdf17470f80b2a91::onchain_bio"
]
}Ahora puedes publicar el paquete:
Copiar
movement aptos move publishDespués de confirmar que el precio está bien, su transacción se enviará a la cadena de bloques.
Obtendrá un resultado con el formato siguiente, con valores asociados a su transacción:
Copiar
{
"Result": {
"transaction_hash": "0x37ea722ad4f1ff0d8d0710965a47354cc903579d38b659d90c4286ddab946151",
"gas_used": 1236,
"gas_unit_price": 100,
"sender": "39883cbc29500a8bf79911ea1469e1c3b58104547a88fb0fbdf17470f80b2a91",
"sequence_number": 0,
"success": true,
"timestamp_us": 1707748417269022,
"version": 248,
"vm_status": "Executed successfully"
}
}¡Felicidades! Su módulo ahora está implementado.
Pasemos al frente.
Creación de una aplicación React para que los usuarios se registren y vean su biografía en cadena
Navegue a la raíz de nuestro directorio de proyectos:
Copiar
cd ..Crea una nueva aplicación React llamada client:
Copiar
npx create-react-app client --template typescriptEn la raíz de su proyecto, tendrá dos directorios: clienty move.
cden el clientdirectorio y ejecute npm start.
Su aplicación ahora debería ejecutarse en http://localhost:3000 y mostrar el diseño predeterminado de React.
Los archivos de sus aplicaciones están en el client/srcdirectorio.
Reemplace el código Index.tsxcon lo siguiente:
Copiar
import { PetraWallet } from "petra-plugin-wallet-adapter";
import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import './index.css';
const wallets = [new PetraWallet()];
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<React.StrictMode>
<AptosWalletAdapterProvider plugins={wallets} autoConnect={true}>
<App />
</AptosWalletAdapterProvider>
</React.StrictMode>,
);
reportWebVitals();Esto envuelve nuestra aplicación en la <AptosWalletAdapterProvider />etiqueta para que podamos conectar una billetera. Para agregar soporte para más billeteras, consulte el archivo README del Adaptador de billetera Aptos .
Ahora reemplace su App.tsxcódigo con lo siguiente:
Copiar
import { WalletSelector } from "@aptos-labs/wallet-adapter-ant-design";
import "@aptos-labs/wallet-adapter-ant-design/dist/index.css";
import { useRef, useState, useEffect } from "react";
import { useWallet, InputTransactionData } from '@aptos-labs/wallet-adapter-react';
import { Aptos, AptosConfig, Network } from "@aptos-labs/ts-sdk";
import { ONCHAIN_BIO } from "./constants";
import './index.css';
// with custom configuration
const aptosConfig = new AptosConfig({ network: Network.CUSTOM });
const aptos = new Aptos(aptosConfig);
function App() {
const { signAndSubmitTransaction, account } = useWallet();
const name = useRef<HTMLInputElement>(null);
const bio = useRef<HTMLTextAreaElement>(null);
const [accountHasBio, setAccountHasBio] = useState(false);
const [currentName, setCurrentName] = useState(null);
const [currentBio, setCurrentBio] = useState(null);
const fetchBio = async () => {
if (!account) {
console.log("No account")
return [];
}
try {
const bioResource = await aptos.getAccountResource(
{
accountAddress:account?.address,
resourceType:`${ONCHAIN_BIO}::onchain_bio::Bio`
}
);
console.log("Name:", bioResource.name, "Bio:", bioResource.bio);
setAccountHasBio(true);
if (bioResource) {
setCurrentName(bioResource.name);
setCurrentBio(bioResource.bio);
} else {
console.log("no bio")
}
} catch (e: any) {
setAccountHasBio(false);
}
};
async function registerBio() {
if (bio.current !== null && name.current !== null) {
const onchainName = name.current.value;
const onchainBio = bio.current.value;
const transaction: InputTransactionData = {
data: {
function:`${ONCHAIN_BIO}::onchain_bio::register`,
functionArguments:[onchainName, onchainBio]
}
}
try {
// sign and submit transaction to chain
const response = await signAndSubmitTransaction(transaction);
// wait for transaction
console.log(`Success! View your transaction at https://explorer.aptoslabs.com/txn/${response.hash}`)
await aptos.waitForTransaction({transactionHash:response.hash});
fetchBio();
} catch (error: any) {
console.log("Error:", error)
}
}
}
return (
<>
<div className="navbar">
<div className="navbar-text">Your Onchain Bio</div>
<div>
<WalletSelector />
</div>
</div>
<div className="center-container">
<div className="row">
<h1>You Onchain Bio</h1>
</div>
<div className="row">
<h3>Your name:</h3>
</div>
<div className="row">
<input ref={name} type="text" className="name" placeholder="Enter your name"/>
</div>
<div className="row">
<h3>Your Bio:</h3>
</div>
<div className="row">
<textarea ref={bio} className="bio" placeholder="Your onchain bio"
/>
</div>
<div className="row">
<button onClick={registerBio}>Register Bio</button>
</div>
<div className="row">
<button onClick={fetchBio}>Fetch Bio</button>
</div>
<div className="row">
<center>
<h3>Your Name:</h3>
<p>{currentName}</p>
</center>
</div>
<div className="row">
<center>
<h3>Your Bio:</h3>
<p>{currentBio}</p>
</center>
</div>
</div>
</>
);
}
export default App;Por último, reemplace el código en index.css:
Copiar
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
h1, h3 {
margin-bottom: 5px;
}
h3 {
margin-top: 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px 20px;
}
.navbar-text {
font-size: 20px;
}
.center-container {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh; /* Adjust this to control vertical centering */
}
.row {
display: flex;
justify-content: center;
}
.name {
margin-bottom: 10px;
width: 200px;
}
.bio {
margin-bottom: 10px;
width: 300px;
height: 200px;
resize: vertical;
}Su aplicación que se ejecuta localmente ahora debería verse así:
Siéntete libre de diseñar la aplicación como prefieras.
Usando tu aplicación
Para usar la dApp, primero configure una billetera Aptos en M1.
Dirígete a Movement Faucet y deposita fondos en tu billetera M1 devnet. Ingrese un nombre y biografía. Haga clic en el botón Registrar biografía. La billetera debería aparecer para que la firmes. Después de que la transacción se haya enviado a la cadena de bloques, verá actualizada su información biográfica en la cadena:
¿Qué dApps desarrollarás en Movement?
Ahora ya sabe cómo implementar una dApp Aptos para M1.
Compruebe onchain_bio.movela lógica, intente una redistribución modificándola. Como desafío, intenta modificar el Front End para mostrar mejor tu nombre y biografía.
¡Estamos ansiosos por ver qué dApps creas e implementas en Movement Network!
Last updated