diff --git a/README.md b/README.md new file mode 100644 index 00000000..210dc563 --- /dev/null +++ b/README.md @@ -0,0 +1,56 @@ +# TÍTULO DO PROJETO + +`CURSO` + +`DISCIPLINA` + +`SEMESTRE` + +Descrever resumidamente, em um ou dois parágrafos, o projeto que está sendo desenvolvido. + +## Integrantes + +* Nome completo do aluno 1 +* Nome completo do aluno 2 +* Nome completo do aluno 3 +* Nome completo do aluno 4 + +## Orientador + +* Nome completo do professor 1 + +## Instruções de utilização + +Assim que a primeira versão do sistema estiver disponível, deverá complementar com as instruções de utilização. Descreva como instalar eventuais dependências e como executar a aplicação. + +Não deixe de informar o link onde a aplicação estiver disponível para acesso (por exemplo: https://adota-pet.herokuapp.com/src/index.html). + +Se houver usuário de teste, o login e a senha também deverão ser informados aqui (por exemplo: usuário - admin / senha - admin). + +O link e o usuário/senha descritos acima são apenas exemplos de como tais informações deverão ser apresentadas. + +# Documentação + +
    +
  1. Documentação de Contexto
    2. +
  2. Especificação do Projeto
    3. +
  3. Metodologia
    4. +
  4. Projeto de Interface
    5. +
  5. Arquitetura da Solução
    6. +
  6. Template Padrão da Aplicação
    7. +
  7. Programação de Funcionalidades
    8. +
  8. Plano de Testes de Software
    9. +
  9. Registro de Testes de Software
    10. +
  10. Plano de Testes de Usabilidade
    11. +
  11. Registro de Testes de Usabilidade
    12. +
  12. Apresentação do Projeto
    13. +
  13. Referências
    14. +
