Merge pull request #45 from UnBArqDsw2024-1/das-reutilizacao

Implementação Backend, frontend e DAS

backend/models/input_model.py

@@ -0,0 +1,15 @@
+from io import BytesIO
+from typing import Union, Any
+from pydantic import BaseModel, Extra
+
+
+bytes_type = Union[bytes, BytesIO]
+
+
+class TextObject(BaseModel, extra=Extra.forbid):
+    text: str
+
+
+class FileObject(BaseModel, extra=Extra.forbid, arbitrary_types_allowed=True):
+    file: bytes_type
+    file_extension: str

backend/models/origin_model.py

@@ -0,0 +1,48 @@
+from enum import Enum
+from typing import Union, Optional
+from backend.models.input_model import TextObject, FileObject, bytes_type
+from backend.utilities.read_utility import ReadUtility
+
+
+class FileTypeModel(Enum):
+    DOCX: str = 'docx'
+    JSON: str = 'json'
+    TXT: str = 'txt'
+
+
+class OriginModel(Enum):
+    TEXT: Optional[str] = 'text'
+    FILE: Optional[str] = 'file'
+
+
+class Origin:
+    def __init__(self):
+        self.ReadUtility = ReadUtility(self)
+        self.file_content = None
+        self.translate_object = None
+        self.text = None
+        self.file = None
+        self.file_type = None
+
+    def set_origin(self, origin: OriginModel, translate_object: Union[TextObject, FileObject]):
+        self.translate_object = translate_object
+        if origin == OriginModel.TEXT and isinstance(translate_object, TextObject):
+            self.text = translate_object.text
+        elif origin == OriginModel.FILE and isinstance(translate_object, FileObject):
+            self.file = translate_object.file
+            self.file_type = self._get_file_type()
+        else:
+            raise Exception('Origem inválida')
+
+    def _get_file_type(self):
+        if self.translate_object.file_extension == FileTypeModel.DOCX.value:
+            self.file_content = self.ReadUtility.read_docx_file()
+            return FileTypeModel.DOCX
+        elif self.translate_object.file_extension == FileTypeModel.JSON.value:
+            self.file_content = self.ReadUtility.read_json_file()
+            return FileTypeModel.JSON
+        elif self.translate_object.file_extension == FileTypeModel.TXT.value:
+            self.file_content = self.ReadUtility.read_txt_file()
+            return FileTypeModel.TXT
+        else:
+            raise Exception('Formato de arquivo não suportado')

backend/requirements.txt

@@ -0,0 +1 @@
+pydantic

backend/services/control_service.py

@@ -0,0 +1,44 @@
+from backend.models.input_model import TextObject, FileObject
+from backend.models.origin_model import Origin, OriginModel
+
+
+class ControlService:
+    def __init__(self, origin_obj: Origin):
+        if origin_obj.text:
+            print('TEXTO')
+            print(origin_obj.text)
+        else:
+            print('ARQUIVO')
+            print(origin_obj.file_type.value)
+            print(origin_obj.file_content)
+        #self.deepl_service = DeeplService(origin)
+        #self.historic_service = HistoricService(origin)
+
+
+if __name__ == '__main__':
+    # Exemplos de uso
+    origin = Origin()
+    text = TextObject(text='Hello world!')
+    origin.set_origin(OriginModel.TEXT, text)
+    ControlService(origin)
+
+    origin = Origin()
+    with open('../teste/teste.txt', 'rb') as f:
+        file_extension = f.name.split('.')[-1]
+        file = FileObject(file=f.read(), file_extension=file_extension)
+    origin.set_origin(OriginModel.FILE, file)
+    ControlService(origin)
+
+    origin = Origin()
+    with open('../teste/teste.docx', 'rb') as f:
+        file_extension = f.name.split('.')[-1]
+        file = FileObject(file=f.read(), file_extension=file_extension)
+    origin.set_origin(OriginModel.FILE, file)
+    ControlService(origin)
+
+    origin = Origin()
+    with open('../teste/teste.json', 'rb') as f:
+        file_extension = f.name.split('.')[-1]
+        file = FileObject(file=f.read(), file_extension=file_extension)
+    origin.set_origin(OriginModel.FILE, file)
+    ControlService(origin)

backend/teste/teste.json

@@ -0,0 +1,3 @@
+{
+  "texto": "My name is Pedro"
+}

backend/teste/teste.txt

@@ -0,0 +1 @@
+My name is Pedro

backend/utilities/read_utility.py

