Site MackLeaps

# Site - MackLeaps

## Equipe

| Equipe Lilás |  |  |

| --- | --- | --- |

| Nome | RA | Curso |

| Erika Borges Piaui | 32284683 | Ciência da Computação |

| Guilherme de Abreu Schulz | 32226349 | Ciência da Computação |

| Karine Yoo Lim Choi | 32269382 | Ciência da Computação |

| João Pedro Rodrigues Vieira | 32281730 | Ciência da Computação |

| Pedro Henrique Araujo Farias | 32246994 | Ciência da Computação |

| Sabrina Midori Futami Teixeira de Carvalho | 42249511 | Ciência da Computação |

## Histórico de Revisões

| Histórico de Revisões |  |  |  |

| --- | --- | --- | --- |

| Número | Data | Descrição | Autor(s) |

| 001 | 21/03/2023 | Revisão dos requisitos funcionais do sistema | Grupo Lilás |

| 002 | 05/04/2023 | Revisão dos requisitos funcionais e não 

funcionais do sistema | Grupo Lilás |

| 003 | 09/05/2023 | Revisão das funcionalidades e da descrição da interface | Grupo Lilás |

# 1. **Descrição Geral do Sistema**

O website do MackLeaps tem como escopo divulgar pesquisas e projetos relacionados à tecnologia, em andamento e concluídos, assim como recrutar potenciais membros e parceiros, ****como estudantes, empresas, instituições acadêmicas e pesquisadores com propósito similar.

Para tanto, é necessário que esse sistema seja constantemente alimentado com dados atualizados, selecionados pelos administradores. Outrossim, é necessário que, além de conhecer os trabalhos realizados, os interessados também possam ter uma visão geral do laboratório, bem como conhecer a equipe e entrar em contato com o laboratório, seja para sanar dúvidas, seja para agendar visitas ou reuniões.

Em seu estado atual, o website apresenta alguns problemas técnicos e de design, que dificultam ou desincentivam seu uso, como, por exemplo: a ausência de um menu principal com atalhos para todas as seções do website, agilizando a navegação; ícones estáticos e desinteressantes; textos genéricos, pouco informativos, em especial no tocante aos projetos e às pesquisas, que seriam o principal tópico do website e demandam uma seção específica e mais aprofundada; imagens pouco profissionais ou não muito relacionadas à área de tecnologia; inexistência de documentação; arquitetura totalmente centralizada, além de outros problemas a serem aprofundados mais adiante deste relatório e no decorrer do programa de Residência.

Assim, tendo em vista a necessidade de se destacar entre os demais laboratórios de

pesquisa na área de tecnologia, bem como evidenciar o comprometimento dos membros do laboratório, o presente projeto busca tornar o website do MackLeaps mais atraente, interessante, dinâmico, moderno, fácil de navegar (em qualquer plataforma), intuitivo e rápido, assim como facilitar a sua frequente atualização.

## 1.1 Soluções Similares

Em geral, websites acadêmicos, além de possuírem bons mecanismos de busca, costumam possuir uma interface profissional, seja pela escolha das fontes, seja pela forma como dispõem seus elementos gráficos e textuais. 

