Blogger - Importação de Dados do Google Sheets para Tabela via JSON utilizando Google Apps Script

---

@CanalQb no YouTube

---

---

Blogger - Importação de Dados do Google Sheets para Tabela via JSON utilizando Google Apps Script

---

---

Sempre crie uma frase de segurança única para jogos, Airdrops e qualquer outra coisa de origem desconhecida, em vez de usar sua carteira principal.

---

Fala galera, estou criando um encurtador de links, utilizando meu proprio blog, e para isso existe algumas missões de como concluir.

Crie uma planilha no Google Sheet é algo realmente simples, mas poucas pessoas conhecem os recursos que existem dentro do Google Apps Script, basicamente o mesmo que o VBA para os aplicativos do Google.

Se você apenas compartilhar o link da planilha, você irá receber a informação de incorporar um iframe em sua pagina, não é este caso, preciso realmente dos dados, então tive de converter em json.

Vamos lá, crie sua planilha, está é a minha

Já dá para observar que teremos no minino 3 colunas neste exemplo {Nome, Link;Convertido}

A minha ideia é quando usuario clicar ou acessar o link por exemplo https://canalqb.blogspot.com/?c=0baaeba7 que ele seja direcionado para o link da binance.com

Quais os beneficios, posso aumentar a quantidade de visualizações do meu blog, subir no rank do google, e receber retornos de monetização, com essa simples atividade.

Proximo passo, vamos configurar um google apps script:

Agora vou disponibilizar o codigo para vocês

Deixei em laranja o nome da planilha fornecida pelo google via  link https://docs.google.com/spreadsheets/d/1T9Y1bp7mjyRxDTj1hDVNFMaSA62S

e o nome da ABA que eu defini = Links

function doGet(e) {

  // Obtém a planilha usando o ID da planilha do Google Sheets

  var sheet = SpreadsheetApp.openById("1T9Y1bp7mjyRxDTj1hDVNFMaSA62S");

  

  // Seleciona a aba chamada "Links" e obtém o intervalo de dados (todas as células com dados)

  var range = sheet.getSheetByName("Links").getDataRange();

  

  // Obtém os valores dentro do intervalo (todos os dados da planilha) e armazena em um array

  var values = range.getValues();

  

  // Inicializa um array vazio para armazenar o resultado formatado

  var result = [];

  

  // Inicia um loop que percorre todas as linhas de dados (começa de 1 para pular o cabeçalho)

  for (var i = 1; i < values.length; i++) {

    // Adiciona um objeto ao array 'result' com as colunas "nome", "link" e "convertido"

    result.push({

      "nome": values[i][0],      // A primeira coluna (índice 0) contém o nome

      "link": values[i][1],      // A segunda coluna (índice 1) contém o link

      "convertido": values[i][2] // A terceira coluna (índice 2) contém o valor "convertido"

    });

  }

  

  // Retorna o array 'result' como um objeto JSON e define o tipo de mídia como JSON

  return ContentService.createTextOutput(JSON.stringify(result))

    .setMimeType(ContentService.MimeType.JSON);

}

Pedi ao chatGPT para criar os comentários para ajudar vocês com a lógica, fiquem tranquilos em melhorar ou alterar de acordo com suas necessidades, aproveite para pedir ao chat para adicionar mais funções, você pode criar um banco de dados relacional e apresentar da forma que desejar não só como post do blogger

Agora precisamos testar se tudo correu bem.

Vamos criar uma implantação ("dependendo das atualizações do google esse nome ou caminho pode alterar")

Modificando o appsscript.json, passe o mouse sobre os icones e irá aparecer uma engrenage, Configurações do projeto, clique. 

Agora habilite a ticagem para Mostrar arquivo de manifesto "appsscript.json" no editor

Volte para o icone < > Editor, e você irá perceber um novo arquivo, você vai dar permissões caso seja necessárias para seu blogger

Eu criei os comandos abaixo, se tiver duvida como fazer, pegue os dados do arquivo, e as informações desta pagina, e solicite para alguma IA vincular os dados no formato correto.

  "oauthScopes": [

    "https://www.googleapis.com/auth/blogger",

    "https://www.googleapis.com/auth/spreadsheets",

    "https://www.googleapis.com/auth/script.external_request"

  ]

