# Criando minha primeira DApp

Neste widget específico você poderá inserir suas coleções em destaque ou ativos à venda. Para facilitar a criação do seu primeiro DApp, dividimos todas as informações em etapas (tanto no assistente DexAppBuilder quanto nesta documentação).

Primeiro de tudo [acesse este link](https://dexappbuilder.dexkit.com/admin/create), que o levará ao backend onde você criará e gerenciará seus DApps. Agora é mais fácil implantar qualquer dApp disponível na plataforma.

{% hint style="info" %}
Lembre-se de que você está interagindo com um produto Beta, portanto ele pode apresentar comportamentos inesperados. Se encontrar algum, por favor nos informe em [nosso servidor Discord](https://discord.com/invite/GJCRu4CYFH).
{% endhint %}

**Você está dentro? 🤓** Agora conecte sua carteira clicando no botão localizado no canto superior esquerdo. Você pode usar Metamask ou qualquer outra carteira Web3.

<figure><img src="https://1903426557-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 as suas carteiras conectadas serão exibidas aqui, inclusive as hardware wallets.</p></figcaption></figure>

## Primeiros passos

### Seção de configurações

1. **Nome do seu DApp (ou nome de domínio):** Seja criativo, ou apenas siga o caminho da sua marca. **Importante!** **Considere que este é o único recurso que não pode ser alterado depois de implantado** porque uma vez em produção essa opção não pode ser editada. Pense bem sobre isso.

{% hint style="info" %}
Certifique-se de que o nome do domínio esteja em letras minúsculas e sem caracteres especiais.
{% endhint %}

1. **E-mail do DApp:** Este e-mail não será publicado e é o método de contato que usaremos para enviar (com seu consentimento) nossa Newsletter e, se você for usuário Premium, você também receberá sua fatura nele. Você precisará confirmar este e-mail assim que criar o DApp.

<figure><img src="https://1903426557-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>Depois de preencher o nome de domínio e seu e-mail, clique em «Create App»</p></figcaption></figure>

Após preencher essas duas linhas, clique no botão azul «CREATE APP», assine digitalmente na sua carteira. Você receberá uma mensagem pop-up que precisará da sua autorização.

{% hint style="info" %}
As assinaturas digitais na plataforma DexKit são seguras e gratuitas, então você pode usar qualquer carteira, mesmo sem fundos.
{% endhint %}

Se tudo correr bem você verá o modal a seguir:

<figure><img src="https://1903426557-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>Agora clique em «View App» para visitar o backend.</p></figcaption></figure>

#### Geral

<figure><img src="https://1903426557-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. **Logos.** PNG ou SVG 150x150px (imagem quadrada) é recomendado. Clicar na imagem «DexAppBuilder by DexKit» abrirá um menu de upload. Nós hospedaremos suas imagens para você.
2. **Tamanhos de logo para mobile e desktop.**
3. **URL do favicon.** PNG ou SVG 20x20px recomendado. Clique no ícone roxo do Kittygotchi e faça o upload da sua imagem.
4. **Idiomas**: Inglês (EUA) como idioma padrão, Português, Espanhol, Alemão, Francês, Italiano, Norueguês e Tcheco.
5. **Moedas**: Dólar americano, Euro, Real brasileiro, Rupia indiana, Coroa tcheca, Peso argentino, Franco suíço, Peso chileno, Bolívar venezuelano e Naira nigeriana.

#### Domínio

Nós hospedaremos seu DApp [usando um serviço centralizado e confiável](https://vercel.com/). Também estamos incluindo uma URL personalizada para seu DApp com `*.dexkit.app` sufixo, assim você não precisará comprar nenhum domínio, nem hospedagem para implantá-lo.&#x20;

Ao mesmo tempo, **manteremos a seção de domínio personalizado,** para que você possa usar um subdomínio de um dos seus domínios e chamar seu DApp por lá.

<figure><img src="https://1903426557-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>

Temos um tutorial [aqui](https://docs.dexkit.com/defi-products/use-cases/for-entrepreneurs/custom-dswap#creating-your-cname-alias) sobre adicionar uma entrada CNAME no [CloudFlare](https://www.cloudflare.com/). Também fizemos um [vídeo no YouTube](https://www.youtube.com/watch?v=pvzGTxcebW4) realizando o procedimento.

{% hint style="warning" %}
Quando você estiver adicionando seu CNAME seguindo 'cname.vercel-dns.com' no seu provedor de hospedagem, você também precisa adicionar um registro do tipo A, com '@' como Nome e '76.76.21.21' para evitar problemas com redirecionamento.
{% endhint %}

Se você não estiver usando esse recurso opcional, pode deixar o campo em branco e seguir em frente.

#### Social

<figure><img src="https://1903426557-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>

Adicione links personalizados clicando no botão «+Add custom».&#x20;

### Seção de layout

#### Tema

<figure><img src="https://1903426557-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>

Escolha entre as combinações de cores atualmente disponíveis ou simplesmente escolha suas cores personalizadas para alinhar com as diretrizes da sua marca. **Escolha também entre mais de 500** [**Google fonts**](https://fonts.google.com/) **para deixá-lo com ótima aparência**.

<figure><img src="https://1903426557-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>

Depois de preencher esta seção com suas cores, pressione o botão azul «SAVE» no canto inferior direito da página. Assine digitalmente e continue.

#### Páginas

Talvez esta seja a seção mais importante e interessante do seu DApp, pois aqui você pode deixar sua imaginação correr solta para organizar os elementos disponíveis em seu benefício.

Vamos revisar os principais elementos que compõem esta seção:

<figure><img src="https://1903426557-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 desta seção você pode colocar as páginas do seu DApp e clicar em cada uma permitirá que você insira seções pré-construídas padrão (clicando no botão + ADD SECTION) ou adicionar uma personalizada clicando abaixo no botão «+ ADD CUSTOM SECTION». Leia mais sobre as seções padrão e como usar cada componente.

<figure><img src="https://1903426557-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 de tooltip

<div align="center"><figure><img src="https://1903426557-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 no mobile</p></figcaption></figure> <figure><img src="https://1903426557-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 no desktop</p></figcaption></figure> <figure><img src="https://1903426557-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 seção</p></figcaption></figure> <figure><img src="https://1903426557-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>Pré-visualizar seção</p></figcaption></figure> <figure><img src="https://1903426557-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 seção  </p></figcaption></figure> <figure><img src="https://1903426557-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>  Excluir seção</p></figcaption></figure> <figure><img src="https://1903426557-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 seção para cima</p></figcaption></figure></div>

<figure><img src="https://1903426557-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>Você pode arrastar e soltar componentes para organizá-los em cada página.</p></figcaption></figure>

Crie as páginas que você precisará para seu DApp. Considere que a única página que terá componentes pré-construídos é a Home. Cada vez que você criar uma, ela começará sem componentes.

{% hint style="info" %}
Você sabia que pode publicar qualquer NFT que quiser lá para vender? 👀 <mark style="color:verde;">**você não precisa ser o proprietário**</mark>**.** Basta usar os detalhes do NFT e, se você conseguir uma venda pelo seu DApp, as taxas serão suas 🥳
{% endhint %}

#### Páginas personalizadas

Nesta seção os usuários podem adicionar muitas opções interessantes que não apenas ajudam seu DApp a ter ótima aparência, mas também a ser útil e funcional para seus visitantes.

<figure><img src="https://1903426557-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>Seja criativo! Agora você tem mais ferramentas para isso! 👨‍🎨🖼👩‍🎨</p></figcaption></figure>

Você se divertiu nesta seção? 😁 Agora salve seu progresso no habitual botão azul na parte inferior da página, assine digitalmente e vamos para a próxima parte.

#### **Menu da Navbar**

Consulte [configurando-a-barra-de-navegacao](https://docs.dexkit.com/produtos-e-solucoes-defi-pt/dexappbuilder/gerenciando-esta-ferramenta/configurando-a-barra-de-navegacao "mention") para uma explicação detalhada.

<figure><img src="https://1903426557-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" %}
**Você pode notar que nem sempre será solicitada a assinatura digital** se não clicar em salvar e apenas pular entre as seções. **Recomendamos salvar progressivamente** para evitar perder seu progresso, por isso pedimos sempre que assine após fazer alterações.
{% endhint %}

#### **Menu do rodapé**

<figure><img src="https://1903426557-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>

Adicione quantos links e menus quiser no rodapé do seu DApp.

#### Configurando páginas de SEO

<figure><img src="https://1903426557-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 seção permitirá que seu DApp seja indexado pelos motores de busca mais populares. Preencha ambos os campos e faça upload da imagem de compartilhamento que será vista quando você compartilhar o link do seu DApp usando o protocolo OpenGraph. Como sempre, recomendamos «SAVE» e prosseguir.

### Seção de taxas

#### Taxas do marketplace de NFTs

<figure><img src="https://1903426557-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 é uma seção importante do seu marketplace de NFTs</p></figcaption></figure>

Nesta seção você poderá definir uma taxa para cada NFT negociado no seu DApp. **Recomendamos aqui não ser ganancioso e usar percentuais mais baixos** (de 1% até 5%) para tornar suas ofertas atraentes. Depois de terminar aqui, clique em «SAVE» e prossiga para a outra seção de taxas, desta vez para a interface de swap.

#### Taxas de swap

<figure><img src="https://1903426557-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>

Aqui você definirá as taxas que deseja receber das operações de negociação dos seus clientes. **Como esta será uma das funcionalidades mais usadas no seu DApp, tente usar percentuais baixos** aqui se não quiser assustar seus clientes 🏃‍♀️🏃‍♂️💨💨

### Seção de dados

#### **Importando coleções**

<figure><img src="https://1903426557-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>

Aqui você colocará todas as coleções que você tem disponíveis levando em conta que **você pode escolher várias redes ao mesmo tempo para cada uma delas**. Por exemplo, você pode adicionar a coleção dos nossos adoráveis gatinhos Kittygotchi NFT (no Ethereum, Polygon ou Binance Chain) e, por sua vez, você poderá adicionar suas coleções de NFT em outras redes que suportamos com [liquidez descentralizada 0x](https://www.0x.org/).

{% hint style="info" %}
Importar suas coleções de NFT permitirá que você use todos os componentes predefinidos que oferecemos para NFTs.
{% endhint %}

Siga o exemplo abaixo para adicionar suas coleções de NFT corretamente:

1. Clique no botão "+ Add Collection"

<figure><img src="https://1903426557-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. Preencha todos os campos em branco da coleção de NFT que você está prestes a importar. Neste caso você precisará fazer tudo manualmente. Simplesmente não funciona como os tokens ERC20 😥 mas... vamos lá! Seu DApp será o G.O.A.T 🐐

<figure><img src="https://1903426557-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 a coleção de NFT mais popular no momento.</p></figcaption></figure>

3. Você pode desabilitar vendas secundárias para impedir que essa coleção seja vendida em qualquer lugar que não seja seu DApp.
4. Quando terminar aqui, clique no botão azul "Save".

#### Tokens

<figure><img src="https://1903426557-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>

**Escolha os pares que você quer que sejam negociados no seu DApp**. Na lista você encontrará os pares mais solicitados pelas pessoas, levando em conta seus volumes de mercado, mas se você pressionar o *adicionar* botão (dentro do retângulo laranja), você também pode adicionar qualquer token personalizado. Clicar no botão de *importar* à direita habilitará listas de tokens populares no seu DApp. Sinta-se à vontade para escolhê-las também.

<figure><img src="https://1903426557-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>

Precisa de mais informações? vá para a [importando-tokens](https://docs.dexkit.com/produtos-e-solucoes-defi-pt/dexappbuilder/gerenciando-esta-ferramenta/importando-tokens "mention") seção.

#### **Redes**

Nesta seção você pode escolher as redes disponíveis no seu DApp. Esta função é muito útil ao criar produtos voltados para uma rede específica, como o lançamento de um token ERC20 ou uma coleção de NFTs.

<figure><img src="https://1903426557-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>Clique em «Edit», escolha aquelas que você vai remover e então salve.</p></figcaption></figure>

## Finalizando

**Se você terminou de preencher todo o conteúdo, parabéns!** 😻 lembre-se de *salvar* novamente e clique aqui para voltar à seção admin 👇

Continue lendo [Gerenci](https://docs.dexkit.com/produtos-e-solucoes-defi-pt/dexappbuilder/gerenciando-esta-ferramenta)[ando esta ferramenta](https://docs.dexkit.com/produtos-e-solucoes-defi-pt/dexappbuilder/gerenciando-esta-ferramenta) e aprenda como navegar na área administrativa.