DEV Community: Falcão

Como eu tirei uma certificação oficial do Github em um dia

Falcão — Wed, 22 Jan 2025 19:02:43 +0000

Quer saber como eu estudei, fiz o teste e tirei uma certificação oficial do Github em um dia? continue lendo esse texto então! Vou contar para vocês como foi meu processo de estudo e preparo para a Github Foundations, que certifica conhecimento nas fundações da plataforma, como commits, repositórios, projetos, branches e mais.

Antes de contar minha experiência, queria destacar que já uso o git e github para projetos pessoais e acadêmicos a alguns anos, inclusive escrevi um artigo sobre a CLI do Github, não sou nenhum expert e nem tenho experiência profissional, mas é bom ter isso em mente ao ler esse texto.

O que é?

No ano passado, o Github lançou certificações oficiais, estas são: Github Foundations, Actions, Advanced Security, Administration e Copilot. Cada uma delas aborda áreas diferentes do ecossistema Github, e são pensadas para níveis diferentes de desenvolvedores.

A Github Foundations é a mais básica delas, cobrando conhecimento sobre repositórios, commits, open source, issues, pull requests, enfim, o que não vivemos sem no site.

E a facada?

Se você é estudante de alguma instituição de ensino, eu tenho uma ótima notícia para você, com uma conta estudantil, você pode fazer a Github Foundations completamente de graça!

Basta acessar o Github Education, clicar em "Join Github Education" e seguir os passos necessários para comprovar seu vínculo com sua escola/faculdade ou similares, com isso você terá acesso não só a Foundations, como também ao Copilot e outros benefícios.

Caso essa não seja sua realidade, atualmente a prova custa 49 dólares 😬, então eu recomendo ficar de olho em alguma promoção eventual.

Como estudar?

Ao acessar a página do exame, você vai encontrar vários recursos que oferecem mais informações, explicações, conteúdos de estudo e um link para agendar a prova.

Fora meus conhecimentos prévios, eu estudei somente por essa trilha de estudos gratuita da Microsoft, apropriadamente chamada "Github Foundations", pensada justamente para essa certificação, sugiro fazer anotações ao longo das aulas, já que existem várias palavras e termos que podem ser difíceis de se lembrar. Um mapa mental pode ajudar muito.

Depois de terminar essa trilha, eu não tinha confiança que ia passar pela avaliação, vi pessoas no reddit falando que a porcentagem necessária de acertos para passar é mais de 70%, e eu não fazia ideia de como seriam as questões. O curso da Microsoft te faz algumas perguntas, mas elas são bem fáceis e eu senti que o oficial não seria dessa forma.

Então eu fui atrás de simulados para ver como eu me sairia, acabei encontrado dois:

Os dois são ótimos recursos para testar seus conhecimentos, mas, eu recomendo principalmente os simulados do GHCertified, nesse site você pode se preparar para qualquer certificação do Github, escolher o número de questões que você quer fazer, pedir dicas, ver um sumário de erros e acertos, além de encontrar mais recursos e guias de estudo. As questões são parecidas com as do exame oficial (note que não são iguais), esse site é super útil e totalmente open source.

Hora da verdade

Eu não planejava estudar e fazer o exame tudo no mesmo dia, mas depois de um tempo fazendo os simulados e vendo minhas anotações, eu vi que era 20h da noite e a prova demora no máximo 2 horas, então eu fui jantar e fazer a prova logo em seguida.

Nesse momento, você precisa ir no link "Book your exam", em especial a Foundations pode ser agendada e feita na mesma hora, devido a prova ser online e sem a supervisão direta de outra pessoa (fiquei com medo de ter um gringo me observando às nove da noite).

Caso você tenha conta estudantil, um cupom de 100% de desconto será aplicado nessa etapa.

Entretanto ainda é necessário baixar um navegador especial da PSI, empresa responsável pela aplicação das avaliações, esse navegador vai impedir que você acesse outros aplicativos do seu computador enquanto faz o exame, então tenha isso em mente.

E foi assim que eu tirei a Github Foundations em um dia com 77% de acertos!

Conclusão

Na minha opinião, se você é estudante e tem interesse na área de tecnologia, não tem porque não pegar esse certificado, é completamente de graça e pode te ajudar a se destacar no mercado de trabalho, além disso, você vai testar o que já sabe e aprender novas coisas sobre as ferramentas que usa.

Minha maior decepção com essa certificação é que ela tem data de validade de 3 anos, então sinceramente eu não acredito que valha a pena gastar 49 dólares nisso, melhor esperar uma promoção ou explorar outras opções.

Por fim, não se apresse! Tem 0 motivos para você fazer o que eu fiz e terminar tudo em um único dia, vá com calma e absorva o máximo de conhecimento possível, não se pressione ou se compare a outras pessoas (porque isso te leva a fazer o que eu fiz rs), seja você mesmo e aproveite, essa é minha maior dica.

Obrigado por ler!

How I got an official Github Certification in one day

Falcão — Wed, 22 Jan 2025 19:02:30 +0000

Want to know how I studied, took the test, and earned an official GitHub certification in a day? Keep reading this post! I'm going to tell you about my study and preparation process for the GitHub Foundations certification, which verifies knowledge of the platform's basics like commits, repositories, projects, branches, and more.

Before I dive into my experience, I want to highlight that I’ve been using Git and GitHub for personal and academic projects for a few years now. I even wrote an article about the GitHub CLI. I'm no expert and don’t have professional experience, but it's good to keep this context in mind while reading.

What is it?

Last year, GitHub launched official certifications, which are GitHub Foundations, Actions, Advanced Security, Administration, and Copilot. Each one covers different areas of the GitHub ecosystem and are designed for developers at different levels.

GitHub Foundations is the most basic of them, requiring knowledge of repositories, commits, open source, issues, pull requests—basically, the essentials for using the platform.

And the cost?

If you're a student, I have great news for you: with a student account, you can take the GitHub Foundations exam completely free!

All you need to do is go to GitHub Education, click on "Join GitHub Education," and follow the steps to verify your connection to your school, university, or similar institution. Once verified, you'll have access not only to Foundations but also to Copilot and other benefits.

If that’s not your situation, the current cost of the exam is $49 😬, so I’d recommend keeping an eye out for discounts or promotions.

How to study?

On the exam page, you'll find a variety of resources, including additional information, explanations, study materials, and a link to schedule the exam.

Apart from my prior knowledge, I only studied using this free Microsoft learning path, aptly named GitHub Foundations. It's specifically designed for this certification. I suggest taking notes throughout the lessons, as there are many terms and keywords that can be hard to remember. A mind map can be very helpful here.

After finishing this study path, I still didn’t feel confident about passing. I saw people on Reddit saying that you need over 70% to pass, and I had no idea what the questions would be like. The Microsoft course includes some questions, but they’re pretty easy, and I figured the official test wouldn’t be that simple.

So, I looked for practice exams to see how I would perform. I found two great resources:

Both are excellent for testing your knowledge, but I especially recommend the practice tests on GHCertified. This site allows you to prepare for any GitHub certification, choose the number of questions you want to answer, request hints, review a summary of errors and correct answers, and find additional resources and study guides. The questions are similar to the official exam (but not identical). The site is super useful and entirely open source.

The moment of truth

I didn’t plan to study and take the exam on the same day, but after spending some time on the practice tests and reviewing my notes, I realized it was already 8 PM. Since the exam takes a maximum of 2 hours, I decided to have dinner and take the test right after.

At this point, you need to go to the "Book your exam" link. Specifically, the Foundations exam can be scheduled and taken immediately, as it’s an online test without direct supervision (I was worried about being watched by a proctor at 9 PM).

If you have a student account, a 100% discount coupon will be applied at this stage.

However, you still need to download a special browser from PSI, the company responsible for administering the exams. This browser prevents you from accessing other apps on your computer during the exam, so keep that in mind.

And that’s how I earned the GitHub Foundations certification in one day, scoring 77%!

Conclusion

In my opinion, if you’re a student and interested in technology, there’s no reason not to get this certification. It’s completely free and can help you stand out in the job market. Plus, you’ll test what you already know and learn new things about the tools you use.

My biggest disappointment with this certification is that it has a validity period of 3 years. So honestly, I don’t think it’s worth spending $49 on it. Better to wait for a promotion or explore other options.

Finally, don’t rush! There’s no reason to do what I did and complete everything in a single day. Take your time and absorb as much knowledge as possible. Don’t pressure yourself or compare yourself to others (because that will lead you to do what I did, lol). Be yourself and enjoy the process—that’s my biggest tip.

Thanks for reading!

Increase your productivity with the Github CLI

Falcão — Mon, 26 Feb 2024 22:18:13 +0000

