Cómo crear un sitio web de acuñación de NFT: Guía paso a paso

Los tokens no fungibles ganaron popularidad en 2021, y a pesar de las difíciles condiciones del mercado en los años siguientes, ¡sus seguidores más fieles continúan hoy en día! Desde su creación, los NFT han evolucionado significativamente, introduciendo características complejas como ventanas de acuñación, revelaciones y revelaciones diferidas, listas de permisos y más.

Como resultado, los sitios de acuñación de NFT deben ser versátiles y personalizados para satisfacer necesidades específicas. Afortunadamente, con thirdweb, construir un sitio web que acuña NFT es fácil. Pero antes de profundizar en los detalles, exploremos por qué podrías querer crear un sitio de acuñación de NFT en primer lugar.

¿Por qué construir un sitio de acuñación de NFT?

Los NFT pueden actuar como una representación descentralizada y tokenizada de casi cualquier activo único: arte, coleccionables, pases de acceso, música, software y mucho más.

Si estás pensando en acuñar y vender cualquiera de los anteriores, construir un sitio de acuñación de NFT tiene muchos beneficios sobre las plataformas de acuñación tradicionales:

• Mantén el control sobre el contrato inteligente que lanzas, eligiendo funcionalidades específicas como revelaciones diferidas.

• Crea experiencias de marca inmersivas para mantener entretenidos a tus usuarios.

• Evita las tarifas de mercado para ti y tus minters.

• Evita pagar tarifas de gas exorbitantes, ya que los usuarios pagarán tarifas de gas apropiadas por cada acuñación.

Hoy en día, construir un sitio de acuñación de NFT desde cero es casi tan fácil como usar un sitio de acuñación, ya que el ecosistema ofrece una multitud de herramientas para comenzar.

Los pasos para desarrollar un sitio de acuñación de NFT

Entonces, ahora que sabes por qué deberías construir un sitio de acuñación de NFT, ¡vamos a desarrollarlo! En esta guía, te llevaremos paso a paso a través de lo siguiente:

1. Cómo desplegar un contrato inteligente NFT Drop

2. Cómo crear una aplicación usando nuestra plantilla de sitio de acuñación de NFT

3. Personalizar tu botón Conectar Wallet con carteras web3, inicio de sesión por correo electrónico y redes sociales, y más opciones

4. Configurar las condiciones de reclamo para que los usuarios acuñen tus NFT

Cómo construir un sitio web de acuñación de NFT

Desplegar un contrato NFT

Ahora estás listo para comenzar a construir. ¡Empecemos!

1. En tu tablero thirdweb, navega a la página de Contratos y haz clic en "Desplegar nuevo contrato":

Esto te llevará a la página de Explorar donde puedes navegar por contratos inteligentes construidos por los principales protocolos en web3.

Nota: También puedes usar el CLI de thirdweb para configurar un entorno de contratos inteligentes. Aprende más sobre esto en nuestra guía CLI.

2. Selecciona tu contrato inteligente de elección. Para este ejemplo, vamos a usar el NFT Drop (ERC721A) contrato para nuestros NFT.

3. Configura tu contrato inteligente con una imagen, nombre, descripción y configura qué dirección de billetera recibirá los fondos de ventas primarias y secundarias.

4. Elige una red para desplegar el contrato. En el ejemplo, elegimos Mumbai, pero puedes seleccionar cualquier red que desees.

5. Despliega el contrato: una vez que esté desplegado, lo verás en el tablero de contratos.

6. Ahora, sube los NFT al contrato para que las personas los reclamen usando el botón "Carga Masiva" en la pestaña de NFT.

Sube tus NFT siguiendo el proceso cuando se te indique

7. Previsualiza los NFT. ¡Asegúrate de revisar todos los detalles! Si estás seguro de que se ve bien

8. Selecciona cuándo deseas revelar tus NFT y haz clic en ¡Subir!

