Time Mitada se apresenta no Hackathon Magalu 
O neologismo Mitada vem do grego mythos, que significa história, fábula.
Assim, nosso grupo se propõem a construir uma história de aprendizado, que não se encerrará nesta competição.
Nosso time, formado por Ryan (Engenharia da Computação 2024), Murilo (Engenharia da Computação 2024), Cauã (Ciência da Computação 2024) e Antonio (Ciência da Computação 2024), todos da UFSCar, se propõe a resolver os desafios que nos foram apresentados nesta noite, sendo os maiores deles: o que é Terraform e como utilizá-lo de forma a compor aplicações úteis e intuitivas?
Diante desses questionamentos, reunímo-nos e realizamos um brainstorming a fim de elencar quais soluções reuniam características e skills comuns aos membros, todos muito novos no cenário da tecnologia, mas não obstantes da finalidade última desta ferramenta: a curiosidade e o avanço do estado da arte.
Refletimos e, unindo os conhecimentos de todos, decidimos utilizar a Magalu Cloud para a criação de uma interface para aprendizado em computação, neste exemplo, focado em um blog de Lógica Digital.
O caminho para a realização deste objetivo foi tortuoso, porém o aprendizado foi ímpar.
Iniciamos o Hackathon dando os primeiros passos na plataforma Magalu Cloud, fazendo login e senha e entendendo como criar uma VM pelo console. Entendemos logo depois a funcionalidade do Terraform e como editar os códigos no terminal e manipular arquivos .tf.
provider "mgc" {
alias = "sudeste"
region = "br-se1"
object_storage = {
key_pair = {
key_id = "58f73461-f89f-43fc-a507-1f1d0f3c3624"
key_secret = "4813d20e-2c8e-433a-b2fc-3c2a0fa2fb75"
}
}
}
terraform {
required_providers {
mgc = {
source = "Magalucloud/mgc"
}
}
}
resource "mgc_object_storage_buckets" "my-bucket" {
provider = mgc.sudeste
bucket = "mitadabk"
enable_versioning = true
recursive = true # If true, any configuration or operation specified in the resource will be applied not only to the bucket itself but also to all the objects contained within that bucket.
bucket_is_prefix = false # Indicates whether the bucket name will be used as a prefix for objects.
}
resource "mgc_virtual_machine_instances" "mitadaa" {
provider = mgc.sudeste
name = "mitada"
machine_type = {
name = "BV8-32-100"
}
image = {
name = "cloud-ubuntu-22.04 LTS"
}
network = {
associate_public_ip = true
delete_public_ip = false
interface = {
security_groups = [{
# grupo criado previamente pelo gabriel
id = "4aa1a237-2d57-439b-bf6a-177ddbace4cb"
}]
}
}
ssh_key_name = "mitadinha"
provisioner "remote-exec" {
connection {
type = "ssh"
user = "ubuntu"
private_key = file("~/.ssh/id_rsa")
host = mgc_virtual_machine_instances.mitadaa.network.public_address
}
inline = [
"echo '<!DOCTYPE html><html><head><title>Hello World</title></head><body><h1>Hello, World!</h1></body></html>' | sudo tee /var/www/html/index.html",
//"sudo systemctl restart nginx" # Reinicie o Nginx para garantir que o novo arquivo seja servido
]
}
}
output "ip" {
value = mgc_virtual_machine_instances.mitadaa.network.public_address
}
Outra dificuldade enfrentada pelo grupo no início foi o acesso ssh da máquina virtual em mais de um computador, o que exigiu que criássemos formas de descobrir as ssh keys das máquinas e a necessidade de colocá-las no computador original, conseguindo, assim, acessar a máquina em todos os dispositivos com a chave cadastrada.
Após, encontramos o empasse de “subir” uma máquina virtual via Terraform, o que requereu o conhecimento do IP público requisitado no console, com a configuração exata do arquivo main.tf.
Em seguinte à aparente realização da última tarefa citada, tentamos subir um simples arquivo .html com um Hello World. Esse objetivo, que no início parecia simples, foi um dos que mais nos consumiu tempo em resolver.
Com a ajuda dos monitores, descobrimos que a porta que configuramos com o nginx não estava “aberta ao mundo”. Deste modo, solucionamos o problema, em conjunto, conseguindo configurar o id “pode tudo :)”, que permitiu que, por fim, pudéssemos enxergar a tela “Welcome to nginx!”.
Logo em seguida, pesquisamos e tentamos muito configurar nginx para que mostrasse a página index.html que criamos, a qual continha quizzes de assuntos relacionados à Lógica Digital.
Após muito esforço e consulta dos monitores, conseguimos configurar um Object no console para abarcar o arquivo index.html, o que envolveu a criação de um Bucket previamente.
Com a junção do IP aberto, ngninx configurado, VM, Bucket e Objects devidamente setados e rodando, conseguimos colocar o site no ar, atingindo nosso objetivo de utilizar a tecnologia de computação em nuvem, capitaneada pela Magalu Cloud, para um propósito educativo!
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog de Lógica Digital com Quiz</title>
<style>
/* Estilos Básicos */
body {
font-family: Arial, sans-serif;
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
background-color: #f4f4f9;
transition: background-color 0.3s;
}
.container {
max-width: 600px;
width: 100%;
padding: 20px;
}
header {
background-color: #6200ee;
color: #fff;
text-align: center;
padding: 20px;
border-radius: 8px;
}
header h1 {
margin: 0;
}
section {
margin: 20px 0;
background: #ffffff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
color: #6200ee;
}
.button {
background-color: #6200ee;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 4px;
margin-top: 10px;
transition: background-color 0.3s;
display: block;
width: 100%;
text-align: center;
}
.button:hover {
background-color: #3700b3;
}
.content {
display: none;
margin-top: 10px;
}
.quiz-question, .quiz-result {
margin-top: 20px;
}
.quiz-options input {
margin-right: 10px;
}
.quiz-result {
font-weight: bold;
color: #6200ee;
margin-top: 10px;
text-align: center;
}
.progress-bar {
width: 100%;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
}
.progress {
height: 10px;
background-color: #6200ee;
width: 0%;
transition: width 0.3s;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Blog de Lógica Digital com Quiz</h1>
<p>Explore conceitos e teste seu conhecimento sobre lógica digital!</p>
</header>
<section>
<h2>Quiz de Lógica Digital</h2>
<button class="button" onclick="startQuiz()">Iniciar Quiz</button>
<div id="quiz" class="content">
<div class="progress-bar">
<div id="progress" class="progress"></div>
</div>
<div id="question-container" class="quiz-question">
<!-- Pergunta e opções serão inseridas dinamicamente -->
</div>
<button id="next-btn" class="button" onclick="nextQuestion()" style="display:none;">Próxima Pergunta</button>
</div>
<div id="quiz-result" class="quiz-result"></div>
</section>
<footer style="text-align:center; padding: 10px; margin-top: 20px; color: #999;">
© 2024 - Blog de Lógica Digital | Criado por Mitada
</footer>
</div>
<script>
// Perguntas do quiz
const questions = [
{
question: "Qual é a função de uma porta lógica AND?",
options: ["Inverte o sinal de entrada", "Retorna 1 apenas se todas as entradas forem 1", "Retorna 0 apenas se todas as entradas forem 0", "Alterna entre 0 e 1 aleatoriamente"],
correctAnswer: 1
},
{
question: "O que é um Flip-Flop?",
options: ["Uma porta lógica simples", "Um tipo de circuito que armazena um bit", "Um circuito que realiza cálculos aritméticos", "Um sinal analógico"],
correctAnswer: 1
},
{
question: "Qual sistema numérico é utilizado na lógica digital?",
options: ["Decimal", "Octal", "Binário", "Hexadecimal"],
correctAnswer: 2
},
{
question: "Qual é a principal função de um multiplexador?",
options: ["Dividir um sinal em várias saídas", "Selecionar uma de várias entradas para enviar à saída", "Inverter o sinal de entrada", "Gerar um número aleatório"],
correctAnswer: 1
},
{
question: "Qual a representação do valor lógico 'verdadeiro' no sistema binário?",
options: ["0", "1", "-1", "10"],
correctAnswer: 1
}
];
let currentQuestionIndex = 0;
let score = 0;
function startQuiz() {
document.querySelector(".button").style.display = "none";
document.getElementById("quiz").style.display = "block";
showQuestion();
}
function showQuestion() {
const questionContainer = document.getElementById("question-container");
questionContainer.innerHTML = "";
const questionData = questions[currentQuestionIndex];
const questionEl = document.createElement("p");
questionEl.textContent = `${currentQuestionIndex + 1}. ${questionData.question}`;
questionContainer.appendChild(questionEl);
const optionsEl = document.createElement("div");
optionsEl.className = "quiz-options";
questionData.options.forEach((option, index) => {
const label = document.createElement("label");
const input = document.createElement("input");
input.type = "radio";
input.name = "option";
input.value = index;
input.onclick = checkAnswer;
label.appendChild(input);
label.appendChild(document.createTextNode(option));
optionsEl.appendChild(label);
optionsEl.appendChild(document.createElement("br"));
});
questionContainer.appendChild(optionsEl);
updateProgress();
}
function checkAnswer() {
const selectedOption = document.querySelector('input[name="option"]:checked');
if (selectedOption) {
if (parseInt(selectedOption.value) === questions[currentQuestionIndex].correctAnswer) {
score++;
}
document.getElementById("next-btn").style.display = "block";
}
}
function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
document.getElementById("next-btn").style.display = "none";
} else {
showResult();
}
}
function showResult() {
document.getElementById("quiz").style.display = "none";
const resultDiv = document.getElementById("quiz-result");
resultDiv.innerHTML = `Você acertou ${score} de ${questions.length} perguntas!`;
}
function updateProgress() {
const progressEl = document.getElementById("progress");
progressEl.style.width = `${((currentQuestionIndex + 1) / questions.length) * 100}%`;
}
</script>
</body>
</html>
Conseguimos, na conclusão, demonstrar nosso blog na nuvem. Entretanto, nossa instância foi apagada 3 vezes, sendo uma ao fim do evento, o que dificultou um pouco o processo.
Por fim, agradecemos a toda equipe da Magalu Cloud pela realização do evento e pela oportunidade, destacando o grande aprendizado obtido no processo!
Que venham os próximos Hackathons!