Приложения Freshworks MarketPlace с использованием JavaScript Frameworks

В этой статье мы рассмотрим, как можно создавать приложения Freshworks Marketplace с использованием популярных JavaScript-фреймворков, таких как React и Vue.

Официальный инструмент CLI, предоставляемый платформой разработки приложений Freshworks, имеет встроенные возможности для создания приложений Marketplace с использованием таких фреймворков, как React и Vue. В настоящее время поддерживаются только эти два популярных фреймворка, но я надеюсь, что в ближайшем будущем CLI будет поддерживать больше фреймворков.

Freshworks CLI

Freshworks CLI — это инструмент командной строки, который можно установить с помощью менеджера пакетов Node npm. Конечно, перед установкой Freshworks CLI на вашей машине должен быть установлен Node.js. Более подробную информацию о предварительных требованиях для установки CLI вы можете найти здесь

npm install https://dl.freshdev.io/cli/fdk.tgz -g
Вход в полноэкранный режим Выйти из полноэкранного режима

Вы можете проверить установку CLI, выполнив следующую команду:

fdk version
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы должны получить что-то вроде установленной версии вашего fdk cli, а также о любых новых версиях, которые были выпущены, чтобы вы могли обновить их.

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

Шаблоны

fdk может принимать данные о том, какой тип шаблона будет использоваться приложением Marketplace. Это обеспечивается опцией --template, которая может быть передана команде fdk create.

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

В настоящее время существует около 7-8 шаблонов на выбор, если вы создаете приложение для продукта Freshdesk. Каждый продукт поддерживает различные виды шаблонов, которые лучше всего подходят для типичных случаев использования, поддерживаемых соответствующими продуктами. Попробуйте выбрать другой продукт в первом запросе (запрос продукта), и вам будет представлен другой набор шаблонов.

Давайте кратко расскажем о некоторых наиболее широко используемых шаблонах.

your_first_app

Это базовый шаблон, который просто отображает контактную информацию для вашего приложения в боковой панели страницы Ticket Details. Если вы только начинаете работать с fdk или не знаете, какой тип шаблона использовать, этот шаблон рекомендуется для начинающих, чтобы получить представление о компонентах приложения Marketplace.

ваше_первое_бессерверное_приложение

Если вы хотите создавать Serverless-приложения для Marketplace, это начальный шаблон, который вы должны использовать. С помощью этого шаблона вы можете создавать приложения для различных случаев использования, например, пользовательских автоматизаций, синхронизации данных, оповещений и уведомлений.

образец_crm_app

Этот шаблон покажет вам, как создавать приложения, использующие данные о клиентах из CRM-продукта Freshworks под названием Freshsales. Этот образец приложения демонстрирует различные API и интерфейсы, которые вы можете использовать для взаимодействия с CRM-продуктом. Если вы не знакомы с этими API или только начинаете создавать приложение, использующее возможности CRM, то вам следует использовать именно этот стартовый шаблон.

advanced_iparams_app

Это еще один пример шаблона приложения, в котором есть некоторые конфигурации для параметров установки, используемых в приложении Marketplace.

Параметры установки, также известные как iparams на языке Marketplace, используются для настройки установки приложения. Эти параметры помогают точно настроить процесс установки, динамически конфигурируя параметры приложения перед установкой приложения в соответствующие продукты.

ваше_первое_реактивное_приложение

Это образец шаблона для начальной установки приложений с использованием React.js в качестве основного инструмента для создания фронтэнда приложения. Я покажу вам, как использовать этот шаблон в следующих разделах.

your_first_vue_app

Это образец шаблона для создания приложений, использующих 2.x версии Vue.js в качестве основного инструмента для построения фронтенда приложения.

your_first_vue3_app

Это образец шаблона для начальной загрузки приложений, использующих последнюю версию Vue.js в качестве основного инструмента для создания фронтенда приложения.

React

Для создания приложений React с помощью fdk необходимо использовать шаблон your_first_react_app, как показано ниже:

fdk create --app-dir my-react-mkp-app --products freshdesk --template your_first_react_app
Вход в полноэкранный режим Выйти из полноэкранного режима

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

Давайте посмотрим внутри компонента App.js на то, что происходит внутри приложения React. Сначала приложение пытается внедрить скрипт Fresh Client в голову документа через useEffect хук React в компоненте. Затем, после успешного внедрения скрипта, происходит рендеринг компонента HelloUser путем передачи экземпляра client, возвращаемого обещанием app.initialized. Поскольку каждое приложение Marketplace отображается внутри IFrame, все взаимодействие между приложением и родительской страницей происходит через этот клиентский объект.

