学习目标
完成本单元后，您将能够了解到：
- 先决条件
- 从GitHub克隆项目
- 在本地运行Web应用程序
- 创建Canvas应用程序
- 配置谁可以访问Canvas应用程序
- 将Web App部署到Heroku
- 更新Canvas应用程序
- 打包Canvas应用程序
- 上传Canvas App Package
- 安装Canvas应用程序
- 配置谁可以访问已安装的Canvas应用程序
这个高级快速入门向您展示了如何开始使用更多Canvas功能。 它将逐步介绍创建，打包，上载，安装和运行画布应用程序的过程。 示例画布应用程序是一个“hello world”Web页面，它调用Canvas SDK以显示当前用户的名称。
在这个例子中，你将：
- 从GitHub克隆“hello world”应用程序
- 在本地Web服务器上运行应用程序
- 将Web应用程序公开为Salesforce开发组织中的画布应用程序，并在Canvas App Previewer中对其进行测试
- 将Web应用程序部署到Heroku
- 打包并上传画布应用程序
- 将canvas应用程序安装在另一个Salesforce组织中，并以用户身份运行它
本快速入门中的步骤假设您使用的是Windows。 您可以使用其他操作系统，但步骤可能会有一些细微差别。
先决条件
您需要适当的访问和工具来完成快速启动步骤。
- 访问Developer Edition组织以开发canvas应用程序。要安装画布应用程序，您需要一个除用于创建画布应用程序之外的Developer Edition组织。
如果您还不是Lightning Platform开发人员社区的成员，请访问developer.salesforce.com/signup并按照注册Developer Edition组织的说明进行操作。即使您已经拥有Enterprise Edition，Unlimited Edition或Performance Edition，也可以使用Developer Edition根据示例数据开发，暂存和测试您的解决方案，以保护您组织的实时数据。对于插入，更新或删除数据的应用程序（与简单地读取数据相反）尤其如此。
如果您有现有的Developer Edition组织，并且从安装程序中看不到菜单项Canvas App Previewer，请联系Salesforce。 - “自定义应用程序”和“修改所有数据”用户权限。如果您是管理员，则很可能已拥有这些权限。否则，您需要添加它们，以便您可以看到Canvas应用程序预览器并创建画布应用程序。
- 安装了Git。到这里安装和配置Git：https：//help.github.com/articles/set-up-git。
安装Git后，您可能需要使用keygen工具配置SSH。有关更多信息，请参阅https://help.github.com/articles/generating-ssh-keys。如果您使用的是Windows，则此工具位于Git \ bin目录中，在安装Git后，该目录未添加到路径中。使用“控制面板”将\ bin目录添加到路径中。根据您的安装目录，路径可能类似于C：\ Program Files（x86）\ Git \ bin。 - 克隆代码示例的GitHub帐户。转到此处设置GitHub帐户：https：//github.com/plans。
- 安装Maven 3.0或更高版本以打包示例应用程序。到这里下载并安装Maven：
http://maven.apache.org/download.html。 - 如果您想从Heroku运行应用程序，可以使用Heroku帐户。转到此处创建一个Heroku帐户：
https://api.heroku.com/signup。 - Heroku Toolbelt如果要从命令行管理Heroku应用程序。到这里下载并安装Heroku Toolbelt：
https://toolbelt.heroku.com。
从GitHub克隆项目
“hello world”示例项目是位于GitHub上的Canvas SDK的一部分。在此步骤中，我们将克隆项目以在本地计算机上制作它的副本。
- 登录https://github.com。
- 通过转到：找到包含Canvas SDK和代码示例的项目：
https://github.com/forcedotcom/SalesforceCanvasFrameworkSDK。 - 单击Zip并下载.zip文件克隆项目。
- 将zip文件中的所有文件本地解压缩到名为c：\ SalesforceCanvasFrameworkSDK的目录中。或者，您可以使用Git命令行下载项目并发出以下命令：git clone git@github.com：forcedotcom / SalesforceCanvasFrameworkSDK.git。
- 打开命令窗口并导航到c：\ SalesforceCanvasFrameworkSDK。
- 输入命令git submodule init。
- 输入命令git submodule update。这会将其他项目添加到当前项目中。文件
c：\ SalesforceCanvasFrameworkSDK \ .gitmodules显示哪些项目作为子模块包含在内。
克隆项目后，c：\ SalesforceCanvasFrameworkSDK目录应包含名为src的子目录，以及pom.xml和README.md等文件。
在本地运行Web应用程序
在此步骤中，您将使用Maven打包Web应用程序，然后使用Jetty在本地运行它。打包Web应用程序时，该过程会下载运行Web应用程序所需的所有组件，包括Jetty。
- 打开命令窗口并导航到c：\ SalesforceCanvasFrameworkSDK。
- 输入命令mvn package。当Maven打包应用程序及其相关组件时，您将在命令窗口中看到输出。如果该过程成功完成，您将看到如下内容：
[INFO] ———————————————
[INFO] BUILD SUCCESS
[INFO] ———————————————
[INFO] Total time: 28.016s
[INFO] Finished at: Tue Jul 03 08:00:42 PDT 2012
[INFO] Final Memory: 8M/59M
[INFO] ——————————————— - 要使用Jetty运行应用程序，您需要启用本地SSL支持。此步骤只需要为每个应用程序执行一次，因此如果您已经完成此操作，请跳过此步骤。确保命令窗口已打开，并且您位于目录c：\ SalesforceCanvasFrameworkSDK中。
- 运行以下命令：keytool -keystore keystore -alias jetty -genkey -keyalg RSA。
运行此命令后，系统将提示您输入以下信息。输入123456作为密钥库密码，输入是以在最后确认。出现提示时，“输入的密钥密码”，按Enter键以使用密钥库密码。对于其他信息，您可以输入值或将其留空。
Enter keystore password: 《Choose Your Password》
Re-enter new password: 《Choose Your Password》
What is your first and last name?
[Unknown]: 《Enter First and Last Name》
What is the name of your organizational unit?
[Unknown]: 《Enter an Org Unit》
What is the name of your organization?
[Unknown]: 《Enter an Org》
What is the name of your City or Locality?
[Unknown]: 《Enter a City》
What is the name of your State or Province?
[Unknown]: 《Enter a State》
What is the two-letter country code for this unit?
[Unknown]: 《Enter a Country》
Is CN=XXXX, OU=XXXX, O=XXXX, L=XXXX, ST=XX, C=XX correct?
[no]: yes
Enter key password for 《jetty》
(RETURN if same as keystore password):
这将在目录c：\ SalesforceCanvasFrameworkSDK中创建名为keystore的文件。 Jetty使用密钥库来支持SSL。 - 输入以下命令运行Web服务器：target \ bin \ webapp.bat（Windows）或sh target / bin / webapp
（Unix / OS X）。
如果您使用的是Unix / OS X，则可能需要先向webapp添加执行权限，然后才能运行它。使用此命令执行此操作：chmod + x target / bin / webapp。 - 通过打开浏览器并导航到以下URL来验证应用程序是否正在运行：
https：//开头本地主机：8443 /例子/您好世界/ index.jsp的。
根据您的浏览器和安全设置，您可能需要添加安全例外，因为您正在运行具有未签名SSL证书的站点。
您应该看到一条消息，上面写着“必须通过已签名的请求调用此应用程序！”这表明Web应用程序在本地运行。出现此消息是因为该应用程序旨在从Salesforce接收已签名的请求，因此，该应用程序不会在Salesforce画布环境之外运行。
创建Canvas应用程序
在此步骤中，您将在Salesforce组织中创建画布应用程序。您将需要用户权限“自定义应用程序”和“修改所有数据”来创建画布应用程序。
- 在Salesforce中，从“设置”中，在“快速查找”框中输入“应用”，然后选择“应用”。
- 在Connected Apps相关列表中，单击New。
- 在Connected App Name字段中，输入Hello World。
- 接受Hello_World的默认API名称。这是画布应用程序的内部名称，保存后无法更改。
- 在联系电子邮件字段中，输入您的电子邮件地址。
- 在徽标图像URL字段中，输入https：// localhost：8443 / images / salesforce.png。这是默认的Salesforce“无软件”映像。此图像显示在安装屏幕和应用程序的详细信息屏幕上。
- 在Icon URL字段中，输入https：// localhost：8443 / examples / hello-world / logo.png。这是默认的Salesforce“无软件”映像。
这是用户界面中应用名称旁边显示的图像。如果将此字段留空，则应用程序名称旁会显示默认云图像。 - 在API（启用OAuth设置）部分中，选择“启用OAuth设置”字段。
- 在Callback URL字段中，输入https：// localhost：8443 / sdk / callback.html。
- 在“选定的OAuth范围”字段中，选择“访问基本信息”。
- 在Canvas App Settings部分中，选择Canvas。
- 在Canvas App URL字段中，输入https：// localhost：8443 / examples / hello-world / index.jsp。
- 在“访问方法”字段中，选择“签名请求（发布）”。
- 在“位置”字段中，选择“Chatter”选项卡。
- 单击“保存”。保存画布应用程序后，将显示详细信息页面。
- 在画布应用程序的详细信息页面上，在“使用者密钥”字段旁边，单击“单击以显示”链接。在应用程序中使用消费者密钥进行身份验证。
- 选择使用者密钥值，然后输入CTRL + C进行复制。
- 进入命令窗口，输入CTRL + C停止Jetty Web服务器。在提示符下，输入Y.
- 创建一个名为CANVAS_CONSUMER_SECRET的环境变量，并将该值设置为刚复制的使用者密钥。要在Windows中执行此操作，请在命令窗口中输入set CANVAS_CONSUMER_SECRET = value_you_just_copied
如果您使用的是Unix / OS X，请使用命令export CANVAS_CONSUMER_SECRET = value_you_just_copied设置环境变量。
“你好世界”页面
（c：\ SalesforceCanvasFrameworkSDK \ src \ main \ webapp \ examples \ hello-world \ index.jsp）使用使用者密钥， - 输入以下命令重新启动Web服务器：target \ bin \ webapp.bat（Windows）或sh target / bin / webapp
（Unix / OS X）。
如以下代码所示：
<%@ page import=”canvas.SignedRequest” %>
<%@ page import=”java.util.Map” %>
<%
// Pull the signed request out of the request body and verify and decode it. Map<String, String[]> parameters = request.getParameterMap();
String[] signedRequest = parameters.get(“signed_request”); if (signedRequest == null) {%>
This app must be invoked via a signed request!<% return;
}
String yourConsumerSecret=System.getenv(“CANVAS_CONSUMER_SECRET”);
String signedRequestJson = SignedRequest.verifyAndDecodeAsJson(signedRequest[0], yourConsumerSecret);
%>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
<head>
<title>Hello World Canvas Example</title>
<link rel=”stylesheet” type=”text/css” href=”/sdk/css/connect.css” />
<script type=”text/javascript” src=”/sdk/js/canvas-all.js”></script>
<!– Third part libraries, substitute with your own –>
<script type=”text/javascript” src=”/scripts/json2.js”></script>
<script>
if (self === top) {
// Not in an iFrame.
alert(“This canvas app must be included within an iFrame”);
}
Sfdc.canvas(function() {
var sr = JSON.parse(‘<%=signedRequestJson%>’); Sfdc.canvas.byId(‘username’).innerHTML = sr.context.user.fullName;
});
</script>
</head>
<body>
<br/>
<h1>Hello <span id=’username’></span></h1>
</body>
</html>
配置谁可以访问Canvas应用程序
您已在Salesforce中创建了画布应用程序，现在让我们为特定用户配置访问权限。
- 在Salesforce中，从“设置”中，在“快速查找”框中输入“已连接的应用程序”，然后选择用于管理已连接应用程序的选项。
- 单击Hello World应用程序，然后单击编辑。
- 在“允许的用户”字段中，选择“管理员批准的用户已预先授权”。在出现的弹出消息上单击“确定”。我们选择了“管理员批准的用户已预先授权”，因此在我们授予他们权限之前，用户不会看到画布应用。如果我们选择“所有用户可以自我授权”，则用户会看到画布应用，但需要批准或拒绝访问它。
- 单击“保存”。
您可以在此处定义谁可以查看您的画布应用程序。这可以使用配置文件和权限集来完成。在此示例中，我们假设您的配置文件是系统管理员。 - 在“配置文件”相关列表中，单击“管理配置文件”。
- 选择System Administrator配置文件，然后单击Save。
- 在Salesforce中，从“设置”中，在“快速查找”框中输入Canvas App Previewer，然后选择“Canvas App Previewer”。您可以使用Canvas应用程序预览器在发布之前测试您的画布应用程序。
- 单击左侧的Hello World链接。
该应用程序出现，您将看到消息Hello User.FullName。画布应用程序在此上下文中工作，因为当您在预览器中单击应用程序名称时，已签名的请求将发送到端点https：// localhost：8443 / examples / hello-world / index.jsp。
配置访问权限后，您可以在Canvas App Previewer和开发组织的Chatter选项卡上查看canvas应用程序。
将Web App部署到Heroku
在本演练中，您之前在本地运行了“hello world”Web应用程序，然后将其添加为画布应用程序并对其进行测试。现在您的画布应用程序在本地运行，您已准备好将“hello world”Web应用程序部署到Heroku并从那里运行它。这是你如何做到的。
- 如果您还没有，请登录Heroku并按照先决条件中的链接安装Heroku Toolbelt。
- 打开命令窗口，导航到c：\ SalesforceCanvasFrameworkSDK，然后输入以下命令：git init。这会将目录重新初始化为Git存储库。
- 在命令窗口中，输入以下命令：heroku create。这在Heroku上创建了一个新的“shell”应用程序。确认应用程序已创建如下：
Creating deep-samurai-7923… done, stack is cedar
http://deep-samurai-7923.herokuapp.com/ | git@heroku.com:deep-samurai-7923.git
Git remote heroku added - 要重命名此Heroku应用程序，请在命令窗口中输入以下命令：heroku rename newAppName –app
oldAppName。
在此示例中，oldAppName是deep-samurai-7923。您创建的newAppName必须以字母开头，并且只能包含小写字母，数字和短划线。您将看到重命名的确认，看起来与此类似：
http://newappName.herokuapp.com/ | git@heroku.com:newappName.git
所有Heroku应用程序中的newappName必须是唯一的。此名称将成为应用程序URL的一部分，例如，
newappName.herokuapp.com。 - 在命令窗口中运行以下命令：git add -A。这会将整个SalesforceCanvasFrameworkSDK项目添加到Git存储库。如果您在Windows环境中工作，您可能会看到有关LF（换行符）的一些消息被CRLF（回车换行符）替换。
- 在命令窗口中输入以下命令以提交更改以及注释：git commit -m“MyChangeComments”。
- 在命令窗口中输入以下命令，将更改部署到Heroku：git push heroku master。如果该过程成功完成，您将看到如下内容：
[INFO] ——————————————
[INFO] BUILD SUCCESS
[INFO] ——————————————
[INFO] Total time: 13.188s
[INFO] Finished at: Sat Feb 09 21:14:23 UTC 2013
[INFO] Final Memory: 11M/490M
[INFO] ——————————————
如果收到“权限被拒绝”错误消息，则可能需要设置SSH密钥并将其添加到Heroku。看到
https://devcenter.heroku.com/articles/keys。 - 打开命令窗口，并通过输入此命令并将consumer_secret_value替换为刚刚复制的值来设置包含使用者密钥的Heroku环境变量：heroku config：add CANVAS_CONSUMER_SECRET = consumer_secret_value。
要获取画布应用程序的消费者机密，请在“设置”中的“快速查找”框中输入应用程序，然后选择“应用程序”并单击“Hello World”应用程序。您将在OAuth设置部分中看到“使用者密钥”字段。 - 通过打开浏览器并导航到以下URL，验证应用程序是否在Heroku中运行：
https://newappName.herokuapp.com/examples/hello-world/index.jsp。
您应该看到一条消息，上面写着“必须通过已签名的请求调用此应用程序！”这表明该应用程序正在Heroku中运行。出现此消息是因为该应用程序旨在从Salesforce画布环境接收签名请求。
更新Canvas应用程序
在此步骤中，您将更新画布应用程序以运行现在在Heroku上运行的“hello world”应用程序。
- 在Salesforce中，从“设置”中，在“快速查找”框中输入“应用”，然后选择“应用”。
- 在Connected Apps相关列表中，单击Hello World。
- 单击“编辑”。
- 在徽标图像URL字段中，输入https://appName.herokuapp.com/images/salesforce.png。这是默认的Salesforce“无软件”映像。此图像显示在安装屏幕和应用程序的详细信息屏幕上。 appName是您刚刚创建的Heroku应用程序的名称。
- 在图标URL字段中，输入https://appName.herokuapp.com/examples/hello-world/logo.png。这是默认的Salesforce“无软件”映像。
这是Chatter选项卡或Canvas App Previewer中应用程序名称旁边显示的图像。如果将此字段留空，则应用程序名称旁会显示默认云图像。 appName是您刚刚创建的Heroku应用程序的名称。 - 在“回拨URL”字段中，输入https://appName.herokuapp.com/sdk/callback.html。 appName是您刚刚创建的Heroku应用程序的名称。
- 在Canvas App URL字段中，输入https://appName.herokuapp.com/examples/hello-world/index.jsp。 appName是您刚刚创建的Heroku应用程序的名称。
- 单击“保存”。保存画布应用程序后，将显示详细信息页面。
- 在Salesforce中，从“设置”中，在“快速查找”框中输入Canvas App Previewer，然后选择“Canvas App Previewer”。您可以使用Canvas应用程序预览器在重新打包之前测试您的画布应用程序。
- 单击左侧的Hello World链接。
该应用程序应该出现，您将看到消息Hello User.FullName。画布应用程序在此上下文中工作，因为当您在预览器中单击应用程序名称时，已签名的请求将发送到端点https://appName.herokuapp.com/examples/hello-world/index.jsp。
在这个例子中，我们使用的是我们刚创建的相同画布应用程序，但更新它指向在Heroku上运行的“hello world”Web应用程序。因此，我们之前添加到“hello world”应用程序中的消费者秘密不需要更新。
如果要在Salesforce中创建一个新的画布应用程序，该应用程序显示在Heroku上运行的“hello world”应用程序，请转到创建画布应用程序以创建新应用程序，更新应用程序中的使用者密钥，然后将更改部署到Heroku的。
打包Canvas应用程序
现在您已经创建了画布应用程序，在Canvas应用程序预览器中对其进行了测试，并将其部署到Heroku，您已准备好打包并分发它。打包是使您的画布应用程序可以在其他组织中安装的第一步。有关打包的更多信息，请参阅ISVforce指南。
- 在Salesforce中，从“设置”中，在“快速查找”框中输入“包”，然后选择“包”并单击“新建”。
提示：要将画布应用程序打包以在其他组织中安装，您必须创建名称空间前缀。名称空间前缀只能在Developer Edition组织中定义。有关详细信息，请参阅联机帮助中的“注册命名空间前缀”主题。 - 将Package Name字段设置为Hello World Package，并接受其他字段的默认值。
- 选择“托管”字段以使程序包成为组织的托管程序包。
- 出现一个提示，说明您只允许一个托管包。单击确定。
- 单击“保存”。
- 包是空的，因此单击“添加”。
- 在Component Type字段中，选择Connected App。
- 选中Hello World应用程序旁边的复选框，然后单击“添加到包”。出现包详细信息屏幕。从“设置”中，在“快速查找”框中输入“Package”，然后选择“Package”以查看新的托管包。
上传Canvas应用程序包
现在您已经打包了画布应用程序，您已准备好上传该软件包。这将创建一个安装链接，您可以向需要在其组织中安装画布应用程序的任何人提供该链接。
1.在Salesforce中，从“设置”中，在“快速查找”框中输入“Packages”，然后选择“Packages”。
2.在Packages列表中，单击Hello World Package链接。
3.在“Package Detail”页面上，单击“Upload ”以发布托管包。
4.在版本名称字段中，输入Winter 2014 Beta。保留默认版本号1.0和Managed-Beta的发布类型。
5.单击“Upload”。
注意：画布应用程序只能安装在您正在开发的组织之外的组织中。
安装Canvas应用程序
上载打包的画布应用程序会创建安装链接。然后，您可以使用此链接在其他组织中安装画布应用程序。 Beta软件包只能安装在沙盒或Developer Edition组织中，否则，您将收到错误消息。
- 打开浏览器并在浏览器地址栏中输入画布应用程序安装URL。如果您正在开发canvas应用程序，请确保在安装应用程序之前注销开发组织。
安装URL类似于：
https://login.instance.salesforce.com/services/packaging/installPackage.apexp?p0=04eU0000000AWNA。 - 出现提示时，输入您要在其中安装软件包的组织的登录凭据。
- 将显示“包安装详细信息”页面。在Package Components列表中，您应该看到Hello World画布应用程序。单击Continue。
- 单击Next ，然后单击Install。
配置谁可以访问已安装的Canvas应用程序
您已在Salesforce组织中安装了画布应用程序，但在配置用户访问权限之前，没有人可以看到它。
- 在Salesforce中，从“设置”中，在“快速查找”框中输入“Connected Apps ”，然后选择用于管理已连接应用程序的选项。
- 单击Hello World应用程序，然后单击“Edit”。
- 在“允许的用户”字段中，选择“管理员批准的用户”已预先授权。在出现的弹出消息上单击“OK”。
- 单击“Save”。
现在，您将定义谁可以看到您的画布应用程序。这可以使用配置文件和权限集来完成。在此示例中，我们将允许任何拥有系统管理员的人访问该应用程序。 - 在“已连接的应用程序详细信息”页面的“配置文件相关”列表中，单击“ Manage Profiles.”。
- 选择System Administrator配置文件，然后单击Save。
- 单击Chatter选项卡。
- 单击左侧的Hello World链接。
该应用程序出现，您将看到消息Hello User.FullName。