爱智应用开发起步阶段

EdgerOS 2021-09-22 14:16:52

起步

本章主要介绍如何快速创建、部署一个爱智应用。通过本章的学习，开发者可以轻松的开发一个 Hello World，并发布到爱智世界。

#环境准备

本章主要介绍开发爱智应用的工具准备和工具配置。

#操作步骤

1.安装 Visual Studio Code

下载并安装 Visual Studio Code(opens new window) 工具。

2.安装 EdgerOS 扩展插件

在 VSCode 中下载 EdgerOS 扩展插件并安装。开发者可通过插件获取爱智应用开发模板，以及在爱智设备上打包、上传、安装或更新爱智应用的能力。

3.安装 EdgerOS 安全证书

在开发环境中安装 EdgerOS 安全证书。

#创建应用

本章主要介绍如何使用 EdgerOS 扩展插件快速创建出爱智应用，以及工程文件详解。

#前提条件

完成环境准备。

#操作步骤

打开 Visual Studio Code，点击插件 EdgerOS>创建项目，选择所需的模板后点击应用。

注意：

默认模板源为 github，若模板无法加载可按照以下方式切换模板源：点击 VSCode 左下方的管理按钮，选择设置>扩展> EdgerOS，将 Template Source 切换为 Gitee，然后在创建模板页面点击刷新模板信息按钮即可。

2.参考表 1 填写模板参数，填写完成后点击立即创建按钮，完成应用创建。

注意：

创建完成后需进入创建的项目根目录，执行 npm install 命令安装依赖包。

表 1 创建应用参数模板

参数	说明	取值样例
项目名称	该项目的工程文件名称	test
包名	软件包名称	com.example.myapp
项目描述	简要说明项目用途	测试项目
保存路径	项目在本地保存路径	-
版本号	应用的版本号	0.0.1
提供商 ID	开发者 ID (从开发者网站个人信息查询)	479ace68109611ecbf6b00163e163bca
提供商名称	开发者 ID 对应的用户名	acoUsername
提供商邮箱	开发者的邮箱	example@example.com
提供商手机	开发者的手机号	123456789
其他项：在新窗口打开项目	是否在新的 VScode 窗口打开项目	-

# 创建示例

以创建 Vue 应用为例，打开已创建的项目工程，在 public 目录下打开 index.html，修改其内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello EdgerOS</title>
  <script src="./vue/vue.min.js"></script>
</head>
<body>
  <h1>Hello EdgerOS</h1>
  <div id="app">
    Counter: {{ counter }}
  </div>
  <script>
   var app = new Vue({
     el: '#app',
     data() {
       return {
         counter: 0
       }
     },
     mounted() {
       setInterval(() => this.counter++, 1000);
     }
   })
  </script>
</body>
</html>

修改完毕并保存后，一个最简单的 Vue 示例就创建完成了。

# 补充说明

#文件结构介绍

创建应用项目后会在项目目录下生成一个文件夹（文件夹名称为项目名称），作为项目根目录。这个文件夹中已经包含了项目配置文件与示例页面的初始代码，主要结构如下：

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

#edgeros.json介绍

edgeros.json 示例

{
    "name":"default",
    "bundleid": "com.example.myapp",
    "ignore_modules": [
        "@edgeros/eslint-plugin-jsre",
        "@edgeros/jsre-types"
    ],
    "ignore_path": [
        "./test/**",
        "./temp/**"
    ],
    "assets": {
        "ico_big": "assets/big.png",
        "ico_small": "assets/small.png",
        "ico_widget": "assets/widget.png",
        "splash": "assets/splash.png"
    },
    "program": {
        "gss": false,
        "log": "console",
        "will": false,
        "reside": false,
        "mesv": "1.0.0",
        "resource": "public",
        "experimental": false
    },
    "loading":{
        "splash":"splash",
        "background":"#000000",
        "animation":"enlarge"
    },
    "vendor": {
        "id": "479ace68109611ecbf6b00163e163bca",
        "name": "mycompany",
        "email": "example@example.com",
        "phone": "123456789",
        "fax": ""
    },
    "update": {
        "remove": [
            "public"
        ]
    },
    "widget": [
        {
            "ico": "ico_widget",
            "name": "My Widget",
            "path": "widget",
            "rows": 2,
            "columns": 2,
            "category": "Demo"
        }
    ]
}

注意：

edgeros.json 是 VScode EdgerOS 开发插件中的一项配置文件，用于表明此文件的根目录下是一个爱智应用项目。在编译过程中，VSCode 插件会根据 edgeros.json 的配置进行动态编译，并生成 desc.json 文件。desc.json 是编译后产生的文件，仅保留了爱智应用的必要描述。

edgeros.json 字段

字段	类型	描述	用途
name	字符串	App 名称	在爱智世界中展示时的应用名称
bundleid	字符串	App 的包名	App 包名 (bundleid)，建议使用反域名序列，例如 com.example.myapp
ignore_modules	字符串	module 名称	过滤不参与打包的 module 名称

ignore_path

字段	类型	描述	用途
ignore_path	字符串	字符串路径	过滤不参与打包的文件路径

assets

字段	类型	描述	用途	注意事项
ico_big	字符串	App 必须的高清图标的资源路径	暂未使用	必须存在于软件包的根目录下且为 PNG/JPG/JPEG 格式；在深色模式和浅色模式下必须保持清晰；图标尺寸为 160160(px) 至 240240(px)；文件大小不超过 100 KB。
ico_small	字符串	App 必须的小图标的资源路径	用于 App 桌面图标的圆角矩形图片	必须存在于软件包的根目录下且为 PNG/JPG/JPEG 格式；在深色模式和浅色模式下必须保持清晰；图标尺寸为 160160(px) 至 180180(px)；文件大小不超过 100 KB。
ico_widget	字符串	可自定义名称的其它可引用的资源	此处 ico_widget 定义 widget 中图标图片文件的路径	-
splash	字符串	可自定义名称的其它可引用的资源	此处 splash 定义欢迎页图片文件的路径	格式为 PNG/JPG/JPEG/GIF；文件大小不超过 2048 KB。

