Wireframing, Mockup và Prototype: Các Khái Niệm Cơ Bản trong Thiết Kế UI/UX

Chuyên khảo môi trường phân tích Công cụ và môi trường phát triển phần mềm, đánh giá các khía cạnh quan trọng, đề xuất hướng nghiên cứu tiếp theo.

• Trường học: Hutech University
• Chuyên ngành: Thiết Kế UI/UX
• Đề tài: Hướng Dẫn Wireframing, Mockup và Prototype trong Thiết Kế UI/UX
• Loại tài liệu: hướng dẫn
• Năm xuất bản: 2025
• Địa điểm: Thành phố Hồ Chí Minh

Mục lục chi tiết

• 1. BÀI 1: WIRE-FRAMING, MOCKUP VÀ PROTOTYPE
• 1.1. Khái niệm cơ bản
• 1.1.1. Wireframing, mockup và prototype
• 1.1.2. Tại sao dùng wireframing
• 1.1.3. Các công cụ wireframing
• 1.2. Giới thiệu Balsamiq Wireframes
• 1.2.1. Cài đặt Balsamiq trên máy tính
• 1.2.2. Giao diện Balsamiq
• 1.3. UI Library và các thành phần
• 1.4. Ví dụ về website cho công ty
• 2. BÀI 2: DEVTOOLS
• 2.1. Khung Chrome Developer Tool
• 2.1.1. Khung Elements
• 2.1.2. Khung Resources
• 2.1.3. Khung Network
• 2.1.4. Khung Console
• 2.2. Phím tắt trong Chrome Dev Tools
• 3. BÀI 3: LÝ PHIÊN (VERSION CONTROL SYSTEM - VCS)
• 3.1. Hệ thống quản lý phiên bản cơ bản
• 3.2. Hệ thống quản lý phiên bản tập trung
• 3.3. Hệ thống quản lý phiên bản phân tán
• 3.4. Lịch sử của Git
• 3.5. Bản vẽ Git
• 3.6. Các trạng thái trong Git
• 3.7. Cài đặt Git
• 3.7.1. Cài đặt trên Linux
• 3.7.2. Cài đặt trên Mac
• 3.7.3. Cài đặt trên Windows
• 3.8. Cấu hình Git
• 3.9. Trình soạn thảo và công cụ so sánh
• 3.10. Trợ giúp Git
• 4. BÀI 4: CÔNG CỤ QUẢN LÝ DỰ ÁN PHỔ BIẾN
• 4.1. Trello
• 4.2. Microsoft Project
• 4.3. Basecamp
• 4.4. Jira

Tóm tắt

I. Hướng Dẫn Wireframing Mockup và Prototype trong Thiết Kế UI UX

Wireframing, mockup và prototype là ba bước quan trọng trong quy trình thiết kế UI/UX. Chúng giúp các nhà thiết kế hình dung và phát triển giao diện người dùng một cách hiệu quả. Mỗi bước có vai trò riêng, từ việc tạo ra khung cơ bản cho đến việc mô phỏng trải nghiệm người dùng thực tế. Việc hiểu rõ từng giai đoạn sẽ giúp tối ưu hóa quy trình thiết kế và nâng cao chất lượng sản phẩm cuối cùng.

1.1. Khái Niệm Wireframing Mockup và Prototype

Wireframing là bước đầu tiên trong quy trình thiết kế, nơi mà các nhà thiết kế tạo ra các khung cơ bản cho giao diện. Mockup là phiên bản chi tiết hơn của wireframe, thể hiện rõ ràng các yếu tố thiết kế. Prototype là mô hình tương tác, cho phép người dùng trải nghiệm giao diện như một sản phẩm thực tế.

1.2. Tại Sao Cần Sử Dụng Wireframing và Mockup

Sử dụng wireframing và mockup giúp tiết kiệm thời gian và chi phí trong quá trình phát triển. Chúng cho phép các nhà thiết kế và khách hàng có cái nhìn rõ ràng về sản phẩm trước khi bắt đầu lập trình. Điều này giúp giảm thiểu rủi ro và đảm bảo rằng sản phẩm cuối cùng đáp ứng được nhu cầu của người dùng.

II. Vấn Đề và Thách Thức Trong Thiết Kế UI UX

Trong quá trình thiết kế UI/UX, có nhiều thách thức mà các nhà thiết kế phải đối mặt. Những vấn đề này có thể bao gồm việc hiểu rõ nhu cầu của người dùng, tạo ra trải nghiệm mượt mà và đảm bảo tính khả thi của sản phẩm. Việc không giải quyết tốt những vấn đề này có thể dẫn đến sản phẩm không đạt yêu cầu và không được người dùng chấp nhận.

2.1. Khó Khăn Trong Việc Hiểu Nhu Cầu Người Dùng

Một trong những thách thức lớn nhất là xác định chính xác nhu cầu và mong muốn của người dùng. Việc này đòi hỏi các nhà thiết kế phải thực hiện nghiên cứu thị trường và thu thập phản hồi từ người dùng để có thể tạo ra sản phẩm phù hợp.

