Upload
others
View
16
Download
3
Embed Size (px)
Citation preview
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