- [**https://www.csail.mit.edu/**](https://www.csail.mit.edu/)

Conta com uma interface dinâmica e moderna, direcionamento a páginas distintas conforme o tipo de usuário (estudantes, empresa ou membros), além de acesso a área reservada aos usuários cadastrados.

- [**https://www.jstor.org/**](https://www.jstor.org/)

    Possui uma barra de busca ampla, além de contar com um mecanismo de busca avançada, que permite filtrar os artigos por meio de palavras-chave.

- [**https://www.loc.gov/**](https://www.loc.gov/)

    Possui uma boa organização dos conteúdos em sua página inicial, o que auxiliaria na disposição de notícias.

- [**https://www.bestcolleges.com/**](https://www.bestcolleges.com/)

    Possui uma boa amostragem de notícias.

- **https://cyber.harvard.edu/projects-tools**

    O site de Harvard apresenta seus projetos em formato de “caixas”.

- **Sites Universitários**

    Por serem universitários, a interface desses sites combina com a atmosfera da UPM. A ideia aqui é combinar a credibilidade que um site universitário passa com a organização, os detalhes, o design bem feito de um site tecnológico. Alguns exemplos:

    - Loyola Marymount University (lmu.edu)

    - University of Essex

    - Wheaton College, IL

    - Juniata College

    - Stanford University

    - Princeton University

    - Home (fitnyc.edu)

    Independentemente da qualidade técnica e gráfica de cada website, é possível notar que cada um compartilha traços comuns e possuem elementos de atenção, fatores que podem auxiliar no aprimoramento neste projeto. Exemplo de um website que quase mescla essas noções:

    - SoftDesign - Soluções Digitais Transformadoras

## 1.2 Funcionalidades

Algumas funcionalidades que poderiam ser implementadas ou refinadas no website do MackLeaps:

- Diferentes idiomas;

- Campo de Busca por palavra-chave/frases/categorias.

    - Resultados mostrados em ordem cronológica (mais recente para mais antigo) e categorizados (notícias, produção científica, membros, parcerias).

- Botão “Home”.

- Projetos finalizados e em andamento, contendo título, objetivo, metodologia, texto resumo, resultados alcançados, gráficos/imagens, data inicial, data de término, instituição/empresa ou agência de fomento financiadora, coordenador do projeto, imagem associada (se houver).

- Produções científicas do laboratório: classificado por categoria (livro, artigo, relatório técnico, Iniciação Científica e Tecnológica, trabalhos de conclusão de curso, dissertação, tese, outros) contendo os seus dados no formato ABNT e, caso seja necessário, nome do orientador e se está em andamento ou foi concluída.

- Equipe (com nome, imagem, titulação, currículo Lattes, redes sociais, etc)

    - Colaboradores;

    - Laboratoristas e Estagiários;

    - Responsáveis;

- Linha do Tempo contendo:

    - Notícias/projetos/publicações mais relevantes.

- Notícias em destaque, contendo o título, texto descritivo, imagem associada, data da publicação e autor.

- Endereço/Localização (com mapa).

- Contato (e-mail, telefone, mensagem, redes sociais)

    - Seja um de nós

    - Dúvidas

# 2. **Descrição dos usuários**

Inicialmente, conseguimos identificar quatro tipos de potenciais usuários do site MackLeaps:

- Estudantes (graduação/pós-graduação);

- Empresas (parceria/investimento);

- Pesquisadores e instituições acadêmicas;

- Administradores (equipe).

A partir daí, podemos distinguir algumas de suas necessidades específicas:

- **Estudantes (graduação/pós-graduação):**

    - Seu interesse consistiria em iniciar, continuar ou aprofundar sua jornada no mundo acadêmico, seja como residente, estagiário ou voluntário.

    - Uma proposta para facilitar a navegação pelo site para este tipo de usuário seria o direcionamento a uma página separada, contendo em especial:

        - Descrição do perfil buscado (seja para residente, estagiário ou voluntário);

        - Projetos em andamento e concluídos;

        - Relatos/depoimentos de membros anteriores;

        - Informações sobre a equipe;

        - Contato;

- **Empresas:**

    - Seu interesse consistiria na celebração de uma parceria para a realização de um novo projeto ou investimento em algum projeto já em andamento.

    - Uma proposta para facilitar a navegação pelo site para este tipo de usuário seria o direcionamento a uma página separada, contendo em especial:

        - Informações sobre parcerias e desenvolvimento de projetos conjuntos;

        - Projetos em andamento e concluídos;

        - Nome, texto descritivo e imagem de parceiros existentes;

        - Informações sobre a equipe;

        - Contato;

- **Pesquisadores e instituições acadêmicas, nacionais e internacionais:**

    - Seu interesse consistiria no desenvolvimento acadêmico e profissional no campo da pesquisa relacionada à tecnologia.

    - Uma proposta para facilitar a navegação pelo site para este tipo de usuário seria o direcionamento a uma página separada, contendo em especial:

        - Projetos em andamento e concluídos;

        - Informações sobre a equipe;

        - Notícias e publicações;

        - Contato;

- **Administradores:**

    - Serão os únicos usuários capazes de alimentar o site com dados, alterá-los, publicá-los, etc. Para tanto, será necessário que realizem o login, com nome de usuário e senha, em uma área específica.

    - Cada administrador terá seu perfil individual, a fim de que todas as alterações realizadas por ele possam ser revistas pelos demais administradores.

## 2.1 Personas

A persona é, em síntese, a descrição de um personagem que representa o cliente ideal, construída com base em dados reais sobre as dores, os interesses e os comportamentos dos indivíduos que compõem o público alvo.

No projeto foram identificados quatro tipos básicos de usuários em potencial (mencionados no tópico anterior). Desenvolvemos, com a ajuda de uma ferramenta online chamada “Gerador de Personas”, desenvolvida e gerenciada pela empresa Rockcontent, quatro perfis representantes de nosso público alvo.

1. Estudantes de graduação ou pós-graduação à procura de uma instituição que ofereça suporte e incentivos à pesquisa acadêmica.

2. Pesquisadores, que podem ser particulares ou empresas interessadas em produção científica, bolsas ou convênios para troca e desenvolvimento de tecnologia.

3. Instituições de ensino e outras empresas com interesse em incentivar a pesquisa científica e o desenvolvimento tecnológico, gerando produtos e serviços nacionais competitivos no mercado, trazendo expertise e know-how para que as empresas de tecnologia nacionais tenham destaque e notoriedade.

4. Administradores do sistema, que serão os usuários com acesso exclusivo à área de administrador, por meio de um login com senha. No caso, esses usuários serão os membros da equipe do laboratório (professores, laboratoristas, estagiários) e serão responsáveis pela constante manutenção e atualização do website do MackLeaps.

# 3. Levantamento de Requisitos

## 3.1 Requisitos Funcionais

Os requisitos funcionais de um sistema web referem-se aos seguintes aspectos:

- Funções do sistema;

- Forma de apresentação das informações;

- Forma de armazenamento de dados e sua manipulação;

- Comportamento do sistema em situações diversas;

- **[RF001] Listar projetos:** O site deve listar todos os projetos vinculados ao laboratório em uma página específica para tal funcionalidade.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RF002] Listar pesquisas:** O site deve listar todos os projetos de iniciação científica e tecnológica vinculados ao laboratório em uma página específica para tal funcionalidade.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RF003] Listar notícias:** O site deve listar todas as notícias vinculadas ao laboratório em uma página específica para tal funcionalidade. Exemplo: processos seletivos, lançamento de livros...

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RF004] Contato:** O site deve possuir uma página para o usuário entrar em contato e obter informações como redes sociais, telefone, endereço, e-mail.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RF005] Idiomas:** O site deve oferecer duas opções de idioma para os usuários: inglês e português.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RF006] Divulgar parcerias:** O site deve listar as empresas parceiras do laboratório em uma página específica para tal funcionalidade.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RF007] Listar sistemas:** O site deve listar os sistemas desenvolvidos pelos membros do laboratório e incluir um link que direcione para eles.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RF008] Listar membros:** O site deve listar todos os membros vinculados ao laboratório em uma página específica para tal funcionalidade.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RF009] Visualizar detalhes:** O usuário deve ser capaz de expandir cada projeto, pesquisa e notícia para obter mais detalhes sobre eles.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