2.2. Tạo Ra Trải Nghiệm Người Dùng Tốt Nhất

Thiết kế một trải nghiệm người dùng tốt không chỉ đơn thuần là về mặt thẩm mỹ. Nó còn liên quan đến việc tối ưu hóa quy trình tương tác và đảm bảo rằng người dùng có thể dễ dàng sử dụng sản phẩm mà không gặp khó khăn.

III. Phương Pháp Wireframing Hiệu Quả Trong Thiết Kế UI UX

Để tạo ra wireframe hiệu quả, các nhà thiết kế cần áp dụng một số phương pháp và công cụ nhất định. Việc sử dụng các công cụ wireframe như Balsamiq, Axure hay Figma có thể giúp đơn giản hóa quy trình thiết kế. Ngoài ra, việc thường xuyên nhận phản hồi từ nhóm phát triển và người dùng cũng rất quan trọng.

3.1. Sử Dụng Công Cụ Wireframe Phù Hợp

Các công cụ như Balsamiq và Axure cung cấp nhiều tính năng hữu ích cho việc tạo wireframe. Chúng cho phép các nhà thiết kế dễ dàng tạo ra các khung giao diện và chia sẻ với nhóm phát triển để nhận phản hồi kịp thời.

3.2. Nhận Phản Hồi Từ Người Dùng

Việc thu thập phản hồi từ người dùng trong giai đoạn wireframing là rất quan trọng. Điều này giúp các nhà thiết kế điều chỉnh và cải thiện sản phẩm trước khi tiến hành phát triển.

IV. Ứng Dụng Thực Tiễn Của Wireframing Mockup và Prototype

Wireframing, mockup và prototype không chỉ là lý thuyết mà còn có ứng dụng thực tiễn trong nhiều dự án thiết kế. Chúng giúp các nhóm phát triển tiết kiệm thời gian và chi phí, đồng thời nâng cao chất lượng sản phẩm. Nhiều công ty đã áp dụng thành công quy trình này để cải thiện trải nghiệm người dùng.

4.1. Ví Dụ Về Ứng Dụng Wireframing Trong Dự Án Thực Tế

Nhiều công ty công nghệ lớn đã sử dụng wireframing để phát triển sản phẩm của họ. Ví dụ, Google và Facebook thường xuyên sử dụng wireframe để thử nghiệm các ý tưởng mới trước khi triển khai.

4.2. Kết Quả Nghiên Cứu Về Hiệu Quả Của Wireframing

Nghiên cứu cho thấy rằng việc sử dụng wireframing có thể giảm thiểu thời gian phát triển sản phẩm lên đến 30%. Điều này chứng tỏ rằng wireframing là một bước quan trọng trong quy trình thiết kế.

V. Kết Luận và Tương Lai Của Thiết Kế UI UX

Thiết kế UI/UX đang ngày càng trở nên quan trọng trong việc phát triển sản phẩm. Wireframing, mockup và prototype sẽ tiếp tục đóng vai trò quan trọng trong quy trình này. Các nhà thiết kế cần không ngừng cập nhật kiến thức và công nghệ mới để đáp ứng nhu cầu ngày càng cao của người dùng.

5.1. Tương Lai Của Wireframing Trong Thiết Kế

Với sự phát triển của công nghệ, wireframing sẽ ngày càng trở nên linh hoạt và hiệu quả hơn. Các công cụ mới sẽ giúp các nhà thiết kế tạo ra wireframe một cách nhanh chóng và dễ dàng.

5.2. Tầm Quan Trọng Của Thiết Kế UI UX Trong Kinh Doanh

Thiết kế UI/UX không chỉ ảnh hưởng đến trải nghiệm người dùng mà còn tác động đến doanh thu của công ty. Một sản phẩm có thiết kế tốt sẽ thu hút được nhiều khách hàng hơn và giữ chân họ lâu hơn.

Nội dung chính

TỔNG QUAN HỌC THUẬT VÀ BÁO CÁO THƯ MỤC: GIÁO TRÌNH CÔNG CỤ VÀ MÔI TRƯỜNG PHÁT TRIỂN PHẦN MỀM (MÃ HỌC PHẦN: CMP186)

---

Tổng quan về giáo trình (250-300 từ)

Giáo trình Công cụ và Môi trường Phát triển Phần mềm (Mã học phần: CMP186) là tài liệu giảng dạy học phần thuộc chương trình đào tạo đại học ngành Công nghệ Thông tin tại Trường Đại học Công nghệ TP.HCM (HUTECH). Học phần giữ vị trí nền tảng thực hành kỹ thuật, cung cấp cho sinh viên hệ thống công cụ hỗ trợ quy trình kỹ nghệ phần mềm từ giai đoạn phác thảo giao diện, phát triển và gỡ lỗi mã nguồn, quản lý phiên bản, điều phối dự án cho đến triển khai trên hạ tầng điện toán đám mây.

Mục tiêu học tập của giáo trình được xác định rõ qua các chuẩn đầu ra:

