ToiletFY: Aplicativo de Geolocalização de Banheiros

Prévia do material em texto

UNIVERSIDADE ESTÁCIO DE SÁ 
 
 
Eduardo Oliveira Sales Azevedo 
Lucas Martins dos Santos e Silva 
Victor Lopes da Motta da Silva 
 
 
 
 
 
 
ToiletFY 
 
 
 
 
 
 
 
 
 
 
 
Rio de Janeiro 
Maio de 2020
 
 
 
Eduardo Oliveira Sales Azevedo 
Lucas Martins dos Santos e Silva 
Victor Lopes da Motta da Silva 
 
 
 
 
 
 
ToiletFY 
 
 
 
Trabalho de conclusão de curso 
apresentado à Universidade Estácio de Sá 
como requisito parcial à obtenção do grau 
de Bacharel em Sistemas de Informação. 
Orientador Prof. M.Sc. Rodrigo Augusto 
Barros Pereira Dias. 
 
 
 
 
 
 
 
Rio de Janeiro 
Maio de 2020 
 
 
Eduardo Oliveira Sales Azevedo 
Lucas Martins dos Santos e Silva 
Victor Lopes da Motta da Silva 
 
 
 
ToiletFY 
 
 
Trabalho de conclusão de curso 
apresentado à Universidade Estácio de Sá 
como requisito parcial à obtenção do grau 
de Bacharel em Sistemas de Informação. 
Orientador Prof. M.Sc. Rodrigo Augusto 
Barros Pereira Dias. 
 
 
 
Aprovada em 26 de maio de 2020. 
 
 
 
BANCA EXAMINADORA 
 
 
 
________________________________________ 
Prof. Esp. Antônio Francisco da Silva Junior 
 
 
________________________________________ 
Prof. M.Sc. Rodrigo Augusto Barros Pereira Dias 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Às nossas famílias e 
amigos com carinho 
 
 
AGRADECIMENTOS 
 
 Dedicamos este trabalho em primeiro lugar a Deus que iluminou o nosso caminho, nos 
deu força e coragem durante toda essa longa e difícil caminhada. 
Aos nossos pais e familiares que nos apoiaram. 
Aos nossos amigos, em especial a Milena Silva e Sabrina Cavalcante por nos ajudar 
com suas ideias, compreensão e em momentos de dificuldade e aos colegas que fizemos ao 
longo dessa jornada na universidade. 
E por último, mas não menos importante, aos professores e professoras do curso de 
Sistemas de Informação e de outras áreas, que nos passaram conhecimentos que foram 
importantes na nossa vida acadêmica e que também serão importantes na vida profissional. 
Em especial, ao Prof. Raul Queiros que nos apoiou em um momento de dificuldade, por 
disponibilizar seu tempo para nos ajudar com suas dicas e orientação. E ao Prof. Rodrigo Dias 
por nos orientar no desenvolvimento deste trabalho. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
“Às vezes, são as pessoas que ninguém imagina, que fazem as 
coisas que ninguém pode imaginar.” 
(Alan Turing – O Jogo da Imitação) 
 
RESUMO 
 
 Encontrar um banheiro público, limpo, organizado e acessível constitui-se como uma 
problemática para a maioria dos indivíduos. Sobretudo para turistas, motoristas de aplicativos 
que tendem a dirigir por áreas desconhecidas e pessoas com síndromes que afetam o trato 
intestinal, como a doença de Crohn. Pensando nesses fatores, desenvolveu-se como solução 
um sistema web e mobile, que a partir da localização dos usuários, pode informar onde há 
banheiros próximos para uso. Ao utilizar o ToiletFY, o usuário, além de consultar a 
localização dos banheiros e suas avaliações, também poderá registrar novos banheiros, obter 
informações sobre a qualidade, se necessita pagamento para uso, se o banheiro é adaptado, se 
possui fraldário e horário de funcionamento do mesmo. 
Para o desenvolvimento do aplicativo, as linguagens de programação HTML, CSS, 
Javascript foram utilizadas com o auxílio da API do Google Maps, Node.js para o lado do 
servidor, MySQL para o banco de dados relacional e Apache Cordova para a aplicação 
mobile. Com a realização deste trabalho, foi possível entender como uma tarefa simples, 
como encontrar um banheiro, pode ser muito importante e crucial para algumas pessoas. 
 
Palavras Chave: Banheiro, Aplicativo, Geolocalização 
 
ABSTRACT 
 
Finding a clean and accessible public toilet can be a major difficulty for most people, 
especially for tourists, application drivers who mostly drive through unknown areas and 
people affected by syndromes which affect the intestinal tract, such as Crohn's disease. 
Thinking about these facts a solution was developed, web and mobile system that, through the 
user's location, it is possible to inform where the nearest bathrooms are. When using 
ToiletFY, the user, in addition to consulting the location of the bathrooms and their 
evaluations, will also be able to register new bathrooms, obtain information about the quality, 
whether it is necessary to pay to use it or not, if there are adaptations for those who need, if 
the bathroom has a baby changing station and opening hours. 
For the development of ToiletFY, the programming languages HTML, CSS, and 
Javascript were used with the help of the Google maps API, Node.js for the server-side, 
MySQL for the relational database and Apache Cordova for the mobile application. With the 
accomplishment of this work it was possible to understand how something simple, like 
finding a bathroom, can become crucial in moments of need for some people. 
 
Keywords: Bathroom, Application, Geolocation 
 
 
SUMÁRIO 
1. INTRODUÇÃO .......................................................................................................................................... 10 
1.1. SOLUÇÃO PROPOSTA ........................................................................................................................... 10 
1.2. TECNOLOGIA ....................................................................................................................................... 10 
2. DOCUMENTAÇÃO TÉCNICA ............................................................................................................... 11 
2.1. REQUISITOS FUNCIONAIS WEB ............................................................................................................ 11 
2.2. REQUISITOS FUNCIONAIS ANDROID .................................................................................................... 11 
2.3. REQUISITOS NÃO FUNCIONAIS ............................................................................................................ 12 
2.4. DIAGRAMA CONCEITUAL DE CLASSES ................................................................................................ 13 
2.5. DIAGRAMA DE CASOS DE USO ............................................................................................................ 14 
2.6. DIAGRAMA CONCEITUAL DE DADOS ................................................................................................... 15 
2.7. DIAGRAMA LÓGICO DE DADOS ........................................................................................................... 16 
2.8. DIAGRAMA DE ATIVIDADES ................................................................................................................ 17 
3. DOCUMENTAÇÃO DOS CASOS DE USO ........................................................................................... 18 
3.1. DESCRIÇÃO DETALHADA DOS CASOS DE USO ..................................................................................... 18 
3.2. TELAS DO SISTEMA ANDROID ............................................................................................................. 20 
3.2.1. Tela Inicial..................................................................................................................................... 20 
3.2.2. Tela ao Clicar no Botão de Emergência e no Menu de Funções ................................................... 21 
3.2.3. Tela Adicionar Banheiro ............................................................................................................... 22 
3.2.4. Tela Reportar Problemas e no Menu de Funções ......................................................................... 23 
3.3. TELAS DO SISTEMA WEB .....................................................................................................................24 
3.3.1. Tela Inicial..................................................................................................................................... 24 
3.3.2. Tela Inicial Parte 2 ........................................................................................................................ 25 
3.3.3. Tela Inicial Parte 3 ........................................................................................................................ 26 
3.3.4. Tela ao Clicar no Botão Emergência ............................................................................................ 27 
3.3.5. Tela Adicionar Banheiro ............................................................................................................... 27 
3.3.6. Tela Reportar Problemas .............................................................................................................. 29 
4. FERRAMENTAS DE APOIO À DECISÃO ........................................................................................... 30 
4.1. DIAGRAMA DE IMPLANTAÇÃO ............................................................................................................ 30 
4.2. CRONOGRAMA .................................................................................................................................... 31 
4.3. ORÇAMENTO ....................................................................................................................................... 31 
4.3.1. Software ......................................................................................................................................... 31 
4.3.2. Hardware ....................................................................................................................................... 32 
4.3.3. Peopleware .................................................................................................................................... 32 
4.3.4. Total do Orçamento ....................................................................................................................... 33 
4.4. MATRIZ S.W.O.T. ............................................................................................................................... 33 
5. PROTÓTIPO ............................................................................................................................................. 34 
6. CONCLUSÃO ............................................................................................................................................ 37 
6.1. TRABALHOS FUTUROS ......................................................................................................................... 37 
7. REFERÊNCIAS ......................................................................................................................................... 38 
8. ANEXOS ..................................................................................................................................................... 39 
8.1. MODELO FÍSICO DE DADOS ................................................................................................................. 39 
 
 
 
 
10 
 
1. INTRODUÇÃO 
Encontrar um banheiro público, limpo, organizado e acessível constitui-se como uma 
problemática para a maioria dos indivíduos. Sobretudo para turistas, motoristas de aplicativos 
que tendem a dirigir por áreas desconhecidas e pessoas com síndromes que afetam o trato 
intestinal, como a doença de Crohn. 
1.1. Solução proposta 
Construir um sistema, através de uma interface web, que também irá se aplicar para 
sistemas Android, através de um aplicativo, que com o acesso a localização dos usuários é 
possível informar: locais próximos onde há banheiros para uso, suas avaliações, se necessitam 
de pagamento para uso, se são adaptados, se há fraldário, horário de funcionamento ou se 
possuem alguma observação sobre o uso. 
O usuário poderá consultar o mapa, cadastrar banheiros e reportar problemas 
desfrutando de uma interface simples e de fácil entendimento, na qual será solicitado o 
preenchimento de um formulário com as informações do banheiro, como: nome do local, 
endereço, a avaliação em relação a satisfação do usuário. Com funcionalidades de localização 
através do GPS, o cadastramento se torna ainda mais rápido e prático, facilitando assim a 
experiência do usuário com o sistema. 
1.2. Tecnologia 
O trabalho foi desenvolvido utilizando a linguagem de modelagem UML para 
modelar os diagramas de acordo com as necessidades do sistema, como diagrama de casos de 
uso e diagrama de classe. 
O sistema possui como atributos: o nome do local que o banheiro se encontra, a 
avaliação, informa se tem fraldário, se é adaptado, se necessita pagamento para uso e horário 
de funcionamento do local do banheiro. 
O desenvolvimento foi feito em HTML, CSS, JavaScript, Node.js para o lado do 
servidor, MySQL para banco de dados relacional e Apache Cordova para construir a 
aplicação mobile. Também foi utilizada a API do Google Maps para carregamento do mapa 
com o auxílio da biblioteca places para a possibilidade de pesquisar locais no mapa. Os locais 
com banheiro são carregados para o mapa a partir da API Banheiros. 
 
11 
 
2. DOCUMENTAÇÃO TÉCNICA 
2.1. Requisitos Funcionais Web 
Código: RF001 Nome: Acesso à internet 
Prioridade: (x) Essencial ( ) Importante ( ) Desejável 
Descrição: 
Para a funcionalidade do sistema é essencial que o usuário tenha acesso 
à internet. 
 
Código: RF002 Nome: Localização ativada 
Prioridade: (x) Essencial ( ) Importante ( ) Desejável 
Descrição: 
Para o usuário se localizar e procurar algum banheiro no mapa é 
essencial que a sua localização esteja ativada. 
 
Código: RF003 Nome: Requer navegador web 
Prioridade: (x) Essencial ( ) Importante ( ) Desejável 
Descrição: 
Para a utilização do sistema web é essencial que o usuário tenha algum 
navegador web instalado em seu computador ou em seu smartphone. 
2.2. Requisitos Funcionais Android 
Código: RF004 Nome: Requer Android 5.0 ou superior 
Prioridade: (x) Essencial ( ) Importante ( ) Desejável 
Descrição: 
Para a utilização do aplicativo Android é essencial que o usuário tenha 
instalado em seu smartphone o Android na sua versão 5.0 ou superior. 
 
Código: RF005 Nome: GPS 
Prioridade: (x) Essencial ( ) Importante ( ) Desejável 
Descrição: 
Para a funcionalidade do aplicativo é essencial que o usuário tenha o 
GPS ativado em seu smartphone. 
 
Código: RF006 Nome: Conexão com a internet 
Prioridade: (x) Essencial ( ) Importante ( ) Desejável 
Descrição: 
Para a funcionalidade do aplicativo é essencial que o usuário tenha 
acesso à internet. 
 
 
12 
 
2.3. Requisitos Não Funcionais 
Código: RNF001 Nome: Necessidade de banheiro próximo cadastrado 
Descrição: 
Para a funcionalidade botão de emergência operar corretamente é 
necessário que tenha algum banheiro cadastrado no mapa próximo da 
localização do usuário, caso contrário, não irá funcionar corretamente. 
O aplicativo irá informar que não há banheiro próximo cadastrado. 
 
Código: RNF002 Nome: Uso da linguagem JavaScript e interpretador Node.js 
Descrição: 
O sistema deve ser desenvolvido na linguagem JavaScript e deve ser 
usado o Node.js como interpretador para o lado do servidor. 
 
Código: RNF003 Nome: Design Responsivo 
Descrição: 
A interface deve prover a possibilidade do sistema ser usado por 
diferentes dispositivos, computadores, celulares e tablets. 
 
Código: RNF004 Nome: Interface Simples 
Descrição: 
A interface deve ser simples e intuitiva, para melhor experiência do 
usuário com o sistema. 
 
13 
 
2.4. Diagrama Conceitual de Classes 
 
Figura 1 – Diagrama conceitual de classe. 
14 
 
2.5. Diagrama de Casos de Uso 
 
Figura 2 – Diagrama de casos de uso. 
 
15 
 
2.6. Diagrama Conceitual de Dados 
 
Figura 3 – Diagrama conceitual de dados. 
16 
 
2.7. Diagrama Lógico de Dados 
 
Figura 4 – Diagrama lógicode dados. 
 
17 
 
2.8. Diagrama de Atividades 
 
Figura 5 – Diagrama de atividades. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18 
 
3. DOCUMENTAÇÃO DOS CASOS DE USO 
3.1. Descrição detalhada dos Casos de Uso 
Caso de Uso: Solicitação de novo banheiro 
Ator(es): Usuário 
Descrição: 
Caso o usuário queira cadastrar um novo banheiro no mapa, ele poderá 
realizar esta operação através desse caso de uso. 
Curso Típico dos Eventos 
Nº Ações 
1 Clicar no botão ”Adicionar Banheiro” 
2 Preencher todos os dados corretamente 
3 
Banheiro é cadastrado no banco de dados - <<include Adicionar marcador 
no mapa>> 
4 
Marcador do banheiro aparece no mapa na localização exata que foi 
informado 
 --- Fim do caso de uso -- 
 
Caso de Uso: Reportar Erro 
Ator(es): Usuário 
Descrição: 
Caso o usuário queira reportar algum erro em algum banheiro no mapa, ele 
poderá fazer esta operação através deste caso de uso. 
 Curso Típico dos Eventos 
Nº Ações 
1 Clicar no botão “Reportar Erros” 
2 Preencher todos os dados corretamente 
3 Erro é cadastrado no banco de dados 
 --- Fim do caso de uso -- 
 
 
 
 
 
 
19 
 
Caso de Uso: Localizar Banheiro 
Ator(es): Alexa e Usuário 
Descrição: 
Ao utilizar a funcionalidade da Alexa no sistema, ela tentará localizar o 
banheiro mais próximo da localização do usuário e informá-lo. 
Curso Típico dos Eventos 
Nº Ações 
1 Usuário solicita a funcionalidade da Alexa por comando de voz 
2 Alexa utiliza a sua localização - << include Usar localização>> 
3 Alexa informa qual é o banheiro mais próximo 
 --- Fim do caso de uso -- 
 
Caso de Uso: Visualizar mapa 
Ator(es): Usuário e Sistema 
Descrição: 
Ao acessar o sistema web ou Android, o sistema automaticamente lista 
para o usuário todos os banheiros cadastrados no mapa. 
Curso Típico dos Eventos 
Nº Ações 
1 Usuário abre o aplicativo Android ou o website via navegador web 
2 Sistema utiliza a sua localização - << include Usar localização>> 
3 
Sistema aproxima a visualização do mapa para o usuário na sua 
localização atual 
4 Sistema lista todos os banheiros no mapa << include Listar Banheiros>> 
 --- Fim do caso de uso -- 
 
 
 
 
 
 
 
20 
 
3.2. Telas do Sistema Android 
3.2.1. Tela Inicial 
 
Figura 6 – Tela inicial no sistema Android. 
 
1) Menu de Funções – Ao clicar no menu o usuário poderá adicionar e reportar algum 
problema no banheiro. 
2) Barra de Pesquisa – Ao clicar na barra irá aparecer uma linha para o usuário digitar 
algum bairro, rua, entre outros dados em relação ao mapa. 
3) Recarregar – Ao clicar neste botão a página será recarregada. 
4) Botão de Emergência – Ao clicar neste botão o sistema irá mostrar qual é o banheiro 
mais próximo da localização do usuário, abrindo uma mensagem na tela com o endereço. 
5) Botão de Localização – Ao clicar neste botão o sistema irá exibir a localização atual 
do usuário no mapa em tempo real. 
21 
 
6) Google Street View – Ao arrastar o bonequinho para qualquer local do mapa, o 
usuário através da API do Google irá desfrutar da funcionalidade Google Street View no local 
que deseja. 
7) Aumentar Zoom – Ao clicar neste botão o usuário poderá aumentar o zoom do mapa. 
8) Diminuir Zoom – Ao clicar neste botão o usuário irá poder diminuir o zoom do mapa. 
3.2.2. Tela ao Clicar no Botão de Emergência e no Menu de Funções 
 
Figura 7 – Tela após clicar no botão de emergência e no menu de funções. 
 
1) Botão OK – Ao clicar neste botão, o usuário será direcionado para o mapa, que se 
aproximará automaticamente do local em que o banheiro mencionado na mensagem está 
localizado. 
2) Adicionar Banheiro – Ao clicar neste botão, o usuário irá para a tela de adicionar um 
banheiro. 
3) Reportar Problemas – Ao clicar neste botão, o usuário irá para a tela de reportar 
problemas. 
22 
 
3.2.3. Tela Adicionar Banheiro 
 
Figura 8 – Tela adicionar banheiro. 
 
1) Campo Nome – O usuário deverá preencher com o seu nome. 
2) Campo Nome do Local – O usuário deverá preencher com o nome do local. 
3) Campo Endereço – Neste campo o usuário não poderá escrever o seu endereço, ele 
deverá clicar no botão de localização ao lado para usar a sua localização atual. 
4) Procurar no Mapa – Caso o banheiro que o usuário queira cadastrar não seja o que 
está na sua localização atual, ele deverá clicar neste botão e localizar no mapa do Google 
Maps a localização exata do banheiro. 
5) Campo Pagamento – Ao clicar nesta box, o usuário irá informar que necessita pagar 
algum valor para usá-lo. 
6) Campo PcD – Ao clicar nesta box, o usuário irá informar que está adaptado para 
pessoas com deficiência. 
7) Campo Fraldário – Ao clicar nesta box, o usuário irá informar que possui fraldário. 
23 
 
8) Campo Horário de Funcionamento – Ao clicar neste campo o usuário irá informar o 
horário de funcionamento do banheiro. 
9) Campo Avaliação – Neste campo o usuário deverá informar qual foi a sua avaliação 
geral do banheiro que vai de 1 até 5, sendo 1 muito insatisfeito e 5 muito satisfeito. 
10) Campo Observação – Ao clicar neste campo o usuário poderá escrever alguma 
observação sobre o banheiro. 
11) Botão Enviar – Ao clicar neste botão, as informações serão enviadas para o banco. 
3.2.4. Tela Reportar Problemas e no Menu de Funções 
 
Figura 9 – Tela reportar problema e no menu de funções. 
1) Campo Nome – O usuário deverá preencher com o seu nome. 
2) Campo Nome do Local – O usuário deverá preencher com o nome do local. 
3) Campo Endereço – Neste campo o usuário não poderá escrever o seu endereço, ele 
deverá clicar no botão de localização ao lado para usar a sua localização atual. 
24 
 
4) Procurar no Mapa – Caso o banheiro que o usuário queira cadastrar não seja o que 
está na sua localização atual, ele deverá clicar neste botão e localizar no mapa do Google 
Maps a localização exata do banheiro. 
5) Campo Categoria – Ao clicar neste campo o usuário poderá escolher qual é a 
categoria do problema apresentado. 
6) Campo Descrição – Ao clicar neste campo o usuário poderá informar a descrição 
exata do problema que ele deseja reportar. 
7) Botão Enviar – Ao clicar neste botão, as informações serão enviadas para o banco. 
8) Botão Home – Ao clicar neste botão o usuário irá voltar para a tela inicial do sistema. 
9) Adicionar Banheiros – Ao clicar neste botão, o usuário irá para a tela de adicionar 
um banheiro. 
3.3. Telas do Sistema Web 
3.3.1. Tela Inicial 
 
Figura 10 – Tela inicial da interface web. 
25 
 
3.3.2. Tela Inicial Parte 2 
 
Figura 11 – Tela inicial da interface web. 
1) Barra de Pesquisa – Ao clicar na barra irá aparecer uma linha para o usuário digitar 
algum bairro, rua, entre outros dados em relação ao mapa. 
2) Adicionar Banheiro – Ao clicar neste botão, o usuário irá para a tela de adicionar um 
banheiro. 
3) Reportar Problemas – Ao clicar neste botão, o usuário irá para a tela de reportar 
problemas. 
4) Recarregar – Ao clicar neste botão a página será recarregada. 
 
26 
 
3.3.3. Tela Inicial Parte 3 
 
Figura 12 – Tela inicial da interface web. 
1) Botão de Emergência – Ao clicar neste botão o sistema irá mostrar qual é o banheiro 
mais próximo da localização do usuário, abrindo uma mensagem na tela com o endereço. 
2) Botão de Localização – Ao clicar neste botão o sistema irá exibir a localização atual 
do usuário no mapa em tempo real. 
3) Google Street View – Ao arrastar o bonequinho para qualquer local do mapa, o 
usuário através da API do Google irá desfrutar da funcionalidade Google Street View no local 
que deseja. 
4) Aumentar Zoom – Ao clicar neste botão o usuário poderá aumentar o zoom do mapa. 
5) Diminuir Zoom – Ao clicar neste botão o usuário irá poder diminuir o zoom do mapa. 
27 
 
3.3.4. Tela ao Clicar no Botão Emergência 
 
Figura 13 – Tela ao clicar o botão emergência. 
1) Botão OK – Ao clicar neste botão, o usuário será direcionado para o mapa, que se 
aproximará automaticamente do local emque o banheiro mencionado na mensagem está 
localizado. 
3.3.5. Tela Adicionar Banheiro 
 
Figura 14 – Tela adicionar banheiro da interface web. 
28 
 
1) Botão Home – Ao clicar neste botão o usuário irá voltar para a tela inicial do sistema. 
2) Campo Nome – O usuário deverá preencher com o seu nome. 
3) Campo Nome do Local - O usuário deverá preencher com o nome do local. 
4) Campo Endereço – Neste campo o usuário não poderá escrever o seu endereço, ele 
deverá clicar no botão de localização ao lado para usar a sua localização atual. 
5) Procurar no Mapa – Caso o banheiro que o usuário queira cadastrar não seja o que 
está na sua localização atual, ele deverá clicar neste botão e localizar no mapa do Google 
Maps a localização exata do banheiro. 
6) Campo Pagamento – Ao clicar nesta box, o usuário irá informar que necessita pagar 
algum valor para usá-lo. 
7) Campo PcD – Ao clicar nesta box, o usuário irá informar que está adaptado para 
pessoas com deficiência. 
8) Campo Fraldário – Ao clicar nesta box, o usuário irá informar que possui fraldário. 
9) Campo Horário de Funcionamento – Ao clicar neste campo o usuário irá informar o 
horário de funcionamento do banheiro. 
10) Campo Avaliação – Neste campo o usuário deverá informar qual foi a sua avaliação 
geral do banheiro que vai de 1 até 5, sendo 1 muito insatisfeito e 5 muito satisfeito. 
11) Campo Observação – Ao clicar neste campo o usuário poderá escrever alguma 
observação sobre o banheiro. 
12) Botão Enviar – Ao clicar neste botão, as informações serão enviadas para o banco. 
 
29 
 
3.3.6. Tela Reportar Problemas 
 
Figura 15 – Tela reportar erros da interface web. 
1) Campo Nome – O usuário deverá preencher com o seu nome. 
2) Campo Nome do Local – O usuário deverá preencher com o nome do local. 
3) Campo Endereço – Neste campo o usuário não poderá escrever o seu endereço, ele 
deverá clicar no botão de localização ao lado para usar a sua localização atual. 
4) Procurar no Mapa – Caso o banheiro que o usuário queira cadastrar não seja o que 
está na sua localização atual, ele deverá clicar neste botão e localizar no mapa do Google 
Maps a localização exata do banheiro. 
5) Campo Categoria – Ao clicar neste campo o usuário poderá escolher qual é a 
categoria do problema apresentado. 
6) Campo Descrição – Ao clicar neste campo o usuário poderá informar a descrição 
exata do problema que ele deseja reportar. 
7) Botão Enviar – Ao clicar neste botão, as informações serão enviadas para o banco. 
 
 
30 
 
4. FERRAMENTAS DE APOIO À DECISÃO 
4.1. Diagrama de Implantação 
 
Figura 16 – Diagrama de instalação. 
Os três primeiros itens do diagrama (lido de cima para baixo) são representados pelos 
smartphones (apenas Android), Computadores / Notebooks e a Alexa, a assistente virtual 
desenvolvida pela Amazon, possui capacidade de interagir por voz, tocar músicas, fazer listas 
de tarefas, configurar alarmes, prover informações sobre tráfego, temperatura, entre outras 
informações, além de controlar sistemas e aparelhos inteligentes conectados. 
31 
 
Ao se comunicarem com o dispositivo GPS, quando conectados com a internet, terão 
acesso à API banheiros, que está hospedada em um servidor Node.js, que automaticamente irá 
se comunicar com banco de dados MySQL lhe retornando todos os banheiros cadastrados no 
sistema. 
4.2. Cronograma 
 
Figura 17 – Cronograma do trabalho. 
4.3. Orçamento 
4.3.1. Software 
NOME DESCRIÇÃO QUANT. VALOR UNIT. VALOR 
Visual Studio Code
Editor de código-fonte 
desenvolvido pela Microsoft 1 Gratuito Gratuito
MySQL Workbench
Ferramenta visual de design de 
banco de dados 1 Gratuito Gratuito
Android Studio
 Ambiente de desenvolvimento 
integrado para desenvolver para 
a plataforma Android
1 Gratuito Gratuito
Office 365
 Versão por assinatura da suíte 
de aplicativos para 
escritório/produtividade 
Microsoft Office
1 Gratuito Gratuito
Total 4 R$ 0
SOFTWARE
 
Figura 18 – Total gasto com software. 
32 
 
4.3.2. Hardware 
NOME DESCRIÇÃO QUANT. VALOR UNIT. VALOR 
Domínio Registro de dominio 1 R$ 40,00 R$ 40,00
Hospedagem Heroku
Hospedagem do aplicativo na 
web 1 Gratuito Gratuito
Servidor Node.JS + SGBD
Hospedagem do servidor com a 
API banheiros e do SGBD 
MySQL
1 R$ 8,50 R$ 8,50
Total 3 R$ 48,50
HARDWARE
Figura 19 – Total gasto com hardware. 
4.3.3. Peopleware 
NOME DESCRIÇÃO HORAS VALOR HORAS VALOR 
Desenvolvedor Full Stack
Desenvolvedor atua em 
backend (servidor, banco de 
dados, modelagem, 
programação, estruturação de 
dados e implementação) e 
frontend (interface, UX).
496 R$ 28,43 R$ 14.101,28
Analista de sistemas
Analisa, documenta, projeta, 
implementa, testa e gerencia os 
sistemas de informações 
necessários para os negócios de 
seus clientes ou empregadores.
424 R$ 23,41 R$ 9.925,84
Testador de Software
Os testadores de software têm 
tarefas específicas desde o 
desenvolvimento, testes e 
lançamento para produção
216 R$ 9,37 R$ 2.023,92
Total 1136 R$ 26.051,04
PEOPLEWARE
Figura 20 – Total gasto com peopleware. 
O valor hora do Analista e do Desenvolvedor mencionados no orçamento foi baseado 
no site GuiadaCarreira, do Testador de Software no site Vagas.com, acessados no dia 14 de 
abril de 2020. Para o analista foi calculado o salário mensal inicial de R$ 4.120,00, para o 
desenvolvedor FullStack o salário mensal inicial de R$ 5.003,00 e para o Testador de 
Software salário mensal inicial de R$ 1.650,00. 
33 
 
A partir desse ponto inicial, consegue-se calcular o valor hora dos colaboradores para 
definir-se o custo com peopleware durante o trabalho, sendo usado como parâmetro 22 dias 
úteis por mês. 
4.3.4. Total do Orçamento 
NOME DESCRIÇÃO VALOR 
Software
Conjunto de componentes lógicos de um computador ou 
sistema de processamento de dados; programa, rotina ou 
conjunto de instruções que controlam o funcionamento de um 
computador
R$ 0,00
Hardware
Componentes eletrônicos, como por exemplo, circuitos de 
fios e luz, placas, utensílios, correntes, e qualquer outro 
material em estado físico
R$ 48,50
Peopleware
Pessoas que trabalham diretamente, ou indiretamente, com a 
área de tecnologia da informação, ou mesmo com Sistema de 
Informação.
R$ 26.051,04
Total Geral R$ 26.099,54
TOTAL
 
Figura 21 – Total do orçamento. 
 
4.4. Matriz S.W.O.T. 
 
Figura 22 – Matriz S.W.O.T. 
 
34 
 
5. PROTÓTIPO 
Inicialmente, quando o sistema foi lançado, era necessário que a equipe de 
desenvolvimento coletasse as informações – nome do local, endereço e avaliação, a respeito 
dos banheiros, tanto do formulário externo, quanto do formulário interno no sistema, por meio 
de uma integração com o Google Forms. A partir destas informações enviadas pelos usuários, 
os desenvolvedores poderiam cadastrar um novo banheiro, um por um. 
 
Figura 23 – Formulário de cadastro de novo banheiro no aplicativo. 
 
Figura 24 – Formulário de cadastro de novo banheiro no Google Forms. 
 
35 
 
Um dos primeiros usuários, Tadeu Martich, ao cadastrar um banheiro, perguntou a um 
integrante da equipe de desenvolvimento se era possível utilizar sua localização 
automaticamente para realização do cadastro. Tal ação seria mais rápida, prática e intuitiva. 
Levando essa sugestão em conta, implementou-se o botão "usar localização" no formulário de 
cadastro de banheiros. O usuário Rodrigo Dias sugeriu que além das informações já contidas 
no aplicativo a respeito dos banheiros (se o mesmo era adaptado e se necessitava pagamento), 
fosse incluída a indicação se o mesmo possuía fraldário. 
Depois que o aplicativo foi publicado na Google Play, o usuário "Bee S" reportou uma 
avaliação, informando que a interface era fácil de usar e bem organizada. Todavia, salientou 
que um mecanismo de busca traria benefícios ao aplicativo. Após essa implementação, 
divulgou-se em grupos de desenvolvimento no Facebook, recebendo diversas sugestões e 
elogios, a respeito da ideia, e como ela seria útil. Uma dassugestões implementadas no 
sistema foi solicitada pelo usuário Arthur Almeida. Quando o mesmo foi cadastrar um 
banheiro, não tinha conhecimento sobre o endereço exato do local e, com isso, não conseguiu 
concluir seu cadastro. Logo após, solicitou para que fosse desenvolvida uma opção de 
adicionar banheiro selecionando o local no mapa. 
Com o aplicativo próximo de sua versão final, o usuário Rodrigo Dias sugeriu mais 
uma funcionalidade, um botão de emergência, que foi nomeado como SOS. Ao ser acionado, 
indicaria o banheiro mais próximo da localização do usuário, dando um zoom no local exato 
no mapa. 
 
 
 
 
 
 
 
 
 
 
 
 
36 
 
Em abril de 2020, enviou-se uma pesquisa para os 30 primeiros usuários que 
colaboraram com o aplicativo. Tratava-se de uma pesquisa simples, com três campos: nome, 
sugestão de melhoria e probabilidade de indicar o aplicativo para um amigo. 
 
Figura 25 – Gráfico de probabilidade de recomendação do aplicativo. 
Diversos usuários sugeriram a inclusão de um campo que indicasse o horário de 
funcionamento dos locais em que se encontra o banheiro, para assim, evitar o deslocamento 
desnecessário até um ponto que esteja fechado. Tendo em vista essas sugestões pertinentes, a 
equipe de desenvolvimento realizou um estudo e as implementou. 
O usuário Patrick Del Bello sugeriu aos desenvolvedores, ao responder a pesquisa, que 
o botão de "pesquisar locais" estava com difícil legibilidade. A partir disso, implementou-se 
uma solução para melhorar a visualização da barra de pesquisa. 
Atualmente, em maio de 2020, o aplicativo está instalado em mais de 100 dispositivos 
e já foi instalado mais de 250 vezes. 
 
 
37 
 
6. CONCLUSÃO 
Com a realização deste trabalho, foi possível compreender aquilo que é uma tarefa 
simples, como procurar por um banheiro, é essencial para determinados indivíduos: 
motoristas de aplicativos, turistas e pessoas com síndromes do trato intestinal. 
Constataram-se as reais dificuldades no desenvolvimento de sistemas, tanto para web 
como para dispositivos móveis. Proporcionou-se, durante o desenvolvimento do sistema, o 
aprendizado acerca de novas tecnologias e soluções. Com isso, facilita-se o desenvolvimento 
de novos projetos para auxiliar a população no dia a dia. 
No cenário amplo, a aceitação do usuário com o sistema foi bem-sucedida, atendendo 
as necessidades de forma simples, precisa e rápida. Sua interface simplificada e intuitiva 
melhora ainda mais a experiência do usuário com o sistema. 
O Backend foi publicado utilizando a plataforma de hospedagem da empresa King 
Host. Foi criada uma instância com Linux e Node.js versão 12.16.2 para subir o servidor, foi 
utilizado o gerenciador de processos para tempo de execução PM2, uma ferramenta 
opensource para o gerenciamento e deploy de aplicações Node.js em ambientes de produção. 
Atrelado ao servidor Node.js foi usado o banco de dados relacional MySQL para gerenciar e 
manter a base de dados de locais com banheiro disponível para uso. 
O Frontend foi hospedado no Heroku, uma plataforma de computação em nuvem, que 
oferece serviços de hospedagem para sites e servidores em diversas linguagens. 
A aplicação está disponível na loja oficial de aplicativos para o sistema operacional 
Android e através do endereço (https://toiletfy.herokuapp.com/) para navegadores web 
6.1. Trabalhos futuros 
Como trabalho futuro, a equipe visa a criação de parcerias comerciais com empresas e 
estabelecimentos comerciais, alçando vantagens para seus usuários. Simultaneamente, 
desenvolver estudos para monetizar o aplicativo, com a inserção de propagandas utilizando o 
Google Ads, sem poluir a identidade visual do aplicativo. 
Adição de banheiros temporários, onde o usuário pode ceder o banheiro de sua 
residência ou estabelecimento comercial, seja cobrando pelo uso ou não, para determinados 
eventos públicos ou privados, como carnaval, ano novo e eventos esportivos. 
Criação de parcerias estratégicas usando os dados de reclamação dos banheiros para 
melhoria dos mesmos. 
 
38 
 
7. REFERÊNCIAS 
ALEXA. Automação Residencial. Disponível em: https://www.b2home.com.br/alexa-
da-amazon/. Acesso em: 10 abr. 2020. 
CORDOVA. Documentation, 2015. Disponível em: 
https://cordova.apache.org/docs/en/latest/. Acesso em: 08 mar. 2020. 
GUIADACARREIRA. Quanto ganha um Programador. Disponível em: 
https://www.guiadacarreira.com.br/salarios/quanto-ganha-um-programador/. Acesso em: 14 
abr. 2020. 
GUIADACARREIRA. Quanto ganha um Analista de Sistemas. Disponível em: 
https://www.guiadacarreira.com.br/salarios/quanto-ganha-um-analista-de-sistemas/. Acesso 
em: 14 abr. 2020. 
HEROKU. Cloud Platform. Disponível em: https://www.heroku.com/. Acesso em: 05 
fev. 2020. 
JAVASCRIPT. Tecnologia para desenvolvedores web, 2019. Disponível em: 
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript. Acesso em: 12 jan. 2020. 
KINGHOST. Hospedagem de Sites. Disponível em: https://king.host/. Acesso em: 20 
fev.2020. 
MYSQL. MySQL Documentation, 2020. Disponível em: https://dev.mysql.com/doc/. 
Acesso em: 10 fev. 2020. 
NODE.JS. Documentação. Disponível em: https://nodejs.org/pt-br/docs/. Acesso em: 
05 jan. 2020. 
PM2. Advanced, Production, Process Manager for Node.JS. Disponível em: 
https://pm2.keymetrics.io/. Acesso em: 15 fev. 2020. 
VAGAS. Testador de Software. Disponível em: 
https://www.vagas.com.br/cargo/testador-de-software. Acesso em: 14 abr. 2020. 
 
 
 
 
https://www.b2home.com.br/alexa-da-amazon/
https://www.b2home.com.br/alexa-da-amazon/
https://cordova.apache.org/docs/en/latest/
https://www.guiadacarreira.com.br/salarios/quanto-ganha-um-programador/
https://www.guiadacarreira.com.br/salarios/quanto-ganha-um-analista-de-sistemas/
https://www.heroku.com/
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript
https://king.host/
https://dev.mysql.com/doc/
https://nodejs.org/pt-br/docs/
https://pm2.keymetrics.io/
https://www.vagas.com.br/cargo/testador-de-software
39 
 
8. ANEXOS 
 
8.1. Modelo Físico de Dados 
CREATE TABLE `banheiros` ( 
 `Id` int(11) NOT NULL AUTO_INCREMENT, 
 `Latitude` decimal(10,8) NOT NULL, 
 `Longitude` decimal(11,8) NOT NULL, 
 `Descricao` varchar(1000) NOT NULL, 
 `Nomelocal` varchar(700) NOT NULL, 
 `Endereco` varchar(700) NOT NULL, 
 `Observacao` varchar(700) DEFAULT NULL, 
 `Avaliacao` varchar(700) NOT NULL, 
 `Informacao` varchar(700) NOT NULL 
) ENGINE=InnoDB DEFAULT CHARSET=utf8; 
 
CREATE TABLE `erros` ( 
 `Id` int(11) NOT NULL AUTO_INCREMENT, 
 `Latitude` decimal(10,8) NOT NULL, 
 `Longitude` decimal(11,8) NOT NULL, 
 `Nomelocal` varchar(700) NOT NULL, 
 `Endereco` varchar(300) NOT NULL, 
 `Descricao` varchar(700) NOT NULL, 
 `Categorias` varchar(200) NOT NULL, 
 `Data_Reclamacao` datetime NOT NULL 
) ENGINE=InnoDB DEFAULT CHARSET=utf8; 
 
ALTER TABLE `banheiros` 
 ADD PRIMARY KEY (`Id`); 
 
ALTER TABLE `erros` 
 ADD PRIMARY KEY (`Id`); 
	1. INTRODUÇÃO
	1.1. Solução proposta
	1.2. Tecnologia
	2. DOCUMENTAÇÃO TÉCNICA
	2.1. Requisitos Funcionais Web
	2.2. Requisitos Funcionais Android
	2.3. Requisitos Não Funcionais
	2.4. Diagrama Conceitual de Classes
	1.
	2.
	2.
	2.5. Diagrama de Casos de Uso
	2.6. Diagrama Conceitual de Dados
	2.7. Diagrama Lógico de Dados
	2.8. Diagrama de Atividades
	3. DOCUMENTAÇÃO DOS CASOS DE USO
	3.1. Descrição detalhada dos Casos de Uso
	3.2. Telas do Sistema Android
	3.2.1. Tela Inicial
	3.2.2. Tela ao Clicar no Botão de Emergência e no Menu de Funções
	2.5.1.
	3.2.3. Tela Adicionar Banheiro
	3.2.4. Tela Reportar Problemas e no Menu de Funções
	3.3. Telas do Sistema Web
	3.3.1. Tela Inicial
	3.1.1.
	3.3.2. Tela Inicial Parte 2
	3.3.3. Tela Inicial Parte 3
	3.3.4. Tela ao Clicar no Botão Emergência
	3.3.5. Tela Adicionar Banheiro
	3.3.6. Tela Reportar Problemas
	4. FERRAMENTAS DE APOIO À DECISÃO
	4.1. Diagrama de Implantação
	4.2. Cronograma
	4.3. Orçamento
	4.3.1. Software
	4.3.2. Hardware
	4.3.3. Peopleware
	4.3.4. Total do Orçamento4.4. Matriz S.W.O.T.
	5. Protótipo
	6. CONCLUSÃO
	6.1. Trabalhos futuros
	7. REFERÊNCIAS
	8. Anexos
	8.1. Modelo Físico de Dados