Báo cáo thực tập lập trình FRONT END với ANGULAR 2+và triển khai dự án theo SCRUM AGILE

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH 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 THỰC TẬP TỐT NGHIỆP - SE501.M11 LẬP TRÌNH FRONT-END VỚI ANGULAR 2+ VÀ TRIỂN KHAI DỰ ÁN THEO SCRUM - AGILE Building front-end with Angular 2+ and applying Scrum - Agile to project Công ty thực tập: Công ty TNHH KMS Technology Vietnam Người phụ trách: Lê Phạm Hoài Tâm Võ Hồng Hải Thực tập sinh: Lê Hồng Minh Sơn - 18520350 TP Hồ Chí Minh, tháng 12 năm 2021 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp LỜI MỞ ĐẦU Hiện nay, sản phẩm ngành Công nghệ phần mềm ngày gia tăng mặt số lượng chất lượng, đòi hỏi đáp ứng lĩnh vực gia công cung cấp giải pháp phần mềm, đặc biệt xây dựng phát triển ứng dụng web Đây phận thiếu ngành công nghiệp phần mềm, phát triển mạnh mẽ, không ngừng phục vụ nâng cao chất lượng sống Cùng với xu phát triển giới, công ty công nghệ Việt Nam phát triển mạnh mẽ để hịa nhập với cơng ty hàng đầu giới Phát triển ứng dụng web xu hướng bật giới công nghệ thông tin, với lượng nhu cầu thị trường mức lớn Phát triển ứng dụng web nói chung mang lại giải pháp khác nhau, thu hút ý nhà đầu tư sinh viên theo lập trình, có em Vì lý này, em định chọn mảng xây dựng phát triển web làm định hướng cho việc học tập việc làm Sau ba năm học tập trường với tảng kiến thức từ thầy bạn bè, mong muốn có thêm kinh nghiệm thực tế, tham gia phát triển phần mềm môi trường chuyên nghiệp, em định thực tập vào học kì Sau tìm hiểu kĩ lưỡng cơng ty, em chọn công ty TNHH KMS Technology làm nơi để tích lũy trải nghiệm thực tế mơi trường doanh nghiệp Trong suốt q trình thực tập, em thấy thực nơi thích hợp để thực mong muốn thân, với quy trình làm việc linh hoạt, hiệu quả, với người thân thiện, văn hóa tốt Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp LỜI CẢM ƠN Em trân trọng gửi lời cảm ơn đến Quý công ty TNHH KMS Technology tạo điều kiện cho em có hội thực trình thực tập cơng ty, nhân viên thức Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm mentor anh chị công ty, em tiếp thu kiến thức quan trọng phục vụ trình làm việc thực tế lĩnh vực Công nghệ phân mềm Em xin chân thành cảm ơn anh chị dự án Levels Beyond công ty bỏ nhiều thời gian, cơng sức, đưa góp ý chân thành để hướng dẫn em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Lê Phạm Hoài Tâm Principal Software Engineer hướng dẫn cho em kĩ thuật công nghệ, anh Võ Hồng Hải, anh Bùi Công Khanh - Senior Software Engineer training, giúp đỡ cho em gặp khó khăn việc hồn thành nhiệm vụ, đến việc làm quen với môi trường mới, cảm ơn chị Hà Thị Diệu Trang - Engineering Manager hướng dẫn cho em mặt quy trình nghiệp vụ mơ hình Scrum - Agile Với kiến thức gợi ý phân tích trình thực tập, em vận dụng nhiều việc hoàn thành báo cáo tiếp thu kinh nghiệm thực tế Cũng xin cảm ơn thầy cô bạn bè khoa Công nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện cho em làm báo cáo Mặc dù cố gắng hoàn thành báo cáo với tất nỗ lực song kết em chắn không tránh khỏi thiếu sót, em mong nhận thơng cảm góp ý chân thành từ thầy Em xin chân thành cảm ơn Thành phố Hồ Chí Minh, ngày 18 tháng 12 năm 2021 Lê Hồng Minh Sơn Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp NHẬN XÉT CỦA KHOA Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA MỤC LỤC CHƯƠNG - GIỚI THIỆU CÔNG TY 1.1 Giới thiệu công ty KMS Technology 1.1.1 Giới thiệu tổng quát 1.1.2 Văn hóa 1.1.3 Một số thành tựu 1.1.4 Các thông tin khác 1.2 Sản phẩm công ty 6 7 CHƯƠNG - NỘI DUNG THỰC TẬP 2.1 Tìm hiểu cơng ty cài đặt kênh thơng tin 2.2 Tìm hiểu kiến thức kỹ 2.3 Tìm hiểu quy trình nghiệp vụ mơ hình Scrum - Agile 2.4 Nghiên cứu công nghệ, kĩ thuật cho project 2.4.1 Angular 2.4.2 NgRx - state management framework 2.4.3 Angular Material 2.4.3.1 Virtual Scroll for large data rendering 2.4.3.2 Tree view rendering 2.4.4 Unit test với Jasmine 2.4.5 CI/CD Azure DevOps SonarCloud 2.5 Tham gia project thực tế với khách hàng 10 10 11 12 13 13 14 15 15 16 17 17 18 CHƯƠNG - CHI TIẾT VỀ PROJECT 3.1 Giới thiệu dự án 3.1.1 Tổng quát 3.1.2 Một số chức 3.1.3 Thành phần thực 3.2 Thực 3.2.1 Use case đảm nhiệm 3.2.1.1 Nested collections 19 19 19 19 20 20 20 21 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp 3.2.1.2 Collection sidebar 3.2.1.3 Type division 3.2.1.4 Create/Edit smart collection 3.2.1.4 Delete Smart collection 3.2.2 Quy trình làm việc 3.3 Sản phẩm hồn thành 21 21 22 22 23 26 CHƯƠNG - TỔNG KẾT 4.1 Các kết đạt ưu điểm 4.2 Một số hạn chế 4.3 Hướng phát triển số cảm nhận trình thực tập 30 30 31 32 TÀI LIỆU THAM KHẢO 33 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp CHƯƠNG - GIỚI THIỆU CƠNG TY 1.1 Giới thiệu cơng ty KMS Technology 1.1.1 Giới thiệu tổng quát KMS Technology công ty chuyên lĩnh vực phát triển sản phẩm gia công phần mềm với 100% vốn đầu tư Mỹ, có trụ sở Atlanta, Georgia, Mỹ Được thành lập từ 2009, từ thành viên lúc bắt đầu, đến KMS mở rộng quy mô lên tới 1000 nhân viên đội ngũ nhân phạm vi tồn cầu Hơn 12 năm hoạt động, công ty khách hàng quốc tế đặt niềm tin chất lượng sản phẩm trình độ chun mơn cao đội ngũ kỹ sư Việt Nam KMS Technology gặt hái điều mà khơng phải cơng ty dễ dàng có Ngoài việc cung cấp dịch vụ, KMS xây dựng thành lập thành công công ty phần mềm riêng thơng qua vườn ươm khởi nghiệp (startup incubator) nội bộ, KMS Labs Công ty nhận nhiều giải thưởng danh giá ngành danh hiệu nơi làm việc tốt Việt Nam Châu Á nhiều năm liên tiếp Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp 1.1.2 Văn hóa KMS Technology cam kết tạo tác động xã hội lâu dài cách hợp tác với tổ chức phi lợi nhuận để mang lại cho sinh viên có hồn cảnh khó khăn hội việc làm công tốt Công ty thường xuyên hợp tác với trường đại học thông qua hoạt động đào tạo CNTT, kiện chuyên ngành, tài trợ học bổng KMS Gives tên gọi chuỗi kiện từ thiện thể văn hóa cho cộng đồng KMS cam kết quyên góp 1% vốn chủ sở hữu, 1% lợi nhuận 1% thời gian cho xã hội 1.1.3 Một số thành tựu Những chất lượng vượt trội dịch vụ giúp cho KMS Technology 10 năm liền nhận giải thưởng Sao Khuê VINASA cho hạng mục: Dịch vụ gia công xuất phần mềm xuất sắc Cùng nhiều giải thưởng lớn Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp 1.1.4 Các thông tin khác + Website: https://www.kms-technology.com/ + Văn phòng: Việt Nam: • Cộng Hồ, Q Tân Bình • Tản Viên, Q Tân Bình • UpStar Labs, Q3 • Đà Nẵng US: • Atlanta Bảng số liệu KMS Technology Nội dung Con số Years in Business 12+ Clients Served 130+ Employees 1,000+ Driven in Client Buyouts $11.8B Client Savings $139M Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp 1.2 Sản phẩm công ty KMS Technology cung cấp dịch vụ giải pháp tối ưu phần mềm cho 90% khách hàng công ty Mỹ với dịch vụ: + Phát triển phần mềm theo yêu cầu (software outsourcing) + Bảo trì hệ thống sản phẩm phần mềm (maintenance) + Dịch vụ quản lý ứng dụng (management service) + Kiểm thử bảo đảm chất lượng phần mềm (testing and quality assurance) + Tư vấn giải pháp đại (solution consulting) Bên cạnh đó, KMS Labs phát triển mạnh mẽ lĩnh vực Product với sản phẩm chuyên về: + Kiểm thử phần mềm như: Katalon, Kobiton, QASymphony,… + Quản lí nhân sự: Grove + Low-code app generator: Visily Năm 2021, KMS Technology mở rộng hướng kinh doanh sang tập trung cung cấp dịch vụ phần mềm ngành Chăm sóc sức khỏe (Healthcare), phát triển hoạt động Châu Á Thái Bình Dương (APAC) với KMS Solutions cách cung cấp giải pháp số hóa từ Úc, Singapore Việt Nam Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp CHƯƠNG - CHI TIẾT VỀ PROJECT 3.1 Giới thiệu dự án 3.1.1 Tổng quát Tên dự án: Levels Beyond Mục tiêu: xây dựng ứng dụng website nhằm giúp người dùng dễ dàng quản lý lưu trữ item (thường media ảnh, nhạc, phim) thành sưu tập (collections) có cấu trúc phân cấp (hierarchical structure) Một số ứng dụng tương tự kể đến Google Drive Đối tượng hướng tới: công ty hoạt động giải trí (media companies), người sáng tạo nội dung (creative user) hay sử dụng cấu trúc thư mục để quản lý lưu trữ Một số khách hàng sử dụng Dự án phân thành nhiều giai đoạn (hay SOW) Em tham gia SOW 2, tập trung vào việc quản lí sưu tập, hay cịn gọi collection thao tác với chúng 3.1.2 Một số chức + Nested collections: collection tổ chức theo cấu trúc phân cấp lồng nhau, người dùng tạo collection B ngang hàng với collection A (same level collection) collection A (sub-collection) + Navigate between collections: người dùng thực nhấn vào collection để xem item chứa + Collection sidebar: hiển thị toàn thư mục thành sidebar để dễ dàng thao tác (giống Windows Explorer) 19 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp + Type division: collection phân loại đa dạng để dễ dàng việc quan sát Mỗi loại có quy luật cụ thể dựa tài liệu đặc tả + Take actions: tương tác với collection như: tạo sưu tập con, chỉnh sửa thông tin, chia sẻ, xóa, đánh dấu (star) + Create/Edit Smart collection: tạo chỉnh sửa collection thành kiểu Smart (1 loại collection đặc biệt định nghĩa business rule) + Move collections: di chuyển collection khỏi/ vào collection + Search collection: tìm kiếm hệ thống Và nhiều chức khác 3.1.3 Thành phần thực Nhóm dự án bao gồm 12 thành viên, gồm chức vụ sau: + Project Manager, kiêm Scrum master + Business Analyst, kiêm Product Owner + Development team gồm: Tech Lead, Senior Developer, Junior Developer (em thuộc role này), QA/QC, Intern Developer 3.2 Thực 3.2.1 Use case đảm nhiệm + Nested collections + Collection sidebar + Type division + Create Smart collection + Edit Smart collection + Delete Smart collection 20 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp 3.2.1.1 Nested collections Mô tả: Cho phép người dùng tổ chức collection theo cấu trúc phân cấp lồng nhau, người dùng tạo collection B ngang hàng với collection A (same level collection) collection A (sub-collection) Thực hiện: áp dụng kiến thức nghiên cứu Angular, đặc biệt tree view rendering nêu phần 2.4.3.2 để thực hóa cấu trúc dạng yêu cầu đề Kết quả: + Hoàn thành use case với requirement design + Viết unit test + Demo với QA client 3.2.1.2 Collection sidebar Mô tả: Cho phép hiển thị toàn thư mục thành sidebar để dễ dàng thao tác với lượng liệu lớn Thực hiện: áp dụng kiến thức nghiên cứu Angular, đặc biệt virtual scroll nêu phần 2.4.3.1 để tối ưu việc render list collection, tăng UX cho người dùng Kết quả: + Hoàn thành use case với requirement design + Viết unit test + Demo với QA client 3.2.1.3 Type division Mô tả: Cho phép người dùng phân loại đa dạng thành All, Private, Smart, Starred để dễ dàng việc quan sát Mỗi loại có quy luật cụ thể dựa tài liệu đặc tả Thực hiện: áp dụng kiến thức nghiên cứu Angular với phân tích rõ ràng yêu cầu loại collection đặc tả nhằm đưa cách thực hóa tốt Kết quả: 21 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp + Hoàn thành use case với requirement design + Viết unit test + Demo với QA client 3.2.1.4 Create/Edit smart collection Mô tả: Cho phép người dùng tạo chỉnh sửa collection thành kiểu Smart (1 loại collection đặc biệt định nghĩa business rule) Smart collection loại collection bao gồm thêm trường kiểu search kiểu workflow Sau tạo, tất item nội dung hệ thống khớp với kiểu search tự động đưa vào collection này, sau workflow tương ứng khởi chạy (như export thành PDF, download file, ) Thực hiện: áp dụng kiến thức nghiên cứu Angular với phân tích rõ ràng yêu cầu đặc tả nhằm đưa cách thực hóa tốt Cách thức phát triển tính Smart collection tương đối phức tạp liên quan đến nhiều chức khác nên team đánh giá khó Tuy nhiên, em thành cơng xây dựng tính Kết quả: + Hoàn thành use case với requirement design + Viết unit test + Demo với QA client 3.2.1.4 Delete Smart collection Mô tả: Cho phép người dùng xóa collection kiểu Smart (kiểu collection giải thích trên) Thực hiện: áp dụng kiến thức nghiên cứu Angular với phân tích rõ ràng yêu cầu đặc tả nhằm đưa cách thực hóa tốt Kết quả: + Hoàn thành use case với requirement design + Viết unit test + Demo với QA client 22 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp 3.2.2 Quy trình làm việc Project triển khai theo mơ hình Scrum - Agile nên phân theo nhiều sprint, sprint trải qua kiện nêu phần 2.3 Cụ thể: ● Làm việc với team + Mỗi buổi sáng 10h15 tiến hành daily meeting, người trả lời câu hỏi: làm gì, làm gì, làm gì, đồng thời ý kiến thắc mắc khó khăn (nếu có) + Mỗi ngày, tùy vào tiến độ dự án có Dev meeting nhằm trao đổi vấn đề kĩ thuật + Trong ngày, có thắc mắc liên quan requirement liên hệ BA trực tiếp clarify với khách hàng qua Slack + Đầu sprint, PM tiến hành họp Planning để xác định story làm estimate point (1,3,5,8,12) + Tùy tình hình có Grooming sprint nhằm làm rõ lại số vấn đề requirement với team + Kết thúc sprint có Review nhằm đánh giá lại tiến độ kết làm + Trước demo với client có buổi internal demo team với + Thứ cách tuần (buổi tối) tiến hành báo cáo Demo với khách hàng, sử dụng ngôn ngữ tiếng Anh, nhận feedback để cải thiện chức ● Làm việc cá nhân: + Chủ động lấy task nhận task từ PM + Quản lí cập nhật công việc, tiến độ Azure DevOp To do: task assign chưa làm Kickoff: Task trao đổi với BA QA Doing: Task làm Pending: Task thiếu API phải trao đổi thêm requirement Integration: Task tích hợp với task khác 23 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp Ready for delivery: Task sẵn sàng để test Done: Task QA test khơng có bug Bảng tiến độ công việc Azure Devops + Sau nhận task, thực đọc requirement trao đổi với QA, BA + Phân tích design Microsoft Adobe Một design cần phải thực 24 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp + Đọc hiểu API document viết Swagger API + + + + + + + Áp dụng kiến thức kỹ phần 2.2 Áp dụng quy trình nghiệp vụ phần 2.3 Áp dụng công nghệ kĩ thuật phần 2.4 Implement với code Viết unit test Tạo pull request xem review (nếu có) Sửa bug deploy 25 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp 3.3 Sản phẩm hoàn thành Một số giao diện sau hoàn thành chức giao Giao diện trang web với collection sidebar nằm bên trái 26 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp Tree view rendering kết hợp virtual scroll 27 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp Smart collection 28 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp Ví dụ Epic hoàn thành 29 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp CHƯƠNG - TỔNG KẾT 4.1 Các kết đạt ưu điểm Sau tập, em thực nhiều việc, đánh sau: Nhận xét phong cách làm việc từ mentor PM Bản thân em thấy trưởng thành cơng việc thực hiện: ● Ứng dụng kiến thức lý thuyết thực hành trường vào quy trình phát triển phần mềm thực tiễn, từ xây dựng tư lĩnh vực Công nghệ phần mềm mơi trường doanh nghiệp 30 Lê Hồng Minh Sơn - 18520350 - Thực tập tốt nghiệp ● Học hỏi kinh nghiệm thực tế từ dự án công ty, từ kiến thức kĩ kĩ thuật đến quy trình nghiệp vụ Scrum - Agile, rèn luyện tác phong lập trình nhóm có tính kỉ luật, theo quy trình cụ thể ● Trao đổi, giao tiếp hiệu với thành viên khác dự án ● Biết thêm nhiều công nghệ mới, sáng tạo xử lí vấn đề ● Ln sẵn sàng nhận nhiệm vụ, hồn thành cơng việc tốt thời gian, team đánh giá cao tính động kết công việc ● Vận dụng khả tiếng Anh trao đổi, thuyết trình với khách hàng ● Thấy đóng góp vào dự án cách hiệu ● Em có hội tìm hiểu rõ vận dụng kiến thức phục vụ cho hành trình làm việc lĩnh vực công nghệ thông tin tương lai Đặc biệt em trở thành nhân viên thức nhận phúc lợi tốt 4.2 Một số hạn chế Tuy nhiên dự án gặp phải bất lợi định: ● Khó khăn tình hình dịch bệnh nên không trực tiếp làm việc công ty, gặp mặt thành viên, gây nên số rào cản trao đổi (mạng Internet, thời gian làm việc khác nhau, ) → cố gắng giữ liên lạc với team ● Cịn kinh nghiệm nên tốn số thời gian để làm quen công nghệ → trau dồi kiến thức kĩ ● Ban đầu lúc báo cáo thường không vào trọng tâm vấn đề chưa quen → anh chị hướng dẫn nên tự tin 31 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp 4.3 Hướng phát triển số cảm nhận trình thực tập Em tiếp tục nâng cao kiến thức kĩ để khơng ngừng phát triển thân, đóng góp tích cực hiệu cho tổ chức tham gia So với mục đích hồn thành tập tốt nghiệp, em đạt nhiều thứ mong đợi Thực cám ơn Quý công ty TNHH KMS Technology anh chị team Levels Beyond thương yêu tin tưởng em, hướng dẫn cho em bước vững môi trường doanh nghiệp Với vai trị nhân viên thức tại, em tin tiếp tục làm tốt vai trị Em xin cám ơn Q 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 đồng hành em suốt thời gian học tập năm, giúp em tìm cơng việc mong muốn Em xin chân thành cám ơn tất 32 Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp TÀI LIỆU THAM KHẢO [1] Agile Manifesto, https://agilemanifesto.org/ [2] Angular - The Complete Guide, Udemy course: https://www.udemy.com/course/the-complete-guide-to-angular-2/ [3] Material document: https://material.angular.io/guide/getting-started [4] Angular document: https://angular.io/guide/what-is-angular [5] NgRx document: https://ngrx.io/docs 33 ... giới thiệu quy trình triển khai dự án với Scrum - Agile + Tìm hiểu cách sử dụng cơng cụ Microsoft Azure DevOps để quản lí dự án + Được thực hành cách nhận công việc báo cáo tiến độ hàng ngày ● Kết... 18520350 - Thực tập tốt nghiệp ● Học hỏi kinh nghiệm thực tế từ dự án công ty, từ kiến thức kĩ kĩ thuật đến quy trình nghiệp vụ Scrum - Agile, rèn luyện tác phong lập trình nhóm có tính kỉ luật, theo. .. 18520350 - Thực tập tốt nghiệp 3.2.2 Quy trình làm việc Project triển khai theo mơ hình Scrum - Agile nên phân theo nhiều sprint, sprint trải qua kiện nêu phần 2.3 Cụ thể: ● Làm việc với team +