## 3.2 Requisitos Não Funcionais

Os requisitos não funcionais de um sistema web referem-se a características que não estão diretamente ligadas às funcionalidades. O foco é no “como” o sistema deve ser desenvolvido e operado.

- **[RNF001] Desempenho:** O site deve ser rápido e responsivo.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RNF002] Usabilidade:** O site deve ser fácil de navegar, com design claro e consistente.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RNF003] Segurança:** O site deve ser seguro.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RNF004] Confiabilidade:** Disponibilidade do site, atualização do site, backup e recuperação de dados.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RNF005] Manutenibilidade:** Fácil manutenção do site, documentação do código e padronização de desenvolvimento.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RNF006] Compatibilidade:** O site deve ser compatível com diferentes navegadores e aparelhos.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

- **[RNF007] Banco de dados:** Os dados do site devem ser armazenados em um banco de dados.

    **Prioridade: ☐ Essencial ☐ Importante ☐ Desejável**

# 4. Casos de Uso

- **[UC001] - Listar projetos:** O site deve listar todos os projetos vinculados ao laboratório em uma página específica para tal funcionalidade.

- **[UC002] - Listar pesquisas:** O site deve listar todos os projetos de iniciação científica e tecnológica vinculados ao laboratório em uma página específica para tal funcionalidade.

