Cómo crear colección de NFT con código

Si estás buscando cómo crear colección de NFT, hay diferentes formas de hacerlo, pero hoy quiero compartir contigo cómo lograrlo por medio de código.

El ideal en la creación de la colección NFT es automatizar el proceso, y aunque claramente podemos hacerlo manualmente o bien, pagar por el proceso, hoy veremos cómo podemos hacerlo con código.

Autores de código

Antes de iniciar, considero este el paso más importante y es hablar sobre de dónde proviene el código. Hay dos partes importantes en este proceso: el creador del código fuente y luego, quién lo modificó para crear la colección.

Aquí comparto contigo ambas fuentes para que puedas ver cómo lo hicieron o bien, encontrar procesos alternos para hacerlo:

• HashLips – Autor de código.
• codeSTACKr – código modificado.

Qué necesitas para iniciar

Ya casi llegamos al primer paso de esta creación, pero es indispensable contar con ciertos recursos o herramientas para poder hacer todo correctamente. Aquí comparto contigo los recursos necesarios:

• Código que usaremos. Haz click aquí para verlo en Github.
• Visual Studio Code. Descárgalo aquí.
• Node JS. Descárgalo aquí.
• Git en tu PC. Haz click aquí para ver cómo instalarlo.

Primera etapa: creación de colección

En esta primera etapa nos enfocaremos únicamente en la creación de la coleccción NTFs, es decir en cómo lograr las variaciones que deseamos: 10, 100, 10k o 10K.

Diseño de NFTs: programas y capas

Tal vez te preguntes cómo vamos a llegar a un número de 10K NFTs si tan solo hacer uno toma bastante tiempo. Bueno para esto tenemos que hablar de las capas. Las capas nos permiten superponer elementos y luego, podemos unir todo en un mismo elemento.

Ahora, si a estos elementos superpuestos les damos diferentes colores o formas, o bien a su vez tienen sub capas, podemos crear una gran cantidad de variaciones. Estas capas son el secreto del cómo crear la cantidad de NFTs que deseemos.

Por otro lado, debemos tener un programa para crear nuestro NFT y este claramente debe contener el diseño y manipulación por medio de capas.

Aquí te recomiendo algunos o bueno, los que más sobresalen del mercado:

• Adobe Ilustrator (el que usé para mi colección).
• Adobe Photoshop.
• Figma.

Ahora mismo no tengo el post con video para mostrarte cómo crear un diseño personalizado, sin embargo estará en este post cuando esté listo. Por ahora te recomiendo algunos tutoriales gratuitos en Youtube sobre cómo crear un diseño sobre algún tema que te guste: mascotas, edificios, relojes y más.

Clonar repositorio

En esta segunda parte vamos a iniciar con el programa y lo que vamos a necesitar es clonar el repositorio. Si quieres conocer este proceso más a fondo, aquí te dejo el post con video para que puedas hacerlo.

Ahora, para hacerlo un poco más rápido lo que debemos hacer es descargar el código. Lo encontrarás al inicio del post o bien haciendo click aquí. Una vez abierto el enlace, dirígete al botón verde «Code» y luego copia el enlace que te da la ventana. A continuación abre la terminal e instala Git. Para hacerlo, dentro de la terminal escribe:

git --version

Oprime enter y verás una respuesta para aprobar su instalación. Una vez instalado, vuelve a escribir el comando y verás la versión actual de Git en tu pc, esto dará por terminada su instalación.

Clonar repo

Para este paso, necesitas escoger una ubicación en tu pc donde quieras guardar el programa. Por ejemplo una carpeta dentro de tu escritorio. Para esto, sigue estos pasos:

• Abre Finder o el buscador de archivos de windows y al mismo tiempo abre la terminal.
• En la terminal escribe «cd» y deja un espacio a continuacion.
• Luego, arrastra la carpeta desde finder o el buscador de windows (carpeta que contendrá el repositorio) hacia la terminal. Esto copiará la ruta del archivo.
• Haz click en Enter.

Si todo salió bien, verás el nombre de la carpeta antes del signo $. Esto nos dice que estamos parados en esa ubicación correctamente. Ahora escribe:

git clone

deja un espacio después de clone y pega la URL del repositorio. Oprime enter e iniciará la descarga del repositorio. Una vez terminado, verás una nueva carpeta en la ubicación que seleccionaste con el nombre create 10k nft collection. Dentro estarán todos los archivos necesarios para el programa.

Recuerda si quieres ver este proceso de clonación más sencillo, está en el video de este post o bien, haz click aquí para verlo más a fondo.

Visual estudio code