9. ¡Felicitaciones! Tus NFT ahora deberían mostrarse en la pestaña de NFT.

Configurar Condiciones de Reclamo

Las condiciones de reclamo son los criterios que definen quién, cuándo y cómo los usuarios pueden reclamar un NFT de tu drop, como fechas de lanzamiento, listas de permisos y límites de reclamo.

1. Agrega una fase de reclamo dirigiéndote a la pestaña de Condiciones de Reclamo y haciendo clic en Agregar Fase Inicial de Reclamo:

2. Configura el precio, la fecha de lanzamiento y más para tu NFT drop

3. Actualiza los detalles según desees y guarda la fase de reclamo.

Creando el sitio de acuñación de NFT

Para crear un sitio de acuñación de NFT con facilidad, simplemente usa una de nuestras plantillas de aplicaciones. Así es cómo se hace:

1. Ejecuta este comando en tu terminal. Te pedirá que nombres tu proyecto y presiones enter para iniciar la instalación.

npx thirdweb create --template

2. Una vez que los módulos estén instalados, abre el proyecto en tu editor de código favorito.

3. Crea un nuevo archivo .env y agrega el ID del cliente de thirdweb con el nombre VITE_TEMPLATE_CLIENT_ID. (Si aún no lo has hecho, créalo gratis en el tablero.)

4. A continuación, actualicemos algunos parámetros en el archivo src/consts/parameters.ts:

• Cambia contractConst a la dirección del contrato que acabas de desplegar

• Cambia chainConst a la red en la que has desplegado tu contrato

• Ya hemos agregado el clientIdConst en el archivo .env, así que no necesitas hacer nada aquí

• Puedes cambiar primaryColorConst al color que deseas usar en tu aplicación. Puedes elegir cualquier color de estas opciones:

const colors = {
  purple: "#7C3AED",
  blue: "#3B82F6",
  orange: "#F59E0B",
  pink: "#EC4899",
  green: "#10B981",
  red: "#EF4444",
  teal: "#14B8A6",
  cyan: "#22D3EE",
  yellow: "#FBBF24",
} as const;

Si deseas usar otro color como tu color primario, abre src/App.tsx y añade un nuevo color en el objeto de colores y úsalo en el archivo consts.

• La variable themeConst decide el tema de tu aplicación. Puedes elegir entre claro u oscuro

• Finalmente, puedes agregar opciones de configuración de retransmisión usando las variables relayerUrlConst, biconomyApiKeyConst y biconomyApiIdConst.

5. Ahora ejecuta tu servidor usando yarn dev. Deberías ver los metadatos de tu contrato reflejados si se ha hecho correctamente:

Mejorando tu sitio de acuñación de NFT

Esta es solo una estructura básica para el sitio de acuñación de NFT. ¡Puedes personalizarlo tanto como quieras! Aquí tienes algunas ideas:

Estilo

Puedes cambiar los estilos o el diseño de la aplicación en el archivo App.tsx. La plantilla utiliza Tailwind para el estilo, por lo que puedes agregar los nombres de clase respectivos para cambiar los estilos. Si eres nuevo en Tailwind, puedes consultar su documentación para aprender más al respecto.

Agregar más opciones de conexión de wallet

Si deseas que tus usuarios tengan más formas de conectar sus billeteras que la conexión convencional de billetera web3, consulta nuestras diferentes opciones de conexión de billetera como billeteras inteligentes, billeteras locales, billeteras integradas via thirdweb Connect.

Permitiendo a los usuarios comprar NFT con fiat

También puedes agregar pagos en fiat para una experiencia más fluida para tus usuarios a través de thirdweb Engine!

Acuñación de NFT: ¡El desarrollo no tiene que ser difícil!

Esta es solo una lista de algunas cosas que puedes hacer con nuestro SDK, ¡pero el cielo es el límite aquí! Puedes consultar nuestros docs para aprender más sobre cómo usarlo.