- **[UC003] - Listar notícias:** O site deve listar todas as notícias vinculadas ao laboratório em uma página específica para tal funcionalidade. Exemplo: processos seletivos, lançamento de livros...

- **[UC004] - Listar membros:** Os usuários, inicialmente, terão uma senha padrão e, ao entrarem no sistema pela primeira vez, devem alterá-la.

- **[UC005] - Listar sistemas:** O site deve listar os sistemas desenvolvidos pelos membros do laboratório e incluir um link que direcione para eles.

- **[UC006] - Filtrar dados:** Deve haver uma opção de filtro que facilite a consulta aos dados armazenados no sistema. Opções de filtro: relevância/categoria/data/usuário responsável pela postagem.

- **[UC007] - Visualizar detalhes:** O usuário deve ser capaz de expandir cada projeto, pesquisa e notícia para obter mais detalhes sobre eles.

- **[UC008] - Divulgar parcerias:** O site deve listar as empresas parceiras do laboratório em uma página específica para tal funcionalidade.

- **[UC009] - Entrar em contato:** O usuário deve ser capaz de enviar uma mensagem no site para esclarecer dúvidas.

- **[UC010] - Mudar idioma:** O usuário deve ser capaz mudar o idioma do site de acordo com sua preferência.

# 5. Especificação dos casos de uso

- **[UC001] - Listar projetos:**

| Especificação do caso de uso |  |

| --- | --- |

| Identificador | UC001 |

| Nome | Listar Projetos |

| Atores | Site |

| Prioridade | Essencial |

| Sumário | O sistema deve possuir uma página que liste todos os projetos vinculados ao laboratório |

| Pré-condição | O usuário deve ter acesso à internet e entrar no endereço do site. |

| Pós-condição | O usuário deverá ser capaz de visualizar as funcionalidades do site e navegar por ele. |

| Pontos de inclusão | - |

| Pontos de extensão | - |

| Fluxo Principal |  |

| 1 – O usuário deve acessar o endereço do site. |  |

| 2 – O usuário deve acessar a página “Projetos”. |  |

|  | 3 – O sistema deve retornar vários cards, um para cada projeto. |

|  | 4 – Fim do caso de uso. |

- **[UC002] - Listar pesquisas:**

| Especificação do caso de uso |  |

| --- | --- |

| Identificador | UC002 |

| Nome | Listar Pesquisas |

| Atores | Site |

| Prioridade | Essencial |

| Sumário | O sistema deve possuir uma página que liste todas as pesquisas de iniciação científica e tecnológica vinculadas ao laboratório. |

| Pré-condição | O usuário deve ter acesso à internet e entrar no endereço do site. |

| Pós-condição | O usuário deverá ser capaz de visualizar as funcionalidades do site e navegar por ele. |

| Pontos de inclusão | - |

| Pontos de extensão | - |

| Fluxo Principal |  |

| 1 – O usuário deve acessar o endereço do site. |  |

| 2 – O usuário deve acessar a página “Pesquisas”. |  |

|  | 3 – O sistema deve retornar vários cards, um para cada pesquisa. |

|  | 4 – Fim do caso de uso. |

- **[UC003] - Listar notícias:**

| Especificação do caso de uso |  |

| --- | --- |

| Identificador | UC003 |

| Nome | Listar Notícias |

| Atores | Site |

| Prioridade | Essencial |

| Sumário | O sistema deve possuir uma página que liste todas as notícias vinculadas ao laboratório. |

| Pré-condição | O usuário deve ter acesso à internet e entrar no endereço do site. |

| Pós-condição | O usuário deverá ser capaz de visualizar as funcionalidades do site e navegar por ele. |

| Pontos de inclusão | - |

| Pontos de extensão | - |

| Fluxo Principal |  |

| 1 – O usuário deve acessar o endereço do site. |  |

| 2 – O usuário deve acessar a página “Notícias”. |  |

|  | 3 – O sistema deve retornar vários cards, um para cada notícia. |

|  | 4 – Fim do caso de uso. |

- **[UC004] - Listar membros:**

| Especificação do caso de uso |  |

| --- | --- |

| Identificador | UC004 |

| Nome | Listar Membros |

| Atores | Site |

| Prioridade | Essencial |

| Sumário | O sistema deve possuir uma página que liste todos os membros do laboratório.  Eles serão divididos em três categorias: Membros atuais, colaboradores e antigos colaboradores. |

