- 1. Prefácio
- 2. Objetivos de aprendizagem
- 3. Histórias de usuário
- 4. Testes unitários
- 5. Considerações gerais
- 6. Tecnologias utilizadas
- 7. Contato
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. Redes sociais contém vários tipos de nichos diferentes de acordo com as necessidades do usuário.
Neste projeto nós construímos uma Rede Social sobre defesa pessoal para mulheres. É direcionado para mulheres que desejam receber dicas de como se defender de possíveis ataques e violências, contando com uma rede de apoio disposta a ajudar independente do nível de conhecimento (iniciante, intermediário ou avançado), que também fica exposto nas postagens de cada usuário. Nossa Rede Social permite à qualquer usuário criar uma conta de acesso, logar-se com ela, criar, editar e deletar publicações.
O objetivo principal de aprendizagem deste projeto foi construir uma Single-page Application (SPA) responsiva (com mais de uma tela/ página) na qual seja possível ler e escrever dados.
Neste projeto o boilerplate não foi incluído, portanto tivemos que organizar e definir nossa própria estrutura de pastas e escrevemos nossos próprios testes unitários.
Os principais objetivos de aprendizagem atingidos foram:
- Desenhar e desenvolver um produto ou serviço colocando as usuárias no centro
- Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
- Criar protótipos para obter feedback e iterar
Protótipos de baixa e alta fidelidade:
- Uso de HTML semântico
- Uso de seletores de CSS
- Modelo de caixa (box model): borda, margem, preenchimento
- Uso de flexbox em CSS
- Uso de seletores de DOM
- Manipulação de eventos de DOM (listeners, propagação, delegação)
- Manipulação dinâmica de DOM
- Routing (History API, evento hashchange, window.location)
- Arrays (arranjos)
- Objetos (key, value)
- Diferenciar entre tipos de dados primitivos e não primitivos
- Variáveis (declaração, atribuição, escopo)
- Uso de condicionais (if-else, switch, operador ternário, lógica booleana)
- Funções (params, args, return)
- Testes unitários (unit tests)
- Uso de mocks e espiões
- Módulos de ECMAScript (ES modules)
- Uso de linter (ESLINT)
- Uso de identificadores descritivos (Nomenclatura e Semântica)
- Diferença entre expressões (expressions) e declarações (statements)
- Callbacks
- Promessas
- Git: Instalação e configuração
- Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)
- Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)
- GitHub: Criação de contas e repositórios, configuração de chave SSH
- GitHub: Implantação com GitHub Pages
- GitHub: Colaboração pelo Github (branches | forks | pull requests | code review)
- Firebase Auth
- Firestore
Foi feita uma pesquisa pelo Google Forms para obter informações do que os usuários precisavam para o site e selecionamos as opções mais relevantes e que estavam ao nosso alcance para entregar os melhor para os usuários.
Para organizar as histórias de usuário, utilizamos o Trello.
História 1: Eu como interessado na proposta do app quero me cadastrar com uma nova conta para obter uma conta de usuário.
História 2: Eu como usuário registrado quero fazer o login para acessar o feed.
História 3: Eu como usuário já registrado no app, após realizar o login quero interagir com outros usuários para obter e compartilhar conhecimento em defesa pessoal.
Todas as nossas histórias de usuário incluem:
- SPA.
- responsividade.
- tests unitários.
- Testes manuais buscando erros e imperfeições simples.
- Testes de usabilidade.
-
Os testes de unidade cobriram 100% de statements, functions, lines e branches.
-
Este projeto foi desenvolvido em dupla.
-
A lógica do projeto foi implementada completamente em JavaScript (ES6+), HTML e CSS. Para este projeto não foi permitido o uso de frameworks ou bibliotecas de CSS e JS.
Anara Martins