Criando uma Rede Social

Índice

• 1. Prefácio
• 2. Resumo do projeto
• 3. Objetivos de aprendizagem
• 4. Considerações gerais
• 5. Critérios de aceitação mínimos do projeto
• 6. Hacker edition
• 7. Entrega
• 8. Guias, dicas e leituras complementares

---

1. Prefácio

Instagram, Snapchat, Twitter, Facebook, Twitch, Linkedin, etc. As redes sociais invadiram nossas vidas. Nós as amamos ou odiamos, e muitas pessoas não conseguem viver sem elas.

Há redes sociais de todo tipo para todos os tipos de interesse. Por exemplo: em uma rodada de financiamento com investidores, foi apresentada uma rede social para químicos onde os usuários podem publicar artigos a respeito de suas pesquisas, comentar os artigos de seus colegas e filtrar artigos de acordo com determinadas tags ou popularidade, mais recente ou mais comentado.

2. Resumo do projeto

Neste projeto você construirá uma Rede Social sobre o que você e sua equipe decidirem. Pode ser, por exemplo, sobre alimentação saudável, feminismo, educação, saúde, energias renováveis, amantes das Empanadas, de Tacos, de Feijoada, ou do que seja.

Sua Rede Social terá que permitir à qualquer usuário criar uma conta de acesso, logar-se com ela, criar, editar, deletar e dar likes em publicações.

3. Objetivos de aprendizagem

O objetivo principal de aprendizagem deste projeto é construir uma Single-page Application (SPA) responsiva (com mais de uma tela/ página) na qual seja possível ler e escrever dados.

HTML e CSS

• HTML semântico
• CSS flexbox

DOM e Web APIs

• Manipulação do DOM
• History API
• localStorage

Javascript

• Uso de callbacks
• Consumo de Promises
• Uso de ES modules (import | export)

Firebase

• Firestore
• Firebase Auth
• Firebase security rules
• Uso de onSnapshot | onAuthStateChanged

Testing

• Teste unitários
• Testes assíncronos
• Mocking

Git e Github

• Colaboração pelo Github
• Organização pelo Github

Boas práticas de programação

• Modularização
• Nomenclatura / Semântica
• Linting

---

4. Considerações gerais

• Este projeto deve ser desenvolvido em trios.

• A lógica do projeto deve estar implementada completamente em JavaScript (ES6+), HTML e CSS 😃. Para este projeto não está permitido o uso de frameworks ou bibliotecas de CSS e JS.

• A divisão e organização do trabalho deve permitir, sem exceção, que cada integrante da equipe pratique a aprendizagem de tudo que está envolvido em cada história. Não dividam o trabalho como em uma fábrica.

• Está avançando em seus projetos com alguma fluidez e sem grandes problemas? Seja generosa com suas parceiras, deixe-as aprender e praticar sem restrições, mesmo que demore um pouco mais. Aproveite para mentorá-las, para fazer pair programming. Uma das melhores formas de aprender é explicar verbalmente.

• Está sentindo dificuldade e para você é mais difícil de avançar? Não fique com as partes "fáceis" do projeto. Converse, negocie, busque sua oportunidade de praticar e aprender o que é mais difícil para você.

• Vocês apenas poderão trabalhar em uma história por vez. Não avancem para a próxima sem completar a anterior. As histórias apenas são concluídas quando se completam todos os critérios de aceitação + toda sua definição de pronto.

5. Critérios de aceitação mínimos do projeto

5.1 Boilerplate

Este projeto não inclui um boilerplate, portanto você terá que definir a estrutura de pastas e escrever seus próprios testes unitários (tests). Para isso, você pode guiar-se por meio de projetos anteriores.

5.2 Definição do produto

No README.md, conte-nos brevemente como você mapeou as necessidades dos seus usuários e como você chegou à definição final do seu produto. É importante que detalhe:

• Quem são os principais usuários do produto.
• Qual problema o produto resolve/para que ele serve para esses usuários.

5.3 Histórias de usuário

Depois de entender as necessidades de seus usuários, escreva as Histórias de Usuário. Elas representam tudo o que ele precisa fazer/ver na Rede Social. Cada uma de suas histórias de usuário deve possuir:

• Critérios de aceitação: tudo o que deve acontecer para satisfazer as necessidades do usuário.

• Definição de pronto: todos os aspectos técnicos que devem ser atendidos para que, como equipe, saibam que essa história está finalizada e pronta para ser publicada. Todas suas histórias de usuário (com exceções), devem incluir esses aspectos em sua definição de pronto (além de tudo o que precisa adicionar):

  • Ser uma SPA.
  • Ser responsivo.
  • Receber code review de pelo menos uma parceira de outra equipe.
  • Fazer tests unitários.
  • Fazer testes manuais buscando erros e imperfeições simples.
  • Fazer testes de usabilidade e incorporar o feedback dos usuários como melhorias.
  • Fazer deploy do aplicativo e marcar a versão (git tag).

5.4 Desenho da Interface de Usuário (protótipo de baixa fidelidade)

Você deve definir qual será o fluxo que o usuário seguirá dentro do seu aplicativo e, com isso, criar a interface do usuário (UI) que siga este fluxo.

5.5 Responsivo

Deve funcionar bem em dispositivos de tela grande (computadores, laptops etc.) e pequena (tablets, telefones celulares etc.). Sugerimos seguir a técnica mobile first (mais detalhes sobre essa técnica ao final).

5.6 Considerações sobre o comportamento da Interface do Usuário (UI)

Essas considerações ajudarão você a escrever as definições de pronto de sua H.U.:

Criação e login de conta de usuário

• Login com Firebase:
  • Para o login e postagens na timeline, você pode usar o Firebase
  • O usuário deve poder criar uma conta de acesso ou autenticar-se com conta de e-mail e senha e também com uma conta do Google.
• Validações:
  • Somente usuários com contas válidas têm acesso permitido.
  • Não haver usuários repetidos.
  • A conta do usuário deve ser um email válido.
  • O que o usuário digita no campo de senha (input) deve ser secreto.
• Comportamento:
  • Quando o formulário de registro ou login é enviado, ele deve ser validado.
  • Se houver erros, mensagens descritivas devem ser exibidas para ajudar o usuário.

Timeline/linha do tempo

• Validações:
  • Ao publicar, deve ser validado se há conteúdo no input.
• Comportamento:
  • Ao recarregar o aplicativo, é necessário verificar se o usuário está logado antes de exibir o conteúdo,
  • Conseguir publicar um post.
  • Poder dar e remover likes em uma publicação. Máximo de um por usuário.
  • Visualizar contagem de likes.
  • Poder excluir uma postagem específica.
  • Solicitar confirmação antes de excluir um post.
  • Ao clicar em editar um post, você deve alterar o texto para um input que permite editar o texto e salvar as alterações.
  • Ao salvar as alterações, você deve voltar ao texto normal, mas com a informação editada.
  • Ao recarregar a página, poder ver os textos editados.

5.7 Considerações técnicas sobre front-end

• Separar a manipulação do DOM da lógica (separação de responsabilidades).
• Ter várias telas. Para isso, seu aplicativo deve ser um Single Page Application (SPA)
• Alterar e persistir dados. Os dados que você adiciona ou modifica devem persistir por todo o aplicativo. Recomendamos que você use o Firebase para isso também.

Testes unitários

• Lembre-se de que não há setup de testes definido, isso dependerá da estrutura do seu projeto. Você não deve esquecer de pensar sobre os testes. Eles podem ajudar a definir a estrutura e sua lógica.

• Os testes de unidade devem cobrir no mínimo 70% de statements, functions, lines e branches.

5.8 Considerações técnicas UX

• Faça pelo menos 2 entrevistas com os usuários.
• Faça um protótipo de baixa fidelidade.
• Verifique se a implementação do código segue as diretrizes do protótipo.
• Faça sessões de teste de usabilidade com o produto em HTML.

6. Hacker Edition

As seções chamadas Hacker Edition são opcionais. Se você terminou e cumpriu todos os requisitos acima e sobrou tempo, tente concluí-las. Dessa forma, você pode aprofundar e/ou exercitar mais os objetivos de aprendizagem do projeto.

• Criar posts com imagens.
• Procurar usuários, adicionar e excluir "amigos".
• Definir a privacidade de posts (público ou apenas para amigos).
• Permitir ver na linha do tempo de usuários "não amigos" apenas os posts públicos.
• Permitir comentar ou responder a uma postagem.
• Editar perfil.

7. Entrega

O projeto será entregue subindo seu código no GitHub (commit /push) e a interface será hospedada usando o Firebase Hosting pages ou outro serviço de hospedagem que você pode ter encontrado ao longo do caminho.

---

8. Guias, dicas e leituras complementares

8.1. Primeiros passos

8.1.1. Fork e clone

Como este projeto deve ser desenvolvido em trios, apenas uma integrante do trio precisará fazer o fork e adicionar as colaboradoras ao repositório. Após as demais integrantes terem recebido e aceito o convite de colaboração do repositório forkado, todas as integrantes poderão fazer o clone.

8.1.2. Inicialização de um projeto no Console do Firebase

Esta etapa de configuração do projeto no Firebase Console deverá ser realizada por apenas UMA integrante do trio.

Inicie um novo projeto no console do Firebase Adicionar projeto

• Insira o nome do seu projeto e clique em Continuar
• Pode deixar desativada a opção Ativar o Google Analytics neste projeto, pois não usaremos essa funcionalidade
• Clicar em Criar projeto

Adicionar as colaboradoras ao projeto Firebase

• No Dashboard do projeto criado, há no menu lateral uma engrenagem em Visão geral do projeto, selecionar Usuários e permissões para adicionar suas colegas como membro no projeto
• Utilizar os e-mails Gmail das colegas e configurar os papéis como Proprietário

Adicionar o Firebase ao seu aplicativo

• Adicione um Web app para começar
• Registre o Apelido do app
• Selecione para Também configure o Firebase Hosting para este app
• Registrar app
• Adicionar o SDK do Firebase no o arquivo src/index.html do projeto

