BÁO CÁO THỰC TẬP THỰC TẬP TỐT NGHIỆP LẬP TRÌNH FRONT-END VỚI REACT VÀ ÁP DỤNG QUY TRÌNH 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.M21 LẬP TRÌNH FRONT-END VỚI REACT VÀ ÁP DỤNG QUY TRÌNH SCRUM - AGILE Building front-end wih React and applying Scrum - Agile to project Công ty thực tập: Công ty TNHH FPT Software Người phụ trách: Nguyễn Đức Nhân Thực tập sinh: Ngơ Cơng Hậu - 18520277 TP Hồ Chí Minh, tháng năm 2022 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp LỜI MỞ ĐẦU Trải qua trình 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 FPT Software làm nơi để áp dụng kiến thức chuyên môn đào tạo để trải nghiệm thực tế văn hóa làm việc mơi trường doanh nghiệp Với quy trình làm việc linh hoạt, hiệu quả, người thân thiện, văn hóa tốt, có nhiều hội phát triển, em nhận thấy thực nơi thích hợp để thực mong muốn thân, + Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp LỜI CẢM ƠN Em xin trân trọng gửi lời cảm ơn đến công ty TNHH FPT Software tạo điều kiện cho em có hội thực q trình thực tập cơng ty Em xin cảm ơn anh mentor, anh team lead anh chị công ty hướng dẫn em thời gian vừa qua Nhờ dẫn nhiệt tình người, em tiếp thu kiến thức quan trọng phục vụ trình làm việc 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 Bản báo cáo dù hoàn thành với tất nỗ lực nhân khơng tránh khỏi thiếu sót, 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 15 tháng năm 2022 Ngơ Cơng Hậu Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp NHẬN XÉT CỦA KHOA + Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp MỤC LỤC Ngô Công Hậu - 18520277 - 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 TNHH FPT Software Được thành lập từ năm 1999, tiền thân thuộc tập đoàn FPT, FPT Software trở thành ông ty phát triền phần mềm lớn Việt Nam Có chi nhánh 11 quốc gia, với thị trường Hoa Kỳ, Châu Âu, Châu Á Thái Bình Dương, Việt Nam 15000 lao động, bao gồm nhiều kỹ sư công nghệ Việt Nam chuyên gia cơng nghệ nước ngồi FPT Software đạt thành tích ấn tượng nằm top 100 nhà cung cấp dịch vụ phần mềm toàn cầu vinh dự hai nơi làm việc tốt Việt Nam lĩnh vực CNTT Với tham vọng đổi công nghệ, đem lại hài lòng cao cho khách hàng, cung cấp nhân viên môi trường làm việc thuận lợi nhất, FPT Software tạo nên khác biệt cho nhờ yếu tố Chất lượng dịch vụ đạt chuẩn giới Đáp ứng nhu cầu khắt khe công ty hàng đầu Luôn đầu công nghệ Nguồn nhân lực chuyên nghiệp Giá thành cạnh tranh Nhờ FPT software vinh dự nhận chứng giới chất lượng bảo mật nhi: CMMI 5, ISO 27001: 2005, ISO 9001, ISO 20000 Tính đến cơng ty hợp tác với khách hàng nhà công nghệ hàng đầu giới nhi Hitachi, Neopost , IBM, Canon, Panasonic, Toshiba, Sony,… Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp 1.2 Sản phẩm công ty Với bề dày thập kỷ việc tạo dựng phát triển mơ hình kinh doanh quy mơ lớn lĩnh vực phát triển mơ hình kinh doanh quy mô lớn lĩnh vực phần mềm, FPT cung cấp dịch vụ đạt tiêu chuẩn quốc tế mảng: + Dịch vụ phần mềm truyền thống (Application Services, Business Application Services, Legacy Migration, Testing & BPO + Dịch vụ Digital Age Services (Cloud, Mobility, Analytics & Internet of Things + Dịch vụ Product Engineering bao gồm Embeded System, CAD/CAM IC Design AkaBot – Giải pháp Robotic Process Automation, sản phẩm đến từ FPT Software Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp CHƯƠNG - NỘI DUNG THỰC TẬP 2.1 Tham gia khóa học Day One ● ● + + + + + ● + + Thời gian: ngày (onboarding) Nội dung chính: Giới thiệu cơng ty, q trình thành lập phát triển, sơ đồ tổ chức Tìm hiểu kênh thơng tin, dịch vụ cơng ty Tìm hiểu quy tắc bảo mật công ty Được hướng dẫn setup thiết bi, giới thiệu sử dụng nguồn tài nguyên công ty Làm quen, giao lưu với anh chị Các anh chị giới thiệu sản phẩm thành tựu công ty đạt Kết Hiểu thêm công ty FPT Software tn thủ luật cơng ty Có thêm kỹ việc sử dụng kênh thông tin để trao đổi hiệu doanh nghiệp 2.2 Giai đoạn training ● ● + + + ● + + + Thời gian: tháng (fundamental training) Nội dung chính: Được giới thiệu phần kiến thức cần thiết cho dự án thông qua dẫn mentor Tham gia khóa học tảng Udemy Business Thực hành áp dụng kiến thức kỹ để xây dựng mock project Kết Hiểu sâu công nghệ phát triển web Biết cách xây dựng web project cách giải vấn đề thường gặp phải Biết vận dụng cách quản lí mã nguồn Git, phương pháp Agile, nguyến tắc clean code, mẫu thiết kế, an toàn ứng dụng web, … Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp 2.3 Nghiên cứu công nghệ project Thời gian: tháng ● Nội dung chính: Ngồi kiến thức tảng frontend HTML, CSS, JS mà em biết, qua tìm hiểu cơng nghệ dự án, em tìm hiểu cơng nghệ, kĩ thuật sau đây: ● 2.3.1 React React thư viện UI phát triển Facebook để hỗ trợ việc xây dựng thành phần (components) UI có tính tương tác cao, có trạng thái sử dụng lại React sử dụng Facebook production, www.instagram.com viết hoàn toàn React Một điểm mạnh React cấu thành UI component sử dụng JSX, kết hợp JS HTML, giúp thực logic render dễ dàng Ngồi React sử dụng cơng nghệ Vỉtual DOM giúp so sánh thay đổi giá trị lần render với lần render trước cập nhật thay đổi DOM Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp 2.3.2 State management với Redux Redux predictable state management tool cho ứng dụng Javascript Nó giúp bạn viết ứng dụng hoạt động cách quán, chạy môi trường khác (client, server, and native) dễ dàng để test Redux đời lấy cảm hứng từ tư tưởng ngôn ngữ Elm kiến trúc Flux Facebook Do Redux thường dùng kết hợp với React Các thành thần redux: Store: Nơi lưu trữ state, sử dụng tất component app nằm store provider, store thay đổi sang trạng thái thông qua reducer Reducer: reduce function chứa logic để return state cũ thành state dựa vào action truyền vào Actions: Các hành động để thay đổi state, bao gồm thành phần: type payload Các hành động truyền vào reducer thông qua phương thức dispatch Middlewares: Action dạng hàm, có khả dispatch action khác 10 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp 2.3.3 Unit test với Jest React testing library Jest Javascript testing framework phổ biến dễ sử dụng Những tính bật Jest bao gồm số lượng matcher phong phú, chế mock đơn giản, tài liệu rõ ràng 11 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp Đi kèm với Jest, dự án sử dụng React Testing Library, thư viện hỗ trợ render element dùng cho test, simulate user event chế async 2.3.4 End to end testing với cypress Cypress front end testing tool xây dựng cho ứng dụng Web đại Đây công cụ hỗ trợ hữu hiệu cho developers QA kiểm thử ứng dụng Web đại Cypress xây dựng kiến trúc chạy vòng lặp chạy ứng dụng thử nghiệm Cypress thường so sánh với Selenium Nhưng Cypress hoàn toàn khác biệt với Selenium khơng gặp phải hạn chế Selenium Điều giúp thực thi Test Cases cách đơn giản dễ dàng 12 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp Cypress tích hợp sẵn test report giúp thể rõ ràng hành động lúc test 2.3.5 Công cụ tổ chức UI components với Storybook 13 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp Storybook công cụ để phát triển giao diện người dùng Nó giúp việc phát triển nhanh dễ dàng cách cô lập UI Component Sử dụng Storybook ta preview UI, specifications hành vi component trước đưa vào sử dụng ứng dụng 2.3.6 CI/CD với Jenkins Project có áp dụng workflow CI/CD nên đỏi hỏi em phải hiểu quy trình build, deploy sửa lỗi cần thiết 2.4 Tham gia project thực tế với khách hàng ● ● + + + + + Thời gian: tuần Nội dung chính: Được cấp tài khoản truy cập vào trang làm việc: Github Enterprise, Slack, Rally, OKTA, Được tiếp cận với source code dự án, nghiên cứu structure code convention (khoảng tuần), assign chức phụ (1 tuần), trực tiếp nhận chức (những tuần sau đó) Tham gia vào kiện sprint: Daily meeting, Planning, Grooming, Review Retro Support thành viên team Thảo luận với khách hàng để làm rõ chức năng, refactor code resolve comment Pull Requests 14 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp Kết + Hiểu thực cách làm việc thực tế quy trình phát triển phần mềm theo mơ hình Scrum – Agile + Áp dụng kỹ thuật code môi trường chuyên nghiệp + Rèn luện kỹ communicate, kỷ luật cơng việc, làm việc nhóm ● 15 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp CHƯƠNG - CHI TIẾT VỀ PROJECT 3.1 Mô tả dự án 3.1.1 Tổng quát Tên dự án: KBBATC Mục tiêu: Phát triển bảo trì ứng dụng website autotrader.com Trang web marketplace để liên kết người mua bán xe Người dùng mua bán xe mới, xe cũ tính 3D viewer, chạy thử, nhắn tin, customer support Đối tượng hướng tới: Mọi cơng dân Mỹ Úc có nhu cầu mua bán xe Cơng nghệ: • Frontend: React, Nextjs, Redux, Bootstrap, SCSS, Storybook • Backend: Java Spring Boot 3.1.2 Một số chức Trang tìm kiếm xe: Tìm kiếm xe theo lọc, vị trí Trang chi tiết xe: Xem thông số kỹ thuật xe, hình ảnh/video preview, trả giá, liên hệ với người bán / doanh nghiệp bán 16 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp 17 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp 3.2 Sản phẩm hoàn thành Refactor, stabilize Offer component ứng dụng Gắn analytic taggings vào element trang 18 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp Optimize tìm kiếm xe 19 Ngơ Cơng Hậu - 18520277 - 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: ● 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ể ● Học hỏi best practices công cụ phát triển lập trình web frontend dự án chuyên nghiệp 20 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp 4.2 Một số hạn chế Tuy nhiên dự án gặp phải bất lợi định: ● Do dịch COVID 19 nên em không trực tiếp lên làm việc với công ty, gặp mặt thành viên, khiến gặp số khó khăn trao đổi công việc (Mạng internet, thời gian làm việc không ổn định,…) Khắc phục: Cố gắng giữ liên lạc với team, chủ động hỗ trợ thành viên khác làm việc ● Do cịn kinh nghiệm nên tốn số thời gian để làm quen công nghệ với cách làm việc doanh nghiệp Khắc phục: Trau dồi kiến thức kỹ năng, học hỏi từ anh chị senior, PM 21 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp TÀI LIỆU THAM KHẢO [1] React document: https://reactjs.org/ [2] FPT Software Offiical Website: https://www.fpt-software.com/ [3] Redux State Management: https://redux.js.org/ [4] Storybook: https://storybook.js.org/ [5] Bootstrap: https://getbootstrap.com/ 22 ... 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ể ● Học hỏi best practices cơng cụ phát triển lập trình web frontend dự án... trước đưa vào sử dụng ứng dụng 2.3.6 CI/CD với Jenkins Project có áp dụng workflow CI/CD nên đỏi hỏi em phải hiểu quy trình build, deploy sửa lỗi cần thiết 2.4 Tham gia project thực tế với khách... Requests 14 Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp Kết + Hiểu thực cách làm việc thực tế quy trình phát triển phần mềm theo mơ hình Scrum – Agile + Áp dụng kỹ thuật code môi trường chuyên