Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

6 смертных грехов разработки надстройки Google Apps Script

  1. # 1: Кодирование надстройки Google Apps Script во встроенном редакторе скриптов
  2. # 2: Жесткое кодирование специфичных для приложения строк и вызовов API
  3. # 3: Только тестирование в AuthMode.LIMITED
  4. # 4: Не разделяйте ваш HTML / JS / CSS
  5. # 5: Неспособность понять ограничения среды во время проектирования
  6. # 6: Задержка маркетинговых материалов до представления на рассмотрение
  7. Заключение

Итак, вы хотите создать дополнение для Google Docs, Sheets или Slides, но вы беспокоитесь о том, что окажетесь на пути к адскому развитию? Тогда вы попали в нужное место. Как кто-то, кто был на этом пути раньше, я хотел бы поделиться некоторыми ошибками, ошибками и грубыми ошибками, которые я либо стал жертвой или почти избежал, что я узнал от них, и как вы можете составить карту пройти через процесс разработки надстроек Google Apps Script, который полностью обходит их без необходимости программирования бдение , В частности, я сосредоточился на вещах, которые вы могли бы рассмотреть, чтобы сэкономить время или усилия, которые в конечном итоге дорого обойдутся вам. Я понимаю, что традиционно существует семь смертных грехов, но я не мог придумать седьмого, который был достаточно греховным, поэтому нам придется пойти с шестью. Давайте начнем:

# 1: Кодирование надстройки Google Apps Script во встроенном редакторе скриптов

Это всегда тяжелая работа по подготовке, необходимая для эффективной работы в новой среде, когда все, что вы действительно хотите сделать, - это запрыгнуть обеими ногами и начать экспериментировать с API, и запуск нового надстройки Google Apps Script не является исключением. Вот что делает встроенный редактор сценариев настолько заманчивым: вам не нужно ничего настраивать или читать какую-либо документацию. Вы можете просто нажать «Инструменты> Редактор скриптов», а затем сразу же приступить к написанию кода. Однако, как и большинство соблазнов, в дальнейшем это будет стоить дорого. Встроенный редактор сценариев предлагает минимальные параметры управления исходным кодом, функции поиска по умолчанию и текстовый редактор, который выполнит работу, но не имеет таких качественных функций, как автоматическая вставка закрывающих скобок и одновременный многострочный отступ. Конечно, этого достаточно для того, чтобы небольшие проекты работали, но как только вы разберетесь с несколькими файлами, вы в конечном итоге достигнете критической точки, и тогда наступит второй соблазн.

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

Это ловушка!

«Почему бы просто не сделать мою работу в <IDE по выбору>, а затем скопировать и вставить ее в редактор сценариев?» - спросите вы себя. Ну, я скажу вам почему: тот факт, что вы спрашиваете себя об этом, означает, что вы имеете дело с нетривиальной степенью сложности. В противном случае, вы можете сделать это еще 30 минут и покончить с этим. Эта сложность означает, что вы должны использовать контроль исходного кода профессионального уровня и хорошие методы разработки вместо того, чтобы взламывать и надеяться на лучшее, пытаясь вспомнить, какие файлы были и не были скопированы в последнее время. К счастью, вы можете избежать всего этого беспорядка - и продолжать использовать свою любимую IDE - с помощью Google Drive REST API вместо этого импортировать и экспортировать ваш код. Это похоже на копирование-вставку файла за файлом, за исключением того, что компьютер заставляет делать все скучные и повторяющиеся части, которые уязвимы для человеческой ошибки. Фактически, если вы настроите git-хуки, которые автоматически загружают ваши изменения, это не будет отличаться от типичного рабочего процесса ветки функций (не забывайте сквошить). Поэтому убедитесь, что вы настроили это в самом начале. Я обещаю, вы не пожалеете об этом.

# 2: Жесткое кодирование специфичных для приложения строк и вызовов API

