Como criar e validar formulários modais do discord da melhor maneira com zod - discord.js v14

eu sou o rinco e hoje vou mostrar uma nova forma da gente validar nossos formulários modais aqui pros nossos botes de discord agora com a atualização da minha base onde a gente pode definir um handler para quando ocorrer algum erro nos comandos ou quando a gente tiver respondendo componentes ou no caso desse vídeo modais fica muito mais fácil pra gente poder criar validações com o Zod com a Lib que já vem por padrão aqui na minha base e vocês vão entender tudo isso nesse vídeo então beleza ó eu tô aqui num projetinho que eu acabei

de criar vocês podem até ver aqui no terminal ó acabei de gerar o projeto aqui do zero e se você quiser gerar um projeto pronto pro desenvolvimento aí com diversas estruturas e novos recursos aí pro desenvolvimento de bot é muito simples é só você utilizar aqui o comando npx con static @ latest no seu terminal do vscode e se você quiser entender tudo sobre essa base tem a documentação completa aqui na descrição inclusive os requisitos mínimos para você poder gerar esse projeto né então se você obter algum erro tudo tá documentado ali você pode dar

uma olhada mas beleza que que a gente vai fazer aqui eu vou começar criando um comando aqui ó deixa eu apagar esses comandos que já existem e eu vou criar aqui um comando de register antes de criar o comando eu vou vir aqui na minha guilda de desenvolvimento vou copiar o ID dessa guilda e aqui no meu código eu vou vir aqui no index da pasta discord e na função setup Creators eu vou definir aqui temporariamente em guilds o ID da minha guilda onde meu bot tá dessa forma os comandos eles vão ser registrados aqui

na guilda só durante o desenvolvimento mesmo para eles atualizar rapidinho né Eu não tenho que ficar dando cont control R no discord Mas vamos lá né Vamos criar aqui um comando de registro só a gente fazer aqui new.on Command ele vai gerar aqui o snip rapidinho pra gente dá um control ponto e seleciona aqui adicionar todas as importações ausentes Então vou criar aqui meu comando normal e tudo que ele vai fazer é exibir um modal então eu já vou fazer aqui um interaction show modal e vou criar o meu Model aqui né o Custom ID

vou deixar aqui só register mesmo e aí você põe o título aí que você quiser na verdade vou pôr formulário de registro e aqui em Componentes ó eu recomendo vocês utilizarem a função Create Model Fields aqui da minha Lib Magic discord com essa função a gente pode só criar aqui um objeto onde a chave vai ser o Custom ID do Field e o valor a gente pode passar as opções desse Field né então eu quero ter o Field name e eu ponho aqui Label né É muito mais simples do que ficar criando um monte de

action Roll a gente cria essa função inha aqui e é bem mais simples né então Label desse meu field aqui vai ser nome e aí eu posso definir um Place holder também ó Qual é o seu nome e posso definir também a quantidade mínima que a pessoa precisa especificar eu vou definir required aqui como true né Agora eu vou ter um segundo Field aqui que vai ser idade então eu vou definir aqui age eu vou até copiar essas informações aqui vou colar e só vou trocar aqui o Label vai ser idade qual é a sua

idade e põe também a interrogação né E aqui invés de ser min length vai ser Max Len que a pessoa não tem como a pessoa ter mais de de 1000 anos né E também é required vou duplicar Mais uma vez vou pôr uma vírgula aqui e agora a gente vai ter e-mail Label vai ser e-mail Qual é o seu e-mail esse aqui não vou pô min L mas a gente vaiar validações para cada um desses Campos ó como vocês podem perceber aqui a gente tem dois Campos onde seria interessante a gente ter uma validação deles

né no caso do Age a gente precisa validar se a pessoa digitou aqui uma string que possa ser convertida para um Number né porque ela pode digitar um número aí por extenso né mas como a gente limitou aqui a três caracteres ele já fic um pouco mais difícil dela digitar tudo por extenso mas mesmo assim se a pessoa temar e digitar aí ler ao invés de números aí vai dar erro né se a gente tentar parcial e tudo mais e aqui no e-mail a gente tem a gente pode também validar se o que a pessoa

