0% acharam este documento útil (0 voto)

7 visualizações73 páginas

Desenvolvimento do App ContratAí

Enviado por

Gustavo Yachmann

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

7 visualizações73 páginas

Desenvolvimento do App ContratAí

Enviado por

Gustavo Yachmann

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

CENTRO ESTADUAL PAULA SOUZA

ETEC DE TABOÃO DA SERRA

Técnico em Desenvolvimento de Sistemas

Gabriel do Carmo Souza

Gabriel Lobato Tavares
Guilherme Kikukawa Ávila
Gustavo Petlar Yachmann
Isabela Vieira Cabrini Pomponio

CONTRATAÍ: conectando pessoas a profissionais de confiança

Taboão da Serra – SP
2025
Gabriel do Carmo Souza
Gabriel Lobato Tavares
Guilherme Kikukawa Ávila
Gustavo Petlar Yachmann
Isabela Vieira Cabrini Pomponio

CONTRATAÍ: conectando pessoas a profissionais de confiança

Trabalho acadêmico apresentado à Etec de

Taboão da Serra, do Centro Estadual de
Educação Paula Souza, como requisito para a
aprovação na matéria de Desenvolvimento de
TCC em Desenvolvimento de Sistemas ao
Professor Rodolfo Votto Filho.

Taboão da Serra – SP
2025
Gabriel do Carmo Souza

Gabriel Lobato Tavares

Guilherme Kikukawa Ávila

Gustavo Petlar Yachmann

Isabela Vieira Cabrini Pomponio

CONTRATAÍ: conectando pessoas a profissionais de confiança

Trabalho de Conclusão de Curso - TCC

Aprovada em: __ / _ / _______

Conceito: ______________________________

Banca Examinadora:
___________________________________
Professor...............................................................
Etec de Taboão da Serra

Orientador
___________________________________
Professor ............................................................
Etec de Taboão da Serra

____________________________________

Professor ............................................................
Etec de Taboão da Serra
TABOÃO DA SERRA – SP
2025
AGRADECIMENTOS

Agradecemos primeiramente a Deus, por nos conceder

força, saúde e sabedoria durante toda essa jornada
acadêmica. Aos nossos pais, pelo amor, apoio
incondicional e incentivo nos momentos mais difíceis. Sem
vocês, nada disso seria possível. Aos nossos professores e
orientadores, que compartilharam seu conhecimento com
dedicação e paciência, contribuindo imensamente para
nossa formação. Aos colegas e amigos que estiveram ao
nosso lado durante o curso, pela parceria, trocas de
experiencias e amizade. A todos que, de alguma forma,
contribuíram para a realização deste trabalho, nossos
sinceros agradecimentos.
RESUMO

De acordo com a Pesquisa do Instituto Brasileiro de Geografia e Estatística

(IBGE), foi apontado que, em 2022, aproximadamente 1,5 milhão de brasileiros
trabalhavam por meio de plataformas digitais e aplicativos de serviço, representando
cerca de 1,7% da população estando ocupada no setor privado. Dessa forma, este
documento tem como objetivo apresentar a progressão do desenvolvimento e
criação do aplicativo “ContratAí”, esse software intermedia e auxilia no contato entre
clientes e trabalhadores autônomos que precisam de uma maior visibilidade para o
seu negócio. Dessa forma, serão descritas as etapas que levaram à concepção do
aplicativo, bem como o funcionamento do sistema, possibilitando a compreensão do
progresso atual do projeto e o relato de eventuais erros ou problemas em sua
estrutura.

Palavras-chaves: Plataforma digital; Aplicativo; Trabalhadores autônomos;

Visibilidade
ABSTRACT

According to research conducted by the Brazilian Institute of Geography and

Statistics (IBGE), it was reported that, in 2022, approximately 1.5 million Brazilians
were working through digital platforms and service applications, representing about
1.7% of the population employed in the private sector. In this context, this document
aims to present the development and creation process of the “ContratAí” application.
This software serves as an intermediary and facilitates contact between clients and
self-employed workers who need greater visibility for their services. Therefore, the
stages that led to the conception of the application, as well as the functioning of the
system, will be described, enabling an understanding of the current progress of the
project and a report on any errors or issues within its structure.

Keywords: Digital platform; Application; Self-employed workers; Visibility

LISTA DE ABREVIATURAS / SIGLAS
APIs - Application Programming Interfaces

CNPJ - Cadastro Nacional da Pessoa Jurídica

IBGE - Instituto Brasileiro de Geografia e Estatística

Ibre/FGV - Instituto Brasileiro de Economia / Fundação Getulio Vargas

JPG - Joint Photographic Experts Group

LGPD - Lei Geral de Proteção de Dados

PCDOB - Partido Comunista do Brasil

PNADC - Pesquisa Nacional por Amostra de Domicílios Contínua

PNG - Portable Network Graphics

SVG - Scalable Vector Graphics

UML - Unified Modeling Language

UX/UI - User Experience / User Interface

SUMÁRIO
1. INTRODUÇÃO.....................................................................................................11

1.1. Problemática....................................................................................................11

1.2. Justificativa......................................................................................................13

1.3. Metodologia.....................................................................................................14

1.3.1. Tipos de pesquisa...........................................................................................14

1.3.2. Procedimento para determinação da proposta do aplicativo..........................14

1.3.3. Procedimento para a coleta de dados sobre a microrregião..........................15

1.3.4. Fluxograma.....................................................................................................16

1.4. Objetivos..........................................................................................................17

1.4.1. Objetivo geral.................................................................................................17

1.4.2. Objetivos específicos......................................................................................17

1.5. Propostas similares........................................................................................17

2. DESENVOLVIMENTO.........................................................................................19

2.1. Diagrama Canvas............................................................................................19

2.2. Levantamento de requisitos...........................................................................20

2.2.1. Requisitos funcionais do site..........................................................................20

2.2.2. Requisitos não funcionais do site...................................................................21

2.2.3. Requisitos de negócio do site.........................................................................22

2.3. Diagramas........................................................................................................24

2.3.1. Diagrama de classe do site.............................................................................24

2.3.2. Diagrama de uso do site.................................................................................25

2.3.3. Diagrama Entidade e Relacionamento (DER) do site.....................................26

2.4. Ciclo de vida do software................................................................................27

2.5. Softwares utilizados........................................................................................28

2.5.1. Visual Studio Code.........................................................................................28

2.5.2. [Link]...........................................................................................................29
2.5.3. Supabase.......................................................................................................29

2.5.4. Biblioteca de geolocalização..........................................................................29

2.5.5. Canva.............................................................................................................29

2.5.6. Vercel.............................................................................................................29

2.5.7. [Link]...........................................................................................................30

2.5.8. Google Forms.................................................................................................30

2.5.9. Vectr...............................................................................................................30

2.6. Telas.................................................................................................................31

2.6.1. Tela de Apresentação Inicial do Site..............................................................31

2.6.2. Tela de Login de Usuário................................................................................33

2.6.3. Tela de Cadastro de Usuário..........................................................................34

2.6.4. Tela de Login do Profissional..........................................................................35

2.6.5. Tela de Cadastro do Profissional....................................................................36

2.6.6. Tela de informações sobre a plataforma........................................................38

2.6.7. Tela de Painel de Controle do Profissional.....................................................40

2.6.8. Tela de Agenda e disponibilidade do profissional...........................................45

2.6.9. Tela de Painel de controle do Usuário............................................................47

2.6.10. Tela de busca e filtro de Profissionais..........................................................49

2.6.11. Tela do perfil profissional pela conta do Usuário..........................................51

2.6.12. Tela de Avaliação de Serviços......................................................................53

2.6.13. Tela de solicitação de serviço.......................................................................54

2.6.14. Tela de Pagamento do plano Premium........................................................55

2.7. Testes realizados no site................................................................................56

2.7.1. Tabela de testes da Tela de Apresentação Inicial do Site..................................

2.7.2. Tabela de testes da Tela de Login de Usuário...................................................

2.7.3. Tabela de testes da Tela de Cadastro de Usuário..............................................

2.7.4. Tabela de testes da Tela de Login do Profissional.............................................

2.7.5. Tabela de testes da Tela de Cadastro do Profissional.......................................

2.7.6. Tabela de testes da Tela de informações sobre a plataforma............................

2.7.7. Tabela de testes da Tela de Painel de Controle do Profissional.........................

2.7.8. Tabela de testes da Tela de Agenda e disponibilidade do profissional..............

2.7.9. Tabela de testes da Tela de Painel de controle do Usuário................................

2.7.10. Tabela de testes da Tela de busca e filtro de Profissionais..............................

2.7.11. Tabela de testes da Tela do perfil profissional pela conta do Usuário..............

2.7.12. Tabela de testes da Tela de Avaliação de Serviços.........................................

2.7.13. Tabela de testes da Tela de solicitação de serviço..........................................

2.7.14. Tabela de testes da Tela de Pagamento do plano Premium............................

[Link]ÃO DOS RESULTADOS...........................................................................

3.1. Resultados das pesquisas bibliográficas.........................................................

3.2. Resultados as pesquisas de campo..................................................................

3.3. Resultados das pesquisas da microrregião......................................................

4. CONSIDERAÇÕES FINAIS.....................................................................................

REFÊRENCIAS............................................................................................................
11

1 INTRODUÇÃO

O ContrataAí é um Software pensado para conectar usuários a profissionais

de confiança, como Babá, cuidador de pets, organizador de festas, chaveiro,
faxineira e outros prestadores de serviço. De forma prática e segura, entregando
agilidade e confiança em serviços do dia a dia.

1.1 Problemática

A precarização do mercado de trabalho formal no Brasil tem levado cada vez

mais profissionais a buscarem o trabalho autônomo. Uma pesquisa do Instituto
Brasileiro de Economia da Fundação Getúlio Vargas (Ibre/FGV) revela que cerca de
32,1% dos trabalhadores estão atuando por conta própria por causa do desemprego,
e 57,1% já tiveram empregos formais anteriormente (PCDOB, 2023). Esse cenário
mostra não só a dificuldade que muitos enfrentam para se reinserir no mercado
formal, mas também a necessidade de se criar opções para gerar renda.

Figura 1 – porcentagem e comparação de casos

Fonte: Pesquisa Nacional por Amostra de Domicílios Contínua (PNADC), IBGE.

Apesar da recente queda na taxa de desemprego que chegou a 7,4% no período

entre fevereiro e abril de 2024, o menor índice desde 2014 e do aumento na
população ocupada, que atingiu 100,2 milhões de pessoas, o crescimento mais
expressivo tem ocorrido entre os trabalhadores por conta própria. Entre 2012 e
2024, esse grupo cresceu 25,9%, bem acima da média de outras formas de
ocupação, como o emprego com carteira assinada no setor privado.
12

Esse avanço, no entanto, esconde desigualdades importantes. A maioria dos

autônomos brasileiros trabalha sem vínculo formal com o Estado: 74,6% não
possuem CNPJ, o que dificulta o acesso a direitos, benefícios e até mesmo a
crédito. Esses trabalhadores, que somam cerca de 19 milhões de pessoas, são
predominantemente homens (66%), de baixa renda (85% ganham até 3 salários-
mínimos) e com menor escolaridade 38% têm, no máximo, o ensino fundamental
completo. Além disso, 67,7% deles afirmam que gostariam de ter um emprego com
carteira assinada, o que revela que, para muitos, o trabalho autônomo não é uma
escolha, mas uma alternativa diante da falta de oportunidades.
Tabela 1 – Profissionais Autônomos com e sem CNPJ
Categoria Em milhões Em % do total
Autônomos com CNPJ 6,46 25,4%
Autônomos sem CNPJ 18,95 74,6%
Total 25,41 100%
Fonte: Pesquisa Nacional por Amostra de Domicílios Contínua (PNADC), IBGE.

O cenário também é marcado pela instabilidade: 44,9% dos autônomos dizem