8.1.3. Instalação global de Firebase em sua máquina

Esta etapa deve ser realizada por TODAS integrantes.

Este projeto está configurado para rodar por meio do servidor do Firebase. Para isso, será necessário possuir o Firebase CLI instalado globalmente em sua máquina. Utilize o comando a seguir no seu terminal:

npm install -g firebase-tools

Verifique se foi instalado corretamente, realizando o login:

firebase login

O login é feito por meio de uma conta Google, portanto, deve abrir uma janela em um navegador automaticamente para realizar o login. Se não abrir, pode clicar no link que vai aparecer no terminal.

8.1.4. Configuração do projeto Firebase no repositório

Esta etapa deverá ser realizada por apenas UMA integrante do trio.

IMPORTANTE rodar todos comandos do Firebase a seguir no terminal a partir da pasta raiz do projeto.

• Executar o comando para realizar o login

  firebase login

• Executar o comando para iniciar o setup do projeto

  firebase init

• Selecionar Hosting (aperte Espaço do teclado para selecionar essa opção e depois Enter)
• Selecionar Use an existing project. No terminal vai aparecer o nome do projeto que você acabou de criar no site do Firebase Console, selecionar e dar Enter
• Escrever src para definir como public directory
• Escrever y para selecionar como SPA (Single Page Application)
• Escrever N para não fazer builds e deploys automáticos com GitHub
• O Firebase vai dizer que src/index.html já existe e pergunta se quer sobrescrever. Sugerimos dar N, para não sobrescrever o index.html
• Se der tudo certo, o Firebase vai criar o arquivo .firebaserc de configuração na pasta do projeto e estamos prontas pra continuar
• Faça o commit com a adição dessa configuração para o repositório do seu grupo. Dessa forma, todas terão acesso às configurações do Firebase

8.1.5. Rodando a aplicação

Após atualização de seu repositório contendo a configuração inicial do projeto Firebase (item 8.1.4. acima), você deve abrir o terminal na raiz do projeto para rodar o comando de instalação de dependências:

npm i

E para rodar o projeto, use o comando:

npm start

Você verá que o servidor do Firebase está configurado para rodar seu projeto em http://localhost:5000.

Segue um 🎥 vídeo tutorial das etapas 8.1.2 até 8.1.5.

8.1.6. Firebase Authentication

Os principais métodos de autenticação a serem usados neste projeto são:

• Autenticação com e-mail e senha
• Login com Google

A configuração deve ser feita no console do Firebase:

• Clique no menu lateral Authentication e em Primeiros passos
• Na aba Sign-in method, escolher os métodos, Ativar e Salvar

Segue um vídeo tutorial.

Documentação: Authentication

8.1.7. Configuração de base de dados Firestore Database

No console do Firebase, adicionar Firestore Database ao projeto Firebase.

• Clique no menu lateral Firestore Database e em Criar banco de dados
• Selecionar Iniciar no modo de produção, clicar em Avançar
• Escolher a região us-east1 e clicar em Ativar
• Na tela de Cloud Firestore, ir na aba de Regras e editar para true e Publicar

  rules_version = ‘2’;
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if true;
      }
    }
  }
  

Documentação: Cloud Firestore

8.2. Mobile first

O conceito de mobile first faz referência a um processo de desenho e desenvolvimento que parte de como se vê e como funciona uma aplicação primeiro em um dispositivo móvel e mais adiante se analisa como adaptar a aplicação à telas progressivamente maiores. Esta é uma contraposição ao modelo tradicional, no qual primeiro se desenha os websites (ou webapps) para desktops e depois os adaptam para telas menores.

A motivação aqui é se assegurar que desde o começo sejam desenhadas telas responsivas. Dessa forma, começamos com a aparência e o comportamento do aplicativo em uma tela e ambiente móvel.

8.3. Múltiplas telas

Em projetos anteriores, nossas aplicações eram compostas de apenas uma tela principal (uma só página). Neste projeto, precisaremos dividir nossa interface em várias views ou pages e oferecer uma maneira de navegar entre essas telas. Esse problema pode ser resolvido de várias maneiras: com arquivos HTML independentes (cada um com seu próprio URL) e links tradicionais; mantendo na memória e renderizando condicionalmente (sem atualizar a página); manipulando o histórico do navegador com window.history. Neste projeto, convidamos você a explorar opções e decidir sobre uma opção de implementação.

O vídeo da Paloma pode ajudar nessa etapa.

8.4. Gravação de dados

Nos projetos anteriores, consumimos dados, mas ainda não tínhamos escrito dados (salvar alterações, criar dados, excluir, etc). Neste projeto, você precisará criar (salvar) novos dados, além de ler, atualizar e modificar os dados existentes. Esses dados podem ser salvos remotamente usando o Firebase.

Outras:

• Mobile First
• Mobile First Is NOT Mobile Only - Nielsen Norman Group
• Flexbox - CSS Tricks
• Módulos: Export
• Módulos: Import