HubSpot UI Extensions Examples 项目启动与配置教程

HubSpot UI Extensions Examples 项目启动与配置教程

ui-extensions-examples This repository contains code examples of UI extensions built with HubSpot CRM development tools beta 项目地址: https://gitcode.com/gh_mirrors/ui/ui-extensions-examples

1. 项目的目录结构及介绍

HubSpot/ui-extensions-examples 项目是一个开源项目，旨在提供使用 HubSpot CRM 开发工具 beta 版构建的 UI 扩展示例。项目的目录结构如下：

• .github/：包含项目的 GitHub 工作流文件，如 ESLint 和 Prettier 的配置。
• bi-directional-property-refresh/：一个示例项目，展示如何实现双向属性刷新。
• charts-example/：一个示例项目，展示如何在 CRM 中嵌入图表。
• crm-data-components/：一个示例项目，展示如何使用 CRM 数据组件。
• custom-logger-example/：一个示例项目，展示如何创建自定义日志记录器。
• deals-summary/：一个示例项目，展示如何创建销售摘要卡片。
• design-patterns/：一个示例项目，展示在 UI 扩展中使用的设计模式。
• display-iframe-modal/：一个示例项目，展示如何在 CRM 中显示 iframe 模态框。
• duplicate-contact/：一个示例项目，展示如何处理重复联系人。
• flex-and-box/：一个示例项目，展示如何使用 Flex 和 Box 布局。
• generate-quotes/：一个示例项目，展示如何生成报价。
• mapbox-api/：一个示例项目，展示如何使用 Mapbox API。
• multi-step-flow/：一个示例项目，展示如何创建多步骤流程。
• overlay-example/：一个示例项目，展示如何在 CRM 中创建覆盖层。
• .eslintrc.js：ESLint 配置文件。
• .prettierignore：Prettier 忽略文件。
• .prettierrc.json：Prettier 配置文件。
• LICENSE.md：项目许可证文件。
• README.md：项目自述文件。
• config.json：项目配置文件。

每个示例项目文件夹中包含了该示例的所有源代码和必要的配置文件。

2. 项目的启动文件介绍

项目的启动主要通过 HubSpot CLI 完成。以下是一些基本的启动步骤：

1. 更新 HubSpot CLI 到最新版本：

   npm install -g @hubspot/cli@latest
   

2. 初始化你的 HubSpot 账户：

   hs init
   

3. 认证你的 HubSpot 账户：

   hs auth
   

4. 创建一个新项目：

   hs project create --templateSource="HubSpot/ui-extensions-examples"
   

5. 进入项目目录并安装依赖：

   cd <project_dir>
   npm install
   

6. 配置并上传项目： 按照项目文件夹中的 README.md 文件中的具体说明进行配置，然后运行：

   hs project upload
   

3. 项目的配置文件介绍

项目的配置主要通过 config.json 文件进行。以下是 config.json 文件的一些基本配置项：

• name：项目的名称。
• description：项目的描述。
• templateSource：项目的模板来源。
• projectDirectory：项目目录的路径。

此外，每个示例项目文件夹中的 README.md 文件也会提供具体的配置指南，包括如何设置环境变量和提供测试数据等。

确保在启动项目之前，你已经根据 README.md 文件中的说明正确配置了所有的必要文件和参数。

ui-extensions-examples This repository contains code examples of UI extensions built with HubSpot CRM development tools beta 项目地址: https://gitcode.com/gh_mirrors/ui/ui-extensions-examples