# Creando mi primer DApp

En este widget específico podrás introducir tus colecciones destacadas o activos en venta. Para facilitarte la creación de tu primera DApp, hemos dividido toda la información en etapas (tanto en el asistente DexAppBuilder como en esta documentación).

En primer lugar [introduce este enlace](https://dexappbuilder.dexkit.com/admin/create), que te llevará al backend donde crearás y gestionarás tus DApps. Ahora es más fácil desplegar cualquier dApp disponible en la plataforma.

{% hint style="info" %}
Recuerda que ahora estás interactuando con un producto Beta, por lo que puede presentar comportamientos inesperados. Si encuentras alguno, por favor háznoslo saber en [nuestro servidor de Discord](https://discord.com/invite/GJCRu4CYFH).
{% endhint %}

**¿Te apuntas? 🤓** Ahora conecta tu wallet haciendo clic en el botón ubicado en la esquina superior izquierda. Puedes usar Metamask o cualquier otra wallet Web3.

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FxMJeMIn7kcs8eeRGNgwN%2Fimage.png?alt=media&#x26;token=fa99b3c7-d093-4f87-8597-0cb52e2ba2af" alt="" width="382"><figcaption><p>Todas tus wallets conectadas se mostrarán aquí, incluso las de hardware.</p></figcaption></figure>

## Primeros pasos

### Sección de configuración

1. **Nombre de tu DApp (o nombre de dominio):** Sé creativo, o simplemente sigue la línea de tu marca. **¡Importante!** **Ten en cuenta que esta es la única característica que no puede cambiarse una vez desplegada** porque una vez en producción esta opción no puede editarse. Piensa bien en ello.

{% hint style="info" %}
Asegúrate de que el nombre de dominio esté en minúsculas y sin caracteres especiales.
{% endhint %}

1. **Correo electrónico de la DApp:** Este correo no se publicará y es el método de contacto que usaremos para enviarte (con tu consentimiento) nuestro boletín y, si eres usuario Premium, también recibirás allí tu factura. Deberás confirmar este correo tan pronto como crees la DApp.

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FtxYHJRtysYAY4v6Gy7h8%2Fimage.png?alt=media&#x26;token=a867221a-e5da-4189-b49e-f71662e4f620" alt=""><figcaption><p>Una vez que llenes el nombre de dominio y tu correo, pulsa en «Create App»</p></figcaption></figure>

Después de rellenar ambas líneas, haz clic en el botón azul «CREATE APP», firma digitalmente en tu wallet. Aparecerá un mensaje emergente que necesitará tu autorización.

{% hint style="info" %}
Las firmas digitales en la plataforma DexKit son seguras y gratuitas, por lo que puedes usar cualquier wallet, incluso sin fondos.
{% endhint %}

Si todo sale bien verás el siguiente modal:

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FfeZUPxpAfNXsx1sEoxmy%2Fimage.png?alt=media&#x26;token=4e691716-fad1-4409-b145-ccf5bddca88d" alt=""><figcaption><p>Ahora pulsa en «View App» para visitar el backend.</p></figcaption></figure>

#### General

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FzB3LpbxxU6acQG4vYeTF%2Fimage.png?alt=media&#x26;token=9f13a08b-d32c-42d2-818f-7692c3c8ebfd" alt=""><figcaption></figcaption></figure>

1. **Logotipos.** Se recomienda PNG o SVG 150\*150px (imagen cuadrada). Al hacer clic en la imagen «DexAppBuilder by DexKit» se abrirá un menú de subida. Nosotros alojaremos tus imágenes por ti.
2. **Tamaños de logo para móvil y escritorio.**
3. **URL del favicon.** Se recomienda PNG o SVG 20\*20px. Haz clic en el icono morado de Kittygotchi y sube tu imagen.
4. **Idiomas**: Inglés (US) como idioma por defecto, Portugués, Español, Alemán, Francés, Italiano, Noruego y Checo.
5. **Monedas**: Dólar estadounidense, Euro, Real brasileño, Rupia india, Corona checa, Peso argentino, Franco suizo, Peso chileno, Bolívar venezolano y Naira nigeriana.

#### Dominio

Alojaremos tu DApp [utilizando un servicio centralizado y fiable](https://vercel.com/). Además estamos incluyendo una URL personalizada para tu DApp con `*.dexkit.app` como sufijo, por lo que no necesitarás comprar ningún dominio ni hosting para desplegarla.&#x20;

Al mismo tiempo, **mantenemos la sección de dominio personalizado,** para que puedas usar uno de los subdominios de tu dominio y llamar a tu DApp desde allí.

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F4nQARrGvXEQW23Hos4wJ%2Fimage.png?alt=media&#x26;token=51066596-a57c-4e67-be2f-2fe2d13bb350" alt=""><figcaption></figcaption></figure>

Tenemos un tutorial [aquí](https://docs.dexkit.com/defi-products/use-cases/for-entrepreneurs/custom-dswap#creating-your-cname-alias) sobre cómo añadir una entrada CNAME en [CloudFlare](https://www.cloudflare.com/). También hicimos un [video en YouTube](https://www.youtube.com/watch?v=pvzGTxcebW4) realizando el procedimiento.

{% hint style="warning" %}
Cuando añades tu CNAME siguiendo 'cname.vercel-dns.com' en tu proveedor de hosting, necesitas añadir también un registro tipo A, con '@' como Nombre y '76.76.21.21' para evitar problemas con la redirección.
{% endhint %}

Si no usas esta característica opcional puedes dejar el campo en blanco y continuar.

#### Social

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FdB0XJ2KpGgiPBt1Qoknn%2Fimage.png?alt=media&#x26;token=e688dd72-ea8d-4a61-9d53-8886a693a29b" alt=""><figcaption></figcaption></figure>

Añade enlaces personalizados haciendo clic en el botón «+Add custom».&#x20;

### Sección de diseño

#### Tema

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Fenp15DZQNhtbrNF3OZnA%2Fimage.png?alt=media&#x26;token=ca99ff4c-d79c-4ab0-a13a-15e3d65563f2" alt=""><figcaption></figcaption></figure>

Elige entre las combinaciones de colores disponibles actualmente o simplemente selecciona tus colores personalizados para ajustar a las directrices de tu marca. **Elige también entre más de 500** [**fuentes de Google**](https://fonts.google.com/) **para que se vea genial**.

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FC649Qldn9OWWacRWNkxM%2Fgooglefonts.gif?alt=media&#x26;token=5668dec7-8b84-4602-8195-a471b2b2bf8e" alt=""><figcaption></figcaption></figure>

Después de completar esta sección con tus colores, pulsa el botón azul «SAVE» en la esquina inferior derecha de la página. Firma digitalmente y continúa.

#### Páginas

Quizás esta sea la sección más importante e interesante de tu DApp ya que aquí puedes dejar volar tu imaginación para organizar los elementos disponibles en tu beneficio.

Revisemos los elementos principales que componen esta sección:

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FTKnJKhh5wcMBqPEBwrJ4%2Fimage.png?alt=media&#x26;token=07872f22-6863-4de6-8050-e34484327468" alt=""><figcaption></figcaption></figure>

Dentro de esta sección puedes colocar las páginas de tu DApp y hacer clic en cada una te permitirá colocar secciones preconstruidas por defecto (haciendo clic en el botón + ADD SECTION) o añadir una personalizada haciendo clic abajo en el botón «+ ADD CUSTOM SECTION». Lee más sobre las secciones por defecto y cómo usar cada componente.

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FayJfsAKS0aMx1yOm9Sao%2Fimage.png?alt=media&#x26;token=041b59bc-4aac-47c9-a8ed-573915cc8f14" alt=""><figcaption></figcaption></figure>

#### Uso del tooltip

<div align="center"><figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FmOmTfxyC7KAd3WYoXXfs%2Fhide_on_mobile.png?alt=media&#x26;token=02131f9c-b8f3-4017-b8c4-936c622f5799" alt=""><figcaption><p> Ocultar en móvil</p></figcaption></figure> <figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F67Ujqa8WGk9RyyeJVPp7%2Fhide_on_desktop.png?alt=media&#x26;token=b6e01187-3e39-4aa5-816a-a4c5a4314a74" alt=""><figcaption><p>Ocultar en escritorio</p></figcaption></figure> <figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Ffma3TApfMfx33ZZ0LyyX%2Fclone.png?alt=media&#x26;token=a75558fa-a7fa-46ac-be17-ad7f8380438e" alt=""><figcaption><p>    Clonar sección</p></figcaption></figure> <figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FBMc2P5kY7vbS8kzN7ucU%2Fpreview.png?alt=media&#x26;token=7f5a096f-8e2d-4879-96f4-8bc8ea067115" alt=""><figcaption><p>Vista previa de la sección</p></figcaption></figure> <figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FqGaypPqN4oTElMpqz0cz%2Fedit_section.png?alt=media&#x26;token=3ed14ff4-f1b2-4776-9dd0-87d7fdcc3157" alt=""><figcaption><p>    Editar sección  </p></figcaption></figure> <figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FtflfalDKhsDv0qBmXKwI%2Fremove_section.png?alt=media&#x26;token=0c07767c-9583-4d2d-86e1-3654378e5b43" alt=""><figcaption><p>  Eliminar sección</p></figcaption></figure> <figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FVkugTvc20UGfNkgVdgF0%2Fmove_section_up.png?alt=media&#x26;token=1c83162f-1eb3-42da-ae14-a22d663473c8" alt=""><figcaption><p>Mover sección hacia arriba</p></figcaption></figure></div>

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FIm0C9ywk5CiL61nKRQyU%2Fdragndropcomponents.gif?alt=media&#x26;token=f5f6a836-fc4d-469e-b6c7-0032cb5f4aea" alt=""><figcaption><p>Puedes arrastrar y soltar componentes para organizarlos en cada página.</p></figcaption></figure>

Crea las páginas que necesitarás para tu DApp. Ten en cuenta que la única página que tendrá los componentes preconstruidos es la de Inicio. Cada vez que crees una comenzará desde cero componentes.

{% hint style="info" %}
¿Sabías que puedes publicar cualquier NFT que quieras allí para vender? 👀 <mark style="color:verde;">**no necesitas ser el dueño**</mark>**.** Simplemente usa los detalles del NFT y, si consigues una venta desde tu DApp, las comisiones serán tuyas 🥳
{% endhint %}

#### Páginas personalizadas

En esta sección los usuarios pueden añadir muchas opciones interesantes que no solo ayudan a que tu DApp luzca genial, sino que también sean útiles y funcionales para tus visitantes.

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Fb7VVOK9FSOezHVkEk8ns%2FMicrosoft%20Game%20DVR%20-%20https___whitelabel-nft.dexkit.com_admin%20-%20Brave%20-%20Reproductor%20multimedia%20VLC%2028_10_2022%207_24_07%20p.%C2%A0m..png?alt=media&#x26;token=dbf4e383-cf2e-42c0-a26b-32d43aa74669" alt=""><figcaption><p>¡Sé creativo! ¡Ahora tienes más herramientas para ello! 👨‍🎨🖼👩‍🎨</p></figcaption></figure>

¿Te divertiste en esta sección? 😁 Ahora guarda tu progreso en el habitual botón azul en la parte inferior de la página, firma digitalmente y pasemos a la siguiente parte.

#### **Menú de la barra de navegación**

Consulta [configurando-la-barra-de-navegacion](https://docs.dexkit.com/productos-defi-y-soluciones-es/dexappbuilder/gestionando-esta-herramienta/configurando-la-barra-de-navegacion "mention") para una explicación detallada.

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FwDeZ2bukxZCfpTczJx26%2Fimage.png?alt=media&#x26;token=e0d8b966-e6b9-467e-a7c7-4aeaffb57ebc" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Puede que notes que no siempre se te pedirá la firma digital** si no haces clic en guardar y solo saltas entre secciones. **Recomendamos guardar de forma progresiva** para evitar perder tu progreso, por eso siempre te pedimos que firmes después de realizar cambios.
{% endhint %}

#### **Menú del pie de página**

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FGatSkPSFSTAnz1MElko5%2Fimage.png?alt=media&#x26;token=7d994c3f-84ce-4362-9838-6cd1212b80e0" alt=""><figcaption></figcaption></figure>

Añade todos los enlaces y menús que quieras en el pie de página de tu DApp.

#### Configuración de páginas SEO

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FRe01hJKXgIwtw2B1ZxHQ%2Fimage.png?alt=media&#x26;token=23ecd9be-c925-4a5c-af3f-5989a8e93b58" alt=""><figcaption></figcaption></figure>

Esta sección permitirá que tu DApp sea indexada por los motores de búsqueda más populares. Rellena ambos campos y sube la imagen para compartir que se verá cuando compartas el enlace de tu DApp usando el protocolo OpenGraph. Como siempre, recomendamos «SAVE» y continuar.

### Sección de comisiones

#### Comisiones del marketplace NFT

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FPuUXmmjLI7HQ0o8eJvds%2Fimage.png?alt=media&#x26;token=698d62da-1004-4010-a04d-ad82ff941d54" alt=""><figcaption><p>Esta es una sección importante de tu marketplace de NFT</p></figcaption></figure>

En esta sección podrás establecer una comisión para cada NFT comercializado en tu DApp. **Aquí recomendamos no ser avaricioso y usar porcentajes bajos** (del 1% hasta el 5%) para hacer atractivas tus ofertas. Después de terminar aquí, haz clic en «SAVE» y procede a la otra sección de comisiones, esta vez para la interfaz de swap.

#### Comisiones de swap

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FxKuXgAtRZf7eWRazrZEv%2Fimage.png?alt=media&#x26;token=0aa3d217-4e6b-4cdb-b820-06914404fa67" alt=""><figcaption></figcaption></figure>

Aquí establecerás las comisiones que deseas recibir por las operaciones de intercambio de tus clientes. **Dado que esta será una de las funciones más utilizadas en tu DApp, intenta usar porcentajes bajos** aquí si no quieres asustar a tus clientes 🏃‍♀️🏃‍♂️💨💨

### Sección de datos

#### **Importación de colecciones**

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FTA5ypYXzze6lDqsh7pya%2Fimage.png?alt=media&#x26;token=76bb6786-5017-458c-bdfa-946d9909c493" alt=""><figcaption></figcaption></figure>

Aquí colocarás todas las colecciones que tengas disponibles teniendo en cuenta que **puedes elegir varias redes al mismo tiempo para cada una de ellas**. Por ejemplo, puedes añadir la colección de nuestros adorables gatitos Kittygotchi NFT (en Ethereum, Polygon o Binance Chain) y a su vez podrás añadir tus colecciones NFT en otras redes que soportamos con [liquidez descentralizada 0x](https://www.0x.org/).

{% hint style="info" %}
Importar tus colecciones NFT te permitirá usar todos los componentes predefinidos que ofrecemos para NFTs.
{% endhint %}

Sigue el ejemplo a continuación para añadir correctamente tus colecciones NFT:

1. Haz clic en el botón "+ Add Collection"

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F3g5NEVmwYBl2SnllkhbH%2Fimage.png?alt=media&#x26;token=764abb23-3427-4f80-910c-dc29dd2b9705" alt="" width="563"><figcaption></figcaption></figure>

2. Rellena todos los campos para la colección NFT que vas a importar. En este caso deberás hacer todo esto manualmente. Simplemente no funciona como los tokens ERC20 😥 pero... ¡vamos! Tu DApp será la G.O.A.T 🐐

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FwvCAzG0zUicAsMyR8xEB%2Fimage.png?alt=media&#x26;token=3206d709-cc8f-4ae3-ba32-14dd3e1db78d" alt="" width="389"><figcaption><p>Estamos usando la colección de NFT más popular del momento.</p></figcaption></figure>

3. Puedes desactivar ventas secundarias para evitar que esa colección se venda en cualquier otro lugar que no sea tu DApp.
4. Una vez que termines aquí pulsa el botón azul "Save".

#### Tokens

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FA90HkwoyRiFTVtQCzKaX%2Fimage.png?alt=media&#x26;token=96de151a-c582-492d-ae3d-94d62537b6f1" alt=""><figcaption></figcaption></figure>

**Elige los pares que quieres que se negocien en tu DApp**. En la lista encontrarás los pares más solicitados por la gente, teniendo en cuenta sus volúmenes de mercado pero, si presionas el *añadir* botón (dentro del rectángulo naranja), también puedes añadir cualquier token personalizado. Al hacer clic en el botón de la derecha *importar* se habilitarán listas de tokens populares en tu DApp. Siéntete libre de elegirlas también.

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FcEMY0UgBuNriYGOmBu9Y%2Fimage.png?alt=media&#x26;token=034a6821-b0ae-4ed7-92cc-9e36f82068b4" alt="" width="285"><figcaption></figcaption></figure>

¿Necesitas más información? dirígete a la [importando-tokens](https://docs.dexkit.com/productos-defi-y-soluciones-es/dexappbuilder/gestionando-esta-herramienta/importando-tokens "mention") sección.

#### **Redes**

En esta sección puedes elegir las redes disponibles en tu DApp. Esta función es muy útil al crear productos dirigidos a una red específica, como el lanzamiento de un token ERC20 o una colección de NFTs.

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FJ4GFuIFQRmjRbReHU5v5%2Fimage.png?alt=media&#x26;token=ee204f7e-3c9f-433e-9a1a-8017395449f9" alt="" width="563"><figcaption><p>Haz clic en «Edit», elige las que vas a eliminar y luego guarda.</p></figcaption></figure>

## Resumen

**Si terminaste de completar todo el contenido, ¡Felicidades!** 😻 recuerda *guardar* de nuevo y haz clic aquí para volver a la sección de administración 👇

Sigue leyendo [Managi](https://docs.dexkit.com/productos-defi-y-soluciones-es/dexappbuilder/gestionando-esta-herramienta)[ng esta herramienta](https://docs.dexkit.com/productos-defi-y-soluciones-es/dexappbuilder/gestionando-esta-herramienta) desde y aprende cómo navegar en el área administrativa.