Báo Cáo Thực Tập Lập Trình Web Full Stack Với Angular Và Asp.net.pdf

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP LẬP TRÌNH WEB FULL STACK VỚI ANGULAR VÀ ASP NET Công ty thực tập Công ty ROSEN Group Người phụ trách Lê Tuấn Khải, Lê Anh Du[.]

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP LẬP TRÌNH WEB FULL STACK VỚI ANGULAR VÀ ASP.NET Công ty thực tập : Công ty ROSEN Group Người phụ trách : Lê Tuấn Khải, Lê Anh Duy Thực tập sinh : Võ Trung Tín - 19522353 TP Hồ Chí Minh, tháng 12 năm 2022 LỜI MỞ ĐẦU Hiện nay, ngành công nghệ thông tin ngày phát triển vô mạnh mẽ, tác động lớn đến đời sống xã hội người, đặc biệt lĩnh vực kinh tế hầu hết quốc gia giới xem ngành kinh tế mũi nhọn góp phần thúc đẩy phát triển, thịnh vượng quốc gia Thực tế, lĩnh vực công nghệ thông tin ứng dụng vô đa dạng nhiều khía cạnh khác nhau, khơng dừng lại việc phục vụ cho khoa học kĩ thuật Hơn hết, công nghệ thông tin dần trở nên gần gũi, thân thiện sâu vào từ đời sống người lĩnh vực khác kinh tế, trị, y tế, vv… Sự bùng nổ cách mạng công nghệ xuất mạng internet kĩ thuật số (4G, 5G, vv…) góp phần đưa sản phẩm công nghệ dễ dàng đến tay người dùng, đặc biệt trang website với vơ vàn tiện ích chức phục vụ người nhiều lĩnh vực Hệ thống website có từ sớm, thế, khơng trở nên lạc hậu mà thay vào ngày cải tiến để đáp ứng với nhu cầu cập nhật, thay đổi người, dần trở thành mặt thiếu xã hội ngày Có thể dễ dàng nhận thấy Việt Nam nói riêng quốc gia cơng nghệ nói chung, công ty công nghệ phát triển ứng dụng liên quan đến mảng website chiếm đa số tính phổ biến thơng dụng người ngày Hiểu quan trọng lĩnh vực lập trình website này, với đam mê, hứng thú thân việc phát triển ứng dụng web, sau khoảng thời gian trau dồi kiến thức lẫn chuyên sâu, kỹ cần thiết ghế nhà trường, thân em định học kì thực tập công ty doanh nghiệp thực tế để trước tiên thử sức với lĩnh vực theo đuổi, đặc biệt nhu cầu tích lũy kinh nghiệm, trải nghiệm mơi trường làm việc thực tế Sau lần rớt buổi vấn kĩ thân khơng đám ứng điều kiện cơng ty, em khơng lấy làm chán nản mà xem kinh nghiệm để từ dành thời gian để trau dồi khả thân Cuối cùng, em đậu vấn tham gia vào chương trình thực tập Cơng ty ROSEN Group có phịng nghiên cứu ROSEN UIT Research Center trường UIT Đến tận bây giờ, em cảm thấy vui, tự hào thân tham gia chương trình thực tập mơi trường lý tưởng, đại, chuyên nghiệp tràn ngập tiếng cười thành viên khoảng thời gian em trải qua tháng thực tập lập trình web full stack ROSEN LỜI CÁM ƠN Trân trọng gửi lời cảm ơn Công ty ROSEN Group tạo điều kiện cho em có hội thực tập cơng ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình anh chị hướng dẫn, thân em nói riêng nhóm thực tập nói chung tiếp thu kiến thức quan trọng để ứng dụng cơng nghệ mà công ty áp dụng để xây dựng nên ứng dụng thực tế đáp ứng yêu cầu đặt công ty Chân thành cảm ơn anh chị nhóm hướng dẫn bỏ nhiều thời gian, công sức để hướng dẫn em bạn hoàn thành đợt thực tập Đặc biệt, em xin gửi lời cảm ơn đến anh Lê Tuấn Khải, training Angular Framework; cảm ơn anh Lê Anh Duy, training ASP.NET Framework cho em; cảm ơn anh Nguyễn Tuấn Anh dành thời gian giới thiệu công ty cho em, hỗ trợ em cách hịa nhập vào mơi trường làm việc văn hóa chung nhà – công ty ROSEN; bên cạnh em cịn muốn gửi lời cảm ơn tới anh chị hướng dẫn khác dành thời gian chia sẻ, hướng dẫn chủ đề hay, công nghệ hay áp dụng công ty ROSEN để em thuận lợi việc tìm hiểu, nghiên cứu học tập để cuối hoàn thiện ứng dụng đáp ứng yêu cầu đặt chương trình thực tập Em biết ơn cảm kích với tất anh chị hướng dẫn, đặc biệt anh Lê Tuấn Khải anh Lê Anh Duy nhiệt tình hướng dẫn, tận tình giúp đỡ cho em khó khăn cơng việc, đến khó khăn việc làm quen với môi trường mới, dẫn em cách làm báo cáo, lên kế hoạch, kỹ thiếu Cũng xin cảm ơn thầy cô khoa Cơng nghệ phần mềm ln nhiệt tình truyền đạt kiến thức, kinh nghiệm thực tế, tư vấn nghề nghiệp, nhiệt tình hỗ trợ, tạo điều kiện giúp em hoàn thành việc thực tập làm báo cáo thực tập Võ Trung Tín Tp Hồ Chí Minh, ngày 01 tháng 10 năm 2022 NHẬN XÉT CỦA KHOA MỤC LỤC Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty Gameloft Sản phẩm công ty Chương 2: Nội dung thực tập Tìm hiểu công ty kỹ công ty Chương trình thực tập 2.1 Giai đoạn 1: Tự học, nghiên cứu công nghệ, kĩ thuật (cá nhân) 2.1.1 Tự học, nghiên cứu lập trình frontend Angular 10 2.1.2 Tự học, nghiên cứu lập trình frontend Angular 11 2.1.3 Tự học, nghiên cứu lập trình backend ASP.NET 12 2.1.4 Tạo API tích hợp backend vào phần ứng dụng frontend làm giai đoạn trước 13 2.2 Làm project thực tế công ty sau tinh chỉnh, lược bớt chức khó (nhóm) 14 Thực project 15 Lịch làm việc 16 Chương 3: Chi tiết project 19 Giới thiệu project 19 Giao diện chức website 20 2.1 Trang đăng nhập 20 2.2 Trang Launcher 20 2.3 Trang Quản lý User 21 2.4 Trang Quản lý Permission 23 2.5 Trang Quản lý Role 24 2.6 Authorization 26 Thực 27 Kế hoạch 27 TÀI LIỆU THAM KHẢO 29 TỔNG KẾT 30 CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu công ty ROSEN Group Công ty ROSEN Group thành lập vào năm 1981 ông Hermann Rosen Đức, công ty ROSEN phát triển giải pháp phần mềm phần cứng để kiểm tra bảo trì nhiều loại tài sản cơng nghiệp, chẳng hạn đường ống, đảm bảo an toàn cho hệ thống Nằm Tập đoàn ROSEN hoạt động quốc tế với 3.300 nhân viên, Trung tâm Nghiên cứu Phát triển nhiều địa điểm khác đồng nghĩa với sức mạnh đổi cao khả sáng tạo phi thường Công ty ROSEN Group có phịng nghiên cứu phát triển phần mềm trường Đại học Công nghệ Thơng tin Thành phố Hồ Chí Minh nơi tập trung nhóm đội ngũ lập trình đầy nhiệt huyết công ty ROSEN phát triển phần mềm đại cho Nhóm ROSEN cho cơng ty Các thành viên đội ngũ kĩ sư lập trình ROSEN Group UIT hợp tác chặt chẽ, chia sẻ kiến thức hỗ trợ lẫn Họ đưa ý tưởng vào thực tế, vươn lên thách thức thúc đẩy công nghệ tiên phong Các phương pháp phát triển phần mềm Agile phần thiếu cách kĩ sư lập trình ROSEN Group làm việc Sản phẩm công ty ROSEN Group đối tác công nghệ đáng tin cậy phát triển sản phẩm dịch vụ sáng tạo - bao gồm loạt giải pháp phần mềm - hỗ trợ 25 chi nhánh toàn giới Các phần mềm, sản phẩm ROSEN Group phát triển sử dụng cho công cụ kiểm tra hoạt động, đánh giá liệu, báo cáo bảo trì nhiều loại tài sản công nghiệp, chẳng hạn đường ống, đảm bảo an toàn cho hệ thống Để đạt mục tiêu này, kĩ sư lập trình ROSEN Group sử dụng nhiều công nghệ, stacks phần mềm khác quan tâm đến việc sử dụng công nghệ đại blockchain, AR / VR Machine Learning Một số mảng sản phẩm mà cơng ty thực hiện: + Automated Inspection Systems – Hệ thống kiểm tra tự động + Flowmeter – Lưu lượng kế + Software – Phần mềm + Instruments, tools tracking and locating systems – Hệ thống cung cấp thiết bị, công cụ theo dõi, định vị +… CHƯƠNG 2: NỘI DUNG THỰC TẬP Tìm hiểu công ty kỹ công ty Thời gian: ngày Nội dung: - Giới thiệu công ty, cách tổ chức công ty - Được nghe người phụ trách giới thiệu công ty, trình thành lập phát triên (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức công ty - Được tạo tài khoản công ty ứng với thông tin cá nhân cung cấp - Ngoài ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết quả: Hiểu thêm công ty ROSEN Group, trình thành lập phát triển sản phẩm công ty Hiểu lý công ty ROSEN lại đặt văn phòng khuân viên trường UIT Ngồi ra, hiểu biết thêm mơi trường làm việc, có thêm kỹ việc sử dụng email cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn, có nhìn quy trình phát triển sản phẩm thực tế Chương trình thực tập Mỗi tuần làm 20 tiếng, lên công ty ngày/tuần 2.1 Giai đoạn 1: Tự học, nghiên cứu công nghệ, kĩ thuật (cá nhân) 2.1.1 Tự học, nghiên cứu lập trình frontend Angular Thời gian: tuần Nội dung: - Học HTML, CSS, TypeScript khái niệm liên quan đến kĩ thuật lập trình frontend với Angular Framework - Có buổi seminar hướng dẫn cơng nghệ liên quan - Trong thời gian này, anh Lê Tuấn Khải hướng dẫn em tìm hiểu lập trình frontend với Angular Framework cung cấp roadmap việc tiếp cận Angular để em dễ dàng học tập Thực hiện: Tự tìm hiểu thực theo nội dung anh Lê Tuấn Khải hướng dẫn dựa lộ trình nêu roadmap 10 10 - Tìm hiểu Middleware - Tìm hiểu LINQ, Advanced LINQ - Tìm hiểu Scrum Process - Tìm hiểu Migration Database - Tìm hiểu Code First, Database First - Tìm hiểu Filter & Attribute Xây dựng API, endpoint để thao tác với sở liệu tích hợp vào project User Management giai đoạn trước - Tiếp tục hoàn thiện việc xây dựng API, endpoint tích hợp vào project User Management - Viết unit test integration test cho backend - Báo cáo kết - Phân chia cơng việc theo hai nhóm riêng biệt: Backend Frontend - Tìm hiểu văn hóa Scrum - Sprint planning cho tất các product backlog - Xây dựng sở liệu sau phân tích yêu cầu - Liệt kê mô tả endpoint cần có cho phần User Management - Xây dựng phần Authentication cho chức đăng nhập, thêm người dùng xác thực tài khoản - Xây dựng vài Anh Lê Anh Hoàn thành Duy Anh Lê Anh Hoàn thành Duy Anh Lê Anh Hoàn thành Duy - Hoàn thiện chức - Đạt yêu cầu 80% (có chổ cú pháp truy xuất liệu chưa hợp lý, tối ưu, chưa tích hợp kịp phần integration test) Hồn thành đầy đủ, deadline Anh Lê Anh Hoàn thành Duy Hoàn thành đầy đủ, deadline Anh Lê Anh Hoàn thành Duy 16 - - 11 - - 12 - 13 - 14 15 - 16 17 endpoint phần User Management Tiếp tục hồn thiện endpoint cịn lại phần User Management Viết unit test, integration test cho endpoint User Management Liệt kê mô tả endpoint cần có cho phần Permission Management Xây dựng vài endpoint phần Permission Management Tiếp tục hoàn thiện endpoint lại Permission Management Viết unit test, integration test cho endpoint Permission Management Liệt kê mơ tả endpoint cần có cho phần Role Management Xây dựng vài endpoint phần Role Management Tiếp tục hồn thiện endpoint cịn lại Role Management Tiếp tục hồn thiện endpoint cịn lại Role Management Viết unit test, integration test cho endpoint Role Management Xây dựng authorization cho endpoint cần thiết Bàn bạc, trau đổi với frontend có vấn đề nảy sinh Đưa hướng giải Anh Lê Anh Hoàn thành Duy Hoàn thành đầy đủ, deadline Anh Lê Anh Hoàn thành Duy Hoàn thành đầy đủ, deadline Anh Lê Anh Hoàn thành Duy Hoàn thành đầy đủ, deadline Anh Lê Anh Hoàn thành Duy Hoàn thành đầy đủ, deadline Anh Lê Anh Hoàn thành Duy Hoàn thành đầy đủ, deadline Anh Lê Anh Hoàn thành Duy Hoàn thành đầy đủ, deadline Anh Lê Anh Hoàn thành Duy Hoàn thành đầy đủ, deadline 17 18 Báo cáo final project Anh Lê Anh Hoàn thành Duy Anh Lê Tuấn Khải Hoàn thành đầy đủ, deadline Project đạt yêu cầu đặt 18 CHƯƠNG 3: CHI TIẾT VỀ PROJECT Giới thiệu project Website COLLA phần project nhỏ lấy từ project PORTAL công ty ROSEN, chọn làm project cho chương trình thực tập sau tinh chỉnh, lược bớt chức khác công ty để phù hợp với nội dung thực tập Project PORTAL gốc phần giao diện trung gian giúp quản lý nhiều website, ứng dụng khác công ty vấn đề thi công, quản lý việc triển khai, xây dựng đường ống dầu Website COLLA gồm chức quản trị đăng nhập, phân quyền, quản lý User – người dùng, quản lý Role – vai trò quản lý Permission – quyền hạn Việc quản trị phân quyền dựa mối quan hệ ràng là: - Một Role có nhiều User, User có nhiều Role - Một Role có nhiều Permission, Permission thuộc nhiều Role 19 Giao diện chức website 2.1 Trang Đăng nhập Giao diện cung cấp chức đăng nhập tài khoản tạo Auth0 Database thông qua email mật Sau người dùng đăng nhập thành công tiến vào trang Launcher 2.2 Trang Launcher Giao diện cung cấp chức năng: + Chọn avatar tài khoản để thực chức Đăng xuất chọn button Log out + Chọn User Management card để tiến vào trang quản lý người dùng + Chọn Permission card để tiến vào trang quản lý quyền người dùng + Chọn Role card để tiến vào trang quản lý vai trò người dùng 20 2.3 Trang Quản lý User Giao diện cung cấp chức năng: + Hiển thị danh sách tất người dùng hệ thống dạng table + Có phân trang thuận tiện cho việc tìm vị trí người dùng + Có chức sort với field search theo từ khóa + Chức Thêm/Tạo người dùng mới: Sau tạo thành công, hệ thống gửi đến email yêu cầu người dùng tham gia thay đổi mật khẩu, với tạo tài khoản Auth0 database tài khoản chưa kích hoạt ứng với trường activate Khi người dùng truy cập vào mail thực việc thay đổi mật từ link hệ thống cung cấp, người dùng đăng nhập lần đầu vào hệ thống tài khoản vừa tạo hệ thống kích hoạt tài khoản người dùng Auth0 cập nhật field activate database 21 + Chức chỉnh sửa thông tin người dùng + Chức xóa người dùng (soft delete): cập nhật status thành Inactive 22 2.4 Trang Quản lý Permission Giao diện cung cấp chức năng: + Hiển thị danh sách tất quyền hệ thống dạng table + Có phân trang thuận tiện cho việc tìm vị trí quyền cần xem + Có chức sort theo ngày tạo search theo từ khóa + Chức Thêm quyền + Chức xóa quyền (hard delete) 23 2.5 Trang Quản lý Role Giao diện cung cấp chức năng: + Hiển thị danh sách tất vai trò người dùng dạng list card + Có phân trang thuận tiện cho việc tìm vị trí vai trị cần xem + Có chức sort theo ngày tạo search theo từ khóa + Chức Thêm vai trị + Chức xóa vai trò (hard delete) 24 + Chức Hiển thị danh sách người dùng thêm vào role + Chức Thêm một/nhiều người dùng vào role – Hiển thị danh sách người dùng thêm vào role + Chức Xóa một/nhiều người dùng khỏi role + Chức Hiển thị danh sách quyền thêm vào role 25 + Chức Thêm một/nhiều quyền vào role – Hiển thị danh sách quyền thêm vào role + Chức Xóa một/nhiều quyền khỏi role 2.6 Authorization Dựa vai trò người dùng, hệ thống truy xuất danh sách quyền mà vai trò người dùng có, endpoint cho phép truy cập người dùng có quyền tương thích với endpoint Trong trường hợp người dùng khơng có quyền để truy cập vào endpoint hay chức đó, hệ thống khơng truy xuất liệu thực chức thao tác liệu khác, kèm theo thông báo trả lỗi 26 Thực Nhóm thực tập có thành viên: - Hồ Đình Tùng Lâm Võ Trung Tín Hà Thúc Huy Võ Đoàn Kim Như Lê Quốc Toàn Và giúp đỡ tận tình anh chị hướng dẫn cơng ty ROSEN Kế hoạch Bởi project COLLA thực chất tách nhỏ hay nói cách khác lấy từ project PORTAL thực tế công ty có tinh chỉnh cho phù hợp với nội dung thời gian thực tập nên phần công việc liên quan đến thu thâp yêu cầu khách hàng, phân tích u và thiết kế hệ thơng thơng tin lược bỏ tập trung vào việc xây dựng chương trình Giai đoạn – ngày trước bắt đầu làm project COLLA: - Cả nhóm thực tập họp với anh Lê Tuấn Khải anh Lê Anh Duy để lên kế hoạch xây dựng product backlog liệt kê ra, liệt kê nội dung cơng việc cần làm, ước tính effort product backlog thời gian cá nhân bỏ cho task assign cho thân – bước quy trình SCRUM Giai đoạn – chia thành sprint, sprint tuần: - Nhóm thực tập chia thành đội ngũ lập trình: backend (3 người) – bao gồm em + frontend (2 người) Hồn thành cơng việc đặt assign sprint Trước lên pipeline qua giai đoạn testing review code cho pull request anh chị phụ trách, hướng dẫn Tuần cuối có buổi đánh giá project COLLA đánh giá cá nhân thực tập sinh 27 Kết quả: - Hầu hết tính xây dựng ứng với yêu cầu đặt - Một số testing bị tạm thời bỏ qua khơng đủ thời gian hồn thiện - Chưa có áp dụng kĩ thuật Migration Database 28 TÀI LIỆU THAM KHẢO [1] ".NET documentation," [Online] Available: https://learn.microsoft.com/vi-vn/dotnet/framework/ [Accessed 2022] [2] "Angular," [Online] Available: https://angular.io/docs [Accessed 10 06 2022] [3] "Auth0 docs," [Online] Available: https://auth0.com/docs/ [Accessed 2022] [4] "SQL Server migration documentation," [Online] Available: https://learn.microsoft.com/viVN/sql/sql-server/migrate/?view=sql-server-ver16 [Accessed 2022] [5] "Language Integrated Query (LINQ) (C#)," [Online] Available: https://learn.microsoft.com/enus/dotnet/csharp/programming-guide/concepts/linq/ [Accessed 07 2022] [6] "End-to-end testing," [Online] Available: https://testing-angular.com/end-to-end-testing/ [Accessed 18 06 2022] [7] J Pearce, "Agile and documentation," 2018 [Online] Available: https://www.scrum.org/forum/scrum-forum/14437/agile-and-documentation [Accessed 15 2022] 29 TỔNG KẾT Như vậy, vịng gần tháng thực tập cơng ty ROSEN GROUP, em lần tham gia vào môi trường làm việc vô chuyên nghiệp, trải nghiệm kiến thức thực tế lẫn chuyên môn kĩ thuật kĩ mềm liên quan đến công nghệ mà công ty áp dụng văn hóa làm việc ROSEN mà trước ghế nhà trường em chưa trải nghiệm, hiểu quy trình làm việc cơng ty, đặc biệt Agile Scrum Process Bên cạnh đó, em tiếp thu nhiều kiến thức bổ ích trau dồi thêm cho nhiều kỹ cần có để hỗ trợ cho cơng việc mình, cụ thể liên quan đến mảng lập trình Angular ASP.NET Em xin chân thành gửi lời cảm ơn đến anh Lê Tuấn Khải, anh Lê Anh Duy, anh Louis Anh Nguyễn, chị Vân tất anh chị hướng dẫn khác, thành viên nhóm thực tập em giúp đỡ hỗ trợ em nhiều nhiệt tình suốt thời gian em thực tập làm việc ROSEN để em hồn thành chương trình thực tập thành cơng Một lần nữa, em xin trân trọng cảm ơn Công ty ROSEN Group cho em hội tạo điều kiện tốt em làm việc phát triển công ty Cảm ơn quý thầy cô trường Đại học Công nghệ Thông tin, đặc biệt thầy cô Khoa Công nghệ Phần mềm hỗ trợ em trình tìm việc, thực tập q trình hồn thiện báo cáo 30 ... phải đưa cách giải - Nắm quy trình làm việc với mơ hình Scrum thực tế Thực project Sau gần năm tháng training thực hành, em nắm cách lập trình web full stack với Angular ASP.NET thông qua project... việc lập trình website phần frontend Angular, sử dụng linh hoạt cú pháp lập trình dựa kiến thức tìm hiểu 2.1.2 Lập trình frontend Angular với ứng dụng mẫu đơn giản Thời gian: tuần Nội dung: - Thực. .. tìm hiểu lập trình frontend với Angular Framework cung cấp roadmap việc tiếp cận Angular để em dễ dàng học tập Thực hiện: Tự tìm hiểu thực theo nội dung anh Lê Tuấn Khải hướng dẫn dựa lộ trình nêu