概述

Azure Digital Twins Explorer是Azure Digital Twins 服务的开发者工具。它允许您连接到 Azure 数字孪生实例以了解、可视化和修改您的数字孪生数据。

Azure 数字孪生资源管理器是作为单页 JavaScript 应用程序编写的。此存储库包含托管版本的 Azure 数字孪生资源管理器的代码，可通过Azure 门户和explorer.digitaltwins.azure.net访问。您还可以在本地将应用程序作为 node.js 应用程序运行。

要求

Node.js 10+

在本地运行 Azure 数字孪生资源管理器

1. 设置 Azure Digital Twins 服务实例并为自己授予权限（例如Azure Digital Twins Owner）。有关说明，请参阅以下操作方法文章：

   [hidecontent type="logged" desc="隐藏内容：登录后可查看"]

   1. • 设置 Azure 数字孪生实例和身份验证
   2. 在本地运行时，Azure 数字孪生资源管理器将使用 Azure 默认凭据。为了进行身份验证，您可以在任何命令提示符下运行，例如，az login。当你稍后运行 Azure 数字孪生资源管理器时，它将获取凭据。或者，您可以登录 Visual Studio Code。
   3. 选择下载 ZIP按钮，将此示例代码的 .zip 文件下载到您的计算机。解压缩digital-twins-explorer-.zip文件夹，然后提取文件。或者，您可以克隆存储库。
   4. 从文件夹中的命令提示符client/src运行npm install. 这将检索所有依赖项

      重要的！由于依赖包npm-force-resolutions来缓解潜在的安全问题，您将无法在任何包含空格的路径下安装。有关详细信息，请参阅此 GitHub问题。

   5. 在同一命令提示符下，运行npm run start.

      默认情况下，应用程序在端口 3000 上运行。要自定义端口，请更改运行命令。例如，要使用端口 8080：

      • Linux/Mac（重击）：PORT=8080 npm run start
      • Windows (cmd)：set PORT=8080 && npm run start 注意：您的 Azure Digital Twins 应用程序注册必须有一个使用您正在使用的相同端口的回复 URL - 例如 localhost:7000 如果这是您正在使用的端口。

   6. 您的浏览器应该会打开，应用程序应该会出现。

   有关如何使用 docker 运行 digital-twins-explorer 的说明，请参见下文。

   使用 Docker 运行 Azure 数字孪生资源管理器

   1. 从根文件夹中的命令提示符运行docker build -t azure-digital-twins-explorer .. 这将为 Azure 数字孪生资源管理器构建 Docker 映像。
   2. 在同一命令提示符下，运行docker run -it -p3000:3000 azure-digital-twins-explorer.

      默认情况下，应用程序在端口 3000 上运行。要自定义端口，请更改运行命令。例如，要使用端口 8080 运行docker run -it -p8080:3000 azure-digital-twins-explorer。控制台上会出现一条消息，要求您使用 Web 浏览器使用 Microsoft 设备登录页面中的代码登录；这样做之后，Azure 数字孪生资源管理器应该会启动。

      • 注意：成功运行后，应用程序将显示一条消息，向您显示浏览应用程序必须打开的 URL 和端口。在 Docker 中运行应用程序时，此信息可能不准确，因为其他端口可能已经暴露。请务必使用您之前选择的端口。

   3. 您现在可以打开您的 Web 浏览器并浏览到http://localhost:3000（更改3000适当的端口，如果您更改了它）。

   首次运行时登录

   初始身份验证由以下任一操作触发：

   单击右上角的 Azure 数字孪生 URL 按钮

   

   1. 单击需要调用服务的操作。单击第一个命令时，Azure 数字孪生资源管理器将打开一个对话框，提示你输入服务实例的连接信息。

   要继续，您需要以实例主机名的形式提供要访问的 Azure 数字孪生实例的 URL，并以“https://”为前缀。你可以在 Azure 数字孪生实例的Azure 门户概述页面中找到实例的主机名。

   

   要更改实例 URL 以连接到另一个 Azure 数字孪生实例，请单击右上角的登录按钮。

   实验功能

   除了本地操作，您还可以将 Azure 数字孪生资源管理器作为云应用程序运行。在云中，您可以使用通过 Azure SignalR 服务发送的来自 Azure 数字孪生的推送通知来实时更新您的数字孪生资源管理器。

   云端运行

   你可能想要在云中运行你的 Azure 数字孪生资源管理器应用程序来托管你的组织的自定义版本的资源管理器，或者访问使用专用链接禁用公共访问的Azure 数字孪生实例。

   1. template.json将位于该文件夹下的名为 ARM 的模板部署deployment到您的 Azure 订阅中。
   2. 使用 打包客户端应用程序npm run build。NODE_OPTIONS=--max_old_space_size=4096如果您收到与内存相关的错误，您可能需要进行设置。
   3. 从新build文件中，将每个文件上传到webARM 模板创建的新存储帐户中的容器。
   4. 使用 打包功能应用程序dotnet publish -c Release -o ./publish。
   5. 压缩文件夹的内容./publish。例如，从发布文件夹中运行zip -r DigitalTwinsExplorerFunctions.zip *.
   6. 使用 CLI 发布函数应用程序：az functionapp deployment source config-zip -g <resource_group> -n <app_name> --src <zip_file_path>。
   7. [可选] 对于与需要通过 SignalR 进行实时遥测的工具一起使用的每个 Azure 数字孪生环境，template-eventgrid.json在 Azure 订阅中部署模板。
   8. 设置系统分配的标识以允许 Functions 代理访问 Azure 数字孪生服务。
      1. 在 Azure 中，打开资源组中的Function App资源。
      2. 单击左侧刀片中的身份。
      3. 在“系统分配”选项卡下，将“状态”开关打开。
      4. 从你的资源组中，选择Azure 数字孪生资源。
      5. 单击左侧边栏选项卡中的访问控制 (IAM) 。
      6. 单击+ 添加，然后单击添加角色分配。
      7. 选择Azure 数字孪生数据所有者作为角色。
      8. 分配对系统分配的托管标识 - Functions App 的访问权限。
      9. 从列表中选择您的Functions 应用程序。
      10. 单击保存。

   先进的

   在本地运行时，遥测流所需的事件网格和 SignalR 服务不可用。但是，如果您已完成云部署，则可以在本地利用这些服务来启用全套功能。

   这需要将REACT_APP_BASE_ADT_URL环境变量设置为指向您的 Azure Functions 主机（例如https://adtexplorer-<your suffix>.azurewebsites.net）。这可以在启动前在 shell 环境中设置，也可以通过在文件夹中npm创建一个..envclientREACT_APP_BASE_ADT_URL=https://...

   此外，需要将本地 URL 添加到 Azure Function 和 SignalR 服务的允许来源。在ARM模板中，http://localhost:3000部署时添加默认路径；但是，如果该站点在本地的不同端口上运行，则这两项服务都需要通过 Azure 门户进行更新。

   扩展点

   进口

   导入插件位于src/services/plugins客户端代码库的目录中。每个插件都应该定义为一个具有单一功能的类：

   tryLoad(file: File): Promise<ImportModel | boolean>

   如果插件可以导入文件，它应该返回一个ImportModel. 如果它不能导入文件，它应该返回false以便导入服务可以与其他插件共享文件。

   其ImportModel结构应如下所示：

   class DataModel {
     digitalTwinsFileInfo: DataFileInfoModel;
     digitalTwinsGraph: DataGraphModel;
     digitalTwinsModels: DigitalTwinModel[];
   }
   
   class DataFileInfoModel {
     fileVersion: string; // should be "1.0.0"
   }
   
   class DataGraphModel {
     digitalTwins: DigitalTwin[]; // objects align with structure returned by API
     relationships: DigitalTwinRelationship[]; // objects align with structure returned by API
   }

   新插件需要ImportPlugins在文件顶部的集合中注册src/services/ImportService.js。

   目前提供了Excel和JSON的导入插件。为了支持其中任何一种的自定义格式，新插件需要首先放在集合中ImportPlugins，或者需要扩展它们以检测自定义格式（并在适当的位置解析或返回false以允许另一个插件解析）。

   旨在ExcelImportPlugin支持其他基于 Excel 的格式。目前，所有的文件都是通过StandardExcelImportFormat类来解析的；但是，检查单元格内容以检测特定结构并调用替代导入类会相对简单。

   出口

   图形可以导出为 JSON 文件（然后可以重新导入）。文件的结构遵循DataModel上一节中描述的类。

   ExportService导出由文件中的类管理src/services/ExportService.js。

   要更改导出格式结构，可以重新使用提取图形内容的现有逻辑ExportService，然后根据需要重新格式化。

   观点

   所有面板都在文件中定义src/App.js。这些配置对象由 Golden Layout Component 的要求定义。

   对于应用程序中的临时面板（例如导入预览），可以考虑两种方法：

   1. 对于输出和控制台等面板，可以将新面板添加到optionalComponentsConfig集合中。这允许面板的状态（即打开或关闭）通过应用程序状态进行管理，无论它是通过选项卡上的“X”关闭还是通过配置关闭（如在首选项对话框中可用）。
   2. 对于像导入预览这样的面板，这些可以根据需要手动添加到布局中。这可以通过 pub/sub 机制干净地完成（见下文和componentDidMount中的方法App.js）。

   查看命令

   在视图有命令的地方，建议创建一个专用的命令栏组件（基于类似于在 中找到的组件src/components/GraphViewerComponent/GraphViewerCommandBarComponent.js）。它们利用 Office Fabric UICommandBar组件，并通过 props 公开功能回调或直接管理操作。

   [/hidecontent]