• Phân biệt và ứng dụng thành thạo các cấp độ thiết kế giao diện người dùng: Wireframing, Mockup và Prototype bằng công cụ chuyên dụng.
• Sử dụng thành thạo bộ công cụ kiểm tra và gỡ lỗi trên trình duyệt (Developer Tools) phục vụ phát triển ứng dụng web.
• Nắm vững nguyên lý và thao tác dòng lệnh của hệ thống quản lý phiên bản phân tán (DVCS) với Git.
• Hiểu và vận hành các quy trình theo dõi lỗi (issue tracking) và quản trị dự án phần mềm trên các nền tảng công nghiệp, tiêu biểu là Jira và Trello.
• Tiếp cận khái niệm cơ bản về kiến trúc vi dịch vụ (Microservices), phân phối liên tục (Continuous Delivery) và các mô hình dịch vụ đám mây (PaaS, IaaS).

Cấu trúc giáo trình được tiếp cận theo hướng mô-đun hóa kết hợp thực hành công cụ (tool-driven approach). Nội dung đi theo trình tự logic của một vòng đời phát triển phần mềm tiêu chuẩn: từ ý tưởng thiết kế giao diện bên ngoài đến tối ưu mã nguồn bên trong và quy trình vận hành nhóm. Điểm đặc thù của tài liệu là việc chuẩn hóa các thao tác kỹ thuật qua hệ thống phím tắt, giao diện dòng lệnh (CLI), cấu hình hệ thống chi tiết trên các nền tảng hệ điều hành phổ biến (Windows, macOS, Linux), đi kèm hệ thống bài tập tình huống thực tế.

---

Nội dung kiến thức cốt lõi (500-600 từ)

Các chương và chủ đề chính

Nội dung giáo trình được cấu trúc thành 5 bài học trọng tâm:

CMP186: Công cụ và Môi trường Phát triển Phần mềm
 ├── Bài 1: Thiết kế giao diện UI/UX (Wireframe, Mockup, Prototype & Balsamiq)
 ├── Bài 2: Công cụ gỡ lỗi và kiểm tra mã nguồn (Google Chrome DevTools)
 ├── Bài 3: Hệ thống quản lý phiên bản phân tán (VCS Architecture & Git CLI)
 ├── Bài 4: Nền tảng quản lý dự án và theo dõi tiến độ (Jira, Trello, MS Project, Basecamp)
 └── Bài 5: Tổng quan hạ tầng điện toán đám mây (PaaS, IaaS, CD & Microservices)

• Bài 1: Thiết kế UI/UX – Wireframing, Mockup và Prototype: Giới thiệu khái niệm và ranh giới kỹ thuật giữa ba cấp độ thiết kế. Hướng dẫn cài đặt và sử dụng phần mềm Balsamiq Wireframes trên môi trường Adobe Air 2.6 (hỗ trợ Windows 7 SP2+, macOS 10.12+). Phân tích cấu trúc 4 phân vùng giao diện của Balsamiq: Navigator, UI Library, Inspector và Wireframe Area. Khai thác 13 nhóm thành phần giao diện trong UI Library (All, Assets, Big, Buttons, Common, Containers, Forms, Icons, iOS, Layout, Markup, Media, Symbols, Text). Thực hành thiết kế bộ khung wireframe hoàn chỉnh cho một website doanh nghiệp gồm 4 trang: Home, Products and Services, About Us, Contact Us, và xuất bản ra định dạng PDF/PNG.
• Bài 2: Khai thác Google Chrome Developer Tools (DevTools): Hướng dẫn cấu trúc 8 khung panel chuyên dụng (Elements, Resources, Network, Source, Timeline, Profile, Audits, Console). Tập trung vào kỹ thuật kiểm tra và chỉnh sửa động mã HTML/CSS qua panel Elements; quản lý dữ liệu lưu trữ phía client (Cookies, Local Storage, tài nguyên file) qua panel Resources; phân tích lưu lượng mạng, mã trạng thái HTTP và thời gian phản hồi máy chủ qua panel Network; ghi log và thực thi kịch bản JavaScript tức thời qua panel Console. Bảng phím tắt chuẩn hóa thao tác trên Windows/Linux và macOS.
• Bài 3: Hệ thống quản lý phiên bản (Version Control System - VCS) và Git: Phân tích sự tiến hóa kiến trúc từ VCS cục bộ (rcs), VCS tập trung (CVS, Subversion, Perforce) đến VCS phân tán (Git). Trình bày lịch sử hình thành Git do Linus Torvalds phát triển từ năm 2005 để quản lý nhân Linux. Cơ chế hoạt động của Git dựa trên "ảnh chụp trạng thái" (Snapshot) thay vì danh sách vi sai (Delta), đảm bảo tính toàn vẹn bằng hàm băm mật mã SHA-1 (chuỗi 40 ký tự thập lục phân). 3 trạng thái tệp tin (Committed, Modified, Staged) tương ứng 3 vùng làm việc (Working Directory, Staging Area/Index, Git Directory). Hướng dẫn cài đặt từ mã nguồn (make, make install) và trình quản lý gói (yum, apt-get, msysGit, MacPorts). Cấu hình 3 cấp độ (--system, --global, local .git/config) cho định danh người dùng (user.name, user.email), trình biên soạn (core.editor), công cụ so khớp trộn nhánh (merge.tool như vimdiff, kdiff3), cùng các lệnh tra cứu tài liệu trợ giúp (git help, man git).
• Bài 4: Công cụ quản lý dự án phần mềm: Khảo sát các công cụ quản trị phổ biến gồm Trello, Microsoft Project, Basecamp và Jira. Đi sâu vào cấu trúc vận hành của Jira: khái niệm JIRA Project, Project Key, Project Component, Project Version (Affected Version, Fix Version), Workflow (trạng thái và bước chuyển đổi). Quy trình khởi tạo và quản lý Issue với các trường dữ liệu tiêu chuẩn: Project, Issue Type (Bug, New Feature, Task, Improvement, Story, Epic trong Agile), Summary, Priority, Component, Assignee, Description, Attachment.
• Bài 5: Điện toán đám mây và môi trường triển khai: Tổng quan về các mô hình dịch vụ đám mây Platform as a Service (PaaS) và Infrastructure as a Service (IaaS). Khái niệm thay thế máy ảo truyền thống (Replacing Virtual Machine), hỗ trợ kiến trúc vi dịch vụ (Enabling a microservices architecture), giảm thiểu phụ phí gỡ lỗi (Reducing debugging overhead), và quy trình phân phối liên tục (Continuous Delivery - CD).

