Introduction: Projeto Fila Fácil

Em nosso dia a dia vamos diversas vezes em locais onde é necessária uma gestão de senhas de clientes para organizar e agilizar atendimentos. Em alguns estabelecimentos podemos demorar alguns minutos ou até mesmo horas esperando por atendimento. Para minimizar o desgaste por essa espera, desenvolvemos nesse trabalho um sistema de gerenciamento de fila, onde o usuário, passa a ter o controle da sua senha na palma da mão. A ideia principal é que o cliente tenha o quadro de atendimento em seu celular com o tempo estimado até o seu atendimento e utilize esse período de espera podendo resolver outras coisas que julgar necessário.

A seguir será mostrado todo o processo de desenvolvimento do protótipo para essa solução, tais como o desenvolvimento do software, o hardware para exibição em tela e um vídeo demonstrativo. Os dados dos clientes e o controle da fila são todos jogados em nuvem através da plataforma da google chamada firebase. Essa plataforma permite que todos os usuários acessem informações da fila em tempo real. Para o desenvolvimento do protótipo, foram utilizados:

1. Placa DragonBoard 410c (Datasheet)

2. Android S9tudio (Site)

3. Firebase (Site)

Step 1: Sobre a DragonBoard 410C

Nesse projeto utilizamos a placa dragonboard 410c para transmitir para um vídeo o aplicativo com as informações do quadro interativo utilizando a porta HDMI dessa placa. Abaixo segue as principais especificações da placa.

A placa DragonBoard 410c é uma placa da 96boards baseada no processador da série Qualcomm Snapdragon 400.

Possui:

CPU: Quad-Core ARM® Cortex® A53 (32 e 64 bits)

Memória: 1GB LPDDR3 533MHz

Memória de armazenamento: 8GB

Slot para cartão SD

Wifi 802.11 b/g/n

Bluetooth 4.1

GPIO de 40 pinos de baixa velocidade

GPIO de 60 pinos de alta velocidade

Suporta sistemas operacionais tais como o Android 5.1 (Lollipop), Linux e Windows IoT Core.

Step 2: Preparando O Ambiente Android Studio

As figuras acima demonstram o passo a passo para criar um novo projeto do Android. Primeiro devemos clicar em iniciar novo projeto Android Studio, em seguida na próxima tela deve-se colocar o nome do projeto com o nome do pacote e o local onde irá salvá-lo. Na terceira tela é onde definimos o SDK (Kit de Desenvolvimento de software) mínimo que o nosso sistema irá suportar. Por fim selecionamos a nossa activity base e o nome da nossa activity principal.

Step 3: O Que É O Firebase

Firebase é uma plataforma de desenvolvimento de aplicações web e móveis, foi desenvolvida inicialmente pela startup Envolve em 2011 e em pouco tempo adquirida pela google no ano de 2014.

O firebase nos dias atuais permite armazenar e sincronizar dados em aplicações em tempo real, criar um sistema de autenticação de usuários, armazenar e disponibilizar arquivos, armazenar e sincronizar dados do aplicativo em escala global, entre diversas outras coisas.

Step 4: Integrando O Firebase Ao Projeto No Android Studio

A integração do firebase ao projeto android é bem simples, existem duas formas de se fazer essa integração, a primeira é através da própria interface do android studio que utiliza o assistente do firebase e pode ser feito no menu Ferramentas > Firebase para abrir a janela do Assistente em seguida é só seguir o passo a passo.

A segunda forma é fazendo tudo de maneira manual, que foi a maneira que escolhemos, e acima podemos ver as figuras com o tutorial que montamos para facilitar o entendimento. A primeira coisa que deve ser feita é acessar o site do firebase (https://firebase.google.com/) e entrar no menu "Sessão Iniciada" e fazer o cadastro. Feito isso, clique em "Aceder à Consola" e na janela seguinte clique no link "Adicionar Projeto".

Pronto, feito isso estamos prontos para criar o nosso projeto android studio na plataforma firebase, a janela de projeto já está aberta e devemos inserir nela o nome do nosso projeto, o país em que estamos e clicar em criar projeto. Uma nova janela se abrirá e nela devemos clicar em "Adicionar o Firebase ao seu Aplicativo Android". É nessa parte que "linkamos" de fato o firebase ao nosso projeto, inserindo o nome do nosso pacote (mesmo pacote utilizado na criação do projeto Android), e adicionando o nosso certificado SHA-1. Por fim seguimos o passo a passo final do próprio site do firebase para concluirmos a integração.

Step 5: Telas Da Aplicação

O principal objetivo na criação desse projeto é fazer uma plataforma simples e intuitiva para atingir o maior número de pessoas. A primeira tela é onde o usuário faz o login ou realiza um novo cadastro caso ainda não o tenha feito, a segunda tela é onde o usuário acessa depois de realizar o login, nela podemos ver um botão onde pode-se realizar o pedido de uma nova senha e acessar o quadro interativo de senhas. Por ser apenas um protótipo, o aplicativo fornece apenas um controle básico das senhas, ou seja, funciona somente como um gestor simples dos clientes. A ideia é continuar evoluindo para que o cliente possa saber o tempo médio de atendimento por cada tipo de serviço e enviar uma notificação ao usuário quando estiver próximo da sua vez. A última tela é onde ocorre a gestão pelo atendente, nela existe a separação entre clientes normais e clientes com prioridades, assim o estabelecimento consegue criar filas alternativas para diferentes tipos de clientes.

Step 6: Trechos De Códigos

A primeira figura mostra o trecho do código de cadastro de novos usuários com o auxílio do Firebase, onde o email e a senha do usuário é guardada em uma classe chamada "usuarios" e recuperada no momento da autenticação. Em seguida é possível ver a criptografia que é feita usando Base64 para tentar proteger melhor os dados dos usuários.

A segunda imagem mostra a validação do email e senha do usuário na tela de login também utilizando o Firebase como auxílio, se tudo ocorrer com sucesso chama a função para Abrir a Tela Principal, que é a tela onde o usuário solicita uma senha.

A terceira figura mostra o código responsável por apresentar a lista de clientes que solicitaram uma senha para os atendentes, que por sua vez realizarão as chamadas de cada cliente. Nesta figura vemos a busca dos dados no firebase e a montagem da fila dentro de uma ArrayList e mostrada na tela do celular em tempo real.

A última imagem mostra a recuperação do JSON (formatação de troca de dados) usado no quadro interativo os dados das chamadas.

Step 7: Vídeo Demonstrativo