App Inventor

วันศุกร์ที่ 1 สิงหาคม พ.ศ. 2557

เริ่มต้นกับ MIT AppInventor 2 Beta

สวัสดีทุกคน ไม่ได้เจอกันเสียนานเลยนะครับ ไม่ได้หายไปไหนครับ แค่ทำงานที่มันได้ตังก์ก่อนเก็เลยไม่มีเวลามาเขียนบล็อกเพิ่มเติมนะครับ แต่วันนี้ว่างๆอากาศดี เลยอยากจะลองมาสัมผัสมันดูอีกสักครั้ง ช่วงที่ผ่านมาเห็นอาจารย์หลายๆท่าน นำไปสอนเด็กๆ ก็เลยคิดว่าอยากจะขอมีส่วนร่วมในการช่วยเหลือสังคมหน่อย อิอิ วันนี้เลยมาจะขอแนะนำ app inventor เวอร์ชั่น 2 ซึ่งเป็นเวอร์ชั่น ปัจจุบันที่ทาง MIT เขาพัฒนาขึ้นมาเพื่อให้เหล่าบรรดานักพัฒนาแอพแอนดรอยด์ตัวน้อยๆอย่างเรา ได้เล่นกันดู มาเริ่มต้นเลยแล้วกันครับ

ตอนนี้จะไม่ขอพูดถึงเรื่องเก่าๆแล้วนะครับ เพราะถือว่าผมได้เขียนเรื่องราวเกี่ยวกับพื้นฐาน พร้อมทั้งทำคู่มือเบื้องต้นให้ไปศึกษากันนานแล้ว ขอพูดเรื่องใหม่เลยแล้วกันครับ

เริ่มต้นเข้าไปที่ ai2.appinventor.mit.edu ก่อนนะครับ เกือบลืมไปตัวนี้รันบนอินเตอร์เนตนะครับ เพราะฉะนั้นต่อเนตด้วยนะครับ ส่วนตัวออฟไลน์ เดี๋ยวจะมาว่ากันอีกทีเพราะมีอาจารย์เก่งๆ ทำไว้ให้ดาวน์โหลดไปศึกษาครับ

หน้าต่างนี้จะให้ใส่บัญชีของ google เข้าไปนะครับ บัญชีของ gmail ก็ได้นะครับถ้าใครมีอยู่แล้ว ก็ใส่ได้เลย หรือจะสมัครใหม่ก็ได้ครับ

จากนั้นเมื่อเข้าได้แล้ว จะปรากฏดังภาพ คลิก continue เพื่อไปต่อครับ

จะมีข้อความแสดงการต้อนรับขึ้นมา

เริ่มต้นสร้างโปรเจ็คใหม่ครับ

ตั้งชื่อให้เรียบร้อยจากนั้นคลิกที่ OK

หน้าต่างหลักในการออกแบบและพัฒนาโปรแกรมบน AppInventor ครับ

เครื่องมือเดิมๆ และเครื่องมือตัวใหม่ๆที่เพิ่มขึ้นมา ซึ่งเดี๋ยวเราจะว่ากันอีกครั้งครับ

หน้าต่างสำหรับออกแบบหน้าตาโปรแกรมครับ ยังเหมือนเดิม

ส่วนประกอบของแอพต่างๆจะแสดงรายชื่อที่ตรงนี้ครับ

เครื่องมือสำหรับปรับแต่ง ตั้งค่าคุณสมบัติของเครื่องมือต่างๆที่ใช้ในแอพพลิเคชั่นของเราครับ เช่นการปรับแต่ง ตัวหนังสือ ขนาด สี พื้นหลัง แนวตั้ง แนวนอน เป็นต้นครับ

ภาพและเสียงที่ใช้ในแอพพลิเคชั่นของเรา จะถูกอัพโหลดและแสดงรายชื่อที่ตรงนี้ครับ

เมนูบาร์สำหรับ บันทึก เปิดโปรแกรม การนำเข้าซอสไฟล์ครับ

เมนูสำหรับการเชื่อมต่อโปรแกรม เพื่อแสดงผลออกไปยังอีมูเลเตอร์ ไวไฟ และผ่านหน้าจอโทรศัพท์ครับ

เมนูนี้ใช้สำหรับสร้างไฟล์ติดตั้งเป็นไฟล์ที่ได้จากพัฒนาครับ ได้นามสกุลเป็น .apk

เมนูช่วยเหลือ จะแสดงข้อมุลเรื่องราวต่างๆ เกี่ยวกับตัว AppInventor ครับ ว่างๆก็เข้าไปศึกษาดูครับ ทุกอย่างอยู่ที่นี่หมด ผมไม่เก่งอังกฤษครับ อ่านไม่ออก อิอิ

ถ้าต้องการออกจากระบบ ยกเลิกการทำงาน ให้คลิกเลือก Sign out ได้เลยครับ

