สอนสร้างแอพด้วย App Inventor 2 สำหรับผู้เริ่มต้น | วิชาการ.คอม


สอนสร้างแอพด้วย App Inventor 2 สำหรับผู้เริ่มต้น

วิดีโอนี้ เป็นหลักสูตร เรียนฟรี สำหรับ ผู้เริ่มต้น (Biginner) ในการเรียนรู้เกี่ยวกับ การพัฒนา Android Application ด้วยเครื่องมือง่ายๆ แต่มีความสามารถสูง อย่าง App Inventor มีข้อสงสัย สอบถามได้ที่ Facebook - http://fb.me/narongporn.lao

ผู้เขียน ณรงค์พร ชมแล้ว
ครั้ง โพสครั้งแรก แก้ไขล่าสุด
สารบัญ

บทที่ 4 - เรียนรู้เกี่ยวกับ User Interface

คลิปที่ 1

หลังจากที่เราได้เรียนรู้กระบวนการในการสร้างแอพ จากบทที่ 3 แล้ว ในบทนี้ เราจะมาเรียนรู้กันต่อ เกี่ยวกับ component ที่เรียกว่า User Interface ซึ่งถือเป็นส่วนประกอบพื้นฐานของแอพ

โดยในคลิปที่ 1 จะสาธิตการทำงานแอพตัวอย่าง เพื่อให้คุณได้เรียนรู้ลักษณะของ UI พื้นฐาน ได้แก่

- Button- Textbox- Checkbox- Spinner- ListPicker- DatePicker- Label

รวมทั้ง Component "Sharing" ด้วย

คลิปที่ 2

หลังจากที่เราได้เรียนรู้กระบวนการในการสร้างแอพ จากบทที่ 3 แล้ว ในบทนี้ เราจะมาเรียนรู้กันต่อ เกี่ยวกับ component ที่เรียกว่า User Interface ซึ่งถือเป็นส่วนประกอบพื้นฐานของแอพ

ในคลิปที่ 2 นี้ เราจะได้เรียนรู้เกี่ยวกับ การกำหนด Properties ของ Screen1 เช่น

- AlignHorizontal- AlignVertical- BackgroundColor- BackgroundImage- Icon- ScreenOrientation แบบ Portrait- Scrollable- StatusBar, Title Bar- Sizing แบบ Fixed- VersionCode, VersionName

คลิปที่ 3

หลังจากที่เรากำหนด Properties ของ Screen1 ตามในคลิปที่ 2 แล้ว ในคลิปที่ 3 นี้ เราก็จะมาเรียนรู้วิธีการจัดวาง User Interface ตามลักษณะเลย์เอาต์ที่ต้องการ ซึ่งจะใช้ Component ในกลุ่ม Layout มาช่วย โดยในคลิปนี้ จะใช้ Table Arrangement มาจัดเลย์เอาต์ให้เป็นแถวเป็นแนวตามลักษณะของตาราง และยังสาธิต เทคนิค การใช้ เลย์เอาต์ซ้อนเลย์เอาต์ เพื่อการจัดวางแบบซับซ้อน

คลิปที่ 4

เมื่อจัดวาง User Interface ลงตัวแล้ว ขั้นต่อมา เราก็ต้องกำหนด Properties ต่างๆ ของแต่ละ Component เพื่อให้ component เหล่านั้น ทำงานได้อย่างถูกต้อง หลังจากนั้น เราก็จะเปลี่ยนชื่อของ component เพื่อให้สื่อความหมายมากขึ้น เวลาที่เราเขียนโปรแกรม ก็จะเขียนได้สะดวก สุดท้ายทดสอบการทำงานของแอพ เพื่อดูว่า ยังมีส่วนใดที่ยังไม่ทำงานตามต้องการ ซึ่งส่วนนั้นแหล่ะ คือ ส่วนที่เราจะต้องเขียนโปรแกรมเพิ่มเติม (ตามคลิปที่ 5)

ดาวน์โหลดไฟล์รายชื่อจังหวัด ได้จากที่นี่https://drive.google.com/file/d/0Bw5JUzNFbdiqbmtMY...

คลิปที่ 5

คลิปนี้เป็นตอนสุดท้ายของบทที่ 4 คือ การเขียนโค้ด เพื่อควบคุมการทำงานของโปรแกรม ซึ่งประกอบด้วย 3 ส่วนหลักๆ คือ

- ส่วนที่ทำหน้าที่แสดงวันที่ หลังจากที่เราใช้ DatePicker เพื่อเลือกวันที่แล้ว- ส่วนที่ทำหน้าที่แสดงชื่อจังหวัด หลังจากที่เราใช้ ListPicker เพื่อเลือกจังหวัดแล้ว- สุดท้าย คือ คำสั่งสำหรับปุ่ม Send ในการนำข้อมูลทั้งหมดมาต่อกัน แล้วส่งออกด้วยแอพ ด้วย Sharing Component

มีข้อสงสัย สอบถามได้ที่ Facebook - http://fb.me/narongporn.lao

คุณสามารถรับชม VDO อื่นๆ ในคอร์สนี้ได้ที่https://www.youtube.com/playlist?list=PLi8U-R74CWSVbdWO1iX3jjTUexEx06RBF

"LIKE, SHARE, SUBSCRIBE เพื่อแบ่งปันความรู้สู่วงกว้าง"

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