Cấp độ thiết kế UI/UX	Mức độ trung thực	Mục đích sử dụng	Công cụ tiêu biểu
Wireframe	Thấp	Phác họa bố cục, trao đổi ý tưởng nhanh, thể hiện cấu trúc khung	Axure, UxPin, Balsamiq, Proto.io
Mockup	Trung bình	Trực quan hóa màu sắc, kiểu chữ, đồ họa chi tiết, trình bày khách hàng	Sketch, Photoshop, Illustrator, Adobe XD
Prototype	Cao	Tương tác luồng trải nghiệm (UX flow), mô phỏng animation, thử nghiệm người dùng	HTML/CSS/JS, SketchUp, Adobe XD

Kiến thức nền tảng được xây dựng

• Nguyên lý thiết kế giao diện và tương tác: Cung cấp cơ sở lý thuyết về việc chuyển hóa yêu cầu nghiệp vụ từ dạng văn bản thành các mô hình trực quan thông qua sự phối hợp của ba vai trò: Chuyên viên phân tích nghiệp vụ (Business Analyst), Nhà thiết kế giao diện (User Interface Designer) và Nhà thiết kế tương tác (Interaction Designer).
• Nguyên lý quản lý phiên bản phân tán: Xác lập nền tảng về tính bất biến của dữ liệu, cơ chế lưu trữ snapshot, mô hình phân nhánh phi tuyến tính (non-linear development), và bảo mật toàn vẹn thông tin qua mã băm SHA-1.
• Quy trình quản lý dự án phần mềm theo Agile: Xây dựng nền tảng quản trị yêu cầu dưới dạng Epic và User Story, chuẩn hóa quy trình chuyển đổi trạng thái của công việc (Lifecycle Workflow) và phân loại issue.

Kỹ năng phát triển

• Kỹ năng kỹ thuật (Technical Skills): Thao tác thành thạo bộ công cụ dòng lệnh Git CLI, thiết lập môi trường cấu hình hệ thống, kiểm soát DOM/CSS/Network qua DevTools, tạo lập sơ đồ giao diện trên phần mềm chuyên dụng.
• Kỹ năng phân tích (Analytical Skills): Phân tích cấu trúc trang web, định vị lỗi phát sinh trên console, phân tích gói tin mạng và độ trễ phản hồi máy chủ, phân rã công việc trong dự án phần mềm thành các component và issue có thể đo lường.
• Kỹ năng thực hành quy trình (Practical Competencies): Vận hành quy trình làm việc nhóm đồng bộ thông qua kho mã nguồn phân tán, báo cáo tiến độ và phân chia công việc minh bạch trên Jira và Trello.

---

Phương pháp giảng dạy và học tập (300-350 từ)

Phương pháp tiếp cận sư phạm

Giáo trình áp dụng mô hình giảng dạy kết hợp giữa trang bị cơ sở lý thuyết hệ thống và thực hành công cụ trực tiếp (Hands-on Practice). Mỗi bài học đều mở đầu bằng bối cảnh xuất hiện của vấn đề công nghệ, phân tích ưu nhược điểm của các giải pháp qua từng thời kỳ, sau đó đi thẳng vào hướng dẫn cài đặt, cấu hình tham số kỹ thuật và thực thi trên các kịch bản mẫu.

[Bối cảnh & Vấn đề kỹ thuật] 
       │
       ▼
[Lý thuyết nền tảng & So sánh giải pháp] 
       │
       ▼
[Cài đặt & Cấu hình môi trường đa nền tảng] 
       │
       ▼
[Thực hành Case Study & Thao tác công cụ] 
       │
       ▼
