คู่มือ Thunkable
203 likes121,840 views
คู่มือ Thunkable สร้างแอพพลิเคชั่นโดยไม่ต้องเขียนโปรแกรม เรียนรู้จักเครื่องมือในการส้รางแอพพลิเคชั่นแอนดรอยด์ เหมาะสำหรับผู้ใช้ทั่วไป สามารถฝึกฝนได้ด้วยตัวเอง ดาวน์โหลดไฟล์ได้ที่ https://helloteacher.biz/?p=281 ดูไม่ชัดหรือสงสัยในส่วนไหน สามารถทักแชท Facebook มาสอบถามได้ครับ ยินดีแบ่งปันไฟล์ครับ
More Related Content
![คุณลักษณะนักบริหารมืออาชีพ [Professional manager]](https://cdn.slidesharecdn.com/ss_thumbnails/random-220108031241-thumbnail.jpg?width=560&fit=bounds)
คู่มือ Thunkable
- 1. น
- 3. 3
- 4. 4
- 5. Chapter 1 รู้จักและเข้าใช้งาน Thunkable แนวโน้มการใช้งาน Mobile Device อย่าง Smart Phone ได้เพิ่มขึ้นอย่างก้าวกระโดดในช่วงไม่กี่ปีที่ ผ่านมาซึ่งเป็นผลมาจากการพัฒนา Mobile Application และเทคโนโลยีของตัวเครื่องโทรศัพท์จากค่ายผู้ผลิต โทรศัพท์โดยเฉพาะการพัฒนาต่อยอด Application บนอุปกรณ์เคลื่อนที่ของบริษัทต่างๆ ที่แข่งขันกันเพื่อชิง ความเป็นหนึ่งในตลาดด้าน Mobile Application และด้วย Application ที่เพิ่มขึ้นและมีประสิทธิภาพมากขึ้น ทาให้ผู้ใช้ Smart Phone มีแนวโน้มใช้โปรแกรมต่างๆ เพื่อตอบสนองกิจกรรมในชีวิตประจาวัน ได้แก่ การเล่น อินเตอร์เน็ต การดูหนัง ฟังเพลงหรือแม้แต่การเล่นเกมซึ่งมีทั้งออนไลน์ และออฟไลน์ ด้วยอัตราการขยายตัว ด้านการใช้งานอุปกรณ์เคลื่อนที่ทาให้บริษัทชั้นนาด้านโทรศัพท์มือถือหลายแห่งหันมาให้ความสาคัญ กับการ พัฒนาโปรแกรมบนโทรศัพท์มือถือ โดยสังเกตได้ว่ามีความเติบโดอย่างมากจากจานวนโปรแกรมที่เขียนขึ้นและ อัตราการเพิ่มขึ้นจากการดาวน์โหลดโปรแกรมอย่างเห็นได้ชัด 1. สำรวจปัญหำ การสารวจปัญหาจะเป็นสิ่งที่ทาให้เราเกิดไอเดียในการสร้างแอพพลิเคชั่น โดยปัญหาอาจจะ เป็นปัญหาใกล้ตัว ปัญหาที่พบในสังคม เราต้องพิจารณาว่าแอพพลิเคชั่นที่เราสร้างขึ้นต้องจะช่วยในการ แก้ปัญหาของคนได้อย่างไร หรือเกิดประโยชน์อะไรต่อสังคม 2. สำรวจตลำด พิจารณาตลาดหรือความต้องการของผู้ใช้ว่ามีผู้ใช้แอพพลิเคชั่นของเรามีจานวนมากน้อย เพียงใด ใครบ้างที่จะได้ใช้แอพพลิเคชั่นที่เราสร้างขึ้น เพราะถ้าเราสร้างแอพพลิเคชั่นออกมาแล้วแต่ไม่ตรงกับ ความต้องการของตลาดก็ไม่มีประโยชน์อะไรในการสร้าง 3. สำรวจแอพพลิเคชั่นอื่นๆ รู้เขารู้เรา รบร้อยครั้งชนะร้อยครั้ง การสารวจหรือการศึกษาแอพพลิเคชั่นของ คนอื่นจะช่วยให้เราสามารถพิจารณาสิ่งต่างๆ ในการสร้างแอพพลิเคชั่น อาทิเช่น ศึกษาระบบการทางานของ คนอื่น หน้าต่างแอพพลิเคชั่นเป็นอย่างไร ทาไมแอพพลิเคชั่นนี้ถึงมีผู้ใช้มากมาย สิ่งเหล่านี้จะช่วยให้เราเห็น ข้อดีข้อเสียก่อนการลงมือสร้างแอพพลิเคชั่นของเรา ซึ่งขอย้าไว้เลยว่าเป็นการศึกษาเพื่อปรับให้เหมาะสมกับ แอพพลิเคชั่นของเรา แต่ไม่ใช่การลอกเลียนแบบ หลัก 3 ส ก่อนลงมือสร้าง Application
- 6. จากข้อจากัดในการเรียนรู้ภาษาคอมพิวเตอร์ต่างๆ เพื่อพัฒนาแอพพลิเคชั่นมีความยุ่งยากสาหรับผู้ที่ เริ่มต้นในการสร้างแอพพลิเคชั่น หรือผู้ที่ไม่มีพื้นฐานในการเขียนโปรแกรม ทาให้ 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
- 7. Thunkable มีหลักการทางานเหมือนกับ MIT App Inventor โดยใช้หลักการเขียนโปรแกรมแบบ Visual Programming Language ซึ่งเป็นแนวทางการเขียนโปรแกรมมิ่งรุ่นใหม่ เน้นความง่าย ต่อการเขียน และใช้หลักการการต่อแบบเลโก้ คือต่อเป็นบล็อค ๆ โดยยังรักษาหลักการการเขียนโปรแกรมมิ่งทุกอย่าง ซึ่ง เหมาะสาหรับมือใหม่ที่สนใจทางด้านการเขียนโปรแกรมอย่างยิ่ง Thunkable มีการพัฒนาอย่างต่อเนื่องซึ่งพัฒนามาจาการ MIT App Inventor Version 2 ซึ่งมี เครื่องมือต่างให้ใช้ได้อย่างครบครันมากขึ้น อาทิเช่น ผู้ใช้สามารถเพิ่ม font ได้หลากหลายยิ่งขึ้น มีสีให้เลือก มากยิ่งขึ้น เหมาะสาหรับนักพัฒนาแอพพลิเคชั่นบนโทรศัพท์มือถือแอนดรอยด์อย่างยิ่ง 1. เตรียม Computer หรือ Notebook เตรียมพร้อมก่อนเข้าใช้งาน Thunkable
- 8. 2. เตรียมระบบปฏิบัติกำร (Windows) Windows XP, Vista, 7, 8 ,10 Mac OS Ubuntu 3. เตรียมบรำวเซอร์ Chrome 4.0 หรือใหม่กว่า Mozilla Firefox 3.6 หรือใหม่กว่า 4. อุปกรณ์โมบำยพร้อมติดตั้งแอพ Thunkable โดยสามารถค้นหาแอพ Thunkable ได้จาก Play Stores และติดตั้งได้ทันที 5. เชื่อมต่ออินเตอร์เน็ต
- 9. 6. มี Google Account หรือ Gmail 1. เข้ำสู่เว็บไซต์ http://thunkable.com คลิกเข้ำสู่ระบบ Sign in 2. เลือก Sign in with Google การเข้าใช้งาน Thunkable
- 10. 3. ป้อน Gmail และรหัสผ่ำน เสร็จแล้วเลือก Sign in 4. กำรขออนุญำตเข้ำถึงข้อมูล อ่ำนข้อตกลง แล้วให้เลือกอนุญำต 5. เข้ำสู่หน้ำต่ำง Thunkable กด OK เลือก Create New App เพื่อเริ่มสร้ำง 1 2
- 11. 6. ใส่ชื่อ App แล้วกด OK เพื่อเข้ำสู่หน้ำต่ำงกำรทำงำน 7. หน้ำต่ำงกำรทำงำน
- 12. Chapter 2 รู้จัก Function การใช้งาน หลังจากได้ทาความรู้จักกับ Thunkable เว็บไซต์ที่ช่วยในการสร้างแอพพลิเคชั่นไปแล้ว ในบทนี้เราจะ ไปทาความรู้จักกับคอมโพเนนซ์ต่างๆ ของ Thunkble เพื่อที่จะนาทรัพยากร และเครื่องมือต่างๆ ไปใช้ในการ พัฒนาแอพพลิเคชั่นของเราต่อไป 1. หน้ำต่ำงกำรทำงำนโดยรวม 1. Menu เป็นแหล่งรวบรวมคาสั่งในการทางานเกี่ยวกับแอพ เช่น การสร้างแอพใหม่ เรียกใช้แอพที่ เคยสร้างไว้ การเชื่อมต่อกับมือถือเพื่อจาลองการทางาน การ Export แอพเพื่อนาไปใช้จริง เป็นต้น 2. Palette เป็นแหล่งรวบรวมส่วนโปรแกรม (Component) เอาไว้เป็นหมวดหมู่ (User Interface, Leyout,Media, Animation, etc.) คลิกหมวดที่ต้องการ จะเห็นรายการส่วนโปรแกรม ที่เราสามารถใส่เข้าไป บนโปรแกรมมือถือ ที่กาลังออกแบบนี้ได้ เช่น ในหมวด User Interface จะเห็นส่วนโปรแกรมปุ่ม (Button) ข้อความ (Label) รูปภาพ (Image) เป็นต้น 3. Viewer เป็นพื้นที่บนหน้าจอมือถือ (Screen1) ทาให้เห็นภาพตอนออกแบบโปรแกรม เมื่อเราลาก ส่วนโปรแกรมมาใส่ในพื้นที่นี้ รู้จัก Function การทางานของ Thunkable 1 2 3 4 5
- 13. 4. Components คือส่วนโปรแกรมที่ถูกใส่เข้าไปใน Viewer เป็นส่วนโปรแกรมที่เราต้องการให้มีอยู่ ในโปรแกรมมือถือ และสามารถเขียนโค้ดเข้าไปในส่วนโปรแกรมเหล่านี้ได้ เพื่อให้โปรแกรมทางานตามที่ ต้องการ ด้านล่างติดกันเป็นส่วนของ Media เราสามารถเพิ่มไฟล์สื่อชนิดต่างๆ เช่น ไฟล์รูปภาพ ไฟล์เสียง แบบอักษร (Font) เข้าไปในโปรเจกเพื่อนาไปใช้ในโปรแกรมได้ 5. Properties คือคุณสมบัติต่างๆ ของส่วนโปรแกรม เมื่อเราคลิกเลือกส่วนโปรแกรมใด ที่อยู่ใน Viewer หรือใน Components เราจะเห็นรายการคุณสมบัติของส่วนโปรแกรมนั้น โดยแต่ละส่วนโปรแกรมจะ มีคุณสมบัติ ที่อาจจะเหมือนกันหรือแตกต่างกันออกไปก็ได้ ซึ่งเราสามารถแก้ไข เพิ่มเติม ข้อมูลลงไปใน คุณสมบัติต่างๆ ที่มีได้ 2. ชุดเครื่องมือใน Palette 2.1 User Interface Button = ปุ่มสาหรับกดหรือสัมผัส CheckBox = ทาเครื่องหมายถูกเลือกเพื่อ ข้อมูล เช่น การเลือกคานาหน้า Data Picker = ปฏิทิน สาหรับการเอกข้อมูล วันเดือนปี Image = เลือกรูปภาพ Label = ข้อความในแอพพลิเคชั่น List Picker = สาหรับรายการให้เลือก List View = สาหรับรายการให้เลือก Notifier = การแจ้งเตือน Password TextBox = ป้อนรหัสผ่าน Slider = สไลด์ Spinner = สาหรับรายการให้เลือก Text Box = กล่องสาหรับป้อนข้อความ Time Picker = เลือกเวลา Web Viewer = แสดงหน้าเว็บ
- 14. 2.2 Layout Horizontal Arrangement = พื้นที่ในการจัด วาง Components ในแนวนอน Horizontal Scroll Arrangement = พื้นที่ใน การจัดวาง Components ในแนวนอน โดยมี Scroll เลื่อนไปด้านข้าง Table Arrangement = พื้นที่ในการจัดวาง Components แบบตาราง Vertical Arrangement = พื้นที่ในการจัด วาง Components ในแนวตั้ง Vertical Scroll Arrangement = พื้นที่ใน การจัดวาง Components ในตั้งโดยมี Scroll เลื่อนลง 2.3 Media Camcorder = กล้องบันทึกวีดีโอ Camera = ถ่ายภาพ Image Picker = เลือกภาพ Player = เครื่องเล่นเพลง Sound = ใส่เสียง Sound Recorder = ตัวบันทึกเสียง Speech Recognizer = เสียงพูด Text-to-Speech = แปลงข้อความเป็นเสียง Video Player = เครื่องเล่นวีดีโอ Yandex Translate = แปลภาษา 2.4 Drawing & Animation Ball = บอล Canvas = พื้นที่ว่างสาหรับวาด Image Sprite = ตัวละครเคลื่อนไหว
- 15. 2.5 Sensors Accelerometer = วัดความเร็ว Barcode Scanner = สแกนบาร์โค้ด Clock = ตัวตั้งเวลา Gyroscope = จับการหมุนของมือถือ Location Sensor = พิกัดตาแหน่ง NFC Sensor = เชื่อมต่อ NFC Orientation Sensor = ตรวจการตั้งของมือถือ Pedometer = นับระยะก้าวเดิน Proximity Sensor = เซนเซอร์ตรวจจับ 2.6 Social Contract Picker = เลือกรายชื่อผู้ติดต่อ Email Picker = เลือกอีเมลล์ผู้ติดต่อ Phone Call = การโทร Phone Number Picker = เลือกหมายเลข Sharing = แชร์ไปยังสื่อต่างๆ Texting = โชว์ข้อความ Twitter = แชร์ไปยังทวิตเตอร์ 2.7 Store File = การจัดการไฟล์ข้อมูลในเครื่อง Tiny DB = การจัดการ Data Base
- 16. 2.8 Connectivity Bluetooth Client = แม่ข่ายบลูทูธ Bluetooth Client = ลูกข่ายบลูทูธ Web = การเชื่อมต่อกับเว็บไซต์ 3. ชุดคำสั่งในส่วนของ Block 3.1 ภำพรวมของส่วนหน้ำต่ำงกำรทำงำนเกี่ยวกับ Code ของแอพพลิเคชั่น 1) Built-in คือ ส่วนของ Block Code ต่างๆ ที่ใช้ในการสั่งการแอพพลิเคชั่น 2) ส่วนของ Screen ที่รวบรวม Components ต่างๆ ที่อยู่ในแอพพลิเคชั่นของเรา 3) Bag ส่วนที่เราสามารถลาก Block Code มาใส่เพื่อเก็บ Code ไว้ใช้ใน Screen ใหม่ได้ 4) ส่วนสาหรับลบ Block Code ที่เราไม่ได้ใช้งานออกไปโดยการลากมาใส่ 1 2 3 4
- 17. 3.2 Control ส่วนที่รวบรวมคาสั่งต่างๆ ที่เกี่ยวกับการทางานของแอพพลิเคชั่น เช่น การวางเงื่อนไข สั่ง การให้ไปหน้าถัดไป การสั่งการให้ปิดแอพพลิเคชั่น เป็นต้น 3.3 Logic ส่วนที่รวบรวมคาสั่งต่างๆ ที่เกี่ยวกับตรรกศาสตร์ จริงเท็จ การเปรียบเทียบ ต่างๆ
- 18. 3.4 Math ส่วนที่รวบรวมคาสั่งต่างๆ ที่เกี่ยวกับคณิตศาสตร์ จานวน ตัวเลข การคานวณ บวก ลบ คูณ เป็นต้น 3.5 Text ส่วนที่รวบรวมคาสั่งต่างๆ ที่เกี่ยวกับการทางานกับข้อความ
- 19. 3.6 List ส่วนที่รวบรวมคาสั่งต่างๆ ที่เกี่ยวกับการทางานกับลิสต์ การดึงข้อมูลจากไฟล์ต่างๆ มาในรูป ของลิสต์ 3.7 Color ส่วนที่รวบรวมคาสั่งต่างๆ ที่เกี่ยวกับสี การสั่งการให้เปลี่ยนสี Components ต่างๆ เช่น สี พื้นหลัง สีปุ่ม สีข้อความ เป็นต้น
- 20. 3.8 Variables ส่วนที่รวบรวมคาสั่งต่างๆ ที่เกี่ยวกับตัวแปร การประกาศตัวแปร การรับค่าตัวแปร 3.9 Procedures ส่วนที่รวบรวมคาสั่งต่างๆ ที่เกี่ยวกับส่วนการทางานย่อยๆ ของ Code ในส่วนของการใช้งานอื่นๆ จะเป็นพื้นฐานที่สามารถเรียนรู้และเข้าใจได้ง่าย อาทิเช่น ส่วนของ Properties ส่วนนี้จะแตกต่างกันออกไปตาม Components ที่เลือกแต่การปรับแต่งในส่วนนี้จะไม่ซับซ้อนมาก นัก เช่น การเปลี่ยนสี ปรับขนาดวัตถุ ขนาดอักษร แบบอักษร ใส่รูปภาพ เป็นต้น และใน Palette บางส่วนที่ ไม่ได้กล่าวถึง เพราะเป็นส่วนที่เจาะลึกลงไป ในส่วนที่กล่าวมาโดยเบื้องต้นนี้ จะเป็นพื้นฐาน ที่ผู้อ่านจะสามารถนาไปพัฒนาแอพพลิเคชั่นได้ในบทต่อไป
- 21. Chapter 3 ทดลองสร้างแอพพลิเคชั่น หลังจากได้ทาความรู้จักกับเครื่องมือต่างๆ ของ Thunkable ในบทนี้เราจะมาทดสอบการสร้าง แอพพลิเคชั่นอย่างง่าย เพื่อทดลองการใช้งานเครื่องมือต่างๆ ของ Thunkable หลังจากที่เราเข้าสู่หน้าจอการทางานของ Thunkable ขั้นตอนที่ 1 ให้ไปที่ Properties เพื่อตั้งชื่อ Title ของ Screen1 ให้เป็น Hello World ขั้นตอนที่ 2 ตั้งค่า Sizing ให้เป็น Responsive เพื่อให้แอพสามารถปรับขนาดหน้าจอให้เหมาะสมกับ ทุกอุปกรณ์ ขั้นตอนที่ 3 ตั้งค่า Screen Oreientation ให้เป็น Portrait เพื่อแสดงผลในแนวตั้ง หรือผู้ใช้สามารถ เลือกเป็นแนวนอน หรือใช้เซนเซอร์ในการวัดการทางานได้ หลังจากได้ตั้งค่าในส่วนนี้ จะแสดงผลให้เห็นในหน้าจอ Viewer โดยจะโชว์คาว่า Hello World และ ผู้ใช้สามารถปรับค่าอื่นๆ ในหน้าจอนี้ได้เช่น การใส่สีพื้นหลัง (Background Color) การใส่ภาพพื้นหลัง (Background Image) เป็นต้น สร้างแอพ Hello World 1 2 3
- 22. ขั้นตอนที่ 4 ให้ลาก Lebel ใน Palette User Interface มาใส่ในหน้าจอ Viewer ขั้นตอนที่ 5 เปลี่ยนข้อความใน Lebel1 โดยเลือก Lebel1 ใน Components แล้วมาที่ Properties ในส่วนของ Text ให้ปรับเป็น “สวัสดีชาวโลก” ขั้นตอนที่ 6 เปลี่ยนขนาดข้อความใน Lebel1 โดยเลือก Lebel1 ใน Components แล้วมาที่ Properties ในส่วนของ Font Size ให้ปรับเป็น 20 ในส่วนนี้แอพพลิเคชั่นจะแสดงข้อความที่หน้าจอว่า “สวัสดีชาวโลก” ซึ่งเราสามารถปรับแต่งในส่วน อื่นๆ ได้เช่น การปรับแบบอักษร เลือก Font Typeface import (.ttf) และ Upload ไฟล์ font ที่เราได้เตรียม ไว้ หรือการปรับสีอักษร โดยเลือกที่ Text Color แล้วเลือกสีที่ต้องการ ขั้นตอนที่ 7 การใส่รูปภาพให้ลาก Image ใน Palette User Interface มาใส่ในหน้าจอ Viewer ขั้นตอนที่ 8 เลือกภาพ โดยเลือก Image1 ใน Components แล้วมาที่ Properties ในส่วนของ Picture ให้เลือกภาพที่มีอยู่แล้ว หรือเลือก Upload File หากไม่มี 4 5 6
- 23. ขั้นตอนที่ 9 เลือกภาพ โดยเลือก Choose File เลือกไฟล์ในคอมพิวเตอร์ของเรา ขั้นตอนที่ 10 ปรับขนาดของภาพโดยเลือก Image1 ใน Components แล้วมาที่ Properties ใน ส่วนของ Height และ Width ให้ปรับโดยสามารถเลือก Automatic (ปรับอัตโนมัติ) หรือ Fill parent (ปรับ เต็มพื้นที่) หรือปรับตามขนาด Pixels หรือ Percent ในที่นี้ให้ปรับเป็น Percent คือ 50% ทั้ง Height และ Width 7 8 9
- 24. ขั้นตอนที่ 11 การสร้างปุ่ม Exit ให้ลาก Button ใน Palette User Interface มาใส่ในหน้าจอ Viewer ขั้นตอนที่ 12 แก้ไขข้อความใน Button โดยเลือก Button1 ใน Components แล้วมาที่ Properties ในส่วนของ Text ให้แก้ไขเป็น “Exit” ถือเป็นการเสร็จสิ้นขั้นตอนในการออกแบบหน้าตาของแอพพลิเคชั่น ในส่วนต่อไปจะเป็นการใส่ Code เพื่อสั่งการในการทางานต่างๆ ของแอพพลิเคชั่น 10 11 12
- 25. ขั้นตอนที่ 13 การใส่ code ของแอพพลิเคชั่น ในส่วนของ code จะเป็นแบบ Block Editor ซึ่งจะ ง่ายต่อการทางานสาหรับผู้เริ่มต้นพัฒนาแอพพลิเคชั่นอย่างมาก โดยให้ผู้ใช้เลือกที่ Blocks ขั้นตอนที่ 14 ในส่วนของหน้าต่างการทางานของ Block ทางด้านซ้ายมือจะมี Screen1 ที่รวม Components ต่างๆ ที่เราใส่ในแอพพลิเคชั่นของเรา ในส่วนนี้จะมีเพียง Button1 เท่านั้นที่มีการทางานเมื่อ เราสัมผัสโดยให้คลิก Button1 และเลือก Block “When Button1 Click” แล้วคลิกเม้าส์ค้างไว้ลากมาใส่ หน้าจอการทางาน 13 14
- 26. ขั้นตอนที่ 15 การทางานเมื่อ Button1 Click คือ ออกจากโปรแกรม ให้เราไปที่ Built-in คลิก Control คลิกเลือก Block “Close Application” คลิกเม้าส์ค้างไว้แล้วลาก Block “Close Application” มาใส่ใน Block “When Button1 Click” ถือว่าเสร็จสิ้นการทางานในส่วนของ Code ต่อไปเป็นการทดสอบแอพพลิเคชั่นโดยการเชื่อมกับ โทรศัพท์ และการ Export แอพพลิเคชั่นออกมาใช้งานจริง ขั้นตอนที่ 1 ให้เลือกเมนู Test แล้วเลือก Thunkable Live 15 การเชื่อมต่อกับโทรศัพท์เพื่อทดสอบแอพพลิเคชั่น 1
- 27. ขั้นตอนที่ 2 ให้เปิดโทรศัพท์แล้วเข้าไปที่แอพพลิเคชั่น Thunkable แล้วสแกน QR Code หรือนา Code ที่ได้ไปป้อนในแอพพลิเคชั่น 2
- 28. ขั้นตอนที่ 1 ให้เลือกเมนู Export แล้วเลือก App (provide Qr code for .apk) เพื่อแสดง QR Code ให้สแกนเพื่อดาวน์โหลดไฟล์ .apk หรือเลือก App (save .apk to my computer) เพื่อบันทึกไฟล์ลง ในคอมพิวเตอร์ การ Export File แอพพลิเคชั่น 1
- 29. Chapter 4 สร้างแอพพลิเคชั่นวาดภาพ หลังจากได้ทาความรู้จักกับเครื่องมือต่างๆ ของ Thunkable และได้ทดลองเขียนแอพไปในเบื้องต้น แล้วนั้น ในบทนี้เราจะมาสร้างแอพพลิเคชั่นที่นาไปใช้งานได้จริง คือ แอพพลิเคชั่นวาดภาพ ซึ่งสามารถนาไปใช้ งานได้อย่างหลากหลาย เช่น ประยุกต์ทาแอพพลิเคชั่นฝึกเขียนหนังสือ หรือแอพพลิเคชั่นวาดภาพสาหรับเด็ก เป็นต้น ขั้นตอนที่ 1 เตรียมทรัพยากรในการสร้างแอพพลิเคชั่น ในขั้นตอนนี้ให้เข้าไปที่ www.flaticon.com โดยให้ค้นหาและดาวน์โหลดปุ่มสาหรับใช้ในการสร้างแอพพลิเคชั่น ดังนี้ = Palette = paintbrush = save = bin ขั้นตอนที่ 2 เริ่มสร้างแอพพลิเคชั่นโดยเปิดหน้าต่างสาหรับสร้างแอพพลิเคชั่นขึ้นมา โดยตั้งค่า Properties ของ Screen1 ตามภาพ สร้างแอพพลิเคชั่นวาดภาพ 1 2
- 30. ขั้นตอนที่ 3 มาที่ส่วนของ Layout แล้วลาก Horizontal Arrangement มาใส่ในหน้าจอดังภาพ ขั้นตอนที่ 4 หลังจากนั้นมาที่ User Interface ลาก Button1,2,3,4 มาใส่ใน Horizontal Arrangement คั่น Button แต่ละ Button ด้วย Label1,2,3 เพื่อไม่ให้แต่ละปุ่มชิดกันมากเกินไปเวลา แสดงผล 1 1 2
- 31. ขั้นตอนที่ 5 มาที่ส่วนของ Layout แล้วลาก Horizontal Arrangement มาใส่ในหน้าจอ และลาก Vertical Arrangement มาใส่ด้านใน Horizontal Arrangement อีกที ดังภาพ ขั้นตอนที่ 6 หลังจากนั้นมาที่ User Interface ลาก slider 3 slider มาใส่ใน Vertical Arrangement ที่สร้างในขั้นตอนที่ 5 อีกที และลาก Button มาใส่ข้าง Vertical Arrangement และคั่นด้วย Label ดังภาพ 1 2 1 3 2
- 32. ขั้นตอนที่ 7 ต่อมาเป็นส่วนสาคัญในการสร้างแอพพลิเคชั่นนี้ คือ การใช้งาน Canvas มาที่ส่วนของ โดยมาที่ Drawing & Animation แล้วลาก Canvas มาใส่ในหน้าจอ เสร็จแล้วกลับมาที่ User Interface เพื่อ ลาก Label มาคั่นและลาก Notifier มาใส่ในหน้าจอเพื่อสาหรับการแสดงการแจ้งเตือนต่างๆ ดังภาพ ขั้นตอนที่ 8 เปลี่ยนชื่อ Components ต่างๆ ดังนี้ 1
- 33. ขั้นตอนที่ 9 ตั้งค่า Properties ให้แต่ละ Components โดยเริ่มที่ Horizontal Arrangement โดย ตั้งค่าดังภาพ ขั้นตอนที่ 10 ต่อไปเป็นการตั้งค่า Button โดย ปรับขนาด Button เป็น 40x40 pixels และเปลี่ยน ภาพ Button เป็นภาพตามที่เราได้เตรียมไว้ โดยเลือก Image แล้วเลือกอัพโหลดไฟล์ โดยเลือกไอคอนเป็น Palette และลบข้อความตรง text ออก ดังภาพ 1 1 2 3
- 34. ขั้นตอนที่ 11 ต่อไปเป็นการตั้งค่า Button Brush โดย ติ๊กถูกที่ Font Bold เลือก Font Size เป็น 16 ปรับขนาด Buttton เป็น 40x48 pixels และเปลี่ยนภาพ Button เป็นภาพตามที่เราได้เตรียมไว้ โดย เลือก Image แล้วเลือกอัพโหลดไฟล์ โดยเลือกไอคอนเป็น Brush และเปลี่ยนข้อความตรง text เป็น 2 พร้อม ทั้งเลือก Text Alignment เป็น Right : 2 พร้อมทั้งเปลี่ยนสีตัวเลขเป็น Gray ดังภาพ ขั้นตอนที่ 12 ต่อไปเป็นการตั้งค่า Button Clear โดยปรับขนาด Button เป็น 40x40 pixels และ เปลี่ยนภาพ Button เป็นภาพตามที่เราได้เตรียมไว้ โดยเลือก Image แล้วเลือกอัพโหลดไฟล์ โดยเลือกไอคอน เป็น Bin และลบข้อความตรง text ออกดังภาพ 1 3 4 2 1 2
- 35. ขั้นตอนที่ 13 ต่อไปเป็นการตั้งค่า Button Save โดยปรับขนาด Button เป็น 36x36 pixels และ เปลี่ยนภาพ Button เป็นภาพตามที่เราได้เตรียมไว้ โดยเลือก Image แล้วเลือกอัพโหลดไฟล์ โดยเลือกไอคอน เป็น Save และลบข้อความตรง text ออกดังภาพ ขั้นตอนที่ 14 ต่อไปเป็นการตั้งค่า Label ที่คั่นระหว่างปุ่ม คือ Label1,2,3 ให้ปรับ Width ของทุก Label เป็น 20 pixels และลบข้อความใน Text ออกด้วย ดังภาพ 1 2 1
- 36. ขั้นตอนที่ 15 ตั้งค่า Horizontal_Arrangement2 ให้ตั้งค่า AlignHorizontal และ AlignVertical เป็น Center และปรับ Width เป็น 90% เพื่อเว้นระยะจอภาพไม่ให้ชิดจนเกินไป ดังภาพ ขั้นตอนที่ 16 ตั้งค่า Vertical_Arrangement1 ให้ตั้งค่า Width เป็น Fill parent ดังภาพ 1 2 1
- 37. ขั้นตอนที่ 17 การตั้งค่า Slider สาหรับแสดงค่าสี RGB ให้ตั้งค่า Slider ทั้งหมดดังนี้ Width ตั้งค่า เป็น Fill parent ค่าสีมีตั้งแต่ 0-255 ให้ตั้ง Max Value เป็น 255 Min Value เป็น 0 Thump Position เป็น 128 และเพื่อให้ทราบว่า Slider ไหนเป็นสีไหนให้ตั้งค่า Color Left เป็นสี Red Green Blue ตามลาดับ ขั้นตอนที่ 18 ตั้งค่า Button5 เพื่อใช้แสดงตัวอย่างสี โดยติ๊กถูกที่หน้าคาว่า Enable ออก กาหนด ขนาดของปุ่มเป็น 40x40 pixel shape กาหนดเป็น Oval และลบข้อความตรง text และตั้งค่า Label4 เพื่อ ใช้สาหรับคั่นปุ่ม ให้ตั้ง Width เป็น 5 pixel และลบข้อความตรง text ออกดังภาพ 1 2 2 3 1
- 38. ขั้นตอนที่ 19 ตั้งค่า Label5 ที่ใช้สาหรับคั่นโดย ตั้งค่า Height เป็น 5 pixel และลบข้อความตรง text ออก และ Canvas1 ให้ตั้งค่า Height และ Width เป็น Fill parent เพื่อให้ได้พื้นที่วาดมากที่สุด และตั้ง ค่า Line Width เป็น 2 ดังภาพ ขั้นตอนที่ 20 ตั้งค่า Horizontal Arrangement2 ให้ไม่แสดงเมื่อเริ่มต้น โดยคลิกที่ Horizontal Arrangement2 ติ๊กถูกที่ Visible ออก ดังภาพ 1 1
- 39. ขั้นตอนที่ 21 ขั้นตอนการเขียนโปรแกรม เริ่มโดยคลิกที่ Blocks ปุ่มแรกคือ Palette ให้คลิกที่ Palette เลือก When Palette Click มาใส่ที่หน้าจอสาหรับเขียน code ต่อมาคลิกที่ Horizontal Arregement2 เลือก set Horizontal Arregement2 Visible to (ส่วนนี้จะเป็นการแสดง Color bar เมื่อเรา คลิกที่ Button Palette โดยถ้าตั้งค่า visible เป็น True จะแสดง ถ้าค่าเป็น False จะไม่แสดง) ต่อมาคลิกที่ Logic เลือก not ลากมาต่อตรง set Horizontal Arregement2 Visible to (การใช้คาสั่ง not เพื่อสาหรับค่า เป็น True หรือ False เมื่อเราคลิกปุ่ม Palette ทาให้ Color bar แสดงหรือไม่แสดง ดังภาพ ขั้นตอนที่ 22 ตั้งค่า Slider เพื่อกาหนดสี เมื่อเราเลื่อน Slider จะเกิด Event PositionChanged ให้ คลิกเลือก Slider Red เลือก Event PositionChanged แล้วลากมาใส่หน้าจอ จากนั้น ให้คลิกที่ Colors ลากคาสั่ง make color มาใส่ในหน้าจอและลบ Block ค่าสีที่กาหนดมาใน make a list ออกทั้งสาม block ดังภาพ 2 3 4 5 1 1 2 3
- 40. ขั้นตอนที่ 22 (ต่อ) หลังจากลบค่าสีใน make color ออก ให้เราคลิกที่ Slider Red เลือก event Thumb Position แล้วลากมาต่อตรง make a list ของ make color จากนั้น Duplicate Red Thumb Position สองครั้ง แล้วลากมาใส่ตรง make a list ให้ครบและเปลี่ยนเป็น Green และ Blue ตามลาดับ ซึ่ง ส่วนที่เราจะให้แสดงค่าสีมีอยู่สองส่วน ส่วนแรกคือ Canvas ให้เราคลิกที่ Canvas1 เลือก set Paint Color to แล้วลากมาใส่ใน Event Position Changed และลาก make color มาต่อ ส่วนที่สองที่แสดงค่าสีคือปุ่ม ตัวอย่างสี ให้เราคลิกเลือกที่ Button5 เลือก Event set Background Color to มาใส่ใน Event Position Changed จากนั้น Duplicate event make color มาต่อ ดังภาพ ขั้นตอนที่ 23 ตั้งค่า Slider Green และ Blue การตั้งค่าจะคล้ายกัน ให้เรา Duplicate Event Position Changed ของ Slider มาสองและเปลี่ยนชื่อเป็น Green และ Blue ตามลาดับ ดังภาพ 2 3 1 1 2 4 5
- 41. ขั้นตอนที่ 24 ปุ่มต่อมาคือปุ่ม Brush ให้คลิกที่ Brush ลาก Event When Click มาวาง จากนั้นไปที่ Canvas1 ลาก Event set Line Width มาใส่ (เนื่องจากเรากาหนดให้การคลิกแต่ละครั้งจะเพิ่มขนาดของ พู่กันครั้งละ pixel เมื่อถึง 5 pixel ก็จะกลับมาเริ่มใหม่ ดังนั้นเราต้องตรวจสอบก่อนว่าขนาด Brush น้อยกว่า 5 pixel ไหม) ให้เราคลิกที่ Control ลาก Block if then else มาต่อ จากนั้นไปที่ Math ลากเครื่องหมาย เท่ากับมาต่อช่องแรก และไปที่ Math ลากเลข 0 มาใส่ด้านหลังเครื่องหมายเท่ากับและเปลี่ยนเลขเป็น 5และ คลิกที่เครื่องหมายเท่ากับ เปลี่ยนเป็นเครื่องหมายน้อยกว่า และไปที่ Canvas1 ลาก line width มาใส่ ด้านหน้าเครื่องหมายน้อยกว่าเพื่อเปรียบเทียบ ขั้นตอนที่ 24 (ต่อ) ในช่อง Then ในกรณีเงื่อนไขเป็นจริงเราจะเขียน code ให้เพิ่มขนาด line width โดยคลิกที่ math ลากเครื่องหมายบวกมาต่อ และ Duplicate line width และเลข 5 มาใส่ และเปลี่ยนเลข 5 เป็น 1 และในช่อง else ในกรณีเงื่อนไขเป็นเท็จ ให้เรา Duplicate เลข 1 มาใส่ และเราต้องแสดงขนาด Brush ด้วย ให้เราคลิกที่ Brush ลาก Event set text มาใส่ในและ Duplicate line width มาใส่ ดังภาพ 2 3 1 1 4 5 6 2 3 4
- 42. ขั้นตอนที่ 25 ปุ่มต่อมาคือปุ่ม Clear ให้คลิกที่ Button Clear ลาก Event When Click ซึ่งเมื่อเราคลิก ที่ปุ่ม Clear จะมี Dialog มาถามก่อนว่าจะ save หรือไม่ โดยส่วนนี้เราจะใช้ Notifier โดยให้คลิกที่ Notifier1 ให้เลือก Show Choose Dialog จากนั้นไปที่ Text ลาก text ว่างๆ มาใส่ทั้ง 4 ช่องและแก้ไขข้อความดังนี้ message แก้ไขเป็น “คุณต้องการลบภาพแน่หรือ” title แก้ไขเป็น “confirm” button1text แก้ไขเป็น “ยืนยัน” และ button2text แก้ไขเป็น “ยกเลิก” และให้กาหนดช่อง Cancelabel เป็น false ดังภาพ ขั้นตอนที่ 25 (ต่อ) หลังจากที่ผู้ใช้คลิกเลือกปุ่มใน Show ChooseDialog จะเกิด Event After Choosing ให้คลิกที่ Notifier1 เลือก Event After Choosing ลากมาใส่หน้าจอ หากผู้ใช้คลิกปุ่มยืนยัน ก็จะ ลบภาพทันทีให้เราคลิกที่ Control เลือก Even if then จากนั้นคลิกที่ Math ลากเครื่องหมายเท่ากับมาใส่ใน if จากนั้นนาเม้าส์มาชี้ที่ choice แล้วลาก get choice มาใส่ด้านหน้าเครื่องหมายเท่ากับและ Duplicate text คาว่า “ยืนยัน” มาใส่ด้านหลัง โดยเมื่อเราคลิกปุ่มนี้จะทาการลบภาพให้เราไปที่ Canvas1 ลาก Even Canvas Clear มาใส่ then ดังภาพ 2 41 1 3 4 3 2 5
- 43. ขั้นตอนที่ 26 ปุ่มสุดท้ายคือปุ่ม Save ให้คลิกที่ Button Save ลาก Event When Click มาใส่ จากนั้นไปที่ Notifier เลือก Show message dialog มาใส่ ตรง message ไปที่ text ลาก join มาใส่และลาก text มาใส่ โดยแก้ไขข้อความเป็นชื่อไฟล์ และวรรค 1 ครั้ง และไปที่ Canvas1 ลาก Call canvas save มาใส่ ใน join ช่องที่สอง ตรง title ให้ Duplicate ข้อความมาใส่และแก้ไขเป็น File Saved และ buttonText ให้ Duplicate ข้อความมาใส่และแก้ไขเป็น OK ดังภาพ ขั้นตอนที่ 27 ขั้นตอนสุดท้ายเมื่อเราลากนิ้วใน canvas จะเกิดเส้นขึ้นตามนิ้วของเรา คือเมื่อเรา ลากเส้นจะเกิด Event Drag ขึ้น ให้เราคลิกที่ Canvas1 ลาก Event Dragged มาใส่หน้าจอ จากนั้นให้เรา คลิกที่ Canvas1 ลาก Event Draw Line (Draw Line Event สาหรับวาดเส้นตรง) มาใส่จากนั้นนาเม้าส์ไปชี้ ที่ prevX และ prevY และนา get prevX และ get prevY มาใส่ใน x1 และ y1 ตามลาดับ นาค่า get CurrentX และ CurrentY มาใส่ใน x2 และ y2 ตามลาดับ 2 4 1 3 5 6
- 44. เท่านี้แอพพลิเคชั่นของเราก็สามารถใช้งานได้แล้ว โดยผู้ใช้สามารถ Export แอพพลิเคชั่นไปใช้งานได้ โดยทาตามขั้นตอนในการ Export เหมือนกับแอพพลิเคชั่นที่เราเลยทดลองสร้างกันมาในบทก่อนๆ โดยเรา สามารถนาแอพพลิเคชั่นเหล่านี้ไปประยุกต์ใช้ในงานด้านต่างๆ ได้อย่างหลากหลาย และสามารถประยุกต์ใช้ ฟังก์ชันต่างๆ ของ Thunkable มาใช้งานได้อย่างหลากหลาย
- 45. บรรณานุกรม ณรงค์พร เหล่าศรีสิน. สร้ำงแอพมือถือได้ง่ำยๆ โดยไม่ต้องเขียนโปรแกรม. (ออนไลน์). แหล่งที่มา : https://www.youtube.com/watch?v=VXoCcmTBwLE&list=PLi8U-R74CWSVbdWO1 iX3jjTUexEx06RBF&index=. วันที่สืบค้นข้อมูล : 16 มีนาคม พ.ศ. 2560 ธวัชชัย สีลาดเลา. กำรพัฒนำแอพพลิเคชั่นบนอุปกรณ์แอนดรอยด์สำหรับผู้เริ่มต้น. (ออนไลน์). แหล่งที่มา : www.nb2.go.th/appinventor/handbooks/handbook.pdf. วันที่สืบค้นข้อมูล : 16 มีนาคม พ.ศ. 2560 นิตยสารดิจิทัล เอจ. เส้นทำงควำมสำเร็จในตลำด Application. (ออนไลน์). แหล่งที่มา : http://www.digitalagemag.com/เส้นทางความสาเร็จ-ในตลาด-application. วันที่สืบค้นข้อมูล : 19 กุมภาพันธ์ พ.ศ. 2560 เมกทัศน์ ศรีคงอยู่ และคณะ. MIT App Inventor เขียนโปรแกรมบนมือถือ. (ออนไลน์). แหล่งที่มา : 61.7.166.36/download/ai/MIT%20App%20Inventor.docx. วันที่สืบค้นข้อมูล : 16 มีนาคม พ.ศ. 2560 สุรศักดิ์ พุทธพล. กำรเขียนโปรแกรมแอนดรอยด์เป็นเองง่ำยๆ เหมือนกำรต่อ LEGO. (ออนไลน์). แหล่งที่มา : http://www.androidtrainingthailand.com. วันที่สืบค้นข้อมูล : 16 กุมภาพันธ์ พ.ศ. 2560 สมชาติ แผ่อานาจ. กำรสร้ำง Apps for Android ด้วย MIT App Inventor. (ออนไลน์). แหล่งที่มา : www.utd2.go.th/home/images/ICT/appsforandroid-131029100224-phpapp02.pdf. วันที่ สืบค้นข้อมูล : 16 มีนาคม พ.ศ. 2560