If you use Github on a daily basis and still don't know about the Github CLI, I recommend you to keep reading this article. Today we are going to learn how to increase our productivity and quality of life when working with issues, pull requests, actions, and more!

Instalation
Authenticating
Repositories
Issues
Pull requests
Aliases
Actions
Learning more
Extensions
Conclusion

Instalation

Before we start, we need to install the CLI to be able to use it, as there are many operating systems in this beautiful world, I will leave here a link to the installation guide from Github itself.

With the tool installed, we can check the version with the command:

gh --version

Authenticating

After installing, we need to authenticate to be able to enjoy the tool, this is done with the command:

gh auth login

To verify that you are indeed logged in, run this command:

gh auth status

A message saying that you are logged to Github in your account should appear.

Repositories

With the Github CLI, we can clone, fork, list, view a repository, and much more.

Let's say we would like to see all our repositories, we can use the gh repo list command.

This is the command output, a very friendly little table that shows the names, descriptions, and some other information of all my repositories, note that it says it is showing 30 of 31, this is because this command only shows repositories in which I am the owner, the 31st is a repository that I am only a contributor, so it is not shown.

We can also create a repository, with gh repo create, this command helps a lot to simplify the process of creating and setting up a completely new repository:

Cloning is also simplified, we can do it the way we are already used to with git, using the repository URL:

Or even better, doing gh repo clone OWNER/REPO:

With gh repo fork, the syntax is the same.

With this command, we can also archive, delete, rename, and sync repositories and more!

Issues

We work a lot with different issues daily, the CLI also makes our life easier in this regard, removing the need to leave the terminal to open/view/list/comment etc.

As expected, to create an issue, we use gh issue create:

Similarly, if we want to see the issues created, we use gh issue list:

If we want to see only issues with a specific label, we can use the --label flag, for example, to see only issues with the "bug" label, we can do gh issue list --label=bug (in my case the only issue is already a bug, but it works!).

To get more information about a specific issue (for example, the real issue instead of just the title and label), we use the gh issue view <issue_number> command:

In this case, the information is easily understood by the terminal itself, however, sometimes we have larger media or texts and seeing the issue through github would be better, for that we can use the --web flag.

We can comment on open issues using the gh issue comment <issue_number> command:

Additionally, it is also possible to close, reopen, delete, pin issues and much more.

Pull requests

By far, what I like most about using the CLI is how much it simplifies working with pull requests, for example, let's say we have a new branch with changes already committed and now we want to create a PR for the repository, instead of going through the hassle of uploading a new branch and creating it through the site, we can simply do gh pr create.

If we need to add some kind of media, we can simply continue in the browser, but all the information will already be there.

Just like in issues, we can also use gh pr list and gh pr view, to list all pull requests and see more details about a specific one respectively.

Imagine that someone has just opened a PR in the repository, and now? how to test the code? It is possible to check out locally with gh pr checkout <pr_number>, so your git will create a new branch in your local repository, with all the changes presented in the pull request:

It is also possible to comment on a pr with gh pr comment <pr_number>:

Now let's say you do have checks configured for new pull requests, such as linters or automated tests, you can check the status of a specific pr with gh pr checks <pr_number>:

In addition, we can also review, mark a pull request as ready for review, close, reopen, merge, and more, all through the terminal.

Aliases

Like any terminal tool, it's always good to create aliases for commands you use frequently, we can do this using the gh alias set command. For example, let's create an alias called "bugs", which will show us only the issues with the "bug" label, to achieve this just type in the terminal:

gh alias set bugs 'issue list --label=bug'

Now we can at any time type "gh bugs" in the terminal and see all related issues :)

Additionally, we can delete an existing alias with gh alias delete <name> or view all created aliases with gh alias list.

Actions

If you use Github Actions, another power of the CLI is the ability to control and view relevant information directly in the terminal, with gh run and gh workflow, the difference is that workflow refers to the files and run the runs that the actions have already had.

To list all recent runs, we use gh run list:

We can also see details of a run or jobs using gh run view:

The same goes for workflow, however, with this subcommand we can also use enable and disable, to enable and disable a specific workflow file.

If your workflow receives the workflow_dispatch event, it is possible to activate it manually with the command:

gh workflow run

Learning more

We only scratched the surface of what the Github CLI is capable of, some of the other features that we can manipulate with this tool include: releases, projects, organizations, labels, gists, Github Actions variables, and more!

To better understand how it can help you in your day-to-day life as a developer, I recommend exploring the existing commands with gh help:

Note that our alias commands also appear here, which is a nice addition.

If our doubt is about a specific command or subcommand, we can always use the syntax gh help <command> <subcommand>, for example:

We got a super detailed description of exactly what this command does, the available flags, the aliases, examples, and more information!

Extensions

Every good tool needs to have extensions made by the community, and here it is no different, we have several official and community-made extensions to further boost your CLI. To start, use the command:

gh extensions browse

Here we can see all the extensions, see their repositories, and install them if we want, if you want to find a specific extension, you can use the search subcommand:

Installed an extension and now decided you don't want it anymore? No problem, just use the gh extensions list command to see all installed extensions and gh extensions remove to remove one of them:

Conclusion

I hope you enjoyed this article! I personally use this tool daily and it has helped me a lot, especially in open source projects, I hope it can help you too.

If you want to read more about it, here is the official manual.

If you have any questions, suggestions, or feedback, feel free to leave a comment, I will be happy to answer, thank you for reading!

Aumente sua produtividade com a Github CLI

Falcão — Mon, 26 Feb 2024 22:18:07 +0000

Se você usa o Github no dia e ainda não conhece a CLI do Github, eu recomendo que você continue lendo esse artigo. Hoje vamos aprender como aumentar nossa produtividade e qualidade de vida ao trabalhar com issues, pull requests, actions, e mais!

Sumário

Instalação
Autenticando
Repositórios
Issues
Pull requests
Apelidos
Actions
Descobrindo mais
Extensões
Conclusão

Instalação

Antes de tudo, precisamos instalar a CLI para podermos usar ela, como existem diversos sistemas operacionais neste belo mundo, deixarei aqui um link para o guia de instalação do próprio Github.

Com a ferramenta instalada, podemos verificar a versão com o comando:

gh --version

Autenticando

Depois de instalado, precisamos nos autenticar para conseguir desfrutar da ferramenta, isso é feito com o comando:

gh auth login

Para verificar que está logado, use o comando:

gh auth status

Uma mensagem deve aparecer dizendo que você esta logado no github na sua conta.

Repositórios

Com a CLI do Github, conseguimos clonar, dar fork, listar, ver um repositório, e muito mais.

Digamos que gostaríamos de ver todos nossos repositórios, podemos usar o comando gh repo list.

Esse é o output do comando, uma tabelinha bem simpática que nos mostra os nomes, descrições e algumas outras informações de todos os meus repositórios, note que ele diz que está mostrando 30 de 31, isto é porque esse comando só mostra repositórios nos quais eu sou o dono, o 31º é um repositório que eu sou somente contribuidor, por isso não é mostrado.

Podemos também criar um repositório, com gh repo create, esse comando ajuda muito a simplificar o processo de criar e configurar um repositório totalmente novo:

Clonar um repositório também é simples, podemos fazer do jeito que já estamos acostumados com git, usando a URL do repositório:

Ou melhor ainda, fazendo gh repo clone OWNER/REPO:

Para fazer forks, com gh repo fork, a sintaxe é a mesma.

Com esse comando, podemos ainda arquivar, deletar, renomear e sincronizar repositórios e mais!

Issues

Diariamente trabalhamos muito com issues diferentes, a CLI também facilita a nossa vida nesse quesito, tirando a necessidade de sair do terminal para abrir/ver/listar/comentar etc.

Como é de se esperar, para criar uma issue, usamos gh issue create:

Analogamente, se quisermos ver as issues criadas, usamos um gh issue list:

Também é possível filtrar issues com uma label específica, podemos usar a flag --label, por exemplo para ver só as issues com a label "bug", podemos fazer gh issue list --label=bug (no meu caso a única issue já é de bug, mas funciona!).

Para conseguir mais informações de uma issue específica (por exemplo, a issue de verdade ao invés de só o título e label), usamos o comando gh issue view <numero_issue>:

Nesse caso as informações são facilmente entendidas pelo terminal mesmo, entretanto, as vezes temos mídias ou textos maiores e ver a issue pelo github seria melhor, para isso podemos usar a flag --web.

É possível comentar em issues abertas usando o comando gh issue comment <numero_issue>:

Adicionalmente, também é possível fechar, reabrir, deletar, fixar issues e muito mais.

Pull requests

De longe, o que eu mais gosto ao usar a CLI, é o quanto ela simplifica trabalhar com pull requests, por exemplo, digamos que temos uma nova branch com alterações já commitadas e agora queremos criar uma PR para o repositório, ao invés de passar pela dor de cabeça de subir uma nova branch e criar pelo site, podemos simplesmente fazer gh pr create.

