TỔNG QUAN Về Công ty TNHH TMA Solutions Bình Định
Tổng quan về nghề Developer
-Trở thành 1 trong những công ty hàng đầu về cung cấp giải pháp phần mềm tại Việt Nam và các nước trong khu vực. b Sứ mệnh
Công viên Sáng tạo TMA hướng tới việc trở thành trung tâm phát triển phần mềm và công nghệ cao hàng đầu tại miền Trung, góp phần quan trọng trong việc biến Thung lũng sáng tạo Quy Nhơn thành điểm đến công nghệ 4.0 tại Việt Nam.
Trong suốt 18 năm hoạt động, công ty TMA đã vượt qua nhiều thách thức và khẳng định cam kết về chất lượng dịch vụ, đồng thời đầu tư mạnh mẽ vào phát triển nguồn nhân lực Nhờ đó, TMA đã xây dựng được lòng tin vững chắc từ khách hàng và trở thành công ty dẫn đầu trong lĩnh vực gia công phần mềm tại Việt Nam Công ty luôn duy trì và phát triển những giá trị cốt lõi để đạt được những thành công này.
1.2 Tổng quan về nghề Developer
Developer (dev) là thuật ngữ chung chỉ các kỹ sư phần mềm, những người sử dụng ngôn ngữ lập trình để phát triển và tạo ra các chương trình, phần mềm hoặc ứng dụng cho laptop và điện thoại Họ thành thạo nhiều ngôn ngữ lập trình và đóng vai trò thiết yếu trong quá trình phát triển phần mềm Developer cũng được biết đến với các tên gọi khác như 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.
Trong ngành phát triển phần mềm, ngoài lập trình viên, còn có nhiều vai trò quan trọng khác 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 đảm nhận những nhiệm vụ và trách nhiệm riêng, góp phần vào quá trình phát triển phần mềm hiệu quả.
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 của nhà phát triển frontend tại Hoa Kỳ có sự biến đổi đáng kể do nhiều yếu tố khác nhau Dữ liệu trước tháng 9 năm 2021 cho thấy mức lương trung bình cho các vị trí frontend developer cũng khác nhau tùy thuộc vào kinh nghiệm, kỹ năng và vị trí địa lý.
- 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 - $100,000 USD một năm.
Nhà phát triển frontend cấp cao có mức lương trung bình vượt qua 100,000 USD mỗi năm, và con số này có thể đạt vài trăm nghìn đô la tùy thuộc vào kinh nghiệm và vị trí làm việc.
CƠ SỞ LÝ THUYẾT
JavaScript
JavaScript là ngôn ngữ lập trình quan trọng giúp tạo ra các trang web tương tác, từ việc làm mới bảng tin trên mạng xã hội đến hiển thị hình ảnh động và bản đồ tương tác Với vai trò là ngôn ngữ kịch bản phía máy khách, JavaScript đóng vai trò cốt lõi trong việc nâng cao trải nghiệm người dùng trên World Wide Web.
2.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. 2.1.3 JavaScript tutorial
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 vụ cụ thể.
2 Một hàm JavaScript được thực thi khi "cái gì đó" gọi nó (calls it).
Gọi hàm là quá trình thực hiện một hàm bằng cách sử dụng tên hàm cùng với các đối số cần thiết, nếu có Kết quả của quá trình này sẽ được trả về sau khi hàm được thực thi.
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
Giá trị trả về của hàm là kết quả mà hàm cung cấp sau khi thực hiện các lệnh và tính toán bên trong Khi hàm được gọi và thực thi, nó có khả năng tạo ra một giá trị và trả về cho người gọi hàm.
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 (Mô hình Đối tượng Tài liệu) cho phép bạn truy cập, thay đổi và tương tác với các phần tử HTML trên trang web DOM thể hiệ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 xem như một đối tượng mà bạn có thể thao tác thông qua 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 (Lập trình hướng đối tượng) là phương pháp lập trình dựa trên việc tạo ra các đối tượng với thuộc tính và phương thức để thực hiện nhiệm vụ cụ thể Trong OOP, JavaScript cung cấp các khái niệm cơ bản hỗ trợ việc xây dựng và quản lý các đối tượng hiệu quả.
2 Thuộc tính và Phương thức
React JS
JSX là một thành phần quan trọng của React, thư viện JavaScript nổi bật, cho phép lập trình viên viết mã HTML trong mã JavaScript Việc sử dụng JSX giúp việc xây dựng giao diện người dùng trong React trở nên dễ dàng và trực quan hơn, nhờ vào khả năng kết hợp linh hoạt giữa hai ngôn ngữ trong cùng một tệp.
Trong React, "rendering elements" là quá trình hiển thị các phần tử giao diện, giúp quản lý giao diện một cách hiệu quả và dễ dàng React sử dụng phương pháp này để tạo ra các thành phần động, mang lại trải nghiệm người dùng mượt mà.
Các thành phần trong React là những khối xây dựng độc lập, giúp tạo và quản lý giao diện người dùng hiệu quả Chúng có thể được định nghĩa dưới dạng hàm hoặc lớp, cho phép tái sử dụng và tổ chức mã một cách linh hoạt Mỗi thành phần có khả năng chứa nhiều thành phần con, tạo nên cấu trúc giao diện phức tạp và dễ quản lý.
Props, hay thuộc tính, là dữ liệu được truyền từ thành phần cha đến thành phần con, cho phép tùy chỉnh hành vi và nội dung của các thành phần khác nhau Việc thay đổi props thường dẫn đến việc cập nhật giao diện, giúp cải thiện trải nghiệm người dùng.
State trong React là dữ liệu động được lưu trữ bên trong các thành phần Khi state thay đổi, giao diện của thành phần sẽ tự động cập nhật để hiển thị dữ liệu mới.
Vòng đời của một thành phần React là chuỗi các giai đoạn mà nó trải qua, bắt đầu từ khi được tạo ra cho đến khi bị hủy bỏ Quá trình này cho phép bạn thực hiện các hành động quan trọng như khởi tạo dữ liệu, cập nhật giao diện người dùng và giải phóng tài nguyên.
Xử lý sự kiện trong React là quá trình quản lý các 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 áp dụng các trình xử lý sự kiện, bạn có thể kết nối những hành động cụ thể với các thành phần trong React một cách hiệu quả.
Danh sách trong React là phương pháp hiển thị nhiều thành phần tương tự bằng cách lặp qua mảng dữ liệu và render từng phần tử thành các thành phần riêng biệt.
Khóa (Keys) là thuộc tính đặc biệt trong React, được sử dụng để xác định duy nhất mỗi phần tử trong danh sách Việc sử dụng khóa giúp React theo dõi các thay đổi và tối ưu hóa quá trình cập nhật giao diện, từ đó nâng cao hiệu suất ứng dụng.
Trong React, Forms đóng vai trò quan trọng trong việc xử lý và thu thập dữ liệu từ người dùng, bao gồm nhập văn bản, chọn tùy chọn và gửi dữ liệu lên máy chủ Việc sử dụng Forms giúp tạo ra các giao diện tương tác, nâng cao trải nghiệm người dùng.
HOOK
Hooks trong React cho phép bạn tận dụng các tính năng khác nhau từ các components Bạn có thể sử dụng các Hooks có sẵn hoặc kết hợp chúng để tạo ra những Hooks tùy chỉnh riêng cho mình.
Hooks enable the use of state and other React features within function components, rather than being limited to class components They facilitate the creation and management of state, event handling, and the execution of various tasks in a straightforward and efficient manner.
State cho phép các thành phần "ghi nhớ" thông tin, chẳng hạn như đầu vào từ người dùng Ví dụ, các thành phần biểu mẫu có thể sử dụng State để lưu trữ giá trị đầu vào, trong khi các thành phần thư viện hình ảnh có thể sử dụng State để lưu trữ chỉ mục của hình ảnh đã được chọn.
In React, the useEffect hook is utilized to manage side effects within function components Side effects may include actions such as API calls, DOM manipulations, or any operations that do not directly pertain to rendering the user interface.
Bài viết này cung cấp thông tin chi tiết về các hooks trong React, bao gồm các hooks được xây dựng sẵn như useState, useEffect, useContext và nhiều hooks khác Nó giúp người đọc 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 các component hàm.
REDUX-Toolkit
Redux Toolkit là thư viện hỗ trợ Redux, cung cấp công cụ và tiện ích giúp lập trình viên viết mã Redux một cách dễ dàng và hiệu quả hơn Thư viện này được thiết kế nhằm giảm thiểu các bước lặp lại và tối ưu hóa quy trình làm việc theo các phương 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 giúp tạo reducers một cách đơn giản và dễ dàng, cho phép bạn viết mã reducer ngắn gọn và loại bỏ các bước lặp lại không cần thiết.
REACT ROUTER
React Router là thư viện quản lý tuyến đường trong ứng dụng React, giúp tạo và điều hướng giữa các trang (components) một cách dễ dàng và trực quan Với tính năng điều hướng mạnh mẽ, React Router cho phép xác định các tuyến đường và quản lý hiển thị các trang tương ứng, mang lại trải nghiệm người dùng mượt mà.
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à thư viện Node.js giúp tạo API ảo từ dữ liệu JSON, cho phép xây dựng RESTful API nhanh chóng chỉ với một tệp JSON Khi khởi động json-server, nó sẽ thiết lập một máy chủ và cung cấp các endpoint API dựa trên cấu trúc dữ liệu trong tệp JSON.
Tạo một dự án sử dụng dữ liệu JSON để phát triển một API giả lập có thể hỗ trợ việc phát triển và kiểm thử ứng dụng trước khi API hoàn thiện hoặc triển khai Phương pháp này giúp tăng tốc độ phát triển và kiểm thử các ứng dụng dựa trên API, đồng thời tiết kiệm thời gian và công sức trong quá trình phát triển.
TRIỂN KHAI
Mục 3.1 : Phân tích yêu cầu của hệ thống:
Mục tiêu chính của việc xây dựng website là quảng bá sản phẩm và tối ưu hóa quản lý bán hàng Điều này bao gồm việc cải thiện hiển thị sản phẩm, nâng cao trải nghiệm người dùng, quản lý sản phẩm hiệu quả và tối ưu hóa quy trình bán hàng.
Website quản lý bán hàng cung cấp các chức năng quan trọng như quản lý tài khoản admin, quản lý danh mục sản phẩm, thông tin sản phẩm, quản lý quy trình bán hàng, giỏ hàng và đơ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
Thêm sản phẩm vào giỏ hàng
Xóa sản phẩm khỏi giỏ hàng
Mụ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.
Ứng dụng này giúp người dùng dễ dàng tìm kiếm và đọc thông tin sản phẩm, đồng thời quản lý giỏ hàng hiệu quả, từ đó phát huy tối đa khả năng lôi cuốn và gia tăng nhận thức của họ.
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, hãy chắc chắn rằng máy tính của bạn đã cài đặt Node.js và npm Nếu chưa có, bạn cần tải và cài đặt Node.js từ trang web chính thức của nó.
-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 một dự án bằng dữ liệu JSON để phát triển API giả lập giúp kiểm thử ứng dụng trước khi hoàn thiện hoặc triển khai Việc này hỗ trợ phát triển nhanh chóng, tiết kiệm thời gian và công sức trong quá trình xây dựng các ứng dụng dựa trên API.
- Vào phần mềm visual studio code chọn New Terminal rồi gõ lệnh: npm install -g json- server
Tạo tệp db.json để làm nguồn dữ liệu và tùy chọn cổng cho JSON Server Mở New Terminal và nhập lệnh: json-server watch db.json –port 8000 Bạn có thể truy cập API qua URL http://localhost:8000 Mọi thay đổi trong tệp db.json sẽ được cập nhật 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ẩm
3.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
3.12 Giao diện trang thông tin:
Hình 36 Giao diện trang thông tin
3.13 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, em đã tiếp thu nhiều kiến thức quan trọng như HTML, CSS, JavaScript, ReactJs, Redux-toolkit, React-Router và Json-server Những kiến thức này không chỉ giúp em mở rộng hiểu biết mà còn tạo điều kiện áp dụng hiệu quả trong học tập và công 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ự hỗ trợ từ Mentor và Giảng viên Hướng dẫn (GVHD) đã mang lại giá trị to lớn, giúp tôi hoàn thành tốt hơn trong đợt thực tập gần đây cũng như trong dự án cá nhân của mình.
Trong quá trình thực tập, tôi không chỉ dừng lại ở việc học hỏi mà còn áp dụng những kiến thức đã học để xây dựng một trang web nhỏ cho riêng mình.
Kết luận và hướng phát triển
Để nâng cao hiệu quả công việc, cần chủ động tìm hiểu sâu về nhiệm vụ và nhận thức rõ các thiếu sót để có cơ hội khắc phục Để bổ sung kiến thức Front-end, tôi sẽ tiếp tục học hỏi từ các 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 của em là hoàn thiện kiến thức dựa trên nền tảng hiện tại từ đợt thực tập Em quyết tâm nắm vững các ngôn ngữ lập trình cơ bản qua việc học từ các nền tảng uy tín, nhằm tăng cường kiến thức và chuẩn bị tốt cho đợt thực tập tốt nghiệp sắp tới.
KẾT QUẢ
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, tôi đã tiếp thu nhiều kiến thức quan trọng như HTML, CSS, JavaScript, ReactJs, Redux-toolkit, React-Router và Json-server Những kiến thức này không chỉ giúp tôi mở rộng hiểu biết mà còn cung cấp nền tảng vững chắc để áp dụng vào học tập và công 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ự hỗ trợ từ Mentor và Giảng viên Hướng dẫn (GVHD) đã mang lại giá trị quý báu, giúp tôi hoàn thành tốt hơn trong đợt thực tập gần đây cũng như trong dự án cá nhân của mình.
Trong thời gian thực tập, em không chỉ học hỏi mà còn áp dụng những kiến thức đã tích lũy để xây dựng một trang web nhỏ cho riêng mình.
Kết luận và hướng phát triển
Để nâng cao hiệu quả công việc, cần chủ động tìm hiểu sâu về nhiệm vụ và nhận thức rõ những thiếu sót để có cơ hội khắc phục Để cải thiện kiến thức Front-end, tôi sẽ tiếp tục học hỏi từ các nguồn như Coder Academy, React.js và các tài liệu trực tuyến khác.
Từ những kiến thức thu được trong đợt thực tập, tôi quyết tâm hoàn thiện bản thân và nắm vững các ngôn ngữ lập trình cơ bản Tôi sẽ học hỏi từ các nền tảng uy tín để nâng cao 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.