Công nghệ angular và firebase kết hợp với khai thác web trong xây dựng web âm nhạc

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGOẠI NGỮ - TIN HỌC TP.HCM KHOA CÔNG NGHỆ THÔNG TIN KHĨA LUẬN TỐT NGHIỆP CƠNG NGHỆ ANGULAR VÀ FIREBASE KẾT HỢP VỚI KHAI THÁC WEB TRONG XÂY DỰNG WEB ÂM NHẠC GIẢNG VIÊN HƯỚNG DẪN: TS Trần Minh Thái SINH VIÊN THỰC HIỆN: Phùng Gia Oai – 15DH110261 Nguyễn Hồ Ngọc Phú – 15DH110172 TP HỒ CHÍ MINH - THÁNG 7/2019 LỜI CẢM ƠN  Chúng em xin gửi lời cảm ơn sâu sắc đến thầy Trần Minh Thái, giúp đỡ tận tình tạo điều kiện cho chúng em vừa học hỏi tìm tịi hồn thành khố luận tốt nghiệp Trong suốt trình nghiên cứu thực hiện, thầy cho chúng em thông tin vơ hữu ích đưa nhiều hướng giải khác vấn đề, đồng thời cho chúng em nhận xét vô quý giá để ngày chúng em cải thiện không khố luận tốt nghiệp mà cịn kỹ tư duy, học hỏi nghiên cứu Nhờ dẫn thầy, chúng em tự định giải vấn đề nhanh hơn, dễ dàng Bên cạnh đó, chúng em gửi lời chân thành cảm ơn quý thầy cô Trường Đại Học Ngoại Ngữ Tin Học Thành Phố Hồ Chí Minh, đặc biệt thầy cô thuộc khoa Công Nghê Thông Tin nuôi dưỡng phát triển kiến thức chúng em suốt trình theo học trường với môn từ tảng đến nâng cao Trong suốt q trình ấy, với nhiệt tình thầy cơ, chúng em rèn luyện thân việc tự lập trình kinh nghiệm làm việc nhóm để chúng em lấy làm tảng để hồn thành khố luận tốt nghiệp Và khơng qn, chúng con/em/mình gửi lời cảm ơn đến gia đình, anh chị, bạn bè theo sát, ủng hộ tạo động lực, giúp đỡ chúng con/em/mình trình học tập sống Sự đồng hành điều quý giá hành trình học tập người Thành phố Hồ Chí Minh, ngày 18 tháng năm 2019 Học viên thực Phùng Gia Oai Nguyễn Hồ Ngọc Phú MỤC LỤC Chương GIỚI THIỆU Giới thiệu tổng quan Angular, Firebase, Web crawling Mục tiêu đề tài Nội dung thực Dự kiến kết Bố cục nội dung Chương CƠ SỞ LÝ THUYẾT Tìm hiểu framework Angular Sơ lược framework Angular Lịch sử phát triển Angular AngularJS Angular Các tính cốt lõi Ưu điểm nhược điểm Tổng quan NodeJs Giới thiệu NodeJs Các tính bật Cách thức NodeJs vận hành 10 Tổng quan Google Firebase 10 Giới thiệu Google Firebase .10 Lịch sử phát triển Google Firebase 11 NoSQL firebase .12 Các tính Google Firebase .13 Lợi ích từ việc sử dụng Google Firebase 16 Tìm hiểu Web Crawling 17 Giới thiệu Web Crawling [3] 17 Lợi ích hạn chế Web Crawling 18 Điều kiện để trích xuất thông tin từ trang web khác 18 Dữ liệu sau trích xuất nên xử lý nào? 19 Thư viện hỗ trợ 19 Chương MÔ TẢ ỨNG DỤNG VÀ CƠ SỞ DỮ LIỆU 22 Mô tả trang web TouchMusic 22 Mục tiêu phạm vi trang web TouchMusic 22 Các chức trang web TouchMusic 22 User case 24 User flow 37 Thiết kế sở liệu 46 Cách chuyển đổi từ liệu quan hệ sang liệu không quan hệ .46 Sơ đồ sở liệu quan hệ 47 Sơ đồ sở liệu không quan hệ 48 Chương CÀI ĐẶT HỆ THỐNG VÀ THIẾT KẾ GIAO DIỆN50 Cài đặt môi trường phát triển trang web 50 NodeJs .50 Node package module (NPM) 51 Trình viết code (IDE) 52 Kết nối với Firebase 52 Các bước thực cài đặt 53 Kết nối NodeJs với Angular (Phục vụ cho việc Crawling) 54 Thiết kế giao diện 57 Quy định trang web TouchMusic 57 Giao diện chức .59 KẾT LUẬN 85 Kết thực 85 Điểm bật .85 Vấn đề tồn 85 Hướng phát triển 86 TÀI LIỆU THAM KHẢO 87 DANH SÁCH BẢNG Bảng 3-1: Mô tả thành phần user case 24 Bảng 3-2: Mô tả user case bao quát với vai trò người dùng 25 Bảng 3-3: Mô tả user case với vai trị người dùng bình thường 26 Bảng 3-4: Mô tả user case với vai trò thành viên TouchMusic .27 Bảng 3-5: Mô tả user case với vai trò Admin hệ thống .29 Bảng 3-6: Mô tả user case quản lý hát với vai trò Admin 30 Bảng 3-7: Mô tả user case quản lý album với vai trò Admin 31 Bảng 3-8: Mô tả user case quản lý Country với vai trò Admin 32 Bảng 3-9: Mô tả user case quản lý Song type với vai trò Admin 33 Bảng 3-10: Mô tả user case kiểm tra user đăng album với vai trị Admin 34 Bảng 3-11: Mơ tả user case kiểm tra user đăng hát với vai trị Admin .35 Bảng 3-12: Mơ tả user case việc quản lý Account với vai trò Admin 36 Bảng 3-13: Danh sách thành phần User flow 37 Bảng 4-1: Chức trang chủ đầu 59 Bảng 4-2: Chức trang chủ 60 Bảng 4-3: Chức trang chủ 61 Bảng 4-4: Chức trang chủ 62 Bảng 4-5: Chức trang chủ 63 Bảng 4-6: Chức đăng nhập 64 Bảng 4-7: Chức đăng ký 65 Bảng 4-8: Chức phát nhạc 66 Bảng 4-9: Chức trang home 68 Bảng 4-10: chức trang tìm kiếm 69 Bảng 4-11: Chức trang hát video 71 Bảng 4-12: Chức bảng ca sĩ nhạc sĩ 73 Bảng 4-13: Chức trang thông tin người dùng 74 Bảng 4-14: Chức thay đổi ảnh đại diện 75 Bảng 4-15: Chức thêm playlist yêu thích 76 Bảng 4-16: Chức trang Admin 77 Bảng 4-17: Chức trang Admin quản lý user 78 Bảng 4-18: Chức trang admin quản lý nhạc theo quốc gia 79 Bảng 4-19: Chức trang Admin quản lý ca sĩ nghệ sĩ 80 Bảng 4-20: Chức trang Admin quản lý thể loại nhạc 81 Bảng 4-21: Chức Admin quản lý hát 82 Bảng 4-22: Chức Admin quản lý album 83 Bảng 4-23: Chức Admin quản lý việc cào liệu .84 DANH SÁCH HÌNH Hình 2-1: Request header 18 Hình 3-1: User case overview 25 Hình 3-2: Normal user Management .26 Hình 3-3: TouchMusic Member Management 27 Hình 3-4: Admin Management 29 Hình 3-5: Admin Song Management 30 Hình 3-6: Admin Album Management 31 Hình 3-7: Admin Country Management 32 Hình 3-8: Admin Song Type Management 33 Hình 3-9: Admin Checking User Upload Album 34 Hình 3-10: Admin Checking User Upload Song 35 Hình 3-11: Admin Account Management .36 Hình 3-12 Luồng thao tác Normal User 38 Hình 3-13: Luồng thao tác TouchMusic Member 39 Hình 3-14: Luồng thao tác Admin Management 40 Hình 3-15: Luồng thao tác Admin Account Management 41 Hình 3-16: Luồng thao tác Admin Album Management 41 Hình 3-17: Luồng thao tác Admin Song Management 42 Hình 3-18: Luồng thao tác Admin Performer Management 42 Hình 3-19: Luồng thao tác Admin User Upload Album Management 43 Hình 3-20: Luồng thao tác User Upload Song Mamagement .44 Hình 3-21: Luồng thao tác Admin Country Management 45 Hình 3-22: Luồng thao tác Admin Song Type Management 46 Hình 3-23: Mơ hình sở liệu quan hệ 47 Hình 3-24: Sơ đổ thực thể E&R cho sở liệu không quan hệ 48 Hình 3-25: Sơ đồ NoSQL 49 Hình 4-1: Kiểm tra cài đặt NodeJs 50 Hình 4-2: Kiểm tra cài đặt Node Package Module 51 Hình 4-3: Kiểm tra cài đặt Angular CLI .52 Hình 4-4: Thơng tin kết nối với Firebase 54 Hình 4-5: Tệp NodeJs Server.js .55 Hình 4-6: Kết khởi chạy NodeJs .56 Hình 4-7: Logo TouchMusic 58 Hình 4-8: Thương hiệu TouchMusic .58 Hình 4-9: Logo tổng quát để quảng báo hình ảnh 58 Hình 4-10:Giao diện trang chủ đầu .59 Hình 4-11: Giao diện trang chủ 60 Hình 4-12:Giao diện trang chủ 61 Hình 4-13: Giao diện trang chủ 62 Hình 4-14: Giao diện trang chủ 63 Hình 4-15: Form đăng nhập 64 Hình 4-16: Form đăng ký 65 Hình 4-17: Trình phát nhạc 66 Hình 4-18: Trang 67 Hình 4-19: Tìm kiếm .69 Hình 4-20: Bài hát video 70 Hình 4-21: Nghệ sĩ ca sĩ 72 Hình 4-22: Thơng tin người dùng 73 Hình 4-23: Thay đồi ảnh đại diện người dùng 75 Hình 4-24: Thêm Playlist yêu thích .76 Hình 4-25: Admin trang 77 Hình 4-26: Admin quản lý tài khoản user .78 Hình 4-27: Admin quản lý nhạc theo quốc gia 79 Hình 4-28: Admin quản lý ca sĩ nghệ sĩ 80 Hình 4-29: Admin quản lý thể loại nhạc .81 Hình 4-30: Admin quản lý hát 82 Hình 4-31: Admin quản lý album 83 Hình 4-32: Admin quản lý việc cào liệu 84 Giới Thiệu Chương GIỚI THIỆU Giới thiệu tổng quan Angular, Firebase, Web crawling Trong lĩnh vực lập trình web, để xây dựng nên trang web hồn chỉnh ln tồn phần chính, hay cịn gọi mảng front-end back-end Front-end thứ xây dựng để hiển thị cho người dùng gửi yêu cầu người dùng lên server, back-end thứ xây dựng để đón nhận yêu cầu gửi từ front-end xử lý chúng theo yêu cầu gửi trả kết cho front-end để thông báo cho người dùng Trong back-end trạng thái ổn định phát triển đặn phía front-end có nhiều phát triển mãnh mẽ cơng nghệ việc cải thiện hiệu suất tính hiệu dụng để giúp người dùng có trải nghiệm tốt hơn, bảo mật Trong đó, Angular [1] cơng nghệ phía front-end đang ưa chuộng thời điểm Angular framework có mã nguồn mở giúp cho lập trình viên tạo trang web phía client vơ nhanh hiệu Việc Angular ưa chuộng khơng mã nguồn mở mà Angular ln phát triển định kỳ Google với tháng có phiên cho Vì thế, Angular lựa chọn đáng tin cậy việc xây dựng phát triển trang web thời gian tới Với xu hướng mua sắm trực tuyến bắt đầu gia tăng nói riêng xu hướng tất cơng việc giải cú nhấp nói chung, hệ thống ngày nhận nhiều yêu cầu từ người dùng từ sinh nhu cầu tính truy xuất, trả kết nhanh để phục vụ cho người dùng lúc nhà phát triển Google cho giải pháp Firebase [2] Firebase công nghệ lưu trữ thời gian thực (realtime databse) hoạt động tảng đám mây phát triển gần Google để giải việc truy xuất nhanh cho người dùng Firebase xây dựng dựa tảng sở liệu không quan hệ (NoSQL) khơng thế, Firebase cịn giúp xác thực người dùng với Firebase Authenication kho lưu trữ liệu kiểu hình ảnh, nhạc, video, Trong bối cảnh ngày có nhiều dịch vụ mua sắm trực tuyến mở để thu hút người dùng việc nắm thơng tin sản phẩm đối thủ kinh doanh để chọn hướng kinh doanh tốt việc vô cần thiết quan trọng Để làm điều đó, giới lập trình viên phát triên thuật ngữ Web Trang Cài Đặt Hệ Thống Và Thiết Kế Giao Diện Bảng 4-12: Chức bảng ca sĩ nhạc sĩ Loại Cơng dụng chức Image Hình ảnh đại diện nghệ sĩ Content Tên nghệ sĩ List Danh sách Nhạc nghệ sĩ List Danh sách Album nghệ sĩ List Danh sách Video nghệ sĩ List Danh sach nghệ sĩ liên quan Stt - Hình Thơng tin người dùng tạo album u thích Hình 4-22: Thông tin người dùng Trang 73 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện Bảng 4-13: Chức trang thông tin người dùng Loại Công dụng chức Image Hình đại diện người dùng Button Thay đổi hình đại diện người dùng Stt Hình (Hình 5.2.10) Content Tên người dùng Form Thông tin người dùng Thay đổi thông tin người dùng List Danh sách playlist yêu thích tự lập Content Tên album Button Thêm playlist u thích (Hình 5.2.11) Trang 74 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện Thay đồi ảnh đại diện người dùng - Hình 4-23: Thay đồi ảnh đại diện người dùng Bảng 4-14: Chức thay đổi ảnh đại diện Stt Hình Loại Cơng dụng chức Image Hình đại diện người dùng người dùng lựa đưa vào Button Hùy thay đổi hình đại diện Button Thay đồi hình đại diện Trang 75 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện - Thêm playlist yêu thích tự tạo Hình 4-24: Thêm Playlist u thích Bảng 4-15: Chức thêm playlist u thích Loại Cơng dụng chức Input Điền tên cho playlist Button Thêm hình cho playlist Image Hình người dùng chọn đưa lên Stt Hình làm hình đại diện cho playlist Button Hủy hết tồn thơng tin thêm Button Tạo playlist Trang 76 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện - Admin Hình 4-25: Admin trang Bảng 4-16: Chức trang Admin Loại Cơng dụng chức Image Điền tên cho playlist Content Thêm hình cho playlist Link Mở tab Admin – User (Hình 4.26) Link Mở tab Admin – Country (Hình 4.27) Link Mở tab Admin – Performer (Hình 4.28) Link Mở tab Admin – SongType (Hình 4.29) Link Mở tab Admin – Song (Hình 4.30) Link Mở tab Admin – Album (Hình 4.31) Link Mở tab Admin – Crawling (Hình 4.32) 10 Button Đăng xuất tài khoản 11 Button Ẩn thông tin bảng trái Stt Hình Trang 77 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện Admin – User - Hình 4-26: Admin quản lý tài khoản user Bảng 4-17: Chức trang Admin quản lý user Loại Công dụng chức Input Tên bảng Button Tìm kiếm user Table Bảng thông tin user Button Chỉnh sửa user Button Xóa user Selector Chỉnh số lượng user muốn nhìn thấy Button Quay đầu trang Button Quay trang trước Button Chạy đến trang 10 Button Chạy đến cuối trang Stt Hình Trang 78 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện Admin –Country (Quốc gia) - Hình 4-27: Admin quản lý nhạc theo quốc gia Bảng 4-18: Chức trang admin quản lý nhạc theo quốc gia Loại Công dụng chức Input Tên bảng Button Tìm kiếm quốc gia Table Bảng thơng tin quốc gia Button Thêm quốc gia Button Chỉnh sửa quốc gia Button Xóa quốc gia Selector Chỉnh số lượng quốc gia muốn nhìn thấy Button Quay đầu trang Button Quay trang trước 10 Button Chạy đến trang 11 Button Chạy đến cuối trang Stt Hình Trang 79 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện Admin – Performer (Nghệ sĩ) - Hình 4-28: Admin quản lý ca sĩ nghệ sĩ Bảng 4-19: Chức trang Admin quản lý ca sĩ nghệ sĩ Loại Công dụng chức Input Tên bảng Button Tìm kiếm nghệ sĩ Table Bảng thông tin nghệ sĩ Button Thêm nghệ sĩ Button Chỉnh sửa nghệ sĩ Button Xóa nghệ sĩ Selector Chỉnh số lượng nghệ sĩ muốn nhìn thấy Button Quay đầu trang Button Quay trang trước 10 Button Chạy đến trang 11 Button Chạy đến cuối trang Stt Hình Trang 80 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện Admin – SongType (Thể loại) - Hình 4-29: Admin quản lý thể loại nhạc Bảng 4-20: Chức trang Admin quản lý thể loại nhạc Loại Công dụng chức Input Tên bảng Button Tìm kiếm thể loại nhạc Table Bảng thông tin thể loại nhạc Button Thêm thể loại nhạc Button Chỉnh sửa thể loại nhạc Button Xóa thể loại nhạc Selector Chỉnh số lượng loại nhạc muốn nhìn thấy Button Quay đầu trang Button Quay trang trước 10 Button Chạy đến trang 11 Button Chạy đến cuối trang Stt Hình Trang 81 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện Admin – Song - Hình 4-30: Admin quản lý hát Bảng 4-21: Chức Admin quản lý hát Loại Công dụng chức Input Tên bảng Button Tìm kiếm hát Table Bảng thơng tin hát Button Thêm hát Button Chỉnh sửa hát Button Xóa hát Selector Chỉnh số lượng hát muốn nhìn thấy Button Quay đầu trang Button Quay trang trước 10 Button Chạy đến trang 11 Button Chạy đến cuối trang Stt Hình Trang 82 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện Admin – Album - Hình 4-31: Admin quản lý album Bảng 4-22: Chức Admin quản lý album Loại Công dụng chức Input Tên bảng Button Tìm kiếm album Table Bảng thông album Button Thêm album Button Chỉnh sửa album Button Xóa album Selector Chỉnh số lượng album muốn nhìn thấy Button Quay đầu trang Button Quay trang trước 10 Button Chạy đến trang 11 Button Chạy đến cuối trang Stt Hình Trang 83 Cài Đặt Hệ Thống Và Thiết Kế Giao Diện Admin – Crawling - Hình 4-32: Admin quản lý việc cào liệu Bảng 4-23: Chức Admin quản lý việc cào liệu Loại Công dụng chức Input Tên bảng Tab Đào liệu web Zing Mp3 Tab Đào liệu web Nhaccuatui Tab Đào liệu web Chiasenhac Stt Hình Trang 84 Kết Luận KẾT LUẬN Kết thực Ứng dụng công nghệ vào trang web TouchMusic Trang web TouchMusic hoàn thiện để phục vụ cho người dùng người quản lý Có thể cào liệu trang web chủ đề âm nhạc là: nhaccuatui.com, zingmp3.vn Dữ liệu cào hát trang web Phục vụ cho việc tra cứu Đồng thời liệu cào đưa vào dữ liệu để làm phong phú hêm liệu Điểm bật Trang web xây dựng phát triển với công nghệ Với tính realtime Firebase mơ hình Single Page Application (SPA) Angular Người dùng nghe nhạc bình thường mà khơng bị gián đoạn nhạc chuyển sang trang khác TouchMusic Việc cào liệu đưa vào sở liệu để làm phong phú sở liệu Bên cạnh việc sử dụng NodeJs để cào liệu làm cho thời gian thực nhanh chóng Nắm bắt hát trang web kể giúp cho người dùng có hội tiếp xúc nhiều hát Các công nghệ mẻ nên tương lai có nhiều cập nhật với số tính hỗ trợ cho người dùng thế, công nghệ chào đón nhiều ngành lập trình Vấn đề tồn Người dùng chưa tự đăng tải nhạc album, ca sĩ nghệ sĩ lên hệ thống Người dùng chưa chỉnh sửa xố bình luận Người dùng với vai trị thành viên TouchMusic chưa chỉnh sửa xoá danh sách u thích Dữ liệu cào đơn giản chưa khai thác triệt để trang web Firebase sử dụng với hình thức miễn phí nên lượng liệu nhập xuất hạn chế Tồn số lỗi nhỏ hệ thống Trang 85 Kết Luận Chức tìm kiếm chưa được mở rộng hơn, tức phải điền thơng tin xác trả kết Cơ sở liệu NoSQL [4] thiết kế mặt chưa có thống nhất, đồng bộ, bị thừa trường, thuộc tính,… Dữ liệu đưa vào chưa chắt lọc rõ ràng, dễ tạo lỗi sở liệu Hướng phát triển - Chú trọng vào chức tìm kiếm trang web, trả kết tìm kiếm theo yêu cầu người dùng cung cấp thông tin liên quan có trùng với yêu cầu người dùng - Bổ sung nhiều thuộc tính bảng sở liệu, phát triển nhiều ràng buộc để cải thiện tính thống liệu, đồng thời tránh việc trùng lặp liệu xảy - Vá lỗi hệ thống, số lỗi ràng buộc liệu - Xây dựng ràng buộc cho liệu để tránh việc sai liệu - Thay đổi thiết kế trang web cho bước phù hợp với người dùng - Người dùng tự đăng tải nhạc, album, ca sĩ lên hệ thống chờ xét duyệt từ phía Admin - Tái cấu trúc thiết kế hệ thống để cải thiện hiệu suất hoạt động Trang 86 Tài Liệu Tham Khảo TÀI LIỆU THAM KHẢO [1] [2] [3] [4] Google, "Angular," [Online] Available: https://angular.io/ Google, "FireBase," [Online] Available: https://firebase.google.com/ "Web crawling," [Online] Available: https://en.wikipedia.org/wiki/Web_crawler E Evans, "NoSQL," 1998 [Online] Available: http://nosql-database.org [Accessed 2009] [5] Angular, "Angular Fire 2," [Online] Available: https://github.com/angular/angularfire2 [6] CherrioJS, "Cherrio," [Online] Available: https://github.com/cheeriojs/cheerio [7] GoogleChorme, "Puppeteer," [Online] Available: https://github.com/GoogleChrome/puppeteer [8] Material, "Angular Material," [Online] Available: https://material.angular.io/ [9] Joyent, "Nodejs," Node.js Foundation, [Online] Available: https://nodejs.org/en/Node.js Foundation [10] "Typescript," [Online] Available: https://www.typescriptlang.org Trang 87