diff --git a/README.md b/README.md
index 669a385e..32542e4c 100644
--- a/README.md
+++ b/README.md
@@ -112,6 +112,7 @@ Get to know the preferred protocol in IoT from beginner to master.
## [MQTT Programming](https://www.emqx.com/en/blog/category/mqtt-programming)
Best practice of MQTT in various clients.
+- [How to Use MQTT in the Angular Projects](https://www.emqx.com/en/blog/how-to-use-mqtt-in-angular) ([Edit](https://github.com/emqx/blog/blob/main/en/202501/how-to-use-mqtt-in-angular.md))
- [How to Integrate MQTT in Your Electron Project](https://www.emqx.com/en/blog/how-to-use-mqtt-in-electron) ([Edit](https://github.com/emqx/blog/blob/main/en/202411/how-to-use-mqtt-in-electron.md))
- [How to Use MQTT in Vue Projects](https://www.emqx.com/en/blog/how-to-use-mqtt-in-vue) ([Edit](https://github.com/emqx/blog/blob/main/en/202411/how-to-use-mqtt-in-vue.md))
- [How to Use MQTT with PHP: A Guide for Real-Time Messaging](https://www.emqx.com/en/blog/how-to-use-mqtt-in-php) ([Edit](https://github.com/emqx/blog/blob/main/en/202411/how-to-use-mqtt-in-php.md))
@@ -137,7 +138,6 @@ Best practice of MQTT in various clients.
- [MQTT with Node.js: A Beginner's Guide with Examples & FAQs](https://www.emqx.com/en/blog/how-to-use-mqtt-in-nodejs) ([Edit](https://github.com/emqx/blog/blob/main/en/202305/how-to-use-mqtt-in-nodejs.md))
- [How to Use MQTT in Dart](https://www.emqx.com/en/blog/how-to-use-mqtt-in-dart) ([Edit](https://github.com/emqx/blog/blob/main/en/202211/how-to-use-mqtt-in-dart.md))
- [How to Use MQTT in The Django Project](https://www.emqx.com/en/blog/how-to-use-mqtt-in-django) ([Edit](https://github.com/emqx/blog/blob/main/en/202210/how-to-use-mqtt-in-django.md))
-- [How to Use MQTT in The Angular Project](https://www.emqx.com/en/blog/how-to-use-mqtt-in-angular) ([Edit](https://github.com/emqx/blog/blob/main/en/202210/how-to-use-mqtt-in-angular.md))
- [How to Use MQTT in The React Native Project](https://www.emqx.com/en/blog/how-to-use-mqtt-in-react-native) ([Edit](https://github.com/emqx/blog/blob/main/en/202206/how-to-use-mqtt-in-react-native.md))
- [How to use MQTT in Flask](https://www.emqx.com/en/blog/how-to-use-mqtt-in-flask) ([Edit](https://github.com/emqx/blog/blob/main/en/202205/how-to-use-mqtt-in-flask.md))
- [Python MQTT Asynchronous Framework - HBMQTT](https://www.emqx.com/en/blog/python-async-mqtt-client-hbmqtt) ([Edit](https://github.com/emqx/blog/blob/main/en/202104/python-async-mqtt-client-hbmqtt.md))
@@ -165,6 +165,7 @@ Best practice of MQTT in various clients.
## [MQTT Integration (Eco & Integration)](https://www.emqx.com/en/blog/category/eco-and-integration)
Explore more with & via EMQ.
+- [Integrating MQTT with ThingsBoard for IoT Data Visualization](https://www.emqx.com/en/blog/how-to-use-thingsboard-to-access-mqtt-data) ([Edit](https://github.com/emqx/blog/blob/main/en/202501/how-to-use-thingsboard-to-access-mqtt-data.md))
- [Building an End-to-End IoT Data Pipeline with Node-RED, EMQX, QuestDB, DuckDB, Grafana and PowerBI](https://www.emqx.com/en/blog/building-an-end-to-end-iot-data-pipeline) ([Edit](https://github.com/emqx/blog/blob/main/en/202411/building-an-end-to-end-iot-data-pipeline.md))
- [Real-Time Monitoring and Predictive Maintenance with EMQX, RisingWave, and Grafana](https://www.emqx.com/en/blog/real-time-monitoring-with-emqx-risingwave-and-grafana) ([Edit](https://github.com/emqx/blog/blob/main/en/202411/real-time-monitoring-with-emqx-risingwave-and-grafana.md))
- [Integrating STOMP with EMQX: A Comprehensive Guide](https://www.emqx.com/en/blog/integrating-stomp-with-emqx) ([Edit](https://github.com/emqx/blog/blob/main/en/202410/integrating-stomp-with-emqx.md))
@@ -196,7 +197,6 @@ Explore more with & via EMQ.
- [Natural Interactions in IoT: Combining MQTT and ChatGPT](https://www.emqx.com/en/blog/natural-interactions-in-iot-combining-mqtt-and-chatgpt) ([Edit](https://github.com/emqx/blog/blob/main/en/202305/natural-interactions-in-iot-combining-mqtt-and-chatgpt.md))
- [Monitoring MQTT broker with Prometheus and Grafana](https://www.emqx.com/en/blog/emqx-prometheus-grafana) ([Edit](https://github.com/emqx/blog/blob/main/en/202212/emqx-prometheus-grafana.md))
- [Getting Data from EMQX Cloud with InfluxDB Native Collector](https://www.emqx.com/en/blog/getting-data-from-emqx-cloud-with-influxdb-native-collector) ([Edit](https://github.com/emqx/blog/blob/main/en/202208/getting-data-from-emqx-cloud-with-influxdb-native-collector.md))
-- [How to access MQTT data with ThingsBoard](https://www.emqx.com/en/blog/how-to-use-thingsboard-to-access-mqtt-data) ([Edit](https://github.com/emqx/blog/blob/main/en/202207/how-to-use-thingsboard-to-access-mqtt-data.md))
- [EMQX + ClickHouse Implements IoT Data Collection and Analysis](https://www.emqx.com/en/blog/emqx-and-clickhouse-for-iot-data-access-and-analysis) ([Edit](https://github.com/emqx/blog/blob/main/en/202011/emqx-and-clickhouse-for-iot-data-access-and-analysis.md))
- [Build EMQX + InfluxDB + Grafana IoT data visualization solution in one hour](https://www.emqx.com/en/blog/build-emqx-influxdb-grafana-iot-data-visualization-solution-in-one-hour) ([Edit](https://github.com/emqx/blog/blob/main/en/202001/build-emqx-influxdb-grafana-iot-data-visualization-solution-in-one-hour.md))
- [Upload Sensor Data to MQTT Cloud Service via NodeMCU (ESP8266)](https://www.emqx.com/en/blog/upload-sensor-data-to-mqtt-cloud-service-via-nodemcu-esp8266) ([Edit](https://github.com/emqx/blog/blob/main/en/201912/upload-sensor-data-to-mqtt-cloud-service-via-nodemcu-esp8266.md))
diff --git a/en/202207/how-to-use-thingsboard-to-access-mqtt-data.md b/en/202207/how-to-use-thingsboard-to-access-mqtt-data.md
deleted file mode 100644
index cb497160..00000000
--- a/en/202207/how-to-use-thingsboard-to-access-mqtt-data.md
+++ /dev/null
@@ -1,173 +0,0 @@
-[ThingsBoard](https://thingsboard.io/) is an open-source IoT platform for data collection, processing, visualization and device management. It supports device connectivity via protocols, such as [MQTT](https://mqtt.org/), [CoAP](https://www.emqx.com/en/blog/connecting-coap-devices-to-emqx-cloud) and HTTP, and supports both cloud and private deployments. Deliver, monitor and control your IoT entities in a secure way using rich server-side APIs that define the relationships between your devices, assets, customers, or any other entities. Collect and store telemetry data in a scalable and fault-tolerant manner, visualize your data with built-in or custom widgets and flexible dashboards, and share the Dashboard interface with your customers.
-
-In this article, we will use ThingsBoard Cloud in conjunction with EMQ’s fully managed [MQTT cloud service - EMQX Cloud](https://www.emqx.com/en/cloud), to describe how to integrate a third-party MQTT broker into ThingsBoard and custom configure the Dashboard UI to access MQTT data.
-
-## Preparation
-
-Since we are using ThingsBoard Cloud, we do not need to download and install it. We just need to register and login at [https://thingsboard.cloud/signup](https://thingsboard.cloud/signup) to get the service. In addition to the ThingsBoard Cloud service, you can also choose to [download and install](https://thingsboard.io/docs/user-guide/install/installation-options/) a private deployment.
-
-> Note: Only the Professional Edition has [platform integration](https://thingsboard.io/docs/user-guide/integrations/). You need to use ThingsBoard Cloud or download and deploy the Professional Edition.
-
-We will use EMQX Cloud to create a third-party MQTT broker. [Sign up for the EMQX Cloud](https://accounts.emqx.com/signup?continue=https%3A%2F%2Fcloud-intl.emqx.com%2Fconsole%2F) console and create a new deployment. As a new user, you will have a free 14-day trial for both the Standard and Professional plans.
-
-EMQX Cloud Professional edition provides VPC peer-to-peer connectivity and a REST API, and has powerful and flexible data integration capabilities, making it easy for users to interface with their existing cloud service resources. Providing a one-stop operations and monitoring service saves a lot of time and labor costs, allowing businesses to focus on delivering more business value.
-
-## Integration
-
-### Using EMQX Cloud
-
-1. Get the connection address and port. Wait for the instance status to change to Running on the deployment [Overview] page and find the connection address and connection port corresponding to the MQTT protocol. These are needed later when adding integrations in ThingsBoard.
-
- 
-
-2. Add authentication information. Go to [Authentication and ACL] -> [Authentication] to create a username and password that ThingsBoard can use to authenticate with the MQTT broker.
-
- 
-
-### Configure ThingsBoard
-
-1. Add a new `Uplink` type data converter in [Data converters]. The role of this uplink data converter is to parse the payload of incoming messages and convert these to the format used by ThingsBoard.
-
- 
-
-
Add Data Converter
-
- 1）Enter a name (we’re using the name “MQTT-Uplink” in this example), select `Uplink` as the type, turn on Debug mode, and copy and paste the following parsing script into the parsing method.
-
- ```
- // Decode an uplink message from a buffer
- // payload - array of bytes
- // metadata - key/value object
-
- // decode payload to json
- var payloadJson = decodeToJson(payload);
- var result = {
- deviceName: payloadJson.deviceName,
- attributes: {
- model: 'Model A',
- serialNumber: 'SN111',
- integrationName: metadata['integrationName']
- },
- telemetry: {
- temperature: payloadJson.temperature,
- humidity: payloadJson.humidity,
- }
- };
-
- // Helper functions
- function decodeToString(payload) {
- return String.fromCharCode.apply(String, payload);
- }
- function decodeToJson(payload) {
- // covert payload to string.
- var str = decodeToString(payload);
-
- // parse string to JSON
- var data = JSON.parse(str);
- return data;
- }
-
- return result;
- ```
-
- 2）Click the [Test decoder function] button to enter a test page and test the parsing script you just created. Enter some payload content in JSON format for the test, and the following test output data will be displayed: input device name, temperature and humidity data. Then, click the Save button to go back to the configuration page.
-
- 
-
- 3）Finally, click the Add button in the bottom right corner of the pop-up box shown in the screenshots “Add Data Converter” above. And then an uplink data converter was successfully added.
-
-2. Go to [Integrations] to add the EMQX Cloud deployment integration.
-
- a. Click Add Integration [+], enter a name (“Integration with EMQX Cloud” in this example), set the Type to “MQTT”, and select the uplink data converter `MQTT-Uplink` that was added in step 1 above. Then, copy and paste the connection address and port number of the MQTT broker from the EMQX Cloud Deployment Overview page.
-
- 
-
- b. Scroll down to add authentication information. Since authentication is enabled by default in all EMQX Cloud deployments, select the Basic credential type and fill in the username and password that were added in the EMQX Cloud Authentication page. Click on Check Connection, and a pop-up message will appear in the bottom right corner, notifying you that the connection has been successfully established. This indicates that the integration with the EMQX Cloud deployment was successful. Finally, enter a filter topic `/test/integration/emqxcloud` (we need to use this topic to post a message in the subsequent simulation test), and click the Add button to successfully add the integration with the EMQX Cloud deployment.
-
- 
-
-## Integration Test
-
-After completing the above integration configuration, use the[MQTT 5.0 client tool](https://mqttx.app/), MQTTX, to simulate a device, in order to test and verify the effectiveness of the functionality.
-
-1. Use MQTTX to connect to the EMQX Cloud deployment.
-
- 
-
-2. After the connection is successfully established, simulate a device by sending temperature and humidity data to the filter topic /test/integration/emqxcloud, which was configured during the integration above.
-
- ```
- {
- "deviceName": "Device Test",
- "temperature": 28,
- "humidity": 70,
- }
- ```
-
- 
-
-3. In Thingsboard, go to the [All] menu under [Device groups] to view the device name, and temperature and humidity data that were just simulated. This means that the EMQX Cloud deployment has been successfully integrated.
-
- 
-
-## Customizing Dashboard to access the MQTT data
-
-1. Click on the [Dashboard groups] menu, select [All] and click [+] to Add a new dashboard. Give it a name and click Add.
-
- 
-
-2. Open the Dashboard and click the orange edit icon in the bottom right corner. Then, follow the instructions in the figure to add an alias (define the data that will be used for the entity). Select “Single Entity” for Filter Type, “Device” for Type and select the Device Test device simulated by MQTTX above. After adding and saving all the configuration information, click the Apply icon in the bottom right corner.
-
- 
-
-3. Add a time series widget.
-
- a. Similar to the previous page, click the orange edit icon in the bottom right corner to enter edit mode, and click Add widget.
-
- 
-
- b. Enter Cards to search for the Timeseries table and click Configure.
-
- 
-
- c. Configure the selected table. Choose the alias that was set above for the entity alias, add the key values of the table, and finally, click the Add button.
-
- 
-
- d. Drag and drop to resize the table that was just added, and click the orange checkmark Apply button.
-
- 
-
- e. Go back to MQTTX, change the temperature value to 25 and humidity value to 80, publish a message again, and the corresponding data will be displayed in the table that was just configured.
-
- 
-
-4. Similar to step 3 above, click Add a widget, search for charts, select Timeseries Line Chart, configure this, click Apply, and change the live time range to the last 5 hours. Using MQTTX, send another set of data, and the corresponding data will be displayed in both components.
-
- 
-
-## Summary
-
-At this point, we have finished integrating the EMQX Cloud deployment in ThingsBoard Cloud, verified the integration functionality using MQTTX tests, and finally configured a simple Dashboard to display the MQTT data.
-
-In real projects, more complex Dashboard configurations can be performed after learning more about ThingsBoard. This will allow you to monitor device-related data in real-time detail visually and set alert thresholds to help you resolve issues in a timely manner.
-
-Next, you can check out [The Easy-to-understand Guide to MQTT Protocol](https://www.emqx.com/en/mqtt-guide) series of articles provided by EMQ to learn about MQTT protocol features, explore more advanced applications of MQTT, and get started with MQTT application and service development.
-
-
-
-
- Try EMQX Cloud for Free
-
No credit card required
-
- Get Started →
-
-
-
-
->Related documentations:
->
->1. ThingsBoard Official Quick Start Help Documentation：[https://thingsboard.io/docs/getting-started-guides/helloworld-pe/](https://thingsboard.io/docs/getting-started-guides/helloworld-pe/)
->2. Getting Started with EMQX Cloud:[https://docs.emqx.com/en/cloud/latest/quick_start/introduction.html#register-guide](https://docs.emqx.com/en/cloud/latest/quick_start/introduction.html#register-guide)
->3. ThingsBoard Uplink Data Convert Instructions:[https://thingsboard.io/docs/paas/user-guide/integrations/#uplink-data-converter](https://thingsboard.io/docs/paas/user-guide/integrations/#uplink-data-converter)
->4. Using ThingsBoard Alerts：[https://thingsboard.io/docs/pe/user-guide/alarms/](https://thingsboard.io/docs/pe/user-guide/alarms/)
diff --git a/en/202210/how-to-use-mqtt-in-angular.md b/en/202210/how-to-use-mqtt-in-angular.md
deleted file mode 100644
index 9e44bf7d..00000000
--- a/en/202210/how-to-use-mqtt-in-angular.md
+++ /dev/null
@@ -1,230 +0,0 @@
-[Angular](https://angular.io/) is a development platform built on top of TypeScript. It consists of a component-based framework for building scalable Web applications; a set of perfectly integrated libraries covering routing, form management, client-server communication and other functions; and a set of development tools to help users develop, build, test, and update codes.
-
-**MQTT is a lightweight IoT message transfer protocol** based on publish/subscribe mode, providing one-to-many message distribution and application decoupling with small transmission consumption, which can minimize network traffic. At the same time, it can meet various delivery requirements thanks to its three QoS (Quality of Service) levels for messages.
-
-This article will introduce how to use [MQTT protocol](https://www.emqx.com/en/blog/the-easiest-guide-to-getting-started-with-mqtt) in Angular projects to connect, subscribe, send/receive messages, unsubscribe and perform other functions between clients and [MQTT Broker](https://www.emqx.com/en/blog/the-ultimate-guide-to-mqtt-broker-comparison).
-
-## Project Initialization
-
-### Create a new project
-
-The reference is as follows: [Create an Angular project with the Angular CLI](https://angular.io/guide/setup-local#install-the-angular-cli)
-
-Example:
-
-```
-ng new my-app
-```
-
-### Installation of MQTT client library
-
-The library used in this case is [ngx-mqtt](https://sclausen.github.io/ngx-mqtt/), which isn’t just a wrapper around MQTT.js for angular >= 2. It uses observables and takes care of subscription handling and message routing. [ngx-mqtt](https://sclausen.github.io/ngx-mqtt/) is well suited for applications with many components and many subscribers.
-
-To install [ngx-mqtt](https://sclausen.github.io/ngx-mqtt/) via the command line, you can use the npm or yarn command (either one)
-
-```
-npm install ngx-mqtt --save
-yarn add ngx-mqtt
-```
-
-## Use of MQTT
-
-### Connecting to MQTT Broker
-
-We use the [free public MQTT Broker](https://www.emqx.com/en/mqtt/public-mqtt5-broker) provided by EMQX in this article, which is built on top of the [MQTT cloud service - EMQX Cloud](https://www.emqx.com/en/cloud). EMQX is a large-scale distributed IoT MQTT message broker that can efficiently and reliably connect massive IoT devices, process and distribute messages and event flow data in real-time, and help customers build business-critical IoT platforms and applications.
-
-
-
-
-
-
-
- A Practical Guide to MQTT Broker Selection
-
-
- Download this practical guide and learn what to consider when choosing an MQTT broker.
-
-
-
-The server access information is as follows:
-
-- Broker: `broker.emqx.io`
-- TCP Port: **1883**
-- WebSocket Port: **8083**
-
-Key codes for connection:
-
-```
-import {
- IMqttMessage,
- IMqttServiceOptions,
- MqttService,
- IPublishOptions,
-} from 'ngx-mqtt';
-import { IClientSubscribeOptions } from 'mqtt-browser';
-import { Subscription } from 'rxjs';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss'],
-})
-export class AppComponent {
- constructor(private _mqttService: MqttService) {
- this.client = this._mqttService;
-}
- private curSubscription: Subscription | undefined;
- connection = {
- hostname: 'broker.emqx.io',
- port: 8083,
- path: '/mqtt',
- clean: true, // Retain session
- connectTimeout: 4000, // Timeout period
- reconnectPeriod: 4000, // Reconnect period
- // Authentication information
- clientId: 'mqttx_597046f4',
- username: 'emqx_test',
- password: 'emqx_test',
- protocol: 'ws',
- }
- subscription = {
- topic: 'topic/mqttx',
- qos: 0,
-};
- publish = {
- topic: 'topic/browser',
- qos: 0,
- payload: '{ "msg": "Hello, I am browser." }',
-};
- receiveNews = '';
- qosList = [
- { label: 0, value: 0 },
- { label: 1, value: 1 },
- { label: 2, value: 2 },
-];
- client: MqttService | undefined;
- isConnection = false;
- subscribeSuccess = false;
-
- // Create a connection
- createConnection() {
- // Connection string, which allows the protocol to specify the connection method to be used
- // ws Unencrypted WebSocket connection
- // wss Encrypted WebSocket connection
- // mqtt Unencrypted TCP connection
- // mqtts Encrypted TCP connection
- try {
- this.client?.connect(this.connection as IMqttServiceOptions)
- } catch (error) {
- console.log('mqtt.connect error', error);
- }
- this.client?.onConnect.subscribe(() => {
- this.isConnection = true
- console.log('Connection succeeded!');
- });
- this.client?.onError.subscribe((error: any) => {
- this.isConnection = false
- console.log('Connection failed', error);
- });
- this.client?.onMessage.subscribe((packet: any) => {
- this.receiveNews = this.receiveNews.concat(packet.payload.toString())
- console.log(`Received message ${packet.payload.toString()} from topic ${packet.topic}`)
- })
-}
-}
-```
-
-### Subscribe to topics
-
-Upon connecting to the MQTT Broker successfully, call the `subscribe` method of the current MQTT instance and pass in the Topic and QoS parameters for the successful subscription.
-
-```
-doSubscribe() {
- const { topic, qos } = this.subscription
- this.curSubscription = this.client?.observe(topic, { qos } as IClientSubscribeOptions).subscribe((message: IMqttMessage) => {
- this.subscribeSuccess = true
- console.log('Subscribe to topics res', message.payload.toString())
-})
-}
-```
-
-### Unsubscribe
-
-The `unsubscribe` method can release the resources held by the subscription.
-
-```
-doUnSubscribe() {
- this.curSubscription?.unsubscribe()
- this.subscribeSuccess = false
-}
-```
-
-### Message publishing
-
-The `usafePublish` publishes messages on topics with optional options, such as QoS and Retain, as shown below.
-
-```
-doPublish() {
- const { topic, qos, payload } = this.publish
- console.log(this.publish)
- this.client?.unsafePublish(topic, payload, { qos } as IPublishOptions)
-}
-```
-
-### Disconnect
-
-The `disconnect` will disconnect the MQTT client. The parameter `true` is passed in to force a disconnection from the MQTT client.
-
-```
-destroyConnection() {
- try {
- this.client?.disconnect(true)
- this.isConnection = false
- console.log('Successfully disconnected!')
-} catch (error: any) {
- console.log('Disconnect failed', error.toString())
-}
-}
-```
-
-## Test
-
-We create the following simple browser application with Angular, which has the following functions: Establish a connection, Subscribe to topics, Send & receive messages, Unsubscribe, Disconnect, and so on. For the complete code, see: [https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Angular.js](https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Angular.js)
-
-
-
-Use [MQTT 5.0 client tool - MQTTX](https://mqttx.app/) as another client to test message sending & receiving.
-
-
-
-Before MQTTX sends a second message, unsubscribe at the browser side, and the browser side will not receive subsequent messages sent by MQTTX.
-
-## Summary
-
-We have successfully created an MQTT connection in an Angular project and simulated the scenarios of subscription, message sending and receiving, unsubscription, and disconnection between the client and the MQTT.
-
-As one of the three mainstream front-end frameworks, Angular can be used both on the browser and the mobile side. Various interesting applications can be developed by combining MQTT protocol and [MQTT cloud service](https://www.emqx.com/en/cloud), such as the chat system for customer service or management system for real-time monitoring of IoT device information.
-
-## Resources
-
-- [How to Use MQTT in Vue](https://www.emqx.com/en/blog/how-to-use-mqtt-in-vue)
-- [How to Use MQTT in React](https://www.emqx.com/en/blog/how-to-use-mqtt-in-react)
-- [How to Use MQTT in Electron](https://www.emqx.com/en/blog/how-to-use-mqtt-in-electron)
-- [How to Use MQTT in Node.js](https://www.emqx.com/en/blog/how-to-use-mqtt-in-nodejs)
-- [A Quickstart Guide to Using MQTT over WebSocket](https://www.emqx.com/en/blog/connect-to-mqtt-broker-with-websocket)
-
-
-
-
- Try EMQX Cloud for Free
-
A fully managed MQTT service for IoT
-
- Get Started →
-
diff --git a/en/202501/how-to-use-mqtt-in-angular.md b/en/202501/how-to-use-mqtt-in-angular.md
new file mode 100644
index 00000000..652056bf
--- /dev/null
+++ b/en/202501/how-to-use-mqtt-in-angular.md
@@ -0,0 +1,226 @@
+## Introduction
+
+[Angular](https://angular.io/) is a development platform built on TypeScript. It features a component-based framework designed for creating scalable web applications, along with a comprehensive set of integrated libraries that cover routing, form management, client-server communication, and other essential functions. Additionally, Angular provides development tools to assist users in developing, building, testing, and updating code.
+
+[MQTT](https://www.emqx.com/en/blog/the-easiest-guide-to-getting-started-with-mqtt) is a lightweight message transfer protocol for the Internet of Things (IoT), based on a publish/subscribe model. It enables one-to-many message distribution and application decoupling while minimizing transmission costs, thereby reducing network traffic. MQTT also accommodates various delivery requirements through its three Quality of Service (QoS) levels for messages.
+
+This article will explain how to implement the MQTT protocol in Angular projects, covering how to connect, subscribe, send and receive messages, unsubscribe, and perform other functions between clients and the [MQTT Broker](https://www.emqx.com/en/blog/the-ultimate-guide-to-mqtt-broker-comparison).
+
+## Setting Up Your Angular Project with MQTT
+
+### Create a New Project
+
+You can refer to two different documentation sources:
+
+1. [Create an Angular project with the Angular CLI](https://v17.angular.io/guide/setup-local#install-the-angular-cli) - This is the **archived documentation for Angular v17**
+2. [angular.dev](https://angular.dev/tools/cli/setup-local#before-you-start) - This is the **current version** of Angular documentation
+
+Install the Angular CLI:
+
+```shell
+npm install -g @angular/cli
+```
+
+Create a new workspace and initial application:
+
+```shell
+ng new my-app
+```
+
+Navigate to the project directory:
+
+```shell
+cd my-app
+```
+
+Now you're ready to start development!
+
+### Install the MQTT Client Library
+
+The library used in this case is [ngx-mqtt](https://sclausen.github.io/ngx-mqtt/), which isn’t just a wrapper around MQTT.js for angular >= 2. It uses observables for efficient subscription handling and message routing, making it ideal for Angular applications.
+
+Install it using npm or yarn command:
+
+```shell
+npm install ngx-mqtt --save
+yarn add ngx-mqtt
+```
+
+## Implementing MQTT in Angular
+
+### Connecting to an MQTT Broker
+
+We use the [free public MQTT Broker](https://www.emqx.com/en/mqtt/public-mqtt5-broker) provided by EMQX in this article, which is built on the EMQX MQTT Platform. EMQX is a large-scale distributed IoT MQTT message broker that can efficiently and reliably connect massive IoT devices, process and distribute messages and event flow data in real-time, and help customers build business-critical IoT platforms and applications.
+
+The server access information is as follows:
+
+- Broker: `broker.emqx.io`
+- TCP Port: **1883**
+- WebSocket Port: **8083**
+
+Key codes for connection:
+
+```javascript
+import type { IMqttServiceOptions, MqttService } from 'ngx-mqtt'
+import type { Subscription } from 'rxjs'
+import { IClientSubscribeOptions } from 'mqtt-browser'
+import { IMqttMessage, IPublishOptions } from 'ngx-mqtt'
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+ constructor(private _mqttService: MqttService) {
+ this.client = this._mqttService
+ }
+
+ private curSubscription: Subscription | undefined
+ connection = {
+ hostname: 'broker.emqx.io',
+ port: 8083,
+ path: '/mqtt',
+ clean: true, // Retain session
+ connectTimeout: 4000, // Timeout period
+ reconnectPeriod: 4000, // Reconnect period
+ // Authentication information
+ clientId: 'mqttx_597046f4',
+ username: 'emqx_test',
+ password: 'emqx_test',
+ protocol: 'ws',
+ }
+
+ subscription = {
+ topic: 'topic/mqttx',
+ qos: 0,
+ }
+
+ publish = {
+ topic: 'topic/browser',
+ qos: 0,
+ payload: '{ "msg": "Hello, I am browser." }',
+ }
+
+ receiveNews = ''
+ qosList = [
+ { label: 0, value: 0 },
+ { label: 1, value: 1 },
+ { label: 2, value: 2 },
+ ]
+
+ client: MqttService | undefined
+ isConnection = false
+ subscribeSuccess = false
+
+ // Create a connection
+ createConnection() {
+ // Connection string, which allows the protocol to specify the connection method to be used
+ // ws Unencrypted WebSocket connection
+ // wss Encrypted WebSocket connection
+ // mqtt Unencrypted TCP connection
+ // mqtts Encrypted TCP connection
+ try {
+ this.client?.connect(this.connection as IMqttServiceOptions)
+ } catch (error) {
+ console.log('mqtt.connect error', error)
+ }
+ this.client?.onConnect.subscribe(() => {
+ this.isConnection = true
+ console.log('Connection succeeded!')
+ })
+ this.client?.onError.subscribe((error: any) => {
+ this.isConnection = false
+ console.log('Connection failed', error)
+ })
+ this.client?.onMessage.subscribe((packet: any) => {
+ this.receiveNews = this.receiveNews.concat(packet.payload.toString())
+ console.log(`Received message ${packet.payload.toString()} from topic ${packet.topic}`)
+ })
+ }
+}
+```
+
+### Subscribing to Topics
+
+Upon connecting to the MQTT Broker successfully, call the `subscribe` method of the current MQTT instance and pass in the Topic and QoS parameters for the successful subscription.
+
+```javascript
+doSubscribe() {
+ const { topic, qos } = this.subscription
+ this.curSubscription = this.client?.observe(topic, { qos } as IClientSubscribeOptions).subscribe((message: IMqttMessage) => {
+ this.subscribeSuccess = true
+ console.log('Subscribe to topics res', message.payload.toString())
+ })
+}
+```
+
+### Unsubscribing from Topics
+
+The `unsubscribe` method can release the resources held by the subscription.
+
+```javascript
+doUnSubscribe() {
+ this.curSubscription?.unsubscribe()
+ this.subscribeSuccess = false
+}
+```
+
+### Publishing Messages
+
+The `usafePublish` publishes messages on topics with optional options, such as QoS and Retain, as shown below.
+
+```javascript
+doPublish() {
+ const { topic, qos, payload } = this.publish
+ console.log(this.publish)
+ this.client?.unsafePublish(topic, payload, { qos } as IPublishOptions)
+}
+```
+
+### Disconnecting from MQTT Broker
+
+The `disconnect` will disconnect the [MQTT client](https://www.emqx.com/en/blog/mqtt-client-tools). The parameter `true` is passed in to force a disconnection from the MQTT client.
+
+```javascript
+destroyConnection() {
+ try {
+ this.client?.disconnect(true)
+ this.isConnection = false
+ console.log('Successfully disconnected!')
+ } catch (error: any) {
+ console.log('Disconnect failed', error.toString())
+ }
+}
+```
+
+## Testing the Angular MQTT Application
+
+We create the following simple browser application with Angular, which has the following functions: Establish a connection, Subscribe to topics, Send & receive messages, Unsubscribe, Disconnect, and so on.
+
+### Code Examples Reference
+
+For Angular v17 and above code example, see: [Angular v17 MQTT Example](https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Angular.js/Angular17)
+
+For previous Angular versions code example, see: [Angular MQTT Example](https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Angular.js)
+
+
+
+Use [MQTT 5.0 client tool - MQTTX](https://mqttx.app/) as another client to test message sending & receiving.
+
+
+
+Before MQTTX sends a second message, unsubscribe at the browser side, and the browser side will not receive subsequent messages sent by MQTTX.
+
+## Summary
+
+This guide illustrated how to integrate MQTT into an Angular application, enabling functions like connecting to an MQTT Broker, subscribing to topics, and publishing messages. Combining Angular with MQTT opens up exciting possibilities, such as developing real-time monitoring systems for IoT devices or chat systems for customer service.
+
+
+
+
+
+ Talk to an Expert
+
+ Contact Us →
+
diff --git a/en/202501/how-to-use-thingsboard-to-access-mqtt-data.md b/en/202501/how-to-use-thingsboard-to-access-mqtt-data.md
new file mode 100644
index 00000000..28f13dfc
--- /dev/null
+++ b/en/202501/how-to-use-thingsboard-to-access-mqtt-data.md
@@ -0,0 +1,172 @@
+## Introduction
+
+ThingsBoard is a powerful open-source IoT platform for data collection, processing, visualization, and device management. Supporting key IoT protocols like [MQTT](https://www.emqx.com/en/blog/the-easiest-guide-to-getting-started-with-mqtt), [CoAP](https://www.emqx.com/en/blog/coap-protocol), and HTTP, it offers both cloud and private deployment options to meet diverse needs.
+
+Integrating ThingsBoard with MQTT offers a robust solution for real-time IoT data visualization, essential for understanding and managing diverse sensor data within an IoT ecosystem. ThingsBoard is renowned for its rich features and scalability, capable of handling large-scale device data and supporting complex analytics and automation workflows. When paired with the lightweight MQTT protocol, this integration ensures efficient, low-latency communication across devices, allowing data to be captured, processed, and visualized in real-time.
+
+In this guide, we'll show you how to integrate a third-party [MQTT broker](https://www.emqx.com/en/blog/the-ultimate-guide-to-mqtt-broker-comparison), specifically EMQX, with ThingsBoard Cloud. You'll also learn how to create a custom dashboard to visualize MQTT data.
+
+## Preparation
+
+### Set Up ThingsBoard Cloud
+
+Register at [ThingsBoard Cloud](https://thingsboard.cloud/signup). No installation is required for cloud users. In addition, you can also choose to [download and install](https://thingsboard.io/docs/user-guide/install/installation-options/) a private deployment.
+
+### Creating an MQTT Broker on the EMQX Platform
+
+We will use EMQX Platform to create a third-party MQTT broker. [Sign up for the EMQX Platform Console](https://accounts.emqx.com/signup?continue=https%3A%2F%2Fcloud-intl.emqx.com%2Fconsole%2F) and create a new deployment. As a new user, you will have a free 14-day trial for Dedicated plan.
+
+In this context, a deployment refers to an MQTT broker cluster. EMQX Dedicated plan offers VPC peer-to-peer connectivity and a REST API, along with robust and flexible data integration capabilities. This makes it easy for users to connect with their existing cloud service resources. By providing a comprehensive operations and monitoring service, it saves significant time and labor costs, allowing businesses to concentrate on delivering greater value.
+
+## Integrating EMQX Platform with ThingsBoard
+
+### Configure EMQX Platform
+
+1. **Obtain Connection Address and Port**
+
+ First, create a Dedicated deployment. Once the instance status shows as **Running** on the EMQX deployment **Overview** page, locate the connection address and port for MQTT. This information will be used later when setting up integrations in ThingsBoard.
+
+ 
+
+1. **Add Authentication Information**
+
+ 
+
+### Configure ThingsBoard
+
+Go to **Integrations** in ThingsBoard and click the **+** button to create a new integration. In the add integration pop-up dialog, you need to complete the following four steps:
+
+1. **Choose MQTT integration type**
+
+ Choose **MQTT** as the integration type and enter a name, such as "Integration with EMQX Platform". Keep other options at their default values and click “Next” to proceed to the second step.
+
+1. **Configure an uplink data converter**
+
+ Add a new **Uplink converter** to process incoming MQTT message payloads into the ThingsBoard format.
+
+ Example: Name it **MQTT-Uplink**, enable **Debug Mode**, and paste the following script to decode the payload:
+
+ ```
+ // Decode an uplink message from a buffer
+ // payload - array of bytes
+ // metadata - key/value object
+
+ // decode payload to json
+ var payloadJson = decodeToJson(payload);
+ var result = {
+ deviceName: payloadJson.deviceName,
+ attributes: {
+ model: 'Model A',
+ serialNumber: 'SN111',
+ integrationName: metadata['integrationName']
+ },
+ telemetry: {
+ temperature: payloadJson.temperature,
+ humidity: payloadJson.humidity,
+ }
+ };
+
+ // Helper functions
+ function decodeToString(payload) {
+ return String.fromCharCode.apply(String, payload);
+ }
+ function decodeToJson(payload) {
+ // covert payload to string.
+ var str = decodeToString(payload);
+
+ // parse string to JSON
+ var data = JSON.parse(str);
+ return data;
+ }
+
+ return result;
+ ```
+
+ Optionally, click the **Test Decoder Function** button to test and verify whether the decoder function meets the expectations.
+
+ Then click “Next” to proceed to the third step.
+
+1. **Skip downlink data converter**
+
+ The downlink data converter is optional, so we will skip this step.
+
+1. **Integrate EMQX with ThingsBoard**
+
+ Paste the **MQTT connection address** and **port** from your EMQX Platform instance.
+
+ Since authentication is enabled by default in all EMQX Platform deployments, enable **Basic authentication** and input the **username** and **password** created in the EMQX **Authentication** section.
+
+ Click **Check Connection**. A pop-up message will appear in the bottom right corner, notifying you that the connection has been successfully established. This indicates that the integration with the EMQX Platform deployment was successful.
+
+ Finally, define the filter topic (e.g., `/test/integration/emqxplatform`) to use during the testing phase, then click **Add** to complete the integration setup.
+
+ 
+
+## Integration Test
+
+After completing the above integration configuration, use the [MQTT 5.0 client tool](https://mqttx.app/), MQTTX, to simulate a device, in order to test and verify the effectiveness of the functionality.
+
+1. Use MQTTX to connect to the EMQX Platform deployment.
+
+2. After the connection is successfully established, simulate a device by sending temperature and humidity data to the filter topic `/test/integration/emqxplatform`, which was configured during the integration above.
+
+ ```json
+ {
+ "deviceName": "Device Test",
+ "temperature": 28,
+ "humidity": 70
+ }
+ ```
+
+ 
+
+3. In Thingsboard, go to the **Integrations** menu under **Integrations Center** and click
+
+ `Integration with EMQX Platform` name, you can see that there is an MQTT message publishing record for the event. This means that the EMQX Platform deployment has been successfully integrated.
+
+ 
+
+## Customizing Your Dashboard to Access MQTT Data
+
+1. Go to the **Dashboards** menu and click the **+** button to create a new dashboard. Name it "EMQX Platform Integration Dashboard."
+
+2. Add a time-series table widget. Open the dashboard and click **+ Add new widget**. Search for **Timeseries table** and select it.
+
+ 
+
+ a. To configure a “Timeseries table” widget, follow these steps:
+
+ i. **Select Device**: In the “Datasource” section, choose the device “Device Test.”
+
+ ii. **Configure Temperature Column**: In the “Columns” section, select or input “temperature” as the key and set the label to “temperature.”
+
+ iii. **Configure Humidity Column**: Still in the “Columns” section, select or input “humidity” as the key and set the label to “humidity.”
+
+ iv. **Confirm Configuration**: Once configured, click the “Add” button at the bottom right to complete the process.
+
+ 
+
+ b. Return to MQTTX, change the temperature value to 25 and humidity value to 80, publish a message again, and the corresponding data will be displayed in the table configured.
+
+3. Similar to step 2 above, click Add a widget, search for charts, select Timeseries Line Chart, configure it, and change the real-time range to the last 5 hours. Using MQTTX, send another set of data, and the corresponding data will be displayed in both components.
+
+ 
+
+ 
+
+## Summary
+
+By following these steps, you have successfully integrated the EMQX Platform with ThingsBoard and created a custom dashboard to visualize MQTT data. This integration enables efficient real-time monitoring of IoT devices, making it easier to manage data and improve operational insights.
+
+For further exploration, you can customize your dashboard even more, add additional widgets, and fine-tune your system to suit your specific use case. This will allow you to monitor device-related data in real-time detail visually and set alert thresholds to help you resolve issues on time.
+
+Next, you can check out [The Easy-to-understand Guide to MQTT Protocol](https://www.emqx.com/en/mqtt-guide) series of articles provided by EMQ to learn about MQTT protocol features, explore more advanced applications of MQTT, and get started with MQTT application and service development.
+
+
+
+
+
-