Báo cáo thực tập chuyên ngành

NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC NGHIỆM MÔN TTCN KỸ THUẬT PHẦN MỀM Đề tài Tìm hiểu Angular và phát triển.

BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN - - BÁO CÁO THỰC NGHIỆM MÔN: TTCN KỸ THUẬT PHẦN MỀM Đề tài: Tìm hiểu Angular phát triển ứng dụng Giáo viên : Ths Hồng Quang Huy Nhóm số : 13 Lớp 20212IT6041004 : Hà Nội, 2022 BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN - - BÁO CÁO THỰC NGHIỆM MƠN: TTCN KỸ THUẬT PHẦN MỀM Đề tài: Tìm hiểu Angular phát triển ứng dụng Giáo viên : Ths Hồng Quang Huy Nhóm số : 13 Lớp 20212IT6041004 : Thành viên: Đặng Thành An – 2019605444 Nguyễn Thái Bảo – 2019604082 Hà Nội, 2022 MỤC LỤC MỞ ĐẦU 1 Lý chọn đề tài Bố cục đề tài CHƯƠNG 1: TỔNG QUAN VỀ ANGULAR Khái niệm Kiến trúc Angular (Angular Architecture) 3 Các tính Angular 4 Angular CLI .4 Ưu điểm nhược điểm Angular .5 Một số trang web phổ sử dụng Angular CHƯƠNG 2: LÀM VIỆC VỚI ANGULAR Làm việc với Angular .7 Các thành phần (Components) .7 Các mẫu (Templates) .8 3.1 Nội suy văn (text interpolation) .8 3.2 Câu lệnh mẫu (statements) 3.3 Liên kết (Binding) 3.4 Pipes .10 Chỉ thị (Directive) 11 4.1 Các thị thuộc tính tích hợp 11 4.2 Chỉ thị cấu trúc tích hợp 12 Dependency injection .14 Hướng dẫn dành cho nhà phát triển Angular .15 6.1 Định tuyến Angular 15 6.2 Biểu mẫu 17 6.3 HTTP Client 17 CHƯƠNG 3: ỨNG DỤNG PHÁT TRIỂN 19 Khảo sát toán 19 Phân tích thiết kế 20 2.1 Biểu đồ use case hệ thống 20 2.2 Biểu đồ lớp hệ thống 21 Cài đặt chương trình .21 PHỤ LỤC 29 Điều kiện tiên 29 Thiết lập môi trường .29 Cài đặt Angular CLI 30 Tạo không gian làm việc ứng dụng 30 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 32 Kết luận: 32 1.1 Kết đạt được: 32 1.2 Chức phát triển: 32 Hướng phát triển: 32 LỜI CẢM ƠN 33 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN MỞ ĐẦU Lý chọn đề tài Ngày nay, doanh nghiệp phấn đấu cho diện trực tuyến hiệu Do đó, nhu cầu khung (framework) phát triển web mạnh mẽ với tính tiên tiến mức cao Angular khung phát triển web (web development framework) phổ biến cung cấp trải nghiệm người dùng phong phú, khả phản hồi nhanh (fast responsiveness) khả bảo trì mã (code maintainability) Đây framework sử dụng nhiều thứ tư theo Khảo sát Stack Overflow năm 2021 Công cụ tạo vào năm 2009 Google để hỗ trợ phát triển web Nó JavaScript framework tìm kiếm nhiều nhằm mục đích làm cho việc phát triển front-end trở nên đơn giản dễ tiếp cận nhiều Nhiều tổ chức nhận phát triển kinh doanh họ, việc xây dựng ứng dụng web ứng dụng di động cách sử dụng Angular giúp họ cung cấp trải nghiệm người dùng phong phú, dễ truy cập, tốc độ suất Vì vậy, Angular (JavaScript framework) với kiến trúc MVVM ưu tiên để phát triển ứng dụng web thiết bị di động tương tác có giao diện người dùng khai báo, mã quán, cấu trúc mô-đun để hỗ trợ ứng dụng trang đơn (SPA) Nhận thức quan trọng tiện lợi sử dụng Angular việc xây dựng web ứng dụng trang đơn (SPA), chúng em xin tìm hiểu trình bày kiến thức liên quan đến Angular Qua xây dựng sản phẩm dựa kiến thức tìm hiểu NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN Bố cục đề tài Nội dung gồm chương  Chương 1: Tổng quan Angular Giới thiệu Angular: khái niệm, ưu nhược điểm, đặc trưng,…  Chương 2: Làm việc với Angular Hướng dẫn cách làm việc với Angular: thành phần, lệnh cách hoạt động lệnh  Chương 3: Ứng dụng phát triển Xây dựng ứng dụng demo có sử dụng Angular Ngồi nội dung ra, phần Phụ lục hướng dẫn cách cài đặt IDE, môi trường cần thiết để viết mã Angular NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN CHƯƠNG 1: TỔNG QUAN VỀ ANGULAR Khái niệm Angular front-end framework mã nguồn mở Google phát triển để tạo ứng dụng web đại sinh động Nó sử dụng ngơn ngữ lập trình TypeScript dựa JavaScript để loại bỏ mã không cần thiết đảm bảo ứng dụng nhẹ nhanh Angular giúp xây dựng ứng dụng trang đơn (SPA – Single Page Application) tương tác động thông qua tính hấp dẫn bao gồm tạo khn mẫu, ràng buộc hai chiều, mơ-đun hóa, xử lý API RESTful, dependency injection xử lý AJAX Kiến trúc Angular (Angular Architecture) Angular tuân theo kiến trúc MVC, sơ đồ MVC framework hình đây: Hình 1.1 Sơ đồ kiến trúc Angular Chú thích: NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN - Controller: Bộ điều khiển đại diện cho lớp có logic nghiệp vụ - View: Chế độ xem sử dụng để đại diện cho lớp trình bày cung cấp cho người dùng cuối - Model: Mơ hình sử dụng để đại diện cho liệu Các tính Angular Angular có tính chính:  MVC (Model-View-Controller): Mẫu dựa việc tách lớp logic nghiệp vụ, lớp liệu lớp trình bày thành phần riêng biệt Việc phân chia thành phần khác để phần quản lý dễ dàng  Liên kết mơ hình liệu (Data Model Binding): không cần phải viết mã đặc biệt để liên kết liệu với điều khiển HTML Điều thực Angular cách thêm vài đoạn mã  Viết mã (Writing less code): thực thao tác DOM (Document Object Model – Mơ hình Các Đối tượng Tài liệu - dùng để truy xuất thao tác tài liệu có cấu trúc dạng HTML hay XML ngơn ngữ lập trình thơng dụng Javascript, PHP), sử dụng Angular số lượng mã cần viết so với sử dụng Javascript  Kiểm thử đơn vị (Unit Testing): framework kiểm thử “Karma” giúp thiết kế kiểm thử đơn vị cho ứng dụng Angular Angular CLI Angular CLI (command line interface) cách nhanh nhất, đơn giản khuyến nghị để phát triển ứng dụng Angular Angular CLI giúp số tác vụ không gặp cố Dưới số ví dụ: Command Details NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN ng build Biên dịch ứng dụng Angular vào ng serve thư mục đầu Xây dựng phục vụ ứng dụng, xây dựng ng generate ng test lại thay đổi tệp Tạo sửa đổi tệp dựa giản đồ Chạy kiểm thử đơn vị dự ng e2e án định Xây dựng cung cấp ứng dụng Angular, sau chạy kiểm tra từ đầu đến cuối Ưu điểm nhược điểm Angular - Ưu điểm : giải pháp hữu hiệu dành cho Single Page Application làm việc  Liên kết hai chiều(Two-way binding): Angular giữ cho lớp liệu trình bày đồng hóa, cần định điều khiển bị ràng buộc với phần mơ hình Hình 1.2 Ưu điểm Angular  Có thể tái sử dụng thành phần (component) tiện ích  Angular hỗ trợ kiểm thử, hỗ trợ Kiểm thử đơn vị (Unit Testing) Kiểm thử tích hợp (Integration Testing)  Định tuyến (Routing): Angular đảm nhận việc định tuyến có nghĩa chuyển từ chế độ xem sang chế độ xem khác NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN  Hỗ trợ cho lập trình viên viết code với nhiều chức  Chạy Angular linh hoạt nhiều loại trình duyệt khác nhau: PC mobile - Nhược điểm:  Bản chất Angular Front End mà front end thường vốn bảo mật Back End Vì thế, vấn đề phát sinh liệu thường khơng an tồn Nếu có sử dụng, bạn cần thiết lập hệ thống kiểm tra liệu cho việc trả tốt  Với số trình duyệt sở hữu tính Disable Javascript nên có nghĩa website khơng hồn tồn sử dụng dựa trình duyệt Một số trang web phổ sử dụng Angular  Các ứng dụng stream video trực tiếp Youtube Playstation  Các ứng dụng thương mại điện tử T-Mobile  Trang tìm việc làm freelancer.com  Trang xem phim Netflix.com NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN CHƯƠNG 3: ỨNG DỤNG PHÁT TRIỂN Khảo sát toán Hiện trường học, việc quản lý thông tin học sinh, sinh viên nhiều nơi cịn thực thủ cơng Điều dẫn tới nhiều khó khăn việc quản lý thơng tin, chỉnh sửa gặp nhiều khó khăn, gây thẩm mỹ, bên cạnh tài liệu lưu trữ gặp khó khăn mục nát, trùng xâm nhập Vậy việc áp dụng công nghệ thông tin vào quản lý thông tin học sinh, sinh viên điều cần thiết Với mục đích nhằm xây dựng chương trình “Quản lý học viên” nhằm hỗ trợ cho công tác quản lý thông tin học viên lớp học trở nên đơn giản, tiện ích, dễ dàng quản lý Giáo viên dễ dàng thực công việc quản lý quản lý thông tin học sinh, sinh viên, quản lý điểm, điểm danh đầu giờ… Yêu cầu chức hệ thống: Phía người dùng (user)  Đăng nhập  Xem thông tin trang chủ  Xem diễn đàn  Xem danh sách viết  Quản lý thông tin sinh viên  Quản lý môn học  Quản lý điểm Yêu cầu phi chức hệ thống:  Website trình bày dễ hiểu, giao diện dễ dùng, đẹp mắt 23 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN  Ngôn ngữ phù hợp, thuận tiện với người sử dụng  Website nâng cấp, bảo trì cần bổ sung, cập nhật tính Phân tích thiết kế 2.1 Biểu đồ use case hệ thống Hình 3.1 Biểu đồ use case hệ thống Mô tả ý nghĩa use case theo biểu đồ use case hệ thống:  Đăng nhập: Đăng nhập hệ thống với vai trò người sử dụng  Xem trang chủ: Người dùng truy cập giao diện trang chủ  Xem diễn đàn: Người dùng truy cập xem thông tin diễn đàn  Xem danh sách viết: Người dùng xem danh sách viết diễn đàn  Quản lý thông tin sinh viên: Người dùng thực thêm, sửa, xóa danh sách sinh viên 24 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN  Quản lý môn học: Người dùng thực xem, điểm danh môn học  Quản lý điểm: Người dùng thực nhập điểm, cập nhật điểm môn học 2.2 Biểu đồ lớp hệ thống Hình 3.2 Biểu đồ lớp hệ thống Cài đặt chương trình  Giao diện Trang chủ 25 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN Hình 3.3 Trang chủ  Giao diện trang Giới thiệu 26 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN Hình 3.4 giao diện trang Giới thiệu  Giao diện trang Diễn đàn 27 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN Hình 3.5 giao diện trang Diễn đàn  Quản lý sinh viên 28 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN Hình 3.6 Quản lý sinh viên Hình 3.7 Form thêm sinh viên 29 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN Hình 3.8 Form sửa thông tin sinh viên  Quản lý mơn học Hình 3.9 Danh sách mơn học 30 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN Hình 3.10 Xem điểm mơn học Hình 3.11 Form sửa thơng tin nhập điểm 31 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN Hình 3.12 Điểm danh 32 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN PHỤ LỤC Điều kiện tiên Để sử dụng Angular Framework, cần có kiến thức tảng  HTML  CSS  JavaScript Thiết lập môi trường Node.js npm tảng để phát triển web đại cách sửa dụng Angular tảng khác Node cho phép phát triển xây dựng công cụ Sử dụng trình quản lý gói npm để cài đặt tất phụ thuộc thư viện Javascript Yêu cầu Node.js Thông tin chi tiết Angular yêu cầu phiên LTS hoạt động LTS bảo trì Node.js Để biết thông tin yêu cầu phiên cụ thể, xem engines khóa tập tin package.json Để biết thêm thông tin cách cài đặt Node.js, xem nodejs.org Nếu không phiên Node.js chạy hệ thống, Trình quản lý gói chạy lệnh node -v cửa sổ cmd Các ứng dụng Angular, Angular CLI npm (npm package Angular phụ thuộc vào gói npm cho nhiều manager) tính chức Để tải xuống cài đặt gói npm, cần có trình quản lý gói npm Sử dụng giao diện dòng lệnh npm client, cài đặt theo Node.js mặc định Để kiểm tra 33 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN xem cài đặt ứng dụng khách npm chưa, chạy npm -v cửa sổ dòng lệnh Cài đặt Angular CLI Ứng dụng Angular tạo phát triển chủ yếu thông qua Angular CLI (cơng cụ giao diện dịng lệnh) giúp tạo dự án, thêm tệp thực nhiều tác vụ phát triển liên tục thử nghiệm, đóng gói triển khai Angular CLI quản lý cấu hình khởi tạo thư viện khác Nó giúp thêm componet, directive, service… vào ứng dụng Angular có Nó sử dụng Typescript Webpack để đóng gói module, Karma để kiểm thử đơn vị (unit testing) Protractor để kiểm thử đầu cuối (end to end testing) Nó bao gồm thứ bạn cần để bắt đầu viết ứng dụng Angular Để cài đặt Angular CLI, mở cửa sổ dòng lệnh chạy lệnh sau: Tạo không gian làm việc ứng dụng Hiện có nhiều trình soạn thảo hỗ trợ lập trình Angular dễ dàng nhanh chóng Nên sử dụng Visual Studio Code Microsoft, trình soạt thảo tuyệt vời, hồn tồn miễn phí nhiều người sử dụng Một số extension hỗ trợ lập trình Angular như:     Angular Snippets Angular Language Service Angular 10 Snippets Angular Essentials Để tạo ứng dụng Angular với CLI, thực bước sau: Mở Visual Studio Code  vào menu File  Open Folder lựa chọn thư mục cài đặt dự án  New terminal chạy lệnh này: Bây vào thư mục tạo, để kiểm tra dự án vừa tạo 34 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN Máy chủ phát triển Webpack lắng nghe cổng HTTP 4200 Do đó, bạn mở url, http://localhost:4200/ thấy ứng dụng chạy Đây kết 35 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết luận: 1.1 Kết đạt được: - Hoàn thành khảo sát phân tích thiết kế hệ thống, thiết kế sở liệu, thiết kế giao diện - Hệ thống xây dựng hoàn thiện chức phân tích - Hệ thống thiết kế thân thiện, dễ dùng - Hệ thống dễ dàng mở rộng, trình bày chương trình logic - Hệ thống thơng minh tự động cập nhật xếp loại, điểm chữ theo điểm 1.2 Chức phát triển: - Kết hợp toán liên kết đóng học phí online - Mở rộng, chia quyền người dùng - Thêm giao diện, chức cho người sử dụng - Phát triển, sửa lỗi bất đồng hiển thị giao diện chưa xác Hướng phát triển: - Tiếp tục tìm hiểu, hồn thiện chức dự kiến phát triển 36 NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN LỜI CẢM ƠN Để hoàn thành báo cáo này, chúng em nhận nhiều giúp đỡ từ phía thầy khoa Sự giảng dạy chu đáo, tận tình giúp đỡ nhiều từ thầy cô giúp chúng em hiểu nhiều vấn đề hoàn thành báo cáo tốt Chúng em xin phép đặc biệt cảm ơn Thầy giáo Ths Hồng Quang Huy, thầy người trực tiếp hướng dẫn, giảng dậy chúng em môn học, người cố vấn đưa cho chúng em nhiều lời khuyên, lời bảo rõ ràng, quan trọng Cả nhóm xin cảm ơn nhóm thành viên lớp Các bạn giúp nhóm đánh giá, nhận xét báo cáo khách quan hơn, góp ý nhóm điều quan trọng khơng thể thiếu để nhóm chúng tớ hoàn thành tốt báo cáo Xin chân thành cảm ơn! 37 ... Để hoàn thành báo cáo này, chúng em nhận nhiều giúp đỡ từ phía thầy khoa Sự giảng dạy chu đáo, tận tình giúp đỡ nhiều từ thầy cô giúp chúng em hiểu nhiều vấn đề hoàn thành báo cáo tốt Chúng em... viên lớp Các bạn giúp nhóm đánh giá, nhận xét báo cáo khách quan hơn, góp ý nhóm điều quan trọng khơng thể thiếu để nhóm chúng tớ hoàn thành tốt báo cáo Xin chân thành cảm ơn! 37 ...BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN - - BÁO CÁO THỰC NGHIỆM MÔN: TTCN KỸ THUẬT PHẦN MỀM Đề tài: Tìm hiểu Angular phát triển ứng dụng Giáo viên