Se precisarmos adicionar algum tipo de mídia, podemos simplesmente continuar no browser, mas toda a informação já vai estar lá.

Assim como em issues, também podemos usar gh pr list e gh pr view, para listar todos os pull requests e ver mais detalhes sobre uma específica respectivamente.

Imagine que alguém acabou de abrir um PR no see repositório, e agora? como testar o código? É possível dar um checkout localmente com gh pr checkout <numero_pr>, assim seu git vai criar uma nova branch no seu repositório local, com todas as mudanças apresentadas no pull request:

Também é possível comentar em um pr com gh pr comment <numero_pr>:

Agora digamos que você tenha sim checks configurados para nova pull requests, como linters ou testes automatizados, é possível verificar a situação de um pr específico com gh pr checks <numero_pr>:

Ademais, também podemos fazer review, marcar um pull request como pronto para review, fechar, reabrir, dar merge, e mais, só pelo terminal.

Apelidos

Como qualquer ferramenta de terminal, é sempre bom criar aliases (apelidos) para comandos que você usa frequentemente, podemos fazer isso usando o comando gh alias set. Por exemplo, vamos criar um alias chamado "bugs", que vai nos mostrar só as issues com a label "bug", para alcançar isso basta digitar no terminal:

gh alias set bugs 'issue list --label=bug'

Agora podemos a qualquer momento digitar "gh bugs" no terminal e ver todas as issues relacionadas :)

Adicionalmente, podemos deletar um alias existente com gh alias delete <nome> ou ver todos os alias criados com gh alias list.

Actions

Se você usa Github Actions, um outro poder da CLI é a habilidade de controlar e ver informações relevantes diretamente no terminal, com gh run e gh workflow, a diferença é que workflowse refere aos arquivos e run as runs que as actions já tiveram.

Para listar todas as recentes runs, usamos gh run list:

Também podemos ver detalhes de uma run ou jobs dela usando gh run view:

O mesmo vale para workflow, porém, com esse subcomando também podemos usar enable e disable, ativar e desativar um arquivo de workflow específico.

Caso seu workflow receba o evento workflow_dispatch, é possível ativar ele manualmente com o comando:

gh workflow run

Descobrindo mais

Apenas vimos a superfície de o que a CLI do Github é capaz de fazer, alguns dos outros recursos que podemos manipular com essa ferramenta incluem: releases, projects, organizations, labels, gists, variáveis do Github Actions e mais!

Para entender melhor como ela pode te ajudar no seu dia a dia como desenvolvedor, recomendo explorar os comandos existentes com gh help:

Note que nossos comandos de alias também aparecem por aqui, o que é uma adição bem legal.

Caso nossa dúvida seja acerca de um comando ou subcomando específico, podemos sempre usar a sintaxe gh help <comando> <subcomando>, como, por exemplo:

Conseguimos uma descrição super detalhada de exatamente o que esse comando faz, as flags disponíveis, os apelidos, exemplos e mais informações!

Extensões

Toda boa ferramenta precisa ter extensões feitas pela comunidade, e aqui não é diferente, temos diversas extensões oficiais e feitas pela comunidade para turbinar ainda mais sua CLI. Para começar use o comando:

gh extensions browse

Aqui podemos ver todas as extensões, ver seus repositórios e instalar elas se quisermos, se você quer achar uma extensão específica, você pode usar o subcomando search:

Instalou uma extensão e agora decidiu que não quer mais ela? Tudo bem, basta usar o comando gh extensions list para ver todas as extensões instaladas e gh extensions remove para remover uma delas:

Conclusão

Espero que você tenha gostado desse artigo! Eu pessoalmente uso essa ferramenta diariamente e me ajudou muito, principalmente em projetos open source, espero que possa te ajudar também.

Caso queira ler mais sobre, aqui está o manual oficial.

Se tiver alguma dúvida, sugestão ou feedback, sinta-se à vontade para deixar um comentário, ficarei feliz em responder, obrigado por ler!

Array Destructuring in Javascript, do you know what it is?

Falcão — Thu, 08 Feb 2024 22:18:52 +0000

Recently I was programming in one of my projects and when I innocently went to get the first value of an array as every good programmer does const value = array[0], my Eslint immediately complained and told me to use something called Array Destructuring, I was very confused because I had never heard of such a technique.

If you, like me, don't know what that is, today we will see everything about this powerful syntax that makes manipulating arrays much more enjoyable.

What the linter wanted me to know
Skipping values
Assigning the rest of the array
Arrays and functions
Using default values
Passing the job interview
Conclusion

What the linter wanted me to know

Imagine that we want to extract information from an array, usually what we do is something like the following:

let introduction = ["I", "want" , "to", "play", "minecraft"];
let person = phrase[0];
let game = phrase[4];

console.log(person); //"I"
console.log(game); //"minecraft"

However, in Javascript ES6, the new Array Destructuring method was introduced to extract information from an array, let's see its syntax using the same example:

let phrase = ["I", "want" , "to", "play", "minecraft"];
let [person, desire] = phrase;

console.log(person); //"I"
console.log(desire); //"want"

We can also do it like this:

let [person, desire] = ["I", "want" , "to", "play", "minecraft"];

console.log(person); //"I"
console.log(desire); //"want"

Or like this:

let person, desire;
[person, desire] = ["I", "want" , "to", "play", "minecraft"];

console.log(person); //"I"
console.log(desire); //"want"

Note that the 3 ways presented have the same result, and as expected, the variables have their values assigned from left to right, so the first variable receives the first value of the array, the second the second and so on.

Skipping values

Maybe now you are thinking that I deceived you, because I said that I would show the same example, but here we are taking the first two values, instead of the first and the last, let's see how to do that:

let [person,,,,game] = ["I", "want" , "to", "play", "minecraft"];

console.log(person); //"I"
console.log(game); //"minecraft"

What happened here?

Note that instead of 1 comma, here we have 4, this is how we do to "skip" values in destructuring, we have the normal comma and three additional ones, which indicate that we want to skip three values, so we can replicate the original behavior of getting the first and last value.

This special comma can also be placed at the beginning of the array, indicating that we want to skip the first value:

let [,desire,,,game] = ["I", "want" , "to", "play", "minecraft"];

console.log(desire); //"want"
console.log(game); //"minecraft"

The comma operator also allows us to do something very funny, skip all items in an array:

// :)
let [,,,,,] = ["I", "want" , "to", "play", "minecraft"];

Assigning the rest of the array

Everything we've seen here is very cool, but choosing and skipping values from the array is unlikely to happen in the real world, and if we want to take the first variable and put the rest in a specific variable?

let [person, ...rest] = ["I", "want" , "to", "play", "minecraft"];

console.log(person); //"I"
console.log(rest); //["want", "to", "play", "minecraft"]

Arrays and functions

This technique is especially useful when we are using functions that return an array, so we can extract the values directly:

function getArray() {
    return ["I", "want" , "to", "play", "minecraft"];
}
let [person, desire] = getArray();

console.log(person); //"I"
console.log(desire); //"want"

Using default values

Another interesting property, we can use initial values for our variables, just like in functions:

let [person = "I", game = "minecraft"] = ["me"];

console.log(person); //"me"
console.log(game); //"minecraft"

In the example above, the game variable used the initial value we gave it since there was no other value in the array.

If you are wondering what happens if we put more variables on the left side than values on the right side, without using default values, in this case the remaining variables simply receive undefined:

let [person, desire] = ["I"];

console.log(person); //"I"
console.log(desire); //undefined

Passing the job interview

Now a curiosity:

let a = 3;
let b = 6;

[a, b] = [b, a];

console.log(a); //6
console.log(b); //3

And that's it! Now thanks to this text you can answer if they ask you how to swap the value of two variables without using a third one :D

Conclusion

If you used React or React Native before, Array Destructuring is exactly what is happening when you use useState:

const [count, setCount] = useState(0);

Thank you for reading and I hope you have learned something new today or reinforced what you already knew! I certainly learned a lot to write this article, if you want to read more about destructuring in general, I recommend the mozilla documentation.

Array Destructuring no Javascript, você sabe o que é?

Falcão — Thu, 08 Feb 2024 22:15:59 +0000

Recentemente eu estava tranquilamente programando em um projeto meu e quando eu inocentemente fui pegar o primeiro valor de um vetor como todo bom programador faz const valor = vetor[0], meu Eslint imediatamente reclamou e me mandou usar algo chamado Array Destructuring, fiquei muito confuso pois nunca tinha ouvido falar de tal técnica.

Se você assim como eu você não sabe o que é isso, veremos hoje tudo sobre essa sintaxe poderosa que faz manipular vetores muito mais agradável.

