APRESENTAÇÃO

THE BLUE

APRESENTAÇÃO

UFCD-10791 Apresentação de um Projecto Full‑Stack

DEFINIÇÃO

O THE BLUE é uma aplicação web full‑stack que integra um sistema de autenticação (registo/login), gestão de sessões e dois jogos clássicos (Cobra e Três em Linha), com persistência dos dados num ficheiro H2.

OBJETIVO

Demonstrar a integração de um backend completo (Spring Boot) com frontend interactivo. Praticar conceitos de sessão HTTP, persistência JPA e arquitectura MVC. Oferecer uma interface simples, intuitiva e com identidade visual azul.

FUNÇãO

MENU

Registo

Sessão

LOGIN

JOGOS

LOGOUT

Persistência

FUNÇÃO

Linguagens

Backend

Java 17 + Spring Boot 2.7.0

Frontend (HTML)

HTML5 + Thymeleaf (motor de templates)

Estilos

CSS3 (tema azul personalizado)

Lógica dos jogos

JavaScript (ES6)

Base de dados

H2 (modo ficheiro – SQL)

Gestão de dependências

Maven

Ambiente de desenvolvimento

IntelliJ IDEA

Linguagens

EXPLICAÇÃO

pom.xml

application.properties

azul.css

cobra.js

login.html

BlueController.java

application.properties

UtilizadorRepository.java

registo.html

treslinha.js

menu.html

treslinha.js

EXPLICAÇÃO

ESTRUTURA DE PASTAS

the-blue/ ├── pom.xml └── src/main/ ├── java/com/theblue/ │ ├── TheBlueApplication.java │ ├── controller/BlueController.java │ ├── model/Utilizador.java │ └── repository/UtilizadorRepository.java └── resources/ ├── application.properties ├── templates/ (registo.html, login.html, menu.html, cobra.html, treslinhas.html) └── static/ ├── css/azul.css └── js/ (cobra.js, treslinhas.js)

resumo

O THE BLUE é uma aplicação web funcional com autenticação, base de dados persistente e dois jogos, integrando backend Spring Boot e frontend HTML/CSS/JS.

11ºTPIAURORA HUERTAS MARCELO DA CRUZ

UtilizadorRepository.java

Esta interface funciona como um tradutor entre o programa e a base de dados. Ela já vem com comandos prontos para guardar, procurar ou apagar utilizadores. A linha findByEmail é um comando personalizado que diz: "encontra um utilizador a partir do email dele". É assim que o login vai buscar a pessoa certa.

cobra.js

Esta linha SQL, quando executada na consola do H2, mostra todos os utilizadores registados (com os respetivos emails e palavras-passe). É útil para testar e ver se os dados estão a ser guardados corretamente.

Utilizador.java

Esta classe descreve o que é um utilizador: tem um identificador único (id), um email e uma palavra-passe. O programa usa este molde para criar uma tabela na base de dados com essas colunas. O id é gerado automaticamente, para que cada pessoa tenha um número diferente.

registo.html

É o formulário que aparece no ecrã. Os campos email e palavraPasse são os que o utilizador preenche. Quando clica em "Registar", o navegador envia esses dados para o endereço /registo usando o método POST. O required impede que se envie vazio.

pom.xml

Este ficheiro lista todas as bibliotecas externas que o projeto precisa. A primeira (spring-boot-starter-data-jpa) dá ao programa a capacidade de falar com uma base de dados de forma simples. A segunda (h2) é o motor da base de dados que vamos usar, uma base de dados leve que guarda os dados num ficheiro. Sem estas linhas, o programa não saberia como guardar utilizadores.

application.properties

Aqui definimos como o programa se comporta. A primeira linha diz: "guarda os dados num ficheiro dentro da pasta database do projeto". A segunda ativa uma página web onde podemos espreitar a base de dados (útil para testes). A terceira define que o site estará disponível em localhost:8080. É como um pequeno manual de instruções.

BlueController.java

Quando alguém envia o formulário de login, este pedaço de código entra em ação. Ele pega no email e na palavra-passe, vai à base de dados ver se existe alguém com esse email. Se existir e a palavra-passe estiver correta, guarda esse utilizador na sessão (para o programa se lembrar dele) e redireciona para o menu. Se falhar, volta a mostrar a página de login com uma mensagem de erro.

cobra.js

Esta lista contém todas as posições que formam uma linha, coluna ou diagonal no jogo da velha (por exemplo, [0,1,2] é a primeira linha). O código percorre estas combinações e, se alguma delas estiver completamente preenchida pelo mesmo jogador (X ou O), declara vitória. É uma maneira simples e eficaz de fazer esta verificação.

login.html

Se o login falhar, o programa manda uma mensagem de erro (por exemplo "Email ou palavra-passe incorrectos"). Esta linha de código mostra essa mensagem dentro de uma caixa vermelha ou amarela, para o utilizador perceber o que correu mal.

cobra.js

Este código fica à escuta das setas do teclado. Quando carregas na seta para cima, muda a direção da cobra para cima. A condição extra (direcao.y === 0) impede que a cobra tente ir para cima quando já está a descer, o que seria um movimento proibido. É a forma de controlar o jogo.

menu.html

Depois do login, o utilizador vê esta página. O programa insere o nome da pessoa no lugar do span, para que apareça "Olá, Maria!". Depois mostra dois links para os jogos. É simples, mas faz o trabalho.

AZUl.CSS

Define as cores e as formas do site. O fundo fica azul escuro. As caixas onde está o conteúdo têm um azul médio, cantos arredondados e uma sombra suave. Os botões são azuis claros e também arredondados. Tudo para dar um aspeto moderno e manter o tema azul que foi pedido.