21
CHƯƠNG 4. TRIỂN KHAI XÂY DỰNG
Nhận diện thương hiệu
Logo ứng dụng
Hình 4.1 Logo ứng dụng
Công nghệ áp dụng vào Đồ án
Với một dự án có quy mô lớn như vậy thì việc chọn lựa công nghệ và công cụ thực hiện là một vấn đề vô cùng quan trọng cho sự thành công của toàn bộ dự án, nhóm thực hiện đã thống nhất và lựa chọn các công nghệ mới nhất hiện nay để thực hiện. Sau đây là danh sách các công nghệ sẽ sử dụng.
4.2.1. Backend
Qui mô dự án dự tính khá lớn nên việc hoàn thiện dự án đòi hỏi phải có một quá trình lâu dài và có tính an toàn và bảo trì cao khi sử dụng và phát triển. Nhóm quyết định sử dụng framework hapiJS, một framework của NodeJS nổi tiếng sử dụng ngôn ngữ javascript làm nền tảng phát triển ứng dụng. Hỗ trợ các pattern phổ biến như singleton,… và sử dụng mô hình thiết kế ứng dụng hiện đại để phát triển một backend mạnh mẻ và hoàn thiện. Đi kèm với framework trên là một công cụ mạnh mẽ có tên là hapipal, với nó, người phát triển có thể nhanh chóng thiết lập được một dự án và xây dựng ngay lập tức.
22
Đường dẫn tham khảo của công cụ hapipal : https://hapipal.com/
Hình 4.2 Hapipal.- công cụ xây dựng backend cho dự án
Phần mềm quản lý đòi hỏi phải có một hệ quản trị cơ sở quản lý dữ liệu để lưu trữ thông tin. Đặc biệt thì đây phải là một hệ quản trị cơ sở dữ liệu quan hệ. Nhóm quyết định sử dụng PostgreSQL để áp dụng vào hệ thống của quản lý phòng lab.
Nói về ưu điểm của PostgreSQL thì đầu tiên chính là tốc độ của nó so với các hệ quản trị cơ sở dự liệu cùng loại thì nó được đánh giá là nhanh hơn rất nhiều và có hổ trợ những câu chức năng queries mạnh mẽ hỗ trợ nhà phát triển cải thiện tốc độ của ứng dụng. Ngoài ra thì đây cũng là một hệ quản trị cơ sở dữ liệu phổ biến và được sử dụng rất nhiều trong thời điểm gần đây so với các hệ quản trị cơ sở dữ liệu quen thuộc như MySQL hay Microsoft SQL server.
Đường dẫn tham khảo của công cụ hapipal : https://www.postgresql.org/
23
Để cải thiện tốc độ phát triển cho dự án cũng như đảm bảo tính bảo mật tránh các thể loại hack như SQLInjection quen thuộc thì nhóm quyết định lựa chọn ORM để làm công cụ để tương tác đến cơ sở dữ liệu PostgreSQL đã lựa chọn và ObjectionJS chính là một công cụ ánh xạ đến cơ sở dữ liệu được nhóm lựa chọn. Được phát triển dựa trên KnexJS là một công cụ queries cơ sở dữ liệu mạnh mẽ phục vụ cả MySQL và PostgreSQL. Công cụ trên giúp hỗ trợ đầy đủ các chức năng đơn giản như tạo bảng, ánh xạ, queries, join, transaction, trigger,… và đặc biệt là hỗ trợ migration, một chức năng quan trọng để đảm bảo hệ cơ sở dữ liệu hoạt động theo một trật tự duy nhất không phải truy cập vào hệ dữ liệu và tạo tay các bảng, …
Đường dẫn tham khảo ObjectionJS: https://vincit.github.io/objection.js/
Hình 4.4 ObjectionJS – ORM Database cho NodeJS
Hệ thống quản lý đòi hỏi phải có các vấn để tương tác thời gian thực ví dụ như thông báo, nhắn tín, báo cáo. Nhóm sử dụng socket.io, 1 module của nodeJS
được xây dựng nhằm mục đích tạo ra real time NodeJS
Application. Socket.IO cung cấp cho lập trình viên các đặc trưng như event, room và tự động phục hồi lại kết nối.
24
Cuối cùng là môi trường phát triển cho toàn bộ ứng dụng, nhóm lựa chọn docker để làm môi trường phát triển cho bản dev và deploy. Docker hiểu đơn giản thì Docker là một dự án mã nguồn mở giúp tự động triển khai các ứng dụng Linux và Windows vào trong các container ảo hóa. Docker cung cấp một lớp trừu tượng và tự động ảo hóa dựa trên Linux. Docker sử dụng những tài nguyên cô lập của Linux như cgroups, kernel, quản lý tệp để cho phép các container chạy độc lập bên trong một thực thể Linux. Nhóm sử dụng docker để chạy PostgresSQL và ứng dụng trên container của nó.
Đường dẫn tham khảo: https://docker.com/
Hình 4.5 Docker - Môi trường phát triên cho dự án
4.2.2. Front-end
Nhóm quyết định sử client side rendering để cải thiện tốc độ của ứng dụng giúp ứng dụng hoạt động mượt mà hơn vì code chạy trên browser, không cần load đi loại lại nhiều lần giống như việc server side rendering.
Có nhiều framework hay thư viện hỗ trợ cho việc SSR như Angular, Vue, ReactJS,… Nhóm đã thống nhất và sử dụng ReactJS là thư viện chính cho việc phát triển UI phía người dùng.
React (còn được gọi là ReactJShay React.js) là một thư viện javascript được tạo ra bởi sự cộng tác giữa Facebook và Instagram. Nó cho phép những nhà phát triển web tạo ra giao diện người dung nhanh chóng. Phần Views của Reactjs thường được hiển thị bằng việc chủ yếu dung các component mà chứa các component cụ thể hoặc các thẻ HTML.Nó cũng sử dụng khái niệm là Virtual DOM (DOM ảo). Virtual DOM tạo ra bản cache cấu trúc dữ liệu của ứng dụng trên bộ nhớ. Sau đó, ở mỗi vòng lặp, nó liệt kê những thay đổi và sau đó là cập
25
nhật lại sự thay đổi trên DOM của trình duyệt một cách hiệu quả. Điều này cho phép ta viết các đoạn code như thể toàn bộ trang được render lại dù thực tế là Reactjs chỉ render những component hay subcomponent nào thực sự thay đổi.
Một trong những đặc trưng duy nhất của ReactJS là việc render dữ liệu không những có thể thực hiện ở tầng server mà còn ở tầng client. Reactjs cực kì hiệu
quả: ReactJS tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn
tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều. Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng. Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí.
Đường dẫn tham khảo về ReactJS: https://reactjs.org/
Hình 4.6 ReactJS - Thử viện cho phát triển FrontEnd
Để cải thiệt tốc độ phát triển cho FrontEnd thì các framework về UI bắt đầu ra đời giúp cho người dùng co thể nhanh chóng tạo ra các bản release nhanh chóng cho ứng dụng các framework ui nổi tiếng cho ReactJS như material-ui, Ant- design, Chakra-ui, … giúp người phát triển ứng dụng dễ dàng hơn trong việc phát triển. Nhóm chọn Material-ui là framework trọng dự án lần này bởi vì đây là framework nổi tiếng và được mệnh danh là số 1 trong các loại framework về phát triển UI của ReactJS.
26
Hình 4.7 Material UI Frame worok cho phát triển UI
Nhằm tạo ra sự tương tác giữa UI và API và dễ dàng tracking các đường dẫn sẽ có phía API. Việc viết document cho API là một vấn để cần được thêm vào ngay từ những giai đoạn đầu xây dựng dự án. Nhóm sử dụng Swagger để thực hiện công việc nói trên với mục đích chính là tạo tính chuyên nghiệm và hướng đến việc bảo trì code một cách thuận lợi cho dự án sau này.
Đường dẫn tham khảo về Material-ui: https://swagger.io/
Hình 4.8 Swagger - Công cụ ghi API document cho dự án
UI/UX (All)
− Material UI − Dark mode
Welcome screen
− Chuyển đến screen đăng nhập − Chuyển đến screen đăng ký
27
Hình 4.9 Màn hình chào
Sign in (Đăng nhập)
− Đăng nhập bằng email − Validate form đăng nhập
− Báo lỗi khi nếu đăng nhập không thành công
28
Sign up (Đăng ký)
− Đăng ký bằng email
− Active tài khoản thông qua email
− Validate form đăng kí ( email, mật khẩu, username, password ) − Kiểm tra user trùng lặp
− Báo lỗi khi nếu đăng ký không thành công
29
Forgot Password (Quên mật khẩu)
− Lấy mật khẩu bằng email − Kiểm tra email có hợp lệ
30
User Profile
− Hiển thị thông tin user − Hiển thị banner
− Hiển thị số lượng người đã theo dõi kênh − Hiển thị số lượng kênh đã theo dõi
− Cho phép khởi tạo stream bằng 1 button ngay tại screen này − Chuyển đổi theme (dark mode)
− Thay đổi thông tin tài khoản − Thay đổi mật khẩu tài khoản − Thay đổi màu chat
− Đăng xuất
31
Following screen
− Hiển thị các category đã thích
− Hiển thị các kênh đã đăng ký và đang live
− Hiển thị các kênh đang live và nhiều người xem ( Suggestion channel ) − Hiển thị các streamer đã đăng ký
32
Discovery screen
− Hiển thị các category nổi bật bằng slider − Gợi ý 1 category phù hợp với user
− Liệt kê các category hàng đầu theo list − Hiển thị các nhãn gắn liền với category − Phân trang bằng load more action
33
Browse screen
− Hiển thị toàn bộ các kênh − Hiển thị toàn bộ các category
− Hiển thị các nhãn gắn liền với category
− Sắp xếp và lọc theo mong muốn bằng 1 dialog khi press vào button
34
Gamming screen
− Hiển thị toàn bộ các kênh có category là gaming
35
Detail stream screen
− Hiển thị video stream − Hiển thị tên streamer
− Hiển thị thông tin của strean (Description, viewer) − Cho phép user chưa đăng kí có thể đăng kí kênh − Cho phép user chưa đăng kí có thể đăng kí kênh − Trò truyện realtime tại kênh
− Trò truyện bằng emote
− Chủ kênh có quyền block các viewer từ phần trò chuyện
− Thông báo stream kết thúc đến các viewer khi streammer bị disconnect
36
Search screen
− Search theo tên kênh (tên streammer) − Lọc theo category
− Lọc theo tags
− Ưu tiên search với các kênh đã theo dõi hoặc đang online
− Áp dụng fulltext search phía backend để cải thiện hiệu quả search
37