В этой серии записей я хочу сделать внутренний справочник сотрудников несуществующей фирмы в виде single page application на основе гугл таблиц и скриптов как бэкенда и vue как фронтенда, примерно следующего вида:

Сайт (пример доступен по ссылке — https://codepen.io/DmitriiBeattle/full/oNaaypR) — при загрузке будет уметь :

• выводить список всех сотрудников из БД, которая будет в гугл таблицах
• по клику на ФИО выводить детали по сотруднику и его фото
• в строке поиска по фамилии — так же выводить в итоге детали
• по очистке — убирать из поля поиска запрос и убирать все выведенные данные ранее.

Начнем?

База данных по сотрудникам в google sheets

И сразу начну с требований к данным в БД на гугл диске:

1. Хранить список всех сотрудников, как работающих так и уволившихся
2. Хранить фотографии сотрудников
3. Иметь возможность выводить фотографию с диска на сайте

1. Список всех сотрудников.

Создаю файл гугл таблиц и наполняю его первичными данными:

2. Фотографии сотрудников

На гугл диске создаю папку, размещаю в ней фотографии

и открываю к ним всем доступ на чтение:

Доступ нужен для того, чтобы получить id файла.

Далее все ссылки доступа фотографий переношу в таблицу:

и вытаскиваю из него id файла:

через стандартную функцию гугл таблиц — REGEXEXTRACT:

=REGEXEXTRACT(M2;"https:\/\/drive\.google\.com\/file\/d\/(.*?)\/")

3. Внешняя ссылка на фотографию

ID нужен для того, чтобы добавить его в название ссылки, которая будет указана в img src:

="https://drive.google.com/uc?id="&N2

Финал в гугл скриптах

Перехожу в script editor, прописываю следующий код:

const DBSHEET = "EmployeeDB";
const ss = SpreadsheetApp.getActiveSpreadsheet();
const wsDb = ss.getSheetByName(DBSHEET);

function getActiveEmployees() {

  const allEmpDB = wsDb.getRange(2, 1, wsDb.getLastRow() - 1, 12).getValues().filter(row => row[1] == "Да");
  return allEmpDB;

}

function doGet() {
  const webArr = getActiveEmployees()

  const contService = ContentService.createTextOutput((JSON.stringify(webArr)))
  contService.setMimeType(ContentService.MimeType.JSON)

  return contService
}

Для тех, кто следит за этим блогом ничего нового тут не будет.

Метод getActiveEmployees() получает и возвращает список всех работающих сотрудников через allEmpDB = wsDb.getRange(2, 1, wsDb.getLastRow() - 1, 12).getValues().filter(row => row[1] == "Да");

Метод doGet() много раз описывался ранее на этом сайте: через развернутый веб-апп он возвращает массив как json api:

Собственно говоря и всё. Бэкенд готов.

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

Я прекрасно понимаю все проблемы и риски связанные с безопасностью передачи данных таким незащищенным образом, но эта серия записей носит ознакомительный характер возможностей google sheets, scripts и web app и в дальнейшем я покажу как избежать передачи «персональных» данных наружу более защищенно.

P.S. Кто все эти люди?

Ну как. Сгенерированы:

1. Генератор ФИО — https://ciox.ru/generator-full-name
2. Фотографии random user api — https://randomuser.me/
3. База данных (додумана формулами гугл таблиц) — ссылка

Предлагаю считать такой бэкенд стилем lowcode/zero-code 🙂