Você faz parte de uma equipe de desenvolvedores front-end e foi designado para desenvolver a interface do usuário de um projeto de chat interno para a empresa em que trabalha. A empresa decidiu que a interface deverá ser um clone do WhatsApp, pois a grande maioria dos funcionários já está acostumada a utilizá-lo em seu dia a dia.
A interface deverá ser responsiva e permitir que os usuários visualizem suas conversas, enviem e recebam mensagens, além de ter funcionalidades adicionais, como pesquisar por mensagens e gerenciar grupos. A interface deverá ser desenvolvida utilizando as melhores práticas de desenvolvimento web, de forma a garantir a sua usabilidade e performance em diferentes dispositivos e navegadores.
Para tanto, você terá que utilizar uma combinação de HTML, CSS e JavaScript para criar as páginas e os componentes necessários. Além disso, será necessário se comunicar com a equipe de back-end para integrar a interface com o banco de dados e as funcionalidades do chat.
Embora você ainda não tenha acesso às funções de envio de mensagens, seu objetivo é criar uma interface de usuário que seja intuitiva e agradável de usar, de forma a facilitar a comunicação entre os funcionários da empresa e aumentar a produtividade da equipe.
- Situação de Aprendizagem Somativa!
- Sumário
- O que deverá ser desenvolvido
- Antes de começar a desenvolver
- Durante o desenvolvimento
- Entrega do projeto
- Critérios de Avaliação
- Projeto dos alunos
- Autor
Você deverá desenvolver um clone do whatsApp responsivo. O projeto deverá atender os seguintes requisitos:
- Interface baseada no endereço https://web.whatsapp.com/
- Consumir os dados do arquivos contatos.js
- Seguir as boas práticas como semântica e acessibilidade;
- Obs.: para importar o arquivo contatos.js utilize o seguinte endereço: https://fernandoleonid.github.io/whatsApp-senai-1-2023/recursos/contatos.js
- Faça um fork deste repositório
- Clonar seu fork para o seu computador
- Faça as alterações na branch com seu nome
- Planeje o site usando o Figma.
- Crie uma lista de tarefas (task) para desenvolver o site.
- Faça um
commitpara cadatask. - Crie o README.md
Para entregar o seu projeto você deverá criar um Pull Request deste repositório, que deverá conter:
- Código HTML, CSS e JS.
- Arquivo README.md com link para github page, além do screenshot do APP, uma descrição do projeto, lista dos critérios (autoavaliação) e tudo o que foi utilizado no projeto.
- Entrega final da próxima aula (referencia dia 23/02/2023)
- O link do github pages deve seguir o exemplo abaixo:
https://fernandoleonid.github.io/whatsApp-senai-1-2023/turma/nome-do-aluno
-
Codificou o app conforme o original? - Nomeou as classes CSS utilizando o padrão BEM?
-
O app está responsivo? - Utilizou algum framework CSS?
-
Consumiu o JSON para mostrar todos os contatos? - Criou outros itens, na lista de contatos, como a quantidade de mensagens lidas?
-
Consumiu o JSON para mostrar as mensagens de cada contato? - Foi criado variáveis pensando nas boas praticas?
-
Foi criado funções pensando em responsabilidade única? -
Foi criado funções pensando no principio de funções puras? - O texto do README é objetivo e sucinto?
- O screenshot mostra um pouco do projeto?
- Existe um link para o github page no README?
- Existe um link do autor do projeto no README?
-
Fez a autoavaliação?
Os textos em destaque são critérios críticos, ou seja, precisam ser atingidos.
Os demais, são critérios desejáveis, não necessários para aprovação, mas importantes para se destacar entre os demais desenvolvedores.