não saber quanto vão ganhar no mês seguinte, o que reforça a condição de
insegurança financeira. Mesmo entre os que possuem CNPJ, há disparidades:
enquanto 33% ganham mais de 3 salários-mínimos, entre os que não têm CNPJ
esse percentual cai para apenas 9%, o que ainda assim representa um contingente
expressivo de 1,6 milhão de pessoas.
13

Figura 2 - Sálario entre Autônomos e profissionais com CNPJ

Fonte: Pesquisa Nacional por Amostra de Domicílios Contínua (PNADC), IBGE

Diante dessas realidades, torna-se urgente pensar em alternativas que

ampliem as oportunidades e promovam a inclusão produtiva dos trabalhadores
autônomos. Nesse contexto, plataformas digitais que conectam consumidores a
prestadores de serviços se tornam ferramentas essenciais para oferecer visibilidade,
ampliar a rede de contatos e gerar mais oportunidades de renda para profissionais
como encanadores, eletricistas, mecânicos, entre outros. Além de facilitar o acesso
dos clientes, essas soluções tecnológicas podem contribuir para reduzir as
desigualdades dentro desse grupo tão diverso e, muitas vezes, escondidos.

1.2 Justificativa

Em emergências, como um vazamento de água, um curto-circuito, ou mesmo

um problema mecânico com um veículo, a dificuldade em encontrar rapidamente um
profissional qualificado e disponível pode agravar ainda mais o problema e gerar
prejuízos. Embora existam diversas plataformas de contratação de serviços, muitas
delas não são voltadas para emergências ou não oferecem resposta imediata, além
de deixarem de fora uma grande parcela de profissionais autônomos que atuam de
forma independente e não têm acesso a essas ferramentas.

A ausência de uma plataforma centralizada que conecte, de forma rápida e

eficiente, pessoas em situações emergenciais a profissionais autônomos disponíveis
representa uma lacuna importante no mercado atual. Muitos desses profissionais,
por não estarem inseridos em grandes plataformas ou redes sociais, acabam sendo
14

subutilizados ou invisíveis para potenciais clientes que precisam de ajuda com

urgência.

Nesse cenário, surge a necessidade de uma solução tecnológica que atenda

a essa demanda específica, promovendo o encontro entre quem precisa de ajuda
imediata e quem está apto e disponível para prestar o serviço. O ContratAí nasce
com a proposta de preencher essa lacuna, facilitando o contato direto e seguro entre
usuários e profissionais, especialmente em momentos críticos onde o tempo é um
fator decisivo.

1.3. Metodologia

1.3.1. Tipos de pesquisa

Os tipos de pesquisa utilizados foram definidos conforme os objetivos do

trabalho e os métodos de coleta de dados. Foram adotadas tanto a abordagem
qualitativa quanto a quantitativa. A qualitativa contribuiu para entender melhor a
opinião das pessoas sobre o uso do aplicativo, enquanto a quantitativa permitiu
analisar dados numéricos, como a quantidade de usuários que utilizam
determinados serviços.

Também foi realizada uma pesquisa bibliográfica, com consulta a sites e

outras fontes relevantes para aprofundar o tema. O levantamento de dados incluiu
perguntas diretas aos participantes envolvidos, possibilitando uma análise baseada
nas respostas obtidas. A pesquisa de campo foi conduzida por meio de formulários
enviados ao público, resultando na coleta de informações reais e contextualizadas.

1.3.2. Procedimento para determinação da proposta do aplicativo

Inicialmente, o grupo realizou reuniões para discutir ideias e buscar

referências em aplicativos semelhantes, avaliando seus pontos fortes e fracos com
base em avaliações e reclamações disponíveis no site Reclame Aqui. A partir dessa
análise, foram exploradas formas de adaptar e aprimorar essas ideias, com o
objetivo de atender melhor à população da macrorregião de Taboão da Serra. As
necessidades locais foram investigadas por meio de diálogos com pessoas
experientes na área, o que contribuiu para ampliar a compreensão sobre o contexto.
15

Com as informações organizadas, a proposta do aplicativo foi estruturada.

Para validar a ideia, foi elaborado um formulário no Google Forms, contendo
perguntas voltadas à realidade da região, como o bairro com maior carência de
serviços, a faixa etária dos participantes e a percepção geral sobre a proposta. As
respostas obtidas demonstraram a relevância do projeto e sua aderência a uma
demanda concreta da população.

O desenvolvimento buscou apresentar uma solução original e acessível,

considerando exemplos existentes e integrando funcionalidades que realmente
agregassem valor, como a conexão eficiente entre pessoas que necessitam de
ajuda e profissionais disponíveis para oferecer apoio. Dessa forma, o ContrataAí foi
concebido como uma ferramenta prática, solidária e funcional, voltada a quem
procura serviços de confiança ou deseja colaborar com quem mais precisa.

1.3.3. Procedimento para a coleta de dados sobre a microrregião

Com a proposta do aplicativo já definida, o passo seguinte foi delimitar a

microrregião a ser atendida na versão inicial do projeto. A escolha foi orientada por
pesquisas e análises realizadas, que indicaram uma área específica dentro da
macrorregião de Taboão da Serra. Foram considerados critérios como o acesso
limitado a serviços, a quantidade de reclamações registradas em plataformas como
o Reclame Aqui e relatos de moradores a respeito da dificuldade em encontrar
profissionais de confiança.
16

1.3.4. Fluxograma

Figura 3 – Fluxograma das etapas de criação do projeto

Fonte: Próprios autores 2025

1.4. Objetivos

1.4.1. Objetivo geral

Desenvolver o sistema ContrataAí com o foco em conectar usuários que

precisam de serviços emergenciais a profissionais autônomos qualificados e
disponíveis, por meio de uma plataforma eficiente na busca e contratação, acessível
a qualquer usuário e segura, garantindo confiabilidade nas interações.

1.4.2. Objetivos específicos

Como metas menores, porém detalhadas e práticas:

 Levantar as principais demandas emergenciais enfrentadas por usuários

 Mapear e classificar profissionais autônomos que não utilizam plataformas
digitais
 Projetar uma interface intuitiva e responsiva, facilitando o uso em qualquer