[Tổng kết, Câu hỏi ôn tập & Đánh giá đồ án]

Bài tập và tình huống thực hành

Hệ thống bài tập trong giáo trình được thiết kế bám sát các tác vụ thực tế của một kỹ sư phần mềm:

• Tình huống Bài 1: Xây dựng hoàn chỉnh hồ sơ wireframe cho 4 trang chính của một website công ty trên Balsamiq Wireframes, xuất tệp và so sánh tính chất giữa wireframe, mockup và prototype.
• Tình huống Bài 2: Thao tác thay đổi màu sắc phần tử trực tiếp trên cây DOM, xử lý lưu vết console log khi tải lại trang, tra cứu nhanh tài nguyên JavaScript trên DevTools.
• Tình huống Bài 3: Thiết lập danh tính người dùng toàn cục trên Git, giải quyết xung đột mã nguồn qua các công cụ so khớp (merge tool), cấu hình tệp .gitconfig.
• Tình huống Bài 4: Khởi tạo project trên Jira, tạo và phân loại các issue theo chuẩn Bug, Task, Story, gán quyền thực thi và thiết lập mức độ ưu tiên (Priority), quản lý phiên bản phát hành (Affected/Fix Version).

Phương pháp đánh giá kết quả học tập

Quy chế đánh giá học phần CMP186 được chia thành hai cấu phần với trọng số đồng đều:

• Đánh giá quá trình (50%): Căn cứ trên mức độ hoàn thành bài tập về nhà, bài tập thực hành trên lớp, trả lời câu hỏi ôn tập cuối bài do giảng viên phụ trách học phần trực tiếp theo dõi và phê duyệt.
• Đánh giá kết thúc học phần (50%): Thực hiện đồ án môn học tổng hợp và tham gia thi/bảo vệ trực tiếp trên nội dung đồ án. Danh sách đề tài đồ án được giảng viên chuyên trách công bố vào đầu khóa học.

Hướng dẫn tự học

Giáo trình yêu cầu sinh viên tóm tắt các khái niệm cốt lõi sau mỗi buổi học, hoàn thành 100% câu hỏi ôn tập cuối chương, chủ động tra cứu hệ thống tài liệu tích hợp trên dòng lệnh (git help <verb>, git <verb> --help, man git-<verb>), đồng thời tìm hiểu mở rộng các công cụ cùng phân loại trong công nghiệp như Subversion (SVN), Team Foundation Server (TFS), Axure, Sketch, và Adobe XD.

---

Điểm nổi bật và tính ứng dụng thực tế (250-300 từ)

Giáo trình sở hữu các đặc điểm cập nhật và tính ứng dụng công nghiệp rõ nét:

• Chuẩn hóa công cụ công nghiệp: Giáo trình không sử dụng các công cụ mô phỏng học thuật mà đưa trực tiếp các phần mềm tiêu chuẩn đang được doanh nghiệp sử dụng vào giảng dạy (Balsamiq, Google Chrome DevTools, Git, Jira, Trello, Microsoft Project, Basecamp).
• Phản ánh sự chuyển dịch công nghệ: Nội dung phân tích chi tiết sự chuyển dịch từ các hệ thống quản lý phiên bản tập trung (CVCS) vốn có điểm nghẽn nghiêm trọng về máy chủ trung tâm sang hệ thống phân tán (DVCS) với hiệu năng xử lý cục bộ vượt trội và tính toàn vẹn cao.
• Tương thích đa môi trường: Mọi hướng dẫn cài đặt và thao tác phím tắt đều được tài liệu trình bày song song trên ba hệ điều hành phổ biến nhất hiện nay: Windows, macOS và các bản phân phối Linux (Debian/Ubuntu, Fedora), giúp người học làm quen với môi trường đa nền tảng.
• Gắn kết quy trình phát triển hiện đại: Cung cấp kiến thức về quản lý dự án theo khung làm việc Agile (qua khái niệm Epic, Story trên Jira), đồng thời giới thiệu định hướng về phân phối liên tục (Continuous Delivery), kiến trúc vi dịch vụ (Microservices) và điện toán đám mây (PaaS, IaaS).

---

Đối tượng sử dụng giáo trình (200-250 từ)

• Sinh viên đại học: Tài liệu được biên soạn phục vụ trực tiếp cho sinh viên các ngành Công nghệ Thông tin, Kỹ thuật Phần mềm, Hệ thống Thông tin đang theo học học phần CMP186 hoặc các môn học liên quan đến quy trình và công cụ phát triển phần mềm.
• Điều kiện tiên quyết (Prerequisites): Người học cần có kiến thức cơ bản về lập trình, hiểu biết tổng quan về cấu trúc website (HTML/CSS), kỹ năng thao tác máy tính cơ bản và sử dụng các dịch vụ Internet.
• Giảng viên chuyên ngành: Sử dụng tài liệu làm khung đề cương bài giảng, thiết kế bài tập thực hành trên phòng máy và xây dựng ngân hàng đề tài đồ án môn học.
• Lập trình viên và người tự học: Tài liệu đóng vai trò là cẩm nang tra cứu kỹ thuật về các phím tắt Chrome DevTools, bảng mã lệnh Git CLI, các bước cấu hình hệ thống và phương pháp quản trị issue trên Jira cho các kỹ sư mới tham gia vào các dự án phần mềm thực tế.

