通常,工程师搭建一个数据门户需要开发数据、搭建后端服务和开发前端页面三个环节。本文将为您介绍App Studio的基本功能及如何使用App Studio。

通常,数据工程师在DataWorks进行离线或流式数据开发。随着DataWorks的操作越来越简单,算法工程师、BI分析师、运营、熟悉SQL的产品经理等诸多角色,也逐渐可以在DataWorks进行数据开发。

针对不同种类的用户,App Studio可以助您快速搭建看数据的网页、查数据的App。
APP
APP

了解App Studio

  • 菜单栏
    菜单栏
    • 工程
      您可以通过工程菜单中的子菜单进行工程配置和查看当前工程属性。当前工程属性中包括工程ID工程名工程类型创建时间UUID等工程相关信息。
      工程
    • 文件

      您可以通过文件菜单中的子菜单新建文件打开最近的文件

    • 编辑
      您可以通过编辑菜单栏进行常用的编辑操作,全文搜索是对工程内所有代码内容进行搜索,并可打开相关的文件。全文搜索的详情请参见全文内容搜索
      编辑
    • 版本
      您可以进行切换分支拉取推送查看变更提交日志初始化&关联远程仓库Merge Abort等操作。
      版本
      • 切换分支
        您可以通过+创建新分支创建本地新分支,然后推送到远程仓库。您可以选择一个本地分支,单击右边弹出框中的checkout。您也可以通过merge,将选中的分支合并到当前分支。
        切换分支
        您可以选择一个远程分支,单击右边弹出框中的check out as a new local branch,将该远程分支checkout到本地并重新命名。您也可以通过merge,将选中的分支合并到当前分支。
        merge
      • 拉取

        可以将远程分支的代码拉取到本地分支。

      • 推送

        可以将本地分支的变更暂存后推送到远程分支。

      • 查看变更
        单击查看变更后,右侧导航栏会弹出本地变更文件列表。
        查看变更
        标识 说明

        个数
        代表变更文件的个数。

        新增文件
        代表新增的文件。

        变更文件
        代表变更的文件。

        撤销更改
        单击后可以撤销更改。

        暂存更改
        单击后可以暂存更改。

        撤销暂存
        单击后可以撤销暂存。

        提交
        单击后可以提交或提交并推送暂存的代码。

        更多
        更多中包括推送和拉取操作。
      • 提交

        可以将本地分支的变更提交以暂存,需要输入commit信息。

      • 日志
        可以查看分支的所有提交记录,并可以筛选。
        日志
      • 初始化&关联远程仓库

        新建的工程可以关联远程仓库,从而进行版本管理。

    • 查看
      您可以通过切换全屏将IDE设置成全屏,然后通过Esc键退出全屏。您可以通过切换侧边栏切换状态栏收起侧边和状态栏。
      查看
    • 调试
      • 如果您建的是前端工程,调试选项如下所示。
        调试

        您可以配置运行参数、添加自定义镜像。

      • 如果您建的是后端工程,调试选项如下所示。
        后端工程

        App Studio支持Java Debug,在后端工程的调试中,除配置和自定义镜像操作外,还有很多调试相关的操作。同时会有全量构建、增量构建、编译的操作入口。

    • 设置
      您在开始使用App Studio前,需要配置SSH KEY和GIT CONFIG。您也可以通过偏好设置,设置自己偏好的属性,目前仅支持字体大小,后续会支持颜色、样式、主题、快捷键等。
      设置
    • 帮助
      您可以在帮助中查看产品使用文档、查看快捷键、查看版本历史和清空本地缓存。
      帮助
    • 反馈
      您可以通过反馈提交问题和需求。
      反馈
  • 左边栏
    • 入口
      单击下图中的图标,即可展开工程区。
      入口
      单击下图中的图标,即可展开接口定义区。
      展开接口
    • 接口定义区
      您可以添加接口并自动生成接口类代码,还可通过箭头,将左边的新代码同步到右边的本地代码中。
      接口定义区
      接口定义区
      接口定义区
    • 工程区
      • 文件夹操作
        如果您创建的是后端工程,文件模板新建后,会帮您自动生成一些框架代码。
        文件夹操作
      • 文件操作
        如果您创建的是前端工程,则新建操作只有文件一个选项。
        文件操作

        您可以重命名、复制和删除文件,也可以查看文件的GIT提交历史并进行版本对比。

  • 编辑区
    • 右键操作
      右键操作
      操作 说明
      Go to Definition 单击后跳转至定义。
      Peek Definition 单击后可以预览定义。
      Find All References 单击后可以查找所有引用。
      Workspace Symbol 单击后可以在项目中查找符号。
      Go to Symbol... 单击后可以跳转至符号。
      Generate... 单击后可以生成代码。
      Rename Symbol 单击后可以重命名符号。
      Change All Occurrences 单击后可以修改当前文件中的所有该符号名字。
      Format Document 单击后可以格式化文件。
      Cut 剪切。
      Copy 复制。
      Command Palette 单击后可以进入命令面板。
    • 智能提示
      智能提示
    • 智能补全
      智能补全
    • 智能诊断
      智能诊断
    • 查找定义
      查找定义
    • 查找引用
      查找引用
    • 自动导入
      自动导入
    • 查找符号
      查找符号
    • 多光标编辑
      多光标编辑
    • 查找、替换
      查找
    • 代码格式化
      代码格式化
    • 括号匹配
      括号匹配
  • 右上角图标区
    • 编码规约
      编码规约
    • 构建
      构建
      说明 构建需要在工程运行或者debug时才能进行。
    • Run/Debug Configurations
      run
      run
    • Debug入口
      debug入口

      从左到右的图标依次代表运行、Debug和停止工程。

  • 底边栏
    • DEBUG/RUN面板
      单击运行或Debug工程,该面板会弹出,展示进度和信息。
      debug
    • PROBLEM面板
      当工程有问题时,运行或Debug工程该面板会弹出。
      problem
    • TERMINAL面板
      当工程运行或Debug时,可以通过Terminal触达机器进行bash、vim命令操作。
      TERMINAL
    • VERSION CONTROL面板

      该面板展示Git history和Git log两部分内容。

  • 右边栏
    • Runtime
      工程运行完成时会展开这个面板,并展示机器信息和访问链接。
      Runtime
      • 如果是后端工程,仅展示后端访问链接。
      • 如果是前端工程,仅展示前端链接。
      • 如果是可视化搭建工程,可展示前端访问链接和后端访问链接。
    • Share
      您可以邀请他人协同编程,目前支持8人同时编辑同一工程同一文件。
      Share
      邀请协作者
    • Data
      数据服务是承接DataStudio和App Studio的重要一环。
      Data
      数据服务在App Studio中有两种使用方式,更多详情请参见数据服务
      • 可以在代码中直接使用,或者对接口结果进行再加工。
      • 可以在可视化搭建中直接配置为组件的数据源。
    • Preview
      如果您创建的是前端工程,在右边栏会有Preview入口,在运行工程时可以实时预览前端页面。
      Preview
  • 可视化搭建区
    您的工程必须是可视化搭建工程,在工程中找到santa-pages下的.santa文件,双击打开。
    可视化搭建区

    左上角是组件区,您可以选择需要的组件,也可以通过搜索组件名称选择需要的组件。右上角的图标分别是切换为代码模式、导航配置、全局数据流配置、撤销、重做、预览、保存为模板和保存。

    拖动一个表格组件到画布,单击表格组件,右边会弹出组件配置区,可以对组件的属性、样式进行配置,也可以进行组件联动配置。
    联动配置

