- 1. Desafio
- 2. A aplicação
- 3. Histórias de usuários
- 4.Planejamento
- 5. Desenvolvimento
- 6. Interface Final
- 7. Releases
- 8. Tecnologias
- 9. Agradecimentos
- 10. Desenvolvedoras
Chegamos ao fim do bootcamp da Laboratória, e, como um último teste, recebemos da empresa Avanade um desafio.
Segurança é um problema cada vez maior hoje em dia e garanti-la em meios não digitais pode ser ainda mais complexo.
Hoje com o aumento da pandemia, quem quer ficar em filas enormes, passando por demorados processos de autenticação manuais, que quase sempre são assistidos por dispositivos ou acessórios para garantir a identificação?
Em um mundo cada vez mais digital, conseguimos aumentar experiência dos usuários fazendo sua identificação apenas por Reconhecimento facial.
Para isso, devemos criar uma aplicação web para cadastro e identificação dos usuários, utilizando a Microsoft Azure Face API.
Com o desafio em mãos iniciamos o processo de identificar um problema, chegamos em uma questão que está muito ligado o momento que estamos vivendo hoje.
A pandemia aumentou muito a compra através da internet e com isso o volume de entregas. Muitas vezes não estamos presentes em nossas residências para recebe-las e não disponibilizamos de portaria 24 horas, com isso utilizamos o endereço comercial para receber nossas encomendas. O que também acaba não sendo uma experiência 100% agradável, uma vez que o entregador muitas vezes não pode esperar, a portaria do condomínio não tem autorização para receber, e você não sabendo o exato horário que será feita a entrega pode estar ocupado no momento.
Com isso idealizamos o Locker Face, um dispositivo para ser utilizado em lockers (para empresas em prédios corporativos ou condomínios residenciais sem portaria 24 horas), onde o funcionário que possuir uma entrega no Locker poderá fazer a retirada do mesmo, destravando o armário através da identificação de sua face. Facilitando a logística do entregador que não mais precisará esperar o funcionário na portaria para fazer a entrega, e o recebedor que poderá fazer a retirada a qualquer hora, com total segurança.
A partir da idealização do projeto podemos criar as Histórias de Usuários:
✍️ História de usuário 1: Eu, como entregador, ao chegar ao local quero poder cadastrar a encomenda no Locker Face e o mesmo liberar o armário de acordo com o tamanho da encomenda.
✍️ História de usuário 2: Eu, como destinatário de uma encomenda, quero poder cadastrar minha face para receber minhas encomendas.
✍️ História de usuário 3: Eu, como destinatário de uma encomenda, quero poder liberar o armário que está minha encomenda pela reconhecimento de minha face.
✍️ História de usuário 4: Eu, como destinatário de uma encomenda, quero poder liberar o armário que está minha encomenda pelo código de rastreio.
Para conseguir entregar todas as funcionalidades do projeto, organizamos todo o fluxo de desenvolvimento do projeto pelo método Kanban no Trello.
Dessa forma, definimos:
🌱 MVP
🤙 Critérios mínimos de aceitação
🏷️ Padronizações do código (Code Style)
⚒️ Divisão de tarefas
🔐 Para merge no repositório (main), somente após code review para revisão em pares e aprovação da reviewer
Você pode acessar nosso quadro aqui ou clicar na imagem para ampliar
Iniciamos o desenvolvimento da aplicação com um protótipo de baixa fidelidade e ter um norte para os próximos:
🔎 Clique na imagem para ampliar
A partir do desenho acima iniciamos o desenvolvimento do protótipo de média fidelidade através da ferramenta
🔎 Clique nas imagens para ampliar
A prototipagem definitiva foi desenvolvida em conjunto com os mentores da Avanade para aprovação do tema e paleta de cores escolhidas.
Você pode acessar nosso protótipo no Figma clicando aqui.
🔎 Clique nas imagens para ampliar
🛠️ Com a identidade visual definida, começamos a desenvolver a interface. Os principais objetivos foram definidos logo de início:
🧾 A aplicação foi desenvolvida como SPA (single-page application), para que o usuário tenha a experiência similar à de um aplicativo para desktop.
🧩 Utilizamos React JS para componentizar todo o site. Isso mantém a aplicação com alto desempenho e também permite que os componentes sejam reutilizados, gerando um código de fácil manutenção por qualquer desenvolvedor.
✨ Instalamos o ESLint na aplicação para manter o código padronizado e pronto para ser testado.
⚙️ Microsoft Azure Face API para fazer o cadastro e a validação dos rostos.
🛡️ Como forma de complemento da aplicação, foi necessário a utilização de uma segunda API. Inicialmente realizamos um mock para entregar a aplicação com todas as implementações. Esse mock pode ser alterado por uma API já existente do Locker.
Apresentamos a interface final da aplicação e todas as suas funcionalidades:
🔎 Clique na imagem para ampliar
A aplicação está completa e funcional, mas sempre é possível melhorar.
Nossas próximas features são:
- Dupla validação caso a limiar de confiança (confidenceThreshold) com a face detectada for entre 60% e 90%.
- Dupla validação para encomendas cadastradas com nomes incorretos ou incompletos.
- Feedback de postagem no Locker para o cliente.
- Feedback de retirada da postagem pelo cliente para o entregador.
- Melhoria na usabilidade do Locker pelo entregador.
- Aplicar uma moldura facial para orientar o usuário na validação da face.
- Adição de mais uma layer de segurança para prevenir desbloqueio por foto.
- Face Recognition: Reconhecimento automático da face mediante aproximação do dispositivo.
Essa lista pode aumentar de acordo com a necessidade do cliente.
Utilizamos as seguintes ferramentas:
Code:
Planejamento:
Fique à vontade para rodar o projeto localmente. É bem simples!
1 - Clone o repositório para seu local
2 - Abra o terminal e instale o NPM
npm install3 - Entre na pasta raiz do projeto e digite:
npm start
Enjoy 👊
Inicialmente gostaríamos de agradecer a Avanade, pela confiança e pelo apoio dado durante todo o tempo de hackaton. Nossa equipe ficou extasiada com o desafio proposto por vocês.
Gostaríamos de agradecer também a Laboratória por estar nos apoiando nessa nova jornada.
Não menos importante gostaríamos de agradecer a todas as colegas de código, em especial a Akemi Mitsueda, Caroline Costa e Gabriela Silva.
🏆 Face Locker foi orgulhosamente desenvolvido em 3 dias por 6 mulheres que formaram a squad da Avanade, que conquistou o 1º lugar do Talent Fest 2021 do bootcamp da Laboratória.
Veja nossa apresentação e de todas as nossas colegas no vídeo abaixo:
Se você ficou com alguma dúvida, tem sugestões ou quer apenas nos conhecer melhor, por favor, entre em contato :)
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
  |
|
|
|
|
|