whatsApp-senai-1-2023

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.

---

Sumário

• 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

---

O que deverá ser desenvolvido

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

  Antes de começar a desenvolver

1. Faça um fork deste repositório
2. Clonar seu fork para o seu computador
3. Faça as alterações na branch com seu nome

---

Durante o desenvolvimento

1. Planeje o site usando o Figma.
2. Crie uma lista de tarefas (task) para desenvolver o site.
3. Faça um commit para cada task.
4. Crie o README.md

---

Entrega do projeto

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

O site desenvolvido foi um clone do whatsapp, uma atividade proposta pelo professor Leonid, a seguir temos os critérios de avaliação que o professor solicitou.

Critérios de Avaliação

• [✓] 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?

  todos marcados com “✓” foram devidameente realizados.

  FOI UTILIZADO:

  • Pure.CSS
  • HTML
  • CSS
  • @media

[Trabalho]