Если ваша надстройка Google Apps Script не предназначена исключительно для листов (например), вы в конечном итоге захотите перенести ее в Документы. Или даже если оно никогда не будет перенесено в другое приложение G Suite, вы можете выпустить его переводы на испанский, французский, немецкий и китайский языки. Если вы жестко закодировали каждую строку, относящуюся к электронным таблицам, вам придется искать их все, чтобы передать их вашему переводчику, а затем вручную вставить их обратно. Если вы жестко закодировали каждый вызов API SpreadsheetApp.getThing (). getOtherThing (). getWidth (), тогда вам придется заменить его на DocumentApp.getDifferentThing (). getWidth () по всей вашей кодовой базе. Или, если вы обновляете пользовательский интерфейс для одного из нескольких надстроек, которые в основном одинаковы, вам придется очень осторожно перенести эти изменения, чтобы убедиться, что вы ничего не сломаете в других надстройках - что вы, вероятно, не видели. Тяжело думать о создании обновленного интерфейса.

Тяжело думать о создании обновленного интерфейса

Оригинальный интерфейс в Документах / Листах / Слайдах (слева); переработанный интерфейс в Документах / Листах / Слайдах (справа)

С другой стороны, если вы начали с объекта-обертки, который абстрагировался, для какого конкретного приложения G Suite было установлено дополнение, и i18n Если в объекте хранятся все строки, обращенные к пользователю, то перенос или перевод вашего дополнения будет намного проще, быстрее и менее подвержен ошибкам. Я закончил тем, что вызвал свой объект-оболочку IntegratedApp, и все, что он действительно сделал, - это предоставил общий интерфейс для остальной части моего кода, чтобы использовать, не заботясь о том, для какого приложения это было. Вместо того, чтобы делать вышеупомянутые вызовы SpreadsheetApp и DocumentApp, я бы просто вызвал IntegratedApp.getThingWidth () и затем определил, что это означает в объекте-оболочке IntegratedApp, чтобы соответствовать приложению, использующему его. Таким образом, весь код может быть разделен между надстройками, за исключением единственного файла конфигурации и файла, определяющего IntegratedApp. Поскольку проще всего разрабатывать с использованием обертки, если вы начнете делать это с самого начала, я рекомендую сделать именно это.

Диаграмма классов UML, показывающая отношения между IntegratedApp и Docs / Sheets / Slides

# 3: Только тестирование в AuthMode.LIMITED

Это легко забыть, потому что большая часть вашей работы в надстройке Google Apps Script будет основана на функциональности, которая доступна только после того, как надстройка была включена, что, естественно, означает, что большую часть времени вы будете в AuthMode.LIMITED. К сожалению, большинство ваших новых пользователей не будет.

К сожалению, большинство ваших новых пользователей не будет

Определение режима авторизации с использованием жизненного цикла надстройки скрипта Служб Google

Ознакомьтесь с дополнением «Сценарий Google Apps» жизненный цикл авторизации и вы увидите, что пока новый пользователь не включит ваше приложение, даже если оно уже установлено, ваш скрипт onOpen () будет работать в AuthMode.NONE. Поэтому, если ваш onOpen () делает что-то, что может быть сделано только в AuthMode.LIMITED или выше, вы потратите первый день запуска скремблирования надстройки Google Apps Script, чтобы переписать каждую нарушающую функцию, чтобы ваши пользователи могли фактически использовать вашу надстройку. -на. В моем случае я вызывал getActivePresentation (), чтобы установить привязки некоторых функций для моего объекта IntegratedApp. Поскольку я на самом деле не пытался что-либо сделать с документом до того, как мне было позволено, было просто обернуть этот вызов в другую функцию вместо того, чтобы устанавливать связанную функцию непосредственно как свойство оболочки, гарантируя, что она будет оценена после надстройка была включена вместо сразу после выполнения onOpen.

BadIntegratedApp = {getPageWidth: SlidesApp.getActivePresentation (). GetPageWidth .bind (SlidesApp.getActivePresentation ())};

Это выполняет SlidesApp.getActivePresentation () при загрузке, поэтому он немедленно завершится ошибкой в ​​AuthMode.NONE

GoodIntegratedApp = {getPageWidth: function () {return SlidesApp.getActivePresentation (). GetPageWidth (); }};

