全部产品
云市场

应用开发

更新时间:2019-05-29 14:18:48

场景描述

城市大脑开放平台提供智能出行引擎,实现交通相关数据的闭环流转,最终达到了对交通系统闭环控制的目的。当前版本仅提供数据融合、控制优化和实时预警三大模块。

本文档以开发“城市交通态势感知”应用为例,介绍如何通过城市大脑开放平台快速开发应用并发布。

开发流程

步骤1:配置开发环境

配置开发环境-Mac环境

前提条件
  1. 已安装Node.js。

    Node.js版本建议为8系统,推荐8.10。

    若未安装,请下载操作系统对应的安装包进行安装。

  2. 已安装VS Code。

    若未安装,请下载操作系统对应的安装包进行安装。

操作步骤
  1. 打开Bash软件。
  2. 执行以下命令,安装Honeycomb。

    sudo npm install honeycomb-cli -g

  3. 执行以下命令,配置Honeycomb。

    honeycomb config registry registry=https://registry.npm.taobao.org

  4. 选择需要创建应用的文件夹,执行以下命令,初始化城市大脑应用。

    cd $app_root //请根据实际情况替换

    honeycomb init -t brain

    初始化成功后,对应文件夹下会生成代码目录,如下图所示。

    代码目录

  5. 安装cnpm。

    sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

  6. 执行以下命令,安装运行依赖环境。

    make install

    若遇到如下错误:

    xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

    请执行以下命令。

    xcode-select –install

  7. 执行以下命令,安装阿里云API网关的依赖。

    cnpm install aliyun-api-gateway -S

  8. 执行以下命令,启动项目。

    honeycomb start

    启动项目成功后,访问 http://localhost:8001/app/app-name,即可在本地环境中查看运行效果,如下图所示。

    注意:启动项目成功后,请不要关掉Bash窗口。

    空应用运行效果

配置开发环境-Windows环境

前提条件
  1. 已安装Node.js。

    Node.js版本建议为8系统,推荐8.10。

    若未安装,请下载操作系统对应的安装包进行安装。

  2. 已安装VS Code。

    若未安装,请下载操作系统对应的安装包进行安装。

  3. 已完成gitbash的安装。

    若未安装,请下载操作系统对应的安装包进行安装。

    注意事项:

    1. 选择安装目录 c:\lib\git
    2. 出现git命令工具和cmd相关的选项(3选1的场景),请选择第三个。
  4. 安装工具包补丁。

    下载如下工具包,解压,将里面所有的文件copy到 GitBash 安装目录下的 usr\bin\ 中。此例中为 c:\lib\git\usr\bin\

    cmd-tools.zip

操作步骤
  1. 打开GitBash软件。
  2. 执行以下命令,安装Honeycomb。

    npm install honeycomb-cli -g

  3. 执行以下命令,配置Honeycomb。

    honeycomb config registry registry=https://registry.npm.taobao.org

  4. 选择需要创建应用的文件夹,执行以下命令,初始化城市大脑应用。

    cd $app_root //请根据实际情况替换

    honeycomb init -t brain

    初始化成功后,对应文件夹下会生成代码目录,如下图所示。

    代码目录

  5. 安装cnpm。

    npm install -g cnpm --registry=https://registry.npm.taobao.org

  6. 执行以下命令,安装运行依赖环境。

    make install

  7. 执行以下命令,安装阿里云API网关的依赖。

    cnpm install aliyun-api-gateway -S

  8. 执行以下命令,启动项目。

    honeycomb start

    启动项目成功后,访问http://localhost:8001/app/app-name, 即可在本地环境中查看运行效果,如下图所示。

    注意:启动项目成功后,请不要关掉Bash窗口。

    空应用运行效果

步骤2:创建应用

根据业务需求,创建应用。

  1. 登录城市大脑开放平台。

    ET城市大脑开放平台

  2. 单击新建应用,进入新建应用页面。

  3. 设置应用英文名称、应用中文名称、行业和应用描述,如下图所示。

    注意事项:

    • 应用英文名称:后续步骤中设置的应用包名称都要与此处设置的应用英文名称保持一致。基于应用发布规则,字母只能用小写字母。

    • 行业:选择交通。

      新建应用

步骤3:开发应用