Este paso es sencillo así que solo debemos abrir el programa y luego, arrastrar la carpeta del repo al programa. Esto abrirá todo lo necesario para iniciar.

Modificación de Config.js y cambio de capas

Para entrar en materia en la creación de nuestra colección debemos modificar los archivos del programa y el primero es Config.js. En la barra izquierda busca la ubicación: src > config.js. Aquí debemos modificar:

• Línea 8: escribir el nombre de nuestra colección entre comillas.
• Línea 9: descripción de la colección.
• Línea 45 y 46: tamaño final de los diseños. Si hiciste por ejemplo diseños de 1000px entonces deja ambos en 1000.
• Línea 82: url externa. Generalmente esta pertenece a una url de información sobre la colección. Es opcional, pero es mejor que cuentes con una.
• Línea 27: cantidad de variaciones o NFTs que deseas crear. 10, 100 0 10.000. Recuerda que entre más escribas, más se tardará el programa.
• Línea 29 a la 35: reemplazar por los nombres de las capas de tu proyecto. Lo explico a continuación.

Reemplazar capas en el programa

En la carpeta contenedora que clonamos, que está en tu pc, hay dentro una carpeta llamada LAYERS. Esta carpeta contiene las capas por defecto del creador del programa, lo que debemos hacer es reemplazarlas. Entonces, en esta carpeta desde finder o buscador de windows, elimina las carpetas de capas y pega las tuyas. Verás que al hacerlo, se actualiza automáticamente el programa en VS Code, en la carpeta LAYERS verás los nombres de tus capas.

Ahora, viene el paso más importante en la creación de las variaciones y es reemplazar los nombres de las capas. Como lo vez en la anterior imagen, de la línea 29 a la 35 están entre comillas los nombres de las capas del programa por defecto. Debes borrar esos nombres de capas entre comillas y poner los tuyos. Este proceso debe ser desde la capa más profunda (línea 29) hasta la capa más superficial.

Ejecutar programa – crear variaciones

Una vez hayas terminado todos estos pasos de Config js, ve al menú superior de VS Code ve a terminar > nueva terminal. Se abrirá una terminal pero desde VS CODE y dentro escribirás los siguientes comandos (recuerda previamente haber instalado Node JS al inicio del post):

npm i

Una vez oprimido enter, ahora vas a escribir el siguiente comando:

npm run generate

Ahora, verás como inician a crearse las variaciones que solicitaste. En dado caso que quieras detener el proceso solo escribe CONTROL + C dentro de la consola y listo! Una vez terminado verás una carpeta nueva llamada build y dentro una carpeta llamada images la cual contendrá las imágenes finales. Si solicitaste hacer 10K verás 10K variaciones.

Segunda etapa: publicación

En esta etapa nos centraremos en todo lo que tenga que ver con la publicación de nuestra colección en OpenSea.

Subir archivos con IPFS – contrato ERC 721

La primera parte en esta segunda etapa será subir los archivos por IPFS, esta es una forma estandarizada de alojamiento. Para ver más información de IPFS haz click aquí.

Para esto debemos usar el contrato ERC – 721. El contrato es como un administrador de los NFT, hace seguimiento de todos. Manejar la propiedad, transferencias. Actualizar los nft y mucho más.

En si, nuestra tarea será modificar los metadatos de las variaciones que ya creamos. Si vas a VS CODE nuevamente, en la carpeta build también verás una carpeta llamada JSON. Esta contendrá los meta datos de cada una de las imágenes creadas.

Crear contrato

Este proceso es muy importante así que lo haremos paso a paso. Lo primero será entrar a NFTPort. Aquí selecciona uno de los planes para iniciar. El plan gratuito te permitirá acuñar hasta 100 NFTs pero si entras a la comunidad, totalmente gratis puedes acuñar hasta 10K.

A continuación, solicita la API del plan que desees. Esta llegará a tu correo electrónico. Te recomiendo guardar esta API en un blog de notas ya que la usaremos bastante.

Implementar contrato

Una vez tengamos la API en un blog de notas ahora vamos a el siguiente enlace. Dentro, en deploy an NFT Contract veremos un fragmento de código con fondo azul en la parte derecha. AquÍ debemos modificar unas cosas:

• Authorization: copia la API de autorización que nos dieron en el paso anterior.
• Chain: aquí tienes dos opciones. Dejarlo en «polygon» para modo ejecución, o bien cámbialo por «rinkeby» para ejecutar TODO EL PROGRAMA en modo prueba.
• Name: el nombre de tu colección entre comillas.
• Symbol: déjalo como está.
• Owner address: ve a tu wallet de metamask, copia la dirección de tu wallet y pégala aquí.
• Type: puedes dejarlo como está.