digitou é um e-mail ao invés de qualquer coisa né então aqui embaixo ó já vou criar um responder mas eu sempre vou recomendar você a fazer num arquivo separado né deixa tudo separado ó a gente tem a pasta de comandos aqui deixa só os comandos tem a pasta de responders deixa só os responders mas eu vou criar aqui no mesmo arquivo para ficar fácil de vocês entenderem Mas vamos lá ó custo ID a gente põe aqui o custo ID do nosso modal vai ser register e aqui o mesmo custo ID do nosso show modal e

aqui em types eu vou definir o responder Type como Model E aí eu crio um Run aqui e só para vocês entender a diferença do Model pro model component a gente define aqui Model quando a gente espera o modal que veio de um comando se você definir aqui modal component quando a gente enviar esse modal aqui não vai cair dentro desse responder porque modal component é um modal que veio de um componente Ou seja quando você clica no botão e exibe modal ou quando você usa um select menu e exibe o modal então se você

quiser esperar um modal desses dois tipos tanto de comando quanto de componente como isso aqui é um Array types né a gente pode só duplicar isso aqui e colocar aqui ó quero responder esses dois tipos de modais no caso não vou estar usando nenhum componente aqui então eu vou responder só o modal de comando então deixa assim e aí beleza né O que que a gente pode fazer aqui na minha Lib eu criei uma função inha onde a gente vai pegar todos os Fields de um modal e transformar em um objeto então quando a gente

faz o interaction Fields aqui do modal isso aqui é um modal submit Fields e aqui dentro a gente tem algumas propriedades e alguns métodos né a gente tem esse mais comum que é o get text input velho se a gente digitar aqui por exemplo Custom id de um desses inputs por exemplo name que vai retornar aqui vai ser apenas o valor que a pessoa digitou mas eu quero aqui um objeto onde a chave vai ser o Custom ID de cada uma das propriedades e o valor vai ser o que a pessoa digitou Então a gente

tem aqui Fields e isso aqui é uma Collection então a gente precisaria transformar isso aqui num objeto né pensando nisso eu já criei uma função na minha Lib você pode usar aqui ó modal Fields to record E aí basta você passar aqui o interaction Fields E aí você vai poder acessar aqui por exemplo name mas dessa forma tá muito abstrato a gente tem aqui o modal Fields Record e a gente não tem nenhum aut complete eu coloco um ponto aqui não aparece nada porque não tem como ter certeza do que vai vir aqui né mas

se você tiver certeza que aqui vai ter uma propriedade name você usa assim né quando você usa dessa forma aqui com toda a certeza dentro desse objeto as chaves vão ser o mesmo Custom ID que você colocou aqui em cada um desses inputs né então aqui vai ser um objeto con tem name age e e-mail porém se eu acesso age Isso aqui é uma string ó como vocês podem ver a gente tem todos os métodos de string E se eu passo o mouse aqui por cima ele vai falar que é uma string mas eu queria

que age fosse um Number eu quero obter um objeto aqui onde a minha propriedade age que eu espero um Number seja um Number e não uma string um Number eu posso fazer cálculos matemáticos diretamente né então que que eu teria que fazer eu teria que fazer aqui um Number parse int ou parse float né se você quiser com casas decimais mas usando o Zod Fica muito simples basta a gente fazer um esquema Zod então eu vou chamar aqui de form esquema E aí a gente importa Z da Lib Zod então ele já tá mostrando aqui

pra gente importar clica aqui ó vocês vê a importação ela fica assim e aí a gente vai escrever o objeto que a gente espera né então eu espero um objeto que contém name que contém age e que contém e-mail então agora vamos criar aqui as validações para cada Campo name eu quero que seja uma string então eu posso deixar só assim agora age eu vou definir aqui que é um Number E aí a gente usa aqui o a propriedade coerce porque se for uma string numérica ele vai converter pro tipo Number né e a gente

