Chương 1: Giới thiệu đề tài. Giới thiệu tổng quát về lý do thực hiện đề tài, ý tưởng và các công nghệ đang được chú ý nhiều hiện nay cùng với xu hướng giải trí kèm nghe nhạc của người dùng trên mạng ngày một tăng. - Chương 2: Cơ sở lý thuyết. Trang 3 Giới Thiệu Nghiên cứu về các công nghệ Angular, Firebase, NodeJs, Web crawling.
Tìm hiểu về cách hoạt động và một số quy tắc cùng những tính năng nổi bật để phục vụ cho việc xây dựng và phát triển trang web. - Chương 3: Mô tả ứng dụng và cơ sở dữ liệu. Mô tả các chức năng cơ bản trong ứng dụng và các luồng di chuyển của người dùng với các vai trò như: người dùng bình thường, thành viên TouchMusic và admin hệ thống. đồng thời thiết kế cơ sở dữ liệu từ mô hình SQL đến mô hình NoSQL - Chương 4: Cài đặt hệ thống và thiết kế giao diện Hướng dẫn cách cài đặt, tạo mới và khởi động môi trường xây dựng ứng dụng, cách kết nối với Firebase, NodeJs.
Bên cạnh đó, mô tả cách thiết kế giao diện và mô tả các tính năng trên từng trang. - Chương 5: Kết luận Đúc kết kết quả thực hiện trong suốt quá trình phát triển ứng dụng. Nêu ra điểm nổi bật và các vấn đề còn tồn đọng trong ứng dụng. Qua đó, đưa ra hướng phát triển trong tương lai - Chương 6: Tài liệu tham khảo Trích xuất các tài liệu liên quan được nêu ra trong khoá luận.
Trang 4 Cơ Sở Lý Thuyết Chương 2. CƠ SỞ LÝ THUYẾT Tìm hiểu framework Angular Sơ lược về framework Angular AngularJS [1] là một Javascript Frameword được tạo ra để xây dựng các ứng dụng web SPA (Single Page Application). Được phát triển từ năm 2009, hiện tại được duy trì bởi Google và đã cho ra đời rất nhiều phiên bản. Đây là một Framework mã nguồn mở hoàn toàn miễn phí và được hàng ngàn các lập trình viên trên thế giới ưa chuộng và sử dụng.
Framework này được coi là công nghệ Web 2.0 phát triển khá mạnh ở nước ngoài, và gần đây các công ty của Việt Nam đang chú trọng đến nó. Để học được AngularJS thì bạn cần phải có kiến thức cơ bản về Javascript, biết cách xử lý object,. và nếu bạn chuyên sâu về Javascript thì đó là một lợi thế. Vì bản chất của Angular là hoạt động dạng Single Page, sử dụng API để lấy dữ liệu.
Làm việc với AngularJS cũng giống như đang làm việc với Ajax, sử dụng các cơ chế bind data, hoạt động theo mô hình MVC và sử dụng service để tương tác với dữ liệu từ server. Lịch sử phát triển Angular AngularJS được phát triển từ năm 2009 bởi Misko Hevery và một người bạn của anh là Adam Abrons. Nó chỉ được coi là một dự án mã nguồn mở và được cho ra mắt phiên bản đầu tiên vào năm 2012. Trong khoảng thời gian đó Misko Hevery đã tham gia vào một dự án có tên Google Feedback (Phản hồi Google) với tư cách là một lập trình viên và làm việc bán thời gian.
Misko Hevery và 2 lập trình viên khác đã viết 17.000 dòng mã cho dự án Google Feedback trong vòng 6 tháng. Số lượng mã ngày càng lớn và Misko Hevery nhận thấy rằng nó càng ngày khó để sửa đổi và kiểm soát lỗi phát sinh. Chính vì vậy Misko Hevery đã đánh cược với người quản lý của mình rằng anh có thể viết lại toàn bộ mã cho Google Feedback bằng cách sử dụng dự án GetAngular của mình trong 2 tuần. Hevery đã thua cuộc thay vì 2 tuần anh đã mất 3 tuần để hoàn thành công việc, tuy nhiên mã của dự án đã giảm từ 17.500 dòng - Một con số khá đáng kể.
Nhờ sự thành công của Hevery, người quản lý của anh ấy Brad Green đã chú ý và phát triển AngularJS. AngularJS đã thực sự tăng tốc trong thời gian đó. Trang 5 Cơ Sở Lý Thuyết AngularJS và Angular Thực tế là Angular có 2 phiên bản hoàn toàn khác nhau với cách tổ chức cấu trúc khác nhau, phiên bản 1 và phiên bản khác 1. - Phiên bản 1: - Phiên bản 1 có tên chính thức là AngularJS, hiện tại nó vẫn đang được phát triển và hỗ trợ (LTS – Long Term Support).x được phát hành và hiện tại là 1.8 - Phiên bản Angular1 thực sự dựa trên Javascript, các lập trình viên sẽ viết theo mã ngôn ngữ Javascript, vì vậy có vẽ là dễ đọc dễ làm và các nhà tuyển dụng dễ tìm được ứng viên.
Nhưng về mặt hiệu năng, nó luôn bị cộng đồng lập trình viên đem ra so sánh với ReactJS. - Phiên bản 2,4,5,6 - Bắt đầu từ phiên bản 2 nó có tên chính thức là Angular. Tháng 12 năm 2018 phiên bản 7 chính thức được tung ra. - Angular phiên bản 2 trở lên có tư duy thay đổi hoàn toàn so với Angular1.
Sự thay đổi này được tạo ra với tham vọng sẽ giúp Angular đánh bại ReactJS. - Một số cải tiến của Angular theo tư duy mới: - Component: - Ý tưởng chủ đạo của Angular(4) mới là Component. - Component không có gì xa lạ trong ReactJS, nhưng Component là khái niệm mới mà Angular1(AngularJS) không có. Component được Angular áp dụng để tạo cấu trúc code rỏ ràng và có khả năng tái sử dụng lại các component có sãn.
- Typescript: - Typescript được Microsoft phát triển để viết Javascript mang phong cách theo tính hướng đối tượng (Object-Oriented). Bản thân Javascript nguyên thủy được thiết kế rất đơn giản và theo hướng chức năng ( Functional programming) nên sẽ không có tính năng kế thừa, đa hình,. Typescript [4] mang một số tính năng cho Javascript như: kế thừa, kiểu dữ liệu, hàm khởi tạo,. Có thể nói, Typescript làm cho Javascript mang phong cách rất “Java”.
Về mặt bản chất nhiều cú pháp của Typescript không được trình duyệt hiểu, vì vậy nó không thể chạy trực tiếp trên trình duyệt, nó cần 1 bước đó là biên dịch (compile) mã Trang 6 Cơ Sở Lý Thuyết Typescript thành Javascript thông thường được biết tới như là Language specification ( Đặc tả ngôn ngữ ). Các tính năng cốt lõi Sau đây là các tính năng cốt lõi: - Data-Binding: Tự đồng bộ dữ liệu giữa Model và View. - Scope: Đây là những đối tượng kết nối giữa Controller và View. - Controller: Đây là những hàm Javascript xử lý kết hợp với bộ điều kiển Scope.
- Service: Sử dụng các API để thao tác với BD. - Filers: Bộ lọc lọc các thành phần của 1 mảng trả về mảng mới. - Directives: Đánh dấu vào các yếu tố của DOM, nghĩ là sẻ tạo ra các thẻ HTML tùy chỉnh. - Templates: Hiển thị thông tin từ Controller, đây là một thành phần của View.
- Routing: Chuyển đổi giữa các action trong Controller. - MVC: Mô hình chia thành chức năng riêng biệt Model, View , Controler. Đây là một mô hình khá hay nhưng trong Angular nó được chế biến lại một chút gần giống với MVVM ( Model View View Model ). - Deep Linking: Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng trong các URL để nó có thể đánh dấu được với công cụ tìm kiếm.
- Dependency Injection: Angular giúp các nhà phát triển tạo ứng dụng dễ dàng hơn, dễ phát triển, hiểu và thử nghiệm dễ dàng Ưu điểm và nhược điểm - Ưu điểm: Angular cho phép tạo ra các ứng dụng một cách đơn giản, code sạch (clean code). Angular sử dụng data binding giống .NET với tính năng liên kết với HTML nên giúp người dùng cảm thấy dễ chịu. Angular đang ở giai đoạn thử nghiệm. Angular có thể chạy trên hâu hết các trình duyệt điện thoại thông minh.
- Nhược điểm: Không an toàn: được phát triển từ Javascript, phía máy chủ phải thường xuyên xác nhận quyền để hệ thống chạy trơn chu. Trang 7 Cơ Sở Lý Thuyết Phụ thuộc: Nếu người dùng vô hiệu hóa Javascript thì website sẽ không hoạt động. Tổng quan về NodeJs Giới thiệu NodeJs Javascript không chỉ là ngôn ngữ dành cho phía Client – frontend mà trong giai đoạn phát triễn gần đây Javascript đã được phát triễn để có thể chạy được trên phía Server – backend và điều đó đã được minh hoạ qua NodeJs. NodeJs [5] là một nền tảng chạy trên môi trường V8 Javascript runtime - một trình thông dịch Javascript cực nhanh chạy trên trình duyệt Chrome.
Bên cạnh đó, nó còn là một mã nguồn mở được sử dụng rộng bởi hàng ngàn lập trình viên trên toàn thế giới. NodeJs có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OS X nên đó cũng là một lợi thế. NodeJs cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất. Các tính năng nổi bật - Realtime (thời gian thực: Khi nói đến NodeJs thì phải nghĩ tới vấn đề Realtime.
Realtime ở đây chính là xử lý giao tiếp từ client tới máy chủ theo thời gian thực. Giống như khi bạn lướt Facebook thì mỗi khi bạn comment hay like một topic nào đó thì ngay lập tức chủ topic và những người đã comment trên đó sẽ nhận được thông báo là bạn đã comment. - Bất đồng bộ, đơn luồng: Hãy bắt đầu với khái niệm phân biệt giữa đồng bộ (sync) với không đồng bộ (async). Nói nôm na việc xử lý đồng bộ có nghĩa là code sẽ chạy tuần tự từ trên xuống dưới, code nào viết trước sẽ chạy trước, code viết sau sẽ chạy sau, ngược lại, xử lí bất đồng bộ là những xử lý mà đoạn code ở dưới vẫn có thể được xử lý tiếp tục trong khi những đoạn code trên vẫn chưa xử lý xong và trả về kết quả.
Tuy nhiên, cách xử lý của Javascript về bất đồng bộ không giống như cách suy nghĩ về Ajax hay cách hoạt động của hàm setimeout(). Mà đây là một cách xử lý mới, lưu ý Javascript là một ngôn ngử xử lý đơn luồng (single thread), tức là nó chỉ có thể xử lý một tác vụ trong một thời điểm nhất định. Cách xử lý của Javascript về bất đồng bộ có thể được minh hoạ như thế này: Trang 8 Cơ Sở Lý Thuyết Giả sử Mr.A là nhân viên tổng đài trực điện thoại, anh ta sẽ nhận các cuộc điện thoại và trả lời những yêu cầu từ đầu dây bên kia. Tuy nhiên, trong cùng một thời điểm Mr.A chỉ có thể nhận và giải quyết 1 cuộc điện thoại, vì thế nếu có 2 cuộc gọi trong cùng một thời điểm thì Mr.A chỉ có thể nhận và xử lý 1 cuộc gọi xong thì mới có thể giải quyết tiếp cuộc gọi còn lại, tức là sẽ có 1 cuộc gọi sẽ chuyển sang trạng thái bận, ngắt kết nói, không thực hiện.
Tình huống này được gọi là đơn luồng (single thread). Nhưng thực tế có rất là nhiều nhân viên trực điện thoại như Mr.