Báo Cáo Thực Tập Nghề Nghiệp - Hệ Thống Thông Tin Quản Lý - Đề Tài - Trang Web Quản Lý Bán Hàng công ty TMA soltions

TỔNG QUAN Về Công ty TNHH TMA Solutions Bình Định2

Tổng quan về nghề Developer

1.2 Tổng quan về nghề Developer

Developer (dev) là tên gọi khá chung cho các kĩ sư phần mềm, họ dùng ngôn ngữ lập trình để xây dựng, sáng tạo ra các chương trình, phần mềm hay ứng dụng cho laptop, điện thoại, Dev sử dụng thành thạo các ngôn ngữ lập trình và đóng vai trò quan trọng trong quá trình tạo ra phần mềm Developer còn được gọi là nhà phát triển phần mềm, nhà lập trình máy tính, người viết mã phần mềm hoặc kĩ sư phần mềm.

1.2.2 Developer làm những công việc gì?

- Phân tích nhu cầu, vấn đề, nỗi trăn trở của người dùng

- Dùng ngôn ngữ lập trình để tạo nên các chương trình, phần mềm, ứng dụng dựa trên yêu cầu của doanh nghiệp, khách hàng.

- Nâng cấp các tính năng mới cho ứng dụng hoặc phần mềm dựa trên nhu cầu phát sinh của người dùng

- Sửa chữa các lỗi để đảm bảo ứng dụng, phần mềm hoạt động trơn tru.

- Kiểm thử phần mềm và cộng tác với các các chuyên gia máy tính để đảm bảo phần mềm đạt chất lượng cao nhất.

- Liên tục tìm tòi, nghiên cứu và cải tiến các công nghệ, tính năng mới cho sản phẩm của mình.

- Ngoài ra, có nhiều vai trò khác trong ngành phát triển phần mềm như kiến trúc sư phần mềm, quản lí dự án, chuyên gia UX/UI, và chuyên gia an ninh mạng Mỗi vai trò này có nhiệm vụ và trách nhiệm riêng trong quá trình phát triển phần mềm.

1.2.3 Cơ hội nghề nghiệp (FrontEnd)

- Web Developer: Làm việc trực tiếp trên phát triển các trang web và ứng dụng web.

- Frontend Engineer: Thiết kế và phát triển giao diện người dùng hấp dẫn và tương tác.

- UI/UX Designer: Tập trung vào thiết kế giao diện người dùng và trải nghiệm người dùng.

- Game Developer: Phát triển giao diện người dùng cho trò chơi điện tử hoặc tham gia vào việc phát triển phần giao diện của trò chơi.

- Mức lương: Mức lương của nhà phát triển frontend cũng có sự biến đổi tùy theo nhiều yếu tố khác nhau.Một số ví dụ về mức lương trung bình cho các vị trí frontend developer tại Hoa Kỳ dựa trên dữ liệu trước khi ngưỡng kiến thức được cập nhật vào tháng 9 năm 2021:

- Junior Frontend Developer (Nhà phát triển frontend tân binh): Mức lương trung bình có thể dao động từ khoảng $50,000 - $70,000 USD một năm.

- Mid-Level Frontend Developer (Nhà phát triển frontend trung cấp): Mức lương trung bình có thể dao động từ khoảng $70,000 -

- Senior Frontend Developer (Nhà phát triển frontend cấp cao): Mức lương trung bình có thể vượt qua $100,000 USD một năm, và có thể lên đến vài trăm nghìn đô la tùy thuộc vào kinh nghiệm và địa điểm.

CƠ SỞ LÍ THUYẾT

JavaScript

-JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web tương tác Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động và bản đồ tương tác,các chức năng của JavaScript có thể cải thiện trải nghiệm người dùng của trang web Là ngôn ngữ kịch bản phía máy khách,JavaScript là một trong những công nghệ cốt lõi của World WideWeb2.1.2 Tại sao nên học JavaScript

1 Web Development: Cần để xây dựng ứng dụng web động và tương tác.

2 Phổ biến: Ngôn ngữ rộng rãi, nhiều cơ hội việc làm.

3 Dễ học: Cú pháp dễ tiếp cận, linh hoạt.

4 Cộng đồng lớn: Hỗ trợ tài liệu và giải quyết vấn đề.

