Construindo uma Aplicação de Planilha em JavaScript: Um Guia Passo a Passo

Planilhas se tornaram uma parte integral da computação moderna. Elas permitem aos usuários organizar, manipular e analisar dados em um formato tabular. Aplicativos como o Google Sheets estabeleceram o padrão para planilhas poderosas e interativas.

Neste post do blog, iremos guiá-lo pelo processo de construção de uma aplicação de planilha usando JavaScript. Vamos focar em conceitos de programação chave, explorar funcionalidades do JavaScript e incluir trechos de código detalhados com explicações.

O código-fonte completo está disponível aqui no meu Codepen.

O Que É o Google Spreadsheet?

O Google Spreadsheet é uma aplicação baseada na web que permite aos usuários criar, editar e colaborar em planilhas online. Ele oferece funcionalidades como fórmulas, validação de dados, gráficos e formatação condicional.

Nosso projeto emula algumas funcionalidades principais do Google Spreadsheet, com foco em:

1. Células editáveis.
2. Análise e avaliação de fórmulas.
3. Atualizações ao vivo por meio de um modelo Pub/Sub.
4. Navegação por teclado e seleção de células.
5. Avaliação dinâmica de dependências entre células.

Funcionalidades Deste Projeto

1. Células editáveis: Permite que os usuários insiram texto ou equações nas células.
2. Suporte a fórmulas: Processa fórmulas que começam com = e avalia expressões.
3. Atualizações ao vivo: Mudanças em células dependentes acionam atualizações usando um modelo Pub/Sub.
4. Navegação por teclado: Permite movimento entre células usando as teclas de seta.
5. Avaliação dinâmica: Garante atualizações em tempo real para fórmulas dependentes de outras células.
6. Tratamento de erros: Fornece mensagens de erro significativas para entradas inválidas ou dependências circulares.
7. Design escalável: Permite fácil extensão para adicionar mais linhas, colunas ou recursos.

Componentes-chave da Aplicação

1. Gerenciamento de Modos

const Mode = {

  EDIT: 'edit',

  DEFAULT: 'default'

};

Este enum define dois modos:

• EDITAR: Permite a edição de uma célula selecionada.
• PADRÃO: Permite navegação e interação sem edição.

Por que usar Modos? 

Os modos simplificam o gerenciamento do estado da interface do usuário. Por exemplo, no modo PADRÃO, as entradas do teclado movem-se entre células, enquanto no modo EDITAR, as entradas modificam o conteúdo da célula.

2. Classe Pub/Sub

O modelo Pub/Sub lida com assinaturas e atualizações ao vivo. As células podem se inscrever em outras células e atualizar dinamicamente quando as dependências mudam.

class PubSub {

  constructor() {

    this.map = {};

  }

​

  get(source) {

    let result = [];

    let queue = [...(this.map[source] || [])];

​

    while (queue.length) {

      let next = queue.shift();

      result.push(next.toUpperCase());

      if (this.map[next]) queue.unshift(...this.map[next]);

    }

    return result;

  }

​

  subscribeAll(sources, destination) {

    sources.forEach((source) => {

      this.map[source] = this.map[source] || [];

      this.map[source].push(destination);

    });

  }

}

Recursos principais:

• Gerenciamento dinâmico de dependências: Rastreia dependências entre células.
• Propagação de atualizações: Atualiza células dependentes quando as células fonte mudam.
• Busca em largura: Evita loops infinitos rastreando todos os nós dependentes.

Exemplo de uso:

let ps = new PubSub();

ps.subscribeAll(['A1'], 'B1');

ps.subscribeAll(['B1'], 'C1');

console.log(ps.get('A1')); // Output: ['B1', 'C1']

3. Criando Linhas e Células

class Cell {

  constructor(cell, row, col) {

    cell.id = `${String.fromCharCode(col + 65)}${row}`;

    cell.setAttribute('data-eq', '');

    cell.setAttribute('data-value', '');

​

    if (row > 0 && col > -1) cell.classList.add('editable');

    cell.textContent = col === -1 ? row : '';

  }

}

​

class Row {

  constructor(row, r) {

    for (let c = -1; c < 13; c++) {

      new Cell(row.insertCell(), r, c);

    }

  }

}

Principais características:

• Geração dinâmica de tabelas: Permite adicionar linhas e colunas programaticamente.
• Identificação de células: Gera IDs com base na posição (ex.: A1, B2).
• Células editáveis: Células são editáveis apenas se forem válidas (linhas/colunas não cabeçalho).

Por que usar Linhas e Células Dinâmicas?

Essa abordagem permite que o tamanho da tabela seja escalável e flexível, suportando recursos como a adição de linhas ou colunas sem alterar a estrutura.

4. Tratamento de Eventos para Interação

addEventListeners() {

  this.table.addEventListener('click', this.onCellClick.bind(this));

  this.table.addEventListener('dblclick', this.onCellDoubleClick.bind(this));

  window.addEventListener('keydown', this.onKeyDown.bind(this));

}

Principais características:

• Evento de clique: Seleciona ou edita células.
• Evento de duplo clique: Permite a edição de fórmulas.
• Evento de tecla pressionada: Suporta navegação com as teclas de seta.

5. Análise e Avaliação de Fórmulas

function calcCell(expression) {

  if (!expression) return 0;

​

  return expression.split('+').reduce((sum, term) => {

    let value = isNaN(term) ? getCellValue(term) : Number(term);

    if (value === null) throw new Error(`Invalid cell: ${term}`);

    return sum + Number(value);

  }, 0);

}

Principais características:

• Cálculo dinâmico: Computa fórmulas que referenciam outras células.
• Avaliação recursiva: Resolve dependências aninhadas.
• Tratamento de erros: Identifica referências inválidas e dependências circulares.

6. Tratamento de Erros para Entrada do Usuário

function isValidCell(str) {

  let regex = /^[A-Z]{1}[0-9]+$/;

  return regex.test(str);

}

​

Principais características:

• Validação: Garante que a entrada referencia IDs de células válidas.
• Escalabilidade: Suporta expansão dinâmica da tabela sem quebrar a validação.

Tópicos de JavaScript Cobertos

1. Tratamento de Eventos

Gerencia interações como cliques e pressionamentos de tecla.

window.addEventListener('keydown', this.onKeyDown.bind(this));

2. Manipulação do DOM

Cria e modifica elementos DOM dinamicamente.

let cell = document.createElement('td'); cell.appendChild(document.createTextNode('A1'));

3. Recursão

Processa dependências de forma dinâmica.

function calcCell(str) {  if (isNaN(str)) {    return calcCell(getCellValue(str));  } }

4. Tratamento de Erros

Detecta células inválidas e dependências circulares.

if (!isValidCell(p)) throw new Error(`invalid cell ${p}`);

Conclusão

Este projeto demonstra uma planilha poderosa usando JavaScript. Ele aproveita o tratamento de eventos, recursão e padrões Pub/Sub, estabelecendo a base para aplicações web complexas. Expanda-o adicionando recursos como exportação de dados, gráficos ou regras de formatação.

Referências

1. MDN Web Docs – Tratamento de Eventos
2. MDN Web Docs – Manipulação do DOM
3. JavaScript.info – Recursão