Skip to content

Commit

Permalink
uptade doc de arquitetura
Browse files Browse the repository at this point in the history
  • Loading branch information
@luciano-freitas-melo
luciano-freitas-melo committed Sep 15, 2022
1 parent 517d01a commit 8d38d1c
Showing 1 changed file with 69 additions and 102 deletions.
171 changes: 69 additions & 102 deletions docs/pages/DocumentoDeArquiteturaDeSoftware.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
<!-- <p align="center">
<img
src="https://github.com/fga-eps-mds/GFour-Invext/blob/main/docs/assets/msg1187136684-18592.jpg"
alt: 'Logo Invext'
width="1000"
height="150"
/>
</p> -->

<h1 align="center"><b>DOCUMENTO DE ARQUITETURA DE SOFTWARE</b></h1>

### _**VISÃO GERAL**_
Expand All @@ -15,142 +6,118 @@

1. Finalidade
2. Escopo
3. Configurções, acrônimos e abreviações
3. Configurações, acrônimos e abreviações
4. Representação Arquitetural
5. Metas e Restrições da Arquitetura
6. Visão de Casos de Uso
7. Visão Lógica
8. Visão de Processos
9. Visão de Implantação
10. Visão de Implementção
11. Visão de Dados
12. Diagrama de Implementação
13. Diagrama de Classes
14. Diagrama de Pacotes
15. Diagrama de Casos de Uso
16. Diagrama de Banco de Dados
17. Tamanho e Desempenho
18. Qualidade
19. Referências Bibliográficas
8. Visão de Implementção
9. Visão de Dados
10. Referências Bibliográficas

1. ### _**FINALIDADE**_
### 1. _**FINALIDADE**_

Este documento oferece uma visão geral da arquitetura abrangente do sistema, usando diversas visões arquitetônicas para representar diferentes aspectos do sistema. O objetivo deste documento é capturar e comunicar as decisões ao sistema significativo que foram tomadas em relação ao projeto sobre a carteira digital.
Este documento oferece uma visão geral da arquitetura abrangente do sistema, usando diversas visões arquitetônicas para representar diferentes aspectos do sistema. O objetivo deste documento é capturar e comunicar as decisões ao sistema significativo que foram tomadas em relação ao projeto sobre a carteira de investimentos digital.

2. ### _**ESCOPO**_
### 2. _**ESCOPO**_

Esse documento serve de guia para outros objetivos de construção software em questão, a partir de um projeto desenvolvido envolvendo outros softwares e plataformas possíveis, a documentos possíveis da construção do projeto, onde é possível ter uma visão de cada tema.

3. ### _**CONFIGURAÇÕES, ACRÔNIMOS E ABREVIAÇÕES**_

- API: É um acrônimo para Application Programming Interface(Interface de programação de aplicações). A API é um conjunto de definições e protocolos usados no desenvolvimento e na integração de um software, permitindo a interação com outros produtos sem a necessidade de interação com outro software.
- UML: É um acrônimo para Unified Modeling Language(linguagem de modelagem unificada). O UML é uma linguagem utilizada para visualizar, especificar, construir e documentar a arquitetura completa de um software, fornecendo informações detalhadas para o desenvolvedor implementar o software.
- UI: É uma sigla para User Interface(interface do usuário). É a área que está associada a criação das interfaces que interagem diretamente com o usuário do software, promovendo formas fáceis e amigáveis de interação no programa.
- UX: É uma sigla para User Experience(Experiência do usuário). É uma estratégia que tem como objetivo promover uma melhor experiência para os usuários. Isso é, promover ao usuário que a utilização de um site,aplicativo ou produto ocorra sem obstáculos
### 3. _**CONFIGURAÇÕES, ACRÔNIMOS E ABREVIAÇÕES**_

