LẬP TRÌNH WEBSITE VỚI ReactJS, NextJS (BÁO CÁO THỰC TẬP TỐT NGHIỆP)

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 TỐT NGHIỆP LẬP TRÌNH WEBSITE VỚI ReactJS, NextJS Công ty thực tập: Công ty TNHH Giải Pháp Phần Mềm Citynow Lớp: SE501.M21 Thực tập sinh: Nguyễn Hữu Trí TP Hồ Chí Minh, tháng 06 năm 2022 LỜI MỞ ĐẦU Với phát triển nhanh chóng mặt thị trường phần mềm, có nhiều hướng cách phát triển phần mềm khác nhau, việc lên ý tưởng để phát triển phần mềm từ đầu, cách tạo sản phẩm cách phát triển, cập nhật thay đổi hệ thống hay phần mềm có sẵn để phù hợp với nhu cầu riêng biệt cá nhân tổ chức xu hướng ngành công nghiệp phầm mềm giới Sau thời gian họp tập trường, nhằm kiếm thêm kinh nghiệm thực tế, muốn tham gia trải nghiệm làm việc môi trường chuyên nghiệp, em định tìm kiếm cơng ty để thực tập Vì vậy, em định chọn Citynow – bến đỗ lý tưởng, đại, trẻ trung, chuyên nghiệp nơi giúp em thực tập | Page LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH Giải Pháp Phần Mềm 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 mentor, em tiếp thu kiến thức quan trọng để thực phát triển website Chân thành cảm ơn anh bỏ nhiều thời gian, công sức để hướng dẫn chúng em hồn thành đợt thực tập Vì kiến thức thân hạn chế lần va chạm tiếp xúc với thực tế, áp dụng lý thuyết vào cơng việc nên thân cịn bỡ ngỡ lúng túng, không tránh khỏi thiếu sót, mong quý người đóng góp ý kiến để em hồn thiện Xin cảm ơn anh Thuận team Frontend giúp đỡ trình thực tập hồn thiện sản phẩm 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 TP Hồ Chí Minh, ngày 16 tháng 06 năm 2022 Nguyễn Hữu Trí | Page NHẬN XÉT | Page MỤC LỤC CHƯƠNG 1: GIỚI THIỆU CƠNG TY THỰC TẬP 2.1 Giới thiệu Cơng ty TNHH Giải Pháp Phần Mềm Citynow 2.2 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 Nghiên cứu kỹ thuật 2.1 Tìm hiểu quy trình làm việc cơng ty 2.2 Tìm hiểu ReactJS library, kĩ liên quan: 2.3 Tìm hiểu NextJS cơng cụ Storybook: 2.4 Tìm hiểu Testing: Tham gia project Lịch làm việc CHƯƠNG 3: CHI TIẾT PROJECT 11 Giới thiệu 11 Thực 11 Kết 11 TỔNG KẾT 12 TÀI LIỆU THAM KHẢO 13 | Page CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 2.1 Giới thiệu Công ty TNHH Giải Pháp Phần Mềm Citynow Công ty TNHH Citynow thành lập vào hoạt động từ tháng 7/2016 Citynow cung cấp dịch vụ phát triển ứng dụng cho thiết bị di động Phần mềm Website Thực gia công xây dựng ứng dụng tảng, bao gồm website, mobile, Địa chỉ: 485B Nguyễn Đình Chiểu, Phường 2, Quận 3, Tp.HCM Website: https://citynow.vn/home Email: corp@citynow.vn 2.2 Sản phẩm công ty Citynow chuyên cung cấp sản phẩm phần mềm phục vụ nhiều loại hình dịch vụ khác nhau, đem lại trải nghiệm tốt cho người dùng Các dịch vụ công ty chuyên cung cấp: ● Cung cấp lập trình viên ● Phát triển phầm mềm ● Sản phẩm công nghệ Và công ty cung cấp giải pháp công nghệ đáp ứng nhu cầu khách hàng | Page CHƯƠNG 2: NỘI DUNG THỰC TẬP Em thực tập công ty với vị tri thực tập sinh Frontend (ngôn ngữ ReactJS) Trong thời gian thực tập vừa qua, em anh chị tạo điều kiện để tiếp xúc với tồn quy trình để hồn thiện website thành sản phẩm, đồng thời, phát triển thêm cho thân kĩ mềm cần thiết làm việc nhóm, thuyết trình, phân chia cơng việc giao tiếp Em có hội trải nghiệm, học tập khám phá môi trường phát triển ứng dụ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 (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 - Ngồi ra, thực tập sinh giới thiệu quy định 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 TNHH 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 Tìm hiểu quy trình làm việc cơng ty Thời gian: ngày | Page Nội dung: - Tìm hiểu quy trình làm việc theo mơ hình Scrum-Agile - Cách làm việc theo team - Được anh chị cơng ty hướng dẫn quy trình, cách thực báo cáo công việc Thực hiện: - Tham gia đầy đủ buổi training công ty Đọc tài liệu liên quan Kết quả: - Có nhìn quy trình làm việc thực tế cơng ty 2.2 Tìm hiểu ReactJS library, kĩ liên quan: Nội dung: - React: tìm hiểu React JS, tìm hiểu props, state, hook useState, useEffect, component lifecycle ReactJS - Redux & Redux Toolkit: hiểu sử dụng Redux Redux Toolkit để lưu giá trị state vào store ứng dụng React Native - Vận dụng Atomic Design vào dự án - Hoàn thiện kĩ style SCSS Thực hiện: - Thực phát triển website demo để kiểm tra kiến thức học - Đọc tài liệu liên quan Kết quả: Có kiến thức ReactJS, library kĩ liên quan để tham gia project | Page 2.3 Tìm hiểu NextJS công cụ Storybook: Nội dung: - Các khái niệm NextJS Page, DataFetching, Routing, Testing, - Cách cài đặt Storybook cách sử dụng Storybook - Sử dụng Storybook NextJS để thực dự án Thực hiện: - Thực phát triển website demo để kiểm tra kiến thức học - Đọc tài liệu liên quan Kết quả: Có kiến thức NextJS Storybook 2.4 Tìm hiểu Testing: Nội dung: - Các khái niệm WhiteBox, BlackBox, TDD BDD - Cách thiết kế testcase viết test - Tìm hiểu Jest viết UnitTest với Jest - Tìm hiểu Cypress viết Integration Test với Cypress Thực hiện: - Thực phát triển website demo để kiểm tra kiến thức học - Đọc tài liệu liên quan Kết quả: Có kiến thức Testing để áp dụng vào dự án | Page Tham gia project Sau thời gian training thực hành, thực tập sinh nắm kiến thực ReactJS Testing Sau thực tập sinh áp dụng kiến thức học để thực phát triển project Lịch làm việc Tuần Công việc Người hướng dẫn + Tìm hiểu cơng ty Chị Đồng Thiên Thanh, Anh Trương Tấn Thuận + Học cách trao đổi qua email Mức độ hoàn thành Nhận xét 100% Tốt + Học cách làm việc nhóm thơng qua Git + Dựng Anh Trương Tấn SourceCode cho Thuận dự án 100% Tốt + Tìm hiểu kiến thức nâng cao NextJS, Storybook Anh Trương Tấn Thuận 100% Tốt Anh Trương Tấn Thuận 100% Tốt + Hoàn thiện Website + Tìm hiểu kĩ thuật Mock Tốt | Page + Sử dụng Redux, ReduxThunk + Tham gia buổi training cơng nghệ + Tìm hiểu kiến thức Testing Anh Trương Tấn Thuận 100% Tốt Anh Trương Tấn 100% Thuận, Anh Song Văn Cẩm Tốt + Thực kiểm tra kiến thực thực tập + Tìm hiểu cơng nghệ thực Seminar đề tài công nghệ 10 | Page CHƯƠNG 3: CHI TIẾT PROJECT Giới thiệu Project nhằm mục đích training cho thực tập sinh, giúp bắn bắt ông cụ công nghệ Tên project: Website Nghe Nhạc Mô tả: Website nghe nhạc với kiến chức bản,… Áp dụng kiến thức tìm hiểu q trình thực tập để hồn thành dự án Thực - Làm việc theo nhóm bạn thực tập sinh khác - Tự tìm hiểu tài liệu nhận trợ giúp, hỏi đáp từ anh chị mentor Kết - Hoàn thành tiến độ giao 11 | Page TỔNG KẾT Như vậy, trình thực tập em học nhiều kiến thức kĩ chun mơn thiết kế lập trình ứng dụng di động kĩ xã hội làm việc nhóm, giao tiếp, thuyết trình Nhờ tham gia vào dự án thực tế công ty em có kinh nghiệm làm việc góp phần phát triển thân tương lai Chân thành cảm ơn giúp đỡ anh Trương Tấn Thuận, anh Song Văn Cẩm anh chị công ty dạy giúp đỡ em trình thực tập 12 | Page TÀI LIỆU THAM KHẢO [1] "NextJS," [Online] Available: https://nextjs.org/ [2] "ReactJS," [Online] Available: https://reactjs.org/ [3] "Storybook," [Online] Available: https://storybook.js.org/ [4] "Antomic Design," [Online] Available: https://bradfrost.com/blog/post/atomic-web-design/ [5] "Jest," [Online] Available: https://jestjs.io/docs/getting-started [6] "Cypress," [Online] Available: https://www.cypress.io/ [7] "Redux," [Online] Available: https://redux.js.org/ [8] "Ant Design," [Online] Available: https://ant.design/ ========================= HẾT ========================= 13 | Page ... DUNG THỰC TẬP Em thực tập công ty với vị tri thực tập sinh Frontend (ngôn ngữ ReactJS) Trong thời gian thực tập vừa qua, em anh chị tạo điều kiện để tiếp xúc với tồn quy trình để hồn thiện website. .. nghệ Tên project: Website Nghe Nhạc Mô tả: Website nghe nhạc với kiến chức bản,… Áp dụng kiến thức tìm hiểu q trình thực tập để hồn thành dự án Thực - Làm việc theo nhóm bạn thực tập sinh khác -... Văn Cẩm Tốt + Thực kiểm tra kiến thực thực tập + Tìm hiểu cơng nghệ thực Seminar đề tài công nghệ 10 | Page CHƯƠNG 3: CHI TIẾT PROJECT Giới thiệu Project nhằm mục đích training cho thực tập sinh,