Sumário

O que o linter queria que eu soubesse
Pulando valores
Atribuindo o resto do vetor
Vetores e funções
Usando valores iniciais
Passando na entrevista de emprego
Conclusão

O que o linter queria que eu soubesse

Imagine que queremos extrair informações de um vetor, geralmente o que fazemos é algo como o seguinte:

let frase = ["Eu", "quero" , "jogar", "minecraft"];
let pessoa = frase[0];
let jogo = frase[3];

console.log(pessoa); //"Eu"
console.log(jogo); //"minecraft"

Entretanto, no Javascript ES6, foi introduzido o novo método Array Destructuring para extrair informações de um vetor, vejamos como é sua sintaxe utilizando o mesmo exemplo:

let frase = ["Eu", "quero" , "jogar", "minecraft"];
let [pessoa, vontade] = frase;

console.log(pessoa); //"Eu"
console.log(vontade); //"quero"

Também podemos fazer desse jeito:

let [pessoa, vontade] = ["Eu", "quero" , "jogar", "minecraft"];

console.log(pessoa); //"Eu"
console.log(vontade); //"quero"

Ou assim:

let pessoa, vontade;
[pessoa, vontade] = ["Eu", "quero" , "jogar", "minecraft"];

console.log(pessoa); //"Eu"
console.log(vontade); //"quero"

Note que as 3 maneiras apresentadas apresentam o mesmo resultado, e como é de se esperar, as variáveis tem seus valores atribuídos da esquerda para a direita, então a primeira variável recebe o primeiro valor do vetor, a segunda o segundo e assim por diante.

Pulando valores

Talvez agora você esteja pensando que eu te enganei, pois eu disse que mostraria o mesmo exemplo, porém aqui estamos pegando os dois primeiros valores, ao invés do primeiro e do último, vejamos então como fazer isso:

let [pessoa,,,jogo] = ["Eu", "quero" , "jogar", "minecraft"];

console.log(pessoa); //"Eu"
console.log(jogo); //"minecraft"

O que aconteceu aqui?

Perceba que ao invés de 1 vírgula, aqui nós temos 3, é assim que se faz para "pular" valores na desestruturação, temos a vírgula normal e outras duas adicionais, que indicam que queremos pular dois valores, assim conseguimos replicar o comportamento original de pegar o primeiro e último valor.

Essa vírgula especial também pode ser colocada no começo do vetor, indicando que queremos pular o primeiro valor:

let [,vontade,,jogo] = ["Eu", "quero" , "jogar", "minecraft"];

console.log(vontade); //"quero"
console.log(jogo); //"minecraft"

O operador da vírgula também nos permite fazer algo muito engraçado, pular todos os itens de um vetor:

// :)
let [,,,,] = ["Eu", "quero" , "jogar", "minecraft"];

Atribuindo o resto do vetor

Tudo que vimos aqui é muito legal, mas ficar escolhendo e pulando valores do vetor dificilmente vai acontecer no mundo real, e se quisermos pegar a primeira variável e colocar o resto em uma outra variável específica?

let [pessoa, ...resto] = ["Eu", "quero" , "jogar", "minecraft"];

console.log(pessoa); //"Eu"
console.log(resto); //["quero", "jogar", "minecraft"]

Vetores e funções

Essa técnica fica especialmente útil quando estamos usando funções que retornam um vetor, assim podemos extrair os valores diretamente:

function retornaVetor() {
    return ["Eu", "quero" , "jogar", "minecraft"];
} 
let [pessoa, vontade] = retornaVetor();

console.log(pessoa); //"Eu"
console.log(vontade); //"quero"

Usando valores iniciais

Outra propriedade interessante, podemos usar valores iniciais para nossas variáveis, assim como em funções:

let [pessoa = "Eu", jogo = "minecraft"] = ["eu"];

console.log(pessoa); //"eu"
console.log(jogo); //"minecraft"

No exemplo acima, a variável jogo, usou o valor inicial que demos a ela já que não existia um outro valor no vetor.

Caso você esteja se perguntando o que acontece se colocamos mais variáveis do lado esquerdo do que valores do lado direito, sem usar valores padrão, nesse caso as variáveis sobrando simplesmente recebem undefined:

let [pessoa, vontade, verbo] = ["Eu"];

console.log(pessoa); //"Eu"
console.log(vontade); //undefined
console.log(verbo); //undefined

Passando na entrevista de emprego

Agora uma curiosidade:

let a = 3;
let b = 6;

[a, b] = [b, a];

console.log(a); //6
console.log(b); //3

Pronto! Agora graças a esse texto você consegue responder se te perguntarem como trocar o valor de duas variáveis sem usar uma terceira :D

Conclusão

Se você já usou React ou React Native antes, Array Destructuring é exatamente o que está acontecendo quando você usa o useState:

const [count, setCount] = useState(0);

Obrigado por ler e espero que tenha aprendido algo novo hoje ou reforçado o que já sabia! Eu com certeza aprendi muito para escrever esse artigo, se você quer ler mais sobre desestruturação no geral, eu recomendo a documentação da mozilla.

Como criar um bot do discord com javascript

Falcão — Tue, 02 Jan 2024 18:11:38 +0000

Se você é familiar com o Discord você provavelmente conhece algum bot usado na palataforma, seja a Loritta, o MEE6 ou algum outro. De fato, usar eles no seu servidor é uma parte crucial da experiência do Discord hoje em dia. Pensando nisso, vamos hoje ver como podemos criar nosso próprio bot!

Por que criar um bot?
Preparando o Ambiente de Desenvolvimento
Criando uma nova aplicação
Dando vida ao Bot
Criando seu primeiro comando
Comandos de barra
Lidando com comandos e eventos
Dicas
Aprenda mais
Conclusão

Por que criar um bot?

Como eu disse anteriormente, hoje em dia no Discord temos milhares de bots com as mais diversas funcionalidades, de moderação até RPG ou algo completamente novo, então por que se preocupar em criar o seu?

Existem várias razões que podem te atrair para o desenvolvimento de bots, a primeira delas é simplesmente a curiosidade, talvez você se interesse em como eles são feitos, uma outra é a necessidade, talvez você teve uma ideia mirabolante que nenhum outro bot implementou ainda e quer criar isso (eu por exemplo tenho um bot que só é disponível no servidor da turma da minha faculdade).

De qualquer modo, qualquer um desses motivos te leva ao estudo e a prática, desenvolver projetos reais e estudar áreas desconhecidas é a chave para se tornar um desenvolvedor melhor, e talvez quem sabe, você se apaixone pela área :) ok, chega de enrolação e vamos colocar a mão na massa!

Preparando o Ambiente de Desenvolvimento

Primeiro de tudo, precisamos instalar o Node.js e uma IDE ou editor de texto, eu gosto do Visual Studio Code.

Agora crie uma nova pasta com o nome que desejar, seu projeto ficará dentro dessa pasta, entre na sua pasta criada com o seu editor de código de preferência e use o comando npm init -y, isso vai criar um projeto em javascript para você.

Como pode ver, esse comando criou o arquivo package.json, esse arquivo guarda as informações do seu projeto, como o foco desse artigo não é ensinar javascript, não irei me aprofundar na funcionalidade de cada campo, o importante é saber que esse arquivo é essencial para o funcionamento correto do seu projeto.

Criando uma nova aplicação

Antes de fazer qualquer outra coisa no nosso projeto, precisamos registrar uma nova aplicação no Portal de Desenvolvedores do Discord

Essa é a página de aplicações do Discord, aqui todos as suas aplicações podem ser vistas e editadas, "aplicações" é o termo que o Discord usa para se referir a bots, caso você nunca tenha criado um anteriormente, essa página estará vazia, vamos clicar em "Nova Aplicação" no canto superior direito.

O Discord agora vai te pedir um nome para seu bot, não se preocupe, ele pode ser editado mais tarde!

Depois disso, a página de informações gerais vai aparecer, ela é assim:

Essa página contém informações como o nome, descrição, foto, tags, número de servidores do seu bot entre outras, sinta-se livre para deixar o bot com a sua cara, pela simplicidade, eu deixarei tudo como está.

O próximo passo é criar um link de convite do seu bot, assim podemos adicionar ele em qualquer servidor que desejarmos, para isso precisamos selecionar o botão OAuth2 no menu lateral, quando o menu abrir embaixo desse botão escolha o gerador de URL.

Em "Scopes", vamos selecionar "bot" e "applications.commands", isso vai dizer para o Discord que queremos adicionar um Bot que tem permissão para registrar comandos.

