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.
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 init
Cuando se le solicite elegir una red, ingrese custom.
Luego ingrese el siguiente punto final REST:
Copiar
https://aptos.devnet.m1.movementlabs.xyz
Y 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:
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 typescript
En 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:
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!