Verificar Diagramas do Projeto
🪧 Atributos | Descrição |
---|---|
✨ Nome | SCGA - Sistema de Comunicação e Gerenciamento de Ambiente |
🏷️ Tecnologias | php, css, js, Bootstrap, Laravel, Firebase (tecnologias utilizadas) |
🚀 URL | https://scga.onrender.com/ |
Esse projeto foi feito com a itenção de ser o Trabalho de Conclusão de Curso (TCC) da Etec Zona Leste de São Paulo em 2023, com os integrantes Gustavo Pereira, Thiago Martins, André Caitano e Hugo Reblerson
Será descrito brevemente cada tela da aplicação desse sistema e seus objetivos no geral
Nessa tela temos resumidamente a introdução do sistemas, seus objetivos, clientes (público-alvo), propósitos, sobre nós, opinião dos instrutores e entre outros, além de a imagem nos mostrar que o site tem modo claro ou escuro pelo ícone da lua
![](https://private-user-images.githubusercontent.com/108029506/286756045-689d6649-aabb-4fb4-ae5d-b3dc2cb36fe7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2NzU2MDQ1LTY4OWQ2NjQ5LWFhYmItNGZiNC1hZTVkLWIzZGMyY2IzNmZlNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04NzYyODEyZTg1ZGViOWRhOTM1NzYyOGFlNzI5OWE5NTY5ZGQ2Nzk5MDI4Y2I1MTY4OWVlNTdkOTVkNDNlNWRlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.E3tZBPk0Wqf7mAhFQDG0m7E18reP29Q1omM3hN0NZu8)
Clicando em um dos botões da imagem anterior de registrar-se ou login, entramos em uma das telas de autenticação, as quais cada uma tem seu objetivo descrito no nome e o estilo visto na próxima imagem, sendo que todo esse sistema foi feito utilizando o aglomerado da funcionalidades do Firebase (FireStore, Authenticator, Realtime, Storage)
Além disso, podemos ver na imagem a possibilidade do esqueci a senha
![](https://private-user-images.githubusercontent.com/108029506/286757761-ae3fccbf-e86e-4132-82f9-6487883fa388.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2NzU3NzYxLWFlM2ZjY2JmLWU4NmUtNDEzMi04MmY5LTY0ODc4ODNmYTM4OC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04YjYxNWRjMDcwY2ZlYWZiMjYyYzFiZTc0MWRjODAyOTE5ZjQ0MzhhNjQ2NWQzZDMzMmU1NDEwY2M2YWZlYmEwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.49F2H5u_tGIyvnVNwRJty9AqOTHPAYlUn-9YWltsUIQ)
Fazendo login na conta do usuário, dependendo de que topologia o mesmo tem (aluno, professor ou técnico) temos algumas diferenças em cada tela, entretanto, só para amostra a tela escolhida para mostrar agora foi a do professor
Na imagem assim vemos a apresentação do dashboard ao usuário, cards com funcionalidades principais do tipo de usuário em específico, uma sidebar no canto esquerdo mostrando mais funcionalidade, cada uma com seu ícone e no canto superior direito temos um ícone de calendário com o fundo azul, que tem o cronograma de hoje do usuário, seja ele aluno, professor ou técnico e abaixo o ícone de robô que serve como o chatbot (pequeno suporte) para o sistema que foi feito utilizando o DialogFlow
![](https://private-user-images.githubusercontent.com/108029506/286759017-1ac13067-5b21-45cf-915a-f4bc44dc840b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2NzU5MDE3LTFhYzEzMDY3LTViMjEtNDVjZi05MTVhLWY0YmM0NGRjODQwYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02OTNkNWE1YmQ3OThlOTA4YWQ0YzIxZDljZGIyYzI5MDYwODg5YWRhYzQxMDVkNWY2NWU2NWNjMDk0NTZhNDMzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.xAwNadtOw20noN0PY6nEK7jB-c0u9TD2-i35WeCZx10)
Seguindo a sequência das funcionades descritas no dashboard de cima para baixo, temos a tela de Perfil, com a opção do usuário alterar a imagem, email, nome e senha
![](https://private-user-images.githubusercontent.com/108029506/286777538-04a12df9-2186-4838-be68-22432f5460c9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2Nzc3NTM4LTA0YTEyZGY5LTIxODYtNDgzOC1iZTY4LTIyNDMyZjU0NjBjOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iYTY2NTA1ODRkOGI2ZDRlMDc5ZGU1ZGU5OGMwZTBmOWIxNWM4ODc0YWIxMTA5NzBkYmU3ZDdkY2I1MjYxZTg3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.lS-g204LcCv6fVa31nZ-hmSpYzGNtUSpACYRW5_tVz0)
No ícone de calendário, temos um próprio para cada topologia/usuário, utilizando a API Fullcalendar do JS, em que o mesmo pode ir passando os e meses vendo os agendamentos envolvendo sua topologia (Visualização pessoal) e também ver a geral de todos os outros usuários (Visualização Geral), com ambas as opções estando no select abaixo do título da funcionalidade
![](https://private-user-images.githubusercontent.com/108029506/286777838-f363cc00-4f43-4241-94a1-5d1589223868.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2Nzc3ODM4LWYzNjNjYzAwLTRmNDMtNDI0MS05NGExLTVkMTU4OTIyMzg2OC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jNTliNTg5ODM2ZTNlMjQ5ZTM3ZGIxZjM1MmRhNTQ5MGQ0OGRjMDgyYzlhMWJmYjQ2ZDRmMGQ2ZGU4ZWI4NTY0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.qhaExqZBK76TG3N8x16u2bAn8GdReefdWp3_u5JNRVE)
Aqui e na próxima funcionalidade após dessa temos uma pequena limitação para cada topologia de usuário, sendo que irei explicar as que englobam o agendamento:
O Agendamento é por onde apenas os Professores e Técnicos o acessam, por sua necessitade seja de agendar um horário para utilizar a sala para aula ou para manuntenção dos dispositivos respectivamente, assim alguns dos dados pedidos para o agendamento do técnico não se relaciona totalmente com o do professor, como é o caso Classe e Disciplina. Mais abaixo podemos ver os agendamentos que o usuário fez, que por sua está em anteriores para demonstra o estilo de cada lista da tabela, mas que por padrão se inicia-se com os próximos agendamentos, podendo-o mudar pelo select acima da tabela e do subtitúlo
![](https://private-user-images.githubusercontent.com/108029506/286778689-ffb0eee9-4775-444a-ba20-a37075ede2f9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2Nzc4Njg5LWZmYjBlZWU5LTQ3NzUtNDQ0YS1iYTIwLWEzNzA3NWVkZTJmOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mMzg3YThlZWVhY2JmYzNiYWFkMDdlZWI4ZGUzMjVjOGUzOTdlYjcwMTQyYTFjYTZhYTAxOTBkZGRiODliNjIwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.aMAMPMGDa3ND_PaQ42STu1Ygdsfer13CTyixKrnofSw)
No cronograma, local onde pode ser acessado pelo professor e técnico pelo link abaixo do título do agendamento, temos algo mais englobado, como no caso do calendário, entretanto com o filtro visto (atual e anterior) no agendamento e com a adição de uma tabela para aulas (professor) e manuntenções (técnico)
![](https://private-user-images.githubusercontent.com/108029506/286779811-b63b6bdb-8a6a-4154-986f-eeff35b751a6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2Nzc5ODExLWI2M2I2YmRiLThhNmEtNDE1NC05ODZmLWVlZmYzNWI3NTFhNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iYzhjNDhjMDI4YzI0NDYzM2Q0ZTUzMjEyNmI3ZTg4OTVhYzBjMzAzZDI2ZGQ0MGQ2MmE0NmRhOTU4ODNhNGE3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.-6iDcBdqMKh7uzxhNpp8aWkPU-t8wKBC1N_wKO7pILc)
Como um auxiliar para o planejamento de agendamento e também para o Ambiente Organizacional da Unidade (enfoque principal do projeto), junto com o âmbito de agendamento também temos um pequeno sistema de reportar problemas nos ambientes de estudo (laboratórios e salas), com o objetivo principal de melhorar a comunicação geral do usuários da ETEC caso ocorra alguma ocorrência de problemas nos computadores dos labs, mitigando possíveis dores de cabeça tanto para o professor quanto ao aluno
Ao meio, vemos uma lista dos reportes feitos por um usuário, que pode editá-las ou também acrescentar uma nova no canto inferior direito (símbolo +), ou caso queira averiguar se o seu problema já foi reportado, filtrá-los pelo ícone de filtro no canto superior direito (lembrando que o técnico poderá ver esse reporte, e se caso for resolvido, marcar a mesma como resolvido
![](https://private-user-images.githubusercontent.com/108029506/286780624-20eb0a21-c140-438c-8c8b-109e12acef63.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2NzgwNjI0LTIwZWIwYTIxLWMxNDAtNDM4Yy04YzhiLTEwOWUxMmFjZWY2My5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lYTAyMTZlMzEwZjYxNDEwNGFhOTFmNWI0ODAwNjdjZTI0ODM1NzJjZjAxNTZhMTg2NzdjNjM0YTZiY2NhNmM3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.wi0ptEKbUI5e6L8nzkH-cGKuBK22fJJLRPcI3oF5ic4)
Em mapeamento, primeiro é possível ver o jogo de cores do tema escuro e segundo temos uma imagem do mapa da unidade, sendo uma outra alternativa para o usuário visualizá-lo sem precisar ficar descendo a barra na tela inicial do site. Logo após, temos a principal funcionalidade dela, que foi implementada por mim após o fim do TCC devido a falta de tempo: A Viabilização dos Ambientes (tornar mais palpável a visualização de cada ambiente de estudo e seus recursos no geral).
![](https://private-user-images.githubusercontent.com/108029506/286783235-41418caa-5b48-4371-9b20-e8fcb6969d58.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2NzgzMjM1LTQxNDE4Y2FhLTViNDgtNDM3MS05YjIwLWU4ZmNiNjk2OWQ1OC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wZTc0ZDY4OTUzMWJhN2FmZGJmNDE2ZDA4YjcwMTBmMTBjOWYxMGY5YjBjMDIxNmE2NjdkMzZiNmU1ODk3Yjk3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.VYvFpUbEwKflGGZ0JUzxSSyNMvWL6GCeRwVB1-ymykU)
Nela os usuários podem visualizar os recursos de cada anexo, laboratório de informática ou sala (cadeiras, PCs, Apps, SO, etc) com a ajuda geral da comunidade de professores e técnicos para atualizar esses recursos assim que necessário
Além disso, a próxima possível atualização no sistema será envolvendo essa funcionalidade com o objetivo de inteligar a imagem da unidade com os ambientes na viabilização de recursos
![](https://private-user-images.githubusercontent.com/108029506/286783741-f35ae5bb-574d-4f7f-8653-606784c2f1ba.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2NzgzNzQxLWYzNWFlNWJiLTU3NGQtNGY3Zi04NjUzLTYwNjc4NGMyZjFiYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kMTJlNjhiMzM0OGM0M2EyOGYzMzE4YjZkZGQ0MmE2OWJmNjJjYTJkZDc2M2ZhNDJjYmIxZjc4YWFiOWMyM2IyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.KuOQ52y-kd7C1GtmUidKIMTMTEY0FK9xi9EHytv-2lM)
Por último mas não menos importante, temos a funcionalidade avulso de nosso ChatBot chamado IRIS, como um auxílio para o usuário iniciante no sistema para saber o local de tal funcionalidade e derivados.
![](https://private-user-images.githubusercontent.com/108029506/286784550-922314c0-858e-4622-947f-bc731833628d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTkxMTQsIm5iZiI6MTczOTkxODgxNCwicGF0aCI6Ii8xMDgwMjk1MDYvMjg2Nzg0NTUwLTkyMjMxNGMwLTg1OGUtNDYyMi05NDdmLWJjNzMxODMzNjI4ZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxOFQyMjQ2NTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wYTkzOGMxMzU3ODI3YjFjZDQxODYwN2ExNmQwMDZiOWFhMjQ3OWM2MWZmOWU1YThjN2NiYmE0MzM3NGU1YWFhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.M3j11bfB-d4424Zf5FnaNAqqt7nzA-f4OlVajjX41Fs)
Finalizando, espero que tenham gostado desse pequeno tour do SCGA pelo README e também das funcionalidades, vejo vocês no próximo README!