创建后端工程

  1. 基于样例工程新建工程。
    1. 进入App Studio页面,单击工作空间页面的通过代码创建工程
      代码创建工程
    2. 填写新建项目对话框中的工程名工程描述选择运行环境springboot样例模板
      springboot
    3. 配置完成后,单击提交
  2. 配置运行参数。

    填写好配置的名称,选择运行的main函数,选择机器规格,单击OK即可完成配置。

    您可以通过左边的添加按钮添加多个配置,运行时选择不同的配置运行。
    添加
    添加
  3. 运行工程
    单击红框中的运行图标开始运行工程。
    运行工程
    第一次运行需要分配机器、初始化语言服务,需要较长时间运行完成,完成后会弹出runtime窗口,展示访问链接。
    展示链接
  4. 访问工程
    单击打开链接,即可访问工程。
    打开链接
    在链接中加上/testapi并刷新页面。
    刷新

创建前端工程

App Studio提供完善的前端开发能力,支持与本地一致的前端开发体验。您可以在App Studio中创建前端工程,以自己熟悉的方式进行HTML、CSS、JS和React的开发,并且您在开发过程中不需要掌握和理解新的概念。

  1. 基于样例工程新建工程。
    1. 进入App Studio页面,单击工作空间页面的通过代码创建工程
    2. 填写新建项目对话框中的工程名工程描述选择运行环境react-demo样例模板
      react
    3. 填写工程名和工程描述,单击确认
  2. 配置运行参数。
    您可以选择机器规格、配置端口,如果没有特殊需求可以直接使用默认的配置,单击OK即可。
    配置参数
    配置参数
  3. 运行工程

    单击右上角的运行图标开始运行工程,目前支持以tnpm start的方式启动前端工程,配置了webpack-dev-server的工程可以无缝对接运行。

    启动运行后,开发者可以在日志中看到依赖安装及应用启动的日志,运行完成后右边会弹出页面的预览页面。您可以实时修改代码并进行保存,便可实时生效。
    运行工程
  4. 访问工程

    单击链接边的箭头即可打开访问页面,App Studio对于前端工程的编辑开发提供了与本地IDE一致的开发体验,包括HTML、CSS、LESS、SCSS、JavaScript、TypeScript、JSX和TSX等文件的智能补全、函数签名、重构和跳转等功能。同时您不需进行搭建环境、下载依赖等操作,可以在模板基础上进行前端开发。

