Cree una aplicación de emisión de boletos NFT con Paper y Next.js

Cree una aplicación de emisión de boletos NFT con Paper y Next.js

La emisión de boletos NFT es un nuevo método de venta de boletos para diversos eventos, como conciertos, juegos deportivos y festivales. En este sistema, los boletos se representan como NFT (tokens no fungibles), que son activos digitales únicos que no se pueden duplicar ni intercambiar por nada más.

Cuando el participante compra un boleto NFT, esencialmente está adquiriendo un activo digital único en su tipo. Estos billetes se acuñan en cadenas de bloques como Ethereum, lo que facilita el seguimiento de la propiedad y la transferencia segura entre los tenedores de billetes. Esto significa que los asistentes ya no tienen que preocuparse por entradas falsas o estafas.

Índice
  1. Por qué las empresas están recurriendo a la emisión de boletos NFT
  2. condiciones previas
  3. Configuración de la aplicación Next.js
  4. El contrato inteligente
    1. Uso de Thirdweb
    2. Usa solidez
    3. Registro de contrato
  5. La interfaz
    1. Autenticación
    2. Huelga NFT
  6. ¿Y después?
  7. Conclusión

Por qué las empresas están recurriendo a la emisión de boletos NFT

La emisión de boletos NFT está cobrando impulso entre las empresas por varias razones importantes, que incluyen:

  • Seguridad mejorada: la emisión de boletos NFT ofrece un alto nivel de seguridad y autenticidad que los boletos tradicionales en papel o digitales no pueden igualar. Cada NFT es único y está registrado en una cadena de bloques, lo que hace que la falsificación o la duplicación sean casi imposibles.

  • Potencial de aumento de ingresos: los NFT son activos digitales que se pueden comprar, vender y comercializar en mercados secundarios, lo que crea el potencial para la reventa de boletos a precios más altos.

  • Experiencia de los fanáticos mejorada: las NFT pueden proporcionar acceso a contenido exclusivo, como encuentros detrás de escena o salas VIP, mejorando la experiencia de los fanáticos. Además, los fanáticos pueden conservar sus boletos NFT como coleccionables, brindando una experiencia memorable.

  • Sostenibilidad ambiental: la emisión de boletos NFT puede reducir el impacto ambiental al eliminar la necesidad de boletos en papel, lo que se está volviendo cada vez más importante para los consumidores conscientes del medio ambiente.

Paper es una plataforma de desarrollo para el comercio de NFT. Le permite aceptar pagos con tarjeta de crédito para NFT, permitir que los usuarios "inicien sesión" en su aplicación con solo su correo electrónico y distribuir NFT a escala.

En este tutorial, crearemos una aplicación de emisión de boletos NFT con Paper. Puedes encontrar el código final de la aplicación. aquí.

Así es como se vería la aplicación:

condiciones previas

Antes de comenzar el tutorial, asegúrese de tener instalada la última versión de Node.js en su máquina.

Configuración de la aplicación Next.js

El primer paso es configurar una aplicación next.js e instalar las dependencias requeridas. Para hacer esto, debe ejecutar el siguiente comando en su terminal.

mkdir nft-ticketing && cd nft-ticketing && npx create-next-app .

El comando anterior crea un nuevo directorio llamado nft-ticketing luego navegue a ese directorio y cree una aplicación next.js.

Al compilar la siguiente aplicación, se le preguntará si desea usar Tailwind, asegúrese de elegir "sí", ya que también usaremos Tailwind en este tutorial.

El contrato inteligente

Puede escribir e implementar un contrato inteligente utilizando Solidity o ThirdWeb. Thirdweb es una plataforma que proporciona un conjunto de herramientas para creadores, artistas y desarrolladores para crear, lanzar y administrar fácilmente un proyecto Web3.

En este tutorial, haremos ambas cosas. Usando solidity y también thirdweb.

Uso de Thirdweb

Si prefiere usar Solidity, puede omitir este paso con seguridad. Podemos usar Thirdweb para crear e implementar un repositorio NFT. Vaya a thirdweb.com y conecte su billetera.
Una vez que haya iniciado sesión, será redirigido a la página de exploración a continuación.

Aquí, elija NFT Drop y haga clic en Implementar

Asegúrese de estar en la red de Polygon Mumbai. Si no lo está, puede actualizar la red haciendo clic en el logotipo de Metamask en la parte superior derecha.

Aparecerá una barra lateral y podrá agregar información sobre su NFT, es decir, imagen, nombre, símbolo, descripción, regalías y muchos otros campos.

Una vez que lo haya completado, puede desplazarse hacia abajo y hacer clic en "Implementar". Una vez que se implementa el contrato, debería verlo en su tercer panel web.

A continuación, vaya a la pestaña NFT para cargar sus metadatos NFT.

Puede actualizar por lotes múltiples metadatos NFT o realizar una sola descarga. En este tutorial, utilizaremos una descarga única. Haga clic en el botón de descarga única y debería aparecer una barra lateral. Complete sus metadatos NFT y luego toque 'Lazy Mint NFT

