UNIVERSIDADE FEDERAL DO AMAZONAS

INSTITUTO DE CIÊNCIAS EXATAS E TECNOLOGIA

CURSO DE GRADUAÇÃO EM SISTEMA DE INFORMAÇÃO

DANIELE CHAVES
JACKSON DIEGO
VITOR VASCONCELOS

Sistema Web para Gerenciamento de um Salão de Beleza

Itacoatiara-AM
2024
 DANIELE CHAVES
JACKSON DIEGO
VITOR VASCONCELOS

Sistema Web para Gerenciamento de um Salão de Beleza

Trabalho desenvolvido para a obtenção da nota para

disciplina de Desenvolvimento Web no curso de
bacharel em Sistema de Informação.

Professor: Antônio Alberto

Itacoatiara-AM
2024
 Introdução
No competitivo mundo dos salões de beleza, a eficiência operacional e a satisfação do
cliente são fundamentais para o sucesso do negócio. O gerenciamento eficaz de compromissos,
clientes, estoque e finanças é crucial para manter a qualidade do serviço e impulsionar o
crescimento. Nesse contexto, a tecnologia desempenha um papel vital, fornecendo ferramentas
que simplificam e aprimoram as operações diárias.

Visão Geral do Sistema

O sistema proposto é uma solução abrangente de gerenciamento de salão de beleza
baseada na web. Projetado para atender às necessidades específicas desse setor, oferece uma
variedade de funcionalidades para facilitar o agendamento, a comunicação com os clientes,
tendo como foco de seu desenvolvimento em HTML, CSS e JavaScript, já para o banco de
dados que estará constantemente se comunicando com o sistema web, o mesmo foi
desenvolvido usando a linguagem de programação php.
Este sistema permite que os clientes agendem seus compromissos online, escolhendo
horários disponíveis e recebendo lembretes automáticos para reduzir as faltas e os atrasos. Além
disso, oferece uma interface intuitiva para que o pessoal do salão possa gerenciar facilmente os
compromissos, reagendar quando necessário e manter um registro organizado de todos os
clientes e suas preferências.
Principais Funcionalidades:
a. Agendamento de Serviços:
b. Gestão de Clientes:
c. Relatórios Analíticos:

Levantamento de Requisitos

Requisitos Funcionais
Cada requisito levantado deve ter seu nível de prioridade identificado pelos envolvidos,
conforme legenda abaixo:

Código Nome Descrição

O Obrigatório Requisitos sem o qual o sistema não poderá entrar em funcionamento.

 Requisitos fundamentais, mas que não impedem que parte do sistema entre
I Importante
em funcionamento.

Requisitos que não impedem a entrada em funcionamento do sistema sem

D Desejável
sua implementação, podendo ser contemplado posteriormente.

Requisitos Funcionais
Nesta seção, estão relatados os requisitos funcionais levantados junto aos usuários e
demais envolvidos.

Cadastro do usuário

Permitir o cadastro de novos clientes no sistema, incluindo informações como nome,

[RF-01] telefone, e-mail, endereço e preferências de serviço.

Prioridade: O

Agendamento de Compromissos

Possibilitar que os clientes agendem compromissos online, selecionando datas, horários

[RF-02] e serviços desejados.

Prioridade: O

Autenticação de Usuário

Permitir que usuários cadastrados acessem o sistema inserindo suas credenciais (e-mail e

[RF-03] senha).

Prioridade: O

Visualização de Serviços Disponíveis

Exibir uma lista dos serviços disponíveis no salão de beleza, incluindo descrição, preço e

[RF-04] duração estimada.

Prioridade: O

Seleção de Serviços

[RF-05] Permitir que usuários selecionem os serviços desejados dentre os disponíveis.

 Prioridade: O

Agendamento de Serviços

Permitir que usuários agendem serviços selecionados para datas e horários específicos

[RF-06] disponíveis no sistema

Prioridade: I

Confirmação de Agendamento

Enviar uma confirmação de agendamento para o usuário após a conclusão do processo de

[RF-07] contratação de serviços.

Prioridade: I

Cancelamento de Agendamento

Permitir que usuários cancelem agendamentos previamente confirmados, se necessário.

[RF-08]

Prioridade: D

Notificações de Lembrete

Enviar notificações de lembrete para os usuários antes da data agendada para seus serviços,
reduzindo o risco de faltas ou cancelamentos.
[RF-09]
Prioridade: O

Requisitos Não Funcionais

Os requisitos não funcionais identificados estão agrupados de acordo com a
classificação, sendo requisitos de produto, organizacionais ou externos, além de identificados
por código de acordo com o padrão estabelecido.

Requisitos Não Funcionais

RNF-01 Segurança da Informação

 O sistema deve estar em conformidade com todas as regulamentações de
saúde e privacidade, como LGDP, dependendo de sua região

Requisitos relacionados: RF002, RF003

Desempenho

Assegurar uma resposta rápida do sistema, mesmo em horários de pico, para

RNF-02
garantir uma experiência fluida ao usuário.

Requisitos relacionados: RF005, RF006, RF007

Disponibilidade

RNF-03 Garantir que o sistema esteja disponível a maior parte do tempo,

minimizando possíveis períodos de inatividade.

Requisitos relacionados: RF002, RF008, RF009

Manutenibilidade

Facilitar a manutenção do sistema, permitindo atualizações e correções de

RNF-04
bugs de forma eficiente.

Requisitos relacionados: RF001, RF002, RF003

Responsividade da Interface do Usuário:

Garantir que a interface do usuário seja responsiva, adaptando-se de forma

RNF-05 adequada a diferentes tamanhos de tela e dispositivos, proporcionando uma
experiência consistente e eficaz.

Requisitos Relacionados: RF001, RF005, RF007

Usabilidade

Garantir que a interface do usuário seja intuitiva e fácil de usar, permitindo

RNF-06
que os usuários realizem suas tarefas de forma eficiente.

Requisitos Relacionados: RF001, RF004, RF005

 Regras de Negócio
As regras de negócio em desenvolvimento de software são as diretrizes, políticas,
restrições e requisitos específicos que regem o comportamento do sistema em relação às
operações do negócio para o qual está sendo desenvolvido. Essas regras são derivadas das
necessidades e objetivos do negócio e são traduzidas em lógica de software para garantir que o
sistema atenda aos requisitos e expectativas dos usuários e stakeholders.

Regras de Negócio

Cadastro de Clientes

RN-01 Todos os campos obrigatórios do formulário de cadastro de clientes devem

ser preenchidos para concluir o cadastro

Agendamento de Serviços
RN-02
Um cliente não pode agendar mais de um serviço para o mesmo horário

Serviços

RN-03
Um cliente só pode agendar serviços para si mesmo e não para outros
clientes

Confirmações

RN-04 Os agendamentos só são considerados confirmados após o recebimento da

confirmação por parte do cliente

Disponibilidade de Serviços

RN-05 O sistema deve exibir apenas os serviços que estão disponíveis para
agendamento, considerando a disponibilidade dos funcionários responsáveis por
cada serviço

Restrições de Horário

RN-06 Cada serviço tem um tempo de duração estimado que deve ser levado em
conta ao agendar outros serviços para o mesmo cliente ou para garantir que o
horário de encerramento do salão não seja ultrapassado.
 Diagramas e Casos de uso
Diagramas e Casos de Uso são ferramentas fundamentais no desenvolvimento de
software, oferecendo uma visualização clara das funcionalidades do sistema a partir da
perspectiva dos usuários. Estes instrumentos não só facilitam a comunicação entre os
desenvolvedores e os stakeholders, mas também proporcionam um entendimento profundo dos
requisitos do sistema, as interações entre diferentes atores e os processos envolvidos. Ao
representar as funcionalidades através de casos de uso, os desenvolvedores podem identificar e
planejar melhor as necessidades do projeto, garantindo que o sistema final atenda às
expectativas dos usuários.
4.1. Diagrama de Entidade-Relacionamento

O Diagrama de Entidade-Relacionamento (DER) é uma representação gráfica utilizada

na modelagem de bancos de dados para ilustrar as entidades envolvidas em um domínio de
negócio e os relacionamentos entre elas. Esta ferramenta é essencial no processo de design de
banco de dados, ajudando desenvolvedores a entender a estrutura dos dados e como eles
interagem dentro do sistema.

4.2. Diagrama de Caso de Uso

Um caso de uso é uma descrição das ações que um sistema pode realizar em resposta a
um ator (um usuário ou outro sistema) que interage com ele. Em outras palavras, um caso de
uso descreve uma sequência de eventos que ocorre quando um ator usa um sistema para
completar um processo. Por serem visuais e de fácil compreensão, os diagramas de casos de
uso são ferramentas valiosas, pois permitem que desenvolvedores e não desenvolvedores

compreendam as funcionalidades do sistema de uma maneira simplificada e padronizada.

Figura 1 - Diagrama de Caso de Uso - Geral.
Fonte: Autores(2024)

Caso de Uso: Agendar serviço

Atores: Cliente e Sistema
Pré-Condições: O cliente deve estar registrado no sistema.
Deve haver disponibilidade na agenda do salão para o serviço e horário
desejados.
Fluxo Principal:
I. O cliente acessa o sistema de agendamento através do site ou aplicativo do salão de
beleza.
II. O cliente seleciona o serviço desejado (corte de cabelo etc.).
III. O sistema apresenta as opções de data e horário disponíveis para o serviço
selecionado.
IV. O cliente escolhe a data e o horário que melhor lhe convém.
V. O sistema solicita a confirmação do cliente e, opcionalmente, o pagamento ou
depósito antecipado.
 VI. Após a confirmação (e pagamento, se aplicável), o sistema registra o agendamento e
atualiza a agenda do salão de beleza.
VII. O sistema envia uma confirmação do agendamento para o cliente, incluindo detalhes
como data, horário, serviço agendado e, se aplicável, instruções pré-serviço.
VIII. O sistema opcionalmente envia um lembrete ao cliente um dia antes do agendamento.

Figura 2 - Cadastro de Clientes

Fonte: Autores(2024)

Caso de Uso: Cadastro de Novo Cliente

Atores: Cliente Potencial
Sistema
Pré-Requisito: O cliente potencial deve ter acesso ao sistema, seja por meio do site,
aplicativo móvel ou interface de atendimento.
Fluxo Principal:
I. O cliente potencial seleciona a opção de cadastro no sistema.
II. O sistema apresenta um formulário de cadastro, solicitando informações como
nome, endereço, e-mail, número de telefone e preferências de serviço.
III. O cliente potencial preenche o formulário com as informações solicitadas.
IV. O sistema valida as informações inseridas para garantir que estão completas e
seguem o formato correto.
V. O sistema solicita que o cliente potencial crie uma senha para a conta.
VI. O cliente potencial submete o formulário de cadastro após preencher todas as
informações necessárias.
VII. O sistema cria uma nova conta de cliente, armazenando as informações no banco
de dados.
VIII. O sistema envia um e-mail de confirmação para o endereço fornecido pelo cliente,
pedindo a confirmação do cadastro.
 IX. O sistema confirma a ativação da conta e notifica o cliente que o cadastro foi
concluído com sucesso.

Figura 3 - Contratação de Serviço

Fonte: Autores(2024)

Caso de Uso: Contratar serviço

Atores: Cliente
Sistema
Pré-condição: O cliente deve ter uma reserva existente.
Fluxo Principal:
I. O cliente acessa o sistema de gerenciamento de reservas através do site ou aplicativo
móvel do salão de beleza.
II. O cliente localiza a reserva que deseja cancelar no sistema.
III. O cliente seleciona a opção para cancelar a reserva.
IV. O sistema apresenta uma confirmação, solicitando que o cliente confirme a intenção
de cancelar a reserva.
V. O cliente confirma o cancelamento da reserva.
VI. O sistema processa o cancelamento, atualiza o status da reserva para "cancelada" e
libera o horário previamente reservado na agenda do salão.
VII. O sistema envia uma notificação para o pessoal do salão, informando sobre o
cancelamento da reserva.
VIII. O sistema envia uma confirmação de cancelamento para o cliente, incluindo detalhes
como a data e o horário originalmente reservados.
IX. O sistema opcionalmente atualiza o histórico do cliente para incluir o
X. cancelamento.

4.3. Diagrama de Sequência

Demonstra as interações entre diferentes objetos na execução de uma operação,

destacando ainda a ordem em que tais ações acontecem num intervalo de tempo.
O diagrama a seguir representa a utilização geral do sistema web implementado.

Figura 4 - Utilização Geral

Fonte: Autores(2024)

A seguir diagramas representando partes do sistema para melhor compreensão serão

demonstrados nas figuras 5 e 6, das quais representam o Login e Agendamento
consecutivamente.

Figura 5 - Diagrama de Login

Fonte: Autores(2024)
 Figura 6 - Diagram de Cntratação de Serviço
Fonte: Autores(2024)

4.4. Diagrama de Instalação

Empregado para demonstrar a estrutura de hardware adotada para a implantação de uma

aplicação em um ambiente. Pode envolver dispositivos como servidores de aplicação,
servidores de banco de dados, terminais de usuários etc.
 Este Diagrama de Instalação (ou Diagrama de Implantação) ilustra a configuração física
dos componentes de um sistema de gerenciamento de salão de beleza dentro de uma
infraestrutura de rede, a seguir será explorado os componentes principais:
• Aplicação Web: Instalada no Servidor Web, esta aplicação é o ponto de acesso
para os usuários do sistema. Ela fornece a interface através da qual os clientes e
o pessoal do salão interagem com o sistema, como agendamento de serviços,
gerenciamento de clientes, e visualização de relatórios analíticos.
• Banco de Dados: Dentro do Servidor Web, existe um banco de dados dedicado
ao armazenamento de [Dados do Salão]. Este banco de dados é essencial para
armazenar informações sobre clientes, agendamentos, serviços disponíveis,
histórico de atendimentos, entre outros dados relevantes para a operação do
salão.
• Cliente Desktop: Este nó simboliza um usuário acessando a Aplicação Web
através de um navegador web em um computador desktop ou laptop.

5. Prototipagem

A prototipagem de um site é uma etapa crucial no desenvolvimento web, permitindo que

desenvolvedores e stakeholders visualizem e testem a funcionalidade e o design do site antes
de sua implementação final. HTML, CSS e JavaScript formam a espinha dorsal da maioria dos
sites na internet, cada um desempenhando um papel distinto no processo de prototipagem:
I. Esboço: Começa com esboços básicos no papel ou em ferramentas de design digital
para definir o layout geral e a disposição dos elementos.
II. Protótipo Estático: Usa-se HTML e CSS para construir um protótipo estático, focando
no layout e no design visual.
III. Protótipo Dinâmico: Adiciona-se JavaScript para incorporar interatividade ao
protótipo, permitindo simular a navegação do usuário e outras funcionalidades
dinâmicas.
IV. Testes e Feedback: O protótipo é testado internamente e com usuários reais para coletar
feedback. Com base neste feedback, fazem-se ajustes no design e na funcionalidade.
V. Iteração: O processo é iterativo, com ciclos contínuos de teste e ajuste até que o
protótipo atenda às necessidades dos usuários e objetivos do projeto.
 5.1. Protótipo Estático

Um Protótipo Estático serve como uma representação visual inicial do design de um site
ou aplicativo, concentrando-se principalmente na aparência, layout e estrutura de conteúdo, sem
incorporar elementos interativos ou funcionais. Este tipo de protótipo é fundamental durante as
fases iniciais de desenvolvimento, pois fornece uma visão clara de como o produto final deverá
parecer, permitindo que designers, desenvolvedores e stakeholders tenham uma compreensão
compartilhada do projeto.

Figura 7 - Tela de Login

Fonte: Autores(2024)
A Figura 7 representa o primeiro contato do usuário com sistema em questão, que seria
no momento de efetuar login. Já há figura 8 na qual será mostrada seguir representa o cadastro
do usuário no sistema.

Figura 8 - Tela de Cadastro

Fonte: Autores(2024)
 As figuras 9 e 10 a seguir demonstram as telas da seguir representam as telas:
Agendamento e de serviço agendados, consecutivamente.

Figura 9 - Tela de Agendamento

Fonte: Autores(2024)

Figura 10 - Tela de Serviços Agendados

Fonte: Autores(2024)

Através do uso de prototipagem, foi possível validar o design e a funcionalidade do

sistema antes de sua implementação completa, permitindo ajustes baseados em feedback real
dos usuários. Este processo iterativo assegura que o produto seja não apenas tecnicamente
sólido, mas também intuitivo e alinhado com as expectativas dos usuários finais.
6. Conclusão

Em conclusão, o desenvolvimento deste sistema de agendamento é um passo crucial na

direção de modernizar e melhorar as operações diárias do salão, proporcionando uma
plataforma robusta que beneficia tanto os clientes quanto os funcionários. Com sua
implementação, espera-se uma melhoria na satisfação do cliente, um aumento na eficiência
operacional e, em última análise, um impacto positivo na rentabilidade e no crescimento do
salão. Este projeto destaca a importância da prototipagem e do desenvolvimento iterativo na
criação de soluções digitais que atendam e excedam as necessidades dos usuários em ambientes
de negócios dinâmicos.