Histórico de Versões

Sumário

1. Introdução
2. 1.1 Finalidade
3. 1.2 Escopo
4. 1.3 Definições, Acrônimos e Abreviações
5. 1.4 Referências
6. 1.5 Visão Geral
7. Representação da Arquitetura
8. 2.1 Front-end
9. 2.2 Back-end
10. 2.3 Diagrama de Relações
11. 2.4 Diagrama de Pacotes do Front
12. 2.5 Diagrama de Pacotes da Back
13. Metas e Restrições de Arquitetura
14. 3.1 Metas
15. 3.2 Restrições
16. Visão dos Casos de Uso
17. 4.1 Diagrama de Casos de Uso
18. 4.2 Atores de Casos de Uso
19. 4.3 Descrições de Casos de Uso
20. Visão Lógica
21. Tamanho e Desempenho
22. Qualidade

Documento de Arquitetura de Software

1. Introdução

1.1 Finalidade

   Este documento tem como finalidade fornecer uma visão geral da arquitetura do ArBC, utilizando-se de diversas visões arquiteturais - tais como a visão lógica e de caso de uso - a fim de facilitar o entendimento dos processos e funcionamento de todo o sistema. Tem também como objetivo transmitir as decisões arquiteturais significativas tomadas em relação ao mesmo.

1.2 Escopo

   Atráves desse documento, é possível obter um melhor entendimento da arquitetura do projeto permitir ao leitor a compreensão do funcionamento do sistema, como também as abordagens utilizadas para o seu desenvolvimento

1.3 Definições, Acrônimos e Abreviações

1.4 Referências

Vuex.vuejs.org. Disponível em: https://vuex.vuejs.org. Acesso em: 7 set. 2019.

Vuejs.org. Disponível em: https://vuejs.org/. Acesso em: 7 set. 2019.

PAIVA, Igor; PAULINO, João; VICTOR, Marcelo; QUEIROZ, Rhuan; CIRRIANO, Sérgio; SANTOS, Thiago. ArBC: Documento de Arquitetura. Disponível em: https://github.com/fga-eps-mds/2019.2-ArBC/blob/develop/docs/mds/Documento_de_arquitetura.md. Acesso em: 7 set. 2019.

MUNIZ, Amanda; RIOS, Calebe; LIMA, Eduardo; DUARTE, Indiara; RIBEIRO Luciana; TAIRA, Luís; GOUVEIA, Micaella; BUTERS, Samuel; PATROCÍNIO, Sofia. Gaia: Documento de Arquitetura. Disponível em: https://fga-eps-mds.github.io/2019.1-Gaia/#/projeto/DocArquiteturaAcesso. em: 10 out. 2019.

DJORKAEFF, Alexandre; BEZERRA, Davi; DE LYRA, Guilherme; BRANDÃO, Guilherme; REIS, João. Reabilitação Motora: Documento de Visão. Disponível em: https://github.com/fga-eps-mds/2018.1-Reabilitacao-Motora/blob/development/docs/wiki/Documento-de-Arquitetura.md. Acesso em: 7 set. 2019.

1.5 Visão Geral

   Este documento é dividido em 7 tópicos, descrevendo os detalhes das características do software proposto. Sendo dividido em:

• Introdução: Fornece uma visão geral do documento inteiro;
• Representação da arquitetura: Descreve qual é a arquitetura de software do sistema atual e como ela é representada;
• Metas e restrições da arquitetura: Descreve os requisitos e objetivos do software que têm algum impacto sobre a arquitetura;
• Visão de caso de uso: Descreve as partes significativas do ponto de vista da arquitetura do modelo de casos de uso;
• Visão Lógica: Descreve as partes significativas do ponto de vista da arquitetura do modelo de design;
• Tamanho e Desempenho: descreve as principais características de dimensionamento do software que têm um impacto na arquitetura, bem como as restrições do desempenho desejado;
• Qualidade: descreve como a arquitetura do software contribui para todos os recursos (exceto a funcionalidade) do sistema.

2. Representação da Arquitetura

2.1 Front-end

A arquitetura adotada para o front-end é o padrão Vuex que é um state management pattern, e consiste em State, View e Actions, cada uma com suas respectivas funções:

O Vue.js adota em sua própria maneira o modelo acima, substituindo a View por Vue Components e, além disso, insere as Mutations que de maneira geral alteram o estado.

2.2 Back-end

A arquitetura adotada para o back-end é o MVT, onde suas respectivas funções podem ser definidas por:

2.3 Diagrama de Relações

2.4 Diagrama de Pacotes do Front

2.5 Diagrama de Pacotes do Back

3. Metas e Restrições de Arquitetura

3.1 Metas

O sistema deve ter acesso a uma câmera, que quando apontada à uma palavra, mostrará uma imagem referente a ela. O objetivo é auxiliar na alfabetização de crianças.

3.2 Restrições

A aplicação irá ser executada num navegador e a interface gráfica desenvolvida com HTML e CSS, utilizando o Vue.js. A linguagem de programação usada na implementação do front-end é o JavaScript e no back-end é o Python.

Por ser uma PWA, a aplicação poderá ser utilizada em qualquer dispositivo móvel com um navegador e uma câmera.

4. Visão dos Casos de Uso

4.1 Diagrama de Casos de Uso

4.2 Atores de Casos de Uso

4.3 Descrições de Casos de Uso

5. Visão Lógica

Através de um celular o usuário acessa o aplicativo pelo navegador, fornece permissão à utilização da câmera e a aponta para uma palavra. Na tela, será mostrada uma imagem correspondente à palavra lida.

No banco de dados, serão armazenadas as letras, palavras e respectivas imagens de cada uma delas. Ao apontar a câmera a uma palavra, uma requisição será feita no back-end, e caso uma palavra seja encontrada,uma imagem correspondente será apresentada ao usuário. Caso tal palavra não seja encontrada, imagens das letras aparecerão.

6. Tamanho e Desempenho

A aplicação é executada no navegador como uma PWA. Será feita uma identificação da imagem da câmera, o que demanda um certo processamento do aparelho. Após sua conclusão, uma requisição será feita para o back-end para buscar a imagem correspondente. A imagem pode ter dimensões variadas e será baixada do servidor, mas não é recomendado que seu tamanho exceda 1MB.

7. Qualidade

O aplicativo terá uma interface gráfica simples, disponibilizando acesso à câmera, links para se obter mais informações sobre o produto e disponibilização dos marcadores para download. Na parte da câmera, que é a alma da aplicação, será realizado a identificação dos marcadores e exibição dos gifs.