1 前言

我们需要自己开发一款标注软件～

2 框架选择

应用框架：Electron+React
Package管理工具：yarn
Js脚手架：ERB
UI组件库：Bootstrap (React Bootstrap)
图标样式库：fontawesome (react-fontawesome)
样式方案：.scss/.css

2.1 Web学习资料——《Web Development for Beginners - A Curriculum》

这里我们可以看看微软推出的web开发的学习资料——《Web Development for Beginners - A Curriculum》~

3 项目需求

3.1 自动更新

在标注软件中，加入自动更新的功能；

4 APP设计流程

关于APP的设计流程，请参考“开发一个App，你大概需要经历下面的步骤”；

5 开发环境

开发语言：node.js
（npm会随node.js一同安装）
包管理工具：yarn
IDE：VSCode

5.1 Yarn安装

可以参考我的博文《标注工具——yarn的学习笔记》

5.2 基础库安装

react-fontawesome

安装教程可以参考《5-4 为项目选择图标库》
具体的安装流程我们根据react-fontawesome的官方文档来进行，首先打开react-fontawesome-doc，
Note：这里我们选择yarn方式进行安装；

4.3 安装第三方依赖

使用yarn命令进行安装
yarn add packagename
安装React Bootstrap：yarn add react-bootstrap bootstrap

6 项目初始化&配置

5.1 复制ERB模板

根据ERB文档对模板进行复制；

5.1.1 ERB模板适配

原始ERB模板在使用时会出现一些问题，这里需要进行适配；

当存在与.tsx组件同名的.json文件时，无法正确打包组件

这个问题是我在学习VoTT时出现的，我在引入一个组件时出现了这样的问题，

错误提示说：

React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object.

也就是说，React发现我们这里在使用模块时，这里不是一个React-class，而是一个object；
经过仔细检查发现，代码本身并没有问题，
（我们可以来看看引入组件的代码，

）
而是由于ERB本身的缺陷引起的，这里的根本原因其实是，webpack这里打包的是projectForm.json文件而不是真正的组件文件projectForm.tsx，那么为什么会出现这样的情况呢？
其实是因为ERB在webpack的设置中extensions的参数设置有问题！

5.2 安装ERB项目依赖

使用yarn命令

yarn

5.2.1 使用“yarn”命令进行项目依赖包的安装

在electron-react-boilerplate的安装步骤中，需要使用“yarn”命令进行项目依赖包的安装，
所以我们首先需要安装yarn包管理器，使用如下命令：
npm install -g yarn
Note：遇到权限问题，可以百度搜索一下解决方案
Note：如果遇到网络问题，this might be due to the firewall;
我们可以使用换源的方法来解决这个问题，
可以参考这个千锋教育的老师提供的讲解：2020Electron-HTML+CSS+JS构建跨平台桌面应用程序【千锋Web前端】

5.3 安装electron

yarn add electron --dev

5.4 启动调试

使用命令

yarn start

调试信息记录：

PS D:\Program\***\electron-global-scss> yarn start
yarn run v1.22.10
# yarn程序版本信息
$ node -r @babel/register ./.erb/scripts/CheckPortInUse.js && cross-env yarn start:renderer
# 这里执行了node的bash命令，此指令来自于package.json的"start"命令

5.4 脚手架预配置

将全局样式文件更改为.scss格式
可以直接将全局样式文件App.global.css重命名为App.global.scss；

5.5 移植时node_modules文件夹可以删除

在对代码进行移植的时候，node_modules文件夹可以删除；

7 软件运行分析

7.1 端口检测——./internals/scripts/CheckPortInUse.js

在运行前，首先要进行端口检测，
执行代码为：

参数说明：
node — 执行js代码；
node -r @babel/register ./internals/scripts/CheckPortInUse.js — 表示使用babel的编译器来执行.js代码；

8 代码目录结构

参考格式：https://www.runoob.com/linux/linux-comm-tree.html

