---
title: วิชาการพัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่ (เช้า) 240766
subtitle: 
date: วันจันทร์ที่ 24 กรกฎาคม 2566  เวลา 09.00 น.
---

								(ข้อความสดจากระบบถอดความเสียงพูดทางไกล)
ทำ App อีกตัวหนึ่ง ที่ใช้วิธีการแปลว่าอะไร ก็คือ hundred ยกตัวอย่างนะคะ เป็น App ไว้ไว้ว่าไปเขียนน่ะจะมีเหมือนสีให้เลือก App ลักษณะนี้ มีสีแล้วก็มี ขนาดของหัว แรงนะคะ เราจะมากำหนดขนาดหัวแปลงแล้วก็กำหนดสีเพื่อให้ใช้เขียนได้วาดได้นะคะ หลักการเปิด Thunkable นะคะ แล้วให้เด็ก ๆ สร้าง Projectใหม่เนาะเด็ก ๆ ก็คือไปที่ create New Accountนะคะ create New Account ชื่อหาให้ตั้งชื่อว่า drawings นวปานวาด B R a Wi n g แล้วก็เลือก catagory เป็นEducation ก็ได้การศึกษาเนาะหาทำเป็น Education นะคะ ตั้งชื่อเสร็จแล้วก็กด create ได้เลยนะคะ ของเด็ก ๆ น่ะ การศึกษา  เลือกหมวด Category เป็น Education ของเด็ก ๆ สร้างใหม่เลยนะคะ แม่จะใช้ตัวเดิมเพราะว่าอัปเดตแล้วมันต้องเสียสตางค์เราก็ไม่เราจะใช้ตัวเดิมในหน้าshot นะคะ component ที่เราจะใช้1 miraclesนะคะ เราก็มีสไลเดอร์ แล้วก็อีกตัวหนึ่งชื่อว่า canvas นะคะ ก็คือผ้าใบ หลักการ ก็คือเราจะมีปุ่มสี สำหรับเลือกสีอยู่ด้านบน โดยใช้ปุ่มนะคะ เป็นตัวสร้างปุ่มสี แล้วก็มีสไลเดอร์อยู่ด้านล่าง สไลเดอร์ใช้เพื่อเพิ่มขนาดของหัวหัวตัวเขียนเรานั่นเองนะคะ สุดท้าย Canva  Canva เราอยู่ตรงกันว่าก็คือผืนผ้าใบหรือพื้นที่สำหรับในการวาด หรือเขียนนั่นเองนะคะ ตัวแรก ที่เราจะใส่เข้าไปใน screen ในหน้า App ของเรานะคะ ตัวแรกเลย ก็คือสไลเดอร์ คลิกที่สไลเดอร์นะคะ อยู่ตรง input ลูก อยู่ตรงหมวด input อันนี้ไปที่หมวด input ก่อน Input นะคะ หา Slider อันที่ 2 ใช่ไหมคะ Input มันจะมีหมวดของมันนะ ใน Component แต่ละตัวของเราน่ะ เราจะมีทั้งหมดเป๊ะ หมวดแรก Basic หมวดที่ 2 Data  หมดที่ 3 Input หมดที่ 4 มีเบียร์แล้วก็บวชที่ 5 MBตอนนี้ ให้ไปที่ Component ที่อยู่ในหมวดที่ 3 input นะคะ แล้วเลือก slider ตัวที่ 2 นะคะ slider เอามาวางด้านล่างลูก เราจะได้แถบเครื่องมือที่เป็นรูปอย่างนี้มีสีน้ำเงินอย่างนี้นะคะ เด็ก ๆ ขยายให้มันเกือบเต็มจอหน่อยเด้อ ขยายพื้นที่ให้น้องเกือบเต็มจออย่างนี้นะคะ โอเคไหม ใครยังไม่ได้ slider ตัวนี้ได้หรือยัง ได้หรือยังคลิกที่สไลเดอร์แล้วลากไปวางดูนะคะ ตอนนี้มาที่ Component ที่ชื่อว่า Input เห็นไหม อันที่ 3 นี่ แล้วเลือก slider ที่อยู่ตัวที่ 2 กดเมาส์ค้าง แล้วลากวางอย่างนี้นะคะ เอาตัวเดียวนะ แล้วจัดขนาด โดยการขยายให้มันเกือบเต็มจอค่ะ แต่ไม่ต้องเต็มนะ เว้นขอบไว้นิดหนึ่ง อย่างนี้นะคะ เห็นไหม เว้นซ้ายกับขวานิดหนึ่งให้เกือบเต็ม ทีนี้สิ่งที่เราจะต้องมากำหนดให้ Slider ก็คือกำหนดค่าเริ่มต้นมันไม่ควรจะมาอยู่ที่ตรงกลางอย่างนี้ มันของไอ้มันจะต้องมาอยู่ที่ค่าเริ่มต้นแล้วก็ค่าสูงสุดของจำนวนที่มันจะ slide ได้ไปจนถึงด้านหลังสุดนะคะ คลิกที่ slider ของเราแล้วมาดูที่ เห็นไหม Properties Properties ที่อยู่ขวามือเห็นไหมคะ ให้เด็ก ๆ มาที่นี่ value Value Length เห็นหรือยังวัแรก ก็คือค่าต่ำสุดคือ 0 Max ค่าสูงสุดให้พิมพ์ค่าสูงสุดจนมาถึงอันหลังสุดนี่ มันจะอยู่ที่ประมาณ 200 250 นะ เอาให้สัก 250 ค่ะ แล้วก็ค่า value เห็นไหมคะ valueตัวบนสุดกำหนดค่า Value เริ่มต้นที่ 0 ค่ะ ใส่ 0 นะคะ ใน slider Properties หรือคุณสมบัติที่เราจะต้องกำหนดคือ 1ช่องแวลูใส่ 0 Step นี่ คือ  1 คือให้มันเพิ่มทีละ 1 ถ้าเราอยากให้มันเพิ่มมากกว่านี้เราก็ แก้ได้ทีหลังนะคะ ค่าต่ำสุดคือ 0 ก็คือให้มันเริ่มจาก 0 ก็คือเริ่มต้นที่ตำแหน่งมุมซ้ายนะคะ และสูงสุด 250 ก็คือมันจะเลื่อนมาได้จนถึงด้านหลังสุดนะคะ ก็คือเลื่อนขนาดตัวนี้slider งนี่ มาได้ถึง 250 เราได้ส่วนของ slider แล้วนะคะ ส่วนต่อไปที่เราจะทำก็คือส่วนของปุ่ม ที่จะเป็นปุ่มสำหรับ สีน่ะ ดเลือกสีนั้นสีนี้นะคะ หลักการง่าย ๆ ให้เราเลือก component ที่ชื่อว่า Basic เลือก Component  แรก Botton อันแรกเลยลากมาวาง 1 อัน เอาแค่อันเดียวก่อนนะลูก มันจะมีคำว่า "Button" อยู่ตรงกลาง ให้เด็ก ๆ ไปที่ฝั่ง Properties ที่มันจะมีช่องชื่อมันนี่ลบออกค่ะ ลบคำว่า Button ที่อยู่ตรงนี้ออกใช่ไหม จะได้แผ่นอย่างนี้ เราต้องการเป็นลักษณะกลม ๆ เพราะฉะนั้น เราย่นขอบมันเข้าไป วงกลมขนาดนี้เห็นไหมคะ ได้ไหม สีแรก หลักการง่าย ๆ เราเลือกจากไอ้นี่เลยลูก เห็นไหม สั่งสีตามค่าสีเลยสีแรกคือสีอะไร สีแดงใช่หรือเปล่า สีแดงหรือสีส้ม ส้มแล้วกัน ออกโทนส้มจะเอาสีส้มนะคะ เป็นสีที่ 1 ได้กลม ๆ อันแรกแล้ว เราอยากให้มันได้ขนาดเท่า ๆ กัน เพราะฉะนั้น เรากดที่เห็นไหมคะ ตรง Properties ส่วนหัวที่มีจุด 3 จุด เลือก Duplicate ทำซ้ำ ทำซ้ำ แล้วกดที่ตัวนั้นแล้วลากออกมา 1 อัน เห็นไหม ทำซ้ำ แล้วเราไปเปลี่ยนอะไรคะ เปลี่ยนสีที่ 2 เมื่อกี้แดงแล้ ว ก็เป็นมันมา ก็คือเหลือแค่เราอยากได้สีเหลือง หน้าสีเหลืองนะคะ เหมือนเดิมค่ะ ทำให้ครบอะไร ไล่สีก่อนนะเด็ก ๆ มีแดง เหลือง เขียวน้ำเงิน ม่วง ไม่ใช่แดงสิอันแรกส้มนะส้มก็มันเหลืองแล้วก็มาเขียวแล้วก็ฟ้า น้ำเงิน ม่วง ชมพู และสุดท้าย แดงนะคะ ทำ ทำต่อค่ะ เด็ก ๆ ทำต่อ Duplicate ต่อ เหมือนเดิม ทำซ้ำอีกครั้งหนึ่ง เวลากดระวังนะคะ มันจะลากขยาย เราอยากได้ขนาดมันเท่าเดิม ถ้าขนาดมันไม่เท่าเดิ ม เดี๋ยวเราลบทิ้งก่อน เอาใหม่ เราก็กดโดนที่ Duplicate นะคะ เราจะได้ไม่ต้องไปแก้ไขมันใหม่ เราแค่ไปเปลี่ยนตรงสีนอกไปก็เปลี่ยนสีเป็นเขียวแล้วก็เหมือนเดิมทำซ้ำสีถัดไปนะคะ Duplicate ซ้ำแล้วก็ลากออกไปเขียวแล้วะไรต่อหว่า เขียวฟ้า ฟ้า ขอฟ้าแบบ... ฟ้า โอเค ฟ้าแล้วก็น้ำเงิน ดูการจัดแนวนะ เห็นไหมมันจะมีเส้นสีขึ้นมานะ เราจะได้เห็นว่ามันอยู่ในแนวเดียวกันหรือเปล่า น้ำเงินนะคะ ต่อไปสีน้ำเงิน น้ำเงินเราก็ น้ำเงินแล้วก็ Duplicate เพิ่ม น้ำเงินแล้วก็ม่วง ม่วงแล้วก็สีอะไรเอ่ย สีอะไรเอ่ย ชมพู สีสุดท้ายแล้วนะคะ สีสุดท้าย สีสุดท้าย คือ สีแดง ทีนี้มีสีแล้วทีนี้เผื่อจะลบไม่ออกไหมเราจะลบน้องออกน่ะหารูปยางลบมาใส่แทนแล้วกันนะคะ เพราะอะนนี้เป็นปุ่มสีนะ ยางลบนะคะ ยางลบ หาภาพยางลบ เราอยากได้ภาพที่เป็นภาพวาด เราก็เติมด้วย Vector เข้าไป ขอเอารูปนี้แล้วกัน เอารูปนี้แล้วกันนะคะ  จะเอารูปอื่นได้ยางลบสีอะไรเลือกเอานะเด็ก ๆ ให้เห็นว่าถ้าเลือกปุ่มนี้มันจะเป็นลบน่ะ ให้มันลบออกอันนี้แหละนะ เอาสีนี้แหละขอบันทึกรูปภาพเป็น อันนี้ Picture ยางลบชื่อยางลบภาษาอังกฤษ ก็คือ Eraser นะคะ e e-r-a- s -e- r แล้วขอปุ่มเพิ่ม ขอทำซ้ำ ไซซ์มันจะได้เท่ากัน แต่เราจะไม่ใส่สี เราจะเปลี่ยน ดูนะครับ วิธีการเอาภาพเข้ามาใส่ Background คลิกที่คำว่า Background เลือกเป็น image แทน เห็นไหม Background และเลือก Image นะคะ Image แล้วให้เราคลิกที่ No False เนี่เลือกอัปโหลดไฟล์เหมือนเดิมวิธีการเอาภาพเข้าจำได้นะ เหมือนเดิมนะคะ ให้มาได้รูปยางลบแล้วนะคะ เดี๋ยวจะเดินดูนะคะ ว่าใครทำสี แล้วก็ยังลบครบแล้วนะคะ ไม่อย่างนั้นเดี๋ยวเราทำตัวอื่นต่อไม่ได้นะคะ ต้องทำตัวนี้ให้ได้ก่อนนะคะ เพราะเป็นหลักสำคัญ จัด จัดให้สวยงาม เมื่อกี้ตำแหน่งไม่สวย จัดใหม่ จัดวางให้สวยงามนะลูก บางคนทำขนาดใหญ่เกินไปนะคะ ลดขนาดได้นะลูกวิธีการดูนะคะ ถ้าเราทำไปแล้วขนาดไม่เท่ากันนี่ เด็ก ๆ เช็กที่ตำแหน่งนี้ลูก เอารูปแรกเป็นหลักนะตรง layout ของ Properties นี่ ตรง layout เห็นไหมคะ ให้เด็ก ๆ ดูที่ตำแหน่ง w w ก็คือ Y Y นั่นก็คือความกว้าง ขอดูที่ตำแหน่งตัว H ก็คือหายก็คือความสูงนะคะ เราอยากให้มันเท่ากัน เช่น กว้างสูงเท่ากันก็อันนี้ 32 เพราะฉะนั้น Hight เราก็ใส่ 32 ตัวอื่นเราก็ทำ Size เดียวกันก็คิดตรงไปแล้วก็มาที่ W 32 แก้ให้เท่ากันมันก็จะได้ขนาดของปุ่มเท่า ๆ กันทุกอันเลยนะคะ มาแก้ที่ตำแหน่งนี้ได้นะลูก แก้ความกว้างและความสูงของมัน wide กับ High แค่นั้นเอง ไซซ์จะเท่ากันเป๊ะ เลยถ้าใครทำแล้วไม่เท่ากันน่ะ เราเช็กได้นะคะ ว่าขนาดเรามันเท่ากันไหม เห็นไหม ถ้าไม่เท่าเราก็แก้ได้ อยากให้มันเท่ากันมันจะได้ดูสวย ๆ นะคะ ทำงานก็ทำทั้งทีก็ทำให้มันสวย ๆ แล้วก็ตำแหน่งการจัดวางบอกทุกครั้งพอเวลาเราจัดมันจะมีเส้นสีชมพูขึ้นมา และแนวเดียวกันมันก็จะขึ้นระนาบให้ดูว่าอยู่ในแนวเดียวกันแล้วนะอย่างนี้นะคะ นี่ เห็นไหม มันจะเป็นอย่างนี้เลย โอเค เมื่อกี้ไปเดินสำรวจมาแล้ว เด็ก ๆ ได้เกือบ... ได้ครบหมดแล้วล่ะ ทีนี้เรามาเพิ่มนะคะ องค์ประกอบที่เราจะเพิ่ม อยู่ที่ compartment นะคะ ที่แถบเครื่องมือทาง ซ้ายมือ Component ที่ชื่ออะไร Canva Canva อยู่ อยู่ตัวสุดท้ายนะคะ mbed เลือกอันที่ 3 1 2 3 Canva รูปเหมือนผ้าใบนี่ค่ะ คลิกค้างแล้วเอาไปวางพื้นที่ที่เราจะทำก็คือเห็นนะตั้งแต่ขอบสีข้างบนลงมาจนถึงตรงนี้ เห็นไหมคะ ให้ลักษณะกรอบผืนผ้าใบเราอยู่ตรงพื้นที่นี้ เห็นหรือเปล่า เห็นหรือยังเอ่ย นี่ ถ้าใครเลือกถูกอัน Canva มันจะมีตัวหนอนโผล่ ขึ้นมาแบบนี้นะคะ เจ้าหนอนแดง Dead worm เลือก Canvas นะคะ ฉันว่าแล้วปรับขนาดให้เท่ากับที่แม่วางไว้ก็คือให้เกือบเต็มกรอบแต่ไม่เกินแถบสีแบบแถบ Slider ของเราเวลาจัดนะลูก สังเกตว่าใช่ไหมตรงนี้แม่ไม่ได้เอามาทับตัวส่วนนี้ มันจะมีของมันนะ ดูนะคะ เพราะถ้าเด็ก ๆ ไปทับกันมานี่ พอไปวางทับ ดี๋ยวมันจะใช้มันจะใช้ไอ้พวกนี้ไม่ได้ไม่ออกนะคะ เพราะฉะนั้น ถึงได้บอกว่าพื้นที่ให้แต่ละส่วนด้วยนะคะ แต่ละกรอบ เหมือนตรงนี้แม่ก็ไม่ได้เอาไปทับข้างบนนะคะ เราแบ่งสัดส่วนดี ๆ แบ่งดี ๆ นะคะ กรอบทำแต่ไม่ถึงกับทำเต็มก็มีพื้นที่ไปนิดหนึ่งอย่างละนิดอย่างละหน่อย โอเค ส่วนใครที่ได้ Canvas มาแล้วเด็ก ๆ เห็นตัวหนอนอันแรกไหมคะ ตัวแรก คลิกที่ตัวหนอนอันแรก แล้วคลิกถังขยะเรา ลบออกค่ะ เราไม่ต้องการไอ้รูปตัวหนอนนี้มาโชว์ นึกออกไหม เราต้องการแคบผืนผ้าใบเฉย ๆ นะคะ อะไรขึ้นมาเตือนเยอะแท้เสร็จแล้วคลิกกลับไปที่ Canvas เรานะคะเด็ก ๆ เจ้าหนอนต้องหายไปนะเราเอาแค่ผืนผ้าใบเปล่า ใครยังทำหนอนหายไปไม่ได้ คลิกเข้าไปที่ตรงนี้แล้วมันจะมีมาแต่เดิมนี่มันจะมีหนอนวางอยู่นะคะ แล้วลบออกแค่นั้นเอง โอเคนะคะ ทุกคนได้แล้วนะคะ ตอนนี้ เด็ก ๆ จะมีองค์ประกอบของ... ทำไมไม่เข้ามา ใจเย็น ๆ เครื่องค้าง ไปสิจ๊ะ โอเค แหม ดูนะคะ เราจะมีปุ่มสีละนะ ด็ก ๆ แล้วก็มีตัว slider วาดสไลเดอร์เนี่ยสำหรับเพิ่มขนาดของ หัวพู่กันหรือหัวดินสออะไรก็แล้วแต่ แล้วก็ตัวฉันว่านี้นะคะ ไว้เป็นพื้นที่สำหรับ Canvas เดี๋ยวเรามากำหนดค่าตรงนี้นะคะ ให้เด็ก ๆ คลิกเข้าไปที่ดูนะคะ เด็ก ๆ จะเห็น Canvas ใช่ไหม คลิกเข้าไปใน Canvas ค่ะ ที่ Component เราเห็นไหมคะ แล้วคลิกที่ 81 ตรง Properties จะต้องขึ้นคำว่า Toucแล้วเลื่อนไปที่ตำแหน่งท้องdorking เห็นไหมคะ เปิดเราต้องเปิดพัดลมนะคะ เลื่อนเปิด ตำแหน่งนี้เห็นหรือเปล่าลูก  ใครหาตำแหน่งนี้ไม่เจอเด็ก ๆ ต้องเข้าไปที่ Page นะคะ ใน Canvas ก่อนเห็นไหมนี่  Canvas มันจะมีซ่อนอยู่นี่ ถ้าเราไม่คลิกนี่มันจะไม่เห็นคำว่า state ขึ้นมาใช่ไหมคะ เด็ก ๆ คิดเข้าไป 1 ครั้งstage มันจะขึ้นมาเพราะ state ขึ้นมา เด็กคลิกที่ state นะคะ แล้วมาเลือก touch drawing touch drawing ปิดไว้อยู่เป็นสีเทาอย่างนี้เราต้องเปิดมันนะคะ เพื่อใช้งาน passwordให้เป็นสีน้ำเงินขึ้นเปิดค้างไว้เดี๋ยวจะไปเดินดูว่าใครยังไม่เปิด Touch Drawing โอเคนะคะ พร้อมจะเขียนโค้ดหรือยังเด็ก ๆ ถ้าพร้อมแล้ว เตรียมพร้อมนะคะ เรากลับไปที่ Screen ของเราค่ะ ทีนี้แล้วเลือก Blocks เลือก Screen ก่อนนะแล้วมาเลือก Blocks นะคะ ทีนปีนี้ล็อคเนี้ยเด็ก ๆ ดูนะคะ มันจะอยู่ที่ ชื่อว่า Advance เด็ก ๆ ต้องไปที่ Advance ลูก ไปที่ blockล่างสุดเลย  advance เห็นไหมคะ แล้วก็เลือก any component any component นะคะ คลิก 1 ครั้งใช่ ๆ อยู่ที่  Advance อยู่ที่ Advance เห็นไหมคะ อยู่ที่ Blocks ตัวสุดท้ายที่ชื่อว่า Advance  ตัวสุดท้าย dvanced แล้วก็อยู่ที่อันสุดท้ายด้วย นะคะ หลักการของเราอาจจะให้ดูหน้า Design ก็คือเมื่อเราเปิดหน้า App ขึ้นมานะ แล้วสิ่งที่เราจะสามารถทำได้ ก็คือถ้ากดปุ่มใช่ไหม ถ้ากดปุ่มสี เราก็จะเขียนสีนี้ได้ นึกออกนะ มันก็จะเขียนไปตามสี ก็คือให้ปุ่มทุกปุ่มนี่ มันทำงาน ทำงานแล้วทำอย่างไร มนี้แล้วทำอย่างไร ก็ให้นึกถึงว่าถ้ากดสีส้ม เวลาเราวาดออกมาว่าเป็นสีส้มถูกไหมคะ ถ้ากดสีเหลืองเวลาวาดก็ต้องเป็นสีเหลือง กดสีไหนไม่ว่าออกมาเป็นสีนั้น แต่ถ้ากดปุ่มลบลืมเดี๋ยวจะงงเด็ก ๆ มาที่หน้า Design ก่อนลูกแป๊บหนึ่งกลับมาที่หน้า Design ก่อน ให้เราเลือกที่ปุ่มที่เป็นรูปยางลบของเราค่ะ แล้วเราไปตั้งชื่อให้น้องใหม่ก่อน ไม่เอา Bottom 8 ให้รู้ไปเลยว่าปุ่มนี้เป็นยังลบ เห็นไหมคะ คลิกเข้าไปที่ตรงตำแหน่งชื่อมั นแล้วก็แก้ชื่อเป็น Eraser  E-r-a-s-e-r นั่นก็คือถ้าเรากดปุ่มลบนะ มันก็จะต้องลบไอ้สิ่งที่อยู่ในหน้าในผืนผ้าใบเรานี่ออกไปนะคะ Eraser นะคะ ตัวอื่นไม่ต้องแก้เพราะจิ้มตามสีออกตามสีนั้นว่าอย่างนั้นเถอะนะคะ เพราะเราใส่ค่าให้เข้าไปแล้ว เรียบร้อยแล้วด้วย คลิกนะคะ ที่ปุ่มสุดท้าย ที่เป็นรูปยางลบ และชื่อปุ่มจะต้องขึ้นว่า eraser โอพร้อมไปที่การเขียน Coding ไปที่ Blocks ของเราแล้วนะคะ คลิกที่ Screen ของเราค่ะ คลิก Screen แล้วก็เลือก นะคะ ไปที่คำว่านั้น Advance ตัวสุดท้ายเลือก  Any Component  Blocks ที่เราจะเลือกก็คือเมื่อเห็นไหมคะ Any Butto ปุ่มใด ๆ ปุ่มใด ๆ โดนกดนี่ ดู ให้ทำอะไร เราจะเลือกตัวนี้ออกมา เอาอันนี้ออกมา เพราะใน block นี้ มันบอกไว้ว่าเมื่อมีการกดปุ่มอะไรก็แล้วแต่ any Boston เมื่อมีการคลิก จะทำอะไรทำอะไรได้มาดูกัน สิ่งที่เราอยากให้ทำ ก็คือผ้าใบของเรานึกออกนะ เพราะฉะนั้น เราต้องคลิกที่ Stage คลิกที่ State เดี๋ยวนะ เราต้องเลือก State นะคะ เด็ก ๆ เพราะพื้นที่ที่เราจะทำ ก็คือผืนผ้าใบตรงนั้นมันจะเป็น State นะเลือก State แล้ว gfuเดี๋ยวนะ ขอดูโค้ดก่อนแป๊บหนึ่งนะคะ  เมื่อ state เมื่อมีการคลิก สิ่งที่จะต้องทำ ก็คือ state Touch drawing True เจอแล้ว อันสุดท้ายนะลูก เดี๋ยว ๆ ๆ เดี๋ยวหาไม่เจอ block ต่อไปที่เราจะเอามาใส่อยู่ที่ state นะคะ แล้วก็อยู่ที่ตัวสุดท้ายเลย ที่มีตัวสุดท้ายตัวที่มีคำว่า Set Stage rawing Color to เจอหรือยัง ใครยังหาไม่เห็นจ๊ะ หาไม่เห็นยกมือเดี๋ยวให้ดูใหม่ช้า ๆ นะคะ ตอนนี้ Blocks ที่เราได้ ก็คือเมื่อมีการกดปุ่มใด ๆ Any button Clickดู ดู จะให้ทำอะไรให้ทำอะไร สิ่งที่เราจะให้ทำ มันอยู่ที่ canvas หรือ Canvasคือมี Stage เพราะฉะนั้นเราคลิกที่ state คะ ฉันว่าแล้วก็จะไปแล้วก็เลื่อนลงไปจนเห็นเนี่ยที่มันมีแถบสีอยู่ด้านหลัง สังเกตง่ายอยู่นะไปที่ Set State Drawing Color To มีช่องสีนะคะ ตัวนี้นะคะ ก็คือให้ State drawing ใช่ไหมก็คือวาดใช่ไหมคะ  Drawing สีอะไรเดี๋ยวนี้ค่อยไประบุใส่ทีหลังลากมาก่อน ลาก block มาก่อนมาวางก่อน โอเคไหม ใครยังไม่ได้แบบนี้ ทีนี้ ลองนะคะ ลอง เทสต์ดู คลิก testing กดเลือกสี โผล่ไปหน้าไหนเนี่ย มันให้วาดนิดเดียว เมื่อกี้มันค้างของเด็ก ๆ น่าจะขึ้นไหม เลือกแล้ววาดได้ไหม ดูหรือยัง ดูหรือยัง  เอาใหม่เด้อ เพราะอะไรเพราะยังเป็นสีดำเพราะอะไรในตัวเลือกเรามันเป็นสีดำถูกไหมคะ อันนี้คือแม่มีหน้าเก่าค้างไว้น่ะ มันก็เลยย้อนกลับมาหน้าเดิมนะ โอเคนะคะ นี่ดูสีที่เลือก ตอนนี้ยังไม่ได้ระบุเปลี่ยนสียังระบุเป็นสีนี้อยู่ tool ตรงนี้จะเปลี่ยนนะคะ เปลี่ยนเป็น หา หาตัวไหน ย่อลงไปก่อน มีCanvas แล้ว อันนี้ anakin อีก แล้วเลือก state ตัวนี้ไปวางเข้าช่องนี้แทนนะลูกเปลี่ยนจาก Stage  เป็น Button ปุ่มอะไรน่ะ ตรงนี้ลาก Component เข้ามาใส่ ก็คือเมื่อก็จะวาดในจากอะไรจากปุ่มที่กดดูสิว่ามันจะออกไหมพอประเด็น ก็คือมันก็จะเช็กตามสีดูสิว่ามันจะเป็นสีนั้นไหมเทสต์ ทำเหมือนเดิม โอเคไหมเด็ก ๆ ได้สี เอาใหม่เด้อ อันไหน อันนี้ใหม่ ใช่ไหม ตัวนี้นะคะ ดู ตอนนี้มีอันนี้ครบแล้วเนี่ ตัวนี้มันมาจากนี่เห็นไหม any component ต้องไปที่ any componamนะคะ แล้วเลือกนี่ Stage Background Color เลือกตัวนี้มาใส่ตรงช่องช่องสีแทนเพราะถ้าอย่างนี้มันคลิกไว้ที่สีเดียวนึกออกนะแต่ทีนี้แล้วมีปุ่มสีเราก็จะต้องมาให้มันทำตามค่าสีของเรานั่นเองนะคะ เพราะฉะนั้น ตรงช่องแรก Stage เราก็เปลี่ยนจาก stateเป็น tool button ไปที่ปุ่มปุ่มนี่ ปุ่ม เราเราใช้ component เพราะว่าปุ่มเรามีหลายปุ่มelegant senegal เพราะมีหลายปุ่มนั้นต้องไปดึง component ที่มันสร้างไว้ให้อัตโนมัติน่ะมาใส่แล้วพอเราคลิก Plany ปุ๊บนะคะ เมื่อเรากดสีไหนก็แล้วแต่มันก็จะ มันจะย้อนกลับมาทำไม ขอเล่นก่อนไม่ได้เหรอ เห็นหรือเปล่านะคะ เมื่อกี้สีชมพูและสีน้ำเงินแม่ได้ทุกสีนะ ใครไม่ได้เพราะ... ต้องการลากมานะคะ ลากมาไม่ใช่ติ๊กเลือก ดูไหม ดูโค้ด block ดี ๆ อะไร โปรแกรมเล็ก ๆ เอง ทำไมช้าจัง นี่ ๆ ๆ อันนี้ แล้วทำแบบนี้ลากมาจากตรงนี้นี่ลากมาใส่มันสร้างไว้ให้อัตโนมัติไง มันเช็กแล้วว่า Any Button  ของเรามีอะไรบ้าง มันก็ทำ Component  มาเราก็บอกว่าบอสท่อนนี้แล้วก็เป็น background Color โอเคนะลองจิ้มสีดูไปโอเค ได้วาดได้แล้วนะ แต่ยังไม่เสร็จใช่ไหม เพราะอะไรลูก เดี๋ยวย้อนกลับมาที่ Design เรามีปุ่มลบอีกใช่ไหม เมื่อกี้ให้เพื่อนลองเทสต์ กดปุ่มลบแต่มันออกสีถูกไหมลูก เพราะฉะนั้น เมื่อใดที่กดปุ่มลบมันจะต้องทำอะไรคะ ลบออกใช่ไหมลูก เราต้องไปกำหนดเขียนโค้ดให้กับ Blocks ของเขียน Blocks ให้เดี๋ยวจะเขียนโค้ดให้ปุ่มลบนะคะ ขียน Blocks ให้เขียนโค้ดให้ปุ่มลบนะคะ เรากลับไปที่ block ของเราเหมือนเดิม ตอนนี้เรามีอะไรแล้วบ้างมีบอกว่าเมื่อ มาที่นี่มันต้องมีการตรวจสอบเพราะมีมีวาดสิ่งที่ตรงกันข้ามกับบ้านก็คือลบอันนั้นเราต้องใส่ เงื่อนไขให้มันนะคะ ไปที่เรียก Logicเปิดเลือก Control Control เห็นไหมคะ เลือก If เอาใส่ไว้ก่อน ก่อนงเงื่อนไขเงื่อนไขต้องมาก่อน ถ้าแล้วหรือ ถ้าแล้วหรือ เงื่อจะทำเงื่อนไขของอีฟนะคะ if อะไร สิ่งที่จะอยู่ในนี้ ก็คือ state ไหม state เราอยู่ไหนน่ะ หา state เราอยู่ที่ Canvas if statespreadแป๊บหนึ่งนะคะ if แล้วก็ เลือก logic if นะคะ if แล้วไปเลือก Logic นะคะ เด็ก ๆ อันแรก อันแรกที่มีเครื่องหมายเท่ากับน่ะ ไม่ ๆ อยู่ที่ Logic อยู่ที่ Logic นี่ เครื่องหมายที่มีเครื่องหมายเท่ากับอันนี้ก่อน แล้วก็เลือก Eraser Eraser เราอยู่ไหนเด็ก ๆ  อยู่ข้างล่างสุดไปไอ้นี่ Component ครับ เด็ก ๆ เลือกอันเดียว นี่ ๆ ๆ  ที่มี blockอันเดียวที่ขึ้นว่า layer 1 แต่เราไม่ได้เอา layer 1 เปลี่ยนจาก layer 1 เป็นของเรา ก็คือ eraserเราจะเลือกถ้ามีการลบเงื่อนไขเปลี่ยนจากถูก ไม่เท่ากับ ถ้าไม่เท่ากับ ถ้าอะไรถ้า component เห็นไหมคะ เมื่อปุ่มโดน Click ใช่ไหมโดยไม่มีคำแนะนำกับนั่นหมายถึง Any Button  ปุ่มใด ๆ  ไม่ใช่ปุ่มเห็นไหมคะ เงื่อนไขมันบอกว่าถ้า If ถ้า if Component ก็คือปุ่มใด ๆ นี่ ไม่เท่ากับนะคะ เป็นเครื่องหมายไม่เท่ากับนะไม่ใช่เท่ากับนะ ถ้าไม่เท่ากับปุ่มลบนะคะ สิ่งที่เราต้องการให้เขาทำ ก็คือเราก็มันเลื่อนไอ้นี่ขึ้นมาดู state นี่ ดู เพราะเมื่อกี้ Do Stage มันเลื่อนไปอยู่ข้างล่างนะ มันอยู่ตรงนี้ไม่ใช่เพื่อนมันขึ้นมาเพราะเราใส่เงื่อนไขเข้ามาเพิ่ม ทำอะไรให้มันไปคลิกค่าสีที่ค่าสีเสร็จแล้วแต่ถ้าเป็นปุ่มลบล่ะ เพราะฉะนั้น เมื่อมี If เงื่อนไขที่ 1 บอกไม่ใช่ปุ่มลบลาั เพราะฉะนั้น ต้องเพิ่ม else else เดี๋ยวคือเงินไขที่ 2 ว่าแล้วถ้าเป็นปุ่มลบนะคะ คลิกที่ตัวปุ่มสีม่วง ๆ นี้นะลูก ตำแหน่งสีม่วงกด 1 ครั้งเลือก else มาวางต่อ If เห็นหรือเปล่า  มันจะมีช่อง Else โผล่ขึ้นมาอย่างนี้ไหมคะ ใครยังไม่ได้ Blocks แบบนี้บ้าง กดไอ้นี่ Else ลากเข้าไปต่อตรง Else เข้าไปต่อตรงช่องนี้มีไหมข้างล่างมันถึงจะขึ้นดูนะคะ ดูใหม่นะคะ คลิกกลับคืนก่อน คลิกที่สีม่วง ใช่ นี่ไงลากไปต่อนี่ แล้วมองหาคำว่า Canvas Canvas ไปที่ Canvas แล้วดูที่ look ลูก ลบได้แล้ว ใช่สิ อ้าวก็อย่าเพิ่งไปทีละอย่างสิวะ รอเพื่อนหน่อย ตัวเองได้แล้วก็รอเพื่อนก่อน หา Color Drawing  Clear Drawing  on เห็นไหมคะ เมื่อกี้ลืมบอกใช่ไหมให้ไปที่ look เพราะสิ่งที่เราจะทำมันยังอยู่ในอะไรคะ อยู่ใน CaNVของเราใช่ไหมคะ ก็คือเพื่อนมองหาอะไรมองหาคำสั่งclear drawing on ให้มันลบใช่ไหม อันแรกบอกว่าถ้าปุ่มนั้นไม่ใช่ปุ่มลบแต่ถ้ามันเป็นปุ่มลบปุ๊บ แล้วมันจะทำงานก็คือให้ลบ clear drawinf 1เพราะผ้าใบเราชื่อว่าแคนว่าหนึ่งขายได้อย่างนี้แล้วเอาลองเทสต์ ดู Test ดูนะคะ ว่าตรงไปก่อนนะคะ วาดก่อนแล้วเด็ก ๆ ค่อยลบนะว่าแล้วกดปุ่มลบของเด็ก ๆ น่าจะได้ไอ้ตัวนี้มาค้างกับไอ้ตัว... เฉย ๆ นะคะ  โอเคไหม ลบไหมคะ ใครลบไม่ได้ชื่อมันก็บอกแล้วนะ Clear Drawing ลบไอ้สิ่งที่วาดอยู่น่ะ ออกเสีย ทีนี้ ต่อไปส่วนที่เราจะทำ ตรงส่วนของปุ่มควบคุมได้หมดแล้วนะคะ เมื่อกดปุ่มนี้ วาดก็จะเป็นสีนี้ กดปุ่มลบ ไอ้ที่วาดก็หาย ที่นี้ส่วนตัวมา slider เราเขียนโค้ดให้ slider เรา นั่นก็คือเมื่อเรามีการเลื่อนขนาด เห็นไหม ขนาดของหัวแปลง หรือขนาดหัวเขียนก็จะเปลี่ยนไปตาม Size Slider ที่เราเลือกนะคะ กลับไปที่ Bloลูกแล้วเลือก เลือกอันแรกเลยนะคะ When Slider on Value Change เมื่อมีค่า มีการเปลี่ยนค่า เห็นไหมคะ เลือกอันนี้มาเลย เมื่อ slider มีการเปลี่ยนค่าvalue ก็จะเปลี่ยนตาม value ใน Component ที่เรากำหนดเมื่อ slider มีการเปลี่ยนค่าสิ่งที่มันจะมาทำใน block นี้ก็คือ stage นี่นะคะ เลือกเลือกจาก Any component นี่เดะ Slider นี้ตรง  Component  นี่ Slider ตัวเองน่ะ ก็ให้มันเลือกเอาอันใดอันหนึ่งเลือกจากตรงนี้นะคะ เลือกจาก Component  Slider ที่เราสร้างนะคะ มันถึงขึ้นนะคะ เพราะเราจะไปสั่ง  coding ให้ slider ตัวนั้นทำงานนะคะ เพราะฉเลือกสไลเดอร์น้ำแล้วก็ไปที่ state เลือก State นี่นะคะ เลือก Set state  drawing while แต่ที่ drawing วิ่งจริง ๆ มันต้อง drawing ตาม Volume ตามที่เราเปลี่ยนให้ไหมคะ Volume ค่า Volume มาใช้แทนที่มันมีตัวแรก ดอมเปลี่ยนได้ไหม เข้าใจหรือยัง  เราจะสั่งให้ Slider ใช่ไหมมันทำงานตามการเปลี่ยนเห็นไหมคะ on Value Change เมื่อค่าของ Slider มีการเปลี่ยนสิ่งที่เราจะให้ทำ ก็คือstate นี้จะวาด dogging while วัดความกว้างตาม value เห็นไหมคะ แต่ถ้าเราไม่ใส่ถุงเอาถุงออกดูนะลูกเฮ็ดให้ดูแม่จะไม่เห็นอาจจะเทสให้ดูถ้าไม่ไม่เอาแหวนรูปใส่เคสนะคะ ค่าไอ้ตัวนี้มันก็จะแค่ 20 เท่านั้น แต่ค่าเดี๋ยวแม่ใส่ตัวนี้เข้าไป  เดี๋ยวใส่ค่า Value เข้าไปนะคะ Test เลื่อนขนาดแล้วว่ามันไปกลับ เพื่อนบอกข้ามได้นะคะ เดี๋ยวไปแก้ Edit... ก่อนย้อนกลับมา  โอเคไหม เปลี่ยนได้ไหมคะ ให้นึกถึง วาดอะไรได้อีก วาดวงกลมได้อีกใช่ไหม ให้ดูที่ ที่ไหนหว่า drawing look ใน Canvas เราก็ไปที่ลูกเห็นไหมในบล็อกอ่ะมีดอลายเส้นด้ายPassword เข้าได้วาด Polygon ได้ใช่ไหม ถ้าสมมติเราสร้างปุ่มแล้วบอกว่าให้วาดเป็นรูปอย่างนี้น่ะ นึกออกนะ วาดวงกลมวาดเส้น อยากลองดึง Block ไปใส่เราเราก็กำหนดให้น้องวาดเพิ่มเข้าไป เช่น  สมมติ สมมติ สมมติ สมมติ นี่นะ มีปุ่มนี่ ไม่พอ อยากให้ช่างวงกลมทำรูปวงกลมลงไป ทำรูปสี่เหลี่ยมสามเหลี่ยม แล้วพอกดปุ่มวงกลมมันก็มาวาดรูปเป็นวงกลมให้ กดปุ่ม หลักการเดียวกันกับตััวนี้เลยดูนะคะ เราต้องไปหารูป มาใส่แทน ดอมลองสิ Test วงกลมให้แม่สิ สร้างวงกลมวงกลม 1 อัน แล้วแล้วลองเขียนโค้ด ว่าถ้ากดที่รูปวงกลมนี่ แล้วลองมาวาดนี่ มันก็จะวาดเป็นรูปวงกลมให้เราโดยใช้ Block ที่ชื่อว่า Look มีไหมLook drawing เห็นไหมคะ มันจะมี draw  Circle ลองสิ เห็นไหม มันจะมีสัดส่วนของ block แบ่งไว้ให้เรียบร้อยนะครับ คนอื่นเป็นอย่างไรคะ คนไปดูแล้ว slider แล้วทำไมมันใหญ่ ให้เด็ก ๆ เช็กตรงนี้ด้วยนะคะ ตรงหน้า Design นี่ เดี๋ยวนะ ประมวลผลช้า ในหน้า Design เราต้องคลิกที่ตัว Slider เรานะบอกแล้วตอนตั้งค่าเห็นไหมคะ Maximum เมื่อกี้ของแฝดนี่ น่าจะพิมพ์ซ้ำให้ดูนะคะ ไอ้ค่าตรงนี้ก็มีส่วน ยิ่งใส่ค่าเยอะ ๆ เส้นมันก็จะใหญ่ตามนะ ใหญ่ตามค่า เพราะฉะนั้น กำหนดให้เมื่อกี้บอกเท่าไหร่นะ 250 อยู่ที่ประมาณ 250 นะ เพราะแม่ลองเทสต์แล้ว บางคนใส่เกินนั้นน่ะ มันก็เลย เส้นมันออกมาก็เลยใหญ่นะคะ ลง max ค่าสูงสุดเขาน่ะค่ะ Maximum Volume ลักษณะเส้นที่วาดออกมามันก็จะแล้วตรง Volume เริ่มต้นเริ่มที่ 0  เริ่มที่ 1นะคะ  Min ก็เริ่มที่ศูนย์นะคะ เท่านั้นนะคะ นี่คือจุดที่ต้องสังเกตนะคะ หลักการเดียวกันถ้าทำวงกลม วงรีอะไรก็แล้ว แต่ ก็ต้องกำหนดค่าให้น้องเสียก่อน พวก Component พวกVolume เห็นไหมคะ มันจะขึ้นตามค่าที่เรากำหนดไว้นั่นเองนะคะ เพราะเหมือนคำว่านั่นน่ะในหน้า Design ของสีแต่ละสี เวลาเราเรียกใช้เห็นไหม ใช่ไหมดอมแม่ไม่ต้องไปเรียกสีนั้นสีนี้มาเพราะแม่เลือกว่าให้มันเช็กกับ Component เลยจะเช็กจากค่าสีที่เราเปลี่ยนใน Design ไว้แล้วไม่ว่างนะเหมือนปุ่มส้มนี่ ในค่าสีของมันก็เป็นสีส้ม สีเหลืองค่าสีก็เป็นสีเหลืองเห็นไหมคะ นั่นคือ ใน component ที่เราสร้างขึ้นมาแล้ว มันก็จะมีค่าสีตามนั้น โอเค สัปดาห์นี้เราจะพอแค่นี้นะคะ สัปดาห์หน้าเจอกันใหม่ การบ้านใครยังทำไม่เสร็จ ทำให้มันเสร็จด้วยทำให้สวยงามนะคะ เป็นคะแนน การบ้านมี 2 ชิ้นแล้วตอนนี้ ชิ้นสุดท้ายเดี๋ยวจะดูว่าจะให้ทำอะไรเด็ก ๆ ต้องลองผนวกจากที่ี่สอนไปทั้ง 3-4 งานนี่แล้วเอามาสร้างเป็นชิ้นงาน 1 ชิ้นงานนี่ จะได้อะไรบ้างนะคะ จะให้ลองทำ เพราะฉะนั้น ให้ดู ย้อนกลับไปดูในงานเก่าแต่ละชิ้นของตัวเองด้วยนะคะ สัปดาห์นี้พอแค่นี้ค่ะ ขอบคุณพี่ล่ามค่ะ สวัสดีค่ะ 

[สิ้นสุดการถอดความ]