มาดูเครื่องมือที่ใช้เขียนโค๊ดกันนะครับ ก่อนอื่นต้องคลิกเลือกไปที่ปุ่มคำสั่ง Blocks ซึ่งอยู่ด้านขวามือก่อนนะครับ ถึงจะขึ้นหน้าต่างนี้มา อันนีคือข้อแตกต่างจากเวอร์ชั่นก่อนครับ เพราะตัวเดิมนั้นต้องติดตั้งเครื่องมือยุ่งยาก อีกอย่างมักค้างตอนเรียก block editor ขึ้นมาใช้งานนี่แหละครับ ส่วนตัวนี้สามารถคลิกเลือกเปลี่ยนจากหน้าต่างออกแบบกับหน้าต่างการเขียนโค๊ดคำสั่งได้เลยครับ

Block Editor

ขอฝากบทความนี้ไว้แค่นี้ก่อนนะครับ เอาไว้มีเวลาจะมารีวิว เครื่องมือใหม่ตัวใหม่ๆ นะครับ

วันเสาร์ที่ 29 มิถุนายน พ.ศ. 2556

ลิงค์ ดาว์นโหลด

ดาวน์โหลดโปรแกรม ไฟล์จำเป็น คู่มือ

วันอังคารที่ 11 มิถุนายน พ.ศ. 2556

Screen Arrangement Components

Screen Arrangement Components

เครื่องมือที่ช่วยในการจัดวางตำแหน่ง ซึ่งจะใช้ในการออกแบบหน้าตาโปรแกรม
แบ่งได้เป็น 3 รูปแบบ ดังนี้

1. Horizontal Arrangement การจัดวางเครื่องมือต่างในรูปแบบแนวนอน

2. Table Arrangement การจัดวางเครื่องมือต่างๆในรูปแบบตาราง

3. Vertical Arrangement การจัดวางเครื่องมือต่างๆในรูปแบบแนวตั้ง

1) Horizontal Arrangement การจัดวางรูปแบบของเครื่องมือในแนวนอน
เครื่องมือต่างๆที่อยู่ภายใน Horizontal Arrangement จะถูกวางเรียงต่อๆกันในแนวนอน

วางเครื่องมือ Button ไปไว้ใน Horizontal Arrangement ซึ่งจะเห็นได้ว่าเครื่องมือที่อยู่ใน Horizontal Arrangement นั้นจะถูกจัดวางตำแหน่งในรูปแบบของแนวนอน

Properties การปรับแต่งคุณสมบัติต่างๆ ก็สามารถทำได้

Align Horizontal และ Align Vertical เป็นการจัดรูปแบบเครื่องมือต่างๆที่อยู่ใน Horizontal Arrangement ให้มีตำแหน่งตามต้องการ ค่าปกติของ Align Horizontal จะเป็น Left ชิดซ้าย ซึ่งสามารถปรับให้ Center กึ่งกลาง หรือว่า Right ชิดขวา ได้ แต่ก่อนที่จะปรับตำแหน่งให้กึ่งกลางหรือชิดขวาได้นั้น เราจำเป็นต้องปรับความกว้าง Width ให้มีขนาด Pixel ตามที่ต้องการ หรือเป็น Fill parent ก่อน

Visible การตั้งค่าการแสดงผลการทำงานของเครื่องมือ สามารถเลือกได้คือ showing แสดงผล hidden ซ่อนไว้ไม่แสดงผล ซึ่งในการเขียนโปรแกรมนั้นจะใช้คำสั่ง Visible true เพื่อให้แสดง และ Visible False เพื่อไม่ให้แสดงผล

Width ปรับขนาดความกว้างของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความกว้างของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

Height ปรับขนาดความสูงของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความสูงของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

2) Table Arrangement การจัดวางรูปแบบของเครื่องมือในลักษณะของตาราง

เครื่องมือต่างๆที่อยู่ภายใน Table Arrangement จะถูกวางเรียงในรูปแบบของตารางคือมีทั้งแนวตั้งและแนวนอน ซึ่งเครื่องมือต่างๆที่วางได้นั้น จะวางตามจำนวนที่กำหนดไว้ใน Properties Column และ Rows

วางเครื่องมือ Button ไปไว้ใน Table Arrangement ซึ่งจะเห็นได้ว่าเครื่องมือที่อยู่ใน Table Arrangement นั้นจะถูกจัดวางตำแหน่งในรูปแบบของตาราง

Properties การปรับแต่งคุณสมบัติต่างๆ ก็สามารถทำได้

Columns กำหนดขนาดจำนวนของคอลัมน์

Rows กำหนดขนาดจำนวนของแถว

Visible การตั้งค่าการแสดงผลการทำงานของเครื่องมือ สามารถเลือกได้คือ showing แสดงผล hidden ซ่อนไว้ไม่แสดงผล ซึ่งในการเขียนโปรแกรมนั้นจะใช้คำสั่ง Visible true เพื่อให้แสดง และ Visible False เพื่อไม่ให้แสดงผล

Width ปรับขนาดความกว้างของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความกว้างของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

Height ปรับขนาดความสูงของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความสูงของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

3) Vertical Arrangement การจัดวางรูปแบบของเครื่องมือในแนวตั้ง
เครื่องมือต่างๆที่อยู่ภายใน Vertical Arrangement จะถูกวางเรียงต่อๆกันในแนวตั้ง

