Nội dung
Giới thiệu
MIT App Inventor là một ứng dụng web cung cấp người dùng nền tảng để lập trình ứng dụng android. Được phát triển bởi Google và đang được duy trì bởi viện công nghệ Massachusetts (MIT). Mục tiêu của App Inventor là giúp cho người dùng dễ dàng tạo ra các ứng dụng android mà không cần kiến thức lập trình. Bằng cách kéo thả các khối mã và sắp xếp chúng lại với nhau để tạo thành một ứng dụng.
Trong bài viết này. Chúng ta sẽ làm quen với App Inventor bằng cách tạo một ứng dụng báo thức đơn giản.
Chuẩn bị
- Trình duyệt web.
- Một tài khoản Google.
- Một điện thoại android.
Thực hiện
Đăng nhập bằng tài khoản Google
Để có thể sử dụng App Inventor, chúng ta cần sử dụng tài khoản Google để đăng nhập. Khi bạn truy cập đường dẫn sau http://ai2.appinventor.mit.edu, App Inventor sẽ yêu cầu bạn sử dụng tài khoản Google để đăng nhập.
Sau khi đăng nhập thành công, một trang web quản lý các dự án của bạn sẽ xuất hiện. Nếu như là lần đầu tiên đăng nhập, App Inventor sẽ có các gợi ý để người dùng nhanh chóng làm quen.
Để tạo một ứng dụng mới, nhấn vào nút Start new project ở góc trên bên trái của màn hình. Nhập tên mới cho ứng dụng rồi nhấn nút OK.
Thiết kế giao diện ứng dụng
Sau khi tạo một dự án mới, trình duyệt sẽ tự động chuyển đến cửa sổ làm việc. Có hai chế độ để làm việc, chế độ designer cho phép người dùng thiết kế giao diện ứng dụng bằng cách kéo thả các thành phần như nút nhấn, hình ảnh, thông báo… Và chế độ Blocks cho phép người dùng lập trình các hành vi của ứng dụng chẳng hạn như hiển thị thông báo khi người dùng nhấn vào một nút.
Trong ứng dụng báo thức, mình sẽ dùng các thành phần sau:
- Timepicker để người dùng nhập thời gian cần hẹn giờ.
- Button để người dùng xác nhận đồng ý bật báo thức.
- Clock để lấy thời gian của hệ thống trên điện thoại.
- Label để hiển thị các đoạn văn bản trên màn hình.
- Notifier để hiển thị một thông báo dạng pop-up cho người dùng.
Menu bên trái cung cấp cho người dùng các thành phần, các bạn chỉ việc kéo thành phần mình cần vào màn hình điện thoại. Menu ngoài cùng bên phải là thuộc tính của một thành phần, và cho phép người dùng chỉnh sửa, như tăng màu sắc và cỡ chữ, canh trái, canh phải…
Ở menu bên phải gần menu thuộc tính là danh sách các thành phần đang được sử dụng. Chúng ta có thể đổi tên một số thành phần để dễ dàng nhận biết và phân biệt.
Lập trình chức năng đặt báo thức
Sau khi thiết kế xong giao diện, chúng ta chuyển qua chế độ blocks để lập trình hành động cho ứng dụng.
Đầu tiên, chúng ta sẽ sử dụng khối variables (biến) để lưu giá trị thời gian hiện tại và thời gian cần báo thức. Khối initialize dùng để khai báo một biến mới với một tên cụ thể và một giá trị ban đầu.
Tiếp theo, lập trình sự kiện sao cho khi người dùng chọn xong thời gian thì hiển thị thời gian đã chọn lên màn hình. Để lấy thời gian, người dùng sẽ cần phải tương tác với timepicker. Do đó chúng ta sẽ lập trình sự kiện sau khi timepicker nhận được giá trị từ người dùng.
Trong nhóm khối trên, khối join sẽ lấy giá trị giờ lấy từ timepicker, ghép với dấu hai chấm. Sau đó, tiếp tục ghép với giá trị phút của timepicker, rồi thay nội dung văn bản của timepicker trên màn hình bằng đoạn văn bản vừa mới ghép.
Tiếp theo lập trình hành động khi người dùng nhấn nút Ok.
Khi được nhấn thì lưu lại thời gian báo thức và hiển thị một thông báo cho người dùng biết.
Để kiểm tra thời gian hiện tại có bằng với thời gian báo thức hay không, ta dùng khối Timer. Timer sẽ kiểm tra giá trị thời gian hiện tại với các giá trị thời gian báo thức. Nếu đúng điều kiện thì chuyển sang màn hình cảnh báo. Quá trình này được Timer thực hiện liên tục mỗi milli giây.
Thêm màn hình cảnh báo khi đến giờ
Quay lại với cửa sổ designer, chúng ta sẽ tạo thêm một màn hình mới có tên ScreenCanhBao.
Trong màn hình này, mình sẽ thêm thành phần Player để phát âm thanh báo thức. Sau đó tải lên một file âm thanh ở menu media.
Rồi chọn âm thanh cần phát cho thành phần Player. Chọn thêm thuộc tính loop để âm thanh được phát lặp lại.
Chuyển sang cửa sổ blocks. Chúng ta sẽ lập trình để khi màn hình được mở thì phát âm thanh ngay sau đó.
Và lập trình hành động tắt báo thức, rồi chuyển lại về màn hình thiết lập thời gian khi nhấn nút Ok.
Kết nối điện thoại với App Inventor
Trong quá trình lập trình, có những lúc chúng ta cần phải thử trên điện thoại thật. Do đó, App Inventor cung cấp ba chế độ xem thử cho người dùng. Người dùng có thể tạo một máy ảo để chạy thử chương trình. Hay kết nối với điện thoại bằng cáp USB hoặc thông qua mạng wifi.
Để kết nối với điện thoại, người dùng cần cài đặt ứng dụng MIT AI2 Companion trên Play store.
Kết nối điện thoại với App Inventor qua AI Companion
Nếu chọn cách kết nối qua mạng. Trên thanh menu của App Inventor, chọn Connect rồi chọn AI Companion. Trên điện thoại, vào ứng dụng MIT AI2 Companion, rồi nhập hoặc quét mã để kết nối.
Kết nối điện thoại với App Inventor qua USB
Nếu muốn kết nối qua cáp USB, thì cần cài đặt App Inventor Setup cho máy tính trước.
Trên điện thoại, người dùng phải bật chế độ nhà phát triển và USB debugging. Để bật chế độ nhà phát triển, trong phần thông tin của điện thoại. Tìm đến mục Build number và nhấn nhiều lần vào nó cho đến khi có thông báo “Bạn đã là nhà phát triển”. Sau đó, tìm đến tùy chỉnh cho nhà phát triển (developer options) trong cài đặt, rồi check vào USB debugging.
Sau đó Trên thanh menu của App Inventor, chọn Connect rồi chọn USB.
Kết luận
Vậy là chúng ta đã tạo ra một ứng dụng android bằng App Inventor. Để build ra file cài đặt apk, các bạn có thể chọn build trên menu của App Inventor.