pode também definir o mínimo o valor mínimo vocês podem pensar bom Por que que você definiu o valor mínimo aqui no Field do modal mas não definiu também o valor mínimo pro Field aqui do Age né a gente definiu só o valor máximo isso é porque os Fields aqui dos modais eles só são do tipo string não tem como a gente passar nenhum outro tipo tudo que eles aceitam são textos então quando a gente Define um min length ou Max length é em relação à quantidade de caracteres e não a um valor numérico né então

com zó aqui a gente pode definir um valor numérico mesmo ó a idade tem que ser no mínimo um vou pôr um aqui né pessoa tem que ter pelo menos um ano de idade Ou se você quiser ir você põe zero também né mas dessa forma ele não vai aceitar números negativos se a pessoa digitar lá o men-1 ou -2 -3 tanto faz não vai aceitar né e aqui no e-mail a gente pode fazer um z. string e definir aqui que eu quero que essa string seja uma string de e-mail então beleza A gente pega

aqui agora esse nosso form esquema E aí a gente vai fazer o seguinte ó coloca isso aqui pra linha de baixo e faz um form esquema pon parce Abre isso aqui e joga para aqui dentro né E aí ele fica dessa forma e agora quando a gente acessar Fields Olha que legal a gente tem tudo aqui ó name age e e-mail e age como vocês podem ver aqui já foi tidda pro tipo Number se eu acesso os métodos aqui a gente pode ver que já são métodos de Number inclusive se a gente fizer cálculos matemáticos

vai funcionar perfeitamente E aí eu posso só dar um interaction reply aqui falando alguma coisa né dizendo meu sistema mas a gente tendo os fios aqui a gente poderia armazenar isso aqui no banco de dados enviar para alguma pi fazer qualquer coisa né a gente tem já todas as propriedades do dos Fields do nosso modal aqui já no nosso responder né mas vamos testar isso aqui eu vou dar um npm Run Dev e vamos lá pro servidor então eu posso usar o comando registrar aqui e aí ele vai exibir esse modal pra gente Qual é

o seu nome meu nome é Rin idade tenho 23 e o e-mail vou pôr o e-mail qualquer aqui meu e-mail @gmail.com E aí se eu clica em enviar ele já funciona perfeitamente aqui ó você foi registrado tudo mais ele parou bem bonitinho lá mas se eu usar aqui o comando novamente e passar os dados de forma incorreta por exemplo ó se eu passo aqui um texto e aqui no e-mail eu passo qualquer coisa se eu enviar ele cxa o nosso programa ele vai crashar aqui o nosso bot ó algo de errado aconteceu então se a

gente olhar o terminal ele vai dizer aqui ó que ocorreu um erro né o o anticrash aqui da base já alertou pra gente já mostrou o erro completinho aqui com todas as informações a gente consegue localizar certinho onde é que tá ó register linha 47 é essa exata linha aqui ó for esquema pon parce então o parce ele lança um erro aqui né o parce do do esquema Zod ele vai lançar um erro quando a validação não for bem sucedida então o que que tá dizendo aqui ó esperava um Number Mas recebeu n porque quando

ele tentou parar aquele nosso ABC que a gente enviou ele virou um n né que é um not a Number e validation de e-mail aqui ó e-mail em válido então a gente escreveu uma estrin qualquer e ele não identificou que é um e-mail então ele lançou esse erro aqui e o que que a gente pode fazer agora com a nova atualização da minha base a gente tem aqui tanto nos comandos quanto no responders como definir um método aqui de error handler Então a gente tem o on error onde a gente vai receber aqui um erro

e um interaction né é uma interação genérica de um responder então olha o que que a gente pode fazer vou vir aqui na minha pasta de funções vou criar uma pasta chamada handlers e vou criar um Zod error então eu vou exportar uma função aqui chamada sod error handler e eu vou esperar aqui como primeiro argumento o erro que vai ser um zó de error e uma interaction que pode ser tanto Um coma de interaction quanto um generic responder interaction esse tipo aqui vem da minha base e ele vai ser aqui um tipo de um

