Giới thiệu về ứng dụng Blockly

Ứng dụng Blockly là một ứng dụng web có chứa trình chỉnh sửa Blockly (không gian làm việc). Tài liệu này đưa ra ví dụ về mục đích sử dụng của các ứng dụng Blockly và xem xét các tính năng thường thấy trên giao diện người dùng.

Nếu chưa thực hiện, hãy nhớ đọc thuật ngữ trực quancác bước cơ bản về ứng dụng trước khi tiếp tục với tài liệu này.

Các ứng dụng Blockly có chức năng gì?

Các ứng dụng Blockly giúp người dùng viết chương trình trong nhiều lĩnh vực, từ trò chơi điện tử đến robot học và phân tích dữ liệu. Người dùng viết chương trình bằng các khối. Ứng dụng sẽ dùng các khối này để tạo mã dựa trên văn bản, chẳng hạn như JavaScript hoặc Python. Sau đó, ứng dụng sẽ chạy trực tiếp mã đã tạo hoặc người dùng tải xuống và chạy mã đó trên một nền tảng khác, chẳng hạn như robot hoặc bộ điều khiển trò chơi điện tử cầm tay.

Sau đây là một số ví dụ về các loại chương trình mà người dùng viết bằng các ứng dụng Blockly:

  • Giải pháp cho câu đố, ảnh động hoặc nhạc: Mã được tạo sẽ giải một câu đố (chẳng hạn như mê cung), hiển thị ảnh động hoặc phát nhạc. Ví dụ: hãy xem Music Lab của Code.org.

  • Trò chơi điện tử: Mã được tạo sẽ chạy một trò chơi điện tử. Ví dụ: tạo 2 cấp độ đầu tiên của trò chơi "Đập chuột" trong MakeCode Arcade rồi tải trò chơi xuống một bộ điều khiển hoặc chơi trò chơi đó trong trình mô phỏng.

  • Robot học: Mã được tạo sẽ điều khiển một robot. Ví dụ: lập trình một robot bằng Ozoblockly và tải chương trình đó xuống một robot thực hoặc chạy chương trình trong trình mô phỏng.

  • Bản vẽ: Mã được tạo sẽ vẽ một bản vẽ 2D hoặc 3D. Để biết ví dụ, hãy xem BlocksCAD.

  • Phân tích dữ liệu: Đoạn mã được tạo sẽ phân tích dữ liệu và tạo một biểu đồ. Để xem ví dụ, hãy xem bản minh hoạ này về Nền tảng Dialogic.

  • Mã dành riêng cho ứng dụng: Mã được tạo thực hiện một tác vụ dành riêng cho một ứng dụng cụ thể. Ví dụ: Blockly Developer Tools (Công cụ dành cho nhà phát triển Blockly) là một công cụ để thiết kế các khối Blockly mới. Công cụ này tạo mã định nghĩa khối mà người dùng sao chép và dán vào ứng dụng Blockly của riêng họ.

Giao diện người dùng

Một cách hay để hiểu các thành phần điển hình của ứng dụng Blockly là xem xét giao diện người dùng của chúng.

Thành phần cơ bản của giao diện người dùng

Hầu hết các ứng dụng Blockly đều có một số thành phần cơ bản: trình chỉnh sửa Blockly (không gian làm việc), bảng điều khiển đầu ra và nút "Chạy". Ví dụ: đây là giao diện người dùng của Mê cung trong Blockly Games.

Giao diện người dùng của một ứng dụng mê cung có trình chỉnh sửa, bảng điều khiển đầu ra và nút Chạy.

Một số ứng dụng Blockly bỏ qua nút "Chạy" và thay vào đó cập nhật bảng điều khiển đầu ra mỗi khi người dùng thực hiện thay đổi. Ví dụ: ứng dụng Graph trong các mẫu của Blockly có 2 bảng đầu ra (một cho biểu đồ và một cho phương trình) mà ứng dụng này cập nhật mỗi khi có thay đổi.

Giao diện người dùng của một ứng dụng đồ thị có trình chỉnh sửa, một bảng đầu ra cho phương trình do người dùng tạo và một bảng đầu ra cho đồ thị của phương trình đó.

Một số ứng dụng không có bảng đầu ra. Điều này thường xảy ra nhất trong các ứng dụng phần cứng, chẳng hạn như các ứng dụng để lập trình robot. Mặc dù một số ứng dụng này có trình mô phỏng phần cứng, nhưng nhiều ứng dụng chỉ cho phép người dùng tải xuống và chạy mã đã tạo trực tiếp trên thiết bị mục tiêu.

Các thành phần giao diện người dùng bổ sung

Hầu hết các ứng dụng đều có các thành phần giao diện người dùng bổ sung. Một số thành phần trong số này đáp ứng các nhu cầu chung, chẳng hạn như lưu công việc của người dùng, trong khi những thành phần khác đáp ứng các nhu cầu cụ thể của ứng dụng, chẳng hạn như thiết kế GUI. Dưới đây là một số ví dụ:

  • Scratch là một ứng dụng để tạo ảnh động và trò chơi điện tử, có trình chỉnh sửa đồ hoạ và âm thanh; các bảng điều khiển để tạo các hình ảnh và phông nền mới; cũng như các trình đơn tệp, chỉnh sửa và cài đặt:

    Giao diện người dùng của Scratch.

  • MakeCode Arcade là một ứng dụng để tạo trò chơi điện tử, có các nút điều khiển đầu ra, trình chỉnh sửa mã và đồ hoạ, một trình đơn cài đặt, cũng như các nút tải xuống và lưu. Bảng đầu ra của ứng dụng này mô phỏng một tay điều khiển trò chơi cầm tay.

    Giao diện người dùng MakeCode Arcade.

  • MIT App Inventor là một ứng dụng để tạo ứng dụng điện thoại, có các màn hình riêng cho trình thiết kế GUI và trình chỉnh sửa Blockly, cũng như các trình đơn tệp, kết nối, bản dựng và chế độ cài đặt. Thay vì bảng điều khiển đầu ra, người dùng sẽ kiểm thử mã được tạo trên điện thoại của họ.

    Trình thiết kế GUI trong giao diện người dùng App Inventor Trình chỉnh sửa Blockly trong giao diện người dùng App Inventor

Những thành phần bổ sung mà bạn nên đưa vào sẽ tuỳ thuộc vào mục tiêu của ứng dụng và khả năng của người dùng. Một số thành phần phổ biến là:

  • Quản trị:

    • Quản lý tệp (tạo mới, mở, lưu, lưu dưới dạng, xoá)
    • Quản lý tài khoản (tạo, đăng nhập, đăng xuất)
    • Chế độ cài đặt (ngôn ngữ, cấu hình giao diện người dùng)
  • Lập trình:

    • Chỉnh sửa lệnh (huỷ, làm lại, sao chép, cắt, dán, sao chép)
    • Nhà thiết kế GUI
    • Trình chỉnh sửa đồ hoạ và âm thanh
    • Trình soạn thảo mã hoặc màn hình hiển thị mã ở chế độ chỉ đọc
  • Thử nghiệm

    • Cấu hình đầu ra (bắt đầu/dừng, tốc độ phát, âm lượng, ảnh chụp màn hình, v.v.)
    • Trình gỡ lỗi (điểm ngắt, chạy, bước, làm nổi bật khối)
    • Đặt các tham số kiểm thử
  • Phần cứng

    • Kết nối (USB, Bluetooth, mã QR)
    • Cấu hình (chọn kiểu máy, chọn phụ kiện, chỉ định tên thành phần)
    • Điều khiển (điều khiển robot theo cách thủ công, ghi lại vị trí của robot)
    • Tải mã xuống
  • Trợ giúp

    • Tài liệu
    • Hướng dẫn tương tác
    • Trợ giúp theo ngữ cảnh

Tôi cần làm gì tiếp theo?

Nếu bạn vẫn đang cân nhắc về ứng dụng của mình, hãy tiếp tục đọc về các yếu tố cần cân nhắc về thiết kế.

Nếu bạn muốn xem cách tạo một ứng dụng đơn giản, hãy thử Lớp học lập trình Bắt đầu với Blockly.

Và nếu bạn đã sẵn sàng viết đơn đăng ký: