Lập trình kéo thả - Blockly

Blockly là trình lập trình trực quan dạng kéo-thả block — học viên ghép các "khối lệnh" thành chương trình mà không cần gõ code. Lý tưởng cho người mới học lập trình hoặc trẻ em.

Khi nào dùng?

• Học khái niệm lập trình không bị cản trở bởi cú pháp
• Học sinh tiểu học/THCS làm quen với tư duy lập trình
• Tạo logic đơn giản (loop, condition, function) trước khi học ngôn ngữ thật

Giao diện

• Toolbox (bên trái) — danh sách block khả dụng (theo nhóm: Logic, Loops, Math, Text, Variables, Functions, ...)
• Workspace (giữa) — vùng làm việc, kéo block vào để xếp
• Output / Console (bên phải hoặc dưới) — kết quả khi nhấn Run

Các nhóm block phổ biến

Nhóm	Block ví dụ
Logic	if-else, and/or/not, compare
Loops	repeat N times, while, for-each
Math	add, subtract, random, square root
Text	print, length, concatenate
Variables	set, change, get
Functions	define, call, return

(Toolbox cụ thể tùy toolbox_config của giảng viên — có thể giới hạn block theo bài.)

Cách ghép block

1. Kéo block từ toolbox vào workspace.
2. Snap (ghép): kéo block tới gần block khác → các "miếng ghép" tự dính lại.
3. Cấu hình input trong block: nhấn vào ô số/chữ → gõ giá trị.
4. Nest block vào block khác (vd: lệnh print đặt bên trong repeat 5 times).

Chạy chương trình

Nhấn Run (icon Play) — Blockly:

1. Convert blocks → JavaScript / Python (tùy cấu hình)
2. Thực thi code đã convert
3. Hiển thị output ở console

TIP

Một số bài Blockly có animation/visualization thay vì chỉ console — bạn thấy "robot" di chuyển, hoặc "rùa" vẽ hình theo lệnh.

Điều kiện hoàn thành (check_config)

Giảng viên cấu hình check_config xác định khi nào bài được tính là đúng:

1. Output match

Output của chương trình phải khớp với expected output (vd: phải in ra "Hello World!").

2. Block count

Phải dùng đúng số block / loại block (vd: phải có ít nhất 1 vòng lặp).

3. Block structure

Cấu trúc cụ thể (vd: function tính tổng phải có recursion).

4. Visual goal

Cho bài có visualization (rùa vẽ hình): hình vẽ ra phải khớp pattern target.

Hệ thống chấm tự động khi nhấn Submit hoặc Check:

• ✅ Pass — hiện thông báo "Tốt lắm!" + cho hoàn thành
• ❌ Fail — gợi ý đâu sai (vd: "Bạn cần dùng vòng lặp", "Output chưa đúng")

Lưu lại blocks

Workspace tự auto-save. Quay lại sau, blocks vẫn ở nguyên vị trí cũ.

Một số bài cho phép:

• Export XML — tải file XML chứa blocks (chia sẻ với bạn)
• Import XML — load lại workspace từ file XML

Xem code generated

Nhấn nút Show code (nếu giảng viên bật) → hiển thị code thật mà Blockly sinh ra (JavaScript/Python). Cách hay để chuyển từ Blockly sang viết code thật:

[Block: print "Hello"]
       ↓ generates ↓
print("Hello")

TIP

Học viên đã quen với Blockly có thể dần làm quen syntax bằng cách xem code sinh ra — bridge tự nhiên sang viết code thật.

Khác biệt với Blockly Game

	Blockly	Blockly Game
Mục đích	Lập trình tự do với mục tiêu	Chơi game qua lập trình (level-based)
UI	Workspace + console	Game scene + workspace
Animation	Tùy bài	Có (robot, rùa, character...)
Pacing	Một bài = một bài tập	Một bài = nhiều level tiến dần

Mẹo dùng Blockly hiệu quả

1. Bắt đầu nhỏ — kéo 1–2 block, chạy thử, đảm bảo hiểu trước khi thêm phức tạp.
2. Đọc tooltip — hover lên block để xem mô tả.
3. Khi bí, click "Show code" để xem code thật → đôi khi giúp hiểu logic.
4. Đừng dùng nhiều block hơn cần — code đẹp = ít block. check_config có thể yêu cầu tối ưu.
5. Dùng functions khi có hành động lặp lại nhiều — tổ chức code clean hơn.

Câu hỏi thường gặp

Blocks bị mất sau khi reload — sao thế? Auto-save có thể fail nếu mất kết nối lúc đang ghép. Sau mỗi 5–10 block, manual save (nếu có nút) hoặc đảm bảo internet ổn định.

Tôi muốn dùng block không có trong toolbox? Toolbox bị giới hạn theo bài — đó là chủ đích của giảng viên. Liên hệ giảng viên nếu thiếu block bạn cần.

Block "Function" hoạt động sao? Kéo block define function → đặt tên → ghép logic vào trong. Sau đó dùng block call function ở chỗ khác để gọi. Tương tự function trong code thật.