DEV Community: Jackson Dhanyel Santin

Login/cadastro com firebase + Vue JS #PASSO 3️⃣ (login)

Jackson Dhanyel Santin — Fri, 25 Oct 2024 13:38:45 +0000

Vamos criar a rota de login do projeto, vamos focar nessa estrutura abaixo.

.
├── src
│   └── router
│       └── index.js

No arquivo index.js vamos adicionar o seguinte:

import { createRouter, createWebHistory } from 'vue-router'
import { getAuth, onAuthStateChanged } from 'firebase/auth'
import Login from '@/module/login/view/login.vue'
import Register from '@/module/register/view/register.vue'
import Home from '@/module/home/view/home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/cadastro',
      name: 'Register',
      component: Register
    }
  ]
})

const getCurrentUser = () => {
  return new Promise((resolve, reject) => {
    const removeListener = onAuthStateChanged(
      getAuth(),
      (user) => {
        removeListener()
        resolve(user)
      },
      reject
    )
  })
}

router.beforeEach(async (to, from, next) => {
  const currentUser = await getCurrentUser()

  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (currentUser) {
      next()
    } else {
      alert("Você não tem acesso a essa página, por favor, autentique-e!")
      next('/login')
    }
  } else if (
    currentUser &&
    (to.path === '/login' || to.path === '/cadastro'
  ) {
    next('/')
  } else {
    next()
  }
})

export default router

Note que agora, nosso arquivo de rota está bem mais cheio, adicionamos o import do firebase/auth para podermos criar as validações para que o usuário não consiga acessar as telas sem estar autenticado.

Resumindo, essa parte debaixo do const router verifica a autenticação do usuário antes de cada navegação em rotas protegidas. A função getCurrentUser usa o método onAuthStateChanged para monitorar a autenticação e retorna uma promessa com o usuário autenticado. No router.beforeEach, ele verifica se a rota exige autenticação (indicada por meta.requiresAuth). Se a rota for protegida e o usuário estiver autenticado, ele permite o acesso (next()). Se o usuário não estiver autenticado, exibe um alerta e redireciona para /login. Caso o usuário já esteja autenticado e tente acessar /login ou /cadastro, redireciona-o para a página inicial (/), além do mais, adicionamos uma rota para a Home e outra para o /login.

Sobre o Home, não vou criar o arquivo, apenas coloquei ali para que possam ver como vai ficar o funcionamento para verificar se o usuário pode ou não ter acesso.

Agora, vamos partir pra criação do nosso componente de cadastro de fato, suas funções e a chamada dele, então, vamos focar nessa estrutura.

.
├── src
│   └── module
│       └── login
|           └── component
|               └── formlogin.vue
|           └── controller
|               └── loginController.js
|           └── view
|               └── login.vue

Arquivo formLogin.vue.

<template>
  <div class="d-flex justify-center align-center fill-height">
    <v-card class="mx-auto px-6 py-8" max-width="400" min-width="300">
      <v-form :disabled="controller.loading.value" :readonly="controller.loading.value">
        <h1 class="text-center mb-3">Entrar</h1>
        <v-text-field
          class="mb-2"
          label="E-mail"
          variant="underlined"
          clearable
          :rules="[controller.regras.required, controller.regras.validEmail]"
          v-model="controller.email.value"
        ></v-text-field>

        <v-text-field
          label="Senha"
          placeholder="Informe sua senha"
          variant="underlined"
          clearable
          @click:append-inner="controller.showPassword.value = !controller.showPassword.value"
          :append-inner-icon="controller.showPassword.value ? 'mdi-eye' : 'mdi-eye-off'"
          :type="controller.showPassword.value ? 'text' : 'password'"
          :rules="[
            controller.regras.required,
            (v) => (v && v.length >= 6) || 'A senha deve ter no mínimo 6 caracteres'
          ]"
          v-model="controller.password.value"
        ></v-text-field>

        <p v-if="controller.errMsg.value" class="text-red text-center">
          {{ controller.errMsg.value }}
        </p>

        <br />

        <v-btn
          color="#5865f2"
          size="large"
          type="submit"
          variant="elevated"
          block
          :loading="controller.loading.value"
          :disabled="
            !controller.password.value ||
            controller.password.value.length < 6 ||
            controller.loading.value
          "
          @click="controller.login"
        >
          Entrar
        </v-btn>

        <br />

        <v-divider class="mx-10"></v-divider>

        <div class="d-flex justify-center mt-3">
          <button @click="controller.signInWithGoogle">
            <v-avatar :image="logoGoogle"></v-avatar>
          </button>
        </div>

        <p class="text-center mt-5">
          Ainda não possui uma conta? <a href="/cadastro">Cadastre-se</a>
        </p>
      </v-form>
    </v-card>
  </div>
</template>

