Google Sites

Автор | 18.04.2023

Привіт! Google Sites – це безкоштовна веб-платформа, яка дозволяє створювати веб-сайти, додавати контент, ділитися ним і працювати над ним разом з іншими користувачами. Ця платформа є частиною екосистеми Google Workspace, яка включає різноманітні інструменти для роботи з документами, електронною поштою, календарями, зберіганням даних і багато іншого.

Щодо плагінів, то Google Sites підтримує різноманітні додаткові інструменти, що дозволяють розширювати можливості платформи. Наприклад, можна використовувати плагіни для додавання форм, галерей зображень, карток з інформацією, інтерактивних діаграм, відео-та аудіопрогравачів, та іншого.

Теми та вигляд

Google Sites має вбудовані теми, які можна використовувати для створення веб-сторінок. Вони допомагають швидко і просто створювати сторінки, що мають однаковий стиль та вигляд.

Щодо тем, то Google Sites пропонує кілька готових тем, які можна використовувати для створення веб-сайту. Також можна змінювати фоновий зображення, кольорову схему, шрифти та інші налаштування, щоб зробити свій веб-сайт більш унікальним. Крім того, в інтернеті можна знайти безліч безкоштовних тем для Google Sites, які можна завантажити та використовувати.

Створення власної теми для Google Sites – це зручний спосіб налаштувати зовнішній вигляд свого сайту та зробити його унікальним. Для створення теми потрібно дотримуватися кількох кроків:

  1. Створіть новий сайт на Google Sites та відкрийте режим редагування.
  2. Натисніть кнопку “Зовнішній вигляд” в меню зліва.
  3. Виберіть “Редагувати HTML/CSS”.
  4. Завантажте файли стилів та скриптів для вашої теми. Вони можуть бути створені вами самостійно або ж завантажені з зовнішніх джерел.
  5. Застосуйте зміни до сторінки, використовуючи CSS-класи та ідентифікатори.
  6. Збережіть зміни та перегляньте сторінку, щоб переконатися, що тема відображається належним чином.

Узагальнюючи, Google Sites – це зручна платформа для створення веб-сайтів, яка дозволяє легко додавати контент та співпрацювати з іншими користувачами. Платформа підтримує різноманітні плагіни та дозволяє налаштовувати вигляд веб-сайту за допомогою різноманітних тем та налаштувань.

Ось тут мій гуглосайт 🙂


Додаткові матеріали

Існує багато книжок та онлайн-ресурсів, що присвячені Google Sites. Нижче наведені кілька рекомендованих книг та ресурсів:

  1. “Google Sites and Chrome for Dummies” by Ryan Teeter and Karl Barksdale – ця книжка надає пошагові інструкції з використання Google Sites та браузера Google Chrome.
  2. “Google Sites and G Suite for Education” by Chris Betcher – ця книга орієнтована на використання Google Sites в освітніх цілях, а також надає практичні поради та ідеї для використання інших інструментів G Suite.
  3. “Using Google Sites” by Michael Miller – ця книга описує, як створити та налаштувати сайти на платформі Google Sites з використанням різних інструментів та функцій.
  4. Офіційна документація Google Sites – на сайті Google досить детально описані всі функції та можливості платформи Google Sites.
  5. Відеоуроки на YouTube – на YouTube можна знайти безліч відеоуроків з використання Google Sites, що надають практичні поради та демонстрацію функцій.

Ці ресурси можуть допомогти вивчити основи Google Sites та отримати практичні навички в роботі з цією платформою.

Є декілька ресурсів, де можна почитати про створення тем для Google Sites:

  1. Офіційна документація Google Sites містить опис структури тем, стилів та шаблонів, які можна використовувати при створенні власних тем: https://developers.google.com/sites/themes
  2. Детальний посібник на Medium, де крок за кроком описується процес створення власної теми: https://medium.com/google-sites-templates/creating-your-own-google-sites-theme-from-scratch-31614b518d58
  3. Стаття на TechRepublic, яка надає поради та приклади розробки власної теми для Google Sites: https://www.techrepublic.com/article/how-to-create-a-custom-theme-for-google-sites/
  4. Відеоурок на YouTube, який пояснює основні кроки створення теми для Google Sites: https://www.youtube.com/watch?v=k5xI8-BvRIc

