Executando verificação de segurança...
2
4rthur
3 min de leitura ·

Meu primeiro grande progeto "programacional"/Ganhei um 10 no trabalho da escola

Começo
Este ano, entrei no ensino médio e agora tenho várias matérias novas (para não dizer inúteis). Uma dessas matérias é o Projeto Integrador, onde a professora nos apresentou o trabalho do trimestre: faríamos um projeto para a escola.

No começo, até pensei em algo como um blog da escola ou um site de avisos, mas acabei deixando essa ideia de lado e seguindo para algo mais simples, prático e que me garantisse a nota necessária para passar.

Porém, ao longo do desenvolvimento dessa outra ideia genérica, surgiu entre mim e meu amigo a ideia de fazermos um site de abaixo-assinados para a escola. No momento, adorei a ideia, então fomos com tudo. O problema é que sou iniciante em programação e, embora já tenha contato com ela há um bom tempo, nunca me aprofundei muito em nada (já passei por PHP, C e o básico de desenvolvimento web). Então fiquei preocupado com o processo de produção. Pensei em várias coisas como segurança, arquitetura do projeto e outros termos dos quais eu nem sabia o significado. E para piorar, do grupo, eu era quem programava melhor. :(

Para começar, fiz uma estrutura básica para ser a home (naquele estilo: fundo preto e letrinhas brancas para não machucar os olhos) e enfrentei o primeiro desafio: eu queria que, além dos abaixo-assinados, tivesse uma área de chat. Um tempo atrás, eu tinha feito um chat básico em PHP, onde tudo era armazenado em um .txt, mas isso não era nada escalável. Além disso, eu hospedaria o projeto no GitHub Pages. Por conta do prazo, tive que recorrer à IA e pedi ajuda para criar um chat ligado ao Firebase.

Depois de fazer o chat (me envergonho de ter usado a IA), tive que implementar os abaixo-assinados. Mais uma vez, precisei recorrer à IA. Durante o projeto, percebi que eu não sabia nada — ou que, pelo menos, ainda tenho MUITA coisa para aprender. No final, meu colega sugeriu mudar o visual, deixando algo mais harmônico, já que seria usado por pessoas comuns. E, novamente, precisei da IA, dessa vez para adicionar animaçõezinhas básicas em CSS.

Ao examinarem o repositório do projeto, vocês encontrarão uma bagunça sem fim. Acabei me atrapalhando e, em vez de padronizar o CSS, deixei cada pasta com seu próprio arquivo. A mesma coisa aconteceu com o JS, e tudo acabou ficando em arquivos únicos (alguns com mais de 500 linhas), o que tornou a manutenção um pesadelo. E, para piorar, a segurança simplesmente não existe. Por falta de organização, se você der um Ctrl + U, consegue ver a chave da API. :/

Terei que organizar todo esse projeto futuramente, já que ele está uma completa anarquia. Mas consegui entregar o trabalho a tempo. Mesmo tendo usado IA, atropelado processos e feito uma péssima otimização no Firebase (um banco separado para cada abaixo-assinado), consegui tirar nota 10. A professora achou muito interessante, inclusive.

E esse é o final da jornada na qual construí o Sign There e consegui uma bela nota no Projeto Integrador. No futuro, terei que corrigir milhares de detalhes, mas ainda assim estou feliz por ter concluído o meu primeiro "grande projeto".

Muito obrigado a todos os leitores!

Link do repositório: https://github.com/Buddhinha/sign-there
Me segue lá no GitHub (please): https://github.com/Buddhinha/

Carregando publicação patrocinada...
2

Cara, que projeto legal!! Principalmente pra você que são iniciantes

Mas mano, tira urgentemente aquela chave de API dali!!!! Na verdade, desative aquela chave do seu firebase, porque ela já foi vazada. Existem bots que escaneam o github inteiro por chaves de APIs, então a sua já foi vista com toda certeza.

Você já viu as soluções de cloud funcions da google??

[edit]
Talvez você nem precise de functions, eu acho que a solução de auth (https://firebase.google.com/docs/auth?hl=pt-br) serveria pra você. O usuario faria login, desse jeito ele terá acesso mais limitado de usuário.
Mas eu posso tá errado! Estou me baseando em outro serviço parecido inspirado no firebase, e que tem isso

Mas de qualquer jeito, esconda essas chaves de API!!!