O desenvolvimento de aplicativos Kanban é uma tendência crescente para a gestão de tarefas. Este artigo aborda as tecnologias modernas e as funcionalidades essenciais para criar um aplicativo web eficiente e escalável.

Sobre o BoardTasks – Gerenciador de Tarefas

O BoardTasks será um aplicativo web para gerenciamento de tarefas no estilo visual de um quadro Kanban. O objetivo é desenvolver uma ferramenta completa, incluindo sistema de cadastro e login de usuários, criação e gerenciamento de tarefas, com funcionalidades como arrastar e soltar as tarefas entre colunas representando seu status, assignar usuários, datas de entrega e muito mais.

  • Aplicativo web para gerenciamento de tarefas no estilo visual de um quadro Kanban
  • Inclusão de sistema de cadastro e login de usuários
  • Funcionalidades como arrastar e soltar as tarefas entre colunas representando seu status, assignar usuários, datas de entrega e mais

Tecnologias Utilizadas

Serão utilizadas tecnologias modernas e populares no desenvolvimento, garantindo uma aplicação escalável e de fácil manutenção:

  • Front-end: ReactJS
  • Back-end: NodeJS com Express
  • Banco de Dados: MongoDB com Mongoose
  • Hospedagem: Vercel (Front e Back) e MongoDB Atlas (Banco de dados)
  • Controle de Versão: GitHub
  • Documentação da API feita com Swagger e autenticação implementada com JWT

Arquitetura do Banco de Dados

Antes mesmo de começar a codificar, é muito importante ter claro como será o banco de dados e quais informações precisam ser armazenadas. Isso poupa tempo e dor de cabeça no futuro. O banco será um MongoDB, então utilizaremos o conceito de coleções ao invés de tabelas SQL tradicionais. Foram definidas duas coleções principais:

  • Utilização do conceito de coleções ao invés de tabelas SQL tradicionais
  • Definição das coleções Usuários e Tarefas
  • Detalhamento dos campos e suas funções em cada coleção

Cadastro e Autenticação

O sistema BoardTasks oferece funcionalidades essenciais para o cadastro e autenticação de usuários. O cadastro de novos usuários, o login com email e senha, a validação de dados de cadastro e a geração de token JWT após o login garantem a segurança e a personalização da experiência do usuário.

  • Cadastro de novos usuários
  • Login com email e senha
  • Validação de dados de cadastro
  • Geração de token JWT após login

Tarefas

A gestão de tarefas é uma parte fundamental do BoardTasks, permitindo aos usuários criar, editar, remover, definir status e assignar tarefas a outros usuários. Além disso, a funcionalidade de arrastar e soltar tarefas entre colunas do quadro proporciona uma experiência de uso intuitiva e eficiente.

  • Criação de novas tarefas com título, descrição e data de entrega
  • Edição de tarefas existentes
  • Remoção de tarefas
  • Definição de status das tarefas
  • Assignação de tarefas a usuários
  • Funcionalidade de arrastar e soltar tarefas entre colunas do quadro

Layout

O layout do BoardTasks foi projetado para oferecer uma visualização em formato Kanban, com colunas representando diferentes status das tarefas. Além disso, o sistema apresenta dados do usuário logado e oferece campos para filtros e buscas, contribuindo para uma experiência de uso personalizada e eficiente.

  • Visualização em formato Kanban
  • Colunas representando status das tarefas
  • Apresentação de dados do usuário logado
  • Inclusão de campos para filtros e buscas

Tecnologias Utilizadas

O BoardTasks utiliza tecnologias modernas para garantir uma experiência de uso avançada e eficiente. O React é responsável por renderizar a interface do usuário, oferecendo componentes visuais, requisições HTTP para API, gerenciamento de estado e reatividade. Por sua vez, o Express atua comoID-8d857c5b-325a-4db6-9301-3ccc765b6f22 base do back-end, criando a API que o front-end React consome, e integrando-se com o banco de dados.

  • Utilização do React para renderização da interface do usuário
  • Uso do Express como framework base do back-end
  • Integração com banco de dados
  • Criação de API para consumo pelo front-end React

Desenvolvimento de API com Express

Ao desenvolver uma aplicação web moderna, é essencial contar com uma API robusta e eficiente. No artigo, abordaremos a criação de rotas e controllers para endpoints da API, a integração com MongoDB via Mongoose, o uso de middleware de autenticação com tokens JWT, a validação de inputs de dados e o tratamento de erros nas requisições.

  • Implementação de rotas e controllers para endpoints da API
  • Integração com MongoDB utilizando Mongoose
  • Utilização de middleware de autenticação com tokens JWT
  • Validação de inputs de dados
  • Tratamento de erros nas requisições

MongoDB e Mongoose

O MongoDB é um banco de dados não-relacional amplamente utilizado em projetos JavaScript modernos. Neste artigo, exploraremos a utilização do Mongoose como ODM (Object Data Mapper) para conectar a API Express com os dados no MongoDB. Abordaremos modelos de dados (schemas), migrations para atualizar modelo e dados, queries para buscar, inserir e deletar itens, populate para carregar relacionamentos e o uso de middleware antes de salvar ou deletar itens.

  • Utilização do MongoDB como banco de dados não-relacional
  • Exploração do Mongoose como ODM para conectar a API Express com o MongoDB
  • Abordagem de modelos de dados (schemas)
  • Utilização de migrations para atualizar modelo e dados
  • Exploração de queries para buscar, inserir e deletar itens

Autenticação e Autorização

A segurança de uma aplicação é fundamental, e no artigo, focaremos na proteção dos endpoints da API com JSON Web Tokens (JWT). Abordaremos o processo de login com email e senha, a geração de token JWT, a salvaguarda do token no LocalStorage do navegador, o envio do token no header das requisições, a validação do token JWT em cada request por meio de middleware no Express e a liberação de acesso aos endpoints apenas para usuários autenticados.

  • Proteção dos endpoints da API com JSON Web Tokens (JWT)
  • Processo de login com email e senha
  • Geração e salvaguarda do token JWT no LocalStorage do navegador
  • Validação do token JWT em cada request por meio de middleware no Express
  • Liberação de acesso aos endpoints apenas para usuários autenticados

Conclusão

O desenvolvimento do aplicativo BoardTasks engloba tecnologias relevantes e conceitos importantes para aplicações fullstack JavaScript. Ao final, espera-se uma ferramenta completa e segura, pronta para uso em portfólios ou como um produto real.