Dạo này mình có ý tưởng viết một app Android cho công việc, nhưng về lập trình thì mình mù tịt. Google thì gặp một chương trình cho phép ta lập trình những ứng dụng đơn giản – AppInventor. Mình cũng có viết thử một vài app thì thấy nó cũng khá đơn giản nên chia sẻ với các bạn.
Bài đầu tiên của series giới thiệu AppInventor – Lập trình như xếp hình này mình sẽ giới thiệu tổng quan về AppInventor thông qua 1 app đơn giản. Mình cũng không chuyên coding nên cũng ko dám mạo muội đi sâu vào các kỹ thuật lập trình, mà chỉ hiểu sao viết vậy. Mục đích chỉ là giúp các bạn tạo được 1 app Android theo kiểu “xếp mình mì ăn liền” làm tiền đề giúp bạn đọc hứng thú hơn về lập trình nói chung.
Tổng quan về AppInventor
App Inventor do MIT (Viện Công nghệ Massachusetts) xây dựng và ra mắt vào tháng 7/2010. Với chương trình này, bạn không cần phải có bất cứ kiến thức nào về lập trình cũng có thể tạo các ra ứng dụng cho Android từ cơ bản đến nâng cao bằng những thao tác kéo-thả. Nó chạy trên web, không cần cài đặt và hoàn toàn miễn phí. Rất thích hợp cho các bạn mới học lập trình và các em học sinh.
Để mở chương trình, truy cập vào địa chỉ http://ai2.appinventor.mit.edu và đăng nhập bằng tài khoản Google của bạn.
Sử dụng các tính năng của AppInventor
Để tạo 1 project mới, bạn hãy nhấn nút Start new project, sau đó đặt tên cho project mới. Tên project không có khoảng trắng hoặc dấu tiếng Việt. Nhấn OK để tạo mới.
Khung thiết kế của AppInventor được chia làm 4 phần: Palette là nơi chứa các control (đối tượng), Viewer là khung giao diện design. Components chứa các control đang sử dụng và Properties là nơi thay đổi thuộc tính của Control.
Bạn nào đã từng tìm hiểu về lập trình Visual Basic 6 sẽ thấy có sự tương đồng giữa AppInventor và VB 6. Muốn sử dụng đối tượng nào thì kéo thả control từ Palette vào khung Viewer, sau đó chọn ở Components và thay đổi thuộc tính ở Properties. Rất đơn giản.
Xây dựng 1 app đơn giản với AppInventor
Mình sẽ cùng với bạn xây dựng 1 app đơn giản để dễ hiểu hơn về chương trình này nhé.
App ta sẽ xây dựng tạm gọi là SOS – 1 app chỉ có 1 button và khi nhấn vào đó, nó sẽ tự động gửi 1 tin nhắn khẩn cấp về 1 số máy định sẵn trong đó bao gồm toạ độ GPS và địa chỉ tương đối. Sau đó nó sẽ tự động gọi về cho 1 số điện thoại xác định.
1. Thiết kế giao diện
Ở phần Palette, kéo thả 1 button vào khung Viewer, sau đó đặt các thuộc tính BackgroundColor, Font Size và TextColor như hình (hoặc theo ý thích của bạn).
Để căn giữa cho nút SOS, bạn chọn Screen1 và thiết đặt các thuộc tính AlignHorizontal và AlignVertical thành Center.
Tiếp theo, kéo thả đối tượng LocationSensor (mục Sensor) và PhoneCall, Texting (mục Social) vào khung Viewer. Do các đối tượng này không phải là đối tượng thao tác được nên nó sẽ không hiển thị trong khung Viewer mà nằm ở mục Non-visible components (Các thành phần không hiển thị).
Thiết đặt các thuộc tính cho đối tượng:
- Đối tượng PhoneCall1 – Thuộc tính PhoneNumber: Điền số điện thoại bạn cần app gọi đến khi nhấn nút.
- Đối tượng Texting1 – Thuộc tính PhoneNumber: Thiết lập như trên.
Tiếp theo, ta sẽ chuyển sang viết code cho app hoạt động. Ở phần trên của khung Properties, bạn hãy nhấn nút Blocks để sang phần kéo thả các block của code.
2. Kéo-thả để “viết” code
Các block ở mục built-in là những block chung. Phần Control là những khối lệnh gắn với các control. Logic có những khối gắn với phép toán logic (True / false ; And, Or…) Math là các phép toán thông thường. Text để điền các khối văn bản và các hàm xử lý văn bản. Variables là khối gán các biến và Procedure để xử lý các thủ tục.
Bạn hãy để ý đến các mấu ghép ở các block. Nó giúp cho việc kéo thả và gắn kết các block hợp lý và đúng cấu trúc hơn. Đúng với tên gọi “Lập trình như xếp hình” 🙂
Tiến hành kéo thả các block để được khối code như hình.
Giải thích các câu lệnh:
When Button1.Click do: Khi nút Button1 được nhấn thì thực hiện hành động:
- Call PhoneCall1.MakePhoneCall: Kích hoạt tính năng Thực hiện cuộc gọi của PhoneCall1 đến số được đặt trong phần PhoneNumber của Properties.
- Set Texting1.Message to: Đặt thuộc tính Message (nội dung tin nhắn) của Texting1 thành: Ghép (join) các nội dung: “Tôi đang gặp nguy hiểm. Xin gọi lại cho tôi. Toạ độ: ” và Kinh độ (lấy từ LocationSensor1.Latitude), Vĩ độ (LocationSensor1.Longtitude), Địa chỉ (LocationSensor1.CurrenAddress).
- Cuối cùng là thực hiện hành động Gửi tin nhắn của Texting1.
Lưu ý: Để có thể thêm các mục của block Join (mục Text), bạn nhấn vào hình bánh răng trước chữ join sau đó kéo thả block string vào bên phải.
Như vậy cơ bản đã hoàn tất các tính năng của app. Cuối cùng ta sẽ biên dịch thành file .apk để cài đặt app lên smartphone Android.
3. Biên dịch và cài đặt app
Chuyển sang phần Thiết kế (Designer), chọn mục Screen1 và đặt thuộc tính AppName thành SOS (tên của ứng dụng); mục Icon bạn hãy upload 1 file PNG để làm icon của app.
Nhấn vào menu Build và chọn App for Google Play (save .apk to my computer) để lưu thành file .APK sau đó đưa vào điện thoại để cài đặt. Nếu bạn không có cáp hoặc không muốn chép vào điện thoại lằng nhằng, có thể chọn App for Google Play (provide QR Code for .apk) để hiển thị mã QR trên màn hình sau đó dùng 1 app quét QR Code trên điện thoại để quét và nhận đường link tải app về điện thoại.
Cuối cùng là cài đặt và chạy thử ứng dụng xem ứng dụng hoạt động như thế nào nhé!
Phát triển
Như vậy, thông qua 1 app đơn giản SOS, bạn đã làm quen với AppInventor. Chúng ta cũng có thể nghiên cứu để có thể làm 1 phần Setting đơn giản cho phép người dùng thay đổi số điện thoại gửi tin và gọi điện thay cho số mặc định. Đồng thời thay đổi nội dung tin nhắn tuỳ chọn.
Dự định app sau chúng ta sẽ nghiên cứu xây dựng 1 trình duyệt đơn giản. Mong nhận được sự hỗ trợ và góp ý của các bạn chuyên về lập trình để chúng ta hoàn thiện hơn nhé.
