thunkable

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

แพลตฟอร์มด้วยควำมช่วยเหลือจำก ผู้ใช้ Google คือ Liz Looney, Sharon Perl, Ellen Spertus, Karen Parker, และ Debbie Wallach. App Inventor ได้ย้ำยฐำนกำรพัฒนำจำก Google มำสู่สถำบัน MIT ในปี 2010 โดย ณ Google เป็นผู้สนบั สนุน ทำให้ App Inventor ได้รับกำรพัฒนำอย่ำงน่ำตกใจโดยเจ้ำหน้ำท่ีของ MIT ในทีมงำนของ Andrew McKinney, Jeff Schiller, Josh Sheldon, Marisol Diaz, และนักเรียนใน เครือข่ำยของสถำบัน MIT ที่มีควำมสำมำรถ พวกเขำเหล่ำนี้เป็นผู้ร่วมก่อต้ัง Thunkable ซ่ึง ควำมสำคัญของ App Inventor หรือ Thunkable คือ กำรผลักดันข้อจำกัดของกำรเรียนรู้เก่ียวกับ มอื ถือสำหรับนักเรียนและนกั กำรศึกษำท่ัวโลก Thunkable มีหลักกำรทำงำนเหมอื นกับ MIT App Inventor โดยใช้หลกั กำรเขียนโปรแกรม แบบ Visual Programming Language ซึ่งเป็นแนวทำงกำรเขียนโปรแกรมม่ิงรุ่นใหม่ เน้นควำมง่ำย ต่อกำรเขียน และใช้หลักกำรกำรต่อแบบเลโก้ คือต่อเป็นบล็อค ๆ โดยยังรักษำหลักกำรกำรเขียน โปรแกรมมิ่งทกุ อยำ่ ง ซ่ึงเหมำะสำหรบั มอื ใหม่ทีส่ นใจทำงดำ้ นกำรเขยี นโปรแกรมอย่ำงยิง่ Thunkable มีกำรพัฒนำอยำ่ งตอ่ เนือ่ ง ซ่ึงพฒั นำมำจำก MIT App Inventor Version 2 ซึ่ง มีเคร่ืองมอื ตำ่ ง ๆ ให้ใช้ได้อย่ำงครบครันมำกขึ้น อำทิเช่น ผ้ใู ช้สำมำรถเพิ่ม font ได้หลำกหลำยย่งิ ขึ้น มสี ีใหเ้ ลอื กมำกย่ิงขนึ้ เหมำะสำหรับนักพัฒนำแอปพลิเคชันบนโทรศพั ทม์ ือถือแอนดรอยด์อย่ำงยง่ิ เตรยี มพรอ้ มกอ่ นเขำ้ ใชง้ ำน Thunkable 1. Computer หรือ Notebook 2. ระบบปฏบิ ัติกำร

3. บรำวเซอร์ 4. บัญชีของ Google หรอื เรียกง่ำยๆว่ำมี Gmail น่ันเอง : ซ่ึงสำคัญมำก เพรำะนอกจำกจะ ใช้ในกำรพัฒนำแอปพลิเคชันผ่ำน Thunkable แล้วยัง ใช้ในกำรอัพโหลดแอปพลิเคชันขึ้น Google Play Store ผ่ำนทำง Google Play Console อีกด้วย 5. อปุ กรณโ์ มบำยพร้อมตดิ ต้งั แอปพลิเคชัน Thunkable Live 6. กำรเช่ือมตอ่ อินเทอรเ์ น็ต : Thunkable พัฒนำโปรแกรมผ่ำนเว็บไซต์ จงึ จำเป็นอย่ำงยิง่ ท่ี ต้องมอี ินเทอรเ์ น็ต

กำรเขำ้ ใชง้ ำน Thunkable 1. เขำ้ สู่เว็บไซต์ http://thunkable.com คลิกเข้ำสู่ระบบ Sign up 2. เลือก Sign in with Google 3. ป้อน Gmail และรหัสผ่ำน เสร็จแล้วเลอื ก ถัดไป

4. เลือก Create New App เพ่อื เร่ิมสร้ำง 5. ใส่ช่ือ App แลว้ กด Create เพื่อเข้ำสู่หนำ้ ตำ่ งกำรทำงำน

