Введение и первый шаг

Я уже довольно давно обдумывал идею создания собственного веб-сайта. Я провел много онлайн-исследований о том, какие инструменты мне следует изучить (Wordpress, Nodejs, php, Python, bootstrap, material design, angular, reactjs, список ОГРОМНЫЙ), какие сервисы мне нужны (Amazon, Google, Azure, другие ), сколько это будет стоить и т. д. и пришел к выводу, что:

Область веб-разработки значительно продвинулась вперед, и для новичка стало настоящим испытанием найти с чего начать.

Проведя долгое чтение в Интернете, покупая книги, консультируясь с коллегами и друзьями, и в целом наводненное информацией и терминологией; Я нашел очень интересным набор приложений Google, особенно сайты, таблицы и API, который позволяет создавать потоки в этих приложениях.

Я хотел попробовать и создать простой веб-сайт, который использует Google Site для дизайна сайта и Google Sheets для хранения / извлечения данных, и решил задокументировать этот опыт здесь.

Основными задачами, которые будут решены, будут:

1- Базовые сценарии для Google Таблиц

2- Дизайн интерфейса с использованием Сайтов Google

3- Написание кода для связи между веб-сайтом и таблицами

Эта статья будет посвящена №1 выше, а следующие 2 статьи - №2 и №3.

Скрипты для Google Таблиц

Нашей целью будет разработка связанного скрипта (привязанного к определенному листу), который выполняет функцию удаления дубликатов для набора ячеек.

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

Цель скрипта - прочитать список фруктов, удалить дубликаты и записать уникальные названия фруктов в столбец B.

Шаги:

1- На вашем Google Диске создайте новый лист (New → Google Sheets → Blank Sheet)

2- Заполните столбец A нового листа: яблоко A1, банан A2, яблоко A3, манго A4, яблоко A5, ананас A6.

3- Из вновь созданного листа откройте редактор скриптов (Инструменты → ‹› Редактор скриптов)

4- Удалите весь текст в файле «Code.gs» и вставьте приведенный ниже код:

function removeDuplicates() {
      var data = SpreadsheetApp.getActive().getActiveSheet().getRange("A1:A6").getValues();  
      var uniqueList = [];    
      var output = data.filter(function (el) {    
          if (uniqueList.indexOf(el[0]) == -1) {
              uniqueList.push(el[0]);      
              return true;
          }  
      });    
      var write = SpreadsheetApp.getActive().getActiveSheet().getRange(1, 2, output.length).setValues(output);  
}

5. Нажмите кнопку «Выполнить» на панели инструментов редактора скриптов (вас могут попросить разрешить скрипту доступ к таблице при первом запуске).

6. Осмотрите лист → столбец B должен быть заполнен уникальными именами.

Заключение:

Приведенный выше сценарий иллюстрирует несколько простых концепций:

  • Как получить доступ к данным в активном листе (аналогично вы можете просматривать Google API для доступа к данным в неактивных листах)
  • Ваша собственная логика относительно того, что делать с данными
  • Как записать данные обратно на активный лист (или другие листы)

Если мы можем выполнять эти задачи, но вместо связанного скрипта, который выполняется на данном листе; запустить его из внешнего интерфейса веб-сайта. Это откроет возможности использования Google Sheet в качестве простого внутреннего хранилища / извлечения данных для нашего внешнего сайта.

Мы попытаемся сделать это в следующей статье, а пока мы перейдем на Сайты Google и посмотрим, как мы можем создать интерфейсную часть в следующей статье.