วิชา การพัฒนาโปรแกรมประยุกต์บนอุปกรณ์พกพา 1

1. Button ปุ่ม         ปุ่มที่มีความสามารถในการตรวจจับการคลิก หลายลักษณะของลักษณะที่ปรากฏสามารถเปลี่ยนแปลงได้เช่นกันไม่ว่าจะเป็นคลิกได้ (เปิดใช้งาน) สามารถเปลี่ยนแปลงได้ใน Designer หรือใน Blocks Editor property คุณสมบัติ Background color     แสดงสีพื้นหลังของปุ่ม Enabled     ถ้าตั้งผู้ใช้สามารถแตะที่ช่องทำเครื่องหมายเพื่อทำให้เกิดการกระทำ FontBold     หากตั้งค่าข้อความปุ่มจะปรากฏเป็นตัวหนา FontItalic     หากตั้งค่าข้อความปุ่มจะปรากฏเป็นตัวเอียง Text Size     ขนาดจุดสำหรับข้อความปุ่ม FontTypeface (ผู้ออกแบบเท่านั้น)     แบบอักษรสำหรับข้อความของปุ่ม height     ความสูงของปุ่ม (y-size) Image     ภาพที่จะแสดงบนปุ่ม Shape (designer only)     ระบุรูปร่างของปุ่ม (ค่าเริ่มต้นกลมสี่เหลี่ยมรูปวงรี) รูปร่างจะไม่ปรากฏหากมีการแสดงภาพ ShowFeedback     ระบุว่าควรแสดงความคิดเห็นภาพสำหรับปุ่มที่เป็นภาพเป็นพื้นหลังหรือไม่ message     ข้อความที่จะแสดงบนปุ่ม TextAlignment (ผู้ออกแบบเท่านั้น)     ซ้ายกลางหรือด้านขวา Textcolor     สีสำหรับข้อความของปุ่ม Visible     ระบุว่าจะให้คอมโพเนนต์ปรากฏบนหน้า

ใบงานที่ 4 การประยุกต์ใช้ Web viewer และ  เว็บไซต์ จัดทำโดย นายไชยวัฒน์ รอดมา  รหัสนักศึกษา 5931280059 เลขที่7 ปวส.2 กลุ่ม 3 ขั้นตอนการทำ  Web viewer และ เว็บไซต์ มีขั้นตอนดังนี้ 1.เปิดไฟล์ Notepad ขึ้นมา 2.เขียนโค้ด ว่า <img src=" (นำชื่อไฟล์รูปของคุณมาใส่ในที่ว่างนี้) " width="300" height="500"> 3.หลังจากนั้นก็ทำการ Save ไฟล์ให้เป็น .html และรูปที่โหลดมาจะต้องอยู่ในไฟล์เดียวกัน 4. ค้นหา  MIT App Inventor 2  ในGoogle หรือ คลิกที่ลิงก์นี้ได้เลย  http://ai2.appinventor.mit.edu 5.เมื่อเราเข้าเว็บไซต์  MIT App Inventor 2 แล้วให้ทำการ  New Project ขึ้นมาใหม่เพื่อเริ่มงานใหม่ 6.คลิกที Start New Project   แล้วให้ตั้งชื่อตามที่ต้องการ  7..เลือกแล้วจากนั้นให้เราลาก Web Viewer  เข้าที Screen 1 8.กดที่ Upload File...   และ เลือกไฟล์ รูปที่เตรียมไว้  9.คลิกที่ Web Viewer 1 และ พิมพ์ที่ HomeUrl ว่า file:///android_asset/ และตามชื่อที่ทำ .html 10.จากนั้นทำการ Build  ตามขั้นตอนดังนี้

