Уровень сложности: Начинающий

Последнее обновление: 2021-03-19

В этой лабе вы познакомитесь с одним из самых простых способов написания кода, который связан с технологиями разработки Google, используя один из основных языков программирования - JavaScript. С помощью Google Apps Script вы напишете код для получения текста пользователя в виде адреса, который находится в ячейке Таблицы Google, сгенерируете карту Google Map на основе этого адреса и отправите карту как вложение себе или другу с помощью Gmail.

Что в этом особенного? На самом деле это будет всего 4 строчки кода!

Что вы изучите

Что вам понадобится

Как вы собираетесь изучать этот урок?

a1/ Только прочту a2/ Прочту и буду выполнять задания

Как вы оцениваете свой опыт в использовании инфраструктуры Google для разработчиков и API сервисов Google?

b1/ Новичок b2/ Продвинутый пользователь b3/ Опытный разработчик

Теперь, когда вы знаете, о чем этот урок, что именно мы с вами собираемся делать? Вот небольшой план:

  1. Узнаем немного об Apps Script... достаточно, чтобы начать работу.
  2. Создадим новую Таблицу Google.
  3. Введем известный почтовый адрес в левую верхнюю ячейку Таблицы (в A1).
  4. Узнаем, как войти в редактор Apps Script практически из любого Google документа.
  5. Отредактируем код скрипта, сохраним и запустим его.
  6. Проверим Gmail, чтобы полюбоваться на плоды своего труда!

Давайте начнем!

Что такое Apps Script?

Google Apps Script - это платформа для разработки, которая позволяет быстро и легко создавать сценарии и небольшие приложения, которые интегрируются с Google Workspace. С помощью скриптов:

Apps Script можно использовать для создания множества различных приложений, начиная от калькулятора с выводом в консоль и заканчивая чат-ботами и веб-сервисами. Однако один из первых и наиболее популярных кейсов - использование скриптов для добавления дополнительных функций в Таблицу Google. В оставшейся части этого занятия вы узнаете, как использовать скрипты для извлечения данных из Таблицы и для подключения к другим службам Google.

Давайте же начнем!

Введите почтовый адрес в новую Таблицу Google, следуя этим инструкциям:

  1. Создайте новую Таблицу Google по удобной ссылке (sheet.new) или, в качестве альтернативы, перейдите на свой Google Диск (drive.google.com) и нажмите Создать > Google Таблицы > Создать пустую таблицу.
  2. В пустой Таблице перейдите к первой ячейке в верхнем левом углу (A1). Она будет в столбце A и в строке 1. Теперь введите адрес в эту ячейку - выберите любой действующий адрес с целевым местоположением, например, почтовый индекс, город и область. Вот пример ввода адреса в Москве:

Это все, что вам нужно сделать в Таблице. Теперь осталось открыть редактор кода и написать в нем несколько строк!

Теперь, когда у вас есть новая Таблица Google, пора отредактировать связанный с ней скрипт. Следуйте инструкциям ниже:

Откройте редактор скриптов

Выберите Инструменты в строке меню, затем щелкните Редактор скриптов.

В браузере вы увидите редактор кода для связанного скрипта.

Функция по умолчанию с именем myFunction() создается автоматически. Вы попали в редактор кода, чтобы начать кодирование. Вот и все... Теперь все готово, чтобы написать новое приложение!

Отредактируйте/замените код (шаблон)

Код "шаблона", который вам дан при создании нового проекта, пуст и мало что делает, поэтому давайте заменим его нашим приложением. Скопируйте код, который вы видите ниже, заменив все в окне редактора строками ниже. Вы не поверите, но это всё приложение!

/** @OnlyCurrentDoc */
function sendMap() {
  const sheet = SpreadsheetApp.getActiveSheet();
  const address = sheet.getRange('A1').getValue();
  const map = Maps.newStaticMap().addMarker(address);
  GmailApp.sendEmail('YOUR_EMAIL_ADDR', 'Карта', 'Смотрите ниже.', {
    attachments: [map],
  });
}

Первая строка - это комментарий, он содержит необязательную аннотацию, которая инструктирует Apps Script ограничить доступ только к Таблице, с которой мы работаем (в отличие от доступа ко всем Таблицам пользователя). Вам нужно добавить такой комментарий только один раз для каждого сценария, и это поможет вашим пользователям быть уверенным в том, что программа не будет обращаться к другим данным.

