Edu Quest การพัฒพันา Thunkable MOBILE APPLICATION สาขาเทคโนโลยีกยีารศึกศึษาและคอมพิวพิเตอร์ศึร์กศึษา คณะศึกศึษาศาสตร์ มหาวิทวิยาลัยลัมหาสารคาม
สารบัญ เรื่อ รื่ ง หน้าน้ Thunkable ข้อข้มูลมูเบื้อ บื้ งต้นต้ การ สมัคมัร Thunkable Function การใช้งช้าน การเชื่อ ชื่ มต่อต่ฐานข้อข้มูลมู (Firebase) 1-6 7-12 13-21 22-28 ขั้นขั้ตอนการพัฒพันา Application Edu Quest 29-37
Thunkable ข้อข้มูลมูเบื้อ บื้ งต้นต้ การสร้าร้งโมบายแอปพลิเลิคชันชัสำ หรับรัผู้เผู้ริ่มริ่ต้นต้ที่ส ที่ นใจไม่ว่ม่าว่จะเป็นป็ การหาเครื่อ รื่ งมือมื โปรแกรมหรือรืเว็บว็ ไซต์ดัต์งดักล่าล่วในปัจปัจุบัจุนบัมีใมีห้เห้ลือลืก อย่าย่งมากมาย แต่ที่ต่เ ที่ ป็นป็นิยนิมมากทั้งทั้ ในและต่าต่งประเทศ ที่ม ที่ าแรง คือคื Thunkable - นักนัเรียรีน - นิสินิตสิ - นักนัศึกศึษา - ผู้ที่ผู้ ปที่ ระกอบอาชีพชีต่าต่ง ๆ ซึ่ง ซึ่ เป็นป็เว็บว็ ไซต์ที่ต์เ ที่ รียรีนรู้ไรู้ด้ง่ด้าง่ย มีเมีครื่อ รื่ งมือมืและ ชุดชุคำ สั่งสั่ที่ใที่ ช้รูช้ปรูแบบ ของ Blockly เป็นป็การสร้าร้งบล๊อล๊คเสมือมืนการเขียขีนโปรแกรม ที่ใที่ ช้ใช้นการสร้าร้งโค้ดค้ โดย Blockly นั้นนั้เป็นป็ผลิตลิภัณภัฑ์ใฑ์นส่วส่นของ Google Education ของ Google 1
Thunkable ข้อข้มูลมูเบื้อ บื้ งต้นต้ 1. สำ รวจปัญปัหา การสำ รวจปัญปัหาจะเป็นป็ สิ่งสิ่ที่ทำ ที่ ทำให้เห้ราเกิดกิ ไอเดียดี ในการสร้าร้งแอปพลิ เคชั่นชั่ โดยปัญปัหาอาจจะเป็นป็ ปัญปัหาใกล้ตัล้วตั ปัญปัหาที่พ ที่ บในสังสัคม เราต้อต้ง พิจพิารณาว่าว่แอปพลิเลิคชั่นชั่ที่เ ที่ ราสร้าร้งขึ้น ขึ้ ต้อต้งจะช่วช่ยในการแก้ปัก้ญปัหาของ คนได้อด้ย่าย่งไร หรือรืเกิดกิ ประโยชน์อน์ะไรต่อต่สังสัคม 2. สำ รวจตลาด พิจพิารณาตลาดหรือรืความต้อต้งการของผู้ใผู้ช้ว่ช้าว่มีผู้มี ใผู้ช้แช้อปพลิเลิคชั่นชั่ของ เรามีจำมีจำนวนมากน้อน้ยเพียพีงใด ใครบ้าบ้งที่จ ที่ ะได้ใด้ช้ แอพพลิเลิคชั่นชั่ที่เ ที่ ราสร้าร้งขึ้น ขึ้ เพราะถ้าถ้เราสร้าร้งแอปพลิเลิคชั่นชั่ออกมาแล้วล้ แต่ไต่ม่ตม่รงกับกัความต้อต้งการของตลาดก็ไก็ม่มีม่ ปมีระโยชน์อน์ะไรในการสร้าร้ง 3. สำ รวจแอปพลิเลิคชั่นชั่อื่น อื่ ๆ รู้เรู้ขารู้เรู้รา รบร้อร้ยครั้งรั้ชนะร้อร้ยครั้งรั้การสำ รวจหรือรืการศึกศึษาแอปพลิ เคชั่นชั่ของคนอื่น อื่ จะช่วช่ยให้เห้ราสามารถพิจพิารณาสิ่งสิ่ต่าต่งๆ ในการสร้าร้ง แอปพลิเลิคชั่นชั่อาทิเทิช่นช่ศึกศึษาระบบการทำ งานของคนอื่น อื่ หน้าน้ต่าต่งแอป พลิเลิคชั่นชั่เป็นป็อย่าย่งไร ทำ ไมแอปพลิเลิคชั่นชั่นี้ถึ นี้ งถึมีผู้มี ใผู้ช้มช้ากมาย สิ่งสิ่เหล่าล่นี้จ นี้ ะ ช่วช่ยให้เห้ราเห็นห็ข้อข้ดีข้ดีอข้เสียสีก่อก่นการลงมือมืสร้าร้งแอปพลิเลิคชั่นชั่ของเรา ซึ่ง ซึ่ ขอย้ำ ไว้เว้ลยว่าว่เป็นป็การศึกศึษาเพื่อ พื่ ปรับรั ให้เห้หมาะสมกับกัแอปพลิเลิคชั่นชั่ของเรา แต่ไต่ม่ใม่ช่กช่ารลอกเลียลีนแบบ หลักลั 3 ส ก่อก่นลงมือมืสร้าร้ง Application 2
Thunkable ข้อข้มูลมูเบื้อ บื้ งต้นต้ จากข้อข้จำ กัดกั ในการเรียรีนรู้ภรู้ าษาคอมพิวพิเตอร์ต่ร์าต่งๆ เพื่อ พื่ พัฒพันา แอปพลิเลิคชันชัมีคมีวามยุ่งยุ่ ยากสำ หรับรัผู้ที่ผู้ เ ที่ ริ่มริ่ต้นต้ ในการสร้าร้งแอปพลิเลิคชันชั หรือรืผู้ที่ผู้ ไที่ ม่มีม่พื้มีน พื้ ฐานในการเขียขีนโปรแกรม ทำ ให้ Google ได้พัด้ฒพันาระบบ การสร้าร้งแอปพลิเลิคชันชั ให้สห้ะดวกขึ้น ขึ้ App Inventor ได้ย้ด้าย้ยฐานการพัฒพันาจาก Google มาสู่สสู่ถาบันบั MIT ในปี 2010 โดย ณ Google เป็นป็ผู้สผู้ นับนัสนุนนุทำ ให้ App Inventor ได้รัด้บรัการ พัฒพันาอย่าย่งน่าน่ตกใจโดยเจ้าจ้หน้าน้ที่ข ที่ อง MIT ในทีมทีงานของ Andrew McKinney, Jeff Schiller, Josh Sheldon, Mariso( Diaz, และนักนัเรียรีน ในเครือรืข่ายของสถาบันบั MIT ที่มี ที่ คมีวามสามารถ พวกเขาเหล่าล่นี้เ นี้ป็นป็ผู้ร่ผู้วร่ม ก่อก่ตั้งตั้ Thunkable ซึ่ง ซึ่ ความสำ คัญคัของ App Inventor หรือรื Thun kable คือคืการผลักลัดันดัข้อข้จำ กัดกัของการเรียรีนรู้เรู้กี่ย กี่ วกับกัมือมืถือถืสำ หรับรันักนัเรียรีน และนักนัการศึกศึษาทั่วทั่ โลก รู้จัรู้ กจั Thunkable 3
Thunkable ข้อข้มูลมูเบื้อ บื้ งต้นต้ Thun kable มีหมีลักลัการทำ งานเหมือมืนกับกั MIT App Inventor โดยใช้ หลักลัการเขียขีนโปรแกรมแบบ Visual Programming Language ซึ่ง ซึ่ เป็นป็ แนวทางการเขียขีนโปรแกรมมิ่งมิ่รุ่นรุ่ ใหม่ เน้นน้ความง่าง่ย ต่อต่การเขียขีน และใช้หช้ลักลัการการต่อต่แบบเลโก้ คือคืต่อต่เป็นป็บล็อล็ค ๆ โดยยังยัรักรัษาหลักลั การการเขียขีนโปรแกรมมิ่งมิ่ทุกทุอย่าย่ง ซึ่ง ซึ่ เหมาะสำ หรับรัมือมื ใหม่ที่ม่ส ที่ นใจทาง ด้าด้นการเขียขีนโปรแกรมอย่าย่งยิ่งยิ่ Thun kable มีกมีารพัฒพันาอย่าย่งต่อต่เนื่อ นื่ งซึ่ง ซึ่ พัฒพันามาจาการ MIT App Inventor Version 2 ซึ่ง ซึ่ มี เครื่อ รื่ งมือมืต่าต่งให้ให้ช้ไช้ด้อด้ย่าย่งครบครันรัมากขึ้น ขึ้ อาทิเทิช่นช่ผู้ใผู้ช้สช้ามารถเพิ่มพิ่ font ได้หด้ลากหลายยิ่งยิ่ขึ้น ขึ้ มีสีมี ใสีห้เห้ลือลืก มากยิ่งยิ่ขึ้น ขึ้ เหมาะสำ หรับรันักนัพัฒพันาแอปพลิเลิคชันชับนโทรศัพศัท์มืท์อมืถือถื แอนดรอยด์อด์ย่าย่งยิ่งยิ่ 4
Thunkable ข้อข้มูลมูเบื้อ บื้ งต้นต้ เตรียรีมความพร้อร้มก่อก่นใช้งช้าน Thunkable 1. Computer หรือรื Notebook 2. ระบบปฏิบัฏิติบักติาร (Windows) Windows 11 Mac os ubuntu 3. เตรียรีมเบราว์เว์ซอร์ Google Chrome Microsoft Edge Mozilla Firefox Internet Explorer 5
Thunkable ข้อข้มูลมูเบื้อ บื้ งต้นต้ 4. อุปอุกรณ์โณ์มบายพร้อร้มติดติตั้งตั้ (Thunkable) 6. เชื่อ ชื่ มต่อต่อินอิเทอร์เร์น็ตน็ 6 7. มี Google account หรือรื E-mail
การ สมัคร Thunkable 1.เข้าข้สู่เสู่ว็บว็ ไซต์ https://thunkable.com/ 2.กดเข้าข้สู่รสู่ะบบ Sign up 7 1 2
การ สมัคร Thunkable 3.เลือลืก Sign up with Google 4.กรอก E-mail ที่ต้ ที่ อต้งการเข้าข้ใช้งช้าน 8 4 5
การ สมัคร Thunkable 5.กรอกรหัสหัผ่าผ่น และกดถัดถั ไป 6.เข้าข้สู่หสู่น้าน้ Thunkable 9 6
การ สมัคร Thunkable 7.เลือลืก Create New App เพื่อ พื่ เริ่มริ่สร้าร้ง Project 8.ตั้งตั้ชื่อ ชื่ Project ที่ต้ ที่ อต้งการ 10 7 8
การ สมัคร Thunkable 9.เลือลืก Category และเลือลืกหมวดหมู่ที่มู่ ต้ ที่ อต้งการสร้าร้ง Project 10.กดคำ ว่าว่ Create 11 9 10
การ สมัคร Thunkable 11.หน้าน้การทำ งานของ Thunkable 12
Function การใช้งช้าน 1.หน้าน้ต่าต่งการทำ งานทั้งทั้หมด 1. Menu เป็นป็แหล่งล่รวบรวมคำ สั่งสั่ ในการทำ งานเกี่ย กี่ วกับกัแอป เช่นช่ การสร้าร้งแอปใหม่ เรียรีกใช้แช้อพที่เ ที่ คยสร้าร้งไว้ การเชื่อ ชื่ มต่อต่กับกัมือมืถือถื เพื่อ พื่ จำ ลองการทำ งาน การ Export แอปเพื่อ พื่ นำ ไปใช้จช้ริงริ เป็นป็ต้นต้ 2. Palette เป็นป็แหล่งล่รวบรวมส่วส่นโปรแกรม (Component) เอาไว้เว้ป็นป็หมวดหมู่ (User Interface, Leyout,Media, Animation, etc.) คลิกลิหมวดที่ต้ ที่ อต้งการ จะเห็นห็รายการส่วส่นโปรแกรม ที่เ ที่ ราสามารถใส่เส่ข้าข้ไปบนโปรแกรมมือมืถือถืที่กำ ที่ กำลังลัออกแบบนี้ไนี้ ด้ เด้ช่นช่ ในหมวด User Interface จะเห็นห็ ส่วส่นโปรแกรมปุ่มปุ่ (Button) ข้อข้ความ (Label) รูปรูภาพ (Image) เป็นป็ต้นต้ 3. Viewer เป็นป็พื้น พื้ ที่บ ที่ นหน้าน้จอมือมืถือถื (Screen 1) ทำ ให้เห้ห็นห็ภาพ ตอนออกแบบโปรแกรม เมื่อ มื่ เราลากส่วส่นโปรแกรมมาใส่ใส่นพื้น พื้ ที่นี้ ที่ นี้ 1 2 3 4 5 13
Function การใช้งช้าน 4. Components คือคืส่วส่นโปรแกรมที่ถู ที่ กถูใส่เส่ข้าข้ไปใน Viewer เป็นป็ ส่วส่นโปรแกรมที่เ ที่ ราต้อต้งการให้มีห้อมียู่ ในโปรแกรมมือมืถือถืและ สามารถเขียขีนโค้ดค้เข้าข้ไปในส่วส่นโปรแกรมเหล่าล่นี้ไนี้ ด้ เด้พื่อ พื่ ให้โห้ปรแกรม ทำ งานตามที่ต้ ที่ อต้งการ ด้าด้นล่าล่งติดติกันกัเป็นป็ ส่วส่นของ Media เราสามารถเพิ่มพิ่ ฟล์สื่ล์อ สื่ ชนิดนิต่าต่งๆ เช่นช่ ไฟล์รูล์ ปรูภาพ ไฟล์เล์สียสีง แบบอักอัษร (Font) เข้าข้ไปในโปรเจกเพื่อ พื่ นำ ไปใช้ใช้นโปรแกรมได้ 5. Properties คือคืคุณคุสมบัติบัต่ติาต่งๆ ของส่วส่นโปรแกรม เมื่อ มื่ เราคลิกลิ เลือลืกส่วส่นโปรแกรมใด ที่อ ที่ ยู่ใยู่ น Viewer หรือรื ใน Components เราจะเห็นห็รายการคุณคุสมบัติบัขติองส่วส่นโปรแกรมนั้นนั้ โดยแต่ละต่ส่วส่น โปรแกรมจะมีคุมีณคุสมบัติบั ติที่อ ที่ าจจะเหมือมืนกันกัหรือรืแตกต่าต่งกันกัออกไป ก็ไก็ด้ ซึ่ง ซึ่ เราสามารถแก้ไก้ข เพิ่มพิ่เติมติข้อข้มูลมูลงไปในคุณคุสมบัติบัต่ติาต่งๆ ที่มี ที่ ไมีด้ 14
Function การใช้งช้ าน 2. ชุดชุ เครื่อรื่ งมือมื ใน Add Components 15
1 2 3 3.1 ส่วส่นหน้าต่าต่งการทำ งานเกี่ย กี่ วกับกั Code 1. Core คือคืส่วส่นของ Block Code ต่าต่งๆ ที่ใที่ ช้ใช้นการสั่งสั่การ แอพพลิเลิคชั่นชั่ 2. ส่วส่นของ Screen ที่ร ที่ วบรวม Components ต่าต่งๆ ที่อ ที่ ยู่ใยู่ น แอพพลิเลิคชั่นชั่ของเรา 3. ส่วส่นสำ หรับรัลบ Block Code ที่เ ที่ ราไม่ไม่ด้ใด้ช้งช้านออกไปโดย การลากมาใส่ Function การใช้งช้าน 3. ชุดชุคำ สั่งสั่ ในส่วส่นของ Blocks 3.2 Control ส่วส่นที่ร ที่ วบรวมคำ สั่งสั่ต่าต่งๆ ที่เ ที่ กี่ย กี่ วกับกัการทำ งานของ แอพพลิเลิคชั่นชั่เช่นช่การวางเงื่อ งื่ นไข สั่งสั่การให้ไห้ปหน้าน้ถัดถั ไป การสั่งสั่การให้ปิห้ดปิแอปพลิเลิคชั่นชั่เป็นป็ต้นต้ 16
Function การใช้งช้าน 3.3 Logic สิ่งสิ่ที่ร ที่ วบรวมคำ สั่งสั่ต่าต่งๆ ที่เ ที่ กี่ย กี่ วกับกัตรรกศาสตร์ การเปรียรีบเทียทีบต่าต่งๆ 3.4 Math สิ่งสิ่ที่ร ที่ วบรวมคำ สั่งสั่ต่าต่งๆ ที่เ ที่ กี่ย กี่ วกับกัคณิตณิศาสตร์ จำ นวน ตัวตัเลข การคำ นวณ บวก ลบ คูณคูเป็นป็ต้นต้ 17
Function การใช้งช้าน 3.5 Text สิ่งสิ่ที่ร ที่ วบรวมคำ สั่งสั่ต่าต่งๆ ที่เ ที่ กี่ย กี่ วกับกัการทำ งานกับกัข้อข้ความ 3.6 Lists สิ่งสิ่ที่ร ที่ วบรวมคำ สั่งสั่ต่าต่งๆ ที่เ ที่ กี่ย กี่ วกับกัทำ งานกับกัลิสลิต์ กต์ารดึงดึข้อข้มูลมู จากไฟล์ต่ล์าต่งๆ มาในรูปรูแบบของลิสลิต์ 18
Function การใช้งช้าน 3.7 Color สิ่งสิ่ที่ร ที่ วบรวมคำ สั่งสั่ต่าต่งๆ ที่เ ที่ กี่ย กี่ วกับกัสี การสั่งสั่การให้เห้ปลี่ย ลี่ นสี Components ต่าต่งๆ เช่นช่สีพื้สีน พื้ หลังลัสีปุ่สีมปุ่สีข้สีอข้ความ เป็นป็ต้นต้ 3.8 Device 19
Function การใช้งช้าน 3.9 Objects 3.10 Variables สิ่งสิ่ที่ร ที่ วบรวมคำ สั่งสั่ต่าต่งๆ ที่เ ที่ กี่ย กี่ วกับกัตัวตัแปร การประกาศตัวตัแปร การรับรัค่าค่ตัวตัแปร การนำ เข้าข้ข้อข้มูลมูที่เ ที่ ป็นป็แบบ json มาใช้งช้าน 20
Function การใช้งช้าน 3.11 Functions สิ่งสิ่ที่ร ที่ วบรวมคำ สั่งสั่ต่าต่งๆ ที่เ ที่ กี่ย กี่ วกับกัการทำ งานของส่วส่นย่อย่ยๆ ของ Code 21
การเชื่อ ชื่ มต่อต่ ฐานข้อข้มูล (Firebase) 1.เข้าข้สู่หสู่น้าเว็บว็ ไซต์ https://firebase.google.com จากนั้นให้ทําทํการ ลงชื่อเข้าข้ใช้ 22 2. เลือลืกบัญชีของgoogle เพื่อ พื่ ทําทํการเข้าข้สู่รสู่ะบบหรือรื ใส่บั ส่ญชี อื่น อื่ ที่ต้ ที่ อต้งการเข้าข้สู่รสู่ะบบ 1 2
การเชื่อ ชื่ มต่อต่ ฐานข้อข้มูล (Firebase) 3. กดปุ่ม Get started ให้กดเพื่อ พื่ เริ่มริ่สร้าร้งฐานข้อข้มูล 23 4. สร้าร้งโปรเจกต์ใต์หม่ให้กด Add project 3 4
การเชื่อ ชื่ มต่อต่ ฐานข้อข้มูล (Firebase) 5. พิมพิพ์ชื่อโปรเจกต์ที่ต์ต้ ที่ อต้งการลงในช่อง Enter your project name 24 6. จากน้้นให้เราเลือลืกที่เ ที่ มนูBuild 5 6
การเชื่อ ชื่ มต่อต่ ฐานข้อข้มูล (Firebase) 7. จากนั้นเราเลือลืกที่เ ที่ มนูAuthentication 8. จากนั้นเลือลืกที่ Email/Password 25 9. ให้กดเปิดที่ปุ่ที่ปุ่ม Enable 10. เเล้วล้กด Save 7 8 9 10
13. เลือลืกเมนู 11 12 13 การเชื่อ ชื่ มต่อต่ ฐานข้อข้มูล (Firebase) 11. เลือลืกเมนูSetting 12. เลือลืกเมนูProject settings 26 14. กรอกชื่อแอปพลิเลิคชัน 15. กดปุ่ม Register app 14 15
16 การเชื่อ ชื่ มต่อต่ ฐานข้อข้มูล (Firebase) 16. คัดลอก API Key และDatabaseURL ของFirebase 27 17. เข้าข้เมนูSettings ใน Thunkable 18. นำ ลิงลิก์ที่ก์ คั ที่ ดลอกจากFirebaseมาวางที่ช่ ที่ ช่อง API Key และDatabaseURL ใน Thunkable 17 18
การเข้าข้สู่รสู่ะบบ การเชื่อ ชื่ มต่อต่ ฐานข้อข้มูล (Firebase) 24. เขียขีนคำ สั่งสั่ด้วด้ยBlock Code ให้ทำ การบันทึกทึข้อข้มูลการ เข้าข้สู่รสู่ะบบ ลงในFirebase ที่เ ที่ ชื่อมไว้ดัว้งดัภาพ 28 สมัคมัรสมาชิกชิ
ขั้นขั้ตอนการพัฒพันา Application Edu Quest 1. หน้าแรกของApplication กดปุ่ม เข้าข้สู่รสู่ะบบ เพื่อ พื่ เข้าข้สู่หสู่น้า การกรอกข้อข้มูล 29
2. หน้าการเข้าข้สู่รสู่ะบบกรอก Email, Password และกด ปุ่มเข้าข้สู่รสู่ะบบ เพื่อ พื่ เข้าข้สู่หสู่น้าบทเรียรีน แต่ถ้ต่าถ้ยังยั ไม่ได้สด้มัครสมาชิก ต้อต้ง ทำ การสมัครสมาชิก ขั้นขั้ตอนการพัฒพันา Application Edu Quest 30
3. หน้าการสมัครสมาชิกกรอกข้อข้มูล Email, Password และกด ปุ่มเข้าข้สู่รสู่ะบบ เพื่อ พื่ สมัครสมาชิก เพื่อ พื่ นำ เอา Email, Password มากรอกในเข้าข้สู่รสู่ะบบ ขั้นขั้ตอนการพัฒพันา Application Edu Quest 31
4. หน้าเนื้อหา และกดปุ่ม Next เพื่อ พื่ เข้าข้สู่บสู่ทเรียรีน ขั้นขั้ตอนการพัฒพันา Application Edu Quest 32 เมื่อกดปุ่ม จะกลับไปหน้าแรก
5. เมื่อเรียรีนเนื้อหาครบทุกทุบท จะเข้าข้สู่หสู่น้ากิจกิกรรมให้เลือลืกตอบ พร้อร้มเฉลย ขั้นขั้ตอนการพัฒพันา Application Edu Quest 33
ขั้นขั้ ตอนการพัฒพั นา Application Edu Quest 34
6. หลังลัจากทำ กิจกิกรรมเสร็จร็จะเข้าข้สู่หสู่น้าแบบทดสอบหลังลัเรียรีน กดปุ่ม start เพื่อ พื่ เริ่มริ่ทำ แบบทดสอบ ขั้นขั้ตอนการพัฒพันา Application Edu Quest 35
Edu Quest สมาชิก ชิ นายวสุพล สุแดงน้อย 64010518026 นางสาวดาราวรรณ จันทร์ไทย 64010518036 นางสาวอภิญญา บุญพูล 64010518052