responder né que pode ser tanto botão select menu ou modal Então dessa forma a gente pode criar um handler específico para quando o usó de lançar um erro então eu vou fazer o seguinte eu vou criar aqui um embed usando aqui a função Create embed da minha Lib também Magic S discord E aí eu customizo do jeito que eu quiser né eu posso colocar aqui uma cor vermelha posso pôr também um footer aqui ó dizendo erro de validação E se eu quiser deixar um pouquinho mais customizado ó Posso até fazer interaction client user display Avatar

URL e aqui na description ó a gente só lança um BR builder aqui que é um a função inha para quebrar a linha uma forma um pouco mais customizada né e a gente pode dizer aqui ó ocorreu um erro ao validar os dados aí você põe um iconeinstagram para ficar um pouco mais interessante de visualizar né E aí a gente só faz um esqueminha aqui para responder a interação né então eu posso criar aqui um objeto chamado options e ele tem que ser um objeto que satisfaça a tipagem de interaction reply options e aqui a

gente pode passar os embeds né e posso passar também as flags aqui né por padrão na minha base a gente tem um objeto global de flags que é efemer então a gente vai enviar a mensagem efemera aqui né E aí a gente só faz aqui o interaction reply options dá um catch se ocorrer algum erro a gente tenta dar um followup e manda aqui de novo as options e se ocorrer algum erro aí não tem o que fazer a gente só não faz nada né deou pôr a função como async beleza copia aqui o nome

da função vem aqui na pasta index da pasta de funções e exporta tudo de handl od error aí volta aqui no index da pasta discord e aqui a gente vai fazer uma verificação para saber se o error é uma Instância de Zod error bom sabendo isso a gente retorna O código se for e só chama aqui o nosso Zod error handler importa de # functions passa o error e passa a interaction vamos Reload o bot e voltando aqui no discord tá do mesmo jeito modal né porque ele tinha quebrado mas se eu enviar agora Olha

o que que vai acontecer ele vai falar aqui ó ocorreu um erro a validar os dados só que ele tá tudo em inglês né eu esperava um Number Mas recebeu n inval e-mail e tá em inglês mas é aí que o Zod se destaca você pode customizar do jeito que você quiser a mensagem então aqui ó age quando ele tentar parcar o valor do input e não for uma string numérica eu quero passar uma messagem aqui e eu vou dizer a idade informada não é um número válido Inclusive eu posso até colocar a formatação markdown

do discord né que isso aqui vai ficar lá no embed então eu formato aqui do jeito que eu quiser e aí eu posso até jogar aqui pra linha de baixo esse min e a gente pode no segundo argumento aqui também passar uma message né Ó você pode ver a tipagem certinha aqui ó message e a gente passa também uma string dizendo a idade deve ser um número maior que zero e a mesma coisa aqui pro e-mail que dentro do método e-mail a gente também pode passar uma mensage E aí a gente diz aqui ó o

e-mail informado não é um e-mail válido e agora quando a gente Reload dar o bot e usar o comando aqui novamente se a gente mandar os dados incorretamente e clicar em enviar aí ele vai mostrar certinho aqui ó a idade informada não é um número válido o e-mail informado não é um e-mail válido vou usar aqui de novo só que agora vou informar o e-mail válido então só esse formato aqui ele já identifica que é um e-mail válido só que eu vou pôr um número negativo aqui ó menos um não existe pessoas com menos um

anos de idade então quando eu enviar aqui a idade deve ser um número maior do que zero então ele mostra o erro certinho ó aqui ele tentou parcial string para Number e falhou e aqui ele conseguiu parcar para Number mas o número era menor do que zero né E aí ele me mandou a mensagem correta aqui e quando ele tentou parcial o e-mail aqui nesse de baixo também ele funcionou E aí ele não exibe o erro do e-mail ele só exibe os pontos que a gente errou então a gente já tem aqui uma mensagem customizada

falando todos os erros que a gente cometeu na hora de enviar o formulário E aí a pessoa pode consertar e enviar corretamente né bom pensando nisso eu criei aqui mais dois exemplos para mostrar para vocês outras coisas que a gente pode fazer outros tipos de validações né Eu tenho esse comando aqui aplicar que é o comando para exibir um formulário para aplicar pra equipe pra Staff do Servidor né e aqui eu criei um Field que é o cargo que a pessoa quer aplicar E aí a pessoa ela tem que digitar um desses três ou admin

