Giới thiệu tổng quát về doanh nghiệp thực tập
Tầm nhìn sứ mệnh của công ty TMA Solutions Bình Định
Trở thành một trong những công ty công nghệ hàng đầu trong ngành phần mềm và dịch vụ công nghệ thông tin tại khu vực Bình Định.
Xây dựng môi trường làm việc chuyên nghiệp và đáng tin cậy là yếu tố quan trọng để thu hút và phát triển những tài năng xuất sắc trong lĩnh vực công nghệ thông tin.
Cung cấp các giải pháp phần mềm chất lượng cao, sáng tạo và phù hợp với nhu cầu của khách hàng.
Chúng tôi đồng hành cùng khách hàng trong hành trình chuyển đổi số và tối ưu hóa quy trình kinh doanh, nhằm mang lại giá trị và thành công bền vững cho họ.
Tạo ra một môi trường làm việc tích cực và hấp dẫn, nơi nhân viên được khuyến khích phát triển bản thân, đóng góp ý tưởng và mang lại sự sáng tạo đột phá cho công ty.
Tổng quan về nghề Developer
Định nghĩa 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 các chương trình, ứ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ò quan trọng trong quá trình phát triển phần mềm Ngoài ra, 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ã hoặc kỹ sư phần mềm.
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 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 biệt, 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 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 động dựa trên 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ó thể thay đổi tùy thuộc vào kinh nghiệm, kỹ năng và khu vực làm việc.
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 đến vài trăm nghìn đô la tùy thuộc vào kinh nghiệm và vị trí địa lý.
JavaScript
JavaScript là gì?
JavaScript là ngôn ngữ lập trình quan trọng cho việc phát triển trang web tương tác, từ việc làm mới bảng tin trên mạng xã hội đến việc 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 giúp nâng cao trải nghiệm người dùng và đóng góp vào các công nghệ cốt lõi của World Wide Web.
Tại sao nên học JavaScript
+ Web Development: Cần để xây dựng ứng dụng web động và tương tác.
+ Phổ biến: Ngôn ngữ rộng rãi, nhiều cơ hội việc làm.
+ Dễ học: Cú pháp dễ tiếp cận, linh hoạt.
+ Cộng đồng lớn: Hỗ trợ tài liệu và giải quyết vấn đề.
+ Phát triển sự nghiệp: Mở cửa cho nhiều lĩnh vực khác nhau.
+ Frameworks và thư viện: Dùng để xây dựng ứng dụng phức tạp.
+ Tương lai sáng: Đóng góp vào tiến hóa của web và công nghệ mới.
JavaScript tutorial
+ Biến và kiểu dữ liệu: var, let, const, number, string, boolean.
+ Câu lệnh điều kiện: if, else if, else.
+ Vòng lặp: for, while, do-while.
+ Hàm: function, tham số, return.
+ Mảng và đối tượng: Array, Object.
JavaScript Functions
- Hàm JavaScript là một khối mã được thiết kế để thực hiện một tác vụ cụ thể.
- 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 Kết quả của quá trình này sẽ được trả về sau khi hàm được thực thi.
+ Khi một sự kiện xảy ra (khi người dùng nhấp vào nút)
+ Khi nó được gọi (được gọi) từ mã JavaScript
Giá trị trả về của hàm (Function Return) 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ả lại cho người gọi hàm.
+ Khi JavaScript đạt đến câu lệnh trả về, hàm sẽ ngừng thực thi
+ 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
+ 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
JavaScript HTML DOM
JavaScript HTML DOM (Document Object Model) là công cụ cho phép truy cập và thay đổi các phần tử HTML trên trang web DOM thể hiện cấu trúc của trang web như một cây phân cấp, với mỗi phần tử HTML được xem như một đối tượng có thể thao tác thông qua JavaScript.
• Với các chức năng như:
+ Truy cập các phần tử HTML
+ Thay đổi nội dung và thuộc tính
+ Thêm và xóa phần tử
+ Sự kiện và xử lý sự kiện
JavaScript oop
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 sử dụng các đối tượng, cho phép chúng ta tạo ra các đối tượng với thuộc tính và phương thức để thực hiện các nhiệm vụ cụ thể JavaScript hỗ trợ OOP thông qua các khái niệm cơ bản như kế thừa, đóng gói và đa hình, giúp lập trình viên xây dựng ứng dụng linh hoạt và dễ bảo trì.
+ Thuộc tính và Phương thức
ReactJS
Introducing JSX
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 bạn kết hợp mã HTML vào 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à dễ đọc hơn, nhờ vào sự tích hợp của hai ngôn ngữ trong cùng một tệp.
Rendering Elements
Trong React, "rendering elements" là quá trình hiển thị các phần tử giao diện React cho phép quản lý giao diện một cách hiệu quả và dễ dàng thông qua việc sử dụng phương pháp "rendering elements" và tạo ra các thành phần động.
Components and Props
Các thành phần trong React là những khối xây dựng độc lập, đóng vai trò quan trọng trong việc tạo và quản lý giao diện người dùng 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ã hiệu quả 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 linh hoạt cho ứng dụng.
Props là thuộc tính quan trọng trong lập trình, cho phép truyền dữ liệu từ thành phần cha đến thành phần con Chúng giúp tùy chỉnh hành vi và nội dung của các thành phần, tạo ra sự linh hoạt trong giao diện người dùng Khi props được thay đổi, giao diện sẽ tự động cập nhật để phản ánh những thay đổi này.
State and Lifecycle
State trong React là dữ liệu động lưu trữ bên trong một thành phần Khi state thay đổi, thành phần sẽ tự động cập nhật giao diện để 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à thành phần đó trải qua, 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 khi không còn cần thiết.
Handling Events
Xử lý sự kiện trong React liên quan đến việc quản lý các tương tác của người dùng như nhấn nút, click chuột và nhập liệu Bằng cách áp dụng các trình xử lý sự kiện, người dùng có thể kết nối các hành động cụ thể với các thành phần trong React.
List and Keys
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, từ đó render mỗi 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, dùng để xác định duy nhất từng phần tử trong danh sách Việc sử dụng khóa giúp React theo dõi sự 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.
Forms
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, lựa 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.
Hooks
Introducing Hooks
Hooks trong React cho phép người dùng tận dụng các tính năng khác nhau từ các component Bạn có thể sử dụng các Hooks có sẵn hoặc kết hợp chúng để phát triển các Hooks tùy chỉnh của riêng mình.
Hooks at a Glance
Hooks enable the use of state and other React features within function components, moving beyond the limitations of class components They facilitate easy and efficient state management, event handling, and the execution of various tasks.
Using the State Hook
State cho phép một components “ghi nhớ” thông tin như đầu vào của người dùng.
Các thành phần biểu mẫu có thể tận 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.
Using the Effect Hook
Trong React, hook useEffect được sử dụng để xử lý các tác vụ liên quan đến side effects trong các function components Các side effects này có thể bao gồm việc gọi API, thay đổi DOM, hoặc thực hiện các hành động không trực tiếp liên quan đến việc render giao diện.
Hooks API Reference
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 tích hợp sẵn như useState, useEffect, và useContext 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 thành phần function.
Redux-Toolkit
ConfigureStore
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ả.
CreateSlice
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.
CreateReducer
Hàm này giúp đơn giản hóa quá trình tạo reducers, cho phép bạn viết mã ngắn gọn hơn và giảm thiểu sự lặp lại trong code.
React Router
React Router là thư viện quản lý tuyến đường trong ứng dụng React, giúp dễ dàng tạo và điều hướng giữa các trang (components) một cách trực quan Các tính năng chính của nó bao gồm khả năng định nghĩa tuyến đường, chuyển hướng và quản lý trạng thái lịch sử.
- Đ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.
+ 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.
+ 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.
+ 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
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.
Phân tích yêu cầu của hệ thống
Mục tiêu đề tài
Mục tiêu chính của dự án là xây dựng nền tảng kinh doanh trực tuyến cho việc bán trang sức, nhằm thể hiện sản phẩm một cách chuyên nghiệp và hấp dẫn Dự án này tập trung vào việc cải thiện trải nghiệm mua sắm trực tuyến, từ quy trình thanh toán đến sự đa dạng trong lựa chọn sản phẩm Bên cạnh đó, nó cũng giúp mở rộng phạm vi khách hàng và tạo điều kiện thuận lợi hơn trong việc quản lý đơn hàng và giao hàng.
Khảo sát hệ thống
Phong cách yêu thích của người dùng hiện nay là trang sức tối giản, kết hợp giữa sự tinh tế và sang trọng Họ đặc biệt đánh giá cao sự sáng tạo trong thiết kế cũng như việc sử dụng chất liệu cao cấp.
Người dùng thường có thói quen mua sắm trực tuyến hàng tháng, đặc biệt vào các dịp lễ, kỷ niệm và sinh nhật Họ mong muốn có nhiều lựa chọn đa dạng phù hợp với từng sự kiện cụ thể.
Người dùng ngày nay ưu tiên trải nghiệm mua sắm trực tuyến thuận tiện và nhanh chóng, với mong muốn giao diện trang web đơn giản, dễ sử dụng và có tính thẩm mỹ cao.
Khảo sát Đối thủ Cạnh tranh:
Trang web A nổi bật với thiết kế độc đáo, tập trung vào việc kết nối với người dùng thông qua các chương trình thưởng hấp dẫn và sự kiện độc quyền.
Trang web B nổi bật với việc mang đến trải nghiệm mua sắm cá nhân hóa, nhờ vào công cụ tùy chỉnh sản phẩm và sự tư vấn chuyên nghiệp từ các chuyên gia trang sức.
Trang web C tập trung mạnh mẽ vào việc kể chuyện và giới thiệu nguồn gốc của từng món trang sức, từ đó tạo ra sự kết nối tinh thần sâu sắc với người dùng.
Thiết kế dự án
Mục tiêu thiết kế giao diện
Mục tiêu thiết kế giao diện web bán trang sức là tạo trải nghiệm trực quan, hấp dẫn và chuyên nghiệp cho khách hàng Giao diện cần hiển thị sản phẩm rõ ràng, chi tiết, tối ưu hóa quy trình mua sắm và dễ sử dụng trên mọi thiết bị, nhằm mang đến trải nghiệm mua sắm trực tuyến tốt nhất Đồng thời, giao diện cũng cần thúc đẩy tương tác, chia sẻ và kết nối giữa khách hàng và thương hiệu, từ đó tăng cường doanh số bán hàng và xây dựng mối quan hệ bền vững.
Quy trình thiết kế giao diện web bằng ReactJS
Bước 1: Tạo môi trường để phát triển React Tiền hành cài đặt NodeJS cho dự án.
Bước 2: Thực hiện các bước khởi tạo Project React ( creact-react-app) chạy trên môi trường NodeJs để bắt đầu thực hiện chuyển giao website mới.
Bước 3: Cài đặt các thư viện.
Bước 4: Tạo Component theo tiêu chuẩn cấu trúc tệp Mỗi Component đóng vai trò là một phần riêng biệt của website, có chức năng đặc thù và được gọi từ các chương trình khác.
Bước 5: Thiết kế trực quan.
Bước 6: Hoàn thiện giao diện và các xử lý logic website.
Thiết kế giao diện
- Có các màn hình sau:
+ Màn hình trang sản phẩm
+ Màn hình trang chi tiết sản phẩm
+ Màn hình trang mua ngay (Thanh toán)
+ Màn hình trang thông tin
+ Màn hình trang liên hệ
+ Màn hình trang đăng nhập
+ Màn hình trang đăng ký
3.2.3.2 Giao diện màn hình : a Giao diện trang chủ
Hình 2: Giao diện trang chủ 1
Hình 3: Giao diện trang chủ 2
Hình 4: Giao diện trang chủ 3
Hình 5: Giao diện trang chủ 4
Hình 6: Giao diện trang chủ 5
Hình 7: Giao diện trang chủ 6
Hình 8: Giao diện trang chủ 7
Hình 9: Giao diện trang chủ 8
Hình 10: Giao diện trang chủ 9 b Giao diện trang sản phẩm
Hình 11: Giao diện sản phẩm 1
Hình 12: Giao diện sản phẩm 2
Hình 13: Giao diện sản phẩm 3 c Giao diện trang chi tiết sản phẩm
Hình 14: Giao diện chi tiết sản phẩm 1
Hình 15: Giao diện chi tiết sản phẩm 2
Hình 16: Giao diện chi tiết sản phẩm 3
Hình 17: Giao diện chi tiết sản phẩm 4 d Giao diện trang mua ngay (thanh toán)
Hình 18: Giao diện mua ngay 1
Hình 19: Giao diện mua ngay 2
Hình 20: Giao diện mua ngay 3
Hình 21: Giao diện mua ngay 4 e Giao diện trang thông tin
Hình 22: Giao diện thông tin 1
Hình 23: Giao diện thông tin 2
Hình 24: Giao diện thông tin 3 f Giao diện trang liên hệ
Hình 25: Giao diện liên hệ 1
Hình 26: Giao diện liên hệ 2
Hình 27: Giao diện liên hệ 3 g Giao diện trang đăng nhập
Hình 28: Giao diện đăng nhập
Hình 29: Giao diện đăng nhập khi nhập email và mật khẩu
Hình 30: Giao diện đăng nhập khi nhấn icon hiện mật khẩu
Hình 31: Giao diện đăng nhập khi bỏ trống tài khoản và mật khẩu
Hình 32: Giao diện khi nhập Email không đúng dịnh dạng và mật khẩu thiếu kí tự
Hình 33: Giao diện khi nhập Email hoặc mật khẩu sai h Giao diện trang đăng ký
Hình 34: Giao diện đăng ký
Hình 35: Giao diện đăng ký khi để trống thông tin
Hình 36: Giao diện đăng ký khi nhập sai điều kiện các ô
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Trong quá trình thực tập tại công ty TMA Solutions Bình Định, tôi đã tiếp thu nhiều kiến thức quan trọng về HTML, CSS và JavaScript, những ngôn ngữ cơ bản trong phát triển Front-End Đặc biệt, tôi đã hiểu rõ cách hoạt động của ReactJS, một thư viện phát triển ứng dụng web, bao gồm việc xây dựng và quản lý các thành phần (components), tương tác với trạng thái (state) và áp dụng các khái niệm cơ bản của ReactJS Những kiến thức này sẽ hỗ trợ tôi trong việc tạo và tối ưu hóa các trang web, đồng thời giúp tôi áp dụng hiệu quả vào quá trình học tập và làm việc sau này.
Nhờ sự hỗ trợ từ Mentor, giảng viên hướng dẫn và các anh chị tại nơi thực tập, tôi đã cải thiện khả năng giao tiếp hiệu quả với đồng nghiệp và quản lý Điều này đặc biệt hữu ích khi tôi cần giải thích ý tưởng, trình bày tiến độ công việc hoặc báo cáo về các vấn đề phát sinh.
Em đã áp dụng tất cả kiến thức và kỹ năng đã học để xây dựng một dự án nhỏ, đó là một trang web bán trang sức.
Học tập thêm nhiều kỹ năng làm việc nhóm giúp cải thiện khả năng chia sẻ ý kiến, lắng nghe và sử dụng công cụ giao tiếp hiệu quả Điều này không chỉ nâng cao kiến thức chung mà còn tạo cơ hội để chia sẻ kinh nghiệm và học hỏi lẫn nhau.
Mặc dù học tập được rất nhiều điều bổ ích nhưng đan xen vào đó cũng còn rất nhiều hạn chế :
Trong quá trình phát triển, việc chưa có kỹ năng giải quyết vấn đề một cách hiệu quả là một thách thức lớn Điều này bao gồm từ việc nhận diện vấn đề cho đến việc đưa ra những giải pháp phù hợp.
- Chưa áp dụng được hết tất cả những kiến thức đã học vào dự án, và chưa có nhiều kinh nghiệm để đi vào những dự án thực tế.
- Không phân chia được thời gian hợp lý để có thể tìm hiểu hết các công nghệ, các frameworks của Front-end.
- Chưa có được sự tập trung cao độ vào học tập và làm việc.