<script setup>
import logoGoogle from '../../../assets/images/imagem_logo_google.png'

const { controller } = defineProps({
  controller: { type: Object, required: true }
})
</script>

Arquivo loginController.js.

import { ref } from 'vue'
import {
  getAuth,
  signInWithEmailAndPassword,
  GoogleAuthProvider,
  signInWithPopup,
} from 'firebase/auth'
import { useRouter } from 'vue-router'

const loginController = () => {
  const email = ref('')
  const password = ref('')
  const errMsg = ref('')
  const loading = ref(false)
  const showPassword = ref(false)
  const regras = {
    required: (v) => !!v || 'Obrigatório',
    validEmail: (v) => {
    if (v.length > 0) {
      const pattern =
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      return pattern.test(v) || 'E-mail inválido'
    }

    return true
  },
  const router = useRouter()
  const auth = getAuth()

  // Essa função é responsável por realizar o login com o firebase apenas informando o e-mail e senha
  const login = async () => {
    try {
      loading.value = true
      errMsg.value = ''

      await signInWithEmailAndPassword(auth, email.value, password.value)

      router.push('/')
    } catch (error) {
      // Note que aqui, temos um switch/case com os possíveis erros que o firebase retorna, essa variável `errMsg` está lá no `formLogin.vue` para que o usuário possa ver o erro que está retornando
      switch (error.code) {
        case 'auth/invalid-email':
          errMsg.value = 'E-mail inválido!'
          break
        case 'auth/user-not-found':
          errMsg.value = 'Usuário não encontrado!'
          break
        case 'auth/wrong-password':
          errMsg.value = 'Senha incorreta!'
          break
        default:
          errMsg.value = 'E-mail ou senha incorretos!'
          break
      }
    } finally {
      loading.value = false
    }
  }

  // Essa função é responsável por realizar o login com o firebase utilizando o provedor Google
  const signInWithGoogle = async () => {
    try {
      loading.value = true

      const provider = new GoogleAuthProvider()
      await signInWithPopup(auth, provider)

      router.push('/')
    } catch (error) {
      alert(error)
    } finally {
      loading.value = false
    }
  }

  return {
    email,
    password,
    errMsg,
    loading,
    showPassword,
    regras,
    login,
    signInWithGoogle
  }
}

export { loginController }

Arquivo login.vue.

<template>
  <form-login :controller="controller" />
</template>

<script setup>
import { loginController } from '../controller/loginController'
import FormLogin from '../component/formLogin.vue'
const controller = loginController()
</script>

E com isso, finalizamos nossas telas de cadastro e login, nesse post adicionamos a rota pro /login, adicionamos validações no router/index.js para que o usuário só consiga acessar a home se estiver autenticado e criamos o componente do login, ao final de tudo, acessando o /login você deverá ver uma tela semelhante a essa abaixo:

Agradeço a você que leu minha postagem até o final, espero que isso ajude muitas pessoas qye estejam com dificuldades em fazer funcionar ou que estejam começando a desenvolver. Qualquer problema que tenha, por favor, não hesite em comentar que sempre que puder irei analisar o seu problema e tentar te ajudar.

Login/cadastro com firebase + Vue JS #PASSO 2️⃣ (cadastro)

Jackson Dhanyel Santin — Fri, 25 Oct 2024 13:38:35 +0000

Primeiramente, mostrarei a estrutura da pasta SRC no meu projeto Vue JS.

.
├── src
│   └── assets
│       └── images
|           └── imagem_logo_google.png
│   └── module
│       └── login
|           └── component
|               └── formLogin.vue
|           └── controller
|               └── loginController.js
|           └── view
|               └── login.vue
│       └── register
|           └── component
|               └── formRegister.vue
|           └── controller
|               └── registerController.js
|           └── view
|               └── register.vue
│   └── router
│       └── index.js
│   └── App.vue
│   └── main.js

Vamos lá as explicações:

A pasta assets é onde ficam as imagens do meu projeto, no caso, é onde eu coloquei a imagem da logo do Google para depois podermos utilizar para implementar a opção de login pelo Google;
A pasta module é onde eu tem os módulos do projeto, no caso eu separei cada módulo com pastas e dentro de cada pasta criei outras sub-pastas com os arquivos para melhor organização;
- Dentro das pasta login e register eu criei as sub-pastas:
component: onde tem o HTML das telas;
controller: onde ficarão as funções que vamos executar na tela;
view: onde eu chamo a tela criada no component e atribuo a prop controller para ela.
A pasta router tem as rotas do nosso projeto;
O arquivo App.vue apenas está chamando as rotas do projeto e definindo alguns estilos CSS padrão em todas as telas;
Por fim, o arquivo main.js que é onde eu chamo as configurações SDK que o firebase nos forneceu e algumas outras importações que o próprio Vue JS cria.

Inicialmente, antes de qualquer coisa, vamos instalar as libs que vamos ocupar, no caso o vue-router e o firebase executando no terminal os comandos abaixo:

$ npm install vue-router

Após

$ npm install firebase

Agora, vamos começar adicionando o SDK que o firebase nos forneceu no arquivo main.js, então vamos nos atentar a essa estrutura abaixo:

.
├── src
│   └── main.js

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: "AIzaSyA_Bq3nqLfRUWXsqtkpzietY5eu0ewFtzA",
  authDomain: "login-app-8c263.firebaseapp.com",
  projectId: "login-app-8c263",
  storageBucket: "login-app-8c263.appspot.com",
  messagingSenderId: "854129813359",
  appId: "1:854129813359:web:02f776146a0c34be906a9a"
}