5 Phát triển sự nghiệp: Mở cửa cho nhiều lĩnh vực khác nhau.

6 Frameworks và thư viện: Dùng để xây dựng ứng dụng phức tạp.

7 Tương lai sáng: Đóng góp vào tiến hóa của web và công nghệ mới.

1 Biến và kiểu dữ liệu: var, let, const, number, string, boolean.

2 Câu lệnh điều kiện: if, else if, else.

3 Vòng lặp: for, while, do-while.

4 Hàm: function, tham số, return.

5 Mảng và đối tượng: Array, Object.

1 Hàm JavaScript là một khối mã được thiết kế để thực hiện một tác vụ cụ thể.

2 Một hàm JavaScript được thực thi khi "cái gì đó" gọi nó (calls it).

 Function Invocation (Gọi hàm) là quá trình thực hiện một hàm bằng cách gọi tên của hàm kèm theo các đối số cần thiết (nếu có) Kết quả sẽ được trả về khi:

1 Khi một sự kiện xảy ra (khi người dùng nhấp vào nút)

2 Khi nó được gọi (được gọi) từ mã JavaScript

 Function Return (Giá trị trả về của hàm) là kết quả mà một hàm trả về sau khi thực hiện các lệnh và tính toán bên trong nó Khi một hàm được gọi và thực thi, nó có thể sẽ sản sinh ra một giá trị và trả về cho người gọi hàm.Và:

1 Khi JavaScript đạt đến câu lệnh trả về, hàm sẽ ngừng thực thi,

2 Nếu hàm được gọi từ một câu lệnh, JavaScript sẽ "quay lại" để thực thi mã sau câu lệnh gọi,

3 Các hàm thường tính toán một giá trị trả về Giá trị trả về được "trả lại" cho "người gọi"

 JavaScript HTML DOM (Document Object Model) là một cách để truy cập, thay đổi và tương tác với các phần tử HTML trên trang web DOM biểu diễn cấu trúc của trang web dưới dạng một cây phân cấp, trong đó mỗi phần tử HTML được coi như một đối tượng mà bạn có thể thao tác bằng JavaScript

 Với các chức năng như:

1 Truy cập các phần tử HTML

2 Thay đổi nội dung và thuộc tính

3 Thêm và xóa phần tử

4 Sự kiện và xử lí sự kiện

 JavaScript OOP (Object-Oriented Programming) là một phương pháp lập trình dựa trên các đối tượng Trong OOP, chúng ta tạo các đối tượng có thuộc tính (properties) và phương thức (methods) để thực hiện các nhiệm vụ cụ thể JavaScript hỗ trợ OOP thông qua các khái niệm:

2 Thuộc tính và Phương thức

React JS

 JSX là một phần của React, một thư viện JavaScript, cho phép bạn viết mã HTML trong mã JavaScript JSX giúp xây dựng giao diện người dùng trong React dễ dàng và dễ đọc hơn bằng cách kết hợp cả hai ngôn ngữ trong cùng một tệp

 Trong React, việc hiển thị các phần tử giao diện được gọi là

"rendering elements" React giúp bạn quản lí giao diện một cách hiệu quả và dễ dàng bằng cách sử dụng cách tiếp cận "rendering elements" và tạo các thành phần động Ví dụ như:

 Components (Thành phần): Là các khối xây dựng độc lập trong React, giúp tạo và quản lí giao diện người dùng Chúng có thể là hàm hoặc lớp, cho phép tái sử dụng và tổ chức mã Mỗi thành phần có thể chứa nhiều thành phần con.

 Props (Thuộc tính): Là dữ liệu được truyền từ cha đến con thông qua các thành phần Props giúp tùy chỉnh hành vi và nội dung của các thành phần khác nhau Thay đổi props thường dẫn đến việc cập nhật giao diện.

 State (Trạng thái): Là dữ liệu động được lưu trữ bên trong một thành phần React Khi state thay đổi, thành phần sẽ cập nhật lại giao diện để hiển thị dữ liệu mới.

 Lifecycle (Vòng đời): Là chuỗi các pha mà một thành phần React trải qua, từ khi được tạo ra cho đến khi bị hủy bỏ Điều này cho phép bạn thực hiện các hành động như khởi tạo dữ liệu, cập nhật giao diện, và giải phóng tài nguyên.

 Handling Events trong React là việc xử lí các sự kiện tương tác của người dùng, như nhấn nút, click chuột, hoặc nhập liệu Bằng cách sử dụng các trình xử lí sự kiện, có thể gắn kết các hành động cụ thể với các thành phần React.

 Lists (Danh sách): Là cách bạn hiển thị nhiều thành phần tương tự trong React, thường thông qua việc lặp qua mảng dữ liệu và render mỗi phần tử thành các thành phần riêng biệt.

 Keys (Khóa): Là thuộc tính đặc biệt được sử dụng để xác định mỗi phần tử trong danh sách một cách duy nhất Các khóa giúp React theo dõi sự thay đổi và tối ưu hóa việc cập nhật giao diện. 2.2.7 Forms

 Trong React, Forms là cách để xử lí và thu thập dữ liệu nhập liệu từ người dùng, chẳng hạn như nhập văn bản, chọn tùy chọn, hay gửi dữ liệu lên máy chủ Bằng cách sử dụng Forms, có thể tạo các giao diện tương tác cho người dùng.

HOOK

 Hooks cho phép sử dụng các tính năng React khác nhau từ các components của mình Có thể sử dụng các Hooks có sẵn hoặc kết hợp chúng để tạo Hooks của riêng mình

 Hooks cho phép sử dụng state và các tính năng React khác trong các hàm của React function components, thay vì chỉ trong các class Các hooks giúp tạo và quản lí state, xử lí sự kiện, và thực hiện các tác vụ khác một cách dễ dàng và hiệu quả.

 State cho phép một components “ghi nhớ” thông tin như đầu vào của người dùng Ví dụ: components biểu mẫu có thể sử dụng State để lưu trữ giá trị đầu vào, trong khi components thư viện hình ảnh có thể sử dụng State để lưu trữ chỉ mục hình ảnh đã chọn.

 Trong React là cách sử dụng hook useEffect để thực hiện các tác vụ liên quan đến side Effects trong các function components. Side effects có thể là việc gọi API, thay đổi DOM, hoặc thực hiện bất kỳ hành động nào không liên quan trực tiếp đến việc render giao diện.

 Là tài liệu cung cấp thông tin chi tiết về các hooks, bao gồm các hooks được xây dựng sẵn như useState, useEffect, useContext, và nhiều hooks khác Trang này giúp hiểu cách sử dụng và tùy chỉnh các hooks để quản lí trạng thái, xử lí tác vụ phụ, và thực hiện các chức năng khác trong function components.

REDUX-Toolkit

 Redux Toolkit là một thư viện của Redux cung cấp các công cụ và tiện ích giúp viết mã Redux dễ dàng hơn và hiệu quả hơn Nó được thiết kế để giảm thiểu các bước lặp lại và mô hình hóa các biện pháp tốt nhất khi sử dụng Redux

 Hàm này cho phép tạo reducer và actions một cách dễ dàng chỉ với một đối tượng mô tả.

 Hàm này giúp tự động kết hợp nhiều reducer thành một Redux store và cài đặt các middleware mặc định.

 Hàm này được sử dụng để tạo reducers một cách dễ dàng và đơn giản hơn Nó giúp bạn viết mã reducer một cách ngắn gọn và tránh các bước lặp lại.

REACT ROUTER

 React Router là một thư viện được sử dụng để quản lí các tuyến đường (routes) trong ứng dụng React Nó giúp bạn tạo các tuyến đường và điều hướng giữa các trang (components) của ứng dụng một cách dễ dàng và trực quan.Các tính năng chính như là: Điều hướng: React Router cho phép bạn xác định các tuyến đường và quản lí việc hiển thị các trang tương ứng với mỗi tuyến đường.

1 Tuyến đường như các thành phần: Có thể gắn các component React với các tuyến đường, làm cho việc quản lí trang dễ dàng hơn.

2 Tuyến đường lồng nhau: React Router hỗ trợ tuyến đường lồng nhau, cho phép tạo các tuyến đường con cho các thành phần con.

3 Các tham số đường dẫn: Có thể định nghĩa các tham số đường dẫn để trích xuất dữ liệu từ URL.

4 Các chế độ điều hướng: React Router hỗ trợ nhiều chế độ điều hướng như BrowserRouter, HashRouter, vàMemoryRouter để phù hợp với yêu cầu cụ thể của ứng dụng

