CHƯƠNG 4 THI CÔNG HỆ THỐNG
4.5 Lập trình ứng dụng điện thoại
4.5.2 Phần mềm lập trình cho ứng dụng điện thoại
App Inventor là cơng cụ lập trình mở dành cho mọi người. App Inventor là một ứng dụng web, chạy bởi trình duyệt trên máy tính cá nhân. Người dùng cũng có thể cài đặt phần mềm giả lập Nox để sử dụng thử ứng dụng. Ngồi ra, có một phần mềm viết bằng ngơn ngữ Java, App Inventor Extras, có nhiệm vụ điều khiển điện thoại Android (kết nối với máy tính thơng qua cổng USB). Nhờ vậy, người dùng có thể nhanh chóng chuyển ứng dụng từ máy tính cá nhân qua điện thoại Android để chạy thử.
Để lập trình ứng dụng Android cho thiết bị này, chúng tôi quyết định sử dụng phần mềm lập trình MIT APP INVENTOR vì sự tiện lợi, dễ tiếp cận và tìm kiếm tài liệu hỗ trợ đối với những người khơng chun cũng như mới sử dụng. Ngồi ra, phần mềm này còn hỗ trợ ở cả hai chế độ online và offline. Trong đề tài này nhóm sử dụng phần mềm ở chế độ online để thiết kế ứng dụng điện thoại.
Hình 4.31:Giao diện tạo ứng dụng mới ở MIT App Inventor
Đầu tiên ta truy cập vào địa chỉ http://appinventor.mit.edu/, bắt đầu nhấn“Create App!” và đăng nhập bằng tài khoản Google để mở trang quản lý các project như hình4.31.Chọn My Projects > New Project để bắt đầu lập trình kéo thả.
Đầu tiên ta truy cập vào địa chỉ http://appinventor.mit.edu/, bắt đầu nhấn“Create App!” và đăng nhập bằng tài khoản Google để mở trang quản lý các project như hình4.31.Chọn My Projects > New Project để bắt đầu lập trình kéo thả.
Để tạo một ứng dụng, cần phải tạo project. Ta vào mục “My Projects” chọn “Start new project” để đặt tên cho project như hình 4.31. Sau khi đặt tên xong, chọn “OK” để đi đến giao diện thiết kế cho ứng dụng như hình 4.32
Hình 4.32:Giao diện thiết kế của MIT App Inventor
Giao diện cơng cụ thiết kế ứng dụng (hình 4.30) gồm 5 phần chính:
Ở khu vực thứ (1) bao gồm các components được phân ra nhiều nhóm chức năng như giao diện người dùng (User Interface), chứa những đối tượng dùng để thiết kế giao diện cho screen mà người dùng nhìn thấy được, bố cục, phương tiện truyền thông, lưu trữ, vẽ biểu đồ hay các giao thức truyền thông.
Ở khu vực thứ (2) như một thanh công cụ nhiều chức năng như tạo mới, liên kết mô phỏng, tạo file cài đặt.
Khu vực thứ (3) gồm các compoment đã lực chọn thiết kế giao diện. Mỗi compoment sẽ được có những đặc tính riêng, khác với các mẫu có sẵn.
Khu vực (5) là phần mà người dùng có thể nhìn thấy khi thiết kế, nó bao gồm phần (6) là các tác vụ người dùng chỉ sử dụng mà khơng đươc nhìn.
Hình 4.33:Giao diện thiết kế giao diện cho ứng dụng
Hình 4.34: Giao diện thiết kế ứng dụng 3 màn hình
Nếu muốn vẽ một biểu đồ hay đồ thị như hình 4.33 ta có thể nhấn giữ chuột và kéo khối Canvas từ phần Drawing and Animation đến thả ở màng hình điện thoại, thiết kế các tính chất, chẳng hạn chiều dài, rộng, màu sắc ở phần properties. Sau khi thiết kế giao diện chúng tơi được 3 màn hình như hình 4.34 với các chức năng khác nhau.
Bước 1: Thiết kế giao diện bằng cách kéo thả, sắp xếp các đối tượng ở mục “Palette” ở phía ngồi cùng bên trái của thanh cơng cụ (2) sao cho hợp lý và phù hợp với nhu cầu. Đồng thời chọn các thông số cho các đối tượng ở mục “Properties” ở phía ngồi cùng bên trái của thanh cơng cụ (2).
Bước 2: Tiến hành nhấn “Blocks” trên thanh cơng cụ (1) để chuyển sang giao diện lập trình chức năng cho các đối tượng được chọn trong giao diện (hình
4.35). Tại đây, để lập trình thì nhiệm vụ khá đơn giản là kéo thả và ghép nối
các code sao cho phù hợp.
Hình 4.35:Giao diện l p trình chức năng cho ứng dụng
Bước 3: Sau khi hồn thành thiết kế giao diện và lập trình chức năng cho ứng dụng, tiến hành biên dịch, đóng gói thành File có đi .APK bằng cách chọn “Build” ở thanh công cụ trên cùng của App Inventor. Và ở đây có 2 chế độ xuất File là “App (provide QR code for .apk) và App (save .apk to my computer) như hình 4.36. File .apk dùng để cài đặt chương trình vào điện
Hình 4.36:Các b ớc để xuất File .APK