Tạo ứng dụng đầu tiên với AppInventor – HelloPurr

Ở hai bài trước mình đã hướng dẫn các bạn cách cài đặtcập nhập AppInventor 2. Hôm nay mình sẽ hướng dẫn các bạn tạo một ứng dụng đơn giản với AppInventor đó là app HelloPurr. HelloPurr là một ứng dụng đơn giản mà bạn có thể xây dựng trong một thời gian rất ngắn. Bạn tạo ra một nút có hình ảnh của một con mèo trên đó, và sau đó nhấp vào hình ảnh con mèo thì sẽ có một tiếng động “meo meo” được phát ra.

Bây giờ bạn đã thiết lập máy tính và thiết bị của mình, và bạn đã học được cách Designer và Blocks Editor hoạt động, bạn đã sẵn sàng để xây dựng ứng dụng HelloPurr. Tại thời điểm này, bạn nên mở Designer trong trình duyệt của bạn, trình soạn thảo khối mở trong một cửa sổ khác (sẽ xuất hiện dưới dạng biểu tượng cốc cà phê java trên thanh tác vụ hoặc dock của bạn) và một thiết bị Android hoặc một bộ mô phỏng Android được kết nối để các biên soạn Blocks.

Đầu tiên chọn các thành phần để thiết kế ứng dụng của bạn:

Các Thành phần Trình diễn Ứng dụng nằm ở phía bên tay trái của Cửa sổ Người thiết kế dưới Palette. Các thành phần là những yếu tố cơ bản mà bạn sử dụng để tạo các ứng dụng trên điện thoại Android. Chúng giống như các thành phần trong một công thức. Một số thành phần rất đơn giản, giống như thành phần Label, chỉ hiển thị văn bản trên màn hình hoặc thành phần Button (số 1) mà bạn gõ để bắt đầu chạy ứng dụng.

Các thành phần khác phức tạp hơn: Canvas (số 2) có thể giữ hình ảnh tĩnh hoặc hình động, cảm biến gia tốc hoạt động giống như bộ điều khiển Wii và phát hiện khi bạn di chuyển hoặc lắc điện thoại, các thành phần gửi tin nhắn văn bản, các thành phần chơi nhạc và video, các thành phần lấy thông tin từ các trang Web, v, v, v.

Để sử dụng một thành phần trong ứng dụng của bạn, bạn cần phải nhấp và kéo nó vào trình xem ở giữa Trình thiết kế . Khi bạn thêm một thành phần vào Viewer (số 1 hình bên dưới), nó cũng sẽ xuất hiện trong danh sách các thành phần ở phía bên tay phải của Viewer.

>

Thành phần (số 2 bên dưới) có các thuộc tính có thể được điều chỉnh để thay đổi cách thức thành phần xuất hiện hoặc ứng xử trong ứng dụng. Để xem và thay đổi các thuộc tính của một thành phần (số 3 bên dưới), trước hết bạn phải chọn thành phần mong muốn trong danh sách các thành phần của bạn.

Các bước để lựa chọn các thành phần và thiết lập các thuộc tính:

HelloPurr sẽ có một thành phần Button hiển thị hình ảnh kitty bạn đã tải về trước đó. Để hoàn thành việc này:

Bước 1. Từ bảng Basic, kéo và thả thành phần Button vào Screen1 (# 1). Để làm cho nút có hình ảnh của một con mèo, trong ngăn Properties, dưới Hình ảnh, nhấp vào văn bản “None…” và nhấp vào “Upload New …” (# 2). Một cửa sổ sẽ bật lên để cho phép bạn chọn tập tin hình ảnh. Nhấp vào “Browse” và sau đó điều hướng tới vị trí của tệp kitty.png là tệp ảnh có hình con mèo mà bạn đã chuẩn bị(# 3). Nhấp vào tệp kitty.png , nhấp vào “Open”, sau đó nhấp vào “OK”.

Bước 2. Thay đổi tên của Button: Xóa “Text for Button1”, để lại văn bản trống của nút để không có chữ nào trên ảnh con mèo. Bạn sẽ thiết kế giống như sau:

Nếu toàn bộ hình ảnh kitty không hiển thị, bạn có thể sửa lỗi này bằng cách đặt thuộc tính Chiều cao và Chiều rộng của nút để “Fill Parent”. Để thực hiện việc này, nhấp chuột vào thành phần Button, vào thanh Properties, di chuyển xuống dưới cùng để đến chỗ là Width và click vào chữ “Automatic …” để kích hoạt danh sách thả xuống. Chọn “Fill Parent”. Làm tương tự cho thuộc tính Height.

Bước 3. Từ bảng Basic, kéo và thả thành phần Label vào Viewer (# 1), đặt nó bên dưới hình ảnh kitty. Nó sẽ xuất hiện dưới danh sách các thành phần của bạn như Label1 .

Trong panel Properties , thay đổi thuộc tính Text của Label1 để hiển thị “Pet the Kitty” (# 2). Bạn sẽ thấy sự thay đổi văn bản trong Trình thiết kế và trên thiết bị của mình. Thay đổi FontSize của Label1 thành 30 (# 3). Thay đổi BackgroundColor của Label1 bằng cách nhấp vào hộp (# 4): bạn có thể thay đổi màu cho bất kỳ màu nào bạn muốn. Thay đổi TextColor của Label1 (# 5) sang bất kỳ màu nào bạn thích. Ở đây, màu nền được đặt thành màu xanh và màu chữ được đặt màu vàng.

Bước 4. Dưới Palette, nhấp vào  Media và kéo ra một thành phần Sound và đặt nó vào Viewer (# 1). Bất cứ nơi nào bạn thả nó, nó sẽ xuất hiện trong khu vực ở dưới cùng của Viewer đánh dấu Non-visible components. Trong ngăn Media, nhấp Add (# 2) Duyệt đến vị trí của tệp meow.mp3 mà bạn đã chuẩn bị trước đó và tải nó lên project này (# 3). Dưới cửa sổ Properties, thấy rằng các nguồn tài nguyên là  None . Nhấp vào chữ None … để thay đổi các thành phần của Sound1 Nguồn để meow.mp3 (# 4).

Lập trình với Blocks Editor

Cho đến nay, bạn đã sắp xếp màn hình và các thành phần của ứng dụng của mình trong Designer, nằm trong cửa sổ trình duyệt web. Để bắt đầu lập trình theo cách hoạt động của ứng dụng, bạn cần phải đi đến Blocks Editor. Nếu bạn không có một Blocks Editor đang chạy, hãy nhấp vào nút Open the Blocks Editor ở phía trên bên phải của cửa sổ Designer.

Lưu ý: Một cách dễ dàng để chuyển đổi giữa Blocks Editor và Designer là sử dụng thanh tác vụ hiển thị các ứng dụng đang chạy trên máy tính của bạn. Trình chỉnh sửa khối đang chạy cục bộ như là một chương trình java và được đại diện bởi biểu tượng Cốc cà phê. Trình thiết kế đang chạy trong trình duyệt web của bạn để bạn có thể truy cập vào nó bằng cách nhấp vào biểu tượng trình duyệt của bạn.

Khi bạn đã có Trình chỉnh sửa khối ở phía trước của bạn, hãy tiếp tục bước tiếp theo để bắt đầu lập trình ứng dụng của bạn bằng các khối.

Thực hiện phát âm thanh

Bước 1 . Dưới bảng màu My Blocks ở bên trái của Trình chỉnh sửa khối, nhấp vào ngăn kéo Button1 để mở nó. Kéo và thả Button1.Click khối trong khu vực làm việc (mở khu vực bên phải).

Những khối màu xanh lá cây được gọi là khối xử lý sự kiện. Trình xử lý sự kiện chỉ định cách điện thoại phản ứng lại các sự kiện nhất định: một nút đã được nhấn, điện thoại đang bị rung, người dùng đang kéo ngón tay lên trên, vv . Các khối xử lý sự kiện có màu xanh lá cây và sử dụng từ khi nào . Ví dụ, khi Button1.Click là một trình xử lý sự kiện.

Bước 2 . Nhấp vào ngăn kéo Sound1 và kéo khối Sound1.Play và kết nối nó với phần “do” của nút When1.Click. Các khối kết nối với nhau như các mảnh ghép và bạn có thể nghe thấy một âm thanh nhấp chuột khi chúng kết nối.

Các khối màu tím và xanh được gọi là khối lệnh, được đặt trong các trình xử lý sự kiện. Khi một trình xử lý sự kiện được thực thi, nó chạy chuỗi lệnh trong nó. Một lệnh là một khối xác định một hành động sẽ được thực hiện (ví dụ, chơi nhạc) khi sự kiện (ví dụ, nhấn Button1) được kích hoạt.

Khối của bạn sẽ giống như thế này vào thời điểm này:

Bây giờ bạn có thể thấy rằng khối lệnh là trong xử lý sự kiện. Bộ khối này có nghĩa là: “khi Button1 được nhấp, Sound1 sẽ phát.” Trình xử lý sự kiện giống như một loại hành động (ví dụ, một nút đang được nhấp vào), và lệnh chỉ định loại hành động và các chi tiết của hành động (ví dụ, phát âm thanh được chỉ định).

Hãy chạy thử! Khi bạn nhấp vào nút, bạn sẽ nghe thấy tiếng meo meo meo. Xin chúc mừng, ứng dụng đầu tiên của bạn đã chạy!

Tư vấn thiết kế web giá rẻ:

Hotline0988-485-300

Websiteshttp://web-giadinh.com/thiet-ke-web-gia-re-chuyen-nghiep/

 

tkw