Assim que você clicar em "bot", uma nova seção de permissões do bot vai aparecer, isso serve para o Discord criar automaticamente um cargo para o seu bot quando ele entrar em um servidor, assim você garante que seu bot terá certas permissões que podem ser essenciais para seu funcionamento (se quem adicionar o bot permitir), nesse tutorial não precisamos selecionar nenhuma, pois nosso bot só mandará mensagens, coisa que o cargo "everyone" já pode fazer.

Desça até o final da página e copie o link que o Discord gerou, esse é o link que será usado para adicionar seu bot nos servidores, adicione seu bot em algum servidor seu que sirva para fazer testes (recomendo criar um novo servidor para isso).

Acesse novamente o menu lateral e agora clique na página "Bot".

Nessa página temos uma parte muito importante, o "Build-A-Bot", ela controla como os usuários veem seu bot, a sua foto, seu username e ela também guarda o seu token.

O token é o que diz para o Discord qual é o seu bot, não compartilhe ele, quem tiver acesso ao seu token tem acesso ao seu bot, vá em frente e clique para resetar o token, não se esqueça de anotá-lo pois o Discord só mostra ele uma vez!

(não perca seu tempo tentando controlar meu bot, ele já foi resetado)

Por fim, desça até a seção "Priviled Gateway Intents", na mesma página, e ative a permissão, "Message Content Intent", essa seção contém permissões especiais, que caso seu bot esteja em mais de 100 servidores, requer uma análise do Discord para ser ativada, mas não se preocupe, não é o nosso caso. Essa permissão é necessária para que o bot possa ler as mensagens que os usuários mandam, assim ele pode responder a elas.

Se você chegou até aqui, parabéns! Você registrou um novo bot no Discord com sucesso, agora vamos ver como programá-lo.

Dando vida ao Bot

Anteriormente criamos um novo projeto javascript, vamos acessá-lo novamente.

Usaremos aqui uma biblioteca chamada discord.js, ela é uma das bibliotecas mais usadas para a criação de bots e vai ser nossa principal ferramenta.

Podemos instalar ela rodando o comando npm i discord.js, note que uma pasta chamada node_modules foi criada no seu projeto, ela guarda todos as bibliotecas que você instalar, não mexa nela a não ser que saiba o que está fazendo!

Agora vamos criar um novo arquivo chamado .env, ele será responsável por guardar o token do nosso bot de uma maneira segura, crie ele da seguinte maneira, coloque "TOKEN=" e em seguida o seu token, assim criamos uma variável de ambiente chamada TOKEN.

Para conseguirmos usar essa variável no projeto, precisamos baixar uma biblioteca chamada dotenv, npm i dotenv.

Ademais, precisamos criar um arquivo index.js ele vai ser o arquivo principal do nosso bot, responsável por deixá-lo online, registrar comandos, etc.

Inicialmente o conteúdo do nosso arquivo index será o seguinte:

// Importamos as dependências necessárias
const { Client, GatewayIntentBits } = require("discord.js")
require("dotenv").config()

// Criamos uma instância do client
const client = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages, GatewayIntentBits.MessageContent] })

// Quando o client (bot) estiver pronto, escrevemos no console
client.once("ready", () => {
    console.log("Olá mundo!")
})

// Logamos o bot
client.login(process.env.TOKEN)

Esse é um código bem direto ao ponto, importamos o dotenv e as classes necessárias do discord.js, criamos um novo "client" que é o cliente do nosso bot, esses GatewayIntentBits são eventos (intents) que você declara que deseja receber no nosso caso estamos interessados em eventos relacionados a mensagens e servidores (guilds), assim como no conteúdo da mensagem, que é aquela permissão especial que ativamos anteriormente, para mais informações consulte a Documentação do Discord.

Depois disso declaramos então a função client.once("ready"), quando o bot estiver logado, todo o código dentro dela será executado uma única vez, note a diferença entre client.on e client.once, o primeiro executa o código toda vez que aquele evento aconteça, enquanto o segundo executa somente da primeira vez que esse evento acontecer.

Por fim invocamos client.login passando o token que colocamos no .env, se tudo estiver correto, quando você usar node . no terminal, o bot deve te responder e ficar online no discord.

Criando seu primeiro comando

Chegou a hora que todos esperavam, vamos criar nosso primeiro comando! Para isso, abra novamente seu arquivo index.js e vamos adicionar o seguinte código:

client.on("messageCreate", (message) => {
    if (message.content === "!ping") {
        message.reply(`Pong! ${client.ws.ping}ms`)
    }
})

Está é a estrutura padrão de o que chamamos de "comandos de prefixo", já que usamos prefixos para diferenciar mensagens comuns de chamadas de comandos, nesse caso o prefixo "!", como pode notar, usamos aqui o client.on, pois como é um comando, queremos que ele seja sempre que necessário, e usamos o messageCreate, evento que acontece toda vez que uma mensagem é enviada.

Dentro do evento, verificamos se a mensagem é "!ping", caso seja, respondemos com "Pong!" e o ping do bot, que é o tempo que o bot leva para responder a mensagem, em milissegundos. Se tudo estiver correto, quando você digitar "!ping" no chat do discord, o bot deve responder com "Pong!" e o ping:

Esse é um comando bem simples, mas que ilustra muito bem como esses tipos de comandos funcionam, no entanto, no tópico seguinte aprenderemos sobre comandos de barra, que são muito mais poderosos e fáceis de usar, além de ser a forma que o Discord recomenda para criar comandos.

Comandos de barra

Note que da maneira que criamos um comando anteriormente, adicionar um novo comando seria uma dor de cabeça, seria preciso um encadeamento de "ifs" ou um switch case enorme que basicamente encapsularia todo seu projeto, o que é péssimo para o desenvolvedor e usuário.

Com o objetivo de mitigar esse problema, criaremos uma pasta chamada src e dentro dela uma pasta commands, assim, cada comando será seu próprio arquivo, vamos começar com um comando chamado user.js.

Um comando de barra nada mais é que um objeto com as propriedades "data" e "execute" (claro que se pode adicionar mais propriedades, mas essas são as essenciais), a "data" se refere as informações do seu comando, como nome, descrição, argumentos, etc. Como o nome do arquivo sugere, vamos fazer um comando que mostra algumas informações sobre um usuário, começamos assim:

const { SlashCommandBuilder, EmbedBuilder, time } = require("discord.js")

module.exports = {
    data: new SlashCommandBuilder()
        // declaramos o nome e a descrição em inglês e usamos os metódos de localização para colocar em português
        // assim quem tiver o Discord em português verá em português e se for qualquer outra língua verá em inglês
        .setName("user")
        .setNameLocalization("pt-BR", "usuário")
        .setDescription("See some information about a user")
        .setDescriptionLocalization("pt-BR", "Veja algumas informações sobre um usuário")
        // declaramos as permissões, nesse caso não queremos que o comando seja usado em DM
        .setDMPermission(false)
        // declaramos os argumentos, aqui declaramos uma opção obrigatória chamada user
        .addUserOption((option) =>
            option
                .setName("user")
                .setNameLocalization("pt-BR", "usuário")
                .setDescription("The user to get information")
                .setDescriptionLocalization("pt-BR", "O usuário para pegar as informações")
                .setRequired(true)
        ),

Calma, é muita informação nova de uma vez, não se apresse e leia tudo e os comentários, a maioria dos métodos são triviais e se explicam pelo nome.

Aqui estamos declarando um comando usando o SlashCommandBuilder, perceba que passamos nome e descrição em inglês e usamos os métodos de "Localization" para colocar o nome em português, essa é uma ótima ferramenta de internacionalização do discord, assim quem estiver com o aplicativo em português verá o comando em português, caso contrário, o comando será mostrado em inglês e para nós desenvolvedores nada muda.

Usamos .setDMPermission(false) para indicar que não queremos que esse comando possa ser usado em DM, adicionalmente, declaramos um argumento que o usuário precisará fornecer na hora de usar o comando, do tipo usuário.

Agora vamos escrever a propriedade execute abaixo do código que já temos:

    execute: async ({ interaction }) => {
        // eu sempre gosto de fazer isso para ter mais tempo para responder, fica aquela mensagem que o bot está pensando
        await interaction.deferReply().catch(() => {})

        // pegamos o usuário que foi passado como argumento
        const member = interaction.options.getMember("user")

        // pegamos informações do usuário e colocamos numa embed
        const embed = new EmbedBuilder()
            .setTitle(member.displayName)
            .setColor(member.displayColor)
            .setThumbnail(member.displayAvatarURL())
            .addFields(
                {
                    name: "Membro do Discord desde",
                    value: time(member.user.createdAt),
                    inline: true,
                },
                {
                    name: "Membro desse servidor desde",
                    value: time(member.joinedAt),
                    inline: true,
                }
            )
            .setFooter({ text: member.user.tag, iconURL: member.displayAvatarURL() })

        // temos que editar a resposta e não só responder porque deferReply() foi usado anteriormente
        interaction.editReply({ embeds: [embed] })
    },
}

