0

HƯỚNG DẪN HỌC SINH TRÌNH ỨNG DỤNG LÀM TÀI LIỆU HỌC

TẬP BẰNG APP INVENTOR 2 CHO THIẾT BỊ DI ĐỘNG

“Trích sản phẩm đạt giải 3 lĩnh vực cuộc thi KHKT năm 2017.

Giáo viên hướng dẫn: Lê Văn Hưng”

Việc đổi mới thi THPT quốc gia như hiện nay yêu cầu lượng tài liệu vô

cùng lớn trong quá trình học tập suốt các năm học THPT trong khi hiện nay

mạng internet và thiết bị di động chưa bao giờ được sử dụng phổ biến đến như

vậy.

Lập trình ứng dụng cho thiết bị di động đang là hiện tượng, đang là xu thế

của xã hội hiện đại, những tưởng công việc này chỉ dành cho những lập trình

viên có trình độ công nghệ thông tin xuất xắc. Nhưng không hẳn thế với App

Inventor2 của nhà phát triển Google thì đó chỉ như trò chơi xếp hình bằng cách

xếp các khối lệnh (blocks) với nhau theo 1 quy luật nhất định.

Giới thiệu về app inventor

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 Inventor dùng để phát triển phần mềm ứng dụng trên hệ điều hành Android.

App Inventor là công cụ lập trình dành cho mọi người, kể cả trẻ em.

App Inventor là một ứng dụng trên nền web giúp bạn có thể tạo ứng dụng

Android. Ban đầu được cung cấp bởi Google, hiện tại được duy trì bởi Viện

Công nghệ Massachusetts (MIT).

Được công bố dưới dạng phần mềm tự do (free software), App Inventor

đem lại sự thích thú và đa mê cuồng nhiệt dành cho những người yêu thích công

nghệ, khám phá công nghệ. App Inventor đã trở thành hiện tượng chưa từng có

trong lĩnh vực lập trình cho thiết bị di dộng.

Cài đặt

* Yêu cầu cơ sở

- Máy tính sử dụng 1 trong những hệ điều hành sau: Windows XP, Windows

Vista, Windows 7, Mac OS X 10.5, 10.6, Ubuntu 8+, Debian 5+ .

- Java 6 trở lên.

1

- Trình duyệt web sử dụng phải là 1 trong các phiên bản sau: Apple Safari 5.0

trở lên, Firefox 3.6 trở lên, Google Chrome 4.0 trở lên, Microsoft Internet

Explorer 7 trở lên.

- Tài khoản Google để đăng nhập vào website App Inventor.

- 1 số phần mềm về chuyển đổi font và định dạng văn bản, Paint,

Convertdoc2html, Notepad++, Photoshop Online…

- Thiết bị di động sử dụng hệ điều hành Android để test ứng dụng khi hoàn

thành.

Hướng dẫn thực hiện

Tải file cài đặt theo đường dẫn video :

http://nguoithanhmien.blogspot.com/2015/10/mit-app-inventor-2-server-offline-

tao.html

Cài đặt theo hướng dẫn của video:

https://www.youtube.com/watch?v=h3nW5D-hY4I

Thứ tự cài đặt

1. Cài đặt file AI2U 32bit (64 bit)v3.9

2. Cài đặt file AI2 Starter 3.9

3. Giả lập: copy file MIT ai2 2.32 vào C\AI2 chọn replace

4. Tải về và cài đặt ứng dụng ai2 companion trên CH Play

5. Có thể truy cập vào trang http://localhost:8888/ để kết nối giả lập với điện thoại

qua Ai companion sử dụng sever offline ai2

Truy cập địa chỉ để bắt đầu sử dụng :

http://ai2.appinventor.mit.edu/?locale=en#4823252655144960 đăng nhập bằng

tài khoản gmail

2

App Inventor2 cần liên kết với tài khoản Google của bạn. Bạn bấm Cho phép để

tiếp tục.

Sử dụng App Inventor2

Giao diện của App Inventor2 có dạng như sau:

Bấm vào để bắt đầu tạo project mới

3

a. Giao diện

Giao diện của thể chia ra thành 4 thành phần chính:

1: Palette: Chứa các đối tượng để thiết kế ứng dụng

2: Properties: Chứa các thuộc tính của đối tượng đang được chọn.

3: Screen Viewer: Nơi cho phép thiết kế screen cho ứng dụng của mình

bằng cách kéo thả các đối tượng vào.

4: Components: Nơi bạn quản lý screen và chế độ thiết kế / khối lệnh.

b. Chế độ làm việc

Chế độ làm việc có hai chế độ:

Designer: Dành cho nhà thiết kế

Blocks: Dạng khối lệnh

Chế độ Blocks có dạng:

4

Khối lệnh Code blocks trong App inventor

Chế độ làm việc Code blocks cho phép bạn tạo ra các lệnh thực thi và xử lý cho

ứng dụng của mình.

c. Vùng làm việc

Vùng làm việc của Blocks có thể chia thành 4 phần như sau:

5

1 Blocks: Vùng chứa những khối lệnh đề xuất từ một đối tượng mà bạn

đã chọn từ Blocks, bạn có thể kéo thả những khối lệnh này vào vùng làm việc

thật sự để trở thành lệnh cho ứng dụng thực thi.

2 Viewer: Những khối lệnh đã được kéo ra từ những khối lệnh đề xuất.

Ứng dụng sẽ thực thi những khối lệnh này.

3: Backpack: Giúp bạn sao chép và dán các khối lệnh đến màn hình khác

hoặc project khác.

4: Thùng rác: Để xóa những khối lệnh, bạn chỉ cần kéo thả chúng vào

thùng rác này.

Lập trình ứng dụng

