# Gerenciamais

Gerencia Mais é um software para auxiliar você cliente na tomada de decisões para melhorias em seu negocio, organizando a sua forma de trabalhar de maneira fácil.

#### 🚧 Front-end React 🚀 Em construção... 🚧

## Tabela de conteúdos

- Roadmap
- Pré-requisitos
- Front-end
  - Tecnologias
  - Resumo ReactJs
  - Resumo Redux
  - Passo a Passo de uso produção
  - Passo a Passo de uso developer
  - Estrutura de pastas do projeto
  - Estrutura de rotas do projeto
  - .env
  - package.json
  - Transferência de local do Projeto
  - Exemplo de criação de página
- Back-end
  - Acesso
  - Core
  - Autenticação

## Roadmap

- Cadastro de Cliente

- Cadastro de Funcionário

- Cadastro de Fornecedor

- Cadastro de Usuário

- Cadastro de Transportadora

- Cadastro de Serviços

- Cadastro de Produto

- Contas a Receber

- Contas a Pagar

- Vendas

- Relatórios

- Configurações

## Pré-requisitos

- NodeJs na versao `12.19` ou maior

- PHP na versao `5.6`

- Servidor web compatível a versão do PHP

- Banco de dados de acesso configurado

- Banco de dados do cliente

## Front-end

O Front-end foi desenvolvido em ReactJs seguindo os conceitos de SPA e utilizando uma interface clean para melhor experiência do usuário, baseando-se na interface anterior e adaptando melhorias já catalogadas.

### Tecnologias

- ReactJS

- Redux

- React Bootstrap

- Busca CEP

### Resumo de ReactJs

ReactJs é uma biblioteca em código aberto criada pelo Facebook para criação e gerenciamento de telas em formato de SPA (single-page application), foi a biblioteca revolucionária no ramo de front-end, tornando o mesmo mais independente e autonomo.

O ReactJs usa o conceito de componentização onde tudo o que aparece em tela é um componente. Componente nada mais é que uma função que retorna um HTML, que pode ser renderizado em tela de inumeras formas diferentes para melhor se encaixar, para isso existem funções providas pelo próprio React que garantem essa renderização de forma mais eficaz possivel.

Principais conceitos/funções de renderização do ReactJs:

- state -> variável que pode ser mutável e se mudar modifica algo no retorno do componente
- props -> variável que é provida do componente pai, assim como o state se mudar modifica o retorno do componente
- useState() -> serve para criar e gerar uma função de modificação do state
- useEffect() -> serve para quando mudar alguma propriedade ou variável do componente

Esses conceitos são de extrema importância para o funcionamento de forma coesa do ReactJs, porém a explicação de funcionamento deles é um pouco complicada para estar detalhando aqui, portanto vale a pena dar uma olhada na documentação oficial.

O ReactJs possui um simplificador para criação de projetos, o create-react-app, também provido diretamente do Facebook, e se trata de um conjunto de pré-configurações e scripts para facilitar a vida de quem for criar um projeto.

### Resumo Redux

Redux é uma biblioteca para armazenamento de estados de aplicações JavaScript, criado por Dan Abramov. Ele nasceu através de uma implementação do Flux, uma arquitetura criada pelo Facebook para contribuir com as aplicações de User Interface, utilizando o conceito de fluxo de dados unidirecional. Quando desenvolvemos aplicações utilizando Javascript, sempre temos que lidar com o gerenciamento de estado. O Redux veio para suprir essa necessidade de simplificar o controle dos estados de uma aplicação. Compartilhar estados entre vários componentes diferentes se torna uma coisa muito fácil quando o utilizamos.

Ele basicamente tira a responsabilidade de cada um dos componentes de armazenar os estados, deixando tudo isso centralizado, sendo utilizado ao mesmo tempo por todos os componentes de forma compartilhada. Ele também roda em diferentes ambientes como servidor, cliente e nativo.

Fazendo o uso do Redux todos esses estados ficarão armazenados em uma árvore de objetos através do store. Para que isso aconteça, o Redux utiliza 3 recursos:

- Store: você pode pensar em store como um container ou um grande centro de informações, que tem disponibilidade para receber e entregar o que o seu componente requisita. A store armazena de forma centralizada todos os estados da aplicação. Vale ressaltar que a store é imutável.
- Actions: São ações disparadas da aplicação para o store. Elas são criadas através das action creators. As actions são a única forma de acionar uma mudança de estados no store.
- Reducers: Cada dado da store deve ter o seu próprio reducer. Ele é encarregado de lidar com todas as ações e especificam como o estado da aplicação irá mudar de acordo com a action que foi enviada para o store.

O fluxo geralmente funciona da seguinte forma: um componente gera uma interação através de um clique dado pelo usuário na interface – por exemplo, assim, um action creator é acionado e dispara uma ação para o store. Essa ação chega até um reducer que irá processar e fazer a alteração do estado no store. Assim um novo estado será disponibilizado para o componente.

Também é importante saber que o Redux tem 3 princípios, sendo:
– Todos os estados estarão disponíveis exclusivamente através do store: todo o estado da sua aplicação vai estar armazenado nesse store que é único, onde todos os componentes vão consultar nesse store.
– Os estados são somente leitura: os componentes não podem fazer uma manipulação direta nas informações que estão nele.
– As alterações são feitas através de funções puras: o Redux utiliza o conceito de programação funcional, por isso toda alteração no store é feita através de uma função pura, chamada de reducer. O reducer recebe o estado e a ação, onde com essa ação nós visualizamos o que precisa ser alterado no estado e o reduce entrega uma nova store do nosso estado da aplicação.

Por ser uma biblioteca o Redux pode até ser utilizado sozinho, mas ele é normalmente implementado em um conjunto de outras libs ou frameworks JavaScript (Ember, Vue, Angular…). Mas o comum mesmo, que você até já deve ter visto, é vê-lo em funcionamento com o React. É muito comum ver projetos e exemplos de React com Redux juntos, mas é bom deixar claro que o Redux não depende do React.

### Passo a Passo de uso produção

Obtendo o código fonte da aplicação no servidor:

- Se existe a pasta build, excluir a pasta build inteira (se não souber quando fora gerada)

    # entrar na pasta raiz do projeto React

    $ cd  ~/gerenciamais/sistema/app

    # rodar o comando de build caso tenha excluido a pasta build ou ela nao exista

    $ npm run build

com isso o front estará funcionando

ps: a api funciona apenas quando esta no modo de produção, caso use o modo developer os dados não serão carregados

### Passo a Passo de uso developer

    # entrar na pasta raiz do projeto React

    $ cd  ~/gerenciamais/sistema/app

    # rodar o comando start para iniciar o programa em modo dev

    $ npm run start

com isso o front estará funcionando e ira abrir uma aba no navegador como localhost na porta 3000

### Estrutura da pastas do projeto

- Local do projeto: raiz/sistema/app
- Estrutura de pasta:
  - app/ (raiz)
    - build/ (arquivos estáticos de produção, gerado no comando npm run build)
    - node_modules/ (pasta que contém o código das dependências do projeto, não precisa copiar)
    - public/ (arquivos públicos do projeto inteiro, inclusive o único arquivo .html)
    - src/ (projeto react, onde se é desenvolvido)
    - .env (arquivo de variáveis de ambiente do projeto)
    - .env-example (arquivo exemplo do .env)
    - .eslintrc (arquivo de configuração do ESlint)
    - .gitignore (arquivo que seta arquivos e pastas que não devem subir para o GIT)
    - .htaccess (arquivo de configuração do servidor)
    - .prettier (arquivo de configuração do Prettier)
    - package.json (arquivo de configuração do projeto)
    - package-lock.json (arquivo que contém as dependências já baixadas)
    - README.md (documentação em markdown)

