xây dựng trang web trực quanhoá dữ liệu dân số thế giới

Mô tả ứng dụng Xây dựng trang web trực quan hóa dữ liệu dân số thế giới cho phép người dùng cóthể xem được số lượng dân số, mật độ, số tuổi trung bình, tỉ lệ nam- nữ của các nướctrên thế

ĐẠI HỌC QUỐC GIA HÀ NỘI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

BÁO CÁO DỰ ÁN CÔNG NGHỆ

ĐỀ TÀI: XÂY DỰNG TRANG WEB TRỰC QUAN

HOÁ DỮ LIỆU DÂN SỐ THẾ GIỚI

Giảng viên hướng dẫn: ThS Vương Thị Hải Yến

Hà Nội - 2022

LỜI CẢM ƠN

Để hoàn thành môn Dự án công nghệ này trước hết nhóm em xin gửi đến quý thầy

cô giảng viên trong khoa Công nghệ thông tin, Trường Đại học Công Nghệ - Đại học Quốc gia Hà Nội lời cảm ơn chân thành

Nhóm chúng em xin cảm ơn cô Vương Thị Hải Yến đã định hướng, hướng dẫn, giúp đỡ bọn em nhiệt tình, chia sẻ những kinh nghiệm thực tế để nhóm em có thể hoàn thành tốt môn học này

Vì kiến thức bản thân còn hạn chế, trong quá trình học tập, hoàn thiện dự án này chúng em không tránh khỏi những sai sót, rất mong nhận được những ý kiến đóng góp từ thầy cô

MỤC LỤC

I Giới thiệu ứng dụng 1

1 Mô tả ứng dụng 1

2 Các công việc thực hiện trong ứng dụng 1

II Tóm tắt công nghệ sử dụng trong dự án 2

1 Front End 2

a HTML 2

b CSS 3

c Javascript 4

d ReactJS 4

e React Hooks 5

2 Back End 6

III Về quá trình thực hiện dự án của sinh viên 7

1. Cơ sở dữ liệu 7

a.Nguồn cấp dữ liệu 7

b.Quá trình chuyển đổi nguồn cấp dữ liệu 7

2 Cấu trúc project và hướng dẫn sử dụng 8

a Frontend 8

b Backend 8

c.Build app 9

3 Giao diện trang web 10

IV Kết quả đạt được 12

V Tài liệu tham khảo 13

I Giới thiệu ứng dụng

1 Mô tả ứng dụng

Xây dựng trang web trực quan hóa dữ liệu dân số thế giới cho phép người dùng có thể xem được số lượng dân số, mật độ, số tuổi trung bình, tỉ lệ nam- nữ của các nước trên thế giới từng năm thông qua biểu đồ và bảng thống kê

2 Các công việc thực hiện trong ứng dụng

- Xây dựng giao diện, database, xử lý số liệu dân số, mật độ dân số, tuổi thọ trung bình

- Viết API kết nối hệ thống

- Hiển thị các số liệu thành biểu đồ, bảng

- Sửa lỗi trong quá trình cài đặt và vận hành

II Tóm tắt công nghệ sử dụng trong dự án

1 Front End

a HTML

HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong Website Người ta thường sử dụng HTML trong việc phân chia các đoạn văn, heading, links, blockquotes, …

Một Website thường chứa nhiều trang con và mỗi trang con này lại có một tập tin HTML riêng Lưu ý, HTML không phải là ngôn ngữ lập trình Điều này có nghĩa là nó không thể thực hiện các chức năng “động” Hiểu một cách đơn giản hơn, cũng tương tự như phần mềm Microsoft Word, HTML chỉ có tác dụng bố cục và định dạng trang web HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho thế giới mạng

HTML document có đuôi file dạng html hoặc htm Ta có thể xem chúng bằng các trình duyệt web hiện hành như Google Chrome, Firefox, Safari, … Nhiệm vụ của trình duyệt là đọc những file HTML này và “biến đổi” chúng thành một dạng nội dung visual trên Internet sao cho người dùng có thể xem và hiểu được chúng

Thông thường, một Website sẽ có nhiều HTML document (ví dụ: trang chủ, trang blog, trang liên hệ, …) và mỗi trang con như vậy sẽ có một tệp HTML riêng Mỗi tài liệu HTML bao gồm 1 bộ tag (hay còn gọi là element) Nó tạo ra một cấu trúc tương tự như cây thư mục với các heading, section, paragraph, … và một số khối nội dung khác Hầu hết tất cả các HTML element đều có một tag mở và một tag đóng với cấu trúc

<tag></tag>

HTML được sử dụng để tạo bố cục, cấu trúc trang web Nó có một số ưu điểm sau:

• Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn

• Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay

• Học HTML khá đơn giản

2

• Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao

• Sử dụng mã nguồn mở, hoàn toàn miễn phí

• HTML là chuẩn web được vận hành bởi W3C

• Dễ dàng để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP, Node.js, …) Bên cạnh ưu điểm, HTML cũng có các nhược điểm nhất định Cụ thể như sau:

