Xây dựng dashboard theo dõi COVID live bằng NodeJS

Những gì chúng ta làm trong hướng dẫn này

1. Cài đặt và chạy cơ sở dữ liệu influx, bảng điều khiển
2. Tạo trình quét dữ liệu nhỏ trong NodeJS
3. Tạo dashboard với một số biểu đồ trong influx

---

Influxdb là gì ? Như đã đề cập, chúng ta sẽ sử dụng cơ sở dữ liệu chuỗi thời gian. Trong hướng dẫn NodeJS này, sử dụng hệ sinh thái Influxdata có cơ sở dữ liệu và công cụ trực quan chuỗi thời gian (như biểu đồ). Tìm hiểu thêm về hệ sinh thái influxdata tại đây

Và đối với những người không quen thuộc với khái niệm cơ sở dữ liệu chuỗi thời gian. Nó là gì? nó được tối ưu hóa cao (ngay cả đối với chuỗi thời gian chính xác micro giây), để lưu trữ các giá trị với thời gian đo của riêng chúng (được lưu dưới dạng timestamps UNIX). Ví dụ đo lường sử dụng cpu

cpu_usage: 28,98%, measurement_time: 1585495074
cpu_usage: 57,58%, measurement_time: 1535493454
cpu_usage: 89,48%, measurement_time: 1535493450

Với kiến ​​thức cơ bản này, chúng ta có thể bắt đầu với influx và NodeJS

Đầu tiên tải về influx@2.0:

wget https://dl.influxdata.com/influxdb/releases/influxdb_2.0.0-beta.7_linux_amd64.tar.gz

đối với hệ điều hành khác ngoài linux hãy vào đây và tải xuống bằng tay

tar xvfz influxdb_2.0.0-beta.7_linux_amd64.tar.gz

Điều hướng đến thư mục:

cd Downloads/influxdb_2.0.0-beta.6_linux_amd64/

Chạy influxd  dưới dạng tiến trình nền:

./influxd &

Và vào url http: // localhost: 9999 /, Bạn sẽ thấy

Cấu hình influx cơ bản đã xong, cuối cùng viết code với NodeJS

Chúng ta sử dụng NodeJS và tận dụng sự thuận tiện của quá trình polling. Mục tiêu là định kỳ scrap các chỉ số virus corona từ endpoint  và lưu nó trong influx.

Hãy tạo ứng dụng NodeJS cơ bản, tôi thích sử dụng typescript, nhưng bạn cũng có thể sử dụng javascript.

mkdir corona-stats && cd corona-statsnpm init
npm install @influxdata/influxdb-client axios --save
npm install @types/node typescript @types/axios --save-devtouch scraper.tsnode_modules/.bin/tsc --init

Chúng ta sử dụng các axios để lấy dữ liệu từ endpoint

thêm phần script này vào package.json,

"scripts": {
    "build": "node_modules/.bin/tsc",
    "start": "node scraper.js"
  },

tsconfig.json vẫn được tạo, chúng ta không nên sửa đổi nó.

Điều tiếp theo chúng ta phải làm

Bạn sẽ cần org-id, bạn có thể lấy nó từ URL, sau khi bạn đăng nhập.

Tiếp theo, để lấy token, hãy đi đến Load Data -> Tokens

Những điều chúng ta muốn thực hiện với influx

Mục tiêu của chúng ta là lấy số liệu thống kê toàn cầu từ https://corona.lmao.ninja/all và mỗi số liệu thống kê của từng quốc gia từ https://corona.lmao.ninja/countries trong khoảng thời gian 1 giây và lưu nó vào Influxdb.

Cơ sở dữ liệu chuỗi thời gian ngoại trừ timestamps, nên đã dán nhãn cho mỗi phép đo, hãy quay lại ví dụ sử dụng CPU.

cpu_usage: 28,98%, memory_usage: 64,34%, measurement_time: 1585495074
cpu_usage: 57,58%, memory_usage: 34,32%, measurement_time: 1535493454
cpu_usage: 89,48%, memory_usage: 14,79%, measurement_time: 1535493450

cpu_usage là một label và 28,98% là giá trị. Chúng ta có thể thêm một số liệu khác như memory_usage, và influx dễ dàng tổng hợp các phép đo này

Hãy code nào

import { InfluxDB, WritePrecision, Point } from '@influxdata/influxdb-client';import {default as axios, AxiosResponse} from 'axios';const config = {
url: 'http://localhost:9999',
token: 'your_token_here',
org: 'your_orgid_here',
bucket: 'corona_live', //Your bucket name
}
// Create client and writeApi instance
const client = new InfluxDB({url: config.url, token: config.token});const writeApi = client.getWriteApi(config.org, config.bucket, WritePrecision.s);//Interfaces for api reponseinterface CoronaCountry {
country: string;
cases: number;
todayCases: number;
deaths: number;
todayDeaths: number;
recovered: number;
active: number;
critical: number;
casesPerOneMillion: number;
}interface CoronaGlobal {
cases: number;
deaths: number;
recovered: number;
}//  Factory for global stats
const globalPointFactory = async (): Promise<Point> => {// Get data from endpoint
const result: AxiosResponse<CoronaGlobal> = await axios.get('https://corona.lmao.ninja/all');//Write in influxdb
return new Point('corona_global')
.tag('target', 'global')
.intField('cases', result.data.cases)
.intField('death', result.data.deaths)
.intField('recovered', result.data.recovered);
}// Factory for stats per country
const countryPointCollectionFactory = async (): Promise<Point[]> => {
// Get data from endpoint
const result: AxiosResponse<CoronaCountry[]> = await axios.get('https://corona.lmao.ninja/countries');
return result.data.map(countryData => {
return new Point(countryData.country).tag('target', countryData.country)
.intField('cases', countryData.cases)
.intField('death', countryData.deaths)
.intField('recovered', countryData.recovered)
.intField('todayCases', countryData.todayCases)
.intField('todayDeaths', countryData.todayDeaths)
.intField('active', countryData.active)
.intField('critical', countryData.critical);
});
}// Periodically (1 second) send global stats to influx
setInterval(async () => {
const point = await globalPointFactory();
writeApi.writePoint(point);
}, 1000);// Periodically (1 second) send stats for each country to influx
setInterval(async () => {
const pointCollection = await countryPointCollectionFactory();
pointCollection.map(point => {
writeApi.writePoint(point);
})
}, 1000);

API của ứng dụng khách NodeJS có thể trông lạ lẫm, vì vậy hãy để tôi giúp bạn hiểu rõ hơn về nó.

• Point // là đối tượng được đề cập đến vị trí của điểm đo trong biểu đồ
• tag // đánh dấu điểm bằng một số văn bản để dễ dàng lọc dữ liệu
• intField // là biểu diễn của trường số nguyên trong đo lường
• writePoint // về cơ bản gửi dữ liệu trong influx

Build và start ứng dụng

npm run build
npm run start

Và bây giờ các số liệu thống kê trực tiếp nên được định kỳ gửi vào bucket corona_live trong influx. Bây giờ hãy vào khám phá dữ liệu và nếu ứng dụng hoạt động tốt, bạn sẽ thấy các biểu đồ.

Cho phép tạo một số biểu đồ thống kê toàn cầu, chọn các tùy chọn đó và nhấp vào SUBMIT

Không nên chọn 5m trong quá khứ, vì bạn bắt đầu gửi số liệu thống kê cách đây không lâu. Bạn cũng có thể đặt làm mới thành 5s để có trải nghiệm trực tiếp tốt hơn. Tất nhiên, bạn có thể chọn loại hình ảnh trực quan khác như đồ thị sạch hoặc chỉ số đơn giản.

Và đừng quên lưu dashboard, khám phá dữ liệu sẽ mất mọi thứ bạn đã tạo, sau khi bạn làm mới dashboard. Sau khi bạn lưu nó, bạn có thể thêm một ô khác với một stat khác.

Kết luận

Như bạn có thể nhận thấy, việc tạo dashboard trực tiếp, chuyên nghiệp theo influx là khá nhanh, thậm chí không có bất kỳ kiến ​​thức nào về phát triển frontend.

Tham khảo thêm về NodeJS tại đây: Từng bước tạo RESTful API với NodeJS , Express, MySQL