Dentro da pasta src é onde fica efetivamente o código do projeto, onde será feita as atualizações e modificações do mesmo.
Quanto à estrutura de pastas dentro do src consiste em:
- assets (arquivos estáticos, vulgo imagens)
- components (pasta de componentes compartilhado em diversas páginas)
- hyper (pasta do template usado no projeto)
- layout (arquivos de estilo que serão utilizados em volta de todas as páginas privadas)
- pages (pasta contendo todas as páginas, publicas e privadas, inclusive o arquivo que gerencia as rotas)
- services (arquivos de serviços em geral, utilizado bastante para API)
- store (pasta de configuração do Redux)
- utils (pasta com arquivos de funções utilitárias em diversos momentos)

### Estrutura de rotas do projeto

O projeto trabalha com dois tipos de rotas:
- Públicas: Rotas que não precisa de autenticação nem de permissão para entrar
- Privadas: Rotas que precisa estar autenticado e ter permissão para entrar

Rotas Privadas se encontram no arquivo src/pages/index.js
Rotas Públicas se encontram em src/pages/PrivateRoutes/index.js

### Estrutura de Autenticação

A estrutura de autenticação foi feita se baseando na solução do React Redux sem uso de middlewares como o Saga, portanto, a estrutura ficou a seguinte (dentro de store/):
- ducks/ (onde é gerado o reducer)
- fetchActions/ (onde é gerado as actions)
- index.js (onde é aplicado os reducers)

Dentro de ducks/ existe a pasta auth/ contendo o index para a criação do reducer de autenticação. Já a pasta fetchActions/ contém um index com todas as ações de todos os reducers.

Para chamar as funções do Redux deve-se usar o useDispatch do react-redux e para acessar os valores do estado global use o useSelector do mesmo pacote. Exemplo de uso do useDispatch pode ser visto em sistema/app/src/pages/Login/index.js, e do useSelector, sistema/app/src/pages/index.js

### .env

No arquivo .env dentro da raiz do projeto se encontra as variáveis de ambiente, caso mude algum valor dentro desse arquivo, refletirá automaticamente no projeto.
Para criar uma nova variável, deve-se obrigatoriamente colocar o prefixo “REACT_APP_”.
Para acessar essas variáveis de ambiente use: process.env.REACT_APP_VARIAVEL.

### package.json

O package.json é um dos arquivos mais importantes do projeto, nele é contido informações sobre o mesmo. Informações tais que são sobre dependências do projeto, nome, versão, scripts (tipo o npm run build ta descrito lá), compatibilidade de browsers, etc.
Caso precise alterar o package.json, é aconselhável que faça uma duplicata do mesmo e somente depois modifique.
Parecido com ele, temos package-lock.json que contém as dependências já inseridas no node_modules/
para não ter que baixar novamente algo que já foi baixado anteriormente, esse arquivo nada mais é que um cache e pode ser apagado tranquilamente caso necessário que é gerado automaticamente.

### Transferência de local do projeto

Para transferir o front deve-se:

- apagar as pastas: build/ e node_modules/
- apagar o arquivo package-lock.json
- transferir os arquivos para o novo local
- entrar pelo terminal na pasta do novo projeto
- rodar o comando `npm install` na raiz do projeto para baixar as dependências
- rodar o comando `npm run build` na raiz do projeto para gerar um novo build

### Exemplo de criação de página

Supondo o cenário da criação de uma página de produtos, a primeira coisa a se fazer é entrar na pasta src/pages e criar a pasta “Produtos”, dentro dela criar o arquivo index.js. Esse arquivo será o componente da tela de listagem de produtos, portanto, deve-se criar o componente na forma de função, seguindo os padrões estabelecidos nas outras páginas.

Para manter o ciclo de vida do componente e os estados, utilize os React Hooks, caso necessário, utilize React.Lazy para carregar componentes dependentes. Tente sempre utilizar os principios de programação do YAGNI e DRY, assim como outros Design Patterns. Componentes como Breadcrumb, DataTable e SimpleModal, irão te auxiliar para manter o padrão atual do projeto.

Assim que criado o componente de listagem, crie, caso necessário, uma pasta dentro de “Produtos” com o nome de “Cadastro” e dentro da pasta crie um index.js¹, seguindo o mesmo processo para a criação do componente de listagem colocando o nome do componente com o prefixo “Cadastro”.

