TỔNG QUAN DOANH NGHIỆP VÀ VỊ TRÍ VIỆC LÀM
Giới thiệu chung
1.1.1 Giới thiệu chung về TMA Solutions
TMA Solutions, viết tắt là TMA, là Công ty Giải pháp Phần mềm Tường Minh, thuộc Tập đoàn Công nghệ TMA (TMA Tech Group) Công ty chuyên cung cấp dịch vụ phát triển phần mềm và hiện đang là một trong những tập đoàn công nghệ hàng đầu tại Việt Nam với đội ngũ 4000 kỹ sư tính đến tháng 4 năm 2023.
- Loại hình: Doanh nghiệp Tư Nhân
- Ngành nghề: Dịch vụ CNTT - Gia Công Xuất khẩu Phần Mềm
- Lĩnh vực hoạt động: Gia Công Phần Mềm
- Người sáng lập: Bà Bùi Ngọc Anh, CEO; Ông Nguyễn Hữu Lệ, Chủ tịch
- Trụ sở chính 111, Đường Nguyễn Đình Chính, Quận Phú Nhuận, Thành phố
Hồ Chí Minh, Việt Nam
TMA hiện có 7 chi nhánh tại Việt Nam (6 tại Tp.HCM và 1 ở Tp Quy Nhơn) cùng
TMA Solutions có 6 chi nhánh quốc tế tại Mỹ, Úc, Canada, Đức, Nhật Bản và Singapore Các công ty thành viên bao gồm TMA Solutions, chuyên cung cấp giải pháp phần mềm; TMA Solutions Bình Định, trung tâm công nghệ hàng đầu tại miền Trung Việt Nam; và TMA Innovation, tập trung vào việc cung cấp sản phẩm và giải pháp công nghệ sáng tạo.
Với hơn 25 năm kinh nghiệm, TMA đã phát triển và triển khai giải pháp phần mềm cho khách hàng từ 30 quốc gia, tích lũy nhiều công nghệ tiên tiến Công ty tập trung vào việc ứng dụng công nghệ mới để tạo ra các giải pháp sáng tạo và đột phá, đồng thời hỗ trợ khách hàng áp dụng công nghệ 4.0 với chi phí thấp và hiệu quả cao.
Công nghệ tiên phong: Trí tuệ nhân tạo / máy học, dữ liệu lớn / phân tích dữ liệu, IOT và thiết bị thông minh, Cloud
- Được đào tạo kỹ thuật và công nghệ trước khi tham gia dự án với khách hàng Bắc Mỹ, Châu Âu, Úc
- Mức lương thỏa thuận và hưởng 100% lương trong thời gian đào tạo
- Môi trường làm việc chuyên nghiệp, nhiều cơ hội thăng tiến
- Được hưởng đầy đủ các chế độ BHXH, BHYT, bảo hiểm chăm sóc sức khoẻ toàn diện, bảo hiểm thất nghiệp theo quy định Luật lao động
1.1.2 Giới thiệu chung về TMA Solutions Bình Định
TMA Bình Định đang khẳng định vị thế trong lĩnh vực công nghệ thông tin tại tỉnh Bình Định, đồng thời đóng góp vào việc xây dựng Thung Lũng Sáng tạo Quy Nhơn thành trung tâm khoa học và công nghệ cao của miền Trung.
- Địa chỉ: 12 Đại lộ Khoa học, KV 2, phường Ghềnh Ráng, thành phố Quy Nhơn
- Liên hệ: (0256) 389 8979 – Máy lẻ: 7222 | Hotline: 0977 465 083
Hình 2: TMA Solutions Bình Định Lịch sử hình thành:
● 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
● 2018: Khởi công xây dựng Công viên Sáng tạo TMA Bình Định (TMA Innovation Park – TIP) tại Thung lũng Sáng tạo Quy Nhơn (Quy Nhon Innovation Park)
● 2020: Khai trương Công viên Sáng tạo TMA Bình Định Đạt 140 kỹ sư Khách hàng từ 6 nước (Mỹ, Úc, Pháp, Nhật Bản, Hàn Quốc, Singapore)
Tổng quan về vị trí việc làm
1.2.1 Giới thiệu chung công việc Front-end Developer
Front-end Developer là chuyên gia xây dựng và phát triển giao diện người dùng cho ứng dụng web và trang web Họ đóng vai trò quan trọng trong việc kết nối người dùng với các phần khác của ứng dụng, đảm bảo mang lại trải nghiệm người dùng tối ưu khi sử dụng sản phẩm.
- Kiến thức chuyên môn: ngôn ngữ lập trình HTML, CSS và JavaScript Các thư viện và framework phổ biến (React, Angular, hoặc Vue.js)
- Nên có kiến thức về thiết kế giao diện người dùng (UI/UX) để tạo ra giao diện hấp dẫn và dễ sử dụng
- Có khả năng xây dựng trang web và ứng dụng web phản hồi (responsive) tương thích trên nhiều loại thiết bị và kích thước màn hình khác nhau
Kiểm thử giao diện và sửa lỗi là quá trình quan trọng để đảm bảo trang web hoạt động đúng cách, không gặp sự cố khi người dùng tương tác.
- Hiểu biết cơ bản về Back-end
- Có khả năng sử dụng Git và các hệ thống quản lý phiên bản để theo dõi và quản lý mã nguồn
- Kỹ năng giao tiếp và làm việc nhóm
- Sáng tạo và tư duy giải quyết vấn đề
Công việc của một Front-end Developer bao gồm:
Lập trình và xây dựng giao diện người dùng là quá trình tạo ra giao diện đồ họa và các yếu tố tương tác mà người dùng có thể thấy và tương tác trực tiếp trên trình duyệt web.
Tối ưu hóa trải nghiệm người dùng là rất quan trọng, đảm bảo giao diện dễ sử dụng, thân thiện và tương thích với nhiều thiết bị cũng như trình duyệt khác nhau, từ máy tính cá nhân đến điện thoại di động.
- Tương tác với Back-end Developer: để đảm bảo tích hợp giao diện và dữ liệu diễn ra một cách hiệu quả và mượt mà
- Kiểm thử và sửa lỗi: đảm bảo trang web hoặc ứng dụng web hoạt động đúng và không gặp vấn đề khi người dùng sử dụng
Front-end developers must stay updated with the latest technology trends to effectively implement them in their projects and enhance user experience.
Vì lí do chính sách bảo mật của công ty nên không thể tiết lộ mức lương
• Tại thị trường Việt Nam
Mức lương của Front-end Developer tại Việt Nam thay đổi theo nhiều yếu tố như kinh nghiệm, trình độ chuyên môn, quy mô công ty, vị trí địa lý và quy mô dự án Dưới đây là mức lương tham khảo cho vị trí Front-end Developer tại thị trường Việt Nam.
- Fresher (sinh viên mới ra trường): từ 7 triệu - 15 triệu VND/tháng
- Junior (khoảng 2-5 năm kinh nghiệm): có thể từ 10 triệu đến 25 triệu/tháng
- Senior (từ 5 năm kinh nghiệm): từ 20 triệu - 40 triệu VND mỗi tháng, hoặc thậm chí cao hơn tùy vào vị trí và trình độ chuyên môn
1.2.5 Con đường phát triển (Career Path)
Sinh viên mới ra trường trong lĩnh vực front-end thường thực hiện các nhiệm vụ cơ bản như cắt HTML và thêm CSS cho giao diện Họ cũng tham gia vào các dự án nhỏ để tích lũy kinh nghiệm và phát triển kỹ năng lập trình của mình.
● Front-end Junior: từ 2 - 5 năm kinh nghiệm Có kinh nghiệm hơn, thường đã hoàn thành một số dự án phức tạp hơn
Chuyên gia Front-end cấp cao với hơn 5 năm kinh nghiệm, có khả năng giải quyết các vấn đề phức tạp và hướng dẫn các nhân viên trẻ.
Chuyên gia Front-end là người có kiến thức sâu rộng về một hoặc nhiều công nghệ và framework front-end cụ thể Họ đảm nhận nhiệm vụ xây dựng các giao diện phức tạp và tìm kiếm các giải pháp tối ưu hóa cũng như cải tiến tiên tiến.
Tech Lead Front-end đóng vai trò lãnh đạo kỹ thuật trong dự án, chịu trách nhiệm đưa ra các quyết định quan trọng liên quan đến phát triển giao diện người dùng Họ không chỉ hướng dẫn đội ngũ phát triển mà còn đảm bảo rằng các tiêu chuẩn kỹ thuật được tuân thủ, góp phần nâng cao chất lượng sản phẩm cuối cùng.
CƠ SỞ LÝ THUYẾT
HTML
HTML (Ngôn ngữ Đánh dấu Siêu văn bản) là công cụ thiết yếu cho việc xây dựng và định dạng trang web Nó cho phép các nhà phát triển xác định cấu trúc và nội dung của trang bằng cách sử dụng các thẻ và phần tử với các thuộc tính tương ứng.
HTML là một ngôn ngữ dễ học và đơn giản, đóng vai trò quan trọng trong việc xây dựng nội dung và cấu trúc cho hầu hết các trang web trên Internet Mỗi trang web sử dụng HTML đều có cấu trúc cơ bản, bao gồm các thẻ , , và .
CSS
CSS (Cascading Style Sheets) - một ngôn ngữ đánh dấu được sử dụng để định dạng và trình bày các trang web đã được xây dựng bằng HTML
CSS là công cụ quan trọng giúp các nhà phát triển web tùy chỉnh kiểu dáng, màu sắc, kích thước và bố cục của các phần tử trên trang web, từ đó tạo ra trải nghiệm trực quan và thẩm mỹ cho người dùng, góp phần xây dựng trang web chuyên nghiệp.
Javascript
JavaScript (JS) là một ngôn ngữ lập trình thông dịch, đa nền tảng và có tính cấu trúc, được sử dụng rộng rãi trong phát triển ứng dụng web và trang web tương tác Ngôn ngữ này giúp làm cho các trang web trở nên động và tương tác hơn.
JavaScript là công nghệ quan trọng trong phát triển web, thường kết hợp với HTML và CSS để tạo ra tính năng động và tương tác cho trang web.
JavaScript hoạt động trực tiếp trên trình duyệt của người dùng, cho phép thực hiện các hành động nhanh chóng và mượt mà mà không cần tải lại trang web Điều này cải thiện trải nghiệm người dùng và tối ưu hóa hiệu suất của trang web.
ReactJS
ReactJS là thư viện JavaScript mã nguồn mở, chuyên dùng để xây dựng giao diện người dùng cho các ứng dụng web đơn trang Được phát triển bởi Facebook, ReactJS hiện là một trong những công nghệ phổ biến nhất cho việc phát triển ứng dụng web hiện đại Thư viện này giúp các nhà phát triển tạo ra các trang web tương tác và phản hồi nhanh, từ đó mang lại trải nghiệm người dùng tuyệt vời.
ReactJS nổi bật với khả năng tái sử dụng các thành phần, cho phép giao diện người dùng được chia thành những phần độc lập Mỗi thành phần có khả năng tự quản lý trạng thái riêng, và có thể được gọi và sử dụng bởi các thành phần khác, tạo ra cấu trúc ứng dụng dễ dàng quản lý và bảo trì.
Các thư viện hỗ trợ khác
Bootstrap là một framework giúp xây dựng nhanh chóng các trang web chuyên nghiệp với giao diện thân thiện và khả năng đáp ứng, mà không cần phải viết lại nhiều mã CSS và JavaScript.
Routing trong React được thực hiện thông qua thư viện React Router, cho phép quản lý và điều hướng giữa các trang hoặc thành phần khác nhau trong ứng dụng đơn trang (SPA - Single Page Application).
Bundler CSS: Using Styled Components is a JavaScript library that enables the integration of CSS within JavaScript code in React This approach facilitates the creation of reusable UI components, allowing HTML and CSS to be combined in a single location.
Package Manager: Sử dụng npm (Node Package Manager) - là công cụ giúp quản lý gói (package), quản lý các thư viện, module, và phụ thuộc của dự án
Babel là một thư viện JavaScript mã nguồn mở, giúp biên dịch mã từ các phiên bản mới nhất như ES6, ES7, ES8 về phiên bản cũ hơn như ES5 Điều này cho phép mã JavaScript chạy mượt mà trên các trình duyệt cũ và môi trường không hỗ trợ các tính năng mới.
PHÂN TÍCH HỆ THỐNG
Tổng quan về hệ thống
3.1.1 Giới thiệu chung về ứng dụng
FrameCraft là nền tảng mạng xã hội chuyên chia sẻ hình ảnh, cho phép người dùng dễ dàng tạo, chia sẻ và khám phá các tác phẩm nghệ thuật đa dạng Trang web này không chỉ giúp lan tỏa nội dung mà còn tăng cường khả năng tiếp cận với cộng đồng Bên cạnh đó, người dùng có cơ hội tiếp xúc với nhiều ý tưởng và phong cách khác nhau, từ đó tạo ra nguồn cảm hứng mới cho bản thân.
Một số chức năng nổi bật:
- Đăng nhập, đăng ký, đăng xuất, đổi mật khẩu
- Tạo và chia sẻ hình ảnh
- Tìm kiếm hình ảnh bằng nội dung
- Xem bài đăng của người dùng khác
- Xem hình ảnh đã tạo, xem hình ảnh đã thích
- Tương tác với bài viết thông qua tính năng bình luận
- Tương tác với bài viết thông qua yêu thích
- Xem và chỉnh sửa thông tin cá nhân Đối tượng người dùng chính:
- Người dùng khách: không cần đăng ký/đăng nhập tài khoản có thể thực hiện một số chức năng: tìm kiếm, xem hình ảnh, xem chi tiết hình ảnh
Người dùng hệ thống là những cá nhân đã đăng ký tài khoản, cho phép họ đăng nhập và truy cập đầy đủ tất cả các chức năng của hệ thống.
Dưới đây là bảng thể hiện các chức năng của hệ thống: Đối tượng Chức năng
Người dùng khách ● Đăng ký
● Xem chi tiết bài đăng
Người dùng hệ thống ● Đăng nhập
● Quản lý bài đăng (xem, thêm mới bài đăng)
● Quản lý bình luận (xem, bình luận, sửa, xóa)
● Quản lý thông tin cá nhân (thêm mới, chỉnh sửa, xóa avatar, name, user-name, birthday, description, gender, phone, email)
Bảng 1: Chức năng của hệ thống
3.1.3 Sơ đồ luồng hệ thống
Hình 3: Sơ đồ luồng hệ thống
Phân tích hệ thống
3.2.1 Sơ đồ Use-case tổng quát
Hình 4: Sơ đồ Use-case tổng quát
3.2.2 Mô tả chi tiết Use-case a Use-case Đăng ký
Bảng 2: Chi tiết use-case Đăng ký Actor: Người dùng khách Type: Business use-case
Brief Description: Là người dùng khách, tôi muốn đăng ký tài khoản để sử dụng các chức năng của trang web
Trigger: Người dùng muốn đăng ký tài khoản
Pre-Condition: Người dùng chưa có tài khoản đã tạo trước đó
1 Người dùng truy cập trang web và chọn “Sign up”
2 Hệ thống hiển thị giao diện màn hình trang đăng ký
3 Người dùng chọn phương thức đăng ký tài khoản hệ thống
4 Người dùng nhập các trường thông tin: email, username, phone number, password and confirm your password
5 Người dùng chọn “Sign up”
6 Hệ thống kiểm tra tính hợp lệ của thông tin nhập vào đầy đủ, đúng định dạng
7 Hệ thống chuyển hướng người dùng đến màn hình Mainboard
3a Người dùng chọn tiếp tục với Google/Facebook để tạo tài khoản dựa trên thông tin từ những tài khoản đã có
3b Dịch vụ Google/Facebook xác thực thông tin thành công
3c Hệ thống chuyển hướng người dùng đến màn hình Mainboard
Nếu thông tin người dùng không hợp lệ hoặc bị trùng lặp, hệ thống sẽ hiển thị thông báo lỗi và yêu cầu chỉnh sửa thông tin Đây là một phần quan trọng trong quy trình đăng nhập.
Bảng 3: Chi tiết use-case Đăng nhập Actor: Người dùng hệ thống Type: Business use-case
Brief Description: Là người dùng hệ thống, tôi muốn đăng nhập để sử dụng các dịch vụ và chức năng mà hệ thống cung cấp
Trigger: Người dùng muốn đăng nhập vào hệ thống
Pre-Condition: Người dùng đã đăng ký tài khoản thành công trước đó
1 Người dùng truy cập trang web và chọn “Log in”
2 Hệ thống hiển thị giao diện màn hình trang đăng nhập
3 Người dùng chọn phương thức đăng nhập bằng tài khoản hệ thống
4 Người dùng nhập email và password
5 Người dùng chọn “Log in”
6 Hệ thống kiểm tra thông tin đăng nhập và xác minh tính hợp lệ của tài khoản thành công
7 Hệ thống chuyển hướng người dùng đến màn hình Mainboard
3a Người dùng chọn phương thức đăng nhập bằng Google hoặc Facebook từ giao diện đăng nhập
3b Người dùng cấp quyền truy cập cho ứng dụng để xác thực
3c Dịch vụ Google/Facebook xác thực thông tin đăng nhập thành công
3d Hệ thống chuyển hướng người dùng đến màn hình Mainboard
5a Nếu thông tin đăng nhập không hợp lệ, hệ thống hiển thị thống báo lỗi yêu cầu người dùng nhập lại thông tin chính xác c Use-case Đăng xuất
Bảng 4: Chi tiết use-case Đăng xuất Actor: Người dùng hệ thống Type: Business use-case
Brief Description: Là người dùng hệ thống, muốn đăng xuất tài khoản khỏi ứng dụng
Trigger: Người dùng muốn đăng xuất tài khoản khỏi ứng dụng
Pre-Condition: Người dùng đã đăng nhập vào tài khoản trên hệ thống
1 Người dùng ở trong hệ thống và đã đăng nhập tài khoản
2 Hệ thống hiển thị tùy chọn “Account setting” khi người dùng di chuột vào avatar ở thanh điều hướng
3 Người dùng nhấn “Log out” ở “Account setting” để thực hiện đăng xuất
4 Hệ thống chuyển hướng đến màn hình trang Landing page
Exception Flow d Use-case Đổi mật khẩu
Bảng 5: Chi tiết use-case Đổi mật khẩu Actor: Người dùng hệ thống Type: Business use-case
Brief Description: Là người dùng hệ thống, tôi muốn có thể đổi mật khẩu cho tài khoản của mình
Trigger: Người dùng muốn đổi mật khẩu
Pre-Condition: Người dùng đã đăng nhập vào tài khoản trên hệ thống
1 Hệ thống hiển thị tùy chọn “Account setting” khi người dùng di chuột vào avatar ở thanh điều hướng
2 Người dùng chọn “Change password” ở “Account setting”
3 Hệ thống hiển thị popup “Change password” với các trường nhập thông tin: current password, new password, re-enter new password
4 Người dùng điền thông tin với các trường tương ứng
5 Người dùng nhấn nút “Save” để hoàn thành thay đổi mật khẩu
6 Sau khi thực hiện đổi mật khẩu thành công, hệ thống điều hướng người dùng đến màn hình trang trước đó
5a Nếu người dùng chọn nút “Cancel” hoặc icon “Close”, hệ thống sẽ đóng popup
“Change password” mà không lưu thay đổi
5b Hệ thống xác thực thông tin nhập vào không đúng và hiện thông báo lỗi yêu cầu người dùng nhập lại thông tin e Use-case Tìm kiếm
Bảng 6: Chi tiết use-case Tìm kiếm Actor: Người dùng khách Type: Business use-case
Brief Description: Là người dùng khách, tôi muốn có thể thực hiện tìm kiếm những hình ảnh liên quan đến chủ đề mà tôi muốn tìm kiếm
Trigger: Người dùng muốn tìm kiếm hình ảnh
Pre-Condition: Người dùng đã truy cập vào trang web ứng dụng
1 Người dùng nhập nội dung tìm kiếm hoặc từ khóa liên quan vào ô tìm kiếm ở trang landing page
2 Người dùng nhấn phím "Enter" trên bàn phím
3 Hệ thống tiến hành tìm kiếm hình ảnh dựa trên nội dung, từ khóa mà người dùng đã nhập
4 Hệ thống hiển thị kết quả tìm kiếm là hình ảnh trên mainboard
2a Người dùng có thể nhấn icon tìm kiếm (biểu tượng kính lúp) trên giao diện thay vì sử dụng phím "Enter" để kích hoạt tìm kiếm
Nếu nội dung hoặc từ khóa mà người dùng nhập vào không hợp lệ hoặc không tồn tại trong cơ sở dữ liệu của hệ thống, hệ thống sẽ hiển thị thông báo lỗi cho biết không tìm thấy hình ảnh liên quan.
19 f Use-case Xem thông báo
Bảng 7: Chi tiết use-case Xem thông báo Actor: Người dùng hệ thống Type: Business use-case
Brief Description: Là người dùng hệ thống, tôi muốn nhận thông báo
Trigger: Người dùng muốn xem thông báo
Pre-Condition: Người dùng đã đăng nhập vào tài khoản trên hệ thống
1 Người dùng ở trong hệ thống và đã đăng nhập tài khoản
2 Người dùng chọn vào icon thông báo trên thanh điều hướng
3 Hệ thống hiển thị danh sách các thông báo người người dùng khác tương tác với tài khoản người dùng Các loại thông báo:
- Người dùng khác đã thích ảnh
- Người dùng khác đã bình luận vào ảnh
- Người dùng khác đã nhắc đến bạn trong một bình luận
4 Người dùng xem chi tiết thông báo bằng cách nhấp vào thông báo
5 Hệ thống hiển thị nội dung chi tiết của thông báo cho người dùng
3a Nếu không có thông báo mới, hệ thống hiển thị thông báo cho người dùng biết rằng không có thông báo mới nào g Use-case Xem màn hình Mainboard
Hình 5: Use-case Xem màn hình Mainboard
Bảng 8: Chi tiết use-case Xem màn hình Mainboard
Actor: Người dùng khách Type: Business use-case
Brief Description: Là người dùng, tôi muốn xem các hình ảnh trên màn hình chính Trigger: Người dùng muốn xem các hình ảnh trên màn hình chính
Pre-Condition: Người dùng đã truy cập vào trang web hệ thống
1 Người dùng nhập nội dung tìm kiếm vào ô tìm kiếm
2 Hệ thống chuyển hướng người dùng đến màn hình Mainboard
3 Người dùng xem các bài đăng hình ảnh trên màn hình trang Mainboard
1a Người dùng đăng nhập vào tài khoản của họ trên trang web
Use-case tiếp tục ở bước 2
Bảng 9: Chi tiết use-case Xem chi tiết bài đăng Actor: Người dùng khách Type: Business use-case
Brief Description: Là người dùng khách, tôi muốn xem chi tiết bài đăng hình ảnh để biết thêm thông tin về hình ảnh đó
Trigger: Người dùng muốn xem chi tiết bài đăng
Pre-Condition: Người dùng đã truy cập vào trang web hệ thống
1 Người dùng xem danh sách bài đăng trên màn hình Mainboard
2 Người dùng click vào bài đăng bất kỳ trong danh sách bài đăng mà họ muốn xem chi tiết
3 Hệ thống hiển thị thông tin chi tiết của bài đăng đã chọn, bao gồm hình ảnh, tiêu đề, mô tả, lượt thích, các bình luận
4 Người dùng xem thông tin chi tiết của bài đăng
Exception Flow h Use-case Quản lý bài đăng
Hình 6: Use-case Quản lý bài đăng
Bảng 10: Chi tiết use-case Thêm mới bài đăng Actor: Người dùng hệ thống Type: Business use-case
Brief Description: Là người dùng, tôi muốn tạo mới bài đăng
Trigger: Người dùng muốn thêm mới bài đăng
Pre-Condition: Người dùng đã đăng nhập vào trang web hệ thống
1 Người dùng nhấn vào nút “Create post” ở thanh Header
2 Hệ thống hiển thị màn hình trang tạo bài đăng mới
3 Người dùng tải hình ảnh lên bằng cách chọn tệp từ máy tính khi click vào khung upload ảnh
4 Người dùng nhập các thông tin bài đăng gồm title và description
5 Người dùng nhấn nút “Save” để tạo mới bài đăng
6 Hệ thống kiểm tra tính hợp lệ của nội dung bài đăng
7 Hệ thống lưu thông tin bài đăng vào cơ sở dữ liệu và hiển thị lên giao diện người dùng
4a Người dùng không muốn nhập title hoặc description có thể bỏ qua bước này Use-case tiếp tục ở bước 5
5a Người dùng nhấn “Cancel” để bỏ qua việc tạo mới bài đăng và quay lại màn hình trang trước đó
Nếu không có hình ảnh được tải lên, hệ thống sẽ hiển thị thông báo lỗi và không thực hiện việc tạo mới bài đăng.
Hình 7: Use-case Quản lý bình luận
Bảng 11: Chi tiết use-case Xem bình luận
Actor: Người dùng khách, người dùng hệ thống
Brief Description: Là người dùng, tôi muốn xem bình luận về ảnh cụ thể
Trigger: Người dùng muốn xem bình luận của hình ảnh cụ thể
Pre-Condition: Người dùng đã truy cập vào màn hình trang Mainboard
1 Người dùng đang ở trang Mainboard
2 Người dùng nhấn vào hình ảnh cụ thể muốn xem bình luận
3 Hệ thống mở ra trang xem chi tiết bài đăng và hiển thị thông tin: hình ảnh, tiêu đề và mô tả, người đăng (name và username), số lượt thích và lượt bình luận
4 Người dùng xem các bình luận hiển thị trong trang chi tiết bài đăng
Bảng 12: Chi tiết use-case Thêm bình luận Actor: Người dùng hệ thống Type: Business use-case
Brief Description: Là người dùng, tôi muốn thêm bình luận về ảnh cụ thể
Trigger: Người dùng muốn bình luận vào hình ảnh
Pre-Condition: Người dùng đã xem chi tiết bài đăng và các bình luận liên quan đến hình ảnh
1 Người dùng đang ở trang xem chi tiết bài đăng
2 Người dùng nhập nội dung bình luận vào ô bình luận
3 Người dùng nhấn "Enter" trên bàn phím để thêm bình luận mới
4 Hệ thống thêm bình luận mới vào danh sách các bình luận và hiển thị bình luận mới ngay bên dưới bình luận gần nhất
Bảng 13: Chi tiết use-case Chỉnh sửa bình luận Actor: Người dùng hệ thống Type: Business use-case
Brief Description: Là người dùng, tôi muốn chỉnh sửa bình luận đã tạo
Trigger: Người dùng muốn chỉnh sửa bình luận
Pre-Condition: Người dùng đã thêm bình luận vào bài đăng và đang xem chi tiết bài đăng đó
1 Người dùng đang ở trang xem chi tiết bài đăng
2 Người dùng xác định bình luận mà họ muốn chỉnh sửa
3 Người dùng nhấn vào icon tùy chọn và chọn "Edit"
4 Hệ thống mở giao diện chỉnh sửa bình luận cho người dùng
5 Người dùng tiến hành chỉnh sửa nội dung bình luận
6 Người dùng nhấn nút "Save” để cập nhật nội dung đã chỉnh sửa
7 Hệ thống cập nhật nội dung bình luận mới trên giao diện
Bảng 14: Chi tiết use-case Xóa bình luận Actor: Người dùng hệ thống Type: Business use-case
Brief Description: Là người dùng, tôi muốn xóa bình luận đã tạo
Trigger: Người dùng muốn xóa bình luận
Pre-Condition: Người dùng đã thêm bình luận vào bài đăng và đang xem chi tiết bài đăng đó
1 Người dùng đang ở trang xem chi tiết bài đăng
2 Người dùng xác định bình luận mà họ muốn xóa
3 Người dùng nhấn vào biểu tượng tùy chọn và chọn "Delete"
4 Hệ thống xóa bình luận khỏi danh sách bình luận và cập nhật lại trang hiển thị
Exception Flow j Use-case Quản lý thông tin cá nhân
Hình 8: Use-case Quản lý thông tin cá nhân
Bảng 15: Chi tiết use-case Xem thông tin cá nhân Actor: Người dùng hệ thống Type: Business use-case
Brief Description: Là người dùng hệ thống, tôi muốn xem chi tiết thông tin cá nhân tài khoản của mình
Trigger: Người dùng muốn xem thông tin cá nhân
Pre-Condition: Người dùng đã đăng nhập vào tài khoản trên hệ thống
1 Người dùng di chuột vào avatar của họ trên thanh header
2 Hệ thống hiển thị danh sách các tùy chọn, người dùng chọn "Account information"
3 Hệ thống mở popup hiển thị thông tin cá nhân cho người dùng
4 Người dùng xem thông tin cá nhân của mình trong popup
Bảng 16: Chi tiết use-case Chỉnh sửa thông tin cá nhân Actor: Người dùng hệ thống Type: Business use-case
Brief Description: Là người dùng hệ thống, tôi muốn chỉnh sửa thông tin cá nhân tài khoản của mình
Trigger: Người dùng muốn chỉnh sửa thông tin cá nhân
Pre-Condition: Người dùng đã đăng nhập vào tài khoản trên hệ thống
1 Người dùng di chuột vào avatar của họ trên thanh header
2 Hệ thống hiển thị danh sách các tùy chọn, người dùng chọn "Account information"
3 Hệ thống mở popup hiển thị thông tin cá nhân cho người dùng
4 Người dùng thực hiện chỉnh sửa:
- Edit avatar bằng cách tải lên hình ảnh từ máy tính
- Edit name, username, description, phone, email, birthday bằng cách nhập nội dung mới vào các ô input tương ứng
- Edit gender bằng cách chọn từ dropdown
5 Người dùng nhấn "Save" để cập nhật thông tin đã chỉnh sửa
6 Hệ thống kiểm tra tính hợp lệ của thông tin cá nhân thành công
7 Hệ thống cập nhật thông tin cá nhân của người dùng và hiển thị thông báo thành công
5a Người dùng không muốn lưu các chỉnh sửa và quay lại trạng thái ban đầu, chọn nút “Cancel” hoặc biểu tượng hủy để thoát
6a Nếu thông tin cá nhân mới không hợp lệ, hệ thống hiện thông báo lỗi yêu cầu người dùng chỉnh sửa
THIẾT KẾ & ĐẶC TẢ GIAO DIỆN
Sơ đồ màn hình
Hình 9: Sơ đồ màn hình
Các giao diện trên màn hình Website
Hình 10: Màn hình trang Landing page
29 Hình 11: Màn hình trang Log in
Hình 12: Màn hình trang Sign up
30 Hình 13: Màn hình trang Mainboard
Hình 14: Màn hình trang Create post
Hình 15: Màn hình trang View detail post
Hình 16: Popup Account information và Change password
XÂY DỰNG HỆ THỐNG
Công cụ hỗ trợ và phần mềm sử dụng
- Trình duyệt web: Microsoft Edge và Google Chrome
- Code editor: Visual Studio Code
- Github: lưu trữ mã nguồn và quản lý dự án
- Node.js và npm (Node Package Manager): cho phép có thể sử dụng thư viện React (trong phạm vi dự án)
+ Node.js là một môi trường chạy mã JavaScript phía máy chủ + npm là một trình quản lý gói phổ biến cho JavaScript
- React: thư viện JavaScript phổ biến để xây dựng giao diện người dùng (UI)
- Thiết kế giao diện và trải nghiệm người dùng (UI, UX): phần mềm Figma
- React Router: để quản lý và điều hướng giữa các trang hoặc thành phần khác nhau trong một ứng dụng đơn trang (SPA - Single Page Application)
- Styled Components: viết mã CSS bên trong mã JavaScript trong React.
Kết quả
• Link Design Figma: FrameCraft Design UI/UX
• Link Source Code Github: FrameCraft Source Code GitHub
- Ứng dụng những kiến thức được học về Javascript và ReactJS để ứng dụng vào dự án cá nhân, xây dựng được phần giao diện cho trang web
- Đạt được khoảng hơn 80% mục tiêu dự án ban đầu
- Chưa xây dựng được trang chỉnh sửa và xóa bài đăng
- Chưa xử lý logic nhiều trong dự án
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Đạt được
- Củng cố kiến thức cơ bản về HTML, CSS Bên cạnh đó, học thêm về Javascript, React và áp dụng vào dự án thực tập
- Phát triển khả năng tự học và khả năng giải quyết vấn đề
- Có định hướng tốt và rõ ràng về vị trí công việc
- Hiểu rõ hơn về cách làm việc trong môi trường doanh nghiệp
Trong các khóa đào tạo của công ty, nhân viên được trang bị những kỹ năng mềm quan trọng như kỹ năng thuyết trình, kiến thức về an toàn bảo mật, kỹ năng viết email, kỹ năng giao tiếp và khả năng làm việc hiệu quả trong môi trường doanh nghiệp.
- Khả năng thực hiện dự án vẫn còn hạn chế và cần được nâng cao
- Việc tiếp cận tài liệu bằng tiếng Anh vẫn còn nhiều khó khan
- Chưa hoàn toàn chủ động hoàn toàn trong công việc
• Kế hoạch dự kiến để phát triển năng lực cá nhân
- Củng cố kiến thức hiện có, đồng thời tìm hiểu và học thêm 1 ngôn ngữ về lập trình back-end
Vì thời gian thực tập và năng lực của bản thân còn hạn chế, em chỉ có thể nắm bắt những kiến thức cơ bản và chưa thể tìm hiểu các chức năng nâng cao Tuy nhiên, em sẽ nỗ lực cải thiện và hoàn thiện kỹ năng của mình trong tương lai.
• Kế hoạch dự kiến để hoàn thiện project
- Hoàn thành các chức năng cũ, học cách viết code logic, rõ ràng, dễ đọc và thông minh hơn
Để hoàn thiện dự án, trước tiên cần phát triển chức năng thêm, sửa, xóa ở phía back-end Đồng thời, hãy tìm hiểu và tham khảo nhiều tài liệu cùng trang web khác để bổ sung thêm các chức năng mới cho dự án.