REGISTRO DOI: 10.69849/revistaft/fa10202511271801
Pedro Gustavo Belarmino
Professor Orientador: Felipe Diniz Dallilo
RESUMO
Este trabalho apresenta o desenvolvimento de uma plataforma web informativa para o Grupo Escoteiro Araraquara José Luiz Torquato, com o objetivo principal de centralizar as informações institucionais e educacionais do grupo, além de otimizar o controle das inscrições de jovens e adultos voluntários. Para o desenvolvimento da aplicação, foram utilizadas as tecnologias ReactJS, responsável pela construção da interface e experiência do usuário, e Firebase, com o serviço de backend e banco de dados. O processo de desenvolvimento foi conduzido de forma interativa, com base em reuniões e validações junto com a equipe de comunicação e diretoria do grupo escoteiro, garantindo que o produto atendesse às necessidades e expectativas. Os resultados destacam a importância de aplicação de tecnologia modernas no fortalecimento da presença digital de instituições educacionais e comunitárias como o escotismo, trazendo maior acessibilidade, engajamento e visibilidade para suas ações e valores.
Palavras Chave: Escotismo. Desenvolvimento Web. ReactJs. Firebase. Comunicação Digital.
ABSTRACT
This paper presents the development of an informational web platform for the Araraquara Scout Group José Luiz Torquato, with the main goal of centralizing the group´s institutional and educations information while improving the management of registration for young members and adult volunteers. The application was developed using ReactJS, responsible for building the user interface and experience, and Firebase, employed as a backend and database service to ensure security. The development process was conducted iteratively, based on meetings and validations with the communication and leadership teams of the scout group, ensuring that the final product met all the identified needs. The outcomes highlight the importance of applying modern web technologies to strengthen the digital presence of educational and community institutions such as Scouting, promoting greater accessibility, engagement, and visibility for their initiatives and values.
Keywords: Scouting. Web Development. ReactJS. Firebase. Digital Communication.
1 INTRODUÇÃO
1.1 Contextualização
O movimento escoteiro surgiu em 1907, pelo inglês Baden-Powell, que aproveitou elementos presentes na sua vida militar, como autodisciplina, iniciativa e técnicas que seriam úteis na vida e no desenvolvimento dos jovens para criar um movimento educacional.
A partir dessa aprendizagem e habilidades adquiridas enquanto esteve na Índia e na África, escreveu em 1899 o livro chamado “Ajudas à Exploração Militar” (Aids To Scouting) que explicava técnicas de exploração e informações sobre a vida em campo. O livro se tornou referência utilizado por jovens ingleses para se divertir e viver novas aventuras.
Notando o interesse dos jovens em aprender as técnicas descritas, Baden-Powell se dedicou a adaptá-lo para ser utilizado em escolas britânicas. E foi assim, reunindo as experiências e atividades ao ar livre, que criou um estilo de vida que passou a ser utilizado na educação e formação dos jovens: o Escotismo.
A União dos Escoteiros do Brasil (UEB), foi fundada em 1924 como uma associação sem fins lucrativos de caráter educacional, cultural, beneficente e filantrópico que congrega todos que praticam o escotismo no Brasil. A UEB é a única organização brasileira reconhecida pela Organização Mundial do Movimento Escoteiro.
No município de Araraquara, estado de São Paulo, o “Grupo Escoteiro Araraquara” foi criado em 1972 e, em 2011 foi homenageado a José Luiz Torquato – um chefe escoteiro exemplar, reconhecido por sua dedicação, alegria e superação -, recebendo seu nome atual: Grupo Escoteiro Araraquara José Luiz Torquato.
1.2 Necessidade/Oportunidade
O Grupo Escoteiro Araraquara José Luiz Torquato tem se tornado cada vez mais relevante para a região de São Paulo. Esse cenário evidencia a oportunidade de desenvolver uma plataforma para centralizar todas as informações e acessos que dizem respeito ao grupo.
Nesse contexto, surge a oportunidade de desenvolver um site informativo do Grupo Escoteiro, um lugar onde todos possam acessar para conhecer sua história, se atualizar sobre os atuais eventos e acontecimentos e, para aqueles que ainda não fazem parte, entrar em contato para fazer parte da fraternidade.
1.3 Problema da Pesquisa
Atualmente, a divulgação do Grupo Escoteiro Araraquara José Luiz Torquato acontece principalmente por meio do Instagram e do Facebook. Apesar de serem amplamente utilizados, esses meios possuem limitações quanto à organização e permanência das informações, dificultando o acesso a conteúdos específicos e a centralização de dados sobre o grupo. Diante disso, surge a necessidade de desenvolver uma plataforma que complemente e otimize a divulgação do grupo, proporcionando um espaço onde todas as informações possam ser acessadas de forma clara e estruturada. Dessa forma, surge a seguinte questão: como a criação de um site informativo pode contribuir para a centralização e acessibilidade das informações do grupo escoteiro, facilitando o contato com novos interessados e fortalecendo a comunicação com a comunidade?
1.4 Objetivo Geral
O objetivo geral deste projeto é desenvolver uma página informativa para divulgar o grupo e propagar informações sobre a União dos Escoteiros do Brasil, tornando-as mais acessíveis para o público geral, além de aumentar o contato dos interessados e pais dos membros jovens do grupo com os chefes.
1.5 Objetivos Específicos
Para atingir o objetivo geral, este trabalho possui os seguintes objetivos específicos:
- Mapear os requisitos necessários para o desenvolvimento do projeto.
- Escolher os recursos e tecnologias necessários para desenvolver o projeto da maneira mais eficiente possível.
- Desenvolver o sistema atingindo todos os requisitos feitos.
- Deixar o sistema acessível ao público.
- Avaliar sua recepção.
1.6 Justificativa
A criação desse projeto se justifica pela necessidade de centralizar e organizar as informações atualmente dispersas nas redes sociais que, embora eficazes pela comunicação direta, se limitam em termos de permanência do conteúdo e organização. O crescimento e a relevância do grupo em relação à região de São Paulo demandam uma plataforma mais robusta e acessível que permita:
- Divulgação clara e permanente da história ,valores e atividades do grupo.
- Facilitação do contato para novos interessados, pais e membros.
- Fortalecimento da comunicação com a comunidade, oferecendo um canal oficial e organizado para eventos, notícias e informações institucionais.
1.7 Método de Desenvolvimento
O desenvolvimento deste sistema seguirá etapas estruturadas, começando pela elaboração dos requisitos funcionais, bem como o levantamento das tecnologias necessárias para o desenvolvimento e a montagem do cronograma. Em seguida se iniciará a elaboração do projeto, consultando líderes do Grupo Escoteiro sempre que for necessário fazer algum ajuste durante o avanço do mesmo. Após a finalização, será feita a apresentação do sistema, garantindo que todas as expectativas foram devidamente alcançadas. Por fim, o site será disponibilizado para o público geral, assim, finalizando oficialmente o projeto.
2 Revisão Bibliográfica
A Linguagem de Marcação de Hipertexto (HTML) é uma linguagem de computador que compõe a maior parte das páginas web e dos aplicativos online. Um hipertexto é usado para referenciar outros textos, enquanto uma linguagem de marcação é composta por uma série de marcações que dizem para os servidores da internet qual é o estilo e a estrutura do documento.
O JavaScript é uma linguagem de programação que permite a implementação de itens complexos em páginas web, mostrando conteúdos que se atualizam em um intervalo de tempo, mapas interativos, gráficos animados, etc.
O CSS é uma linguagem de folhas de estilo que define a disposição e o layout dos elementos de uma página. A linguagem é responsável pela formatação do que será exibido pelo navegador. Ou seja, o design, as cores, links e as fontes, permitindo modificar o visual de vários elementos ao mesmo tempo.
O Tailwind CSS é um framework CSS de código aberto que se destaca por sua abordagem única de design utilitário. Em vez de fornecer estilos pré-estilizados para elementos específicos, ele fornece uma série de classes utilitárias que podem ser diretamente aplicadas aos elementos HTML para estilizá-los. Essas classes representam propriedades CSS individuais, como margens, preenchimentos, cores, tamanhos de fonte, alinhamentos
O React é uma biblioteca da linguagem de programação JavaScript que se baseia em três pilares essenciais: componentes, JSX e fluxo de dados. Os componentes são blocos reutilizáveis e modulares que compõem a tela que o usuário acessa, sua usabilidade permite uma estrutura organizada e de fácil manutenção. O JSX é uma extensão de sintaxe que mistura as linguagens HTML e JavaScript, tornando o código mais declarativo e intuitivo. Já o fluxo de dados, por ser unidirecional, garante que as mudanças de estado sejam totalmente previsíveis, evitando problemas de sincronização e facilitando a depuração.
Entre as vantagens do React, se destacam o desenvolvimento ágil, graças à componentização e ao JSX, e o alto desempenho em suas aplicações complexas, já que o React otimiza a renderização. Além disso, sua arquitetura modular facilita a escalabilidade, sendo amplamente adotado por grandes empresas como Facebook (seu criador), Netflix e Airbnb. A existência de uma comunidade ativa também é um grande ponto, oferecendo suporte, bibliotecas adicionais e recursos voltados à aprendizagem.
Além do uso de interfaces web, o React se expandiu para outras áreas, como desenvolvimento mobile com o React Native e aplicações server-side (Parte da aplicação que é executada no servidor, também conhecida como Back-End). Seu ecossistema inclui ferramentas para consultas eficientes de APIs (Conjunto) de regras e protocolos que permitem uma comunicação entre aplicativos, ampliando ainda mais suas possibilidades.
As linguagens de programação back-end lidam com os bastidores das funcionalidades das aplicações web. É o código que conecta a internet com o banco de dados, gerencia as conexões dos usuários e alimenta a aplicação web. O back-end trabalha em conjunto com o front-end para entregar o produto para o usuário final.
Front-end é o termo utilizado para se referir a interface gráfica do projeto. Ou seja, é onde se desenvolve a aplicação com a qual o usuário irá interagir diretamente, seja em softwares, sites, aplicativos, etc. Se um site ou sistema de gestão não é simples de entender ou não possui fácil usabilidade, então a aderência do usuário será menor. O papel do desenvolvimento front-end é facilitar a usabilidade e garantir que a ferramenta realmente funcione conforme o esperado.
O Firebase é uma plataforma da Google de backend como um serviço, ou seja, ela fornece uma infraestrutura de backend pronta para quem desenvolve aplicativos. Ao usar o firebase, os desenvolvedores podem se concentrar na criação da aplicação em si e focar menos na parte de configuração e manutenção dos servidores.
A Vercel é uma plataforma de hospedagem voltada para o deploy de aplicações front-end, oferecendo um processo de implantação simples, rápido e totalmente integrado com repositórios de código. Seu diferencial está na forma como gerencia o frontend de maneira independente do backend, permitindo maior flexibilidade e desempenho nas aplicações web.
3 DESENVOLVIMENTO
3.1 Levantamento de Requisitos
O levantamento de requisitos é uma etapa fundamental no desenvolvimento de sistemas, sendo responsável por identificar, compreender e documentar as necessidades dos usuários e os objetivos do projeto. Essa atividade tem o intuito de alinhar expectativas e garantir que o sistema final atenda às demandas reais.
Para este projeto, foi realizada uma reunião com o líder da equipe de comunicação do grupo escoteiro. Durante a mesma, foram discutidas funcionalidades esperadas para o site, o público-alvo, os tipos de conteúdo a serem publicados e os critérios de usabilidade e a identidade visual. A partir desse encontro, foi elaborado um documento contando os requisitos iniciais definidos para o sistema.
O documento completo gerado durante essa reunião está disponível no Anexo 1 deste trabalho.
ANEXO 1 – LEVANTAMENTO DE REQUISITOS
FONTE: O AUTOR
Após o levantamento de requisitos, foi possível desenvolver um cronograma que definiria as próximas etapas do desenvolvimento.
3.2 Cronograma
FIGURA 2 – CRONOGRAMA DE ATIVIDADES
| Atividades/Meses | Cronograma do Projeto | ||||||||||
| Fev | Mar | Abr | Mai | Jun | Jul | Ago | Set | Out | Nov | Dez | |
| Escolha de tema | x | ||||||||||
| Escolha do orientador | x | ||||||||||
| Discussões com orientador | x | x | x | x | x | x | x | x | x | ||
| Definir os requisitos | x | x | |||||||||
| Desenvolver o Sistema | x | x | x | x | x | x | x | x | x | ||
| Revisão bibliográfica | x | x | x | x | x | x | x | ||||
| Entrega avaliativa qualificação | x | ||||||||||
3.3 Escolha de Tecnologias
A escolha das tecnologias utilizadas no desenvolvimento deste projeto foi baseada em critérios como curva de aprendizagem, facilidade de manutenção, ampla documentação, aderência ao escopo do sistema e experiência prévia do desenvolvedor. O objetivo foi garantir um desenvolvimento ágil, com boas práticas e sustentação a longo prazo.
No frontend, o React foi selecionado por sua estrutura modular que facilita a manutenção e reutilização de componentes, além de permitir uma organização clara do código. A ampla comunidade e a vasta documentação reduzem o tempo de desenvolvimento e agilizam a resolução de eventuais problemas. Outro fator determinante foi a familiaridade prévia do desenvolvedor com a biblioteca, o que contribuiu para maior produtividade.
Para o manejo do lado do servidor, o Firebase foi escolhido como ferramenta por automatizar e facilitar a criação, manutenção e automação dos serviços, assim, permitindo destinar a maior parte do tempo do desenvolvimento na aplicação em si, economizando esforços e mantendo a segurança e eficiência dos serviços.
Complementando essa escolha, o Cloud Firestore surgiu como a opção ideal para a camada de banco de dados, por ser um serviço nativo do ecossistema Firebase. Essa integração garante que a comunicação entre o back-end e o banco de dados ocorra de forma fluida, segura e totalmente escalável.
3.4 Modelo de Interface
O modelo de interface do sistema foi desenvolvido inicialmente em forma de protótipo no software Figma, seguindo a identidade visual previamente estabelecida pelo grupo escoteiro. Esse protótipo teve como objetivo validar, de forma visual, a disposição dos elementos, a organização das páginas e a experiência do usuário.
O design considerou aspectos de usabilidade, clareza na navegação e alinhamento com a estética já utilizada em materiais de comunicação do grupo. Dessa forma, buscou-se criar um ambiente digital coerente e acolhedor para os usuários, fortalecendo a identidade visual da instituição.
Os protótipos elaborados encontram-se disponíveis nos anexos deste trabalho.
ANEXO 2 – MODELO DE INTERFACE FIGMA
3.5 Desenvolvimento da Aplicação
Com o protótipo aprovado, iniciou-se a fase de desenvolvimento da aplicação. O processo consistiu na tradução das telas desenhadas no Figma para o ambiente de programação, utilizando o React no frontend e o Firebase integrado ao Cloud Firestore no backend.
Durante essa etapa, foi fundamental a participação contínua dos diretores do grupo escoteiro, que forneceram orientações e feedbacks sobre as funcionalidades implementadas. A cada iteração do desenvolvimento, eram validadas tanto as integrações com o sistema atual utilizado pelo grupo quanto a aderência às necessidades previamente levantadas.
Essa colaboração garantiu que o produto final refletisse fielmente os requisitos levantados, mantendo a consistência entre o design e a aplicação prática, além de assegurar que a solução desenvolvida atendesse às expectativas dos usuários finais.
3.6 Configuração de Ambiente
Após a finalização do desenvolvimento e a validação das funcionalidades do sistema, iniciou-se a etapa de configuração do ambiente de hospedagem, com o objetivo de disponibilizar a plataforma ao público de forma estável, segura e de fácil acesso.
Para isso, o projeto foi hospedado na plataforma Vercel, por oferecer integração direta com repositórios do GitHub, alta performance de carregamento e suporte a atualizações automáticas. Essa escolha permitiu simplificar o processo de publicação e garantir que qualquer atualização futura no código seja refletida rapidamente no ambiente de produção.
4 CONCLUSÃO
O desenvolvimento da plataforma web para o Grupo Escoteiro Araraquara José Luiz Torquato representou uma solução eficaz para centralizar e organizar informações institucionais, educacionais e administrativas, suprindo a carência de um meio digital próprio e estruturado. A criação do site contribuiu significativamente para o fortalecimento da identidade digital do grupo, proporcionando uma comunicação mais acessível e permanente com a comunidade escoteira e o público geral.
Ao longo do processo de elaboração, foi possível aplicar conhecimentos de desenvolvimento web, desde o levantamento de requisitos até a implementação e validação do sistema, utilizando tecnologias modernas e amplamente reconhecidas, como ReactJS e Firebase. O uso dessas ferramentas se mostrou adequado às necessidades do projeto, garantindo desempenho, segurança e facilidade de manutenção.
A participação dos membros do grupo, especialmente da equipe de comunicação e da direção, foi essencial para alinhar o sistema às expectativas reais dos usuários. Essa colaboração reforçou a importância de unir a prática técnica ao contexto social e educacional do escotismo, demonstrando como a tecnologia pode atuar como um meio de apoio à gestão e à divulgação de iniciativas comunitárias.
REFERÊNCIAS
ALURA, O que é Firebase? Para que serve serve, principais características e um Guia dessa ferramenta Google. Disponível em <https://www.alura.com.br/artigos/firebase?srsltid=AfmBOoqgJNW0-McZThxNi3xDV7gfbC9I 7jbPmehlwxmZYcjZfj3Ex42S >. Acesso em: 17 set. 2025
BRASIL CODE, Tailwind CSS: O que é? Como usar? . Disponível em < https://www.brasilcode.com.br/tailwind-css-o-que-e-como-usar/>. Acesso em: 24 set. 2025
ESCOTEIROS DO BRASIL, Escoteiros do Brasil . Disponível em: <https://www.escoteiros.org.br/escoteiros-do-brasil/>. Acesso em: 12 mar. 2025.
ESCOTEIROS DO BRASIL, História . Disponível em: <https://www.escoteiros.org.br/historia/>. Acesso em: 12 mar. 2025.
HARVE, O que é Backend: Guia completo . Disponível em < https://]/blog/desenvolvimento-web/o-que-e-backend-guia-completo/#:~:text=As%20linguagens%20de% 20programa% C3% A7%C3%A3o%20backend,produ to%20para% 20o%20usu%C3%A1rio%20final .>. Acesso em 10 jun. 2025.
HOSTINGER TUTORIAIS, O Que é HMTL: o Guia Definitivo Para Iniciantes. Disponível em: <https://www.hostinger.com.br/tutoriais/o-que-e-html-conceitos-basicos>.Acesso em: 31 mar. 2025.
MDN WEB DOCS, O Que é JavaScript? . Disponível em: <https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Scripting/What_is_JavaScript>. Acesso em: 31 mar. 2025.
Skills Tecnologias, Desvendando o React . Disponível em: <https://skillstecnologicas.com/ desvendando-o-react-js>. Acesso em: 31 mar. 2025.
TECNOBLOG, O que é CSS? Conheça os tipos dessa linguagem de estilos. Disponível em <https://tecnoblog.net/responde/o-que-e-css-cascading-style-sheets/>. Acesso em: 24 set. 2025
TOTVS, Front end: O que é, como funciona e qual a importância . Disponível em: < https://www.totvs.com/blog/developers/front-end/ >. Acesso em 10 jun. 2025
VERCEL, What does Vercel do? . Disponível em < https://vercel.com/blog/what-is-vercel >. Acesso em 30 /10/2025.