- 1. Resumo do projeto
- 2. Organização de trabalho
- 3. Definição do produto - BatePrato
- 4. Aplicação
- 5. Repositório
- 6. Deploy
- 7. Checklist
- 8. Desenvolvedoras
Sabe-se que há redes sociais para todos os tipos de interesse; amadas ou odiadas, elas invadiram a vida do seres humano e muitas pessoas não conseguem viver sem. Para além dos objetivos e características principais já conhecidas das redes, como conectar-se com amigos, familiares e pessoas que compartilham interesses em comum, hoje elas também são amplamente utilizadas como ferramenta profissional dentro dos mais variados setores, sendo um dos principais meios de comunicação: útil para buscar informações e com impacto direto nas relações modernas.
Este é o terceiro projeto do Bootcamp da Laboratória, e tem por intenção construir uma aplicação web no formato de rede social responsiva a partir do método Single-page Application (SPA), de interface intuitiva, acessível, com contraste, botões principais em evidência e visual limpo para fácil leitura. Nela, o usuário pode criar uma conta de acesso, logar-se com ela, criar, editar, deletar e dar likes em publicações, ou seja, interagir a partir da circulação de informações disponibilizadas pelos usuários cadastrados na plataforma.
Uma rede social voltada às experiências em bares e restaurantes, na qual é possível compartilhar críticas, dicas e recomendações gastronômicas, além de outros aspectos vivenciados nestes locais, como atendimento, ambiente, valores, entre outros.
Para este projeto, foi utilizada a ferramenta de organização Notion em conjunto com o método Ágil, em que tasks foram separadas por sprints.
Com base em uma pesquisa que conta com 21 respostas, informadas por intermédio do Google Form, 95,2% dos participantes dizem ter o costume de recomendar restaurantes que frequentam a amigos e familiares. Dentre os participantes, 66,7% levam em consideração a opnião de terceiros ao escolher um restaurante ou bar para conhecer, enquanto 23,8% considera tal opinião muito importante, sendo o fator decisivo na escolha de um estabelecimento.
A partir do que foi descrito acima, conclui-se que as informações mais interessantes para acessar e satisfazer esse público são:
- o nome do estabelecimento;
- o endereço do estabelecimento;
- a avaliação do estabelecimento;
- a nota atribuída ao estabelecimento;
- o nome do usuário que dá a crítica.
Tais informações podem ser entregues ao usuário por intermédio da aplicação web BatePrato, que conta com timeline na qual é possível escrever uma crítica a um restaurante ou bar e que cujo conteúdo é passível de receber likes, de forma a disponibilizar um review para que o usuário possa escolher que estabelecimentos visitar com base na opinião de terceiros.
Foram definidas 02 histórias de usuário para este projeto:
- A fim de receber dicas de bons restaurantes (e restaurantes para evitar), como um novo morador de São Paulo, quero poder ler e curtir o que os clientes andam dizendo sobre os estabelecimentos aos quais vão.
- Como uma influenciadora, eu posso dar meu review e, se necessário, editá-lo, acerca dos pratos que comer nos restaurantes que visitar para que outras pessoas possam conhecer novos estabelecimentos e experiências gastronômicas.
A fim de definir a aplicação, a partir das histórias de usuário, obtem-se a definição de pronto referente a cada uma delas
- Para que esta história seja atendida, é necessário:
- página sign in;
- página log in;
- timeline com posts de outros usuários;
- botão de like nas postagens.
- Para que esta história seja atendida, é necessário: página sign in;
- página log in;
- contagem de likes nas postagens;
- caixa de texto para escrever nvoas postagens;
- botão de edição que permite alterar conteúdo da caixa de texto.
Neste projeto foi primordialmente idealizada uma timeline contendo críticas de usuários da rede social BatePrato que, para melhor estarem acomodadas na aplicação, possuem "Ler mais" como um call to action para acessar a crítica integralmente. Na mesma página, cada crítica tem a possibilidade de ser "curtida", clicando no coração ao lado. Além disso, a pessoa que escreve a crítica pode atribuir uma nota, que fica visível logo acima do ícone de likes na publicação. Caso o usuário deseje editar seu post, é possível clicar no ícone de lápis, abaixo do ícone likes; mas, se desejar excluir a publicação, basta clicar no ícone de lixeira.
Com os ícones de "menu", "home" e "likes", o usuário pode fazer log out, acessar a página inicial e acessar as críticas curtidas, respectivamente. Já na parte inferior, com os ícones de soma, a logo da rede social BatePrato e um ícone de seta para cima, o usuário pode criar um novo post, acessar a página inicial pela logo e, caso role a página, poder voltar ao topo com o ícone de seta.
A primeira tela vista é a de convite para cadastrar-se. Se a pessoa já tiver conta, pode clicar em "Entrar" e acessar com seu e-mail e senha. Se, porém, não for cadastrado, pode escolher preencher um formulário com nome, e-mail, senha e confirmação de senha. Também é possível acessar a conta com o Google Accounts.
As tipografias escolhidas foram "Roboto Condensed", para títulos e textos pequenos e "Roboto Slab", para textos extensos, por possuir serifa e facilitar a leitura.
O processo de prototipagem foi dividido em duas etapas, a partir do conceito de mobile first:
- Baixa fidelidade - sketches
- Alta fidelidade - ferramenta Figma
A paleta de cores foi feita por intermédio da ferramenta Adobe Color e resultou no seguinte:
O repositório é o espaço digital que armazena um código e as versões que podem advir dele. Neste caso, o repositório está hospedado no GitHub, onde é possível criar um perfil - um espaço próprio do usuário para guardar códigos. O ideal é ter um repositório por projeto. Para tanto, é possível criar um repositório e nomeá-lo ou forkar um repositório já existente (de outro perfil) para fazer as próprias mudanças sem alterar o arquivo original. No caso de um novo repositório criado, é importante acessar a pasta do computador onde o repositório está por meio do terminal e usar o comando git init (no caso de GitBash, terminal do Linux, terminal do Ubuntu). Para este repositório cujo README vos fala, isso não é necessário.
Fork é a ação de bifurcar um repositório, ou seja, é como se o repositório original fosse um bonde com passageiros dentro (códigos) que trilha um caminho que, em dado momento, é bifurcado (fork) e agora segue dois caminhos distintos, porém com um passado em comum. Da mesma forma, o repositório disponibilizado por um Usuário A possui arquivos e códigos que, quando "forkados" por outro Usuário B, seguem o caminho que o Usuário B determinar sem afetar o repositório original, disponibilizado pelo Usuário A. Para acessar este repositório, cujo README vos fala, é preciso forká-lo. Para isso, basta clicar em Fork, no canto direito superior da página deste repositório no GitHub.
Clone é a ação de clonar o repositório forkado para a máquina na qual o(s) código(s) é(são) alterado(s). Clonar o repositório forkado permite que o computador acesse todos os arquivos dentro do repositório clonado. Para clonar o repositório forkado, que, agora, pertence ao usuário que forkou, basta:
- Clicar no botão
Codena página do repositório do usuário que forkou; - Copiar a url-do-repositório ali disponibilizado;
- Abrir o Terminal;
- Acessar a pasta para onde deseja clonar o repositório;
- Rodar o comando
git clone <url-do-repositório>.
No caso deste projeto, que foi realizado em dupla, o fork foi feito por apenas uma das partes da dupla. Após somente a integrante Isabela forkar, ela e a integrante Érica clonaram o mesmo repositório para suas respectivas máquinas. A integrante Érica não precisou forkar o repositório advindo da página da Laboratória no GitHub.
Deploy é a ação de colocar o código no ar. Quando um código/aplicação é "deployado", significa que ele já está disponível para ser acessado como qualquer outro site, por intermédio da URL colocada na barra de endereço do navegador. Para "deployar", basta:
- Acessar a pasta com os arquivos a serem adicionados no Terminal;
- Rodar o comando
npm run deployno Terminal.
- [✓]
- [✓]
- [✓]
Projeto desenvolvido por Érica Lopes e Isabela Nunes - Laboratória SAP-008 - 2022
 Érica Lopes |
 Isabela Nunes |