การใช้ช้ช้ช้THUNKABLE คู่มือ thunkable
คำ นำ คู่มืคู่ อมืฉบับบันี้เนี้ป็นป็ ส่วส่นหนึ่งนึ่ของรายวิชวิา การโปรแกรมบน อุปอุกรณ์เณ์คลื่อลื่นที่สํที่าสํหรับรัการศึกศึษารหัสหัวิชวิา 0537335 เพื่อพื่ศึกศึษา ความรู้ที่รู้ ไที่ด้จด้ากการสร้าร้งแอปพลิเลิคชันชัด้วด้ย Thunkableเบื้อบื้งต้นต้ โดยการจัดจัทําทํคู่มืคู่ อมืขึ้นขึ้มาเพื่อพื่ ให้ผู้ห้อ่ผู้ าอ่นได้ทํด้าทํความรู้จัรู้ กจักับกั Thunkable ทราบวิธีวิกธีารใช้งช้านเเละสามารถทําทํตามขั้นขั้ตอนการ สร้าร้งแอปพลิเลิคชันชัทําทํแบบทดสอบให้ผู้ห้อ่ผู้ าอ่นได้นํด้านํความรู้ที่รู้ ไที่ด้ได้ป ประยุกยุต์ใต์ช้ต่ช้อต่ยอดในการพัฒพันาแอปพลิเลิคชันชัต่อต่ ไป ผู้จัผู้ ดจัทําทํหวังวัว่าว่คู่มืคู่ อมืเล่มล่นี้คนี้งจะเป็นป็ ประโยชน์ไน์ม่มม่ากก็น้ก็อน้ย ต่อต่ผู้อ่ผู้ าอ่น เเละหากมีจุมีดจุใดที่ขที่าดตกบกพร่อร่งหรือรืผิดผิพลาดประการ ใด ผู้จัผู้ ดจัทําทํก็ขก็ออภัยภัมา ณ ที่นี้ที่ด้นี้วด้ย ผู้จัผู้ ดจัทำ กรกานต์ ชลศิริศิริชัยชัพร ขันขับุตบุรศรีพิทพิยา ศรีนรีวลจันจัทร์
การสมัครThunkable 5-7 สารบัญ เรื่อง หน้า Thunkable ข้อมูลเบื้องต้น 4 Function การใช้งาน 8-16 การเชื่อมต่อฐานข้อมูล 17-20 การนำ เเอปพลิเคชัน ขึ้น Test บนสมาร์ทโฟน 21-24 คู่มือการใช้ Application 25-36
THUNKABLE ข้อมูลเบื้องต้น 4คู่มือการใช้งาน Thunkable เป็นป็แพลตฟอร์มร์สร้าร้งแอปพลิเลิคชันชัที่ใที่ช้งช้านได้ง่ด้าง่ยโดยไม่ต้ม่อต้งมีพื้มีนพื้ ฐานในการเขียขีนโค้ดค้มันมัถูกถูออกแบบมาเพื่อพื่ช่วช่ยให้นัห้กนัพัฒพันาและผู้สผู้ ร้าร้ง แอปพลิเลิคชันชัสามารถสร้าร้งแอปที่ทำที่ทำงานบนระบบปฏิบัฏิติบักติาร Android และ iOS ได้ อย่าย่งรวดเร็วร็ เตรียรีมพร้อร้มก่อก่นเข้าข้ใช้งช้าน Thunkable? 1. เตรียรีม Computer หรือรื Notebook 2. เตรียรีมระบบปฏิบัฏิติบักำติกำร (Windows) Windows 10,11 Mac OS. Ubuntu
การสมัคร THUNKABLE 5คู่มือการใช้งาน 1 2 พิมพิพ์ คำ ค้นค้หาใน Google ว่าว่ Thunkable จากนั้นนั้เข้าข้ลิ้งลิ้เเรกที่ค้ที่นค้หาเจอ กดปุ่มปุ่ Sign Up สำ หรับรัผู้ใผู้ช้งช้านครั้งรั้เเรก
การสมัคร THUNKABLE 6คู่มือการใช้งาน 3 4 ทำ การสมัคมัรใช้งช้านผ่าผ่น Google กดเลือลืกบัญบัชีผู้ชี ใผู้ช้ที่ช้เที่ราต้อต้งการจะสมัคมัรใช้งช้าน จะเสร็จร็ สิ้นสิ้ขั้นขั้ตอนการสมัคมัรใช้ งาน
การสมัคร THUNKABLE 7 คู่มือการใช้งาน 5 เมื่อมื่ สมัคมัรใช้งช้านเสร็จร็จะเข้าข้ไปยังยัหน้าน้ My Projects ให้เห้ราได้พด้ร้อร้มสร้าร้งชิ้นชิ้งาน
FUNCTION การใช้งาน 8คู่มือการใช้งาน 1 2 3 4 5 1 Component Tree คือคื ส่วส่นโปรแกรมที่ถูที่กถูใส่เส่ข้าข้ไปใน Viewer เป็นป็ ส่วส่นโปรแกรมที่เที่ราต้อต้งการให้มีห้อมียู่ใยู่ น โปรแกรมมือมืถือถืและสามารถเขียขีนโค้ดค้เข้าข้ไปในส่วส่นโปรแกรมเหล่าล่นี้ไนี้ด้ เพื่อพื่ ให้โห้ปรแกรมทำ งานตามที่ต้อต้งการ ด้าด้นล่าล่งติดติกันกัเป็นป็ ส่วส่นของ Media เราสามารถเพิ่มพิ่ ไฟล์สื่ล์อสื่ชนิดนิต่าต่งๆ เช่นช่ ไฟล์รูล์ ปรูภาพ ไฟล์เล์สียสีง แบบอักอัษร (Font) เข้าข้ไปในโปรเจกเพื่อพื่นำ ไปใช้ใช้นโปรแกรมได้ 2 Add Components เป็นป็แหล่งล่รวบรวมส่วส่นโปรแกรม (Component) เอาไว้เว้ป็นป็หมวดหมู่ (User Interface,Leyout,Media, Animation, etc.) คลิกลิหมวดที่ต้ที่อต้งการ จะเห็นห็รายการส่วส่นโปรแกรม ที่เที่ราสามารถใส่เส่ข้าข้ไปบนโปรแกรมมือมืถือถืที่กำที่กำลังลัออกแบบนี้ไนี้ด้ เช่นช่ ในหมวด User Interface จะเห็นห็ ส่วส่นโปรแกรม ปุ่มปุ่ (Button)ข้อข้ความ (Label) รูปรูภาพ (Image) เป็นป็ต้นต้ 3 Viewer เป็นป็พื้นพื้ที่บที่นหน้าน้จอมือมืถือถื (Screen 1) ทำ ให้เห้ห็นห็ภาพตอนออกแบบโปรแกรม เมื่อมื่เราลากส่วส่น โปรแกรมมาใส่ใส่นพื้นพื้ที่นี้ที่ นี้ 4 Menu เป็นป็แหล่งล่รวบรวมคำ สั่งสั่ ในการทำ งานเกี่ยกี่วกับกัแอพ เช่นช่การสร้าร้งแอพใหม่ เรียรีกใช้แช้อพที่เที่คยสร้าร้งไว้ การเชื่อชื่มต่อต่กับกัมือมืถือถืเพื่อพื่จำ ลองการทำ งาน การ Export แอพเพื่อพื่นำ ไปใช้จช้ริงริเป็นป็ต้นต้ 5 Properties คือคืคุณคุสมบัติบัต่ติาต่งๆ ของส่วส่นโปรแกรม เมื่อมื่เราคลิกลิเลือลืกส่วส่นโปรแกรมใด ที่อที่ยู่ใยู่ นViewer หรือรื ในComponents เราจะเห็นห็รายการคุณคุสมบัติบัขติองส่วส่นโปรแกรมนั้นนั้ โดยแต่ลต่ะส่วส่นโปรแกรมจะมีคุมีณคุสมบัติบั ติที่อาจจะเหมือมืนกันกัหรือรืแตกต่าต่งกันกัออกไปก็ไก็ด้ ซึ่งซึ่เราสามารถแก้ไก้ข เพิ่มพิ่เติมติข้อข้มูลมูลงไปในคุณคุสมบัติบัต่ติาต่งๆ ที่มีที่ มี ได้ 1 หน้าน้ต่าต่งการทำ งานโดยรวม
FUNCTION การใช้งาน 9คู่มือการใช้งาน ชุดชุเครื่อรื่งมือมื Add Components Button = ปุ่มปุ่สำ หรับรักดหรือรืสัมสัผัสผั Label = ข้อข้ความในแอพพลิเลิคชั่นชั่ Image = เลือลืกรูปรูภาพ Text Input = กล่อล่งส าหรับรั ป้อป้น ข้อข้ความ Group = รวมกลุ่มลุ่ เป็นป็ ส่วส่น Layout = ซ้อซ้นส่วส่นประกอบ 2 2.1 Basic 2.2 Data Simple List =สามารถเพิ่มพิ่ดู และ คลิกลิรายการในรายการได้ Data Viewer List = รายการผู้ดูผู้ดู ข้อข้มูลมู Data Viewer Grid = สามารถเพิ่มพิ่ดู และคลิกลิรายการในเค้าค้โครงตาราง ที่กำที่กำหนดค่าค่ ได้
FUNCTION การใช้งาน 10คู่มือการใช้งาน Switch = สามารถให้แอปทำ งาน บางอย่าย่งได้เด้ฉพาะเมื่อมื่สวิตวิช์ถูช์กถูตั้งตั้ ค่าค่เป็นป็ True Slider = สามารถเลือลืกค่าค่จากช่วช่ง ค่าค่ที่กำที่กำหนดได้ Checbox = ทำ เครื่อรื่งหมายถูกถูเลือลืก เพื่อพื่ข้อข้มูลมูเช่นช่การเลือลืกคำ นำ หน้าน้ Date Input = สามารถเลือลืกวันวัที่ จากตัวตัเลือลืกวันวัที่ดั้ที่งดั้เดิมดิของ โทรศัพศัท์ Time Input = เลือลืกเวลา 2.3 Input 2.4 Media Animation = สามารถสร้าร้งภาพ เคลื่อลื่นไหวได้ Video = เล่นล่วิดีวิโดีอในแอปของคุณคุได้ Loading Icon = การโหลดไอคอน
FUNCTION การใช้งาน 11คู่มือการใช้งาน Web viewer = สามารถเปิดปิเว็บว็ ไซต์ ใดๆ ภายในแอป Map = เพิ่มพิ่แผนที่ใที่นแอป Canvas = สามารถเคลื่อลื่นไหว รูปรูภาพ ซึ่งซึ่สามารถใช้เช้พื่อพื่สร้าร้ง ประสบการณ์แณ์ละเกมแบบโต้ตต้อบได้ PDF Reader = สามารถดูไดูฟล์ PDF Rating = สามารถแสดงค่าค่การให้ คะแนนที่แที่สดงด้วด้ยไอคอนที่เที่ติมติไว้ AdMob Banner = อัปอัเกรดเพื่อพื่ ใช้ คุณคุสมบัติบั ติ 2.5 Embed
FUNCTION การใช้งาน 12คู่มือการใช้งาน 3 ชุดชุเครื่อรื่งมือมื Block 1) Built-in คือคืส่วส่นของ Block Code ต่าต่งๆ ที่ใที่ช้ใช้นการสั่งสั่การแอพพลิเลิคชั่นชั่ 2) ส่วส่นของ Screen ที่รที่วบรวม Components ต่าต่งๆ ที่อที่ยู่ใยู่ นแอพพลิเลิคชั่นชั่ของเรา 3) Bag ส่วส่นที่เที่ราสามารถลาก Block Code มาใส่เส่พื่อพื่เก็บก็ Code ไว้ใว้ช้ใช้น Screen ใหม่ไม่ด้ 4) ส่วส่นสำ หรับรัลบ Block Code ที่เที่ราไม่ไม่ด้ใด้ช้งช้านออกไปโดยการลากมาใส่ 3.1 ภาพรวมของส่วส่นหน้าน้ต่าต่งการทำ งานเกี่ยกี่วกับกั Code ของแอพพลิเลิคชั่นชั่
FUNCTION การใช้งาน 13คู่มือการใช้งาน Control ส่วส่นที่รที่วบรวมคำ สั่งสั่ต่าต่งๆ ที่เที่กี่ยกี่วกับกัการทำ งานของแอพพลิเลิคชั่นชั่เช่นช่การวางเงื่องื่นไข สั่งสั่การให้ไปหน้าน้ถัดถั ไป การสั่งสั่การให้ปิดปิแอพพลิเลิคชั่นชั่เป็นป็ต้นต้ Logic ส่วส่นที่รที่วบรวมคำ สั่งสั่ต่าต่งๆ ที่เที่กี่ยกี่วกับกัตรรกศาสตร์ จริงริเท็จท็การเปรียรีบเทียทีบ ต่าต่งๆ 3.3 3.2
FUNCTION การใช้งาน 14คู่มือการใช้งาน Math Text ส่วส่นที่รที่วบรวมคำ สั่งสั่ต่าต่งๆ ที่เที่กี่ยกี่วกับกัคณิตณิศาสตร์ จำ นวน ตัวตัเลข การคำ นวณ บวก ลบ คูณคู เป็นป็ต้นต้ ส่วส่นที่รที่วบรวมคำ สั่งสั่ต่าต่งๆ ที่เที่กี่ยกี่วกับกัการทำ งานกับกัข้อข้ความ 3.4 3.5
FUNCTION การใช้งาน 15คู่มือการใช้งาน Lists Color ส่วส่นที่รที่วบรวมคำ สั่งสั่ต่าต่งๆ ที่เที่กี่ยกี่วกับกัการทำ งานกับกัลิสลิต์ การดึงดึข้อข้มูลมูจากไฟล์ต่ล์าต่งๆ มาใน รูปรูของลิสลิต์ ส่วส่นที่รที่วบรวมคำ สั่งสั่ต่าต่งๆ ที่เที่กี่ยกี่วกับกัสี การสั่งสั่การให้เปลี่ยลี่นสี Components ต่าต่งๆ เช่นช่สี พื้นพื้ หลังลัสีปุ่สีมปุ่สีข้สีอข้ความ เป็นป็ต้นต้ 3.6 3.7
FUNCTION การใช้งาน 16คู่มือการใช้งาน Lists Color ส่วส่นที่รที่วบรวมคำ สั่งสั่ต่าต่งๆ ที่เที่กี่ยกี่วกับกัตัวตัแปร การประกาศตัวตัแปร การรับรัค่าค่ตัวตัแปร ส่วส่นที่รที่วบรวมคำ สั่งสั่ต่าต่งๆ ที่เที่กี่ยกี่วกับกัส่วส่นการทำ งานย่อย่ยๆ ของ Code 3.8 3.9
สร้าร้งฐานข้อข้มูลมูที่เที่ราต้อต้งการ 1 2 ตั้งตั้ชื่อชื่งานของเรา หากไม่ตั้ม่งตั้ชื่อชื่ Google Sheets จะไม่บัม่นบัทึกทึข้อข้มูลมู เข้าข้เว็ปว็เข้าข้เมนู Data การเชื่อมต่อฐานข้อมูล 17คู่มือการใช้งาน ตัวตัอย่าย่ง การเชื่อชื่มฐานข้อข้มูลมูโดยใช้งช้าน Google Sheets 1 2 3
การเชื่อมต่อฐานข้อมูล 18คู่มือการใช้งาน กดเครื่อรื่งหมายบวก กด Create New 4 5
การเชื่อมต่อฐานข้อมูล 19คู่มือการใช้งาน เลือลืก Google Sheets เพราะฐานข้อข้มูลมูที่เที่ราสร้าร้งคือคื Google Sheets ตั้งตั้ชื่อชื่ฐานข้อข้มูลมูที่คุที่ณคุจะนำ เข้าข้เเล้วล้ตั้งตั้ค่าค่ส่วส่นหัวคอลัมลัน์ขน์องคุณคุว่าว่อยู่ ในเเถวใด เเละเเถวเเรกประกอบด้วด้ยข้อข้มูลมูอะไรให้เรียรีบร้อร้ย จากนั้นนั้กด Select a Sheet 6 7
การเชื่อมต่อฐานข้อมูล 20คู่มือการใช้งาน 8 เพียพีงเท่าท่นี้ฐนี้านข้อข้มูลมูก็จก็ะถูกถูดึงดึเข้าข้เว็ปว็ ไซต์เต์รียรีบร้อร้ย
เข้าข้ play store หรือรืapp store จากนั้นนั้พิมพิพ์ค้นค้หาว่าว่ Thunkable จากนั้นนั้ ทำ การติดติตั้งตั้ลงเครื่อรื่ง การนำ เเอปพลิเคชัน ขึ้น TEST บนสมาร์ทโฟน 21คู่มือการใช้งาน เข้าข้เเอปพลิเลิคชันชัจากนั้นนั้ทำ การ Login Google 1 2
กดดำ เนินนิการต่อต่ การนำ เเอปพลิเคชัน ขึ้น TEST บนสมาร์ทโฟน 22คู่มือการใช้งาน เลือลืก Gmail ที่คุที่ณคุต้อต้งการจะ Login 3 4
เเอปพิลพิเคชันชัจะเด้งด้มาหน้าน้ My Projects คุณคุสามารถเลือลืกเข้าข้ไปเยี่ยยี่มชม ผลงานได้ผ่ด้าผ่นสมาร์ทร์ โฟน การนำ เเอปพลิเคชัน ขึ้น TEST บนสมาร์ทโฟน 23คู่มือการใช้งาน 5
ตัวตัอย่าย่งผลงาน การนำ เเอปพลิเคชัน ขึ้น TEST บนสมาร์ทโฟน 24คู่มือการใช้งาน 6
คู่มืคู่อมืการใช้งช้าน Application
26Application Sign Up ทำ การกรอก E-mail Password First Name = ชื่อชื่จริงริ Last Name = นามสกุลกุ Class = ห้องที่เที่ท่าท่ ไหร่ Number = เลขที่ 1 ในกรณีที่ณีสที่มัคมัรใช้งช้านเป็นป็ครั้งรั้เเรกให้เลือลืกเมนู Sign Up เพื่อพื่ลงทะเบียบีน เข้าข้ใช้งช้าน 2 จากนั้นนั้กดเมนู Sign Up
27Application Login ทำ การกรอก E-mail Password ที่เที่ราได้ลด้งทะเบียบีนเอาไว้เว้เล้วล้ 1 ในกรณีที่ณีมีที่บัมีญบัชีอชียู่เยู่ เล้วล้เราสามารถเข้าข้สู่รสู่ะบบได้เด้ลยผ่าผ่น Login 2 จากนั้นนั้กดเมนู Login
28Application ContinueWithGuest ทำ การกรอก First Name = ชื่อชื่จริงริ Last Name = นามสกุลกุ Class = ห้องที่เที่ท่าท่ ไหร่ Number = เลขที่ 1 สามารถเข้าข้สู่รสู่ะบบผ่าผ่นการลงชื่อชื่-สกุลกุได้เด้ช่นช่กันกั 2 จากนั้นนั้กดเมนู Login
29เนื้อหา เมื่อมื่เรา Login เข้าข้มาเเล้วล้จะมีเมีมนูในูห้เราเลือลืกระหว่าว่ง บทที่ 1 เเละบทที่ 2 สามารถเลือลืกเรียรีนอันอั ใดก่อก่นก็ไก็ด้เด้เต่เต่มนู เเบบทดสอบจะไม่สม่ามารถเข้าข้ใช้ งานได้เด้นื่อนื่งจากต้อต้งเรัียรัีนบทที่ 1 เเละ 2 ให้เสร็จร็ก่อก่นจึงจึจะทำ เเบบทดสอบ ได้
30บทที่ 1 บทที่ 1 ปัดปักวาดเช็ดช็ถู จัดจั โต๊ะต๊จัดจัเตียตีง ทำ การเรียรีนจนถึงถึหน้าน้สุดสุท้าท้ยของ บทที่ 1 1 2 เมื่อมื่เรียรีนมาจนถึงถึช่วช่งสุดสุท้าท้ยให้กด Activity
31บทที่ 1 ตอบคำ ถามให้ถูกถูต้อต้งเพื่อพื่จะไปในเนื้อนื้หาบทที่ 2 ในช่อช่งคำ ตอบจากนั้นนั้กด ส่งส่ 4 5 จากนั้นนั้กด OKAY
32บทที่ 2 6 จากนั้นนั้เราก็เก็รียรีนบทที่ 2 จนถึงถึหน้าน้สุดสุท้าท้ย 7 เมื่อมื่เราเรียรีนบทที่ 2 เสร็จร็กดปุ่มปุ่Activity
33บทที่ 2 ตอบคำ ถามให้ถูกถูต้อต้งเพ่ือพ่ืจะได้ได้ปในส่วส่นเเบบทดสอบ ในช่อช่งคำ ตอบจาก นั้นนั้กดส่งส่ 8 9 จากนั้นนั้กด OKAY
34เนื้อหา เมื่อมื่เราเรียรีนบทที่ 1 เเละ 2 เสร็จร็เเล้วล้ก็กก็ดเมนู เเบบทดสอบเพื่อพื่เริ่มริ่ทำ เเบ บทดสอบ 10
35เนื้อหา เมื่อมื่กดเข้าข้มาเเล้วล้ก็จก็ะขึ้นขึ้ ให้เราได้เด้ข้าข้ทำ เเบบทดสอบ สามารถเลือลืกทำ ตามต้อต้งการได้เด้ลย 11
ตัวตั อย่าย่งบทที่ 1 เเละ 2 36เนื้อหา 12
37blocks code 1 หน้าน้ Login พร้อร้มblocks code
38blocks code 2 หน้าน้ Sign Up พร้อร้มblocks code
39blocks code 3 หน้าน้ ContinueWithGuest พร้อร้มblocks code
40blocks code 4 หน้าน้ Home พร้อร้มblocks code
41 blocks code 5 บทที่ 1 พร้อร้มblocks code
42blocks code 6 กิจกิกรรมบทที่ 1 พร้อร้มblocks code
43blocks code 7 กิจกิกรรมบทที่ 1.1 พร้อร้มblocks code
44blocks code 8 บทที่ 2 พร้อร้ มblocks code
45blocks code 9 กิจกิกรรมบทที่ 2 พร้อร้มblocks code
46blocks code 10 กิจกิกรรมบทที่ 2.2 พร้อร้มblocks code
47blocks code 11 หน้าน้เเบบทดสอบพร้อร้มblocks code
48blocks code 12 หน้าน้เเบบทดสอบบทที่ 1 พร้อร้มblocks code
49blocks code 13 หน้าน้เเบบทดสอบบทที่ 2 พร้อร้มblocks code
38สมาชิก นายกรกานต์ ชลศิริศิริ รหัสหันิสินิตสิ 64010518001 นายชัยชัพร ขันขับุตบุรศรี รหัสหันิสินิตสิ 64010518011 นายพิทพิยา ศรีนรีวลจันจัทร์ รหัสหันิสินิตสิ 640105180022