Ці ресурси можуть допомогти вам зрозуміти, як створювати власні теми для Google Sites та надати ідеї для їх дизайну та розробки.

Є кілька ресурсів, де можна почитати про написання скриптів для Google Sites:

  1. Офіційна документація Google Apps Script (https://developers.google.com/apps-script) Це офіційний ресурс Google, який містить документацію та приклади коду для різних сервісів Google, включаючи Google Sites.
  2. Google Developers Experts (https://developers.google.com/community/experts) Це спільнота розробників Google, яка надає консультації, поради та допомогу в написанні скриптів для Google Sites.
  3. Stack Overflow (https://stackoverflow.com/questions/tagged/google-apps-script+google-sites) Стековерфлоу містить багато запитань та відповідей на тему написання скриптів для Google Sites.
  4. Google Sites Developer Experts Group (https://groups.google.com/g/sites-dev-experts) Ця група Google Groups призначена для розмов про розробку Google Sites, включаючи написання скриптів.
  5. Google Sites Help Center (https://support.google.com/sites/) Це офіційний центр довідки Google Sites, де можна знайти корисну інформацію про різні функції та можливості платформи.

Найкраще почати з документації Google Apps Script, щоб зрозуміти основи написання скриптів та розуміти, які можливості є у розробці для Google Sites. Далі можна перейти до інших ресурсів, де можна знайти приклади коду та консультації від інших розробників.


Coding at Google Sites

На жаль, не можна програмувати додатки безпосередньо на Google Sites. Однак, є деякі інтеграційні можливості з іншими Google сервісами, такими як Google Forms, Google Sheets і Google Apps Script, що можуть допомогти розширити функціональність Google Sites.

Google Apps Script – це мова програмування, яка дозволяє створювати додатки для Google сервісів, таких як Google Sites, Google Sheets та Google Docs. За допомогою Google Apps Script можна створювати скрипти, які автоматизують повторювані завдання, додають функціональність до форм і сторінок Google Sites, та забезпечують інтеграцію з іншими сервісами Google.

Щоб дізнатися більше про Google Apps Script, рекомендую ознайомитися з документацією на офіційному сайті Google: https://developers.google.com/apps-script.

Також можна знайти безліч ресурсів та посібників в Інтернеті, які допоможуть розібратися з Google Apps Script і програмуванням для Google Sites.

Застосування Google Sites можуть бути різними, в залежності від потреб користувача. Ось кілька прикладів використання Google Sites та можливих автоматизацій:

  1. Інформаційний портал: Використовуючи Google Sites, можна створити внутрішній портал для команди, де зібрана вся необхідна інформація, включаючи процедури, документи, контактну інформацію та інше. Для автоматизації такого порталу можна використовувати Google Forms для збору інформації від користувачів, а потім використовувати Google Sheets для зберігання та оновлення даних, які можна відобразити на сайті.
  2. Блог або портфоліо: Google Sites можна використовувати для створення веб-сайту, щоб поділитися власними думками, проектами та іншими творчими роботами. Для автоматизації можна використовувати сторонні інструменти, такі як IFTTT або Zapier, щоб автоматично публікувати нові записи на соціальних медіа або інших веб-сайтах.
  3. Інтерактивна веб-сторінка: Google Sites можна використовувати для створення інтерактивних веб-сторінок, де користувачі можуть здійснювати різні дії, наприклад, переглядати відео, завантажувати файли або відправляти повідомлення. Для автоматизації можна використовувати JavaScript або сторонні бібліотеки, такі як jQuery, для створення динамічного контенту, або Google Apps Script для створення спеціалізованих інтерфейсів для користувачів.
  4. Інтернет-магазин: Google Sites можна використовувати для створення інтернет-магазину з використанням сторонніх платформ, таких як PayPal або Shopify.

Автоматизація на Google Sites

Google Sites надає зручний інтерфейс для створення статичних веб-сайтів без необхідності програмування. Однак, наразі він не надає можливостей для програмування додатків або налаштування автоматизації.

Проте, ви можете використовувати різноманітні інтеграції, щоб забезпечити автоматизацію робочих процесів і покращити роботу зі своїм сайтом на Google Sites. Наприклад, ви можете використовувати Google Apps Script, щоб інтегрувати свій сайт з іншими продуктами Google, такими як Google Sheets або Google Forms, і забезпечити автоматизацію робочих процесів. За допомогою Google Apps Script ви можете розробляти власні додатки, які можна використовувати для створення спеціальних функцій для свого сайту.

Одним з прикладів автоматизації на Google Sites є можливість використовувати Google Apps Script для відправлення повідомлень через форми на вашому сайті. Для цього вам потрібно розробити скрипт, який відправляє повідомлення зі збору даних на вказану електронну адресу.

Google Sites – це платформа для створення веб-сайтів, що базується на Google Drive. Оскільки Google Sites є сервісом Google, він має ряд інтеграцій з іншими сервісами Google, такими як Google Forms, Google Sheets та Google Analytics.

Telegram at Google Sites

Щодо інтеграції з Telegram, Google Sites має декілька способів взаємодії з цією платформою:

  1. Вбудовування чат-бота Telegram на сторінки Google Sites: це можна зробити, використовуючи інструменти від Telegram, такі як BotFather, та додавши код чат-бота на сторінки Google Sites.
  2. Використання Telegram API для відправлення повідомлень з Google Sites: це можна зробити, використовуючи різні мови програмування та бібліотеки, такі як Python-бібліотека python-telegram-bot.

Нижче наведено приклад коду Python для відправки повідомлень на Telegram з Google Sites за допомогою бібліотеки python-telegram-bot:

import telegram

bot_token = 'your_bot_token_here'
chat_id = 'your_chat_id_here'

bot = telegram.Bot(token=bot_token)
bot.send_message(chat_id=chat_id, text='Hello, this is a message from Google Sites!')

Щодо автоматизацій Google Sites, їх можна реалізувати, використовуючи Google Apps Script – мову програмування на основі JavaScript, що дозволяє створювати скрипти для автоматизації рутинних завдань в сервісах Google, включаючи Google Sites. Наприклад, можна створити скрипт, що буде автоматично оновлювати сторінки сайту Google Sites на основі даних з Google Sheets або Google Forms.

Нижче наведено приклад коду Google Apps Script для створення сторінки на Google Sites:

function createPage() {
  var site = SitesApp.getSiteByUrl('your_site_url_here');
  var page = site.createWebPage('New Page', 'This is a new page!');
  page.setHtmlContent('<h1>Welcome to the new page!</h1>');
}

Отже, Google Sites має багато можливостей для інтеграції та автоматизації, і для їх впровадження можна використовувати різні інструменти.

Робимо список з Google Sheets

Щодо інтеграції з Google Sheets, на Google Sites можна використовувати різні віджети, що дозволяють вставляти дані з таблиць. Один з найпростіших способів – це вставити на сторінку елемент “Таблиця”, який дозволить вам вибрати таблицю з Google Sheets та відобразити її на вашій сторінці. Віджет “Таблиця” також дозволяє відображати таблиці в режимі читання або редагування, та вибирати, які поля будуть видимими на сторінці.

Однак, якщо ви хочете забрати зайві елементи таблиці, або відобразити її в іншому форматі, можна використовувати скрипти Google Apps Script. Наприклад, ви можете написати скрипт, який витягує дані з таблиці та генерує таблицю на вашій сторінці Google Sites. Також можна використовувати скрипти для автоматичного оновлення даних на сторінці, коли дані в таблиці змінюються. Нижче наведено приклад коду на Google Apps Script, який відображає дані з таблиці Google Sheets на сторінці Google Sites:

function myFunction() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var data = sheet.getDataRange().getValues();
  var html = "<table>";
  for (var row = 0; row < data.length; row++) {
    html += "<tr>";
    for (var col = 0; col < data[row].length; col++) {
      html += "<td>" + data[row][col] + "</td>";
    }
    html += "</tr>";
  }
  html += "</table>";
  var app = SitesApp.getActivePage();
  app.setHtmlContent(html);
}

Цей код бере дані з активного аркуша таблиці Google Sheets, генерує HTML-код для таблиці та встановлює його як вміст вашої сторінки Google Sites. За допомогою скриптів можна зробити більш складні операції з данними

Для створення скрипту, який оновлює список товарів на Google Sites з Google Sheets та публікує зміни в позиціях з датами оновлення, потрібно використовувати Google Apps Script.

Ось приклад скрипту, який можна використовувати для оновлення списку товарів на Google Sites:

function updateProductsList() {
  // Отримати доступ до документу Google Sheets
  var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/Google_Sheets_ID/edit");
  var sheet = ss.getSheetByName("Products");

  // Отримати дані з таблиці Google Sheets
  var data = sheet.getDataRange().getValues();

  // Отримати доступ до сторінки Google Sites
  var page = SitesApp.getPageByUrl("https://sites.google.com/site/example-site");

  // Отримати список всіх елементів на сторінці Google Sites з класом "product"
  var elements = page.getElements("product");

  // Оновити дані на сторінці Google Sites
  for (var i = 0; i < data.length; i++) {
    // Отримати назву товару та дату оновлення з таблиці Google Sheets
    var name = data[i][0];
    var date = data[i][1];

    // Знайти елемент на сторінці Google Sites з назвою товару
    var element = elements.filter(function (el) { return el.asListItem().getTitle() === name })[0];

    if (element) {
      // Оновити дату оновлення товару на сторінці Google Sites
      element.asListItem().setSubtitle(date);
    } else {
      // Додати новий елемент з назвою та датою оновлення товару на сторінці Google Sites
      page.createListItem().setTitle(name).setSubtitle(date).setTag("product");
    }
  }
}

Цей скрипт оновлює список товарів на сторінці Google Sites з таблиці Google Sheets з назвою “Products”. Він шукає елементи з класом “product” на сторінці Google Sites та оновлює дати оновлення для товарів, які вже знаходяться на сторінці, або додає нові елементи для товарів, яких ще немає на сторінці.


Google Sheets та Google Sites

Зв’язок між Google Sheets та Google Sites можна здійснити за допомогою сервісу Google Apps Script. Нижче наведений код, який дозволяє витягувати дані з таблиці Google Sheets та публікувати їх на сторінці Google Sites.

Код скрипта Google Apps Script:

function doGet() {
  var sheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/your_spreadsheet_id/edit#gid=0').getSheetByName('Sheet1'); // замінити на URL та назву свого листа
  var data = sheet.getDataRange().getValues();
  var html = '<table>';
  
  for (var i = 1; i < data.length; i++) {
    html += '<tr>';
    
    for (var j = 0; j < data[i].length; j++) {
      html += '<td>' + data[i][j] + '</td>';
    }
    
    html += '</tr>';
  }
  
  html += '</table>';
  var template = HtmlService.createTemplateFromFile('Page');
  template.table = html;
  var page = template.evaluate();
  page.setTitle('My Table Page');
  return page;
}

function updateSheet() {
  var sheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/your_spreadsheet_id/edit#gid=0').getSheetByName('Sheet1'); // замінити на URL та назву свого листа
  var range = sheet.getDataRange();
  var data = range.getValues();
  
  // ваш код для оновлення таблиці
  
  range.setValues(data);
}

Щоб підключити цей скрипт до сторінки Google Sites, потрібно створити нову сторінку та додати на неї Google Apps Script за допомогою вбудованого редактора. Для цього необхідно обрати в меню “Insert” -> “Apps Script”.

Також для коректної роботи скрипту необхідно створити новий файл HTML з назвою “Page” і вставити в нього наступний код:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?= table ?>
  </body>
</html>

Після цього можна запустити функцію “doGet()” та перейти на сторінку Google Sites, щоб переконатися, що таблиця відображається на сторінці. Щоб оновити дані на сторінці та в таблиці, можна запустити функцію “updateSheet()”. Для цього потрібно натиснути кнопку “Run” у редакторі скрипту.


Google Docs, Google Slides at Google Sites

Для цього можна використовувати Google Apps Script. Спочатку потрібно створити нову сторінку на Google Sites та відкрити редактор скриптів. Для відкриття редактора скриптів натисніть кнопку “Tools” (Інструменти) у верхньому меню, виберіть пункт “Script editor” (Редактор скриптів).

Далі потрібно вставити такий код у редактор скриптів:

function doGet() {
  var page = SitesApp.getPageByUrl('INSERT_PAGE_URL_HERE'); // замініть INSERT_PAGE_URL_HERE на URL вашої сторінки Google Sites
  var attachment = DriveApp.getFileById('INSERT_FILE_ID_HERE'); // замініть INSERT_FILE_ID_HERE на ID файлу Google Docs або Google Slides
  var blob = attachment.getBlob();
  var file = SitesAttachmentService.upload(blob, attachment.getName(), 'image/png');
  var pageHtml = '<img src="' + file.getUrl() + '">'; // створення HTML-коду для зображення з посиланням на файл

  // оновлюємо сторінку з даними з Google Docs або Google Slides
  page.setHtmlContent(pageHtml);
  page.setLastUpdated(new Date());

  return ContentService.createTextOutput('Page updated.');
}

Після вставлення коду замініть “INSERT_PAGE_URL_HERE” на URL сторінки Google Sites, на якій ви хочете розмістити зображення, та “INSERT_FILE_ID_HERE” на ID файлу Google Docs або Google Slides, з якого потрібно отримати зображення.

Після збереження скрипту, натисніть кнопку “Deploy” (Розгорнути) у верхньому меню та виберіть “New deployment” (Нове розгорнення). Відкриється вікно деплойменту, де потрібно вибрати тип розгорнення “Web app” (Веб-додаток), натиснути кнопку “Create” (Створити) та вибрати опцію доступу “Anyone, even anonymous” (Будь-хто, навіть анонімні користувачі).

Після створення розгорнення, копіюйте посилання на веб-додаток та вставляйте його в браузері. Якщо все працює правильно, то сторінка на Google Sites буде оновлюватися з зображенням з файлу Google Docs або Google Slides.

Google Apps Script

Google Apps Script є інструментом для розробки додатків та скриптів, які можна використовувати з різними сервісами Google, такими як Google Sheets, Google Drive, Gmail та багато інших. Для використання Google Apps Script на Google Sites, необхідно відкрити редактор скриптів в браузері та додати скрипти до сторінок вашого сайту.

Ось приклади коду для інтеграції таблиць Google та Google Drive на Google Sites:

  1. Отримання даних з Google Sheets та відображення їх на сторінці Google Sites:
function doGet() {
  var sheet = SpreadsheetApp.openById('YOUR_SHEET_ID').getSheetByName('YOUR_SHEET_NAME');
  var data = sheet.getDataRange().getValues();

  var htmlOutput = HtmlService.createHtmlOutput('<table></table>');

  for (var i = 0; i < data.length; i++) {
    htmlOutput.append('<tr>');
    for (var j = 0; j < data[i].length; j++) {
      htmlOutput.append('<td>' + data[i][j] + '</td>');
    }
    htmlOutput.append('</tr>');
  }

  return htmlOutput;
}

У цьому прикладі, ми отримуємо дані з таблиці Google Sheets з використанням ідентифікатора таблиці та назви аркуша, які потім використовуємо для відображення даних у вигляді таблиці на сторінці Google Sites.

  1. Отримання списку файлів з Google Drive та відображення їх на сторінці Google Sites:
function doGet() {
  var folder = DriveApp.getFolderById('YOUR_FOLDER_ID');
  var files = folder.getFiles();

  var htmlOutput = HtmlService.createHtmlOutput('<ul></ul>');

  while (files.hasNext()) {
    var file = files.next();
    htmlOutput.append('<li><a href="' + file.getUrl() + '">' + file.getName() + '</a></li>');
  }

  return htmlOutput;
}

У цьому прикладі, ми отримуємо список файлів з папки Google Drive з використанням ідентифікатора папки, які потім відображаємо у вигляді списку з посиланнями на сторінці Google Sites.

Ці приклади коду можна модифікувати та доповнювати залежно від потреб вашого проекту. Більше прикладів можна знайти у документації Google Apps Script та на форумах спільноти розробників.

mr.vanich (google.com)

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *