В нашем последнем посте из серии Анатомия приложения мы рассмотрели создание бесшовной установки для вашего приложения Freshworks. Сегодня мы более подробно рассмотрим создание пользовательского интерфейса для вашего приложения с использованием возможностей нашей платформы.
Манифест приложения
Файл манифеста, упакованный с приложением, описывает, как и где приложение отображается в продукте Freshworks. Приложение может отображаться в нескольких местах внутри продукта Freshworks, что определяется ключом местоположение в его файле манифеста. Вы можете отображать один и тот же HTML-код в каждом месте или стремиться к разнообразию. Вы также можете выбрать фоновое расположение, если вашему приложению не требуется видимый компонент. Вы можете выбрать местоположение приложения на основе ожиданий ваших пользователей, контекста, в котором ваше приложение должно работать, и объема недвижимости, который потребуется вашему приложению.
Ваше внешнее приложение может упаковывать свой собственный сценарий, стиль и графические ресурсы в приложение или выбирать их из URL-адреса (обычно CDN). Все локальные ресурсы, включая HTML, извлекаются из папки app вашего проекта приложения.
В следующем примере демонстрируется манифест приложения, который требует, чтобы приложение было доступно из двух мест на странице сведений о заявке в Freshdesk. Упакованные активы приложения также видны слева.
Совет по публикации приложения. Выбирая, следует ли извлекать ресурсы из CDN или упаковывать их в приложение, помните, что любой код, напрямую взаимодействующий с SDK (с использованием объекта client), должен быть упакован в приложении. Как описано в нашем предыдущем посте о процессе проверки на Freshworks Marketplace, наши рецензенты ожидают, что смогут проверить этот код до того, как он будет запущен.
Контекстные API
Маловероятно, что ваше приложение будет работать в полной изоляции от внешнего интерфейса продукта, поэтому ему потребуется взаимодействовать и обмениваться данными со страницей, которую оно загружает. Например, вы захотите отметить, кто в данный момент вошел в систему. Вы также можете получить статус текущей заявки Freshdesk или, возможно, выполнить определенное действие, когда статус заявки изменится.
Контекстные API позволяют вашему приложению делать следующее:
- Доступ к данным со страницы, на которой отображается ваше приложение.
- Подписаться на события, генерируемые взаимодействиями пользователей на странице.
- Управление пользовательским опытом на странице.
Давайте попробуем создать простое приложение, которое делает следующее:
- Проверяет, является ли имя вошедшего в систему пользователя «Бэггинс».
- Устанавливает приоритет заявки на «Срочно»
- Отключает изменение приоритета
- Отображает уведомление с угрозой выпустить орков из Мордора, если мистер Бэггинс попытается передать билет кому-то другому.
Мы построим это поверх примера приложения Ticket Background. Ниже показаны манифест приложения, фрагмент кода из app.js и скриншот внешнего интерфейса этого приложения. Полное приложение также доступно в нашем репозитории примеров приложений.
Мы использовали Global Data API для получения вошедшего в систему пользователя, API-интерфейсы интерфейса для установки и отключения свойств заявки, API-интерфейс событий для отслеживания при изменении назначенного агента и другой интерфейс. API для отображения уведомления.
Исходящие запросы
Многофункциональное приложение захочет обмениваться данными с конечными точками API, в том числе принадлежащими одному из продуктов Freshworks. Поскольку приложения обслуживаются из доменов Freshworks, исходящие запросы от интерфейсного приложения потребуют обхода ограничений CORS, которые безопасный браузер наложит на ваше приложение. Достаточно удобно, что платформа предоставляет Прокси-сервер запроса, чтобы помочь смягчить эту проблему. Просто сделайте запрос, используя встроенный клиент запросов, который направляет запросы через наш прокси, и все готово.
Конечные точки API будут ожидать, что ваши запросы будут аутентифицированы. В нашем последнем посте в этой серии мы рассмотрели три способа получения аутентификационной информации для вашего приложения в качестве параметров установки. Мы рекомендуем фиксировать эти параметры как безопасные параметры, чтобы предотвратить их непреднамеренное раскрытие пользователям приложения. Затем на эти параметры можно ссылаться в заголовках запроса или в теле запроса, используя наши шаблоны, подобные EJS. Прокси гарантирует, что подстановка произойдет вне браузера до того, как будет сделан запрос.
Давайте попробуем расширить приложение, которое мы создали ранее, чтобы использовать параметр безопасной установки для выполнения поискового запроса в базе данных фильмов TMDB. Мы достигаем этого за счет:
- Добавление https://developers.themoviedb.org в качестве домена из белого списка в файл manifest.json.
- Введение api_key в качестве параметра безопасной установки в iparams.json
- Выполнение запроса к API путем ссылки на api_key в шаблоне.
Проверьте полное приложение в нашем репозитории примеров приложений.
Создайте собственное внешнее приложение
Мы только что закончили краткий обзор различных функций, которые платформа Freshworks поддерживает во внешнем приложении. Поэтому выберите место для своего приложения и возьмите образец шаблона из нашего интерфейса командной строки или начните с одного из наших многочисленных примеров приложений. Мы рады видеть, куда заведет вас сегодня ваше неожиданное путешествие с интерфейсными приложениями Freshworks.
Вернитесь к третьей части, где мы подробно рассмотрим серверную часть вашего приложения и поймем, почему бессерверные приложения так популярны на нашей платформе.
