Методичка: «Свой микросервис на Google Sheets + PHP + JS»

11 класс. Проектная работа с использованием ИИ-помощника.

Результат: рабочая веб-страница, которую можно показать родителям, друзьям и комиссии. Данные живут в Google-таблице, страница их красиво показывает. Например: https://shedule.kinkaju.ru/

Главная идея: мы не делаем одно общее расписание. Каждый выбирает свою тему — финансы, книги, подготовка к ЕГЭ, фильмы, тренировки, что угодно. Расписание из примеров — лишь один из вариантов того, как могут выглядеть данные.

Часть 0. Что такое микросервис и что мы делаем

Микросервис — это маленькое веб-приложение, которое решает одну задачу. Не «супер-сайт на всё», а «страница, которая показывает что-то полезное мне и моей семье».

Мы строим микросервис по схеме:

Google Sheets — ваша база данных. Вы ведёте её как обычную таблицу.
PHP-скрипт — забирает данные из таблицы и отдаёт странице.
HTML/CSS/JS — то, что видит пользователь: карточки, графики, цвета.

Такой подход хорош тем, что данные можно менять прямо в таблице, а страница обновится сама. Никакой админки не нужно.

Вайбкодинг — это стиль работы, при котором вы описываете словами, что хотите, а ИИ-помощник генерирует код. Ваша задача — точно формулировать и проверять результат.

Часть 1. Выбор темы проекта

Прежде чем писать код, выберите тему. Хорошая тема отвечает трём условиям:

Полезна лично вам. Не «для галочки», а «я правда буду этим пользоваться».
Данные можно представить таблицей. Строки, столбцы, категории.
Есть что показать. Не просто список, а визуализация: цвета, статусы, прогресс.

Варианты тем (выберите одну или предложите свою)

1. Дашборд личных финансов

Что в таблице: дата, категория (еда/транспорт/развлечения), сумма, комментарий.
Что на странице: баланс месяца, разбивка по категориям, график трат по дням.

2. Дневник чтения

Что в таблице: название книги, автор, статус (читаю / прочитал / хочу прочитать), оценка, дата.
Что на странице: полки «Читаю», «Прочитано», «Хочу прочитать», прогресс-бар года.

3. Подготовка к ЕГЭ

Что в таблице: предмет, номер задания, статус (умею / не умею / в процессе), дата повтора.
Что на странице: процент готовности по предметам, список «проседающих» заданий, план на неделю.

4. Список фильмов и сериалов

Что в таблице: название, год, жанр, статус (смотрел / смотрю / хочу), оценка.
Что на странице: сетка постеров, фильтры по жанрам, рейтинги.

5. Трекер тренировок

Что в таблице: дата, тип тренировки, длительность, самочувствие.
Что на странице: календарь-теплокарта, суммарные часы, графики по неделям.

6. Свой вариант — приветствуется! Главное чтобы вы понимали: какие данные, как часто обновляются, что хотите видеть.

Пример из жизни: учитель может показать вам уже готовый сервис «Расписание ребёнка» — где на неделю вперёд видно: во сколько подъём, куда ехать, сколько свободного времени. Это один из примеров, что можно сделать. Ваша тема может быть совершенно другой.

Часть 2. Подготовка Google-таблицы

У каждого студента — своя Google-таблица. Никаких общих. Создаётся за 5 минут.

Шаг 2.1. Создайте таблицу

Откройте https://sheets.google.com → пустая таблица.
Назовите её как проект, например «Мои финансы» или «Дневник чтения».
Создайте столько вкладок, сколько нужно под вашу тему:
- финансы → Доходы, Расходы, Категории
- книги → Читаю, Прочитано, Хочу прочитать (на самом деле я бы вела в одной кладке и просто в отдельном столбце помечала бы, прочитано или нет)
- ЕГЭ → по одной вкладке на каждый предмет
- фильмы

Шаг 2.2. Спроектируйте структуру

Прежде чем забивать данными — подумайте, какие столбцы вам нужны. Примеры:

Финансы:

Книги:

ЕГЭ (вкладка «Математика»):

Шаг 2.3. Заполните таблицу

Не оставляйте её пустой. Минимум 10–15 строк реальных данных — тогда ваш сервис будет что показывать. Данные можно взять примерные, но реалистичные.

Часть 3. Подключение Google Sheets (самое важное)