Como o nome implica, esse é o pedaço de código que será executado toda vez que um usuário usar esse comando, em resumo, criamos aqui uma embed com algumas informações do usuário, como imagem, nome, quando criou a conta do discord, etc.

Se você é como eu, talvez ao terminar esse comando já tenha reiniciado o bot e tentando usar o comando, caso tenha feito isso, você percebeu que ele não aparece, porque?

Lidando com comandos e eventos

Nosso comando ainda não aparece porque comandos de barra são diferentes dos comandos de prefixo, isso porque temos que registrá-los na API do Discord, vamos aprender como fazer isso.

Dentro da pasta src mas fora da pasta commands, vamos criar um novo arquivo functions.js

Dentro desse arquivo, iremos declarar a função loadFiles:

const fs = require("fs")
const { promisify } = require("util")

const readdir = promisify(fs.readdir)

async function loadFiles(dirName) {
    const basePath = `${process.cwd().replace(/\\/g, "/")}/src/${dirName}`

    const files = []
    const items = await readdir(basePath)
    for (const item of items) {
        const itemPath = `${basePath}/${item}`
        if (itemPath.endsWith(".js")) {
            files.push(itemPath)
            delete require.cache[require.resolve(itemPath)]
        }
    }

    return files
}

Talvez esse código pareça alienígena, mas ele serve para carregar todos os arquivos de uma pasta dentro do diretório src.

Em sequência, vamos escrever a função loadCommands, que como o nome sugere serve para carregarmos todos os comandos e registrarmos eles:

async function loadCommands(client) {
    await client.commands.clear()

    const commandsArray = []

    const Files = await loadFiles("commands")

    Files.forEach((file) => {
        const command = require(file)
        client.commands.set(command.data.name, command)
        commandsArray.push(command.data.toJSON())

        console.log(`Comando: ${command.data.name} ✅`)
    })

    client.application.commands.set(commandsArray)
}

Analogamente, vamos declarar a loadEvents, assim podemos declarar eventos como declaramos comandos, um por arquivo dentro de sua própria pasta:

async function loadEvents(client) {
    await client.events.clear()

    const Files = await loadFiles("events")

    Files.forEach((file) => {
        const event = require(file)

        const execute = (...args) => event.execute(...args, client)
        client.events.set(event.name, execute)

        if (event.once) {
            client.once(event.name, execute)
        } else {
            client.on(event.name, execute)
        }

        console.log(`Evento: ${event.name} ✅`)
    })
}

module.exports = {
    loadFiles,
    loadEvents,
    loadCommands,
}

Perceba que caso na declaração do evento exista a propriedade once: true, declaramos ele como client.once e do contrário como client.on, diferença que discutimos anteriormente. Por fim, exportamos as 3 funções.

Talvez agora você se encontre meio confuso, acabei de te mostrar 3 funções e entrei em pouco detalhe sobre elas, peço paciência, logo logo a importância delas ficará clara.

Agora que temos essas funções, vamos voltar ao index.js e mudar o código:

// Importamos as dependências necessárias
const { Client, GatewayIntentBits, Collection } = require("discord.js")
require("dotenv").config()

// Importamos as funções que criamos
const { loadEvents, loadCommands } = require("./src/functions")

// Criamos uma instância do client
const client = new Client({
    intents: [GatewayIntentBits.Guilds],
})

// Quando o client (bot) estiver pronto, escrevemos no console
client.once("ready", () => {
    console.log("Olá mundo!")
})

// Logamos o bot
client.login(process.env.TOKEN)

Leitores atentos perceberam que importamos as funções que acabamos de criar, leitores mais atentos perceberam que removemos alguns dos intents que existiam anteriormente isso é porque não precisamos mais ler mensagens (o que implica também que aquela permissão especial que ativamos no portal do Discord também não é necessária nesse tipo de comando), e leitores ainda mais atentos perceberam que adicionamos Collection as classes que importamos do discord.

Uma Collection é uma estrutura de dados criada pelo discord.js, que é basicamente um Map com métodos extras, usaremos ela dentro do evento "ready" da seguinte maneira:

// Quando o client (bot) estiver pronto, escrevemos no console
client.once("ready", () => {
    console.log("Olá mundo!")

    client.commands = new Collection()
    client.events = new Collection()

    loadEvents(client)
    loadCommands(client)
})

Os comandos e eventos serão armazenados dentro client usando as Collections, usamos a loadEvents e loadCommands para carregá-los.

Talvez, você esteja pensando porque eu criei uma função chamada loadEvents e a chamei dentro do arquivo principal, sendo que não temos nenhum evento, lembra como nos comandos de prefixo era necessário o uso do messageCreate? Então, para controlar os comandos de barra, também precisamos de um evento, o interactionCreate.

Criemos então a pasta events dentro da pasta src e dentro dela o arquivo interactions.js

Dentro desse arquivo, vamos declarar o evento interactionCreate:

module.exports = {
    name: "interactionCreate",
    execute: async (interaction, client) => {
        // se a interação for um comando de chat, continuamos
        if (interaction.isChatInputCommand()) {
            // pegamos o comando pelo nome
            const command = client.commands.get(interaction.commandName)

            // invocamos a função execute do comando, passando algumas informações úteis
            command.execute({
                interaction,
                client,
                member: interaction.member,
                guild: interaction.guild,
                user: interaction.user,
                channel: interaction.channel,
            })
        }
    },
}

Essa é a estrutura de um evento, name se refere ao tipo de evento, nesse caso interactionCreate e novamente temos o execute como o código que será executado toda vez que esse evento for invocado.

Usamos o interaction.IsChatInputCommand() para garantir que se trata de um comando que é invocado pelo chat, pois temos outros tipos de comandos que são tratados dentro desse mesmo evento, após isso verificamos qual comando é e invocamos o seu execute passando algumas propriedades úteis.

Ufa! Agora sim, quando rodarmos o projeto novamente com node ., veremos o bot no terminal nos dizendo que o comando user e o evento interactionCreate foram carregados com sucesso.

Agora, se formos para o Discord e digitar /user, veremos o comando! (lembre-se que se seu Discord está em português o comando aparecerá como "/usuário", de qualquer modo digitar /user vai mostrar o comando desejado)

Escolha um usuário e veja a mágica acontecer!

Parabéns! Você criou seu primeiro bot do Discord!

Essa é a estrutura básica de um bot, existem ainda muitos conceitos mais avançados, cooldowns, sub comandos, testes... mas com essa estrutura você já pode começar sua jornada nesse universo!

Dicas

Deixarei aqui algumas dicas soltas para você que quer seguir desenvolvendo nessa área:

Crie um segundo bot, deixe seu primeiro bot como um ambiente de "produção" e faça seus testes no segundo bot, assim você pode desenvolver sem afetar seus usuários (podemos alternar entre os dois só mudando o token)
O site top.gg contém milhares de bots diferentes e é possível filtrar por categorias, é um bom lugar para pesquisar outros bots parecidos com o seu e também é possível colocar o seu bot lá para mais exposição
Pense em criar um site para o seu bot, caso você deseje verificar seu bot, você tem que preencher alguns requisitos, dois deles é fornecer o link para sua Política de Privacidade e Termos de Serviço, uma boa forma de fazer isso é com um site, que também é um bom veículo para promover seu bot
Meu jeito de criar bots não é o supremo! A biblioteca discord.js é bem não-opinativa e existem infinitos modos de se declarar um bot (é possível até criar bots com Typescript com a mesma biblioteca), use o Github! Pesquise!

Aprenda mais

Se quer aprender mais e levar seu bot ao próximo nível, aqui estão alguns materiais úteis:

Guia discord.js esse é um guia muito completo e bem escrito que cobre tudo que eu cobri aqui e MUITO mais! O único detalhe é que ele é escrito em inglês.
Documentação da biblioteca discord.js a documentação é um ótimo site para você deixar salvo e conferir sempre que precisar, é muito simples de achar o que você quer dentro dela e ver todos os métodos e propriedades daquela classe
Um pouco de marketing da minha parte, mas que também pode ser útil como referência são os repositórios do meu bot principal, minha própria biblioteca de minigames pro discord e meu template de discord bots que é um pouco mais completo que o que desenvolvemos juntos aqui
O código desenvolvido nesse artigo também estará disponível no meu github

Conclusão

Se você chegou até aqui, muito obrigado! Espero que você tenha pelo menos aprendido alguma coisa nova, esse é meu primeiro artigo aqui então qualquer crítica (construtiva), comentário, dúvida ou elogio por favor deixe nos comentários :)

How to create a discord bot with javascript

Falcão — Tue, 02 Jan 2024 18:10:46 +0000