---

Câu hỏi thường gặp (250-300 từ)

1. Giáo trình này phù hợp với ai?

Tài liệu phù hợp với sinh viên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm cần chuẩn hóa kỹ năng sử dụng công cụ phát triển, cũng như các lập trình viên mới bắt đầu, chuyên viên phân tích nghiệp vụ (BA) cần nắm vững quy trình thiết kế wireframe và quản trị dự án.

2. Cần kiến thức nền nào trước khi học?

Sinh viên cần nắm vững thao tác máy tính cơ bản, có kiến thức nền tảng về lập trình, hiểu biết cơ bản về cấu trúc mã nguồn web (HTML, CSS, JavaScript) và kết nối mạng Internet.

3. Điểm khác biệt cốt lõi giữa Git và các hệ thống VCS tập trung (như SVN, CVS) trong giáo trình là gì?

Git quản lý dữ liệu dưới dạng các "ảnh chụp trạng thái" (Snapshot) toàn bộ dự án thay vì lưu vết danh sách các thay đổi vi sai (Delta-based). Mọi thao tác commit, xem lịch sử đều diễn ra cục bộ mà không phụ thuộc vào kết nối mạng, đồng thời dữ liệu được bảo đảm toàn vẹn thông qua mã băm SHA-1.

4. Phương pháp đánh giá kết quả học tập của học phần được tính như thế nào?

Học phần CMP186 được đánh giá qua hai cột điểm: Điểm quá trình chiếm 50% (bài tập, câu hỏi ôn tập, bài thực hành) và Điểm thi kết thúc học phần chiếm 50% (thực hiện và bảo vệ đồ án môn học).

5. Những vai trò nghề nghiệp nào tham gia vào quy trình thiết kế Wireframe theo tài liệu?

Tài liệu chỉ rõ ba vai trò chính sử dụng và làm việc trên wireframe gồm: Chuyên viên phân tích nghiệp vụ (Business Analyst), Nhà thiết kế giao diện (User Interface Designer) và Nhà thiết kế tương tác (Interaction Designer).

---

Kết luận (150 từ)

Giáo trình Công cụ và Môi trường Phát triển Phần mềm (CMP186) cung cấp khung tri thức thực hành hoàn chỉnh, gắn liền lý thuyết nền tảng với các công cụ công nghiệp tiêu chuẩn. Lộ trình học tập được thiết kế mạch lạc: khởi đầu từ việc mô hình hóa ý tưởng giao diện (Balsamiq), tiến hành gỡ lỗi và kiểm thử mã nguồn (Chrome DevTools), quản lý lịch sử phiên bản phân tán (Git), điều phối quy trình làm việc nhóm và theo dõi lỗi (Jira, Trello), đến tiếp cận các kiến trúc triển khai hiện đại (Cloud, PaaS, IaaS, Microservices). Tài liệu khuyến khích người học kết hợp nghiên cứu các hệ thống trợ giúp nội trang (git help), tài liệu hướng dẫn kỹ thuật của Atlassian Jira và Google Developer Tools để mở rộng năng lực thực hành nghề nghiệp.

Trích đoạn nội dung tài liệu

CMP186* - : tailieuhoctap@hutech.1 Wireframing, mockup và prototype .1 (PaaS) Platform as a Service .2 (IaaS) Infrastructure as a Service .1 Replacing Virtual Machine .4 Enabling a microservices architecture .6 Reducing debugging overhead .7 Enabing continuous delivery (CD). 80 IV MÔ MÔN Công và môi phát là trong môn cung có có nguyên và cho phát trình. công trình không mà còn giúp rút gian hoàn máy tính. Các công lý án cung tính giám sát ngày lý các phiên và quan là giúp các nhóm làm DUNG MÔN - Bài 1: Cung cho sinh viên các khái và các trong UI/UX các công và công Balsamiq Wireframes.

- Bài 2: Cách và các phím trong Dev Tool trong trình web giúp các developer gian và nâng cao làm - Bài 3: lý phiên lý code và làm nhóm developer nên - Bài 4: Trong lý, theo dõi và hành án yêu thông tin khác nhau nên lý và lý án có hoàn thành nhanh, có - Bài 5: toán mây cho phép quá trình mua/thuê hay máy (server). nêu ra yêu mình, gom các tài nguyên yêu Môn mã sinh viên có trình, trình trình website, xúc internet. V YÊU MÔN các dung khi làm các bài nhà và gian nhà. CÁCH DUNG MÔN môn này, sinh viên ôn các bài các câu và làm bài bài và tìm thêm các thông tin liên quan bài bài sinh viên tiêu và tóm bài sau dung bài thúc ý bài sinh viên câu ôn và thúc toàn bài sinh viên làm các bài.

