Jak zintegrować stronę z Google Sheets

Integracja strony internetowej z usługą Google Sheets umożliwia tworzenie dynamicznych i łatwo aktualizowanych komponentów, co przyspiesza proces zarządzania danymi oraz poprawia interaktywność witryny. W poniższym przewodniku omówimy kolejne etapy przygotowania środowiska, konfiguracji dostępu, implementacji zapytań API oraz sposoby prezentacji danych na stronie WWW.

Przygotowanie środowiska i tworzenie arkusza

Zanim przejdziemy do kodowania, warto zadbać o odpowiednie przygotowanie arkusza kalkulacyjnego w Google Drive oraz włączenie niezbędnych usług w Google Cloud Console.

Tworzenie arkusza w Google Sheets

Otwórz Google Drive i kliknij Nowy → Arkusze Google.
Dodaj nagłówki kolumn, które będą odpowiadać polom w bazie danych lub formularzu strony.
Uporządkuj dane w prosty sposób, np. ID, Nazwa, Opis, Data.
Upewnij się, że arkusz ma ustawione odpowiednie uprawnienia – najlepiej Udostępniony każdemu z linkiem, jeśli planujesz publiczny dostęp.

Konfiguracja Google Cloud Console

Zaloguj się na konto Google i przejdź do Google Cloud Console.
Utwórz nowy projekt lub wybierz istniejący.
W sekcji APIs & Services włącz usługę Google Sheets API oraz Google Drive API.
Przejdź do zakładki Credentials i kliknij Utwórz poświadczenia → Klucz API lub OAuth 2.0 Client ID (wybór zależy od modelu autoryzacji).

Autoryzacja i obsługa zapytań API

Komunikacja z Google Sheets odbywa się za pomocą REST API, a poprawna autoryzacja jest kluczowa, by zapewnić bezpieczeństwo danych oraz stabilne działanie integracji.

Model z kluczem API

Najprostszy sposób to wykorzystanie klucza API. Zaletą jest szybka konfiguracja, jednak dane będą dostępne publicznie, co może nie pasować do projektów z wrażliwymi informacjami.

W kodzie JavaScript dodaj stałą z kluczem: const API_KEY = 'TWÓJ_KLUCZ_API';
Adres zapytania: https://sheets.googleapis.com/v4/spreadsheets/{SHEET_ID}/values/{RANGE}?key={API_KEY}
Wykorzystaj fetch lub bibliotekę Axios do wysłania żądania.
Obsłuż odpowiedź JSON i wyświetl zwrócone dane na stronie.

Model OAuth 2.0

Dla projektów wewnętrznych lub wymagających prywatności danych lepiej zastosować autoryzację OAuth 2.0. Wymaga to wymiany tokenów i konfiguracji przekierowań.

Zarejestruj adres URI przekierowania w ustawieniach OAuth consent screen.
Pobierz client_id i client_secret.
W aplikacji zaimplementuj flow:
- Przekierowanie użytkownika do Google Auth z parametrami scope = https://www.googleapis.com/auth/spreadsheets.readonly.
- Odbiór kodu autoryzacyjnego i wymiana go na tokeny (access_token i refresh_token).
- Przechowywanie tokenów w bezpiecznym miejscu (np. w bazie lub pliku .env).
Do zapytań API dołącz nagłówek Authorization: Bearer {ACCESS_TOKEN}.

Wyświetlanie i formatowanie danych na stronie

Po uzyskaniu dostępu zaczynamy pracę nad prezentacją danych. Ważne są czytelność kodu oraz responsywność komponentów.

Podstawowe tabele z JavaScript

Z wykorzystaniem czystego JavaScript można zbudować prostą tabelę:

Pobierz dane przez fetch:

fetch(apiUrl)
  .then(response => response.json())
  .then(data => renderTable(data.values))
  .catch(error => console.error(error));

Funkcja renderTable:

function renderTable(rows) {
  const table = document.createElement('table');
  rows.forEach((row, i) => {
    const tr = document.createElement('tr');
    row.forEach(cell => {
      const cellEl = i === 0 ? document.createElement('th') : document.createElement('td');
      cellEl.textContent = cell;
      tr.appendChild(cellEl);
    });
    table.appendChild(tr);
  });
  document.getElementById('sheet-container').appendChild(table);
}

Interaktywne komponenty i asynchroniczne aktualizacje

Warto dodać możliwość dynamicznego odświeżania danych lub filtrowania rekordów.

Użyj setInterval lub przycisku „Odśwież” do ponownego wywołania API.
Implementuj filtrację po kolumnach – po wpisaniu frazy w input ukryj wiersze niespełniające kryteriów.
Dodaj paginację dla dużych zestawów danych za pomocą prostych przycisków „Poprzednia” i „Następna”.

Przykładowy projekt: lista zadań

Poniżej przykład zastosowania integracji dla prostego menedżera zadań:

Krok 1: Struktura arkusza

Kolumny: ID, Zadanie, Status, Deadline
Zakres danych: A1:D100

Krok 2: Kod JavaScript

const SHEET_ID = 'TWÓJ_SHEET_ID';
const API_KEY = 'TWÓJ_API_KEY';
const RANGE = 'A1:D100';
const apiUrl = `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/${RANGE}?key=${API_KEY}`;

async function fetchTasks() {
  try {
    const res = await fetch(apiUrl);
    const json = await res.json();
    renderTasks(json.values.slice(1)); // pomiń nagłówek
  } catch (e) {
    console.error(e);
  }
}

function renderTasks(rows) {
  const container = document.getElementById('tasks');
  container.innerHTML = '';
  rows.forEach(([id, name, status, deadline]) => {
    const div = document.createElement('div');
    div.className = 'task';
    div.innerHTML = `
      ${name} 
      (${status}) – ${deadline}
    `;
    container.appendChild(div);
  });
}

document.getElementById('refresh-btn').addEventListener('click', fetchTasks);

fetchTasks();

HTML i CSS

W dokumencie umieść:

Minimalny styl:

.task { padding: 10px; border-bottom: 1px solid #ccc; }
.task strong { color: #2c3e50; }

Najczęstsze wyzwania i rozwiązania

Podczas integracji możesz napotkać różne problemy, oto kilka wskazówek:

CORS: Upewnij się, że Twoja strona obsługuje żądania cross-origin. Jeśli problem występuje, skonfiguruj proxy lub ustaw odpowiednie nagłówki na serwerze.
Limity API: Google nakłada dzienne limity zapytań. Dla intensywnie używanych aplikacji rozważ buforowanie odpowiedzi.
Bezpieczeństwo: Nie umieszczaj klucza API w repozytorium publicznym. W przypadku OAuth przechowuj tokeny z ograniczonym dostępem.
Aktualizacja danych: Wykorzystaj onEdit triggers w Google Apps Script, jeśli potrzebujesz automatycznej synchronizacji zmian pomiędzy arkuszem a bazą danych.