.: 当前目录结构
|-- package.json: 打包配置
|-- src: 源代码
| |-- assets：样式代码
| |-- components：组件代码，包括：HomePage
| |-- file
|-- examples.desktop
|-- file
|-- file.new

8.1 Electron-React-Boilerplate文件结构

8.1.1 TSX——使用TypeScript来书写JSX的代码

我们在写作控件时，使用的文件类型是.tsx类型，这里的.tsx就是用TypeScript来书写JSX的代码；

8.1.2 App.js——项目的入口文件

承担着MVC模式中controller的角色；

8.1.3 app.html——应用的布局文件

app.html是应用入口的布局文件，在这里可以修改应用窗口的标题；

9 写作方法

9.1 模块引入

在js写作中，模块引入有多种方法，这里我们统一使用ES模块引入规则；

9.2 样式写作方法

7.1.1 自定义全局样式文件——“component.global.scss”

在使用自定义样式文件时，需要以.global.scss结尾，这是ERB官方文档中描述的要求，（请参考ERB/styling/#css-modules）

7.1.2 引用样式

使用React-class方式引入样式

使用styles类方式引入样式

<div className={styles['app']}>
</div>

7.1.3 添加图标

Fontawesome介绍

这里我们选择fontawesome作为样式库是参考的VoTT的代码，如图所示

<a href="#" className="p-5 file-upload"onClick={() => this.filePicker.current.upload()} ><i className="fas fa-folder-open fa-9x"></i><h6>{strings.homePage.openLocalProject.title}</h6>
</a>

VoTT在<i>标签中使用了fontawesome的图标，首先第一个使用的样式是fas，
这里fas = fa + s，fa表示fontawesome，s表示solid，也就“实心的”意思；

使用FontAwesomeIcon 添加图标

使用组件的icon属性设置图标，以下示例代码来自于fontawesome-using-with-react

// Solid
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />

使用FontAwesomeIcon 添加图标

使用组件的icon属性设置图标，以下示例代码来自于fontawesome-using-with-react

// Solid
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />

<i className="***"></i>”转换为FontAwesomeIcon 图标

以<i className="fas fa-home"></i>为例，

1. <i>标签就用<FontAwesomeIcon>代替；
2. fas表示实心图标，所以我们在使用时引入@fortawesome/free-solid-svg-icons实心图标包；
3. fa-home改写为faHome；

7.2 全局样式写作——App.global.scss

可以把将该样式文件在App.global.scss中进行引入，然后在组件中，可以使用下面的示例方式调用样式：

也就是使用HTML方式直接调用样式；

使用样式名直接引入——“最原始的引入方法”

使用样式名引入

<div className="text-light"}>
# Note：这里使用双引号引用样式的类名
</div>

<div className={'text-light'}>
</div>

两种方式的混合引入，可以看看下面的示例，

6.1.3 引用样式

6.1.2 备注

1. css无法引入scss文件。

6.2 编写React组件

对于React组件的写作，其基本框架如下：

export default class Element extends React.PureComponent {public render() {return (// some codes like html...);}
}

6.3 编写路由

1. 引入createHashHistory()方法；
2. 定义Router并向子组件传递history，
   
3. 定义路由组件MainContentRouter，对路由进行写作，
   
4. 使用this.props.history.push()进行跳转；

自动驾驶——标注工具（js+electron）的开发笔记（基于ERB）相关推荐

1. 自动驾驶——标注工具（js+electron）的开发笔记（基于Create-React-App）

   目录 1 前言 2 框架选择 3 项目需求 3.1 自动更新 4 开发环境 4.1 Yarn安装 4.2 基础库安装 react-fontawesome 5 项目初始化&配置 5.1 使用cr ...

2. 自动驾驶——标注工具（PySide）的开发笔记

   1. 前言 为了便于调试,我们选择PySide来开发桌面端的标注工具:

3. 自动驾驶——标注工具的开发笔记（legacy）

   5 electron-react-boilerplate的文件结构 4.1 文件类型 electron-react-boilerplate中有很多种文件类型 4.1.1 .tsx--使用TypeScr ...

4. Uber AVS 自动驾驶可视化工具（二）XVIZ之Overview

   Uber AVS 自动驾驶可视化工具 (二)XVIZ之Overview Overview Introduction Main Features XVIZ Protocol Specification ...

5. 赋能自动驾驶技术腾飞——海天瑞声发布『DOTS-AD』自动驾驶标注平台

   自动驾驶技术的发展已经取得了巨大进步,现在越来越多的汽车制造商和科技公司都在开发自己的自动驾驶汽车.但要想汽车真正实现自动驾驶还需要面对很多挑战,其中之一就是准确性问题.这让数据标注在自动驾驶技术中显 ...

6. Uber AVS 自动驾驶可视化工具（一）

   Uber AVS 自动驾驶可视化工具 (一) Uber AVS 模块组成 `XVIZ` `streetscapec.gl` 注: 引用: Uber AVS 近期,Uber开源了自动驾驶可视化工具AVS ...

7. carla与ros2的自动驾驶算法-planning与control算法开发与仿真

   欢迎仪式 carla与ros2的自动驾驶算法-planning与control算法开发与仿真 欢迎大家来到自动驾驶Player(L5Player)的自动驾驶算法与仿真空间,在这个空间我们将一起完成这些 ...

8. “乐高式”自动驾驶研发开放平台，让开发更简单灵活高效

   一.2周构建自动驾驶研发平台的秘诀详解 自动驾驶商业化落地加速 中国自动驾驶行业目前面临两个较大的变化.首先,去年11月北京正式开放自动化驾驶的商业化试点,这意味着自动化服务迈过了商业化门槛.与此同时 ...

9. 回顾：鲍世强，讲述51VR自动驾驶仿真平台从0-1的开发与构建

   L3及其以上级别自动驾驶车辆的开发,在系统复杂程度.使用环境复杂程度方面均急剧增加.传统开发ADAS算法的仿真工具已无法完美解决当前更高级别的自动驾驶开发问题.仿真平台便成为自动驾驶企业的刚性需求. ...

最新文章

1. c语言中浮点数和整数转换_C中的数据类型-整数，浮点数和空隙说明
2. 运维工作钱少、事多而且杂？年轻人，你这个思想很危险吶
3. SAP中的邮件发送功能
4. Linux内存中加载二进制,linux – 程序退出后二进制文件会留在内存中吗？
5. ubuntu-chmod与chown命令
6. 【编程语言】Ruby完全自学手册
7. 优秀的程序员都应当知道的11个警句
8. 返回0-9直接的随机数
9. 部分转 Java读取ini配置
10. 地理加权回归R语言实例
11. An invalid domain [xx] was specified for this cookie
12. ”35岁没500万存款就是失败？“，35岁职场人真实存款流出！
13. 我的内存怎么不够用了？
14. 钜泉光电2018年 IC校招笔试题目
15. codeforces 718E. Matvey's Birthday
16. uedit如何连接本机linux虚拟机，实现文件交互
17. Visual Studio2022的安装与HelloWorld！
18. 我读过的100+本经典书籍(持续更新,上次更新2013年11月15日)
19. 实用贴，HDTV的4个基本元素
20. 强智教务系统API学习进度条--（以完结）

热门文章

1. Java SubList 类 Java subList方法 Java ArrayList$SubList 方法特点 SubList 用法
2. 几个简单的jQuery使用方法
3. 更改Flutter Desktop应用的应用图标和应用名称
4. 自媒体如何获得高流量？三招教你，1个月内涨粉百万
5. mysql建表时主键_mysql建表时设置主键的方法
6. java获取10位和13位时间戳
7. 小程序中echarts图表的应用
8. 【云原生 | Kubernetes 实战】18、K8s 安全实战篇之 RBAC 认证授权（下）
9. ABAP F4搜索帮助（详细步骤） SAP
10. 数组中的三数之和最接近目标数