(นักศึกษาชาย) อุปกรณ์ สำนักสื่อและเทคโนโลยีการศึกษา มหาวิทยาลัยศรีนครินทรวิโรฒครับ แล้วก็ 2. เพื่อศึกษาผลที่ใช้จากแอปพลิเคชัน เพื่อบริหารการจัดการครุภัณฑ์โสตทัศนูปกรณ์ สำนักสื่อและเทคโนโลยีการศึกษา มหาวิทยาลัยศรีนครินทรวิโรฒครับ ก็โดยความสำคัญของการวิจัย ผลการวิจัยครั้งนี้ จะได้รูปแบบแอปพลิเคชันเพื่อจัดการบริหารครุภัณฑ์โสตทัศนูปกรณ์ สำนักสื่อและเทคโนโลยีการศึกษาของมหาวิทยาลัยศรีนครินทรวิโรฒ ซึ่งจะนำไปใช้ลดขั้นตอน ในการตรวจสอบครุภัณฑ์ และก็เพิ่มประสิทธิภาพในการตรวจสอบครุภัณฑ์ครับ แล้วก็ในส่วนของผู้บริหารจะสามารถนำไปใช้เรียกดูข้อมูลและเข้าถึงทรัพยากรข้อมูลที่กระจัดกระจายได้ด้วยครับ เครื่องมือที่ใช้ในการวิจัย มีแบบสัมภาษณ์ความคิดเห็นเพื่อพัฒนาแอปพลิเคชัน แล้วก็แบบประเมินคุณภาพแอปพลิเคชัน 3. แล้วก็แอปพลิเคชันเพื่อการจัดการบริหาร แล้วก็ 4. แบบประเมิณผลการใช้งานครับ แอปพลิเคชันนี้ทำบนเป็นเว็บแอปพลิเคชันครับ ทำให้ไม่สามารถทราบ Script ที่ใช้ได้ แล้วก็เรื่องที่ 2 ครับ การพัฒนาแอปพลิเคชันเพื่อการจัดการจราจรหน้าสถานศึกษาครับ วัตถุประสงค์การวิจัยก็คือเพื่อออกแบบแอปพลิเคชันที่ใช้จัดการจราจรหน้าสถานศึกษาแล้วก็ประเมินออกแบบแอปพลิเคชันเพื่อจะใช้สำหรับจัดการการจราจรหน้าสถานศึกษาครับ โดยประโยชน์ ก็คือ นำไปเป็นแนวทางการแก้ไขปัญหาการจราจรบริเวณสถานศึกษาครับ 2. สามารถใช้เป็นต้นแบบการแจ้งเตือนการรับส่งบริการประเภทอื่น ๆ ได้ด้วยครับ แล้วก็ 3. ลดเวลาในการจอดรับผู้โดยสารครับ 4. ช่วยลดการแออัด การจราจรแออัดหน้าสถานศึกษา 5. ลดการเกิดอุบัติเหตุครับ แล้วก็ 6. ลดปัญหาการโจรกรรมนักเรียน แล้วก็อันสุดท้าย 7. สามารถช่วยให้นักเรียนกลับถึงที่พักอย่างปลอดภัยครับ เครื่องมือในการทำวิจัยใช้ Visual Studio Code เป็นโปรแกรมสำหรับเขียนโค้ดครับ ใช้ Apache Codeover เอ้ย Cordova เป็นแพลตฟอร์มสำหรับสร้างแอปพลิเคชันครับ แล้วก็ใช้ Firebase เป็นซอฟต์แวร์ในการจัดการข้อมูลการแจ้งเตือนครับ แล้วก็เป็น Android 5.1 เป็นระบบปฏิบัติการที่จะรองรับแอปพลิเคชันครับ แล้วใช้ Windows 7 เป็นระบบปฏิบัติการใช้สร้างตัวแอปพลิเคชันครับ เรื่องที่ 3 ครับ การพัฒนาแอปพลิเคชันสำหรับการเผยแพร่มรดภูมิปัญญาทางวัฒนธรรมของภาคใต้ตอนล่างครับ เครื่องมือที่ใช้ในการทำวิจัย ใช้ MySQL เป็นระบบฐานข้อมูล แล้วก็ XAMPP เป็นตัวจำลองเซิร์ฟเวอร์ครับ แล้วก็ใช้ Ionic Framework เป็นเครื่องมือใช้สร้าง HTML CSS JavaScript นะครับ ใช้ในการทำ Mobile Application ครับ มันมีแค่ ไม่ ไม่มีครับ ครับ 4. เรื่องสื่อการเรียนรู้บนอุปกรณ์คอมพิวเตอร์เคลื่อนที่ครับ เรื่องภาษาอังกฤษสำหรับ นักสื่อสารนิเทศ… นักสื่อสาร… นักสารสนเทศครับ จุดประสงค์ในการทำวิจัย คือ เพื่อพัฒนาแอปพลิเคชันสื่อสารการเรียนรู้บนอุปกรณ์เคลื่อนที่ครับ แล้วก็ 2. เพื่อประเมินคุณภาพแอปพลิเคชันในการสื่อสารเรียนรู้บนอุปกรณ์เคลื่อนที่ แล้วก็ 3. เพื่อประเมินความพึงพอใจในการใช้งานครับ โดยเครื่องมือในการทราบเป็น Thunkable ครับ เป็นเว็บ… เป็น Web Application เหมือนกันครับ เลยไม่ทราบ Script ครับ เรื่องที่ 4… 5 เรื่องสุดท้ายครับ สำหรับ เรื่องแอปพลิเคชัน ไม่ครับ เหมือนจะหายไปนะครับ สำหรับแอปพลิเคชัน… สร้างแอปพลิเคชันสำหรับการบริหารจัดการการซ่อมบำรุงครับ โดยวัตถุประสงค์ ก็คือ ออกแบบระบบสำหรับบริหารจัดการการซ่อมบำรุง 2. เพื่อบริหารจัดการการจัดสรรงานซ่อมบำรุงให้กับวิศวกรครับ 3. เพื่อวางแผนการจัดการอุปกรณ์ในการซ่อมบำรุง ประโยชน์ที่คาดว่าจะได้ก็มีได้ระบบในการจัดการการซ่อมบำรุง แล้วก็ 2. การแจ้งการซ่อมบำรุงผ่านระบบที่มีความสะดวกครับ 3. ลดภาระการจัดสรรงานแล้วก็ 4. นำข้อมูลไปใช้วางแผนกลยุทธ์ในการดำเนินงานได้ครับ เครื่องมือที่ใช้ในการสร้างแอปพลิเคชันมี Windows 10 ครับ เป็นระบบปฏิบัติการที่ใช้สร้างแอปพลิเคชันครับ เรามี Adobe Dreamweaver ครับ เป็นโปรแกรมสำหรับสร้างแอปพลิเคชัน แล้วก็มี AppServ เป็นโปรแกรมจำลองเซิฟเวอร์ครับ แล้วก็ HTML เป็นภาษาที่ใช้สร้างครับ จบครับ ขอบคุณครับ ถ้าเป็นของผมจะพัฒนาแบบ เดี๋ยวผมขอย้อนกลับไปดูก่อนครับ ก็คงจะคล้าย ๆ กับตัว น่าจะทำเกี่ยวกับสื่ออะครับ สื่อพวกสื่อการเรียนรู้ที่เกี่ยวกับภาษาอย่างนี้ครับ เพราะผมก็เป็นคนได้ภาษาหน่อยนะ ใครจะนำเสนอเป็นคนต่อไปครับ ไม่ต้องมอง ไม่ต้องมองหน้า ไม่ต้องมองหน้า เตรียมตัวแล้วน่ะ เอาสไลด์ลงแล้วน่ะ มุกขึ้นมาเลย ไม่ต้องมองหน้า ขึ้นมาเลย เร็ว ๆ จะได้เสร็จ ๆ (นักศึกษาหญิง) สวัสดีค่ะ สำหรับเรื่องแรกนะคะ เป็นการพัฒนาแอปพลิเคชันสื่อการเรียนรู้บนอุปกรณ์เคลื่อนที่เรื่องภาษาอังกฤษสำหรับนักสารสนเทศค่ะ ตัวแอปพลิเคชันนะคะ จะเป็นระบบ (เจ้าหน้าที่) อ๋อ มันเป็น PDF เหรอ (นักศึกษาหญิง) ใช่ค่ะ (เจ้าหน้าที่) อ๋อ (นักศึกษาหญิง) แอปพลิเคชันจะทำเพื่อ สร้างเนื้อหาคำศัพท์ความรู้เกี่ยวกับภาษาอังกฤษนะคะ 2. แอปพลิเคชันส่งเสริมการเรียนรู้และทักษะการเขียนโปรแกรมคอมพิวเตอร์เบื้องต้น แอปพลิเคชันส่งเสริมการเรียนรู้และทักษะการเขียนโปรแกรมคอมพิวเตอร์เบื้องต้น ทำให้มีความสะดวกในการเรียนรู้ทักษะการเขียนภาษาคอมพิวเตอร์ และในโปรแกรมนี้ก็จะมีความรู้พื้นฐานต่าง ๆ อีกมากมายค่ะ อันนี้ก็จะเป็นหน้าตาของแอปพลิเคชันนะคะ แล้วก็หน้าจอหลักค่ะ แล้วก็จะเป็นโปรแกรมที่นำมาใช้สร้างแอปค่ะ 3. การพัฒนาระบบแอปพลิเคชันเพื่อการจัดการจราจรด้านสถานศึกษา โปรแกรมนี้ใช้กับการรับส่งนักเรียนของโรงเรียนแห่งหนึ่งนะคะ ก็คือจะมีในระบบจะมีการเช็ก ข้อมูลของนักเรียน สมมติว่าผู้ปกครองของคนนี้จะเข้ามารับลูก เราก็จะสามารถเช็กได้ว่าลูกเรายังอยู่ในโรงเรียนไหม แล้วก็ถ้าเรารับลูกของเราเสร็จแล้ว ก็คือจะขึ้นในระบบค่ะ ตัวนี้ก็จะเป็นหน้าตาของแอปพลิเคชันนะคะ แล้วก็ระบบที่ใช้ทำ 4. การพัฒนาแอปพลิเคชันสำหรับอุปกรณ์เคลื่อนที่ เพื่อจัดการวิถีชุมชน: กรณีศึกษา ตำบลบางแล อำเภอเมือง จังหวัดเชียงราย ก็คือเป็นแอปพลิเคชันสั่งอาหารนะคะ ตัวนี้ก็คือจะเป็นตัวแอปพลิเคชันแล้วก็เป็นหน้าหลักค่ะ และนี่ก็คือเป็นเครื่องมือที่ใช้ในการทำแอปพลิเคชันค่ะ ในวิจัยนี้ส่วนมากจะเป็นข้อมูล แบบนี้ ซึ่งเขาไม่ระบุว่าทำมาจากแอปไหนค่ะ และ 5. การพัฒนาแอปพลิเคชันระบบอัจฉริยะ เพื่อเพิ่มช่องทางจำหน่ายสินค้า OTOP ด้วยสมาร์ตโฟน ในยุคเศรษฐกิจดิจิทัล ตัวนี้จะเป็นหน้าแอปพลิเคชันนะคะ แล้วก็หน้าหลัก ส่วนขั้นตอนการสร้างแอป ก็คือ ข้อมูลที่อ่านมาก็คือ จับใจความได้ ก็คือ เป็นขั้นตอนการพัฒนาแอปพลิเคชันบนระบบปฏิบัติการ Android โดยใช้ซอฟต์แวร์และฮาร์ดแวร์ค่ะ ขอบคุณค่ะ (อาจารย์สุธิรา) เมื่อกี้จากที่เพื่อน ๆ นำเสนอนะคะ มันจะมีแอปพลิเคชันที่คล้ายกันอยู่ 2 ตัว แล้วก็ นะคะ แล้วทีนี้ อ้าว เดี๋ยว คนที่นำเสนอเสร็จแล้วปรับเด้อ ปรับแก้ เหมือนขนาดตัวอักษรในครั้งก่อนบอกไปแล้วแต่น่าจะไม่ได้มา ก็คือ ถ้าเป็นหัวเรื่องก็ต้องมีขนาดตั้งแต่ 40 นะ ฟอนต์มีขนาด 40 ขึ้นไป ถ้าส่วนของเนื้อหาก็คือ 36 ลงมา แต่ไม่ต่ำกว่า 26 นะคะ ห้ามต่ำกว่า 26 ให้มันเห็นชัด เพราะว่าเพื่อนจะดูจากจอล่ามด้วย อะไรด้วยนะคะ มันไปเปิดหน้าไหนล่ะนี้ น่าจะไม่มีใครพรีเซนต์ต่อแล้วมั้ง อย่างนั้นเรามาเรียนกันดีกว่านะคะ ให้เด็ก ๆ เปิดค่ะ Thunkable พิมพ์ T เปิดโปรแกรมนะคะ ที่เราจะพัฒนา ในสัปดาห์ก่อนเราสอนไปแล้ว แป๊บหนึ่ง ๆ T-h อ้าว ไม่เปลี่ยนภาษาให้ เดี๋ยวนะคะ T-h เอ้า ทำไมยังเป็นภาษาไทยอยู่ T-h ถัดมานะคะ แล้วก็ u T-h-u-n-k-a-b-l-e อ่านว่า ‘ทังคฺ-เอ-เบิล’ ‘ทังคฺ’ นะคะ ‘ทังคฺ-เอ-เบิล’ อ้าว ใครที่เข้ามาหน้านี้แล้ว ทุกคนน่าจะเข้าแล้ว คลิกเข้ามาแล้วอย่าลืม ทำอะไรคะ Login ใช่ไหม คนที่ยังไม่ได้ล็อก Login นะคะ Login ด้วยอะไร นั่นก็คือ ในสัปดาห์ที่แล้วบอกว่าให้ Login ด้วย Google เพราะเรามีบัญชี Google กันทุกคนนะคะ เพราะฉะนั้น ใครที่เข้ามาหน้าแรกปุ๊บให้กด Login แล้วเลือก Sign in with Google มันก็จะให้เราเลือกบัญชีของเรา แต่บาง… แต่เครื่องเด็ก ๆ น่าจะบัญชีตัวเองอยู่แล้วนะคะ เนื่องจากเครื่องอาจารย์ ผู้ใช้หลายคนก็จะเลย พอคนหนึ่งเข้ามาใช้ เขาก็จะปิดบัญชี เพราะฉะนั้นอาจารย์ต้องเข้าใหม่ ทุกคนเข้ามาหน้านี้แล้วใช่ไหม ใครยังไม่เข้ามาหน้านี้ มุกได้ยัง เพราะมุก สัปดาห์ที่แล้วไม่ได้มา ของมุกต้องคลิกที่ Create new app นะคะ เพราะมุกยังไม่ได้สร้าง สัปดาห์ที่แล้ว เราตั้งชื่อว่าอะไรหว่า Book ใช่ไหมเด็ก ๆ เปิด เปิดงานที่เราสร้างไว้นะคะ B-o-o-k เอ้ย ทำไมของเราเป็น Book 1 Book อะไรก็อย่า Book ก่อน Book Book Book นะคะ คลิกเข้าไปที่ไฟล์ Book ไฟล์ที่ชื่อ Book ให้เด็ก ๆ ดูนะคะ เราจะต้องอยู่ที่หน้า Design เท่านั้น เพราะก่อนจะทำแอปพลิเคชันได้ หลักการก็คือ เราจะต้องออกแบบส่วนของหน้าตามัน ให้มันมีข้อความแสดงให้มีปุ่มเพื่อจะได้เขียนโค้ด โดยโค้ดของเราบอกแล้วเราจะใช้วิธีการเขียนโค้ด ไม่ได้เขียนน่ะ ใช้ Block ในการสร้างงานนะคะ ตอนนี้เปิดมาหน้านี้หรือยัง เข้ามาหน้า Design หรือยังคะ ดูนะคะ อันดับแรก ให้ลอง ๆ จะให้ทำแบบง่าย ๆ ไม่มีอะไรพิสดาร เหมือนเปิดเข้ามาปุ๊บ มีข้อความ มีกล่องข้อความขึ้น แล้วมีปุ่ม 1 ปุ่ม เมื่อกดปุ่มจะแสดงข้อความนั้นขึ้นมา ให้เลือกนะคะ ข้อความที่เราจะใช้ ก็คือ Label อยู่ตรง Basic นี่เห็นไหมคะ แถบเครื่องมือด้านซ้ายมือนะคะเด็ก ๆ เลือกแถบเครื่องมือที่ชื่อว่า Basic แล้วเลือกคำว่า “Label” คลิก ดู ดูวิธีทำนะลูก คลิกที่แถบเครื่องมือ Label แล้วกดเมาส์ค้างนะคะ คลิกแล้วกดเมาส์ค้าง แล้วลากเครื่องมือนั้นลงไปวาง ดูนะคะ ดูพี่ล่ามดี ๆ วิธีการก็คือ เอ้า การจะนำนี่ เครื่องมือแต่ละอย่างมาใส่นี่ คือ เด็ก ๆ คลิกเมาส์ 1 ครั้ง อยู่ที่ Basic นะคะ แถบเครื่องมือดูนะคะ แถบเครื่องมือนี่ อยู่ทางซ้ายมือ แถบเครื่องมืออยู่ทางซ้ายมือ บอกแล้วนะคะ Properties หรือข้อกำหนดต่าง ๆ จะอยู่ทางขวามือ สมมติ มีความรู้สึกว่ากรอบมันไอ้นี่ไป ร้อย 50 เห็นไหมคะ เอ้า ดูนะคะ ตัวที่เราใช้ Tool ที่เราใช้ชื่อว่า “Basic” นะคะ Tool แรกเลยและเป็นเครื่องมือ Tool ตัวที่ 2 ที่ชื่อว่า “Label” เห็นไหมคะ มันจะมีคำบอกชื่อมันด้วย Label วิธีการก็คือคลิก 1 ครั้ง แล้วกดเมาส์ค้างไว้ด้วย แล้วลาก Label นั้นลงไปวาง เห็นไหมมันจะมี Label 1 Label 2 นี่ เราสามารถลบได้ แต่เวลาลบนะคะกด Delete ไม่ได้ นี่ตัวลบมันจะอยู่ตรงนี้ เห็นไหมคะ ในส่วนของการลบวัตถุที่เอามาวาง หรือเครื่องมือที่เอามาวางแต่ละตัวนี้นะคะ มันจะอยู่ตรงฝั่งซ้ายมือเสมอนะคะ ดู มันจะขึ้นนี่มันจะมี Component Tree ขึ้นมาให้ดูนี่ มันจะอยู่ตรงนี้ วิธีการทำงานก็คือ มันก็จะขึ้นชื่อวัตถุหรือ Object นั้นขึ้นมา เสร็จแล้วถ้าต้องการลบ มันจะอยู่ตรงนี้ค่ะ มันจะมีแก้ไข แก้ไขนั่นก็คือ ให้ใส่ชื่อให้วัตถุชิ้นนั้น ใส่เพื่ออะไร 1. ชื่อตัวนี้จะเป็นตัวแปร หรือ Variable ด้วย เพราะบอกแล้ววัตถุแต่ละชิ้น หรือ Object แต่ละชิ้นนี่ มันจะต้องเอาไปใช้เพื่อการสร้างแอป การจะทำแอปได้ไม่ใช่ว่าวาง ๆ ๆ วัตถุแล้วจบ มันต้องมี Code มาเชื่อม แต่ Code ของเราวิธีใช้งานก็คือมันจะเป็น Block เพราะฉะนั้น ถ้าเด็ก ๆ ตั้งชื่ออะไร แล้วเวลาเรียกใช้ ให้ดูจากตัวนี้นะคะ ชื่อตัวแปรจะสอดคล้องกับตรงตำแหน่งนี้ เพราะนั้นถ้าสมมติว่า ห้ามตั้งเป็นภาษาไทย ใช้ข้อห้ามเลยนะคะ เวลาตั้งชื่อตัวแปรห้ามใช้ภาษาไทย เพราะฉะนั้น ต้องเป็นภาษาอังกฤษเท่านั้น บางทีนี่ ถ้า Label 1 Label 2 นี่ อาจจะสับสน เหมือนถ้าอันนี้ เรารู้อยู่แล้วว่าจะเป็นข้อความทักทาย เราก็ตั้งชื่อมันไปเลยว่า ใครนึกชื่อภาษาอังกฤษไม่ออก สอนแล้วนะคะ เวลาสร้างตัวแปร นึกชื่อภาษาอังกฤษไม่ออก เปิด Google แปลภาษาขึ้นมาไว้ด้วย เอ้า ไปที่หน้า Web Browser แล้วเปิดแปลภาษามาไว้ด้วยนะคะ สลับโหมดจากไทยเป็นอังกฤษ เช่น ทักทาย นึกชื่อภาษาอังกฤษไม่ออก บอกแล้วนะ ให้ใช้ตัวนี้ช่วยนะคะ มันมีให้เลือกหลายคำอยู่นะ ถ้าดูลงมาข้างล่างมี Great มี Salute แล้วก็มีใช่ไหม Hail นี่ Accost มีหลายอันนะคะ เลือกได้ หรือถ้าใครเคยดูรายการหนึ่ง เมื่อกี้ตอนแรก พอเราบอกว่าถ้าทักเฉย ๆ นี่ คำว่าทักเฉย ๆ มันจะบอก มันจะขึ้น Say Hello ใช่ไหม อย่างนี้ก็ได้นะคะ จะใช้คำที่เข้าใจ เคยดูรายการหนึ่งนะ Hello นี่คำที่ใช้กับ Hello มีอีกตัวหนึ่งได้ ก็คือ Say Hi ใช่ไหมคะ Hi ก็ได้เหมือนกัน เดี๋ยวจะตั้งชื่อไว้นะคะว่า ต้องคลิกเข้าไปที่รูปที่เป็นรูปเหมือนปากกาหรือดินสอนี่แหละนะคะ แล้วเราก็เปลี่ยนชื่อนะคะ ให้ใช้ตัวแรก จำไว้นะคะ ตั้งชื่อตัวแปร ตัวแรกให้ใช้ตัวใหญ่ ใส่ S เอ้า จะลบ ไม่ยอมให้เราลบ S-a เราก็ว่าเราเปลี่ยนภาษาอังกฤษแล้วยังเป็นไทยอยู่อีก คลิกเอาก็ได้นะ สลับและช้า S-a-y นะคะ Say แล้วก็ H ตัวใหญ่ แล้วก็ i จำได้นะ กฎการสร้างตัวแปรน่ะ ถ้าใช้ตัวใหญ่ตั้งแต่แรก แล้วพอไปเวลาไปเรียกใช้ อย่าไปเรียกใช้ด้วยตัวเล็กนะคะ คำเหมือนกัน แต่คอมพิวเตอร์จะมองว่าเป็นคนละคำนะคะ เพราะฉะนั้น ถึงอยากให้จำว่าถ้าเราตั้งตัวแปรเราเอาตัวหลักเป็นตัวใหญ่ ตัวแรกไม่ใช่ตัวหลัก ตัวแรกให้เป็นตัวใหญ่ ให้รู้เลยว่าถ้าขึ้นตัวแรกมาอย่างนี้ มันคือตัวแปร เพราะฉะนั้นเวลาจะเรียกใช้งานตัวแปรเราจะได้พิมพ์ตัวใหญ่ตัวแรกเสมอ เพราะถ้าเป็นประโยคปกติมันจะเป็นตัวพิมพ์เล็กก็ได้ใช่ไหม มันจะไม่ปนน่ะ Say แล้วก็ Hi นะคะ ใน Label ที่ 1 เสร็จแล้วอยากได้อะไรเพิ่ม สมมติใครที่กรอบของ Label มันไปชิดขอบ เราสามารถมาเปลี่ยนขนาดได้ ดูนะคะ ให้มาที่แถบเครื่องมือทางขวามือ ตรงการจัดการขนาดของ Label คือ Layout นี่เห็นไหม W มาจากคำว่า “Width” หรือความกว้าง 317 มันกว้างไป เอ้า เหลือ 250 นะคะ เห็นไหมคะ กรอบก็จะเป็นลักษณะนี้ ทีนี้ กำหนดคุณสมบัติอะไรได้อีก ไปดูที่ Style ค่ะ จะใส่สีไหม Background Color เห็นไหมคะ อยู่ที่ Style นะคะ Background Color ก็คือเราสามารถเลือกสีให้ตัว Label เราได้เห็นไหม เด็ก ๆ อยากได้สีอะไร เลือกเลยนะคะ ให้มีสี ให้รู้ว่าใส่สีเป็น ทักทายก็เอาสีฟ้า ๆ หน่อยก็ได้ ฟ้า ๆ โอเคนะคะ อยากได้สีเส้นมันหรือเปล่า เห็นไหม มีลักษณะของเส้นด้วยนะคะ แล้วก็สีของเส้น เส้นในที่นี้ หมายถึงเส้น กรอบมันนะคะ เส้นของกรอบข้อความน่ะ ใส่เงาไหม เห็นไหมคะ มี Shadow ด้วยนี่ ถ้าจะใส่นะคะ โอเค เอาประมาณนี้ก่อน เมื่อได้กรอกข้อความแล้วนะคะ เด็ก ๆ สังเกตเวลาการจัดแอปนะคะ หรือออกแบบ สังเกตว่าถ้ามีเส้นขึ้นมาอย่างนี้ มันหมายถึงตำแหน่งนี่ อยู่ตรงกึ่งกลางแล้วนี่นะคะ อยู่กึ่งกลางแล้วนะคะนี่ อันนี้กึ่งกลางในแนวตั้ง ทีนี้มาดูแนวนี้ แนวขวางเห็นไหม มันจะมีเส้นแนวนอนขึ้นมา เห็นไหมคะ เราอยากให้มันอยู่กึ่งกลางให้ดูไอ้เส้นที่ขึ้นมาอย่างนี้เป็นหลักนะคะ แต่แม่ไม่เอาขึ้นกึ่งกลาง แม่จะเอาไว้ข้างบนเสียหน่อย เว้นช่องไฟด้วย โอเคนะคะ ต่อมาเพิ่ม Object อีก 1 ชิ้น ใช้ Button เลือก Button นะคะ มาที่ทางซ้ายมือเลือกปุ่มมา 1 ปุ่ม ดูปุ่มนี่ ชิ้นที่ 2 Object นี้ชื่อว่า “Button” นะคะ คลิกที่แถบเครื่องมือหรือ ที่ชื่อ Basic เลือก Button อันที่ 1 Object อันที่ 1 ชื่อว่า “Button” คลิกปุ่ม เอ้ย คลิกเมาส์ค้างไว้แล้วลาก Object นั้นมาวาง เหมือนเดิม ถ้าเราอยากเปลี่ยนสีให้น้องนะคะ เอาเป็นสีอะไร ในเมื่อข้อความเราสีนี้ไปแล้ว ปุ่มนะคะ เปลี่ยนสีปุ่ม ทำอะไรได้อีก สีข้อความที่จะแสดงบนปุ่มเห็นไหมคะ Text Color เด็ก ๆ ดู Text Color ชมพูกับขาวมองไม่เห็นจะเปลี่ยนนะคะ จะขอเปลี่ยนเป็นสีดำ เห็นไหมคะ เปลี่ยนสีให้ข้อความบนปุ่มนี่มาที่ เด็ก ๆ ดูนะคะ เวลาเราจัดการวัตถุชิ้นไหน ให้ดูว่ามันจะมีกรอบลักษณะนี้ขึ้นมา ว่าเราเลือกทำงานกับวัตถุชิ้นนั้นนะคะ นี่ ต้องให้มันขึ้นกรอบแดง ๆ อย่างนี้ขึ้นมานะคะ นี้กรอบแดง ๆ แล้วก็มีสี่เหลี่ยมตามมุมนี่ อย่างนี้ ก็คือเราเลือกทำงานกับวัตถุชิ้นนั้น Text Color นะคะ เอาสีดำ เปลี่ยนเป็นสีดำ อยากได้ตัวหนาไหม กด B ให้มันหนาเห็นไหมคะ ก็จะชัดขึ้น เห็นหรือเปล่า ขนาดตัวอักษร อยากได้เล็ก-ใหญ่ เห็นไหมคะ อยู่ที่ตัวนี้ มันจะอยู่ตรงเกี่ยวกับตัวปุ่มเลย Button เลยนะคะ เอาสัก 20 เต็มคาราเบลขยาย บอกแล้วนะคะ การปรับขนาดนี่ ถ้าไม่ปรับตรงช่อง Layout นะคะ ดูนะคะ เด็ก ๆ สามารถคลิกเมาส์ค้าง แล้วลากขยายออกได้ ต้องกดเมาส์ และกดค้างไว้นะคะ และลากเพื่อขยาย นี่นะคะ โอเคไหม เดี๋ยวจะเดินไปดูนะคะ ใครยังไม่ได้วัตถุ 2 ชิ้นนี้ ทีนี้ ข้อความตรง Button นี่ต่างกันนะคะ ชื่อตรงนี้กับชื่อตรงนี้ คนละตัวกันนะ ชื่อตรงนี้ ชื่อที่อยู่ทาง Component Tree นี่ มันจะหมายถึงตัวแปร แต่ข้อความที่อยู่ทาง Button ทางฝั่งนี้ มันจะหมายถึงข้อความที่แสดงบนปุ่มนั้นเลยนะคะ เดี๋ยวแม่จะลองเปลี่ยน ตัวนี้ใช้ภาษาไทยได้ เช่น เห็นไหม ดูสิ่งที่เปลี่ยน เห็นไหมคะ ชื่อตรงฝั่งนี้ มันจะเป็นชื่อที่จะประ… มันไม่ใช่ชื่อมันเป็นข้อความที่จะปรากฏบนปุ่ม นึกออกนะ มันจะต่างกับฝั่งทางนี้ ถ้าฝั่งทางนี้ เวลาเราเปลี่ยนนี่ มันจะหมายถึง เรากำหนดให้ปุ่มนี้ มีตัวแปรชื่อว่าอะไร ต่างกันนะคะ 2 ฝั่ง ใครยังไม่ได้ 2 ตัวนี้ ทีนี้ ในส่วนหน้าออกแบบสมมติ สมมติว่าเสร็จ ออกแบบเสร็จในหน้านี้ สิ่งที่จะทำต่อมาเมื่อเราออกแบบหน้าเสร็จแล้วนะคะ เราจะไปสร้าง Code เพราะนั้นเราจะต้องเลือกมาที่ Block ค่ะ เห็นไหมสลับมาที่ Block นะคะ มาที่ Block จะไม่ขึ้นอะไรเลย งงหรือเปล่า จากหน้า Design เราจะมาที่หน้า Block โอเคไหมคะ บอกแล้วว่าหน้า Block ก็คือ ส่วนของการ Coding นั่นเอง แต่วิธีการ Code นั้น เราจะไม่ เขาเรียกว่าอย่างไรล่ะ ไม่ได้เขียน มันจะมีเห็นไหมคะ มี Block แบบนี้ขึ้นมาให้เราเลือกมาใช้ เด็ก ๆ ไม่ต้องพิมพ์นะคะ เปิดก่อน เปิดดู Block ที่ 1 ก่อน Block แรกนี้ชื่อว่า “Control” Control หรือควบคุมนะคะ สังเกตว่า Block แต่ละตัวนี่เด็ก ๆ ลองเลือกนะคะ มันก็จะมีสี Block ของมันเห็นไหม เพื่อแยก แยกประเภทน่ะ ว่าเราจะทำอะไร เราจะใช้เพื่อ Control เพื่อควบคุม หรือใช้ Logic หรือใช้ตรรกะนั่นเองนะคะ หรือใช้ Math ค่าทางคณิตศาสตร์ก็คือเพื่อป้อนค่าคำนวณคณิตศาสตร์นะคะ หรือเป็น Text นี่ เหมือนนบอกว่าถ้าตรงนี้เป็น Text นี่ เราต้องมาเลือกใช้หมวดนี้เห็นไหมคะ ลองคลิกดูนะคะ แต่ละตัว มีอะไรบ้าง อันดับแรกเลยนะคะ เมื่อกี้ อ้อลืม เดี๋ยวย้อนกลับไปหน้า Design ก่อนลูก สร้างตัวแปร Button ก่อน แก้นะคะจาก Button เป็นคลิก แต่ใช้คลิกไทย เราจะได้รู้ มันจะได้ตรงกัน นี่ ไปเปลี่ยนภาษาไทยให้เราอีกแล้ว ตรงนี้นะคะ ใช้คำว่า Click C C ใหญ่ l-i-c-k Click โอเค แล้วก็ตรงนี้นะคะ ข้อความที่เราจะให้ปรากฏใน Label ก็คือคำว่า “สวัสดี” ผู้หญิงใช้ค่ะ ผู้ชายใช้ครับนะคะ พิมพ์คำว่า “สวัสดี” ลงไปลูก ลืม ๆ สวัสดีค่ะ อันนี้ของผู้หญิงนะคะ ขนาดตัวอักษร Font Size เอาเท่าไรดี 30 ไหม การจัดแนวนะคะ ขอบกึ่งกลาง โอเค ขอเพิ่มขนาดตัวอักษรหน่อยนะ 35 โอเคไหม พิมพ์สวัสดีผิดหรือเปล่านี่ ทำไมสระอีมันเป็น โอเค วรรค ถ้าฟอนต์ไม่สวยเดี๋ยวค่อยเปลี่ยนนะคะ ดูนะคะ นี่ เปลี่ยนฟอนต์นะคะ เราจะเปลี่ยนฟอนต์เป็นฟอนต์แบบไหนเลือกเอา ไม่สวยน่ะ ภาษาไทยฟอนต์มันน้อย เดี๋ยวค่อยลงเพิ่มนะคะ เปลี่ยนสีได้นะ เปลี่ยนสีข้อความได้ โอเคไหมคะ โอเค อ้าว เมื่อมีข้อความใน Label กับนี่เรียบร้อยแล้วกลับมาที่ Block ได้นะคะเด็ก ๆ สิ่งแรกที่เราจะเลือกก็คือ Control ไปที่ Control นะคะ แล้วต้องเลือกตรงนี้ก่อนด้วย เลือกตรง Component ให้เลือกที่คำว่า “Click” ก่อนด้วย เพราะเราจะกำหนดให้ปุ่มใช่ไหม จะควบคุมปุ่มนี้ เมื่อมีการกดปุ่ม หลักการก็คือเมื่อกดที่ปุ่มนะ ดูหน้า Design ใหม่นะ อธิบายก่อน คือต้องการให้คลิกปุ่มนี้ปุ๊บนะคะ ข้อความคำว่า “สวัสดีค่ะ” จะขึ้นมา นึกออกไหม เพราะฉะนั้น เมื่อเรามาเขียน Block เราก็ต้องเลือกว่าเราจะทำ… เขียน Code ให้อะไร เราจะเลือกเขียน Code ที่ปุ่มก่อน เพราะฉะนั้น เลือก Click นะคะ เลือกตัวแปร “Click” เสร็จแล้ว คำสั่งที่เราจะใช้ก็คือ When ตั้งชื่อตัวแปรเหมือนไอ้นี่ไปเสียแล้ว แก้ก็ได้นะ เด็ก ๆ มาแก้หน่อย เดี๋ยวจะสับสน ชื่อมันเหมือนกับ Block Code นะคะ เปลี่ยน เปลี่ยน Click หน่อยค่ะ เปลี่ยนเป็น… เดี๋ยว ๆ ปุ่มกดใช้ Click แล้วมันไป… จะไปสับสนกับ Click ที่เป็นใน Block Code เพราะฉะนั้น ตัวแปรนี้จะตั้งชื่อว่า “Bt” นะคะ Bt B ตัวใหญ่ t ตัวเล็ก เอ้า ภาษาอังกฤษไม่ขึ้นอีกแล้ว B B ใหญ่ t เล็กนะคะ Bt1 ใช้ Bt1 นะคะ แล้วก็ตามด้วย 1 ให้เรานึกถึง เดี๋ยวเรามีปุ่มอื่นขึ้นมาอีกนะคะ ปุ่มที่ 1 ของเรา Bt1 แล้วตามด้วยคำว่า click ได้ c ใส่ c c เล็กได้นะคะ click เล็ก c-l-i-c-k Bt Button 1 click โอเคนะ ตั้งชื่อตัวแปรนี้นะคะ ตอนนี้ตัวแปรของปุ่มจะชื่อว่า Bt1click นะคะ ใช่ Bt1 แล้วก็ c-l-i-c-k click เอ้า คลิกที่ตัวแปร Button ของเรา เดี๋ยวไปดูนะคะ ทำได้… เด็ก ๆ ฝั่ง… ชื่อทางฝั่งขวามือแม่บอกแล้วว่าเป็นตัวแปรนะคะ ห้ามเป็นภาษาไทย บางคนฟอนต์ยังเป็นภาษาไทยอยู่เลย ต้องแก้นะคะ ใช้ภาษาไทยไม่ได้ ตัวแปร คอมพิวเตอร์จะไม่รู้จัก ถ้าเป็นภาษาไทย ตัวแปรต้องเป็นภาษาอังกฤษ แล้วบอกแล้วว่าตัวแปรต้องใช้ ตัวแรกเป็นตัวใหญ่ เราจะได้ไม่ไปสับสนกับในโค้ดน่ะ บางทีใน Code มันมีตัวเล็ก มันจะซ้ำ ตัวแปรแรก ตัวแปรที่ 1 คือปุ่มใช้คำว่า Bt1 แล้วก็ตามด้วยคำว่า click ติดกันนะคะ ตามหลักการตั้งชื่อตัวแปร ไม่มีเว้นวรรค ไม่ใช้อักขระพิเศษนะ นะคะ ตัวเลขได้ อักขระพิเศษนี่ ตัวแปรห้าม บางทีตัวแปรห้ามนะคะ เพราะนั้นเอาแบบมาตรฐาน ก็คือ ชื่อภาษาอังกฤษแน่นอนแล้วล่ะ แต่ให้เริ่มต้นด้วยตัวใหญ่ จำดี ๆ นะเด็ก ๆ ตัวแปรนะคะ ฝั่งนี้ตัวแปรชื่อภาษาอังกฤษขึ้นต้นด้วยตัวใหญ่ ห้ามเว้นวรรค ห้ามใช้สัญลักษณ์พิเศษ ใส่ตัวเลขได้ โอเคไหม นะคะ ตัวแรกเลยปุ่ม Control ที่เราจะใช้นะคะ กลับมาหน้า Block เรียบร้อยแล้วให้เด็ก ๆ คลิก คลิกที่ ตัวแปรที่ชื่อว่า Bt1 ของเรานะ เสร็จแล้วเลือก เลือกตัวไหน เพราะฉะนั้น เมื่อกี้อธิบายเป็นไทยไปแล้วว่า ถ้าเรา… เมื่อเรากดปุ่ม กดปุ่มนั้นปุ๊บ ข้อความทักทายจะขึ้นมาใช่ไหมคะ เพราะฉะนั้น คำว่า “เมื่อ” ในภาษาอังกฤษก็คือ When When อะไร เกิดอะไรขึ้น ไม่ใช่ ยังไม่คลิกสิ When นี้ เมื่อไปทำอะไรกับปุ่ม เพราะฉะนั้น ต้องตามด้วยชื่อปุ่มเห็นไหม เลือกตัวแรกครับ เลือกตัวแรกมาวาง ดูคำอธิบายใน Block แรก เพราะเมื่อกี้แม่บอกว่า เมื่อมีการ ทำกับไอ้ปุ่ม Bt1 นี่นะคะ ทำอะไร มันเห็นไหมฮะ ใน Blockที่ 2 ดูนะคะ เมื่อ When Bt1 Bt1 โดนทำอะไร เมื่อมีการนี่ ๆ ๆ เมื่อมีการกระทำกับวัตถุที่ชื่อว่า Bt1 ปุ๊บ สิ่งที่เราจะกระทำกับวัตถุนั้นคือ เห็นไหมคะ มันจะมี Click มี Lock Click มี Touch Down Touch Up Touch Down Touch Up ใช้กับเมื่ออะไร เมื่อหน้าจอเป็นแบบไหน แบบสัมผัสใช่ไหม Touch คือสัมผัสใช่ไหมคะ Touch Down น่าจะเป็นไอ้ปัดขึ้นปัดลงน่ะ นึกออกนะ ให้นึกถึงอันนั้นน่ะ คือมันจะไปใช้กับลักษณะของการควบคุมในโหมดนี้นะคะ เห็นไหมคะ จะมี 1. Click เมื่อเราต้องการให้มีการคลิกเกิดขึ้น ตัวที่ 2 บอก Long Click Long Click นั่นก็คือการที่กดเมาส์ค้าง เหมือนที่พอเราเลือกวัตถุชิ้นนั้น แล้วกดเมาส์ค้างเพื่อลากไปวาง นั่นคือ Long Click นะคะ ส่วนที่ 3 Touch Down ใช่ไหม Touch Down ใช่ไหม Touch Down นี่ ให้นึกถึงใครที่ใช้ iPad iPad มันจะมีให้ใช้นิ้วน่ะ ใช้นิ้วสัมผัสหน้าจอแล้ว หรือในแอปนะ ใน Mobile ที่ นั่นก็คือ Touch Down นั่นคือ ปัด เลื่อนลง เลื่อนลง เลื่อน ๆ ๆ หน้าจอลงนะ ถ้า Touch Up ก็คือเลื่อนขึ้นใช่ไหม ใช้นิ้ว การสัมผัสแบบใช้การเลื่อนขึ้น อย่างนี้นะคะ นั่นก็คือลักษณะ เพราะฉะนั้น เมื่อวัตถุชิ้นนั้น เราต้องการให้มันทำอะไร ให้เรามาเลือกตรงนี้ นึกออกนะลูก เพราะฉะนั้น แต่อันแรกเมื่อกี้อันแรกแม่บอกแล้วว่า เราจะไปให้สั่งกดปุ่มนั้นใช่ไหม กดปุ่มนั้นนะคะ กดปุ่ม เพราะฉะนั้น เราจะเลือกอะไรคะ เลือกอะไรก่อน เมื่อต้องการให้ปุ่มนั้นโดนกด Bt1 กด ถูกกด นะคะ เพราะฉะนั้น เราคลิก เลือก Click นะคะ When Bt1 Click เมื่อ Bt1 โดนคลิก โดนกดปุ๊บ ดู ให้ทำอะไรเห็นไหม มันจะมีช่องต่อมาช่องที่ 2 ข้างล่าง แถวที่ 2 Do Do คือทำ เห็นไหมคะ คำสั่ง Do คือทำ เราจะให้มันทำอะไร เมื่อกี้แม่บอกว่าให้มันแสดงคำว่า คำทักทายในที่อยู่ใน Label เพราะฉะนั้น คำว่า “สวัสดี” ใน Label จะต้องมาโชว์ใน Do ตัวที่จะใช้ก็คือ เราต้องคลิกอะไรคะ คลิก SayHi นะลูก คลิกที่ SayHi อ้าว ในคอมพิวเตอร์นี่ ข้อความที่เราพิมพ์นี่ คอมพิวเตอร์มันจะไม่รู้จัก เราต้องมากำหนดค่าให้มันเหมือนที่แม่บอกนะ ตัวแปรที่เราใช้คืออะไรคะ ชื่อว่าอะไรค่ะ SayHi ใช่หรือเปล่า สิ่งที่จะให้ Do ทำก็คือ ตัวนี้ เอ้า ทำอย่างไรถึงจะมาได้ ดูใหม่ช้า ๆ นะคะ ถ้าอันไหนไม่ใช้ ถ้ามันผิด ถ้าดึง Block ไหนมาแล้วผิด ดูนะเด็ก ๆ มันมีถังขยะเห็นไหมลูก ลากโดยการคลิกเมาส์ค้างใช่ไหม หรือ Long Click น่ะ นี่คือลักษณะขอ Long Click นี่ เอ้า ใน Block ที่ 2 ที่คำว่า Do นี้ สิ่งที่จะให้มันทำเมื่อมีการคลิกปุ่ม Bt1 นั่นก็คือ ให้มันแสดงใช่ไหม ให้มัน Say เอ้ย ให้มัน Say ให้มันแสดงคำว่า ใน Label ของเราน่ะ แต่ทีนี้ ก่อนมันจะแสดงได้นี่ เราก็ต้องมาเลือกช่องนั้น ที่เลือก Set นี่ นั่นก็คือมันเลือกมาแล้วว่าสิ่งที่เราจะทำนี่เกิดจากการนำ Set ของ SayHi นะคะ เห็นไหม ตรงนี้มันจะไปคลิกเพื่อเลือกว่าจะเลือกใช้ Object ตัวไหน แต่ของเราคือ เราจะเลือก SayHi คือบางทีบางคนเลือกผิด Block เกิดเมื่อกี้แม่ไม่ได้บอกนะ สมมติแม่ไม่ได้บอก เรายังอยู่ที่ตัวนี้ อยู่เหมือนเดิมนี่ แล้วก็มาดึงตัวนี้ตาม แต่ชื่อมันไม่ตรงเห็นไหม สิ่งที่เราอยากให้แสดง ก็คือ ตรงคำว่า SayHi เราก็มาคลิกเปลี่ยนตรงนี้ได้ เห็นไหมคะ นะคะ สิ่งต่อมาที่ต้องการให้ทำ ให้มันทำอะไร อันแรก Text Text คือข้อความ อธิบายก่อนนะคะ Set Set อะไรกำหนดให้ตัวแปร ที่ชื่อว่า SayHi นี่ ตัวแปรนี้ เป็น Text นะคะ Font Size ขนาดใช่ไหม Font Size คือขนาดตัวอักษรใช่ไหมคะ Block Label Custom Font ขนาดของ Block Label ที่กำหนดเอง ขนาดตัวอักษรกำหนดเอง Number of Lines คือเลือกรูปแบบให้กับลักษณะของ Object นี้ แต่ของเรานี่ รูปแบบที่มันจะแสดงออกมา ก็คือให้แสดงเป็นข้อความไง เสร็จแล้วแสดงเป็นคำว่าอะไร คำว่า Label ถูกไหม ต้องแสดงเป็นคำว่าอะไรลูก ข้อความที่เราต้องการให้มันแสดงคือคำว่าอะไร ลองพิมพ์เข้าไปสิ อยากเว้นก็เว้นไง ไม่เว้นก็ไม่เว้น โอเคไหม ตรงส่วนที่สีชมพูนี่ Block สีชมพูนี่เห็นไหมคะ จะสามารถใส่อะไรได้ a letter เป็นคำเห็นไหมคะ มันจะขึ้น สังเกตถ้ามีเครื่องหมายคำพูดนี่ นั่นคือ Text ได้ เป็นข้อความได้ เพราะฉะนั้น ใส่ภาษาไทยก็ได้นะคะ ดูที่ตัว Block ด้วย รูปแบบแต่ละตัวไม่เหมือนกันนะ เห็นไหมคะ Set Do มาดูที่คำว่า Do Do อะไร Do Set นี้ Set ของ SayHi นี่ ที่ Text นี่ให้เป็น เปลี่ยน Text นี้ นะคะ to คำว่า สวัสดีค่ะ พร้อมหรือยัง ถ้าพร้อมแล้วกด Preview แล้วกดคลิก เราลืมไปว่า ขอโทษ ๆ ๆ เดี๋ยว ๆ ๆ กลับมาหน้า Design ก่อน ลบไอ้นี่ออกนะคะ ลบข้อความออก ให้เลือก Back to editing นะคะ ถ้าใครไปหน้า Design แล้ว คลิก Back to editing มาแก้ก่อน แก้ SayHi ก่อน ลืม ๆ ทำไมเข้าไปนู่นเลย แก้ SayHi นะคะ เอาคำว่า “สวัสดีค่ะ” ลบออกก่อนลูก ให้มันเป็น ไม่มีข้อความน่ะ ใน Label นี้ ใน Label นะ ให้เป็นเปล่า ๆ ทำไมมัน เข้ามา Component มันโผล่นะ ทำไม เดี๋ยวนะเด็ก ๆ ดูนะ ใน Component Label นี่ เอ้ย ใน Label เราลบข้อความที่จะโชว์ออกก่อนนะลูก Empty นะคะ ให้มันเป็น Empty ตรงนี้ ตอนนี้เด็ก ๆ กลับมาหน้า Design ก่อน แล้วลบ ไปที่ห้อง Label แล้วลบข้อความออก โอเค มาอยู่นี่ อยากให้อยู่ตรงกลาง โอเค แล้วนะ อย่างนี้นะคะ ตรง Label นี่ ตรงช่องนี่ไม่… มันจะแสดงก็ต่อเมื่อเราคลิก นึกออกนะ ข้อความนั้นน่ะ เข้าใจหรือเปล่า Preview ดูสิ Block เราใส่แล้ว ไปหน้า Block แล้วกด Preview แล้วกดคลิกดู เห็นหรือเปล่า ได้ไหม ถูกต้อง ถ้าถูกน่ะ มันถึงจะขึ้นนะ ต้องไม่มีก่อน พอคลิกแล้วถึงมี เข้าใจหรือยัง หลักการ ใครไม่ขึ้นอย่างนี้ นั่นหมายถึง ย้อนกลับให้ดูนะคะ ดูหน้า Design ก่อนนะลูก ในหน้า Design ใน Label ไม่มีข้อความนะ ข้อความจะขึ้นก็ต่อเมื่อเรากดปุ่มนี้ใช่ไหม หลักการทำงานของมัน เพราะฉะนั้นใน Label ตรงข้อความใน Label ให้ลบออก ลบออกไปเลย ให้โบ๋ ให้ Label ไม่มีอะไรเลย เอ้า ถ้าเปลี่ยนจากแสดง ข้อความเป็นรูปแทนล่ะ ทำได้ไหม ใช่ไหม หลักการเดียวกันแต่เปลี่ยนจาก Label เป็นอะไรแทนลูก เอ้า ลองมาเปลี่ยนจาก Label เป็น Image คลิกเลือกรูปนะคะ มันใหญ่ ลดได้ ลดได้ นี่ หรือแสดงทั้ง 2 อย่างพร้อมกันก็ได้ นึกออกนะ มันสามารถทำได้ มันอยู่ที่เมื่อกำหนดแล้ว คลิกแล้วเกิดอะไรขึ้น ใครยัง เดี๋ยว เดี๋ยวถามก่อนใครยังคลิกแล้วไม่ขึ้นดูนะคะ ขึ้นมาครั้งแรก พอ Preview ปุ๊บนี่ ตรงช่อง Label จะไม่มีข้อความอะไรถูกไหม แต่เมื่อกดปุ่มคลิก ข้อความสวัสดีจะขึ้นมาถึงจะถูกนะลูก อย่างนี้ ของแฝดไม่ขึ้นหน้า Preview ไปที่ Block แล้วกด Preview ได้หรือยัง เพิ่มวัตถุใน Design ใช่ไหม เพิ่ม Object ก่อนเราจะทำ บอกแล้วว่าทุกอย่างคือ เอาวัตถุใส่ในหน้า Design เสร็จ แล้วเขียนโค้ดคลุมใน Block นึกออกไหม เพราะฉะนั้น ต้องเพิ่มวัตถุในหน้า Design เมื่อเสร็จแล้วก็ไป สั่งมันที่ Block นะคะ เพราะเรา ดูนะคะ ใน Thunkable โหมดที่เราใช้งานมี 2 ส่วน ก็คือ Design Design สำหรับออกแบบนะคะ ออกแบบ วางวัตถุหรือชิ้นงานของเรานี่ ตรงนี้จะมีอะไร มีวัตถุนี้ มี Text ไหม ก็คือในหน้าแอป 1 หน้านี่ เราอยากให้มันมีอะไรบ้าง มี Text หรือเปล่า มีรูปภาพไหมครับ มี Block หรือเปล่า เมื่อเราออกแบบเสร็จนะคะ เราก็ต้องไปที่หน้า Block เพื่อสั่งการทำงานให้แอปนั้นน่ะ ในหน้านั้นน่ะ หน้าที่เราออกแบบน่ะ มันทำอะไร เราอยากให้มันทำอะไร นึกออกนะ เราก็จะไปเขียน ผ่าน Block นะคะ แต่ไม่ต้องเขียนไง ให้ลากมา โอเคนะ อันนี้คือตัวอย่างที่ 1 เดี๋ยวมาดูต่อ มาดูต่อ อยากดูต่อแล้วใช่ไหม อยากทำต่อแล้ว ใส่ขึ้นแต่ข้อความไม่เร้าใจ ใส่เสียงไหม นึกออกไหม พอกดปุ๊บ แล้วขึ้น… มันก็จะขึ้นว่า “สวัสดีค่ะ” ให้มันเป็นเหมือน เดี๋ยวนะ ขอกลับไป ขอไปหน้า ถ้าเราผลลัพธ์เราถูกแล้วนะคะ เวลาเราจะกลับไปหน้าปกติก็คือให้เราคลิกที่ back to editing นะคะเด็ก ๆ เพื่อจะกลับไป มันจะสามารถย้อนกลับไปที่หน้า… มันจะกลับไปที่หน้า Block ก่อน เพราะตอนสั่งทำงานคือเราเริ่มจากหน้า Block มานะ แต่เราทำเริ่มต้นเราจะอยู่ที่หน้า Design จะให้แสดงรูปด้วย แล้วก็ทำอะไรนะ มีเสียงด้วยใช่ไหมคะ เอารูปก่อนได้ไหมน่ะ เอ้า ๆ เอารูปก่อนก็เอารูปใส่เข้ามา พอใส่รูปแล้ว ทีนี้ สิ่งที่เราจะต้องทำก็คือ ต้องไปเลือกรูป Upload รูปนะ เห็นไหมคะ รูปนี่ ก่อนที่จะมีรูปมาวางนี่ มันจะมีเป็นกรอบของรูปนะ แต่ตัวรูปที่เราจะเอามาวาง เราต้องคลิกคำว่า Upload file เห็นไหมลูก ยังไม่มีรูป เราก็ไปหาก่อน เมื่อกี้ทักทายใช่ไหม เอาเป็นรูปอะไรสวัสดีน่ะ หารูปสวัสดีสิ เดี๋ยวนะ Cancel ก่อนนะคะ เปิด Google แล้วก็ Search หา หาอย่างนี้แล้วก็คลิกที่ค้นรูป สวัสดีครับ สวัสดีค่ะ สมมติแม่จะเอารูปนี้นะคะ เดี๋ยวเอาลงไปในไอนั่นมันก็จะถ้ามันใหญ่เกินมันจะบอก แอปมันจะบอกนะคะ ก็ให้นึกถึง รูปไม่ต้องใหญ่มาก โห เยอะแยะเลยเห็นไหมคะ แต่อย่าลืมนะคะ บางรูปนี่ บางรูปนี่อาจจะไม่ใช่รูปฟรีนะ ถ้าเป็นไปได้ก็วาดรูปมาใช้เองนะคะเด็ก ๆ นี่ คลิก คลิกแล้วไม่ได้เราจะไม่เอา [เสียงหัวเราะ] เราหารูป ได้แล้วนะคะ อย่าใช้เวลานาน เอารูปอะไรก่อนก็ได้นะเด็ก ๆ พอได้แล้ว เราก็กลับมาหน้า Thunkable เรา แล้วก็คลิกที่ Picture เห็นไหมคะ แล้วคลิกคำว่า Upload file เมื่อกี้แม่เอาไว้ที่ Picture นะคะ แม่ได้แล้วนะคะ อันนี้ไม่ได้กำหนดว่าเมื่อคลิกแล้วแสดงภาพ มันต้องซ่อนก่อน เอาไว้ก่อน เอาไว้ก่อน ให้เห็นว่าถ้าไปดู Preview ดูนี่ ยังไม่ได้กำหนดโค้ดอะไรนะ พอ Preview ดูนี่ มันก็จะขึ้นมาอยู่แล้วนะ อย่างนี้นะคะ เห็นไหม ก็คือ ถ้าเราเปลี่ยนจากอันนี้เป็นแสดงรูปแทนน่ะ เอาข้อความออก Block Block สังเกตว่าเมื่อ Block เลื่อนเข้ามา จอก็จะเลื่อนเข้ามาด้วย ก็จะลากเข้าไป เปิดไว้ไง เปิดไว้ อะไรนะ มีคนแอบหลับ นั่งเฮ็ดอยู่กันหลับกันแล้วแต่วัน ต้อง นะ มันยังไม่ซ่อน เดี๋ยวขอซ่อน Image ก่อน visible นะคะ Visible ก็คือไม่แสดง ปึ๊บ พอคลิกแล้ว ต้องให้มัน ครอบไปก่อน Visible Image ต้องให้มันโชว์ Show ต้องใช้คำว่า “Show” Show Show Show เดี๋ยว ๆ ขาดไปส่วนหนึ่ง มันต้องให้ซ่อน ซ่อนเสร็จแล้วค่อยแสดง เดี๋ยวขอกลับไปย้อนดูแอปเดิมตัวเองก่อนนะครับ ขอกลับไปดูงานเก่าแป๊บหนึ่ง ถ้ากดเพลง ดู Block อันนี้ Speak ไม่ค่อยได้เขียนแล้วก็ไม่จำหรือเปล่านี่ Speak เจอแล้ว Set Visible to เจอโค้ดที่บอกว่า Visible to ขอลอง เจอแล้วครับ เจอแล้วครับ เจอแล้วครับ เดี๋ยว ทำไมหายหมด อ้าว อ๋อ Block อยู่ที่ Visible to โอเค Visible to ไม่ขึ้น อะไรผิดไป เดี๋ยวนะ ขอกลับไปที่ Design คลิกอันนี้ปุ๊บ Visible ก่อน อ๋อ ยังไม่ได้เลือก Picture เหรอ เอาใหม่ ๆ ๆ Image ปั๊บ ให้ Visible ก่อน เมื่อคลิกแล้ว Visible กลับมา ที่ Block Visible to ลองนะครับ ได้แล้ว ดูนะ เมื่อกี้เด็ก ๆ มาดูนะคะ เปลี่ยนจากข้อความนะ ดู Design นะ ขาดไปท่อนหนึ่ง ก็คือ เราเพิ่ม Image เข้ามา แต่เราซ่อน ซ่อนรูปที่เราจะแสดงไว้ก่อนนะลูก วิธีการซ่อนรูปภาพก็คือคำสั่งนี้นะคะ Visible เห็นไหม รูปที่เราจะให้แสดงเมื่อกี้นะ รูปที่เราต้องการให้แสดงน่ะ เสร็จแล้วเราต้องซ่อนมันไว้ก่อน โดยเรามาคลิกที่ Visible รูปจะหายไปใช่ไหม ตอนนี้เด็ก ๆ ต้องอยู่ที่หน้า Design ก่อนนะคะ หลักการก็คือเดี๋ยวจะเอา ต้องการให้คลิกแล้วรูปแสดงขึ้นมาใช่ไหม เพราะฉะนั้น เราก็ให้ไปเพิ่มรูปเข้ามา ใช่ไหมคะ แล้วรูปที่เข้ามานี่ ตรงหน้า Properties เด็ก ๆ ต้องซ่อนรูปที่เราต้องการให้แสดงก่อน ซ่อนไว้โดยคลิกที่คำว่า “Visible” ที่เป็นรูปดวงตา นั่นคือการซ่อนรูปนี้ไว้ ทีนี้แล้วเราไปสั่ง ไป Coding ไป Block ไปที่ Block อ้าว ให้เด็ก ๆ ไปที่ Block คำสั่งนั้นก็คือ เมื่อเรากดปุ่มใช่ไหมคะเมื่อ Bt When Bt Click คลิกปุ๊บ เมื่อมีการกดปุ่มที่ปุ่ม สิ่งที่เราต้องการให้ทำก็คือให้ไปที่รูป รูปนั้นต้องให้มันทำอะไร เมื่อเราไป Visible มันไว้เราก็ต้องให้มัน Visible กลับมา Visible to True True คือเป็นจริง กำหนดเงื่อนไขว่า ทำเมื่อเป็นจริง ถ้าไม่จริงไม่ทำ คลิก True แล้วกด Preview ดู เราไม่มีรูปเห็นไหมคะ เราไม่มีรูป แต่เมื่อกดปุ่มคลิก นี่นะคะ ใจเย็น ๆ เอ้า ขอโทษกดผิด โทษที ๆ มือไวใจเร็ว กดข้ามขั้นไปหน่อย ตอนนี้นะคะ แม่ให้เด็ก ๆ เอารูปมาใช้ใช่ไหม ก็คือ ความต้องการคำสั่งในหน้านี้ก็คือ เมื่อกดปุ่มนี้ปุ๊บ จะแสดงรูป แต่รูปเมื่อเอามาครั้งแรกนี่ เด็ก ๆ จะต้อง มันมีรูปใช่ไหม มันมีรูปแบบนี้ ทีนี้ แม่ก็เลยบอกว่า เมื่อเอามาในครั้งแรกนี่ เราต้องซ่อนภาพมันเสียก่อน ไม่ให้มันเห็นว่ามีรูป เราก็คลิกที่ Visible รูปจะหายไป เห็นไหมคะ เสร็จแล้ว ตรงค่าใน Block นะคะ ตัวแปรที่จะใช้ มันจะชื่อว่าเมื่อกด When Bt1click ปุ๊บนี่ สิ่งที่เราต้องการให้ทำกับ Image เราก็มาเลือกที่นี่ Set Image Visible เลือกตัวนี้มาใช้ เพราะ Visible ก็คือให้มันแสดงนะคะ และต้องมาคลิกตรงนี้ด้วยว่ากำหนดให้เป็น True ก็คือเมื่อมีการคลิกปุ่มนี้จริงเห็นไหมคะ True ก็คือเป็นจริง มันถึงจะแสดงแล้วกด Preview ดู ได้ไหม อันเดิมก็อยากให้มี อันเดิมที่อยากให้มีก็คือเมื่อ Text ใช่ไหมคะ เมื่อ SayHi เดี๋ยวจะเปลี่ยนเป็นเสียงแทน ตกใจ เดี๋ยว ๆ ให้มีเสียง ทีนี้นะ ไม่จำ ๆ ผมนี่แหละไม่จำ เห็นไหมคะ ถ้าให้มันพูดนี่ Block ที่เราจะใช้อยู่ที่ Speech นะเด็ก ๆ เจอแล้ว ดูนะคะ เมื่อปุ่มนี้ ปุ่มกดคลิก คลิกที่ปุ่ม ปึ๊บ สิ่งที่เราต้องการก็คือ ต้องการให้มันพูดคำว่า “สวัสดีค่ะ” นั่นแหละ Block ที่จะใช้อยู่ที่นี่นะคะ Feature ที่ชื่อว่า Speech เลือก Say เห็นไหมคะ ข้อความที่จะ Say ก็คือคำว่าอะไร “สวัสดีค่ะ” ภาษาต้องเลือกด้วยนะคะ เพราะเราใช้ภาษาอะไรคะ ภาษาไทย ต้องเปลี่ยนเป็นภาษาไทย เอ้า ไม่เลื่อนให้ ตึ๊ด ๆ ๆ S T H A I เห็นไหมคะ เมื่อมีการกดปุ่มนี้ปุ๊บ สิ่งที่จะทำก็คือให้มันพูดคำว่า “สวัสดีค่ะ” สวัสดีในภาษาไทยนะคะ Preview เสียงคือบ่ออก มองไปดู ไม่มี Sound ภาษาไทยบ่ ลอง… ลองใช้ Hello สิ แสดงว่า เรายังไม่มี Sound ภาษาไทยนะคะ โอเค เข้าใจแล้ว ถ้าเป็นภาษาอังกฤษไม่ขึ้น เอ้ย ถ้าเป็นภาษาไทย ไม่ได้มีเสียงเราไม่มี มันต้องเพิ่มเสียงภาษาไทยเข้าไปด้วย แต่เรายังไม่มีอ่า เอ๊ะ Siri ก็มีแล้วนี่นะ ทำไมไม่ขึ้นะะ เหมือนน้อง Siri น่ะ ไม่ขึ้น (เสียงแอปพลิเคชัน) Hello (อาจารย์สุธิรา) อ๋อ มันมีคำนี้ มันไม่มีคำ คำว่า “สวัสดีค่ะ” มันต้องเอาคำภาษานั้นน่ะมาลง แล้วถ้ามันมี เดี๋ยวลองดู “สวัสดี” เฉย ๆ อยากรู้ ๆ สวัสดีเฉย ๆ มีไหม เอ้า มือไวใจเร็ว สวัสดีเฉย ๆ มีไหม เป็นไปได้อย่างไรไม่มีภาษาไทย น้อง Siri ก็มีแล้วน่ะ อยากรู้น่ะ อยากรู้ แสดงว่าคำนี้ คำภาษาไทยยังไม่มี ลอง ก ไก่ ได้ไหม [เสียงหัวเราะ] คาใจ ๆ ไม่ได้ แสดงว่า Speech ภาษาไทยไม่มี อาจจะต้องเพิ่ม ตอนนี้ใน Speech มันมีแต่ Feature Feature Speech มีแต่ภาษาอังกฤษ นี่หลักการแบบเบสิคเลยนะ คือแค่กดปุ่มแล้วทำอะไรได้นะคะ แต่บางตัวก็มีข้อจำกัด เหมือนภาษา เรายังไม่มีภาษาไทย เดี๋ยวไปดูวิธีเพิ่มเติมให้นะคะ เดี๋ยววันนี้ สิ่งที่อยากให้ทำเพื่อเราจะมาทำงานในชิ้นต่อไปนั่นก็คือ เตรียมภาพ หนังสือที่เราจะทำ ทำอะไรดี เราจะแบ่งกันนะคะ แบ่งฝั่ง แบ่งทีม ไม่ใช่แบ่งฝั่งแบ่งทีม 1. ตอนนี้ภาษาอังกฤษได้และ เพราะฉะนั้น ให้เลือกภาพคำศัพท์ ที่มันตรงกับคำศัพท์ภาษาอังกฤษที่เราจะเอามาทำแอป นึกออกนะ 5 คำนะคะ ไม่ต้องเอาคำยากนะลูก ให้ค้น 1.ค้นภาพที่จะนำมาใช้เป็นคำศัพท์นะ 5 รูปนะคะ ก็ไม่ควรเป็นหมวดกระจัดกระจาย เช่น ถ้าใครอยากได้ขนม ก็ขนมไปเลย 5 รูปทั้ง 5 รูปนึกออกไหม เหมือนเค้ก เหมือนแยมโรลอะไรอย่างนี้ นั่นก็คือ 5 ลูก ถ้าใครจะเอาต้นไม้ก็ต้นไม้ 5 อย่างนะ ให้มันเป็นหมวดเดียวกันนะคะ ให้นึกถึงเวลาทำหนังสือ 1 เล่มนะ เรื่องของต้นไม้ก็ต้นไม้ เรื่องของอาหารก็อาหาร โอเคไหมคะ อย่างน้อย 5 ภาพ มันทำไวอยู่หรอก มันเข้าใจ ค้นรูปไว้เพื่อมาใช้ประกอบ 5 รูป โอเคนะ สัปดาห์หน้าคือเข้ามาแล้ว ไม่มานั่งค้นในห้องแล้วไม่อย่างนั้นมันจะเสียเวลานะลูกนะ ก็คือหารอไว้เลย ส่งเข้าอะไร Google Drive ตัวเองไว้นะ แล้วพอสัปดาห์หน้ามาเราเปิด แม่บอกว่า อ้าว เตรียมภาพจะมาใช้ มา Design จะใส่รูปลงไปตรงไหน อะไรอย่างไรให้มีข้อความ ทำไว้เลย อย่างน้อยต้องมีรูปเพื่อจะมาใช้งานนี่ 5 รูปแล้วล่ะ โอเคนะ เพิ่มอีกอันหนึ่ง วิดีโอ ให้นึกถึงว่าไอ้ภาพที่เราเลือกมาใช้เป็นเรื่องเกี่ยวกับอะไร ก็หาวิดีโอที่เกี่ยวข้องกับเรื่องนั้น ก็เดี๋ยวหามาสิ หามาไว้ อยากเอานั่นแหละ ก็แม่จะเอาวิดีโอลง พาลงวิดีโอว่าทำอย่างไร เพราะฉะนั้นก็ต้องหาไว้ หาแค่เป็นตัวอย่างแค่เรื่องเดียวก็พอ ทำเป็นไฟล์ไว้เลย ทั้งเป็นไฟล์แล้วก็เป็น YouTube Link ไว้นะ ทำหมวดหมู่ไว้นะคะเด็ก ๆ ทำโฟลเดอร์ตัวเองไว้ก็ได้ นึกออกนะเวลามาหางาน จะได้รู้ว่างานนี้ วิชาทำแอปนี่ ข้อมูลที่ให้หาไว้อยู่ในนี้ เปิดมาปุ๊บดึงออกมาใช้งานได้เลยนะคะ อย่างน้อย 5 รูปแล้วก็วิดีโอ 1 เรื่องที่เกี่ยวข้องกับเรื่องที่ตัวเองจะทำนั่นแหละ โอเคนะ เป็นตัวอย่างนะคะ จะได้ไม่เสียเวลา ทีนี้เราจะไม่ทำแค่หน้าเดียว เพราะมันจะต้อง แอปพลิเคชันมันจะไม่ได้มีแค่หน้าเดียวจบนะ มันจะมีไปหน้าต่อไป เลยให้หา 5 หน้าว่า ไอ้ไปหน้านี้ทำอย่างไร จะไปหน้านี้ทำอย่างไร จะกลับมาหน้าแรกทำอย่างไร นึกออกไหม เราจะได้ทำหน้าที่ต่อเนื่องไปนะคะ ในสัปดาห์หน้า เพราะฉะนั้น เตรียมภาพ ภาพประกอบอย่างน้อย 5 ภาพ นะคะ และวิดีโอประกอบ 1 เรื่อง นะคะ ค้นมาให้เรียบร้อย เราจะไม่มานั่งค้นในห้องนะคะ สั่งไว้ก่อนแล้วน่ะ พอถึงเวลาก็คือพร้อมเอารูปลงในแต่ละ Screen เลยนะคะ เพราะสังเกตว่าใน Thunkable มันจะแสดงหน้าเป็น Screen ที่ 1 นะ ในตัวอย่างนี้เหมือนงานเดิมที่แม่ ที่พี่เขาทำไว้นี่ เห็นไหมคะนี่ Screen มันยังมีหลาย Screen เลย มันจะไม่ได้มีแค่ 1 หน้า เห็นไหมนี่ อันนี้น่ะภาษาอังกฤษน่ะให้ถึง แม่ให้ถึงเท่าไร คำศัพท์ภาษาอังกฤษนู่น เขามี A-Z นู่น อันนี้ทีละคำ อันนี้ทีละตัวอักษรไหม ไม่ใช่คำ นี่ อยากให้มันเล่นอย่างนี้ให้ดูใช่ไหม นี่พอกดนี่แล้วเข้า YouTube นี่ หาไว้ เดี๋ยวทำอย่างไรถึงจะโผล่มานี่นะคะ เพราะฉะนั้น ก็ต้องหาไว้ด้วย โอเคนะ เพื่อไม่ให้เป็นการเสียเวลา สำหรับสัปดาห์นี้ พอแค่นี้นะคะ เด็ก ๆ ยังมีเวลาเหลือ ก็คือหารูป แล้วก็หาวิดีโอไว้ได้เลยนะคะ ค่ะ ขอบคุณพี่ล่ามค่ะ สำหรับวันนี้ ขอบคุณค่ะ เจอกันสัปดาห์หน้าค่ะ สวัสดีค่ะ [สิ้นสุดการถอดความ]