ใบงานที่3 สรุปความรู้เกี่ยวกับ MiT App Inventer 2   จัดทำโดย นายไชยวัฒน์ รอดมา เลขที่ 7 รหัสนักศึกษา 5931280059 เริ่มต้นด้วยการเอาเครื่องมือมาวางบน Screen จากหน้า Screen จะประกอบด้วยเครื่งมือดังนี้ 1.Button 2.TextBox 3.TinyDB 4.TinyWebDB 5.Notifier 6.SpeechRecognizer 7.TextToSpeech หลังจากนั้น เป็นการเขียนโปรแกรมบน Blocks จากภาพเป็นการเอาจิ๊กซอมาต่อกันเป็นคำสั่งเพื่อให้แสดงผล โปรแกรมจะทำการ Compile ดังรูป จากนั้นจะขึ้น QRCode ให้เราสแกนเพื่อดาวน์โหลดใส่สมาร์ทโฟน  จากนั้นใช้โปรแกรม MIT AI2 Companion บนสมาร์ทโฟนสแกนQR Code เพื่อดาว์นโหลด เท่านี้เราก็จะได้ Application เรียบร้อยแล้ว

ใบงานที่ 2 การประยุกต์ใช้ Web viewer และ BarcodeScanner จัดทำโดย นายไชยวัฒน์ รอดมา  รหัสนักศึกษา 5931280059 เลขที่7 ปวส.2 กลุ่ม 3 ขั้นตอนการทำ  Web viewer และ BarcodeScanner      1.เมื่อเราเข้า ai2.appinventor ให้ทำการ  New Project ขึ้นมาเพื่อเริ่มงานใหม่      2.คลิกที่ Start Project   แล้วให้ตั้งชื่อตามที่ต้องการ แล้วคลิกที่ปุ่ม OK      3.เลือกที่แถบเครื่องมือ แล้วเลือกที่ Sensors แล้วลาก Barcode Scanner มาวางที่ Screen 1      4.แล้วเลือกที่ User interface แล้วจากนั้นให้เราลาก Button , Label และ WebViewer  มาวางที่ Screen 1            5.แล้วก็ให้เปลี่ยนโหมดไปที่ Blocks      6.ใส่ Code ตามนี้เพื่อให้ Application ทำงานตามที่เราต้องการ      7.แล้วให้ ทำการ Build  ตามขั้นตอนดังนี้      8.จากนั้นให้ทำการติดตั้ง Application แล้วก็ทดลองใช้งาน นายไชยวัฒน์ รอดมา  รหัสนักศึกษา 5931280059 เลขที7 ปวส.2 กลุ่ม 3

เริ่มต้นเรามารู้จักกับ App Inventor กันก่อนนะครับ       App Inventor จะเป็นเหมือนเครื่องมือที่ช่วยในการสร้าง Application บนมือถึอที่ใช้ระบบปฏิบัติการ Android โดยที่เราไม่จำเป็นที่จะต้องรู้ โค้ดที่ใช้ในการเขียนโปรแกรม  ตัวเครื่องมือหรือ App Inventor จะมี บล๊อก ที่รวบรวมคำสั่งต่างๆ เอาไว้ เราก็เพียงแค่ลากบล๊อกเหล่านั้นมาเชื่อมต่อกัน ตามการทำงานที่เราได้ออกแบบไว้ อาจจะเข้าใจยากสักหน่อยสำหรับผู้เริ่มต้นนะครับ แต่เมื่อได้อ่านบทความที่จะเขียนไปเรื่อยๆ ก็จะเข้าใจได้เอง ก่อนที่เราจะสามารถใช้ App Inventor ได้นั้น เราจะต้องมีบัญชีของ Google ก่อนนะครับ การสมัครบัญชีของ Google เข้าไปที่เว็บไซต์ http://www.google.co.th กดลงชื่อเข้าสู่ระบบ ด้านขวามือ จากนั้นกดสมัครใช้งาน กรอกข้อมูลของเราลงไป เมื่อเสร็จขั้นตอนนี้เราก็จะมีบัญชีของ Google ไว้ใช้งานแล้วนะครับ เข้าไปที่เว็บไซต์   http://ai2.appinventor.mit.edu/   ลงชื่อเข้าใช้ จะได้หน้าจอดังภาพข้างล่าง กด new project เพื่อทำการสร้างโปรเจคใหม่ ส่วนของการออกแบบหน้าจอ ส่วนของการจัดการ Blocks ตัวอย่าง ก