program

字段	类型	默认值	权限申请	描述	用途
gss	选填，布尔值	false	-	相同开发商 (vendor.id) 发布的所有 App 可通过 gss 通信，不同开发商的 App 通过 zone 隔离；系统服务的 zone 为空；App 无法创建空的 zone	用于控制同一开发商 App 间的通信
log	选填，字符串	console	-	"file"：保存日志到文件；日志文件有两个，写满后自动滚动输出到另外一个；"null"：不输出任何日志；"console"：仅允许在开发调试阶段使用	用于控制日志的输出方式
will	选填，布尔值	false	需要	App 不会被立即杀死，以便完成自己的任务	用于控制 App 的遗嘱权限
reside	选填，布尔值	false	需要	常驻内存权限，比如说提供 widget 的 App	用于控制 App 的常驻内存权限
mesv	必填，整数数组	N/A	N/A	整数数组 Minimal Edger system version，即最低兼容的 EdgerOS 版本	填写最低兼容的 EdgerOS 版本
resource	必填，字符串	public	N/A	指向应用程序包内的 Web 前端静态资源文件夹	EdgerOS 将提供预加载服务，加速应用启动速度
experimental	选填，布尔值	false	N/A	表示该应用是否是一个实验室应用	用于控制 App 是否为一个实验室应用

loading

字段	类型	描述	用途
splash	字符串	splash 引用 assets 字段中的资源	App 加载首屏的图片文件，引用 assets 字段内定义资源文件的字段名
background	字符串	#000000 格式的颜色编码值	App 加载首屏的图片文件的背景色
animation	字符串	enlarge 动画效果：扩大	App 加载完成后，首屏图片的退出动画效果

update

类型	字段	可选字段	描述	用途
数组	remove	-	自动清理目录	应用升级时，系统自动清理的目录集合

widget

字段	类型	字段说明	描述	用途
ico	字符串	必填	widget 图标，例如：ico_widget	widget 图标，引用 assets 字段内定义的资源文件
name	字符串	必填	widget 显示名称	用于记录 widget 图标名称
path	字符串	必填	widget page URL 路径，最终会与 App 的 hostname 拼接成完整 URL	用于记录 widget 的加载路径
rows	数字	必填	widget 占用行数	用于记录 widget 占用桌面栅格的行数
columns	数字	必填	widget 占用列数	用于记录 widget 占用桌面栅格的列数
category	字符串	可选	widget 所述分类，多个 widget 可属于一个组，EdgerOS 会预定义一些分类，没有指定分类则分类名以 name 代替	记录 widget 的分类，可以从 EdgerOS 的分类里选择，如果没有指定分类则分类名以 name 代替

vendor

字段	类型	字段说明	描述	用途
id	字符串	必填	系统为用户生成的 ID	系统为用户生成的 ID,可以在爱智开发者平台的个人信息中查看，例如：479ace68109611ecbf6b00163e163bca
name	字符串	必填	软件开发商名称	用于记录 App 开发者的用户名或者开发厂商的名称
email	字符串	必填	软件开发商的联系电子邮件地址	用于记录 App 开发商的电子邮件地址
phone	字符串	可选	软件开发商的联系电话	用于记录 App 开发商的联系电话
fax	字符串	可选	软件开发商的传真号码	用于记录 App 开发商的传真号码

#部署应用

本章主要介绍如何将爱智应用部署到爱智设备。

#前提条件

准备一台 Spirit 1 并激活，具体步骤请参考 Spirit 1 包装盒内附带的安装指南。
完成环境准备。
完成创建应用。

# 操作步骤

步骤 1：开启开发模式

在 PC 端连接 “EOS-xxx” 无线网络(网络名称请从 Spirit 1 设备底部的标签获取)。
在浏览器输入 https://192.168.128.1/ (opens new window)，使用管理员身份的翼辉 ID 或设备密码进行登录。
在爱智桌面点击设置>开发模式，打开开发模式开关，并获取开发密码。

步骤 2：添加设备

在 VSCode 中打开已创建的应用项目，点击EDGEROS>设备管理>添加设备按钮（爱智设备的默认局域网 IP ：192.168.128.1）。
填写设备 IP、设备名称和开发密码 ，然后点击添加设备按钮。

步骤 3：部署应用

点击设备菜单右侧的安装 EdgerOS App按钮，应用将自动打包并发布至设备桌面，在设备桌面可以看到爱智应用的桌面图标，点击即可进行访问。

步骤 4：应用打包流程（可选）

如果您的 App 已开发配置完成，需要使用 EdgerOS 扩展插件进行打包，请按照以下步骤操作。

在 VSCode 中打开应用，点击 EDGEROS >其他功能>构建安装包，即可完成打包。

2.完成打包后在应用项目文件中点击 temp，即可找到应用的包，同时在本地按照右下角提示的路径也可以找到应用的包。

创建项目

注意：

爱智开发者平台支持上传 eap 和 zip 两种格式的包，默认为 eap 格式。如果要更改插件打包的格式请打开文件>首选项>设置，在设置窗口中点击用户>扩展> EdgerOS ，打开 EdgerOS 插件的 Build Suffix 选项，在下拉框中选择要更改的文件后缀即可。

创建项目