练习 - 在 Visual Studio Code 中使用源代码

  • 15 分钟

在本应用场景中，要求您为组织创建帐户管理应用。 您决定创建画布应用，以文本格式提供应用源代码，以便符合组织的法律要求。 贵公司的开发策略要求开发人员创建的所有资产均存储在源代码管理存储库中。 应在可行时以文本格式将源代码提交到存储库，从而简化项目团队环境中的协作流程并使源代码可用于自动扫描和区分。

要求

要完成本练习，您需要安装包含数据库的 Microsoft Dataverse 环境。

目标

本练习旨在帮助您学习如何：

  • 在 Visual Studio Code 中编辑画布应用程序。

  • 在 Visual Studio Code 中打包画布应用程序。

  • 将画布应用程序上传到 Power Apps Studio。

  • 创建并初始化本地和远程 Git 存储库。

  • 同步本地和远程存储库并处理更改。

先决条件

开始本练习之前，请确保您已完成本模块的前置实验。

练习 1：编辑应用程序

在本练习中，您将在 Visual Studio Code 中编辑客户经理应用程序。

任务：编辑应用

在本任务中，您将在 Visual Studio Code 中编辑应用程序。

  1. 打开 Visual Studio Code。

  2. 如果学习实验客户经理文件夹未自动打开，请选择文件 > 打开文件夹。 找到并打开 Learn lab account manager 文件夹。

  3. 展开 src 文件夹，展开 Src 文件夹，然后选择 BrowseScreen1.fx.yaml 文件。

    BrowseScreen 文件屏幕截图。

  4. 找到LblAppName1。

  5. 将LblAppName1的文本值改为公司，将大小改为28。

    文本值和大小值屏幕截图。

  6. 找到IconNewItem1。

  7. 将 Navigate 公式从 None 转换为 CoverRight，然后添加以下 Trace() 表达式：

    ;Trace("New Item Selected")

    Navigate 公式转换和跟踪表达式的屏幕截图。

  8. 选择DetailScreen1.fx.yaml文件。

  9. 找到LblAppName2。

  10. 将LblAppName2的文本值改为公司，将大小改为28。

  11. 选择EditScreen1.fx.yaml文件。

  12. 找到LblAppName3。

  13. 将LblAppName3的文本值改为公司，将大小改为28。

  14. 选择文件 > 全部保存。

练习 2：打包并上传

在本练习中，您将打包应用程序并将其上传到环境。

任务：打包并上传

在本任务中，您将打包并上传应用程序。

  1. 打开终端并运行以下命令：

    pac canvas pack --msapp "Account manager.msapp" --sources src

    包应用程序命令的屏幕截图。

  2. 您可能会收到警告消息：警告 PA2001：校验和不匹配。 您可以安全地忽略本消息。

  3. 切换到浏览器，转到 Power Apps maker portal 并确认您处于正确的环境中。

  4. 选择应用。

  5. 选择客户经理应用，然后选择编辑。

  6. 选择文件 > 打开 > 浏览。

    浏览文件按钮的屏幕截图。

  7. 选择学习实验客户经理文件夹中的Account manager.msapp文件，然后选择打开。

    要导入的画布应用的屏幕截图。

  8. 选择预览应用。

    预览应用按钮屏幕截图。

  9. 标签文本应显示您在 Visual Studio Code 中所做的更改。 选择加号 (+) 图标添加新客户。

    添加新客户按钮屏幕截图。

  10. 标签文本应显示您在 Visual Studio Code 中所做的更改。 填写窗体，然后选择保存。

    创建新客户屏幕截图。

  11. 选择打开新客户。

  12. 标签文本应显示您所做的更改。 关闭应用预览。

    关闭应用程序预览按钮的屏幕截图。

  13. 选择文件 > 保存。

  14. 选择发布。

  15. 选择发布此版本，然后等待发布流程完成。

练习 3：GitHub（可选）

在本练习中，您将在 GitHub 中新建存储库、初始化存储库并处理更改。

任务 1：初始化远程存储库

在本任务中，您将初始化远程存储库。

  1. 转到 GitHub 并登录。 如为首次登录，请选择注册，然后按照提示完成注册流程。

  2. 选择加号 (+) 按钮，然后选择新建存储库。

    GitHub 中新建存储库按钮的屏幕截图。

  3. 在存储库名称中输入 Contoto_Man，选择专用，然后选择创建存储库。

    显示选定专用选项的新建存储库窗口屏幕截图。

  4. 复制URL，然后将其粘贴到记事本中以供后续使用。

    复制存储库 URL 按钮屏幕截图。

任务 2：初始化本地存储库

在本任务中，您将初始化本地存储库。

  1. 打开 Visual Studio Code。

  2. 如果学习实验客户经理文件夹未自动打开，请选择文件 > 打开文件夹。 找到并打开 Learn lab account manager 文件夹。

  3. 选择视图菜单，然后选择SCM（源代码管理管理器）。

  4. 选择初始化存储库。

    初始化存储库按钮屏幕截图。

  5. 将光标悬停在更改选项上，然后选择加号 (+) 图标到暂存所有更改。

    暂存所有更改按钮屏幕截图。

  6. 在消息中键入初始提交，然后选择提交（复选框按钮）。

    初始提交的提交更改按钮屏幕截图。

任务 3：添加并同步远程存储库

在本任务中，您将添加远程存储库并同步存储库。

  1. 选择省略号 (...) 按钮，然后选择远程 > 添加远程。

    添加远程按钮的屏幕截图。

  2. 粘贴之前复制的存储库 URL，然后选择从 URL 添加远程。 如有提示，请登录。

    从 URL 添加远程按钮屏幕截图。

  3. 键入来源作为远程名称，然后按Enter键。

    远程名称设置为来源的屏幕截图。

  4. 选择省略号 (...) 按钮，然后选择拉、推 > 同步。

    同步存储库按钮的屏幕截图。

  5. 选择确定。

  6. 转到 GitHub 并打开Contoso_Man存储库。

  7. 选择打开src文件夹。

    存储库文件夹屏幕截图。

  8. 检查文件夹的内容。

任务 4：处理更改

在本任务中，您将处理更改。

  1. 切换到 Visual Studio Code，然后选择BrowseScreen1.fx.yaml文件。

  2. 找到 IconNewItem1，然后将 Navigate 公式从 CoverRight 更改为 UnCover。

    导航转换类型的屏幕截图。

1 选择文件 > 全部保存。

  1. 选择源代码管理 > 暂存所有更改。

    选定暂存所有更改按钮的源代码管理的屏幕截图。

  2. 在消息中键入根据 UX 准则更改转换，然后选择提交（复选框图标）。

    提交更改按钮屏幕截图。

  3. 选择省略号 (...) 按钮，然后选择推送。

  4. 返回 GitHub 并打开Contoso_Man存储库。

  5. 选择打开提交。

    打开提交按钮屏幕截图。

  6. 审阅更改。

    提交更改审阅的屏幕截图。