thunkable

วิทยาลยั เทคโนโลยีอรรถวทิ ยพณชิ ยการ Attawit Commercial Technology College การพฒั นาโปรแกรมบนอุปกรณเคล่อื นทีพ่ กพา จัดทำโดยอาจารยสธุ ารัตน ทองใหม

ทำความรจู ักกับ Thunkable เบื้องตน 1. ความรทู ่ัวไปเกี่ยวกบั Mobile Application Mobile Application ประกอบข้นึ ดวยคำสองคำ คอื Mobile กบั Application มคี วามหมาย ดังน้ีMobile หมายถึง อุปกรณสื่อสารที่ใชในการพกพา ซึ่งนอกจากจะใชงานไดตามพื้นฐานของ โทรศัพทแลวยังทำงานไดเหมือนกับเครื่องคอมพิวเตอร เนื่องจากเปนอุปกรณที่ขนาดเล็ก น้ำหนักเบา ใชพลังงานคอนขางนอยปจจุบันมักใชทำหนาที่ไดหลายอยางในการติดตอแลกเปลี่ยนขาวสารกับ คอมพิวเตอร Application หมายถึง ซอฟตแวรที่ใชเพื่อชวยการทำงานของผูใช (User) โดย Application จะตองมสี ิง่ ที่เรยี กวา สวนตดิ ตอกบั ผูใ ช (User Interface หรอื UI) เพื่อเปน ตวั กลางการใชงานตาง ๆ Mobile Application เปนการพัฒนาโปรแกรมประยุกตสำหรับอุปกรณเคลื่อนที่ เชน โทรศัพทม ือถือแทบ็ เล็ต โดยโปรแกรมจะชวยตอบสนองความตองการของผูบ รโิ ภค อีกทั้งยังสนับสนนุ ใหผูใชโทรศัพทไดใชงายยิ่งขึ้นในปจจุบันโทรศัพทมือถือ หรือ สมารทโฟน มีหลายระบบปฏิบัติการท่ี พัฒนาออกมาใหผ ูบริโภคใช สวนทีม่ ีคนใชแ ละเปนท่นี ยิ มมากกค็ ือ ios และ Android จึงทำใหเ กดิ การ เขียนหรือพัฒนา Application ลงบนสมารทโฟนเปนอยางมาก อยางเชน แผนที่, เกมส, โปรแกรมคุย ตาง ๆ และหลายธุรกิจก็เขาไปเนนในการพัฒนา Mobile Applicationเพื่อเพิ่มชองทางในการสื่อสาร กับลูกคามากขึ้น ตัวอยาง Application เชน Facebook ที่สามารถแชรเรื่องราวตางๆ ไมวาจะเปน ความรูสึก สถานท่ี รปู ภาพ ผานทางแอปพลิเคชันไดโดยตรงไมต อ งเขา เว็บบราวเซอร 2. ทำความรูจกั กับ Thunkable จากขอจำกัดในการเรียนรูภาษาคอมพิวเตอรตางๆ เพื่อพัฒนาแอปพลิเคชันมีความยุงยาก สำหรับผูที่เริ่มตนในการสรางแอปพลิเคชัน หรือผูที่ไมมีพื้นฐานในการเขียนโปรแกรม ทำให Google ไดพฒั นาระบบการสรางแอปพลิเคชันใหสะดวกขนึ้ Thunkable มีพื้นฐานการทำงานมาจากโครงการ App Inventer ในระยะแรก เปนสวนหน่ึง ในงานวิจัยของ Google และตอมาไดพัฒนารวมกับสถาบัน MIT (Massachusetts Institute of Technology) App Inventor เริม่ ตน ขน้ึ ในป 2007 เม่อื Hal Abelson ศาสตราจารยดา นวิทยาการ คอมพิวเตอรทีส่ ถาบนั MIT และ Mark

Friedman วิศวกรอาวุโสของ Google ไดสรางการพัฒนาแพลตฟอรมดวยความชวยเหลือจาก ผูใช Google คอื LizLooney, Sharon Pert, Ellen Spertus, Karen Parker, และ Debbie Wallach. App Inventor ไดยายฐานการพัฒนาจาก Google มาสูสถาบัน MIT ในป 2010 โดย ณ Google เปนผูสนับสนุน ทำให App Inventor ไดรับการพัฒนาอยางนาตกใจโดยเจาหนาที่ของ MIT ในทีมงานของ AndrewMcKinney, Jeff Schiller, Josh Sheldon, Marisol Diaz, และนักเรียนใน เครือขายของสถาบัน MIT ที่มีความสามารถ พวกเขาเหลานี้เปนผูรวมกอตั้ง Thunkable ซึ่ง ความสำคัญของ App Inventor หรือ Thunkableคือ การผลักดันขอจำกัดของการเรยี นรูเกี่ยวกับมอื ถือสำหรับนกั เรยี นและนกั การศกึ ษาทัว่ โลก Thunkable มีหลักการทำงานเหมือนกับ MIT App Inventor โดยใชหลักการเขียนโปรแกรม แบบ Visual Programming Language ซึ่งเปนแนวทางการเขียนโปรแกรมมิ่งรุนใหม เนนความงาย ตอ การเขยี น และใชห ลักการ เหมาะสำหรับนักพฒั นาแอปพลิเคชันบนโทรศพั ทม อื ถอื แอนดรอยดอยา งย่ิง 3. เตรยี มพรอมกอ นเขา ใชงาน Thunkable 3.1 Computer หรือ Notebook