If you use Discord you probably knows some bot used in the platform, be it Loritta, MEE6 or some other. In fact, using bots in your server is a crucial part of the Discord experience nowadays. With that in mind, let's find out today how to create our own bot!

Why create a bot?
Configuring the Development Enviroment
Creating a new Application
Giving your Bot life
Creating your first command
Slash Commands
Handling commands and events
Tips
Learn more
Conclusion

Why create a bot?

As I said earlier, nowadays on Discord we have thousands of bots with the most diverse functionalities, from moderation to RPG or something completely new, so why bother creating your own?

There are several reasons that can attract you to the development of bots, the first of them is simply curiosity, maybe you are interested in how they are made, another is the need, maybe you had a crazy idea that no other bot has implemented yet and want to create it (I for example have a bot that is only available on my college class server).

Whatever the reason is, it is going to lead you to study and practice, develop real projects and study unknown areas is the key to becoming a better developer, and maybe who knows, you might fall in love with the area :) ok, enough rambling and let's get our hands dirty!

Configuring the Development Enviroment

First of all, we need to install Node.js and an IDE or text editor, I like Visual Studio Code.

After that, create a new folder with the name you want, your project will be inside this folder, enter your newly created folder with your preferred code editor and use the command npm init -y, this will create a javascript project for you.

As you can see, this command created the file package.json, this file stores the information of your project, as the focus of this article is not to teach javascript, I will not go into the functionality of each field, the important thing to know is that this file is essential for the correct functioning of your project.

Creating a new Application

Before doing anything else in our project, we need to register a new application on the Discord Developer Portal

This is the Discord applications page, here all your applications can be viewed and edited, "applications" is the term Discord uses to refer to bots, if you have never created one before, this page will be empty, let's click on "New Application" in the upper right corner.

You'll now be asked to enter a name for your application, don't worry, it can be edited later!

After that, the general information page will appear, it looks like this:

This page contains information such as the name, description, photo, tags, number of servers of your bot among others, feel free to leave the bot with your face, for simplicity, I will leave everything as it is.

The next step is to create an invite link for your bot, so we can add it to any server we want, for that we need to select the OAuth2 button in the side menu, when the menu opens below this button choose the URL generator.

In the "Scopes" section, we will select "bot" and "applications.commands", this will tell Discord that we want to add a Bot that has permission to register commands.

As soon as you click on "bot", a new section of bot permissions will appear, this is used for Discord to automatically create a role for your bot when it joins a server, so you make sure that your bot will have certain permissions that may be essential for its operation (if the person who adds the bot allows it), in this tutorial we don't need to select any, because our bot will only send messages, something that the "everyone" role can already do.

Scroll to the bottom of the page and copy the invite link Discord has generated, this is the link that will be used to add your bot to servers, add your bot to a server of yours that serves to do tests (I recommend creating a new server for this).

Once again access the lateral menu anc click on the "Bot" page.

On this page we have a very important part, the "Build-A-Bot" section, it controls how users see your bot, your photo, your username and it also stores your token.

The token is what tells Discord which is your bot, do not share it, whoever has access to your token has access to your bot, go ahead and click to reset the token, don't forget to write it down because Discord only shows it once!

(don't waste your time trying to control my bot, it has already been reset)

Finally, scroll down to the "Priviled Gateway Intents" section, on the same page, and activate the permission, "Message Content Intent", this section contains special permissions, which if your bot is in more than 100 servers, requires a Discord analysis to be activated, but don't worry, that's not our case. This permission is necessary for the bot to be able to read the messages that users send, so it can respond to them.

If you've made it this far, congratulations! You've successfully registered a new bot on Discord, now let's see how to program it.

Giving your Bot life

Previously we created a new javascript project, let's access it again.

We will use a library called discord.js, it is one of the most used libraries for creating bots and will be our main tool.

We can install it by running the command npm i discord.js, note that a folder called node_modules was created in your project, it stores all the libraries you install, don't mess with it unless you know what you're doing!

Let's now create a new file called .env, who will be responsible with storing our bot token in a safe way, when you create it put "TOKEN=" and your token after it, this way we create an environment variable called TOKEN.

To be able to use that variable in our project, we need to download a library called dotenv, npm i dotenv.

Besides that, we need to create a file called index.js, it will be our bot's main file, responsible for keeping it online, registering commands, etc.

Initially the content of our index file will be the following:

// Importing the necessary dependencies
const { Client, GatewayIntentBits } = require("discord.js")
require("dotenv").config()

// Creating the client instance
const client = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages, GatewayIntentBits.MessageContent] })

// When the client (bot) is ready, we write to the console
client.once("ready", () => {
    console.log("Hello world!")
})

// Logging the bot
client.login(process.env.TOKEN)

This is a very straightforward code, we import dotenv and the necessary classes from discord.js, create a new "client" that is our bot's client, these GatewayIntentBits are events (intents) that you declare that you want to receive in our case we are interested in events related to messages and servers (guilds), as well as the content of the message, which is that special permission we activated earlier, for more information check the Discord Documentation.

Afterwards, we declare the function client.once("ready"), when the bot is logged in, all the code inside it will be executed only once, note the difference between client.on and client.once, the first one executes the code every time that event happens, while the second one executes only the first time that event happens.

Finally we invoke client.login passing the token we put in .env, if everything is correct, when you use node . in the terminal, the bot should respond and be online on discord.

Creating your first command

The time that everyone was waiting for has come, let's create our first command! To do this, open your index.js file again and let's add the following code:

client.on("messageCreate", (message) => {
    if (message.content === "!ping") {
        message.reply(`Pong! ${client.ws.ping}ms`)
    }
})

This is the standard structure of what we call "prefix commands", since we use prefixes to differentiate common messages from command calls, in this case the prefix "!", as you can see, we use here the client.on, because as it is a command, we want it to be whenever necessary, and we use the messageCreate, event that happens every time a message is sent.

Inside the event, we check if the message is "!ping", if it is, we respond with "Pong!" and the bot's ping, which is the time it takes for the bot to respond to the message, in milliseconds. If everything is correct, when you type "!ping" in the discord chat, the bot should respond with "Pong!" and the ping:

This is a pretty simple command, but it illustrates very well how these types of commands work, however, in the next topic we will learn about "slash commands", which are much more powerful and easy to use, besides being the way Discord recommends to create commands.

Slash commands

Note that the way we created a command previously, adding a new "if" for each command would be a headache, it would be necessary to chain "ifs" or a huge switch case that would basically encapsulate your entire project, which is terrible for the developer and user.

To mitigate this problem, we will create a folder called src and inside it a folder called commands, this way, each command will be its own file, let's start with a command called user.js.

A Slash Command is nothing more than an object with the properties "data" and "execute" (of course you can add more properties, but these are the essential ones), "data" refers to the information of your command, such as name, description, arguments, etc. As the name of the file suggests, we will make a command that shows some information about a user, we start like this:

const { SlashCommandBuilder, EmbedBuilder, time } = require("discord.js")

module.exports = {
    data: new SlashCommandBuilder()
        .setName("user")
        // we can internationalize the name of the command like this, 
        // so if the user is using the discord in portuguese, the command will appear in portuguese
        .setNameLocalization("pt-BR", "usuário")
        .setDescription("See some information about a user")
        .setDescriptionLocalization("pt-BR", "Veja algumas informações sobre um usuário")
        // we don't want this command to be used in DM
        .setDMPermission(false)
        // we declare an argument that the user will have to provide when using the command, of the type user
        .addUserOption((option) =>
            option
                .setName("user")
                .setNameLocalization("pt-BR", "usuário")
                .setDescription("The user to get information")
                .setDescriptionLocalization("pt-BR", "O usuário para pegar as informações")
                .setRequired(true)
        ),

Let's hold on for a moment, it's a lot of new information at once, don't rush and read everything and the comments, most of the methods are trivial and are explained by the name.

Here we are declaring a command using the SlashCommandBuilder, notice that we pass the name and description in English and use the "Localization" methods to put the name in Portuguese, this is a great tool for internationalization of discord, so whoever is using the application in Portuguese will see the command in Portuguese, otherwise, the command will be shown in English and for us developers nothing changes.

We use .setDMPermission(false) to indicate that we don't want this command to be used in DM, additionally, we declare an argument that the user will have to provide when using the command, of the type user.

Now let's write the propert execute below the code we already have:

    execute: async ({ interaction }) => {
        // I always like to do this to have more time to respond, it's that message that the bot is thinking
        await interaction.deferReply().catch(() => {})

        // we get the user that was passed as an argument
        const member = interaction.options.getMember("user")

        // we get user information and put it in an embed
        const embed = new EmbedBuilder()
            .setTitle(member.displayName)
            .setColor(member.displayColor)
            .setThumbnail(member.displayAvatarURL())
            .addFields(
                {
                    name: "Membro do Discord desde",
                    value: time(member.user.createdAt),
                    inline: true,
                },
                {
                    name: "Membro desse servidor desde",
                    value: time(member.joinedAt),
                    inline: true,
                }
            )
            .setFooter({ text: member.user.tag, iconURL: member.displayAvatarURL() })

        // we need to edit the response and not just reply because deferReply() was used earlier
        interaction.editReply({ embeds: [embed] })
    },
}

