Executando verificação de segurança...
20

💡 Ideia maluca de projeto: como você resolveria este problema?

👋 Salve galera, recentemente eu estava pensando como colocar em prática uma ideia maluca de projeto. Gostaria de saber a opinião de vocês a respeito e se ela funcionaria na prática ou não.

O projeto

Você precisa criar uma página que listará produtos para uma loja. Você não pode utilizar um back-end e deve utilizar a Vercel para Deploy, anulando custos. Sua página deve acessar um arquivo JSON que contém todos os produtos, funcionando como uma forma de API.

https://loja.com
Página com os produtos

https://api.loja.com/produtos.json
API JSON com os produtos

O problema

A princípio, tudo certo, pois podemos utilizar a Vercel para hospedar o front-end, que será uma página estática, com um conteúdo dinâmico através da API JSON. Porém, sua loja terá um administrador que poderá alterar o JSON com os produtos. Como fazer isso sem ter um back-end?

Proposta de resolução

Podemos criar um repositório no GitHub que vai hospedar o JSON com os produtos. Então, fazemos deploy desse repositório à Vercel.

https://api.loja.com/produtos.json
API JSON com os produtos

Para realizar alterações no arquivo, podemos criar uma página com um formulário que irá interagir com a API do GitHub (pedindo um TOKEN de autenticação como forma de segurança), efetuando commits a fim de alterar o JSON.

https://admin.loja.com/
Página com formulário para alterações

Após isso, a Vercel vai efetuar um novo deploy do arquivo JSON atualizado. Consequentemente, nossa página listará os produtos de maneira atualizada.

Mas por que não utilizar um back-end?

Eu sei, seria muito mais fácil. Porém, não conheço nenhum serviço bom para hospedar um gratuitamente, sem que hajam várias limitações. Ainda estou estudando, gosto de criar ideias malucas que consomem o mínimo de recursos possíveis. Então, decidi realizar esse desafio.

Conclusão

Antes que me falem, eu sei que não é permitido utilizar o plano gratuito da Vercel para vender produtos, se trata apenas de um exemplo educacional.

Você tem alguma sugestão?
Como você faria esse projeto?
Conhece outras alternativas?
Bora discutir nos comentários!

E caso eu tenha falado algum conceito errado, me perdoem, estou estudando ainda 😂.

Carregando publicação patrocinada...
6

Curti bastante sua ideia, de verdade. Como você disse, é uma ideia maluca, mas vejo vários méritos nela. O principal é a simplicidade que você busca em meio a essa complexidade toda. A ideia de usar o GitHub como uma espécie de back-end para armazenar o JSON dos produtos é criativa e mostra uma abordagem estrutura para resolver um problema, e isso é uma habilidade fundamental.

Mas, você falou sobre "consumir o mínimo de recursos possíveis", mas isso parece se aplicar apenas ao custo monetário direto. O uso do GitHub para commits e merges, e depois sincronizar isso com a Vercel, acaba sendo um processo com um overhead enorme. Você já parou para pensar na quantidade de poder de processamento necessário para cada commit e merge no Git, para enviar isso aos servidores do GitHub, e toda a computação adicional que a Microsoft vai fazer sobre isso? Sem mencionar a transmissão de dados para a Vercel. Seu arquivo JSON, que inicialmente é pequeno, pode acabar gerando uma quantidade de dados transmitidos e ciclos de CPU consumidos que é difícil até de imaginar.

Mas, mesmo sendo uma solução um tanto quanto dispendiosa em termos de recursos computacionais, ela também é incrivelmente versátil. Agora, se você quer realmente economizar recursos, eu tenho uma sugestão. Uma ideia ainda mais maluca!

Você pode usar um Raspberry Pi, um computador antigo ou mesmo um desses Orange Pi Zero3, que você compra por uns 50 reais da China. Qualquer coisa serve, até um smartphone sem uso. Conecte-o à sua rede doméstica, configure um DNS dinâmico, um servidor web e FTP. Pronto. Em vez de enviar esse arquivo JSON para o outro lado do universo, você simplesmente o transfere para essa máquina. Bem mais simples, não acha?

