Além desse repositório, também foi criado um para mostrar a parte visual do site em HTML, tornando possível que o professor acompanhasse o progresso do projeto mais facilmente, durante as entregas das documentações do TCC a partir do penúltimo semestre do curso, quando foi iniciado o Front-End do site.
Você pode ver a página no link abaixo:
Obs.: Para realizar a entrada no site, basta clicar no botão "Entrar" no canto direito superior da página principal e após, no botão "entrar" da página de login
--lilas: #8888EA;
--laranja: #FCA82F;
--roxo: #6066D0;
--cinza-escuro: #535050;
Inicialmente, para a fase de testes do banco de dados, foi utilizada a ferramenta USBWebServer para a criação do banco de dados.
Ela é gratuita e é possível realizar o download por meio do link: https://usbwebserver.yura.mk.ua/
Entretanto, ao decorrer do projeto, passamos a utilizar o Workbench, visto que o banco de dados foi implantado em mecanismo mySQL no Amazon RDS: Um serviço da web que facilita a configuração e operação de banco de dados em nuvem AWS, tornando possível que todos do grupo do TCC utilizassem o mesmo BD.
Dessa forma, as variáveis de conexão ficarão invisíveis por questões de segurança.
$servername = 'localhost';
$username = 'root';
$password = 'usbw';
$database = 'tcc';
create database tcc
CHARACTER SET utf8
COLLATE utf8_general_ci;
create table cadastro (
usuario_id int (10) NOT NULL AUTO_INCREMENT,
nome varchar (90) NOT NULL,
username varchar (20) NOT NULL,
email varchar (90) NOT NULL,
senha varchar (30) NOT NULL,
pontuacao int(11) NOT NULL,
constraint pk_cadastro primary key (usuario_id),
constraint uk_cad_name unique key (username),
constraint uk_cad_email unique key (email)
);
» As chaves únicas criadas (username e email), farão com que o usuário não consiga fazer um novo cadastro caso o username ou email já estejam no banco de dados.
» Além disso, para cada usuário cadastrado é gerado um ID de usuário dentro do banco de dados, através do Auto_Increment, para que cada usuário possa ser identificado por um código próprio.
» A chave pontuacao servirá para que posteriormente, o usuário possa ser inserido no ranking do site. Conforme seus acertos no quiz, os pontos irão aumentando através de funções inseridas no código. O valor inicial de pontos ao criar a conta é '0'.
Obs.: O CHARACTER SET utf8 COLLATE utf8_general_ci irá alterar o agrupamento dos elementos.
"Um agrupamento MySQL é um conjunto bem definido de regras que são usadas para comparar caracteres de um determinado conjunto de caracteres usando sua codificação correspondente." Fonte: Acervo Lima
Img 1 e 2: O usuário preenche seus dados e é direcionado para a tela de confirmação. Ao clicar no botão, é encaminhado à tela de início do site.
Img 3: Print do banco de dados, logo após o registro do usuário teste1.
---- Criação da Tabela Questions. Nela as questões do quiz ficarão salvas e seguras para que o usuário não as acesse antes de responder o quiz.
create table questions (
id_question int(3) not null auto_increment,
question varchar(256) not null,
primary key (id_question)
);
----- Criação da tabela Alternativas. Assim como a Questions, deixará as alternativas seguras no BD para o usuário não visualizá-las.
create table alternativas (
id_question int(3) not null auto_increment,
alternativa_a varchar(256) not null,
alternativa_b varchar(256) not null,
alternativa_c varchar(256) not null,
alternativa_d varchar(256) not null,
FOREIGN KEY (id_question) REFERENCES questions (id_question)
);
Foi criada uma conta de nível gratuito na Amazon AWS (Amazon Web Services) para utilizarmos o banco de dados através do Amazon RDS (Relational Database Service). Com ele foi possível que todos do grupo tivessem acesso ao mesmo banco de dados ao mesmo tempo, para que fizessem alterações e complementos sem necessidade de criar um local em cada máquina dos integrantes.
O Amazon RDS é um serviço de banco de dados relacional gerenciado para MySQL, PostgreSQL, MariaDB ou SQL Server. O nível gratuito fica disponível para o usuário por 12 meses e é possível ter 750 horas de uso de instâncias executando banco de dados mySQL, Postgre, SQL Server e MariaDB por mês. Além disso, são disponibilizados 20GB de armazenamento de banco de dados (SSD) e 20GB de armazenamento de backup.
Conforme o próprio site diz em sua descrição sobre a plataforma, a AWS ajuda novos usuários a usar um serviço de banco de dados gerenciado na nuvem sem custos. É possível usar o nível gratuito para desenvolver aplicações, realizar testes ou simplesmente para aprender e ganhar experiência com o RDS.
Para a proteção de usuário e senha do banco de dados em nuvem, foi utilizado o PHP dotenv. Com ele, os dados sensíveis são armazenados dentro de variáveis, mas não uma variável qualquer como as criadas com ‘$’(cifrão) no início delas. Com o dotenv, ela se torna uma variável de ambiente, ou seja, ela será criada no ambiente onde o PHP está. Para isso, foi utilizado o Composer, um gerenciador de dependências. Dessa forma, criamos um arquivo global.php para chamar as dependências do Composer, dentro da pasta vendor. O arquivo .env não ficará visível para todos no site e dentro dele colocamos as variáveis com os dados que devem ser escondidos.
No arquivo conexão.php, foram utilizadas as variáveis criadas dentro do arquivo .env, chamadas através da variável superglobal $_ENV[‘ ’];
Por fim, foi criado um arquivo .gitignore, para que, como o próprio nome diz, o versionamento Git ignore os arquivos que constam dentro dele e não os subam para a plataforma.
Instalação do Composer em sistema Linux
Para a instalação dele em Mac ou Linux, é necessário a utilização de alguma interface de linha de comando. Também é necessário que a interface de linha de comando esteja no diretório-raiz da aplicação, antes de ser aplicado o comando: composer require vlucas/phpdotenv
Instalação do Composer em Sistema Windows
Para instalação em sistemas Windows, baixe o instalador clicando aqui. Depois execute a aplicação e siga os passos necessários. O instalador vai colocar o Composer no PATH do Windows, assim será possível executar o comando de qualquer diretório.
Obs.: O projeto estava sendo realizado através do USBWServer. Devido essa aplicação não manter o PHP localmente, foi utilizada a ferramenta Xampp para que a instalação do Composer pudesse ser finalizada.
Em todas as páginas há um require_once para verificar Acesso do usuário. Essa verificação se dá por meio de sessões. Cada coluna da tabela do banco de dados recebeu uma variável $_SESSION para que fossem utilizados os dados apenas do usuário logado.
Sendo assim, para que o código funcione da maneira correta, foram criadas sessões a partir da variável $linha buscando os dados da tabela.
Se a linha não for vazia e se essa linha for igual à senha inserida pelo usuário, então esse usuário terá permissão para ser conectado ao site. Ao mesmo tempo, serão criadas variáveis de sessão com os dados apenas desse usuário logado.
Caso o usuário tente acessar o site sem efetuar login, ele é redirecionado para a tela de 'Acesso Negado', solicitando o login e/ou cadastro do mesmo.
Ao clicar no alerta, retorna-se à tela inicial do site.
Assim como uma tentativa de login incorreta, também emite um alerta indicando erro na tentativa.
A verificação de sessão é extremamente importante, para que apenas os dados do usuário logado fossem exibidos e fosse realizado o logout do site com todas essas informações, como nome completo, nome de usuário e e-mail cadastrados.
Exemplos:
Imagem: Card de perfil exibindo o nome e username do usuário logado
Imagem: Formulário na página Alterar Dados, puxando dados de sessão logada
Pensando no acesso administrativo exclusivo de algumas contas, foi criada uma condição na página de alterar dados, fazendo com que apenas contas específicas possam visualizar o botão de Acessar Dados.
Imagem: Condição criada para que a conta de moderador veja o botão
Como mostra o código acima, apenas a conta de ID 10 terá acesso ao botão que leva à lista de moderação.
Imagem: Botão “Acessar dados” exclusivo para moderadores
Imagem: Lista cadastral vista por moderadores
Através desse botão, o moderador tem acesso a uma lista, contendo todos os dados cadastrados no site. Além de visualizar esses dados, também é possível excluir as contas ou alterar dados através dessa lista.
Ao clicar em Excluir ou Atualizar, o moderador será encaminhado para a tela de atualizar dados, mas invés de ir para a página de atualizar os dados da conta de moderação, os campos conterão os dados do usuário escolhido. O layout da página é o mesmo que seria para um usuário comum alterar dados.
Na página alterarDados.php foi adicionado o botão "Contatar Suporte". Ao clicar nele, o usuário será direcionado até a tela de contato, contendo um formulário que poderá ser enviado ao email de moderação.
Para envio desse formulário, foi utilizada a API Formspree.
Para utilizá-la, basta definir o formulário action no html para o endpoint gerado pela API. Nenhum código de servidor é necessário.
Imagem: Tela de integração da API com instruções de uso
Ao clicar no botão enviar, a API entra em funcionamento e envia o formulário para o email cadastrado no site.
Imagem: Texto utilizado no formulário para teste, ao enviar o email
Imagem: Conteúdo do formulário recebido por email pelo moderador do Progquiz
No site da api é possível acompanhar gráficos e todos os dados presentes no formulário que foi criado, fazendo com que seja extremamente fácil para os moderadores realizarem as devidas alterações no cadastro do solicitante.
Imagem: Interface apresentada no site da API com todos os dados dos formulários preenchidos
Infelizmente o FormSpree não tem tradução para português, nem permite personalização sem um plano pago, portanto, ele foi utilizado no projeto apenas para exemplificar o que pode ser feito futuramente com uma implementação melhor trabalhada.
Além disso, a versão gratuita tem um limite mensal de 50 emails recebidos. Para um site de grande porte, essa opção de API se torna inviável, a menos que seja feito o upgrade na conta, para desbloquear as demais funcionalidades.
O principal objetivo da criação da aplicação mobile, inicialmente, seria a integração de dados do ranking para visualização dos usuários. A ideia seria que, os usuários do site, pudessem acompanhar as pontuações no ranking através do aplicativo de celular, sem necessitar fazer login no site via browser ou login via aplicativo.
Contudo, também é possível implementar o projeto completo, dando acesso a um aplicativo inteiro, totalmente baseado no site, com os mesmos dados de entrada criados no projeto do website. Para tanto, fica para uma implementação futura essa conexão.
Apenas a cargo de apresentação, foi criada a parte visual do projeto mobile utilizando a plataforma Kodular, a fim de exemplificar como poderia ser essa aplicação futura.
Essa parte visual foi totalmente baseada no site, utilizando-se do mesmo padrão de cores, bem como mesmo background, estilização e fontes. Como projeto base, foi criada uma tela principal, assim como no site, para apresentar a imagem característica do projeto, assim como o nome com fonte específica para o quiz, apresentando nela os principais links para as telas de ranking, login e cadastro.
Como o ranking do app ainda não tem integração direta com o ranking do site, foi adicionado um pequeno quiz com TinyBD como protótipo, utilizando-se de banco de dados local, para adição de tabela no ranking mencionado. Para elaborar a codificação da tela do quiz, foram realizados alterações e complementos no código, com base no tutorial apresentado no canal APP Inventor Brasil, postado em 2016 no Youtube.
» Veja a documentação e códigos do projeto mobile » CLICANDO AQUI «
Imagem: Tela inicial do app mobile