UI Kit vs. Custom UI

为打造应用程序构建用户界面有两种选择——UI工具包和自定义UI. UI工具包允许您使用一组atlassian提供的组件创建一个简单的UI, 使用相对简单的代码组合在一起. 自定义UI为您提供了更多使用atlassian提供的空间和第三方的钩子, 组件等, 同时还允许您使用更复杂的HTML, CSS, 静态资源(如图像)和源代码, 所有这些都可以托管在Atlassian的云上，使用自定义UI，但不使用UI工具包. 这两种类型的UI都涉及到以类似react的模式编写代码, 这是有道理的，因为Atlassian提供的各种组件都基于React.

注意:我的建议是从一开始就使用自定义UI. 自定义UI对您施加的限制更少, 开发人员, 如果你已经有React的经验, 那么使用自定义UI的工作量并不比UI工具包多多少. 也就是说，在同一个应用程序中可以同时使用自定义UI和UI工具包[1].

React Support

目前，打造所基于的前端框架React的版本是18.x. 然而，Atlassian Design System组件[2]明确支持React 16.X only [3]. 因为React的策略通常是一旦一个新的主要版本发布，就停止发布新的主要版本的修复程序(除了严重的错误)[4], 你应该选择最新的React版本.

不幸的是, 当试图在React 17或更高版本中使用Design System组件时, 运行时可能会出现如下错误 npm安装:

npm犯错! 代码ERESOLVE

npm犯错! erresolve无法解析

npm犯错!

npm犯错! 同时解决:@atlaskit/button@16.7.3

npm犯错! 发现:react@18.2.0

npm犯错! node_modules /反应

npm犯错! react@“^ 18.2.0”从根项目

npm犯错! peer react@">=16.8.0”来自@emotion/react@11.10.6

npm犯错! node_modules @emotion /反应

npm犯错! @emotion / react@”^ 11.7.1”来自@atlaskit/button@16.7.3

npm犯错! node_modules @atlaskit /按钮

npm犯错! @atlaskit / button@”^ 16.7.3”从根项目

npm犯错! @emotion / react@”^ 11.7.1”来自@atlaskit/focus-ring@1.3.2

npm犯错! node_modules / @atlaskit /聚焦环

npm犯错! @atlaskit / focus-ring@ " ^ 1.3.0”来自@atlaskit/button@16.7.3

npm犯错! node_modules @atlaskit /按钮

npm犯错! @atlaskit / button@”^ 16.7.3”从根项目

npm犯错! @atlaskit/icon， @atlaskit/motion， @atlaskit/popup， ...)

npm犯错! @emotion/use-insert -effect-with-fallbacks， ...)

可以解决这个问题 ——legacy-peer-deps 提供的命令行开关 npm安装. 重要的是, 虽然这将掩盖上述错误, React 17或更高版本总是有可能弃用或消除设计系统组件所依赖的功能. 我强烈建议您密切关注前端控制台日志，查找指示此类潜在问题的警告或错误.

检查你的伪造App的许可证

如果你打算将打造应用作为付费应用授权给用户[5], 你需要编写代码来检查应用程序的许可是否有效. 一旦你知道该怎么做，这是一个相当简单的过程.

注意:下面假设你的应用使用自定义UI, 并且你熟悉React框架.

第一个, 在后端代码中, 创建一个自定义UI解析器函数[6]，如下所示, 这是模仿[7]. 注意，mg官方游戏中心将创建一个 LICENSE_OVERRIDE 锻造环境变量，这将帮助mg官方游戏中心测试许可证检查.

当然，应用程序的前端运行在用户的浏览器中. 因此，它可以被篡改以跳过许可证检查. 为了防止跳过这类检查，您需要添加 isLicenseActive () 调用不希望未经许可的用户访问的任何后端代码, 如果返回false，则拒绝此类访问. 这取决于您希望后端如何指示拒绝访问您的前端.

接下来，在后端代码中，将该函数添加到解析器定义中:

然后, 在前端代码中, 让mg官方游戏中心使用TanStack Query [8], 一个非常方便的数据获取库, 创建一个名为 useIsLicenseActive () 调用上述后端函数:

现在,调用 useIsLicenseActive () 从你的前端代码中:

最后，设置 LICENSE_OVERRIDE 适当地锻造环境变量. 如果您正在使用建立隧道命令测试本地代码副本, 您可以在您选择的类unix shell中使用export命令设置变量的值. 如果你不使用 建立隧道，然后使用 锻造变量集 命令，为您希望测试的任何环境设置变量的值. 一般来说，你会不想要通过在应用的生产环境中设置这个变量来覆盖许可证检查.

注意:如果您从Windows shell中进行隧道操作，则需要执行以下操作才能使用 LICENSE_OVERRIDE 变量或任何其他环境变量. 否则，将不能正确设置变量以供您使用.

运行 锻造变量集 -e development LICENSE_OVERRIDE 命令在开发环境中设置变量的值.
运行 建立部署 命令将变量(和您的代码)部署到开发环境.
运行 建立隧道 comm和. 应用程序的本地副本将运行, 但是环境变量的值将按照上面指定的方式设置.

Surprise! Bonus Tip (Well, Several Tips): Personal Data Handling Requirements

Atlassian向世界各地的客户销售其服务, 其中一些国家在欧洲联盟(EU). 因此, Atlassian要求打造应用程序按照欧盟的通用数据保护条例(GDPR)处理用户个人数据。. 用户个人资料是指任何可能被使用的资料, 单独使用或与其他资料结合使用, 识别单个用户. 以下是处理用户个人资料的一些建议:

不要在应用程序或外部系统中存储用户个人数据. 相反，根据需要查询用户个人数据.
不要将用户个人数据写入日志.
如果你绝对必须做以上任何一件事, 那么我强烈建议对存储或记录的用户个人数据进行散列或屏蔽.
如储存用户个人资料, 以任何方式记录或收集, 不管你的应用程序在哪里存储或记录数据, Atlassian将要求您在应用程序的隐私政策中注明您的应用程序收集此类数据. 该应用程序还必须通过Atlassian的个人数据报告API报告其收集的此类数据.
如果你的应用程序存储用户个人数据, 应用程序必须实现一种机制来检测请求已经更改或删除用户个人数据(通过上面提到的API), 然后按照这个要求去做.
在某些情况下，您可能需要在收集用户个人资料时获得用户同意.
您必须采取合理的步骤来保护存储的任何用户个人数据, 记录或收集.
长话短说:如果可能的话，不要收集用户的个人数据.

有关上述功能的更多信息，例如如何与个人数据报告API交互, 如何向用户解释你的资料私隐措施, 哪些用户的个人资料应该或不应该被记录-请浏览[9], [10]和[11]. 记住，你和你的团队要对你的应用的安全性负责!