• Chỉ được áp dụng chủ yếu cho web tĩnh Nếu muốn tạo các tính năng động, lậptrình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3 (ví

dụ như: PHP)

• Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như header, footer

• Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ, một số trình duyệt cũ không render được tag mới Do đó, dù trong HTML document có

sử dụng các tag này thì trình duyệt cũng không đọc được)

• Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML

b CSS

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng, …thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời

c Javascript

Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa Javascript được sử dụng rộng rãi trong các ứng dụng Website Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, trên máy tính lẫn điện thoại

Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt Nó có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend

Ưu điểm của javascript là có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows, macOS cho đến các hệ điều hành trên mobile Là một ngôn ngữ dễ tiếp cận, sẽ

dễ dàng học nó mà không cần phải cài đặt quá nhiều phần mềm

Nhược điểm là rất dễ dàng bị soi code nên dễ bị khai thác Hacker có thể nhập một đoạn code bất kì vào khung console của trình duyệt, lúc này trình duyệt sẽ hiểu rằng đoạn code đó là chính thống, nên hacker có thể gửi nhửng request lên server một cách dễ dàng

d ReactJS

Reactjs là một thư viện Javascript mã nguồn mở hỗ trợ xây dựng các thành phần giao diện nhanh gọn và tiện lợi Bình thường các lập trình viên sẽ nhúng javascript vào

4

code HTML thông qua các attribute như AngularJS nhưng với Reactjs làm việc như một thư viện cho phép nhúng HTML vào javascript thông qua JSX Qua đó ta có thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các component dễ hiểu và dễ sử dụng hơn Thành phần cơ bản của React được gọi là components Syntax để viết HTML sử dụng Javascript để render Ta có thể tạo ra một component bằng các gọi phương thức createClass của đối tượng React, điểm bắt đầu khi tiếp cận với thư viện này Có thể lồng nhiều component vào nhau thông qua lệnh return của phương thức render

Lợi ích khi sử dụng Reactjs:

• ReactJS giúp cho việc viết các đoạn code Javascript sẽ trở nên dễ dàng hơn vì nósử dụng một cú pháp đặc biệt đó chính là cú pháp JSX Thông qua JSX cho phép nhúng code HTML và Javascript

• ReactJS cho phép Developer phá vỡ những cấu tạo UI phức tạp thành những component độc lập Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây Developer dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component đơn giản hơn

• Đi kèm với ReactJS là rất nhiều các công cụ phát triển giúp cho việc debug code một cách dễ dàng hơn

• Một trong những ưu điểm nữa của ReactJS đó là sự thân thiện với SEO Hầu như các JS Frameworks không thân thiện với các tìm kiếm mặc dù đã được cải thiện nhiều nhưng dưới sự hỗ trợ của các render dữ liệu trả về dưới dạng web page giúp cho SEO chuẩn hơn

e React Hooks

Khi làm việc với các React Component chúng ta cần phải thao tác rất nhiều với state, props hay life cycle Và kể từ phiên bản 16.8 trở đi React cung cấp một chức năng

mới đó là React Hooks, chức năng này cho phép thay thế việc sử dụng state thông thường bằng các khái niệm mới như useState, useEffect…

Việc sử dụng React Hooks cho phép sử dụng state, hay các tính năng khác của React

mà không cần phải viết một class component dài dòng

Chúng ta có thể hiểu React Hooks là một chức năng được xây dựng trong React cho phép chúng ta có thể sử dụng state và life cycle bên trong một functional components Hooks đem lại một vài lợi ích khi làm việc như:

• Cải thiện hiệu suất làm việc bằng cách có thể tái sử dụng code

• Các thành phần được trình bày khoa học hơn

• Sử dụng một cách linh hoạt trong component tree

2 Back End

Framework String Boot của Java

Ưu điểm nổi bật của String Boot

• Được phát triển tối ưu sao cho cấu hình XML trở nên đơn giản nhanh chóng và dễ dàng nhất trong Spring

• Gia tăng được năng suất trong quá trình lập trình

• Giảm ở mức tối thiểu thời gian lập trình

• Giúp người dùng mặc dù không có nhiều kiến thức lập trình vẫn có thể xây dựng được một ứng dụng

6

III Về quá trình thực hiện dự án của sinh viên

1 Cơ sở dữ liệu

a Nguồn cấp dữ liệu

Dữ liệu được lấy từ báo cáo “2022 Revision of World Population Prospects” của Vụ Kinh tế và Xã hội, Liên Hợp Quốc (UN DESA) Dữ liệu trình bày các ước tính dân số từ năm 1950 đến nay cho 237 quốc gia và vùng lãnh thổ, bao gồm kết quả của 1758 cuộc tổng điều tra dân số quốc gia được thực hiện từ năm 1950 đến năm 2022, cũng như thông tin từ các hệ thống đăng ký quan trọng và từ 2890 cuộc điều tra ngẫu nhiên ở mỗi cấp độ toàn cầu, khu vực và quốc gia Bản sửa đổi năm 2022 cũng trình bày các dự báo dân số đến năm 2100 cho mỗi cấp độ địa lý