@@ -0,0 +1,24 @@
+import json
+import docx
+import io
+
+
+class ReadUtility:
+    def __init__(self, origin):
+        self.origin = origin
+
+    def read_docx_file(self):
+        doc = docx.Document(io.BytesIO(self.origin.file))
+        text = ''
+        for p in doc.paragraphs:
+            text += p.text + '\n'
+        text = text.strip()
+        return text
+
+    def read_json_file(self):
+        dict_json = json.loads(self.origin.file)
+        text = [v for k, v in dict_json.items()][0]
+        return text
+
+    def read_txt_file(self):
+        return self.origin.file.decode('utf-8')

docs/ArquiteturaReutilizacao/4.1.DAS.md

@@ -0,0 +1,94 @@
+# Módulo Estilos e Padrões Arquiteturais
+
+## 1.0 Introdução
+
+O Documento de Arquitetura de Software (DAS) é uma peça fundamental no processo de desenvolvimento de sistemas, pois descreve de forma detalhada a estrutura, os componentes principais e as interações do software. Ele serve como um guia para a equipe de desenvolvimento, garantindo que todos os envolvidos tenham uma compreensão clara e unificada da arquitetura proposta. O DAS facilita a comunicação entre as partes interessadas, documenta decisões críticas e assegura que o sistema seja construído de maneira consistente e alinhada com os objetivos técnicos e de negócios.
+
+### 1.1 Propósito
+
+### 1.2 Escopo
+
+### 1.3 Definições, Acrônimos e Abreviações
+
+### 1.4 Visão Geral
+
+## 2.0 Representação Arquitetural
+
+## 3.0 Objetivos e restrições arquiteturais
+
+## 4.0 Casos de Uso
+
+Visões de casos de uso são representações visuais ou textuais que descrevem como os usuários (atores) interagem com um sistema para alcançar um objetivo específico. Elas ajudam a capturar os requisitos funcionais do sistema ao ilustrar as principais funcionalidades e o fluxo de interações entre os usuários e o sistema. Através de diagramas e descrições detalhadas, as visões de casos de uso permitem uma melhor compreensão das necessidades dos usuários, facilitando a comunicação entre desenvolvedores, stakeholders e equipes de design, além de servir como base para a implementação e teste do sistema.
+
+Casos Elicitados:
+
+| ID  | Descrição do Caso de Uso             |
+| --- | ------------------------------------ |
+| UC1 | Traduzir textos e frases.            |
+| UC2 | Traduzir Arquivos.                   |
+| UC3 | Buscar sinonimo de uma palavra.      |
+| UC4 | Consultar significados das palavras. |
+| UC5 | Obter Historico de Tradução.         |
+| UC6 | Fornecer Feedback.                   |
+| UC7 | Detectar Idioma.                     |
+| UC8 | Corrigir Erros Ortograficos.         |
+| UC9 | Traduzir Expressões Idiomaticas.     |
+
+![Diagrama de Casos de Uso](../img/ArquiteturaReutilizacao/DiagramaCasosDeUso.png)
+
+## 5.0 Visão lógica
+A visão lógica na arquitetura de software refere-se a uma parte do conjunto que inclui Classes e Pacotes. Essa visão é uma abstração dos modelos criados, destacando suas principais características e simplificando suas representações. A modelagem do diagrama de classes e do diagrama de pacotes permite uma análise mais detalhada das principais camadas arquiteturais desenvolvidas no projeto. Além disso, para uma perspectiva ainda mais abstrata, utilizam-se o diagrama de atividades. A seguir, é apresentado os diagramas desenvolvidos e como relacionam-se entre si. 
+
+### 5.1 Diagrama de Classes
+O diagrama de classes oferece uma representação visual das classes que formam um sistema, assim como os relacionamentos entre elas. Através desse diagrama, é possível entender o comportamento do sistema, identificar as responsabilidades na criação de instâncias, definir a visibilidade de atributos e métodos, além de visualizar relacionamentos como composição, agregação, entre outros.
+O diagrama de classes abaixo demonstra as requisições feitas a API do Deepl por meio da classe Translate.
+
+![Diagrama de Classes](../img/Modelagem/DiagramClasse.jpg)
+
+### 5.2 Diagrama de Pacotes
+O diagrama de pacotes organiza e agrupa elementos de um sistema em pacotes, mostrando as dependências e relações entre eles. Ele ajuda a visualizar a estrutura modular do sistema, representando como as classes e outros componentes são agrupados e interagem em um nível mais alto de abstração. Esse diagrama é útil para organizar e gerenciar a complexidade do software, facilitando o entendimento da arquitetura e a manutenção do sistema.
+
+![Diagrama de Pacotes](../img/diagramas/diagrama_de_pacotes.jpeg)
+
+## 6.0 Visão de Processos
+
+A visão de processos na arquitetura de sistemas de software oferece uma compreensão detalhada de como os processos e tarefas são organizados, estruturados e interagem entre si. Essa perspectiva é essencial para identificar e mapear os processos-chave do sistema, permitindo a compreensão de sua comunicação, coordenação, sincronização e compartilhamento de recursos, sendo vital para modelar a interação entre componentes, módulos e serviços, direcionando-os para o cumprimento dos objetivos globais do sistema.
+Essa abordagem permite um mapeamento preciso das entradas, saídas e fluxos de informação no software, delineando claramente as responsabilidades e interações de cada componente, exercendo um papel crucial na análise de desempenho, na identificação de gargalos, na otimização do fluxo de trabalho e na verificação de conformidade com os requisitos funcionais e não funcionais.
+Além disso, essa análise detalhada promove a eficiência operacional, a escalabilidade e a facilidade de manutenção do software, permitindo uma melhor alocação de recursos e facilitando a adaptação da arquitetura às mudanças nas necessidades do negócio. Com isso, a visão de processos não apenas fortalece a robustez e a resiliência do sistema, mas também assegura que ele possa evoluir de forma contínua.
+Partindo desse conceito, podemos encaixar os diagramas de:
+- [Artefato do Diagrama de atividades](https://unbarqdsw2024-1.github.io/2024.1_G9_My_Translator/#/Modelagem/Dinamicos/1.1.DiagramaDeAtividades), ele consegue nos fornecer uma visão do "todo", premitindo que realizemos a análise do fluxo por completo, tanto da parte de usuário como a parte do sistema de tradução.
+- [Artefato do Diagrama de comunicação](https://unbarqdsw2024-1.github.io/2024.1_G9_My_Translator/#/Modelagem/Dinamicos/1.2.DiagramaDeComunicação), Esse artefato consegue descrever os fluxos de informação e as interações entre as diferentes entidades do sistema.
+
+## 7.0 Visão de Implantação
+
+## 8.0 Visão de Implementação
+
+### 8.1 Diagrama de Componentes
+O diagrama de componentes ilustra a estrutura física de um sistema de software, destacando os componentes que o compõem e suas interações. Ele representa módulos de software, como bibliotecas, arquivos executáveis, e outros elementos que fazem parte do sistema, e mostra como esses componentes se conectam através de interfaces ou dependências.
+
+Esse diagrama é particularmente útil para visualizar e planejar a arquitetura de implementação, ajudando a garantir que os componentes do sistema sejam organizados de maneira eficiente, com responsabilidades claramente definidas e interações bem delineadas. Em essência, o diagrama de componentes foca em como o sistema é fisicamente montado e como suas partes se relacionam para formar uma solução funcional.
+
+![Diagrama de Componentes](../img/diagramas/Diagrama_de_componentes.svg)
+
+## 9.0 Tamanho e Desempenho
+
+## 10.0 Qualidade
+
+## Referências
+
+> **Arquitetura e Desenho de Software - Aula DAS**. Material de apoio em slides. Milene Serrano.
+> **Use-case diagrams - IBM**. Disponível em: https://www.ibm.com/docs/en/rational-soft-arch/9.6.1?topic=diagrams-use-case. Acesso em 08/08/2024.
+
+## Histórico de Versão
+
+<center>
+
+| Versão |   Data   |                   Alteração                   |                                          Participantes                                           |
+|:------:|:--------:|:---------------------------------------------:|:------------------------------------------------------------------------------------------------:|
+|  1.0   | 07/08/24 | Estruturando template e adicionando diagramas |                       [Jefferson Sena](https://github.com/JeffersonSenaa/)                       |
+|  1.1   | 08/08/24 |       Criando diagrama de casos de uso        | [Daniel Oda](https://github.com/danieloda/), [Pedro Torreão](https://github.com/PedroTorreao21/) |
+|  1.2   | 08/08/24 |     Adicionando descrições dos diagramas      |                       [Jefferson Sena](https://github.com/JeffersonSenaa/)                       |
+|  1.3   | 09/08/24 |        Adicionando visão de processos         |                         [Pedro Campos](https://github.com/pedrocampos0/)                         |
+|  1.4   | 12/08/24 |     Corrigindo a visão de implementação       |                         [Pedro Eduardo](https://github.com/PedroEduardoSS/)                         |
+
+</center>

docs/ArquiteturaReutilizacao/4.2.ReutilizacaoDeSoftware.md

@@ -1,11 +1,38 @@
 # 4.2. Módulo Reutilização de Software
 
-Foco_02: Reutilização de Software
+## 1.0 Introdução
 
-Entrega Mínima:   Exemplo de Reutilização, evidenciando parte conceitual e código.
+Ao modelar e desenhar a arquiteutra de um software, nos preocupamos em utilizar os padrões de projeto para que facilite e evite problemas na manutenção do mesmo em versões posteriores. As principais partes reutilizáveis desse projeto são os componentes do React e a utilização da API de tradução do DeepL
 
-Apresentação (em sala) conferindo reflexões sobre reutilização de software no escopo da aplicação, com: (i) rastro claro aos membros participantes (MOSTRAR QUADRO DE PARTICIPAÇÕES & COMMIITS); (ii) justificativas & senso crítico sobre reutilização de software; (iii) breve análise do exemplo (parte conceitual & código) no escopo da aplicação, e (iv) comentários gerais sobre o trabalho em equipe. Tempo da Apresentação: +/- 7min. Recomendação: Apresentar diretamente via Wiki ou GitPages do Projeto. Baixar os conteúdos com antecedência, evitando problemas de internet no momento de exposição nas Dinâmicas de Avaliação.
+### 1.1 Front End
 
-A Wiki ou GitPages do Projeto deve conter um tópico dedicado ao Módulo Reutilização de Software, com exemplo de reutilização de software (parte conceitual & código), histórico de versões, referências, e demais detalhamentos gerados pela equipe nesse escopo.
+#### React Components
 
-Demais orientações disponíveis nas Diretrizes (vide Moodle).
+### 1.2 Back End
+
+#### API DeepL
+
+A API do DeepL fornece acesso programático à tecnologia de tradução automática do DeepL, possibilitando tradução de alta qualidade.
+
+Exemplo de código:
+<code>
+import deepl
+auth_key = "f63c02c5-f056-..."
+translator = deepl.Translator(auth_key)
+result = translator.translate_text("Hello, world!", target_lang="FR")
+print(result.text)
+</code>
+
+## Referências
+
+> **Arquitetura e Desenho de Software - Aula Reutilização**. Material de apoio em slides. Milene Serrano.
+
+## Histórico de Versão
+
+<center>
+
+| Versão |   Data   |                   Alteração                   |                                          Participantes                                           |
+|:------:|:--------:|:---------------------------------------------:|:------------------------------------------------------------------------------------------------:|
+|  1.0   | 12/08/24 |       Iniciando exemplos de reutilização      |                       [Pedro Eduardo](https://github.com/PedroEduardoSS/)                        |
+
+</center>

docs/PadroesDeProjeto/3.2.GoFsEstruturais.md

@@ -13,7 +13,7 @@ Uma vez que o projeto trabalhado apresenta dois principais subsistemas complexos
 ## Diagrama 
 
 <div>
-<img src="../img/PadroesDeProjeto/GoFFacade.png" alt="Facade diagrama">
+<img src="./img/PadroesDeProjeto/GoFFacade.png" alt="Facade diagrama">
 <p align='center'>Figura 1: GoF estrutural Facade. Autores: Francisco Mizael, Pedro Torreão, 2024.</p>
 </div>
 

docs/_sidebar.md

@@ -31,7 +31,7 @@
     - [3.5. Participações](/PadroesDeProjeto/3.4.ParticipacoesPadroes.md)
 
 - **Arquitetura de Software & Reutilização**
-  - [4. Desenho de Software (Arquitetura & Reutilização de Software)](/ArquiteturaReutilizacao/4.ArquiteturaReutilizacao.md)
-    - [4.1. Módulo Estilos e Padrões Arquiteturais](/ArquiteturaReutilizacao/4.1.PadroesArquiteturais.md)
+  - **4. Desenho de Software (Arquitetura & Reutilização de Software)**
+    - [4.1. Módulo Estilos e Padrões Arquiteturais](/ArquiteturaReutilizacao/4.1.DAS.md)
     - [4.2. Módulo Reutilização de Software](/ArquiteturaReutilizacao/4.2.ReutilizacaoDeSoftware.md)
     - [4.3. Participações - Arquitetura & Reutilização de Software](/ArquiteturaReutilizacao/4.3.ParticipacoesArqReutilizacao.md)

frontend/my-translator/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/my-translator/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  {
+    files: ['**/*.{js,jsx}'],
+    ignores: ['dist'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

frontend/my-translator/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Translator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>