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

Cùng với sự bùng nổ của công nghệ web, việc tạo ra và phát triển các trang web đã trở thành một yếu tố không thể thiếu trong cuộc sống hiện đại, từ việc mua sắm trực tuyến, chia sẻ thông

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 và ngành Công nghệ phần mềm đã nắm giữ vai trò vô cùng quan trọng trong sự phát triển của xã hội Cùng với

sự bùng nổ của công nghệ web, việc tạo ra và phát triển các trang web đã trở thành một yếu tố không thể thiếu trong cuộc sống hiện đạ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 hơn 1.5 tỷ trang web hiện đang tồn tại trên mạng, nhu cầu tạo ra những trang web mới vẫn không ngừng tăng cao Tuy nhiên, để thu hút và nắm bắt sự chú ý của người dùng, một trang web phải đáp ứng được không chỉ yếu tố hình thức hấp dẫn và độc đáo mà còn phải cung cấp nội dung đáng tin cậy và trải nghiệm người dùng tuyệt vời Đây là thách thức không nhỏ đối với những nhà phát triển web, khi họ phải kết hợp nghệ thuật và công nghệ để tạo ra những sản phẩm web độc đáo, đáng tin cậy và thú vị

Chính vì muốn thử thách bản thân trong lĩnh vực công nghiệp web, tôi đã chọn trở thành một Full Stack Web Developer - một chuyên gia có khả năng làm việc trên cả phần frontend

và backend của một ứng dụng web Tôi hiểu rằng việc trở thành một Full Stack Web Developer đòi hỏi tôi phải nắm vững kiến thức về HTML, CSS, JavaScript, cùng với khả năng xử lý dữ liệu và tương tác với cơ sở dữ liệu Tuy nhiên, điều quan trọng hơn cả là khả năng tư duy logic, khả năng giải quyết vấn đề và sự sáng tạo để xây dựng những sản phẩm web đáp ứng được nhu cầu của người dùng

Sau những năm học tại trường đại học, tôi thấy lòng khao khát áp dụng những kiến thức

đã học và trải nghiệm thực tế trong lĩnh vực web Đó là lý do tôi quyết định tham gia thực tập tại Công ty TNHH Ingreetech - một môi trường thực tập chuyên nghiệp và đầy thách thức Tôi tin rằng việc tham gia vào môi trường này sẽ giúp tôi phát triển kỹ năng và kiến thức cần thiết

để trở thành một Full Stack Web Developer thành công và sáng tạo trong 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 cơ hội được thực tập tại công ty Dù trong thời gian ngắn nhưng nhờ

sự chỉ dẫn nhiệt tình của anh Nguyễn Xuân Hiền, em đã tiếp thu những kiến thức quan trọng

để có thể tham gia một dự án thực tế

Chân thành cảm ơn công ty và các anh chị trong đội ngũ phát triển dự án đã bỏ ra nhiều thời gian, công sức để hướng dẫn, giúp đỡ em tận tình trong khi làm quen môi trường mới cũng như trong việc tiếp cận kiến thức công nghệ, kỹ năng lập trình và tư duy sản phẩm để có thể thực hiện tốt dự án cá nhân và dự án thực tế trong thời gian qua

Em 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áo cáo này

TP HCM, ngày 1 tháng 6 năm 2023

Nguyễn Ngọc Phúc

NHẬN XÉT CỦA KHOA

MỤC LỤC

LỜI MỞ ĐẦU 2

LỜI CẢM ƠN 3

MỤC LỤC 5

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 6

1.1 Giới thiệu về công ty 6

1.2 Sản phẩm công ty 6

1.3 Lịch làm việc khi thực tập tại công ty 6

CHƯƠNG 2: NỘI DUNG THỰC TẬP 7

2.1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 7

2.2 Nghiên cứu kỹ thuật 7

2.2.1 Tìm hiểu về các công cụ làm việc 7

2.2.2 Tìm hiểu về quy trình làm việc của công ty 7

2.2.3 Tìm hiểu về JavaScript/HTML/CSS/SCSS và ngôn ngữ TypeScript 7

2.2.4 Nghiên cứu tài liệu và những kỹ thuật về ReactJS 8

2.3 Thực hiện 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 hiện 12

3.3 Kết quả 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 về công ty:

Công ty TNHH Ingreetech là một doanh nghiệp khoa học công

nghệ, khởi nghiệp đổi mới sáng tạo và tạo tác động xã hội và 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 sự : 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 Sản phẩm phần cứng công nghệ thông tin với thương hiệu Ingreetech:

1.1 Máy vi tính để bàn, máy chủ, máy tính xách tay, máy tính bảng

1.2 Thiết bị mạng

2 Phần mềm:

2.1 Thiết kế và gia công phần mềm theo yêu cầu

2.2 Phát triển dự án phần mềm đóng gói riêng cho khách hàng doanh nghiệp

3 Dịch vụ:

3.1 Tư vấn về mô hình kinh doanh và chiến lược chuyển đổi số

3.2 Tư vấn, thiết kế giải pháp chuyển đổi số theo yêu cầu đặc thù của từng khách hàng 3.3 Đào tạo nâng cao năng lực công nghệ thông tin cho đội ngũ nhân viên của doanh nghiệp 3.4 Triển khai các giải pháp chuyển đổi số theo yêu cầu của khách hàng

3.5 Tập huấn sử dụng phần mềm và giải pháp

3.6 Hỗ trợ bảo trì và 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 khi thực tập tại công ty

Em tham gia làm việc tại công ty bắt đầu từ ngày 01/04/2023 đến ngày 31/05/2023, các ngày làm việc trong tuần là từ thứ hai đến thứ sáu, không quá 20 ngày/tháng Công việc hằng ngày bắt đầu từ lúc 09h00 đến 17h00 Thời gian nghỉ trưa khoảng 01 tiếng Sau mỗi ngày làm việc

em sẽ báo cáo tiến độ công việc trong ngày, đặt câu hỏi và 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 tiếp theo Mỗi tuần sẽ họp tiến độ tuần 1 lần vào sáng thứ 4, mọi người sẽ cùng họp và bàn bạc về các vấn đề đã giải quyết, tồn đọng, bài học, giải pháp và mục tiêu cho tuần tiếp theo Mỗi tháng sẽ tổ chức Toastmaster cho cả team một lần vào mỗi sáng thứ 5 tuần đầu tiên để mọi người trao đổi những chủ đề về khoa học, xã hội, môi trường, … với nhau hoàn toàn bằng tiếng Anh

CHƯƠNG 2: NỘI DUNG THỰC TẬP

2.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, 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, các phòng ban về IT, HR, … Ngoài

ra, thực tập sinh còn được giới thiệu về văn hóa làm việc trong công ty như thời gian đi làm, các quy định, cách sử dụng email trong công việc, …

Kết quả: hiểu thêm về công ty, 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.2 Nghiên cứu kỹ thuật

2.2.1 Tìm hiểu về các công cụ làm việc

Thời gian: 2 ngày

Nội dung: Tìm hiểu các công cụ được sử dụng trong quá 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 về các công cụ sẽ giúp ích cho công việc sau này Một số phần mềm trong số đó như:

- Microsoft Teams - sử dụng trong làm việc nhóm

- Jira - ứng dụng theo dõi và quản lý quy trình phát triển phần mềm

- Git - hệ thống quản lý phiên bản phân tán

- Gitlab - nền tảng quản lý mã nguồn và hợp tác phát triển phần mềm trên web

- Visual Studio Code - text editor được sử dụng chính trong quá 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 và ứng dụng các công cụ kể trên

Kết quả: Có thể sử dụng và kết hợp các công cụ kể trên

2.2.2 Tìm hiểu về quy trình làm việc của công ty

Thời gian: 2 ngày

Nội dung: Tìm hiểu về các quy trình làm việc theo mô hình Scrum-Agile

Được người phụ trách hướng dẫn, chỉ dạy và thử tham dự vào quy trình làm việc của công ty

Thực hiện: Thực hành tham gia vào các giai đoạn của mô hình

Kết quả: Có thêm kiến thức và thực hành nhuần nhuyễn các công đoạn

2.2.3 Tìm hiểu về JavaScript/HTML/CSS/SCSS và ngôn ngữ TypeScript

Thời gian: 5 ngày

Nội dung: Được training về TypeScript, các kỹ thuật HTML/CSS/SCSS cơ bản và nâng cao,

những kiến thức quan trọng cho việc tạo các layout responsive cho trang web

