MINDPUZZLE: DEVELOPMENT OF A GAME-BASED WEB APPLICATION PENSE BEM
REGISTRO DOI: 10.69849/revistaft/cl10202411301028
Victoria Regina Cassolo1
Felipe Diniz Dallilo2
Fabiana Florian3
Resumo: O desenvolvimento deste trabalho foi feito de forma a atualizar um jogo da época dos anos 80 e 90 para a cultura atual, com acesso à internet e navegador, mudando os meios para jogar esse jogo e permitindo que as crianças de hoje em dia consigam desfrutar do conhecimento e da diversão que ele proporciona. A aplicação foi desenvolvida na versão web para garantir que todos, com pelo menos internet e um celular, consigam ter acesso a ela. Com isso, foram exploradas ferramentas e mecanismos desse modelo de aplicação, e, assim, utilizamos banco de dados, API e front-end para realizar este trabalho, tudo escolhido para proporcionar ao usuário a melhor experiência possível. Unindo as ferramentas utilizadas, o trabalho se mostrou eficiente em cumprir seu objetivo.
Palavras-chave: Web. Api. Aprendizado. Aplicação.
Abstract: This work was developed in order to update a game from the 80s and 90s to the current culture with internet access and browser, changing the means to play this game, allowing today’s children to enjoy the knowledge and fun that this game provides. The application was made in the web version to ensure that everyone with at least internet and a cell phone can already have access to it. With this, tools and mechanisms of this application model were explored, and thus we used database, API and front-end to carry out this work, all chosen to give the user the best possible experience. By combining the tools used, the work proved to be efficient in achieving its objective.
Keywords: Web. Knowledge. Api. Application.
1 INTRODUÇÃO
Nos anos 80 e 90, mais especificamente em 1988, chegou ao Brasil o jogo Pense Bem, produzido pela empresa Tectoy. Esse jogo tinha a aparência de um computador, com um teclado e um LED, e oferecia diversas funções voltadas para a diversão e aprendizado dos usuários. A proposta do Pense Bem era proporcionar brincadeiras que estimulam o raciocínio, ajudando no desenvolvimento de habilidades enquanto entretém os jogadores.
Dentre suas funções, algumas eram embutidas, oferecendo atividades básicas para testar o conhecimento do usuário. Entre elas, destacavam-se jogos como Adivinhe o Número, onde o usuário escolhia os números a partir de dicas de “maior” ou “menor” em relação ao número anterior, e Siga o Mestre, em que o jogador precisava seguir a sequência de notas tocadas pelo brinquedo. Além disso, o Pense Bem também incluía desafios de cálculos matemáticos e lógica. Outro recurso interessante eram os livros temáticos, que continham perguntas de múltipla escolha sobre diversos assuntos, como geografia, história, idiomas, entre outros.
Este trabalho tem como propósito reimaginar um jogo antigo, que possui grande potencial educativo, especialmente para crianças, permitindo que aprendam enquanto se divertem. A proposta é trazer o jogo para um novo formato, mais atual, no caso o formato web, considerando que a maioria das pessoas hoje em dia tem acesso à internet e aos navegadores.
Que através desse trabalho crianças possam aprender brincando, obter conhecimento com atividades essenciais para estudo escolar e outros.
Como afirmou Alan Turing: “As máquinas me surpreendem com muita frequência”. A escolha deste tema visa transformar algo relativamente comum na programação, como um CRUD, utilizando os métodos escolhidos, em uma aplicação que seja ao mesmo tempo útil e divertida. Ao desenvolver uma aplicação web, buscamos não apenas implementar a funcionalidade desejada, mas também resolver desafios relacionados à compatibilidade entre navegadores, adequação a diferentes tamanhos de tela e otimização de código. Além disso, é necessário garantir uma boa conexão com o banco de dados e a integração eficiente com APIs.
Os problemas mencionados serão solucionados ao longo do desenvolvimento deste trabalho, com o suporte de documentação técnica e livros especializados no assunto. Todas as pesquisas serão realizadas com base em fontes confiáveis, desde a escolha das ferramentas a serem utilizadas e o modelo de banco de dados, até a definição de design patterns a serem aplicados.
2 REVISÃO BIBLIOGRÁFICA
Para entender melhor sobre o projeto vamos contextualizar e trazer uma base conceitual sobre as ferramentas utilizadas para o desenvolvimento do projeto.
2.1 Sistema Web
O sistema web é um conjunto de ferramentas que vão além de apenas código, tem contato com servidores e redes de computadores também. Além disso, ele precisa de um terceiro para funcionar, que no caso são os navegadores, hoje em dia podemos acessar um sistema web de qualquer lugar com acesso à internet, TV, tablet, celular, computador e outros.
“O poder da Web está na sua universalidade. O acesso por todas as pessoas, não obstante a sua incapacidade, é um aspecto essencial.” (Berners-Lee, Tim, 2000).
Esse conjunto de componentes que formam o sistema web é fundamental para esse trabalho, ele envolve estratégias que desempenham papeis para automatizar processos, facilitando a coleta de dados e a conexão entre partes.
“Servidores Web são especiais computadores que estão constantemente conectados à Internet e são otimizados para enviar páginas da web para as pessoas que os solicitam.” (HTML & CSS, 2011, p.7)¹.
2.2 JavaScript
Javascript é uma linguagem de programação essencial para o desenvolvimento web, ele desempenha um papel fundamental na criação de interações, principalmente dinâmicas nos navegadores. Desde sua criação em 1995 por Brendan Eich, Javascript evoluiu significativamente, tornando-se uma das tecnologias mais amplamente utilizadas na construção de aplicações web.
No seu uso web essa linguagem pode ser utilizada tanto no lado do cliente, que é chamado de front end, quanto no lado do servidor que é chamado de backend. No frontend, frameworks populares como React, Angular e Vue.js permitem o desenvolvimento de interfaces de usuário complexas e escaláveis. No backend, o Node.js possibilita a criação de servidores web altamente eficientes e escaláveis, unificando o ambiente de desenvolvimento.
“JavaScript é uma linguagem importante porque é a linguagem do navegador. Sua associação com o navegador a torna uma das linguagens de programação mais populares do mundo.” (JavaScript: The Good Parts, 2008, p.2).
2.3 Front End
O frontend, também conhecido como o lado do cliente, desempenha um papel crucial na criação de experiências digitais cativantes e funcionais na web moderna. Responsável pela apresentação e interação do usuário com um aplicativo ou site, o frontend atua como a ponte entre as ideias concebidas pelos desenvolvedores e as experiências tangíveis vivenciadas pelos usuários finais.
Ele também é responsável por garantir a acessibilidade e a usabilidade da aplicação, considerando aspectos como a compatibilidade com diferentes dispositivos e navegadores, a legibilidade do conteúdo e a navegabilidade intuitiva. Ao adotar práticas de design responsivo e acessível, os desenvolvedores podem garantir que suas criações sejam acessíveis a todos os usuários, independentemente de suas capacidades ou dispositivos de acesso.
3 DESENVOLVIMENTO
Para que a aplicação possa entregar todas as funcionalidades apresentadas, aqui está uma lista de requisitos que é necessário ter. Assim podemos ter uma visualização completa dos componentes utilizados nessa aplicação.
3.1 Requisitos Funcionais
Os requisitos funcionais vão definir as funcionalidades e comportamentos que a aplicação deve ter. Isso vai desde a autenticação de login até salvar a pontuação dos usuários. “Os requisitos funcionais são aqueles que estabelecem e descrevem as funcionalidades do sistemas desejadas pelos clientes, ou seja, retratam o que se espera que o software faça” (Engenharia de requisitos de Sistemas, 2017).
Quadro 1 – Requisitos funcionais para o desenvolvimento do sistema.
Fonte: CASSOLO, 2024.
3.2 Requisitos não funcionais
Os requisitos não funcionais são características que definem desempenho, confiabilidade, segurança e outras qualidades desejáveis para a aplicação. Elas não estão diretamente relacionadas à execução das funcionalidades específicas do sistema, mas tratam de como a aplicação deve se comportar em determinados aspectos, como tempo de resposta, usabilidade, escalabilidade, manutenção, compatibilidade, entre outros. São requisitos essenciais para garantir que a aplicação atenda a padrões de qualidade e desempenho esperados, influenciando diretamente na experiência do usuário e na eficiência da aplicação.
“Os requisitos não funcionais envolvem fatores para o sucesso do produtos a ser entregue porque atua diretamente com a satisfação dos usuários na operação do software” (Engenharia de requisitos de Sistemas, 2017).
Quadro 2 – Requisitos não-funcionais para o desenvolvimento do sistema.
Fonte: CASSOLO, 2024.
3.3 Arquitetura da Aplicação
A arquitetura desta aplicação utiliza tecnologias e frameworks que tem como base o JavaScript. Adotamos o modelo de arquitetura cliente-servidor, utilizando a biblioteca ReactJS para o desenvolvimento da camada front end, o NextJS para a construção da API e o gerenciamento de rotas na camada back end, o PrismaJS para o ORM (Mapeamento Objeto-Relacional) e para a camada de banco de dados o MongoDB como um banco de dados do tipo não relacional.
3.3.1 Front End (REACTJS)
A camada front end é a apresentação da aplicação, ela é responsável pela visualização do produto que chamamos de interface do usuário (UI). Ela será desenvolvida com ReactJS, uma biblioteca JavaScript utilizada para a construção de interfaces de usuário dinâmicas e responsivas.
O ReactJS segue o paradigma de componentes, que são partes do código separadas para serem reutilizadas caso precisem. Isso facilita a manutenção e escalabilidade do código. Os componentes gerenciam o estado da aplicação e renderiza a interface de acordo com as interações do usuário. Para a gestão do estado global da aplicação, é possível utilizar bibliotecas com Redux ou Zustand.
O ReactJS possui uma alta performance devido a utilização do Virtual DOM, que garante uma renderização eficiente mesmo com interfaces mais complexas. Além disso, ele também permite a criação de Single Page Applications (SPAs) que contribui para uma navegação fluida e sem carregamentos de página.
Figura 1 – Componente botão utilizado na aplicação.
Fonte: CASSOLO, 2024.
Figura 2 – Layout principal.
Fonte: CASSOLO, 2024.
3.3.2 Back End (NEXTJS)
A camada back end é onde fica a lógica de negócios, ela é responsável por implementar a lógica da aplicação. Ela será desenvolvida com NextJS, uma biblioteca React que facilita a criação de aplicações web. Essa biblioteca oferece tanto renderização do lado do servidor quanto renderização estática. Ele permite que o mesmo código ReactJS seja utilizado tanto no lado do cliente quanto no do servidor, isso nos garante uma integração mais eficiente entre essas duas camadas.
Figura 3 – Requisição POST cadastro de usuário com NextJS.
Fonte: CASSOLO, 2024.
Nessa aplicação o NextJS será utilizado principalmente para a criação da API. Através de sua funcionalidade API Routes, podemos criar endpoints diretamente dentro da estrutura do NextJS, facilitando a comunicação entre o front end e o back end. cada rota API é associada a um arquivo com função assíncrona que lida com requisições HTTP.
Figura 4 – Requisição GET feita com NextJS.
Fonte: CASSOLO, 2024.
3.3.3 ORM (PRISMAJS)
Para interagir com o banco de dados, precisamos de um código que faça a conexão e criação das tabelas necessárias. O ORM (Mapeamento Objeto-relacional) é uma técnica que permite a interação entre o código da aplicação e o banco de dados, utilizando objetos e classes no lugar de consultas diretas em SQL. Nos sistemas tradicionais, os dados no banco são armazenados em tabelas, enquanto na aplicação são utilizados objetos para representar esses dados na memória. O ORM faz a ponte entre eles, permitindo que você manipule os dados usando objetos, sem precisar escrever SQL manualmente.
Nessa aplicação utilizaremos o PrismaJS em uma arquitetura NoSQL para que possamos utilizar o MongoDB como nosso banco de dados.
Figura 5 – Criação da tabela Usuários com PrismaJS.
Fonte: CASSOLO, 2024.
3.3.4 Banco de Dados (MONGODB)
Nessa aplicação utilizaremos o MongoDB, ele é um banco de dados NoSQL orientado a documentos. Seu armazenamento de dados é feito em formato BSON (Binary JSON), o que permite uma maior flexibilidade na estrutura e armazenamento de dados. A escolha desse banco foi feita pela fácil adaptação a dados não estruturados e também sua flexibilidade no modelo de dados faz com que a aplicação evolua de maneira ágil, sem a necessidade de ajustes complexos.
Figura 6 – Conexão PrismaJS com MongoDB.
Fonte: CASSOLO, 2024.
4 RESULTADOS
O projeto teve como resultado uma aplicação web com um design modesto porém com todas as funcionalidades essenciais de um site como exibição, criação, edição e exclusão de dados. A imagem a seguir mostra a tela principal do site:
Figura 7 – Tela principal.
Fonte: própria, 2024
Para fazer qualquer ação no site além da tela principal, o usuário precisa estar logado. Para isso foi criado um modal para login e caso o usuário não tenha cadastro, também tem o modal de registro. Esses modais podem ser acessados clicando nos botões no header da tela principal (Figura 8 e Figura 9).
Figura 8 – Modal de Login.
Fonte: própria, 2024
Figura 9 – Modal de Cadastro.
Fonte: própria, 2024
Após registrado o usuário consegue utilizar as funções da aplicação. A primeira citada é o de cadastro de Quiz, nessa tela o usuário pode criar o seu próprio quiz enviando os dados informados na página (Figura 10).
Figura 10 – Tela para criar um quiz.
Fonte: própria, 2024
Ao finalizar a inserção dos dados referentes ao quiz e clicar no botão criar, é aberto um modal para ser feito a revisão das informações para o registro do novo quiz, a alternativa com a letra verde é a alternativa que o usuário definiu como a correta (Figura 11).
Figura 11 – Modal de revisão das informações do quiz.
Fonte: própria, 2024
Além da criação do quiz, também é possível jogar ele, lendo as perguntas e definindo as alternativas corretas (Figura 12). E em seguida, aparece o modal com as alternativas que o usuário acertou e/ou errou, sendo alternativa escolhida errada com o texto na cor vermelha e alternativa correta com o texto na cor verde (Figura 13).
Figura 12 – Tela para jogar o quiz.
Fonte: própria, 2024
Figura 13 – Modal de resultado do quiz.
Fonte: própria, 2024
Também é possível visualizar sua lista de quizzes criados e alterar ou excluir. Abaixo está a figura mostrando a tela com a listagem dos quizzes:
Figura 14 – Tela com a listagem de quizzes criados pelo usuário.
Fonte: própria, 2024
Para editar um quiz foi utilizada a mesma tela para a criação do mesmo (Figura 10), com a diferença que ao clicar no botão editar a tela que será aberta irá mostrar dentro dos inputs as informações que já estão salvas nesse quiz atualmente, sendo possível editá-las e em seguida clicar no botão criar.
Nesse projeto também foi criado a funcionalidade de visualizar um ranking com a pontuação de cada jogador registrado, essa pontuação é relativa ao número de acertos de cada quiz.
Figura 15 – Tela de ranking.
Fonte: própria, 2024
5 CONCLUSÃO
Durante o desenvolvimento da aplicação utilizamos importantes e fundamentais funções para a criação de quaisquer aplicações. Foi implementado desde a parte visual até a conexão cliente servidor. O objetivo deste trabalho foi desenvolver uma aplicação, provando o conceito de que aplicações web podem ser simples e funcionais.
Neste trabalho desenvolvemos um produto muito importante para o crescimento e desenvolvimento intelectual das crianças, trazendo perguntas e respostas de conhecimentos gerais no qual muito servirá para elas no futuro.
REFERÊNCIAS BIBLIOGRÁFICAS
DUCKETT, J. HTML & CSS Design and Build Websites. 2011, p.7.
RIBEIRO, HORÁCIO. Engenharia de Requisitos de Sistemas. 2017, p.37.
REACT JS. Meu Primeiro Componente. Meta Open Source, 2024. Disponível em: https://pt-br.react.dev/learn/your-first-component Acesso em: 15 mai. 2024.
NEXT JS. Building Your Application. Vercel, 2024. Disponível em: https://nextjs.org/docs/app/building-your-application Acesso em: 15 mai. 2024.
PRISMA JS. Getting started. Prisma Data, 2024. Disponível em: https://www.prisma.io/docs/getting-started/quickstart-sqlite Acesso em: 15 mai. 2024.
PRISMA JS. Start from scratch with MongoDB. Prisma Data, 2024. Disponível em: https://www.prisma.io/docs/getting-started/setup-prisma/start-from-scratch/mongodb-typescri pt-mongodb Acesso em: 15 mai. 2024.
MONGO DB. Documentação do MongoDB. MongoDB, 2024. Disponível em: https://www.mongodb.com/pt-br/docs/ Acesso em: 15 mai. 2024.
KURNIAWAN, AGUS. Object-Relational Mapping (ORM): MongoDB, Mongoosejs and Node.js By Example. 2012.SOMMERVILLE, I. Software Engineering. Addison-Wesley, 2011.
1Graduando do Curso de Sistemas de Informação da Universidade de Araraquara – UNIARA. Araraquara-SP. E-mail: vrcassolo@uniara.edu.br
2Orientador. Docente Curso de Sistemas de Informação da Universidade de Araraquara- UNIARA. Araraquara-SP. E-mail: fddallilo@uniara.edu.br
3Coorientador. Economista e Advogada. Docente Curso de Sistemas de Informação da Universidade de Araraquara- UNIARA. Araraquara-SP. E-mail: fflorian@uniara.edu.br