Projeto Final


Descrição

Como projeto final da disciplina deverá ser construído um frontend de uma aplicação web utilizando o framework VueJs, fazendo o uso da bibilioteca VueRouter e Pinia.

Está aplicação deve ser uma SPA – Single Page Application e sua página principal deve exibida automaticamente ao acessar a raiz da aplicação (/).

A aplicação deve usar CSS, por essa razão, recomenda-se o uso do Bootstrap ou de outro framework CSS de sua preferência para melhorar o visual da aplicação de forma simplificada.

Lembre-se de seguir as boas práticas:

  • Dê preferência ao uso de Javascript e CSS externos ao HTML.
  • Evite o uso de CSS e Javascript diretamente nos elementos HTML.

O backend (API REST) com o qual a sua aplicação deve se comunicar deve ser construído utilizando o Strapi.

O trabalho pode ser feito em equipe

Requisitos mínimos

  • A sua aplicação deve possuir pelo menos x entidades (tabelas), onde :
\[x = \begin{cases} 3 & \quad \text{quando o trabalho for individual }\\ n + 1 & \quad \text{para trabalhos em equipe onde } n \text{ é o tamanho da equipe} \end{cases} \]
  • A aplicação deve implementar os CRUDs de pelo menos duas dessas tabelas.
    • Uma das entidades deve ser dependende da outra, os CRUDs não podem ser totalmente independentes
    • Para trabalhos em equipe com mais de dois membros, as regras de negócio serão avaliada para verificar a elegibilidade do projeto.
  • A aplicação deve possuir pelo menos 3 papéis de usuários de forma que todos os papéis possuam permissões diferentes.
  • A aplicação deve persistir seus dados em banco dados cuja iteração deve ser feita com um backend via requições HTTP. O backend deve fornecer um serviço de autenticação usando JWT.
  • A aplicação deve possuir uma área pública com páginas/serviços acessíveis a todos; e uma área restrita com páginas/serviços acessíveis somente a usuários autenticados. Consequentemente, o frontend deve implementar um mecanismo de autenticação & autorização.
  • A aplicação deve ter uma barra de navegação/menu com todas as opções/links funcionando e a opção de logout deve estar sempre visível.
  • O frontend deve ser uma SPA – Single Page Application e sua página principal deve exibida automaticamente ao acessar a raiz da aplicação (/).
  • O frontend da aplicação web deve ser implementado utilizando a Composition API do Vue com Vite.

Não serão aceitos trabalhos implementados usando Option API. Para mais detalhes leia este artigo.

  • A aplicação OBRIGATORIAMENTE deve utilizar a biblioteca VueRouter para realizar o roteamento no front e Pinia para armazenar informações do usuário autenticado.
  • As rotas do frontend não podem ser todas públicas.

Não serão aceitos trabalhos implementados usando VUEX.

  • O fronted deve ser modularizar os trechos de HTML usados em várias páginas.
    • Exemplo: Deixar cabeçalho e rodapé em arquivos separados e incluí-los nas páginas onde serão necessários.

O código projeto que vai ser desenvolvido deve ser hospedado no GitHub.

Caso o trabalho seja feito em equipe, cada membro da equipe deve usar seu próprio usuário para escrever código.

Não serão aceitos trabalhos implementados em um único commit.

TODOS os membros da equipe devem se envolver em atividades que incluem a ESCRITA de código HTML, CSS e principalmente JavaScript ou TypeScript.

Envio da proposta

O autor do trabalho ou a equipe, deve escolher o domínio da aplicação, ex: um loja online de doces, e também deve descrever as funcionalidades do sistema, explicando resumidamente os requisitos do sistema com suas entidades principais. Essa definição deve ser enviada e aprovada pelo professor.

Para auxiliar nessa tarefa, vocês irão realizar criar um repositório no GitHub a partir deste template. Como vocês podem ver, o Readme.md já vem previamente preenchido com um modelo. Vocês devem alterar o modelo de acordo com a realidade da proposta de projeto final de vocês. Vocês podem consultar o repositório da MangaStore.

Depois disso, a proposta deve ser enviada por meio do seguinte formulário.

Prazo final de entrega: 14/09/2023

Os trabalhos devem necessariamente ter domínios distintos.

A ordem de envio para o professor determina quem tem prioridade por determinado domínio. Caso o domínio já tenha sido escolhido por outro aluno, deve-se propor um novo domínio.

Modelagem e rascunho da interface

É esperado que nesse momento, a equipe já tenha em mente de forma clara as principais funcionalidades do sistema e para isso, é necessário que os dados estejam devidamente modelados.

A entrega da modelagem deve ser feita de duas formas:

  • Um digrama entidade relacional ou um diagrama de classes que deixe claro como as entidades se relacionam
  • A “implementação” dessa modelagem utilizando Strapi.

Com uma visão clara das funcionalidades do projeto, a equipe deve também entregrar a primeira versão das telas do sistemas. Estas telas devem ser construídas usando HTML, CSS e JavaScript (ou TypeScript). Como são primeiras versões, dados fictícios devem/podem ser utilizados.

No prazo final da entrega, todo esse conteúdo deve estar presente no repositório do GitHub do projeto final, enviado juntamente com a proposta do projeto final.

Prazo final de entrega: 10/10/2023

Código

Antes de enviar o seu projeto para a avaliação será necessário realizar o preenchimento do restante do arquivo README.md do seu projeto.

Para facilitar a sua vida, apenas altere a segunda parte do README.md disponibilizado como template.

Projetos que não disponibilizarem no README.md as informações acima serão desconsiderados.

Strapi:

O Strapi por padrão utiliza o banco Sqlite, que armazena todo a base de dados em um único arquivo. Logo, se você não alterou nenhuma configuração relacionada ao armazenamento de dados, a base de dados da sua aplicação deve estar localizada em uma pasta oculta chamada .tmp (isso mesmo, tem um ponto antes do nome), dentro da pasta do Strapi.

Por padrão, esse arquivo não é enviado ao GitHub por motivos óbvios, porém para facilitar a correção, peço que envie o arquivo do banco para o GitHub. Para isso, você precisará alterar o arquivo .gitignore presente na raiz do projeto Strapi e remover a segunite linha:

.tmp

Depois disso, será possível commit e enviar a pasta .tmp e o arquivo data.db gerado pelo Strapi.

Informações sobre como utilizar o sistema, além de nomes de usuários e senhas devem ser enviadas por email para que eu possa testar o sistema.

Caso o trabalho seja feito em equipe, cada membro da equipe deve usar seu próprio usuário para escrever código.

No prazo final da entrega, todo o código deve estar disponível no repositório do projeto final no hospedado no GitHub.

Não serão aceitos trabalhos implementados em um único commit.

Não serão aceitos trabalhos enviados em formato compactados, ex: zip, rar e similares

Prazo final de entrega: 26/11/2023

Apresentação do trabalho

O trabalho também deverá necessariamente ser apresentado conforme cronograma da disciplina. A não apresentação do trabalho pelo aluno em sua anulação.


Table of contents