TIỂU LUẬN kết THÚC môn học INTERNET và GIAO THỨC đề tài WEBSITE cập NHẬT THÔNG TIN COVID 19

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN
THƠNG KHOA VIỄN THƠNG 1
----------

TIỂU LUẬN KẾT THÚC MÔN HỌC
INTERNET VÀ GIAO THỨC
ĐỀ TÀI:”WEBSITE CẬP NHẬT THƠNG TIN COVID 19”

Giảng viên: Nguyễn Đình Long
Nhóm mơn học: 1
Nhóm tiểu luận: W
Thanh viên nhóm:
1. Nguyễn Hữu Hùng
2.Phạm Đức Anh
3.Nguyễn Quang Ngọc

B18DCVT187
B18DCVT024
B18DCVT312

Hà Nội,12/2021
1


LỜI CẢM ƠN
Đầu tiên, chúng em xin gửi lời cảm ơn sâu sắc đến Học viện Cơng
nghệ Bưu chính Viễn thông đã đưa môn học Internet và giao thức vào
trong chương trình giảng dạy. Đặc biệt, chúng em xin gửi lời cảm ơn sâu
sắc đến giảng viên bộ môn – thầy Nguyễn Đình Long đã truyền đạt
những kiến thức quý báu cho chúng em trong suốt thời gian học tập vừa
qua.

Bài tiểu luận của nhóm em sẽ tìm hiểu về “web cập nhập thơng tin
covid 19” . Tuy nhiên, vì thời gian học tập trên lớp không nhiều, mặc dù
đã cố gắng nhưng chắc chắn những hiểu biết và kỹ năng của chúng em
vẫn cịn nhiều hạn chế. Do đó, Bài tập lớn này khó có thể tránh khỏi
những thiếu sót, kính mong thầy xem xét và góp ý giúp sản phẩm của
nhóm em được hồn thiện hơn.
Chúng em xin chân thành cảm ơn!

2


Mục lục
Phần 1. Mục đích của trang web........................................................... 4
Phần 2. Các tính năng của web:.............................................................5
Phần 3. Các kĩ thuật tạo web................................................................. 7
1. Khởi tạo, hiển thị bảng biểu........................................................... 7
a) Khởi tạo dữ liệu ban đầu khi bắt đầu truy cập trang web................7
b) Hiển thị số người nhiễm, hồi phục và tử vong.................................8
c) Hiển thị bảng thống kê các nước có tỉ lệ người nhiễm cao nhất......9
d) Khởi tạo đồ thị toàn thời gian........................................................11
e) Khởi tạo đồ thị 30 ngày gần nhất...................................................14
f) Khởi tạo biểu đồ tròn tỷ lệ phục hồi................................................16
2. Tạo thẻ tìm kiếm cụ thể số liệu Covid của từng Quốc gia, vùng lãnh
thổ.................................................................................................... 18
a) Hiển thị danh sách tên các Quốc gia.............................................. 18
b) Đổ dữ liệu.......................................................................................19
c) Lọc và tìm kiếm...............................................................................19
3. Tạo tính năng chuyển đổi giao diện light/dark mode....................20
a) Khởi tạo tính năng cho tồn bộ trang web.....................................20
b) Cài đặt tính năng cho riêng các đồ thị............................................20

4. Các chương trình lấy và trả về dữ liệu.......................................... 21
a) Chương trình lấy dữ liệu.................................................................21
b) Chương trình trả về dữ liệu............................................................23

3


Phần 1. Mục đích của trang web
Đại dịch Covid-19 cịn được gọi là dịch viêm phổi cấp do chủng mới của
virus corona hay dịch virus corona Vũ Hán, là một đại dịch truyền nhiễm
gây ra bởi virus SARS-CoV-2. Dịch bắt đầu bùng phát từ tháng 12 năm
2019 tại thành phố Vũ Hán thuộc tỉnh Hồ Bắc ở miền Trung Trung Quốc
sau đó lây lan ra nhiều quốc gia và vùng lãnh thổ.Dịch bệnh được xác
định khi một nhóm người bị viêm phổi không rõ nguyên nhân, đã tiếp
xúc chủ yếu với những người buôn bán làm việc tại chợ bán buôn hải
sản Hoa Nam, nơi bán động vật sống và được cho là địa điểm bùng phát
dịch bệnh đầu tiên. Các nhà khoa học Trung Quốc sau đó đã phân lập
được một loại coronavirus mới, được WHO lúc đó tạm thời gọi là 2019nCoV, có trình tự gen giống ít nhất 7 9,5% với SARS- CoV trước đây.Sự lây
nhiễm từ người sang người đã được xác nhận cùng với tỉ lệ bùng phát
dịch tăng nhanh vào giữa tháng 1 năm 2020. Thời gian ủ bệnh từ 2 đến
14 ngày, đã có bằng chứng rằng bệnh có thể truyền nhiễm trong khoảng
thời gian này và trong vài ngày sau khi hồi phục. Triệu chứng phổ biến
của bệnh bao gồm: sốt, ho và khó thở, có thể gây thiệt mạng trong
trường hợp nghiêm trọng.Ngày 11 tháng 2 năm 2020, Ủy ban quốc tế về
phân loại virus đã đặt tên chính thức cho chủng virus corona mới này là
SARS CoV-2.Ngày 11 tháng 3 năm 2020, Tổ chức Y tế Thế giới (WHO)
chính thức tuyên bố dịch Covid-19 là đại dịch toàn cầu. Cho đến nay vẫn
chưa có thuốc điều trị đặc hiệu, các biện pháp điều trị chủ yếu là điều trị
triệu chứng nâng cao thể trạng. Vacxin phòng bệnh vẫn đang trong giai
đoạn thử nghiệm. Bệnh lây truyền từ người sang người qua tiếp xúc và

qua các giọt bắn khi người bệnh ho hoặc hắt hơi, vi rút có thể lây qua
khơng khí khi làm các thủ thuật khí dung. Vì vậy, mà nhóm chúng em làm
nên website vì là nội dung học tập cũng một phần mong muốn góp một
chút sức lực vào cơng cuộc tun truyền giúp mọi người có thể ý thức
được sự nguy hiểm của dịch bệnh này từ đó nâng cáo tinh thần và có
trách nhiệm bảo vệ sức khỏe của chính bản thân và cho cộng đồng.

4


Phần 2. Các tính năng của web:
Khi truy cập vào website thì với hàng đầu tiên trên cùng sẽ cung cấp cho
bạn tên của các quốc gia mà bạn muốn biết tình hình dịch bệnh của
nước đó.

Tiếp theo là các biểu đồ cập nhật tình trạng số người nhiễm bệnh, tử
vong và bình phục. Chỉ cần di chuột vào là website sẽ hiển thị tình hình
nhiễm bệnh và bình phục của các nước đó và cả mốc thời gian.

5


Bên dưới trang web sẽ là 1 số video hướng dẫn những điều cần biết khi
tiêm chủng và thông điệp 5k của bộ y tế và thống kê những số liệu trong
vòng 30 ngày gần nhất

Phần cuối sẽ là phần thông tin các quốc gia chịu ảnh hưởng nhiều nhất
từ đại dịch covid 19

Website cịn cung cấp tính năng chuyển đổi giao diện light/dark mode để

người sử dụng có thể chuyển đổi giao diện phù hợp với thời gian truy
cập web, ví dụ dark mode được sử dụng vào ban đêm nhằm tạo cảm
giác dễ chịu cho mắt.

6


Phần 3. Các kĩ thuật tạo web
Website được xây dựng với biểu đồ và số liệu thời gian thực được lấy
nguồn từ trang web api.covid19api.com.
Mã nguồn website được tạo bằng 3 ngơn ngữ: Javascript, Html và CSS.
Trong đó Html chịu trách nhiệm tạo nên “bộ khung” của trang web,
Javascript chịu trách nhiệm về các bộ phận tiểu tiết của trang web, như
tạo biểu đồ, chuyển đổi trạng thái giao diện, gọi và đổ dữ liệu. CSS tạo
nên giao diện của trang web.
Sau đây là các kĩ thuật khởi tạo, lấy dữ liệu về biểu đồ, bảng thống kê
trên trang web này, cũng như các chương trình tạo tính năng đặc biệt
như chuyển đổi light/dark mode, tìm kiếm số liệu cụ thể cho từng quốc
gia, vùng lãnh thổ.