- Soạn thảo 1 file word có nội dung cần đưa lên, ví dụ:

- Chuyển sang định dạng html bằng phần mềm doc2html, hoặc save as trong

Microsoft Word, chọn Web page.

- Sử dụng notepad ++ chỉnh sửa (đối với file chứa nhiều công thức toán).

- Up file html lên http://ai2.appinventor.mit.edu/

- Trình bày app(AboutScreen, AppName, BackgroundImage, Icon..)

6

- Tiếp theo sử dụng 1 trong những nhóm lệnh tích hợp sẵn (Build-in) gồm

Control là nhóm lệnh liên quan đến các câu lệnh điều kiện, điều khiển,

vòng lặp,...

Logic là những nhóm giá trị liên quan đến logic như true, false, phủ định,

các phép so sánh, ...

Math là nhóm lệnh, giá trị liên quan đến tính toán, con số, ...

Text là nhóm lệnh những câu lệnh xử lý và làm việc với chuổi, xâu ký tự,

Lists là nhóm lệnh làm việc với danh sách

Colors là nhóm lệnh làm việc với màu sắc

Variables là nhóm giúp bạn tạo, khai thác và xử lý các biến (toàn cục

hoặc địa phương)

Procedure giúp bạn xây dựng chương trình con, thủ tục, ...

Thao tác dành cho đối tượng

Với những khối lệnh bạn đã kéo ra vùng làm việc thì khi bạn chuột phải vào nó

sẽ hiện lên một menu chứa những đề xuất cho bạn lựa chọn:

Duplicate

Lệnh này giúp nhân đôi khối lệnh, tạo ra một khối lệnh mới giống hệt như khối

lệnh mà bạn đã lựa chọn.

7

Collapse Block / Expand Block

Đề xuất này giúp bạn Thu gọn / Mở rộng khối.

Với trường hợp bạn làm việc với lượng lớn khối lệnh, trong khối lệnh lại chứa

những khối lệnh con. Bạn có thể thu gọn nó lại và mở rộng khi cần thiết.

Khi khối lệnh bạn chưa được thu gọn thì đề xuất sẽ hiện Collapse Block:

Khối lệnh chưa được thu gọn Khối lệnh sau khi được thu gọn

Khi khối lệnh đã được thu gọn rồi thì đề xuất sẽ hiện Expand.

Disable Block / Enable Block

Đề xuất này giúp bạn có thể vô hiệu hóa / kích hoạt khối lệnh.

Với những khối lệnh bạn không muốn ứng dụng thực hiện nhưng vẫn muốn giữ

nó trên vùng làm việc thì bạn chọn Disable Block.

Khi bạn muốn cho ứng dụng thực hiện khối lệnh vừa vô hiệu hóa thì bạn

chọn Enable Block:

Khối lệnh bị vô hiệu hóa Khối lệnh được kích hoạt

Add to Backpack

Giúp bạn thêm khối lệnh đã chọn vào trong Backpack. Con số nằm trong dấu

ngoặc đơn là số lượng các khối lệnh hiện có trong Backpack.

Delete "n" blocks

Số lượng n tùy thuộc vào số khối lệnh con có trong khối lệnh đã chọn.

Chọn đề xuất này sẽ khối lệnh đang chọn và những khối lệnh con mà nó chứa.

Lệnh này tương đương với việc bạn kéo thả khối lệnh vào thùng rác.

8

Dành cho vùng trống

Khi bạn chuột phải vào vùng trống (không có khối lệnh) thì sẽ hiện lên menu

như thế này:

Download Blocks as Image: Cho phép bạn tải về hình ảnh biểu diễn các

khối lệnh giống như bạn nhìn thấy trên vùng làm việc.

Collapse Blocks: Thu gọn tất cả các khối lệnh có trên vùng làm việc.

Expand Blocks: Mở rộng tất cả các khối lệnh có trên vùng làm việc.

Arrange Blocks Horizontally: Sắp xếp các khối lệnh theo chiều ngang.

Arrange Block Vertically: Sắp xếp các khối lệnh thành chiều dọc.

Sort Blocks by Category: Sắp xếp các khối lệnh theo danh mục.

Paste All Blocks from Backpack: Dán tất cả các khối lệnh có trong

Backpack ra vùng làm việc.

Copy All Blocks to Backpack: Sao chép tất cả các khối lệnh có trên

vùng làm việc vào trong Backpack.

Empty Backpack: Xóa hết những khối lệnh có trong Backpack

- Với Palette Button và WebWiewer (Chức năng hiển thị nội dung 1 trang Web)

+ Màn hình số 1(Screen1)

9

Sử dụng 2 thẻ blocks có lệnh như sau:

+ Khi màn hình số 1 hiển thị thì ảnh ADL.jpg sẽ hiển thị cùng.

+ Khi chạm vào button1 thì nó chuyển sang màn hình 2(Screen2) để hiển thị nội

dung.

Màn hình số 2 có blocks:

Thẻ blocks này có nghĩa như sau:

+ Khi màn hình 2(Screen2) hiển thị thì nó sẽ gọi file hd.htm hiển thị cùng.

+ Khi chạm vào Button1 nó sẽ đưa lên đầu trang nội dung.

- Với chức năng hiện thị danh sách các nội dung trang web trong cùng 1 screen

thì thẻ block của nó phức tạp hơn (xem cụ thể video)

* Chú ý

- Thực hiện trong lúc lập trình:

file:///mnt/sdcard/AppInventor/assets/<tên file >.html

- Trước khi buil ra file *. Apk (định dạng app ), thay đổi đường dẫn thành:

file:///android_asset/<tên file >.html

10

Kết quả

Ứng dụng được lập trình từ App inventor2 là những ứng dụng(app) có

định dạng file *.apk