initializeApp(firebaseConfig)

const app = createApp(App)

app.use(vuetify).mount('#app')

Note que estou usando Vue com Vuetify para facilitar na criação dos componentes, mas você pode utilizar Tailwind ou qualquer outro framework desejado.

Agora, vamos criar a rota do projeto e configurar no arquivo App.vue, então, vamos focar nessa estrutura abaixo.

.
├── src
│   └── router
│       └── index.js
│   └── App.vue

Primeiramente vamos ao arquivo index.js e adicionar o seguinte:

1  | import { createRouter, createWebHistory } from 'vue-router'
2  | import Register from '@/module/register/view/register.vue'
3  |
4  | const router = createRouter({
5  | history: createWebHistory(),
6  | routes: [
7  |   {
8  |     path: '/cadastro',
9  |     name: 'Register',
10 |     component: Register
11 |   }
12 | ]
13 | })
14 |
15 | export default router

Linha	Explicação
1	Importa as funções createRouter e createWebHistory da biblioteca vue-router. createRouter é usado para configurar o roteador, e createWebHistory define o modo de histórico do navegador para gerenciar URLs de forma limpa (sem o símbolo #).
2	Importa o componente Register, que representa a página de registro, localizado na pasta especificada. Este componente será carregado quando o usuário acessar a rota correspondente.
4/13	Cria uma instância do roteador (router) com createRouter. Aqui, history define o modo de histórico (createWebHistory) e routes define as rotas disponíveis. A rota { path: '/cadastro', name: 'Register', component: Register } configura o caminho /cadastro para carregar o componente Register. name é um nome opcional para a rota, que facilita a navegação programática.
15	Exporta a rota como o módulo padrão, para que ele possa ser importado e usado no aplicativo Vue.

Agora vamos chamar a rota no arquivo App.vue da seguinte forma:

<template>
  <v-app>
    <v-main class="bg-grey-lighten-3">
      <router-view />
    </v-main>
  </v-app>
</template>

Por fim, vamos adicionar a rota no nosso arquivo main.js para que a aplicação possa utilizá-la.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: "AIzaSyA_Bq3nqLfRUWXsqtkpzietY5eu0ewFtzA",
  authDomain: "login-app-8c263.firebaseapp.com",
  projectId: "login-app-8c263",
  storageBucket: "login-app-8c263.appspot.com",
  messagingSenderId: "854129813359",
  appId: "1:854129813359:web:02f776146a0c34be906a9a"
}

initializeApp(firebaseConfig)

const app = createApp(App)

app.use(router).use(vuetify).mount('#app')

Agora, vamos partir pra criação do nosso componente de cadastro de fato, suas funções e a chamada dele, então, vamos focar nessa estrutura.

.
├── src
│   └── module
│       └── register
|           └── component
|               └── formRegister.vue
|           └── controller
|               └── registerController.js
|           └── view
|               └── register.vue

Arquivo formRegister.vue.

<template>
  <div class="d-flex justify-center align-center fill-height">
    <v-card class="mx-auto px-6 py-8" max-width="400" min-width="400">
      <v-form :disabled="controller.loading.value" :readonly="controller.loading.value">
        <h1 class="text-center mb-3">Crie uma conta</h1>
        <v-text-field
          class="mb-2"
          label="E-mail"
          variant="underlined"
          clearable
          :rules="[controller.regras.required, controller.regras.validEmail]"
          v-model="controller.email.value"
        ></v-text-field>

        <v-text-field
          label="Senha"
          placeholder="Informe sua senha"
          variant="underlined"
          clearable
          @click:append-inner="controller.showPassword.value = !controller.showPassword.value"
          :append-inner-icon="controller.showPassword.value ? 'mdi-eye' : 'mdi-eye-off'"
          :type="controller.showPassword.value ? 'text' : 'password'"
          :rules="[
            controller.regras.required,
            (v) => (v && v.length >= 6) || 'A senha deve ter no mínimo 6 caracteres'
          ]"
          v-model="controller.password.value"
        ></v-text-field>

        <br />

        <v-btn
          color="#5865f2"
          size="large"
          type="submit"
          variant="elevated"
          block
          :loading="controller.loading.value"
          :disabled="
            !controller.password.value ||
            controller.password.value.length < 6 ||
            controller.loading.value
          "
          @click="controller.register"
        >
          Cadastrar
        </v-btn>

        <br />

        <v-divider class="mx-10"></v-divider>

        <div class="d-flex justify-center mt-3">
          <button @click="controller.signInWithGoogle">
            <v-avatar :image="logoGoogle"></v-avatar>
          </button>
        </div>

        <p class="text-center mt-5">Já possui uma conta? <a href="/login">Login</a></p>
      </v-form>
    </v-card>
  </div>
