Báo cáo thực tập lập trình website với reactjs, nodejs, expressjs

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 Lập trình website với ReactJS, NodeJS, ExpressJS Công ty thực tập: Công ty TNHH INGREETECH Người phụ trách: Ông NGUYỄN XUÂN HIỀN Giám đốc Quản lý dự án Thực tập sinh: NGUYỄN NGỌC PHÚC - 19520224 TP Hồ Chí Minh, tháng 06 năm 2023 LỜI MỞ ĐẦU Trong kỷ nguyên công nghiệp 4.0 đầy biến động, công nghệ thông tin ngành Công nghệ phần mềm nắm giữ vai trị vơ quan trọng phát triển xã hội Cùng với bùng nổ công nghệ web, việc tạo phát triển trang web trở thành yếu tố thiếu sống đại, từ việc mua sắm trực tuyến, chia sẻ thông tin đến kết nối cộng đồng Với 1.5 tỷ trang web tồn mạng, nhu cầu tạo trang web không ngừng tăng cao Tuy nhiên, để thu hút nắm bắt ý người dùng, trang web phải đáp ứng khơng yếu tố hình thức hấp dẫn độc đáo mà phải cung cấp nội dung đáng tin cậy trải nghiệm người dùng tuyệt vời Đây thách thức không nhỏ nhà phát triển web, họ phải kết hợp nghệ thuật công nghệ để tạo sản phẩm web độc đáo, đáng tin cậy thú vị Chính muốn thử thách thân lĩnh vực công nghiệp web, chọn trở thành Full Stack Web Developer - chuyên gia có khả làm việc phần frontend backend ứng dụng web Tôi hiểu việc trở thành Full Stack Web Developer địi hỏi tơi phải nắm vững kiến thức HTML, CSS, JavaScript, với khả xử lý liệu tương tác với sở liệu Tuy nhiên, điều quan trọng khả tư logic, khả giải vấn đề sáng tạo để xây dựng sản phẩm web đáp ứng nhu cầu người dùng Sau năm học trường đại học, tơi thấy lịng khao khát áp dụng kiến thức học trải nghiệm thực tế lĩnh vực web Đó lý định tham gia thực tập Công ty TNHH Ingreetech - môi trường thực tập chuyên nghiệp đầy thách thức Tôi tin việc tham gia vào môi trường giúp phát triển kỹ kiến thức cần thiết để trở thành Full Stack Web Developer thành công sáng tạo tương lai LỜI CẢM ƠN Em xin trân trọng gửi lời cảm ơn Ban giám đốc Công ty TNHH Ingreetech (“Công ty”) tạo điều kiện cho em hội thực tập công ty Dù thời gian ngắn nhờ dẫn nhiệt tình anh Nguyễn Xuân Hiền, em tiếp thu kiến thức quan trọng để tham gia dự án thực tế Chân thành cảm ơn công ty anh chị đội ngũ phát triển dự án bỏ nhiều thời gian, công sức để hướng dẫn, giúp đỡ em tận tình làm quen môi trường việc tiếp cận kiến thức cơng nghệ, kỹ lập trình tư sản phẩm để thực tốt dự án cá nhân dự án thực tế thời gian qua 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 em làm báo cáo TP HCM, ngày tháng năm 2023 Nguyễn Ngọc Phúc NHẬN XÉT CỦA KHOA MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN MỤC LỤC CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 1.1 Giới thiệu công ty 1.2 Sản phẩm công ty 1.3 Lịch làm việc thực tập công ty CHƯƠNG 2: NỘI DUNG THỰC TẬP 2.1 Tìm hiểu cơng ty kỹ công ty 2.2 Nghiên cứu kỹ thuật 2.2.1 Tìm hiểu cơng cụ làm việc 2.2.2 Tìm hiểu quy trình làm việc cơng ty 2.2.3 Tìm hiểu JavaScript/HTML/CSS/SCSS ngơn ngữ TypeScript 2.2.4 Nghiên cứu tài liệu kỹ thuật ReactJS 2.3 Thực dự án 10 2.4 Lịch làm việc 10 CHƯƠNG 3: CHI TIẾT VỀ DỰ ÁN 12 3.1 Giới thiệu 12 3.2 Thực 12 3.3 Kết 12 CHƯƠNG 4: TỔNG KẾT 13 TÀI LIỆU THAM KHẢO 14 CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 1.1 Giới thiệu công ty: Công ty TNHH Ingreetech doanh nghiệp khoa học công nghệ, khởi nghiệp đổi sáng tạo tạo tác động xã hội mơi trường tích cực (theo tiêu chuẩn SDG) Ngày thành lập : 28/06/2017 Quy mô quản lý : doanh nghiệp nhỏ Quy mô nhân : 08 người Lĩnh vực hoạt động : Công nghệ thông tin 1.2 Sản phẩm công ty: 1.1 1.2 2.1 2.2 3.1 3.2 3.3 3.4 3.5 3.6 Sản phẩm phần cứng công nghệ thông tin với thương hiệu Ingreetech: Máy vi tính để bàn, máy chủ, máy tính xách tay, máy tính bảng Thiết bị mạng Phần mềm: Thiết kế gia công phần mềm theo yêu cầu Phát triển dự án phần mềm đóng gói riêng cho khách hàng doanh nghiệp Dịch vụ: Tư vấn mơ hình kinh doanh chiến lược chuyển đổi số Tư vấn, thiết kế giải pháp chuyển đổi số theo yêu cầu đặc thù khách hàng Đào tạo nâng cao lực công nghệ thông tin cho đội ngũ nhân viên doanh nghiệp Triển khai giải pháp chuyển đổi số theo yêu cầu khách hàng Tập huấn sử dụng phần mềm giải pháp Hỗ trợ bảo trì vận hành hệ thống công nghệ thông tin cho khách hàng 1.3 Lịch làm việc thực tập công ty Em tham gia làm việc công ty ngày 01/04/2023 đến ngày 31/05/2023, ngày làm việc tuần từ thứ hai đến thứ sáu, không 20 ngày/tháng Công việc ngày lúc 09h00 đến 17h00 Thời gian nghỉ trưa khoảng 01 tiếng Sau ngày làm việc em báo cáo tiến độ công việc ngày, đặt câu hỏi nhận chia sẻ, giải đáp từ người hướng dẫn, đặt mục tiêu cho ngày làm việc Mỗi tuần họp tiến độ tuần lần vào sáng thứ 4, người họp bàn bạc vấn đề giải quyết, tồn đọng, học, giải pháp mục tiêu cho tuần Mỗi tháng tổ chức Toastmaster cho team lần vào sáng thứ tuần để người trao đổi chủ đề khoa học, xã hội, mơi trường, … với hồn tồn tiếng Anh CHƯƠNG 2: NỘI DUNG THỰC TẬP 2.1 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, trình thành lập phát triển, quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty, phịng ban IT, HR, … Ngồi ra, thực tập sinh cịn giới thiệu văn hóa làm việc cơng ty thời gian làm, quy định, cách sử dụng email công việc, … Kết quả: hiểu thêm công ty, 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 2.2 Nghiên cứu kỹ thuật 2.2.1 Tìm hiểu 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 Trong thời gian này, người phụ trách hướng dẫn cho 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ố như: - Microsoft Teams - sử dụng làm việc nhóm Jira - ứng dụng theo dõi quản lý quy trình phát triển phần mềm Git - hệ thống quản lý phiên phân tán Gitlab - tảng quản lý mã nguồn hợp tác phát triển phần mềm web Visual Studio Code - text editor sử dụng q trình phát triển sản phẩm Figma - công cụ thiết kế giao diện web Postman - testing APIs Thực hiện: Học lý thuyết ứng dụng cơng cụ kể Kết quả: Có thể sử dụng kết hợp công cụ kể 2.2.2 Tìm hiểu quy trình làm việc cơng ty Thời gian: ngày Nội dung: Tìm hiểu quy trình làm việc theo mơ hình Scrum-Agile Được người phụ trách hướng dẫn, dạy thử tham dự vào quy trình làm việc cơng ty Thực hiện: Thực hành tham gia vào giai đoạn mô hình Kết quả: Có thêm kiến thức thực hành nhuần nhuyễn cơng đoạn 2.2.3 Tìm hiểu JavaScript/HTML/CSS/SCSS ngôn ngữ TypeScript Thời gian: ngày Nội dung: Được training TypeScript, kỹ thuật HTML/CSS/SCSS nâng cao, kiến thức quan trọng cho việc tạo layout responsive cho trang web - - - - - - TypeScript ngôn ngữ lập trình phát triển Microsoft, xây dựng dựa JavaScript bổ sung thêm tính kiểm sốt kiểu liệu tĩnh Nó cho phép lập trình viên viết mã JavaScript theo cách cấu trúc hơn, xác định kiểu liệu cho biến, tham số giá trị trả hàm Điều giúp giảm số lỗi kiểu liệu trình phát triển, cải thiện tính bảo mật tăng khả tái sử dụng mã nguồn TypeScript hỗ trợ tính ECMAScript lớp, mô-đun async/await, cung cấp công cụ mạnh mẽ cho việc phát triển ứng dụng web ứng dụng đa tảng Tìm hiểu kiểu liệu, khai báo biến, tốn tử, cấu trúc điều kiện, vịng lặp, hàm, class, mơ-đun phương pháp lập trình hướng đối tượng TypeScript HTML (HyperText Markup Language) ngôn ngữ đánh dấu sử dụng để xây dựng cấu trúc trang web Nó định nghĩa cấu trúc phân loại thành phần trang web tiêu đề, đoạn văn bản, hình ảnh, liên kết phần tử khác CSS (Cascading Style Sheets) ngôn ngữ sử dụng để mơ tả cách trang web trình bày hiển thị Nó xác định thuộc tính màu sắc, kích thước, chỉnh hiệu ứng thành phần HTML SCSS (Sassy CSS) biến thể CSS, ngôn ngữ mở rộng hỗ trợ tính mạnh mẽ biến, lồng nhau, mixin kế thừa SCSS giúp viết mã CSS dễ dàng tạo mã nguồn dễ bảo trì HTML, CSS SCSS sử dụng phổ biến việc phát triển trang web ứng dụng web để tạo giao diện người dùng hấp dẫn tùy chỉnh theo nhu cầu dự án Tìm hiểu thẻ HTML, thuộc tính CSS cách để áp dụng thuộc tính CSS HTML Thực hiện: - Tham gia đầy đủ buổi training công ty Làm thực hành kiểm tra kiến thức học Kết quả: - Nắm kiến thức TypeScript, JavaScript/HTML/CSS/SCSS Có thể dựng nên layout cho trang web, style theo thiết kế, tạo giao diện responsive 2.2.4 Nghiên cứu tài liệu kỹ thuật ReactJS Thời gian: 10 ngày Nội dung: Được giao để tìm hiểu tài liệu kỹ thuật lập trình Front-end với ReactJS - - ReactJS thư viện JavaScript sử dụng để xây dựng giao diện người dùng tương tác ứng dụng web Nó cho phép phân tách giao diện thành thành phần tái sử dụng sử dụng chế "Virtual DOM" để cải thiện hiệu suất ReactJS cung cấp cú pháp dễ đọc dễ hiểu thông qua việc sử dụng JSX Với cộng đồng lớn phong phú, ReactJS công cụ mạnh mẽ để phát triển ứng dụng web chất lượng cao JSX: JSX phần mở rộng JavaScript cho phép viết mã HTML tương tự component React Tìm hiểu cú pháp cách sử dụng JSX - - - - Components: Components phần tử độc lập tái sử dụng React Học cách tạo sử dụng components để xây dựng giao diện State Props: State Props hai khái niệm quan trọng React State đại diện cho trạng thái nội component, Props thuộc tính truyền vào component từ component cha Tìm hiểu cách sử dụng quản lý state props React Lifecycle Methods: React cung cấp lifecycle methods cho phép thực hành động giai đoạn khác component, ví dụ component khởi tạo, cập nhật, bị hủy bỏ Tìm hiểu nắm vững lifecycle methods để tương tác với component cách linh hoạt Events: học cách xử lý kiện (events) nhấp chuột, nhấn phím kiện tương tác khác Tìm hiểu cách viết xử lý kiện React Routing: học cách sử dụng routing để điều hướng trang hiển thị nội dung tương ứng ứng dụng web đa trang Có nhiều thư viện routing phổ biến React React Router Fetching Data: học cách gửi yêu cầu mạng xử lý liệu trả React ứng dụng thực tế thường cần lấy liệu từ nguồn bên API State Management: Khi ứng dụng React phức tạp hơn, việc quản lý state trở nên phức tạp Tìm hiểu nắm vững thư viện quản lý state Redux MobX để quản lý state hiệu Thực hiện: - Tham gia đầy đủ buổi training công ty Nghiên cứu kết hợp thực hành, kiểm tra kiến thức học Kết quả: - Hiểu khái niệm lập trình Front-end với ReactJS Tạo demo đơn giản kỹ thuật nghiên cứu Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu 2.2.5: Nghiên cứu tài liệu kỹ thuật NodeJS, ExpressJS Thời gian: 10 ngày Nội dung: Được giao để tìm hiểu tài liệu kỹ thuật lập trình Back-end với NodeJS, ExpressJS - - - Node.js môi trường chạy mã JavaScript phía máy chủ, cho phép xây dựng ứng dụng web phía máy chủ hiệu Nó cho phép viết mã JavaScript để xử lý yêu cầu máy chủ, thực tác vụ phức tạp tạo API Express.js framework ứng dụng web phía máy chủ xây dựng dựa Node.js Nó cung cấp tính cơng cụ giúp xây dựng ứng dụng web nhanh chóng dễ dàng Express.js giúp quản lý tác vụ định tuyến (routing), xử lý yêu cầu (request), xây dựng API quản lý middleware Xử lý yêu cầu phản hồi: Hiểu cách xử lý yêu cầu HTTP phản hồi từ máy chủ cách sử dụng Node.js Express.js - - Định tuyến (Routing): Hiểu cách xác định tuyến (routes) ứng dụng Express.js để xử lý yêu cầu từ người dùng Middleware: Hiểu khái niệm middleware Express.js cách sử dụng chúng để thực tác vụ xác thực, ghi log, xử lý lỗi nhiều Xử lý lỗi: Hiểu cách xử lý lỗi quản lý ngoại lệ Node.js Express.js để đảm bảo ứng dụng bạn hoạt động ổn định Cơ sở liệu: Hiểu cách kết nối tương tác với sở liệu từ Node.js Express.js, bao gồm việc sử dụng MongoDB, MySQL hệ quản trị sở liệu khác Xử lý file tĩnh: Hiểu cách phục vụ tệp tin tĩnh CSS, JavaScript hình ảnh ứng dụng Express.js Security: Hiểu vấn đề liên quan đến bảo mật ứng dụng web cách áp dụng biện pháp bảo mật Node.js Express.js Testing: Hiểu cách viết kiểm tra (tests) cho ứng dụng Node.js Express.js để đảm bảo chất lượng độ tin cậy mã nguồn Deployment: Hiểu cách triển khai ứng dụng Node.js Express.js môi trường sản xuất máy chủ thực, dịch vụ đám mây tảng PaaS (Platform as a Service) Thực hiện: - Tham gia đầy đủ buổi training công ty Nghiên cứu kết hợp thực hành, kiểm tra kiến thức học Kết quả: - Hiểu khái niệm lập trình Back-end với NodeJS, ExpressJS Có kiến thức sở để vận hành website full stack 2.3 Thực dự án Sau tháng training thực hành, hướng dẫn nhiệt tình người phụ trách cố gắng, không ngừng học hỏi, thực tập sinh nắm kiến thức lập trình ứng dụng web full stack Sau thực tập sinh người phụ trách hướng dẫn áp dụng kiến thức học để tham gia xây dựng dự án thực tế công ty 2.4 Lịch làm việc Tuần - Mức độ Công việc Người hướng dẫn hồn thành Tìm hiểu cơng ty, cách Anh Nguyễn Xuân 100% tổ chức công ty Hiền Làm quen với công cụ làm việc công ty Học cách trao đổi, làm việc qua email Học cách làm việc nhóm thơng qua Git Nhận xét người hướng dẫn Khả tiếp thu nhanh sáng tạo công việc 10 - - - - - - Sử dụng công cụ Jira để kiểm tra tiến độ công việc Tham gia lớp training dành cho new-hire công ty Nghiên cứu tìm hiểu kiến thức ReactJS Thực ứng dụng demo để kiểm tra kiến thức học Tham gia lớp training dành cho new-hire cơng ty Nghiên cứu tìm hiểu kiến thức NodeJS, ExpressJS Thực ứng dụng demo để kiểm tra kiến thức học Tham gia lớp training dành cho new-hire công ty Tham gia vào dự án thực tế, nhận task đơn giản Kiểm tra kiến thức thực tập Anh Nguyễn Hiền Xuân 100% Học nghiêm túc có chia sẻ với nhóm làm việc Anh Nguyễn Hiền Xuân 100% Học nghiêm túc có chia sẻ với nhóm làm việc Anh Nguyễn Hiền Xuân 100% Làm việc chuyên cần, sáng tạo 11 CHƯƠNG 3: CHI TIẾT VỀ DỰ ÁN 3.1 Giới thiệu - - Dự án nhằm mục đích training cho thực tập sinh kỹ làm việc tham gia vào dự án thực tế, giúp nắm bắt công cụ công nghệ mà công ty sử dụng Tên dự án: Website e-commerce Mô tả: Website mua bán hàng trung gian đơn giản, bao gồm chức quản lý đơn hàng, hiển thị tìm kiếm sản phẩm, giỏ hàng, tố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 3.2 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ừ người phụ trách 3.3 Kết - Hoàn thành tiến độ giao 12 CHƯƠNG 4: TỔNG KẾT Trong vòng hai tháng làm thực tập sinh lập trình web full stack, tơi có hội trải nghiệm học hỏi nhiều từ mơi trường thực tế Qua q trình này, nắm bắt kiến thức quan trọng kỹ cần thiết để phát triển ứng dụng web tồn diện Tơi tham gia vào q trình phát triển triển khai dự án web, từ việc xây dựng giao diện người dùng sử dụng HTML, CSS JavaScript đến việc xây dựng phần backend sử dụng Node.js Express.js Tôi làm việc với sở liệu MongoDB thực thao tác CRUD để quản lý liệu Trong trình làm việc, tơi học quy trình phát triển phần mềm, quản lý mã nguồn sử dụng Git GitHub, làm việc theo nhóm mơi trường Agile Tơi có hội tiếp xúc với công nghệ công cụ phổ biến khác ReactJS, RESTful API, Sass Qua thực tập, rèn luyện kỹ giao tiếp làm việc môi trường chuyên nghiệp Tôi hướng dẫn hỗ trợ đội ngũ giàu kinh nghiệm, từ học hỏi phương pháp phát triển ứng dụng chất lượng tư lập trình hiệu Tuy hai tháng, kinh nghiệm thực tế mở cánh cửa cho phát triển tơi lĩnh vực lập trình web full stack Tơi tự tin tơi có kiến thức kỹ để tiếp tục học hỏi phát triển tương lai Tôi xin chân thành cảm ơn công ty đội ngũ hướng dẫn tạo điều kiện cung cấp cho môi trường thực tế để trau dồi kiến thức kỹ Tơi sẵn sàng áp dụng học vào cơng việc thực tế tiếp tục phát triển nghiệp lĩnh vực lập trình web full stack 13 TÀI LIỆU THAM KHẢO [1] Docs NodeJS: https://nodejs.org/en [2] Docs ReactJS: https://react.dev/ [3] Web Development with Node and Express - Ethan Brown [4] Node.js By Example - Krasimir Tsonev 14