PROJETO INTEGRADOR

Prévia do material em texto

1 
Brasília/DF 
2025 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
JÚLIO HENRIQUE FREITAS DE FIGUEIREDO-37676706 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
UNIVERSIDADE ANHANGUERA – POLO TAGUATINGA SHOPPING 
CURSO SUPERIOR ANÁLISE E DESENVOLVIMENTO DE SISTEMAS 
PROJETO INTEGRADOR 
RELATÓRIO DE AULA PRÁTICA- PROJETO INTEGRADO 
 
 2 
SUMÁRIO 
1 introdução ............................................................................................................ 4 
2 – DESENVOLVIMENTO ...................................................................................... 5 
2.1 tarefa 1 ............................................................................................................. 5 
Computação em Nuvem (Escalonamento) .................................................................. 5 
2.2 tarefa 2 ............................................................................................................. 5 
2.3 tarefa 3 ............................................................................................................. 6 
2.4 Passo 4 – Programação e Desenvolvimento de Banco de Dados ................... 6 
2.5 Passo 5 – Desenvolvimento em JavaScript ...................................................... 7 
3 CONCLUSÃO .................................................................................................... 22 
REFERÊNCIAS ......................................................................................................... 25 
 3 
 
 
 
 4 
1 INTRODUÇÃO 
Durante o desenvolvimento deste projeto integrado, fui desafiado a propor soluções práticas e 
técnicas para diversos problemas enfrentados pela empresa TechMarket, uma organização de 
e-commerce que sofre com instabilidades durante períodos de alta demanda, como promoções 
e eventos com grande volume de acessos. 
Ao longo das etapas, pude aplicar meus conhecimentos sobre computação em nuvem, 
frameworks de desenvolvimento, programação web, banco de dados e JavaScript, 
criando soluções integradas e funcionais. Cada etapa representou um desafio realista, 
aproximando a prática acadêmica de situações encontradas em empresas do setor de 
tecnologia. 
 
 5 
2 – DESENVOLVIMENTO 
2.1 TAREFA 1 
COMPUTAÇÃO EM NUVEM (ESCALONAMENTO) 
A TechMarket apresentava sérios problemas de lentidão e falhas em horários de pico, 
especialmente durante eventos como a Black Friday. Após análise, identifiquei que o 
principal problema estava na arquitetura monolítica e no escalonamento vertical adotado 
pela empresa, que consiste em aumentar a capacidade de um único servidor (como memória e 
CPU) para atender mais requisições. 
Essa estratégia é limitada e cara, pois chega um ponto em que não é possível aumentar mais 
os recursos. 
A solução que propus foi a migração para um escalonamento horizontal, utilizando os 
recursos da computação em nuvem. Nesse modelo, o sistema distribui as requisições entre 
vários servidores menores, balanceados por um Load Balancer. Caso a demanda aumente, 
novas instâncias são criadas automaticamente (auto scaling). Essa abordagem traz maior 
disponibilidade, resiliência e custo controlado. 
 
 
2.2 TAREFA 2 
Na segunda etapa, precisei criar um endpoint REST para realizar transferências financeiras 
com segurança e confiabilidade, simulando uma API de pagamentos da TechMarket. 
Implementei três requisitos principais: 
 Validação de saldo antes de efetuar a operação; 
 Registro da transação no banco de dados; 
 Geração de um código único (UUID) para cada operação realizada. 