Link: https://population.un.org/wpp/

b Quá trình chuyển đổi nguồn cấp dữ liệu

Nguồn dữ liệu được trình bày trong các tệp Excel (dưới dạng CSV) hiển thị các chỉ

số nhân khẩu học chính cho từng nhóm phát triển của Liên Hợp Quốc trong giai đoạn

1950 - 2100 Trong dự án, chúng ta chỉ quan tâm đến các chỉ số cơ bản gồm: dân số, mật

độ, độ tuổi trung bình và tỷ lệ gia tăng tự nhiên Dữ liệu được xử lý và đưa vào bảng SQL

có cấu trúc hình bên dưới:

Trong đó:

 countriesId: mã quốc gia (ISO 3166-1 numeric)

 name: tên quốc gia

 year: năm thống kê (1950-2100)

 population: dân số

 density: mật độ dân số

 mediumAge: độ tuổi trung bình

 growthRate: tỷ lệ gia tăng tự nhiên

2 Cấu trúc project và hướng dẫn sử dụng

a Frontend

 App.js: chứa các header và tabs

 pages: chưa nội dung của các tabs

 components: chứa các component gồm mapchart, legend, table, linechart, loader

 locale: chứa file dịch từ tiếng Anh sang tiếng Việt

b Backend

8

c Build app

 Sử dụng lệnh npm i, khởi động app bằng lệnh npm start

 Cấu hình server: project structures -> project, chọn SDK là Java 11

 Run configurations

3 Giao diện trang web

 Giao diện chính của trang web được chia thành 3 phần: Dân số, mật độ và tuổi thọ trung bình Mặc định giao diện sẽ hiển thị dữ liệu dưới dạng bản đồ thế giới

 Khi bấm vào mỗi quốc gia, phần lãnh thổ của mỗi quốc gia được tô màu đỏ, hiển thị tên và thông số cần xem

 Phần chú giải hiển thị phân cấp số liệu theo màu sắc

10

 Phần góc phải gồm 3 nút chức năng: chọn năm hiển thị (1950-2100), tùy chỉnh ngôn ngữ (tiếng Anh, tiếng Việt) và chuyển sang chế độ xem dưới dạng bảng

 Ở chế độ xem dưới dạng bảng, người dùng có thể tìm kiếm tên của từng quốc gia qua search bar Bảng dân số có thêm cột tỉ lệ gia tăng dân số tự nhiên

 Khi nháy chuột vào từng quốc gia sẽ hiển thị biểu đồ đường biểu diễn giá trị theo từng giai đoạn tính từ 1950-2100

IV Kết quả đạt được

Qua quá trình thực tập tại công ty, em đã tích lũy được rất nhiều kiến thức và được rèn luyện nhiều kỹ năng quan trọng và cần thiết cho lập trình viên

Kiến thức thu nhập được:

- Ngôn ngữ Javascript, thư viện ReactJs, React Hooks

Kỹ năng viết giao diện theo chuẩn UI, UX và theo các quy chuẩn của công ty -Kiến thức về công cụ Git, luồng hoạt động của Git ở công ty

- Cách viết mã nguồn chuẩn theo convention, cách đặt tên file, hàm, biến trong source code

- Cách phân tích yêu cầu, vẽ biểu đồ use case, thiết kế database phù hợp với từng

dự án

Kỹ năng tích lũy được:

- Kỹ năng làm việc nhóm: báo cáo các nhiệm vụ hàng ngày và trao đổi nếu có những yêu cầu chưa rõ ràng Sẵn sàng trao đổi, học hỏi các bạn, anh hướng dẫn khi gặp một vấn đề khó

- Khả năng tìm hiểu trên mạng khi gặp một vấn đề nào đó khó giải quyết, học cách tự giải quyết vấn đề (luôn tự giải quyết vấn đề trước khi hỏi)

- Quản lý dự án phần mềm, ước lượng thời gian phát triển, phát triển phần mềm đúng tiến độ, cân nhắc những phần khó và dễ trong dự án để tiến hành phát triển đúng thời gian được giao

12

V Tài liệu tham khảo

[1] HTML: https://www.w3schools.com/html/html_intro.asp [2] CSS: https://www.w3schools.com/css/css_intro.asp [3] React Bootstrap: https://react-bootstrap.github.io/ [4] ReactJS: https://reactjs.org/

[5] React Hooks: https://reactjs.org/docs/hooks-intro.html [6] Javascript: https://www.javascript.com/

[7] Rikkeisoft: https://vi.wikipedia.org/wiki/Rikkeisoft

………

………

………

………

………

………

………

………

………

………

………

………

………

Điểm số: …… Điểm chữ: ………

Hà Nội, ngày tháng năm 2022 Xác nhận của công ty Người hướng dẫn

(Đóng dấu) (Ký, ghi rõ họ tên)

14