• Email: jasontsang.dev@gmail.com
• WeChat: gnastnosaj
• QQ: 2563745474

Personal Information

• Jason Tsang / Male / 1991
• Bachelor Degree / Central South University
• Major: Software Engineering
• Working years: 12 years
• Website：https://jasontsang.dev
• GitHub：https://github.com/gnastnosaj

Work Experience

Joyflow.Inc (2024/12 - Now)

GetMyHome

GetMyHome is an app for home buyers with licensed real estate agents and cutting-edge AI. I was resposible for developing the app using Flutter framework and publishing the app on App Store. I was also engaged in the development of back-end services using Golang. GetMyHome is now avaiable on App Store and Google Play.

PricewaterhouseCoopers Information Technologies (Shanghai) Co., Ltd (2022/04 - 2024/11)

Smart Rebuild

This project was build on micro service architecture, using Springboot and Angular framework, as a fullstack developer, I was resposible for user story efforts estimation, implementation and unit test for both front end and back end services based on the team capacity.

FFG Rebuild

This project was build on micro service architecture, using Springboot and Angular framework, I created a tool to transform angular js code to angular 18, I also import an angular library using git submodule which can save about 20% time of migration.

Tiandi (Changzhou) Automation Co., Ltd (2019/04 - 2022/03)

Belt Conveyor Control Mobile APP

In this project, I was responsible for developing the belt conveyor control mobile app based on the ModBusTCP protocol and accessing the belt monitoring video based on the RTSP stream. This project was developed base on the Smart Mine Basic Information Platform For Mobile.

Smart Mine Basic Information Platform For Mobile

In this project, I was responsible for creating the Smart Mine Basic Information Platform For Mobile based on the SCADA Software Framework, Boilerplate, and Boilerplate-cordova. I am also responsible for the development and maintance of basic modules and prodving the common solution of intergating with the platform for other subsystems.

Product Authorization System

Product Authorization System was designed for preventing devices from being couterfeited. It contains an sdk invoked by business systems for communicating with the server of Product Authorization System, the sdk was developed using the Golang Programming Language and was compiled as a C shared Library. Another part was the server that providing the api for sdk and the database sync service, it was implemented with the NestJS framework. There was also a Javascript library built using Webpack for prodving a bridge between the sdk and the server in a specific network enviroment, and a management system for managing the contents that involved with the Product Authorization. I was acted as the project manager and the sole developer in this project. The system was delivered on time according to the quality.

Smart Mine Basic Information Platform

In this project, I was responsible for creating the Smart Mine Basic Information Platform based on the SCADA Software Framework, the development and maintance of basic modules and prodving the common solution of intergating with the platform for other subsystems.

Report Component

I was responsible for system architecture and development of the project, it was implemented with the Angular framework and the datasource was implemented with GraphQL. The Project used the interactive design of some commercial softwares for reference such as FineReport and Huozige, and implemented functionalities such as data expansion, data association, data grouping and spreadsheet design.

Software Authorization Component

I was responsible for system architecture of the project and development of the management system. It includes functionalities such as offline authorization, online authorization, licenses management. It has improved my ability of business analysis, software design and system architecture.

Software Update Component

I was responsible for system architecture of the project and development of the client and the management system. The client was implemented with Electron and shell, it includes functionalities such as running as daemon, executing the update strategies, pretreatment of upgrade and post-treatment of upgrade. The management system was implemented with the Angular framework for managing the update strategies, it could be integrated with the client to view the logs.

SCADA Software Framework

I was responsible for construting the front-end framework based on Angular, the framework includes an event bus library named rxbus, an animiation library based on lottie, and a dynamic theme render library. I learned from the NG-ZORRO project and created a repo which includes business components gain from projects, so that the developers can reuse the components in the repo and contribute to the repo.

Others

Gitlab Issues Analysis (based on Angular), Nexus Repository Manager Private Package List (based on Groovy and Angular), Management of Micro Services (based on Angular).

Jiangsu Guoguang Information Industry Co., Ltd (2013/07 - 2019/03)

Control System Of The Bank Queuing Machines

I was responsible for developing the system on Android which is used to control the wireless devices placed in the bank, such as window panes, primary pane and wireless speakers and provide restful api for other business systems. The main problems were communication protocol and encoding conversion between different platforms, serial port communication with wireless devices, announcements implemented with audiotrack api, switching between master and slave services, concurrency issues, sequential issues and performance. This project was implemented by using the Kotlin programming language, the performance of the system is closed to the one on Windows OS.

Hubei Bank Mobile Marketing rebuild