PHÁP GIÁ MÔN Môn giá hai thành - quá trình (50%): Hình và cách giá do viên lý phê môn. - thi (50%): Hình làm án môn và thi trên dung án môn lý trong các bài Danh sách án do viên môn và cung vào khóa BÀI 1: 1 BÀI 1: Bài này giúp các dung sau: - Wireframing, Mockup, và Prototype là gì? - Các wireframe. - Các tính công Balsamiq Wireframes và các chúng.1 KHÁI NI M Khi nói phát quan là trông nào, khi phát là quan vì nó vai trò là kim nam cho các bên liên quan trong án Theo các mô ra yêu Tuy nhiên, khi các này, cá nhân có cách hình dung riêng yêu này trong các nhóm phát và lãng phí và gian.1 Wireframing, mockup và prototype Xu chung trong quá trình UI/UX (giao dùng) cho là ba giai wireframing, mockup và prototype. Wireframing có là quan hóa màn hình (di web).

Trong có nhu ngày càng màn hình/trang giá nó. 2 BÀI 1: Mockup trung vào các quan trên màn hình/ trang. Chúng hoàn thành và và các trên trang. Mockups là các tin hình.

Prototype là mockup có thêm UX dùng). Có là ta có vào button, có màn hình, có v.2 T i sao dùng wireframing Wireframing là gian yêu nói, tranh có giá ngàn , Wireframing cung cái nhìn thoáng qua yêu màn hình/ trang nào cách quan hóa màn hình và các cùng, nó giúp các nhóm phát theo tiêu chung. wireframe là Business Analyst (Nhà phân tích User Interface Designer (Nhà giao / Interaction Designer (Nhà tác) 1.3 Các công c wireframing Công wireframing là bút và bút chì. này không gì ! Tuy nhiên, khi nói nó các nhóm, ta giao bút và bút chì, có thêm các tính chia qua email hay các Có công này, hình là: Axure, UxPin, Balsamiq và Proto.

Balsamiq là công các yêu wireframing, tác và sáng tính nó cho phép thành viên trong nhóm wireframing nhanh chóng, ra tính phát Nó cho phép tác trên các nhóm khác nhau, thành viên trong nhóm có tác các nhóm cùng trí xa khác nhau. các wireframe PDF / PNG linh BÀI 1: 3 1.2 GI I THI U BALSAMIQ WIREFRAMES Balsamiq phát trên 2 Cloud và Desktop.1 Cài t Balsamiq trên máy tính Adobe Air 2.6 Nó 1 trên các máy tính và hành. Các yêu ra Mac OS X - macOS 10.12 (macOS Sierra) - 4GB RAM - 100MB không gian Windows - Windows 7 with SP2 - 4GB RAM - 150MB không gian 1.2 Giao di n Balsamiq Sau khi cài xong, Balsamiq, màn hình sau: 1 4 BÀI 1: Hình 1.1: Giao Balsamiq hình 1-1, giao dùng Balsamiq chia thành 4 thành sau: - Navigator - UI Library - Inspector - Wireframe space/Area 1.3 UI Library vi n UI) UI phân theo các màn hình khác nhau. có theo ngang trên All và xem các thành màn hình có trong Balsamiq.2: UI Library này phân chia theo danh BÀI 1: 5 All Danh này bao các UI có trong Balsamiq.

có theo ngang xem / chúng. Assets Danh này thành do dùng lên Big Danh này bao các màn hình, có kích Ví trình placeholders, iPad, Buttons Nó bao các nút (button controls) trong wireframe trang web hay di Common Nó bao hình / khác nhau các tác Containers tên nó bao trình Field Forms các UI (UI controls) liên quan form. Icons các dùng trong giao iOS các UI dành riêng cho hành iOS. Layout Các thành trên 1 trang/ màn hình.

Markup các thành dùng ghi chú, bình trong wireframe Media các liên quan hình âm thanh trong wireframe Symbols các thành có tái Text tên nó bao các UI liên quan 1.1 B i c nh Bài này ví website cho 1 công ty. Chúng ta xây các wireframes cho website 1 công ty Trong giai chúng ta suy và hình dung các trang có trên website và dung chúng. Hãy xem xét các trang sau cho trang web: 6 BÀI 1: Hình 1.3: Các trang trong website 1 công ty theo là các ví các trang. Cách chi trong các bài hành.4: Ví wireframe trang Home 1.3 Trang and Hình 1.5: Ví wireframe trang "Products and Services" 8 BÀI 1: 1.6: Ví wireframe trang "About Us" 1.7: Ví wireframe trang "Contact Us" BÀI 1: 9 khách hàng các này, chúng ta các wireframe sang các khác ví PDF, PNG.

Các trong UI/UX wireframing, mockup, prototype M c c tính Công c trung th c Phác h a, Tài li u, trao tr ng xám ho c Axure, UxPin, Wireframe Th p i, th o lu n xanh, th hi n Balsamiq, Proto.io nhanh c giao di n Thu th p ý ki n, xây d ng Sketch (onlyMac), Trung bình Giao di n có thi t Mockup ng d ng, Photoshop, Cao k UI, nh trình bày nhà Illustrator, Adobe XD ut. ng i dùng, HTML/CSS/Javascript, UI chi ti t + UX Prototype Cao trình bày, SketchUp (only Mac), animation, flow dùng l i giao Adobe XD di n. Ngoài ra, cách xây các wireframe cho website 1 công ty và Câu 1: Wireframe, Mockup, Prototype là gì? So sánh và tính khái Câu 2: 1 website xây các wireframe cho website 10 BÀI 2: BÀI 2: DEVTOOLS Khi trình web các trình viên hay các công phát hay là Developer Tool tra mã HTML hay debug mã javascript. này ra khá xuyên và có thao tác Vì thành cách và các phím trong Dev Tool giúp gian và nâng cao làm 2.1 KH NG CHROME DEVELOPER TOOL hãy Google Chrome và sau phím F12 nó.

Trong Developer Tool ra phía màn hình, có các khung panel sau: - Elements - Resources - Network - Source - Timeline - Profile - Audits - Console BÀI 2: 11 Trong các khung mà làm là Elements, Resources, Network và khung Console.2 KHUNG ELEMENTS Khung này dùng tra các trong HTML vì trong các sách Anh nó còn là khung element inspector. có mã HTML trên khung này cách click lên trong khung. Khi click lên HTML mã CSS dành cho này khung phía tay có thay CSS và theo dõi thay trên trình 12 BÀI 2: 2.3 KHUNG RESOURCES khung này có tìm danh sách các file javascript, html, css có trong trang web và thông tin Cookies, Local Storage các phiên trình HTML5). có thêm, và xóa các thông tin Cookies và Local Storage 2.4 KHUNG NETWORK khung này các thông tin chi các request trình server bao URL request, thái request (thành công hay có server.), gian server request.5 KHUNG CONSOLE khung này có thông tin javascript có).

có các mã javascript trên khung này.6 PHÍM T T TRONG CHROME DEV TOOLS cùng này, tôi các phím trong Chrome Dev Tools Windows / Linux Mac Kh i ng Dev Tool F12, Ctrl + Shift + I Cmd + Opt + I M (chuy n qua) Inspect Element mode Ctrl + Shift + C Cmd + Shift + C M Dev Tool và chuy n qua console tab Ctrl + Shift + J Cmd + Opt + J Chuy n qua khung panel sau Ctrl + ] Cmd + ] Chuy n qua khung panel c Ctrl + [ Cmd + [ 14 BÀI 2: Chrome Developer Tool là công cho các trình viên tích trong Google Chrome. DevTools cung cho các nhà phát web truy vào trình và web DevTools và code HTML, CSS, JavaScript. CÂU Câu 1: màu các element khác trên trang web Câu 2: Tìm cách console log, không log khi refresh trang web? Câu 3: Cách nhanh các file javascript trong trang web? BÀI 3: 15 BÀI 3: lý phiên (mã là gì, sao nên quan tâm? lý phiên là các thay tin (file) các tin theo gian, do nó giúp có quay phiên xác nào sau này. dù các ví trong sách này mã là cho lý phiên song trong file nào trên máy tính có cho lý phiên là nhà website, các phiên (cái mà thì Lý phiên (Version Control System - VCS) là cách làm khôn ngoan.

VCS cho phép khôi phiên các file, khôi phiên toàn án, xem các thay theo gian, xem ai là thay cùng có gây ra hay xem ai là gây ra và còn VCS còn khi làm tung lên hay vô tình xoá các file có khôi chúng cách dàng. quá trình này có nhanh chóng và không quá công 3.1 H TH NG QU N LÝ PHIÊN B N C C B pháp lý phiên cách copy các file sang khác (có là các tên theo gian, thông minh). là pháp vì nó tuy nhiên nó gây ra quên trong nào hay vô tình sao chép file mà không này, lâu các trình viên phát các phiên VCS có database các thay các files soát thay (xem Hình 1.1: Mô hình lý phiên trong lý phiên có tên là rcs còn máy tính cho bây Ngay hành Mac OS X vào các rcs khi cài Developer Tools (Các công dành cho trình viên). này cách các vá thay các file) phiên này qua phiên khác trên nó có tái file nào nào cách các vá nhau.2 H TH NG QU N LÝ PHIÊN B N T P TRUNG nghiêm theo mà là tác các trình viên khác trong qua này, Lý Phiên Trung (Centralized Version Control Systems - CVCSs) phát Các này, ví CVS, Subversion, và Perforce, bao máy có các tin "phiên hoá" (versioned), và danh sách các máy khách có thay các tin này trên máy trung tâm Trong vòng mô hình này thành tiêu cho lý phiên (xem Hình 1.2: Mô hình lý phiên trung.

Mô hình này cung so lý Ví dùng nào mà khác trong án làm. lý có lý ai có làm gì theo ý và này dàng so lý máy riêng Tuy nhiên, mô hình này có nghiêm là trung" mà máy trung tâm máy không trong là trong gian không ai có tác còn các thay phiên hoá tin nào mà thao tác.