Giters

JulianaMonteiro4 / SAP006-social-network

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

🎬

MEMES, SÉRIES E VOCÊ

Para acessar a aplicação, clique Aqui 🚀.

📑 Índice

🌍 1. SOBRE O PROJETO

O projeto SOCIAL NETWORK, foi criado dentro do bootcamp da Laboratória, com o intuito de estudarmos e colocarmos em prática o conteúdo do objetivos de aprendizagem. O tema do projeto era livre e o escolhido foi: MEMES, Séries e Você.

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. SOBRE O TEMA

O projeto foi desenvolvido para os fãs de séries e memes em geral. A idéia era desenvolver uma página web simples e objetiva, onde o usuário conseguisse postar memes de acordo com a série de sua escolha e que pudesse, curtir, editar e deletar um post.

Além disso, o usuárico consegue mudr sua foto de perfil e postar com imagens.

O projeto foi desenvolvido utilizando apenas vanilla JavaScript, HTML5, CSS3 e Firebase e foi realizado em 6 semanas.

💺 3. EXPERIÊNCIA DOS USUÁRIOS

Utilizamos o FORMS para criar um formulário onde questionamos quais redes sociais o usuáio gostaria de se cadastrar, qual a paleta de cores o mais gradava, qual a sua faixa etária e qual o tempo médio que ele gastava utilizando a rede social no seu dia-a-dia.

Faixa Etária:

Tempo médio gasto em Redes Sociais:

Informações que gostariam de ter em uma rede social:

  • Curtir e Remover curtida;
  • Página de Perfil;
  • Deletar Post;
  • Editar Post;
  • Comentar Post;
  • Postar com imagens;
  • Salvar imagens/posts.

Em seguida configuramos nossas Histórias de Usuários:

❶ "Gostaria de acessar o site e lá ter um campo para login e senha simples, que me permita logar com a conta do Google ou com uma outra conta! Caso eu não tenha um cadastro, quero que me ofereça um campo pra poder fazer o cadastro e se possível um campo para recuperação de senha."

Assim que o usuário entra no site, ele consegue se cadastrar, efetuar o login ou rcuperar a senha de uma conta existente. O site também é responsivo, o usuário poderá navegar por Celular e Tablet.

Definição de pronto:

Ter a SPA pronta, página de login, cadastro, recuperação e feed prontas

❷ "Gostaria que quando fizesse o login fosse direcionado para a página do feed. Nessa página, gostaria que tivesse um campo para publicar posts com imagens/textos e um campo para digitar/ler os comentários, e que eu possa curtir e deletar os posts.".

Ao entrar na aplicação por um login, o usuário tem acesso á página de feed, onde consegue curtir, descurtir, editar e deletar o post. Além de um menu que o leva para a página de Profile ou para Sair do App. Ao entrar com um novo cadastro, ele é redirecionado para a página de Profile, onde consegue editar o nove e sua foto de perfil.

Definição de pronto:

Ter toda a página de login, cadastro, recuperação de senha pronta e funcionando e ter a página do feed pronta.

🎨 4. LAYOUT

As cores do layout foram pensados no conforto dos usuários ao utilizar a aplicação.

Paleta de Cores:

Fizemos um fluxograma para verificar quais seriam os passos do usuários, desde quando entra no site pela primeira vez até quando ele irá sair da aplicação.

Fluxograma:

🎯 Protótipos:

Os protótipos foram pensandos para facilitar a navegação e em trazer uma resposta rápida na busca por informações, já que o usuário poderá assistir a série e buscar por informações simultâneamente.

Protótipos em alta fidelidade (Mobile First):

📚 5. OBJETIVOS DE APRENDIZAGEM

  • HTML semântico
  • CSS flexbox
  • Manipulação do DOM
  • History API
  • localStorage
  • Uso de callbacks
  • Consumo de Promises
  • Uso de ES modules (import | export)
  • Firestore
  • Firebase Auth
  • Firebase security rules
  • Uso de onSnapshot | onAuthStateChanged
  • Colaboração pelo Github
  • Organização pelo Github
  • Modularização
  • Nomenclatura / Semântica
  • Linting
  • Ser uma SPA.
  • Ser responsivo.
  • Mobile First
  • Teste unitários
  • Testes assíncronos
  • Mocking

💻 6. COMEÇANDO O PROJETO

Antes de tudo, precisa verificar se o CMDER, NODE e GIT estão instalados em seu computador. Para instalar e executar a aplicação:

  • Faça o fork do repositório no GitHub para salvar os arquivos;
  • Utilize um editor de texto como Atom ou Visual Studio Code;
  • Configure o GIT pelo terminal com o nome e e-mail;
  • Coloque no terminal npm install para instalar as dependências;
  • Coloque no terminal npm start para gerar um localhost.
  • Depois de instalar o repositório e suas dependências em seu computador, crie uma nova Branch com cada função que irá trabalhar utilizando:
git switch -b nomeDaBranch
(cria e entra direto na branch)
  • Sempre que atualizar um arquivo faça um Commit para o GitHub:
1. git add nomeDaPasta/nomeDoArquivo.extensão 
**OU** git add . (para adicionar todo o conteúdo)
2. git commit -m "nome da atualização"
3. git push origin nomeDaBranch
  • Para executar os testes de ESLINT, digite no terminal:
npm run pretest
  • Para executar testes de unidade, digite no terminal:
npm run test
  • Quando terminar o projeto, faça um Deploy no próprio terminal utilizando:
npm run deploy.

6.1 Inicialização de um projeto no Console do Firebase

Inicie um novo projeto no Firebase:

  • Adicionar projeto
  • Insira o nome do seu projeto e clique em Continuar
  • 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

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

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

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.3 Configuração do projeto Firebase no repositório

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.4 Rodando a aplicação

Após atualização de seu repositório contendo a configuração inicial do projeto Firebase, 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

8.5 Configuração de base de dados Firestore Database

No 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;
    }
  }
}

🚧 7. MELHORIAS FUTURAS:

  • Função de Comentar;
  • Filtragem/Busca de posts;
  • Compartilhar posts;
  • Adicionar ou Remover amigos.
  • Salvar/Baixar imagens.

👩‍💻 8. AUTORAS:

Projeto realizado para o Bootcamp da LABORATÓRIA.

Bianca Alves , Juliana Monteiro e Paloma Queiroz

About

Languages

Language:JavaScript 60.7%Language:CSS 35.7%Language:HTML 3.6%