1. Khởi tạo, hiển thị bảng biểu
a) Khởi tạo dữ liệu ban đầu khi bắt đầu truy cập trang web
window.onload = async () => {
console.log("ready...");

/

only init chart on page loaded first time

initTheme();

initContryFilter();
await initAllTimesChart();
7


await initDaysChart();
await initRecoveryRate();
await loadData("Global");
await loadCountrySelectList();
document.querySelector("#country-select-toggle").onclick = () =>
{ document.querySelector("#country-selectlist").classList.toggle("active");
};
};
loadData = async (country) => {
startLoading();
await loadSummary(country);
await loadAllTimeChart(country);
await loadDaysChart(country);
endLoading();
};
startLoading = () => {
body.classList.add("loading");
};
endLoading = () => {
body.classList.remove("loading");
};
isGlobal = (country) => {
return country === "Global";
};
numberWithCommas = (x) => {

return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

b) Hiển thị số người nhiễm, hồi phục và tử vong

8


Chương trình:
//hiển thị số ca nhiễm
showConfirmedTotal = (total) => {
document.querySelector("#confirmed-total").textContent =
numberWithCommas(total);
};
//hiển thị số ca khỏi bệnh
showRecoveredTotal = (total) => {
document.querySelector("#recovered-total").textContent =
numberWithCommas(total);
};
//hiển thị số ca chết
showDeathsTotal = (total) => {
document.querySelector("#death-total").textContent =
numberWithCommas(total);
};
loadSummary = async (country) => {
// country = Slug
let summaryData = await covidApi.getSummary();
let summary = summaryData.Global;
if (!isGlobal(country)) {
summary = summaryData.Countries.filter((e) => e.Slug === country)

[0];
}
showConfirmedTotal(summary.TotalConfirmed);
showRecoveredTotal(summary.TotalRecovered);
showDeathsTotal(summary.TotalDeaths);

// load recovery rate
await loadRecoveryRate(
Math.floor((summary.TotalRecovered / summary.TotalConfirmed) * 100)
);

9


Hiển thị bảng thống kê các nước có tỉ lệ người nhiễm
cao nhất
c)

Chương trình:
let

casesByCountries = summaryData.Countries.sort( (a,
b) => b.TotalConfirmed - a.TotalConfirmed

);
let table_countries_body = document.querySelector("#table-countries
tbody");
table_countries_body.innerHTML = "";
for (let i = 0; i < 10; i++) {
let row = `

<tr>
<td>${casesByCountries[i].Country}</td>
<td>$
{numberWithCommas(casesByCountries[i].TotalConfirmed)}d> <td>$
{numberWithCommas(casesByCountries[i].TotalRecovered)}d> <td>$
{numberWithCommas(casesByCountries[i].TotalDeaths)}d> </tr>
`;
table_countries_body.innerHTML += row;
}
};

10


d) Khởi tạo đồ thị tồn thời gian

Chương trình khởi tạo
initAllTimesChart = async () => {
let options = {
chart: {
type: "line",
},
colors: [COLORS.confirmed, COLORS.recovered, COLORS.deaths],
series: [],
xaxis: {
categories: [],
labels: {

show: false,
},
},
grid: {
show: false,
},
stroke: {
curve: "smooth",
},
};
all_time_chart = new ApexCharts(
11


document.querySelector("#all-time-chart"),
options
);
all_time_chart.render();
};
renderData = (country_data) => {
let res = [];
country_data.forEach((e) => {
res.push(e.Cases);
});
return res;
};
renderWorldData = (world_data, status) => {
let res = [];
world_data.forEach((e) => {
switch (status) {

case CASE_STATUS.confirmed:
res.push(e.TotalConfirmed);
break;
case CASE_STATUS.recovered:
res.push(e.TotalRecovered);
break;
case CASE_STATUS.deaths:
res.push(e.TotalDeaths);
break;
}
});
return res;
};

Chương trình đổ dữ liệu vào đồ thị
loadAllTimeChart = async (country) => {
let labels = [];
let confirm_data, recovered_data, deaths_data;
if (isGlobal(country)) {
let world_data = await covidApi.getWorldAllTimeCases();
world_data.sort((a, b) => new Date(a.Date) - new Date(b.Date));
world_data.forEach((e) => {

12


let d = new Date(e.Date);
labels.push(`${d.getFullYear()}-${d.getMonth() + 1}-$
{d.getDate()}`);
});

confirm_data = renderWorldData(world_data, CASE_STATUS.confirmed);
recovered_data = renderWorldData(world_data,
CASE_STATUS.recovered);
deaths_data = renderWorldData(world_data, CASE_STATUS.deaths);
} else {
let confirmed = await covidApi.getCountryAllTimeCases(
country,
CASE_STATUS.confirmed
);
let recovered = await covidApi.getCountryAllTimeCases(
country,
CASE_STATUS.recovered
);
let deaths = await covidApi.getCountryAllTimeCases(
country,
CASE_STATUS.deaths
);
confirm_data = renderData(confirmed);
recovered_data = renderData(recovered);
deaths_data = renderData(deaths);
confirmed.forEach((e) => {
let d = new Date(e.Date);
labels.push(`${d.getFullYear()}-${d.getMonth() + 1}-$
{d.getDate()}`);
});
}
let series = [
{
name: "Confirmed",
data: confirm_data,

},
{
name: "Recovered",
data: recovered_data,
},
{
name: "Deaths",
data: deaths_data,
},
];

13


all_time_chart.updateOptions({
series: series,
xaxis: {
categories: labels,
},
});
};

e)

Khởi tạo đồ thị 30 ngày gần nhất

Chương trình khởi tạo
initDaysChart = async () => {
let options = {
chart: {

type: "line",
},
colors: [COLORS.confirmed, COLORS.recovered, COLORS.deaths],
series: [],
xaxis: {
categories: [],
labels: {
show: false,
},
},
grid: {
show: false,
},
14


stroke: {
curve: "smooth",
},
};
days_chart = new ApexCharts(document.querySelector("#days-chart"),
options);
days_chart.render();
};

Chương trình đổ dữ liệu vào đồ thị
loadDaysChart = async (country) => {
let labels = [];
let confirm_data, recovered_data, deaths_data;
if (isGlobal(country)) {

let world_data = await covidApi.getWorldDaysCases();
world_data.sort((a, b) => new Date(a.Date) - new Date(b.Date));
world_data.forEach((e) => {
let d = new Date(e.Date);
labels.push(`${d.getFullYear()}-${d.getMonth() + 1}-$
{d.getDate()}`);
});
confirm_data = renderWorldData(world_data, CASE_STATUS.confirmed);
recovered_data = renderWorldData(world_data,
CASE_STATUS.recovered);
deaths_data = renderWorldData(world_data, CASE_STATUS.deaths);
} else {
let confirmed = await covidApi.getCountryDaysCases(
country,
CASE_STATUS.confirmed
);
let recovered = await covidApi.getCountryDaysCases(
country,
CASE_STATUS.recovered
);
let deaths = await covidApi.getCountryDaysCases(
country,
CASE_STATUS.deaths
);

15


confirm_data = renderData(confirmed);
recovered_data = renderData(recovered);

deaths_data = renderData(deaths);
confirmed.forEach((e) => {
let d = new Date(e.Date);
labels.push(`${d.getFullYear()}-${d.getMonth() + 1}-$
{d.getDate()}`);
});
}
let series = [
{
name: "Confirmed",
data: confirm_data,
},
{
name: "Recovered",
data: recovered_data,
},
{
name: "Deaths",
data: deaths_data,
},
];
days_chart.updateOptions({
series: series,
xaxis: {
categories: labels,
},
});
};

f) Khởi tạo biểu đồ tròn tỷ lệ phục hồi

16


Chương trình khởi tạo
initRecoveryRate = async () => {
let options = {
chart: {
type: "radialBar",
height: "350",
},
series: [],
labels: ["Recovery rate"],
colors: [COLORS.recovered],
};
recover_rate_chart = new ApexCharts(
document.querySelector("#recover-rate-chart"),
options
);
recover_rate_chart.render();
};

Chương trình đổ dữ liệu vào đồ thị
loadRecoveryRate = async (rate) => {
// use updateSeries
recover_rate_chart.updateSeries([rate]);
};

17

Tạo thẻ tìm kiếm cụ thể số liệu Covid của
từng Quốc gia, vùng lãnh thổ
2.

a) Hiển thị danh sách tên các Quốc gia
renderCountrySelectList = (list) => {
let country_select_list = document.querySelector("#country-selectlist");
country_select_list.querySelectorAll("div").forEach((e) =>
e.remove());
list.forEach((e) => {
let item = document.createElement("div");
item.classList.add("country-item");
item.textContent = e.Country;
item.onclick = async () => {
document.querySelector("#country-select span").textContent =
e.Country;
country_select_list.classList.toggle("active");
await loadData(e.Slug);
};
18


country_select_list.appendChild(item); });

};

b) Đổ dữ liệu
loadCountrySelectList = async () => {
let summaryData = await covidApi.getSummary();

countries_list = summaryData.Countries;
let country_select_list = document.querySelector("#country-selectlist");
let item = document.createElement("div");
item.classList.add("country-item");
item.textContent = "Global"; item.onclick =
async () => {
document.querySelector("#country-select span").textContent =
"Global";
country_select_list.classList.toggle("active"); await
loadData("Global");
};
country_select_list.appendChild(item);
renderCountrySelectList(countries_list);
};

c) Lọc và tìm kiếm
initContryFilter = () => {
let input = document.querySelector("#country-select-list input");
input.onkeyup = () => {
let filtered = countries_list.filter((e) =>
e.Country.toLowerCase().includes(input.value)
);
renderCountrySelectList(filtered);
};
};

19


Tạo tính năng chuyển đổi giao diện light/dark

mode
3.

a) Khởi tạo tính năng cho tồn bộ trang web
//khởi tạo theme dark mode
initTheme = () => {
let dark_mode_switch = document.querySelector("#darkmode-switch");
//click vào nút dark mode sẽ thực hiện chuyển giao diện sang dark
mode
dark_mode_switch.onclick = () => {
dark_mode_switch.classList.toggle("dark");
body.classList.toggle("dark");
setDarkChart(body.classList.contains("dark"));
};
};

b) Cài đặt tính năng cho riêng các đồ thị
setDarkChart = (dark) => {
let theme = {
theme: {
20


mode: dark ? "dark" : "light",
},
};
all_time_chart.updateOptions(theme);
days_chart.updateOptions(theme);
recover_rate_chart.updateOptions(theme);
};

4. Các chương trình lấy và trả về dữ liệu
a) Chương trình lấy dữ liệu
const covidApi = {
//lấy dữ liệu tổng quan về số ca nhiễm, số ca chết,... của chung toàn thế
giới và tất cả các nước
getSummary: async () => {
return await fetchRequest(covidApiEndPoints.summary());
},
//lấy dữ liệu tổng quan về số ca nhiễm, số ca chết,... của chung toàn thế
giới qua nhiều mốc thời gian
getWorldAllTimeCases: async () => {
return await fetchRequest(covidApiEndPoints.worldAllTimeCases());
},
//lấy dữ liệu về số trường hợp ca nhiễm hoặc ca chết hoặc ca hồi phục của
các nước qua từng ngày
getCountryAllTimeCases: async (country, status) => {
return await fetchRequest(
covidApiEndPoints.countryAllTimeCases(country, status)
);
},
//lấy dữ liệu tổng quan về số ca nhiễm, số ca chết,... của chung toàn thế
giới từ ngày ... đến ngày ...
getWorldDaysCases: async () => {
return await fetchRequest(covidApiEndPoints.worldDaysCases());
},
//lấy dữ liệu về số trường hợp ca nhiễm hoặc ca chết hoặc ca hồi phục của
các nước qua từ ngày ... đến ngày ...
getCountryDaysCases: async (country, status) => {
return await fetchRequest(

21


covidApiEndPoints.countryDaysCases(country, status)
);
},
};
const covid_api_base = " />const covidApiEndPoints = {
summary: () => {
return getApiPath("summary");
},
worldAllTimeCases: () => {
return getApiPath("world");
},
countryAllTimeCases: (country, status) => {
let end_point = `dayone/country/${country}/status/${status}`;
return getApiPath(end_point);
},
countryDaysCases: (country, status) => {
let date = getDaysRange(30);
let end_point = `country/${country}/status/${status}?from=$
{date.start_date}&to=${date.end_date}`;
return getApiPath(end_point);
},
worldDaysCases: () => {
let date = getDaysRange(30);
let end_point = `world?from=${date.start_date}&to=$
{date.end_date}`;
return getApiPath(end_point);
},

};

/ Lấy ngày tháng trước ngày hôm
nay getDaysRange = (days) => {
let d = new Date();
let from_d = new Date(d.getTime() - days * 24 * 60 * 60 * 1000);
let to_date = `${d.getFullYear()}-${d.getMonth() + 1}-$
{d.getDate()}`;
let from_date = `${from_d.getFullYear()}-${
from_d.getMonth() + 1
}-${from_d.getDate()}`;

22


return {
start_date: from_date,
end_date: to_date,
};
};
getApiPath = (end_point) => {
return covid_api_base + end_point;
};

b) Chương trình trả về dữ liệu
//Nhận vào đường link api và trả về dữ liệu kiểu json
fetchRequest = async (url) => {
const response = await fetch(url);
return response.json();
};

23