Like the name implies, this is the piece of code that will be executed every time a user uses this command, in short, we create an embed with some information about the user, such as image, name, when they created their discord account, etc.

If you are like me, maybe when you finish this command you have already restarted the bot and tried to use the command, if you did that, you noticed that it doesn't appear, why?

Handling commands and events

Our command does not appear yet because slash commands are different from prefix commands, this is because we have to register them in the Discord API, let's learn how to do that.

Inside the src folder, but outside the commands folder, we will create a new file functions.js

Inside this file, we will declare the function loadFiles:

const fs = require("fs")
const { promisify } = require("util")

const readdir = promisify(fs.readdir)

async function loadFiles(dirName) {
    const basePath = `${process.cwd().replace(/\\/g, "/")}/src/${dirName}`

    const files = []
    const items = await readdir(basePath)
    for (const item of items) {
        const itemPath = `${basePath}/${item}`
        if (itemPath.endsWith(".js")) {
            files.push(itemPath)
            delete require.cache[require.resolve(itemPath)]
        }
    }

    return files
}

Maybe this code looks alien to you, but it serves to load all the files in a folder inside the src directory.

In sequence, we will write the function loadCommands, which as the name suggests serves to load all the commands and register them:

async function loadCommands(client) {
    await client.commands.clear()

    const commandsArray = []

    const Files = await loadFiles("commands")

    Files.forEach((file) => {
        const command = require(file)
        client.commands.set(command.data.name, command)
        commandsArray.push(command.data.toJSON())

        console.log(`Command: ${command.data.name} ✅`)
    })

    client.application.commands.set(commandsArray)
}

Analagously, we will declare the loadEvents, so we can declare events as we declare commands, one per file inside its own folder:

async function loadEvents(client) {
    await client.events.clear()

    const Files = await loadFiles("events")

    Files.forEach((file) => {
        const event = require(file)

        const execute = (...args) => event.execute(...args, client)
        client.events.set(event.name, execute)

        if (event.once) {
            client.once(event.name, execute)
        } else {
            client.on(event.name, execute)
        }

        console.log(`Events: ${event.name} ✅`)
    })
}

module.exports = {
    loadFiles,
    loadEvents,
    loadCommands,
}

Pay attention that if in the event declaration there is the property once: true, we declare it as client.once and otherwise as client.on, difference that we discussed earlier. Finally, we export the 3 functions.

Maybe now you are a little confused, I just showed you 3 functions and went into little detail about them, I ask for patience, soon the importance of them will become clear.

Now that we hve these functions, let's go back to index.js and change the code:

// Importing the necessary dependencies
const { Client, GatewayIntentBits, Collection } = require("discord.js")
require("dotenv").config()

// Importing the functions we created
const { loadEvents, loadCommands } = require("./src/functions")

// Creating the client instance
const client = new Client({
    intents: [GatewayIntentBits.Guilds],
})

// When the client (bot) is ready, we write to the console
client.once("ready", () => {
    console.log("Hello world!")
})

// Logging the bot
client.login(process.env.TOKEN)

Attentive readers will notice that we imported the functions we just created, more attentive readers will notice that we removed some of the intents that existed before, that's because we don't need to read messages anymore (which also implies that that special permission we activated in the Discord portal is also not necessary in this type of command), and even more attentive readers will notice that we added Collection to the classes we import from discord.

A Collection is a data structure created by discord.js, which is basically a Map with extra methods, we will use it inside the "ready" event as follows:

// When the client (bot) is ready, we write to the console
client.once("ready", () => {
    console.log("Olá mundo!")

    client.commands = new Collection()
    client.events = new Collection()

    loadEvents(client)
    loadCommands(client)
})

The commands and events will be stored inside client using the Collections, we use loadEvents and loadCommands to load them.

Now, you may be wondering why I created a function called loadEvents and called it inside the main file, when we don't have any events, remember how in the prefix commands it was necessary to use messageCreate? So, to control the prefix commands, we also need an event, the interactionCreate.

Let's create the folder events inside the src folder and inside it the file interactions.js

We will declare the event interactionCreate inside this file:

module.exports = {
    name: "interactionCreate",
    execute: async (interaction, client) => {
        if (interaction.isChatInputCommand()) {
            // we get the command by the name
            const command = client.commands.get(interaction.commandName)

            // we invoke the command's execute function, passing some useful information
            command.execute({
                interaction,
                client,
                member: interaction.member,
                guild: interaction.guild,
                user: interaction.user,
                channel: interaction.channel,
            })
        }
    },
}

This is the structure of an event, name refers to the type of event, in this case interactionCreate and again we have the execute as the code that will be executed every time this event is invoked.

We use interaction.isChatInputCommand() to make sure it is a command that is invoked by chat, because we have other types of commands that are handled within this same event, after that we check which command it is and invoke its execute passing some useful properties.

Alright! Now, if we restart the bot, we will see the bot in the terminal telling us that the user command and the interactionCreate event were loaded successfully.

Now, if we go to the Discord and type /user, we will see the command!

Choose a user and see the result!

Congratulations! You have created your first Discord bot!

This is the basic structure of a bot, there are still many more advanced concepts, cooldowns, sub commands, tests... but with this structure you can already start your journey in this universe!

Tips

I will leave here some loose tips for you who want to keep developing in this area:

Create a second bot, leave your first bot as a "production" environment and do your tests on the second bot, that way you can develop without affecting your users (we can switch between the two just by changing the token)
The site top.gg contains thousands of different bots and it is possible to filter by categories, it is a good place to search for other bots similar to yours and it is also possible to put your bot there for more exposure
Think about creating a website for your bot, if you want to verify your bot, you have to fill some requirements, two of them is to provide the link to your Privacy Policy and Terms of Service, a good way to do this is with a website, which is also a good vehicle to promote your bot
My way of creating bots is not supreme! The discord.js library is very non-opinionated and there are infinite ways to declare a bot (it is even possible to create bots with Typescript with the same library), use Github! Search!

Learn more

If you wish to learn more and take your bot to the next level, here are some useful materials:

Discord.js Guide this is a very complete and well written guide that covers everything I covered here and MUCH more!
Discord.js library documentation the documentation is a great site to save and check whenever you need, it is very simple to find what you want inside it and see all the methods and properties of that class
A little marketing on my part, but which can also be useful as a reference are the repositories of my main bot, my own discord minigames library and my discord bot template which is a little more complete than what we developed together here
The code developed in this article will also be available on my github

Conclusion

If you sticked with me until here, thank you very much! I hope you have at least learned something new, this is my first article here so any (constructive) criticism, comment, question or compliment please leave in the comments :)

DEV Community: Falcão

Como eu tirei uma certificação oficial do Github em um dia

O que é?

E a facada?

Como estudar?

Hora da verdade

Conclusão

How I got an official Github Certification in one day

What is it?

And the cost?

How to study?

The moment of truth

Conclusion

Increase your productivity with the Github CLI

Table of contents

Instalation

Authenticating

Repositories

Issues

Pull requests

Aliases

Actions

Learning more

Extensions

Conclusion

Aumente sua produtividade com a Github CLI

Sumário

Instalação

Autenticando

Repositórios

Issues

Pull requests

Apelidos

Actions

Descobrindo mais

Extensões

Conclusão

Array Destructuring in Javascript, do you know what it is?

Table of contents

What the linter wanted me to know

Skipping values

Assigning the rest of the array

Arrays and functions

Using default values

Passing the job interview

Conclusion

Array Destructuring no Javascript, você sabe o que é?

Sumário

O que o linter queria que eu soubesse

Pulando valores

Atribuindo o resto do vetor

Vetores e funções

Usando valores iniciais

Passando na entrevista de emprego

Conclusão

Como criar um bot do discord com javascript

Table of Contents

Por que criar um bot?

Preparando o Ambiente de Desenvolvimento

Criando uma nova aplicação

Dando vida ao Bot

Criando seu primeiro comando

Comandos de barra

Lidando com comandos e eventos

Dicas

Aprenda mais

Conclusão

How to create a discord bot with javascript

Table of Contents

Why create a bot?

Configuring the Development Enviroment

Creating a new Application

Giving your Bot life

Creating your first command

Slash commands

Handling commands and events

Tips

Learn more

Conclusion