搭建前端可视化工程

  1. 基于样例工程新建工程。
    1. 进入App Studio页面,单击工作空间页面的通过代码创建工程
    2. 填写新建项目对话框中的工程名工程描述选择运行环境App Studio样例模板
      App Studio
    3. 配置完成后,单击提交
  2. 打开home.santa文件。
    在santa-pages目录下找到.santa文件,有home和list两个样例页面。
    样例
    1. 打开home.santa,是一个简单的报表页面。
      报表
    2. 选中一个组件,右边会弹出组件配置。
      组件配置
    3. 单击数据源输入框,会弹出接口列表。
      数据源输入
      App Studio为您提供一些数据服务接口,以便您入门使用。您可以单击+新增数据服务接口前往数据服务中新增接口,通过API路径查看现在的组件对应的接口。
      说明 您可以尝试去掉接口自行配置,体验组件配置数据源的效果,也可以对样式进行修改。
  3. 添加组件&配置接口。
    1. 从图表中拖动一个柱状图到画布上。
      添加组件
      配置接口
    2. 选中组件,单击弹出的组件配置框中的数据源输入框。
    3. 选择第7个接口,单击选用,便成功配置接口。
      选用
    4. 此时组件中没有返回结果,是因为此接口需要填写入参和返回的列。
      返回参数
      您可以单击第7个接口的详情,查看请求和返回的内容。
      接口详情
      说明 由于这是示例项目,您会无权访问,建议您搭建可视化工程时,使用自己的账号到数据服务创建接口。
    5. 按照下图填写组件配置。
      组件配置

    配置完成后,即可看到组件中已有配置好的数据。

  4. 打开list.santa文件。

    App Studio可视化搭建不仅可以搭建报表,还可以搭建应用。

    打开list.santa文件,是一个简单的数据应用。其中包括图标、链接、视频、列表和搜索等组件,详情请参见可视化搭建概述

  5. 导航配置。

    您搭建一个应用,通常不会只有一个页面,多个页面之间需要一个导航配置。

    单击右上角的导航配置标识,即可打开导航配置页面。
    配置
    配置
  6. 配置运行参数,可参见搭建后端工程的操作。
  7. 运行工程。

    单击右上角的运行标识即可开始运行工程,运行后会弹出Runtime面板,单击里面的前端链接即可访问工程。