| **Sigla / Termo / Acrônimo** | **Significado** | **Descrição** |
| ---------------------------- | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| API | Application Programming Interface(Interface de programação de aplicações) | A API é um conjunto de definições e protocolos usados no desenvolvimento e na integração de um software, permitindo a interação com outros produtos sem a necessidade de interação com outro software. |
| UML | Unified Modeling Language(linguagem de modelagem unificada) | O UML é uma linguagem utilizada para visualizar, especificar, construir e documentar a arquitetura completa de um software, fornecendo informações detalhadas para o desenvolvedor implementar o software. |
| UI | User Interface(interface do usuário) | É a área que está associada a criação das interfaces que interagem diretamente com o usuário do software, promovendo formas fáceis e amigáveis de interação no programa. |
| UX | User Experience(Experiência do usuário) | É uma estratégia que tem como objetivo promover uma melhor experiência para os usuários. Isso é, promover ao usuário que a utilização de um site,aplicativo ou produto ocorra sem obstáculos. |
| Open Source | Código Aberto | Um software Open Source deve ter sua distribuição livre e gratuita, bem como disponibilização de seu código-fonte. |
| ORM | Object-Relational Mapping(mapeamento objeto-relacional) | É uma técnica que permite fazer uma relação dos objetos com os dados que os mesmos representam, dessa forma é possível manipular o banco de dados por meio da linguagem de programação, ao invés da linguagem do banco. |
|Framework|"Estrutura"|Um framework é um conjunto de códigos genéricos capaz de unir trechos de um projeto de desenvolvimento.|
|CRUD|Create(Criar), Read(Ler), Uptade(Atualizar) e Delete(Deletar)|CRUD é uma sequência de funções de um sistema que trabalha com banco de dados, onde é deve ser possível criar, ler, editar e excluir dados.|

4. ### _**REPRESENTAÇÃO ARQUITETURAL**_

- A Parte Dianteira:
- React: É um conjunto de bibliotecas de código aberto seguro para a criação de UIs interativas de forma mais fácil. Toda lógica é escrita em JavaScript da Repassagem de dados ao longo da passagem de dados. Essa tecnologia foi escolhida por quantidade de conteúdo disponível na internet, para o treinamento e aprendizado da equipe, outro ponto positivo é a comunidade sempre muito presente quanto a dúvidas e práticas.
### 4. _**REPRESENTAÇÃO ARQUITETURAL**_
- Modelo:
- **MVC**: O MVC (sigla do termo em inglês Model (modelo) View (visão) e Controller (Controle)) é um padrão de arquitetura de software, em que o programa é separado em camadas bem definidas.
- A Parte Externa:
- **React**: É um conjunto de bibliotecas de código aberto seguro para a criação de UIs interativas de forma mais fácil. Essa tecnologia foi escolhida pela quantidade de conteúdo disponível na internet, para o treinamento e aprendizado da equipe.Além disso, outro ponto positivo é a comunidade sempre muito presente quanto a dúvidas e práticas.
- Parte Interna:
- Node.Js: O Node.Js é uma tecnologia usada para executar código em JavaScript fora do navegador. Com ele podemos construir aplicações web em geral, desde websites até APIs e microsserviços. Isso é possível graças a união do ambiente de execução do JavaScript pelo próprio motor de interpretação Node.Js e execução do JavaScript presente no Google Chrome chamado V8.
- **Node.Js**: O Node.Js é uma tecnologia usada para executar código em JavaScript fora do navegador. Com ele podemos construir aplicações web em geral, desde websites até APIs e microsserviços. Isso é possível graças a união do ambiente de execução do JavaScript pelo próprio motor de interpretação Node.Js e execução do JavaScript presente nos navegadores da web.

- **MySQL**: O MySQL é um dos gerenciadores de **Banco de Dados Relacional** mais famosos para desenvolvimento web, principalmente por ser Open Source, pela sua facilidade de uso e pelo alto desempenho.

- **Sequilize**: O Sequilize é um ORM de Node.JS, que pode ser aplicado em MySQL, e foi selecionado por ser compatível com as tecnologias escolhidas para o projeto e por suas diversas funcionalidades a disposição.

5. ### _**METAS E RESTRIÇÕES DA ARQUITETURA**_
### 5. _**METAS E RESTRIÇÕES DA ARQUITETURA**_
- Metas:
- **Usabilidade** - O Software deve possuir alta aprendizagem e performance para atender os requisitos elicitados pelo grupo;
- **Manutenção** - O código e as documentações realizadas devem estar num nível de qualidade, seguindo os padrões do projeto e bibliografia, onde sua manutenção seja fácil de ser realizada.
- Restrições:
- Software deve ser desenvolvido nas tecnologias;
- O ambiente de desenvolvimento do software deve funcionar tanto em windows, linux e MacOS;
- O ambiente de desenvolvimento do software deve funcionar em qualquer sistema operacional Linux;
- Para usar o Software é necessário Internet;
- O escopo final deve ser concluído até o final da disciplina;
- Metas:
- **Usabilidade** - O Software deve possuir alta aprendizagem e performance para atender os requisitos elicitados pelo grupo;
- **Manutenção** - O código e as documentações realizadas devem estar num nível de qualidade, seguindo os padrões do projeto e bibliografia, onde sua manutenção seja fácil de ser realizada.