Это откладывает выполнение SlidesApp.getActivePresentation () до вызова IntegratedApp.getPageWidth ()
К счастью, достаточно легко убедиться, что вы поймете эту проблему перед выпуском, добавив «тест для совершенно новых пользователей» в вашу спецификацию QA и (еще лучше) тестирование, пока вы разрабатываете, используя «Run> Test as add-on» в редактор скриптов для создания тестового примера, который запускается в AuthMode.NONE.

# 4: Не разделяйте ваш HTML / JS / CSS

Надстройки Google Apps Script поддерживают только два типа файлов: .gs и .html. Файлы .gs написаны в скрипте Google Apps (который очень близок к Javascript, но с именем не указано) и запускаются на сервере. Обычно они не являются источником этой проблемы. Как вы можете догадаться, файлы .html написаны на HTML и составляют интерфейс вашего дополнения. Видя, что вы кодируете непосредственно в HTML, вы можете вернуться к временам использования HomeSite для написания DHTML и привести к объединению связанных HTML, CSS и JS в один файл. В конце концов, у вас нет возможности включать файлы .js и .css, верно? Технически да, но практически есть способ обойти это ограничение.

Хотя вы не можете напрямую включать файлы .js и .css, ничто не мешает вам создавать файлы .html, которые функционируют так, как будто они являются файлами .js и .css. Оберните свой JS в тег <script> и вуаля! У вас есть действительный HTML. Оберните ваш CSS тегом <style>, и вы получите правильный HTML. Вы даже можете использовать .js.html и .css.html в своих именах файлов, чтобы было совершенно ясно, что, хотя это файл «HTML», это действительно файл JS. Затем в ваш фактический файл .html вы можете включить JS и CSS, используя печать скриплетов как следующее:

<?! = HtmlService.createHtmlOutputFromFile ('loginForm.js'). GetContent ()?&gt; <?! = HtmlService.createHtmlOutputFromFile ('sidebar.css'). GetContent ()?>

«.Html» в имени файла неявный - нет необходимости включать его здесь
Обратите внимание, что есть Проблемы безопасности XSS принять во внимание, когда вы используете принудительную печать скриптлетов (как указано выше), поэтому обязательно прочитайте их перед использованием. Во многих случаях обычная печать скриплетов будет хорошо вам служить. Понимание печати скриплетов и использование этих знаний для разделения ваших стилей, DOM и бизнес-логики требует лишь небольшого количества чтения и небольшой работы, но когда вам в конечном итоге придется изменить стиль своего дополнения, вы будете рады, что вы иметь четкое разделение между вашими стилями, сценариями и HTML.

# 5: Неспособность понять ограничения среды во время проектирования

Написание дополнения для G Suite очень похоже на обычную веб-разработку, но есть некоторые вещи, которые вы можете сделать на обычной веб-странице, которые просто невозможны в дополнении. Важно, чтобы вы поняли эти ограничения до начала разработки, и так же важно передать их своему дизайнеру UI / UX, прежде чем они начнут делать макеты. Легко подумать (например), что вы можете поместить контекстную кнопку с заголовком в строку заголовка надстройки боковой панели, но оказывается, что вы не можете. Если ваши насмешки зависели от того, доступны ли эти функции, они вернулись к чертежной доске. Хотя я не могу дать здесь исчерпывающий список банок и каннотов, я объясню несколько и отмечу, что руководство по диалогу а также руководство по стилю вероятно будет полезен вашему дизайнеру.

Во-первых, вы не можете нарушать границы песочницы iframe, и вся песочница выполняется в режиме iframe. Как ни старайтесь, вы не сможете бросить div в середину страницы, чтобы создать красивый модальный диалог выбора изображений. Вместо этого вы должны использовать параметры диалога, которые UI API обеспечивает.

