Pierwsza aplikacja “Hello World”

Tworzenie prostej aplikacji webowej „Hello World” z użyciem Google Apps Script (GAS) i Google Sheets to doskonały sposób na rozpoczęcie przygody z tworzeniem aplikacji internetowych.

Poniżej przedstawiam krok po kroku jak to zrobić, zaczynając od podstaw tworzenia aplikacji w Google Apps Script, poprzez integrację z arkuszami Google, aż do uruchomienia i testowania Twojej aplikacji.

Wprowadzenie do Google Apps Script i Aplikacji Webowych

Google Apps Script (GAS) to potężne narzędzie do tworzenia aplikacji, które integruje się z różnymi usługami Google, takimi jak Google Sheets, Docs, Drive, Gmail i wiele innych. Dzięki GAS możesz tworzyć aplikacje webowe, które działają bezpośrednio w przeglądarce i mogą być hostowane na serwerach Google.

Google Apps Script wykorzystuje język JavaScript, który jest łatwy do nauczenia się dla początkujących, a jednocześnie dostatecznie potężny, aby sprostać zaawansowanym potrzebom. Możesz używać GAS do automatyzacji zadań, tworzenia niestandardowych funkcji w Arkuszach Google, tworzenia interfejsów użytkownika, a nawet do tworzenia aplikacji webowych, które łączą różne usługi Google w jedną spójną całość.

Dla tych, którzy chcieliby pominąć szczegółowy opis i przejść bezpośrednio do praktycznej części, zapraszam do kliknięcia w przycisk poniżej, aby przejść do wpisu na końcu, gdzie znajduje się kod do pobrania wraz z podstawowymi instrukcjami jego użycia.

W następnych akapitach, przedstawię szczegółowy opis jak zacząć pracę z Google Apps Script, włączając w to tworzenie prostego skryptu, który integruje się z Arkuszami Google oraz jak przekształcić ten skrypt w funkcjonalną aplikację webową. Zapewnię także komentarze do kodu, aby ułatwić zrozumienie każdego kroku.

Tworzenie Pierwszej Aplikacji

1. Rozpoczęcie pracy z Google Apps Script

❏ Otwórz Arkusz Google > Kliknij „Rozszerzenia” > „Apps Script”

❏ Nadaj nazwę dla projektu

2. Struktura Projektu

❏ Twoje środowisko składa się z plików .gs (Google Script) i plików .html.

❏ Plik Code.gs służy do pisania kodu serwerowego w JavaScript.

❏ Pliki HTML są używane do tworzenia interfejsu użytkownika.

3. Tworzenie Plików

❏ Utwórz plik Code.gs i Index.html. Możesz także dodać CSS.html i JavaScript.html dla styli i skryptów.

Tworzenie Pierwszej Aplikacji

1. Code.gs

Funkcja doGet(e)

// Główna funkcja obsługująca żądania HTTP GET.
function doGet(e) {

  // Logowanie informacji o żądaniu do konsoli Google Apps Script.
  Logger.log(Utilities.jsonStringify(e));

  // Sprawdzanie, czy w żądaniu został przekazany parametr 'page'.
  if (!e.parameter.page) {

    // Jeśli nie, zwraca domyślną stronę, czyli 'Index.html'.
    return HtmlService.createTemplateFromFile('Index')
      .evaluate() // Procesuje i zwraca plik 'Index.html' jako zawartość HTML.
      .setTitle("Twoja nazwa strony") // Ustawia tytuł karty przeglądarki.
      .addMetaTag('viewport', 'width=device-width, initial-scale=1') // Dodaje meta tag dla responsywności.
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); // Umożliwia wyświetlanie strony w ramkach (iframe).
  }

  // W przeciwnym razie, zwraca stronę określoną przez parametr 'page'.
  return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}

Cel funkcji: Jest to główna funkcja obsługująca żądania HTTP GET do aplikacji webowej. Jest automatycznie wywoływana, gdy użytkownik odwiedza URL aplikacji.

Jak działa:

• Logger.log(Utilities.jsonStringify(e)): Ta linia rejestruje szczegóły żądania HTTP w dzienniku aplikacji. Jest to przydatne do debugowania i zrozumienia, co jest przesyłane do aplikacji.
• if (!e.parameter.page): Sprawdza, czy w żądaniu przekazano parametr page. Jest to mechanizm do dynamicznego ładowania różnych stron HTML w zależności od tego, co użytkownik chce zobaczyć.
• HtmlService.createTemplateFromFile(‘Index’): Ładuje plik HTML o nazwie ‘Index’ jako szablon. Szablony pozwalają na wstawianie danych serwera do HTML przed wysłaniem do klienta.
• evaluate(): Procesuje szablon, zamieniając w nim kod skryptowy serwera na HTML.
• setTitle, addMetaTag, setXFrameOptionsMode: Te metody ustawiają odpowiednio tytuł strony, dodają metatag (np. dla responsywności), i konfigurują opcje wyświetlania ramki (iframe).
• return HtmlService.createTemplateFromFile(e.parameter[‘page’]).evaluate(): Jeśli parametr page jest dostępny, ładuje określoną stronę.