+ +# Código + +
  • Código Fonte
    • + +# Apresentação + +
  • Apresentação da solução
    • diff --git a/citation.cff b/citation.cff new file mode 100644 index 00000000..379dfe44 --- /dev/null +++ b/citation.cff @@ -0,0 +1,29 @@ +message: Please cite this software using these metadata. +title: +authors: + - family-names: + given-names: + - family-names: + given-names: + - family-names: + given-names: + - family-names: + given-names: + - family-names: + given-names: + - family-names: + given-names: + - name-suffix: Professor + affiliation: PUC Minas + family-names: + given-names: + - name-suffix: Professor + affiliation: PUC Minas + family-names: + given-names: +keywords: + - + - +repository-code: +version: 1.0.0 +date-released: 2023-10-31 \ No newline at end of file diff --git "a/docs/01-Documenta\303\247\303\243o de Contexto.md" "b/docs/01-Documenta\303\247\303\243o de Contexto.md" new file mode 100644 index 00000000..d7ff5b85 --- /dev/null +++ "b/docs/01-Documenta\303\247\303\243o de Contexto.md" @@ -0,0 +1,43 @@ +# Introdução + +Texto descritivo com a visão geral do projeto abordado. Inclui o contexto, o problema, os objetivos, a justificativa e o público-alvo do projeto. + +## Problema +Nesse momento você deve apresentar o problema que a sua aplicação deve resolver. No entanto, não é a hora de comentar sobre a aplicação. + +Descreva também o contexto em que essa aplicação será usada, se houver: empresa, tecnologias, etc. Novamente, descreva apenas o que de fato existir, pois ainda não é a hora de apresentar requisitos detalhados ou projetos. + +Nesse momento, o grupo pode optar por fazer uso de ferramentas como Design Thinking, que permite um olhar de ponta a ponta para o problema. + +> **Links Úteis**: +> - [Objetivos, Problema de pesquisa e Justificativa](https://medium.com/@versioparole/objetivos-problema-de-pesquisa-e-justificativa-c98c8233b9c3) +> - [Matriz Certezas, Suposições e Dúvidas](https://medium.com/educa%C3%A7%C3%A3o-fora-da-caixa/matriz-certezas-suposi%C3%A7%C3%B5es-e-d%C3%BAvidas-fa2263633655) +> - [Brainstorming](https://www.euax.com.br/2018/09/brainstorming/) + +## Objetivos + +Aqui você deve descrever os objetivos do trabalho indicando que o objetivo geral é desenvolver um software para solucionar o problema apresentado acima. + +Apresente também alguns (pelo menos 2) objetivos específicos dependendo de onde você vai querer concentrar a sua prática investigativa, ou como você vai aprofundar no seu trabalho. + +> **Links Úteis**: +> - [Objetivo geral e objetivo específico: como fazer e quais verbos utilizar](https://blog.mettzer.com/diferenca-entre-objetivo-geral-e-objetivo-especifico/) + +## Justificativa + +Descreva a importância ou a motivação para trabalhar com esta aplicação que você escolheu. Indique as razões pelas quais você escolheu seus objetivos específicos ou as razões para aprofundar em certos aspectos do software. + +O grupo de trabalho pode fazer uso de questionários, entrevistas e dados estatísticos, que podem ser apresentados, com o objetivo de esclarecer detalhes do problema que será abordado pelo grupo. Ou, o grupo poderá consultar e justificar o impacto do problema para o público-alvo por meio de pesquisas em outras fontes. Neste caso, é essencial que todos os dados apresentados estejam acompanhados de suas fontes (conforme padrão ABNT). + +> **Links Úteis**: +> - [Como montar a justificativa](https://guiadamonografia.com.br/como-montar-justificativa-do-tcc/) + +## Público-Alvo + +Descreva quem serão as pessoas que usarão a sua aplicação indicando os diferentes perfis. O objetivo aqui não é definir quem serão os clientes ou quais serão os papéis dos usuários na aplicação. A ideia é, dentro do possível, conhecer um pouco mais sobre o perfil dos usuários: conhecimentos prévios, relação com a tecnologia, relações hierárquicas, etc. + +> **Links Úteis**: +> - [Público-alvo](https://blog.hotmart.com/pt-br/publico-alvo/) +> - [Como definir o público alvo](https://exame.com/pme/5-dicas-essenciais-para-definir-o-publico-alvo-do-seu-negocio/) +> - [Público-alvo: o que é, tipos, como definir seu público e exemplos](https://klickpages.com.br/blog/publico-alvo-o-que-e/) +> - [Qual a diferença entre público-alvo e persona?](https://rockcontent.com/blog/diferenca-publico-alvo-e-persona/) diff --git "a/docs/02-Especifica\303\247\303\243o do Projeto.md" "b/docs/02-Especifica\303\247\303\243o do Projeto.md" new file mode 100644 index 00000000..6207cfc5 --- /dev/null +++ "b/docs/02-Especifica\303\247\303\243o do Projeto.md" @@ -0,0 +1,109 @@ +# Especificações do Projeto + +Pré-requisitos: Documentação de Contexto + +Definição do problema e ideia de solução a partir da perspectiva do usuário. É composta pela definição do diagrama de personas, histórias de usuários, requisitos funcionais e não funcionais além das restrições do projeto. + +Apresente uma visão geral do que será abordado nesta parte do documento, enumerando as técnicas e/ou ferramentas utilizadas para realizar a especificações do projeto + +## Personas + +Identifique, em torno de, 5 personas. Para cada persona, lembre-se de descrever suas angústicas, frustrações e expectativas de vida relacionadas ao problema. Além disso, defina uma "aparência" para a persona. Para isso, você poderá utilizar sites como [https://this-person-does-not-exist.com/pt#google_vignette](https://this-person-does-not-exist.com/pt) ou https://thispersondoesnotexist.com/ + +Utilize também como referência o exemplo abaixo: + +Persona1 + +Enumere e detalhe as personas da sua solução. Para tanto, baseie-se tanto nos documentos disponibilizados na disciplina e/ou nos seguintes links: + +> **Links Úteis**: +> +> - [Rock Content](https://rockcontent.com/blog/personas/) +> - [Hotmart](https://blog.hotmart.com/pt-br/como-criar-persona-negocio/) +> - [O que é persona?](https://resultadosdigitais.com.br/blog/persona-o-que-e/) +> - [Persona x Público-alvo](https://flammo.com.br/blog/persona-e-publico-alvo-qual-a-diferenca/) +> - [Mapa de Empatia](https://resultadosdigitais.com.br/blog/mapa-da-empatia/) +> - [Mapa de Stalkeholders](https://www.racecomunicacao.com.br/blog/como-fazer-o-mapeamento-de-stakeholders/) +> +Lembre-se que você deve ser enumerar e descrever precisamente e personalizada todos os clientes ideais que sua solução almeja. + +## Histórias de Usuários + +Com base na análise das personas forma identificadas as seguintes histórias de usuários: + +|EU COMO... `PERSONA`| QUERO/PRECISO ... `FUNCIONALIDADE` |PARA ... `MOTIVO/VALOR` | +|--------------------|------------------------------------|----------------------------------------| +|Ana Clara | Uma forma de identificar se uma agência é realmente confiável | Me sentir mais segura ao contratar seus serviços | +|Ana Clara | Ter um mecanismo eficiente e rápido de comunicação | Que eu possa sanar todas as minhas dúvidas rapidamente | + +Apresente aqui as histórias de usuário que são relevantes para o projeto de sua solução. As Histórias de Usuário consistem em uma ferramenta poderosa para a compreensão e elicitação dos requisitos funcionais e não funcionais da sua aplicação. Se possível, agrupe as histórias de usuário por contexto, para facilitar consultas recorrentes à essa parte do documento. + +> **Links Úteis**: +> - [Histórias de usuários com exemplos e template](https://www.atlassian.com/br/agile/project-management/user-stories) +> - [Como escrever boas histórias de usuário (User Stories)](https://medium.com/vertice/como-escrever-boas-users-stories-hist%C3%B3rias-de-usu%C3%A1rios-b29c75043fac) +> - [User Stories: requisitos que humanos entendem](https://www.luiztools.com.br/post/user-stories-descricao-de-requisitos-que-humanos-entendem/) +> - [Histórias de Usuários: mais exemplos](https://www.reqview.com/doc/user-stories-example.html) +> - [9 Common User Story Mistakes](https://airfocus.com/blog/user-story-mistakes/) + +## Requisitos + +As tabelas que se seguem apresentam os requisitos funcionais e não funcionais que detalham o escopo do projeto. + +### Requisitos Funcionais + +|ID | Descrição do Requisito | Prioridade | +|------|-----------------------------------------|----| +|RF-001| A aplicação deve permitir que o usuário avalie uma agência de intercâmbio com base na sua experiência| ALTA | +|RF-002| A aplicação deve permitir que o usuário inclua comentários ao fazer uma avaliação de uma agência de intercâmbio | ALTA | +|RF-003| A aplicação deve permitir que o usuário consulte todas as agências de intercâmbio cadastradas ordenando-as com base em suas notas | ALTA | + +### Requisitos não Funcionais + +|ID | Descrição do Requisito |Prioridade | +|-------|-------------------------|----| +|RNF-001| A aplicação deve ser responsiva | MÉDIA | +|RNF-002| A aplicação deve processar requisições do usuário em no máximo 3s | BAIXA | + +Com base nas Histórias de Usuário, enumere os requisitos da sua solução. Classifique esses requisitos em dois grupos: + +- [Requisitos Funcionais + (RF)](https://pt.wikipedia.org/wiki/Requisito_funcional): + correspondem a uma funcionalidade que deve estar presente na + plataforma (ex: cadastro de usuário). +- [Requisitos Não Funcionais + (RNF)](https://pt.wikipedia.org/wiki/Requisito_n%C3%A3o_funcional): + correspondem a uma característica técnica, seja de usabilidade, + desempenho, confiabilidade, segurança ou outro (ex: suporte a + dispositivos iOS e Android). +Lembre-se que cada requisito deve corresponder à uma e somente uma +característica alvo da sua solução. Além disso, certifique-se de que +todos os aspectos capturados nas Histórias de Usuário foram cobertos. + +## Restrições + +O projeto está restrito pelos itens apresentados na tabela a seguir. + +|ID| Restrição | +|--|-------------------------------------------------------| +|01| O projeto deverá ser entregue até o final do semestre | +|02| Não pode ser desenvolvido um módulo de backend | + + +Enumere as restrições à sua solução. Lembre-se de que as restrições geralmente limitam a solução candidata. + +> **Links Úteis**: +> - [O que são Requisitos Funcionais e Requisitos Não Funcionais?](https://codificar.com.br/requisitos-funcionais-nao-funcionais/) +> - [O que são requisitos funcionais e requisitos não funcionais?](https://analisederequisitos.com.br/requisitos-funcionais-e-requisitos-nao-funcionais-o-que-sao/) + +## Diagrama de Casos de Uso + +O diagrama de casos de uso é o próximo passo após a elicitação de requisitos, que utiliza um modelo gráfico e uma tabela com as descrições sucintas dos casos de uso e dos atores. Ele contempla a fronteira do sistema e o detalhamento dos requisitos funcionais com a indicação dos atores, casos de uso e seus relacionamentos. + +As referências abaixo irão auxiliá-lo na geração do artefato “Diagrama de Casos de Uso”. + +> **Links Úteis**: +> - [Criando Casos de Uso](https://www.ibm.com/docs/pt-br/elm/6.0?topic=requirements-creating-use-cases) +> - [Como Criar Diagrama de Caso de Uso: Tutorial Passo a Passo](https://gitmind.com/pt/fazer-diagrama-de-caso-uso.html/) +> - [Lucidchart](https://www.lucidchart.com/) +> - [Astah](https://astah.net/) +> - [Diagrams](https://app.diagrams.net/) diff --git a/docs/03-Metodologia.md b/docs/03-Metodologia.md new file mode 100644 index 00000000..10adff81 --- /dev/null +++ b/docs/03-Metodologia.md @@ -0,0 +1,77 @@ + +# Metodologia + +Pré-requisitos: Documentação de Especificação + +Descreva aqui a metodologia de trabalho do grupo para atacar o problema. Definições sobre os ambiente de trabalho utilizados pela equipe para desenvolver o projeto. Abrange a relação de ambientes utilizados, a estrutura para gestão do código fonte, além da definição do processo e ferramenta através dos quais a equipe se organiza (Gestão de Times). + +## Controle de Versão + +A ferramenta de controle de versão adotada no projeto foi o +[Git](https://git-scm.com/), sendo que o [Github](https://github.com) +foi utilizado para hospedagem do repositório. + +O projeto segue a seguinte convenção para o nome de branches: + +- `main`: versão estável já testada do software +- `unstable`: versão já testada do software, porém instável +- `testing`: versão em testes do software +- `dev`: versão de desenvolvimento do software + +Quanto à gerência de issues, o projeto adota a seguinte convenção para +etiquetas: + +- `documentation`: melhorias ou acréscimos à documentação +- `bug`: uma funcionalidade encontra-se com problemas +- `enhancement`: uma funcionalidade precisa ser melhorada +- `feature`: uma nova funcionalidade precisa ser introduzida + +Discuta como a configuração do projeto foi feita na ferramenta de versionamento escolhida. Exponha como a gerência de tags, merges, commits e branchs é realizada. Discuta como a gerência de issues foi realizada. + +> **Links Úteis**: +> - [Tutorial GitHub](https://guides.github.com/activities/hello-world/) +> - [Git e Github](https://www.youtube.com/playlist?list=PLHz_AreHm4dm7ZULPAmadvNhH6vk9oNZA) +> - [Comparando fluxos de trabalho](https://www.atlassian.com/br/git/tutorials/comparing-workflows) +> - [Understanding the GitHub flow](https://guides.github.com/introduction/flow/) +> - [The gitflow workflow - in less than 5 mins](https://www.youtube.com/watch?v=1SXpE08hvGs) + +## Gerenciamento de Projeto + +### Divisão de Papéis + +Apresente a divisão de papéis entre os membros do grupo. + +> **Links Úteis**: +> - [11 Passos Essenciais para Implantar Scrum no seu +> Projeto](https://mindmaster.com.br/scrum-11-passos/) +> - [Scrum em 9 minutos](https://www.youtube.com/watch?v=XfvQWnRgxG0) + +### Processo + +Coloque informações sobre detalhes da implementação do Scrum seguido pelo grupo. O grupo poderá fazer uso de ferramentas on-line para acompanhar o andamento do projeto, a execução das tarefas e o status de desenvolvimento da solução. + +> **Links Úteis**: +> - [Project management, made simple](https://github.com/features/project-management/) +> - [Sobre quadros de projeto](https://docs.github.com/pt/github/managing-your-work-on-github/about-project-boards) +> - [Como criar Backlogs no Github](https://www.youtube.com/watch?v=RXEy6CFu9Hk) +> - [Tutorial Slack](https://slack.com/intl/en-br/) + +### Ferramentas + +As ferramentas empregadas no projeto são: + +- Editor de código. +- Ferramentas de comunicação +- Ferramentas de desenho de tela (_wireframing_) + +O editor de código foi escolhido porque ele possui uma integração com o +sistema de versão. As ferramentas de comunicação utilizadas possuem +integração semelhante e por isso foram selecionadas. Por fim, para criar +diagramas utilizamos essa ferramenta por melhor captar as +necessidades da nossa solução. + +Liste quais ferramentas foram empregadas no desenvolvimento do projeto, justificando a escolha delas, sempre que possível. + +> **Possíveis Ferramentas que auxiliarão no gerenciamento**: +> - [Slack](https://slack.com/) +> - [Github](https://github.com/) diff --git a/docs/04-Projeto de Interface.md b/docs/04-Projeto de Interface.md new file mode 100644 index 00000000..628eef32 --- /dev/null +++ b/docs/04-Projeto de Interface.md @@ -0,0 +1,36 @@ + +# Projeto de Interface + +Pré-requisitos: Documentação de Especificação + +Visão geral da interação do usuário pelas telas do sistema e protótipo interativo das telas com as funcionalidades que fazem parte do sistema (wireframes). + + Apresente as principais interfaces da plataforma. Discuta como ela foi elaborada de forma a atender os requisitos funcionais, não funcionais e histórias de usuário abordados nas Documentação de Especificação. + +## Diagrama de Fluxo + +O diagrama apresenta o estudo do fluxo de interação do usuário com o sistema interativo e muitas vezes sem a necessidade do desenho do design das telas da interface. Isso permite que o design das interações seja bem planejado e gere impacto na qualidade no design do wireframe interativo que será desenvolvido logo em seguida. + +O diagrama de fluxo pode ser desenvolvido com “boxes” que possuem internamente a indicação dos principais elementos de interface - tais como menus e acessos - e funcionalidades, tais como editar, pesquisar, filtrar, configurar - e a conexão entre esses boxes a partir do processo de interação. Você pode ver mais explicações e exemplos https://www.lucidchart.com/blog/how-to-make-a-user-flow-diagram. + +![Exemplo de Diagrama de Fluxo](img/diagramafluxo2.jpg) + +As referências abaixo irão auxiliá-lo na geração do artefato “Diagramas de Fluxo”. + +> **Links Úteis**: +> - [Fluxograma online: seis sites para fazer gráfico sem instalar nada | Produtividade | TechTudo](https://www.techtudo.com.br/listas/2019/03/fluxograma-online-seis-sites-para-fazer-grafico-sem-instalar-nada.ghtml) + +## Wireframes + +![Exemplo de Wireframe](img/wireframe-example.png) + +São protótipos usados em design de interface para sugerir a estrutura de um site web e seu relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface. + +> **Links Úteis**: +> - [Protótipos vs Wireframes](https://www.nngroup.com/videos/prototypes-vs-wireframes-ux-projects/) +> - [Ferramentas de Wireframes](https://rockcontent.com/blog/wireframes/) +> - [MarvelApp](https://marvelapp.com/developers/documentation/tutorials/) +> - [Figma](https://www.figma.com/) +> - [Adobe XD](https://www.adobe.com/br/products/xd.html#scroll) +> - [Axure](https://www.axure.com/edu) (Licença Educacional) +> - [InvisionApp](https://www.invisionapp.com/) (Licença Educacional) diff --git "a/docs/05-Arquitetura da Solu\303\247\303\243o.md" "b/docs/05-Arquitetura da Solu\303\247\303\243o.md" new file mode 100644 index 00000000..c168d487 --- /dev/null +++ "b/docs/05-Arquitetura da Solu\303\247\303\243o.md" @@ -0,0 +1,47 @@ +# Arquitetura da Solução + +Pré-requisitos: Projeto de Interface + +Definição de como o software é estruturado em termos dos componentes que fazem parte da solução e do ambiente de hospedagem da aplicação. + +## Diagrama de Classes + +O diagrama de classes ilustra graficamente como será a estrutura do software, e como cada uma das classes da sua estrutura estarão interligadas. Essas classes servem de modelo para materializar os objetos que executarão na memória. + +As referências abaixo irão auxiliá-lo na geração do artefato “Diagrama de Classes”. + +> - [Diagramas de Classes - Documentação da IBM](https://www.ibm.com/docs/pt-br/rational-soft-arch/9.6.1?topic=diagrams-class) +> - [O que é um diagrama de classe UML? | Lucidchart](https://www.lucidchart.com/pages/pt/o-que-e-diagrama-de-classe-uml) + +## Modelo ER (Projeto Conceitual) + +O Modelo ER representa através de um diagrama como as entidades (coisas, objetos) se relacionam entre si na aplicação interativa. + +Sugestão de ferramentas para geração deste artefato: LucidChart e Draw.io. + +A referência abaixo irá auxiliá-lo na geração do artefato “Modelo ER”. + +> - [Como fazer um diagrama entidade relacionamento | Lucidchart](https://www.lucidchart.com/pages/pt/como-fazer-um-diagrama-entidade-relacionamento) + +## Projeto da Base de Dados + +O projeto da base de dados corresponde à representação das entidades e relacionamentos identificadas no Modelo ER, no formato de tabelas, com colunas e chaves primárias/estrangeiras necessárias para representar corretamente as restrições de integridade. + +Para mais informações, consulte o microfundamento "Modelagem de Dados". + +## Tecnologias Utilizadas + +Descreva aqui qual(is) tecnologias você vai usar para resolver o seu problema, ou seja, implementar a sua solução. Liste todas as tecnologias envolvidas, linguagens a serem utilizadas, serviços web, frameworks, bibliotecas, IDEs de desenvolvimento, e ferramentas. + +Apresente também uma figura explicando como as tecnologias estão relacionadas ou como uma interação do usuário com o sistema vai ser conduzida, por onde ela passa até retornar uma resposta ao usuário. + +## Hospedagem + +Explique como a hospedagem e o lançamento da plataforma foi feita. + +> **Links Úteis**: +> +> - [Website com GitHub Pages](https://pages.github.com/) +> - [Programação colaborativa com Repl.it](https://repl.it/) +> - [Getting Started with Heroku](https://devcenter.heroku.com/start) +> - [Publicando Seu Site No Heroku](http://pythonclub.com.br/publicando-seu-hello-world-no-heroku.html) diff --git "a/docs/06-Template Padr\303\243o da Aplica\303\247\303\243o.md" "b/docs/06-Template Padr\303\243o da Aplica\303\247\303\243o.md" new file mode 100644 index 00000000..6c54807c --- /dev/null +++ "b/docs/06-Template Padr\303\243o da Aplica\303\247\303\243o.md" @@ -0,0 +1,12 @@ +# Template Padrão da Aplicação + +Pré-requisitos: Especificação do Projeto, Projeto de Interface, Metodologia + +Layout padrão da aplicação que será utilizado em todas as páginas com a definição de identidade visual, aspectos de responsividade e iconografia. + +> **Links Úteis**: +> +> - [CSS Website Layout (W3Schools)](https://www.w3schools.com/css/css_website_layout.asp) +> - [Website Page Layouts](http://www.cellbiol.com/bioinformatics_web_development/chapter-3-your-first-web-page-learning-html-and-css/website-page-layouts/) +> - [Perfect Liquid Layout](https://matthewjamestaylor.com/perfect-liquid-layouts) +> - [How and Why Icons Improve Your Web Design](https://usabilla.com/blog/how-and-why-icons-improve-you-web-design/) diff --git "a/docs/07-Programa\303\247\303\243o de Funcionalidades.md" "b/docs/07-Programa\303\247\303\243o de Funcionalidades.md" new file mode 100644 index 00000000..23ebb6a8 --- /dev/null +++ "b/docs/07-Programa\303\247\303\243o de Funcionalidades.md" @@ -0,0 +1,30 @@ +# Programação de Funcionalidades + +Pré-requisitos: Especificação do Projeto, Projeto de Interface, Metodologia, Projeto de Interface, Arquitetura da Solução + +Implementação do sistema descrita por meio dos requisitos funcionais e/ou não funcionais. Nesta seção, é essencial relacionar os requisitos atendidos com os artefatos criados (código fonte) e com o(s) responsável(is) pelo desenvolvimento de cada artefato a cada etapa. Nesta seção também deverão ser apresentadas, se necessário, as instruções para acesso e verificação da **implementação que deve estar funcional no ambiente de hospedagem obrigatoriamente a partir da Etapa 03**. + +Por exemplo: a tabela a seguir deverá ser preenchida considerando os artefatos desenvolvidos. + +|ID | Descrição do Requisito | Artefatos produzidos | Aluno(a) responsável | +|------|-----------------------------------------|----|----| +|RF-001| A aplicação deve permitir que o usuário avalie uma agência de intercâmbio com base na sua experiência| | | +|RF-002| A aplicação deve permitir que o usuário inclua comentários ao fazer uma avaliação de uma agência de intercâmbio | | | +|RF-003| A aplicação deve permitir que o usuário consulte todas as agências de intercâmbio cadastradas ordenando-as com base em suas notas | | | + + +# Instruções de acesso + +Não deixe de informar o link onde a aplicação estiver disponível para acesso (por exemplo: https://adota-pet.herokuapp.com/src/index.html). + +Se houver usuário de teste, o login e a senha também deverão ser informados aqui (por exemplo: usuário - admin / senha - admin). + +O link e o usuário/senha descritos acima são apenas exemplos de como tais informações deverão ser apresentadas. + +> **Links Úteis**: +> +> - [Trabalhando com HTML5 Local Storage e JSON](https://www.devmedia.com.br/trabalhando-com-html5-local-storage-e-json/29045) +> - [JSON Tutorial](https://www.w3resource.com/JSON) +> - [JSON Data Set Sample](https://opensource.adobe.com/Spry/samples/data_region/JSONDataSetSample.html) +> - [JSON - Introduction (W3Schools)](https://www.w3schools.com/js/js_json_intro.asp) +> - [JSON Tutorial (TutorialsPoint)](https://www.tutorialspoint.com/json/index.htm) diff --git a/docs/08-Plano de Testes de Software.md b/docs/08-Plano de Testes de Software.md new file mode 100644 index 00000000..a0a838c3 --- /dev/null +++ b/docs/08-Plano de Testes de Software.md @@ -0,0 +1,31 @@ +# Plano de Testes de Software + +Pré-requisitos: Especificação do Projeto, Projeto de Interface + +Apresente os cenários de testes utilizados na realização dos testes da sua aplicação. Escolha cenários de testes que demonstrem os requisitos sendo satisfeitos. + +Não deixe de enumerar os casos de teste de forma sequencial e de garantir que o(s) requisito(s) associado(s) a cada um deles está(ão) correto(s) - de acordo com o que foi definido na seção "2 - Especificação do Projeto". + +Por exemplo: + +| **Caso de Teste** | **CT-01 – Cadastrar perfil** | +|:---: |:---: | +| Requisito Associado | RF-00X - A aplicação deve apresentar, na página principal, a funcionalidade de cadastro de usuários para que esses consigam criar e gerenciar seu perfil. | +| Objetivo do Teste | Verificar se o usuário consegue se cadastrar na aplicação. | +| Passos | - Acessar o navegador
    - Informar o endereço do site https://adota-pet.herokuapp.com/src/index.html
    - Clicar em "Criar conta"
    - Preencher os campos obrigatórios (e-mail, nome, sobrenome, celular, CPF, senha, confirmação de senha)
    - Aceitar os termos de uso
    - Clicar em "Registrar" | +|Critério de Êxito | - O cadastro foi realizado com sucesso. | +| | | +| Caso de Teste | CT-02 – Efetuar login | +|Requisito Associado | RF-00Y - A aplicação deve possuir opção de fazer login, sendo o login o endereço de e-mail. | +| Objetivo do Teste | Verificar se o usuário consegue realizar login. | +| Passos | - Acessar o navegador
    - Informar o endereço do site https://adota-pet.herokuapp.com/src/index.html
    - Clicar no botão "Entrar"
    - Preencher o campo de e-mail
    - Preencher o campo da senha
    - Clicar em "Login" | +|Critério de Êxito | - O login foi realizado com sucesso. | + + +> **Links Úteis**: +> - [IBM - Criação e Geração de Planos de Teste](https://www.ibm.com/developerworks/br/local/rational/criacao_geracao_planos_testes_software/index.html) +> - [Práticas e Técnicas de Testes Ágeis](http://assiste.serpro.gov.br/serproagil/Apresenta/slides.pdf) +> - [Teste de Software: Conceitos e tipos de testes](https://blog.onedaytesting.com.br/teste-de-software/) +> - [Criação e Geração de Planos de Teste de Software](https://www.ibm.com/developerworks/br/local/rational/criacao_geracao_planos_testes_software/index.html) +> - [Ferramentas de Test para Java Script](https://geekflare.com/javascript-unit-testing/) +> - [UX Tools](https://uxdesign.cc/ux-user-research-and-user-testing-tools-2d339d379dc7) diff --git a/docs/09-Registro de Testes de Software.md b/docs/09-Registro de Testes de Software.md new file mode 100644 index 00000000..7e85156e --- /dev/null +++ b/docs/09-Registro de Testes de Software.md @@ -0,0 +1,22 @@ +# Registro de Testes de Software + +Pré-requisitos: Projeto de Interface, Plano de Testes de Software + +Para cada caso de teste definido no Plano de Testes de Software, realize o registro das evidências dos testes feitos na aplicação pela equipe, que comprovem que o critério de êxito foi alcançado (ou não!!!). Para isso, utilize uma ferramenta de captura de tela que mostre cada um dos casos de teste definidos (obs.: cada caso de teste deverá possuir um vídeo do tipo _screencast_ para caracterizar uma evidência do referido caso). + +| **Caso de Teste** | **CT-01 – Cadastrar perfil** | +|:---: |:---: | +| Requisito Associado | RF-00X - A aplicação deve apresentar, na página principal, a funcionalidade de cadastro de usuários para que esses consigam criar e gerenciar seu perfil. | +|Registro de evidência | www.teste.com.br/drive/ct-01 | + +| **Caso de Teste** | **CT-02 – Realizar login** | +|:---: |:---: | +| Requisito Associado | RF-00Y - A aplicação deve permitir que um usuário previamente cadastrado faça login | +|Registro de evidência | www.teste.com.br/drive/ct-02 | + +## Avaliação + +Discorra sobre os resultados do teste. Ressaltando pontos fortes e fracos identificados na solução. Comente como o grupo pretende atacar esses pontos nas próximas iterações. Apresente as falhas detectadas e as melhorias geradas a partir dos resultados obtidos nos testes. + +> **Links Úteis**: +> - [Ferramentas de Test para Java Script](https://geekflare.com/javascript-unit-testing/) diff --git a/docs/10-Plano de Testes de Usabilidade.md b/docs/10-Plano de Testes de Usabilidade.md new file mode 100644 index 00000000..9aecc49d --- /dev/null +++ b/docs/10-Plano de Testes de Usabilidade.md @@ -0,0 +1,15 @@ +# Plano de Testes de Usabilidade + +Os testes de usabilidade permitem avaliar a qualidade da interface com o usuário da aplicação interativa. + +Um plano de teste de usabilidade deverá conter: o detalhamento dos objetivos (ou cenários) em função dos requisitos levantados/implementados, dos critérios que serão utilizados para a seleção dos participantes, dos procedimentos a serem adotados pelos condutores de teste (por exemplo: os testes serão presenciais ou remotos? o método será observação direta, medição ou avaliação?), dos dados a serem coletados (quantidade de cliques, número de erros, tempo etc.), da ordem de execução das tarefas e das etapas da sessão de teste, recursos demandados, métricas coletadas etc. + +Para cada voluntário do teste, é fundamental coletar e apresentar todos os dados/métricas previamente definidos, mas não se esqueça: atendendo à LGPD (Lei Geral de Proteção de Dados), nenhum dado sensível, que permita identificar o voluntário, deverá ser apresentado). + +As referências abaixo irão auxiliá-lo na geração do artefato "Plano de Testes de Usabilidade". + +> **Links Úteis**: +> - [Teste De Usabilidade: O Que É e Como Fazer Passo a Passo (neilpatel.com)](https://neilpatel.com/br/blog/teste-de-usabilidade/) +> - [Teste de usabilidade: tudo o que você precisa saber! | by Jon Vieira | Aela.io | Medium](https://medium.com/aela/teste-de-usabilidade-o-que-voc%C3%AA-precisa-saber-39a36343d9a6/) +> - [Planejando testes de usabilidade: o que (e o que não) fazer | iMasters](https://imasters.com.br/design-ux/planejando-testes-de-usabilidade-o-que-e-o-que-nao-fazer/) +> - [Ferramentas de Testes de Usabilidade](https://www.usability.gov/how-to-and-tools/resources/templates.html) diff --git a/docs/11-Registro de Testes de Usabilidade.md b/docs/11-Registro de Testes de Usabilidade.md new file mode 100644 index 00000000..1be7ceba --- /dev/null +++ b/docs/11-Registro de Testes de Usabilidade.md @@ -0,0 +1,8 @@ +# Registro de Testes de Usabilidade + +Após realizar os testes de usabilidade, obtém-se um relatório a partir das análises realizadas. O Registro de Testes de Usabilidade é um relatório que contém as evidências dos testes e relatos dos usuários participantes, baseado no Plano de Testes de Usabilidade desenvolvido para os casos de uso desta etapa. + +As referências abaixo irão auxiliá-lo na geração do artefato “Registro de Testes de Usabilidade”. + +> **Links Úteis**: +> - [Ferramentas de Testes de Usabilidade](https://www.usability.gov/how-to-and-tools/resources/templates.html) \ No newline at end of file diff --git "a/docs/12-Apresenta\303\247\303\243o do Projeto.md" "b/docs/12-Apresenta\303\247\303\243o do Projeto.md" new file mode 100644 index 00000000..8010294d --- /dev/null +++ "b/docs/12-Apresenta\303\247\303\243o do Projeto.md" @@ -0,0 +1,27 @@ +# Apresentação + +Pré-requisitos: Todos os demais artefatos + +Conjunto de slides em um arquivo PowerPoint ou PDF com a apresentação do projeto contemplando todos os itens trabalhados nos demais artefatos. + +## Título do Projeto + +Nome e marca do projeto + +## Identidade Visual (Marca, Design) + +O grupo deve ter o cuidado em utilizar figuras, imagens, e cores dentro do contexto da solução proposta, de forma a manter a temática do problema. + +> **Links Úteis**: +> - [10 dicas de design para slides](https://rockcontent.com/blog/design-para-slides/) +> - [7 dicas de design para criar apresentações de PowerPoint incríveis e eficientes](https://www.shutterstock.com/pt/blog/7-dicas-de-design-para-criar-apresentacoes-de-powerpoint-incriveis-e-eficientes) +> - [Especialista do TED dá 10 dicas para criar slides eficazes e bonitos](https://soap.com.br/blog/especialista-do-ted-da-10-dicas-para-criar-slides-eficazes-e-bonitos) + +## Conjunto de Slides (Estrutura) + +O grupo deve distribuir de forma coerente o conteúdo a ser apresentado, dentro do tempo determinado. Importante ressaltar a importância da descrição clara de todo o andamento do projeto, insumos gerados e requisitos atendidos. + +> **Links Úteis**: +> - [A regra 10-20-30 para apresentações de sucesso](https://revistapegn.globo.com/Noticias/noticia/2014/07/regra-10-20-30-para-apresentacoes-de-sucesso.html) +> - [Top Tips for Effective Presentations](https://www.skillsyouneed.com/present/presentation-tips.html) +> - [How to make a great presentation](https://www.ted.com/playlists/574/how_to_make_a_great_presentation) \ No newline at end of file diff --git "a/docs/13-Refer\303\252ncias.md" "b/docs/13-Refer\303\252ncias.md" new file mode 100644 index 00000000..33c2d2ac --- /dev/null +++ "b/docs/13-Refer\303\252ncias.md" @@ -0,0 +1,7 @@ +# Referências + +Inclua todas as referências (livros, artigos, sites, etc) utilizados no desenvolvimento do trabalho. + +> **Links Úteis**: +> - [Formato ABNT](https://www.normastecnicas.com/abnt/trabalhos-academicos/referencias/) +> - [Referências Bibliográficas da ABNT](https://comunidade.rockcontent.com/referencia-bibliografica-abnt/) \ No newline at end of file diff --git a/docs/img/AnaClara1.png b/docs/img/AnaClara1.png new file mode 100644 index 00000000..b45b9ecf Binary files /dev/null and b/docs/img/AnaClara1.png differ diff --git a/docs/img/componentes.png b/docs/img/componentes.png new file mode 100644 index 00000000..f0329e42 Binary files /dev/null and b/docs/img/componentes.png differ diff --git a/docs/img/diagramafluxo2.jpg b/docs/img/diagramafluxo2.jpg new file mode 100644 index 00000000..b3d59aef Binary files /dev/null and b/docs/img/diagramafluxo2.jpg differ diff --git a/docs/img/github.png b/docs/img/github.png new file mode 100644 index 00000000..13429793 Binary files /dev/null and b/docs/img/github.png differ diff --git a/docs/img/project.png b/docs/img/project.png new file mode 100644 index 00000000..6f5d8fd1 Binary files /dev/null and b/docs/img/project.png differ diff --git a/docs/img/redbooth.png b/docs/img/redbooth.png new file mode 100644 index 00000000..3ac25dd1 Binary files /dev/null and b/docs/img/redbooth.png differ diff --git a/docs/img/slack.jpg b/docs/img/slack.jpg new file mode 100644 index 00000000..65de823e Binary files /dev/null and b/docs/img/slack.jpg differ diff --git a/docs/img/trello.png b/docs/img/trello.png new file mode 100644 index 00000000..f53b8c33 Binary files /dev/null and b/docs/img/trello.png differ diff --git a/docs/img/userflow.jpg b/docs/img/userflow.jpg new file mode 100644 index 00000000..824101ef Binary files /dev/null and b/docs/img/userflow.jpg differ diff --git a/docs/img/wireframe-example.png b/docs/img/wireframe-example.png new file mode 100644 index 00000000..8ad7083b Binary files /dev/null and b/docs/img/wireframe-example.png differ diff --git a/presentation/README.md b/presentation/README.md new file mode 100644 index 00000000..fdc87f93 --- /dev/null +++ b/presentation/README.md @@ -0,0 +1,3 @@ +# Apresentação da Solução + +Faça uma apresentação de um resumo de todos o processo de desenvolvimento e no final apresente a solução desenvolvida, usando um pequeno vídeo. diff --git a/src/README.md b/src/README.md new file mode 100644 index 00000000..422ecd8f --- /dev/null +++ b/src/README.md @@ -0,0 +1,11 @@ +# Instruções de utilização + +## Instalação do Site + +O site em HTML/CSS/JS é um projeto estático, logo pode ser utilizado tanto em servidores... + +## Histórico de versões + +### [0.1.0] - DD/MM/AAAA +#### Adicionado +- Adicionado ... \ No newline at end of file