ou mod ou ajudante E aí ela tem que digitar exatamente assim né senão não vai funcionar e tem aqui o motivo mas a validação mesmo que eu fiz essa daqui ó eu criei um Array constante aqui que no caso é uma tupla né quando a gente cria um Array e define como é as con ele vai virar uma tupla aqui com os exatos valores como o tipo E aí eu usei isso aqui no N1 então a gente pode usar o z. N1 para definir que somente esses valores vão ser aceitos nessa propriedade aqui e aí

quando o zó validar se não for um desses valores eu vou dizer ó o cargo deve ser um destes E aí eu coloco aqui o Len né então ele vai ficar assim o cargo deve ser um destes três porque aqui tem três itens né então aí eu só dou um join aqui separando com um pipez inho para ficar igual esse aqui né E aí aqui embaixo a gente faz a mesma coisa ó é praticamente a mesma coisa do outro a gente parcei aqui usando o parce aqui do nosso form esquema e depois faz o que

você quiser aí com as informações dos Fields né mas vamos testar isso aqui posso usar aqui o Barra aplicar e aqui ele tá mostrando né então posso colocar aqui um motivo qualquer E aí se eu colocar aqui por exemplo dono do Servidor eu quero que você o cargo que eu quero é ser dono do Servidor Então se eu envio ele vai dizer aqui ó o cargo deve ser um desses três o admin ou mod ou ajudante e eu acabei escrevendo errado aqui AD judante Deixa eu voltar aqui e escrever correto ó ajudante e aqui ó

ajudante Agora sim tá certo então se eu usar aqui o comando de novo e passar agora um cargo correto Por exemplo o Mod é um dos três que tá ali clico aqui em enviar e ele funciona corretamente Ó seu formulário foi enviado com sucesso e a gente tem o connect aqui também é um formulário solicitando aqui informaçõ para se conectar um banco de dados né então a gente vai poder passar a host a porta o usuário a senha e o nome do banco de dados a host eu defino que ela tem que ser uma url

E aí se não for eu vou dizer que a host informada não é uma url válida e a porta aqui tem que ser o Number e a gente também já usa o corse aqui para ele tentar converter né E se não conseguir coloca aqui ó a porta informada deve ser um número e aí o resto aqui a gente não precisa de a gente não precisa de tantos validações assim e aí é o mesmo esquema né for esquema ponto parce obtém os Fields faz o que você quiser com os Fields E aí dá uma resposta aí

pra interação Então posso usar aqui barra conectar modal já fica bem maior né então qual que é ar rosto eu posso informar aqui ó DP 2 p bar bar local host aí a porta vou informar uma porta incorreta aqui ó 8080 por extenso usuário Rot senha root banco de dados meu banco de dados vai ser o nome do meu banco de dados e se eu envio ele já vai dizer aqui ó a porta informada deve ser o número então a gente já sabe o que que a gente errou V me informar aqui a porta correta

mas se eu colocar aqui algo que não é uma url válida né coloca qualquer coisa aqui se eu clic em enviar ele vai dizer ó rosta informada não é uma url válida então coloquei todas as informações corretas eu clico em enviar ele vai funcionar perfeitamente né as informações do banco de dados foram armazenadas E aí a gente tem todas as informações aqui pra gente visualizar né bom galera então foi isso Eu espero que vocês tenham entendido aí como é que funciona esse esqueminha pra gente validar os dados dos formulários modais né inclusive dessa forma Olha

como fica simples a gente criou um handler aqui para um erro dos Zod uma única vez e aí em todos os nossos comandos a gente usou o método parse e aí se ele lançar um erro aqui seja em qualquer comando vai cair aqui no error handler que a gente definiu pros responders né então os recursos aqui da minha base Já ajudam bastante a gente a encorton eu a galera que tá aqui vamos tentar te ajudar eu espero que vocês tenham gostado e também espero que tenham entendido e não se esqueçam eu sou o rinco