TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA 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
Trang 1TRƯỜ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
Thực tập sinh: Nguyễn Hữu Trí
TP Hồ Chí Minh, tháng 06 năm 2022
Trang 21 | Page
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
Trang 32 | 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í
Trang 43 | Page
NHẬN XÉT
Trang 54 | 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
1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 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
Trang 65 | 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: corp@citynow.vn
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
Trang 76 | 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
Trang 87 | 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
Trang 98 | 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
Trang 109 | 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 Công việc Người hướng dẫn Mức độ hoàn
thành
Nhận xét
1 + Tìm hiểu về
công ty
+ Học cách trao đổi qua email
+ Học cách làm việc nhóm thông qua Git
Chị Đồng Thiên Thanh, Anh Trương Tấn Thuận
100% Tốt
2 + Dựng
SourceCode cho
dự án
Anh Trương Tấn Thuận
100% Tốt
3 + Tìm hiểu các
kiến thức nâng cao về NextJS, Storybook
+ Hoàn thiện Website
Anh Trương Tấn Thuận
100% Tốt
Tốt
4
5 + Tìm hiểu các
kĩ thuật Mock
Anh Trương Tấn Thuận
100% Tốt
Trang 1110 | Page
+ Sử dụng Redux, Redux-Thunk
+ Tham gia các buổi training về công nghệ
6 + Tìm hiểu kiến
thức về Testing
+ Thực hiện kiểm tra kiến thực thực tập
Anh Trương Tấn Thuận
100% Tốt
7 + Tìm hiểu về
một công nghệ
và thực hiện Seminar về đề tài công nghệ
Anh Trương Tấn Thuận, Anh Song Văn Cẩm
100% Tốt
Trang 1211 | 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
Trang 1312 | 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
Trang 1413 | 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 =========================