Чтобы PHP-скрипт мог читать вашу таблицу, нужен сервисный аккаунт — «робот», которому вы даёте доступ к таблице.

Шаг 3.1. Создайте проект в Google Cloud

Google Cloud — это кабинет разработчика от Google.

Откройте https://console.cloud.google.com/
Сверху рядом с надписью «Google Cloud» — выпадающий список проектов → New Project.
Имя проекта: придумайте любое, например reading-diary.
Create → подождите 5 секунд → выберите этот проект в списке сверху.

Шаг 3.2. Включите Google Sheets API

Слева меню (гамбургер ☰) → APIs & Services → Library.
В поиске: Google Sheets API.
Откройте → кнопка Enable.

Шаг 3.3. Создайте сервисный аккаунт

APIs & Services → Credentials.
Сверху + CREATE CREDENTIALS → Service account.
Имя: sheets-reader (или любое).
CREATE AND CONTINUE.
Роли не назначаем → CONTINUE → DONE.

Шаг 3.4. Скачайте ключ

В разделе Credentials → Service Accounts кликните на созданный аккаунт.
Вкладка KEYS → ADD KEY → Create new key.
Тип — JSON → CREATE.
Браузер скачает файл с длинным именем.

Это ваш секретный ключ. Его нельзя никому показывать и выкладывать в интернет.

Шаг 3.5. Расшарьте таблицу сервисному аккаунту

Откройте скачанный JSON в блокноте.
Найдите поле "client_email" — там email вида sheets-reader@your-project.iam.gserviceaccount.com.
Скопируйте этот email.
Откройте вашу Google-таблицу → Поделиться.
Вставьте email → роль Читатель → Поделиться.

Теперь «робот» может читать вашу таблицу, но не может её менять — это правильно.

Шаг 3.6. Скопируйте ID таблицы

Из адресной строки:

text

https://docs.google.com/spreadsheets/d/1AbCdEf...XYZ/edit
                                     ^^^^^^^^^^^^^

То, что между /d/ и /edit — это ID таблицы. Сохраните его!!!! (понадобится уже скоро)

Часть 4. Работа с ИИ-помощником

ИИ-помощник — это ChatGPT, Claude, Gemini или DeepSeek. Через них вы будете генерировать код и решать проблемы.

Как формулировать запросы

Плохие формулировки (ИИ не поймёт, что вам нужно):

❌ «Сделай красиво»
❌ «Почини»
❌ «Добавь что-нибудь»

Хорошие формулировки:

✅ «У меня есть PHP-файл, который читает Google Sheets. Помоги сделать одностраничный index.php, который выводит список книг из вкладки Прочитано. Каждая книга — карточка с названием, автором и оценкой.»
✅ «Сейчас карточки идут в одну колонку. Сделай их в сетку по 3 штуки в ряд.»
✅ «На карточке оценка не видна. Добавь её в правый верхний угол.»

Правило одного шага

Одно сообщение — одна задача. Не пытайтесь сразу описать 10 требований. ИИ запутается, а вы не поймёте, что пошло не так.

Правильная последовательность:

«Покажи список книг просто текстом»
«Сделай каждую книгу карточкой»
«Разложи карточки в сетку 3 в ряд»
«Добавь цвет по статусу книги»
«Добавь фильтр по жанру»

Что важно помнить

Прикладывайте ошибки полностью. Не «не работает», а «вот ошибка: Fatal error...».
Просите полный файл. «Дай весь index.php целиком, а не кусок».
Проверяйте каждую итерацию. Сохранили → открыли в браузере → Ctrl+F5.
Если ИИ ошибся дважды — начните чат заново. Иногда контекст путается.

Пример правильного диалога

Вы: Помоги сделать PHP-скрипт, который читает мою Google-таблицу «Дневник чтения». Мне нужно: подключиться через сервисный аккаунт (файл service-account.json лежит рядом), прочитать вкладку Прочитано, вернуть JSON со списком книг. ID таблицы я знаю. Столбцы: Название, Автор, Оценка, Дата.ИИ: [присылает код]Вы: Работает! Теперь добавь сверху HTML-страницу, которая показывает эти книги списком.ИИ: [присылает код]Вы: Отлично. Теперь сделай каждую книгу карточкой с закруглёнными углами и тенью. Оценка — в правом верхнем углу кружком.ИИ: [присылает код]

И так далее, пока не получите то, что нравится.

