mobile3-5

ใบงานที่ 3 การสร้างแอพเพื่อกำหนดแบบฟอร์มกรอกข้อมูล

วัตถุประสงค์ 

1. เพื่อศึกษาวิธีการสร้างแบบฟอร์มกรอกข้อมูลในแบบต่าง ๆ

2. สามารถบอกขั้นตอนการสร้างช่องกรอกข้อมูลสำหรับสมาร์ทโฟนได้

3. สามารถเขียนแอพเพื่อป้อนข้อมูลตามที่กำหนดได้

เนื้อหา

ให้นักศึกษา เขียนขั้นตอนการพัฒนาแอพด้วย App inventor เพื่อป้อนข้อมูลในช่องกล่องข้อความแบบต่าง ๆ ได้

การทดลอง

1.ให้บอกขั้นตอนการเข้าสร้าง App เพื่อกรอกข้อมูล

ในกล่องข้อความบนสมาร์ทโฟน

ขั้นตอนแรกเข้าไปที่ google แล้วเข้าไปที่  http://appinventor.mit.edu/explore/#

แล้วเข้าไปที่  ปุ่มสีส้มมุมขวามือ

จากนั้นก็กรอก Gmail เข้าไป

ขั้นตอนต่อไปเข้าไปที่  Projects และ Start new project

ตั้งชื่องาน mobile 3

สร้างตารางเสร็จแล้วคลิกที่ Spinner เพื่อใส่ข้อความ ตามรูปภาพ

คลิกที่ TextBox เพื่อใส่ข้อความ ตามรูปภาพ

คลิกที่ Label เพื่อใส่ข้อความ ตามรูปภาพ

สร้างตารางอีก1ตาราง คลิกที่ Layout แล้วเลือกตารางแนวนอน เพื่อใส่ข้อความ ตามรูปภาพ

แทรกรูปภาพ

คลิกที่ Checkbox เพื่อใส่ข้อความ ตามรูปภาพ

คลิกที่ ListPicker  เพื่อใส่ข้อความ ตามรูปภาพ

คลิกที่ Sharing เพื่อแสดงข้อความที่บันทึกไว้ ตามรูปภาพ

ทำตามรูปภาพทั้งหมด

เมื่อใส่ข้อความเสร็จเรียบร้อยแล้วคลิกที่ Blocks

2.สร้างแอพ ให้แสดงกรอกข้อมูลโดยมีไข ดังนี้

เตรียมแบบฟอร์มกรอกข้อมูลตามตัวอย่างในคลิป

A.เพิ่มเติมส่วนกรอกข้อมูลเพื่อป้อน

     i.ทักษะการใช้เครื่องคอมพิวเตอร์

          -อยู่ในระดับ []มาก []ปานกลาง []น้อย

     ii.ทักษะการใช้โปรแกรมคอมพิวเตอร์ (สามารถเลือกได้      มากกว่า 1 ข้อ)

          -[]Word []Excel []Power point []Visio []Access []Photoshop

     iii.ทักษะการซ่อมบำรุงคอมพิวเตอร์

          -[]มาก []ปานกลาง []น้อย

     iv.บันทึกสิ่งที่ต้องทำ

ไปที่ Build และเลือกอันแรก

จากนั้นเข้าโทรศัพท์ไปยังแอพ

เข้าไปที่ Scan QR code

ที่ตรงหน้าจอ

จากนั้นแอพที่เราเขียนก็จะไปแสดงผลบนโทรศัพท์

นางสาวทักศิณา ช่วยกาญจน์ สคฮ.2/3

วิชา การพัฒนาโปรแกรมประยุกต์
วิทยาลัยเทคนิคอุตรดิตถ์

DownLoad Link: (APK and AIA)