Saltar al contenido principal

Resumen

nota

Este tutorial describe cómo crear una aplicación con el js-stellar-sdk, para construir con el Wallet SDK, por favor sigue el tutorial de creación de una billetera. Para construir con contratos inteligentes, navega a la sección de Contratos Inteligentes.

En este tutorial, revisaremos los pasos necesarios para crear una aplicación de pagos básica en la Testnet de Stellar. Después de este tutorial, deberías tener una buena comprensión de los conceptos fundamentales de Stellar y una base sólida para el desarrollo iterativo.

Para este tutorial, revisaremos los pasos mientras creamos una aplicación de ejemplo que hemos llamado BasicPay, que se utilizará para mostrar diversas características.

advertencia

Aunque BasicPay es una aplicación completa en la Testnet de Stellar, ha sido creada únicamente para mostrar la funcionalidad de Stellar con fines educativos en este tutorial, no para ser copiada, pegada y utilizada en Mainnet.

Configuración del proyecto​

Requisitos del proyecto​

Para crear una aplicación básica de Stellar, necesitarás:

  • Marco de aplicación: estamos utilizando SvelteKit optando por JavaScript con tipado JSDoc. SvelteKit es bastante flexible y podría usarse para mucho, pero principalmente lo utilizamos por sus capacidades de enrutamiento para minimizar que esto se convierta en un "tutorial de SvelteKit".
  • Marco de frontend: estamos utilizando DaisyUI para simplificar el uso de Tailwind CSS.
  • Una manera de interactuar con la red Stellar: estamos utilizando el js-stellar-sdk, pero podrías utilizar solicitudes fetch tradicionales. El js-stellar-sdk también se utiliza para construir transacciones que se envían a la red Stellar.
  • Una manera de interactuar con el keypair del usuario: estamos utilizando el SDK [js-stellar-wallets], pero puedes optar por usar una billetera existente.
nota

Mientras usamos los componentes anteriores para construir nuestra aplicación, hemos hecho nuestro mejor esfuerzo para redactar este tutorial de tal manera que la dependencia de cualquiera de estas cosas se minimice. Preferiblemente, deberías poder usar el código JavaScript que hemos escrito e integrarlo en cualquier otro marco que desees con un esfuerzo mínimo.

Hemos tomado las siguientes decisiones durante el desarrollo de BasicPay que también deberías considerar a medida que sigues el tutorial:

  • Hemos diseñado esta aplicación para escritorio. En su mayor parte, la aplicación es receptiva a varios tamaños de pantalla, pero hemos elegido no hacer un esfuerzo especial para priorizar la experiencia del usuario móvil.
  • Hemos habilitado los temas predeterminados de DaisyUI "claro" y "oscuro", que deberían cambiar con las preferencias de tu dispositivo. Sin embargo, no hay un interruptor de conmutación habilitado.
  • Esto está escrito como una aplicación del lado del cliente. No se llevan a cabo acciones del lado del servidor. Si estás construyendo una aplicación con un backend y un frontend, deberás considerar cuidadosamente qué información vive dónde, especialmente cuando está involucrada la clave secreta de un usuario.
  • Estamos desplegando esto como una "aplicación de una sola página" estática con Cloudflare Pages. Tus propias decisiones de despliegue tendrán un impacto en tu configuración y proceso de construcción.
  • Es probable que la aplicación no sea tan eficiente como podría ser. Tampoco está tan optimizada como podría estarlo. Hemos intentado encapsular las diversas funcionalidades de una manera que tenga sentido para el desarrollador que lee la base de código, por lo que hay algo de duplicación de código y las cosas podrían hacerse de una manera "mejor".
  • Hacemos alguna gestión de errores, pero no tanto como desearías para una aplicación del mundo real. Si algo parece no funcionar, y no ves un error, abre la consola de desarrollador, y podrías ser capaz de averiguar qué ha salido mal.
  • No hemos implementado ninguna prueba automatizada. Probablemente querrás algunas para tu aplicación.
nota

Este tutorial probablemente se vea mejor como "casi completo." No vamos a guiarte a través de cada uno de los archivos en nuestra base de código, y los archivos que utilizamos para ilustrar conceptos en el tutorial pueden no estar totalmente presentes o explicados. Sin embargo, cubriremos los conceptos básicos, y te señalaremos ejemplos más completos en la base de código cuando sea aplicable.

Ayudantes de desarrollo​

  • Stellar Lab: un parque experimental para interactuar con la red Stellar
  • Friendbot: un bot que financia cuentas con 10.000 XLM falsos en la Testnet de Stellar; puedes financiar tu cuenta accediendo a https://friendbot.stellar.org/?addr=G...
  • [Archivo toml de Testnet]: un ejemplo de archivo stellar.toml que demuestra qué información podría publicar un anchor
  • [Ayudantes de desarrollo de BasicPay]: si estás usando la aplicación BasicPay, hemos creado algunas herramientas útiles para ayudarte a explorar su funcionalidad

Comenzar​

Aquí están los pasos que hemos seguido para comenzar a construir BasicPay. Siéntete libre de inspirarte y personalizar estas direcciones según lo consideres adecuado. Toda la [base de código de BasicPay] está abierta y disponible en GitHub para referencia.