</template>

<script setup>
import logoGoogle from '../../../assets/images/imagem_logo_google.png'

const { controller } = defineProps({
  controller: { type: Object, required: true }
})
</script>

Arquivo registerController.js.

import { ref } from 'vue'
import {
  getAuth,
  createUserWithEmailAndPassword,
  GoogleAuthProvider,
  signInWithPopup
} from 'firebase/auth'
import { useRouter } from 'vue-router'

const registerController = () => {
  const email = ref('')
  const password = ref('')
  const loading = ref(false)
  const showPassword = ref(false)
  const regras = {
    required: (v) => !!v || 'Obrigatório',
    validEmail: (v) => {
    if (v.length > 0) {
      const pattern =
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      return pattern.test(v) || 'E-mail inválido'
    }

    return true
  },
  }
  const router = useRouter()

  // Essa função é responsável por criar um usuário com o firebase apenas informando o e-mail e senha
  const register = async () => {
    try {
      loading.value = true

      const auth = getAuth()
      await createUserWithEmailAndPassword(auth, email.value, password.value)

      alert("Usuário criado com sucesso!")

      router.push('/')
    } catch (error) {
      alert(error)
    } finally {
      loading.value = false
    }
  }


  // Essa função é responsável por criar um usuário com o firebase utilizando o provedor Google
  const signInWithGoogle = async () => {
    try {
      loading.value = true

      const provider = new GoogleAuthProvider()
      await signInWithPopup(getAuth(), provider)

      alert("Usuário criado com sucesso!")

      router.push('/')
    } catch (error) {
      alert(error)
    } finally {
      loading.value = false
    }
  }

  return {
    email,
    password,
    loading,
    showPassword,
    regras,
    register,
    signInWithGoogle
  }
}

export { registerController }

Arquivo register.vue.

<template>
  <form-register :controller="controller" />
</template>

<script setup>
import { registerController } from "../controller/registerController";
import FormRegister from "../component/formRegister.vue"
const controller = registerController();
</script>

Então, até o momento já adicionamos o código para integrar o SDK no firebase ao nosso projeto no arquivo main.js, configuramos as rotas no router/index.js e chamamos a rota no main.js e no App.vue, criamos o componente da tela de cadatro no arquivo formRegister.vue, criamos as funções no arquivo registerController.js e chamamos a tela e a prop do controller no arquivo register.vue, em teoria, agora, se você acessar sua aplicação no /cadastro já deve aparecer o formulário conforme abaixo:

Login/cadastro com firebase + Vue JS #PASSO 1️⃣

Jackson Dhanyel Santin — Fri, 25 Oct 2024 11:18:44 +0000

Recentemente descobri essa ferramenta incrível e simples de autenticação para implementar nos meus projetos e gostaria de compartilhar toda a funcionalidade e passo a passo para que possam utilizar no projeto de vocês também.

Sou desenvolvedor front-end e, claro, meu conhecimento com back-end é muito vago, principalmente quando se trata de implementar uma tela de login/cadastro onde tem que armazenar informações sensíveis e criptografadas dos usuários, foi então que, ao desenvolver uma aplicação pessoal, essa ferramenta incrível e muito fácil de utilizar surgiu como uma opção, então, sem mais delongas, vamos aos exemplos e explicações.

Nesse primeiro post, vamos criar um projeto no Firebase e configurar tudo o que iremos precisar para por o projeto funcionar, então...

