HubSpot UI Extensions 开源项目最佳实践教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00474/article/details/148155378

HubSpot UI Extensions 开源项目最佳实践教程

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 是一个开源项目，旨在帮助开发者利用 HubSpot CRM 开发工具构建自定义的 CRM 卡片。通过这个项目，开发者可以使用 React 等前端框架来创建灵活、交互性强的前端体验，同时还能利用 HubSpot 的无服务器函数。本项目提供了多个示例，展示了如何通过 HubSpot CRM 开发工具 beta 来构建和部署 UI 扩展。

2. 项目快速启动

以下是一个简单的步骤，用于快速启动和运行 HubSpot UI Extensions 项目。

首先，确保你已经安装了最新的 HubSpot CLI。打开命令行界面，执行以下命令来更新 CLI 并认证你的 HubSpot 账户：

npm install -g @hubspot/cli@latest
hs init
hs auth

接下来，创建一个新的项目：

# 在你希望克隆示例项目的目录下执行以下命令
hs project create --templateSource="HubSpot/ui-extensions-examples"

按照提示为项目命名，并指定项目目录。

然后，进入项目目录并安装依赖：

cd <project_dir>
npm install

按照项目文件夹中 README 文件的指示配置和上传项目：

hs project upload

如果你希望在本地开发并看到实时变化，可以运行：

hs project dev

3. 应用案例和最佳实践

以下是一些应用案例和最佳实践，帮助你更好地使用 HubSpot UI Extensions。

自定义 CRM 卡片

自定义 CRM 卡片是 HubSpot UI Extensions 的核心功能。以下是一个简单的示例，展示如何在卡片中显示数据：

import React from 'react';
import { Card,CardContent,CardHeader } from '@hubspot/ui-components';

const MyCustomCard = () => {
  return (
    <Card>
      <CardHeader title="我的自定义卡片" />
      <CardContent>
        {/* 在这里添加你的内容 */}
        <p>这是卡片的内容。</p>
      </CardContent>
    </Card>
  );
};

export default MyCustomCard;