创建应用成功后,进入开发环境,开发应用。

  1. 在城市大脑初始化的代码目录下的../controller文件夹下新建gateway.js文件。

    1. const { Client } = require('aliyun-api-gateway')
    2. const config = require('../config')
    3. /**
    4. * 如需要使用原始的API, 请加上 nowrap 标记
    5. * @api {post} /api/gateway
    6. * @nowrap
    7. */
    8. exports.gateway = async (req, res) => {
    9. const client = new Client(config.ak, config.aksecret)
    10. const result = await client.get(req.body.url, {
    11. data: req.body,
    12. headers: {
    13. accept: 'application/json'
    14. }
    15. })
    16. res.send({data: result.data})
    17. }
  2. 配置../assets/pages/index.jsx文件。

    1. 打开城市大脑初始化的代码目录下的../assets/pages/index.jsx文件。

    2. 在如下位置,添加代码import { axios } from ‘axios’

      1. import React from 'react'
      2. import { observer, inject } from 'mobx-react'
      3. import './index.less'
      4. import { injectIntl, intlShape } from 'react-intl'
      5. import axios from 'axios'
    3. 定义变量。

      找到如下代码段,添加data,并赋值为空。

      1. constructor (props) {
      2. super(props)
      3. this.state = {
      4. data:''
      5. }
      6. }
    4. 添加如下代码段,启动触发函数。

      1. componentDidMount () {
      2. this.getInterHisMonthValues();
      3. }
  3. 获取指标。

    1. 登录城市大脑开放平台,找到city_situation应用,单击基本信息,进入基本信息页面,获取appsecret值和appkey值。

      安全信息

    2. 打开../config/config_default.js文件,在module.exports配置项中增加以下内容aksecret:’appsecret’, ak:’appkey’,,其中appkey和appsecret为3-i中获取的具体值。

      1. systemToken: 'Please Enter Your Own Token into ~/.honeycomb.json',
      2. debug: true,
      3. isDev: true,
      4. prefix: '/app/' + appName,
      5. staticPath: undefined,
      6. aksecret:'appsecret',
      7. ak:'appkey',
  4. 渲染指标。

    1. 打开../assets/pages/index.less文件,在index.less文件中定义渲染样式。

      1. .sample_style{
      2. position: absolute;
      3. top: 40%;
      4. left: 50%;
      5. z-index: 1000;
      6. color: #fff;
      7. font-size: 20px;
      8. }
    2. 打开../assets/pages/index.jsx文件,在render函数中,使用如下代码替换原来的代码,渲染指标。

      1. render () {
      2. const { fullscreen } = this.props.UI
      3. const { switchFullScreen } = Tools
      4. fullscreen
      5. ? switchFullScreen().request()
      6. : switchFullScreen().exit()
      7. return <div className='too'>
      8. <div className="sample_style">
      9. <div>路口:荷花西路与三衢路路口</div>
      10. <div>时间:20189月</div>
      11. <div>指标:平均延误时长</div>
      12. <div>取值:{this.state.data}</div>
      13. </div>
      14. <List />
      15. <Detail />
      16. <GasMap />
      17. </div>
      18. }
      19. }
  5. 查看运行效果。

    开发应用完成后,访问http://localhost:8001/app/app-name, 可在本地环境中查看运行效果,如下图所示。

    运行效果

步骤4:打包应用

打包应用-Mac环境

  1. 修改appname。

    1. 打开城市大脑初始化代码目录下的../config/config_default.js文件。

    2. const appName = process.env.APP || ‘app-name’代码中的app-name替换为city_situation,替换结果如下所示。

      说明: city_situation为本示例中的应用英文名,app-name要与创建应用时设置的应用英文名保持一致。

      1. 'use strict'
      2. const path = require('path')
      3. const appName = process.env.APP || 'city_situation'
    3. 将module.exports代码段中的prefix: ‘/app/‘ + appName替换为prefix: ‘/‘ + appName,替换结果如下所示。

      1. systemToken: 'Please Enter Your Own Token into ~/.honeycomb.json',
      2. debug: true,
      3. isDev: true,
      4. prefix: '/' + appName,
  2. 打开城市大脑初始化的代码目录下的package.json文件,修改应用名称和版本信息。

    注意事项:

    • name字段要与创建应用时设置的应用英文名保持一致。

    • version字段只能设置为数字。

      1. "name": "city_situation",
      2. "version": "1.0.0",
  3. 打开Bash软件,执行以下命令,打包应用。

    cd $app_root //请根据实际情况替换

    honeycomb package

    打包完成后,打包文件默认保存在应用的/out目录中,文件格式为.tgz。此例中,文件名称为:city_situation.1.0.0_1.tgz,如下图所示。

    保存目录

    说明:应用包名称必须与创建应用时设置的应用英文名称保持一致。

打包应用-Windows环境

  1. 修改appname。

    1. 打开城市大脑初始化代码目录下的../config/config_default.js文件。
    2. const appName = process.env.APP || ‘app-name’代码中的app-name替换为city_situation,替换结果如下所示。

      说明: city_situation为本示例中的应用英文名,app-name要与创建应用时设置的应用英文名保持一致。

      1. 'use strict'
      2. const path = require('path')
      3. const appName = process.env.APP || 'city_situation'
    3. 将module.exports代码段中的prefix: ‘/app/‘ + appName替换为prefix: ‘/‘ + appName,替换结果如下所示。

      1. systemToken: 'Please Enter Your Own Token into ~/.honeycomb.json',
      2. debug: true,
      3. isDev: true,
      4. prefix: '/' + appName,
  2. 打开城市大脑初始化的代码目录下的package.json文件,修改应用名称和版本信息。

    注意事项:

    • name字段要与创建应用时设置的应用英文名保持一致。

    • version字段只能设置为数字。

    1. "name": "city_situation",
    2. "version": "1.0.0",
  3. 打开城市大脑初始化的代码目录下的配置文件Makefile,找到如下代码段,修改成如下代码,即将第6行修改成INSTALL = $(NPM_INSTALL)

    1. REGISTRY = https://registry.npm.taobao.org
    2. TNPM_INSTALL = tnpm install
    3. CNPM_INSTALL = cnpm install
    4. NPM_INSTALL = npm install --registry=${REGISTRY}
    5. INSTALL = $(NPM_INSTALL)
  4. 打开GitBash软件,执行以下命令,打包应用。

    cd $app_root //请根据实际情况替换

    honeycomb package

    打包完成后,打包文件默认保存在应用的/out目录中,文件格式为.tgz。此例中,文件名称为:city_situation.1.0.0_1.tgz,如下图所示。

    保存目录

    说明:应用包名称必须与创建应用时设置的应用英文名称保持一致。

步骤5:发布应用

  1. 登录城市大脑开放平台。

    城市大脑开放平台

  2. 选择待发布的应用,单击发布,进入发布应用页面。

  3. 单击添加文件或将文件释放到此区域,上传应用包。上传后自动发布,如下图所示。

    上次应用包

  4. 发布成功后,返回到我的应用列表页面,获取访问地址,如下图所示。

    发布应用

  5. 在浏览器中输入访问地址,进入智能应用操作页面,如下图所示。

    智能应用操作界面