TÌM HIỂU ANGULAR FRAMEWORK VÀ XÂY DỰNG WEBSITE QUẢN LÝ SÁCH CÔNG TY THỰC TẬP Công ty TNHH Công Nghệ Novahub

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN Tel (+84.0236) 3736949, Fax (+84.0236) 3842771 Website: itf.dut.udn.vn, E-mail: cntt@dut.udn.vn BÁO CÁO THỰC TẬP TỐT NGHIỆP NGÀNH CƠNG NGHỆ THƠNG TIN ĐỀ TÀI: TÌM HIỂU ANGULAR FRAMEWORK VÀ XÂY DỰNG WEBSITE QUẢN LÝ SÁCH CÔNG TY THỰC TẬP: Công ty TNHH Công Nghệ Novahub SINH VIÊN: Lê Nguyễn Công Sang MÃ SINH VIÊN: 102160111 LỚP: 16T2 CBHD: Trần Đinh Mạnh Linh Đà Nẵng, 08/2020 LỜI CẢM ƠN Thời gian thực tập vừa qua em học hỏi thêm nhiều kiến thức thực tế kĩ để áp dụng kiến thức học vào công việc Đó thực trải nghiệm quý giá, em xin gửi lời cảm ơn tới tất người hỗ trợ cho em hoàn thành đợt thực tập tốt nghiệp Trước tiên em xin chân thành cảm ơn công ty TNHH công nghệ Novahub nhiệt tình hướng dẫn giúp đỡ em hồn thành tốt q trình học tập thực tập Cơng ty hỗ trợ em nhiều mặt trang thiết bị tới giảng dạy kiến thức thực tiễn để áp dụng vào thực tế công việc Đặc biệt em xin cám ơn anh Trần Hải Thành, anh Trần Đinh Mạnh Linh tận tình hướng dẫn giúp đỡ em trình thực tập Em xin gửi lời cảm ơn tới thầy cô khoa Công nghệ thông tin tạo hội điều kiện thuận lợi cho em thực đợt thực tập thực tế Đây hội cho em học hỏi thêm nhiều kiến thức thực tế, áp dụng học ghế nhà trường vào thực tế công việc Một lần em xin chân thành cảm ơn Lê Nguyễn Công Sang Công ty TNHH Công Nghệ NovaHub CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự - Hạnh Phúc PHIẾU ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP Họ Tên sinh viên: Lê Nguyễn Cơng Sang Lớp: 16T2 Nhóm: 1610 Cơ quan/Đơn vị thực tập: Công ty TNHH Công Nghệ Novahub Địa chỉ: Tầng Tịa nhà Cơng ty Cổ phần Quản lý Xây dựng đường Quảng Nam Đà Nẵng, 10B Nguyễn Chí Thanh, P Thạch Thang, Q Hải Châu, Tp.Đà Nẵng Thời gian thực tập từ 29/06/2020 đến 07/08/2020 Người hướng dẫn: Trần Đinh Mạnh Linh Email: linhtran@novahub.vn Đánh giá lực chuyên môn Nội dung đánh giá Xuất sắc Năng lực chuyên môn đáp ứng công việc x Hồn thành cơng việc giao x Khả sử dụng ngoại ngữ x Ứng dụng kết thực tập cho quan x Tốt Khá T.Bình Yếu Tốt Khá T.Bình Yếu Khá T.Bình Yếu Đánh giá ý thức làm việc Nội dung đánh giá Xuất sắc Tinh thần, thái độ làm việc x Tuân thủ kỷ luật (thời gian làm việc, báo nghỉ…) x Giao tiếp, quan hệ với cán bộ, công nhân viên x Đánh giá kết công việc Nội dung đánh giá Xuất sắc Khả phân tích thiết kế hệ thống x Kỹ lập trình x Khả học hỏi, nắm bắt công nghệ x Tốt Các nhận xét khác (nếu có) Trong thời gian thực tập em vận dụng tốt nắm bắt nhanh kiến thức học, hoàn thành nhiệm vụ giao Bên cạnh đó, em hịa đồng, nhạy bén tuân thủ nề nếp công ty Điểm đánh giá Ghi số: 10/10 Ghi chữ: Mười điểm Ngày 07 tháng 08 năm 2020 Xác nhận quan/đơn vị thực tập Người hướng dẫn (Ký, ghi rõ họ tên đóng dấu) (Ký ghi rõ họ tên) Trần Hải Thành Trần Đinh Mạnh Linh i NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN MỤC LỤC CHƯƠNG I: GIỚI THIỆU CƠ QUAN THỰC TẬP 1.1 Tổng quan 1.2 Địa chỉ: 1.3 Lĩnh vực công nghệ: CHƯƠNG 2: XÂY DỰNG CHƯƠNG TRÌNH QUẢN LÝ SÁCH BẰNG ANGULAR 4 2.1 MÔ TẢ CÔNG VIỆC 2.1.1 Kế hoạch thực tập 2.1.2 Phương thức làm việc 2.2 CƠ SỞ KIẾN THỨC 2.2.1 Kiến thức 2.2.2 Framework AngularJS CHƯƠNG 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ 6 6 10 3.1 Tóm tắt đề tài 3.2 Tính chương trình 3.3 Kết triển khai KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 10 10 10 14 TÀI LIỆU THAM KHẢO 15 ii DANH SÁCH HÌNH ẢNH STT Tên hình Trang Văn phịng Công ty TNHH Công Nghệ Novahub Không gian làm việc Giao diện login 10 Giao diện quản lý sách 11 Giao diện thông tin sách chi tiết 11 Giao diện quản lý tác giả 12 Giao diện chỉnh sửa thông tin tác giả 12 Giao diện quản lý tài khoản 13 Giao diện quản lý thể loại 13 Báo cáo thực tập tốt nghiệp CHƯƠNG I: GIỚI THIỆU CƠ QUAN THỰC TẬP 1.1 Tổng quan Novahub công ty phát triển phần mềm thành phố Đà Nẵng Đây công ty trẻ trung, động, vừa thành lâp vào ngày tháng năm 2015 công ty không ngừng phát triển Mục tiêu hướng tới công ty không gia cơng phần mềm mà cịn đưa giải pháp, phát triển sản phẩm riêng Hình Văn phịng Công ty TNHH Công Nghệ Novahub 1.2 Địa chỉ: Tầng Tịa nhà Cơng ty Cổ phần Quản lý Xây dựng đường Quảng Nam Đà Nẵng, 10B Nguyễn Chí Thanh, P Thạch Thang, Q Hải Châu, Tp.Đà Nẵng SVTH: Lê Nguyễn Công A G E Báo cáo thực tập tốt nghiệp Hình Khơng gian làm việc 1.3 Lĩnh vực cơng nghệ: • C# (.NET) • Java (Spring MVC) • Ruby on Rails • Flutter • Angular • Swift (iOS) • Xamarin SVTH: Lê Nguyễn Cơng A G E Báo cáo thực tập tốt nghiệpCHƯƠNG 2: XÂY DỰNG CHƯƠNG TRÌNH QUẢN LÝ SÁCH BẰNG ANGULAR 2.1 MÔ TẢ CÔNG VIỆC ○ Kế hoạch thực tập ○ Trong vòng gần tháng thực tập, sinh viên đào tạo cơng nghệ, quy trình làm việc sau áp dụng để xây xựng sản phẩm Kế hoạch thực tập sau: ■ Đào tạo kiến thức HTML, CSS, TypeScript ■ Giới thiệu framework AngularJS ■ Hướng dẫn xây dựng website “Quản lý sách” ■ Tổng kết đánh giá ○ Phương thức làm việc ■ Giờ làm việc: hành chính, sáng từ 8:00 đến 12:00, chiều từ 13:30 đến 17:30 Sinh viên phải có mặt đầy đủ ngày từ thứ đến thứ tuần ■ Quy trình: Daily report ngày, trình bày cơng việc hồn thành, khó khăn gặp phải cơng việc làm ■ Quản lý source: Quản lý source công cụ Git thông qua dịch vụ lưu trữ Github ○ CƠ SỞ KIẾN THỨC ○ Kiến thức ○ HTML: HTML (tiếng Anh, viết tắt cho HyperText Markup Language, "Ngôn ngữ Đánh dấu Siêu văn bản") ngôn ngữ đánh dấuđược thiết kế để tạo nên trang web với mẩu thông tin trình bày World Wide Web Cùng với CSS JavaScript, HTML tạo ba tảng kỹ thuật cho World Wide Web HTML định nghĩa ứng dụng đơn giản SGML sử dụng tổ chức cần đến yêu cầu xuất phức tạp HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) trì Phiên thức HTML HTML 4.01 (1999) Sau đó, nhà phát triển thay XHTML Hiện nay, HTML phát triển tiếp với phiên HTML5 hứa hẹn mang lại diện mạo cho Web SVTH: Lê Nguyễn Công A G E ● Báo cáo thực tập tốt nghiệp ○ CSS: CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngôn ngữ đánh dấu (ví dụ HTML) Bạn hiểu đơn giản rằng, HTML đóng vai trị định dạng phần tử website việc tạo đoạn văn bản, tiêu đề, bảng,…thì CSS giúp thêm chút “phong cách” vào phần tử HTML đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều ○ TypeScript: TypeScript ngơn ngữ mã nguồn mở miễn phí phát triển bảo trì Microsoft Nó tập cha JavaScript, với bổ sung tuỳ chọn kiểu tĩnh lớp sở lập trình hướng đối tượng cho ngôn ngữ Anders Hejlsberg, kiến trúc sư ngôn ngữ C# người tạo ngôn ngữ Delphi Turbo Pascal tham gia phát triển TypeScript TypeScript sử dụng để phát triển ứng dụng chạy phía client, hay phía server (Node.js) TypeScript thiết kế để phát triển ứng dụng lớn biến đổi - biên dịch sang JavaScript Vì TypeScript tập cha JavaScript nên chương trình JavaScript có chương trình TypeScript hợp lệ TypeScript hỗ trợ định nghĩa file chứa thông tin kiểu thư viện JavaScript, giống file header C/C++ mô tả cấu trúc file object Điều cho phép chương trình khác sử dụng giá trị định nghĩa file giống thực thể TypeScript định kiểu tĩnh Đó file header hãng thứ ba (third-party) cho thư viện thông dụng jQuery, MongoDB, D3.js Các file header cho module cho Node.js có sẵn cho phép phát triển chương trình Node.js TypeScript ○ Framework AngularJS ○ AngularJS framework có cấu trúc cho ứng dụng web động Nó cho phép bạn sử dụng HTML cho phép bạn mở rộng cú pháp HTML để diễn đạt thành phần ứng dụng bạn cách rõ ràng súc tích Hai tính cốt lõi: Data SVTH: Lê Nguyễn Công A G E Báo cáo thực tập tốt ○nghiệp binding Dependency injection AngularJS loại bỏ phần lớn code mà bạn thường phải viết ● ○ Angular module (ES2015) ○ Theo đặc tả ES2015 file module Có module file file module ○ Các module định nghĩa giới hạn biến, function class định nghĩa module Các biến ln local module khơng visible ngồi module ○ Các module khơng có public method thuộc tính public khơng cần thiết Module giúp tạo thành phần public sử dụng lệnh export Các module khác sử dụng member public sử dụng lệnh import ● ○ Data binding ○ Angular sử dụng Data Binding để lấy liệu từ Component đến View Nó hồn thành sử dụng cú pháp HTML đặc tả biết đến Template Syntax ○ Angular hỗ trợ kiểu Data binding: ○ Interpolation: Data bind từ component sang view ○ Property Binding: Data bind từ component sang thuộc tính HTML view Event Binding: Các kiện DOM bind từ view method Component Two-way binding/Model binding: Luồng liệu hai chiều từ view sang ○ component ngược lại ○ Services ○ Service cung cấp dịch vụ cho Components service khác Angular khơng có đặc tả cho Service class có export method chứa số task ○ Dependency injection SVTH: Lê Nguyễn Công A G E ● Báo cáo thực tập tốt nghiệp ○ Dependency Injection phương thức tự động tạo instance service inject vào component service khác yêu cầu ○ Dependency injection dùng hầu hết inject service vào component service khác ○ Angular làm điều sử dụng injector Khi component tạo, Angular tìm Component metadata service mà component yêu cầu Injector tạo instance service inject vào component sử dụng constructor ○ Nếu service tạo injector khơng tạo mà sử dụng lại Service cần cho Angular biết sẵn sàng inject vào component yêu cầu cách sử dụng @Injectable decorator SVTH: Lê Nguyễn Công A G E Báo cáo thực tập tốt nghiệp■ CHƯƠNG 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ ○ Tóm tắt đề tài ○ Book Management - Ứng dụng cho phép người dùng quản lý sách ● ○ ○ ○ ○ ○ Tính chương trình Quản lý sách Quản lý tác giả Quản lý thể loại Quản lý tài khoản ● ○ Kết triển khai ● ● ■ Hình 3: Giao diện login LỜI CẢM ƠN Lê Nguyễn Công Sang 1.Đánh giá lực chuyên môn 3.Đánh giá kết công việc NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN MỤC LỤC DANH SÁCH HÌNH ẢNH CHƯƠNG I: GIỚI THIỆU CƠ QUAN THỰC TẬP 1.1.Tổng quan 1.2.Địa chỉ: 1.3.Lĩnh vực công nghệ: CHƯƠNG 2: XÂY DỰNG CHƯƠNG TRÌNH QUẢN LÝ SÁCH BẰNG ANGULAR 2.1.MƠ TẢ CƠNG VIỆC SVTH: Lê Nguyễn Công A G E Báo cáo thực tập tốt Kế hoạch thực tập nghiệp Phương thức làm việc CƠ SỞ KIẾN THỨC Kiến thức Framework AngularJS Angular module (ES2015) Data binding Services Dependency injection CHƯƠNG 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ Tóm tắt đề tài Tính chương trình Kết triển khai KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN TÀI LIỆU THAM KHẢO Internet ■ ■ SVTH: Lê Nguyễn Công A G E ● Báo cáo thực tập tốt nghiệp ○ ● ■ Hình 4: Giao diện quản lý sách ● ● ● ● ● ■ Hình 5: Giao diện thông tin sách chi tiết SVTH: Lê Nguyễn Công A G E Báo cáo thực tập tốt ○nghiệp ● ■ Hình 6: Giao diện quản lý tác giả ● ● ● ● ● ● ● ■ Hình 7: Giao diện chỉnh sửa thơng tin tác giả SVTH: Lê Nguyễn Công A G E ● Báo cáo thực tập tốt nghiệp ○ ● ■ Hình 8: Giao diện quản lý tài khoản ● ● ● ● ● ● ■ Hình 9: Giạo diện quản lý thể loại SVTH: Lê Nguyễn Công A G E Báo cáo thực tập tốt nghiệp ■ KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ● ○ KẾT QUẢ ĐẠT ĐƯỢC ● ■ Được thực hành với môi trường làm việc thực tế công ty học hỏi thêm nhiều kiến thức cơng nghệ ■ Tìm hiểu sử dụng framework Angular để lập trình web ● ■ Áp dụng kiến thức học trường vào thực tế phân tích, thiết kế hệ thống, lập trình hướng đối tượng, lập trình web,… ■ Nắm quy trình làm việc trình phát triển phần mềm ● ○ KIẾN NGHỊ VÀ HƯỚNG PHÁT TRIỂN ● ■ Sau trình thực tập em cảm học hỏi nhiều điều cách làm việc, kiến thức chuyên môn, thái độ làm việc, … đặc biệt nhệt tình anh chị công ty dành cho em Em hy vọng sau thành viên công ty để học hỏi phát triển sau SVTH: Lê Nguyễn Công A G E ● Báo cáo thực tập tốt nghiệp ■ TÀI LIỆU THAM KHẢO ● ○ ○ ○ ○ Internet https://www.angular.io TEDU Tổng quan kiến thức Angular khái niệm Trang web: https://tedu.com.vn/lap-trinh-angular-2-can-ban/tong-quankien-truc- angular-va-cac-khai-niem-261.html SVTH: Lê Nguyễn Công ... E Báo cáo thực tập tốt nghiệpCHƯƠNG 2: XÂY DỰNG CHƯƠNG TRÌNH QUẢN LÝ SÁCH BẰNG ANGULAR 2.1 MÔ TẢ CÔNG VIỆC ○ Kế hoạch thực tập ○ Trong vòng gần tháng thực tập, sinh viên đào tạo công nghệ, quy... Cơng Sang Lớp: 16T2 Nhóm: 1610 Cơ quan/Đơn vị thực tập: Công ty TNHH Công Nghệ Novahub Địa chỉ: Tầng Tịa nhà Cơng ty Cổ phần Quản lý Xây dựng đường Quảng Nam Đà Nẵng, 10B Nguyễn Chí Thanh, P Thạch... GIỚI THIỆU CƠ QUAN THỰC TẬP 1.1 Tổng quan 1.2 Địa chỉ: 1.3 Lĩnh vực công nghệ: CHƯƠNG 2: XÂY DỰNG CHƯƠNG TRÌNH QUẢN LÝ SÁCH BẰNG ANGULAR 4 2.1 MÔ TẢ CÔNG VIỆC 2.1.1 Kế hoạch thực tập 2.1.2 Phương