JSON_SERVER

 Json-server là một thư viện Node.js được sử dụng để tạo một API ảo dựa trên dữ liệu JSON Nó cho phép tạo một RESTfull API nhanh chóng chỉ bằng cách cung cấp một tệp JSON chứa dữ liệu Khi chạy json-server, nó sẽ tạo ra một máy chủ và cung cấp các endpoint API dựa trên cấu trúc của dữ liệu trong tệp JSON.

 Tạo 1 dự án bằng dữ liệu JSON để tạo ra một API giả lập.Có thể giúp phát triển và kiểm thử ứng dụng dựa trên API mà chưa hoàn thiện hoặc triển khai.Để phát triển nhanh chóng và kiểm thử các ứng dụng dựa trên API, giúp tiết kiệm thời gian và công sức trong quá trình phát triển.

TRIỂN KHAI

Mục 3.1 : Phân tích yêu cầu của hệ thống:

- Mục tiêu là xây dựng được một website để quảng bá các sản phẩm và đơn giản hoá việc quản lí bán hàng Cụ thể là giải quyết được các vấn đề như: Hiện sản phẩm, trải nghiệm người dùng,quản lí sản phẩm, tối ưu hóa quá trình bán hàng.

- Website quản lí bán hàng bao gồm các chức năng quản lí sau: Quản lí tài khoản admin, quản lí các danh mục sản phẩm , thông tin sản phẩm, quản lí bán hàng,giỏ hàng,đơn hàng.

●Giúp tiết kiệm được được nhiều chi phí trong việc quảng cáo thương hiệu sản phẩm.

●Kênh thông tin tốt để kết nối khách hàng nhanh chóng và hiệu quả nhất

●Giới thiệu được nhiều loại sản phẩm mới đến cho toàn người tiêu dùng.

3.Yêu cầu HTTT : -Xây dựng được một website bán nhiều loại sản phẩm tốt và chất lượng. -Giao diện dễ dàng đối với người dùng.

 Hiển thị danh sách sản phẩm

 Lọc sản phẩm theo danh mục

 Tìm kiếm sản phẩm theo tên

 Xem thông tin sản phẩm

 Xóa sản phẩm khỏi giỏ hàng

Mục 3.2 : Thiết kế dự án

1.Mục tiêu thiết kế giao diện : -Là tạo ấn tượng đầu tiên, thu hút được càng nhiều người biết đến sản phẩm của mình càng tốt.

- Có thể ứng dụng tốt vào thực tế và phát huy năng lực lôi cuốn, gia tăng nhận thức của người dùng khi họ có thể dể dàng tìm kiếm,đọc thông tin sản phẩm,quản lí giỏ hàng.

2.Quy trình thiết kế giao diện web bằng ReactJs:

 2.1 Cách tạo ra 1 project frontend bằng reactjs:

- Trước khi bắt đầu,đảm bảo máy tính đã cài đặt Node.js và npm Nếu chưa có Node.js, tải và cài đặt Node.js từ trang web chính thức của Node.js.

-Vào phần mềm visual studio code chọn New Terminal rồi gõ lệnh : npx create-react-app Tên Dự án

-cd Tên Dự án: Chuyển đổi đến thư Tên Dự Án

-npm start: Chạy dự án.

 2.2 Quy Trình triển khai Project:

- Tạo 1 dự án bằng dữ liệu JSON để tạo ra một API giả lập.Có thể giúp phát triển và kiểm thử ứng dụng dựa trên API mà chưa hoàn thiện hoặc triển khai.Để phát triển nhanh chóng và kiểm thử các ứng dụng dựa trên API, giúp tiết kiệm thời gian và công sức trong quá trình phát triển.

- Vào phần mềm visual studio code chọn New Terminal rồi gõ lệnh: npm install

- Tạo tệp db.json làm nguồn dữ liệu,tùy chọn để chỉ định cổng mà JSON Server sẽ lắng nghe.Chọn New Terminal rồi gõ lệnh : json-server watch db.json – port 8000-Bây giờ có thể truy cập API qua URL như http://localhost:8000.

Thay đổi dữ liệu trong db.json sẽ được phản ánh ngay lập tức trong API giả lập

-Sử dụng 1 số dữ liệu có sẵn từ trang web Dummy Json.Bằng cách đẩy dữ liệu từ link https://dummyjson.com/products vào file db.json.

- Tạo Frontend bằng reactjs có tên là PROJECT_WEB

- Trong file PROJECT_WEB có chứa các file như node_modules, public, src và các file dùng để chạy dự án.

- Trong file src tạo ra các thư mục con để dễ quản lí

- Trong componet có chứa các thư mục để quản lí các bố cục của trang web

Hình 9.File bố cục Component-Trong mục banner chứa thành phần banner của dự án-Trong mục body chứa phần thân của dự án

-Trong mục cart chứa thành phần giỏ hàng của dự án-Trong mực footer chứa thành phần chân trang của dự án

-Trong mục header chứa thành phần đầu trang của dự án

-Trong mục product chứa các sản phẩm của dự án

Hình 10.File Cấu hình Router

Hình 11.File cấu hình Router

3.Thiêt kế giao diện : 3.1 Giao diện trang chủ :

Hình 12.Giao diện trang chủ

Hình 13.Giao diện trang chủ

Hình 14.Giao diện trang chủ 3.2 Hiện danh sách sản phẩm:

Hình 15.Hiện danh sách sản phẩm

Hình 16.Hiện danh sách sản phẩm 3.3 Lọc sản phẩm theo danh mục:

Hình 17.Lọc sản phẩm theo danh mục

3.4 Lọc sản phẩm theo tên:

Hình 18.Lọc sản phẩm theo tên 3.5 Hiện chi tiết sản phẩm:

Hình 19.Hiện chi tiết sản phẩm3.6 Thêm sản phẩm vào giỏ hàng:

Hình 20.Thêm sản phẩm vào giỏ hàng

Hình 21.Thêm sản phẩm vào giỏ hàng

Hình 22.Thêm sản phẩm vào giỏ hàng 3.7 Xóa sản phẩm khỏi giỏ hàng:

Hình 23.Xóa sản phẩm khỏi giỏ hàng

Hình 24.Xóa sản phẩm khỏi giỏ hàng

Hình 28.Login trang Admin 3.9 Thêm sản phẩm:

Hình 30.Thêm sản phẩm 3.10 Sửa sản phẩm :

Hình 33 Sửa sản phẩm 3.11 Xóa sản phẩm :

Hình 35 Xóa sản phẩm 3.12 Giao diện trang thông tin:

Hình 36 Giao diện trang thông tin3.13 Giao diện trang liên hệ:

Hình 37.Giao diện trang liên hệ

Hình 38.Giao diện trang liên hệ

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Kết quả đạt được trong kỳ thực tập

● Trong thời gian thực tập vừa rồi em đã học được nhiều kiến thức như: kiến thức này đã mở ra một cửa sổ hiểu biết rộng hơn về cách áp dụng chúng trong học tập và làm việc thực tế

● Khả năng tự học và giải quyết vấn đề.Được tiếp xúc làm việc trong môi trường kinh doanh.

● Sự đồng hành của Mentor và GVHD thực sự quý báu,đã giúp em hoàn thành tốt hơn trong đợt thực tập vừa rồi và dự án của riêng của mình

● Không chỉ dừng lại ở việc học, em còn áp dụng những kiến thức đã nắm vững để xây dựng một trang web nhỏ cho riêng mình trong thời gian thực tập.

Kết luận và hướng phát triển

 Kết luận: Cần phải trở nên chủ động hơn trong công việc, chủ động tìm hiểu sâu hơn về nhiệm vụ của mình và nhận thức rõ hơn về những thiếu sót để có cơ hội khắc phục chúng Để bổ sung kiến thức Front- end, em sẽ đảm bảo rằng mình sẽ tiếp tục học hỏi và mở rộng vốn kiến thức từ những nguồn như coder academy, react.js và các tài liệu trực tuyến khác.

 Hướng phát triển: Từ những kiến thức em có được ở đợt thực tập này em sẽ hoàn thiện hơn nữa kiến thức của mình dựa trên nền tảng hiện tại.Em quyết tâm nắm vững các ngôn ngữ lập trình cơ bản thông qua việc học từ các nền tảng uy tín Điều này sẽ giúp em tăng cường kiến thức, chuẩn bị tốt hơn cho đợt thực tập tốt nghiệp sắp tới.

KẾT QUẢ