BÁO cáo THỰC tập REACTJS, các CÔNG cụ KIỂM THỬ và QUẢN lý MONO REPO

1 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 REACTJS, CÁC CÔNG CỤ KIỂM THỬ VÀ QUẢN LÝ MONO REPO Công ty thực tập: TNHH Công nghệ Giải pháp Citynow Người phụ trách: Trương Tấn Thuận Thực tập sinh: Huỳnh Thị Kim Thảo Trương Tấn Thuận Huỳnh Thị Kim Thảo TP Hồ Chí Minh, tháng 12 năm 2021 Trương Tấn Thuận Huỳnh Thị Kim Thảo LỜI MỞ ĐẦU Ngày nay, công nghệ Web 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 sử dụng nhiều phổ biến rộng rãi Cùng với xu phát triển giới, Việt Nam ngoại lệ Công nghệ Web sản phẩm hầu hết cơng ty Đặc biệt với đời React đưa công nghệ Web phát triển thêm tầm cao Công nghệ Web phát triển mạnh đầu tư nhiều phần mềm Với hỗ trợ đa tảng, dường Web dần thay phần mềm desktop lợi ích mà đem lại Vì lý này, em định chọn lập trình Web làm định hướng cho việc học tập Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm web mơi trường chun nghiệp, em có dự định thực thực tập Vì vậy, em định chọn Citynow - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Trương Tấn Thuận Huỳnh Thị Kim Thảo LỜI CẢM ƠN Em xin trân trọng gửi lời cảm ơn Công ty TNHH Công nghệ Giải pháp Citynow 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 hướng dẫn, em tiếp thu kiến thức quan trọng ReactJS, NextJS với Javascript Typescirpt, công cụ để xây dựng Mono Repo Bazel, Nx Workspace, Lerna, Yarn Workspace, công cụ kiểm thử Cypress, Em xin chân thành cảm ơn anh Trương Tấn Thuậ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 Đồng thời em cảm ơn anh Song Văn Cẩm giúp đỡ em nhiều việc tìm hiểu cơng nghệ Em 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 cho em làm báo cáo Huỳnh Thị Kim Thảo TP.Hồ Chí Minh, ngày 23 tháng 12 năm 2021 Trương Tấn Thuận Huỳnh Thị Kim Thảo NHẬN XÉT CỦA KHOA Trương Tấn Thuận Huỳnh Thị Kim Thảo 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 thực tập Giới thiệu Công ty TNHH Công nghệ Giải pháp Citynow Một số sản phẩm công nghệ công ty 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 2.1 Các công cụ làm việc 2.2 Tìm hiểu ngơn ngữ ReactJS Javascript, Storybook Atomic design 10 2.3 Lập trình web clone – Zing MP3 với ReactJS Javascript 10 2.4 Tìm hiểu cơng cụ quản lý Mono repo - Bazel Nx workspace 11 2.5 Tìm hiểu NextJS, typescript kết hợp công cụ kiểm thử Cypress 11 Thực project 12 Lịch làm việc 12 Chương 3: Chi tiết project 15 Giới thiệu dự án 15 Thực 15 Các công việc làm dự án: 15 Kết đạt được: 15 TÀI LIỆU THAM KHẢO 16 TỔNG KẾT 17 Trương Tấn Thuận Huỳnh Thị Kim Thảo Chương 1: Giới thiệu công ty thực tập Giới thiệu Công ty TNHH Công nghệ Giải pháp Citynow Công ty TNHH Citynow thành lập CEO Phan Tuấn Tài vào hoạt động từ tháng 07/2016 Anh cựu sinh viên Khoa Công Nghệ Thông Tin thuộc Trường ĐH Khoa Học Tự Nhiên, năm du học năm làm việc Nhật bản, từng làm việc công ty game hàng đầu Nhật, có nhiều kinh nghiệm làm việc vận hành platform game, phát triển game, dịch vụ web, mobile application Với tảng kinh nghiệm có niềm tin người Nhật anh định thành lập Công ty TNHH Citynow Tp.Hồ Chí Minh, Việt Nam Cơng ty Cổ phần Citynow Asia Tp.Tokyo, Nhật Bản Cùng với tâm huyết giảm khoảng cách Công Nghệ Thông Tin Việt Nam với nước giới đồng thời tạo nhiều hội học tập làm việc cho bạn trẻ Việt Nam Trương Tấn Thuận Huỳnh Thị Kim Thảo Một số sản phẩm công nghệ công ty - HRSol : hệ thống hỗ trợ việc đăng ký, quản lý ca làm việc, chấm công quản lý công, hỗ trợ giải số thủ tục công việc đơn giản cập nhật chỉnh sửa công, xin nghỉ phép, - Rocket.Chat: Phần mềm trao đổi thông tin, giải công việc Trương Tấn Thuận Huỳnh Thị Kim Thảo Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Các công nghệ Front-end Web, công cụ kiểm thử quản lý Mono Repo” nhằm mục đích giúp sinh viên thực tập đào tạo lập trình web ReactJS, NextJS với Javascript Typescript, với tìm hiểu cơng cụ kiểm thử Cypress, công cụ quản lý Mono Repo Bazel, Lerna, Nx workspace, Yarn workspace đồ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, q trình thành lập cơng ty, cơng ty văn hóa doanh nghiệp - Thực : Thực hành sử dụng phần mềm nêu Đượ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 (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, văn hóa doanh nghiệp ( cách ứng xử, trách nhiệm, …) Ngồi ra, thực tập sinh cịn 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, sử dụng driver công việc… - Kết : Hiểu thêm công ty TNHH Cơng nghệ Giải pháp Citynow, 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 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 trình làm việc Trương Tấn Thuận Huỳnh Thị Kim Thảo 10 Trong thời gian này, người hướng dẫn hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc sau Một số phần mềm số Github - sử dụng quản lý code, viết code Visual Studio Code, Trello quản lý công việc, quản lý tiến độ, nhận task, sử dụng Rocket.Chat để trao đổi nội dung công việc, họp, báo cáo công việc qua Skype - Thực : Thực hành sử dụng phần mềm nêu - Kết : Có khả ứng dụng cơng cụ vào công việc giao thời gian thực tập 2.2 Tìm hiểu ngơn ngữ ReactJS Javascript, Storybook Atomic design - Thời gian : tuần - Nội dung : Tìm hiểu Storybook, setup source với công cụ eslint, prettier, lint-staged, husky Vận dụng Atomic design để xây dựng page, củng cố kiến thức React Setup github page cho đồ án - Thực : - Tự học theo tài liệu gợi ý để tham khảo - Làm task giao -Kết : - Có kiến thức tồn diện ReactJS, storybook - Có kiến thức Atomic design - Config source code với công cụ hỗ trợ 2.3 Lập trình web clone – Zing MP3 với ReactJS Javascript - Thời gian : tuần - Nội dung: Hoàn thiện giao diện đồ án Thực xử lý đa ngôn ngữ chuyển theme với context Xử lý liệu mock với Redux redux thunk Thực chức liên quan đến event Javascript - Thực : - Tự học tài liệu liên quan hỏi người hướng dẫn có thắc mắc Trương Tấn Thuận Huỳnh Thị Kim Thảo 11 - Áp dụng kiến thức vào trình thực -Kết : - Nắm kiến thức context, redux, hook custom hook - Nắm cách xử lý event javascript với use hook 2.4 Tìm hiểu cơng cụ quản lý Mono repo - Bazel Nx workspace - Thời gian : tuần - Nội dung: Tìm hiểu mono repo, tìm hiểu công cụ main concept, tạo case study demo - Thực : - Đọc tài liệu gửi, xem tutorial để tìm hiểu thêm - Setup công cụ, config với husky, eslint, lint-staged, - Đề case study mono repo demo code - Kết : - Nắm cách setup cơng cụ - Nắm q trình, cách thức quản lý, share package bazel nx workspace 2.5 Tìm hiểu NextJS, typescript kết hợp cơng cụ kiểm thử Cypress - Thời gian : tuần - Nội dung: Tìm hiểu NextJS typescript, tìm hiểu testing end-to-end Cypress - Thực : - Đọc tài liệu NextJS typecsript - Tiến hành code page đơn giản - Đọc tài liệu Cypress, setup, config với husky, eslint, lint-staged, - Tìm hiểu viết test run test - Kết : - Nắm kiến thức NextJS, typescript - Tạo page, xử lý context, use hook - Biết cách viết test sử dụng cypress Trương Tấn Thuận Huỳnh Thị Kim Thảo 12 Thực project Sau gần hai tháng training thực hành, thực tập sinh nắm kiến thức ReactJS, NextJS với Javascript Typescript, với tìm hiểu công cụ kiểm thử Cypress, công cụ quản lý Mono Repo Bazel, Lerna, Nx workspace, yarn workspace Trong tháng đầu, người phụ trách hướng dẫn thực tập sinh áp dụng kiến thức học để thực clone trang web ZingMp3 Chi tiết đồ án nói phần sau Lịch làm việc Mức Tuần Công việc Người hướng độ dẫn hồn thành - Nhận xét người hướng dẫn Tìm hiểu công Chị Đồng Thiên ty, cách tổ chức Thanh cơng ty - Dương Tìm hiểu văn Thùy Linh doanh Anh hóa nghiệp, Chị Trương trách Tấn Thuận nhiệm bổn phận công ty - Tìm hiểu cách làm việc, cơng cụ hỗ trợ Trương Tấn Thuận Huỳnh Thị Kim Thảo 13 Tìm - hiểu Anh Trương Tấn Thuận Storybook Setup source với - công cụ eslint, prettier, lint2+3 staged, husky - Vận dụng Atomic design để xây dựng page - Củng cố kiến thức React -Thực xử lý đa Anh Trương ngôn ngữ chuyển Tấn Thuận theme với context - Xử lý liệu mock với Redux redux 4+5 thunk - Tìm hiểu event Javascript - Hồn thành ZingMP3 Clone - Tìm hiểu mono Anh Trương repo, tìm hiểu Tấn Thuận công cụ quản lý Anh Song Văn Bazel nx Cẩm workspace Trương Tấn Thuận Huỳnh Thị Kim Thảo 14 - Tìm hiểu NextJS, Anh 7+8 Trương Tấn Thuận typescript - Tìm hiểu cơng cụ kiểm thử Cypress -Tạo landing page Anh 9+10+11+12 giới sản phẩm Tấn Thuận công (CloudLocker) Trương Tấn Thuận Trương ty Anh Song Văn Cẩm Huỳnh Thị Kim Thảo 15 Chương 3: Chi tiết project Giới thiệu dự án Clone Trang chủ Zing MP3 kết hợp với team thực mono repo, quản lý testing Thực Huỳnh Thị Kim Thảo Với giúp đỡ tận tình anh phụ trách Các công việc làm dự án: - Thực code page - Tìm hiểu Seminar cơng cụ quản lý mono repo Bazel, nx workspace - Tìm hiểu, viết test sử dụng Cypress Kết đạt được: Link: React App (kimthaohuynhthi.github.io) Trương Tấn Thuận Huỳnh Thị Kim Thảo 16 TÀI LIỆU THAM KHẢO - https://reactjs.org/ - https://nextjs.org/ - https://javascript.info/events - https://www.typescriptlang.org/ - https://bazel.build/ - https://nx.dev/ - https://www.cypress.io/ - https://lerna.js.org/ Trương Tấn Thuận Huỳnh Thị Kim Thảo 17 TỔNG KẾT Như vậy, sau sáu tháng thực tập công ty TNHH Công nghệ Giải pháp Citynow, em có kiến thức ReactJS, Javascript, typescript, đồng thời học thêm nhiều công cụ kiểm thử cypress công cụ quản lý mono repo Bazel, nc workspace, kỹ mềm thuyết trình,… Đồng thời, em áp dụng kiến thức để thực task tiến hành thực dự án công ty Chân thành cảm ơn anh chị hỗ trợ, đặc biệt anh Trương Tấn Thuận giúp đỡ dạy em nhiều Trương Tấn Thuận Huỳnh Thị Kim Thảo ... với team thực mono repo, quản lý testing Thực Huỳnh Thị Kim Thảo Với giúp đỡ tận tình anh phụ trách Các công việc làm dự án: - Thực code page - Tìm hiểu Seminar công cụ quản lý mono repo Bazel,... sáu tháng thực tập công ty TNHH Công nghệ Giải pháp Citynow, em có kiến thức ReactJS, Javascript, typescript, đồng thời học thêm nhiều công cụ kiểm thử cypress công cụ quản lý mono repo Bazel,... Nội dung thực tập Đợt thực tập với chủ đề ? ?Các công nghệ Front-end Web, công cụ kiểm thử quản lý Mono Repo? ?? nhằm mục đích giúp sinh viên thực tập đào tạo lập trình web ReactJS, NextJS với Javascript