Finalmente, navegue a "Términos de reclamo" tocando la segunda opción en la barra lateral y cree una nueva fase para los términos de reclamo de su NFT. Aquí puede controlar cuándo caen los NFT, cuánto cuestan y más.

Una vez que haya agregado información sobre su NFT, toque "Guardar fase". Esto activará una transacción y, después de completarla, debería poder ver un mensaje de éxito.

Y es todo ! copie la dirección de su contrato desde el tablero, ya que la necesitaremos más adelante.

Usa solidez

Si desea utilizar Solidity para crear un contrato de depósito NFT, le recomiendo que consulte un excelente tutorial de QuickNode que lo ayudará a crear un contrato ERC721 e implementarlo.

Registro de contrato

Si implementó su contrato inteligente con ThirdWeb o manualmente usando Solidity y Remix, ahora tiene la dirección del contrato en Polygon Mumbai. El siguiente paso es guardar el contrato en el panel de control de Paper.

Comience por registrarse en Paper. Una vez que haya creado una cuenta con éxito, vaya a Pagos, navegue a Contratos y haga clic en Registrar contrato. Complete la información requerida. Si implementó con thirdweb, elija "thirdweb" en el tipo de contrato; de lo contrario, elija "personalizado". Finalmente, haga clic en "Registrarse".

Una vez guardado el contrato, copie su identificador porque lo necesitaremos más adelante.

La interfaz

Ahora que hemos completado la sección de contratos inteligentes, podemos pasar al front-end. El primer paso es configurar la autenticación.

Autenticación

La autenticación juega un papel vital en las aplicaciones Web3. Existen diferentes SDK de autenticación como WalletConnect y RainbowKit que nos permiten agregar autenticación a nuestra aplicación y identificadores, conectar una billetera y firmar mensajes. Sin embargo, este mensaje utilizará el servicio de billetera integrado de Paper.

Documentos billetera incorporada

El servicio de billetera integrado de Paper es un marco de billetera simple pero poderoso que permite que las aplicaciones creen, administren y controlen las billeteras de sus usuarios. Es bastante diferente de otros servicios de billetera porque

  • 💬 UX deliciosamente simple: Sin contraseñas, jerga o descargas.

  • 🎉 Restaurable: Los usuarios aún pueden acceder a sus billeteras en otros dispositivos autenticados.

  • 🔐 Estirar: Inicio de sesión de correo electrónico, inicio de sesión social y autenticación personal.

  • 💸 Sin gasolina: Los usuarios no necesitan ninguna criptografía para interactuar con la cadena de bloques.

  • 😌 Son sin custodia: Ni Paper ni ningún desarrollador de Paper pueden reconstruir las claves privadas sin la autenticación del usuario. El único propietario de la billetera es su usuario final

En el panel de control de Paper, en Carteras integradas, toque Configuración de autenticación y complete la información de su aplicación. Luego presione guardar.

Copie el ID de cliente, ya que lo necesitaremos más adelante.

Luego, en su terminal, ejecute el siguiente comando para instalar el SDK de JavaScript del servicio de billetera integrado de Paper.

yarn add @paperxyz/embedded-wallet-service-sdk

Luego quita todo lo que hay dentro. pages/index.jsx y en su lugar agregue el siguiente código.

import { PaperEmbeddedWalletSdk } from "@paperxyz/embedded-wallet-service-sdk";
import React, { useEffect, useState } from "react";

export default function Home() {
  const [paper, setPaper] = useState();

  useEffect(() => {
    const paper = new PaperEmbeddedWalletSdk({
      clientId: "YOUR_CLIENT_ID",
      chain: "Mumbai",
    });
    setPaper(paper);
  }, []);

  return (
    <div className="m-10">
      <button
        className="bg-blue-400 text-white p-2 rounded-md "
        onClick={() => paper.auth.loginWithPaperModal()}
      >
        Authenticate
      </button>
    </div>
  );
}

En el fragmento anterior, importamos el SDK Paper, lo inicializamos con nuestra clave API, luego, en la función de retorno, llamamos al loginWithPaperModal Método de clic de botón.

Asegúrese de reemplazar YOUR_CLIENT_IDcon su ID de cliente que copió anteriormente desde el tablero de papel.

Guarde el archivo, navegue a su navegador y abra su aplicación en localhost (asegúrese de iniciar el servidor de desarrollo Next.js ejecutando npm run dev).

Haga clic en el botón Autenticar y debería poder ver un modal de Paper SDK que permitiría a los usuarios iniciar sesión en nuestra aplicación. Lo bueno es que los usuarios pueden registrarse fácilmente con su correo electrónico o 1 cuenta y Paper creará automáticamente una billetera para ellos.

Los SDK admiten muchos métodos que no cubrirán este tutorial, pero puede consultarlos aquí.

Huelga NFT

Ahora que hemos completado la autenticación, podemos pasar a la parte del teclado NFT.