Во-вторых, пристальное внимание к API пользовательского интерфейса покажет, что все вызовы к нему поступают из ваших файлов .gs (которые запускаются на серверах скриптов Служб Google), что означает, что модальный диалог, созданный вашей боковой панелью, фактически создается вашим бэкендом .gs. Сценарий обмена сообщениями веб-интерфейс службы Google в браузере. Поэтому, если вы передадите объект JSON, полный функций, которые могут влиять на боковую панель, в качестве параметра создания модального режима, вы обнаружите, что они не смогут воздействовать на боковую панель при закрытии. Это потому, что для того, чтобы передать этот объект JSON модальному виду, вы сериализуете его и отправляете на серверы Google в запросе, а затем он десериализируется по пути обратно в службу пользовательского интерфейса Google, которая использует десериализованный JSON для создания модального , Сериализация / десериализация уничтожает любое понятие замыкания в функциях JSON. Вы можете использовать печать скриптлетов для передачи информации из боковой панели в диалоговое окно во время его создания, но после того, как поток данных между ними будет ограничен событиями диалога, бэкэнд будет прослушивать и функции бэкэнда, явно вызываемые из диалога с помощью Google. script.run.

run

Функция, которую мы хотим использовать для воздействия на боковую панель через замыкание, не проходит мимо JSON.stringify ()

Наконец, новые надстройки Google Apps Script должны соответствовать требованиям Google. Материал Дизайн Смотри и чувствуй. Вы не будете полностью лишены возможности разрабатывать свое дополнение, если проигнорируете это требование, но у вас будет сложная дорога, чтобы одобрить его к выпуску. Даже если (как в моем случае) версии дополнения «Документы» и «Листы» используют более старый, нематериальный пользовательский интерфейс, ваше новое дополнение все равно должно использовать Материал. С учетом вышесказанного, ресурсы для Material Design довольно хороши для работы, поэтому это конкретное ограничение не слишком болезненно, если вы знаете об этом с самого начала.

# 6: Задержка маркетинговых материалов до представления на рассмотрение

Как инженеры, легко отмахнуться от маркетинга как от «пушистых людей» и предположить, что ваш отдел маркетинга может раскрутить все, что вам нужно, в короткие сроки. Или, если вы идете в одиночку, легко подумать: «Как только у меня будет работать надстройка, я отправлю ее для утверждения функциональности и напишу свой рекламный текст, пока жду утверждения . »Однако, как вы обнаружите в 23:30 в последний день подачи заявок, вы не сможете на самом деле отправить дополнение на утверждение без создания его записи в интернет-магазине, что означает отправку маркетинговых материалов. Вы можете добавить пустые миниатюры и текст Lorem Ipsum, чтобы формы отправлялись, но вы должны будете повторно одобрить ваше дополнение, как только вы добавите реальные изображения и текст, и все это время ваше дополнение будет не быть в интернет-магазине (если вам повезет), или он будет в интернет-магазине с бессмысленным текстом и пустыми изображениями (если вам не так повезло). Избавьте себя от головной боли и подготовьте медиаресурсы задолго до вашего срока.

Избавьте себя от головной боли и подготовьте медиаресурсы задолго до вашего срока

Небольшую часть черновой формы интернет-магазина, которую вы должны заполнить, чтобы отправить надстройку Google Apps Script

Заключение

Возможно, вы заметили, что общая тема моих рекомендаций - «подготовиться заранее». Это не было случайностью. Безусловно, самые большие трудности в разработке программного обеспечения возникают из-за того, что они не продумали все до тех пор, пока серьезная проблема не возникла, и разработка дополнений не стала исключением. Но если вы наберетесь терпения и вначале сделаете некрасивую работу ногами, то обнаружите, что написание надстроек Google Apps Script на самом деле очень приятное занятие, и хорошо подготовленному инженеру нечего их бояться.

Что касается меня, то, что я пережил ошибки и почти ошибки, с которыми я столкнулся в ходе разработки своего дополнения к Google Apps Script, было горкой, но оно того стоило. Я был в состоянии быть партнер по запуску для анонса надстроек Google Slides, и с тех пор наша надстройка собрала почти 20 000 отдельных установок.

«Почему бы просто не сделать мою работу в <IDE по выбору>, а затем скопировать и вставить ее в редактор сценариев?
Css, верно?
GetContent ()?
Gt; <?
GetContent ()?