Ao fazer login no firebase, vá na opção Criar um projeto.
Após, dê um nome para o seu projeto (recomendo colocar o nome do seu app, no meu caso login-app) e clique em Continuar.
Próximo passo é referente a ativar ou não o Google Analytics ao projeto, no meu caso, não irei ativar, mas fica a critério de vocês, após, só clicar em Criar projeto.
Aguarde finalizar o carregamento e clique em Continuar.
Se ocorreu tudo certo, essa tela aparecerá para você.
Próximo passo agora, ir nessa opção Authentication.
Nela, vai em Vamos começar.
Selecione a opção E-mail/senha.
Então, ative a opção de login e salve a configuração.
Verá que agora ele irá mostrar na tela principal do Authentication a opção escolhida, conforme imagem.
Agora vamos na opção Adicionar novo fornecedor e vamos configurar também o login com o Google.
Só selecionar a opção Google.
Ai então, precisa Ativar, logo após ele abrirá uma aba com o Nome público do projeto onde ele mesmo criará um nome aleatório, mas no meu caso, eu coloquei o mesmo nome do projeto login-app e também vai solicitar um e-mail para suporte, onde normalmente ele irá buscar o seu e-mail do google e você só precisa selecionar e por fim Salvar.
E mais uma vez ele irá redirecionar para a tela principal do Authentication mostrando, agora, os dois provedores ativos.

Essa parte de criação de projeto e configuração dos provadore finalmente acabou ✨, prometo que logo vamos botar a mão na massa e fazer tudo isso funcionar.

Agora, precisamos voltar lá na página inicial do firebase para que possamos pegar o código que precisamos para integrar o firebase ao nosso projeto lá no código.

Aqui na Visão geral do projeto, vamos selecionar o app Web.
Então vamos dar um apelido para esse app, novamente, optei por colocar o nome login-app e então clique em Registrar app.
Feito isso ele vai nos dar tudo o que precisamos para adicionar o SDK no nosso projeto, desde o comando para instalar o firebase até as configurações do web app.

Note que nessa parte de adicionar o SDK você pode optar por utilizar npm ou a tag script, no meu caso, como a idéia é integrar isso a um projeto Vue JS então vou utilizar o NPM mesmo.

Agora sim, finalmente vamos ao que interessa, o CÓDIGO.

Primeiro bot do Discord para envio de lembrete: do zero ao deploy! #PASSO2️⃣

Jackson Dhanyel Santin — Mon, 05 Jun 2023 16:53:54 +0000

Nesse post eu irei mostrar a parte do deploy, mas antes é fundamental testarmos a nossa aplicação, então vamos lá!!

Passo 1: Testando a aplicação.

Conforme comentei no post anterior, na nossa função sendMessage configuramos um cronJob para ele mandar mensagem em um determinado tempo, para testarmos, vamos mudar o tempo para o horário de agora (no meu caso, vou mudar para 11:05) dessa forma não precisamos esperar até o horário que configuramos para ele funcionar no dia-a-dia.

const jobOne = schedule.scheduleJob("5 11 * * *", () => {
  sendMessage("11:05", "Correr");
});

Alterado o horário, no terminal vamos rodar o comando abaixo.

$ node bot.js

Ao chegar no horário que configuramos, deverá vir a notificação no discord da seguinte forma (isso se tudo foi feito corretamente, claro).

Se aparecer a notificação dessa forma, sinal de que funcionou e podemos publicá-lo.

Passo 2: Publicando a aplicação.

Agora chegou a grande hora do nosso bot brilhar ✨, então boraaa!

Para fazer o deploy da minha aplicação eu vou utilizar a plataforma Discloud, acessando a plataforma, vai na opção ENTRAR >> Login Discord (Legacy)

Feito isso, ele vai pedir para autorizar, só ir na opção Authorize.

Após logar na plataforma, no rodapé da página, vai no ícone do Discord para acessar o servidor deles.

Dentro do servidor, você deve ir no canal 🔌Commands.

Dentro do canal, alguns comandos precisarão ser rodados, mas antes, vamos arrumar o nosso projeto para enviá-lo para a plataforma.

Passo 3: Compactando projeto e criando arquivo discloud.config.

Vamos começar criando o arquivo na raíz do projeto chamado de discloud.config (e acredite, o nome realmente tem que ser esse, caso contrário, não funciona). Dentro desse arquivo, deverá ser adicionado o seguinte trecho.

NAME=Lembretes 
AVATAR=https://www.liberiangeek.net/wp-content/uploads/2019/03/notification-logo.png
TYPE=bot
MAIN=bot.js
RAM=100
AUTORESTART=false
VERSION=latest
APT=tools

Obs.: Para saber mais sobre esse arquivo de configuração, bata acessar Discloud Documentation - discloud.config

Agora que já criamos esse arquivo, precisamos compactar o projeto, mas antes você deve excluir a pasta node_modules e o arquivo package-lock.json e aqui vai um detalhe muito importante, ele precisa ser compactado em .zip, caso contrário a plataforma não aceita, inclusive, o próprio windows fornece essa opção, só clicar com o botão direito do mouse na pasta e ir na opção compress to ZIP file.

Feito isso, o arquivo zipado está pronto.

Agora sim, podemos dar continuidade no deploy.

Passo 4: Rodando comandos no canal 🔌Commands.

Inicialmente você deve informar no canal o seguinte comando.

.up

O bot da Discloud te responderá com uma mensagem para que siga as instruções no canal que eles irão linkar na mensagem.

Dentro desse canal que eles criam, irá pedir solicitar algumas perguntas, a primeira é o ID da aplicação.

Para conseguir esse ID, você deverá acessar o Developer Portal e ir no menu General Information e copiar o Application ID.

Após informado no canal o ID da aplicação, a próxima pergunta é para que você digite o nome ou o caminho do arquivo principal, no nosso caso é só informar o bot.js.

Próxima pergunta é para que digite a quantidade de RAM para seu bot, no nosso caso pode colocar apenas 100.

Obs.: 100 é a quantidade máxima para quem tem o Discord gratuito, para quem tem a versão paga, vai depender do plano.

Por fim, ele vai pedir para que envie o arquivo .zip.

Só aguardar ele concluir e se tudo der certo, você será redirecionado para esse canal app-logs mostrando a mensagem que "a instância do seu bot Lembretes#0856 está on-line!"

Obs.: Utilizando esse Discloud, a cada 15 dias tem que rodar o comando abaixo no canal 🔌Commands.

.rw

E é isso ai, embora a explicação tenha sido beeeeem longa, eu procurei deixar tudo detalhadinho passo a passo para que você, assim como eu que nunca mexeu com a criação de bot e publicação, possa entender da melhor forma possível como você consegue ir do 0 ao deploy!

O código completo está no meu github.

Muito obrigado!

Primeiro bot do Discord para envio de lembrete: do zero ao deploy! #PASSO1️⃣

Jackson Dhanyel Santin — Mon, 05 Jun 2023 13:53:35 +0000

Como iniciar o projeto sem saber nada?

Bom, como sendo meu primeiro bot para o discord meu conhecimento somava um total de 0 😆, mas faz parte, tendo em vista que comecei a mexer com javascript no final do ano passado.
Eu tive muito da ajuda de canais no youtube e do próprio chatGPT para o desenvolvimento e entendimento da aplicação.
Com a internet, hoje em dia, só não programa e não aprende quem não quer mesmo, não é?! Então, pensando nisso, e no fato de que eu precisava criar algo que me lembrasse de fazer algumas coisas no dia-a-dia que eram importantes, eu resolvi ir atrás de aprender e é isso mesmo que pretendo compartilhar nesse post.

Obs.: É fundamental que se tenha uma conta criada no discord!

Passo 1: Criar um servidor no Discord.

Com o Discord aberto, você precisa criar um servidor (pode ser com o nome que você vai dar ao seu bot, ou qualquer outro nome que desejar) para dar segmento aos próximos passos.

Se não quiser selecionar aqui, pode dar um skip this question.

Aqui você pode dar o nome que desejar e até adicionar uma foto de perfil do servidor.

Finalizado, ele abrirá dessa forma.

Passo 2: Criar uma nova aplicação no Discord Developer.

Primeiro você precisa acessa o Developer Portal e ir na opção New Application, conforme mostra na imagem abaixo.

Passo 3: Gerar a URL do bot.

Após criar a aplicação, você vai precisar acassar o menu OAuth2 >> URL Generator e marcar a opção BOT, feito isso, será gerada uma URL no campo GENERATED URL, basta copiar ela e abrir ela em nova aba no navegador.

Obs.: Se a URL não for gerada marcando a opção BOT, você precisará marcar a opção ADMINISTRADOR nas opções que serão abertas ao selecionar a opção BOT, conforme imagem.

Passo 4: Marcações importantes que precisam ser feitas no Developer Portal.

Antes de partirmos para o link que foi gerado e aberto em nova aba na web, precisamos finalizar um item importante aqui no Developer Portal para que depois possamos codificar com total acesso as informações. Algumas marcações precisam ser realizadas, para isso, você vai precisar acessar o menu BOT e encontrar o título Privileged Gateway Intents, no final da página e marcar as três opções, logo após salvar.

Passo 5: Autorizar o bot a entrar no servidor.

Agora sim, vamos dar a permissão para que o bot possa acessar o nosso servidor que criamos lá no passo 1, para isso, vamos ir naquela aba aberta com a URL que foi gerada e vamos selecionar o nossos servidor, após, ir na opção Authorize.

Após autorizar ele provavelmente irá pedir para confirmar que é um humano, após confirmar, se tudo der certo, essa tela deverá aparecer para você e inclusive a notificação no canto inferior direito.

No servidor que criamos no discord no Passo 1 deverá aparecer uma nova mensagem dando as boas vindas para o bot e inclusive mostrando que ele está ali, mas offline.

Passo 6: Ferramentas necessárias e indispensáveis.