วางเครื่องมือ Button ไปไว้ใน Vertical Arrangement ซึ่งจะเห็นได้ว่าเครื่องมือที่อยู่ใน Vertical Arrangement นั้นจะถูกจัดวางเรียงต่อๆกัน ในรูปแบบของแนวตั้ง

Properties การปรับแต่งคุณสมบัติต่างๆ ก็สามารถทำได้

Align Horizontal และ Align Vertical เป็นการจัดรูปแบบเครื่องมือต่างๆที่อยู่ใน Vertical Arrangement ให้มีตำแหน่งตามต้องการ ซึ่งค่าปกติของ Align Horizontal จะเป็น Left ชิดซ้าย ซึ่งสามารถปรับให้ Center กึ่งกลาง หรือว่า Right ชิดขวา ได้ แต่ก่อนที่จะปรับตำแหน่งให้กึ่งกลางหรือชิดขวาได้นั้น เราจำเป็นต้องปรับความกว้าง Width ให้มีขนาด Pixel ตามที่ต้องการ หรือเป็น Fill parent ก่อน

Visible การตั้งค่าการแสดงผลการทำงานของเครื่องมือ สามารถเลือกได้คือ showing สั่งให้แสดงผล hidden ซ่อนไว้ไม่แสดงผล ซึ่งในการเขียนโปรแกรมนั้นจะใช้คำสั่ง Visible true เพื่อให้แสดง และ Visible False เพื่อไม่ให้แสดงผล

Width ปรับขนาดความกว้างของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความกว้างของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

Height ปรับขนาดความสูงของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความสูงของหน้าจอ หรือจะเลือกกำหนดขนาดเอง โดยการกำหนดค่าเป็นจำนวนพิกเซลก็ได้

วันเสาร์ที่ 25 พฤษภาคม พ.ศ. 2556

แนะนำ AppInventor Offline เวอร์ชั่น 1.5

บทความนี้จะพูดถึงเรื่องการเปลี่ยนแปลง อย่างเห็นได้ชัด กับ app inventor ที่ทำงานในแบบ offline กับเวอร์ชั่น 1.5 แต่มีการเปลี่ยนแปลงหน้าตาโปรแกรม และรูปแบบการแสดงผล เริ่มกันเลยครับ

การเข้าใช้งานยังเหมือนเดิมครับ localhost : 8888

การยอมรับข้อตกลงเพื่อเข้าใช้งาน ก็ยังเหมือนเดิม

การสร้างโปรเจ็คใหม่ก็เหมือนเดิมครับ

มุมมองหลักการออกแบบเปลี่ยนไปเล็กน้อย

ตำแหน่งที่อยู่รายชื่อคอมโพเน้นท์กับตำแหน่งมุมมองออกแบบ เวอร์ชั่นเก่ากับเวอร์ชั่นนี้ มันสลับที่กัน

เราสามารถเลือกสลับการใช้งานหน้าต่าง Designer (การออกแบบ) กับ Blocks Editor (Code)ได้เลย โดยไม่ต้องเปิดโปรแกรม Block Editor ขึ้นมาอีกเหมือนเวอร์ชั่นก่อน

เครื่องมือสำหรับบล็อกอิดิเตอร์ยุบเหลือแค่หัวข้อ Blocks อย่างเดียวครับ นำมารวมกันไว้แนวเดียวเลย ผมว่าสะดวกดีน่ะครับ ไม่เปลืองพื้นที่ดี

รูปร่างหน้าตาที่เปลี่ยนไปนิดหน่อย สีสันสวยงามดูน่าใช้มากขึ้น

คุณสมบัติต่างๆของคุอมโพเน้นท์แต่ละตัวถูกเก็บไว้รวมกัน หลังดอท

เวลาใช้งานเพียงแค่คลิกเลือกก็สามารถใช้ได้เหมือนรูปแบบเดิม อันนี้ผมว่าดี เพราะทำให้ไม่รกพื้นที่ เวลาเขียนโค๊ดก็คลิกลิสรายการเอา

การเชื่อมต่อแบบไร้สาย ผ่าน wifi ด้วยโปรแกรม MIT Companion ก็เปลี่ยนไป ต่อไปก็คงไม่ต้องใช้สาย เชื่อมต่อกันผ่านไวไฟอย่างเดียว

มันเป็นเพียงจุดเริ่มต้นของการเปลี่ยนแปลงเท่านั้น เพราะเท่าที่ผมทดสอบใช้งานดู ยังทำงานได้ไม่ดีทำไร เรื่องการเชื่อมต่อกับอุปกรณ์แอนดรอยด์ยังมีปัญหา เรื่องการจำลองเซิฟเวอร์ก็ยังมีปัญหา คงต้องต่อกันต่อไป แต่ก็ดูมีแนวโน้มที่ดีขึ้นเรื่อยๆตามลำดับ ไว้มีข่าวคราวความเคลื่อนไหวเมื่อไร จะอัพเดทให้ใหม่น่ะครับ