O componente Cadastro, por padrão é utilizado também para edição do produto, portanto use route params para enviar o id do produto caso seja edição, e, na criação do componente pegue esse parâmetro utilizando a propriedade match e utilizando verificações para diferenciar as telas.²

Assim que criar todos os componentes, há de questionar, “A Página é pública ou privada?”, caso seja pública, deve-se ir em sistema/app/src/pages/index.js, importar os componentes de listagem e criação e criar uma rota usando Route do react-router-dom, analogamente, caso seja privada, fazer os mesmos passos porém no arquivo sistema/app/src/pages/PrivateRoutes/index.js.

Siga essa sintaxe para criação de rotas³:

    <Route  exact  path="/nome-da-rota"  component={Componente}  />

Em seguida, questione novamente, “A Página será linkada ao Sidebar, vulgo menu lateral?”, se sim, questione, “Esse menu é um menu único ou é um submenu de outro menu?”.

Se for único, siga esse padrão de código:

    <li  className="side-nav-item">
    	<Link  to="/link-projeto"  className="side-nav-link">
    		<i  className="icone"/>
    		<span>Nome da página</span>
    	</Link>
    </li>

Caso contrário, siga esse padrão:

    <ListItemsSidebarToggable
    	nome="NomeDoMenu"
    	icon="uil-users-alt"
    	subitems={[
    		{ link:  '/submenu-1', nome:  'Submenu1' },
    		{ link:  '/submenu-2', nome:  'Submenu2' },
    		{ link:  '/submenu-3', nome:  'Submenu3' },
    	]}
    />

Caso ainda tenha alguma dúvida como criar uma página no sistema, segue abaixo um fluxograma:

#### Após qualquer alteração, lembre-se de utilizar o comando `npm run build` na raiz do projeto React para aplicar a mesma

> 1: caso precise estilizar o componente unicamente, crie um styles.css junto com o index.js, tanto na listagem quanto no cadastro, porém tente sempre abusar do template e do bootstrap para estilizar
> 2: lembre-se de abusar da versão do ReactJs utilizada e ao invés de ternários utilizar “&&” caso não exista um else
> 3: não esqueça do exact, as vezes não precisa por mas é sempre bom garantir

## Back-end

O Back-end do projeto é feito em PHP na versão 5.6 no formato de uma API REST, separado em duas partes, acesso e core. O Back-end a principio acessa um banco de dados de acesso que contém dados de acesso à banco de dados de todos os clientes, quando o usuário define qual empresa quer acessar, o sistema escolhe a linha que contém o acesso da empresa em questão e acessa o banco de dados da empresa, partindo para a segunda fase do sistema, o core.

### Acesso

Na seção acesso, o sistema utiliza um banco de dados onde cada linha do banco é um acesso diferente a um banco de dados diferente, cada linha representando um cliente. O banco de dados que contém os acessos é definido no arquivo sistema/acesso/configs.php e a definição de qual empresa vai seguir para a parte core do sistema está no arquivo sistema/acesso/acesso.php

### Core

Na seção core, é onde efetivamente temos o ERP e todas as funcionalidades do mesmo. É separado por três “camadas”, sendo elas:

- class: Contém as classes do sistema contendo as querys de banco de dados;
- obj: Contém as classes com regras de negócio do sistema;
- sistema: Contém configurações e funções úteis para o sistema.

As requisições feitas para o Core se baseiam no diagrama de fluxo abaixo:

### Autenticação

A autenticação é feita em duas etapas, a etapa de acesso e a etapa de login.

Quando autenticado, o Back-end cria uma $_SESSION e toda vez que é necessário verificar algo sobre a empresa é utilizado essa variável.

A etapa de acesso provém do usuário definir qual empresa ele pretende entrar, já a etapa de login baseia-se de o usuário efetuar o login com um usuário e senha compatíveis com a empresa em que ele definiu na etapa de acesso, assim como o diagrama abaixo: