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 - - 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: Nhóm tiểu luận: W Thanh viên nhóm: 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 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 Viễn thơng đưa môn học Internet giao thức vào 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 môn – thầy Nguyễn Đình Long truyền đạt kiến thức quý báu cho chúng em suốt thời gian học tập vừa qua Bài tiểu luận nhóm em tìm hiểu “web cập nhập thơng tin covid 19” Tuy nhiên, thời gian học tập lớp không nhiều, cố gắng chắn hiểu biết kỹ chúng em cịn nhiều hạn chế Do đó, Bài tập lớn khó tránh khỏi thiếu sót, kính mong thầy xem xét góp ý giúp sản phẩm nhóm em hồn thiện Chúng em xin chân thành cảm ơn! Mục lục Phần Mục đích trang web Phần Các tính web: Phần Các kĩ thuật tạo web Khởi tạo, hiển thị bảng biểu a) Khởi tạo liệu ban đầu bắt đầu truy cập trang web b) Hiển thị số người nhiễm, hồi phục tử vong .8 c) Hiển thị bảng thống kê nước có tỉ lệ người nhiễm cao d) Khởi tạo đồ thị toàn thời gian 11 e) Khởi tạo đồ thị 30 ngày gần 14 f) Khởi tạo biểu đồ tròn tỷ lệ phục hồi 16 Tạo thẻ tìm kiếm cụ thể số liệu Covid Quốc gia, vùng lãnh thổ 18 a) Hiển thị danh sách tên Quốc gia 18 b) Đổ liệu .19 c) Lọc tìm kiếm .19 Tạo tính chuyển đổi giao diện light/dark mode 20 a) Khởi tạo tính cho tồn trang web 20 b) Cài đặt tính cho riêng đồ thị 20 Các chương trình lấy trả liệu 21 a) Chương trình lấy liệu .21 b) Chương trình trả liệu 23 Phần Mục đích trang web Đại dịch Covid-19 cịn gọi dịch viêm phổi cấp chủng virus corona hay dịch virus corona Vũ Hán, đại dịch truyền nhiễm gây virus SARS-CoV-2 Dịch bắt đầu bùng phát từ tháng 12 năm 2019 thành phố Vũ Hán thuộc tỉnh Hồ Bắc miền Trung Trung Quốc sau lây lan nhiều quốc gia vùng lãnh thổ.Dịch bệnh xác định nhóm người bị viêm phổi khơng rõ ngun nhân, tiếp xúc chủ yếu với người buôn bán làm việc chợ bán buôn hải sản Hoa Nam, nơi bán động vật sống cho địa điểm bùng phát dịch bệnh Các nhà khoa học Trung Quốc sau phân lập loại coronavirus mới, WHO lúc tạm thời gọi 2019nCoV, có trình tự gen giống 9,5% với SARS- CoV trước đây.Sự lây nhiễm từ người sang người xác nhận với tỉ lệ bùng phát dịch tăng nhanh vào tháng năm 2020 Thời gian ủ bệnh từ đến 14 ngày, có chứng bệnh truyền nhiễm khoảng thời gian vài ngày sau hồi phục Triệu chứng phổ biến bệnh bao gồm: sốt, ho khó thở, gây thiệt mạng trường hợp nghiêm trọng.Ngày 11 tháng năm 2020, Ủy ban quốc tế phân loại virus đặt tên thức cho chủng virus corona SARS CoV-2.Ngày 11 tháng năm 2020, Tổ chức Y tế Thế giới (WHO) thức tuyên bố dịch Covid-19 đại dịch toàn cầu Cho đến chưa có thuốc điều trị đặc hiệu, biện pháp điều trị chủ yếu điều trị triệu chứng nâng cao thể trạng Vacxin phòng bệnh giai đoạn thử nghiệm Bệnh lây truyền từ người sang người qua tiếp xúc qua giọt bắn người bệnh ho hắt hơi, vi rút lây qua khơng khí làm thủ thuật khí dung Vì vậy, mà nhóm chúng em làm nên website nội dung học tập phần mong muốn góp chút sức lực vào cơng tun truyền giúp người ý thức nguy hiểm dịch bệnh từ nâng cáo tinh thần có trách nhiệm bảo vệ sức khỏe thân cho cộng đồng Phần Các tính web: Khi truy cập vào website với hàng cung cấp cho bạn tên quốc gia mà bạn muốn biết tình hình dịch bệnh nước Tiếp theo biểu đồ cập nhật tình trạng số người nhiễm bệnh, tử vong bình phục Chỉ cần di chuột vào website hiển thị tình hình nhiễm bệnh bình phục nước mốc thời gian Bên trang web số video hướng dẫn điều cần biết tiêm chủng thông điệp 5k y tế thống kê số liệu vòng 30 ngày gần Phần cuối phần thông tin quốc gia chịu ảnh hưởng nhiều từ đại dịch covid 19 Website cịn cung cấp tính chuyển đổi giao diện light/dark mode để người sử dụng chuyển đổi giao diện phù hợp với thời gian truy cập web, ví dụ dark mode sử dụng vào ban đêm nhằm tạo cảm giác dễ chịu cho mắt Phần Các kĩ thuật tạo web Website xây dựng với biểu đồ số liệu thời gian thực lấy nguồn từ trang web api.covid19api.com Mã nguồn website tạo ngôn ngữ: Javascript, Html CSS Trong Html chịu trách nhiệm tạo nên “bộ khung” trang web, Javascript chịu trách nhiệm phận tiểu tiết trang web, tạo biểu đồ, chuyển đổi trạng thái giao diện, gọi đổ liệu CSS tạo nên giao diện trang web Sau kĩ thuật khởi tạo, lấy liệu biểu đồ, bảng thống kê trang web này, chương trình tạo tính đặc biệt chuyển đổi light/dark mode, tìm kiếm số liệu cụ thể cho quốc gia, vùng lãnh thổ Khởi tạo, hiển thị bảng biểu a) Khởi tạo liệu ban đầu 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 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 tử vong 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) ); Hiển thị bảng thống kê nước có tỉ lệ người nhiễm cao 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 = ` ${casesByCountries[i].Country} $ {numberWithCommas(casesByCountries[i].TotalConfirmed)} $ {numberWithCommas(casesByCountries[i].TotalRecovered)} $ {numberWithCommas(casesByCountries[i].TotalDeaths)} `; 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 đổ 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 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 đổ 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 đổ 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 Quốc gia, vùng lãnh thổ a) Hiển thị danh sách tên 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) Đổ 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 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 chuyển đổi giao diện light/dark mode a) Khởi tạo tính cho toàn 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 thực 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 cho riêng đồ 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); }; Các chương trình lấy trả liệu a) Chương trình lấy liệu const covidApi = { //lấy liệu tổng quan số ca nhiễm, số ca chết, chung toàn giới tất nước getSummary: async () => { return await fetchRequest(covidApiEndPoints.summary()); }, //lấy liệu tổng quan số ca nhiễm, số ca chết, chung toàn giới qua nhiều mốc thời gian getWorldAllTimeCases: async () => { return await fetchRequest(covidApiEndPoints.worldAllTimeCases()); }, //lấy liệu số trường hợp ca nhiễm ca chết ca hồi phục nước qua ngày getCountryAllTimeCases: async (country, status) => { return await fetchRequest( covidApiEndPoints.countryAllTimeCases(country, status) ); }, //lấy liệu tổng quan số ca nhiễm, số ca chết, chung toàn giới từ ngày đến ngày getWorldDaysCases: async () => { return await fetchRequest(covidApiEndPoints.worldDaysCases()); }, //lấy liệu số trường hợp ca nhiễm ca chết ca hồi phụ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 = "https://api.covid19api.com/"; 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 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() + }-${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ả liệu //Nhận vào đường link api trả liệu kiểu json fetchRequest = async (url) => { const response = await fetch(url); return response.json(); }; 23 ... Đình Long truyền đạt kiến thức quý báu cho chúng em suốt thời gian học tập vừa qua Bài tiểu luận nhóm em tìm hiểu “web cập nhập thơng tin covid 19? ?? Tuy nhiên, thời gian học tập lớp không nhiều,... phần thông tin quốc gia chịu ảnh hưởng nhiều từ đại dịch covid 19 Website cung cấp tính chuyển đổi giao diện light/dark mode để người sử dụng chuyển đổi giao diện phù hợp với thời gian truy cập. ..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 Viễn thơng đưa mơn học Internet giao thức vào chương trình giảng dạy Đặc biệt, chúng em xin gửi lời cảm ơn