6. หนำ้ ตำ่ งกำรทำงำน รู้จัก Function กำรทำงำนของ Thunkable 1. หน้ำต่ำงกำรทำงำนโดยรวม 1) Menu เป็นแหล่งรวบรวมคำส่งั ในกำรทำงำนเกี่ยวกับแอปพลิเคชนั ดังนี้ - ทดสอบแบบ Live Test - Share project ผำ่ นลิงก์ - Make copy สำเนำโปรเจค - ดำวน์โหลดไฟล์ติดตั้งแอพ (ทำง Thunkable แจ้งว่ำสำหรับ Android นั้น อย่ำ เพ่ิงดำวน์โหลด apk ไปติดต้ัง) เพื่อควำมปลอดภัยต้องอัพโหลดขึ้น Play store ก่อนเพ่ือให้เขำ ตรวจสอบแลว้ คอ่ ยดำวนโ์ หลดมำตดิ ต้ัง - Publish – กำร Publish แอพสู่ Store - Help – ควำมชว่ ยเหลอื - Community กำรแชร์ควำมรู้ เนอื้ หำต่ำงๆ สูช่ ุมชน เปน็ กำรแลกเปล่ียนขอ้ มูลกนั

2) Design & Blocks - Design ส่วนโปรแกรมที่เรำตอ้ งกำรให้มอี ยู่ในโปรแกรมมอื ถือ - Blocks ส่วนท่ีเขียนโค้ดเข้ำไปในส่วนโปรแกรมท่สี ร้ำงขึ้น เพ่อื ให้โปรแกรมทำงำน ตำมทตี่ ้องกำร 3) Components คือ เปน็ แหล่งรวบรวมส่วนโปรแกรมเอำไว้เป็นหมวดหมู่ เม่ือคลิกหมวดท่ี ตอ้ งกำร จะเห็นรำยกำรส่วนโปรแกรมทีเ่ รำสำมำรถใสเ่ ข้ำไปบนโปรแกรมมือถือ ท่ีกำลงั ออกแบบนี้ได้ 4) Viewer เป็นพ้ืนที่บนหน้ำจอมือถือ (Screen1) ทำให้เห็นภำพตอนออกแบบโปรแกรม เมอ่ื เรำลำก สว่ นโปรแกรมมำใส่ในพน้ื ทน่ี ้ี 5) Properties คือ คุณสมบัติต่ำง ๆ ของส่วนโปรแกรม เมื่อเรำคลิกเลือกสว่ นโปรแกรมใด ท่ี อยู่ใน Viewer หรือใน Components เรำจะเห็นรำยกำรคุณสมบัติของส่วนโปรแกรมน้ัน โดยแต่ละ ส่วนโปรแกรมจะมีคุณสมบัติท่ีอำจจะเหมือนกันหรือแตกต่ำงกันออกไปก็ได้ ซึ่งเรำสำมำรถแก้ไข เพิ่มเตมิ ข้อมูลลงไปในคุณสมบัตติ ่ำง ๆ ท่ีมีได้ 2. ชดุ เครือ่ งมือใน Components 2.1 User Interface

Button = ปมุ่ สำหรบั กดหรือสมั ผัส Label = ขอ้ ควำมในแอปพลิเคชัน Textinput = ปอ้ นข้อควำม List Viewer = สำหรบั รำยกำรใหเ้ ลอื ก Web Viewer = แสดงหน้ำเวบ็ Switch = ปุ่มทส่ี ำมำรถทำได้ 2 สถำนะ สำหรบั เปิดปดิ Slider = สไลด์ Alert = แจ้งเตอื น เป็นปอปอัพ 2.2 Layout กำรวำงตำแหน่งของหน้ำจอ Row = วำงแนวนอน Column = วำงแนวตงั้ 2.3 Voice Sound = ใส่เสียง Text to Speech = แปลงขอ้ ควำมเป็นเสยี ง Speech Recognizer = เสยี งพดู Translator = แปลภำษำ

2.4 Image Image = ใส่รปู ภำพ 1 รปู Photo Library = อลั บั้มรปู ภำพ หลำยรูป Camera = ถ่ำยภำพ Image Recognizer = เอำรปู ใสเ่ ข้ำไปแลว้ รปู นค้ี ืออะไร Animation = ภำพเคล่อื นไหว 2.5 Data Local Storage = ฐำนข้อมูลที่ thinkable มีเอำไวใ้ หใ้ ช้ Realtime DB = ฐำนข้อมูลจำกภำยนอกที่เรำสำมำรถตดิ ตอ่ กับ thinkable รวมถงึ Spreadsheet, Web API และ Media DB 2.6 Location Map = แผนท่ี Location Sensor = พิกดั ตำแหน่ง

2.7 Sensors Timer = นับเวลำ 2.8 Social Share = แชรไ์ ปยังสือ่ ตำ่ งๆ 2.9 Authentication Sign in = กำร login 2.10 Monetization Payment = กำรชำระเงินผำ่ นแอพ

3. ชดุ คำสั่งในส่วนของ Blocks 3.1 ภำพรวมของสว่ นหน้ำตำ่ งกำรทำงำนเก่ยี วกบั Code ของแอปพลิเคชนั 1) Built-in คอื สว่ นของ Block Code ต่ำง ๆ ทีใ่ ช้ในกำรสงั่ กำรแอปพลเิ คชัน 2) สว่ นทีร่ วบรวม Components ต่ำง ๆ ท่อี ยูใ่ นแอปพลเิ คชนั ของเรำ 3) กลบั มำตำแหน่งตรงกลำงหนำ้ จอ 4) กำรซูมเขำ้ ซูมออก 5) สว่ นสำหรับลบ Block Code ที่เรำไม่ได้ใช้งำนออกไปโดยกำรลำกมำใส่ 3.2 Control ส่วนท่ีรวบรวมคำส่ังต่ำง ๆ ท่ีเก่ียวกับกำรทำงำนของแอปพลิเคชัน เช่น กำรวำงเง่ือนไข สั่ง กำรให้ไปหน้ำถดั ไป กำรส่ังกำรให้ปิดแอปพลิเคชัน เป็นตน้

3.3 Logic สว่ นท่รี วบรวมคำส่งั ตำ่ ง ๆ ท่เี กยี่ วกบั ตรรกศำสตร์ จรงิ เทจ็ กำรเปรยี บเทยี บ ตำ่ งๆ 3.4 Math ส่วนท่ีรวบรวมคำสั่งต่ำง ๆ ท่ีเก่ียวกับคณิตศำสตร์ จำนวน ตัวเลข กำรคำนวณ บวก ลบ คูณ เปน็ ต้น

3.5 Text สว่ นทีร่ วบรวมคำสง่ั ต่ำง ๆ ที่เกี่ยวกบั กำรทำงำนกบั ขอ้ ควำม 3.6 List ส่วนท่ีรวบรวมคำส่ังต่ำง ๆ ที่เกี่ยวกับกำรทำงำนกับลิสต์ กำรดึงข้อมลู จำกไฟล์ต่ำง ๆ มำใน รูปของลสิ ต์ 3.7 Color สว่ นที่รวบรวมคำส่ังต่ำง ๆ ท่เี กีย่ วกับสี กำรสั่งกำรใหเ้ ปลย่ี นสี Components ต่ำง ๆ เช่น สี พนื้ หลัง สปี ุม่ สขี อ้ ควำม เป็นต้น

3.8 Objects กำรนำเข้ำขอ้ มูลที่เปน็ แบบ json มำใช้งำน 3.9 Variables ส่วนท่ีรวบรวมคำสง่ั ต่ำง ๆ ทเ่ี กยี่ วกบั ตัวแปร กำรประกำศตวั แปร กำรรบั คำ่ ตวั แปร 3.10 Functions ส่วนทีร่ วบรวมคำส่งั ตำ่ ง ๆ ที่เกยี่ วกับส่วนกำรทำงำนย่อย ๆ ของ Code

กำรทดสอบ Application ดว้ ย Thunkable Live 1. คลิกป่มุ Live Test 2. Login แอพ Thunkable Live บนสมำรท์ โฟน



บทท่ี 2 Photo Scan แอปพลิเคชัน Photo Scan เป็นแอปพลิเคชันถ่ายรูปเพื่อระบุสิ่งที่อยู่ในรูปออกมาเป็นรูปประโยคหรือคา เป็นภาษาองั กฤษ เป็นตัวชว่ ยในการใชภ้ าษาทด่ี ี 1. สว่ นของ Design จะเปน็ สว่ นของการออกแบบหนา้ ต่าง 2. ส่วนของ BlocksCode เปน็ ส่วนของการทางานของโปรแกรม 1.การทางานเบอื้ งตน้  Screen1 จะเปน็ หน้าแรกของการแสดงผลเมอ่ื กดปุ่มทีเ่ ป็นรปู กล้อง จะเปลย่ี นไปทห่ี น้า Screen2  Screen2 จะเป็นการเข้าสกู่ ารถา่ ยภาพ  Screen3 เปน็ การยนื ยนั วา่ จะใช้ภาพนี้  Screen4 จะเปน็ การอธบิ ายว่ารปู ทีถ่ ่ายคอื อะไรเป็นภาษาองั กฤษ 2.ออกแบบหนา้ จอ การออกแบบ  กดปมุ่ Create New App

 ต้ังชือ่ App เปน็ Photo Scan แลว้ กด Create  คลิกท่ีหน้าจอ Screen 1 หน้าต่างตั้งค่าต่างๆจะแสดงทางด้านขวามือให้คลิก BackgroundPicture แลว้ เลือก GB  ลาก Label ไปใสใ่ น Screen 1

 คลกิ ที่ Labelหนา้ ต่างตง้ั ค่าตา่ งๆจะแสดงทางด้านขวามือ ลบLabel1 ออกแล้วใส่เปน็ คาวา่ ภาพน้ี คอื เปล่ียน FontSize เป็น 16 และ Color เปน็ สเี หลอื ง  ลาก Image ไปใสไ่ ว้ในหนา้ Screen 1 ดา้ นลา่ งของ Label  คลกิ ที่ Image หน้าตา่ งต้ังค่าตา่ งๆจะแสดงทางด้านขวามือเปล่ียน Height เป็น Absolute Size ด้านล่างใสค่ วามสูง 320 และ Width Absolute Size ด้านลา่ งใสค่ วามยาว 320

 นา ลากปมุ่ Button ไปใส่ไว้ในหนา้ Screen 1 ด้านล่างของ Image ตรง Text ลบ Button ออก  คลกิ ที่ Image หนา้ ตา่ งตั้งคา่ ต่างๆจะแสดงทางด้านขวามือใหค้ ลิก Background Picture แล้วเลอื ก cameraปรบั Height เป็น Absolute Size ใสเ่ ปน็ 150และ Width ก็เปล่ยี นเช่นกันตรง Style ให้ เลอื ก dashed ใสค่ า่ comerRadius 200  ลาก Camera และ Image Recognizer ไปใส่ไว้ในหน้า Screen 1

3.การทางานของ BloksCode  3.1 คลิกท่ี Button1 ลาก Block When Button1 Chlick มาวาง 1  3.2 คลิกท่ี Camera1 ลาก Block in Camera1 call TakePhoto ออกมา นาไปวางไวใ้ น Block When 3.2.1 คลิก Image1 ลาก Block from Image1 set Picture to… นาไปวางไว้ใน then do 3.2.2 ลาก Block Photo ไปตอ่ ไว้ดา้ นหลงั Block from

 3.3 คลิกท่ี Image_Recognizer1ลาก Block in Image_Recognizer1 call Upload นาไปวางไวใ้ น Block in ดา้ นลา่ ง Block from 3.3.1 ลาก Block Photo ไปต่อไวด้ ้านหลงั Block image  4. คลิกที่ Label1 ลาก Block from Label1 set Text to… นาไปว างไว้ใน Block in Image_Recognizer1 call Upload ในสว่ นของ then do 4.1 ลาก Block description ไปต่อไวด้ า้ นหลัง Block description

การทางานเบื้องตน้ บทท่ี 3 Translator Screen 1 Translator START ภาพจากหน้าจอ Tablet - Screen1 จะเปน็ หนา้ แรกของการแสดงผลเม่อื กดป่มุ START จะเปลี่ยนไปท่หี น้า Screen2 Screen 2 TSrcarnslator Screen2 een 2 ENGLISH FRENCH KOREAN ภาพจากหน้าจอ Tablet

- Screen2 จะเปน็ หน้าแสดงกรอบของการปอ้ นข้อความ ปุม่ แปลภาษาและกรอบแสดงผลจากการแปล สว่ นหน้าจอเร่ิมต้น Translator (Screen1) 1. เลือก Column แลว้ นามาวางในช่อง Design 2. ตง้ั ช่ือ Column เปน็ Column_Frame1 3. เปลย่ี นภาพพื้นหลงั (BackgroundPicture) โดยกดที่ช่องและกด Upload files

4. ไปที่ Desktop -> คลกิ Folder ช่ือ image -> เลือกภาพ bg_screen1 จากนั้นกด Open 5. กดทช่ี ่อง BackgroundPicture จากนั้นเลือกภาพท่ีเราทาการ Upload 6. เลอื ก Column แลว้ นามาวางในช่อง Design 7. ต้งั ชอื่ Column เปน็ Column_top 8. กาหนด Height มีขนาดเป็น 70% 9. กาหนด Width มขี นาดเป็น Fill container

10. เลือก Column แล้วนามาวางในชอ่ ง Design 11. ตั้งช่ือ Column เปน็ Column_below 12. กาหนด Height มีขนาดเป็น 30% 13. กาหนด Width มขี นาดเป็น Fill container 14. เลือก Button แลว้ นามาวางในชอ่ ง Design 15. ต้งั ช่อื Button เปน็ Button_Start 16. กาหนด TextColor เป็นสีนา้ เงนิ และ กาหนด FontSize = 20

17. กาหนด Height มขี นาดเป็น 30% 18. กาหนด Width มขี นาดเปน็ 30% 19. กาหนด style = dashed และ cornerRadius = 200

สว่ นหนา้ จอของการแปลภาษา (Screen2) สว่ นหัว Translator

1. เลอื ก Label แล้วนามาวางในช่อง Design 2. ตัง้ ชอ่ื Label เป็น Label_AppName 3. เปลี่ยนชอื่ Text เปน็ Translator 4. กาหนด FontSize ใหม้ ีขนาดเป็น 30 5. เปลยี่ นสตี ัวอกั ษร(Color) 6. เปล่ียนสพี น้ื หลัง(BackgroundColor) 7. กาหนด Height มขี นาดเปน็ 10% 8. กาหนด Width มีขนาดเป็น Fill container ไปท่ี Advanced เลอื ก Text Style 9. กาหนด FontWeight เปน็ bold

10. กาหนด TextAlign เปน็ center 11. กาหนด TextAlignVertical เป็น center

สว่ นปอ้ นขอ้ ความ 1. เลอื ก Column แล้วนามาวางในช่อง Design 2. ต้ังชอื่ Column เปน็ Column_Frame 3. เปลย่ี นสีพน้ื หลัง(BackgroundColor)

4. เลอื ก Row แลว้ นามาวางในช่อง Design 5. ตัง้ ช่ือ Row เป็น Row_InputText 6. เลอื ก TextInput แล้วนามาวางในช่อง Design 7. ตัง้ ชอ่ื TextInput เป็น Input_Text 8. กาหนด Hint ใส่คาใบว้ ่า “Input Text” 9. กาหนด Height มีขนาดเปน็ 50% 10. กาหนด Width มีขนาดเปน็ 60%

11. กาหนด FontSize ให้มขี นาด 20 12. กาหนด TextAlign เปน็ center 13. กาหนด TextAlignVertical เปน็ center ไปท่ี Advanced เลอื ก Styling 14. เปล่ยี นสพี น้ื หลงั (BackgroundColor)

สว่ นปุม่ กดแปลภาษา 1. เลือก Row แล้วนามาวางในช่อง Design 2. ต้งั ชอื่ Row เป็น Row_btnEnglish

3. เลอื ก Button แล้วนามาวางในช่อง Design 4. เปล่ยี นชื่อ Button เป็น Button_English 5. ตั้งช่อื Text เปน็ ENGLISH 6. เปลีย่ นสี TextColor 7. เปลีย่ นสีพน้ื หลงั (BackgroundColor) 8. กาหนด FontSize ใหม้ ีขนาดเปน็ 20 9. กาหนด Height เป็น 50% 10. กาหนด Width เปน็ 35%

สว่ นปุม่ กดแปลภาษา 1. เลือก Row แล้วนามาวางในชอ่ ง Design 2. ต้งั ชอื่ Row เป็น Row_btnFrench

3. เลือก Button แล้วนามาวางในชอ่ ง Design 4. เปล่ียนช่อื Button เป็น Button_French 5. ต้งั ช่อื Text เปน็ FRENCH 6. เปลย่ี นสี TextColor 7. เปลี่ยนสีพนื้ หลงั (BackgroundColor) 8. กาหนด FontSize ให้มีขนาดเป็น 20 9. กาหนด Height เป็น 50% 10. กาหนด Width เปน็ 35%

สว่ นปุม่ กดแปลภาษา 1. เลือก Row แล้วนามาวางในชอ่ ง Design 2. ต้งั ชอื่ Row เป็น Row_btnKorean

3. เลือก Button แล้วนามาวางในชอ่ ง Design 4. เปล่ียนช่อื Button เปน็ Button_Korean 5. ต้งั ช่อื Text เปน็ KOREAN 6. เปลย่ี นสี TextColor 7. เปลี่ยนสีพนื้ หลงั (BackgroundColor) 8. กาหนด FontSize ให้มีขนาดเป็น 20 9. กาหนด Height เป็น 50% 10. กาหนด Width เปน็ 35%

ส่วนแสดงผลจากการแปลภาษา 1. เลือก Row แล้วนามาวางในช่อง Design 2. ต้งั ช่ือ Row เปน็ Row_ShowText

3. เลอื ก Label แลว้ นามาวางในชอ่ ง Design 4. เปลี่ยนชื่อ Label เป็น Label_ShowText 5. เอาช่ือ Text ออก 6. กาหนด FontSize ใหม้ ีขนาดเปน็ 20 7. เปลย่ี นสตี ัวอกั ษร(Color) 8. เปลยี่ นสีพน้ื หลงั (BackgroundColor) 9. กาหนด Height เปน็ 50% 10. กาหนด Width เป็น 60%

11. กาหนด TextAlign เป็น center 12. กาหนด TextAlignVertical เป็น center 13. เลอื ก Translator แลว้ นามาวางในช่อง Design และต้ังชื่อ Translator เปน็ Translator_English 14. กาหนด SourceLanguage = THAI และ TargetLanguage = ENGLISH

15. เลอื ก Text-To-Speech แลว้ นามาวางในช่อง Design 16. ตั้งชือ่ Text-To-Speech = Text-To-Speech_English 17. เลอื ก Translator แลว้ นามาวางในช่อง Design และตั้งชอ่ื Translator เปน็ Translator_French 18. กาหนด SourceLanguage = THAI และ TargetLanguage = FRENCH

19. เลือก Text-To-Speech แล้วนามาวางในช่อง Design 20. ตัง้ ชอ่ื Text-To-Speech = Text-To-Speech_French 21. เปลี่ยน DefaultLanguage เปน็ FRENCH 22. เลอื ก Translator แล้วนามาวางในช่อง Design และตั้งชอ่ื Translator เปน็ Translator_Korean 23. กาหนด SourceLanguage = THAI และ TargetLanguage = KOREAN

24. เลอื ก Text-To-Speech แล้วนามาวางในช่อง Design 25. ตัง้ ชอ่ื Text-To-Speech = Text-To-Speech_Korean 26. เปลีย่ น DefaultLanguage เป็น KOREAN

Block Code ของ Screen1 Block 1. ไปท่ี Button_Start เลอื ก แลว้ นามาวางในชอ่ ง Block 2. ไปท่ี Control เลอื ก มาวางตอ่

Blocks code ของปมุ่ ENGLISH 1. คลิกที่ Blocks 1 2. คลกิ Button_English ลากวางในสว่ นของบลอ็ ก 3. เลอื ก

3 ลากวางในส่วนของบล็อก ลากวางในส่วนของบล็อก 2 4. คลิก Translator_English 5. เลอื ก 5 4 Column _SFcrraemene2 6. คลิก Translator_English 7. เลอื ก