Funkcja getScriptUrl

// Funkcja zwracająca URL aplikacji webowej.
function getScriptUrl() {
  var url = ScriptApp.getService().getUrl(); // Pobiera URL aplikacji.
  return url; // Zwraca URL.
}

Cel funkcji: Zwraca URL aplikacji webowej, co jest przydatne, gdy potrzebujesz udostępnić link do swojej aplikacji.

Jak działa:

• var url = ScriptApp.getService().getUrl(): Pobiera URL aktualnej wdrożonej wersji aplikacji webowej.
• return url: Zwraca ten URL, co umożliwia jego użycie w aplikacji, np. do generowania linków zwrotnych.

Funkcja include

// Funkcja do dołączania zawartości plików HTML.
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent(); // Zwraca zawartość pliku o podanej nazwie.
};

Cel funkcji: Umożliwia dołączanie zawartości plików HTML (takich jak CSS i JavaScript) do głównego dokumentu HTML.

Jak działa:

• return HtmlService.createHtmlOutputFromFile(filename).getContent(): Ładuje zawartość pliku o podanej nazwie (np. ‘CSS.html’ lub ‘JavaScript.html’) i zwraca ją jako ciąg znaków. To pozwala na oddzielenie kodu HTML, CSS i JavaScript do różnych plików dla lepszej organizacji i czytelności.

Te funkcje wspólnie tworzą elastyczną i modułową strukturę aplikacji webowej w Google Apps Script, umożliwiając łatwe zarządzanie logiką serwera, strukturą strony, stylami i skryptami. Funkcja doGet służy jako centralny punkt wejścia, obsługując żądania użytkowników i decydując, jaki kontent wyświetlić, podczas gdy getScriptUrl i include oferują pomocniczą funkcjonalność, która rozszerza możliwości aplikacji.

2. Index.html

Frontend

Plik Index.html jest podstawowym plikiem interfejsu użytkownika Twojej aplikacji webowej. Jest to struktura HTML, która określa, jak Twoja strona będzie wyglądać i jakie będzie miała elementy.

<!DOCTYPE html>
<html>
<head>
    <base target="_top" /> <!-- Ustawia domyślny cel dla linków i formularzy. -->
    <meta charset="utf-8" /> <!-- Określa kodowanie znaków dokumentu. -->
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Ustawia viewport dla responsywności. -->
    <meta http-equiv="Content-Security-Policy" content="trusted-types * 'unsafe-inline' 'unsafe-eval'; require-trusted-types-for 'none';"> <!-- Zabezpieczenie przed XSS. -->
    <?!= include('CSS'); ?> <!-- Dołącza zawartość pliku CSS.html. -->
</head>
<body>
    <p>Hello World</p>
    <?!= include('JavaScript'); ?> <!-- Dołącza zawartość pliku JavaScript.html. -->
</body>
</html>

Cel Pliku Index.html

Plik Index.html pełni rolę głównego dokumentu interfejsu użytkownika w aplikacji webowej utworzonej za pomocą Google Apps Script. Jego główne cele to:

1. Prezentacja Interfejsu Użytkownika: Służy jako podstawowy szablon wyświetlany użytkownikowi. Zawiera strukturalne i wizualne elementy strony, takie jak tekst, przyciski, formularze itp.
2. Punkt Integracji Stylów i Skryptów: Umożliwia integrację zewnętrznych arkuszy stylów CSS i skryptów JavaScript. Dzięki temu kod jest bardziej modułowy i łatwiejszy do zarządzania.
3. Dostosowanie do Różnych Urządzeń: Zapewnia responsywność strony dzięki użyciu metatagów, takich jak viewport, co umożliwia poprawne wyświetlanie na różnych urządzeniach, w tym na telefonach komórkowych.
4. Bezpieczeństwo: Wprowadza zabezpieczenia, takie jak polityka bezpieczeństwa treści (Content Security Policy), co pomaga w ochronie przed atakami XSS i innymi zagrożeniami bezpieczeństwa.

Jak Działa Index.html

1. Struktura i Ładowanie: Gdy aplikacja webowa jest uruchamiana (np. poprzez wejście na URL aplikacji), Google Apps Script automatycznie wywołuje funkcję doGet(), która z kolei ładuje plik Index.html jako główną treść strony.
2. Dołączanie Zasobów:
   • CSS: Używa instrukcji <?!= include('CSS'); ?> do dynamicznego załączenia zawartości pliku CSS.html, który zawiera style CSS. Pozwala to na oddzielanie stylów od struktury HTML.
   • JavaScript: Podobnie, <?!= include('JavaScript'); ?> dołącza zawartość pliku JavaScript.html, który zawiera skrypty JavaScript, dodając funkcjonalności do strony.
