Tổng quan về nghề Developer 1.2.1 Định nghĩa 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
Giới thiệu tổng quát về doanh nghiệp thực tập
Tổng quan về công ty
• TMA Bình Định là dự án đầu tư quy mô lớn của TMA Solutions Với bề dày 24 năm phát triển vững mạnh của TMA Solutions thì TMA Bình Định đang dần khẳng định vị thế của mình đối với nền CNTT tỉnh Bình Định, góp sức cùng với tỉnh xây dựng Thung Lũng Sáng tạo Quy Nhơn trở thành trung tâm khoa học, công nghệ cao tại miền Trung
• Năm 2017: TMA quyết định đầu tư xây dựng Công viên sáng tạo TMA Bình Định (TMA Innovation Park) tại Thung Lũng Sáng Tạo Quy Nhơn
• Thành lập TMA Bình Định
• Khởi công xây dựng Công viên Sáng tạo TMA Bình Định (TMA Innovation Park - TIP)
• Thành lập Nhóm Data Science Group
• Tổ chức Ngày hội Công nghệ tại ĐH Quy Nhơn
• Khai trương Công viên Sáng tạo TMA Bình Định
• Khách hàng từ 6 nước (Mỹ, Úc, Pháp, Nhật Bản, Hàn Quốc, Singapore)
Hình 1: Logo công tyTMA Solutions Bình Định
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ột môi trường làm việc đáng tin cậy và chuyên nghiệp để 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
• Đồng hành cùng khách hàng trong quá trình chuyển đổi số và tối ưu hóa quy trình kinh doanh, đem 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 đáng sống và đáng làm việc, nơi mà nhân viên được khuyến khích và hỗ trợ phát triển cá nhân, đóng góp ý tưởng và mang lại sự sáng tạo và đột phá cho công ty.
Tổng quan về nghề Developer
Định nghĩa 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.
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.
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: 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 - $100,000 USD một năm
• 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
CHƯƠNG 2 CƠ SỞ LÝ THUYẾT
JavaScript
JavaScript là gì?
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 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)
• 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:
+ 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
• 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à:
+ 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 "người gọi"
JavaScript HTML DOM
• 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ư:
+ 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 (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:
+ Thuộc tính và Phương thức
ReactJS
Introducing JSX
• 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.
Rendering Elements
• 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 and Props
• 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 and Lifecycle
• 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
• 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.
List and Keys
• 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
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.
Hooks
Introducing Hooks
• 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 at a Glance
• 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ả.
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
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.
Using the Effect Hook
• 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.
Hooks API Reference
• 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
19 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
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 đượ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
+ 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
CHƯƠNG 3 TRIỂN KHAI THỰC NGHIỆM
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 một nền tảng kinh doanh trực tuyến cho việc bán trang sức Thể hiện sản phẩm trang sức một cách chuyên nghiệp và hấp dẫn Cải thiện trải nghiệm mua sắm trực tuyến, từ quy trình thanh toán đến lựa chọn sản phẩm Giúp mở rộng phạm vi khách hàng và thuận tiện 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: Hầu hết người dùng mong muốn trang sức mang phong cách tối giản, vừa tinh tế vừa sang trọng Họ đánh giá cao sự sáng tạo trong thiết kế và chất liệu cao cấp
+ Tần suất mua sắm: Người dùng thường mua sắm trực tuyến hàng tháng, đặc biệt vào dịp lễ, kỷ niệm và sinh nhật Họ mong đợi có nhiều tùy chọn để lựa chọn dựa trên sự kiện cụ thể
+ Trải nghiệm người dùng: Người dùng đề cao trải nghiệm mua sắm thuận tiện và nhanh chóng trên trang web Họ muốn giao diện đơ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: Đối thủ này nổi bật với thiết kế độc đáo và sự tập trung vào việc kết nối với người dùng qua các chương trình thưởng và sự kiện độc quyền
+ Trang web B: Đối thủ này tập trung vào việc cung cấp trải nghiệm mua sắm cá nhân thông qua công cụ tùy chỉnh sản phẩm và tư vấn từ chuyên gia trang sức
Trang web C: Đối thủ này đặc biệt chú trọng đến việc kể câu chuyện và giới thiệu về nguồn gốc của từng món trang sức, tạo nên sự kết nối tinh thần với người dùng
Dựa trên thông tin thu thập từ khảo sát người dùng và đối thủ cạnh tranh, chúng em sẽ phát triển trang web "D-Luxury" với mục tiêu tạo ra các mẫu trang sức đẹp mắt, tối giản và dễ phối hợp Chúng em sẽ cung cấp trải nghiệm mua sắm trực tuyến thuận tiện và nhanh chóng, kết hợp với các dịch vụ tùy chỉnh để đáp ứng mọi nhu cầu của khách hàng Đồng thời, chúng em sẽ kể câu chuyện độc đáo về mỗi sản phẩm để tạo sự kết nối và tạo nên sự khác biệt cho thương hiệu "D-Luxury".
Thiết kế dự án
Mục tiêu thiết kế giao diện
Mục tiêu chính của thiết kế giao diện web bán trang sức là tạo ra một trải nghiệm trực quan và hấp dẫn cho khách hàng Giao diện cần thể hiện tính chuyên nghiệp của thương hiệu và sự đẳng cấp của các sản phẩm trang sức Từ việc hiển thị sản phẩm một cách rõ ràng và chi tiết, đến việc tối ưu hóa quy trình mua sắm và tạo giao diện dễ sử dụng trên mọi thiết bị, mục tiêu là đảm bảo khách hàng có trải nghiệm mua sắm trực tuyến tốt nhất Đồng thời, giao diện cũng nên thúc đẩy tương tác, chia sẻ và tạo sự kết nối giữa khách hàng và thương hiệu, từ đó góp phần tăng cường doanh số bán hàng và xây dựng mối quan hệ bền vững trong thời gian dài.
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 files structure Mỗi Component là một phần của website chúng có chức năng đặc biệt và được gọi ra 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
28 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
35 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, em đã học được rất nhiều kiến thức về HTML, CSS và JavaScript: Đây là những ngôn ngữ cơ bản trong phát triển Front-End và đặc biệt là khi làm việc với ReactJS - một thư viện phát triển ứng dụng web Hiểu về cách ReactJS hoạt động, cách xây dựng và quản lý các thành phần (components), cách tương tác với trạng thái (state) và cách áp dụng các khái niệm cơ bản của ReactJS - hỗ trợ việc tạo và tối ưu hóa các trang web Các kiến thức trên giúp em hiểu rõ kiến thức để áp dụng vào trong quá trình học và làm việc sau này
- Nhờ có sự giúp đỡ của Mentor, GVHD và cả các anh chị tại nơi thực tập mà em đã học được cách giao tiếp hiệu quả với đồng nghiệp và quản lý, đặc biệt là khi cần giải thích ý tưởng, trình bày tiến độ, hoặc báo cáo về vấn đề nảy sinh
- Áp dụng tất cả những kiến thức và kĩ năng đã học tập được mà em đã xây dựng lên được 1 dự án nhỏ là 1 trang web bán trang sức
- Học tập thêm được nhiều kĩ năng về làm việc nhóm, biết chia sẻ ý kiến, lắng nghe người khác, và sử dụng công cụ giao tiếp hiệu quả Góp phần tăng cường kiến thức chung, chia sẻ kinh nghiệm và học hỏi từ 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ế :
- Chưa thật sự có được kỹ năng giải quyết vấn đề trong quá trình phát triển, từ việc tìm hiểu vấn đề cho đến đưa ra giải pháp thích 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.