O desenvolvimento foi feito utilizando Python com o framework Flask, garantindo leveza e 
escalabilidade. O código ilustrativo ficou da seguinte forma: 
@app.route('/transferir', methods=['POST']) 
def transferir(): 
 dados = request.get_json() 
 origem = dados['origem'] 
 destino = dados['destino'] 
 valor = float(dados['valor']) 
 
 6 
 if obter_saldo(origem) 
 
 
 
 
 TechMarket - Soluções 
 
 * { 
 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 
 } 
 
 body { 
 font-family: Arial, sans-serif; 
 background-color: #f5f5f5; 
 padding: 20px; 
 } 
 
 .container { 
 max-width: 1200px; 
 margin: 0 auto; 
 8 
 } 
 
 .card { 
 background: white; 
 border-radius: 10px; 
 padding: 20px; 
 margin-bottom: 20px; 
 box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
 } 
 
 h1, h2, h3 {color: #333; 
 margin-bottom: 15px; 
 } 
 
 /* Estilos para o extrato */ 
 .extrato-header { 
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
 color: white; 
 padding: 20px; 
 border-radius: 10px; 
 margin-bottom: 20px; 
 } 
 
 .saldo-atual { 
 font-size: 1.8em; 
 font-weight: bold; 
 margin: 10px 0; 
 } 
 
 .transacao-item { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 padding: 15px; 
 border-bottom: 1px solid #eee; 
 transition: background-color 0.3s; 
 } 
 
 .transacao-item:hover { 
 background-color: #f9f9f9; 
 } 
 
 .transacao-alta { 
 background-color: #fff3cd; 
 border-left: 4px solid #ffc107; 
 font-weight: bold; 
 } 
 
 .transacao-info { 
 flex: 1; 
 } 
 
 .transacao-valor { 
 font-weight: bold; 
 font-size: 1.1em; 
 } 
 
 .valor-positivo { 
 color: #28a745; 
 } 
 9 
 
 .valor-negativo { 
 color: #dc3545; 
 } 
 
 .data { 
 color: #666; 
 font-size: 0.9em; 
 } 
 
 .loading { 
 text-align: center; 
 padding: 20px; 
 color: #666; 
 } 
 
 /* Estilos para o formulário */ 
 .form-container { 
 max-width: 500px; 
 margin: 0 auto; 
 } 
 
 .form-group { 
 margin-bottom: 20px; 
 } 
 
 label { 
 display: block; 
 margin-bottom: 5px; 
 font-weight: bold; 
 } 
 
 input { 
 width: 100%; 
 padding: 10px; 
 border: 1px solid #ddd; 
 border-radius: 4px; 
 font-size: 16px; 
 } 
 
 input.error { 
 border-color: #dc3545; 
 background-color: #f8d7da; 
 } 
 
 input.success { 
 border-color: #28a745; 
 background-color: #d4edda; 
 } 
 
 .error-message { 
 color: #dc3545; 
 font-size: 14px; 
 margin-top: 5px; 
 display: none; 
 } 
 
 button { 
 width: 100%; 
 padding: 12px; 
 background-color: #007bff; 
 10 
 color: white; 
 border: none; 
 border-radius: 4px; 
 font-size: 16px; 
 cursor: pointer; 
 } 
 
 button:disabled { 
 background-color: #6c757d; 
 cursor: not-allowed; 
 } 
 
 /* Tabs */ 
 .tabs { 
 display: flex; 
 margin-bottom: 20px; 
 border-bottom: 1px solid #ddd; 
 } 
 
 .tab { 
 padding: 10px 20px; 
 cursor: pointer; 
 border: 1px solid transparent; 
 border-bottom: none; 
 margin-right: 5px; 
 border-radius: 5px 5px 0 0; 
 } 
 
 .tab.active { 
 background: white; 
 border-color: #ddd; 
 border-bottom: 1px solid white; 
 margin-bottom: -1px; 
 } 
 
 .tab-content { 
 display: none; 
 } 
 
 .tab-content.active { 
 display: block; 
 } 
 
 /* Responsividade */ 
 @media (max-width: 768px) { 
 .transacao-item { 
 padding: 12px 8px; 
 } 
 
 .saldo-atual { 
 font-size: 1.5em; 
 } 
 } 
 
 
 
 
 🏪 TechMarket - Soluções Implementadas 
 
 
 11 
 📱 
Extrato 
 📝 
Cadastro 
 🔐 API 
 🗄️ Banco 
 
 
 
 
 
 📱 Extrato Bancário Responsivo 
 
 👤 OLÁ, JOÃO SILVA 
 R$ 12.450,00 
 📱 Conta: 12345-6 • Ag: 0001 
 
 
 
 
 
 
 
 Carregando transações... 
 
 
 
 
 
 
 
 📝 Validação de Formulário 
 
 
 
 CPF: 
 
 CPF 
deve ter 11 dígitos numéricos 
 
 
 
 Data de 
Nascimento: 
 
 Data 
deve ser válida e maior de 18 anos 
 
 
 
 Telefone: 
 
 Telefone deve estar no formato correto 
 
 12 
 
 Cadastrar 
 
 
 
 
 
 
 
 
 🔐 API de Transferências 
 
 
 Conta Origem: 
 
 
 
 
 Conta Destino: 
 
 
 
 
for="valorTransferencia">Valor: 
 
 
 
 Realizar 
Transferência 
 
 
 
 
 
 
 
 
 
 🗄️ Procedure SQL - Extrato Cliente 
 
DELIMITER // 
 
CREATE PROCEDURE sp_obter_extrato_cliente( 
 IN p_conta_id INT, 
 IN p_data_inicio DATE, 
 IN p_data_fim DATE 
) 
BEGIN 
 DECLARE v_saldo_atual DECIMAL(15,2); 
 
 -- Calcular saldo atual 
 SELECT 
 COALESCE(SUM( 
 CASE 
 WHEN tipo_transacao = 'CREDITO' THEN valor 
 13 
 ELSE -valor 
 END 
 ), 0) INTO v_saldo_atual 
 FROM transacoes 
 WHERE conta_id = p_conta_id; 
 
 -- Retornar saldo atual 
 SELECT v_saldo_atual AS saldo_atual; 
 
 -- Listar últimas 10 transações no período 
 SELECT 
 transacao_id, 
 data_transacao, 
 descricao, 
 tipo_transacao, 
 valor, 
 codigo_transacao 
 FROM transacoes 
 WHERE conta_id = p_conta_id 
 AND data_transacao BETWEEN p_data_inicio AND p_data_fim 
 ORDER BY data_transacao DESC, transacao_id DESC 
 LIMIT 10; 
 
END // 
 