dispositivo
 Implementar recursos funcionais, como
 geolocalização de profissionais próximos
 Perfis com informações detalhadas e avaliações
 Sistema de chamadas rápidas e diretas
 Assegurar a proteção de dados dos usuários e profissionais, com criptografia
e boas práticas
 Testar a plataforma com usuários reais para validar usabilidade e eficiência
 Registrar todo o desenvolvimento do projeto, da ideia à versão funcional

1.5. Propostas similares

Um dos aplicativos mais conhecidos com uma proposta parecida com a do

ContrataAí é o GetNinjas, uma plataforma que conecta clientes a profissionais de
diversas áreas, como serviços domésticos, reformas, assistência técnica, entre
outros. O funcionamento é simples: quem precisa de um serviço faz uma solicitação
pelo site ou aplicativo, e em pouco tempo até quatro profissionais podem entrar em
contato para oferecer orçamentos. Já do lado dos prestadores de serviço, o app
oferece oportunidades na região onde atuam, permitindo que escolham quais
atendimentos desejam realizar, negociando diretamente com o cliente e definindo
seus próprios preços.
18

Apesar da proposta ser interessante, muitos usuários têm relatado problemas

com a plataforma, principalmente no site Reclame Aqui. Segundo dados da própria
página, os principais problemas enfrentados são relacionados a reembolsos
(26,06%), propaganda enganosa (19,57%) e dificuldade de encontrar o tipo exato de
problema para registrar a reclamação (17,9%).
Os relatos deixam claro que, embora a ideia do aplicativo seja boa, a
execução tem falhas importantes. Um cliente, por exemplo, relatou ter pagado
R$28,00 para visualizar uma lista de profissionais, mas não conseguiu entrar em
contato com nenhum deles devido a erros na página. Mesmo tendo solicitado
reembolso, a empresa recusou, alegando que o serviço foi entregue (mesmo sem
funcionalidade real.)
Outro caso aponta a existência de contatos possivelmente falsos no
aplicativo. O usuário relatou ter investido R$600 em moedas dentro da plataforma,
mas conseguiu apenas dois atendimentos de fato, enquanto muitos contatos eram
inválidos ou não respondiam. Alguns profissionais, inclusive, disseram que tentaram
sair da plataforma, mas não conseguiram.
Também há reclamações por parte dos prestadores de serviço. Um deles
contou que comprou moedas para liberar o contato de cinco clientes, mas quatro
não responderam e a empresa não devolveu as moedas, mesmo após reclamação
formal. Ele afirmou que a empresa não se responsabiliza por nada e apenas visa o
lucro.
Esses problemas apontam falhas sérias na confiança e na transparência da
plataforma, tanto para quem oferece quanto para quem contrata os serviços. Com
base nesses erros, o ContrataAí busca oferecer uma solução mais confiável e
segura, garantindo que tanto o cliente quanto o profissional tenham suporte real,
contato funcional e transparência em cada etapa do processo.
19

2. DESENVOLVIMENTO

2.1. Diagrama Canvas

O Modelo de Negócio Canvas (Business Model Canvas) é uma ferramenta

visual e colaborativa que permite a empreendedores e gestores mapear,
desenvolver e ajustar o modelo de negócio de uma empresa.

Figura 4 – Modelo de negócio Canva

Fonte: Próprios Autores 2025

2.2. Levantamento de requisitos

2.2.1. Requisitos funcionais do site

RF01 Nome Cadastro de Usuário

O usuário deve se cadastrar no aplicativo para acessar qualquer serviço.
RF02 Nome Login de Usuário
O usuário deve conseguir fazer login após o cadastro.
Cadastro de Prestadores de
RF03 Nome
Serviço
Prestadores de serviço devem se cadastrar para oferecer seus serviços.
RF04 Nome Busca de Serviços
O cliente deve ser capaz de buscar serviços por categoria (ex: encanador, psicólogo).
RF05 Nome Solicitação de Orçamento
O cliente pode solicitar um orçamento específico para o serviço desejado.
RF06 Nome Avaliação de Serviços
O cliente pode avaliar os serviços prestados com notas e comentários.
NF07 Nome Notificações
O cliente e o prestador devem ser notificados sobre novos serviços, orçamentos e
mensagens.
RF08 Nome Gerenciamento de Agendamentos
O cliente e o prestador podem agendar serviços.
RF09 Nome Sistema de Pagamento
O cliente deve pagar pelo serviço dentro do aplicativo.
RF10 Nome Geolocalização de Prestadores
O cliente pode ver prestadores próximos à sua localização.
RF11 Nome Filtros de Busca
O cliente pode filtrar os resultados por preço, avaliações e proximidade.
RF12 Nome Chat entre Cliente e Prestador
O cliente e o prestador podem trocar mensagens diretamente no aplicativo.
Histórico de Solicitações e
RF13 Nome
Serviços
O cliente pode acessar o histórico de serviços solicitados.
RF14 Nome Suporte ao Cliente
O cliente pode entrar em contato com o suporte do aplicativo para dúvidas ou problemas.
Fonte: Próprios autores 2025
21

2.2.2. Requisitos não funcionais do site

RNF01 Nome Suporte na página

O sistema deve suportar até 10.000 usuários simultâneos na versão inicial, com
possibilidade de escalabilidade.
RNF02 Nome Tempo de resposta
As buscas por serviços devem retornar resultados em menos de 2 segundos.
RNF03 Nome Desempenho da API
O tempo de resposta das APIs não deve ultrapassar 1 segundo, exceto em momentos de
alta carga
RNF04 Nome Segurança dos dados
Todos os dados sensíveis dos usuários devem ser criptografados em trânsito e em
repouso.
RNF05 Nome Autenticação
O login deve utilizar autenticação em dois fatores para aumentar a segurança.
RNF06 Nome Monitoramento de fraudes
Deve haver monitoramento contínuo para detectar tentativas de fraude ou acessos
suspeitos
RNF07 Nome Design UX/UI
O aplicativo deve seguir as diretrizes de UX/UI para dispositivos móveis, garantindo uma
navegação fluida.
RNF08 Nome Experiência do usuário
O fluxo de contratação de serviços deve ser simples, com no máximo 3 cliques para
finalizar uma solicitação.
RNF09 Nome Compatibilidade
O aplicativo deve ser compatível com Android (versão 8 ou superior) e iOS (versão 13 ou
superior).
RNF10 Nome Compatibilidade web
A interface web deve ser responsiva e funcionar corretamente nos navegadores Chrome,
Firefox, Safari e Edge.
RNF11 Nome Disponibilidade
O sistema deve ter uma disponibilidade mínima de 99,5% ao longo do mês.
RNF12 Nome Recuperação de falhas
Deve haver um plano de recuperação de desastres, garantindo restauração dos serviços
em até 1 hora.
RNF13 Nome Privacidade e conformidade
O aplicativo deve estar em conformidade com a LGPD.
RNF14 Nome Manutenção
O código-fonte deve ser versionado e documentado para facilitar manutenções futuras.
RNF15 Nome Atualizações
O sistema deve permitir deploys contínuos e rollback em caso de falhas.

Fonte: Próprios autores 2025

2.2.3. Requisitos de negócio do site

RN01 Nome Login do profissional

Todo profissional deve conter login
RN02 Nome Verificação de Identidade
Todos os profissionais devem passar por um processo de verificação de identidade para
garantir que são quem dizem ser.
RN03 Nome Especializações e Certificações
Profissionais devem preencher informações sobre suas especializações e certificações.
Além disso, podem ser exigidos documentos comprobatórios para validar a qualificação.
RN04 Nome Atualização de Perfil
Profissionais podem atualizar suas informações, mas com um controle de verificação
para evitar informações falsas.
RN05 Nome Criação de Conta Pessoal
O login de usuário deve conter dados pessoais, como nome, email e preferências
RN06 Nome Login do Usuário
Todo Usuário deve conter login
RN07 Nome Histórico de Pesquisas e Contratações
O aplicativo pode manter um histórico das pesquisas feitas e das contratações
realizadas, para facilitar o processo de encontrar novos profissionais ou recontratar os
mesmos.
RN08 Nome Filtro por Localização
Permitir que o usuário filtre os profissionais com base em sua localização geográfica.
RN09 Nome Filtros de Especialização e Preço
Os usuários podem filtrar por tipo de serviço (ex: advogado, encanador, designer gráfico)
e até mesmo por faixa de preço.
RN10 Nome Classificação por Avaliações
Usuários podem classificar os profissionais em uma escala (ex: de 1 a 5 estrelas) com
base em sua experiência, para ajudar outros usuários a tomar decisões.
RN11 Nome Avaliação Bidirecional
Tanto o profissional quanto o usuário podem avaliar um ao outro após a finalização do
serviço, criando um sistema de confiança mútua.
RN12 Nome Relatório de Problemas
Caso haja alguma avaliação negativa, o sistema deve permitir um mecanismo para
resolver disputas ou investigar reclamações, garantindo que o feedback seja justo e
legítimo.
RN13 Nome Calendário de Disponibilidade
Profissionais devem marcar seus horários disponíveis para que os usuários possam
agendar serviços diretamente pelo app.
RN14 Nome Confirmação de Agendamento
Tanto o profissional quanto o usuário devem confirmar o agendamento. O aplicativo pode
enviar notificações de lembrete.
RN15 Nome Política de Cancelamento e
Agendamento
Definir regras claras de cancelamento e agendamento de compromissos, com a
possibilidade de penalidades em caso de faltas ou cancelamentos em cima da hora
23

RN16 Nome Requisitos de Desempenho

Estabelecer que o profissional precisa manter uma média de qualidade (ex: uma nota
mínima de avaliação) para continuar ativo na plataforma
RN17 Nome Acompanhamento de
Satisfação
O aplicativo pode enviar pesquisas de satisfação para os usuários após o término do
serviço para garantir que o profissional atendeu às expectativas
RN18 Nome Suporte ao Cliente
Um canal de comunicação direto entre usuários e administradores do aplicativo para
resolver problemas relacionados à plataforma
RN19 Nome Mediador de Conflitos
Caso haja um problema entre o profissional e o cliente, o aplicativo pode atuar como
mediador, oferecendo um processo de resolução de conflitos
RN20 Nome Descontos e Promoções
para Novos Usuários
O aplicativo pode oferecer descontos para os primeiros serviços contratados pelos
usuários ou promoções para profissionais que desejam atrair mais clientes
RN21 Nome Proteção de Dados
Pessoais
O aplicativo deve seguir as regulamentações de proteção de dados, como a LGPD no
Brasil, garantindo a privacidade das informações dos usuários e profissionais.

Fonte: Próprios autores 2025

2.3. Diagramas

2.3.1. Diagrama de classe do site

O diagrama de classes representa a estrutura do sistema, mostrando as

classes, seus atributos, métodos e relações. No ContrataAí, ele ajudou a organizar
entidades como usuário, profissional e serviço, servindo de base para o banco de
dados e a lógica do sistema.

Figura 5 – Diagrama de classe de site

Fonte: Próprios autores 2025

2.3.2. Diagrama de caso de uso do site

O diagrama de caso de uso representa as interações entre os usuários e o

sistema, mostrando de forma simples o que o sistema deve fazer. No projeto
ContrataAí, ele foi utilizado para identificar funcionalidades como cadastro, login,
busca de profissionais e avaliação de serviços, ajudando na organização dos
requisitos do sistema.

Figura 6 – Diagrama de caso de uso do site

Fonte: Próprios autores 2025

2.3.3. Diagrama Entidade Relacionamento (DER) do site

Um Diagrama de entidade e Relacionamento (DER), também conhecido como

ERD, é uma representação visual de como diferentes elementos de um sistema,
como entidades e seus relacionamentos, interagem entre si. É frequentemente
usado para modelar banco de dados e sistemas de informação, ajudando a
visualizar a estrutura e as relações entre os dados.

Figura 7 – Diagrama de Entidade Relacionamento (DER) Site

Fonte: Próprios autores 2025

2.4. Ciclo de vida do software

O ciclo de vida do software é a estrutura que organiza os processos,

atividades e tarefas envolvidas no desenvolvimento, operação e manutenção de um
sistema. Ele abrange todas as fases da existência do software, desde a definição
dos requisitos até o encerramento de seu uso.

Para representar o desenvolvimento do projeto ContrataAí, foi utilizado o

modelo incremental, que permite construir o sistema em partes funcionais entregues
progressivamente. No diagrama apresentado, o Incremento 1 corresponde à
primeira iteração do processo, evidenciando a visão dos programadores durante a
construção inicial do aplicativo. Esse modelo facilita a validação contínua, o ajuste
de funcionalidades e a evolução gradual da plataforma.

Figura 8 – Diagrama de ciclo de vida – Incremento 1

Fonte: Próprios autores 2025

Após a conclusão do Incremento 1 e a validação inicial do projeto pela banca

avaliadora, foi iniciado o Incremento 2, etapa em que foram incorporadas as
observações feitas pelos avaliadores, bem como o feedback obtido junto aos
usuários e potenciais clientes. Essa fase teve como objetivo aprimorar a aplicação
com base nas sugestões recebidas, garantindo melhorias na usabilidade,
funcionalidades e adequação às necessidades do público-alvo.

Figura 9 – Diagrama de ciclo de vida – Incremento 2

Fonte: Próprios autores 2025

2.5. Softwares utilizados

2.5.1. Visual Studio Code

O Visual Studio Code é um editor de código-fonte leve e eficiente,

desenvolvido pela Microsoft. É amplamente utilizado por desenvolvedores devido à
sua velocidade, suporte a múltiplas linguagens e integração com diversas
ferramentas. Foi adotado como ambiente principal de desenvolvimento deste
projeto, em conjunto com o framework React Native, que serviu de base para a
construção do aplicativo.
29

2.5.2. [Link]

O [Link] é um ambiente de execução JavaScript que opera fora do

navegador, sendo ideal para o desenvolvimento de aplicações rápidas, escaláveis e
eficientes. Ele possibilitou a criação dos processos responsáveis por requisições,
envio e recebimento de dados, autenticação de usuários, entre outras
funcionalidades essenciais ao funcionamento do aplicativo.

No back-end do projeto, o [Link] foi utilizado para estruturar a lógica do

servidor e desenvolver a API de integração com o banco de dados.

2.5.3. Supabase

O Supabase foi utilizado para o armazenamento de dados do aplicativo,

incluindo informações de usuários, serviços e autenticação. A plataforma ofereceu
uma infraestrutura de banco de dados com atualizações em tempo real e uma API
intuitiva, o que facilitou significativamente a integração com o restante do sistema.

2.5.4. Biblioteca de geolocalização

A API nativa navigator foi utilizada para obter informações do dispositivo e do

navegador do usuário, como o idioma preferido, o tipo de navegador e a conexão
com a internet. Sua aplicação contribuiu para adaptar o comportamento do aplicativo
às configurações do usuário, garantindo uma experiência mais personalizada,
responsiva e compatível com diferentes ambientes de acesso.

2.5.5. Canva

O Canva é uma ferramenta de design gráfico que foi utilizada para a criação
de slides, diagramas e protótipos das telas e da interface (UX/UI) do aplicativo. Sua
aplicação foi essencial para o planejamento da experiência do usuário e para a
visualização da navegação, de forma clara, intuitiva e organizada.

2.5.6. Vercel

A plataforma Vercel foi empregada para a publicação da versão web do

aplicativo de maneira ágil e eficiente. Ela facilita o processo de implantação de
aplicações online, especialmente das interfaces desenvolvidas com frameworks
modernos.
30

Com o uso da Vercel, foi possível hospedar o frontend com facilidade,

utilizando recursos como pré-visualizações de deploy, funções como serviço e
análises integradas. Esses elementos permitiram testar e atualizar o aplicativo
rapidamente, assegurando uma experiência fluida aos usuários.

A infraestrutura escalável e segura da plataforma, distribuída globalmente,

contribui para a disponibilidade e o bom desempenho do aplicativo,
independentemente da localização do usuário.

2.5.7. [Link]

O [Link] foi a ferramenta escolhida para a criação de fluxogramas,

wireframes, diagramas de rede, UML, entre outros. Por ser gratuita, baseada na web
e de uso intuitivo, mostrou-se bastante eficaz na construção dos diagramas
utilizados neste projeto.

2.5.8. Google Forms

O Google Forms foi utilizado na coleta de dados junto ao público-alvo,

possibilitando um melhor entendimento das necessidades da região de aplicação do
aplicativo.

A ferramenta facilitou a elaboração e o compartilhamento de formulários

digitais, com perguntas sobre localização, faixa etária e percepção geral da
proposta. Além disso, contribuiu para a organização das respostas e para a análise
dos dados obtidos, comprovando a viabilidade e relevância da proposta do
ContrataAí.

2.5.9. Vectr

A criação da identidade visual do projeto foi realizada com o auxílio do Vectr,

uma ferramenta de design gráfico vetorial de fácil uso e acessível diretamente pelo
navegador.

Com essa ferramenta, foi possível desenvolver uma logomarca com visual
limpo e profissional. Seus recursos de edição de formas, textos, camadas e
exportação em formatos como SVG, PNG e JPG tornaram o processo de criação
mais eficiente, garantindo uma identidade visual clara e versátil ao aplicativo.
31

2.6. Telas

Esta seção apresenta as principais telas desenvolvidas para a aplicação web

ContrataAí, juntamente com seus respectivos códigos-fonte. Cada tela foi projetada
com foco na experiência do usuário, responsividade e funcionalidade, contemplando
tanto o acesso de usuários quanto de profissionais prestadores de serviço. A seguir,
são descritas e organizadas as interfaces do sistema, com destaque para suas
finalidades dentro da plataforma e as estruturas de código que possibilitam seu
funcionamento.

2.6.1. Tela de Apresentação Inicial do Site

Na tela de Apresentação inicial, o usuário pode clicar em "Como funciona"

para acessar uma página explicativa sobre o funcionamento do site. Também há a
opção de "Logar como profissional", que direciona para a tela de login destinada aos
prestadores de serviço, ou ainda a opção "Achar Profissional", que leva ao mesmo
login, voltado para quem deseja contratar. No centro da página, o ContrataAí
apresenta uma frase de destaque que representa sua missão. Ao rolar a tela para
baixo, são exibidos os principais motivos para escolher o ContrataAí. Mais adiante,
há um botão para ir diretamente à página de cadastro de profissional.

Figura 10 – Tela inicial do site – Parte 1

Fonte: Próprios autores 2025

Figura 11 – Tela inicial do site – Parte 2

Fonte: Próprios autores 2025

Figura 12 – Tela inicial do site – Parte 3

Fonte: Próprios autores 2025

2.6.2. Tela de Login do Usuário

Na tela de Login de Usuário, o usuário deve inserir seu e-mail do Gmail e sua
senha, e em seguida clicar no botão "Login". Caso ainda não tenha uma conta, pode
clicar em "Cadastrar-se", localizado logo abaixo, sendo direcionado diretamente para
a página de cadastro de usuário.

Figura 13 – Tela de Login do Usuário

Fonte: Próprios autores 2025

2.6.3. Tela de Cadastro do Usuário

Na página de cadastro de cliente, o usuário deve preencher os campos com

nome completo, e-mail, telefone, data de nascimento, senha e CPF. Após inserir as
informações, basta clicar no botão "Cadastro". Se o cadastro for bem-sucedido, o
site redireciona automaticamente para a tela de login.

Figura 14 – Tela de Cadastro do usuário - Parte 1

Fonte: Próprios autores 2025

Figura 15 – Tela de Cadastro do usuário - Parte 2

Fonte: Próprios autores 2025

2.6.4. Tela de Login do Profissional

Na tela de login do profissional, o usuário deve inserir seu e-mail do Gmail e a

senha, e em seguida clicar no botão "Entrar". Caso ainda não tenha uma conta,
pode clicar em "Cadastrar-se", localizado acima do botão, sendo direcionado para a
página de cadastro do profissional.

Figura 16 – Tela de Login do Profissional

Fonte: Próprios autores 2025

2.6.5. Tela de Cadastro do Profissional

Na tela de cadastro do profissional, o usuário deve preencher os campos com

nome completo, e-mail do Gmail, senha, confirmação da senha, telefone, profissão,
anos de experiência, CPF e localização (caso a localização automática do site não
esteja habilitada). Após o preenchimento, basta clicar no botão "Cadastro". Se o
processo for bem-sucedido, o profissional será redirecionado para a tela de login.

Figura 17 – Tela de Cadastro do Profissional – Parte 1

Fonte: Próprios autores 2025

Figura 18 – Tela de Cadastro do Profissional – Parte 2

2.6.6. Tela de informações sobre a plataforma

Na tela de "Como Funciona", é apresentado um resumo sobre o ContrataAí. A

página explica para que serve o site, detalha suas principais funcionalidades e
mostra como utilizar a plataforma tanto na visão do profissional quanto do usuário
que busca um serviço.

Figura 19 – Tela de informações sobre a plataforma - Parte 1

Fonte: Próprios autores 2025

Figura 20 – Tela de informações sobre a plataforma - Parte 2

Fonte: Próprios autores 2025

Figura 21 – Tela de informações sobre a plataforma - Parte 3

Fonte: Próprios autores 2025

2.6.7. Tela de Painel de Controle do Profissional

Antes da assinatura de um plano, o painel do profissional exibe apenas as

informações básicas do perfil, como nome, telefone, profissão e dados cadastrais.
Não há acesso a funcionalidades extras como visualização de pedidos ou
personalização de disponibilidade.

Figura 22 – Tela de painel de controle do Profissional sem o plano – Parte 1

Fonte: Próprios autores 2025

Com o plano ativo, além das informações do perfil, o profissional pode editar
seus dados, visualizar avaliações recebidas e acessar um calendário onde é
possível definir os dias indisponíveis para atendimento, facilitando a organização da
agenda de trabalho.

Figura 23 – Tela de painel de controle do Profissional com o plano – Parte 2

Fonte: Próprios autores 2025

Figura 24 – Tela de painel de controle do Profissional com o plano – Parte 3

Fonte: Próprios autores 2025

Figura 25 – Tela de painel de controle do Profissional com o plano – Parte 4

Fonte: Próprios autores 2025

Figura 26 – Tela de painel de controle do Profissional com o plano – Parte 5

Fonte: Próprios autores 2025

Logo abaixo, aparece a seção de serviços requeridos, o profissional visualiza

os atendimentos que já foram aceitos. Cada item apresenta as opções de contato
com o cliente, incluindo botões para enviar e-mail, fazer uma ligação ou abrir uma
conversa via WhatsApp. Também é possível acompanhar o status do serviço, que
pode estar como pendente ou marcado como completo após a finalização.
42

Figura 27 – Tela de painel de controle do Profissional com o plano – Parte 6

Fonte: Próprios autores 2025

Mais abaixo, tem a área de pedidos de serviço, mostra todas as solicitações

feitas por usuários. Cada pedido exibe o User ID do cliente, os detalhes do serviço,
endereço, data do requerimento e um botão para excluir o pedido, caso o
profissional não deseje atender aquele pedido.

Figura 28 – Tela de painel de controle do Profissional com o plano – Parte 7

Fonte: Próprios autores 2025

2.6.8. Tela de Agenda e Disponibilidade do Profissional

Na tela de Planner, acessada apenas por profissionais com o plano assinado,

aparece um botão "Acessar Planner" posicionado acima do nome, dentro da seção
de dados pessoais no painel do profissional. Ao entrar no Planner, há uma área
específica onde o profissional pode adicionar notas, preenchendo título e conteúdo.
Ao clicar em "Adicionar nota", a nota é exibida logo abaixo com as opções "Concluir"
e "Apagar", permitindo organizar anotações de forma simples e rápida.

Figura 29 – Tela de Agenda e Disponibilidade do Profissional – Parte 1

Fonte: Próprios autores 2025

Logo abaixo do planner, está o calendário de compromissos. Nele, o

profissional pode adicionar um compromisso informando título, data de início e data
de encerramento. Após clicar no botão "Adicionar", o compromisso aparece
diretamente no calendário. A visualização pode ser filtrada por mês, semana, dia ou
agenda, facilitando o controle da rotina de atendimentos.
44

Figura 30 – Tela de Agenda e Disponibilidade do Profissional – Parte 2

Fonte: Próprios autores 2025

2.6.9. Tela de Painel de Controle do Usuário

Na tela de painel de controle do usuário, o cliente visualiza seus dados

pessoais, incluindo nome, e-mail, telefone, data de nascimento e endereço. Essas
informações podem ser atualizadas a qualquer momento por meio do botão "Editar".

Figura 31 – Tela de Painel de Controle do Usuário - Parte 1

Fonte: Próprios autores 2025

Logo abaixo, está a seção "Seus Favoritos", onde o usuário encontra todos os
profissionais marcados como favoritos, facilitando o reencontro com prestadores já
aprovados em experiências anteriores. Abaixo dessa seção, aparece a área
"Serviços", que exibe o histórico completo dos serviços já solicitados e concluídos
pelo cliente.
46

Figura 32 – Tela de Painel de Controle do Usuário - Parte 2

Fonte: Próprios autores 2025

2.6.10. Tela de Busca e Filtro de Profissionais

Apenas pela conta de cliente, o usuário tem acesso à tela de busca de

profissionais. Nessa página, há uma barra de pesquisa no topo, um filtro por
profissão e um botão para exibir apenas profissionais próximos, dentro de um raio
de até 10 km. Abaixo, é exibida uma lista com os profissionais cadastrados,
contendo informações como nome, profissão, e-mail, telefone, anos de experiência e
localização. Embaixo de cada perfil, há o botão "Contratar", que permite solicitar o
serviço diretamente pela plataforma.

Figura 33 – Tela de Busca e Filtro de Profissionais –Parte 1

Fonte: Próprios autores 2025

Figura 34 – Tela de Busca e Filtro de Profissionais –Parte 1

Fonte: Próprios autores 2025

2.6.11. Tela do perfil do profissional pela conta do Usuário

Ao clicar no botão "Contratar" na página de busca por profissionais, o sistema

direciona para uma nova tela com o perfil completo do profissional. Nessa página,
são exibidos nome, profissão, e-mail, número de telefone, anos de experiência e
localização.

Figura 35 – Tela do perfil do profissional pela conta do Usuário - Parte 1

Fonte: Próprios autores 2025

Logo abaixo, há três seções: "Sobre", com uma descrição mais detalhada do
profissional; "Serviços", com o histórico de atendimentos já realizados; e
"Avaliações", que mostra a média de avaliações em estrelas e o número total de
avaliações recebidas. Na parte inferior da página, ficam dois botões: "Contratar",
para solicitar um novo serviço, e "Avaliar", para deixar um feedback após um
atendimento.

Mais abaixo, encontra-se a área de contratação, onde o usuário pode

descrever o serviço que deseja, informar o endereço onde ele deve ser realizado e
escolher a data em que o serviço deve ocorrer ou ser entregue. Após preencher
todas as informações, a solicitação é enviada automaticamente para o painel do
profissional, ficando visível para análise e possível aceite.
50

Figura 36 – Tela do perfil do profissional pela conta do Usuário - Parte 2

Fonte: Próprios autores 2025

Figura 37 – Tela do perfil do profissional pela conta do Usuário - Parte 3

Fonte: Próprios autores 2025

2.6.12. Tela de Avaliação de Serviços

Ao clicar no botão "Avaliar" na tela de perfil completo do profissional, o

usuário é direcionado para a página de avaliações. Nessa página, é possível atribuir
uma nota de 1 a 5 estrelas e escrever um comentário sobre o serviço prestado. Após
preencher os campos e clicar em "Submit", a avaliação é publicada no perfil do
profissional, ficando visível tanto para outros clientes na tela de contratação quanto
para o próprio profissional em seu painel de controle.

Figura 38 – Tela de Avaliações de Serviços

Fonte: Próprios autores 2025

2.6.13. Tela de solicitação de serviços

Ao clicar no botão "Contratar" na tela de perfil completo do profissional, são

exibidas três opções de contato direto com o profissional: "Mandar E-mail", "Ligar
para o profissional" e "Enviar WhatsApp".

Figura 39 – Tela de solicitação de serviço

Fonte: Próprios autores 2025

2.6.14. Tela de Pagamento do plano premium

Na tela de pagamento de plano, acessada pelos profissionais no momento da

assinatura, é exibida a opção de adesão ao plano premium, com valores a partir de
R$19,90 por mês. No lado direito da tela, são solicitadas as informações para
pagamento via cartão: e-mail, dados do cartão, nome do titular, país ou região. Todo
o processo é realizado com segurança, utilizando a proteção da plataforma Business
Sandbox. Para continuar, é necessário aceitar os termos de uso. Após isso, basta
clicar no botão "Assinar" para que o sistema realize a verificação dos dados e, em
caso de aprovação, libere imediatamente o acesso ao plano premium.

Figura 40– Tela de Pagamento do plano premium – Parte 1

Fonte: Próprios autores 2025

Figura 41– Tela de Pagamento do plano premium – Parte 2

Fonte: Próprios autores 2025

2.7. Rotinas de testes do site

Após o desenvolvimento do site, foram realizados diferentes tipos de testes. O

teste funcional verificou se os requisitos funcionais, as funcionalidades e os casos de
uso estavam sendo atendidos corretamente. O teste de integração avaliou a
interação entre os diversos módulos do sistema, identificando possíveis falhas e
erros de comunicação entre eles. Por fim, o teste de ponta a ponta garantiu que todo
o sistema se comportava como planejado, simulando a navegação e as ações do
usuário em um ambiente semelhante ao de produção.