Tài liệu Báo cáo thực tập tốt nghiệp lập trình website với reactjs, nextjs

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 sự phát triển nhanh chóng mặt của thị trường phần mềm, có rất nhiều hướng đi và cách phát triển phần mềm khác nhau, ngoài việc lên ý tưởng để phát triển một phần mềm từ đầu, thì cách tạo ra một sản phẩm mới bằng cách phát triển, cập nhật hoặc thay đổi những hệ thống hay phần mềm có sẵn để phù hợp với nhu cầu riêng biệt của từng cá nhân hoặc tổ chức cũng đang là một xu hướng mới trong ngành công nghiệp phầm mềm trên thế giới. Sau thời gian họp tập trên trường, nhằm kiếm thêm kinh nghiệm thực tế, cũng như muốn được tham gia trải nghiệm và làm việc trong môi trường chuyên nghiệp, em quyết định tìm kiếm một công ty để thực tập. Vì vậy, em quyết định chọn Citynow – một bến đỗ lý tưởng, hiện đại, trẻ trung, chuyên nghiệp là nơi sẽ giúp em thực hiện kỳ thực tập này. 1 | 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ó cơ hội được thực tập tại công ty. Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các anh mentor, em đã tiếp thu được những kiến thức quan trọng để có thể thực hiện phát triển một website. Chân thành cảm ơn các anh đã bỏ ra nhiều thời gian, công sức để hướng dẫn chúng em hoàn thành đợt thực tập này. Vì kiến thức bản thân còn hạn chế cũng như là lần đầu tiên được va chạm và tiếp xúc với thực tế, áp dụng lý thuyết vào công việc nên bản thân còn bỡ ngỡ và lúng túng, không tránh khỏi những thiếu sót, mong quý mọi người có thể đóng góp ý kiến để em có thể hoàn thiện hơn. Xin cảm ơn anh Thuận và team Frontend giúp đỡ trong quá trình thực tập và hoàn thiện sản phẩm. Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này. TP. Hồ Chí Minh, ngày 16 tháng 06 năm 2022 Nguyễn Hữu Trí 2 | Page NHẬN XÉT 3 | Page MỤC LỤC CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 5 2.1 Giới thiệu Công ty TNHH Giải Pháp Phần Mềm Citynow 5 2.2 Sản phẩm của công ty 5 CHƯƠNG 2: NỘI DUNG THỰC TẬP 6 1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 6 2. Nghiên cứu kỹ thuật 6 2.1 Tìm hiểu về quy trình làm việc tại công ty 6 2.2 Tìm hiểu về ReactJS và các library, kĩ năng liên quan: 7 2.3 Tìm hiểu về NextJS và công cụ Storybook: 8 2.4 Tìm hiểu về Testing: 8 3. Tham gia project 9 4. Lịch làm việc 9 CHƯƠNG 3: CHI TIẾT PROJECT 11 1. Giới thiệu 11 2. Thực hiện 11 3. Kết quả 11 TỔNG KẾT 12 TÀI LIỆU THAM KHẢO 13 4 | 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 được thành lập và đi 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 và Phần mềm Website. Thực hiện gia công xây dựng ứng dụng trên mọi nền 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: [email protected] 2.2 Sản phẩm của công ty Citynow chuyên cung cấp các 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 nhấ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 cũng cung cấp giải pháp công nghệ đáp ứng nhu cầu của khách hàng. 5 | Page CHƯƠNG 2: NỘI DUNG THỰC TẬP Em thực tập tại 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 đã được anh chị tạo điều kiện để tiếp xúc với toàn bộ quy trình để hoàn thiện một website thành sản phẩm, đồng thời, phát triển thêm cho bản thân các kĩ năng mềm cần thiết như làm việc nhóm, thuyết trình, phân chia công việc và giao tiếp. Em đã có cơ hội được trải nghiệm, học tập và khám phá trong môi trường phát triển ứng dụng chuyên nghiệp. 1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty Thời gian: 1 ngày Nội dung: Giới thiệu về công ty, cách tổ chức của công ty - Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và 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ủa công ty. - Ngoài ra, thực tập sinh còn được giới thiệu về quy định làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc… Kết quả: Hiểu thêm về công ty TNHH Citynow, quá trình thành lập và phát triển. Có thêm các kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn. 2. Nghiên cứu kỹ thuật 2.1 Tìm hiểu về quy trình làm việc tại công ty Thời gian: 3 ngày 6 | Page Nội dung: - Tìm hiểu về các quy trình làm việc theo mô hình Scrum-Agile. - Cách làm việc theo team. - Được anh chị trong công ty hướng dẫn về quy trình, cách thực hiện và báo cáo công việc. Thực hiện: - Tham gia đầy đủ các buổi training của công ty. Đọc các tài liệu liên quan. Kết quả: - Có được cái nhìn về quy trình làm việc thực tế trong công ty. 2.2 Tìm hiểu về ReactJS và các library, kĩ năng liên quan: Nội dung: - React: tìm hiểu về React JS, tìm hiểu về props, state, các hook useState, useEffect, component và lifecycle trong ReactJS. - Redux & Redux Toolkit: hiểu và sử dụng Redux và Redux Toolkit để lưu các giá trị state vào store trong ứng dụng React Native. - Vận dụng Atomic Design vào dự án. - Hoàn thiện kĩ năng style bằng SCSS Thực hiện: - Thực hiện phát triển website demo để kiểm tra kiến thức đã học. - Đọc các tài liệu liên quan Kết quả: Có kiến thức về ReactJS, các library và kĩ năng liên quan để tham gia project. 7 | Page 2.3 Tìm hiểu về NextJS và công cụ Storybook: Nội dung: - Các khái niệm cơ bản của NextJS về Page, DataFetching, Routing, Testing,.. - Cách cài đặt Storybook và cách sử dụng Storybook. - Sử dụng Storybook và NextJS để thực hiện dự án. Thực hiện: - Thực hiện phát triển website demo để kiểm tra kiến thức đã học. - Đọc các tài liệu liên quan Kết quả: Có kiến thức về NextJS và Storybook. 2.4 Tìm hiểu về Testing: Nội dung: - Các khái niệm về WhiteBox, BlackBox, TDD và BDD. - Cách thiết kế testcase và viết test. - Tìm hiểu Jest và viết UnitTest với Jest - Tìm hiểu về Cypress và viết Integration Test với Cypress. Thực hiện: - Thực hiện phát triển website demo để kiểm tra kiến thức đã học. - Đọc các tài liệu liên quan Kết quả: Có kiến thức về Testing để áp dụng vào dự án. 8 | Page 3. Tham gia project Sau thời gian được training và thực hành, thực tập sinh đã nắm được những kiến thực cơ bản về ReactJS và Testing. Sau đó thực tập sinh áp dụng những kiến thức đã học để thực hiện phát triển project. 4. Lịch làm việc Tuần 1 Công việc Người hướng dẫn + Tìm hiểu về 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. 2 + Dựng Anh Trương Tấn SourceCode cho Thuận dự án 100% Tốt 3 + Tìm hiểu các kiến thức nâng cao về NextJS, Storybook. Anh Trương Tấn Thuận 100% Tốt Anh Trương Tấn Thuận 100% 4 Tốt + Hoàn thiện Website 5 + Tìm hiểu các kĩ thuật Mock. Tốt 9 | Page + Sử dụng Redux, ReduxThunk + Tham gia các buổi training về công nghệ. 6 + Tìm hiểu kiến thức về 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 hiện kiểm tra kiến thực thực tập 7 + Tìm hiểu về một công nghệ và thực hiện Seminar về đề tài công nghệ 10 | Page CHƯƠNG 3: CHI TIẾT PROJECT 1. Giới thiệu Project nhằm mục đích training cho thực tập sinh, giúp bắn bắt được các ông cụ và công nghệ. Tên project: Website Nghe Nhạc Mô tả: Website nghe nhạc với các kiến chức năng cơ bản,… Áp dụng các kiến thức đã tìm hiểu trong quá trình thực tập để hoàn thành dự án. 2. Thực hiện - Làm việc theo nhóm cùng các bạn thực tập sinh khác. - Tự tìm hiểu tài liệu và nhận sự trợ giúp, hỏi đáp từ các anh chị mentor. 3. Kết quả - Hoàn thành đúng tiến độ được giao. 11 | Page TỔNG KẾT Như vậy, trong quá trình thực tập em đã học được nhiều kiến thức mới cả trong kĩ năng chuyên môn về thiết kế và lập trình ứng dụng di động và cả kĩ năng xã hội như làm việc nhóm, giao tiếp, thuyết trình. Nhờ tham gia vào các dự án thực tế của công ty em đã có được kinh nghiệm làm việc góp phần phát triển bản thân trong tương lai. Chân thành cảm ơn sự giúp đỡ của các anh Trương Tấn Thuận, anh Song Văn Cẩm và các anh chị trong công ty đã chỉ dạy và giúp đỡ em trong quá 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