In this project, I was responsible for the rebuild of the android client and the development of some new businesses. Through the application of dynamic hook technology, the optimization and perfection of multiple functions are completed under the demand of reducing the modification of source code as much as possible. I didn’t participate in the early project development before, but I can quickly master the project architecture and complete the corresponding modifications with minimal intrusion.

Liaoning Rural Credit Cooperative Mobile Marketing

In this project, I was responsible for the architecture design and coding of android client and business system based on HTML5(Cordova + member. JS). According to the business characteristics of the bank, I have developed multiple business templates to facilitate the maintenance personnel to configure based on the business template according to the needs to complete the secondary development of subsequent businesses. Deepened my understanding of hybrid application architecture development.

Internet Identity Authentication of Changchun Administration for Industry and Commerce

In this project, I was responsible for the development of apps under Android and IOS(Kotlin and Swift respectively), the development of background micro services(Kotlin，Blade). This project enables me to have a deep understanding of kotlin and swift languages, and achieve a high degree of similarity and portability between app source codes under Android and IOS. In a similar situation, I personally worked with friends on an outsourced application, Miquaner. I am also responsible for the app architecture and main coding under Android and IOS. At present, it is downloaded in major application markets and Apple store.

Bidding of Anhui Rural Credit Cooperative Android Tablet

In this project, I was responsible for developing the system interface required by the bidding.Because the tablet provided by the company is purchased from a third party, the tablet system cannot be customized according to the requirements of the bank. In this case, I thought of completing the corresponding interface development through the transformation of xposed(an application that needs root and replaces some core programs of the system to realize hook, so as to change the system logic) and the preparation of plug-ins, but the test application puts forward requirements for system security, The device is required not to allow root, and then I blocked the interface obtained by root permission through hook, so that the test application and other applications cannot obtain the root permission of the device(only the application providing the interface can obtain root permission), and passed the test successfully. Although the subsequent bidding failed to be implemented for various reasons, this project deepened my understanding of Android system and reflected my self-study ability and research spirit.

Dandong Bank Intelligent Counter

I was responsible for writing HTML5 business code in this project, which mainly involves business logic. The logic of cash business gives me the most profound image. Deposit and withdrawal is not as simple as it is written. It includes a lot of logic for interacting with devices and recovering exceptions, which not only deepens my understanding of logic and process, but also has a certain grasp of JavaScript ES6 syntax.

Sichuan Rural Credit Cooperative Centralized Authorization Phase II

In this project, I was responsible for the rebuild and implementation of Sichuan Rural Credit Cooperative Centralized Authorization client and background management system. This was my first project after joining the company, and I had a deep understanding of Linux server deployment and implementation. The centralized authorization servers of rural credit cooperatives in all prefectures and cities in Sichuan Province were finally automatically installed from the RedHat system installation package customized by me(using the kickstart of RedHat for customization. All servers in phase I were deployed by operations person one by one. Of course, internet companies may choose docker as the solution, today.).

Others

Internet Trusted Identity Authentication(Android and iOS), Mobile Recording(Android), Universal Bluetooth Library(spp and ble), Mobile Phone Hearing Aid(Android), drivers of various mobile financial peripherals(Android).

Open Source Projects and Works

Open Source Projects

• Filter: Filter is a plug-in crawler application in the form of DSL syntax inspired by the DSL syntax of Gradle. Users can write groovy scripts to fetch data from favorite websites and display it in the application. Filter provides several general layouts. The newest Filter was implemented with Kotlin.
• Boilerplate: As the name suggests, Boilerplate is a development template. It is some common things accumulated and summarized from daily development, which is convenient to quickly start the development of Android applications.Boilerplate-util, Boilerplate-ipc and Boilerplate-cordova are also commonly used development templates.
• Lab: This project is a front-end project developed in the process of angular learning, including some common components and features of angular developed by myself. A client based on electron is provided.

Works

• Miquaner: A Taoke app that supports Android and iOS.
• Jixiangjia Customization: A roller shutters custom APP, support Web, WeChat mini program, Alipay mini program.
• tidytech: A smart storage app based on flutter that supports Web, Android and iOS.
• petdoor: A web app based on flutter used for customizing petdoor which can import 3D model with three.js

Skills

The following are the skills that I have mastered and used

• Web Development: Java/Node/Golang
• Web Framework: Spring/NestJS/Gin
• Front-End Framework: Angular/Vue.js/React
• Front-End Toolkit: NPM/Less/Gulp
• Mobile Development: Kotlin/Swift/Dart/Flutter/Cordova/WeChat Official Account/WeChat mini program/Alipay mini program
• Database: MySQL/SQLite/Oracle/DB2
• Version Control and Deployment: Git/Travis
• Unit Test: JUnit
• Cloud and open platform: WeChat Official Accounts Platform/Alipay open platform/Tencent Cloud/Baidu Cloud/Azure/GCP