Часть 5. Работаем на хостинге

У вас есть доступ к хостингу Timeweb. Там уже установлен PHP, ничего докачивать не нужно. Всё делается через браузер: в файловом менеджере создаёте файлы, в соседней вкладке смотрите результат.

Шаг 5.1. Зайдите в панель хостинга

Откройте https://hosting.timeweb.ru/
Введите логин и пароль, которые получили в классе.
Попадёте в панель управления.

Шаг 5.2. Откройте файловый менеджер

В панели найдите раздел «Файловый менеджер». Он откроет файлы вашего сайта прямо в браузере.

Найдите папку:

text

11/public_html/

Всё, что внутри этой папки, доступно в интернете по адресу https://11.kinkaju.ru/….

Шаг 5.3. Создайте свою папку

Внутри public_html создайте папку со своей фамилией латиницей, без пробелов:

✅ Gorelikova - Ваш проект будет жить по адресу https://11.kinkaju.ru/Gorelikova/.
✅ Ivanov
✅ Petrova
❌ Гореликова — кириллица в адресе сломается
❌ Ivanov Petr — пробел в URL не годится

Шаг 5.4. Загрузите ключ

Возьмите файл service-account.json, который вы скачали из Google Cloud (Часть 3), и загрузите его в свою папку.

Через файловый менеджер обычно есть кнопка «Загрузить» — просто выберите файл с компьютера.

Теперь в папке:

text

11/public_html/Gorelikova/
└── service-account.json

Шаг 5.5. Создайте тестовый файл check.php

В той же папке создайте новый файл check.php (в файловом менеджере — кнопка «Создать файл»).

Вставьте в него такой код:

php

<?php
const SPREADSHEET_ID = 'ВСТАВЬТЕ_СЮДА_ID_ВАШЕЙ_ТАБЛИЦЫ';

$sa = json_decode(file_get_contents(__DIR__ . '/service-account.json'), true);
if (!$sa) { echo 'Не читается service-account.json'; exit; }

echo 'Email робота: ' . $sa['client_email'] . '<br>';

$now = time();
$b64 = fn($d) => rtrim(strtr(base64_encode(json_encode($d)), '+/', '-_'), '=');
$h = $b64(['alg'=>'RS256','typ'=>'JWT']);
$c = $b64([
    'iss'=>$sa['client_email'],
    'scope'=>'https://www.googleapis.com/auth/spreadsheets.readonly',
    'aud'=>'https://oauth2.googleapis.com/token',
    'iat'=>$now,'exp'=>$now+3600,
]);
$key = openssl_pkey_get_private($sa['private_key']);
openssl_sign("$h.$c", $sig, $key, OPENSSL_ALGO_SHA256);
$jwt = "$h.$c." . rtrim(strtr(base64_encode($sig), '+/', '-_'), '=');

$ch = curl_init('https://oauth2.googleapis.com/token');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER=>true,
    CURLOPT_POST=>true,
    CURLOPT_POSTFIELDS=>'grant_type=urn:ietf:params:oauth:grant-type:jwt-bearer&assertion='.urlencode($jwt),
    CURLOPT_HTTPHEADER=>['Content-Type: application/x-www-form-urlencoded'],
]);
$resp = json_decode(curl_exec($ch), true);
curl_close($ch);

$token = $resp['access_token'] ?? null;
if (!$token) { echo 'Нет токена: ' . json_encode($resp); exit; }
echo 'Токен получен: OK<br>';

$ch = curl_init("https://sheets.googleapis.com/v4/spreadsheets/" . SPREADSHEET_ID . "?fields=properties.title,sheets.properties");
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER=>true,
    CURLOPT_HTTPHEADER=>["Authorization: Bearer $token"],
]);
$meta = json_decode(curl_exec($ch), true);
curl_close($ch);

if (isset($meta['error'])) { echo 'Ошибка: ' . $meta['error']['message']; exit; }

echo 'Таблица: ' . $meta['properties']['title'] . '<br>';
echo 'Вкладки:<br>';
foreach ($meta['sheets'] as $s) {
    echo '&nbsp;&nbsp;• ' . $s['properties']['title'] . '<br>';
}
echo '<br><b>✅ Всё работает.</b>';

Замените ВСТАВЬТЕ_СЮДА_ID_ВАШЕЙ_ТАБЛИЦЫ на ID из Части 3.6. Сохраните файл.