nota

Esta parte del tutorial requerirá una buena dosis de "tu experiencia puede variar." Esbozaremos los pasos que hemos tomado para nuestra situación de despliegue, pero querrás revisar qué opciones son necesarias para tu(s) entorno(s).

Instalar marcos​

Lo primero que necesitaremos hacer es crear una aplicación SvelteKit, utilizando npm, estamos usando la v18.x de nodejs.

npm create svelte@latest my-basic-payment-app

Esto te guiará a través del proceso de creación de SvelteKit, preguntándote sobre las diversas opciones. Hemos elegido las siguientes opciones:

  • ¿Qué plantilla de aplicación Svelte? Proyecto esqueleto
  • ¿Estás verificando tipos con TypeScript? Sí, usando JavaScript con comentarios JSDoc
  • Seleccionar opciones adicionales Agregar ESLint para el análisis de código; Agregar Prettier para el formateo de código

Después de este proceso, la estructura de tu aplicación vivirá dentro del directorio my-basic-payment-app. Puedes cd a ese directorio y agregar algunas dependencias de UI.

cd my-basic-payment-app
npm install --save-dev svelte-preprocess tailwindcss autoprefixer postcss @sveltejs/adapter-static \
    @tailwindcss/typography \
    daisyui svelte-feather-icons

Antes de configurar cualquier cosa, necesitaremos generar nuestros archivos tailwind.config.js y postcss.config.js.

npx tailwindcss init -p

Ahora, necesitaremos un poco de configuración para hacer que todos esos componentes funcionen juntos. Primero, modifica tu archivo svelte.config.js:

/svelte.config.js
import preprocess from "svelte-preprocess";
import adapter from "@sveltejs/adapter-static";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // Note: Your `dapter` configuration may need customizations depending
    // on how you are building and deploying your application.
    adapter: adapter({
      fallback: "index.html",
    }),
  },
  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
};

export default config;

A continuación, puedes configurar el archivo tailwind.config.js.

  1. Importa los plugins daisyui y typography
  2. Configura nuestras rutas de contenido (puedes necesitar modificar estos valores dependiendo de la estructura de tu proyecto)
  3. Agrega el plugin daisyui después de cualquier plugin oficialmente de @tailwindcss (solo typography en nuestro ejemplo)
/tailwind.config.js
const daisyui = require("daisyui");
const typography = require("@tailwindcss/typography");

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/routes/**/*.{html,js,svelte,ts}",
    "./src/routes/**/**/*.{html,js,svelte,ts}",
    "./src/lib/components/**/*.{html,js,svelte,ts}",
  ],
  plugins: [typography, daisyui],
};

Agrega tus directivas tailwind a tu archivo CSS principal de la aplicación.

/src/app.postcss
@tailwind base;
@tailwind components;
@tailwind utilities;

Luego importa el archivo CSS en tu diseño base de SvelteKit (puedes necesitar crear este archivo).

/src/routes/+layout.svelte
<script>
  import "../app.postcss";
</script>

<slot />

También creamos un archivo /src/routes/+layout.js para configurar nuestra aplicación como solo del lado del cliente. Esto significa que la aplicación se entregará al cliente como HTML y JavaScript no procesado.

/src/routes/+layout.js
// Disable pre-rendering of pages during build-time
export const prerender = false;
// Disable server-side rendering
export const ssr = false;

¡Tu proyecto de SvelteKit ya está configurado y listo para ejecutarse!

npm run dev

Dependencias de Stellar​

Para trabajar con la red Stellar, estructuras de datos y keypairs almacenados localmente, vamos a instalar y configurar algunas dependencias más.

# Stellar SDKs
npm install --save-dev stellar-sdk @stellar/wallet-sdk
# We will need some polyfills to make things available client-side
npm install --save-dev @esbuild-plugins/node-globals-polyfill @esbuild-plugins/node-modules-polyfill \
    path @rollup/plugin-inject buffer svelte-local-storage-store uuid

Usaremos un archivo window.js para inyectar Buffer en nuestro código del lado del cliente, ya que eso es necesario para algunas partes del stellar-sdk.

/src/lib/window.js
import { browser } from "$app/environment";
import { Buffer } from "buffer";

if (browser) {
  window.Buffer = Buffer;
} else {
  globalThis.Buffer = Buffer;
  globalThis.window = {};
}
export default globalThis;

La "inyección" real tiene lugar en nuestro archivo vite.config.js.

/vite.config.js
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import inject from "@rollup/plugin-inject";
import path from "path";

export default defineConfig({
  plugins: [sveltekit()],
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: "globalThis",
      },
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true,
        }),
      ],
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        inject({
          window: path.resolve("src/lib/window.js"),
        }),
      ],
    },
  },
  ssr: {
    noExternal: ["@stellar/wallet-sdk", "@albedo-link/intent"],
  },
});

¡Eso debería encargarse de todo lo que necesitas! Si has seguido estos pasos, ahora tienes una aplicación que se ejecuta solo del lado del cliente que está lista para crear una aplicación que interactúe con la red Stellar! ¡Buen trabajo!

A continuación, veremos cómo registramos a un usuario y creamos su cuenta en la red Stellar.