--- title: พัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่ 10/08/2565 subtitle: date: วันพุธที่ 10 สิงหาคม 2565 เวลา 13.00 น. --- (ข้อความสดจากระบบถอดความเสียงพูดทางไกล) ใช่ไหม ก็จะเป็นหน้าล็อกอินนะ และหน้าสุดท้าย ก็คือถ้าเรามีตัวที่จะเข้าไปจากเมื่อล็อกอินเสร็จแล้วเข้าไป ก็ทำเป็นหน้า หน้าต้อนรับก็ได้ เพิ่มอีกหน้าหนึ่งนะคะ ในครั้งก่อนมีหน้าที่ 1 แล้ว หน้าที่ 2 มันทำเหมือนกันวิธีจะให้หน้าที่ 2 เหมือนกันเด็ก ๆ ดูตรงนี้นะคะ วิธีการ ให้เราไปที่ ตำแหน่ง Screen อันที่ 1 แล้วไปที่ตำแหน่งที่ screen แล้วคลิกที่ตัวจุด 3 จุด เห็นไหมคะ ตำแหน่งหน้าต่างทางขวามือเห็นไหม แล้วมันจะมีคำว่า "Dupicate" คือ Duplicate นี่มันมาจากการ Copy แล้วก็วาง คือมันรวบ ctrl + c มาเป็น Duplicate เลย ไม่ต้องไปกด Ctrl + C ดูนะคะ ทำให้ดู กดปุ๊บ มันก็จะถาม แน่ใจไหมที่จะทำการทำสำเนา หรือสำรองหน้านี้ ถ้าแน่ใจให้เรากดที่ Duplicate เห็นไหม มันก็จะได้หน้าเพิ่มขึ้นมา หน้าตาเหมือน... ตรงนี้นะ ที่มันขึ้นสัญลักษณ์รูปถังขยะถึงจะได้ อ่าว เปิด Thunkable นะ เปิดตัว Thunkable เว็บ Thunkable แล้วก็ล็อกอินเข้าไป จำได้อยู่นะถ้าใครเข้าถูก มันจะขึ้น Project ที่เราทำไว้ใช่ไหมนี่ มันจะต้องขึ้นอย่างนี้ มีชื่อโปรเจกต์ทำไว้ในครั้งก่อน ๆ ขึ้นมา จำได้ใช่หรือเปล่า Acound ในการเข้าสู่ Thunkable ชื่ออะไร เมื่อกี้บอกว่าตอนแรกมีหน้าเดียวใช่ไหม ตอนนี้ให้เพิ่ม หน้าที่ 2 วิธีเพิ่มให้มันได้เหมือนกัน หน้าที่ 1 กับหน้าที่ 2 เหมือนกัน ให้ไปที่ screen ที่ 1 คลิกอันแรก คลิกอันที่ 1 เสร็จแล้วมาที่ตำแหน่งนี้ เห็นไหม จุด 3 จุด ทางมุมซ้าย แล้วก็เลือกคำว่า "Duplicate" อันที่ 2 เลือกอันที่ 2 Dupiceta อันที่ 2 เห็นหรือเปล่า คลิก 1 ครั้ง มันก็จะถามว่าต้องการไหม เราก็คลิกที่คำว่า "Duplicate" เห็นหรือเปล่า เด็ก ๆ ก็จะได้หน้าที่เหมือนกันเลย เปลี่ยนตรงปุ่ม หน้าที่ 1 ให้ปุ่มจะชื่อว่า Sign in แต่ปุ่มที่ 2 ปุ่มต้องเป็น login นะคะ นะคะ อันนี้เพิ่มแล้วลบออกได้ แล้วก็เพิ่มหน้า อีกหน้าหนึ่ง เพื่อที่จะทำให้เรากด login แล้วปุ๊บ ถ้ามันถูกใช่ไหม มันก็ควรเข้าไปสู้หน้าที่เป็นเนื้อหานะ เพราะฉะนั้น เพิ่มหน้าเนื้อหานะคะ ก็หารูปใส่แล้วก็พิมพ์ข้อความ ชื่อแอปเราก็ได้ใส่เข้าไปเพิ่มอีก 1 หน้า อันนี้เพิ่มเอง แต่งเอง นึกออกนะ เพราะฉะนั้น ตอนนี้ที่เราจะต้องมีเพื่อเขียน Coding ได้ เราต้องมีทั้งหมด 3 3 screen 3 หน้าจอนะคะ ดูดี ๆ นะ หน้าจอที่ 1 ก็คือหน้าจอสำหรับ Sign in เข้าไปใช่ไหมคะ หน้าจอที่ 2 จะเป็นหน้าจอ login นะ Sign in คือ เหมือนตอนเราเข้าเว็บ (ไซต์)ใหม่ ๆ เรายังไม่มีใช่ไหม ไม่มี User เขา เราก็ต้องลงทะเบียนก่อน เขาเรียกว่าอะไรล่ะ ใส่ Username กับ Password ใช่ไหมคะ นั่นหมายถึง เมื่อเราลงทะเบียนไปแล้ว แล้วครั้งหน้า ถ้าเรามาเพื่อจะ Login นึกถึงนะ เราก็แค่กรอก username แล้วก็ ไอ้ชื่อ Username และ Password ถูกไหม แล้วพอกด Login มันจะเข้าไปทำแอปได้ หรือไปดูข้อมูลในแอปได้ เพราะฉะนั้น ก็เลยให้มี 1, 2 , 3 3เมื่อกดแล้ว กดจากนี่ปุ๊บนะ พอลงทะเบียนเสร็จ มันจะให้ทวนว่าคุณลอง Login เข้าไปใช่ไหม ถ้า Login เสร็จ ถ้าเข้าได้ มันก็จะมาเปิดหน้านี้ เพราะฉะนั้น ต้องมี 3 หน้า ไอ้หน้าที่ 3 สร้างใหม่นะคะ ใส่รูป แล้วก็ข้อความ เพื่อให้รู้ว่าเป็นแอปยนี้นะ อีกอันหนึ่งพอ แค่นั้น โอเคนะคะ ตอนนี้เราจะต้องมีทั้งหมด 3 หน้าแล้วนะ ทีนี้เราจะเริ่มมา code แล้วน ก่อนจะ Code เช็กก่อนนะคะ ในหน้าแรก ก็คือหน้า Sign ib ตั้งชื่อสลับกัน ดูชื่อนะ ของเรามันก็ต้องเป็นอะไรนะ login มันต้องเป็นอะไร Sign in นะคะ s-i... Sign in นะ s-i-g -g-n จะได้ไม่สับสน ตอนนี้สับสนเองแล้ว แก้ไปแก้มาหลายรอบ งง อันนี้ก็ต้องเป็นนะคะ เราก็จะมีหน้า login 1 หน้า แล้วก็หน้าแรกก็ได้ First ก็ได้นะคะ เปลี่ยน เพราะไม่ได้พิมพ์คำว่า "Welcome" ก็พิมพ์ First App ก็ได้ ไม่ก็หน้าเพจ หน้าแอปก็ได้ นะคะ ก็คือเข้ามาที่หน้าแรกของแอปเรา สิ่งที่จะต้องมีเพิ่มในหน้า Login นะคะ เด็ก ๆ เห็นไหม แม่มีกรอบเปล่า ๆ นี่อยู่ตรงนี้ 1 อันอยู่ด้านล่างนี่ เพราะอะไร เพราะว่าบางทีให้นึกถึงนะ บางคนพอเวลา Login แล้วกรอกผิดน่ะ มันควรจะมีการแจ้งเตือนใช่ไหมคะ ว่าไอ้ที่เรากรอกน่ะมันไม่ถูก สิ่งที่จะใส่มาตรงนี้นะคะคือ label เด็ก ๆ คลิกที่ Label แล้วเอามาวาง แล้วตรงตำแหน่งนี้ ให้คลิกที่กากบาท ให้มันเป็น Emty ให้ label มันเป็นเปล่า ๆ เพราะมา Label ครั้งแรก เดี๋ยวทำให้ดูนะคะ ถ้าเราเลือก Label ครั้งแรก แล้วเอามาวาง มันจะมีคำว่า "Label" อยู่ใช่ไหมลูก เห็นหรือเปล่า ให้เราคลิกที่ลบนี่ มันจะหายไปใช่ไหมแล้วที่เป็นกรอบข้อความเฉย ๆ น่ะ แต่อันนี้ไม่ได้อยู่ที่ Sign in นะ ให้ไปเตือนที่ login นะ ใช่ ๆ เตือนที่ Login ตอนแสดงให้ดูเฉย ๆ ว่าถ้าเอา Label เห็นหรือเปล่า เห็นไหมคะ เอาไว้ที่หน้า Login นะคะ จะเอาไว้ข้างบนหรือข้างล่างแล้วแต่นะ ก็ได้นะคะ เอาไว้ก่อน Button ก็ได้ แล้วเอาไอ้แจ้งเตือนขึ้นมาก่อนก็ได้ หรือแจ้งเตือนไว้ข้างหลังก็ได้ ก็แล้วแต่นะ จัดตำแหน่งนะคะ เดี๋ยวแม่วางไว้ข้างล่างอย่างนี้นะคะ ตรงข้อความในนี้ Label น่ะ ถ้าทำให้มันหาย ก็คือคลิกที่เครื่องหมายกากบาทตรงนี้ มันจะเป็น Empty mty sping นะคะ แล้วมันจะขึ้นเตือนได้อย่างไร แม่ไม่ใส่ข้อความ ก็เราจะไปเขียนโค้ดไงคะ ให้มันไปขึ้นตอนที่เรากดปุ่ม Login แล้วข้อมูลที่ Username ที่เราใส่ มันไม่ถูกน่ะ มันถึงจะขึ้นนะ ทีนี้มาดู อันดับแรก หน้าแรกก่อนเราต้องไปตั้งค่าที่หน้าแรกก่อน หน้า Sign in ก่อนนะ สิ่งที่เราจะต้องใส่ Coding เข้าไปนะคะ นึกถึงง่าย ๆ หลักการ ก็คือเวลาจะ Sign in เวลาเราจะให้เขากรอก Username ใช่ไหมคะ แล้วก็ pass2 ตัว เมื่อกรอกเสร็จแล้วให้มากดปุ่ม Sign in ใช่ไหม นะคะ ก็คือพอเปิดเข้ามาปุ๊บ ให้คนที่ใช้แอปเราเขากรอก Username แล้วดแล้วก็ Password ลงไป เมื่อกรอกเสร็จ ให้กดปุ่ม Sign in ทีนี้ ไอ้สิ่งที่กรอกที่ มันจะเอาไปเก็บไว้ไหนใช่ไหม เพื่อจะ เช็คได้ว่า ที่กรอกลงมานี้เมื่อเวลาไป Login แล้วมันใช่ Username ที่เคยกรอกไปไหม มันใช่ Password ที่กรอกไปไหม นะคะ แล้วมันก็จะสามารถ Login ไปสู่หน้าที่เป็นหน้าแรกนี้ได้ มาดูที่อันดับแรกก่อน สิ่งที่เราจะเก็บ ก็คือ Username กับ Password ก็ต่อเมื่อเราทำสิ่งนี้นะคะ พร้อมจะเขียนโค้ดแล้ว ไปที่หน้า Sign in น่ะ หน้าแรกนะ แล้วเลือก Block ของเรานะ เพื่อเราจะเขียน Coding นะ สิ่งแรกที่เด็ก ๆ จะต้องมีนะคะ ก็คือให้เด็ก ๆ คลิกที่คำว่า Variable ก่อนลูก เพราะว่าอะไร เพราะว่าเราจะเอา Username กับ Password ไปเก็บได้ แล้วเราจะเอามันไปเก็บที่ไหน คอมพิวเตอร์มันจะรู้ได้ยังไง ก็ต้องประกาศตัวแปลเพื่อที่จะ เพราะฉะนั้น เด็ก ๆ ต้องไปเลือกที่คำว่า "Variable" เห็นไหมคะ แล้วให้เลือกคำว่า "interlite เหมือนบอกว่าแปลเป็นไทย ฉันจะประกาศอันนี้นะคะ ชื่อนี้ เป็น Variable ชื่ออะไรนะ ลากตัวนี้ออกมาวาง 1 อันนะคะ แต่บอกแล้ว เรามีตัวแปรที่จะต้องประกาศกี่ตัวคะ 2 ตัวนะลูก เพราะฉะนั้น ต้องลากออกมากี่อัน 2 อันใช่ไหมคะ ให้ได้ 2 ตัว เหมือนที่แม่ลากนี่ เหมือนตัวอย่าง ลากตัว... นะถ้าเป็นเกี่ยวกับตัวแปรก็เป็น คำว่า "ประกาศตัวแปร" ก็คือ intailize อย่างนี้ ลากมาอย่างนี้ 2 อันนะคะ ตรงคำว่า "แอป" ตรงคำว่าไอ้นี่คืออะไร บอกให้รู้ว่าตัวแปรนี้ คลิกไปที่อะไรนะ รูปที่เหมือนสามเหลี่ยมชี้ลงน่ะ นะคะ เห็นไหม มันมี app มี store ให้เราเลือกคลาวด์นะคะ ทั้ง 2 เลย เก็บไว้บนคราวด์เลย เพราะ เพราะอะไร เพราะแอปเราออนไลน์นะ ก็คือแต่ถ้าเมื่อใดที่เราเอาแอปไปลงในมือถือ นึกออกนะ ที่เก็บมันก็จะเปลี่ยน นึกออกนะคะ อาจจะเก็บไว้ที่ Store เลยก็ได้ ถ้าเก็บไว้ที่ Cound มันก็จะไปเปิดฐานข้อมูลในคลาวด์เรานะ เดี๋ยวนี้ก็น่าจะเก็บไว้ในคลาวด์นั่นล่ะ โอเคนะคะ เลือกตรงนี้เป็น cloแล้วตรง name ก็พิมพ์เพื่อเปลี่ยนใช่ไหมคะ Variable ตัวแรกชื่อว่าอะไร ตัวแปรแรก ก็คือ User ตัวแปรที่ 2 สำหรับ pass หรือ Password สำหรับเก็บ Password เห็นไหมคะ สิ่งที่จะต้องเปลี่ยน ก็คือตรงที่เก็บข้อมูล จากเดิมมันเป็นแอป ให้เปลี่ยนเป็นคลาดว์ ตรง Name ให้เปลี่ยนเป็นพิมพ์ชื่อตัวแปรลงไป ซึ่งตั้งชื่อว่าตัวแปร user สำหรับเก็บ username และก็ตัวแปร Pass สำหรับเก็บ Password เมื่อประกาศตัวแปรเสร็จแล้ว เพราะหน้า Sign in คือ ตัวแรกที่เราจะรับเลยนะ เมื่อได้ตัวแปรเสร็จ สิ่งที่จะเกิดต่อมา ก็คือเมื่อมีการทำอะไรคะ ให้ดูหน้าดีไซน์เรานะ เมื่อกี้อธิบายนะ ีusername password โดนกรอกเข้ามาปุ๊บ ปุ่ม Sign in ใช่ไหมคะ เพราะฉะนั้น สิ่งที่จะต้องสั่งให้มันกระทำนั้นเอง สิ่งนี้เมื่อโดนกด มันจะเกิดอะไรขึ้นนะ เพราะฉะนั้น กลับไปที่ block เรานะ ประกาศตัวแปรมาแล้ว เห็นไหมคะ ส่วนที่ควบคุม เราจะอยู่ที่ส่วนของ ctrl เด็ก ๆ สังเกตสี สีของ Block เห็นไหม แม่เลือกใช้ตัวไหน สีมันก็จะเป็นตัวนั้น เห็นไหมคะ เหมือนสีส้มมันก็จะไปที่สีแดงตัวนี้ นี่สี้หลืองอย่างนี้จะอยู่ที่ Control ส่วนของการควบคุม ของ Control ทั้งหมด ทั้งปวง ทีนี้ คำสั่ง ก็คือเมื่อเราไปกดปุ่ม เห็นไหมคะ ต้องไปหา Contrl ที่ คลิก ๆ ก่อน ๆก่อนจะหาตัวนั้น เดี๋ยว ๆ ต้องไปหาปุ่มเราก่อน ตรง... เราอยู่ในหน้า sign in เราคลิกที่ปุ่ม Button เราก่อนนะคะ แล้วมันก็จะเจอ Buttoคลิกนะ เราต้องเลือกที่ เมื่อมีการกดที่ปุ่มนี้ ต้องคลิกตรงนี้ก่อน มันถึงจะไปตัวต่อไปได้ เด็กก็ลากคำสั่งนี้ออกมา เห็นไหมคะ ต้องคลิกที่ตัวปุ่มก่อนนะ ดูดี ๆ นะ ดูวิธีการใหม่นะ Sign in คลิกนี่ จะขึ้นก็ต่อเมื่อเราไปคลิกที่ปุ่ม เห็นไหมคะ ตัว Object เรา ก่อนเห็นหรือเปล่า แล้วก็ลากออกมา ให้มันทำอะไร เมื่อกดแล้ว มันไปไหน เห็นไหมคะ Navigation ถูกไหม sign in กด sign in มันต้องไปที่อันที่ 2 คืออะไรคะ Login ถูกไหมคะ พอลงชื่อไอ้นี่เสร็จเรียบร้อย มันต้องไปที่ login นะ เราก็เลือกเป็น Navigation to เมื่อกดปุ่ม Sign in โดนกดให้ ไปที่หน้า Login เห็นไหมเงื่อนไข เงื่อนไขบอกว่า เมื่อปุ่ม Sign in ถูกคลิกนะ สิ่งที่จะต้องทำ ก็คือนำทางไปยัง Screen LoginScreen Login หน้า Login นั่นเอง แต่ทีนี้มันขึ้นหน้าอย่างนี้ได้ ก็ต่อเมื่อเราต้องไปเซตตัวแปรที่มันป้อนเข้าไปด้วยก่อน เห็นไหมคะ คำว่า "Set Coundvariable user ดูสีก็รู้ Variable ตอนนี้เด็ก ๆ ได้เป็น Button คลิกหรือยัง ได้แล้วนะ แล้วบอกว่าให้มัน Navigation บอกว่าให้มัน Navigation to login แล้วนะ ต่อมา ก็คือก่อนมันจะไปหน้านี้ได้เราจะต้องป้อนข้อมูล เข้าไปก่อนใช่ไหม เพราะฉะนั้น ให้เราไปที่ Variables ก่อนค่ะ แล้วเลือก Set เห็นไหมคะ กดหนด กำหนดค่าตัวแปร นี่ เอาตัวนี้มาต่อ ต่อตรงไหน ตรงท้ายไอ้คลาวด์ เอ้ย ตรง Do น่ะค่ะ ตัวแปรเรามี User กับอะไรคะ User กับ Password เพราะฉะนั้น ไม่เห็นมี word เลือกมาสิ เลือกมา 2 อัน แล้วมาเปลี่ยนสิ นี่ไง ไม่ขึ้นหรือ อันไหนไม่ขึ้น Set อยู่ที่ตัวแปรนะคะ โอเคนะ ทันแล้วนะ ไปที่ตัวแปรนะคะ ทีนี้ไปตัวแปร แล้วเลือกคำว่า set เห็นไหมคะ Clound Variable เพราะเมื่อกี้พอเราสร้างเสร็จแล้ว มันก็จะขึ้นมาให้ลากออกมาแล้วมาเปลี่ยนชื่อตรงนี้ ตัวที่ 2 เป็น Password โอเคไหมลูก โอเคนะ สิ่งที่จะลากต่อมา ก็คือเห็นไหมคะ มันจะมีต่อว่าเมื่อกำหนดค่าให้ตัวแปร Password แล้ว ให้ Text input นะ text input เดี๋ยวนะ นี่เห็นไหม text input เด็ก ๆ จะต้องมาเลือก text ของเราน่ะ ก็คือ Username น่ะ ดูนะคะ สิ่งที่จะมาเลือก คือ ส่วนนี้นึกออกไหมลูก เพราะฉะนั้น ก็ไปที่ Block ให้เด็ก ๆ มาคลิกที่ิสิ่งที่จะลากมาใส่ต่อตรงนี้ ให้คลิกที่ UI Componnent น่ะ ของเราเห็นไหม เห็นไหม แล้วให้เลือกที่ ที่มันขึ้นคำว่า "Text input username" Username Text นะคะ ตัวนี้ตัวที่ 2 นะคะ มันมี his กับ test ใช่ไหมลูก เราเลือก นะลูก นี่เอามาต่อ อันนี้ password ใช่ไหมคะ เพราะฉะนั้น ก็ต้องเลือก Text input อะไร Password นะ แป๊บ ขยายให้มันดูใหญ่ขึ้น ไหนไอ้... เล็กไป ๆ ใหญ่เกิน ล้น ใหญ่สุดแล้ว ใหญ่กว่านี้ก็ล้นอีกเห็นไหม ถ้า 200 ใหญ่ไป เดี๋ยวนะ นะ ตอนเลือก เราต้องเลือกตัววัตถุน่ะ วัตถุที่เราจะใช้ทำด้วย เพราะฉะนั้น ต้องเลือกให้ถูกอันนะ เพราะฉะนั้น เราต้องเลือกที่ตัววัตถุเราก่อนนะ มันแล้วมันก็จะขึ้นไอ้พวก Contrl นั้นขึ้นมาน่ะลูก ทีนี้ เดี๋ยว ๆ ลืม ลืมให้เช็ก ตรง Design ก่อน เด็ก ๆ คลิกกลับไปที่ Design ค่ะ เช็คตรงช่อง ช่องนี้ก่อน ช่องแรกก่อน ตรง เห็นไหมคะ text input เห็นไหมคะ Text input น่ะค่ะ ตรง Text ของเด็ก ๆ ต้องเป็น Empty เป็นหรือเปล่าคะ ให้กลับมาหน้า Design ก่อนได้หรือเปล่า มาเช็กไอ้สิ่งที่อยู่ใน text เีมันต้องเป็นช่องว่างนะ ไม่มีอะไรอยู่น่ะ กดเครื่องหมายกากบาท มันก็จะขึ้น Empty String แทน มันก็จะขึ้น Mpty ให้มันขึ้น Imty string นะเด็ก ๆ ให้เลือก Dufult นะ โอเคไหม ค่า 2 ตัวนี้ ดูที่ค่า 2 ตัวนี้ดูที่ค่า 2 ตัวนี้ ค่า Text มันต้องเป็น Imty ค่าของ ... เปก็คือให้มันเซ็ต เซ็ตเป็นเเริ่มใหม่เสมอน่ะนะ นะคะ เหมือนกันนะคะ ทั้ง 2 อัน เพราะฉะนั้น อย่าลืมเช็กที่ Login ค่ามันต้องเหมือนกันทั้งสองนะคะ เช็กให้เหมือนกันด้วย โอเคนะ ต้องเช็คทั้ง 2 อันด้วย ลืม ๆ ลืมให้เช็กขอโทษทีนะคะ อย่างนั้นมา coding ต่อได้นะคะ ไปที่บล็อกเราเหมือนเดิมนะ ตอนนี้ก็คือใส่แล้วนะ เด็ก ๆ จะต้องมี 1. ประกาศตัวแปร 2 อัน มีแล้วใช่ไหมคะ คือ 2 อันนี้ถูกต้องไหม มีอันที่ 2 ก็คือมี... มีการควบคุมปุ่ม ปุ่ม sign in ใช่ไหม บอกไว้ว่าเมื่อเรากดปุ่ม Sign in นี่ ให้มันไปไหน ถ้ากดปุ่ม Sign in ปุ๊บ มันจะต้อง อะไรคะ หน้าล็อกอิน ก็คือไป Scene ที่ 2 ไป Scene ที่ใช่ไหมคะ ไปหน้าที่ 2 แล้วทีนี้สิ่งที่จะเกิดขึ้นในตัวนี้เมื่อเรากำหนด ให้ค่าตัวแปร User เก็บอะไร เห็นไหมคะ เก็บ text ที่เรากรอกเข้าไปน่ะค่ะ เก็บ Text ไว้ด้วยนะคะ เก็บ Text ของ Username และ Password นะคะ หน้า Login มีเท่านี้เอ้ยพูดผิด หน้า Sign in มีเท่านี้ ไปที่หน้า login บ้าง ทีนี้ไปที่หน้า login นะคะ เหมือนเดิมเลย เลือกปุ่มกดก่อนเพื่อจะให้มันขึ้น ส่วนนี้ขึ้นมา เด็ก ๆ ไปเลือกตัวนี้นะ ต้องมาอยู่ที่ Screen login นะลูก เช็กด้วย ตอนนี้เราจะต้องอยู่ที่หน้าที่ 2 นะ โอเคไหม จะเขียน Box ช่องที่ 2 ตัวแรกที่เด็ก ๆ ต้องเลือก คือ Button ปุ่ม login ตัวเอง อยู่ไหน ตั้งชื่อว่าอะไร ดูนะคะ ให้ดูว่าไอ้ปุ่มนี้ ตัวเองนี่ พอมีสีแดงจึ้นนี้มันจะมี ตัวนี้ขึ้นมาให้เห็นว่าปุ่มของเราชื่อนี้นึกออกนะ นะคะ เพราะฉะนั้น คลิกที่ปุ่ม 1 ครั้ง เลือกตัวแรกเลย when คลิก เลือกออมาวาง เห็นไหม เห็นไหม วางให้เห็นเหมือนกันเลย คลิกแล้วทำอะไรเงื่อนไข มีเงื่อนไข มีเงื่อนไข เพระาอะไร เพราะมันต้องไปตรวจก่อน ว่าไอ้ Text ที่ป้อนเข้ามาใช่ไหม Text Username Text Password น่ะ มันถูกไหม เงื่อนไข if ต้องเป็น rogic เด็ก ๆ ต้องไปที่ Logic หรือตรรกะนะคะ ไอ้ตัวนั้น เดี๋ยวก่อน ต้องมาที่ควบคุมก่อน ต้องมาที่ Control ก่อน ควบคุมก่อน เพื่อนมาเลือก if ใช่ไหมคะ if do ใช่ไหม ลาก if กับ do นะคะ มาต่อตรงนี้ ได้อย่างนี้เห็นไหม ตอนนี้ได้ 2 block หรือยัง ทันนะ เพราะ เราต้องกำหนดเงื่อนไขว่า Text input นะคะ username เข้ามาปุ๊บนี่นะคะ มันจะมีค่าเท่ากับอะไร เราจะต้องเอามันไปเก็ยไว้ในตัวแปร Cound ที่เราเก็บตัวที่ชื่อว่า user นะ ตัวนี้มาอย่างไร ตัวนี้มาได้จากเห็นไหมคะ ค่าเรื่องหมายเท่ากับนี่ เด็ก ๆ ต้องไปเลือก Logic ก่อน เห็นไหมคะ ตัวแรกเลย คลิกเครื่องหมายเด็ก ๆ ต้องใส่ตัวนี้เข้าไปก่อน ดูนะ ต้องเอา Logic ต้องเอา Logic เข้ามาใส่ก่อนะคะ กับตรงนี้ เห็นไหม มันจะมีบล็อกอะไรที่เราเอามาใส่ Box ของ Text in put ของเรา เห็นไหม Text input username text เห็นไหมคะ คลิกชื่อ Text input เสียก่อน Text input ตัวแรก ตัวนี้มันถึงจะขึ้น ถ้าไม่คลิกไอ้นี่ ไม่มีน่ะค่ะ ไม่ขึ้นนะคะ เด็ก ๆ ต้องคลิกที่ชื่อ ที่ Componant มันก่อน แล้วค่อยมาเลือก text ใส่เข้าไปในช่องนี้นะ ไม่ใช่อันที่ 2 ไม่ใช่อันนี้ ใส่อันแรกนี่ เห็นหรือเปล่า ใส่แบบนี้ เห็นไหมคะ Text input ถ้า Text input username ที่เรากรอกเข้ามานี่ เท่ากับ เท่ากับตัวแปรที่เราเก็ยไว้เห็นไหมคะ มันเป็นตัวแปรเด็ก ๆ ต้องไปเปิดอะไรคะ Variables ใช่ไหมคะ ไปเอาตัวแปรของ Clound Variable เรามาใส่ เห็นไหม เห็นไหมคะ อันนี้ก็คือเมื่อป้อน ป้อน username Username ใช่ไหม เมื่อป้อน Username มันต้องมาตรวจว่านี่ตรงกับใน Cloud user ที่เก็บข้อมูล Username ไหท ถ้ามันตรง เห็นไหมคะ ถ้ามันตรงปุ๊บ เราจะคลิกที่ให้มันไปที่ Navigation Tool เมื่อกดปุ่ม login มันต้องไปที่หน้า Screen my app คือ มันต้องไปหน้านี้ ต้องไปเปิดหน้านี้ขึ้นมา ก็คือพอกดปุ่มนี้ปุ๊บ มันจะมาเข้า กดปุ่ม Login ปุ๊บมันจะเข้ามาหน้า Scene หน้า my app ทันทีนะคะ ก็คือถ้าถูกต้อง อันนี้ให้เช็กแค่ Box แรกยังไม่หมดใช่ไหม el if มาอย่างไร เด็ก ๆ ตัวนี้ ใบเตยใจเย็น ๆ นะ ดูวิธีคลิกดี ๆ มันมีความซับซ้อนนิดหนึ่ง คือ คือมันไม่ใช่คลิกแล้วมันขึ้นนะคะ เห็นไหม คลิกอย่างไรเห็นไหม คลิกอย่างไรให้ไอ้นี่มันโผล่มานี่ คลิดอย่างไร กดที่ตัวเครื่องหมายฟันเฟือง 1 ครั้ง ได้ไหม ใครมีไอ้นี่ขึ้น ใครคลิกไม่ขึ้น ใบเตยขึ้นไหมลูก ไม่ขึ้น ดูดี ๆ นะ วิธีกด กดตรงฟันเฟืองใช่ไหม เลื่อนไปที่ฟันเฟืองก่อนแล้วกดเมาส์ คลิก คลิกข้างไว้นิดหนึ่ง แล้วก็ปล่อย มันจะขึ้นมานะคะ เลือกอะไรคะ else if ค่ะ else if ใส่ต่อจาก Do นะ เห็นไหม เอามาต่อตรงนี้นะลูก ต้องเอามาต่อตรงข้างล่างมัน เห็นหรือเปล่า เราก็จะได้ elf if do อย่างไร แล้วมีอะไรต่ออีก มี else ต่ออีก ทำเหมือนเดิม เลือก else ต่อจาก else if เราจะได้ elseif 1 อัน แล้วก็ else แล้วกฌ elfi 1 อัน do else if do ลืมลบอันนี้ออก ไม่เป็นไร ส่งมาแล้วก็แล้วไป สิ่งที่จะต้องทำต่อมา เมื่อกี้เราแค่คลิกที่ text user มันยังเหลือ Password อีกนะ ทำเหมือนเดิมค่ะ ตรง elseif ไปเลือก Logic เท่ากันมา ให้เด็ก ๆ เลือก Logic แล้วคลิกที่มีเครื่องหมายเท่ากับ ลากออกมาวาง ต้องเอาตัวนี้วางก่อน ถ้าเอา Text นี้วาง เห็นไหมไอ้ Text นี้มันอยู่ใเพราะฉะนั้น เราต้องเอา Logic มาวางค่ะ แล้วก็เหมือนเดิมค่ะ คลิกที่ปุ่ม Text password Text ที่เราจะใส่ Password แล้วก็ไปเลือกไอ้ Text in put passwมาวาง วางใน Block อันแรกนะคะ ไม่เข้า สังเกต ถ้ามันขึ้นเหลืองนี่ ต่อได้ อย่างนี้ เห็นไหมคะ เวลาดูเวลาเอา Box มาใส่ นะคะ สิ่งที่ต่อจากอันนี้คืออะไร ก็คืออะไร อันนี้ cloud variable user ตัวแปรที่ชื่อว่า Password ใช่ไหมคะ ตัวที่ 2 เพราะฉะนั้นไปหาตัวแปรที่ชื่อว่า Password มมาใส่เข้าไป อยู่ตรงไหนเอ่ย ไปที่ Variables แล้วก็เลือก Cloud Variable Password เสียบลงไป มา ๆ ๆ เห็นไหมคะ ถ้าชื่อตรง ตรงกับในคลาวด์ Do ไปทำอะไร ก็เลือก Navigation to Control ก็ให้มันไปที่หน้า my app ใช่ไหม ถ้า login ถูก ชื่อก็ถูก นามสกุลก็ถูกนี่ มันจะต้องไปหน้าที่ 3 แต่ทีนี้ ถ้าใส่เข้าไปแล้วไม่ถูกล่ะ ใช่ไหม ตรง else นะคะ จำได้นะคะ Label ที่อยู่ตรงนี้ เราจะให้มันแสดงข้อความที่บอกน่ะค่ะ ว่าถ้าเมื่อที่ใส่ username password ไม่ถูกต้อง มันจะขึ้นมาเตือนว่า คุณใส่ username กับ password ไม่ถูกนะคะ เพราะฉะนั้น ตัวนี้นะคะ ให้เด็ก ๆ คลิกที่ label ค่ะ label ที่เราจะใช้ เห็นไหม แล้วก็เลือกอันแรกเลย Set Label text to เอามาวาง เห็นไหมคะ ก็คือกำหนดให้ label text นี่ แสดงข้อความว่า มันพิมพ์ภาษาไทยไม่ได้ก็เอาภาษาอังกฤษไปก่อน Your Y-o-u-r Your Username User แล้ว password ของคุณไม่ถูกต้องนั่นเองนะคะ อันนี้เป็นตัวUsername Username ไม่ใช่ตัวแปรนะคะ สังเกตสีบล็อกเป็นสีชมพู นั่นแสดงข้อความที่อยู่ในบล็อกนะคะ Your และ and และ password p-a-s-s-w-o-r-d password is ใช้คำว่า "is" ไม่ถูกต้อง เป็นอยู่คือ is am arนะคะ if in corect in c-o-r-e-c-t ก็คือชื่อ username ของคุณ ไม่ใช่ and Username or or นะคะ คือ มันน่าจะผิดตัวใดตัวหนึ่ง or password is in correcรู้ว่าตัวนี้มันไม่ถูกนะ เห็นไหมคะ อันนี้ไม่ต้องมี แถมมา น่าจะตอนลองแล้วลืมเอาอก เมื่อวานลองทำแล้วลืมเอาออกนะคะ ทำคืออะไรเราจะต้อง Test Test โดยการกดปุ่มอะไรคะเด็ก ๆ โค้ดครบแล้วนะคะ กดที่ปุ่ม play เอ้ย Web preview ให้คลิกที่หน้า Sign in ก่อนนะเด็ก ๆ แล้วลองป้อนข้อมูลลงไป ป้อน username ป้อนและจำด้วยนะ เพราะเดี๋ยวมันให้กรอกซ้ำ เดี๋ยวจะป้อนให้ดูนะคะ เช่น Test จะใช้ user ว่า Test t-e-s-t test password เอา 001100 Password จะคือ 001100 กด Sign in ปุ๊บ มันจะต้องไปที่หน้าที่เท่าไรคะ หน้า login นะคะ มันต้องไปหน้าที่ 2 ดูนะคะ โผล่มาหน้า สนโผล่มาหนลองใส่ Test ใช่ไหม ที่เราใส่ไปเมื่อกี้ แล้วก็อะไรนะ 001100 แล้วกด login ถูกต้องแสดงว่า ที่เช็ก เห็นไหมคะ แสดงว่าที่เช็กไอ้ login น่ะถูกต้อง เดี๋ยวเช็กให้ดูว่าแล้วถ้าใช้ login ไม่ถูกล่ะ ดูนะคะ อยู่หน้า login ดูนะคะ อยู่หน้า Login username มั่ว ๆ password ก็พิมพ์มั่ว ๆ แล้วกด login เห็นไหม ถ้าไม่ถูกมันจะขึ้นข้อความบอกว่า Your are username or password is in corect ความจริงต้องให้มันเคลียร์ด้วยนะ ไม่มันเคลียร์ พอขึ้นอันนี้เสร็จแล้วก็เคลียร์หน้าจอ แล้วก็ไอ้นี่ใหม่นะคะ แล้วก้ Login ใหม่ แล้วกดใหม่ พอคลิกใหม่ เปลี่ยนเป็น tttt แล้วพอคลิก Test ใหม่นะคะ T-e-s-t Test 001100 กด login มันจะต้องเข้าหน้าที่ 3 นั่น ใคร Test แล้วไม่ผ่าน ยกมือ พี่เซฟต้องเช็กที่ปุ่มถูกไหม คลิกที่... เพราะเช็กไปทีละอันนะ อันแรกใช่ไหมคะ ดูที่ Box นคะ ชื่อว่าปุ่มอะไรพี่เซฟ เมื่อมีการคลิกปุ๊บ มันจะต้องไปที่หน้า login ใช่ไหมคะ ถ้าถูกต้อง โดยมีเงื่อนไขว่าตัวแปรชื่อตัวแปร Name จะถูกเอาไปเก็บไว้ใน Cound ใช่ไหม ตัวที่ 2 ตัวที่ 2 ไม่ถูก ดู ปุ่มต้องเป็น Button login ใช่ไหมคะ คลิกเข้าไปทำอะไร เมื่อมีการคลิกที่ปุ่มนี้ สิ่งที่มันต้องทำ ก็คือมันจะต้องไปเช็กก่อน ว่า username ถูกไหม ตรงกับที่กรอกเข้าไปใน Sign in ไหม ถ้าตรงมันต้องไปที่ Sreen My เห็นไหมคะ เงื่อนไขมันต้องตรงทั้งสอง My app ทั้ง 2 เห็นไหม พี่มีไปที่หน้านี้หรือเปล่า บาก็คือ พอคลิก Sign in แล้วมันไปหน้า Login แต่มีนไม่เมันไปหน้า login แต่มันไม่เก็บใช่ไหม อันดับแรกดูตัวแปรนะ ตัวแปรที่เราใช้ คือ user กับ password อันดับที่ 2 ก็คือ ตรงนี้นะ เราต้องเลือกเอามาจากปุ่มใช่ไหมคะ when button click ปุ๊บ ให้ไปที่หน้าที่ 2 ก็คือหน้านี้ ตรงนี้เช็กสิ เช็กก่อน ว่าเมื่อเราคลิกปุ่ม Sigมันจะต้องให้มันไปที่หน้าที่ 2 นั่น ผิดตรงไหน เจอตรงไหน ใช่ไหม เพราะฉะนั้นต้องไล่ดีดี เห็นไหม ค่อย ๆ ไล่นะคะ นะคะ ถ้า Logic ผิด มันก็จะไม่เช็กนะ พอในหน้าที่ 2 นี่ พอในหน้าที่ 2 เอ้ยในหน้าที่ 1 เราต้องมาดูในหน้าที่ 2 นะ เมื่อเรากดปุ่ม login นี่ สิ่งที่จะต้องเกิด ก็คือชื่อที่ป้อนเข้ามา จะต้องตรงกับใน Cloud นี่เห็นไหใ ถ้าจะผิดมันก็จะผิดตรงช่วงนี้ ช่วงไอ้ตัวแปรนี่ล่ะ กับที่ที่จะให้มันไป ใครยังไม่ออก ยกมือ พงศ์พันธ์ ใครยังไม่ออกยกมือ โอเคนะคะ โดยปกติ ถ้าผิดนี้ให้สังเกตที่ เด็ก ๆ ดูดี ๆ นะ ไอซ์ให้ความคิดเห็นมานี่ บางครั้ง พอคลิกเข้าไปนี่ ให้ดูด้วย เหมือนสีที่แม่ใส่มานี่ แม่ขึ้นสีเขียวแต่ของเด็ก ๆ แสดงว่าเราอาจจะเลือกตัวนี้มาไม่ถูก มันเป็นสีตุ่น ๆ อย่างนี้ ใช้ไม่ได้นะนี่ พอขึ้นมันต้องเป็นสีของมันน่ะ สีของบล็อกมันน่ะ ต้องขึ้นลักษณะนี้ ถ้าขึ้น หมายถึงว่าเราใส่ Block ไม่ตรง ไม่ตรงล็อกมันนั่นเองนะคะ ก็มีผลเหมือนกันนะคะ ว่าทำให้เวลา Code แล้ว คือ คอมพิวเตอร์มันไปอ่าน มันไม่รู้ว่ามันคืออะไรนะ มันเป็นตัวไหน มันไปไม่ถูกว่าอย่างนั้นเถอะ ว่าอย่างนั้นเถอะ เหมือนดู มันเป็นโหว่ ๆ นี่ ความจริงมันเข้าล็อกแล้วนะคะ นี่ มันมีขามาต่อโผล่ขึ้นมา อย่างนี้เป็นต้น นี่ก็คือ การ Sign in แล้วก็ Login แล้วก็เข้าสู่หน้าถัดไป เหลืออะไรอีก ตอนนั้นแม่ยังแก้ให้ไม่ได้ใช่ไหม เอาไว้สัปดาห์หน้า อะไรนะ เมื่อ เมื่อ เราจะออกจากแอปนะ มันก็ต้องปิด ตอนนี้ทุกคน ก็คือเข้าหน้าที่ 1 เข้าหน้าที่ 2 เข้าหน้าที่ 3 ก็ได้ แต่เขาก็บอกว่า พอเวลาคนปิดน่ะ ไม่คลิกว่าต้องการออกจากแอป แล้วก็ปิดเลย นึกออกนะ มันก็เลยเหมือนไม่จำเป็นต้องมาเขียนโค้ดว่าเวลาจะออก ต้องการจะออกจากแอปหรือเปล่านะคะ เพราะเหมือนเหมือนเราใช้ App แอปของธนาคาร บางทีเราก็ไม่เคยไปกดปุ่มออกจากระบบอะไรเลย พอเกิน 5 หรือ 10 นาที ธนาคารก็ อะไรอย่างนี้นะคะ ไอ้ตัวนั้นมันก็ไม่มี เดี๋ยวจะลองดูก่อน ว่าถ้าเราต้องการให้มันมีทางออกแบบนี้นะคะ ก็คือพอกดปุ่ม end หรือจบโปรแกรมมันก็ควรจะปิดโปรแรกมไปเลย สัปดาห์หน้าอยากให้ทำแอปแบบไหน แม่ก็จะได้หาแนวมาพาทำเล่นต่อ เพราะ ABC ก็ทำไปแล้วนะ ขาดอะไร เราขาดอะไร นำทางใช่ไหมคะ ใช่ไหม แบบนำทางนะ เดี๋ยวอาทิตย์หน้ามาลองทำแอปแบบนำทางดูนะคะ เดี๋ยวจะหา ค้นก่อน ยังไม่แน่ใจแอปแบบไหน จะได้แบบไหนมานะ โอเคค่ะ สำหรับสัปดาห์นี้เราจะพอที่ทุกคนสามารถ Login เข้าไปได้ Sign in ได้ แล้วก็ Login แล้วก็เข้าสู่หน้าแอปของเราได้นะคะ สัปดาห์หน้าเดี๋ยวเราจะมาพาทำแอป... ว่าอย่างไรครับ แป๊บหนึ่งครับ ขอบคุณพี่ล่ามนะคะ สำหรับรอบบ่ายวันนี้ ขอบคุณค่ะ [สิ้นสุดการถอดความ]