Шаг 5.6. Откройте в браузере

В новой вкладке откройте:

text

https://11.kinkaju.ru/Gorelikova/check.php

(замените Gorelikova на свою фамилию)

Должны увидеть:

text

Email робота: sheets-reader@your-project.iam.gserviceaccount.com
Токен получен: OK
Таблица: Дневник чтения
Вкладки:
  • Читаю
  • Прочитано
  • Хочу прочитать

✅ Всё работает.

Шаг 5.7. Что делать, если ошибка

Что на экранеЧто это значитЧто делатьНе читается service-account.json | Ключ не в той папке или битый | Убедитесь, что файл лежит рядом с check.php
The caller does not have permission | Таблица не расшарена роботу | Откройте таблицу → Поделиться → добавьте client_email с ролью «Читатель»
Requested entity was not found | Неверный ID таблицы | Скопируйте ID из адресной строки таблицы заново
openssl_pkey_get_private | Ключ повреждён | Скачайте новый ключ из Google Cloud
Пустая белая страница | Ошибка PHP | Включите показ ошибок — см. ниже

Как увидеть ошибку PHP: создайте рядом файл .user.ini (или откройте index.php и вставьте первой строкой):

php

<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

Теперь вместо белой страницы будет текст ошибки — его можно показать ИИ.

Не переходите дальше, пока не увидите «✅ Всё работает».

Часть 6. Собираем сервис с ИИ-помощником

Теперь у вас есть рабочее подключение — можно собирать сам сервис. Здесь начинается вайбкодинг.

Как это работает

Вы открываете чат с ИИ (ChatGPT, Claude, DeepSeek — что удобнее) и по шагам просите собрать вам страницу. Каждый шаг — маленькое улучшение. После каждого — сохраняете файл на хостинге и обновляете страницу в браузере.

Правила общения с ИИ

Плохо:

❌ «Сделай красиво»
❌ «Не работает»
❌ «Добавь всего»

Хорошо:

✅ «Сделай карточки книг сеткой по 3 в ряд»
✅ «Ошибка: Fatal error: Uncaught Error... (полный текст)»
✅ «Добавь фильтр по статусу: читаю / прочитал / хочу»

Правила:

Одна задача — одно сообщение.
Прикладывайте ошибки полностью (скопируйте текст с экрана).
Просите полный файл целиком — так проще копировать.
Проверяйте после каждого шага: сохранили → обновили страницу → посмотрели.
Если ИИ запутался — начните новый чат, приложите текущий код и скажите «продолжаем проект».

Первый запрос

Начните с такого сообщения (замените на свою тему):

Помоги мне сделать одностраничный сервис на PHP.Что есть:
На хостинге в моей папке лежит index.php (пока пустой) и service-account.json.
У меня есть Google-таблица с ID ..., в ней вкладка Прочитано со столбцами: Название, Автор, Оценка, Дата.
Подключение через сервисный аккаунт уже работает — я проверял через check.php, всё ок.
Что нужно:
index.php должен читать вкладку Прочитано и выводить список книг в виде карточек.
Каждая карточка: название, автор, оценка, дата.
Всё в одном файле: PHP сверху, HTML + CSS снизу.
Красиво: карточки в сетке, скруглённые углы, тень.

Первый шаг — просто чтобы увидеть данные на экране. Не просите сразу «всё красиво и с фильтрами».

Примерный порядок шагов

«Покажи книги списком текстом» — минимально рабочий вариант.
«Оберни каждую в карточку с отступами» — уже похоже на что-то.
«Сделай сетку по 3 карточки в ряд» — визуально приятнее.
«Оценку выведи кружком в правом верхнем углу» — детализация.
«Цвет карточки — по статусу книги» — если у вас есть статусы.
«Добавь кнопку обновления данных» — если данные меняются часто.
«Сделай удобно на телефоне» — адаптив.

Один шаг = одна маленькая правка. Не пытайтесь проскочить сразу в конец.

Как сохранять на хостинге

После каждой итерации ИИ:

Откройте файловый менеджер хостинга.
Откройте index.php в редакторе (или создайте, если его нет).
Вставьте код, который прислал ИИ.
Сохраните.
Обновите вкладку браузера с вашим адресом https://11.kinkaju.ru/Gorelikova/ через Ctrl+F5 (чтобы сбросить кэш).
Посмотрите, что получилось.

Если что-то сломалось