Thanks

Thank you for taking the time to read my resume and look forward to the opportunity to work with you.

联系方式

• Email：jasontsang.dev@gmail.com
• 微信：gnastnosaj
• QQ：2563745474

个人信息

• 曾健/男/1991
• 本科/中南大学
• 专业：软件工程
• 工作年限：11年
• 技术博客：https://jasontsang.dev
• GitHub：https://github.com/gnastnosaj

工作经历

Joyflow.Inc (2024年11月 ~ 至今)

GetMyHome

GetMyHome是一款使用AI技术帮助购房者经历更好的购房体验的产品，我主要负责移动端应用从零的开发、发布以及维护，同时也参与到后端开发。移动端使用Flutter、后端使用Golang，目前GetMyHome已经在App Store和Google Play上发布。

普华永道信息技术（上海）有限公司 (2022年4月 ~ 2024年11月)

Smart Rebuild

此项目采用微服务架构，使用Springboot和Angular框架，作为一个全栈开发，我主要负责User Story的工作量评估、功能实现以及单元测试。

FFG Rebuild

此项目采用微服务架构，使用Springboot和Angular框架，我为项目开发了一个移植工具，将原来的AngularJS代码转化为Angular代码，同时引入了Angular Library结合Git Submodule实现多个子应用间的代码共享，节省了大约20%的工作量。

天地自动化股份有限公司 （2019年4月 ~ 2022年3月）

胶带机控制移动端

我在此项目负责开发基于ModbusTCP协议的胶带机控制移动端程序、以及基于RTSP流的皮带监控视频的接入，该项目基于智慧矿山基础信息平台移动端开发。

智慧矿山基础信息平台移动端

我在此项目负责基于监控类软件框架、Boilerplate、Boilerplate-cordova，搭建智慧矿山基础信息平台移动端框架，负责开发维护基础模块，并提供其他子系统接入平台的统一方案。

产品授权系统

产品授权系统负责公司产品的防伪验证，主要模块包括提供给其他系统的sdk（采用golang编写，导出为c shared library）、负责与sdk交互以及与公司产品生命周期相关系统的数据同步（基于Nestjs）、用于查看和管理产品授权相关内容的管理系统（基于Angular）以及负责在特定网络环境协助sdk和服务器交互的javascript库（webpack）。

智慧矿山基础信息平台

我在此项目负责基于监控类软件框架搭建智慧矿山基础信息平台前端框架，负责开发维护基础模块，并提供其他子系统接入平台的统一方案。

报表组件

我在此项目负责整体系统设计、开发，采用Angular开发框架引入GraphQL作为报表数据源交互方式实现自定义报表单元格等常见功能，借鉴帆软报表、活字格等商业软件的交互设计，实现数据扩展、关联分组和表单设计等扩展功能。

软件许可授权功能组件

我在此项目负责系统设计和管理端的开发，包括离线许可授权、在线许可授权、许可授权管理等功能。提升了对项目的需求分析、设计以及系统架构的能力。

软件在线更新功能组件

我在此项目负责系统设计、客户端以及管理端开发，客户端部分使用Electron框架结合批处理脚本实现后台系统常驻、在线更新策略执行，更新预处理、后处理等通用在线更新功能。管理端基于Angular框架实现更新策略管理等功能，同时也能运行在客户端中进行本地的日志查看。项目采用了非平台原生架构，能在满足需求的同时保持较高的质量。

监控类软件框架

我在此项目负责基于Angular的前端框架和UI搭建，封装包括基于rxbus思想的事件总线库、基于lottie的动画组件库、基于less的动态主题渲染库以及一些常用的工具和组件。同时参考NG-ZORRO官网，搭建了一套业务组件库的开发框架，开发成员可以针对公司的业务更细化的进行业务组件的开发和重用，使用markdown进行组件文档编写并且动态生成组件库官网。此项目中我充分借鉴了已有的移动端开发经验，确保了开发效率和项目质量。

其他项目

其他开发的项目包括GitLab项目看板统计（Angular）、Nexus Repository Manager私有库列表（Groovy、Angular）、微服务管理平台（Angular）。

江苏国光信息产业股份有限公司 （2013年7月 ~ 2019年3月）

排队叫号机安卓控制盒服务

我在此项目负责叫号机安卓控制盒服务的开发，控制盒服务主要负责控制无线设备包括窗口屏、综合显示屏、呼叫器、无线音箱等设备的工作，同时对外统一提供排队叫号的接口。该项目需要解决各平台之间的通讯协议、编码等转换问题，无线设备的串口操作、本地语音的高效播放（基于android的audiotrack流播放）、主从控制盒切换以及实现业务逻辑的高并发和时序队列等性能和功能要求。该项目使用kotlin语言开发完成，性能接近基于windows系统的控制盒服务，在此之前公司还未有在安卓平台下的相关产品。

湖北银行移动营销二期改造

我在此项目负责安卓客户端主程序、部分业务子程序的改造，以及部分新增业务的开发。通过应用内动态hook技术，在尽可能减少源代码修改的情况下，完成多处功能的优化和完善。之前并未参与前期的项目开发，但是能快速掌握项目架构并以最小的侵入方式完成对应的修改。

辽宁农信移动营销

我在此项目负责安卓客户端主程序以及基于html5实现的业务系统的架构设计和编码(cordova+ember.js)，根据银行的业务特征开发了多个业务模板，方便维护人员根据需求基于业务模板进行配置来完成后续业务的二次开发。加深了我对hybrid应用架构开发的认识。

长春工商局互联网身份认证

我在此项目负责Android和iOS下的app开发(Android下采用最新的kotlin语言、iOS下采用最新的swift语言)以及后台微服务的开发(微服务采用的kotlin语言，使用类似springboot的超轻量框架blade)，此项目使我对kotlin和swift语言有了较深的认识，同时做到Android和iOS下app源代码之间的高度相似和高度可移植性(原生层面上的架构、语言共性等，未采用任何跨平台框架技术)。类似的情况，我个人还和朋友合作过一个外包的应用，觅券儿，也是由我负责Android和iOS下的app架构和主要编码，目前在各大应用市场和Apple Store均有下载。

安徽农信安卓平板招标测试

我在此项目负责安徽农信安卓平板招标测试配合，负责开发招标要求的系统接口。由于公司提供给的平板采购于第三方的原因，平板系统并不能按照银行要求进行接口定制，在此情况下，我想到通过对xposed的改造(一款需要root并替换系统部分核心程序来实现hook从而改变系统逻辑的应用)以及插件的编写完成了相应的接口开发，但测试应用对系统安全性又提出要求，要求设备不允许root，之后我又通过hook将root权限获取的接口封死，使测试应用和其他应用都无法获取到设备的root权限(只有提供接口的应用可以获取root权限)，并顺利通过测试。虽然后续招标因为种种原因未能落地，但这个项目加深了我对Android系统层面的认识，也体现了我的自学能力和钻研精神。

丹东银行智能柜台

我在此项目负责html5业务代码的编写，主要涉及的都是业务逻辑，其中关于现金业务的逻辑给我的映象最为深刻，存取款并不像字面那么简单，其中包含了大量和设备交互以及恢复异常的逻辑，加深了我对逻辑和流程的认识，同时也对JavaScript ES6语法有了一定的掌握。

四川农信集中授权二期

我在此项目负责四川农信集中授权客户端和后台管理系统的改造以及实施。这是我加入公司的第一个项目，对linux服务器部署实施有了较深的认识，整个四川省所有地市农信社的集中授权服务器最后都是由我定制的redhat系统安装包自动安装的(采用redhat的kickstart进行定制，一期的所有服务器都是前辈一个地市一个地市跑去部署，当然现在互联网公司可能会选择docker这样的方案)。

其他项目

其他开发的项目包括互联网可信身份认证(Android和iOS)、移动录音录像(Android)、通用蓝牙库(支持spp和ble)、手机助听器(Android)、以及各类移动金融外设驱动开发(Android)

开源项目和作品

开源项目

• Filter：灵感源自于gradle构建器的dsl语法，Filter是一款通过采用dsl语法的形式来实现插件化的爬虫类应用，用户可以自行编写groovy脚本来获取喜爱的网站数据并在应用中展示，Filter提供了几种通用的布局展示。
• Boilerplate：Boilerplate顾名思义就是开发模板，是日常开发中积累和总结出来的一些通用的东西，便于快速的开始进行安卓应用的开发。另外Boilerplate-util、Boilerplate-ipc、Boilerplate-cordova也是几个常用的开发模板。
• Lab：此项目是在Angular学习过程中开发的一个前端项目，包含了自己开发的一些Angular通用组件和特性，基于Electron封装客户端并提供下载。

作品

• 觅券儿：一款淘客类APP，支持Android和iOS
• 吉祥家私人定制：一款卷帘定制APP，支持Web、微信小程序、支付宝小程序
• tidytech: 一款基于Flutter制作的智能收纳APP，支持Web、Android、iOS
• petdoor: 一款基于Flutter制作的宠物门定制APP，使用three.js支持3D模型导入

技能清单

以下均为我熟练使用的技能