6. ### _**VISÃO DE CASOS DE USO**_
### 6. _**VISÃO DE CASOS DE USO**_

Para representar os Casos de Uso do sistema especificado, foi criado um diagrama de casos de uso que exibe os pontos principais do sistema.

7. ### _**VISÃO LÓGICA**_

A visão lógica descreve como o sistema é compatível, em termos de unidade e implementação. Mostra como é uma organização conceitual do sistema em termos de camadas, pacotes, classes e interfaces. O relacionamento entre os elementos mostra como dependências e interface, os relacionamentos parte assim por diante.

- Diagrama de Aulas
<img src="/GFour-Invext/assets/diagramaDeCasosDeUso.png" width="750" height="500" />

O diagrama representa como as classes serão programadas, os principais objetos ou realmente como diagrama completo pode ser encontrado na parte de Diagrama de Classes na wiki do projeto.

- Diagrama de Pacotes

O diagrama de pacotes é um diagrama estático que possibilita uma organização mais adequada ao sistema que representa uma versão de pacotes. O diagrama completo pode ser encontrado na parte de Diagrama de Pacotes da wiki do projeto.

- Diagrama de Comunicação

O diagrama de comunicação mostra partes de comunicação entre objetos e/ou (representadas pela lifelines usando mensagens sequenciadas um arranjo) de forma livre. O diagrama completo pode ser encontrado na parte de Diagrama de Comunicação na wiki do projeto.

8. ### _**VISÃO DE PROCESSOS**_
- Visão geral:
### 7. _**VISÃO LÓGICA**_

De tempo-de-execução como o sistema de execução de tempo-de-execução é construído na forma de um conjunto de tempo-de-execução que tem como modelo de comportamento de execução. Uma estrutura de tempo-de-execução normalmente tem semelhança com uma estrutura de código. Consistência de redes de comunicação rápida de objetos de comunicação.
- Visão Geral

As ações do usuário são interpretadas pelo Javascript através do componentes React, por meio de eventos. Estes, podem ser de dois tipos:
1) Eventos com Manipulação de dados:

É feita uma requisição para o backend da aplicação (HTTP Request), a qual faz a validação e manipulação (CRUD) dos dados no Banco, o qual é todo manipulado pelo próprio backend através do framework Sequilize.

Em alguns casos, há uma interação com uma API da Bolsa de Valores Brasileira (B3). Nessas situações é feita a manipulação com o próprio banco de dados da aplicação, que já fez uma requisição previamente à API da B3.

- Diagrama de Sequência:
2) Eventos sem manipulação de dados:

Ocorrem em interações que ocorrem somente na interface gráfica, dessa forma, o evento é executado somente no componente React do frontend.

O diagrama de sequência é uma das soluções fornecidas pela UML, que descrevem quimicamente o ciclo de vida do sistema em desenvolvimento. Descrição detalhada. O foco principal deste diagrama é descrito como troca entre os componentes do sistema e módulos que existem de uma maneira determinada e mensagens entre si. Os ciclos de vida podem ser aulas, atores ou mesmo abstrações que ocorrem entre aulas.


9. ### _**VISÃO DE IMPLANTAÇÃO**_
Descreve como a aplicação é disponibilizada para uso, seja em um ambiente de desenvolvimento, para testes ou em produção.
<img src="/GFour-Invext/assets/diagrama_de_implementação.png" width="750" height="500" />


10. ### _**VISÃO DE IMPLEMENTAÇÃO**_
- Visão Geral:

Descreve como os defensores do desenvolvimento estão organizados no sistema de arquivos. Os elementos são arquivos e pastas(Quaisquer itens de configuração). Isto inclui as propriedades de desenvolvimento e os riscos de implantação.

1. ### _**VISÃO DE DADOS**_

Essa visão é utilizada em projetos onde existe alguma camada de duração, geralmente, um banco de dados racional. É uma visão geral dos dados persistentes, por meio dessa, objetos são mapeados dados persistentes. Essa visão é visualizada com o Modelo Entidade Relacionamento, no caso de banco de dados relacionais.

12. ### _**DIAGRAMA DE IMPLEMENTAÇÃO**_
Essa é a versão final do diagrama de implementação do projeto Invext.

<img src="/GFour-Invext/assets/diagrama_de_implementação.png" width="750" height="500" />

