Ngày 12/7/2010, Google chính thức giới thiệu công cụ lập trình trực quan App Inventor2 dùng để phát triển phần mềm ứng dụng trên hệ điều hành Android. App Inventor2 là công cụ lập trình dành cho mọi ngƣời, kể cả trẻ em. Với công cụ App Inventor2, Google tạo điều kiện để mọi ngƣời có thể tự xây dựng phần mềm ứng dụng cho thiết bị di động dùng hệ điều hành Android.
29 App Inventor thực chất là một ứng dụng web, chạy bởi trình duyệt trên máy tính cá nhân. Tuy nhiên, ngƣời dùng vẫn phải cài đặt một phần mềm Java mang tên App Inventor2 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ử.
Hình 4.2: Giao diện và kết nối với điện thoại
4.2.2 Cách sử dụng
4.2.2.1 Cách khởi chạy App Inventor2 a. Sử dụng online
Truy cập vào trang web: http://ai2.appinventor.mit.edu
Lần đầu tiên đăng nhập vào trang này sẽ yêu cầu một tài khoản Google để đăng nhập. Sau khi đăng nhập thành công, chấp nhận các điều khoản từ trang web, cập nhật phiên bản mới thì giao diện của App hiện lên.
30
b. Sử dụng offline
Truy cập website: nguoithanhmien.blogspot.com download phần mềm App Inventor2 về máy (lƣu ý có 2 phiên bản dành cho Windows 64 bit và Windows 32 bit).
Sau khi cài đặt xong chƣơng trình, truy cập địa chỉ localhost:8888 để sử dụng. Giao diện tƣơng tự nhƣ Online, không khác gì phiên bản Online.
4.2.2.2 Tạo project mới
Sau khi giao diện của App hiện lên, click chọn vào Start new project để tạo đƣợc một project mới hoặc click vào Projects sau đó chọn Start new project.
Hình 4.4: Cách tạo một project mới
Tại đây sẽ đặt tên cho project mình muốn tạo (lƣu ý tên đƣợc đặt không có dấu).
Hình 4.5: Đặt tên cho project
31
Hình 4.6: Giao diện làm việc của App Inventor2
4.2.2.3 Giới thiệu các vùng làm việc
Có 4 vùng làm việc chính: Palete, Viewer, Components, Properties.
a. Palete
Là vùng chứa đựng các đối tƣợng dùng để đƣa vào project nhƣ: Nút bấm, hình ảnh, cảm biến, đồng hồ,..
Hình 4.7: Vùng làm việc Palete
b. Viewer
Là vùng mô phỏng màn hình điện thoại trên App, khi muốn hiển thị gì thì chỉ việc sắp xếp vào vùng này. Mọi thông tin sẽ đƣợc xem trực tiếp ở đây. Các đối tƣợng trên vùng Palete sẽ đƣợc sắp xếp và trình bày trên vùng này.
32
Hình 4.8: Vùng làm việc Viewer
c. Components
Là vùng chứa các đối tƣợng đƣợc kéo thả từ vùng Palete sang vùng Viewer. Đối tƣợng đƣợc chọn sẽ hiện thị ngay lập tức.
Hình 4.9: Vùng làm việc Components
d. Properties
Là vùng thuộc tính của các đối tƣợng trong Components, trong đó sẽ có các tùy chọn cho các đối tƣợng đó nhƣ tên, kích thƣớc, hƣớng căn chỉnh, màu nền….. Mỗi một đối tƣợng trong Components sẽ có những thuộc tính khác nhau.
33
4.2.2.4 Sử dụng các đối tƣợng
Để đƣa đối tƣợng vào dự án, chỉ cần kéo đối tƣợng cần lấy ở vùng Palete sang vùng Viewer rồi thả chúng vào đó.
Ví dụ: Sử dụng đối tƣợng là Button, sau khi kéo thả vào vùng làm việc Viewer, ngay lập tức trên vùng Components sẽ hiển thị đối tƣợng Button. Có thể đổi tên đối tƣợng vừa chọn bằng cách Click vào Rename phía bên dƣới. Ngay lập tức kế bên đó các thuộc tính của đối tƣợng Button sẽ hiển thị lên vùng Properties.
Hình 4.11: Sử dụng đối tƣợng
Theo đó chỉ cần thiết kế dự án theo ý tƣởng mà mình mong muốn.
a. Block
Là nơi ra lệnh cho điện thoại thực hiện 1 hành động nào đó và cũng là nơi tiếp nhận các thao tác từ điện thoại, sau đó sẽ xử lí thông tin và thực hiện hành động yêu cầu.
34 Góc trái là vùng chứa các khối lệnh.
Để thực hiện các lệnh điều khiển, chuyển sang Blocks bằng cách Click vào Blocks
ngay trên phía phải giao diện. Và giao diện mới hiện ra. Trên giao diện này bao gồm các khối Blocks chứa các lênh cơ bản, để thiết kế các hành động chỉ cần kéo thả các Blocks và ghép chúng lại với nhau.
b. Xuất file APK
Sau khi thực hiện xong các công việc theo nhƣ ý tƣởng, để có 1 ứng dụng chạy trên Android thì cần tạo ra file APK.
Chọn Build =>App (save.apk to my computer).
Hình 4.13: Cách chọn để xuất file APK
Sau khi dịch xong thì 1 file .apk sẽ đƣợc tự động Download về. Việc tiếp theo chỉ cần copy file này sang điện thoại rồi cài đặt để sử dụng.
Một cách khác đơn giản để sử dụng ứng dụng mà mình tạo ra không cần phải xuất file APK đó là truy cập vào CH Play, cài đặt ứng dụng MIT AI2 Companion.
Mỗi khi muốn sử dụng ứng dụng chỉ cần Click Connect=>AI Companion.
Hình 4.14: Cách chọn kết nối không cần xuất file APK
Ngay lập tức, 1 mã code QR đƣợc hiện lên tƣơng ứng với ứng dụng mà mình đang xây dựng.
35
Hình 4.15: Mã QR
Đồng thời mở App vừa cài đặt trên điện thoại Click vào scan QR code. Lúc đó, điện thoại sẽ tự đọc đƣợc mã code. Ứng dụng đang xây dựng tự động đƣợc cập nhật trên màn hình điện thoại.
Hình 4.16: Quét mã QR
Sau khi đã biết các thao tác cơ bản để sử dụng, đây là giao diện thiết kế App của nhóm:
36
Hình 4.18: Giao diện giới thiệu của App
37