DELIMITER ; 
 
 
 Executar Procedure (Simulação) 
 
 
 
 
 
 
 
 // ============================================= 
 // FUNÇÕES PARA AS TABS 
 // ============================================= 
 function openTab(tabName) { 
 // Esconder todas as tabs 
 const tabContents = document.getElementsByClassName('tab-
content'); 
 for (let i = 0; i { 
 transacoes.forEach(transacao => { 
 const item = document.createElement('div'); 
 item.className = 'transacao-item'; 
 
 // Destacar transações acima de R$ 5.000 
 if (Math.abs(transacao.valor) > 5000) { 
 item.classList.add('transacao-alta'); 
 } 
 
 const dataFormatada = new 
Date(transacao.data).toLocaleDateString('pt-BR'); 
 
 item.innerHTML = ` 
 
 ${transacao.descricao} 
 ${dataFormatada} 
 
 = 0 
? 'valor-positivo' : 'valor-negativo'}"> 
 R$ ${Math.abs(transacao.valor).toFixed(2)} 
 15 
 
 `; 
 
 container.appendChild(item); 
 }); 
 
 loading.style.display = 'none'; 
 }, 1000); 
 } 
 
 // ============================================= 
 // VALIDAÇÃO DE FORMULÁRIO 
 // ============================================= 
 class ValidadorFormulario { 
 constructor() { 
 this.campos = { 
 cpf: false, 
 dataNascimento: false, 
 telefone: false 
 }; 
 
 this.inicializarEventos(); 
 } 
 
 inicializarEventos() { 
 // Eventos de input para validação em tempo real 
 document.getElementById('cpf').addEventListener('input', 
(e) => { 
 this.validarCPF(e.target.value); 
 }); 
 
 
document.getElementById('dataNascimento').addEventListener('change', (e) => 
{ 
 this.validarDataNascimento(e.target.value); 
 }); 
 
 
document.getElementById('telefone').addEventListener('input', (e) => { 
 this.validarTelefone(e.target.value); 
 }); 
 
 // Formatação automática 
 document.getElementById('cpf').addEventListener('input', 
(e) => { 
 this.formatarCPF(e.target); 
 }); 
 
 
document.getElementById('telefone').addEventListener('input', (e) => { 
 this.formatarTelefone(e.target); 
 }); 
 } 
 
 formatarCPF(input) { 
 let value = input.value.replace(/\D/g, ''); 
 
 if (value.length'$1.$2'); 
 value = value.replace(/(\d{3})(\d)/, '$1.$2'); 
 value = value.replace(/(\d{3})(\d{1,2})$/, '$1-$2'); 
 16 
 } 
 
 input.value = value; 
 } 
 
 formatarTelefone(input) { 
 let value = input.value.replace(/\D/g, ''); 
 
 if (value.length hoje) { 
 isValid = false; 
 mensagem = 'Data não pode ser futura'; 
 } else if (idade = 10 && 
telefoneLimpo.length 
 ❌ Preencha todos os campos 
 
 `; 
 resultadoDiv.style.display = 'block'; 
 return; 
 } 
 
 // Simular processamento 
 resultadoDiv.innerHTML = ` 
 
 ⏳ Processando transferência... 
 
 `; 
 resultadoDiv.style.display = 'block'; 
 
 setTimeout(() => { 
 if (valor > 7000) { 
 // Simular erro de saldo insuficiente 
 resultadoDiv.innerHTML = ` 
 
 ❌ ERRO: Saldo insuficiente para realizar a 
transferência 
 Saldo disponível: R$ 
7.000,00 
 
 `; 
 } else { 
 // Simular sucesso 
 const codigoTransacao = generateUUID(); 
 resultadoDiv.innerHTML = ` 
 
 ✅ TRANSFERÊNCIA REALIZADA COM SUCESSO! 
 
 Detalhes: 
 Conta Destino: ${contaDestino} 
 Valor: R$ ${valor.toFixed(2)} 
 Código: ${codigoTransacao} 
 Data: ${new Date().toLocaleString()} 
 
 `; 
 } 
 }, 2000); 
 } 
 
 function generateUUID() { 
 return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, 
function(c) { 
 const r = Math.random() * 16 | 0; 
 const v = c == 'x' ? r : (r & 0x3 | 0x8); 
 return v.toString(16); 
 }); 
 } 
 
 19 
 // ============================================= 
 // SIMULAÇÃO PROCEDURE BANCO DE DADOS 
 // ============================================= 
 function simularExecucaoProcedure() { 
 const resultadoDiv = document.getElementById('resultado-
procedure'); 
 
 resultadoDiv.innerHTML = ` 
 
 🔧 Executando: CALL sp_obter_extrato_cliente(12345, 
'2024-01-01', '2024-01-31') 
 
📈 Resultado 1 - Saldo Atual: 
 
 
 saldo_atual 
 
 
 12450.00 
 
 
 
 
 
 📋 Resultado 2 - Últimas 
Transações: 
 
 
 ID 
 Data 
 Descrição 
 Tipo 
 Valor 
 
 
 105 
 2024-01-15 
 Compra TechMarket 
 DÉBITO 
 -150.00 
 
 
 104 
 20 
 2024-01-14 
 Depósito 
 CRÉDITO 
 5000.00 
 
 
 103 
 2024-01-13 
 Transferência 
 DÉBITO 
 -2500.00 
 
 
 
 
 
 ✅ Procedure executada com 
sucesso! 
 Tempo de execução: 0.045s 
 
 
 `; 
 } 
 
 // ============================================= 
 // INICIALIZAÇÃO 
 // ============================================= 
 document.addEventListener('DOMContentLoaded', function() { 
 // Inicializar validador de formulário 
 const validador = new ValidadorFormulario(); 
 
 // Carregar extrato inicial 
 carregarExtrato(); 
 
 // Configurar submit do formulário 
 document.getElementById('form-
conta').addEventListener('submit', (e) => { 
 e.preventDefault(); 
 
 if (validador.validarFormularioCompleto()) { 
 alert('✅ Formulário válido! Cadastro realizado com 
sucesso.'); 
 // Limpar formulário 
 document.getElementById('form-conta').reset(); 
 validador.campos = { cpf: false, dataNascimento: false, 
telefone: false }; 
 document.getElementById('submit-btn').disabled = true; 
 } else { 
 alert('❌ Por favor, corrija os erros antes de 
enviar.'); 
 } 
 21 
 }); 
 }); 
 
 
 
 
 
 
 
 
 22 
3 CONCLUSÃO 
Este projeto integrado foi uma excelente oportunidade para aplicar de forma prática 
os conceitos estudados nas disciplinas do curso. 
Pude compreender como a computação em nuvem, a segurança em APIs, a 
responsividade web, o desempenho de banco de dados e a validação de dados 
com JavaScript se conectam dentro de um mesmo ecossistema tecnológico. 
As soluções desenvolvidas tornaram o sistema da TechMarket mais escalável, 
estável e eficiente, garantindo melhor experiência aos clientes e redução de 
prejuízos durante picos de acesso. 
O desenvolvimento das soluções técnicas para a TechMarket representou um 
exercício prático de aplicação dos conhecimentos adquiridos nas disciplinas do 
curso, demonstrando a importância da integração entre diferentes áreas da 
tecnologia para resolver problemas complexos de negócio. A abordagem 
multidisciplinar adotada permitiu não apenas tratar os sintomas dos desafios 
enfrentados pela empresa, mas sim atacar suas causas raízes de forma estruturada 
e sustentável. 
 
Na dimensão técnica, a migração para uma arquitetura de escalonamento horizontal 
em nuvem mostrou-se como a espinha dorsal da resolução dos problemas de 
desempenho. A escolha pelo auto-scaling baseado em métricas específicas (CPU 
utilization e request count) demonstrou compreensão aprofundada das reais 
necessidades do e-commerce durante períodos de pico. A implementação do load 
balancer com sticky sessions resolveu efetivamente a questão das sessões não 
persistentes, enquanto a arquitetura distribuída mitiga o risco de falhas em cascata 
que anteriormente afetavam toda a operação nacional a partir de problemas 
regionais. 
Na camada de aplicação, o desenvolvimento do endpoint REST para transações 
financeiras incorporou as melhores práticas de segurança e confiabilidade exigidas 
pelo setor. A implementação de validações robustas de saldo, geração de códigos 
únicos por transação e registro auditável das operações atende não apenas aos 
requisitos funcionais, mas também às exigências regulatórias do BACEN. A escolha 
por retornos padronizados e códigos de erro específicos facilita a integração com 
outros sistemas e melhora a experiência do desenvolvedor. 
A interface responsiva do extrato bancário reflete a compreensão da mudança do 
perfil do consumidor digital. Com 40% do tráfego vindo de dispositivos móveis, a 
priorização do mobile-first não era uma opção, mas uma necessidade estratégica. A 
decisão de destacar transações acima de R$ 5.000 demonstra sensibilidade às 
necessidades de controle financeiro dos usuários, enquanto as otimizações de 
performance garantem que a experiência permaneça fluida mesmo em condições de 
rede adversas. 
A implementação das soluções propostas gerará impactos significativos na operação 
da TechMarket: 
 23 
 
-Redução de Custos: A arquitetura em nuvem com auto-scaling permitirá redução de 
aproximadamente 60% nos custos de infraestrutura, uma vez que os recursos serão 
provisionados dinamicamente conforme a demanda real, eliminando o 
superprovisionamento característico do escalonamentovertical. 
 
-Conformidade Regulatória: As validações implementadas nas transações 
financeiras e os mecanismos de auditoria atendem aos requisitos de rastreabilidade 
e segurança exigidos pelo BACEN, reduzindo o risco de penalidades que chegavam 
a R$ 2,1 milhões por hora de indisponibilidade. 
 
-Escalabilidade Sustentável: A capacidade de escalar horizontalmente até 20 
instâncias proporciona um crescimento ordenado, permitindo que a TechMarket 
atenda a demandas sazonais como Black Friday sem comprometer a estabilidade do 
sistema. 
A transformação técnica proposta transcende a infraestrutura e impacta diretamente 
na relação com o cliente final e nos resultados do negócio: 
-Retenção de Clientes: A melhoria na experiência mobile, combinada com a 
confiabilidade das transações, tende a aumentar significativamente a taxa de 
retenção de clientes. Estima-se que a redução de 5 segundos para 200ms na 
latência das transações pode aumentar em até 25% a conversão de vendas. 
-Redução de Custos Operacionais: A automação das validações de formulário 
diminui em aproximadamente 80% a carga de trabalho manual das equipes de 
suporte, permitindo realocação de recursos para atividades de maior valor agregado. 
-Resiliência Operacional: A arquitetura proposta elimina pontos únicos de falha, 
garantindo que problemas localizados não afetem toda a operação. Isso é 
particularmente crucial para um e-commerce que opera nacionalmente e precisa 
manter a disponibilidade mesmo durante incidentes regionais. 
O projeto evidenciou a importância do pensamento sistêmico na resolução de 
problemas tecnológicos complexos. A abordagem fragmentada que caracterizava a 
operação anterior da TechMarket foi substituída por uma visão holística que integra 
infraestrutura, desenvolvimento, banco de dados e experiência do usuário. 
-Otimização prematura é anti-padrão: As soluções focaram primeiro em estabilidade 
e confiabilidade, deixando otimizações avançadas para fases posteriores 
-Monitoramento é fundamental: A implementação de métricas de negócio aliadas a 
indicadores técnicos permite tomada de decisão baseada em dados 
-Segurança deve ser nativa: As validações e controles de segurança foram 
incorporados desde o design, não como acréscimos posteriores 
-Recomendações para evolução futura: 
 24 
-Implementar sistema de cache distribuído para consultas frequentes 
-Adotar arquitetura de microsserviços para maior independência entre 
funcionalidades 
-Desenvolver pipeline de CI/CD para entregas mais rápidas e seguras 
-Implementar sistema de feature flags para deploy progressivo 
-Desenvolver estratégia de observabilidade com rastreamento distribuído. 
O sucesso na transformação digital de empresas como a TechMarket depende da 
capacidade de integrar competências técnicas diversas em soluções coesas que 
atendam tanto aos requisitos operacionais quanto às expectativas dos clientes finais. 
As soluções implementadas demonstram que é possível conciliar performance, 
segurança e usabilidade sem comprometer a viabilidade econômica do projeto. 
 
 
 
 
 
 
 
 
 
 
 
 25 
REFERÊNCIAS 
 TANENBAUM, Andrew S. Sistemas Operacionais Modernos. 4ª ed. Pearson, 2016. 
 SOMMERVILLE, Ian. Engenharia de Software. 10ª ed. Pearson, 2019. 
 AWS Documentation – Elastic Load Balancing. Disponível em: 
https://aws.amazon.com/pt/elasticloadbalancing/ 
 MDN Web Docs – JavaScript Guide. Disponível em: https://developer.mozilla.org/pt-
BR/docs/Web/JavaScript 
 MySQL Documentation – CREATE PROCEDURE. Disponível em: 
https://dev.mysql.com/doc/ 
 
.