Vá em Implantar, e então em Testar implantações

Ele vai fornecer um link /dev para você validar suas necessidades

Se você seguiu o script e a planilha do nosso exemplo, você irá ter um resultado como este.

Até aqui está tudo 100%, vamos agora ao Script para fazer o blogger ler o link json gerado.

No mesmo item implantar, clique em Nova Implantação, esse modal irá aparecer

A planilha e o blogger, devem ser do mesmo dono, então configure a implantação assim como na tela.

Quem é o dono do APP da WEB, quem vai executar "Eu" e quem pode acessar "Qualquer pessoa", clique em Implantar

Está tela será criada

Copie o link e reserve em algum bloco de notas

Toda vez que você precisar trocar alguma parte do script, você vai precisar ir em implantações, gerenciar implantações, e arquivar o atual. então para lançar fazer um novo.

por isso use apenas o testador até ter certeza de que tem tudo que precisa, consome menos tempo da sua mente

 

Vamos agora criar um script simples para nosso post de html no blogger

<!-- Tabela para exibir os dados da planilha -->

<table id="tabela" border="1" style="width:100%; margin-top: 20px; text-align: center;">

  <!-- Cabeçalho da tabela -->

  <thead>

    <tr>

      <!-- Definindo as colunas: Nome, Link e Convertido -->

      <th>Nome</th>

      <th>Link</th>

      <th>Convertido</th>

    </tr>

  </thead>

  <!-- Corpo da tabela onde as linhas serão adicionadas dinamicamente -->

  <tbody>

    <!-- As linhas serão adicionadas aqui dinamicamente -->

  </tbody>

</table>

<script>

  // Adiciona um evento para executar o código assim que o DOM for completamente carregado

  document.addEventListener('DOMContentLoaded', function () {

    // URL do Google Apps Script Web App (substitua com o seu link real)

    const webAppUrl = 'https://script.google.com/macros/s/AKfycbzAg_j6DdY7eBn8V /exec';

  

    // Função que vai buscar os dados da planilha usando o Web App

    function fetchData() {

      // Faz uma requisição HTTP para o Web App usando fetch

      fetch(webAppUrl)

        // Quando a resposta chegar, converte para JSON

        .then(response => response.json())

        // Depois de receber os dados, executa a função de manipulação

        .then(data => {

          // Armazena os dados retornados na variável 'rows'

          const rows = data;

          

          // Verifica se há dados para adicionar à tabela

          if (rows && rows.length > 0) {

            // Obtém o corpo da tabela onde as linhas serão inseridas

            const tableBody = document.getElementById('tabela').getElementsByTagName('tbody')[0];

            

            // Loop que percorre cada linha de dados

            rows.forEach(row => {

              // Cria uma nova linha para a tabela

              const newRow = tableBody.insertRow();

              

              // Insere as células com os valores da planilha nas colunas correspondentes

              newRow.insertCell(0).textContent = row.nome;      // Preenche a primeira célula (Nome)

              newRow.insertCell(1).textContent = row.link;      // Preenche a segunda célula (Link)

              newRow.insertCell(2).textContent = row.convertido; // Preenche a terceira célula (Convertido)

            });

          }

        })

        // Se houver erro na requisição ou no processamento, exibe no console

        .catch(error => console.error('Erro ao carregar os dados:', error));

    }

  

    // Chama a função fetchData para carregar os dados assim que o DOM da página for carregado

    fetchData();

  });

</script>

Por fim teremos essa tela, logico, você pode personalizar e utilizad da forma que decidir

Bom agora que eu já tenho acesso via json dos dados da planilha eu posso usar links como https://canalqb.blogspot.com/?c=0baaeba7 para direcionar para o link da coluna b, ou seja abrir a binance com redirecionamento de pagina.

Se quiserem que eu ensine o script para direcionamento, deixe nos comentários.

Espero que tenham gostado dessa dica, e até a proxima.