Giter VIP home page Giter VIP logo

todo-node-vue's Introduction

Projeto To Do List

O projeto tem como objetivo criar e gerenciar uma lista de tarefas, através de etiquetas e configurações personalizáveis.

 

Conteúdo

 

Construção:

Recursos
API Node 17
WEB Vue 3
Estilização Sass
Base de Dados MySQL
ORM Sequelize
Conteinerização Docker
Ferramentas Visual Studio Code 1.75.1
Console de Gerenciamento da AWS
HeidiSQL 12.3.0
Postman 10.11.1

 

Instalação e Inicialização:

  • npm (/api):

    • npm install;
    • npm start;
  • npm (/web):

    • npm install;
    • npm run serve;
  • Docker (build /api e /web):

    • docker build -t {imagem} .;
    • docker run -p {porta}:{porta} -d {imagem};
  • Docker (compose):

    • construção da api, web e base de dados (/raiz):
      • docker-compose up;
  • porta padrão API: configuração inicial .env;

  • porta padrão WEB: 8080;

  • a aplicação pode ser acessada através dos links:

 

Configurações

  • WEB - conexão com a API;

  • ENV - variáveis de ambiente - configuração inicial (antes da inicialização, deve ser renomeado para .env):

  • ENV - variáveis de ambiente - Docker (antes do comando docker-compose, deve ser renomeado para .env):

    exemplo configuração:

    APP_PORT = 3001
    
    DB_NAME = todo        |
    DB_USER = user        |
    DB_PASS = password    |
                          | --> parâmetros base de dados
    DB_DIALECT = mysql    |
    DB_HOST = localhost   |
    DB_PORT = 3306        |
                          
    
    ### initial config to database (configuração que será exportada para a tabela "config")
    
    PAGE_SIZE = 10        | --> número de registros por página
    DATE_SIZE = 3         | --> número de dias somado à tarefa após inserção
  • Dockerfile (api):

    FROM node:alpine
    
    WORKDIR /app/todo-api
    
    COPY ./package*.json ./
    
    RUN npm install
    
    COPY . .
    
    EXPOSE 3001
    
    CMD ["npm", "start"]
  • Dockerfile (web):

    FROM node:16
    
    WORKDIR /app/todo-web
    
    COPY ./package*.json ./
    
    RUN npm install
    
    COPY . .
    
    EXPOSE 8080
    
    CMD ["npm", "run", "serve"]
  • docker-compose:

    version: "3"
    
    services:
    
      db:
        container_name: 'database'
        image: mysql:5.7.31
        command: --default-authentication-plugin=mysql_native_password --sql_mode=NO_ENGINE_SUBSTITUTION,NO_AUTO_CREATE_USER --explicit_defaults_for_timestamp
        restart: always
        ports: 
          - '3308:3306'
        environment: 
          - MYSQL_ROOT_PASSWORD=root
          - MYSQL_DATABASE=todo
    
      dockerapi:
        build: ./api
        ports:
          - "3001:3001"
      
      dockerweb:
        build: ./web
        ports:
          - "8080:8080"

 

Estrutura da Base de Dados:

 

Implementações API:

  • Collections Postman;

  • Estrutura base de dados;

  • Rotas de acesso:

    • TASKS

      GET
      {baseURL}/tasks retorna todas as tarefas
      {baseURL}/tasks/{id} retorna tarefa por id
      {baseURL}/tasks?page={page} retorna tarefas por paginação
      {baseURL}/tasks?name={name} retorna tarefas por nome
      {baseURL}/tasks?tag={tagId} retorna tarefas por etiqueta
      {baseURL}/tasks?tag={tagId}&name={name} retorna tarefas por etiqueta e nome
      {baseURL}/tasks?page={page}&tag={tagId}&name={name} retorna tarefas por paginação, etiqueta e nome
      POST
      {baseURL}/tasks cadastra tarefa
      PUT
      {baseURL}/tasks/{id} atualiza tarefa
      DELETE
      {baseURL}/tasks/{id} exclui tarefa

     

    • TAGS

      GET
      {baseURL}/tags retorna todas as etiquetas
      PUT
      {baseURL}/tags/{id} atualiza etiqueta

     

    • CONFIGS

      GET
      {baseURL}/configs retorna configurações
      PUT
      {baseURL}/configs/{id} atualiza configurações
      POST
      {baseURL}/configs reinicializa configurações

 

  • Middlewares:

    • checkMinNumber:
      • verifica se os valores do tamanho da paginação e tamanho do prazo são maiores que zero;

 

  • Serviços:

    • checkDate:

      • percorre de forma automatizada a lista de tarefas uma vez ao dia, no horário informado, com o objetivo de atualizar os prazos vencidos (etiqueta "pendente");
    • initialConfig, initialTags:

      • envia ao banco de dados as informações iniciais caso não existam (.env e default);

 

Exemplos de inserção / atualização:

  • Tarefas:

    {
        "name": "Tarefa 1",
        "deadline": "2023-02-22"
    }
  • Etiquetas:

    {
      "name": "etiqueta2",
      "color": "#585422",
    }
  • Config:

    { 
      "pageSize": 8,
      "dateSize": 3
    }

 

Outros recursos:

  • ao cadastrar uma tarefa, é inserido automaticamente a soma da data atual com o número de dias informado nas configurações (dateSize);
  • ao alterar a data da tarefa para uma data anterior à atual, a etiqueta é substituída por "pendente" (caso não seja uma tarefa finalizada);

 

Implementações WEB:

  • Cadastro, alteração e exclusão de Tarefas;

  • Localizar Tarefas;

  • Paginação;

  • Listagem geral;

  • Listagem por Etiqueta;

  • Configurações:

    • personalização de nome e cor de Etiquetas;
    • personalização de paginação;
    • personalização de dias do prazo;
    • retornar à configuração padrão (valores iniciais);

todo-node-vue's People

Contributors

rtof83 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.