13. ### _**DIAGRAMA DE CLASSES**_
Essa é a versão final das classes e métodos adotados no diagrama de classe do projeto Invext.

<img src="/GFour-Invext/assets/diagrama_classe_invext.png" width="750" height="500" />
- Diagrama de Pacotes

14. ### _**DIAGRAMA DE PACOTES**_
Essa é a versão final da implementação do diagrama de pacotes do projeto Invext.
<img src="/GFour-Invext/assets/diagrama_de_pacotes.png" width="750" height="500" />

<img src="/GFour-Invext/assets/diagrama_de_pacotes.png" width="750" height="500" />
<img src="/GFour-Invext/assets/diagrama_de_pacotesMVC.png" width="750" height="500" />

<img src="/GFour-Invext/assets/diagrama_de_pacotesMVC.png" width="750" height="500" />
15. ### _**DIAGRAMA DE CASOS DE USO**_
Essa é a versão final da implementação do diagrama de casos de uso do projeto Invext.
### 8. _**VISÃO DE IMPLEMENTAÇÃO**_
- Diagrama de Classes:
<img src="/GFour-Invext/assets/diagrama_classe_invext.png" width="750" height="500" />

<img src="/GFour-Invext/assets/diagramaDeCasosDeUso.png" width="750" height="500" />

16. ### _**DIAGRAMA DE BANCO DE DADOS**_
Essa é a versão final da implementação do diagrama de banco de dados do projeto Invext.

<img src="/GFour-Invext/assets/DiagramaDeBancoDeDados.png" width="750" height="500" />
### 9. _**VISÃO DE DADOS**_

17. ### _**TAMANHO E DESEMPENHO**_
Essa visão é utilizada para explicitar a organização do banco de dados racional do projeto. É uma visão geral dos dados persistentes, por meio dessa, os objetos do software são mapeados.

- Diagrama de Banco de Dados

Descrição do desempenho e das características do software que impactam na arquitetura de software.
<img src="/GFour-Invext/assets/DiagramaDeBancoDeDados.png" width="750" height="500" />

- Requisitos Mínimos
- É necessário possuir conexão com a internet;
- Para desenvolver, possuir: Windows, linux ou MacOS;

18. ### _**QUALIDADE**_

Qualidade de software tem como objetivo atingir os requisitos especificados durante a elaboração do projeto, e como expectativas de usuários de clientes e diretamente relacionados com: Escalabilidade, Manutenção, Confiabilidade, Usabilidade e assim por diante.
### 10. _**REFERÊNCIAS BIOGRÁFICAS**_

19. ### _**REFERÊNCIAS BIOGRÁFICAS**_
Arquitetura de Software. Disponível em: <http://repositorio.aee.edu.br/bitstream/aee/1106/3/TCC2_2018_2_GabrielLeiteDias\_MatheusLimadeAlbuquerque\_Apêndice2.pdf> . Acesso em: 30 de junho de 2022.

Arquitetura de Software. Disponível em: <http://repositorio.aee.edu.br/bitstream/aee/1106/3/TCC2_2018_2_GabrielLeiteDias\_MatheusLimadeAlbuquerque\_Apêndice2.pdf> . Acesso em: 30 de abril de 2021.
Documento de arquitetura, Acacia. Disponível em: <https://fga-eps-mds.github.io/2019.2-Acacia/#/architecture_document>. Acesso em: 10 de setembro de 2022.

O que é UML e Diagramas de Caso de Uso: Introdução Prática à UML. Disponível: <http://www.devmedia.com.br/o-que-e-uml-e-diagramas-de-caso-de-uso-introducao-pratica-a-uml/23408>. Acesso em: 03 de maio de 2021.
O que é UML e Diagramas de Caso de Uso: Introdução Prática à UML. Disponível: <http://www.devmedia.com.br/o-que-e-uml-e-diagramas-de-caso-de-uso-introducao-pratica-a-uml/23408>. Acesso em: 03 de julho de 2022.

ReactJS Disponível em: https://pt-br.reactjs.org/ Acesso em: 03 de maio de 2021.
ReactJS Disponível em: https://pt-br.reactjs.org/ Acesso em: 03 de julho de 2022.

Node.JS Disponível em: https://nodejs.org/en/about/ Acesso em: 03 de maio de 2021.
Node.JS Disponível em: https://nodejs.org/en/about/ Acesso em: 03 de julho de 2022.

0 comments on commit 8d38d1c

Please sign in to comment.