| Pré-condição | O usuário deve ter acesso à internet e entrar no endereço do site. |

| Pós-condição | O usuário deverá ser capaz de visualizar as funcionalidades do site e navegar por ele. |

| Pontos de inclusão | - |

| Pontos de extensão | - |

| Fluxo Principal |  |

| 1 – O usuário deve acessar o endereço do site. |  |

| 2 – O usuário deve acessar a página “Equipe”. |  |

|  | 3 – O sistema deve retornar vários cards, um para cada membro. |

|  | 4 – Fim do caso de uso. |

- **[UC005] - Listar sistemas:**

| Especificação do caso de uso |  |

| --- | --- |

| Identificador | UC005 |

| Nome | Listar Sistemas |

| Atores | Site |

| Prioridade | Essencial |

| Sumário | O sistema deve possuir uma página que liste todos os sistemas desenvolvido no laboratório. |

| Pré-condição | O usuário deve ter acesso à internet e entrar no endereço do site. |

| Pós-condição | O usuário deverá ser capaz de visualizar as funcionalidades do site e navegar por ele. |

| Pontos de inclusão | - |

| Pontos de extensão | - |

| Fluxo Principal |  |

| 1 – O usuário deve acessar o endereço do site. |  |

| 2 – O usuário deve acessar a página “Sistemas”. |  |

|  | 3 – O sistema deve retornar acordions com vários sistemas. |

|  | 4 – Fim do caso de uso. |

- **[UC006] - Filtrar dados:**

| Especificação do caso de uso |  |

| --- | --- |

| Identificador | UC006 |

| Nome | Filtrar dados |

| Atores | Site |

| Prioridade | Essencial |

| Sumário | O sistema deve possuir uma ferramenta de busca para o usuário pesquisar por projetos, pesquisas e notícias específicas. |

| Pré-condição | O usuário deve ter acesso à internet e entrar no endereço do site. |

| Pós-condição | O usuário deverá ser capaz de visualizar as funcionalidades do site e navegar por ele. |

| Pontos de inclusão | - |

| Pontos de extensão | - |

| Fluxo Principal |  |

| 1 – O usuário deve acessar o endereço do site. |  |

| 2 – O usuário deve acessar a página projetos ou pesquisas ou notícias e digitar o nome do que deseja buscar. |  |

|  | 3 – O sistema deve retornar card(s) com o projeto/pesquisa/notícia de nome igual ao digitado pelo usuário. |

|  | 4 – Fim do caso de uso. |

- **[UC007] - Visualizar detalhes:**

| Especificação do caso de uso |  |

| --- | --- |

| Identificador | UC007 |

| Nome | Visualizar detalhes |

| Atores | Site |

| Prioridade | Essencial |

| Sumário | Cada card de projeto/pesquisa/notícia deve possuir um link “leia mais” para o usuário ler o conteúdo completo referente àquele card. |

| Pré-condição | O usuário deve ter acesso à internet e entrar no endereço do site. |

| Pós-condição | O usuário deverá ser capaz de visualizar as funcionalidades do site e navegar por ele. |

| Pontos de inclusão | - |

| Pontos de extensão | - |

| Fluxo Principal |  |

| 1 – O usuário deve acessar o endereço do site. |  |

| 2 – O usuário deve acessar a página projetos ou pesquisas ou notícias e apertar em “leia mais” do projeto/pesquisa/notícia desejado. |  |

|  | 3 – O sistema redirecionar o usuário para uma página que contenha o conteúdo completo do projeto/pesquisa/notícia selecionado. |

|  | 4 – Fim do caso de uso. |

- **[UC008] - Divulgar parcerias:**

| Especificação do caso de uso |  |

| --- | --- |

| Identificador | UC008 |

| Nome | Divulgar parcerias |

| Atores | Site |

| Prioridade | Essencial |

| Sumário | O sistema deve listar todas as parcerias do laboratório na página “sobre”. |

| Pré-condição | O usuário deve ter acesso à internet e entrar no endereço do site. |

| Pós-condição | O usuário deverá ser capaz de visualizar as funcionalidades do site e navegar por ele. |

| Pontos de inclusão | - |

| Pontos de extensão | - |

| Fluxo Principal |  |

