应用开发快速入门

Appearance

电视JS应用编程 ​

进入在线编程 ​

在线编程环境codeserver ​
  • 将代码编写、调试、编译、运行以及其他相关操作都集成在一起，为开发者提供了一个统一的开发平台。
  • 不同用户之间：用户空间独立，租赁方式共享编程环境。
进入在线编程 ​

在工作台选择打开应用，进入在线编程环境 * 第1步：进入工作台 > 应用视图 > 项目应用 或 个人应用 * 第2步：调整筛选项筛选应用，或输入应用的中文名或英文名搜索应用. * 第3步：从列表中选择目标电视应用（类型为rn-tv），点击vscode图标，进入codeserver。 alt text

代码仓库构成 ​

开发者打开应用后，codeserver后会自动检出显示该应用的源码仓和发布仓。

  • 1个源码仓
    • index.js 应用入口文件
    • package.json 包依赖配置文件
    • debug.py 真机预览参数配置脚本:预览使用的电视APPid
    • release.sh 编译控制脚本
  • 1个发布仓
    • baselines.yml 发布仓基线
  • 截图说明： alt text

保存提交代码 ​

  • 第1步：保存修改后的源代码。有以下两种操作方式：
    • 鼠标焦点离开编辑的文件窗口时自动保存。
    • 用户修改代码过程中按Ctrl+s手动保存。
  • 第2步：在源码仓先后执行下面两条命令，将代码推送到远程仓库
    1. git tag v1.0.xx
    2. gita push origin v1.0.xx
      补充说明：v1.0来源于发布仓baselines.yml中jssource指定的tag（如下注释）， xx为从1开始递增的整数。
      下方为baselines.yml中截取的部分内容块:
    source:
  - url: "${REPO_URL}/git/web_development/rnapptv_tools.git"
    tag: "v2.0"
    name: "toolkit"
  - url: "${REPO_URL}/git/tvproject001/tv_simple_app0.git"
    tag: "v1.0"                        //v1.0来自jssource指定的tag
    name: "jssource"

真机预览调试 ​

开发人员可以通过电视（正常连网运行电视软终端APK的电视机）真机预览应用，进行代码的开发调试。

  • 第1步：在源码仓执行install命令安装package.json中指定的依赖包

    • 根据package.json中"ipanel-rntv-core"的版本 选择执行下方1条install命令
    yarn install  //ipanel-rntv-core 版本 2.0.3 及以上推荐 

npm install   //ipanel-rntv-core 版本 不限
    • 操作截图 alt text
    • 安装依赖包完成结果提示 alt text

  • 第2步：在源码仓执行yarn start 启动Metro Bundler服务
    Metro Bundler是一个React Native的JavaScript打包器。
    运行yarn start时会启动Metro Bundler服务, 它会监听项目中的文件变化; 同时会启动一个http服务器, 使模拟器或真机上可以预览应用。

alt text

  • 第3步：电视上电连网并启动电视软终端APK。 电视网络要求:

    • 电视能正常访问ipanel cloud集群 -- 执行yarn debug时，codeserver通过ipanel cloud通知电视真机预览http地址
    • 电视和codeserver的网络正常互通 -- 电视基于真机预览地址，和codeserver建立websocket连接，和metro服务互通信息。

  • 第4步：在电视软终端APK的工程菜单中可以获取真机预览的配置参数

    • 电视APP_ID 工程菜单中点击"电视信息", 对应弹框显示的"应用ID"，手机扫二维码可以直接取到文本. alt text

    • 连接的iPanelCloud集群域名 工程菜单中点击"版本Release信息", 查看弹框信息中 build > bulid-ocnfig > IPANEL_CLOUD_COMAIN

       ......
   "build":[
   {
       "configs":{
           "bulid-config":[
               "IPANEL_CLOUD_DOMAIN:ipanelcloud2.ipanel.cn",
               .....
           ],
           .....
       },
       ......
   }
   ]

  • 第5步：配置真机预览参数，启动电视真机预览

    • 源码仓debug.py中配置真机预览参数
        DEVICE_ID = 'EMBSTV4b4f7a2ed3f68ef216cc96d033091030' # 电视APP_ID，根据电视修改。
    TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJpcGFuZWwuY24iLCJpbmRleCI6IjEiLCJleHAiOjk3ODM3NzE5ODN9.AhaqhkO3DYWHjZ5STK1_v_3NEFxH-q8QdIB89OT3rTo' #cloud集群的心跳服务请求TOKEN
    PULSER_URL = 'http://'+TOKEN+':@ipanelcloud2.ipanel.cn:50080/s/pulser'  #电视连接的cloud集群的心跳服务请求地址。
    • 源码仓打开新的终端执行yarn debug启动电视真机预览
      执行yarn debug命令时，codeserver通过iPanelCloud通知电视软终端打开真机预览地址预览应用。
      执行命令后，终端会打印输出： 真机预览地址(http服务器代理后的地址)、真机预览启动结果
      alt text
    • 电视真机预览启动成功后，metro服务中显示应用打包信息，应用代码运行的实时日志打印. alt text
    • 真机预览中，保存修改的应用代码时，电视会实时刷新显示

编译打包推送 ​

  • 操作: 提交代码后，在源码仓执行yarn release命令，进行编译打包推送 alt text
  • 命令执行过程打印说明:
    1. rek u -- 检出发布仓基线baselines.yml中source指定的源 alt text
    2. rek b -- 安装依赖进行编译
      alt textalt text
    3. rek pack -- 打包 alt text
    4. rek push -- 推送发布到远程仓库 alt text