- TypeScript là một ngôn ngữ lập trình phát triển bởi Microsoft, được xây dựng dựa trên JavaScript và bổ sung thêm tính năng kiểm soát kiểu dữ liệu tĩnh Nó cho phép lập trình viên viết mã JavaScript theo một cách cấu trúc hơn, có thể xác định kiểu dữ liệu cho biến, tham số và giá trị trả về của hàm Điều này giúp giảm số lỗi kiểu dữ liệu trong quá trình phát triển, cải thiện tính bảo mật và tăng khả năng tái sử dụng mã nguồn TypeScript cũng hỗ trợ các tính năng của ECMAScript mới như lớp, mô-đun và async/await, cung cấp một công cụ mạnh mẽ cho việc phát triển ứng dụng web và ứng dụng đa nền tảng

- Tìm hiểu về các kiểu dữ liệu, khai báo biến, các toán tử, cấu trúc điều kiện, vòng lặp, hàm, class, mô-đun và phương pháp lập trình hướng đối tượng trong TypeScript

- HTML (HyperText Markup Language) là ngôn ngữ đánh dấu được sử dụng để xây dựng và cấu trúc các trang web Nó định nghĩa cấu trúc và phân loại các thành phần trên trang web như tiêu đề, đoạn văn bản, hình ảnh, liên kết và các phần tử khác

- CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để mô tả cách trang web được trình bày và hiển thị Nó xác định các thuộc tính như màu sắc, kích thước, căn chỉnh và hiệu ứng của các thành phần HTML

- SCSS (Sassy CSS) là một biến thể của CSS, là một ngôn ngữ mở rộng hỗ trợ các tính năng mạnh mẽ như biến, lồng nhau, mixin và kế thừa SCSS giúp viết mã CSS dễ dàng hơn và tạo ra mã nguồn dễ bảo trì hơn

- HTML, CSS và SCSS được sử dụng phổ biến trong việc phát triển các trang web và ứng dụng web để tạo giao diện người dùng hấp dẫn và tùy chỉnh theo nhu cầu của từng

dự án

- Tìm hiểu về các thẻ cơ bản trong HTML, các thuộc tính cơ bản trong CSS và cách để

áp dụng thuộc tính CSS và HTML

Thực hiện:

- Tham gia đầy đủ các buổi training của công ty

- Làm các bài thực hành kiểm tra về các kiến thức đã học

Kết quả:

- Nắm được kiến thức về TypeScript, JavaScript/HTML/CSS/SCSS cơ bản

- Có thể dựng nên layout cho trang web, style theo thiết kế, tạo ra giao diện responsive

2.2.4 Nghiên cứu tài liệu và những kỹ thuật về ReactJS

Thời gian: 10 ngày

Nội dung: Được giao để tìm hiểu tài liệu và những kỹ thuật cơ bản về lập trình Front-end với

ReactJS

- ReactJS là một thư viện JavaScript được sử dụng để xây dựng giao diện người dùng tương tác trong các ứng dụng web Nó cho phép phân tách giao diện thành các thành phần tái sử dụng và sử dụng cơ chế "Virtual DOM" để cải thiện hiệu suất ReactJS cung cấp một cú pháp dễ đọc và dễ hiểu thông qua việc sử dụng JSX Với cộng đồng lớn và phong phú, ReactJS là một công cụ mạnh mẽ để phát triển ứng dụng web chất lượng cao

- JSX: JSX là một phần mở rộng của JavaScript cho phép viết mã HTML tương tự trong các component React Tìm hiểu cú pháp và cách sử dụng JSX

- Components: Components là các phần tử độc lập có thể tái sử dụng trong React Học cách tạo và sử dụng components để xây dựng giao diện

- State và Props: State và Props là hai khái niệm quan trọng trong React State đại diện cho trạng thái nội bộ của một component, trong khi Props là các thuộc tính được truyền vào component từ component cha Tìm hiểu cách sử dụng và quản lý state và props trong React

- Lifecycle Methods: React cung cấp các lifecycle methods cho phép thực hiện các hành động tại các giai đoạn khác nhau của một component, ví dụ như khi component được khởi tạo, cập nhật, hoặc bị hủy bỏ Tìm hiểu và nắm vững các lifecycle methods để có thể tương tác với component một cách linh hoạt

- Events: học cách xử lý các sự kiện (events) như nhấp chuột, nhấn phím và các sự kiện tương tác khác Tìm hiểu cách viết và xử lý các sự kiện trong React

- Routing: học cách sử dụng routing để điều hướng giữa các trang và hiển thị nội dung tương ứng đối với các ứng dụng web đa trang Có nhiều thư viện routing phổ biến trong React như React Router

- Fetching Data: học cách gửi các yêu cầu mạng và xử lý dữ liệu trả về trong React vì trong ứng dụng thực tế thường cần lấy dữ liệu từ các nguồn bên ngoài như 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 hơn Tìm hiểu và nắm vững các thư viện quản lý state như Redux hoặc MobX để

có thể quản lý state hiệu quả

Thực hiện:

- Tham gia đầy đủ các buổi training của công ty

- Nghiên cứu kết hợp thực hành, kiểm tra những kiến thức đã học

Kết quả:

- Hiểu được những khái niệm cơ bản trong lập trình Front-end với ReactJS

- Tạo được những demo đơn giản về những kỹ thuật đã nghiên cứu

- Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúng chuẩn,

dễ đọc, dễ hiểu

2.2.5: Nghiên cứu tài liệu và kỹ thuật về NodeJS, ExpressJS

Thời gian: 10 ngày

Nội dung: Được giao để tìm hiểu tài liệu và những kỹ thuật cơ bản về lập trình Back-end với

NodeJS, ExpressJS

- Node.js là một môi trường chạy mã JavaScript phía máy chủ, cho phép xây dựng các ứng dụng web phía máy chủ hiệu quả Nó cho phép viết mã JavaScript để xử lý yêu cầu của máy chủ, thực hiện các tác vụ phức tạp và tạo các API

- Express.js là một framework ứng dụng web phía máy chủ được xây dựng dựa trên Node.js Nó cung cấp các tính năng và công cụ giúp xây dựng các ứng dụng web nhanh chóng và dễ dàng Express.js giúp quản lý các tác vụ như định tuyến (routing), xử lý yêu cầu (request), xây dựng API và quản lý middleware

- Xử lý yêu cầu và phản hồi: Hiểu cách xử lý yêu cầu HTTP và phản hồi từ máy chủ bằng cách sử dụng Node.js và Express.js

- Định tuyến (Routing): Hiểu cách xác định các tuyến (routes) trong ứng dụng Express.js

để xử lý các yêu cầu từ người dùng

- Middleware: Hiểu khái niệm middleware trong Express.js và cách sử dụng chúng để thực hiện các tác vụ như xác thực, ghi log, xử lý lỗi và nhiều hơn nữa

- Xử lý lỗi: Hiểu cách xử lý lỗi và quản lý ngoại lệ trong Node.js và Express.js để đảm bảo ứng dụng của bạn hoạt động ổn định

- Cơ sở dữ liệu: Hiểu cách kết nối và tương tác với cơ sở dữ liệu từ Node.js và Express.js, bao gồm việc sử dụng MongoDB, MySQL hoặc bất kỳ hệ quản trị cơ sở dữ liệu nào khác

- Xử lý file tĩnh: Hiểu cách phục vụ các tệp tin tĩnh như CSS, JavaScript và hình ảnh trong ứng dụng Express.js

- Security: Hiểu các vấn đề liên quan đến bảo mật trong ứng dụng web và cách áp dụng các biện pháp bảo mật cơ bản trong Node.js và Express.js

- Testing: Hiểu cách viết các bài kiểm tra (tests) cho ứng dụng Node.js và Express.js để đảm bảo chất lượng và độ tin cậy của mã nguồn

- Deployment: Hiểu cách triển khai ứng dụng Node.js và Express.js trên các môi trường sản xuất như máy chủ thực, dịch vụ đám mây hoặc nền tảng PaaS (Platform as a Service)

Thực hiện:

- Tham gia đầy đủ các buổi training của công ty

- Nghiên cứu kết hợp thực hành, kiểm tra những kiến thức đã học

Kết quả:

- Hiểu được những khái niệm cơ bản trong lập trình Back-end với NodeJS, ExpressJS

- Có kiến thức cơ sở để vận hành một website full stack

2.3 Thực hiện dự án

Sau hơn một tháng được training và thực hành, dưới sự hướng dẫn nhiệt tình của người phụ trách cùng sự cố gắng, không ngừng học hỏi, thực tập sinh đã nắm được những kiến thức

cơ bản về lập trình ứng dụng web full stack Sau đó thực tập sinh được người phụ trách hướng dẫn áp dụng những kiến thức đã học để tham gia xây dựng dự án thực tế của công ty

2.4 Lịch làm việc

Mức

độ hoàn thành

Nhận xét của người hướng dẫn

1

- Tìm hiểu về công ty, cách

tổ chức của công ty

- Làm quen với các công cụ làm việc trong 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

Anh Nguyễn Xuân Hiền

100% Khả năng tiếp thu

nhanh và sáng tạo trong công việc