Свежий клиент

Вы можете задаться вопросом, какое значение имеет внедрение скрипта Fresh Client в компонент. Потому что именно этот скрипт открывает глобальный объект client в ваших приложениях для выполнения HTTP-запросов и получения данных от сторонних сервисов через интерфейс request.

Объект client также имеет метод interface, с помощью которого вы можете получать информацию между различными экземплярами ваших приложений. Ваши приложения могут иметь несколько экземпляров, поскольку они могут находиться в нескольких местах на одной странице. Вы можете управлять экземплярами ваших приложений, взаимодействовать с различными экземплярами и получать контекстную информацию различных экземпляров, используя метод instance.

Как только вы внедрите скрипт Fresh Client, он глобально откроет объект sdk, который в нашем случае является объектом Fresh Client (клиент). На этапе инициализации объекта client скрипт попытается инициализировать службы, динамически добавить таблицы стилей продукта и скрипты отслеживания и так далее.

Таким образом, скрипт Fresh Client является неотъемлемой частью вашего приложения, и ваша задача — убедиться, что объект клиента легко доступен вашему фреймворку, внедрив его в самом начале, еще до того, как вы сделаете что-либо еще в своем коде.

import React, { useState, useEffect } from 'react';
import './App.css';
import HelloUser from './components/HelloUser'

const App = () => {

  const [loaded, setLoaded] = useState(false);
  const [child, setChild] = useState(<h3>App is loading</h3>)

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://static.freshdev.io/fdk/2.0/assets/fresh_client.js';
    script.addEventListener('load', () => setLoaded(true));
    script.defer = true;
    document.head.appendChild(script);
  }, []);

  useEffect(() => {
    if (!loaded) return
    app.initialized().then((client) => {
      setChild((<HelloUser client={client} />))
    })
  }, [loaded])

  return (
    <div>
      {child}
    </div>
  )
}

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

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

const HelloUser = (props) => {
  const [name, setName] = useState('')

  props.client.data.get('contact').then((data) => {
    setName(data.contact.name)
  })


  return (
    <div>
      <img src={icon} className="App-logo" alt="logo" />
      <img src={reactLogo} className="App-logo" alt="logo" />
      <h3>Hi {name},</h3>
      <p>Welcome to your first react app in Freshdesk</p>
    </div>
  )
}
Вход в полноэкранный режим Выход из полноэкранного режима

Vue

Вы можете создавать приложения Marektplace с помощью Vue.js, используя шаблоны your_first_vue_app и your_first_vue3_app для версий Vue.js 2.x и 3.x соответственно.

Для Vue 2.x

fdk create --app-dir my-vue-mkp-app --products freshdesk --template your_first_vue_app
Войдите в полноэкранный режим Выход из полноэкранного режима

Для Vue 3

fdk create --app-dir my-vue3-mkp-app --products freshdesk --template your_first_vue3_app
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот как структурировано приложение Vue из примера шаблона приложения.

В компоненте App все точно так же, как и в нашем приложении React, мы получаем контактную информацию внутри хука жизненного цикла mounted() компонентов Vue.js, вызывая метод initialize, который фактически использует методы данных клиента.

<template >
  <Sidebar :agentName="name" />
</template>

<script>
import Sidebar from "./components/Sidebar.vue";

export default {
  mounted() {
    this.initialize();
  },
  name: "App",
  components: {
    Sidebar,
  },
  data() {
    return {
      name: "",
    };
  },
  methods: {
    initialize() {
      app.initialized().then((client) => {
        client.data.get("contact").then(
          (data) => {
            this.name = data.contact.name;
          },
          (error) => {
            console.error("error", error);
          }
        );
      });
    },
  },
};
</script>

<style scoped>
</style>
Вход в полноэкранный режим Выход из полноэкранного режима

Примеры приложений

Ссылки на репозитории Github различных примеров приложений, построенных с использованием различных фреймворков, можно найти в разделе Sample Apps на портале документации Freshdesk Developers.

Ссылки

  • Портал Freshdesk Developers
  • Freshworks Marketplace
  • Список образцов приложений сообщества

Надеюсь, вам понравился этот пост, и вы получили некоторое базовое представление о том, как использовать fdk CLI для создания приложений Marketplace с помощью React и Vue. Пожалуйста, не стесняйтесь обращаться к сообществу за любыми вопросами и помощью.

Оцените статью
Procodings.ru
Добавить комментарий