Você cria sua própria mini infraestrutura, mantendo o controle total e reduzindo drasticamente a quantidade de dados transmitidos e o processamento necessário. Além disso, é uma ótima oportunidade de aprendizado sobre redes, servidores web e sistemas operacionais. E o mais legal? Você faz tudo isso consumindo muito menos recursos.

E aí, o que acha dessa abordagem?

3

Que sensacional! Realmente, essa solução usando o GitHub seria para reduzir custos diretos. Não havia parado para pensar sobre esse lado computacional. Se considerarmos isso, deve haver custos de processamento muito altos e uma "grande volta" por um simples arquivo JSON.

Utilizar um Raspberry Pi ou um celular antigo para criar uma mini infraestrutura própria também parece ser uma boa alternativa. Essa seria de fato uma abordagem mais econômica e faria com que eu tivesse mais controle sobre o sistema, fora o conhecimento adquirido. Obrigado pelas dicas ;)

1

Acho válida e trabalhosa, será que esse seu device escala? será que ele aguenta tráfego sem pifar?

E em vez de um ftp pq n usar um sqlite?

lembre-se o tradeoff disso é conciliação: vc adicionou um novo produto, quanto tempo vc acha que demora pra vc invalidar os caches dos navwgadores dos usuarioa e garantir que estão com a nova versâo.

Mas sim apoio a ideia do self hosting com um pc velho ou algo do tipo, inclusive é interessante brincar com coiaas assim w vender pra micro e ppequenos negocios. nem todo mundo precisa de uma escala de nuvem e um orange pi ou um pc celerom veio de guerra é mais barato do que oagar uma nota pra aws fora que vc está sob seu controle.

isso só é mais complicado se vc depender de armazenamento de dados

5

Use a 000webhost, é gratuita. É a versão free da Hostinger, possui um banco de dados MySQL.

Penso que o problema maior seja em rodar linguagens de backend de graça, mas existe o PHP e nesse ponto específico é a linguagem universal do backend, porque é onipresente, barata e roda em qualquer lugar.

1

Sim, a 000webhost é um lugar bacana para hospedagem PHP + MySQL. Porém, ela já me deixou na mão algumas vezes, por isso criei essa ideia maluca de um projeto sem back-end.

2
1
1

Eu tbm utilizo o free tier da Oracle. Rodo um docker na vps e coloco varios serviços la.

Por ter 3 processadores e 18GB de memoria no free tier, roda muito bem tudo que preciso, unico detalhe é a arquitetura arm, o que limita um pouco alguns poucas imagens prontas em docker... mas nada que criar a sua propria não resolva.

portainer

Para backend utilizo o pocketbase, gosto bastante dele.

pocketbase

2

minha sugestão é que você use php para fazer o backend. Usar o github para essa finalidade será muito improdutivo.

É possível usar um script php para alterar o arquivo json, dá pra pedir pro chatGTP te mostrar como fazer isso.

Hospedagem gratuita de PHP

1

Já conhecia o 000webhost, mas não confio muito nele pois já me deixou na mão algumas vezes 😅

Sobre utilizar a Vercel para rodar PHP, isso me deixou de queixo caído. Não fazia a mínima ideia de que isso era possível, com certeza é uma ótima alternativa para esse e outros projetos! Obrigado pelas dicas ;)

2

O Strapi provavelmente é a melhor opção porque ele é um headless CMS, é uma página de admin pronta pra você fazer todo o gerenciamento de conteúdo e ele já expõe uma API muito boa e com várias extensões (graphql por exemplo) para você consumir o conteúdo na sua página.

1

Que legal, não conhecia o Strapi. Dando uma breve pesquisada, vejo que seria interessante utilizar ele para criar uma API caso de fato fosse necessário um back-end. O único contra seria que isso aumentaria os custos, já que seria necessário contratar uma hospedagem para fazer deploy do back-end, contrariando a ideia original. Mesmo assim, gostei da simplicidade do Strapi, provavelmente irei utilizar em futuros projetos.

2

Salve refernando, achei muito massa sua ideia, para coisas simples nem sempre é preciso ter um super backend.

Uma sugestão para você além dos serviços que já mencionaram anteriormente, você pode usar a API do Google Sheets ou até serviços que abstraem um pouco mais como o Sheets DB. Dá pra criar muita coisa daora com isso hehe. Boa sorte nesse projeto e vá nos atualizando sobre aqui no TabNews. 🚀

1

SIMPLESMENTE SENSACIONAL 🤩! Sério, jamais iria imaginar que é possível utilizar uma planilha do Google Sheets como back-end e ao mesmo tempo banco de dados. Para esse projeto, deve ser a solução mais adequada, pois acaba sendo mais simples do que usar essa volta toda com o GitHub. Além disso, também podemos descartar a ideia de ter um formulário para modificar os produtos, já que o Google Sheets possui uma interface que qualquer um consegue usar.

2

Contribuindo com meus 20 centavos, na empresa que eu trabalho precisei montar um pequeno app web pra renderizar um monte de dados em json. Utilizei o Hygraph CMS, criei um arquivo json lá e puxo ele via GraphQL no front. Pro meu caso foi muito útil pois consigo ceder acesso à até 5 pessoas na plataforma, assim não fico responsável por manter os dados sozinho

1

Muito bacana seu caso. Pesquisando a respeito, vi que o Hygraph pode ser uma ótima solução para a minha ideia, já que ele também aceita arquivos (como imagens). Não sei o quão escalável é o plano gratuito desse serviço, mas parece ser confiável!

1

Eu gosto bastante. O limite do plano grátis é 1 milhão de chamadas de api por mês e 100gb de tráfego de assets. Acho a interface bem intuitiva e o playground pra montar a query é bem legal também

1

Gostei! Realmente é um limite bem generoso, vou montar um projetinho com ele para aprender mais sobre GraphQL, se você tiver algum repositório no GitHub para compartilhar, agradeço haha. Obrigado pela dica.

2

O GitHub vai te atender bem nessa sua ideia de "API Fake de Produtos", se json for publico não precisa nem fazer deploy pra Vercel, basta acessar o arquivo json direto.

Eu já faço isso em alguns projetos pessoais, usando arquivo json no github como uma base de features toggles, me atende muito bem.

Mas para melhorar ainda mais seu conhecimento, busque por algo mais factivel com o real, experimente Firebase ou Supabase como backend, já vai elminar muito trabalho.

1

É verdade, eu havia pensado em acessar o arquivo diretamente no GitHub. Porém, decidi complicar as coisas e subir um deploy na Vercel para ficar tudo bonitinho no domínio 😂. Legal pensar que você teve ideias parecidas com a minha ;)

2
1

Com certeza, é nisso que eu quero chegar! Gerar soluções simples para problemas simples. Não vejo necessidade de usar quilos de tecnologias, ferramentas, frameworks e bibliotecas para resolver um pequeno problema.

1

Como recomendação de plataforma gratuita, tenho essas duas:

Elas tem um certo foco no uso de Redis, mas se for para estudar é perfeito.

Outra coisa é que se for apenas para estudar, pega o cupon de $100 do diolinux na linode e testa. Sei que vai acabar e que talvez não seja essa a plataforma que você prefira, mas para você ter um real aprendizado acho válido se forçar um pouco a testar essas plataformas e aprender maneiras diferentes de fazer isso.

1
1

Se você já tem a intenção de usar a vercel, pq não fazer um backend simples hospedado na propria vercel? vai ser de graça do mesmo jeito.
E se é só pra servir um JSON e ter como um admin alterar ele, acredito que não terá problema algum usando a vercel.
Não sei o que vc vai usar pro frontend, se for react aproveite pra usar o Next e ter back e front no mesmo projeto. Ou vc pode ter projetos separados pro front e back, a vercel suporta varios frameworks de backend também. Experimente.

Se for o caso de usar um banco de dados, existem vários serviços gratuitos também: supabase, planetscale, surrealdb, xata, firebase, entre outros.

Um CRUD atraves de uma API simples feita em express por exemplo, que pode ser hospedada na vercel, resolveria seu problema. As vezes na hora de tentar simplificar demais, você pode acabar se complicando.

1

A vercel também aceita backend. Ela aceita aplicativo em node, então basicamente aceita qualquer coisa. Tem vários tutoriais ensinando a usar no YouTube.
Outra coisa, pra facilitar: você tem mais afinidade com react ou com vue? Ambos tem um framework com backend próprio que você pode utilizar.
Eu, particularmente, recomendo o vue, então sugiro que você pesquise por nuxt. Caso prefira react, pesquise por Next. Ambos funcionam de boa na vercel e possuem backend próprios.
Mais uma: Caso deseje, também existem vários backends grátis e você só precisará migrar se aumentar muito os acessos. Pesquise aí por supabase, render.com, fly.io.
Mais uma coisa: as grandes clouds possuem planos grátis com limites bons, possuem créditos pra iniciar etc.
Se procura por banco de dados, tem tbm alguns serviços com planos iniciais grátis, como o próprio supabase, crockach db, planetscale etc.

1

Não sabia que a Vercel aceitava back-end. Sei que eles possuem aquelas Serverless Functions, as quais não entendo muito sobre ainda. Preciso dar uma estudada a respeito. Sobre os frameworks, comecei a aprender o Next recentemente através do curso do Deschamps, estou achando bem massa. Obrigado pelas dicas de serviços ;)

1
1

A plataforma Render tem um plano gratuito bem generoso, já hospedei uns 3 backends lá sem nenhum custo. A desvantagem do plano grátis é que a API dorme se ficar 15 minutos sem requisições, mas é possível contornar isso de algumas formas...

1
1
0
1

Já ouvi falar do Render, a minha preocupação com esses serviços é justamente essa, as limitações! Claro, não podemos reclamar de algo gratuito, quer algo bom? Pague. Mas de qualquer forma, é bem legal construir soluções baratas que realmente funcionam e são confiáveis, se é que você me entende.

1

Uma ideia um pouco menos maluca se está utilizando um meta framework e se é permitido de alguma forma executar código via server. É utilizar SQLite embarcado. O resultado é o mesmo. Porém infinitamente mais rápido. Apesar do node ter um dos parsers de json mais rápidos disponíveis, ainda é lento. Claro. Estou considerando continuar com sua ideia inicial.

1
1
1

Sim, eu havia pensado em utilizar um MongoDB. Porém, no caso dessa ideia, dá para deixar tudo mais simples, como puxar as informações de uma planilha no Google Sheets, sugerido pelo nosso amigo marlon nessa resposta aqui.

1

Contribuindo um pouco com a loucura, acho que o Blogger também pode ser útil em algumas situações mais simples.

  • É grátis
  • É possível vincular um domínio
  • Tem opções interessantes de personalização, inclusive podendo usar o próprio Java Script para alterar e remover qualquer coisa do Layout.
  • Dá pra upar vários tipos de arquivos de imagem.
  • Painel de controle simples.

É perfeitamente possível estilizar um blogger e deixar ele com cara de qualquer outra coisa, principalmente usando ele para fazer sites simples.

A gambiarra não tem limite.

1

Tem razão, o Blogger pode ser útil em alguns casos. É uma ferramenta bem legal e simples, já utilizei bastante no passado quando eu não sabia programar sites. Obrigado pela dica.

1

Se for pra criar ideias malucas já vi muitos malucos utilizando uma planilha do Google Spreadsheet de banco de dados. É bem melhor do que utilizar jsons e você ainda tem a facilidade de editar os dados diretamente da planilha, sem precisar utilizar ftp.

1
1

Caramba! Curti muito essa ideia, mesmo que para fins educacionais. gosto de coisas assim, com fins de aprendizados etc... Gostei ainda mais da ideia do parceiro que recomendo a mini infraestrutura.

1
0
2

Com certeza seria uma boa alternativa! Nunca estudei sobre Firebase, acredito que ele tenha um plano gratuito, correto? Realmente parece ser uma boa opção, devido à simplicidade. Não sei se ficou claro na postagem, mas meu intuito era justamente não utilizar um back-end direto, a fim de reduzir ou até zerar custos. No fim das contas, é só uma ideia maluca 😂

1
1

supabase é a alternativa opensource ao firebase. incluindo que tem um tier gratuito em nuvem muito generoso.
você cria o banco de dados em SQL (postgres) e ele gera a API/cli em node automaticamente.
para te ajudar embarcar mais rápido ele até te dá exemplso prontos com seu próprio modelo de dados.
eu uso em produção a cerca de 1 ano.
além disso ele integra de forma excelente com next/vercel. com alguns cliques tudo fica integrado.