Tạo trang web theo dõi COVID của riêng bạn bằng NodeJS


1063

Đầu tiên, chúng ta sẽ cần những thứ sau: 

NodeJS ~ NodeJS là gì ? Những điều cơ bản cần biết về NodeJS

NPM ~ Dùng để cài đặt package đi kèm với NodeJS 

Kiến thức cơ bản về HTTP GET ~ https://developer.mozilla.org/en-US/docs…ethods/GET

Không có gì khác hơn định nghĩa về API ~ “một tập hợp các chức năng và thủ tục cho phép tạo ra các ứng dụng truy cập các tính năng hoặc dữ liệu của hệ điều hành, ứng dụng hoặc dịch vụ khác.” 

Hiểu biết về ký hiệu đối tượng JavaScript (JSON) ~ https://www.w3schools.com/js/js_json_intro.asp 

Và cuối cùng một kết nối internet :3

Cài đặt package get dữ liệu covid từ API

Chạy câu lệnh NPM sau để cài đặt chúng:

npm install node-fetch

Bắt đầu code với NodeJS

Tạo một file tên là ‘app.js’, và nó kết thúc phần mở rộng ‘.js’.

Thêm vào đầu file này như sau:

global.fetch = require(“node-fetch”);
const fs = require(‘fs’)

“Node-fetch” sẽ cho phép thực hiện một request GET tới API để lấy dữ liệu covid. ‘Fs’ là một package được cài đặt sẵn, cho phép quản lý các file bằng JavaScript.

Tạo file setting

Tiếp theo, chúng ta tạo file setting.  Để đơn giản, tôi sẽ tạo một file có tên ‘config.json’ có nghĩa là ‘file cấu hình’.

Bên trong ‘config.json’, chúng ta sẽ thêm một object JSON đơn giản

{
    "countryCodes":[
        "XX",
        "YY"
    ],
    "requestOptions": {
        "method": "GET",
        "redirect": "follow"
    }
}

Bạn sẽ thay thế ‘XX’, ‘YY’ bằng mã quốc gia của các quốc gia bạn muốn theo dõi tình hình covid, ví dụ:

{
    "countryCodes":[
        "GB",
        "US"
    ],
    "requestOptions": {
        "method": "GET",
        "redirect": "follow"
    }
}

Điều này sẽ cho ứng dụng theo dõi Vương quốc Anh(Great Britain) và Mỹ (United States). ‘RequestOptions’  để cho Node JS biết cách thông tin request từ API.

Liên kết file setting với project

Chúng ta đã có file settings và nó vào project để sử dụng. Điều này được thực hiện bằng cách sử dụng package ‘fs’ mà đã đưa vào lúc đầu như sau:

const settings = JSON.parse(fs.readFileSync("config.json", "utf-8"));

Code này rất đơn giản. Nó yêu cầu trình biên dịch đọc file ‘config.json’ với mã hóa UTF-8. Sau đó phân tích cú pháp file thành định dạng JavaScript có thể đọc được, và thêm vào hằng số ‘settings’.

Lấy dữ liệu

Chúng ta lấy được thống kê COVID 19 hiện tại bằng cách request API sau: https://covid19api.com/

Trước tiên, chúng ta sẽ cài đặt như sau:

const countries = settings.countryCodes,
op = settings.requestOptions;
// countries = country codes,
// op (options) = request options.

Bây giờ, request API như sau

let foundData = [];
const data = await fetch("https://api.covid19api.com/summary", op)
    .then(response => response.text())
    .then(result => {
        return JSON.parse(result);
    }).catch(error => console.log('Unable to retrieve data.'));

Bạn thấy ở đây, chúng ta tạo một hằng số ‘data’ và bên trong hằng số này. Đưa dữ liệu từ ‘https://api.covid19api.com/summary’ qua request vào.

 ‘Await’ có nghĩa là đợi cho đến khi yêu cầu hoàn tất trước khi tiếp tục. API covid sẽ trả về một đối tượng JSON khác như đã thấy trong tệp settings, chỉ lớn hơn rất nhiều! Điều này sẽ chứa tất cả các số liệu thống kê.

Chúng ta phân tích cú pháp dữ liệu này bằng cách sử dụng ‘JSON.parse (result);’. Nếu code lỗi, thì sẽ log ra “Unable to retrieve data.” . Đừng lo lắng về dòng đầu tiên vì dòng này là để chuẩn bị cho phần sau.

Biến JSON thành dữ liệu có thể sử dụng được.

Bây giờ chúng ta có object xấu xí khổng lồ,và phải làm gì với nó? Chà, bắt đầu bằng cách loại bỏ các quốc gia không được chỉ định trong settings. Vòng lặp sau sẽ thực hiện điều đó:

for (let i = 0; i < data.Countries.length; i++) {
        if (countries.includes(data.Countries[i].CountryCode)) {
            foundData.push(data.Countries[i]);
        } if (foundData.length == countries.length) break;
    }

Bạn có thể nhận thấy rằng trong bước trước, tôi đã tạo một mảng.

Bây giờ tôi sẽ sử dụng nó để lưu trữ dữ liệu.

Câu lệnh if bên trong vòng lặp sẽ kiểm tra xem array quốc gia (từ settings) có bao gồm mã quốc gia của quốc gia hiện tại(i)  từ dữ liệu hay không. Nếu đúng, quốc gia sẽ được thêm vào mảng ‘foundData’.

Ngay bên cạnh câu lệnh if đó, tôi đã thêm một câu lệnh if khác để kiểm tra xem độ dài của biến foundData có giống với số lượng mã quốc gia trong cài đặt hay không.

Nếu đúng, vòng lặp sẽ break, rút ​​ngắn thời gian thực thi và giảm hao tổn cho CPU / RAM.

Bây giờ chúng ta đã có dữ liệu covid, tiếp theo sẽ làm gì?

Bất cứ điều gì. Bây giờ dữ liệu đã nằm trong tay, bạn có thể thao tác và hiển thị nó theo bất kỳ cách nào bạn muốn. Đây là những gì tôi đã làm ra:

Image for post

Rất đơn giản để điều hướng JSON, vì đã phân tích cú pháp nó. Đây là một chức năng tôi đã thực hiện để đọc ngày:

function convertDate() {
    let date = new Date();
    return date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
};

Đơn giản chỉ cần sử dụng

const time = convertDate();8. Some ideas

Vẽ biểu đồ dữ liệu ra, bạn có thể sử dụng tài liệu HTML cho việc này.

Sử dụng cron job để cập nhật sau mỗi x đơn vị thời gian. Tôi đã thực sự triển khai điều này vào ứng dụng của riêng mình, một mẹo cho cron job là sử dụng trang web này.

Kết luận

Qua bài viết chúng ta đã lấy được dữ liệu covid. Và bạn có thể làm mọi thứ với dữ liệu đó để có project theo dõi tình hình covid theo ý bạn

Theo dõi thêm về bài viết về NodeJS tại đây : Hướng dẫn viết app search realtime bằng NodeJS


Like it? Share with your friends!

1063