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 FRONT END WEBSITE Công ty thực tập TMA Solution Người phụ trách Trần Ngọc Nhã Thực tập sinh Cao Ngọc Anh TP Hồ Chí[.]
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 FRONT-END WEBSITE Công ty thực tập : TMA Solution Người phụ trách : Trần Ngọc Nhã Thực tập sinh : Cao Ngọc Anh TP Hồ Chí Minh, tháng 12 năm 2022 LỜI MỞ ĐẦU Với phát triển vượt bật công nghệ thông tin, thiết bị điện tử đặc biệt Internet, công nghệ web hay website web application ngày phổ biến ưa chuộng danh nghiệp người dùng Đó động lực mạnh mẽ khiến cho công nghệ trọng nâng cao, phát triển mạnh mẽ hết Ngày nay, website web application trở thành phận thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vô mạnh mẽ, công nghệ web chiếm giữ vai trò lớn lao với phát triển công nghệ thông tin giới Tại Việt Nam, ngành cơng nghiệp web phát triển mạnh mẽ, sánh ngang với công ty hàng đầu giới Để thỏa mãn nhu cầu người dùng cạnh tranh với đối thủ lĩnh vực, việc nâng cao trải nghiệm người dùng ứng dụng web tiêu chí định thiết kế với xây dựng giao diện thân thiện cho ứng dụng bước đầu để đảm bảo tiêu chí Vì lý này, em định chọn lập trình front-end cho ứng dụng web website làm định hướng cho việc học tập Sau ba năm học tập trường, nảy sinh mong muốn có thêm kinh nghiệm thực tế, muốn thử sức, thực hóa kiến thức học cách tham gia làm việc môi trường đại, chuyên nghiệp, em định tham gia thực tập TMA solutions Trần Ngọc Nhã Cao Ngọc Anh LỜI CẢM ƠN Đầu tiên, cho phép em trân trọng gửi lời cảm ơn đến Công ty Giải pháp phần mềm Tường Minh 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 đội dự án DC29 – TecAlliance Fleet, em tiếp thu kiến thức quan trọng có trải nghiệm vơ giá Chân thành cảm ơn anh chị đội dự án bỏ nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Trần Ngọc Nhã chào đón, cho em hội để tham gia tiếp xúc với dự án, đồng thời tạo điều kiện để em cân việc học tập trường việc thực tập cơng ty; anh Lê Hồng Giang, dẫn dắc em tận tình suốt trình tìm hiểu Angular để áp dụng vào dự án thực tế, giúp đỡ em làm quen với mơi trường quy trình làm việc đội dự án; cảm ơn chị Trương Ngọc Ánh bạn Nguyễn Hồ Quỳnh Thư hỗ trợ em nhiều vấn đề kỹ thuật, quản lý code q trình hịa nhập với thành viên khác Cũng xin cảm ơn thầy cô khoa Công nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Cao Ngọc Anh TpHCM, ngày 25 tháng 12 năm 2022 Trần Ngọc Nhã Cao Ngọc Anh NHẬN XÉT CỦA KHOA Trần Ngọc Nhã Cao Ngọc Anh 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 1: Giới thiêu công ty Giải pháp phần mềm Tường Minh (TMA Solutions) Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật Tham gia dự án 12 Chương 3: Chi tiết project TechAlliance Fleet 14 Giới thiệu TechAlliance Fleet 14 Thực 14 TÀI LIỆU THAM KHẢO 15 TỔNG KẾT 16 Trần Ngọc Nhã Cao Ngọc Anh Chương 1: Giới thiêu công ty Giải pháp phần mềm Tường Minh (TMA Solutions) Hình 1.1: Logo công ty Công ty Giải pháp phần mềm Tường Minh hay TMA Solutions công ty phần mềm hàng đầu Việt Nam TMA Solutions thành lập năm 1997 tiếp tục phát triển vững mạnh từ đến Cơng ty đạt huy chương vàng xuất phần mềm 16 năm liên tiếp (2004-2019) nắm giữ Top 10 công ty FinTech, AI IoT Trong suốt trình phát triển, TMA nắm giữ tầm nhìn trở thành đối tác cung cấp phần mềm tin cậy sáng tạo đến khách hàng; thực tốt nhiệm vụ giúp đỡ khách hàng thành công nhờ cung cấp giải pháp phần mềm hiệu sáng tạo Giá trị cốt lõi công ty thể tôn trọng, cam kết trung thực đến khách hàng động nghiệp Trong 25 qua, TMA áp dụng quy trình tiêu chuẩn quốc tế (RUP, ISO 9001:2000, TL 9000, CMMI-Level 5, ISO 27001:2013, Agile…) kinh nghiệm từ nhiều dự án thành công, đáp ứng yêu cầu chất lượng bảo mật khắt khe từ tập đoàn lớn giới Trần Ngọc Nhã Cao Ngọc Anh Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình Front-end Website” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình Front-end cho Website với Angular, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường chun nghiệ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, q trình thành lập phát triên, quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty Ngồ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, văn hóa làm việc, quyền lợi nghĩa vụ… Kết quả: Hiểu thêm công ty TMA Solutions, q trình thành lập phát triển 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 Trần Ngọc Nhã Cao Ngọc Anh Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc Thời gian: ngày Nội dung: Tìm hiểu cơng cụ sử dụng q trình làm việc Trong thời gian này, supervisor hướng dẫn thực tập sinh tìm hiểu cài đặt cơng cụ gắn liền với công việc sau Một số phần mềm số + Visual Studio Code - IDE biên soạn code + nodeJs npm - môi trường chạy JavaScript triển khai hệ điều hành máy tính chương trình quản lý thư viện ngầm định môi trường Node.js + Angular Angular CLI - frameworks chuyên dụng cho công việc thiết kế web command line interface dành cho Angular + GIT SmartGIT – phần mềm quản lý mã nguồn phân tán giao diện người dùng để làm việc với GIT + Azure DevOp – nơi quản lý source code dự án phân chia task + Skype – phần mềm nhắn tin, gọi điện, chia sẻ file phục vụ liên lạc trao đổi thành viên với Thực hiện: Thực hành cài đặt sử dụng phần mềm nêu Kết quả: Thông thạo cách sử dụng công cụ liên quan mật thiết đến công việc nắm cách thao tác, quy trình triển khai code làm việc nhóm đội dự án Trần Ngọc Nhã Cao Ngọc Anh 2.2 Training plan Giai đoạn Công việc Nghiên cứu RxJS Cơ 1.Cơ Đầu vào Thời gian Đầu Kiến thức RxJs: Kế hoạch - Observable Pattern training chi - Observable Lifecycle tiết - Marble Diagrams - Operators ngày Nghiên cứu kiến thức: - Angular Basics Architecture overview - Template - Rendering topics - Forms, Inputs, Validation - Services and HTTP - LifeCycle Hooks - Routing and Guards Kế hoạch training chi tiết Nắm kiến thức nêu có ứng dụng Angular demo áp dụng chúng 10 ngày Nghiên cứu State management NgXS Kế hoạch training chi tiết Hiển lý thuyết áp dụng vào ứng dụng demo ngày Tạo Custom Directive Kế hoạch training chi tiết Hiển lý thuyết áp dụng Custom Directive vào ứng dụng demo ngày Tạo Custom Pipes Kế hoạch training chi tiết Hiển lý thuyết áp dụng Custom Pipes vào ứng dụng demo ngày Reactive Form Kế hoạch training chi tiết Hiểu lý thuyết áp dụng Reactive Form vào ứng dụng demo ngày Content Projection Angular Kế hoạch training chi tiết Cách dùng content projection để tạo component linh hoạt có khả tái sử dụng Áp dụng vào ứng dụng demo ngày – Kiến thức Angular nâng cao Trần Ngọc Nhã Cao Ngọc Anh – Kiến thức Angular nâng cao khác Exception handling Angular Nghiên cứu cách viết thực thi Unit test Angular Tham gia dự án thực tế Trần Ngọc Nhã Kế hoạch training chi tiết Kế hoạch training chi tiết Kế hoạch training chi tiết Hiểu lý thuyết ứng dụng Exception handling Angular vào the current project ngày Implement unit test ứng dụng demo ngày Implement PBI fix bug Cao Ngọc Anh 10 2.3 Về Angular Angular JavaScript framework dùng để viết giao diện web (Front-end), phát triển Google Angular giúp lập trình viên xây dựng ứng dụng trang đơn (single-page application) cách sử dụng HTML TypeScript cách nhanh Angular bao gồm: - Một component-based framework dùng cho xây dựng ứng dụng web - Bộ sưu tập thư viện tích hợp hỗ trợ nhiều tính phổ biến routing, quản lý form, giao tiếp client-server, … - Nhiều công cụ dành cho người lập trình hỗ trợ phát triển, xây dựng, kiểm thử, cập nhật code 2.4 Về RxJS RxJS thư viện hỗ trợ lập trình chương trình bất đồng hướng kiện thơng qua observable sequences Nó cung cấp type cốt lõi Observable, types liên quan (Observer, Schedulers, Subjects) operators lấy ý tưởng từ phương thức thao tác với Array (map, filter, reduce, every, …) để xử lý kiện bất đồng collections Các nguyên lý cốt lõi RxJS là: - Observable: tập lazy push nhiều giá trị Có thể ví dịng stream tỏa giá trị theo thời gian kiện - Observer: tập hàm callbacks lắng nghe giá trị truyền từ Observable - Subscription: đại diện cho thực thi Observable, nguồn hủy bỏ, sử dụng nhiều việc kết thúc thực thi từ Observable - Operators: hàm túy dùng để xử lý cải tạo lại dòng giá trị nhận observable lấy ý tưởng từ hàm thao tác với Array map, filter, concat, reduce, … - Subject: tương tự EventEmitter, để multicasting giá trị hay kiệnt thành nhiều Observers - Schedulers: định subscription bắt đầu thông báo gửi Trần Ngọc Nhã Cao Ngọc Anh 11 2.5 Về NgXS NGXS mẫu thiết kế quản lý trạng thái (state management pattern) thư viện Angular Nó đóng vai trị nguồn giữ state global toàn ứng dụng mà component truy cập trực tiếp vào, cung cấp quy định đơn giản cho thay đổi trạng thái đốn trước NGXS xây dựng dựa CQRS kết hợp với số tính TypeScript class decorators Các nguyên lý cốt lõi NgXS: - Store: Nơi chứa global state, action dispatcher selector - Actions: Lớp quy định hành vi (action) metadata gắn liền với hành vi - State: Lớp định nghĩa trạng thái state - Selects: Selectors dùng chia nhỏ truy suất trạng thái Hình 2.1: Luồng hoạt động NgXS Trần Ngọc Nhã Cao Ngọc Anh 12 Tham gia dự án Sau tháng training thực hành, thực tập sinh nắm kiến thực Angular, RxJS, NgXS Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để tham gia vào dự án thực tế thực đội 3.1 Quy trình quản lý cơng việc đội dự án Dự án áp dụng mơ hình Scrum để quản lý cơng việc Trong đó, q trình phát triển chia thành sprint kéo dài tuần Một sprint bao gồm buổi họp sau: - buổi Sprint Planning: Diễn vào đầu Sprint, nội dung phân chia nhận task để thực thi Sprint - Các buổi Daily Meeting: Diễn hàng ngày Sprint, báo cáo công việc ngày hơm khó khăn gặp phải (nếu có) - buổi Sprint Refinement: Diễn vào Sprint, nội dung chuẩn bị, thơng qua task cho Sprint kế tiếp, đánh giá độ phức tạp, khả thi task - buổi Sprint Review: Diễn vào cuối Sprint, nội dung gồm demo thành tính hồn thành, lỗi phát sửa chữa Sprint; tiếp nhận góp ý khách hàng - buổi Sprint Retrospective: Diễn vào cuối Sprint, sau Sprint Review, nội dung điểm qua task tồn đọng Sprint vừa qua, góp ý, giải pháp để hoàn thiện chúng vào thời gian tới Trần Ngọc Nhã Cao Ngọc Anh 13 3.2 Quy trình thực PBI: thao tác với GIT Azure DevOps Với vai trò front-end developer đội dự án, đầu Sprint mà cụ thể Sprint Planning, em nhận thực PBI (Product Backlog Item) điều tra sửa lỗi Bug tồn từ danh sách task Front-end developer đọc kĩ nắm rõ yêu cầu mô tả, xem xét mock-up giao diện đính kèm tiến hành code sửa lỗi bug Quá trình implement kết hợp với back-end developer khác PBI yêu cầu Sau hoàn thành code, developer thao tác Azure DevOps gắn Senior Developer vào PBI để nhận review code Developer tiếp sửa chữa cập nhật code theo góp ý Kết đoạn code ‘sạch’ giải pháp login tối ưu hóa Developer sau liên hệ với tester đảm nhận PBI Tester thực thi kiểm thử, thông báo lại với developer có bug để xử lý lại code Nếu test case thông qua, developer thực phép merge code vào master branch task xem hoàn thành Trần Ngọc Nhã Cao Ngọc Anh 14 Chương 3: Chi tiết project TechAlliance Fleet Giới thiệu TechAlliance Fleet TechAlliance Fleet ứng dụng web hỗ trợ quản lý đội xe (Fleet Management) thuộc sở hữu công ty TechAlliance TechAlliance Fleet cung cấp tính quản lý đội xe công việc workshop bảo trì, sửa chữa xe trang thiết bị liên quan TechAlliance Fleet cho phép thực tính tốn nhanh chóng thơng minh hóa đơn dịch vụ liên quan; dự đốn trước kinh phí cho trang thiết, bảo trì sửa chữa cho xe đội xe Công nghệ áp dụng: - Kiến trúc: Kết hợp mẫu thiết kế Repository pattern, Domain Driven Design Microservice - Front-end: Ứng dụng Angular RxJS xử lý kiện bất đồng NgSX quản lý trạng thái, phối hợp với Boostrap để thiết kế giao diện người dùng; áp dụng Oauth2.0 OpenID Connect cho Authentication Authorization - Back-end: Sử dụng ASP.NET Core, Entity Framework với sở liệu MongoDB, cosmoDB SQLServer; áp dụng Kafka Apache; áp dụng IdentityServer4 cho Authentication Authorization Thực Trong suốt nửa sau tập, tham gia dự án thực tế, phần lớn PBI mà em thực thuộc module Forecast TecAlliance Fleet gồm việc: - Tạo, điều chỉnh, cập nhật component có chức hiển thị kết thơng số dự đốn kinh phí trang thiết bị, dịch vụ bảo trì sửa chữa xe - Tạo section component dashboard thống kê thành phần data hệ thống - Điều tra sửa lỗi nội dung hiển thị truy suất liệu từ View đến API phía back-end Trần Ngọc Nhã Cao Ngọc Anh 15 TÀI LIỆU THAM KHẢO [1] Angular: https://angular.io/docs [2] NgXS: https://www.ngxs.io/ [3] RxJS: https://rxjs.dev/guide/overview [4] TechAlliance: https://www.tecalliance.net/ [5] TMA Solutions: https://www.tma.vn Trần Ngọc Nhã Cao Ngọc Anh 16 TỔNG KẾT Như vậy, khoảng thời gian thực tập TMA Solutions, em học nhiều kiến thức lập trình, nâng cao trình độ đọc tài liệu giao tiếp tiếng Anh Môi trường làm việc TMA Solutions môi trường trẻ, động, người giúp đỡ lẫn hướng đến mục tiêu hoàn thành công việc cách tốt Em lấy làm vinh dự thực tập làm việc công ty Chân thành cảm ơn giúp đỡ anh Trần Ngọc Nhã, anh Lê Hoàng Giang anh chị dự án TecAlliance Fleet, nhờ có người mà em hồn thành khóa thực tập trở thành nhân viên thức công ty Trần Ngọc Nhã Cao Ngọc Anh ... Cao Ngọc Anh Chương 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Lập trình Front-end Website” nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện lập trình Front-end cho Website với Angular,... training thực hành, thực tập sinh nắm kiến thực Angular, RxJS, NgXS Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để tham gia vào dự án thực tế thực đội 3.1 Quy trình. .. em định chọn lập trình front-end cho ứng dụng web website làm định hướng cho việc học tập Sau ba năm học tập trường, nảy sinh mong muốn có thêm kinh nghiệm thực tế, muốn thử sức, thực hóa kiến