Обеспечение базовой функциональности
Это продолжение, начало тут: SheetsMirrorApp. Здесь рассмотрена установка SheetsMirrorApp на базовом уровне. Вы научитесь моментально публиковать прайс-листы и расписания на сайт. И для этого вам не нужно быть программистом или привлекать специалиста. Вам достаточно скопировать шаблон таблицы и разместить на своём сайте веб-страницу (см. ниже). После этого, как только вы скопируете новый лист в таблицу, как данные с этого листа сразу же окажутся на сайте. Уверен, что под моим руководством у вас всё получится легко, быстро и просто. Если же будут затруднения — задавайте вопросы в комментариях.
Установка SheetsMirrorApp (бэкенд)
Здесь рассмотрена установка SheetsMirrorApp в той части, которая расположена в Google Sheets.
Шаблон таблицы
Самое простое, что вы можете сделать, это сделать копию этой таблицы. Шаблон разработан для ситуации, когда вам необходимо регулярно выкладывать на сайт расписание занятий в вузе. Здесь имя листа — имя учебной группы.
Аналогичная структура будет для расписания занятий в школе (имя листа — название класса), прайс-листа (имя листа — наименование группы товара) и т.п.
Нажмите на Создать копию.
В шаблоне 4 видимых листа плюс 1 скрыт.
Настройка SheetsMirrorApp
На скрытом листе Settings в ячейку B1 вводится адрес диапазона ячеек, данные из которых должны попадать на сайт.
Обратите внимание на то, что этот адрес диапазона будет использован для экспорта данных из всех листов. Поэтому позаботьтесь о том, чтобы подлежащие экспорту данные на каждом листе начинались с одной и той же ячейки.
Скрипт SheetsMirrorApp
Скопировав таблицу, вы скопировали и скрипт. Посмотреть на него и его отредактировать можно, выбрав в меню пункт Расширения/Apps Script.
Выберите Начать развёртывание/Новое развёртывание.
Нажмите на шестерню и выберите тип развёртывания: Веб-приложение.
Введите в поле Описание что-нибудь осмысленное, а поля Запуск от имени и У кого есть доступ оставьте заполненными по умолчанию (От моего имени и Все).
Нажмите на Начать развёртывание.
Далее на 5 скринах показано, как предоставить доступ скрипту.
Отлично. Осталось только скопировать URL (ссылку) веб-приложения (нажмите на ОК) и нажать на Готово.
Сохраните скопированный URL где-нибудь, например, вставьте в Блокнот — он пригодится в главе про фронтенд.
Установка SheetsMirrorApp (фронтенд)
Здесь рассмотрена установка SheetsMirrorApp в той части, которая будет расположена на вашем сайте.
Веб-страница
Скопируйте этот код в какой-нибудь текстовый редактор. Это может быть VS Code или даже Блокнот.
<!DOCTYPE html>
<!--
Разрешается свободное использование данного кода со ссылкой на автора Баублис Б.П.
https://baublys.ru/2024/02/15/sheetsmirrorapp/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SheetsMirrorApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
::backdrop {
background-image: linear-gradient(45deg,
magenta,
rebeccapurple,
dodgerblue,
green);
opacity: 0.75;
}
TABLE {
width: 100%;
/* Ширина таблицы */
border-collapse: collapse;
/* Убираем двойные линии между ячейками */
}
TD,
TH {
text-align: center;
/* Выравнивание по центру */
padding: 3px;
/* Поля вокруг содержимого таблицы */
border: 1px solid black;
/* Параметры рамки */
}
TH {
background: #b0e0e6;
/* Цвет фона */
}
.lc {
/* font-weight: bold; */
/* Жирное начертание текста */
text-align: left;
/* Выравнивание по левому краю */
}
.upd {
font-style: italic;
/* Курсивное начертание текста */
font-size: smaller;
/* Относительный размер шрифта */
text-align: center;
/* Выравнивание по центру */
background: #b0e0e6;
/* Цвет фона */
}
</style>
</head>
<body>
<h1>Расписание занятий</h1>
<form id="uploadForm">
<p><select size="3" multiple name="group" id="myul">
<option disabled selected>Выберите группу(ы)</option>
</select>
</form>
<input value="Показать" type="button" onclick="show();" />
<hr />
<div id="info"></div>
<!-- A non-modal dialog containing a form -->
<dialog id="favDialog">
<form>
<p>
<label>
There is new data. Get?
</label>
</p>
<div>
<button value="cancel" formmethod="dialog">Cancel</button>
<button id="downloadBtn" value="Downloaded">Download</button>
</div>
</form>
</dialog>
<output></output>
<script>
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const downloadBtn = favDialog.querySelector("#downloadBtn");
// "Cancel" button closes the dialog without submitting because of [formmethod="dialog"], triggering a close event.
favDialog.addEventListener("close", (e) => {
var val = '';
if (favDialog.returnValue === "default") {
val = "No return value.";
} else {
val = `ReturnValue: ${favDialog.returnValue}.`;
}
outputBox.value = val;
});
// Prevent the "confirm" button from the default behavior of submitting the form, and close the dialog with the `close()` method, which triggers the "close" event.
downloadBtn.addEventListener("click", (event) => {
event.preventDefault(); // We don't want to submit this fake form
favDialog.close(downloadBtn.value); // Have to send the select box value here.
localStorage.setItem('result', resweb);
makeSelect(resweb);
});
</script>
<script>
var resweb;
var resLS;
load();
resLS = getResultFromLS();
makeSelect(resLS);
function getResultFromLS() {
var resultLS = localStorage.getItem('result');
return resultLS; // string
}
function makeSelect(resultLS) {
var resultObj = JSON.parse(resultLS);
if (resultObj) {
var dropDown = document.getElementById('myul');
dropDown.options.length = 1; // очистка options, кроме 1й
for (i = 0; i < resultObj.length; i++) {
var listItem = document.createElement("option");
listItem.innerHTML = '<option>' + resultObj[i].group + '</option>';
dropDown.appendChild(listItem);
}
}
}
async function resWeb() {
try {
const url = 'WEB_PAGE_URL';
const response = await fetch(url);
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
const result = await response.json();
return result;
} catch (error) {
console.log(error);
}
}
async function load() {
try {
var data = await resWeb();
resweb = JSON.stringify(data.result);
if (resweb === resLS) {
console.log('No new data');
} else {
console.log('There is new data');
favDialog.show();
}
} catch (error) {
console.log(error);
}
}
</script>
<script>
function show() {
try {
var output = "<table>",
out;
var ls = localStorage.getItem('result');
var result = JSON.parse(ls);
for (var i = 0; i < result.length; i++) {
var obj = result[i];
let selectedOptions = Array.from(document.getElementById('myul').selectedOptions).map(({ value }) => value);
if (selectedOptions.includes(obj.group) === true) {
let now = obj.time;
output += "<tr><th>Группа</th><th>" + obj.group + "</th><td class='upd' colspan='2'>Updated: " + now + "</td></tr>";
var o = obj.shed;
for (var j = 0; j < o.length; j++) {
var pair = o[j];
if (j == 0 && pair != null) {
output += "<tr><th>" + pair.join("</th><th>") + "</th></tr>";
} else {
if (pair != null) {
output += "<tr><td class='lc'>" + pair.join("</td><td>") + "</td></tr>";
}
}
}
output += "<tr><td></td></tr>";
}
}
} catch (e) {
console.log(e);
}
out = output + '</table>';
document.getElementById('info').innerHTML = out;
}
</script>
</body>
</html>Замените в коде WEB_PAGE_URL на URL веб-приложения, сохранённый ранее.
Сохраните код в файл index.html
Создайте на своём сайте поддиректорию sheetsmirrorapp и загрузите в неё файл index.html.
Всё! Базовая функциональность обеспечена, давайте проверять.
Перейдя в браузере по адресу Ваш_сайт/sheetsmirrorapp/, вы увидите следующее:
На странице отображается текст Расписание занятий — он у нас в коде выше. Если у вас прайс-лист — замените текст в коде файла index.html.
В списке групп пусто, т.к. данные ещё не загружены.
На поп-апе (всплывающее окно) написано: Есть новые данные. Получить? При каждом изменении данных в таблице пользователю будет показываться такой поп-ап.
Конечно, можно убрать из кода страницы ту часть, которая выводит этот поп-ап, и обновлять данные без лишних слов 😉
Загрузите данные — нажмите на Download.
Список групп будет заполнен, и появится текст Downloaded (Загружено).
Теперь выберите в списке групп одну или несколько и нажмите на Показать. Данные будут отображены.
Если вам не нужен выбор, то можно убрать из кода страницы список групп и кнопку Показать.
Теперь внесите изменения в таблице. Например, измените текст на каком-то листе. Учтите, что при любом редактировании листа обновится дата и время в ячейке E12.
После редактирования данных в таблице обновите веб-страницу. На ней также должно обновиться содержимое.
Что дальше?
Напомню, что в заключительной статье SheetsMirrorApp: PWA я расскажу о том, как превратить веб-страницу в мобильное приложение и, в-частности, научить её отображать содержимое вашего сайта без интернета.
Свои вопросы и пожелания пишите в комментариях.
1 комментарий
SheetsMirrorApp · 25 февраля, 2024 в 12:04 пп
[…] Установка SheetsMirrorApp […]