Como Fazer

Como Criar um Gerador de Screenshots de URLs com Rowy e Firebase

Xavier

28 Mai 2025 • 4 min read

Introdução à Captura Automática de Screenshots de URLs

A capacidade de capturar screenshots de páginas da web automaticamente é uma ferramenta poderosa em diversas situações, desde a criação de thumbnails para conteúdo até o monitoramento de websites e a documentação de processos. Neste tutorial, exploraremos como construir uma função na nuvem utilizando Rowy, uma plataforma low-code para Firebase, que recebe uma URL e retorna um screenshot dessa página, armazenando-o no Firebase Storage. Esta abordagem simplifica o desenvolvimento e deployment de tal funcionalidade.

O que é o Rowy?

Rowy é uma plataforma open-source que oferece uma interface semelhante a uma planilha (como Airtable) para gerenciar dados no Firestore, além de facilitar a criação e o deployment de Cloud Functions diretamente de sua interface. Ele combina a flexibilidade do código com a facilidade do low-code, permitindo que desenvolvedores e equipes construam backends robustos de forma mais rápida e eficiente.

Por que Gerar Screenshots de URLs Automaticamente com Rowy?

Automatizar a captura de tela de URLs pode ser útil em vários cenários:

Criação de Thumbnails: Gerar automaticamente imagens de pré-visualização para artigos de blog, notícias ou qualquer link compartilhado.
Monitoramento Visual de Websites: Verificar periodicamente se um site está sendo exibido corretamente.
Geração de Relatórios: Incluir representações visuais de páginas web em relatórios.
Arquivo de Conteúdo: Manter um registro visual de como uma página aparecia em um determinado momento.
Suporte ao Cliente e QA: Capturar o estado de uma página durante um processo de troubleshooting ou teste.

Utilizar o Rowy para essa tarefa simplifica o processo, pois ele gerencia a infraestrutura do Firebase e o deployment das Cloud Functions necessárias.

Tutorial: Criando seu Gerador de Screenshots com Rowy e Firebase

Vamos ao passo a passo para construir essa solução, conforme demonstrado no vídeo de referência.

1. Configuração Inicial no Rowy

Após configurar seu projeto Rowy conectado ao seu projeto Firebase:

Crie uma nova tabela no Rowy. Por exemplo, nomeie-a como "url2image". Essa tabela será automaticamente vinculada a uma coleção no Firestore com o mesmo nome.

2. Definindo as Colunas para Entrada e Saída no Rowy

Dentro da tabela "url2image", você precisará de duas colunas principais:

Coluna de URL (Entrada):
- Nome: `url`
- Tipo: Short Text (ou URL, se disponível e preferível)
- Finalidade: Armazenar a URL da qual você deseja capturar o screenshot.
Coluna de Screenshot (Saída):
- Nome: `screenshot`
- Tipo: Derivative
- Finalidade: Armazenar a imagem do screenshot gerado. O tipo "Derivative" permite que o valor desta coluna seja calculado com base em outras colunas usando uma Cloud Function.

3. O Poder da Coluna Derivada no Rowy: A Cloud Function em Ação

Ao configurar a coluna `screenshot` como do tipo "Derivative", você precisará definir alguns parâmetros:

Listener Fields: Selecione a coluna `url`. Isso significa que a função será acionada sempre que o valor na coluna `url` de uma linha for adicionado ou alterado.
Output Field Type: Selecione "Image". Isso indica que o resultado da função será um arquivo de imagem que o Rowy tratará adequadamente.
Derivative Script: Aqui é onde a lógica da Cloud Function é escrita em JavaScript (Node.js). O script essencialmente fará o seguinte:
1. Receberá o valor da coluna `url` (por exemplo, `row.url`).
2. Utilizará uma biblioteca como Puppeteer (uma biblioteca Node que fornece uma API de alto nível para controlar o Chrome ou Chromium sobre o protocolo DevTools). O Puppeteer abrirá a URL em um navegador headless.
3. Capturará o screenshot da página.
4. Converterá o screenshot para um formato adequado (por exemplo, buffer de imagem PNG).
5. Utilizará a função utilitária do Rowy, `rowy.storage.upload.data()`, para fazer o upload do buffer da imagem para o Firebase Storage. Esta função lida com o upload e retorna um objeto de arquivo.
6. Retornará o objeto de arquivo, que o Rowy então armazena na coluna `screenshot`.
Um exemplo simplificado do código para o script derivado seria:
```
const derivative = async ({ row, ref, db, storage, auth, rowy, admin }) => {
  const puppeteer = require('puppeteer'); // Certifique-se de que o puppeteer está nas dependências
  if (!row.url) return null; // Não faz nada se a URL estiver vazia

  const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
  const page = await browser.newPage();
  await page.goto(row.url, { waitUntil: 'networkidle2', timeout: 0 });
  const imageBuffer = await page.screenshot({ encoding: 'base64' });
  await browser.close();

  const buffer = Buffer.from(imageBuffer, 'base64');
  
  // Gera um nome de arquivo único ou baseado na URL
  const fileName = encodeURIComponent(row.url) + '.png';
  const folderPath = ref.path; // Armazena na pasta da linha atual

  const file = await rowy.storage.upload.data(buffer, {
    folderPath: folderPath,
    fileName: fileName,
    contentType: 'image/png'
  });

  return file;
};
```
Nota: Para usar o Puppeteer em Cloud Functions, pode ser necessário ajustar as configurações de memória da função e garantir que todas as dependências do sistema operacional estejam disponíveis no ambiente de execução, se não usar um ambiente pré-configurado.

4. Deploy e Teste da Funcionalidade com Rowy

Após configurar a coluna derivada e adicionar o script, o Rowy oferecerá um botão para "Deploy". Clicar nele fará o build e o deploy da sua lógica como uma Google Cloud Function no seu projeto Firebase.
Uma vez que o deploy esteja completo, adicione uma nova linha na sua tabela "url2image" e insira uma URL válida no campo `url`.
Aguarde alguns instantes. A Cloud Function será acionada, processará a URL e a imagem do screenshot aparecerá na coluna `screenshot`.
Você pode verificar no seu Firebase Console que a imagem foi salva no Firebase Storage e o documento correspondente no Firestore (visível através do Rowy) contém a referência para essa imagem.

Vantagens da Abordagem com Rowy

Desenvolvimento Rápido: A interface low-code e os utilitários do Rowy aceleram significativamente o desenvolvimento.
Gerenciamento Simplificado: Tudo é gerenciado a partir da interface do Rowy, desde a estrutura dos dados até o código da Cloud Function.
Integração com Firebase: Aproveita todo o poder e escalabilidade do Firebase (Firestore, Cloud Functions, Storage).
Escalabilidade: As Cloud Functions são escaláveis por natureza, lidando com um aumento na demanda conforme necessário.

Considerações Importantes ao usar o Rowy para este Fim

Custos do Firebase: Esteja ciente dos custos associados ao uso do Firebase Storage, Cloud Functions (tempo de execução, invocações) e Firestore (leituras, escritas). O Puppeteer pode ser intensivo em recursos, então monitore o uso.
Complexidade da Página Alvo: Páginas com muito JavaScript, conteúdo carregado dinamicamente (AJAX) ou que requerem login podem necessitar de lógica adicional no script Puppeteer para garantir que o screenshot seja capturado corretamente.
Tempo de Execução: Capturar um screenshot pode levar alguns segundos. Configure o timeout da Cloud Function adequadamente.
Tratamento de Erros: Implemente um tratamento de erros robusto no seu script para lidar com URLs inválidas, timeouts de página ou outros problemas.

Conclusão

Criar um sistema para gerar screenshots de URLs automaticamente é uma tarefa que pode ser grandemente simplificada com o uso de plataformas low-code como o Rowy, em conjunto com os serviços backend do Firebase. A abordagem descrita permite que você construa uma solução funcional e escalável com um esforço de codificação e configuração de infraestrutura significativamente menor. Experimente e adapte o script às suas necessidades específicas para desbloquear ainda mais possibilidades!