3. Adaptacja do Urządzeń: Metatag viewport sprawia, że strona dynamicznie dostosowuje się do rozmiaru ekranu urządzenia, na którym jest wyświetlana, zapewniając lepsze doświadczenie użytkownika na urządzeniach mobilnych.
4. Zabezpieczenia: Metatag Content-Security-Policy ustawia reguły dotyczące źródeł treści, które mogą być ładowane i wykonane na stronie, co zwiększa bezpieczeństwo aplikacji.

W skrócie, Index.html działa jako rdzeń Twojej aplikacji webowej, definiując jej wygląd, zachowanie i bezpieczeństwo. Jest to miejsce, gdzie skupia się większość interakcji użytkownika z aplikacją.

Uruchamianie i Testowanie Aplikacji

1. Rozpoczęcie Wdrażania:

❏ W interfejsie edytora Google Apps Script kliknij przycisk Wdróż, a następnie w oknie dialogowym, które się pojawi, wybierz Nowe wdrożenie.

2. Wybór Typu Wdrożenia:

❏ Wybierz Typ > Aplikacja internetowa.

3 . Konfiguracja Wdrożenia:

Opis: Wprowadź opis wdrożenia dla lepszej identyfikacji.

Aplikacja internetowa wykonaj jako: Wybierz użytkownika, na którego uprawnieniach ma działać aplikacja (Twoje własne lub użytkownika odwiedzającego).

Kto ma dostęp: Określ, kto będzie miał dostęp do aplikacji – Tylko ja, Każda osoba z kontem Google, Każdy.

Uruchomienie: Po skonfigurowaniu ustawień, kliknij Wdróż.

4 . Linki do aplikacji:

❏ Link EXEC: Po wdrożeniu otrzymasz link z końcówką /exec, który jest adresem Twojej aplikacji dla użytkowników.

❏ Link DEV: Klikając Testuj wdrożenie w oknie zarządzania wdrożeniami, uzyskasz link z końcówką /dev, który służy do testowania najnowszej wersji kodu.

Autoryzacja Skryptów i Dostęp

1. Autoryzacja:
   • Podczas pierwszego uruchomienia lub zmiany uprawnień skryptu, Google Apps Script może wymagać autoryzacji do wykonania określonych działań.
2. Dostęp do Aplikacji:
   • Tylko ja: Dostęp ograniczony tylko dla twórcy skryptu.
   • Każda osoba z kontem Google: Dostępny dla osób z kontem Google.
   • Każdy: Publiczny dostęp dla każdego z dostępem do linku.
3. Kontekst Wykonania:
   • Decyduje, czy aplikacja działa na Twoich uprawnieniach czy użytkownika, co ma wpływ na dostęp do danych i funkcjonalności.

Podsumowanie

Wdrażanie aplikacji w Google Apps Script jest istotnym krokiem w procesie tworzenia aplikacji webowych. Odpowiednie zarządzanie dostępem i uprawnieniami jest kluczowe dla bezpieczeństwa i funkcjonalności aplikacji. Linki /dev i /exec umożliwiają odpowiednio testowanie i udostępnianie aplikacji użytkownikom.

Pełny Kod Gotowy do Wklejenia

Zgromadziliśmy wszystkie elementy wymagane do stworzenia prostej aplikacji webowej w Google Apps Script. Poniżej znajdziesz pełny kod, gotowy do wklejenia i uruchomienia w Twoim projekcie. Ten kod reprezentuje prostą aplikację “Hello World”, wykorzystującą Google Apps Script do obsługi żądań HTTP i wyświetlania treści HTML.

Code.gs

function doGet(e) {
  if (!e.parameter.page) {
    return HtmlService.createTemplateFromFile('Index')
      .evaluate()
      .setTitle("Twoja nazwa strony")
      .addMetaTag('viewport', 'width=device-width, initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  }
  return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}

function getScriptUrl() {
  return ScriptApp.getService().getUrl();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Index.html

<!DOCTYPE html>
<html>
<head>
    <base target="_top" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <?!= include('CSS'); ?>
</head>
<body>
    <h1>Hello World!</h1>
    <?!= include('JavaScript'); ?>
</body>
</html>

CSS.html

<style>
  body {
    font-family: Arial, sans-serif;
  }
</style>

JavaScript.html

<script>
  // Tutaj możesz dodać swój JavaScript
</script>

Wskazówki do Użycia

1. Stwórz pliki: Utwórz odpowiednie pliki w Google Apps Script (.gs i .html), jeśli jeszcze tego nie zrobiłeś.
2. Wklej kod: Skopiuj powyższy kod i wklej go do odpowiednich plików w Twoim projekcie.
3. Dostosuj: Możesz dostosować ten kod, zmieniając tytuł strony, style CSS oraz dodając własne skrypty JavaScript.
4. Testuj i wdrażaj: Po wklejeniu kodu przetestuj swoją aplikację lokalnie, a następnie wdróż ją jako aplikację webową, aby udostępnić innym.

Ten kod stanowi solidną bazę dla Twojej aplikacji webowej i jest świetnym punktem wyjścia do dalszego eksplorowania możliwości, jakie oferuje Google Apps Script. Zachęcam do eksperymentowania i dostosowywania kodu do własnych potrzeb.