| 1 – O usuário deve acessar o endereço do site. |  |

| 2 – O usuário deve acessar a página “sobre” e encontrar a sessão destinada a parcerias. |  |

|  | 3 – O sistema deve listar as parcerias na sessão indicada. |

|  | 4 – Fim do caso de uso. |

- **[UC009] - Entrar em contato:**

| Especificação do caso de uso |  |

| --- | --- |

| Identificador | UC009 |

| Nome | Entrar em contato |

| Atores | Site |

| Prioridade | Essencial |

| Sumário | O site deve ter uma página para que o usuário visualize informações de contato e deixe sua mensagem em caso de dúvida. |

| Pré-condição | O usuário deve ter acesso à internet e entrar no endereço do site. |

| Pós-condição | O usuário deverá ser capaz de visualizar as funcionalidades do site e navegar por ele. |

| Pontos de inclusão | - |

| Pontos de extensão | - |

| Fluxo Principal |  |

| 1 – O usuário deve acessar o endereço do site. |  |

| 2 – O usuário deve acessar a página “contato” e, caso queira, escrever sua mensagem e enviar. |  |

|  | 3 – O sistema deve processar essa mensagem e direcioná-la para o e-mail do laboratório. |

|  | 4 – Fim do caso de uso. |

- **[UC010] - Mudar idioma:**

| Especificação do caso de uso |  |

| --- | --- |

| Identificador | UC010 |

| Nome | Mudar idioma |

| Atores | Site |

| Prioridade | Essencial |

| Sumário | O site deve ser bílingue, possuindo duas opções de idioma (inglês e português) que devem ser selecionadas de acordo com a preferência do usuário. |

| Pré-condição | O usuário deve ter acesso à internet e entrar no endereço do site. |

| Pós-condição | O usuário deverá ser capaz de visualizar as funcionalidades do site e navegar por ele. |

| Pontos de inclusão | - |

| Pontos de extensão | - |

| Fluxo Principal |  |

| 1 – O usuário deve acessar o endereço do site. |  |

| 2 – O usuário deve procurar o ícone de globo, apertar e selecionar o idioma desejado. |  |

|  | 3 – O site deve mudar para o idioma escolhido pelo usuário. |

|  | 4 – Fim do caso de uso. |

Além disto, o site contará com as seguintes páginas:

- Páginas destinadas a dispor todos os projetos, trazendo data de publicação do texto, título e uma pequena amostragem do conteúdo;

- Página destinada a dispor todas as pesquisas realizadas no laboratório, seguindo o mesmo esquema de apresentação da página de projetos;

- Página de notícias, ordenando-as pelas mais recentes;

- Um ambiente contendo informações sobre a Equipe, com apresentação dos atuais membros da equipe;

- Uma página contendo informações sobre o laboratório;

- Página para listar todos os sistemas, contendo nome do sistema, descrição e, caso esteja completo, link para acesso.

- Ao final, uma área em que o usuário poderá clicar para entrar em contato (por e-mail, mensagem ou telefone) e ver o endereço do laboratório.

Para analisar mais detalhes a respeito da interface, acesse os links abaixo contendo o protótipo no Figma do website, tanto a versão desktop como a mobile:

- **Website Desktop:** [https://rb.gy/ve1ls](https://rb.gy/ve1ls)

- **Website Mobile:** [https://rb.gy/emdqy](https://rb.gy/emdqy)

Sobre o sistema, por ser um ambiente que será utilizado pelos administradores do site, a primeira tela a ser apresentada será a de login. Após a confirmação dos dados do administrador, o mesmo será redirecionado a tela inicial do sistema, em que será possível acessar ambientes que permitem adicionar ou remover publicações, gerenciar as informações de usuários do sistema (isto depende do nível administrativo), além de outras funcionalidades que foram descritas nos capítulos anteriores.

Para analisar detalhes a respeito da interface, acesse os links abaixo contendo o protótipo no Figma do website, tanto a versão desktop como a mobile:

- **Sistema Desktop:** https://rb.gy/yusj1

- **Sistema Mobile:** https://rb.gy/yusj1

# **7. Configuração do Ambiente de Desenvolvimento**

## 7.1 Requisitos de Software

- **Node.js e npm:**

- O ambiente de desenvolvimento requer o Node.js para executar o código JavaScript no servidor.

- O npm (Node Package Manager) é essencial para instalar e gerenciar pacotes de software necessários para o desenvolvimento.

- **Editor de código:**

- Um editor de código, como Visual Studio Code, Sublime Text ou Atom, é necessário para escrever, editar e depurar o código fonte do projeto.

- **Git:**

- O Git é uma ferramenta de controle de versão essencial para colaboração no desenvolvimento de software.

- Facilita o controle de mudanças no código fonte e permite a colaboração entre membros da equipe de desenvolvimento.

**Links para download e acesso a documentação complementar:**

- **Node.js:** [https://nodejs.org/pt-br/download](https://nodejs.org/pt-br/download)

- **Visual Studio Code:** [https://code.visualstudio.com/download](https://code.visualstudio.com/download)

- **Git: [https://git-scm.com/book/pt-br/v2/Come%C3%A7ando-Configura%C3%A7%C3%A3o-Inicial-do-Git](https://git-scm.com/book/pt-br/v2/Come%C3%A7ando-Configura%C3%A7%C3%A3o-Inicial-do-Git)**

## 7.2 Configurando o ambiente Node.js

**Configuração do Ambiente Node.js para o site:**

- **Instalação de Dependências:**

    - Após baixar o projeto do site, navegue até o diretório raiz do projeto.

    - Execute o comando *npm install* para instalar todas as dependências listadas no arquivo ***package.json***:

- **Execução no servidor:**

    - Execute o comando *npm run dev*

Com estas instruções, o ambiente Node.js estará configurado e pronto para o desenvolvimento.

# **8. Estrutura de pastas**

A estrutura de pastas do site foi organizada de forma a separar claramente os diferentes componentes e módulos da aplicação, facilitando a manutenção, a escalabilidade e a colaboração entre os membros da equipe de desenvolvimento. Abaixo está uma descrição da hierarquia de pastas e seus respectivos propósitos:

- ***public:*** Este diretório contém os arquivos estáticos que são servidos diretamente pelo servidor web, como HTML, imagens e ícones. Este diretório é utilizado pelo React para renderizar a aplicação no navegador.

- ***src:*** Contém os arquivos JavaScript e CSS da aplicação React.

- ***app:*** Contém as pastas [lang] e api. Elas servem, respectivamente, para carregar as páginas do site no idioma selecionado pelo usuário e para alimentar as páginas de projetos, notícias, pesquisas e equipe a partir de um dicionário criado na pasta ***dictionaries***.

- ***components:*** Contém os componentes reutilizáveis da interface do usuário, organizados em pastas de acordo com suas funcionalidades.

- ***dictionaries:*** Contém dois arquivos ***.json***, um para carregar as informações do site em português (***pt-br.json***) e outro para carregar as informações do site em inglês (***en.json***).

# **9. FrontEnd - Principais Componentes**

- **NavBar:** Componente que contém todas as páginas a serem acessadas no site para facilitar a navegação.

- **Header:** Componente que contém a navBar + ícones para realizar buscas no site e para alterar o idioma.

- **Loader:** Componente que aparece na tela como forma de mostrar para o usuário que a página está carregando.

- **CardContact e CardMobile:** Componentes que representam os cards pelos quais o usuário entrará em contato com o laboratório. A diferença entre os dois é que o CardMobile é apenas para mobile e o CardContact é apenas para desktop.

- **CardSystem:** Componente que representa os acordions presentes na página de sistemas.

- **TitleSearch:** Componente presente nas telas “projetos”, “notícias” e “pesquisas”. Ele possui o título da página e uma barra de busca para que o usuário possa filtrar dados específicos.

- **ProjCard**  e **NewsCard:** Cards presentes, respectivamente, nas páginas de projetos e de notícias. Representam a listagem de todos os projetos e notícias existentes no site.

- **LenguageOverlay:** Componente que representa a tela que aparece quando o usuário aperta no botão de idioma do componente **Header**.

- **SearchOverlay:** Componente que representa a tela que aparece quando o usuário aperta no botão de pesquisa do componente **Header**.

- **Divider:** Componente que representa a divisão entre o **Header** e o restante da página **Home**.

# **10. Referências**

- [https://nodejs.org/en](https://nodejs.org/en)

- [https://react.dev/](https://react.dev/)

- [https://styled-components.com/](https://styled-components.com/)