Ứng dụng xây dựng

Để xây dựng một ứng dụng, bạn nên tạo Bố cục, Trang, điền nội dung vào chúng và thiết lập tương tác ứng dụng web.

Bố cục

Trước đó, chúng tôi đã giới thiệu khái niệm về Bố cục . Để bắt đầu tạo bố cục, trước tiên bạn phải phác thảo cấu trúc ứng dụng của mình và xác định các mẫu trang sẽ được sử dụng.

Nếu bạn bỏ lỡ điều gì đó, đừng lo lắng. Bạn có thể tăng thêm danh sách bố cục khi cần thiết.

Danh sách bố cục

Danh sách bố cục cung cấp tất cả các bố cục của ứng dụng web của bạn. Tại đây, bạn có thể thực hiện nhiều thao tác khác nhau và quản lý bố cục.

Để truy cập Danh sách bố cục , chọn tab thứ 4 trên thanh công cụ bên trái trong Tab UI Designer hoặc sử dụng phím tắt 4 . Tất cả bố cục ứng dụng của bạn sẽ được hiển thị ở đây.

Mỗi ứng dụng phải có ít nhất một bố cục. Khi bạn tạo một ứng dụng mới, một hoặc nhiều bố cục sẽ được tạo tự động tùy thuộc vào mẫu ứng dụng đã chọn. Một trong số chúng được đánh dấu là **mặc định**.

Trong Danh sách bố cục, bạn có thể thực hiện các hành động sau trên bố cục:

• lựa chọn,
• thêm mới,
• đổi tên,
• nhân bản,
• xóa bỏ.

Bố cục mặc định

Bố cục mặc định được chọn tự động từ danh sách bố cục khi tạo trang mới. Tuy nhiên, điều này có thể được thay thế bằng một bố cục khác nếu cần.

Việc sử dụng bố cục mặc định sẽ tăng tốc độ phát triển, vì vậy chúng tôi khuyên bạn nên sử dụng bố cục được sử dụng thường xuyên nhất làm mặc định. Lưu ý rằng mỗi lần chỉ có thể đặt một bố cục làm mặc định. Việc ghi đè bố cục mặc định không ảnh hưởng đến các trang hiện có trừ khi bố cục ban đầu bị xóa.

Bố cục mặc định được đánh dấu bằng biểu tượng ngôi sao màu xanh lam trong danh sách bố cục.

Tạo bố cục mới

Bạn có thể thiết kế các bố cục khác nhau cho các loại trang khác nhau. Hãy làm theo các bước sau để tạo bố cục mới:

• Nhấn CTRL/⌘+L hoặc mở Danh sách bố cục (phím tắt 4 ) từ thanh công cụ bên trái của Trình thiết kế giao diện người dùng và nhấp vào nút Dấu cộng trên tiêu đề bảng điều khiển.
• Cung cấp Tên bố cục theo phương thức xuất hiện. Chúng tôi khuyên bạn nên sử dụng tiêu đề dễ đọc phản ánh cấu trúc của bố cục để nhận dạng nhanh khi gán bố cục cho các trang.
• Chọn mẫu bố cục:
  • Cơ sở: mẫu trống không có phần tử bổ sung, phù hợp cho các trang không có điều hướng, như trang xác thực hoặc trang lỗi.
  • Sidebar Left: mẫu có menu thanh bên, tốt cho bảng quản trị, CMS, ERP, v.v.
  • Top Menu: mẫu có menu trên cùng, phù hợp cho website hoặc landing page.
• Bật cài đặt Bố cục mặc định nếu bố cục này được đặt làm mặc định.
• Nhấp vào nút Tạo .

Không có giới hạn về số lượng bố cục bạn có thể tạo.

Đổi tên bố cục

Để đổi tên bố cục, bấm đúp vào tên bố cục, thực hiện các thay đổi cần thiết và nhấn Enter để lưu hoặc Esc để hoàn nguyên các thay đổi.

Sao chép bố cục

Để sao chép bố cục, cùng với nội dung và cài đặt của nó:

1. Di chuột qua bố cục bạn muốn sao chép.
2. Nhấp vào biểu tượng Nhân bản.

Các bố cục trùng lặp sẽ tự động xuất hiện trong danh sách với chỉ mục được thêm vào tên của chúng. Nếu bạn sao chép bố cục được đặt làm mặc định thì bố cục nguồn sẽ không bị ghi đè bởi bố cục mới tạo.

Xóa bố cục

Để xóa bố cục:

1. Di chuột qua bố cục bạn muốn xóa.
2. Nhấp vào biểu tượng Thùng rác.
3. Xác nhận xóa.

Để xóa bố cục được liên kết với bất kỳ trang nào, bạn nên gán lại bố cục cho bất kỳ trang được liên kết nào trước khi xóa. Điều này có thể được thực hiện thông qua phương thức xác nhận hoặc thủ công cho từng trang.

