ThingsBoard教程（八）：自定义UI_专栏_易百纳技术社区

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

前端开发环境的搭建

安装Nodejs，和git

要搭建开发环境需要先安装 nodejs ，网上有大把资源，这里就不再累述了，如果你是windows的用户，可以直接在官网下载，一键安
git可以装，也可以不装，不装的话，直接在github下载代码压缩包，安装了的话，直接使用git命令下载代码到本地。

源码下载，npm包安装

使用git下载最新版本的tb源码

git clone https://github.com/thingsboard/thingsboard.git

下载完成后，进入 ui-ngx 目录进行操作

cd thingsboard
如果这一步报没有yarn命令的话，就先使用npm安装一下yarn
npm i yarn -g
建议使用yarn来安装npm包，因为官方的仓库中是使用yarn.lock来锁定版本号的，

如果安装报错，八成是网络问题，因为很多包是在国外的。多试几次。
ui-ngx目录的结构是这样子的，如下图
安装完成npm包后，运行以下命令可以将项目启动
yarn start
运行后，会对代码进行编译，构建。
日志如下：
$ yarn start
yarn run v1.22.4
$ node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --open
WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
chunk {ace-builds-src-noconflict-ext-language_tools} ace-builds-src-noconflict-ext-language_tools.js, ace-builds-src-noconflict-ext-language_tools.js.map (ace-builds-src-noconflict-ext-language_tools) 70.5 kB  [rendered]
chunk {ace-builds-src-noconflict-ext-searchbox} ace-builds-src-noconflict-ext-searchbox.js, ace-builds-src-noconflict-ext-searchbox.js.map (ace-builds-src-noconflict-ext-searchbox) 16.7 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-css} ace-builds-src-noconflict-mode-css.js, ace-builds-src-noconflict-mode-css.js.map (ace-builds-src-noconflict-mode-css) 31.9 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-html} ace-builds-src-noconflict-mode-html.js, ace-builds-src-noconflict-mode-html.js.map (ace-builds-src-noconflict-mode-html) 97.1 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-java} ace-builds-src-noconflict-mode-java.js, ace-builds-src-noconflict-mode-java.js.map (ace-builds-src-noconflict-mode-java) 35.7 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-javascript} ace-builds-src-noconflict-mode-javascript.js, ace-builds-src-noconflict-mode-javascript.js.map (ace-builds-src-noconflict-mode-javascript) 27.9 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-json} ace-builds-src-noconflict-mode-json.js, ace-builds-src-noconflict-mode-json.js.map (ace-builds-src-noconflict-mode-json) 10 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-markdown} ace-builds-src-noconflict-mode-markdown.js, ace-builds-src-noconflict-mode-markdown.js.map (ace-builds-src-noconflict-mode-markdown) 118 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-text} ace-builds-src-noconflict-mode-text.js, ace-builds-src-noconflict-mode-text.js.map (ace-builds-src-noconflict-mode-text) 831 bytes  [rendered]
chunk {ace-builds-src-noconflict-snippets-css} ace-builds-src-noconflict-snippets-css.js, ace-builds-src-noconflict-snippets-css.js.map (ace-builds-src-noconflict-snippets-css) 22 kB  [rendered]
chunk {ace-builds-src-noconflict-snippets-html} ace-builds-src-noconflict-snippets-html.js, ace-builds-src-noconflict-snippets-html.js.map (ace-builds-src-noconflict-snippets-html) 21 kB  [rendered]
chunk {ace-builds-src-noconflict-snippets-java} ace-builds-src-noconflict-snippets-java.js, ace-builds-src-noconflict-snippets-java.js.map (ace-builds-src-noconflict-snippets-java) 5.61 kB  [rendered]
chunk {ace-builds-src-noconflict-snippets-javascript} ace-builds-src-noconflict-snippets-javascript.js, ace-builds-src-noconflict-snippets-javascript.js.map (ace-builds-src-noconflict-snippets-javascript) 4.83 kB  [rendered]
chunk {jstree} jstree.js, jstree.js.map (jstree) 200 kB  [rendered]
chunk {jszip} jszip.js, jszip.js.map (jszip) 149 kB  [rendered]
chunk {main} main.js, main.js.map (main) 2.27 MB [initial] [rendered]
chunk {moment-timezone} moment-timezone.js, moment-timezone.js.map (moment-timezone) 204 kB  [rendered]
chunk {pages-home-pages-module} pages-home-pages-module.js, pages-home-pages-module.js.map (pages-home-pages-module) 1.83 MB  [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 270 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 688 kB [initial] [rendered]
chunk {raphael} raphael.js, raphael.js.map (raphael) 152 kB  [rendered]
chunk {react-ace} react-ace.js, react-ace.js.map (react-ace) 198 kB  [rendered]
chunk {react-json-form-react} react-json-form-react.js, react-json-form-react.js.map (react-json-form-react) 3.16 MB  [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 13.3 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 67.7 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.37 MB [initial] [rendered]
chunk {tooltipster} tooltipster.js, tooltipster.js.map (tooltipster) 54.9 kB  [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 10.2 MB [initial] [rendered]
Date: 2021-03-03T08:47:43.401Z - Hash: d0dd7a67bbbcf8b24677 - Time: 92364ms
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
启动完成后，会自动打开浏览器，看到以下这个页面。

说明前端项目已经正常启动。
前端项目正常启动了，但后端项目还没有启动，所有会报一个错误。
那么如何启动后端服那？如果你是后端开发人员，那就要安装jdk，maven，以及数据库，来把一整套后端环境搭建起来。但如果你是前端人员，这么做就没有太大意义。可能折腾一天都不一定能折腾好。所有，最简单的办法是什么那？当然是使用docker起一个tb服务了。
使用docker运行以下命令
docker run -p 8080:9090 -p 1883:1883 thingsboard/tb-postgres
启动之后如何配置前端项目访问后端服务那？
答案就在前端的 proxy.conf.js 文件了。这里就是配置后端服务的路径

const forwardUrl = "http://localhost:8080";
const wsForwardUrl = "ws://localhost:8080";
const ruleNodeUiforwardUrl = forwardUrl;
const PROXY_CONFIG = {
  "/api": {
    "target": forwardUrl,
    "secure": false,
  "/static/rulenode": {
    "target": ruleNodeUiforwardUrl,
    "secure": false,
  "/static/widgets": {
    "target": forwardUrl,
    "secure": false,
  "/oauth2": {
    "target": forwardUrl,
    "secure": false,
  "/login/oauth2": {
    "target": forwardUrl,
    "secure": false,
  "/api/ws": {
    "target": wsForwardUrl,
    "ws": true,
    "secure": false
module.exports = PROXY_CONFIG;
const forwardUrl = "http://localhost:8080";
const wsForwardUrl = "ws://localhost:8080";
修改为docker启动的tb服务的地址。比如
const forwardUrl = "http://192.168.99.102:8080/";
const wsForwardUrl = "ws://192.168.99.102:8080";
再重新运行
yarn start
即可看到不再报错，使用默认账号登录试试看。

账号：[email protected]

密码：sysadmin
定制logo
很多公司想要定制tb的logo，然后自己再申请软著，各种认证。

在tb中修改logo很简单，可以直接替换原有文件，也可以直接修改源码来更改logo
替换文件的话，只需要替换src/assets/logo-title_white.svg,src/assets/logo-white.svg,此外还有src/thinsboard.ico
这三个文件替换一下。就能修改tb的logo
如果要修改源码来达到替换logo的目的。

需要修改以下几处
修改网站标题
修改主题色
修改默认语言
配置完成后，需要重启前端项目。

                                
Node-RED系列（二一）：安装mqtt环境，简单使用案例，mqtt节点解析
                                Node-RED系列（十二）：定制化节点教程
                                人工智能的三阶段：为何科学家联署限制可导致人类灭绝的AI技术
                                API 网关 ( API gateway )