Страница пустая → добавьте в начало index.php две строки для показа ошибок:
php

ini_set('display_errors', 1);
error_reporting(E_ALL);

Обновите — увидите текст ошибки. Скопируйте его в чат ИИ.
Стало хуже, чем было → сохраните предыдущую версию файла на компьютере, чтобы откатиться.
ИИ не понимает, что не так → сделайте скриншот и опишите словами: «карточки идут в одну колонку, а я просил в три».

Полезный приём

Перед каждой новой сессией с ИИ (если чат сбрасывался) пишите так:

Продолжаем проект «Дневник чтения». Вот текущий код: [вставить]. Работает: чтение из Google Sheets, вывод списка книг. Что нужно дальше: сделать фильтр по статусу.

Так ИИ сразу поймёт контекст и не будет переспрашивать.

Часть 7. Что должно получиться

К концу работы у вас:

□
Своя папка 11/public_html/ВашаФамилия/.
□
В ней два файла: index.php и service-account.json.
□
index.php читает вашу Google-таблицу.
□
Страница показывает данные из таблицы в удобном виде.
□
Открывается по адресу https://11.kinkaju.ru/ВашаФамилия/.
□
Работает на телефоне.

Закройте доступ к ключу

Обязательно создайте рядом файл .htaccess (без имени, только расширение):

apache

<Files "service-account.json">
    Require all denied
</Files>

Это защитит ключ: если кто-то попробует открыть https://11.kinkaju.ru/ВашаФамилия/service-account.json, он получит отказ.

Часть 8. Как проверить, что всё работает

Откройте https://11.kinkaju.ru/ВашаФамилия/ — страница с данными.
Откройте свою Google-таблицу.
Поменяйте одну ячейку (например, оценку книги).
Вернитесь на страницу и нажмите Ctrl+F5.
Значение на странице должно измениться.

Если меняется — сервис живой, вы всё сделали правильно.

Часть 9. Идеи для улучшения

Когда база работает, добавьте что-то из этого. Каждая идея = отдельный запрос ИИ.

Просто:

Тёмная тема по кнопке.
Счётчик: «прочитано 12 книг за год».
Сортировка по оценке.
Поиск по названию.

Средне:

Фильтр по статусу (кнопки «читаю», «прочитал», «хочу»).
Прогресс-бар по цели года.
Автоматические статусы: книга «читаю», если есть дата начала, но нет даты конца.
Экспорт в CSV (скачать таблицу).

Продвинуто:

График: сколько книг в месяц.
Мобильное приложение (PWA) — устанавливается на телефон.
Уведомление в Telegram, когда добавил новую книгу.

Важно: добавляйте по одной фиче за раз, проверяйте, только потом переходите к следующей.

Часть 10. Презентация

Каждый показывает свой сервис классу. Что рассказать:

Тема — что за проект, почему выбрал именно её.
Данные — что в таблице, как часто обновляешь.
Адрес — https://11.kinkaju.ru/ВашаФамилия/.
Демо — открыл на проекторе → поменял что-то в таблице → обновил страницу → все увидели, что поменялось.
Что было сложно — честно про свои грабли.
Планы — что ещё хочешь добавить.

Хорошая презентация — 2 минуты, без воды.

Часть 11. Куда идти дальше

Освоив эту связку (Google Sheets → PHP → красивая страница), вы сможете делать что угодно:

Семейный бюджет.
Трекер тренировок.
Список подарков.
Каталог любимых песен.
Список мест, куда хочу поехать.

Принцип один: данные в Google Sheets, PHP читает, страница показывает. Меняешь тему — меняется только таблица и оформление.

Финальный чек-лист

Перед сдачей проекта:

□
Тема выбрана и осмыслена.
□
Google-таблица с реальными данными (15+ строк).
□
Google Cloud настроен, сервисный аккаунт создан.
□
Таблица расшарена роботу (роль «Читатель»).
□
check.php показывает «✅ Всё работает».
□
index.php красиво отображает данные.
□
Файлы залиты в 11/public_html/ВашаФамилия/.
□
Есть .htaccess, защищающий ключ.
□
Проверено по адресу https://11.kinkaju.ru/ВашаФамилия/.
□
Готовы 3-минутное выступление и демо.

Главное правило: маленькие шаги. Один запрос — одна проверка — один результат. Так вы дойдёте до финиша без паники. Удачи!