exam_hytexts_280320010330

ตัวอยางฟรีสรางแอพพลิเคชั่นดวย THUNKABLE เบื้องตน 1

สรา งแอพพลเิ คช่นั ดว ย THUNKABLE เบ้อื งตน 2 คาํ นํา สรางแอพพลเิ คช่ันเอง อาจเปน เรื่องทร่ี ูสกึ วาไกลตัว ยง่ิ โดยเฉพาะผทู ไี่ มเ คยไดเรยี นเก่ียวกับการเขียน โปรแกรมคอมพิวเตอรเ หมือนผม แตการสรางแอพพลิเคชัน่ ดวย THUNKABLE นั้น แมไ มเ คยเรียนรูก าร เขยี นภาษาคอมพิวเตอร กส็ ามารถที่จะสรางแอพพลเิ คชัน่ ขึ้นมาเองได เพราะระบบการทํางานเหมือนกับเรา ตอ เลโก ไมจําเปน ตอ งลงโปรแกรมเพราะสามารถทํางานบนหนาเว็บไซตไ ดเลย แตอ ยา เพง่ิ คิดวา จะเปนเว็บที่ สรา งแอพพลิเคชัน่ งายๆ พื้นๆ นะครบั เพราะความสามารถของ THUNKABLE นัน้ สามารถสรา งแอพพลิเคช่ัน ท่มี ีความซับซอนไดห ลากหลายรปู แบบการใชง าน ไมแพการเขียนดวยภาษาคอมพิวเตอรเลย ผูเขยี นไดสรางคูมอื การสรางแอพพลเิ คช่ันดวย THUNKABLE เบือ้ งตน ขน้ึ มา โดยการอธบิ ายในแตละ ขน้ั ตอนอยา งละเอียด เพือ่ ใหผูอา นไดเขาใจ และสามารถนําความรทู ี่ไดไ ปประยุกตใ ชตอ ยอดได สามารถพดู ได วาเรมิ่ จากความรูเปน 0 เลยทีเดียว หวงั วาตาํ ราฉบบั นี้ คงจะสรา งประโยชนใหผูอา นไดไมม ากก็นอย และ หากมีจดุ ใดท่ีผดิ พลาดหรอื ขาดตกบกพรอ ง ผูเ ขียนกราบขออภยั ไว ณ โอกาสน้ี และหากมีคาํ แนะนาํ ตชิ ม หรอื ขอ ซกั ถามใดๆ ที่ผูเขยี นสามารถไขขอ ของใจได ขอใหส ง มาที่ [email protected] จะเปน พระคณุ อยางสูงครับ

สรางแอพพลิเคช่นั ดวย THUNKABLE เบ้อื งตน 3 สารบญั 4 5 บทท่ี 1 การสมคั รใช และทําความรจู ักกบั Thunkable 9 การสมคั รใช Thunkable เคร่อื งมอื ตางๆ ในการพฒั นาแอพพลิเคชนั่ 11 ตัวอยา งแอพพลเิ คชัน่ กลา วทักทาย 25 บทที่ 2 เรมิ่ ตน สรางแอพพลิเคชนั่ แรก 27 Workshop1 แอพพลเิ คช่นั ใบห วย 30 บทที่ 3 นําแอพพลิเคช่ันข้นึ Test บนสมารทโฟน 31 การทดสอบการแสดงผลช่ัวคราวบนสมารท โฟนโดยการใชเ มนู Test (แนะนาํ ) การทดสอบการแสดงผลชว่ั คราวบนสมารท โฟน โดยการใช USB Connection 32 50 บทที่ 4 การ Export เพื่อติดต้งั จรงิ บนสมารท โฟน 60 การ Export เปนไฟล Android application Package file หรอื APK. 83 การติดตัง้ ไฟล APK บนสมารทโฟนของเรา 96 97 บทที่ 5 การฝกสรางแอพพลิเคชั่นดวย Component ทห่ี ลากหลาย Workshop2 แอพพลิเคชัน่ คํานวณหาพื้นท่ีรปู สี่เหลย่ี ม Workshop3 แอพพลเิ คชนั่ วดั ระดับความเอียง Workshop4 แอพพลเิ คชัน่ Drawing on Photo Workshop5 แอพพลิเคชั่น Animal บทที่ 6 บทสง ทาย แหลงความรเู พิ่มเตมิ เกยี่ วกับ Thunkable

สรา งแอพพลิเคช่นั ดวย THUNKABLE เบอื้ งตน 4 บทท่ี 1 สมคั รใชบ ริการ และทําความรจู กั กับ THUNKABLE การสมคั รใชบ รกิ าร อนั ดับแรกคอื การสมัครใชบ รกิ ารของเวบ็ Thunkable.com เขา ไปท่ีเว็บโดยการพมิ พ thunkable.com เมอื่ เปด เวบ็ ไซต Thunkable.com ขน้ึ มาใหทาํ การคลิกสมัครตรงปุม Sign In บรเิ วณมุมบนดา นขวา ดังรปู เมอ่ื ทา นกดปุม Sign In แลว ทานจะพบกับ หนาทีจ่ ะใหเ ราทําการสมัครดวยไอดีของ Google นะครบั ซึง่ ถา ใครมอี ีเมลของ Gmail แลวละก็ สามารถใชตัวน้ีไดเ ลยครบั

สรา งแอพพลเิ คชนั่ ดว ย THUNKABLE เบือ้ งตน 5 เครื่องมอื ตางๆ ในการพัฒนาแอพพลเิ คชน่ั และนีค่ ือหนา หลกั ของเราในเวบ็ Thunkable ทีจ่ ะใหเ ราไดสรางแอพพลเิ คช่นั เปน ของเราเอง โดยที่ไมต องเขียน โคดโปรแกรมภาษาคอมพวิ เตอรใ หยงุ ยากเลยครับ ในหนาตางทแ่ี สดงตรงกลางก็จะมขี อความตอนรบั และบอกวาเรายงั ไมม ี โครงการใดๆ แลว บอกใหเราสรางโครงการใหมไดโ ดยกดปุม Create New App ใหเ รากด OK ไปกอนครบั แลว ลองศึกษาดู วา แตละสวนในหนา เว็บนคี้ อื อะไรบาง 1. Apps เปนเมนูเกีย่ วกับการสรางแอพพลเิ คช่ันโครงการใหม , การโหลดแอพพลิเคชั่นจากโปรแกรมอน่ื มาพฒั นาตอ , การบันทึกแอพพลเิ คชั่น และอ่นื ๆ 2. Test เปน เมนทู ใ่ี ชส าํ หรบั การทดสอบดูการทํางานของแอพพลิเคช่ันของเราในขณะทเี่ รากาํ ลงั ออกแบบ เรียกไดวา สามารถออกแบบพรอมกับดผู ลการออกแบบไดจากตวั โทรศัพทไ ปพรอมๆ กัน 3. Export เมอ่ื เราสรางแอพพลเิ คช่นั เรยี บรอยแลว เราสามารถใชเ มนูนใ้ี นการ Export File เพ่ือนําไปติดตง้ั ใน โทรศพั ทของเรา หรือไมก็สง ไปยงั แหลงท่ีรวบรวมแอพพลิเคชนั่ เพ่อื ขายหรือแจก 4. Help เมอื่ ตอ งการความชว ยเหลือ จะมเี มนูทเ่ี ชื่อมโยงไปสูแหลง ชมุ ชนท่ีใช Thunkable และ MIT App Inventor 5. Create New App ปุม สาํ หรบั สรา งแอพพลเิ คชัน่ โครงการใหม 6. Join our Community เชอ่ื มโยงไปสสู งั คมของ Thunkable และ MIT App Inventor 7. English เมนสู าํ หรับการเลือกภาษาทแ่ี สดงผลในเวบ็ ไซตน ้ีครบั ( ไมมภี าษาไทย ) 8. Account ไอดขี องผใู ชง านครับ 9. สว นหมายเลข 9. นี้ จะเปน พ้ืนท่ีที่โครงการแตล ะแอพพลิเคชั่นทเี่ ราสรางน้นั แสดงอยูครับ ในตอนแรกจะวางเปลา

สรางแอพพลิเคชน่ั ดวย THUNKABLE เบอ้ื งตน 6 เพือ่ ใหไ ดเ หน็ ภาพชัดเจนพรอมๆ กับการศึกษา คมู อื น้ีไปดวย ขอใหท า นทาํ การสราง Project ขึน้ มากอน โดยการคลิกที่ปุม Create New App เม่ือคลิกแลวระบบจะใหทาํ การตง้ั ชื่อ App ใหท านตง้ั ชอื่ ไดตามใจชอบ ในบทนี้จะขอตั้งชื่อเปน First_App ระบบจะไมอนุญาตใหตัวแรกของชอื่ เปน ตัวเลข และไมร องรับช่อื ภาษาไทย ขอมลู เพมิ่ เตมิ ไดม กี ารกลา วถึงคําวา MIT App Inventor ในขอ 4. และขอ 6. จะขออธบิ ายคอื MIT App Inventor เปนเว็บท่เี ปดบรกิ ารใหส มคั ร และใชเครอ่ื งมอื ในเว็บเพื่อสรา งแอพพลิเคชนั่ ไดอยา งไมมีคา ใชจา ย และตอมาทาง MIT App Inventor กไ็ ดมกี ารแตกสาขาเพ่ิมมาอกี หน่ึง เวบ็ คอื เวบ็ Thunkable.com เปนเวบ็ เพื่อใชส รา งแอพพลิเคชัน่ เหมอื นกับเว็บ MIT App Inventor ดังน้นั เคร่อื งมือและรปู แบบในการ สรา งจะมีความเหมอื นกนั แทบทกุ ประการ แตใ นเว็บ Thunkable.com จะมีความหลากหลายมากกวา และมีเครอื่ งมือบางตวั ทเ่ี พิ่มเขามา ทงั้ นี้ เพราะทาง Thunkable.com มีแผนจะมีการเกบ็ คา ใชจ ายจากการใชงานในอนาคตน่นั เอง ดังนนั้ ทานสามารถทจี่ ะใชงานไดท ั้งเว็บ Thunkable.com และเว็บ MIT App Inventor โดยพมิ พ http://appinventor.mit.edu/explore/ และใชไอดเี ดียวกนั จาก Google แตค าดการณวา MIT App Inventor จะยงั คงเปด ใหบ ริการฟรีตอไป

สรางแอพพลิเคช่ันดวย THUNKABLE เบอ้ื งตน 7 เม่ือกดปุม OK เสร็จแลว จะปรากฏหนาตาของตัวเว็บทจ่ี ะใชใ นการสรา งแอพพลิเคช่ัน ซงึ่ จะมีเครื่องมือให หลากหลายมากมาย อาจทําใหเ กิดความสบั สน แตไมไดย ากอยางท่คี ดิ ครบั เม่ือทานเรียนรเู คร่ืองมือไปสองสามอยาง ทา นจะ เขาใจระบบการใชง านและปรับแตง เพราะใชว ธิ กี ารเดยี วกัน และนีค่ ือหนาตาของบรรดาเครือ่ งมือทเี่ ราจะในการสรา งแอพพลิเคชัน่ ซึง่ มีความหลากหลายเพียงพอทจี่ ะสรางเว็บ ทมี่ คี วามซบั ซอ นได ถึงแมจะทาํ งานบนเวบ็ ไซต แตระบบตา งๆ ท่ีใหม านน้ั คลายกบั เราโหลดโปรแกรมใหญๆ มาไวใ นเคร่อื ง กนั เลยทีเดียว หนา ตาและสว นตา งๆ ของการสรา งใน Thunkable

สรา งแอพพลเิ คช่นั ดว ย THUNKABLE เบือ้ งตน 8 1. ปมุ สลับโหมดการทํางาน มสี องโหมดคือ Designer เปนโหมดที่ ออกแบบหนาตาของแอพพลเิ คชนั่ การทํางานในโหมดนี้ ก็คือ การนาํ เอาปมุ เอาภาพ เอาเครอ่ื งมือตางๆ มาจัดวา งในหนาจอ แอพพลิเคชน่ั อกี โหมดการทํางานอนั ทสี่ องคือ Blocks คอื โหมดการสรางคําสงั่ ใหป ุม ภาพ หรือเคร่ืองมือตางๆ นัน้ ทาํ งานตามทเ่ี ราตองการ 2. Palette คอื สว นที่เราจะนํามาใสใ นแอพพลิเคชน่ั ของเรา ไมวาจะเปน ปุม ภาพ ชองกรอกขอความ เสียง วีดโี อ เรา สามารถลากจากตรงนี้ไปวางไวใ นหนา แอพพลเิ คชนั่ 3. หนา จอแอพพลิเคชนั่ สําหรับออกแบบ เปน รูปโทรศัพทจาํ ลอง สามารถต้ังคาใหเ ปน แนวตง้ั หรือแนวนอนได แต ภาพทเ่ี หน็ ในหนา จอจาํ ลองกับเปดในมือถือจะไมตรงกนั ตําแหนงจะคลาดเคลอ่ื น ดังน้ันเวลาออกแบบหากตองการ ใหม คี วามแมน ยาํ เราจะทําการเช่ือมตอ กบั โทรศัพทเพื่อดูการแสดงผลในโทรศัพทไ ปดวย (จะมกี ารสอนในบทตอๆ ไป ) 4. ปุม สลับหนา จอ หากมีแคหนา เดยี วจะใชชื่อวา Screen1 แตหากมีการสรางใหแอพพลเิ คช่ันมหี ลายหนา ก็จะมปี ุม Add Screen เปน ปมุ ท่ีสอง หรือหากจะลบก็กด Remove Screen เปนปุมที่สาม 5. สว นประกอบตางๆ ( Components ) สว นประกอบตางๆ ท่ีเราลากมาวางไวใ นหนาจอแอพพลเิ คชนั่ จะมรี ายช่อื เรียงลงมาแสดงอยูในชอง Components เพ่ือใหเราเลือกจัดการ 6. คุณสมบตั ิ ( Properties ) เม่อื เราเลือกสวนประกอบใดๆ แลว เราสามารถกาํ หนดคุณสมบตั ใิ หกับสงิ่ นนั้ ไดในชอง Properties เชน กําหนดสี ขนาดกวาง สงู ตัวหนังสือ และอนื่ ๆ เมือ่ เราไดเ รียนรูหนา ตาครา วๆ ของเว็บ Thunkable แลว กอนทเ่ี ราจะทดลองใชแ ละศึกษาในแตล ะเคร่ืองมือในบท ตอ ๆ ไป ผมจะแสดงใหเ ห็นภาพคราวๆ ของการสรางแอพพลิเคช่นั กอนวาแนวในการสรา งเปนแบบไหน หากเรายอ นไปดู ตรงสว นประกอบขอ 1 จะมีการอธิบายบอกไวว า การสรา งมีการแบง การทํางานออกเปนสองโหมด คือ โหมดการออกแบบ และโหมดของการสรางคําส่งั เพอื่ รองรบั การทาํ งานในเบือ้ งหลัง เรามาลองดูแนวการสรางจากตวั อยางแอพพลิเคชั่นอยา ง งายที่จะขอยกตวั อยางมาใหด ูนะครับ

สรา งแอพพลเิ คชั่นดวย THUNKABLE เบือ้ งตน 9 ตัวอยา ง แอพพลิเคช่นั กลา วทกั ทายทักทาย ในโหมดการออกแบบ Designer ในโหมดการการเขยี นคําสัง่ Blocks ผมไดวางสวนประกอบลงในหนาแอพพลเิ คชนั่ ไป 2 เม่ือออกแบบหนา ตาในสว น Designer เรียบรอยแลว สวนคอื ปายขอ ความ ( Label1 )และปมุ (Button1) กาํ หนดขนาดและสขี องท้ังสองสวนประกอบ จึงเปล่ยี นมาสโู หมดการสรางคําสั่ง Blocks ผมไดลาก บล็อกคาํ สั่งมาวางดังนี้ บล็อกสีนาํ้ ตาล = เม่ือกดปุม Button1 ใหทาํ ….. บลอ็ กสเี ขียว = ทาํ ใหขอความใน Label1 เปน…. บลอ็ กสีมวง = ขอ ความ “ HELLO! ” และน่ีคือภาพหนา แอพพลเิ คช่นั จริงท่ไี ด เมื่อกดปุม กจ็ ะมีคําทักทายปรากฏในชองขอ ความสีขาว ดวย ตวั อยางคราวนีค้ งพอทําใหเ ห็นภาพ และหากเรา เรียนรูมากขนึ้ กจ็ ะสามารถสรา งแอพพลิเคชั่นที่ ตอบสนองตอ ความตองการไดมากขนึ้ โดยท่ไี ม จาํ เปนตอ งเขียนโคด ภาษาคอมพวิ เตอรใหยุงยาก ขอมูลเพม่ิ เติม หากผใู ชมีความรูในเรอ่ื งภาษาคอมพิวเตอรก จ็ ะสามารถนําความรใู นเรื่องของการเขียนโปรแกรมมาสรา งคาํ สง่ั ใน Thunkable ได อยา งงา ยดาย แตส วนตวั แลว ผเู ขยี นไมมคี วามรใู นดา นการเขยี นโปรแกรม แตไ ดศ กึ ษาการตอ บล็อกคําส่ังจากส่อื ตางๆ จนสามารถทาํ ตาม และนาํ ไปประยกุ ตไ ดอยางงา ยดาย ดงั น้ันผทู ีไ่ มม ีความรดู า นภาษาคอมพิวเตอรเ หมือนผูเขยี นกค็ งไมย ากทีจ่ ะเรยี นรู

สรา งแอพพลิเคชนั่ ดว ย THUNKABLE เบือ้ งตน 10 บทท่ี 2 เรม่ิ ตนสรา งแอพพลิเคชั่นแรก ศึกษาเคร่ืองมืองา ยๆ โดยการสรา งแอพพลเิ คช่นั เล็กๆ ในบทท่สี อง เราไดทําการสรางแอพพลเิ คชนั่ เปลา ๆ ไวต ัวหน่งึ ช่อื วา First_App ในบทนีเ้ ราจะมาพัฒนาใหเ จา First_App ตัวน้ี ใหเ ปนแอพพลเิ คช่ันทสี่ ามารถใชง านไดบนมอื ถือจริงๆ โดยเราจะใชสว นประกอบในแอพพลิเคช่ันไมมาก เพ่อื เปน การเร่ิมตน ( สําหรบั ใครทยี่ ังไมไดสมคั ร หรือสรา งแอพพลิเคชัน่ เปลา ๆ ไวรอ สามารถกลับไปดูในบทที่สองไดครบั ) สวนคนท่ีไดสมัครแลว ลอ็ คอนิ เขา เว็บไซตกจ็ ะเจอกับงานที่สรางคา งไว ใหคลกิ เปดเลยครับ เมอื่ คลิกเขา ไปท่งี านของเราก็จะพบกบั หนา เปลาๆ โดยเราจะอยูท ่หี นาแรก (Screen1) ขอมูลเพิ่มเตมิ การต้งั ช่ือแอพพลิเคชัน่ ใน Thunkable ไมส ามารถต้ังเปนภาษาไทยได ใชต วั เลขนําหนา ไมไ ด และควรตง้ั ชื่อใหตรงกับการทํางาน ของแอพพลเิ คชนั่ เพราะเม่อื ทาํ การเผยแพรแ ลว ชอ่ื แอพพลิเคชนั่ จะเปน การส่ือท่ีตรงความหมายและคนหาไดง าย

สรางแอพพลเิ คช่ันดวย THUNKABLE เบื้องตน 11 WORKSHOP 1 : แอพใบหวย การเรยี นรู - การปรับแตงลักษณะของหนาแอพพลิเคช่นั - การใชป ุม (Button) เพือ่ สรา งเหตุการณ - การใชป า ยขอความ (Label) ในการฝก ทําแอพพลิเคชนั่ นี้ ผมไดกําหนด แนวการทาํ งานของแอพพลิเคชั่นใบห วยไวค รา วๆ คือ จะทําแอพพลิเคชั่นทเี่ มื่อเรากดปมุ 1 ครงั้ กจ็ ะมี การสมุ ตวั เลขใหเ ราขนึ้ มา 3 ตัว แลวเมื่อเราตองการ จะปดแอพพลิเคชน่ั ก็ทาํ การกดปดอกี ปุมหน่งึ เมื่อไดแนวทางผมก็ออกแบบหนาตาพรอมกําหนดการทาํ งานบนดังภาพ ………………………………………………………………………………………………………………………….. ขน้ั ตอนที่ 1 กาํ หนดหนาแอพพลิเคชน่ั A ใหท า นกดเลอื กสวนประกอบ ( Components ) ของ Sceen1 กอนนะครบั แลวชอ งสําหรับกําหนด คณุ สมบตั ิจะปรากฏในชองทางขวา ( Properties ) 1 กําหนดการวางวตั ถใุ นแนวนอนใหเ ปนตรงกลาง ( Align Horizontal = Center ) 2 กําหนดการวางวตั ถุในแนวตงั้ ใหชดิ ขอบดา นบน ( Align Vertical = Top ) 3 เลือกสีพน้ื หลงั ตามใจชอบเลยครับ ในตวั อยางเปน สีนํา้ เงนิ Indigo 4 กาํ หนดใหแ อพพลเิ คช่ันของเราเปน แบบแนวตั้งหรือแนวนอน ในตวั อยา งเปน แนวตงั้ ( Portrait ) หมายเหตุ : สําหรับการปรบั แตงในชองอนื่ ๆ จะมกี ารสอนใน workshop ตอ ๆไปนะครบั ใครจะลองศกึ ษาแลว ปรับเองกอนกไ็ มห ามครับ

สรางแอพพลเิ คช่นั ดว ย THUNKABLE เบือ้ งตน 12 ขนั้ ตอนที่ 2 วาง Component (สวนประกอบ) การนําสวนประกอบตางๆ มาใสใ นหนาแอพพลิเคชน่ั ของเรา ใหท า นหากลุมเครื่องมือ User Interface ซ่ึงจะอยู ทางดานซายมือ แลวกดตรงเมนู Label คา งไว ลากมาปลอยตรงกลางหนาจอแอพพลเิ คชนั่ เสรจ็ แลว ลาก Button มาวางตอ ขา งลาง ดังภาพ

สรางแอพพลเิ คชน่ั ดวย THUNKABLE เบื้องตน 13 หากเราลากสวนประกอบตางๆ มาวาง เร่อื ยๆ มันจะตอๆ กันลงมาเปนชน้ั ๆ แตหาก เราตอ งการใหสวนประกอบ วางเรยี งตอกนั ใน แนวนอน ตองใชกรอบแบบแนวนอน โดยกดตรง กลุม Layout ( ลกู ศรสีเหลือง ) แลว จะมกี รอบการ วางสว นประกอบตางๆ 5 รูปแบบ Horizontal Arrangement เปน กรอบการวางเรยี งตอกันในแนวนอน Horizontal Scroll Arrangement เปนกรอบการวางเรยี งตอ กนั ในแนวนอนมแี ถบ เลอ่ื น Table Arrangement เปน กรอบการวางเรยี งตอในชอ งตาราง กําหนดจํานวนชองได Vertical Arrangement เปน กรอบการวางเรียงตอกนั ในแนวตั้ง Vertical Scroll Arrangement เปนกรอบการวางเรียงตอกันในแนวต้งั มแี ถบเลอ่ื น ใน Workshop นี้ เราจะใช Horizontal Arrangement มาเปนกรอบเพ่ือวาง Label 3 อัน เรยี งตอ กนั ในแนวนอน ใหท ําการลากจากเมนูดานซายมาวางไวตอกับปุม ไดเลยครับ

สรา งแอพพลิเคช่นั ดวย THUNKABLE เบอ้ื งตน 14 เมอื่ ทา นไดกรอบการวางแนวนอน ( Horizontal Arrangement ) แลวใหลากปา ยขอความ ( Label )มาวางตอ กัน 4 ปมุ โดยกลับไปที่กลุม User Interface แลว ลาก Label มาวางเรยี งตอ กนั 4 อัน เพือ่ จะใหแสดงตัวเลขหวย แตแ บบที่วางไวค ราวๆ เราตอ งการใหแ สดงตัวเลขแค 3 ตัว ใหป รากฏในแตละชอ งนน่ี า แปลวา เกินมา 1 Label ดงั น้ัน เราตอ งทําการลบสวนประกอบที่เปน Label ออก 1 อัน ( เพราะเราจะใบหวย 3 ตวั ตรงๆ ) เราจะลบ Label ตรงลกู ศรสเี หลืองชีอ้ อก 1 อัน โดย 1 เรากดเลอื ก Label 5 ตรงชอง Components แลว กด Delete ตรงปุมลาง ระบบจะถามวา ตกลงไหม กด OK แลวเรา กจ็ ะเหลือเพยี ง 3 Label ขอมูลเพิ่มเตมิ เราสามารถใช Label เปน ที่วางขอ ความตา งๆ ได หรอื อาจสรา งคําส่งั ให Label แสดงขอความหรือตวั เลขจากสว นอนื่ ๆ ได เชนเดยี วกัน ใน Workshop น้ี เราจะให Label แสดงขอความท่ีไดจ ากการสมุ

สรา งแอพพลิเคชน่ั ดว ย THUNKABLE เบ้อื งตน 15 เสร็จแลว ใหล ากเอา Button มาวางไวดา นลา ง Horizontal Arrangement อกี 1 หนง่ึ ปุม สําหรับใชเปน ปุมปด แอพพลิเคชน่ั สว นประกอบ ( Component ) ทเ่ี รานาํ มาวางนั้น ระบบจะตั้งชื่อใหเ ราอตั โนมตั ิ แตชื่อทต่ี ้ังมาทาํ ใหส ับสน เวลาท่เี ราตอบล็อกคําสงั่ เราจะไมร ูวา สวนไหนทาํ หนาท่ี อะไร ดังน้ันเราจงึ ควรเปลีย่ นช่อื สวนประกอบท่ีเราจะ สรา งคําสั่ง โดยการคลกิ เลือกสว นประกอบในชอ ง Component แลวกดปุม Rename ดา นลางเพอ่ื เปล่ียนชื่อ ควรตั้งช่อื ตามตวั อยางกอนนะครบั เมือ่ ทา นชาํ นาญใน ระดับหน่ึงแลว จงึ คอยเปลี่ยนชอื่ ตามท่ีทา นตองการ

สรา งแอพพลิเคชั่นดว ย THUNKABLE เบอ้ื งตน 16 ในขั้นตอนนเ้ี ราจะมากาํ หนดคณุ สมบตั ิใหกับสวนประกอบแตล ะอยางกันนะครบั เรมิ่ ท่ี ปา ยขอความ TITLE โดยการคลกิ TITLE ในชอง Components แลว จะปรากฏชองคุณสมบตั ิของ TITLE ดานขวา ใหกาํ หนดตามภาพท่ีเหน็ เลย นะครับ Background Color = None ( พนื้ หลังโปรง ไมมีสี ) Font Bold =  ( ทาํ ตัวหนงั สือใหเปนตัวหนา ) Font Size = 30 ( ขนาดของตัวหนงั สอื เทากับ 30 พอยท ) Height = Automatic ( ความสงู ของ Label TITLE นี้ เราใหเ ปน อัตโนมตั ิ ) Width = Fill parent ( กําหนดความกวา งใหก วางเต็มพื้นทซ่ี ายขวา ) Text = แอพพลเิ คชั่นใบห วย ( ขอความที่จะปรากฏบน Label TITLE ) Text Alignment = Center ( จดั วางขอความใหอ ยูกึง่ กลาง ) Text Color = Yellow ( สตี ัวหนังสือใหเปน สเี หลือง หรอื ที่ทา นชอบครบั ) สว นอน่ื ๆ ใน Properties ที่ไมไ ดว งสแี ดงไวใ หคงลักษณะเดมิ ไวน ะครบั คอ ยๆ เรียนรูไปทีละสวน ขอมูลเพ่มิ เติม ในตอนตน ๆ จะอธบิ ายการใชงานอยางละเอยี ด เพือ่ สรา งความเขาใจ และใน Workshop ตอ ๆ ไป จะมีความกระชับมากขน้ึ เพราะ เนื้อหาหรือการปรบั แตง ท่ไี ดกลา วไวอยา งละเอียดในตอนตนๆ น้ัน ทา นไดศ กึ ษาและเรียนรูการใชงานอยางละเอยี ด

สรา งแอพพลเิ คชัน่ ดว ย THUNKABLE เบอ้ื งตน 17 ตอ ไปกาํ หนด Properties ใหกบั ปมุ Start_Random กันครบั ผมปรบั เพียงสจ่ี ุดเทา นน้ั ที่เหลอื ใชรูปแบบที่ระบบ กาํ หนดมาให Font Bold =  Font Size = 18 Width = 150 pixels ( กาํ หนดความกวา งเทา กบั 150 พกิ เซล ) Text = กดเพือ่ สุมตัวเลข ตอ ไปเปนการกําหนดคาของ Horizontal Arrangement ซ่ึง ใชคา เดมิ เกือบทงั้ หมดนะครบั แตจ ะมที ปี่ รับคือ ความกวา ง ผมปรบั ใหเทากับ 90 เปอรเซ็นต หมายความวา หนาจอ สมารท โฟนกวางเทาไหรใ ห Horizontal Arrangement มี ความกวางเทากบั 90 เปอรเซ็นตของความกวา งสมารท โฟน

สรางแอพพลเิ คชั่นดว ย THUNKABLE เบือ้ งตน 18 กําหนดคุณสมบตั ิใหกบั Label ท้ัง No_1 No_2 และ No_3 เหมือนกนั ทุกอยาง ดังน้ี Background Color = White (พื้นหลังเปนสีขาว) Font Bold =  Font Size = 30 Height = 40 pixels Width = 60 pixels Text = ตวั หนังสือท่จี ะปรากฏใน Label ทัง้ สามนี้ใหว างไว เพราะวา เราจะสรางคาํ สงั่ ใหแ สดงตัวเลขเอง กําหนด Properties สําหรับปุม Close ใหเ หมือนกบั ปมุ Start_Random ทุกอยางเพยี งแตเปล่ยี นขอความทป่ี รากฏบนปุมใหเ ปนคําวา “ ออกโปรแกรม ” Text = ออกโปรแกรม และนค่ี ือหนา ตาของแอพพลเิ คช่ันทีแ่ สดงผลบนสมารทโฟนจรงิ ๆ เห็นไดชดั วาเบยี ดเสียดยัดเยียดกันเกินไป ( การดูการแสดงผลแบบ เรยี ลไทม บนสมารท โฟนขณะทเ่ี ราออกแบบ จะขอกลา วถึงในบทตอไป )

สรา งแอพพลเิ คชน่ั ดวย THUNKABLE เบอ้ื งตน 19 เราจะใช Label แทรกเขา ไปเพอื่ สรา งชองวา งใหหนาตาของแอพพลิเคชั่นดูไมต ิดกนั จนเกินไป ลองกําหนดความ กวางความสูงของ Label ดคู รับ หรอื จะกาํ หนดตามตัวอยางก็ได Label 1 กําหนด Height = 30 Width = Automatic Label 2 กําหนด Height = 30 Width = Automatic Label 4 กําหนด Height = Automatic Width = Fill parent Label 5 กําหนด Height = Automatic Width = Fill parent Label 3 กําหนด Height = 100 Width = Automatic แตอยา ลืมวา ขอความบน Label น้ันเราไมต อ งการ ใหก ําหนด Text ใหเ ปน ชองวางๆ นะครับ

สรางแอพพลิเคชั่นดวย THUNKABLE เบ้อื งตน 20 ข้นั ตอนที่ 3 ตอบลอ็ กเพ่ือสรางคําสั่งการทาํ งาน เมือ่ เราออกแบบหนา ตาของแอพพลิเคช่ันจนเปนที่พอใจแลว ขั้นตอนตอไปก็คือการสรางระบบการทาํ งานใหกบั สวนประกอบตางๆ ท่ีเราไดนํามาวางไว ใหก ดปุม Blocks เพื่อสลับไปสูโหมดการทํางานของบลอ็ ก และนีค่ ือหนาตาของ โหมดการตอ Blocks คาํ สง่ั 1. Built-In คอื สวนคําสัง่ เพ่อื สรา งเหตุการณและอ่นื ๆ ใหก ับแอพพลเิ คชั่นของเรา มีท้ังแบบงา ยๆ และซับซอน 2. Components คอื สวนตา งๆ ทเ่ี รานํามาวางบนแอพพลิเคชนั่ 3. เปนสวนท่จี ะแจงเราวา การตอ บล็อกของเรามขี อผดิ พลาดหรือไม สีเหลืองคือผดิ พลาดเลก็ นอย แอพพลเิ คช่นั ยงั คงทํางานได แตถา สีแดงหมายถึงแอพพลเิ คชน่ั มีขอผิดพลาดทท่ี าํ ใหหยดุ การทาํ งานได 4. กระเปา มีไวเพื่อแปะเอาบล็อกท่ีเราใชบ อยๆ ไว จะไดส ะดวกเวลาหยิบมาใช 5. ถังขยะ ใชทิง้ บล็อกท่เี ราไมต องการ เหมอื นการ Delete บล็อก

สรา งแอพพลเิ คชน่ั ดวย THUNKABLE เบ้อื งตน 21 ขอทบทวนการทํางานของแอพพลิเคชัน่ ใบห วยของเรากอนนะครบั เรม่ิ ตนเปด แอพพลเิ คชน่ั เม่ือผใู ชกดปุม Start_Random จะมีการสุมเลข 1 ถึงเลข 9 ใหป รากฏในชอง Label ทั้ง 3 ชองละ 1 ตวั และสุดทาย เมอื่ ผูใชก ดปุม “ออกโปรแกรม” แอพพลิเคชั่นก็จะทําการปด ตวั 1. คลิกเลอื ก ปมุ Start_Random จะปรากฏ บลอ็ กคาํ สง่ั ของปมุ 2. กดคางไวท่ีบล็อก When Start_Random Click do…. แลว ลากไปวางกลางจอ แลวเรากไ็ ดบลอ็ กอันแรกเรยี บรอ ยครับ พรอมท่ีจะนาํ บล็อกอื่นๆ มาตอ

สรางแอพพลิเคชัน่ ดวย THUNKABLE เบ้อื งตน 22 หลังจากนนั้ ใหค ลิกเลือก Label ชื่อ No_1 จะปรากฏบล็อกคําสัง่ ของ Label ใหเ ลอื กบล็อก Set No_1 text to… ไปตอท่ีบล็อกแรกไดเ ลยครบั ตอ ไปคลิกเลอื กเมนู Math ตรงกลมุ คาํ สง่ั Built – In แลว เลอื ก บลอ็ ก random integer from 1 to 100 มา ตอ ทา ยบล็อกสเี ขยี ว พอวางแลว อยา ลมื เปลยี่ น 1 to 100 เปน 0 to 9 นะครบั โดยคลกิ ทชี่ อ งตวั เลข ลบเลขเดมิ แลวพิมพ เลขใหม และเมื่อนาํ มาตอกบั บลอ็ กเขียวพรอมทําการแกไ ขตัวเลขเรียบรอ ยแลว ก็จะไดตามรปู น้ีครับ หากเรยี งตามคําสง่ั บลอ็ กจาก นาํ้ ตาล ไปหา เขยี ว และตอ ดวย นา้ํ เงิน จะหมายความดังนีค้ รับ “ เมอ่ื กดปมุ Start_Random ใหทาํ … จัดรูปแบบตัวหนังสอื ของ No_1 เปน….. ตัวเลขท่ีสุมจาก 0 ถึง 9 ” ขอมลู เพ่ิมเติม ในการตอบลอ็ ก หากตอ เสร็จแลว มคี ําเตือนขน้ึ เปน สีแดง หรอื ตอ บลอ็ กไมต ดิ นั่นแสดงวา ตอผดิ ใหเ ช็คดูวา ลากบลอ็ กมาตอ ถกู คาํ สง่ั หรอื ไม เพราะวา บล็อกอาจมคี วามคลายคลงึ กัน

สรา งแอพพลเิ คช่นั ดวย THUNKABLE เบอ้ื งตน 23 เรายังมี Label อีกสองอนั ที่ตองมีการสุมตวั เลข ไปปรากฏนะครบั คือ No_2 และ No_3 วิธีการก็คอื เรามบี ลอ็ กสีนาํ้ ตาลอยแู ลว ( When Start_Random click do …) ใหค ลกิ ที่ No_2 แลวทาํ เหมือนกบั No_1คอื นํามาตอ เปนบลอ็ กชัน้ ตอไปไดเ ลย แตถา มีหลายอนั คงเสยี เวลา ดังนน้ั ใหทาํ การคดั ลอกจากบลอ็ กของ No_1 โดยคลิกขวา ตรงบลอ็ กเขียวของ No_1 ( set No_1 Text to ) แลวกด เลือกตรงเมนู Duplicate เพอื่ ทําการคดั ลอกบล็อกทเ่ี ราคลิก ขวาและบล็อกทตี่ อพว ง ในที่นี้คือบล็อกของ No_1 และ บลอ็ กทต่ี อพวงคือบลอ็ กสุมตัวเลข ( สนี ํ้าเงนิ ) เมอื่ กด Duplicate เรียบรอยแลวจะปรากฏบลอ็ ก ของ Set No_1 Text to… อีกอัน ใหท ําการเปลี่ยน ช่ือจาก No_1 เปน No_2 โดยการกดตรงชือ่ No_1 จะมี Drop Down list ใหเลอื ก ใหคลิกตรง No_2 แลวนาํ บล็อกไปตอซอนใตบล็อก แรก ทาํ แบบเดียวกันเพ่ือสรา งบล็อกใหก บั No_3 เมือ่ ทาํ การสรางบล็อกครบถวน ทานจะไดบ ล็อกคําสั่งทมี่ ีลกั ษณะดงั ภาพดา นขวา ความหมายคือ เมอื่ กดปุม Start_Random ใหทําการสมุ ตวั เลข 0 ถงึ 9 ใหปรากฏบน Label ของ No_1 และทําเชนเดียวกนั น้ีกับ No_2 และ No_3

สรา งแอพพลิเคช่นั ดว ย THUNKABLE เบ้อื งตน 24 สดุ ทายมาถึงปมุ Close เพ่ือออกโปรแกรม ทาํ เหมือนกบั ปุม Start_Random โดยการลากบลอ็ ก When Close Click do.. มาวาง แลว ใหไ ปท่ี Build – In เลอื กเมนู Control จะปรากฏบล็อกของ Control ใหใ ชบลอ็ ก Close application มาตอ เมอื่ กดปุม Close จะทําการ ปด แอพพลเิ คช่นั และน่ีคือหนาตาท่ีเสร็จเรยี บรอยของแอพพลเิ คชัน่ ใบห วยเม่ือถกู เปด บนสมารท โฟน และภาพแสดงบล็อกคําสง่ั ทง้ั หมดของแอพพลเิ คชนั่ ครับ ในทีส่ ดุ Workshop 1 แอพพลิเคช่ันใบหวยของเรากส็ าํ เร็จแลว นะครับ คงไมยากทจ่ี ะเรียนรู ในระบบการสรา งและ พฒั นาแอพพลเิ คชัน่ โดย Thunkable ใน e-book ฉบับจรงิ จะสอนการ Export ไปใชในสมารทโฟนจริง และมี Workshop ใหไดส รางแอพพลิเคช่นั ถึง 5 แอพฯ อยาลืมติดตามกนั นะครับ

สรา งแอพพลิเคชน่ั ดว ย THUNKABLE เบอ้ื งตน 25