发货更快,风险更低。获取“优化推出”,面向开发人员的免费功能标记。 建立免费账户
X

下载我们的免费测试工具包,获取A / B测试思路,计划工作表,演示模板等!

立即获取



功能标记 允许您逐步逐步推出功能,而不是冒险进行大爆炸,并且在连续集成和连续交付环境中使用时非常有帮助。

在Optimizely,我们通常使用功能标志来减少复杂的部署(如重建UI仪表板)的风险。

但是,构建功能标记系统通常不是您的公司 ’核心能力,可能会分散其他开发工作的注意力。

I’m Asa, Optimizely’的开发者倡导者。在这8步博客中,我’图11展示了如何通过使用Optimizely Rollouts(一个完全免费的产品)在React中逐个客户推出功能来获得强大功能标志的价值。

注意:如果您不’如果没有React应用程序,建议您使用 创建反应应用

推出功能的步骤

1.设置功能标志接口

创建一个免费的Optimizely推广帐户 这里.

在“部署”界面中,导航到‘Features > Create New Feature’并创建一个名为‘hello_world’.

连接你的‘hello_world’应用程序的功能,找到您的SDK密钥。导航‘Settings > Datafile’并复制SDK密钥值。

 

 

2.安装Optimizely推出React SDK

反应 SDK允许您使用JavaScript在代码库中设置功能切换。

使用npm:

npm install --save @ optimizely / react-sdk

或使用纱线:

yarn add @ optimizely / react-sdk

通过将您的主要React App组件包装在OptimizelyProvider组件中来使用SDK并替换<Your_SDK_Key>使用上面找到的SDK密钥。

进口 反应 'react';
进口 {
createInstance,
优化地Provider,
} '@ optimizely / react-sdk'
const 优化地 = createInstance({
sdkKey: '<Your_SDK_Key>',
})
班级 应用程序 延伸 反应.成分 {
使成为() {
返回 (
<优化地Provider
优化地={优化地}
用户={{
ID: 'user123',
属性: {
'customerId': 123,
'isVip': 真的,
}
}}>
<h1>应用范例</h1>
<div>
No features here yet…
</div>
</优化地Provider>
)
}
}
出口 默认 应用程序;

请注意,OptimizelyProvider提供了一个用户对象,该对象定义了与您网站访问者相关的属性。

  • 用户身份:用于在您的用户中随机分配百分比
  • 用户属性:用于在您的用户中进行有针对性的部署。从第5步开始,您将使用这些属性将功能定位到特定的用户组。

 

 

3.实施功能

实施您的‘hello_world’功能,首先在应用程序顶部导入OptimizelyFeature组件:

进口 { OptimizelyFeature } from '@ optimizely / react-sdk'

然后将OptimizelylyFeature组件放入应用程序中,并传递您的功能键‘hello_world’到OptimizelyFeature组件的功能道具:

<优化功能 特征="hello_world">
{(isEnabled) => (
isEnabled
? (<p> 你得到了 <强的>你好,世界</强的>特征! </p>)
: (<p> 您没有获得功能 </p>)
)}
</优化功能>

功能道具将组件连接到您在第一步中在Optimizely UI中创建的功能。

现在,您的完整代码示例如下所示:

进口 反应 'react';
进口 {
createInstance,
优化地Provider,
优化功能,
} '@ optimizely / react-sdk'
const 优化地 = createInstance({
sdkKey: '<Your_SDK_Key>',
})
班级 应用程序 延伸 反应.成分 {
使成为() {
返回 (
<优化地Provider
优化地={优化地}
用户={{
ID: 'user123',
属性: {
'customerId': 123,
'isVip': 真的,
}
}}>
<h1>应用范例</h1>
<div>
<优化功能 特征="hello_world">
{(isEnabled) => (
isEnabled
? (<p> 你得到了 <强的>你好,世界</强的>特征! </p>)
: (<p> 您没有获得功能 </p>)
)}
</优化功能>
</div>
</优化地Provider>
)
}
}
出口 默认 应用程序;

 

 

4.打开功能切换!

如果您现在运行应用程序,则您’将会注意到您没有获得该功能。这是因为该功能未启用,这意味着它’对您的应用程序的所有访问者关闭。

开启功能:

  1. 导航到功能
  2. 点击‘hello_world’ feature
  3. 启用该功能并确保将其设置为100%(请参见下面的屏幕截图)
  4. 点击Save保存您的更改

在大约1分钟内,刷新您的React应用现在应该显示功能已打开,您应该看到“You got the 你好,世界特征!!”.

您现在已经成功在功能标记后启动了功能,但是’可供所有人使用。下一步是启用定位功能,以便仅向特定的用户子集显示功能,以实现逐个客户推出功能的真正价值。

 

 

5.为customerId创建一个属性

要基于您在步骤2中提供给OptimizelyProvider组件的userAttributes来定位功能,您需要’必须在“发布” UI中创建那些userAttributes。用属性做到这一点‘customerId’ to start:

  1. 导航到受众群体-> Attributes
  2. 点击‘创建新属性...’
  3. 命名属性键‘customerId’
  4. 点击‘Save Attribute’保存您的更改

 

6.创建并添加测试版受众

现在让’可以创建一个受众群体,以指示哪些客户ID可以访问您的功能。

  1. 导航到功能
  2. 点击on your ‘hello_world’ feature
  3. 向下滚动到观众
  4. 点击‘Create New Audience…’
  5. 命名观众‘[hello_world] Beta用户’
  6. 将您的customerId属性拖放到Audience条件中
  7. 改变‘has any value’ drop-down to “Number equals” with the value 123
  8. 点击‘Save Audience’

 

通过单击新创建的受众群体旁边的+按钮,将受众群体添加到您的功能中。然后向下滚动并单击‘save’.

现在你’已将观众添加到您的功能中,测试版已启动并正在运行。此时,您的功能仅针对具有customerId 123的客户显示,这是您在userAttributes道具中提供给OptimizelyProvider组件的内容。

作为验证测试​​,您可以将customerId更改为456,保存并观看该功能将因为您不输入而被关闭’t符合定位条件。

 

 

7.将用户添加到Beta

要将更多的客户添加到您的Beta版受众群体中,请修改受众群体定义以在Beta版中添加或删除用户:

  • 点击“+”签名并保存以添加Beta用户
  • 点击“x”签名并保存以删除Beta用户

在以下屏幕截图示例中,三个客户已添加到Beta。 ID为123、456和789的客户现在可以访问‘hello_world’ feature.

 

 

8.启动功能

在为足够的客户启用了功能后,便可以享受新的用户体验,然后您可以决定’可以向所有客户启动您的功能。

准备好从Beta发布功能之后,请按照以下步骤操作:

  1. 从功能中移除观众
  2. 确保将推广配置为100%
  3. 保存功能

该功能现已向所有人开放,并且您已经成功推出了‘hello_world’使用来自React的Optimizely Rollouts中的免费功能标记来逐个客户设置功能!

 

 

下一步

尽管此博客介绍了逐个客户的部署,但功能标记可启用其他用例,例如不依赖寿命长的功能分支,创建许可系统或启用产品驱动的A / B测试。

在Optimizely,我们将特征标记用于所有这些用例以及更多用例。

希望这对您有所帮助!如有任何意见,请提供反馈。我希望我’已成功挽救了您的一些团队’通过使您能够利用我们的免费功能标记产品来利用功能标记的功能来开发资源: 优化部署.

 

优化X