Các lưu ý trong thiết kế & lập trình với App Inventor

Khi mình mới làm quen với App Inventor, mình cũng đã rất chật vật, dù là đã quen với lập trình dạng khối trước đó (trên Scratch). Mình cũng mắc các sai lầm ngớ ngẩn khiến thời gian làm xong một App kéo dài hơn nhiều so với dự tính cũng vì thao tác thừa. Bài viết này mình tóm tắt một số lưu ý dành cho các bạn mới làm quen với App Inventor, mong sẽ chỉ trước được cho các bạn một số ổ gà, giúp bạn giảm được phần nào thời gian thử sai lúc mới đầu nhé.

Thiết kế với App Inventor

1. Ngay từ đầu App nên có template ít nhất 2 Screen, nội dung chính của App không bao giờ nên nằm trên Screen1.

Screen1 chứa các thuộc tính quy định cho cả App mà các Screen khác sẽ không có (Title, ShowStatusBar, Theme,...). Cũng đừng cố đổi tên hoặc xóa Screen1 vì nó là screen mặc định sẽ được chạy đầu tiên khi App khởi chạy. Chính vì vậy mà lời khuyên của mình là bạn nên tạo ít nhất 2 Screen: Screen1 và ScreenApp. Screen 1 thường được dùng làm màn hình hiển thị Logo, thông điệp chào mừng và các thông tin chung về App. ScreenApp hoặc các Screen khác Screen1 mới nên được dùng để thiết kế và lập trình chức năng chính.
Nếu bạn đã lỡ dùng Screen1 làm Screen chứa chức năng chính của App và bây giờ cần mở rộng thì cũng có một số mẹo để đổi tên 1 Screen khác thành Screen1 nhưng liên quan đến việc sửa tập tin .aia và cũng không phải dễ làm.

2. Chọn đúng screen thì mới có đúng các component đã kéo vào.

Các screen và các component trên từng screen là độc lập với nhau. Do đó, mà bạn kéo một Button vào ScreenA thì nó chỉ có thể hiển thị trên ScreenA mà không hiển thị trên ScreenB.

3. Chỉ kéo các Component nào bạn thật sự cần vào phần thiết kế và xóa component đã kéo vào trước đó nhưng không sử dụng.

Điều này sẽ hỗ trợ bạn rất nhiều khi bạn chuyển qua lập trình chức năng vì bạn sẽ nhanh chóng tìm được component mình cần hơn và sẽ không lập trình nhầm cho một component nào đó không sử dụng.

4. Đổi tên Component thành tên có ý nghĩa.

Điều này sẽ hỗ trợ bạn rất nhiều khi bạn chuyển qua lập trình chức năng vì nếu để tên mặc định là Button1, Button2, Button3 thì sẽ rất khó nhớ Button đó dùng làm gì, dẫn đến bạn phải làm động tác thừa là mở và kiểm tra lại phần thiết kế. Nên đặt tên là ButtonLogIn, ButtonSignOut,... để gợi nhớ chức năng dễ hơn.

5. Trong tên Component luôn để loại (type) Component.

Điều này cũng sẽ giúp bạn dễ gợi nhớ về chức năng cũng như tìm đúng component trong phần lập trình nhanh hơn. Cả Label lẫn Button đều có thể đặt trùng tên, ví dụ LogIn, nhưng chỉ Button mới có Event Click thôi. Nên đặt tên component có tiền tố là loại component ở trước, ví dụ: ButtonLogin, LabelLogin, SliderRGB, ImageLogo...

6. Có thể tạo giao diện đẹp hơn bằng cách sử dụng phối hợp Layout và khoảng trống (Image component).

Giao diện đẹp cần có khoảng trống phù hợp giữa các nội dung. App Inventor không có component nào để tạo khoảng trống cả nhưng mình có thể sử dụng các linh kiện như Image, Label để tạo khoảng trống - bằng cách không điền nội dung nhưng vẫn khai báo kích thước cho các component này.

7. Chạy AI Companion và tham chiếu giao diện hiển thị thực tế trên điện thoại trong suốt quá trình thiết kế.

Thiết kế trên Viewer sẽ chỉ thể hiện tương đối mối quan hệ vị trí của các Component, phần kích thước có thể sẽ không chính xác. Bạn nên chạy "AI Companion" và hiển thị trực tiếp trên điện thoại để thấy rõ phần thiết kế hiện tại đang như thế nào.
Ngoài ra, đơn vị tuyệt đối bạn sử dụng trong thiết kế AppInventor là dp chứ không phải px. Đối với các điện thoại đời cũ thì 1dp = 1px nhưng với các điện thoại đời mới, độ phân giải cao thì 1dp có thể bằng 10px.

8. Đơn vị phần trăm (percent) trong AppInventor là so giữa kích thước component với với kích thước của màn hình.

Khi bạn đặt một Button được thiết lập chiều rộng là 50% vào một Layout đã được thiết lập chiều rộng là 50% thì chiều rộng của Button sẽ bằng chiều rộng của Layout và bằng nửa chiều rộng của màn hình. Button sẽ không rộng bằng 50% chiều rộng của Layout (thứ chứa nó) bạn nhé!

Lập trình với App Inventor

1. Chọn đúng screen thì mới có đủ & đúng các khối để lập trình.

Các block lệnh được chia làm 3 nhóm chính: Built-in group, Screen group và Any component group. Mở đúng nhóm sẽ khiến bạn tiết kiệm rất nhiều thời gian.

• Built-in group chứa các khối thao tác dữ liệu, điều khiển luồng dữ liệu, tạo mới một biến hoặc một hàm và tính toán. Kể cả khi App của bạn không có một Component nào thì vẫn phần lập trình vẫn có đủ các block thuộc Built-in group.
• Screen group chứa các block lệnh được phân loại theo component có trong screen đó. Việc này đồng nghĩa với việc nếu ScreenA không có component Button1 thì sẽ không thể tìm thấy các block liên quan đến component này. Tất nhiên, bạn muốn thay đổi thuộc tính hoặc tương tác với chức năng của component thì sẽ cần vào group này.
• Any component group chứa các block giúp thao tác hàng loạt với các component có cùng loại với nhau. Ví dụ, bạn có thể thay đổi kích thước của toàn bộ Button trong screen theo một quy tắc nào đó chỉ với 1 vài khối lệnh trong phần này mà không cần chỉ đích danh từng Button.

2. Chú ý đến màu sắc của các khối lệnh, mỗi màu có ý nghĩa riêng của nó.

Tất cả Component dù chức năng đơn giản thế nào đều có thuộc tính (Properties) và có thể sẽ có thêm sự kiện (Events) hoặc có thể thực hiện chức năng riêng (Procedures). Properties, Events và Procedures có mã màu riêng của nó. Properties là xanh lá nhạt hoặc đậm. Event là màu cam và Prodedure là màu xanh dương.
Các khối thuộc một mục con trong Built-in group cũng sẽ có cùng màu với nhau.

3. Hầu như tất cả các thuộc tính đều có thể thay đổi được bằng tay và bằng lệnh.

Liên quan đến Component thì cái gì đổi tay được trong phần thiết kế (Designer) thì có thể đổi được bằng lệnh và ngược lại. Do đó nếu bạn đang muốn thay đổi kích thước chiều rộng của một Button bằng lệnh mà lại chưa rành lắm là liệu có đổi được hay không thì cứ mở phần thiết kế ra xem trong component Button có thuộc tính nào đúng theo yêu cầu của bạn. Nếu có trong bảng thuộc tính, bạn sẽ có thể đọc/đổi được giá trị của thuộc tính đó bằng lệnh.

4. Có thể import các block từ một tấm hình vào trong phần lập trình nếu tấm ảnh được tạo ra phù hợp.

Bạn có thể lưu trữ, tái sử dụng code hoặc share code cho bạn mình và ngược lại bằng cách right click vào cụm block và chọn "Download Blocks as PNG". Sau đó, người nhận kéo thẳng tấm hình được xuất vào khu vực lập trình thì các block trong hình sẽ tự động được import vào.

5. Luôn quy định một khu vực chứa biến toàn cục (Global Variables) và khi tạo biến mới thì xếp ngay ngắn vào đó.

Lập trình dạng khối có một nhược điểm chí mạng là khi chương trình phình to và phức tạp thì người lập trình rất khó kiểm soát chương trình của mình. Ví dụ, bạn muốn tìm một biến đã được khai báo để sửa lại giá trị thiết lập ban đầu, nhưng do khối lệnh đó khá nhỏ và lẫn trong đám mây block nên bạn không thể tìm ra. Do đó, luôn cố gắng sắp xếp ngăn nắp ngay từ ban đầu.

Quà nhỏ tặng bạn

Mình gửi tặng các bạn, nhất là các bạn mới một template App Inventor App được tạo ra theo các tiêu chí lưu ý phía trên, file .aia. Bạn chỉ cần import vào, thực hiện một số hiệu chỉnh nhỏ là có thể nhanh chóng xây dựng nội dung App được rồi.
Template có 2 Screen: Screen1 và ScreenApp. Cả 2 Screen nay đều đã được thêm sẵn các Layout Component để giúp cho nội dung hiển thị hợp lý, cân đối. Screen1 đã được lập trình để có thể chuyển sang ScreenApp sau khoảng 8s. Bạn có thể để logo hoặc thông điệp của mình trên screen1, người sử dụng chắc chắn sẽ nhìn thấy và có thời gian để đọc trước khi vào phần chương trình chính của App.