• Web开发：Java/Node/Golang
• Web框架：Spring/NestJS/Gin
• 前端框架：Angular/Vue.js/React
• 前端工具：NPM/Less/Gulp
• 移动开发：Kotlin/Swift/Dart/Flutter/Cordova/微信公众号/微信小程序/支付宝小程序
• 数据库相关：MySQL/SQLite/Oracle/DB2
• 版本管理、文档和自动化部署工具：Git/Travis
• 单元测试：JUnit
• 云和开放平台：微信公众平台/支付宝开放平台/腾讯云/百度云/Azure/GCP

致谢

感谢您花时间阅读我的简历，期待能有机会和您共事。

笔者在参与Angular项目开发过程中常遇到需要解决组件之间、父子页之间的通信问题，为了降低通信复杂度，以及联想到此前参与过的Android项目开发经验，考虑引进事件总线的解决方案，而由于Angular自带RxJS，故开发一个基于RxJS版本的RxBus成为首选。

RxBus

RxBus的核心思想是基于Rx实现的事件发布与订阅，网上有许多相关资料，笔者这里就不做详细介绍，下面是笔者根据RxBus核心思想用ts语言编写的RxBus源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

import { Subject, Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class RxBus {
    bus: Subject<any> = new Subject();
    subjectMapper: {
        [propName: string]: Array<Subject<any>>;
    } = {};

    toObserverable(): Observable<any> {
        return this.bus;
    }

    send(object: any) {
        this.bus.next(object);
    }

    register<T>(tag: any): Observable<T> {
        const subject = new Subject<T>();
        let subjectList = this.subjectMapper[tag];
        if (subjectList == null) {
            subjectList = new Array<Subject<T>>();
            this.subjectMapper[tag] = subjectList;
        }
        subjectList.push(subject);
        return subject;
    }

    unregister(tag: any, observable: Observable<any>) {
        const subjectList = this.subjectMapper[tag];
        if (subjectList != null) {
            this.subjectMapper[tag] = subjectList.filter(subject => subject !== observable);

            if (this.subjectMapper[tag].length === 0) {
                delete this.subjectMapper[tag];
            }
        }
    }

    post<T>(tag: any, object: T) {
        const subjectList = this.subjectMapper[tag];
        if (subjectList != null) {
            subjectList.forEach(subject => subject.next(object));
        }
    }
}

如何使用

笔者以iframe子页调用父页Angular生命周期中的函数为例加以说明

1. 在Angular应用启动时，将RxBus事件总线加入到window全局变量中，便于iframe子页以top.window.rxbus的形式调用

   1 2 3 4 5 6 7 8 9

   //app.component.ts ... //通过构造函数注入RxBus事件总线 constructor(public rxbus: RxBus, private ngZone: NgZone, ...) { ... (window as any).rxbus = this.rxbus; ... } ...

2. 在RxBus中注册事件并订阅

   1 2 3 4 5 6 7 8

   ... this.rxbus.register<any>('graph').subscribe(data => { //需要通过NgZone将调用作用域加入到Angular生命周期中 this.ngZone.run(() => { ... }); }); ...

3. 在iframe子页中发布事件

   1 2 3 4 5 6 7 8

   ... top.window.rxbus.post('graph', { tag: '', payload: { } }); ...

   通过事件传递的数据结构开发者可以根据实际情况自行约定

Angular常见的主题方案是将组件设置NgClass属性并动态绑定主题class，通过编写对应class的样式以及切换class来达到切换主题的目的。为了简化实践，我们可以将此过程封装成一个Directive。

参考代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import { BehaviorSubject } from 'rxjs';

//主题Subject
const theme: BehaviorSubject<string> = new BehaviorSubject(null);

//所有主题数组
const themes: Array<string> = [];

//订阅主题Subject，将主题class应用到body
theme.subscribe(c => {
    themes.forEach(t => {
        if (t === c) {
            document.body.classList.add(t);
        } else {
            document.body.classList.remove(t);
        }
    });
});

//注册主题
function registerThemes(...themesToRegister: Array<string>) {
    themes.push(...themesToRegister);
    if (theme.value == null) {
        theme.next(themesToRegister[0]);
    }
}

import { Directive, ElementRef } from '@angular/core';

//主题Directive，将主题class应用到对应元素
@Directive({
    selector: '[ngCariTheme]'
})
export class ThemeDirective {
    constructor(el: ElementRef) {
        theme.subscribe(c => {
            themes.forEach(t => {
                if (t === c) {
                    el.nativeElement.classList.add(t);
                } else {
                    el.nativeElement.classList.remove(t);
                }
            });
        });
    }
}

使用方式

1. 应用初始化时调用registerThemes注册所有主题
2. 在对应的组件上添加ngCariTheme属性来绑定主题class
3. 编写对应class样式
4. 最后通过theme.next(‘theme’)切换主题。

NG-ZORRO主题切换

基于NgClass的主题切换虽然能实现我们想要的效果，但是想要修改整体效果却需要耗费很大的工作量，考虑到目前项目中使用了NG-ZORRO组件与样式库，可以采用先切换NG-ZORRO主题再调整部分主题细节的方案。

实现整体切换NG-ZORRO主题有两种方案，第一种是预先将多种主题less编译成css并以静态资源的方式来进行打包处理，在应用加载时动态加载对应主题的css，第二种方案是将多种主题的less文件以静态资源的方式来进行打包处理，在应用加载时动态编译less并应用到全局样式。考虑到我们目前的项目最终以C的形态呈现，不存在网络延迟导致静态资源加载速度过慢的问题，所以采用第二种方案，以达到简便灵活的目的。

参考代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//主题节点元素
style = null;
//缓存主题css样式
styles = {};
...

//订阅主题切换
theme.subscribe(t => {
  if (t != null) {
    //创建主题节点元素
    if (this.style == null) {
      this.style = document.createElement('style');
      this.style.setAttribute('type', 'text/css');
      document.head.appendChild(this.style);
    }
    if (this.styles[t]) {
      //应用缓存主题css样式
      this.style.innerHTML = this.styles[t];
    } else {
      //动态编译主题less并缓存
      less.render(`@import "/theme/${t}.less";`, {
        javascriptEnabled: true
      }).then(output => {
        this.style.innerHTML = output.css;
        this.styles[t] = output.css;
      });
    }
  }
});

//注册主题
registerThemes('light', 'dark');

GitLab内置了持续集成能力，它可以将保存在共享仓库中的代码进行自动化编译、测试，并配合SonarQube进行自动化代码评审和代码质量管理。本文主要重点讲述GitLab与SonarQube的协作部署，并以Angular项目为例演示持续集成实践。

部署

为了简化部署流程，这里以docker环境作为基础。

• GitLab

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  //部署 docker run --detach \ --hostname gitlab.jasontsang.dev \ --publish 443:443 --publish 80:80 --publish 22:22 \ --name gitlab \ --restart always \ --volume /srv/gitlab/config:/etc/gitlab \ --volume /srv/gitlab/logs:/var/log/gitlab \ --volume /srv/gitlab/data:/var/opt/gitlab \ gitlab/gitlab-ce:latest //进入容器 docker exec -it gitlab /bin/bash //查看容器ip，用于GitLab Runner注册 cat /etc/hosts

• GitLab Runner

  1. 部署对应的docker容器

     1 2 3 4 5 6 7 8 9 10 11 12 13 14

     //部署 docker run -d --name gitlab-runner --restart always \ -v /srv/gitlab-runner/config:/etc/gitlab-runner \ -v /var/run/docker.sock:/var/run/docker.sock \ gitlab/gitlab-runner:latest //进入容器 docker exec -it gitlab-runner /bin/bash //安装node环境和相关工具 //angular npm install -g @angular/cli npm install -g protractor //sonar-scanner npm install -g sonar-scanner

  2. 进入http://127.0.0.1/username/ng-cari/settings/ci_cd 查看GitLab Runner的注册令牌Registration Token

  3. 注册GitLab Runner

     1 2 3 4 5 6 7

     docker run --rm -t -i -v /srv/gitlab-runner/config:/etc/gitlab-runner gitlab/gitlab-runner register -n \ --url `GitLab对应的url` \ --registration-token `GitLab对应的GitLab Runner Registration Token` \ --executor shell \ --description "Docker Runner" \ --docker-image "docker:stable" \ --docker-privileged

• SonarQube

  本文写作时SonarQube的版本已经发布到7.7，但用于实现与GitLab进行交互的SonarQube插件目前仅支持7.5，所以这里以7.5做为演示。

  1. 部署对应的docker容器

     1 2 3 4 5

     docker run --detach \ --publish 9000:9000 \ --name sonarqube \ --restart always \ sonarqube:7.5-community

  2. 进入http://127.0.0.1:9000/admin/marketplace 并安装GitLab插件

  3. 进入http://127.0.0.1/profile/personal_access_tokens 生成GitLab的Access Token访问令牌

  4. 进入http://127.0.0.1:9000/admin/settings?category=gitlab 配置GitLab插件信息

     1 2	GitLab url: http://127.0.0.1 GitLab User Token: `步骤2中生成的GitLab Access Token`

  5. 进入http://127.0.0.1:9000/admin/users 在Administrator用户下建立SonarQube的Token访问令牌。

持续集成

1. 编写GitLab持续集成脚本，并上传项目代码。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112

   stages: - prepare - lint - build - test - analyse - quality #缓存node_modules cache: paths: - node_modules/ #安装依赖 prepare:ng: stage: prepare script: - npm install artifacts: paths: - node_modules/ #feature分支代码检查 lint:ng: stage: lint only: - /^feature\/*/ script: #lint代码检查如果失败则直接结束，并拒绝merge request - ng lint #将feature分支代码merge到master分支，并进行SonarQube代码检查 - git config user.email "jasontsang.dev@gmail.com" - git config user.name "Jason Tsang" - git checkout origin/master - git merge $CI_COMMIT_SHA --no-commit --no-ff - > sonar-scanner -Dsonar.host.url=http://127.0.0.1:9000 #SonarQube Token -Dsonar.login=a0d764c3a0b5856450c5a40d74d4c98e9fe57cd8 -Dsonar.analysis.mode=preview -Dsonar.sources=src,e2e/src,projects/ng-cari/lottie/src -Dsonar.gitlab.commit_sha=$CI_COMMIT_SHA -Dsonar.gitlab.ref_name=$CI_COMMIT_REF_NAME -Dsonar.gitlab.project_id=$CI_PROJECT_ID -Dsonar.gitlab.json_mode=CODECLIMATE -Dsonar.gitlab.failure_notification_mode=commit-status artifacts: expire_in: 1 day paths: - codeclimate.json #项目构建 build:ng: stage: build script: - ng build @ng-cari/lottie - ng build artifacts: paths: - dist/ #测试 test:ng: stage: test script: - ng test --no-watch --no-progress --browsers=ChromeHeadlessCI --code-coverage dependencies: - build:ng artifacts: paths: - coverage/ #master分支代码检查需要上传测试覆盖，所以在测试之后执行 analyse:master: stage: analyse only: - master script: #使用lint生成外部报告并导入SonarQube - ng lint ng-cari --format json --force > report.json - ng lint ng-cari-e2e --format json --force > e2e/report.json - ng lint @ng-cari/lottie --format json --force > projects/ng-cari/lottie/report.json - > sonar-scanner -Dsonar.host.url=http://127.0.0.1:9000 -Dsonar.login=a0d764c3a0b5856450c5a40d74d4c98e9fe57cd8 -Dsonar.sources=src,e2e/src,projects/ng-cari/lottie/src -Dsonar.typescript.tslint.reportPaths=report.json,e2e/report.json,projects/ng-cari/lottie/report.json -Dsonar.typescript.lcov.reportPaths=coverage/ng-cari/lcov.info,coverage/ng-cari/lottie/lcov.info -Dsonar.gitlab.commit_sha=$CI_COMMIT_SHA -Dsonar.gitlab.ref_name=$CI_COMMIT_REF_NAME -Dsonar.gitlab.project_id=$CI_PROJECT_ID -Dsonar.gitlab.json_mode=CODECLIMATE -Dsonar.gitlab.failure_notification_mode=commit-status dependencies: - test:ng artifacts: expire_in: 1 day paths: - codeclimate.json #上传codeclimate codequality: stage: quality variables: GIT_STRATEGY: none script: - echo ok artifacts: paths: - codeclimate.json

2. 查看当前commit的global comment，在最底部会有对应生成的代码质量报告。

代码评审和代码质量管理

1. 新建feature分支，并添加code smell（部分糟糕的代码）。

2. 提交代码之后，根据脚本设定在持续集成中会首先进行ng lint，如果此时未通过则pipeline失败，开发者应该检查原因并修复代码问题。如果pipeline成功，则可以进行merge request。

3. 项目维护人员在收到merge request之后，可以查看对应commit的pipeline运行情况以及global comment下的SonarQube代码质量报告，并根据情况选择是否同意merge request。

4. merge request被通过之后，会进行新一轮的持续集成，同样可以在对应commit的global comment下看到本次的SonarQube代码检查报告。

5. 项目维护人员可以在SonarQube控制台下查看项目对应的完整质量报告信息，以及定义对应的Quality Gate，来评估项目是否可以发布。

按照官方的说法，Angular Library是一个不同于app的Angular工程，它需要在一个app中被引入使用。开发者可以以Angular Libraries的形式来为特定的场景提供通用的解决方案，从而可以在不同的app中得到重用。

Angular Libraries构建

1. Angular Libraries不能单独存在，首先需要创建一个app工程

   1	ng new ng-cari -p ng-cari

   这里的”-p”是指组件的前缀

2. 进入新建的app工程根目录，并创建一个Angular Library工程

   1	ng g library @ng-cari/lottie -p ng-cari

   这里的”@ng-cari/“是指npm包作用域，Angular CLI会自动修改angular.json，新增名为”@ng-cari/lottie”的工程，并生成对应的Angular Library工程目录，工程目录位于projects/ng-cari/lottie

3. 修改Angular Library代码，并添加依赖项以及其他对应信息

   1 2 3 4 5 6 7 8 9 10 11 12

   { "name": "@ng-cari/lottie", "version": "1.0.0", "author": "Jason Tsang", "peerDependencies": { "@angular/common": "^7.2.0", "@angular/core": "^7.2.0" }, "dependencies": { "lottie-web": "^5.5.2" } }

4. 在app工程根目录下添加Angular Library所需的依赖项

   1	npm install -S lottie-web

5. 在app工程根目录下构建Angular Library工程

   1	ng build @ng-cari/lottie

6. 修改app工程代码，引入Angular Library工程，并使用对应的组件

   1 2 3 4

   import { LottieModule } from '@ng-cari/lottie'; <ng-cari-lottie [ngStyle]="{'width.px': '256', 'height.px': '256', 'background': 'black'}" path="assets/lottie/progress.json" progress="20"></ng-cari-lottie>

7. 运行app工程查看实际效果

   1

   ng serve

npm packages发布

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

//进入构建后的Angular Library工程目录，示例位于dist/ng-cari/lottie
cd dist/ng-cari/lottie

//如果使用其他源推荐使用nrm源管理工具
npm install -g nrm

//添加nexus源
//组
nrm add <group> http://127.0.0.1:8081/repository/npm-group/
//私有
nrm add <hosted> http://127.0.0.1:8081/repository/npm-hosted/
//查看源
nrm ls
//使用私有
nrm use <hosted>

//登录npm账号
npm login

//发布，带包作用域的需要有创建私有包的权限或添加公开权限参数
npm publish
//由于示例带@ng-cari包作用域，所以这里使用公开权限参数
npm publish --access public

//使用组
nrm use <group>

//在其他工程中使用发布后的包
npm install -S @ng-cari/lottie

按照官方的说法，Electron是由Github开发，通过HTML、CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。因此可以基于Electron来创建原生的桌面应用，它可以具备操作窗口、菜单、通知、文件等原生能力。这也是本次学习使用Electron的主要目的。

快速入门

从Github上拉取Electron API 演示应用程序(https://github.com/electron/electron-api-demos) ，由于演示程序也是基于Electron构建，所以可以通过分析其源码来熟悉一个常规的Electron程序的整体结构以及掌握包括编译、打包、运行、生成安装包等构建过程。其次，演示程序提供了调用API的示例代码，通过分析示例代码、查看实时运行效果可以快速掌握API的使用。

项目构建

使用官方推荐的electron forge来构建项目

1
2
3

$ npm install -g electron-forge
$ electron-forge init electron-demo
$ electron-forge start

1
2
3
4
5
6
7
8
9
10

$ electron-forge make
√ Checking your system
√ Resolving Forge Config
We need to package your application before we can make it
√ Preparing to Package Application for arch: x64
√ Compiling Application
√ Preparing native dependencies
√ Packaging Application
Making for the following targets:
√ Making for target: squirrel - On platform: win32 - For arch: x64

Electron API

常用的Electron API在Electron API 演示应用程序中均有示例代码，且可以实时查看运行效果，这里就不再赘述。以下主要记录一些API使用过程中遇到的问题以及注意事项。

• 通知API不生效
  在Github上的issue列表发现已有人提过此问题大致意思是AppUserModelId在不主动设置的情况下会被设置为某个默认值，导致通知的AppUserModelId和进程的AppUserModelId不匹配。解决方案如下：

  1 2 3 4

  //1.将运行时环境添加到开始菜单（windows10要求，否则无法接收到通知。） //node_modules\electron\dist\electron.exe //2.主动设置AppUserModelId app.setAppUserModelId(process.execPath)

• 进程间通讯API

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  //主进程向渲染进程发送消息 mainWindow.webContents.send('<event>', <request>); //渲染进程向主进程发送消息 ipcRenderer.send('<event>', <request>); //主进程接收消息并返回 ipcMain.on('<event>', (event, <request>) => { event.sender.send('<event>', <response>); }); //渲染进程接收消息并返回 ipcRenderer.on('<event>', (event, <request>) => { event.sender.send('<event>', <response>); }); //渲染进程间通讯可以通过WindowID来指定发送和接收方 const firstWindowID = BrowserWindow.getFocusedWindow().id; secondWindow.webContents.send('<event>', <request>, firstWindowID); ipcRenderer.on('<event>', (event, <request>, firstWindowID) => { const firstWindow = BrowserWindow.fromId(firstWindowID); firstWindow.webContents.send('<event>', <response>); });