Интерфейс редактора

В этом уроке вы узнаете, как ориентироваться в пользовательском интерфейсе редактора. Редактор (Editor UI, т.е. Editor User Interface) — это веб-интерфейс n8n для создания и управления рабочими процессами (workflow). Мы пройдемся по холсту и покажем вам, что означает каждый значок и где найти то, что вам понадобится при построении рабочих процессов в n8n.

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

Курс был подготовлен для версии 0.127.0. Удостоверьтесь, что ваша версия такая же или новее.

Как только вы зашли в приложение, вы увидите нечто вроде такого:

Теперь пройдемся по навигации.

Настройки редактора

Как вы уже знаете, редактор — это веб-интерфейс для управления вашими рабочими процессами. Основное пространство редактора занимает холст, на котором вы будете выстраивать цепочки автоматизаций. Из редактора у вас есть доступ ко всем своим рабочим процессам и учетным данным, а также к документации и форуму n8n.

Левая панель

Под логотипом n8n в верхнем левом углу вы увидите круглый значок со стрелкой. Щелкните по нему, чтобы открыть меню слева — оно содержит основные функции и настройки для управления рабочими процессами.

Левая панель редактора n8n
Левая панель редактора n8n

В ней находятся до шести основных разделов

  • Панель администратора (Admin Panel): только для пользователей n8n.cloud, используется для доступа к панели управления.
  • Рабочие процессы (Workflows): содержит операции для создания и редактирования рабочих процессов.
  • Учетные данные (Credentials): содержит операции по созданию учетных данных. Они используются для авторизации на внешних сайтах и сервисах.
  • Выполнения (Executions) : содержит информацию о выполнениях ваших рабочих процессов (открывается в новом окне). Выполнения — это только полные запуски рабочего процесса от первого до последнего узла. Если рабочий процесс прервался во время своей работы, это не отразится в Выполнениях
  • Справка (Help). Здесь вы можете быстро перейти к документации, форуму, библиотеке рабочих процессов и узнать больше про свою версию n8n.
  • Обновления (Updates): При наличии более старших версий вы сможете узнать, как давно была выпущена ваша версия, её номер, и информацию по более свежим версиям.

Верхняя панель

Панель вверху редактора содержит 4 единицы информации

Верхняя панель редактора n8n
Верхняя панель редактора n8n
  • Текст, который появляется в верхнем левом углу — название текущего рабочего процесса. Вы можете изменить его в любое время.
  • Рядом с ним у вас есть возможность добавить теги. Они помогают организовать рабочие процессы по вариантам использования, домену или другому признаку. Если у вас много процессов, то при открытии можно указать теги и выбирать из меньшего числа процессов..
  • В правом верхнем углу находится оранжевая кнопка «Save», которая сохраняет текущий рабочий процесс.
  • Рядом с ней есть кнопка переключения, используемая для активации или деактивации текущего рабочего процесса. Вы сможете ей воспользоваться, если только у вас workflow начинается с узла-триггера (дальше).

Холст

Холст представляет собой серый фон с сеткой в редакторе. На холсте находятся пять кнопок с разными функциями и узел (node) с названием Start:

Холст редактора n8n
  • Кнопки (+) и (-) в лупе для изменения масштаба, а также кнопка (←) для его возврата к исходному значению.
  • Оранжевая кнопка Execute Workflow (запустить рабочий процесс). Когда вы нажимаете на нее, выполняются все узлы, начиная со Start или с триггеров, до тех пор, пока не дойдут до конца цепочки или не вызовут ошибку.
  • Оранжевый кружок со знаком + внутри открывает панель узлов.
  • В центре холста есть квадрат с зеленым значком “Play”. Это начальный узел. Вы узнаете больше об узлах далее.

💡

Перемещение холста

Вы можете передвигать холст двумя способами:

  • Нажмите Ctrl + левая кнопка мыши на холсте и переместите его
  • Положите два пальца на сенсорную панель и сдвиньте

Не беспокойтесь о выполнении и активации рабочего процесса, мы объясним эти концепции позже в курсе.

Узлы

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

📖

Узел

Узел (открывается в новом окне) – это точка входа для получения данных, функция для их обработки или точка выхода для отправки. Функции могут быть чем угодно, например, агрегированием данных или условной фильтрацией.

По функциям узлы можно разделить на два типа:

  • Обычные узлы (Regular node) добавляют, удаляют и редактируют данные, а также запрашивают и отправляют внешние данные.
  • Узлы-триггеры (Trigger node) запускают рабочий процесс и предоставляют исходные данные.

📖

Основные узлы (Core node)

Среди обычных и триггер-узлов есть особенные, которые не представляют какое-либо приложение или служб. Вместо этого они выполняют общие функции, такие как планирование рабочих процессов (например, Cron и Interval) или добавление функций JavaScript (например, Function и Function Item). Они называются основными узлами (Core nodes)

Начальный узел (Start node)

Начальный узел — это стартовая точка по умолчанию в любом рабочем процессе. Каждый раз, когда вы создаете новый рабочий процесс, по умолчанию появляется Start node.

Начальный узел (Start node)

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

Вы, наверное, уже догадались, что Start node – это основной узел-триггер. Помимо него, существует более 290 других обычных и триггерных узлов для различных функций, приложений и служб.

Как найти нужный узел

Вы можете найти все доступные узлы на панели узлов в правой части пользовательского интерфейса редактора. Панель узлов можно открыть тремя способами:

  • Щелкните по значку (+) в правом верхнем углу холста.
  • Щелкните по значку (+) справа от правого выхода любого узла
  • Щелкните по темно-серой точке справа от уже существующего узла на холсте (узла, к которому вы хотите добавить еще один) и потяните линию соединения вправо. То же самое можно сказать и про кнопку (+) справа от любого узла
  • Нажмите клавишу Tab на клавиатуре.

Панель узлов выглядит примерно так:

Обратите внимание, что на панели узлов узлы сгруппированы на трех вкладках: все (All), обычные (Regular) и триггерные (Trigger). Кроме того, узлы также сгруппированы по их функциональной области, например, Analytics (аналитика) или Sales (продажи). Это упрощает поиск нужных узлов.

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

Добавление узлов

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

Кнопки на узле

Если вы наведете курсор на узел, вы заметите, что вверху появятся четыре значка:

  • Удалить узел
  • Деактивировать / активировать узел
  • Дублировать узел
  • Выполнить узел
Кнопки на узле

💡

Перемещение рабочего процесса

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

Подводим итоги

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

На следующем уроке вы создадите мини-процесс, чтобы применить на практике то, что вы уже изучили.

Следующий урок → Ваш первый рабочий процесс
Предыдущий урок → Установка и обновление n8n
К курсу → Вводный курс по сервису автоматизации n8n