3.2 ระบบปฏบิ ตั ิการ 3.3 บราวเซอร 3.4 บัญชีของ Google หรือเรียกงายๆวามี Gmail นั่นเอง ซึ่งสำคัญมาก เพราะนอกจากจะใช ในการพัฒนาแอปพลิเคชันผาน Thunkable แลวยัง ใชในการอัพโหลดแอปพลิเคชันขึ้น Google Play Store ผานทางnnGoogle Play Console อกี ดว ย Gmail

3.5 อปุ กรณโมบายพรอมติดตงั้ แอปพลิเคชัน Thunkable Live 4. การเขา ใชง าน Thunkable 4.1 เขาสเู ว็บไซต http://thunkable.com คลิกเขาสูระบบ Sign up

4.2 เลือก Sign in with Google 4.3 ปอ น Gmail และรหัสผา น เสร็จแลวเลือก ถดั ไป 4.4. เลอื กหา Mate New App เพอ่ื เริม่ สรา ง

4.5 ใสช ื่อ App แลว กด Create เพื่อเขา สหู นา ตา งการทำงาน 4.6 หนา ตางการทำงาน

5. รจู ัก Function การทำงานของ Thunkable 5 5.1 หนา ตา งการทำงานโดยรวม 1 2 4 3 1) Menu เปนแหลง รวบรวมคำสัง่ ในการทำงานเก่ยี วกบั แอปพลเิ คชนั ดงั นี้ - ทดสอบแบบ Live Test - Share project ผานลงิ ก - Make Copy สำเนาโปรเจค - ดาวนโหลดไฟลติดตั้งแอพ (ทาง Thunkable แจงวาสำหรับ Android นั้น อยา เพิ่งดาวนโหลด apk ไปติดตั้ง) เพื่อความปลอดภัยตองอัพโหลดขึ้น Play Store กอนเพื่อใหเขา ตรวจสอบแลว คอ ยดาวนโ หลดมาตดิ ตงั้ - Publish – การ Publish แอพสู Store - Help - 1 ความชวยเหลือ - Community การแชรค วามรู เนือ้ หาตา งๆ สชู มุ ชน เปน การแลกเปลี่ยนขอมูลกัน 2) Design & Blocks - Design สวนโปรแกรมที่เราตองการใหม อี ยูใ นโปรแกรมมอื ถอื - Blocks สวนที่เขียนโคดเขาไปในสวนโปรแกรมที่สรางขึ้น เพื่อใหโปรแกรมทำงาน ตามทีต่ องการ

3) Components คือ เปนแหลงรวบรวมสวนโปรแกรมเอาไวเปนหมวดหมู เมื่อคลิก หมวดที่ตองการ จะเห็นรายการสวนโปรแกรมที่เราสามารถใสเขาไปบนโปรแกรมมือถือ ที่กำลัง ออกแบบน้ไี ด4) Viewer เปน พื้นทบี่ นหนา จอมือถือ (Screen1) ทำใหเหน็ ภาพตอนออกแบบโปรแกรม เมอื่ เราลาก สว นโปรแกรมมาใสในพน้ื ทน่ี ี้ 5) Properties คือ คุณสมบัติตาง ๆ ของสวนโปรแกรม เมื่อเราคลิกเลือกสวนโปรแกรม ใด ที่อยูใน Viewerหรือใน Components เราจะเห็นรายการคุณสมบัติของสวนโปรแกรมนั้น โดยแต ละสวนโปรแกรมจะมีคุณสมบัติที่อาจจะเหมือนกันหรือแตกตางกันออกไปก็ได ซึ่งเราสามารถแกไข เพม่ิ เตมิ ขอ มูลลงไปในคุณสมบัติตา ง ๆ ท่ีมไี ด 5.2 ชดุ เครือ่ งมือใน Components

5.2.1 User Interfac Button = ปุมสำหรับกดหรอื สมั ผัส Label = ขอความในแอปพลิเคชนั Textinput = ปอนขอ ความ List Viewer = สำหรับรายการใหเลอื ก Web Viewer = แสดงหนาเวบ็ Switch = ปุมทสี่ ามารถทำได 2 สถานะ สำหรบั เปด ปด Slider = สไลด Alert = แจง เตอื น เปน ปอปอัพ

5.2.2 Layout การวางตำแหนงของหนา จอ Row = วางแนวนอน Column = วางแนวต้งั 5. 3 ชดุ คำสง่ั ในสวนของ Blocks