Primero, necesitamos crear un enlace de pago compartible, para hacer esto agregue la siguiente función dentro pages/index.jsx

  const createCheckoutLink = () => {
    const options = {
      method: "POST",
      headers: {
        accept: "application/json",
        "content-type": "application/json",
        Authorization: "Bearer YOUR_API_KEY",
      },
      body: JSON.stringify({
        contractId: "YOUR_CONTRACT_ID",
        title: "Image Dragon is back!",
        description: "The multi-platinum, Grammy-winning band Imagine Dragons...",
        imageUrl: "https://texxandthecity.com/wp-content/uploads/2022/06/unnamed-1.jpg",
        limitPerTransaction: 5,
        redirectAfterPayment: false,
        mintMethod: {
          name: "claimTo",
          args: { _to: "$WALLET", _quantity: "$QUANTITY", _tokenId: 0 },
          payment: { currency: "MATIC", value: "0.001 * $QUANTITY" },
        },
        hideNativeMint: false,
        hidePaperWallet: false,
        hideExternalWallet: false,
        hidePayWithCard: false,
        hidePayWithCrypto: false,
        hidePayWithIdeal: false,
        sendEmailOnTransferSucceeded: true,
        brandDarkMode: false,
        brandButtonShape: "full",
        brandColorScheme: "blue",
      }),
    };

    fetch(
      "https://withpaper.com/api/2022-08-12/shareable-checkout-link",
      options
    )
      .then((response) => response.json())
      .then((response) => {
        const link = JSON.parse(response.data.checkoutUrl);
        openCheckout(response.data.checkoutUrl);
      })
      .catch((err) => console.error(err));
  };

  const openCheckout = (link) =>
    renderPaperCheckoutLink({
      checkoutLinkUrl: `${link}`,
    });

En el código anterior, usamos la API de papel para crear un enlace de pago. EL createCheckoutLink envía una solicitud POST a Paper API con parámetros como ID de contrato, título, descripción, URL de imagen y opciones de pago.

EL openCheckout La función toma el enlace de pago devuelto por la API y utiliza el renderPaperCheckoutLink función para mostrarlo.

Una vez que se crea el enlace, los usuarios pueden hacer clic en él para completar el proceso de pago.

Asegúrese de reemplazar la ID del contrato y la clave API en el código con sus propios valores.

También puede agregar el siguiente botón para llamar a la función createCheckoutLink.

 

      <button
        className="bg-red-400 text-white p-2 rounded-md ml-5 "
        onClick={() => createCheckoutLink()}
      >
        Checkout
      </button>

Guarde el archivo y haga clic en el botón Ordenar en su aplicación. Esto abrirá una barra lateral usando Paper SDK, lo que permitirá a los usuarios comprar boletos NFT.

Ahora que comprende el proceso de creación de una aplicación de venta de entradas NFT, podemos actualizar la sección principal a una página de eventos, específicamente para el concierto de Imagine Dragons. Reemplace el siguiente código en la función de retorno de su componente

  return (
    <div class="relative pt-48 pb-12 bg-black xl:pt-60 sm:pb-16 lg:pb-32 xl:pb-48 2xl:pb-56">
      <div class="absolute inset-0">
        <img
          class="object-cover w-full h-full opacity-40"
          src="https://images.hdqwalls.com/wallpapers/imagine-dragons-2017-ib.jpg"
          alt=""
        />
      </div>
      <div class="relative">
        <div class="px-6 mx-auto sm:px-8 lg:px-12 max-w-7xl">
          <div class="w-full lg:w-2/3 xl:w-1/2">
            <h1 class="font-sans text-base font-normal tracking-tight text-white text-opacity-70">
              Join the thousands of fans who will be singing and dancing along to the music
            </h1>
            <p class="mt-6 tracking-tighter text-white">
              <span class="font-sans font-normal text-7xl">Image Dragon</span>
              <br />
              <span class="font-serif italic font-normal text-8xl">
                is back!
              </span>
            </p>
            <p class="mt-12 font-sans text-base font-normal leading-7 text-white text-opacity-70">
              The multi-platinum, Grammy-winning band Imagine Dragons is known for their high-energy performances, hit songs, and impressive stage presence. From "Radioactive" to "Believer," their music has been topping charts and entertaining fans all around the world.
            </p>
            <div class="flex items-center mt-5 space-x-3 sm:space-x-4">
              <button
                onClick={() => createCheckoutLink()}
                class=" inline-flexitems-center justify-center px-5 py-2 font-sans text-base font-semibold transition-all duration-200 border-2 border-transparent rounded-full sm:leading-8 bg-white sm:text-lg text-black hover:bg-opacity-90"
              >
                Book Tickets
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

Guarde el archivo, y así es como debería verse su aplicación:

¿Y después?

Entonces, ¡has llegado hasta aquí! Eso es genial y me dice que está entusiasmado con la creación de aplicaciones Web3. Este tutorial fue solo para que comiences, ahora te recomiendo que lo conviertas en una aplicación del mundo real. ¡No tengas miedo de ser creativo y diviértete con él!

Conclusión

Eso es todo por este artículo. Espero que hayas encontrado esto útil. Si necesita ayuda, no dude en dejar un comentario o enviarme un dm en Gorjeo.

vamos a conectar Gorjeo Y LinkedIn.

👋 ¡Gracias por leer! Hasta la próxima.

Si quieres conocer otros artículos parecidos a Cree una aplicación de emisión de boletos NFT con Paper y Next.js puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas