Projeto Integrado Inovação - Desenvolvimento Web - Wesley

Prévia do material em texto

3 
 
 	3 
 
 	3 
 
 
 
WESLEY RAFAEL FONSECA
 
 
 
 
RELATÓRIO DO DESENVOLVIMENTO DE UM SISTEMA DE AGENDAMENTO PARA CLÍNICA MÉDICA
 
WESLEY RAFAEL FONSECA
 
 
 
 
 
 
 
 
 
RELATÓRIO DO DESENVOLVIMENTO DE UM SISTEMA DE AGENDAMENTO PARA CLÍNICA MÉDICA
SUMÁRIO
1	INTRODUÇÃO:	6
2	ETAPA 1 – PLANEJAMENTO E DIAGRAMA DE CLASSES:	6
3	ETAPA 2 – PÁGINA DE AGENDAMENTO (HTML, CSS E JS):	8
3.1	Script: index.html:	9
3.2	Script: style.css:	10
3.3	Script: script.js	12
4	ETAPA 3 – MODELO ENTIDADE-RELACIONAMENTO (MER):	13
5	ETAPA 4 – CRIAÇÃO DO BANCO DE DADOS E POPULAÇÃO:	14
5.1	Script de criação do banco e tabelas:	14
5.2	Script de inserção de dados nas tabelas para testes:	15
6	ETAPA 5 – VIEW E FUNCTION:	16
6.1	VIEW – view_consultas_completas:	16
6.2	FUNÇÃO – func_total_arrecadado_por_periodo ():	17
7	CONCLUSÃO:	18
 
INTRODUÇÃO:
Neste relatório, apresento o desenvolvimento do Projeto Integrado, cujo objetivo principal foi a criação de um sistema de agendamento online para uma clínica médica. O projeto envolveu tanto a parte visual do sistema (interface de agendamento) quanto o planejamento e implementação do banco de dados relacional utilizando MySQL. As etapas foram desenvolvidas de forma sequencial e integradas, aplicando conceitos de programação, banco de dados e modelagem.
ETAPA 1 – PLANEJAMENTO E DIAGRAMA DE CLASSES: 
Nesta etapa, elaborei o Diagrama de Classes UML, com o auxílio da ferramenta Lucidchart, para representar a estrutura lógica do sistema.
O sistema contempla as seguintes entidades principais:
· Paciente
· Médico
· Consulta
· Plano de Saúde
· Receita
· Pagamento.
Figura 1: Diagrama de Classes UML do Sistema de Agendamento de Consultas Médicas
ETAPA 2 – PÁGINA DE AGENDAMENTO (HTML, CSS E JS):
Foi criada uma interface de agendamento usando HTML, CSS e JavaScript, com foco em responsividade e visual moderno.
Melhorei a estética da página, utilizando cores suaves, alinhamento adequado, fontes mais agradáveis e correção nas bordas dos labels.
Figura 2 - Captura de tela da página de agendamento
0. Script: index.html:
Figura 3 - Script index.html
Figura 4 - Captura de tela do script: index.html
Script: style.css:
Figura 5 - Captura de tela do script: style.css - parte 1
Figura 6 - Captura de tela do script: style.css - parte 2
Script: script.js
Figura 7 - Captura de tela do script: script.js
ETAPA 3 – MODELO ENTIDADE-RELACIONAMENTO (MER):
Utilizando o MySQL Workbench, após criar o banco de dados, utilizei a funcionalidade de engenharia reversa para gerar o MER (Modelo Entidade-Relacionamento).
Este diagrama representa visualmente todas as entidades do banco de dados e os relacionamentos entre elas.
Figura 8 - Modelo Entidade-Relacionamento do banco de dados da clínica.
ETAPA 4 – CRIAÇÃO DO BANCO DE DADOS E POPULAÇÃO:
0. Script de criação do banco e tabelas:
 
Figura 9 - Script de criação do banco e tabelas
 
Script de inserção de dados nas tabelas para testes:
Figura 10 - Script de inserção de dados
ETAPA 5 – VIEW E FUNCTION:
0. VIEW – view_consultas_completas:
Criei uma VIEW que consolida dados da tabela Consulta, relacionando informações dos pacientes, médicos e plano de saúde. Isso facilita a geração de relatórios e visualização das consultas agendadas. 
Figura 11 - Script da View Consultas Completas
Figura 12 - Resultado da View Consultas Completas
FUNÇÃO – func_total_arrecadado_por_periodo ():
A função criada retorna o valor total das consultas registradas na base de dados.
Figura 13 - Script e resultado da função total arrecadado por período
CONCLUSÃO: 
Este projeto me permitiu aplicar conhecimentos de programação front-end e back-end, com destaque para a criação de banco de dados relacional em MySQL, modelagem com MER e UML, e desenvolvimento de uma interface funcional e responsiva para agendamento online.
Todos os objetivos propostos foram cumpridos, integrando as áreas de desenvolvimento e banco de dados, resultando em um sistema coeso e funcional que poderia ser facilmente expandido com novas funcionalidades.
BELO HORIZONTE - 2024 
BELO HORIZONTE - 2024 
BELO HORIZONTE - 2025
image3.png
image4.png
image5.png
image6.png
image7.png
image8.png
image9.png
image10.png
image11.png
image12.png
image13.png
image14.png
image1.png
image2.png