爱智应用开发基础1-应用构建

EdgerOS 2021-09-23 17:18:50

 

爱智应用开发基础共分为三个模块,依次是应用构建Web-SDK集成、使用JSRE开发。学习后可完成爱智应用的基础开发工作。

本次讲解模块一:应用构建

应用构建

本章将以 Vue 为代码示例,介绍如何构建一个可以前后端交互的爱智应用。

概述

开发者在构建应用时可使用任意的 Web 开发框架进行前后端分离开发。前后端分离开发是指将前端页面和后端服务拆开来单独进行开发,全部完成后再联调打包,实现高内聚低耦合,提升研发效率。

Vue 是常用的前端框架之一,阅读本章可了解如下技术:

  • 基于 Vue 框架,独立进行爱智前、后端开发。
  • 使用现代前端框架的 Proxy 机制进行数据代理,实现可实时预览的 UI 开发。
  • 如何将前后端结合为一个可运行在爱智上的应用。

# 操作步骤

步骤 1:创建爱智应用

参考 创建应用 章节,创建一个爱智应用,创建好的目录结构如下:

├── assets          资源文件夹                   
├── routers         路由信息 
├── public          静态页面文件
├── views           模板页面
├── eslintrc.json   eslint 配置文件
├── edgeros.json    edgeros 应用配置文件
├── main.js         程序入口
├── jsconfig.json   代码补全配置文件
└── package.json    依赖包的管理

步骤 2:定义 REST

  1. 打开已创建的爱智应用工程,在 main.js 文件中添加如下代码:
console.log(sys.appinfo().ports)
console.log(sys.appinfo().appid)
console.log(sys.appinfo().port)

let times = 0
app.get('/times', function(req, res) {
  res.json({ times: times++ })
})

/* Event loop */
require('iosched').forever();

注意: 请确保 require('iosched').forever(); 字段处于文件末尾,可参考 IOSched : I/O events scheduler

    2.添加完成后,这段代码会返回该接口被调用的总次数,三个 console.log 语句会在插件打印该应用启动时的日志,包含以下重要信息:

ports - https 端口号
appid - 应用 ID
port - http 端口号

步骤 3:部署应用

      参考 部署应用 章节,将应用部署至爱智桌面。

步骤 4:启动应用

    1.部署完成后,点击 EDGEROS>设备管理>打开控制台输出按钮,用于获取爱智应用的启动信息。

   2.打开浏览器输入 https://192.168.128.1 进入爱智桌面,点击启动刚才安装部署的爱智应用。

   3.查看控制台,爱智应用启动后将输出以下启动信息,应用启动成功。

 步骤 5:创建 Vue 应用

  1. 请确保您的环境已安装 Node.js 和 Vue 命令行工具(CLI),之后在控制台或终端执行以下命令,创建一个 Vue 应用。
vue create demo-app

    2. 在 Visual Studio Code 中打开该工程,修改 src>components>HelloWorld.vue 文件如下:

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>Say hello {{ reply.times }} times</h2>
        <button @click="sayHello">Hello EdgerOS</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data() {
        return {
          reply: {}
        }
      },
      methods: {
        async sayHello() {
          try {        
            const response = await fetch('/times')
    
            this.reply = await response.json();
          } catch (error) {
            console.error('error is: ', error)
          }
        }
      }
    }
    </script>

        3.修改完成后,这段代码将在界面上增加一个可点击的按钮和一个文本展示区域,文本展示区域的内容由步骤 2 中的 REST 调用结果填充。

    # 步骤 6:连接前后端代码

    以上步骤分别创建了前端和后端应用,需要启用 webpack 的 proxy 机制将分离的前后端代码进行连接。对 Vue 来说,需要配置 vue.config.js 文件如下:

    module.exports = {
      assetsDir: 'static',
      productionSourceMap: false,
    
      devServer: {
        disableHostCheck: true,
        proxy: {
          '/': {
            target: 'https://192.168.128.1:7374',
            changeOrigin: true,
            secure: false
          }
        }
      }
    };

    注意:

    • target 字段的 URL 指向了爱智应用在爱智设备中的地址,需注意写法。
    • URL 必须是 https 格式。
    • 应用与爱智必须通过 Wi-Fi 直连,处于开发状态的爱智应用脱离直连模式将无法使用。
    • 端口信息来自步骤 4 中控制台的信息。

    步骤 7:启动完整应用

    1. 在项目控制台输入以下命令,启动完整应用。
    npm run serve

         2. 启动成功后将展示以下输出:

       3. 通常会有多个 URL 可供使用,需要选择非 localhost 的一项, 复制 http://192.168.128.100:8080 到浏览器地址栏,进入以下界面:

    image-20210524153717900

       4. 点击 Hello EdgerOS 按钮,UI 界面将显示按钮被点击的次数,应用创建成功。

    步骤 8:发布应用

    1. 在 Vue 工程中执行 npm run build,构建前端应用。
    2. 构建完成后,将构建好的内容从 dist 目录拷贝至爱智应用的 public 目录下。
    3. 参考 发布应用 章节,完成应用发布。

     

    ...全文
    1296 回复 打赏 收藏 举报
    写回复
    回复
    切换为时间正序
    请发表友善的回复…
    发表回复
    发帖
    爱智开发者社区

    1534

    社区成员

    爱智开发者平台是一个开放的物联网平台,通过爱智世界,应用开发者可以把自己的应用分发到亿万用户的设备上,硬件开发者能够把设备能力开放给海量的开发者,让优质的应用脱颖而出,为用户提供更优秀的使用体验。
    边缘计算物联网javascript 企业社区
    社区管理员
    • EdgerOS
    • Lumos_zbj
    • dayinfinite
    加入社区
    帖子事件
    编辑了帖子 (查看)
    2022-08-10 16:50
    编辑了帖子 (查看)
    2022-08-10 16:38
    编辑了帖子 (查看)
    2022-08-10 16:37
    编辑了帖子 (查看)
    2022-08-10 15:26
    创建了帖子
    2021-09-23 17:18
    社区公告
    暂无公告