Để xóa bố cục mặc định, bạn nên thiết lập bố cục khác làm mặc định.

❗️ Quan trọng: Bạn không thể hoàn tác thao tác xóa bố cục.

Cài đặt Giao diện

Nhấp vào bố cục mục tiêu trong Danh sách bố cục để truy cập cài đặt của nó từ Thanh bên cài đặt bên trái.

Từ tiêu đề thanh bên Cài đặt, bạn có thể đổi tên bố cục đã chọn bằng cách nhấp vào tên hoặc xóa nó.

Bạn có thể đặt bố cục đã chọn làm mặc định và xem tất cả các trang được liên kết tại đây. Để chỉnh sửa một trang được liên kết, hãy nhấp vào nó trong danh sách.

Hơn nữa, bạn có thể xây dựng một số logic nghiệp vụ cho bố cục.

Bố cục logic nghiệp vụ

Trong tab logic nghiệp vụ, hãy chọn trình kích hoạt để đặt hành động. Thao tác này sẽ mở trình chỉnh sửa quy trình công việc, tập trung vào trình kích hoạt đã chọn.

Tại đây, bạn có thể tạo luồng hành động cho một hoặc nhiều trình kích hoạt, như triển khai điều hướng, thay đổi thuộc tính có điều kiện, chuyển đổi chế độ hiển thị, gửi dữ liệu, v.v. Hãy tham khảo hướng dẫn của chúng tôi về cách xây dựng quy trình kinh doanh để biết thêm thông tin.

🔔 Để có hiệu suất ứng dụng tối ưu, hãy xây dựng các quy trình kinh doanh phức tạp ở phía phụ trợ.

Chỉnh sửa bố cục

Bố cục, dưới dạng các thành phần chung và mẫu trang, tự động áp dụng tất cả sửa đổi cho tất cả các trang được liên kết.

Để chỉnh sửa bố cục, hãy chọn mục đích trong danh sách bố cục và thêm mọi thành phần cần thiết từ bảng thành phần giao diện người dùng bằng cách kéo và thả chúng vào vùng canvas.

Trong khi chỉnh sửa bố cục, hãy nhớ rằng mẫu bao gồm thành phần Vùng chứa Trang không thể thay đổi. Điều này xác định vị trí của nội dung trang của bạn trong mẫu. Vùng chứa Trang được đánh dấu bằng màu xanh lục và không thể chứa các thành phần bên trong khi ở chế độ chỉnh sửa bố cục. Nội dung được xác định trực tiếp trên trang và kích thước Vùng chứa Trang được xác định bởi thành phần chính của nó.

Trang

Sau khi tạo các bố cục cần thiết, thời điểm tốt nhất để bắt đầu tạo các trang ứng dụng web. Sau khi tạo các bố cục cần thiết, thời điểm tốt nhất để bắt đầu tạo các trang ứng dụng web. Mỗi trang ứng dụng web cung cấp nội dung hiển thị trên trình duyệt web của người dùng theo URL mục tiêu.

Cây trang

Cây trang hiển thị cho bạn cấu trúc trang web của bạn — các trang trên trang web của bạn và các thư mục chứa các trang đó. Tại đây, bạn có thể thực hiện nhiều thao tác khác nhau và sắp xếp các trang và thư mục.

Để mở Cây trang, chọn tab thứ 3 từ thanh công cụ bên trái của Trình thiết kế giao diện người dùng hoặc nhấn phím 3. Tại đây sẽ hiển thị tất cả các trang ứng dụng của bạn.

Mỗi ứng dụng phải có ít nhất một trang. Khi bạn tạo một ứng dụng mới, một hoặc nhiều trang đã được tạo sẵn tùy thuộc vào mẫu ứng dụng đã chọn.

Bạn có thể thực hiện các hành động sau trên các trang và thư mục:

• lựa chọn,
• thêm trang hoặc thư mục mới,
• đổi tên,
• di chuyển trang và thư mục vào/ra thư mục,
• nhân bản,
• xóa bỏ.

Trang mục lục

Trang Index là trang đầu tiên của ứng dụng của bạn. Khi ứng dụng của bạn chạy, trang này sẽ được hiển thị đầu tiên nếu bạn không tạo bất kỳ chuyển hướng nào.

Trang Index đã đánh dấu biểu tượng Ngôi nhà trong cây trang và không thể chuyển sang trang khác. Theo mặc định, trang này được liên kết với bố cục mặc định được tạo tự động nhưng bạn có thể thay đổi nó trong Cài đặt trang.

Tạo trang mới

Để thêm một trang vào ứng dụng web của bạn:

1. Nhấn CTRL/⌘+P hoặc mở Cây trang (phím tắt 3 ) từ thanh công cụ bên trái của Trình thiết kế giao diện người dùng và nhấp vào nút Dấu cộng trên tiêu đề của bảng điều khiển.
2. Cung cấp URL Trang theo phương thức xuất hiện.
3. Chọn Thư mục gốc cho trang hoặc để trống trường này để đặt trang ở thư mục gốc.
4. Chọn Bố cục Trang .
5. Nhấp vào nút Tạo .

💡 Để xây dựng tuyến đường lồng nhau mà không cần tạo thư mục, hãy cung cấp đường dẫn đầy đủ đến trang đích trong trường URL Trang, ví dụ: cài đặt/hồ sơ. Trang Hồ sơ sẽ được tạo lồng vào thư mục Cài đặt trong trường hợp này.

Bạn có thể tạo các trang và thư mục không giới hạn cho ứng dụng web của mình.

🔔 Các ứng dụng web được xây dựng bằng AppMaster Studio tạo định tuyến ứng dụng theo URL trang, vì vậy, ở dạng tạo trang, hãy sử dụng URL trang ở định dạng chính xác và để hiểu rõ nhất, hãy sử dụng URL thân thiện.

Tạo thư mục mới

Bạn có thể tạo các thư mục để sắp xếp điều hướng và xây dựng bộ định tuyến phù hợp cho các trang. Để tạo một thư mục mới:

• Nhấn CTRL/⌘+SHIFT+P hoặc mở Cây trang (phím tắt 3) từ thanh công cụ bên trái của Trình thiết kế giao diện người dùng và nhấp vào nút Thư mục trên tiêu đề của bảng điều khiển.
• Cung cấp Tên thư mục theo phương thức xuất hiện.
• Chọn Thư mục gốc nếu cần thiết để tạo bộ định tuyến lồng nhau
• Nhấp vào nút Tạo .

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

Giao diện người dùng ứng dụng của bạn bao gồm các thành phần: trường nhập, nút, hình ảnh, hộp kiểm, lịch, hình ảnh và biểu tượng, mỗi thành phần phục vụ một mục đích cụ thể.

AppMaster cung cấp trình chỉnh sửa trực quan kéo và thả cho phép bạn chọn và đặt các thành phần trực tiếp trên trang thay vì viết mã và xem trước ngay lập tức.

Thêm phần tử

Để thêm một phần tử vào canvas:

1. Mở Bảng điều khiển thành phần giao diện người dùng với danh sách các thành phần giao diện người dùng (phím tắt 1 ).
2. Chọn phần tử cần thiết hoặc sử dụng thanh Tìm kiếm.
3. Kéo phần tử đã chọn vào trang hoặc khung bố cục.

Để đặt phần tử đang kéo bên trong mục tiêu, hãy thả phần tử lên trên các phần tử đích.

Để thêm một phần tử vào trước hoặc sau một phần tử, hãy kéo phần tử đó phía trên đường viền của mục tiêu cho đến khi dấu phân cách xuất hiện.

Dải phân cách phụ thuộc vào hướng của vùng chứa chính:

• Nếu vùng chứa chính Direction là Vertical , các phần tử sẽ được thêm từ trên cùng hoặc dưới cùng.
• Nếu vùng chứa chính Hướng là Ngang , các phần tử sẽ được thêm từ bên trái hoặc bên phải.

Tùy chỉnh các yếu tố

Mỗi thành phần bạn thêm vào khung vẽ đều được trang bị một bộ cài đặt có thể tùy chỉnh toàn diện. Với các thuộc tính phần tử, bạn có thể quản lý cả hình thức phần tử và dữ liệu sẽ được hiển thị.

Để cấu hình một phần tử:

• Chọn thành phần mục tiêu trên khung vẽ.
• Điều hướng đến bảng Giao diện, tab đầu tiên trên thanh bên phải.
• Trong bảng điều khiển, chọn mục Cài đặt cụ thể mà bạn muốn sửa đổi.
• Nhập giá trị ưa thích của bạn vào các trường được chỉ định.

Canvas phản hồi theo thời gian thực, hiển thị các điều chỉnh của bạn ngay lập tức.

Để được hướng dẫn thêm, hãy di con trỏ chuột lên một cài đặt nhanh chóng để hiển thị chú giải công cụ, cung cấp mô tả ngắn gọn về chức năng của cài đặt đó.

Ngoài các tính năng tương tác này, AppMaster còn nâng cao khả năng tùy chỉnh thông qua các khối quy trình kinh doanh đặc biệt, Đặt thuộc tính và Đặt dữ liệu . Các khối này cung cấp cấp độ truy cập nâng cao, cho phép bạn thay đổi cài đặt của từng thành phần theo chương trình trong ứng dụng web của mình.