Acesse o projeto: aqui
Desenvolvido por:
- 1. Prefácio
- 2. Definição de produto
- 3. Histórias do Usuário
- 4.Metodologia
- 5.Interface Responsiva
- 6. Objetivos de Aprendizagem e Cobertura de Testes Unitários
- 7. Especificações Técnicas
Terceiro projeto desenvolvido para o Bootcamp da Laboratoria - turma SAP010 que tem como objetivo aferir as habilidades e capacitação das alunas ao desenvolver uma rede social como uma SPA (single-page application) na qual seja possível ler e escrever dados. A CBD Connect é uma rede social desenvolvida para unir pacientes em tratamento com Cannabis Medicinal à profissionais prescritores. Acreditamos que a tecnologia é uma aliada indispensável para promover a informação e acessibilidade à tratamentos de qualidade para todos. A plataforma oferece um espaço seguro e informativo para que os usuários possam compartilhar suas experiências, encontrar informações sobre tratamentos com cannabis medicinal e localizar profissionais qualificados para obter orientações sobre sua saúde e bem-estar. Além disso, a aplicação foi projetada para ser responsiva, garantindo uma experiência agradável tanto em dispositivos móveis quanto em desktops..
Acreditamos que essa rede social pode ser uma valiosa fonte de apoio e conhecimento para todos os envolvidos, ajudando a melhorar a qualidade de vida dos pacientes, propagando o conhecimento sobre o tratamento com Cannabis Medicinal. Os principais usuários desse produto são:
- Pacientes que utilizam a Cannabis medicinal para tratamento de condições de saúde específicas.
- Profissionais prescritores deste tratamento, sendo eles: médicos, biomédicos, dentistas, fisioterapeutas e outros. Este produto visa solucionar alguns problemas enfrentados pelos pacientes e profissionais prescritores, como por exemplo: Dificuldade em encontrar informações confiáveis sobre cannabis medicinal.
- Isolamento social dos pacientes, que muitas vezes não têm acesso a uma rede de suporte.
- Dificuldade em encontrar profissionais prescritores de cannabis medicinal e obter orientações adequadas.
- Falta de um espaço seguro e inclusivo para compartilhar experiências e obter apoio.
Pensando na experiência do usuário, desenvolvemos um produto no formato de Fanpage que permite que a experiência de consultar o elenco de personagens de forma divertida, intuitiva e prática ainda que simples.
Paciente deseja criar uma conta na rede social para ter acesso aos recursos e interagir com outros usuários.
- O paciente deve fornecer um nome de usuário, endereço de e-mail e senha para criar a conta.
- O sistema deve validar se o endereço de e-mail é único e se a senha é válida (mínimo 6 caracteres).
- Após o cadastro bem-sucedido, o paciente deve conseguir logar com o email e a senha.
- A funcionalidade passou por testes manuais buscando erros e imperfeições.
- A funcionalidade passou por testes de usabilidade e o feedback dos usuários foi incorporado como melhorias.
- A funcionalidade foi revisada por um membro de outra equipe através de code review.
O usuário cadastrado deseja fazer login na rede social usando minha conta Google para acessar minhas informações e interagir com outros usuários.
- O paciente deve conseguir acessar a aplicação com o login Google através de uma pop-up.
- O sistema deve verificar se as credenciais são válidas e permitir o acesso ao perfil do paciente.
- O paciente pode fazer login na rede social e acessar seu perfil.
- A funcionalidade passou por testes manuais buscando erros e imperfeições.
- A funcionalidade passou por testes de usabilidade e o feedback dos usuários foi incorporado como melhorias.
- A funcionalidade foi revisada por um membro de outra equipe através de code review.
O usuário na condição de paciente ou prescritor deseja compartilhar experiências com o uso de cannabis medicinal e obter apoio de outros pacientes, bem como encontrar profissionais prescritores ou divulgar informações relacionadas ao seu trabalho.
- O usuário deve poder criar postagens para compartilhar suas experiências e insights relacionados ao uso de cannabis medicinal.
- O sistema deve permitir o usuário consiga editar um post criado.
- O usuário deve poder excluir do feed um post escrito por ele anteriormente.
- O usuário pode criar postagens e visualizar postagens de outros usuários no feed.
- O usuário pode editar seus posts ou excluí-los.
- A funcionalidade passou por testes manuais buscando erros e imperfeições.
- A funcionalidade passou por testes de usabilidade e o feedback dos usuários foi incorporado como melhorias.
- A funcionalidade foi revisada por um membro de outra equipe através de code review.
Utilizamos a ferramenta Git Projects para o planejamento da logística, bem como divisão de tarefas e planejamento dos sprints. Usamos a ferramenta para também compartilhar links de materiais usados como bibliografia, armazenamento das imagens utilizadas e registro de atividades ou problemas. As tecnologias utilizadas neste projeto incluem: JavaScript Vanilla, HTML5, CSS3 para criação da página, Jest para os testes unitários e o Git colaborativo na plataforma Github para o controle de versões. Uma vez que o aplicativo foi criado em uma página única (SPA - Single Page Application), seu código foi organizado da seguinte forma:
- A pasta 'Pages' armazena 7 subpastas : 'feed', 'home', 'imagens', 'infopage', 'login', 'perfil', 'serviceFirebase', cada uma contendo um arquivo .js e um arquivo .css que carrega as informações atribuídas às páginas que compõe o escopo do projeto, suas funções e estilização.
- A pasta serviceFirebase contém todas as informações relacionadas à configuração do Firebase e Firestore e o armazenamento de suas funções atribuídas.
- Além das pastas citadas acima, o arquivo 'main.js' traz a função de manipulação das hashs e a pasta 'test' contém os testes unitários utilizando Jest como framework
Para elaborar o design de nossa rede social, utilizamos o Figma para criar os protótipos de usabilidade e alta fidelidade, de modo que pudéssemos compartilhar com um grupo seleto e entender melhor as preferências do usuário. imagens Desta forma criamos o protótipo de alta fidelidade no Figma onde definimos quais seriam as cores e imagens utilizadas bem como a escolha visual dos elementos. Todo o design foi pensado na experiência do usuário, buscando que este tenha a sensação de imersão no tema, desde a escolha da logo até a paleta de cores utilizada. imagens
Para uma melhor experiência, foi desenvolvido um design responsivo que se adapta a diversos tipos de tela de diferentes dispositivos, sejam eles mobile ou desktop.
-
Usar VanillaJS.
-
UI: É responsivo.
-
Passa pelo linter.
-
Passa pelos testes (npm test).
-
Ser uma Single Pages Application (SPA).
-
Inclui histórias de usuário no README.md.
-
Autenticação com Firebase e uso do Firestore.
-
Inclui uma definição de produto clara e informativa no README.md.
-
Inclui rascunho da solução (protótipo de alta fidelidade) no README.md.
-
Atender ao CRUD (Create, Reade, Update and Delete) utilizando o Firebase.
-
Testes unitários cobrem um mínimo de 70% de statements, functions, lines e branches.
Cobertura de 100% de statements, functions, lines e branches.
Neste projeto, utilizamos diversas tecnologias e ferramentas para criar a rede social CBD Connect. Abaixo, destacamos algumas considerações técnicas relevantes:
- JavaScript Vanilla: Optamos por utilizar JavaScript Vanilla (também conhecido como JavaScript puro) para o desenvolvimento da aplicação. Essa decisão foi tomada para aprimorar o aprendizado e o domínio das funcionalidades fundamentais do JavaScript, sem depender de frameworks ou bibliotecas externas.
- Firebase e Firestore: O Firebase foi escolhido como o serviço de backend para gerenciar a autenticação de usuários e o armazenamento dos dados da aplicação. Utilizamos o Firestore, o banco de dados em tempo real do Firebase, para armazenar e recuperar as informações dos usuários, postagens e interações na rede social.
- Vite: O Vite foi utilizado como o bundler de desenvolvimento para o projeto. Ele fornece um ambiente de desenvolvimento rápido e eficiente, com suporte para carregamento instantâneo (hot module replacement) e uma configuração fácil.
- Jest: O Jest foi adotado como o framework de testes unitários para garantir a qualidade do código. Escrevemos testes para verificar o comportamento esperado de funções e componentes, buscando cobrir pelo menos 70% de statements, functions, lines e branches no código.
- Figma: Utilizamos o Figma para criar protótipos de alta fidelidade e definir o design e a usabilidade da aplicação. Esses protótipos nos ajudaram a obter feedback de forma antecipada e a melhorar a experiência do usuário antes de iniciar o desenvolvimento.
- Responsividade: A interface da aplicação foi projetada para ser responsiva, garantindo que os usuários tenham uma experiência agradável e funcional tanto em dispositivos móveis quanto em desktops.
- Git e Github: Utilizamos o Git para o controle de versões do projeto e o Github como plataforma de hospedagem e colaboração. Através do Git, pudemos trabalhar em equipe e gerenciar as alterações no código de forma eficiente.
Essas considerações técnicas são fundamentais para entender a estrutura e o funcionamento da rede social CBD Connect, bem como as ferramentas e tecnologias utilizadas para desenvolvê-la. Ao longo do projeto, enfrentamos desafios e aprendemos com as soluções encontradas, buscando sempre entregar uma aplicação de qualidade e funcionalidade para os usuários.