Primeiramente, você precisa ter instalado em sua máquina dois itens fundamentais, uma IDE para poder criar o código (e ai eu recomendo o VS CODE, mas também tem o Sublime Text ou o Eclipse, além de vários outros) e você também vai precisar ter instalado o Node.Js para que depois possamos instalar as dependências necessárias pare realizar a aplicação.

Passo 7: Instalando dependências necessárias.

Inicialmente vamos começar criando uma pasta em algum lugar do seu computador, eu normalmente gosto de criar na Área de Trabalho, mas isso depende muito de cada pessoa, eu criei a pasta com o nome bot-discord.

Após criada a pasta, vamos abrir a nossa IDE (no meu caso o VS Code) e vamos abrir a pasta que criamos.

Após abrir, vamos abrir o terminal (pode ser do VS Code mesmo) e roda o comando abaixo:

$ npm init

Após rodar o comando acima, ele vai pedir algumas coisas, basta dar ENTER em todas elas e no final, terá o seguinte retorno:

{
  "name": "bot-discord",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Além desse retorno no terminal, na pasta onde criamos, dentro do VS Code, vai aparecer o arquivo package.json.

Nesse ponto já podemos começar a baixar algumas dependências que iremos precisar, a principal dela é a Discord.js, então vamos baixá-la.

$ npm install discord.js

Também vamos precisar ter o node-cron ou node-schedule para trabalharmos com cron job, no meu caso, estarei utilizando o node-schedule.

$ npm install node-schedule

Também vamos precisar instalar o fs que é uma lib para gerenciamento de arquivos do sistema, ele permite ler arquivos, renomear, criar, atualizar e excluir, mas não irei me aprofundar muito nesse assunto, vamos ao que interessa.

$ npm install fs

Passo 8: Criando arquivos e montando estrutura do projeto.

Vamos começar criando um arquivo bot.js (ou pode ser index.js), vamos precisar criar também um arquivo config.json, também vamos criar uma pasta chamada Comands(ou o nome que desejar, lembrando que essa pasta eu criei com a primeira letra maiúscula) e dentro dessa pasta uma outra pasta general (tudo minúsculo e também pode ser um outro nome que desejar), ali dentro criaremos o arquivo sendMessage.js.
Fora da pasta Comands, ou seja, na raíz do projeto, criaremos uma pasta chamada handler e dentro dela o arquivo
index.js, a estrutura de arquivos, então, ficará dessa forma.

.
├── Comands
│   └── general
│       └── sendMessage.js
├── handler
│   └── index.js
├── bot.js
├── config.json
├── package.json

Passo 9: Configurando a pasta config.json.

Esse arquivo vai conter o token do seu bot, é muito importante que esse token não seja espalhado e muito menos divulgado no github quando for publicá-lo (caso suba ele no github, claro). Por isso, se pretende subir esse projeto no seu github, como eu fiz com o meu, você precisa criar um arquivo .gitignore e dentro dele informar o nome do arquivo config.json, dessa forma.

// arquivo .gitignore
config.json

Agora sim, sabendo disso, vamos montar a estrutura do arquivo.

{
  "token": "TOKEN_DO_SEU_SERVIDOR_DISCORD"
}

Para encontrar esse token, você precisa ir no Developer Portal, no menu Bot e na opção Reset Token e então copiá-lo e colar ele no lugar do "TOKEN_DO_SEU_SERVIDOR_DISCORD", dentro do arquivo config.json.

Ficará dessa forma o arquivo.

{
  "token": "123456fdsd78sd54d"
}

Passo 10: Hora de fazer acontecer!!!

Agora vamos começar a trabalhar no nosso bot e na sua funcionalidade de enviar lembretes. Primeiramente, dentro do arquivo bot.js vamos adicionar esse código.

1 const Discord = require("discord.js");
2 const config = require("./config.json")
3 const client = new Discord.Client({ 
4  intents: [
5   "Guilds", 
6   "GuildMembers", 
7   "MessageContent", 
8   "GuildMessages"
9  ] 
10 });
11
12 module.exports = client
13
14 client.on('interactionCreate', (interaction) => {
15
16  if (interaction.type === 
17  Discord.InteractionType.ApplicationCommand) {
18
19    const cmd = client.slashCommands
20    .get(interaction.commandName);
21
22    if (!cmd) return interaction.reply(`Error`);
23
24    interaction["member"] = 
25    interaction.guild.members.cache
26    .get(interaction.user.id);
27
28    cmd.run(client, interaction)
29
30  }
31 })
32
33 client.on("ready", () => {
34 console.log(`Estou online em ${client.user.username}`)
35
36  client.user.setActivity({
37    name: 'Lembrete',
38    type: Discord.ActivityType.Watching
39  })
40 })
41
42 client.slashCommands = new Discord.Collection()
43 require("./handler")(client)
44
45 client.login(config.token)

Para facilitar a explicação eu adicionei o número das linhas ao lado, então vamos lá.

Linha	Explicação
1	Importa a biblioteca do discord.js.
2	Importa o arquivo config.json com o nosso token.
3	Novo cliente é criado usando a classe Discord.Client(). O parâmetro intents especifica quais eventos o bot irá ouvir.
12	Exporta o objeto cliente.
14	É um ouvinte de eventos que lida com interações de comandos de aplicativo no Discord. Essa parte do código é responsável por receber e processar os comandos de aplicativo no Discord, permitindo que o bot execute ações específicas em resposta a esses comandos.
33	É um ouvinte de eventos do evento ready.
34	Mostra uma mensagem no console do terminal mostrando a mensagem "Estou online em Lembretes" para que possamos identificar se realmente está funcionando.
42	Nestas linhas, uma nova coleção slashCommands é criada e atribuída ao objeto client. Em seguida, um arquivo chamado "handler.js" é importado e executado.
45	O código faz o login do bot utilizando o token fornecido no arquivo config.json.

Próximo passo, vamos adicionar essa função dentro da pasta handler >> index.js.

1 const fs = require("fs")
2
3 module.exports = async (client) => {
4
5  const SlashsArray = []
6
7  fs.readdir(`./Comands`, (error, folder) => {
8    folder.forEach(subfolder => {
9      fs.readdir(`./Comands/${subfolder}/`, (error, files) => {
10        files.forEach(files => {
11
12          if (!files?.endsWith('.js')) return;
13          files = require(`../Comands/${subfolder}/${files}`);
14          if (!files?.name) return;
15          client.slashCommands.set(files?.name, files);
16
17          SlashsArray.push(files)
18        });
19      });
20    });
21  });
22  client.on("ready", async () => {
23    client.guilds.cache.forEach(guild => 
24    guild.commands.set(SlashsArray))
25  });
26 };

Explicação
Essa função lê os arquivos de comandos de slash de um diretório, carrega esses arquivos como módulos, adiciona-os ao mapa "slashCommands" do cliente e define esses comandos para cada servidor quando o cliente está pronto.

Por fim, vamos adicionar essa função ao arquivo sendMessage.js.

1 const Discord = require("discord.js");
2 const schedule = require("node-schedule");
3 const client = require("../../bot")
4
5 const jobOne = schedule.scheduleJob("0 8 * * *", () => {
6  sendMessage("8:00", "Correr");
7 });
8
9 const jobTwo = schedule.scheduleJob("0 12 * * *", () => {
10  sendMessage("12:00", "Caminhar");
11 });
12
13 async function sendMessage(time, activity) {
14  const channelToSend = await client.channels
15    .fetch("1113553458931437720")
16    .catch(() => null);
17
18  if (channelToSend) {
19    const embed = new Discord.EmbedBuilder()
20      .setDescription(`Olá, são ${time}, hora de  
21      ${activity}`)
22      .setColor(0x2a3756);
23
24    channelToSend.send({ embeds: [embed] });
25  }
26 }

Linha	Explicação
1	Importa a biblioteca do discord.js.
2	Importa a biblioteca do node-schedule.
3	Exporta o objeto cliente de dentro do **bot.js.
5	Cria uma variável jobOne que chama a função scheduleJob de dentro de schedule e define o horário em que quer que a função sendMessage execute, nesse caso às 08:00h da manhã ele vai chamar a função passando o horário como string "08:00" e o nome da atividade que deve ser feita, no caso "Correr".
9	Cria uma variável jobTwo que chama a função scheduleJob de dentro de schedule e define o horário em que quer que a função sendMessage execute, nesse caso às 12:00h da manhã ele vai chamar a função passando o horário como string "12:00" e o nome da atividade que deve ser feita, no caso "Caminhar".
13	Cria a função sendMessage que recebe o time e activity como parâmetro.
14	Cria um parâmetro channelToSend e passa por parâmetro no fetch o ID do canal após as explicações, explico como encontrar o ID do canal.
18	Esse trecho de código verifica se a variável channelToSend está definida e não é nula. Se for verdadeiro, cria uma instância de um objeto Embed do Discord com uma descrição contendo uma mensagem de saudação, o horário atual e uma atividade. O objeto Embed também define uma cor para o visual da mensagem. Em seguida, a função send() é chamada no channelToSend para enviar a mensagem contendo o objeto Embed como um parâmetro. Essa mensagem é exibida no canal de texto especificado pela variável channelToSend.

Passo 11: Como encontrar o ID do canal?

Agora explicarei como encontrar o ID que foi comentado no passo anterior.
Primeiramente, você precisará estar com o modo desenvolvedor do discord ativado.

Após ativar, é só ir no servidor que criamos no passo 1 e no canal que general, pressionar o botão direito do mouse >> copy Channel ID.