Помимо этого, самое приятное то, что 4 строки sendMap() составляют все приложение! Конечно, нам нужно заменить условный адрес электронной почты ('YOUR_EMAIL_ADDR') на реальный, например, на hello@contributor.pw.

Теперь, когда вы изменили файл, его нужно сохранить.

Сохраните код

Сохраните проект и назовите его (назовите его как хотите, например "Мой отправщик карт"):

После того, как скрипт переименован и сохранен, давайте запустим его! В верхней части редактора убедитесь, что в раскрывающемся списке функций выбрана функция sendMap, и нажмите "Выполнить".

Одна из особенностей Apps Script, которую ценят разработчики, заключается в том, что вам не нужно писать код авторизации, который предоставляет программе доступ к данным пользователя. Хотя Apps Script управляет этим, пользователям (вашего приложения) по-прежнему необходимо предоставить разрешение (для этого скрипта) на доступ к своим Таблицам и к возможности отправлять электронную почту через Gmail от имени того, кто запускает код. Первый диалог авторизации выглядит так:

Чтобы продолжить, нажмите "Проверить разрешения".

Теперь вы попадаете в диалоговое окно OAuth2 с запросом разрешения на доступ к вашей Таблице, а также на отправку электронной почты от вашего имени:

После того, как вы предоставите разрешение, сценарий будет выполнен до завершения.
Теперь проверьте учетную запись своей электронной почты, посмотрите "Отправленные", и вы должны найти сообщение с темой "Карта" и телом сообщения, которое выглядит следующим образом:

Когда вы откроете вложение в сообщении электронной почты, вы должны получить карту Google с булавкой на адресе, который вы ввели в Таблице (попробуйте другие адреса!):

Разве это не круто?!! Подумайте об этом ... у вас есть четыре строки кода, которые осмысленно обращаются к трем различным продуктам Google. Даже если вы не знакомы с JavaScript или Apps Script, код все равно должен быть достаточно читабельным, чтобы вы имели общее представление о том, как он работает! И, возможно, вы уже придумали, что скрипты могут сделать для вас!

Посетите мой сайт contributor.pw, чтобы получить больше информации и практических занятий по Таблицам, скриптам и другим технологиям Google.

Вы можете использовать мою страницу GitHub как стартовую для поиска полезного и поддерживаемого кода на Apps Script.

Пожалуйста, отправляйте все жалобы, предложения по улучшению и сотрудничеству, заявки на персональную помощь и консультации по адресу ai@contributor.pw.

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

Поскольку это приложение очень короткое, мы не можем обсуждать общую структуру кода. Вместо этого мы можем просто пройти построчно и посмотреть, что касается различных продуктов Google, всего в четырех строках кода!

  1. Это обычное объявление функции sendMap() для JavaScript.
function sendMap() {
  1. Первая строка кода вызывает службу Таблиц, доступную из Apps Script через объект SpreadsheetApp. Возвращенная Таблица присваивается переменной sheet. Метод getActiveSheet() делает именно то, что он говорит, - он возвращает "дескриптор" текущей Таблицы, который активен в пользовательском интерфейсе (UI).
const sheet = SpreadsheetApp.getActiveSheet();
  1. С помощью объекта sheet указывается диапазон ячеек (одна ячейка) в нотации A1 с помощью getRange(). "Диапазон" - это одна или группа ячеек, например, такая ​​как наша A1, в которую мы ввели текст. Теперь давайте извлечем то, что находится внутри этого диапазона ячеек с помощью вызова getValue() и назначим переменной address при возврате. Попробуйте добавить больше адресов и читать из разных ячеек.
const address = sheet.getRange('A1').getValue();
  1. Третья строка кода подключается к сервису Google Maps через объект Maps. Как только у нас появится доступ к сервису карт, мы запрашиваем создание новой статической карты через newStaticMap(). Затем вы можете поставить "булавку" на адрес, который мы вытащили из Таблицы, используя метод addMarker().
const map = Maps.newStaticMap().addMarker(address);
  1. В последней строке используется служба Gmail (через объект MailApp), вызывающая свой метод sendEmail() для отправки электронного письма, содержащего текст "Смотрите ниже." и изображение карты как вложение. Прим., опять же, четвертая строка разбита на 3 для удобства чтения.
GmailApp.sendEmail('hello@contributor.pw', 'Карта', 'Смотрите ниже.', {
  attachments:[map]
});