Una vez reemplazados estos datos, haz click en send api request. Inmediatamente tendrás respuesta de la api en una ventana color azul abajo de la actual. COPIA Y GUARDA en un blog de notas porque usaremos todo esto en el siguiente paso. Para siguientes referencias, llamaremos a esta respuesta: PRIMERA RESPUESTA API.

Modificando uploadFiles.js

En este paso, vamos a modificar algunas de las líneas de código en VS Code, entonces ve al archivo utils > nftport > uploadFiles.js

Dentro, en la línea 7, dentro de las comillas, pega la API de autenticación de NFTPort. Guarda el archivo y luego ejecuta el siguiente comando:

node utils/nftport/uploadFiles.js

A continuación vas a ver que inicia el proceso de subida por IPFS. Al terminar verás dentro de build > json y cualquiera de los archivos, en file url que inicia por https://ipfs. y esto nos indica que ya nuestros archivos están usando el alojamiento por IPFS. Claramente debe estar en todos los metadatos que creaste.

Modificando uploadMetas

El siguiente paso es hacer lo mismo pero con los meta datos. Es decir, usar el método de alojamiento IPFS para alojar también los meta datos. Para esto, vamos al archivo utils/nodeport/uploadMetas.js

Dentro vamos a modificar la línea 7 con la API de autenticación que nos dieron al inicio en NODEPort. Vamos a ejecutar el siguiente comando:

node utils/nftport/uploadMetas.js

Al terminar, verás en build una nueva carpeta llamada UploadMetas y listo! hemos terminado con este paso.

Mint: acuñar NFTs

Llego el momento más esperado! vamos a ver nuestros NFTs en OpenSea. Para esto necesitamos seguir solo dos pasos más solicitar la api nuevamente y acuñar los nfts.

Lo primero será hacer click aquí y luego en el mismo fragmento de código vamos a cambiar:

• Authorization: pegamos la API de respuesta de NODEPort.
• transaction_hash: revisa los datos obtenidos en PRIMERA RESPUESTA API unos pasos arriba y verás esta transaction hash.
• chain: recuerda seleccionar si quieres modo de prueba rinkeby, o si no, si quieres ya ejecución entonces polygon.

Haz click en Send Api Request y nuevamente, copia lo que obtengas. Esta respuesta la llamaremos SEGUNDA RESPUESTA API.

Modificando Mint.js

Este es prácticamente el último paso. Entonces vamos a nuestro VS Code a la ubicación utils/nodeport/Mint.js y vamos a editar las siguientes líneas:

• Línea 6: pegamos nuestra API de autorización.
• Línea 7: en la SEGUNDA RESPUESTA API vamos a encontrar esta dirección: contract address. Pégala aquí.
• Línea 8: pega aquí tu dirección de wallet de metamask.
• Línea 9: recuerda si es modo prueba o ejecución, escribe rinkeby o Polygon.

Una vez reemplazado esto, vamos a escribir el siguiente comando:

node utils/nftport/Mint.js

Una vez terminado podrás ver una nueva carpeta dentro de Build llamada minted. Esta contendrá unos archivos en formato JSON los cuales indicarán una dirección o url con la transacción realizada. Puedes hacer click e ir a ver el estado de la transacción una por una.

Listo! hemos terminado!

Rinkeby vs Polygon: prueba y ejecución

Todo lo que hemos hecho hasta ahora dará por resultado la publicación de tus NFTs en OpenSea, pero dependiendo si usaste Rinkeby o Polygon, estarán en prueba o en ejecución:

• Si ejecutaste en Rinkeby, entonces haz click aquí para ver tu colección publicada en la versión prueba de OpenSea.
• Si ejecutaste en Polygon entonces, ya podrás ver tu colección en tu perfil de OpenSea sin ningún problema!

Vikings NFTs: mi colección

Para terminar quiero compartir contigo la colección que hice con este proceso. Esta colección fue con la versión gratuita de NFTPort, es decir menos de 100 NFTs acuñados. Pero tu puedes ir por los 10k sin problema solicitando pertenecer a la comunidad totalmente gratis.

Para ver mi colección haz click aquí.

Video de ayuda

Hice este video para guiarte en todo el proceso. Siéntete libre de ver y comentar. Si te gusta, no olvides dar like y suscribirte para nuevos videos!

Conclusión

Una de las mejores formas de crear una colección de bastantes variaciones NFTs es por código. Pero aunque parece ser fácil, la verdad es que requiere un poco de dedicación y esfuerzo así no hayas realizado el código.