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

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à 2019-nCoV, có trình tự gen giống ít nhất 79,5% với SARS-CoV trước đây.Sự lâ

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

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 hoàn thiện hơn

Chúng em xin chân thành cảm ơn!

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 toà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

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à 2019-nCoV,

có trình tự gen giống ít nhất 79,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 tuyên 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.

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.

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.

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();

await loadSummary(country);

await loadAllTimeChart(country);

await loadDaysChart(country);

let summaryData = await covidApi.getSummary();

let summary = summaryData.Global;

if (!isGlobal(country)) {

summary = summaryData.Countries.filter((e) => Slug === country)[ ];

}

showConfirmedTotal(summary.TotalConfirmed);

showRecoveredTotal(summary.TotalRecovered);

showDeathsTotal(summary.TotalDeaths);

// load recovery rate

await loadRecoveryRate(

Math.floor((summary.TotalRecovered / summary.TotalConfirmed) * 100) );

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

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

 Chương trình khởi tạo

document.querySelector("#all-time-chart"),

case CASE_STATUS.confirmed:

res.push( TotalConfirmed);

break;

case CASE_STATUS.recovered:

res.push( TotalRecovered);

break;

case CASE_STATUS.deaths:

res.push( TotalDeaths);

 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( Date) - new Date( Date));

let = new Date( Date);

labels.push( ${d getFullYear()} ${d getMonth() + 1

confirm_data = renderData(confirmed);

recovered_data = renderData(recovered);

deaths_data = renderData(deaths);

confirmed.forEach((e) => {

let = new Date( Date);

labels.push( ${d getFullYear()} ${d getMonth() + 1

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

 Chương trình khởi tạo

 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( Date) - new Date( Date));

world_data.forEach((e) => {

let = new Date( Date);

labels.push( ${d getFullYear()} ${d getMonth() + 1

confirm_data = renderData(confirmed);

recovered_data = renderData(recovered);

deaths_data = renderData(deaths);

confirmed.forEach((e) => {

let = new Date( Date);

labels.push( ${d getFullYear()} ${d getMonth() + 1

 Chương trình khởi tạo

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]);

};

2 Tạo thẻ tìm kiếm cụ thể số liệu Covid của

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.appendChild(item);

});

};

b) Đổ dữ liệu

loadCountrySelectList = async () => {

let summaryData = await covidApi.getSummary();

countries_list = summaryData.Countries;

let country_select_list = document.querySelectorlist");

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");

let filtered = countries_list.filter((e) =>

e Country.toLowerCase().includes(input.value)

);

renderCountrySelectList(filtered);

};

};

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

a) Khởi tạo tính năng cho toà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ị

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

getCountryAllTimeCases: async (country, status) => {

return await fetchRequest(

covidApiEndPoints.countryAllTimeCases(country, status)

getCountryDaysCases: async (country, status) => {

return await fetchRequest(

covidApiEndPoints.countryDaysCases(country, status)

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=$

let = new Date();

let from_d = new Date( getTime() - days * 24 * 60 * 60 * 1000);

let to_date = `${d getFullYear()} ${d getMonth() + 1

-{ getDate()} ;

let from_date = `${from_d.getFullYear()} ${

//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();

};