[Cơ bản] Lập trình QML – Phần 1

QML dành cho phát triển UI Qt,
hướng dẫn chi tiết từ nhập môn đến thực hành.

Hiện thực UI bằng framework Qt, 
mạnh mẽ hơn với QML!

Ngôn ngữ lập trình QML?

Đây là một ngôn ngữ lập trình cho phép phát triển giao diện người dùng hiện đại, cao cấp trong Qt Framework
một cách dễ dàng.

QML(Qt Modeling Language) là ngôn ngữ lập trình do framework Qt cung cấp. QML là ngôn ngữ lập trình có thể sử dụng để phát triển UI trong framework Qt, nhằm dễ dàng triển khai các UI hiện đại, cao cấp.

Khi phát triển chương trình GUI bằng framework Qt, có thể phân biệt logic thiết kế của phần UI và logic chức năng của phần chức năng. Trong số đó, QML là ngôn ngữ có thể được lựa chọn thay thế cho C++ khi phát triển UI tương ứng với logic thiết kế. Đặc biệt, khi phát triển UI bằng QML, có thể tách biệt hoàn toàn logic thiết kế và logic chức năng, từ đó nâng cao khả năng tái sử dụng mã nguồn.

Nếu sử dụng QML để phát triển logic thiết kế, bạn có thể triển khai UI dễ dàng và nhanh chóng hơn nhiều so với khi sử dụng C++. Ngoài ra, bạn cũng có thể dễ dàng áp dụng các công nghệ GUI hiện đại và cao cấp như Flickable, Gesture, Animation, 3D.

Cú pháp dễ hiểu, khả năng đọc ngắn gọn
Hãy trải nghiệm những ưu điểm của QML.

Hãy cùng xem xét ví dụ in “Hello World” thường được thực hiện khi mới bắt đầu học một ngôn ngữ lập trình nhé? Bạn có thể dễ dàng nhận thấy QML là một ngôn ngữ cô đọng đến mức nào.

import QtQuick

Window {
    width: 300
    height: 200
    visible: true
    title: qsTr("QML 예제소스코드")

    Text {
        x: 80
        y: 70
        text: "Hello World"
        font.pixelSize: 25
    }
}

_{Mã nguồn ví dụ QML}

_{Màn hình chạy mã nguồn ví dụ QML}

QML rất dễ dàng và đơn giản. Ngay cả những người không phải là nhà phát triển cũng có thể dễ dàng hiểu được. Do đó, các nhà thiết kế và nhà phát triển có thể giao tiếp với nhau và chia sẻ ý tưởng bằng mã QML.

Vì vậy, với QML, nhà thiết kế và nhà phát triển có thể hợp tác bằng cách cùng sử dụng một công cụ phát triển, từ đó rút ngắn thời gian phát triển so với trước.

Nhập môn lập trình QML 
Khóa học này phù hợp với những ai 🙋‍♀️

Mục tiêu khóa học 💡

• Bạn có thể học cách phát triển UX/UI hiện đại và cao cấp bằng QML.
• Bạn có thể học cách phân tách hoàn toàn logic thiết kế và logic chức năng khi sử dụng QML.
• Bằng cách học lý thuyết theo từng phần và trực tiếp viết mã tập trung vào nhiều ví dụ thực tế khác nhau, bạn có thể tự nhiên học được năng lực phát triển QML cần thiết trong công việc.

Hãy
khám phá những điểm đặc trưng riêng của khóa học này 📖

Lý thuyết và thực hành trong một khóa học duy nhất

Khóa học được xây dựng để bạn có thể nâng cao cả năng lực thực tiễn bên cạnh ngữ pháp QML. Sau khi học lý thuyết ở từng phần, bạn sẽ được thực hành trực tiếp theo bài giảng qua các ví dụ thực tế, từ đó nâng cao kỹ năng làm việc thực tiễn.

Vượt qua rào cản trực tuyến

Hình ảnh người chia sẻ kiến thức cũng được đưa vào màn hình bài giảng. Hãy học mọi lúc, mọi nơi với cảm giác như đang tham gia lớp học trực tiếp thông qua các buổi học được tiến hành cùng phần live coding sống động.

Cấu trúc bài giảng 📖

Phần 1. QML là gì
QML là ngôn ngữ thông dịch do Qt Framework cung cấp. Trong phần này, chúng ta sẽ tìm hiểu QML có những đặc điểm và ưu điểm gì.

Phần 2. Cú pháp và cấu trúc của QML
Học về cấu trúc và cú pháp của QML. Đây là phần học cách sử dụng QML thông qua các ví dụ thực hành.
Phần 3. Type
Type là một khái niệm tương tự như QWidget của Qt. Trong phần này, bạn sẽ tìm hiểu Type là gì và tập trung học các Type thường được sử dụng trong số các Type mà QML cung cấp. Ngoài ra, bạn sẽ thực hành triển khai Type nút bằng Type Accessible thông qua ví dụ thực hành.

Phần 4. Events 
Đây là phần học cách triển khai xử lý các Event phát sinh trên giao diện người dùng, chẳng hạn như thao tác chạm, chuột và bàn phím. Ngoài ra, bạn sẽ học cách triển khai Signal trong QML. Trong ví dụ thực hành, bạn sẽ tìm hiểu chi tiết cách xử lý Signal thông qua ví dụ kết nối Signal với Method (hàm). 

Phần 5. Triển khai Dynamic UI bằng Loader type
Bạn sẽ học cách để người dùng thay đổi động một khu vực cụ thể trong UI. Ví dụ, khi một điều kiện cụ thể được đáp ứng trên màn hình GUI A, bạn sẽ học cách chuyển sang màn hình B. Vì vậy, thông qua phần này, bạn sẽ học cách triển khai màn hình một cách động. Trong bài thực hành cuối cùng, bạn sẽ tìm hiểu cách sử dụng kiểu Loader để thay đổi màn hình một cách động thông qua một ví dụ.

Phần 6. Canvas 
Tìm hiểu các phương pháp hiển thị hình ảnh, đường kẻ, hình dạng và văn bản trên màn hình giống như trong ứng dụng vẽ. Chúng ta sẽ tìm hiểu một ví dụ cho phép chọn Color để vẽ trên bảng vẽ.

Phần 7. Hiệu ứng đồ họa
Tìm hiểu cách sử dụng các hiệu ứng như Blur, Blend, Color trên hình ảnh.

Phần 8. Lập trình module
Học cách mô-đun hóa các module thường được sử dụng trên GUI như nút và hộp combo, cũng như cách mô-đun hóa các Type do người dùng định nghĩa. Đồng thời, thông qua các ví dụ thực hành trực tiếp, bạn sẽ tìm hiểu cách mô-đun hóa QML để triển khai.

Phần 9. Sử dụng JavaScript trong QML
Học cách sử dụng các hàm JavaScript trong QML. Đồng thời, tìm hiểu cách Import tệp JavaScript trong QML. Trong ví dụ thực hành, bạn có thể tìm hiểu chi tiết cách sử dụng JavaScript thông qua việc triển khai một máy tính.

Phần 10. Dialog
Tìm hiểu cách sử dụng dialog trong QML. Thông qua ví dụ thực hành tự triển khai một dialog để chọn Color, bạn có thể học cách sử dụng dialog.

Phần 11. Layout 
Trong QML, ngoài Anchors, bạn còn có thể sử dụng các Layout như RowLayout, ColumnLayout, GridLayout và Layout. Trong bài học này, chúng ta sẽ tìm hiểu cách sử dụng nhiều loại Layout khác nhau.

Mục 12. Type Positioning 
Type Positioning là phương pháp hiển thị các Type trên màn hình. Ví dụ, tìm hiểu cách sắp xếp các Type theo chiều ngang, chiều dọc hoặc theo dạng bàn cờ.

Phần 13. Qt Quick Controls 
Qt Quick Controls cung cấp các giao diện GUI cần thiết để xây dựng màn hình, chẳng hạn như Button, Dial, CheckBox, BusyIndicator, v.v. Trong phần này, bạn sẽ học cách sử dụng Qt Quick Controls.

Hỏi & Đáp 💬

Q. Có điều gì cần học trước khi tham gia khóa học không?

Đây là khóa học dành cho những người đã có kiến thức cơ bản về C++ và Qt. Nếu chưa có kinh nghiệm về Qt, bạn nên học trước khóa học “Lập trình Qt” trước khi tham gia khóa học này.

[Giới thiệu] Lập trình Qt 6 phần 1

qtdev

2.259.498 ₫

Nhập môn / GUI, Qt

4.5

(50)

400+

Sử dụng Qt, bạn có thể phát triển phần mềm tương thích với nhiều hệ điều hành khác nhau. Nói cách khác, bạn có thể phát triển phần mềm chạy trên nhiều nền tảng khác nhau với mã nguồn được phát triển bằng Qt.

Nhập môn

GUI, Qt

[Giới thiệu] Lập trình Qt 6 phần 1

qtdev

2.259.498 ₫

Nhập môn / GUI, Qt

4.5

(50)

400+

[Giới thiệu] Lập trình Qt 6 phần 2

qtdev

2.259.498 ₫

Nhập môn / Qt, GUI

4.9

(22)

200+

Bài giảng này là bài giảng thứ 2 sau Phần 1 của lập trình Qt. Nếu bạn chưa quen với Qt, chúng tôi khuyên bạn nên học Phần 1 trước rồi đến Phần 2.

Nhập môn

Qt, GUI

[Giới thiệu] Lập trình Qt 6 phần 2

qtdev

2.259.498 ₫

Nhập môn / Qt, GUI

4.9

(22)

200+