การพัฒนาโปรแกรมบนอุปกรณ์พกพาเบื้องต้น

การพัฒนาโปรแกรม บนอุปกรณ์พกพาเบื้องต้น

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 สารบัญ LIST OF CONTENTS ความหมายของการพัฒนาโปรแกรมบนอุปกรณ์พกพาเบื้องต้น ประเภทของการพัฒนาโปรแกรมบนอุปกรณ์พกพาเบื้องต้น ขั้นตอนการพัฒนาแอปพลิเคชั่น บทที่ 1 หลักการพัฒนาโปรแกรมบนอุปกรณ์พกพาเบื้องต้น บทที่ 2 ประเภทและระบบปฏฺิบัติการของอุปกรณ์พกพา ความหมายของอุปกรณ์พกพา ประเภทของอุปกรณ์พกพา บทที่ 3 เครื่องมือพัฒนาระบบปฏฺิบัติการของอุปกรณ์พกพา เครื่องมือพัฒนาระบบปฏฺิบัติการของอุปกรณ์พกพา บทที่ 4 การใช้โปรแกรม Kodular ในการออกแบบและพัฒนาโปรแกรม บนอุปกรณ์พกพา ความหมายของโปรแกรม Kodular บทที่ 5 การใช้งานโปรแกรม Kodular เบื้องต้น การใช้โปรแกรม Kodular เบื้องต้น บทที่ 6 การออกแบบและพัฒนาแอปพลิเคชั่นดูวิดิโอ Youtube การสร้้างแอปพลิเคชั่นดูวิดิโอ Youtube บทที่ 7 การออกแบบและพัฒนาแอปพลิเคชั่นส่ง SMS การสร้างแอปพลิเคชั่นส่ง SMS การสร้างแอปพลิเคชั่นการวาดรูป บททีี่ 8 การออกแบบและพัฒนาแอปพลิเคชั่นการวาดรูป การสร้างแอปพลิเคชั่นกล้อง สแกน ไฟฉาย บททีี่ 9 การออกแบบและพัฒนาแอปพลิเคชั่นกล้อง สแกน ไฟฉาย บททีี่ 10 การออกแบบและพัฒนาแอปพลิเคชั่นการสร้างเกม การสร้างแอปพลิเคชั่นการสร้างเกม บททีี่ 11 การออกแบบและพัฒนาแอปพลิเคชั่น text to speech การสร้างแอปพลิเคชั่น text to speech บททีี่ 12 การออกแบบและพัฒนาแอปพลิเคชั่น e-book การออกแบบและพัฒนาแอปพลิเคชั่น e-book

แอปพลิเคชันแบบ Native Application คือใช้เฟรมเวิร์กหรือเคร่ืองมือเฉพาะของแพลตฟอร์มรวมทั้ง ภาษาเฉพาะในการพัฒนาเป็นแอปพลิเคชันที่พัฒนาแยก Android หน่ึงตัว iOS หนึ่งตัว เหมาะ สำ หรับ แอปพลิเคชันและเกมแบบกราฟิกข้ันสูง เข้าถึงฮาร์ดแวร์และโทรศัพท์ท้ังหมดได้โดยตรง ใช้ คุณสมบัติของ แพลตฟอร์มได้เต็มที่ และมีประสิทธิภาพสูง ใช้เวลาในการพัฒนานานและค่าใช้จ่าย กว่าแบบ Hybrid บทที่ 1 หลักการพัฒนาโปรแกรมบนอุปกรณ์พกพาเบื้องต้น การพัฒนาโปรแกรมบนอุปกรณ์พกพาเบื้องต้น ประกอบด้วย Mobile และ Application Mobile คือ อุปกรณ์สื่อสารที่ใช้ในการพกพา ซึ่งนอกจากจะใช้งานได้ตามพื้นฐานของโทรศัพท์แล้ว ยัง ทำ งานได้เหมือนกับเครื่องคอมพิวเตอร์ เนื่องจากเป็นอุปกรณ์ที่พกพาได้ จึงมีคุณสมบัติเด่น คือ ขนาด เล็ก น้ำ หนักเบา ใช้พลังงานค่อนข้างน้อย Appliction หมายถึง ซอฟแวร์หรือโปรแกรมที่ใช้เพื่อช่วยในการทำ งานของผู้ใช้ โดย Application จะ ต้องมีสิ่งที่เรียกว่า ส่วนติดต่อกับผู้ใช้เพื่อเป็นตัวกลางในการใช้งานด้านต่างๆ ความหมายของการพัฒนาโปรแกรมบนอุปกรณ์พกพาเบื้องต้น ประเภทของการพัฒนาโปรแกรมบนอุปกรณ์พกพาเบื้องต้น แอปพลิเคชันแบบเว็บ (Mobile Web) คือเขียนเว็บโดยใช้ HTML/CSS JS เพื่อใช้เป็นส่วนเชื่อมต่อ มีข้อดีคือ เขียนครั้งเดียวสามารถแสดงผลได้ทุกท่ีๆ รองรับการเปิดเว็บ แต่ข้อเสียคือช้ากว่ามากเมื่อเทียบ กับแอปพลิเคชันแบบพ้ืนเมือง และใช้หน่วยความจาเยอะมาก Mobile Web App เป็นการเขียนหน้าเว็บ ท่ีขนาดเท่าหน้าจอมือถือ ซึ่งไม่ต้องมีการติดต่อกับทรัพยากรในเครื่องมากนัก เป็นการเปิดดูข้อมูล กรอก ข้อมลู ทางานผ่าน Server ซึ่งแทบจะไม่ได้เกี่ยวข้องอะไรกับตัว ระบบปฏิบัติการมากนัก แต่ต้องเอามา ลงในระบบปฏิบัติการเป็นเพราะว่า อาจจะแยกการใช้งานตามส่วนต่างๆ ได้ง่ายขึ้นและเฉพาะเจาะจง มากขึ้น แอปพลิเคชันแบบลูกผสม (Hybrid Application) คือ เป็นการผสมผสาน ระหว่างแบบเว็บและ พื้น เมือง คือเขียนแอปพลิเคชันโดยใช้ HTML/CS/JS แต่มีส่วนชั้นที่เช่ือมต่อกับเฟรมเวิร์ก ซึ่งช่วยให้ สามารถดึงคุณสมบัติที่มีของแพลตฟอร์มมาได้ เป็นการพัฒนา App แบบ Web View หรือส่วนการ แสดงผล แบบ Web ซึ่งเป็นมุมมองของ Native App ท าให้เราสามารถ run Web ใน App ของเรา ได้ ข้อดีคือพัฒนาได้ไวขึ้น เป็นแอปท่ีใช้ร่วมกันทั้ง Android และ iOSเหมาะสำ หรับแอปธุรกิจ แอป โซเชียล หรือ แอปที่ซับซ้อนปานกลาง ใช้ Code ร่วมกันประหยัดเวลาและค่าใช้จ่ายในการพัฒนา ข้อเสียคือยังช้ากว่าแบบเขียนพ้ืนเมืองอยู่ เข้าถึง ฮารด์ แวร์และโทรศัพท์ได้แต่ไม่ทั้งหมด

บทที่ 1 หลักการพัฒนาโปรแกรมบนอุปกรณ์พกพาเบื้องต้น ขั้นตอนการพัฒนาแอปพลิเคชั่น 1.การศึกษาความต้องการ แอปพลิเคชั่นถูกสร้างขึ้นตามความต้องการ และเพื่อแก้ปัญหาของ ลูกค้าหรือผู้ใช้ ผู้พัฒนาต้องทราบคงามต้องการหรือปัญหาก่อนดำ เนินการออกแบบ ซึ่งจะได้ข้อ กำ หนดที่เป็นคุณสมบัติต่างๆ ของแอปพลิเคชั่น 2.การออกแบบ เป็นหัวใจสำ คัญในการพัฒนาแอปพลิเคชั่น ซึ่งค่อนข้างมีความซับซ้อนและมี รายละเอียดจำ นวนมากต้องอาศัยแนวคิดเชิงคำ ณวนมาเป็นประยุกต์ใช้ในการออกแบบอย่างเป็น ระบบ 3.การลงมือพัฒนา ผู้พัฒนาหรือโปรแกรมเมอร์ (Programmer) ลงมือเขียนคำ สั่งในส่วน ประกอบย่อยที่ได้ออกแบบไว้ ซึ่งอาจพบข้อจำ กัดหรือข้อบกพร่องจากขั้นตอนการออกแบบ หรือ ขั้นตอนศึกษาความต้องการ 4.การทดสอบ เป็นการตรวจสอบคุณภาพของแอปพลิเคชั่นเพื่อค้นหาข้อผิดพลาดที่มีอยู่ระหว่างที่ แอปพลิเคชั่นทำ งานและสร้างความมั่นใจว่าแอปพลิเคชั่นทำ งานได้ถูกต้องและตรงความต้องการ อย่างแท้จริง หากพบข้อผิดพลาด ต้องปรับปรุง

1.โทรศัพท์มือถือ Mobile Phone 2.ฟีเจอร์โฟน Feature Phone 3.สมาร์ตโฟน SmartPhone 4.แฟบเล็ต Phablet 5.แท็บเล็ต Tablet 6.โน้ตบุ๊ก Notebook บทที่ 2 ประเภทและระบบปฏฺิบัติการของอุปกรณ์พกพา ความหมายของการอุปกรณ์พกพาเบื้องต้น อุปกรณ์พกพา หมายถึง อุปกรณ์ใดๆ ที่สามารถนำ ติดตัวไปได้โดยง่าย ต้องมีขนาดเล็ก กะทัดรัด น้ำ หนักน้อยปกติหมายถึง อุปกรณ์อิเล็กทรอนิกส์ แต่ในที่นี้จะหมายถึง โน๊ตบุ๊ก แท็บเล็ต ตลอดจนการ สื่อสารแบบไร้สาย ประเภทของอุปกรณ์พกพา

บทที่ 3 เครื่องมือพัฒนาระบบปฏฺิบัติการของอุปกรณ์พกพา Eclipse โปรแกรมที่ใช้สำ หรับพัฒนาภาษาได้หลายภาษา เป็นโปรแกรมหนึ่งที่ใช้ในการพัฒนา Application Serverได้อย่างมีประสิทธิภาพ และเป็นซอฟต์แวร์ Open Source ที่พัฒนาขึ้นเพื่อใช้โดยนักพัฒนา เอง MIT App Inventor เป็นเครื่องมือที่ใช้สร้างแอปพลิเคชันที่ทำ งานบนระบบ ปฏิบัติการแอนดรอยด์โดย MIT App Inventorใช้ หลักการพัฒนาซอฟต์แวร์เชิงคอมโพเนนต์ iBuildApp พัฒนาด้วย iBuildApp และ AppsBuilder หรือ TheappBuilder ซึ่งเป็นบริการออนไลน์ที่มีวิธีที่ง่าย และราคาไม่แพงในการสร้างการทดสอบติดตาม และปรับปรุงแอพพลิเคชั่น Thunkable เป็นเครื่องมือสร้างโมบายแอปพลิเคชัน เพื่อติดตั้ง บนสมาร์ตโฟนที่ใช้ระบบปฏิบัติการ Android, iOS โดยเครื่องมือที่ใช้ในการสร้างนั้นนอกจากเครื่องมือพื้น ฐานแล้วยังมีการเชื่อมต่อไปยังผลิตภัณฑ์จาก Google Twitter และ Microsoft Android Studio มีส่วนประกอบต่างๆที่ช่วยในการสร้างแอปพลิเคชัน ระบบบิวด์แบบ Gradle บิลด์ตัวแปรและไฟล์ APK หลายไฟล์รวมถึงเทมเพลตโค้ดที่ช่วยในการสร้าง แอพ Swift เป็นภาษาที่ออกแบบให้มีประสิทธิภาพสูงและง่าย ต่อการพัฒนา โดยนำ ข้อดีของภาษาสมัยใหม่เข้ามา มากมาย JavaScript เป็นภาษาโปรแกรมที่นักพัฒนาใช้ในการสร้างหน้า เว็บแบบอินเทอร์แอคทีฟ ตั้งแต่การรีเฟรชฟีดสื่อโซ เชียลไปจนถึงการแสดงภาพเคลื่อนไหวและแผนที่ แบบอินเทอร์แอคทีฟฟังก์ชันของ JavaScript Objective-C เป็นภาษาโปรแกรมเชิงวัตถุและมีสมบัติการสะท้อน โดย แรกเริ่ม ภาษาอ็อบเจกทีฟ-ซี พัฒนาขึ้นจากภาษาซีโดย ยังคงคุณลักษณะของภาษาซีไว้ครบทุกประการเพียงแต่ เพิ่มระบบส่งข้อความ

บทที่ 3 เครื่องมือพัฒนาระบบปฏฺิบัติการของอุปกรณ์พกพา Kotlin เป็นภาษาการเขียนโปรแกรมที่ทันสมัย สื่ออารมณ์ และหลากหลายที่พัฒนาโดย JetBrains มันถูก สร้างขึ้นเพื่อเอาชนะข้อจำ กัดของ Java ในขณะที่ยัง คงความเข้ากันได้อย่างเต็มที่กับ Java codebases Flutter เป็นเฟรมเวิร์กโอเพ่นซอร์สที่พัฒนาและสนับสนุน โดย Google นักพัฒนาฟรอนท์เอนด์และฟูลสแตก ใช้ Flutter เพื่อสร้างอินเทอร์เฟซผู้ใช้ Visual Studio เป็นซอฟต์แวร์ประเภท IDE (Integrated Development Environment) ซึ่งเป็นการนำ แนว ความคิดการทำ งานแบบรวมศูนย์มาใช้ คือ การทำ ให้ วงจรการพัฒนาระบบทั้งหมดทำ งานได้อย่างสะดวก รวดเร็ว และ ง่ายดาย SQLite เป็นระบบจัดการฐานข้อมูลที่ได้รับความนิยมอย่างมาก บันทึกฐานข้อมูลลงไฟล์เดียวทำ ให้สะดวกในการจัด เก็บและเคลื่อนย้าย เป็นตัวเลือกที่ได้รับความนิยม ในอุปกรณ์อิเล็กทรอนิกส์เช่น มือถือ PDA เครื่อง AppMakr เครื่องมือที่ช่วยพัฒนา Application ให้มีการใช้งานได้ ง่ายมากขึ้น App Maker เป็นระบบ IDE บนคลาวด์ และมีเทมเพลตข้อมูลต่างๆ ทำ ให้โปรเเกรมเมอร์ไม่ ต้องเขียนโปรเเกรมมากในการสร้างแอพพลิเคชันขึ้น มาใหม่ ใช้ได้ทั้งภาษา HTML, CSS, JavaScript Dart เป็นภาษา Programming ที่เหล่า Developers จาก Google และ ที่อื่น ๆ ใช้ เพื่อสร้าง applications ที่มีคุณภาพสูง และ Flutter ก็เป็นหนึ่งใน Framework ที่ใช้ภาษา Dart ในการพัฒนาแอป Kodular เครื่องมือออนไลน์ หรือเว็บไซต์ที่เปิดให้ทุกคนสามารถ สร้างแอปพลิเคชันเป็นของตัวเองได้ง่ายๆ โดยไม่ต้อง เรียนรู้การเขียนโปรแกรม เพียงแค่ลาก-วางบล็อค มาต่อ กันแบบจิ๊กซอว์ สามารถออกแบบและสร้างแอปพลิเคชัน ที่ทำ งานบนระบบปฏิบัติการ Android ได้อย่างรวดเร็ว

บทที่ 4 การใช้โปรแกรม Kodular ในการออกแบบและพัฒนา โปรแกรมบนอุปกรณ์พกพา ความหมายของโปรแกรม Kodular Kodular คือ เครื่องมือออนไลน์ หรือเว็บไซต์ที่เปิดให้ทุกคนสามารถสร้างแอปพลิเคชันเป็นของตัวเองได้ ง่ายๆ โดยไม่ต้องเรียนรู้การเขียนโปรแกรม เพียงแค่ลาก-วางบล็อค มาต่อกันแบบจิ๊กซอว์ สามารถออกแบบ และสร้างแอปพลิเคชันที่ทำ งานบนระบบปฏิบัติการ Android ได้อย่างรวดเร็ว เราสามารถทำ การทดสอบ แอปพลิเคชันบนโทรศัพท์มือถือ หรือแท็บเล็ต เพียงแค่ดาวน์โหลดแอปพลิเคชัน Kodular Companion

บทที่ 5 การใช้งานโปรแกรม Kodular เบื้องต้น การใช้โปรแกรม Kodular เบื้องต้น 1. Menu เป็นแหล่งรวมคำ สั่งที่เอาไว้ใช้สำ หรับแอปพลิเคชันนั้น ดังนี้ Project เป็นเมนูสำ หรับจัดการ Project เช่น สร้าง Project ใหม่ หรือ ลบ Project เป็นต้น Test ใช้แสดงผลการทำ งานเมื่อจำ ลองผ่านมือถือจริงๆ Export สามารถนำ Project เราแปลงเป็นไฟล์ APK ไฟล์ที่สามารถติดตั้งบนมือถือ Help เมื่อมีปัญหาสามารถแจ้งได้ My Project แหล่งรวบรวม Project ของเราที่สร้างไว้ Community แหล่งพูดคุยแลกเปลี่ยน ถามปัญหาเกี่ยวกับ Kodular Docs อธิบานการทำ งานให้ผู้เรียนศึกษา Donate ถ้าผู้ใช้ต้องการสนับสนุนทีมงานสร้าง Kodular สามารถโอนเงินได้หลากหลายช่องทาง Account ใช้จัดการบัญชี Kodular ของเรา 2. Design ใช้ออกแบบหน้าจอแอปพลิเคชันที่เราจะสร้าง 3. Screen แสดงผลการออกแบบหน้าจอแอปพลิเคชัน ใช้สำ หรับลากวางส่วนประกอบ (Component) 4. Blocks ใช้ออกแบบการทำ งานของแอปพลิเคชันลาก - วาง บล็อคการทำ งาน ที่เปรียบเสมือการเขียน Code 5. Property ใช้กำ หนดคุณสมบัติของแอปพลิเคชัน และกำ หนดคุณสมบัติของส่วนประกอบ (Component) ต่างๆ

1.เข้าเว็บไซต์ Youtube ค้นหาเนื้อหาที่ต้องการดู 2.สร้างโปรเจคใหม่ 3.คลิกคอมโพเนนต์ชื่อ Layout และเลือก General 4.เลือก Vertical Scroll Arrangement ( การจัดวางแนวตั้ง มี Scroll Bar ) 5.ปรากฎกรอบสี่เหลี่ยมที่หน้าจอ และขึ้นที่ All Components 6.กำ หนดความสูง ความกว้าง เป็น Fill parent 7.คลิกคอมโพเนนต์ชื่อ Google และเลือก youtube 8.ลากมาบริเวณหน้าจอ จะขึ้นที่ All Components 9.คลิกคอมโพเนนต์ชื่อ User Interface และเลือก Button 10.ลากมาให้ครบทั้ง 5 ปุ่ม 11.กด blocks 12.คลิกคอมโพเนนต์ชื่อ Button 1 13.เลือกอีเวนต์ when Button 1 .click 14.ลากมาวางในส่วนของ Viewer 15.คลิกคอมโพเนนต์ youtube 16.เลือกอีเวนต์ call youtube_player1 .Instant 17.ลากมาวางในส่วนของ Button 18.เลือกอีเวนต์ A text atring 19.ลากมาวางในส่วนของ call youtube_player1 .Instant 20.คัดลอกลิ้งวาง บทที่ 6 การออกแบบและพัฒนาแอปพลิเคชั่นดูวิดิโอ Youtube

1.สร้างโปรเจคใหม่ 2.เปลี่ยนชื่อ Screen1 ตรง title เป็น SendSMS 3.คลิก layout และเลือก General 4.คลิก Horizontal Arrangement 5.ลากไปไว้ที่หน้าจอ จะปรากฏกรอบสี่เหลี่ยมที่จอ 6.จัดรูปแบบ Horizontal_Arrangement ให้อยู่กึ่งกลาง โดยคลิกที่ Horizontal_Arrangement 7.กำ หนด Width ให้เป็น Fill parent กรอบ Horizontal_Arrangement อยู่ กึ่งกลาง 8.คลิก User Interface และเลือก label ลากไป ไว้ที่จอ 9.คลิก User Interface และเลือก text box ลากไปไว้จอหลัง label 10.คลิกเมาส์ขวาบริเวณ label1 เลือก Duplicate จะปรากฎเพิ่มอีกแถว 11.คลิก label1 ในส่วนของ all Components และกำ หนด taxt เป็นข้อความเบอร์โทร กำ หนด font size 12.คลิกที่ label1_copy ใน all Compo nents เปลี่ยนชื่อเป็ น label2 กด rename และรวมถึง text box ด้วย 13.คลิก User Interface และเลือก button ลากไว้หน้าจอและจะปรากฏตามนี้ 14.ปรับ width 50% และ ปรับ font size ปรับ มุมของสี่เหลี่ยมเป็น Rounded เปลี่ยนข้อความเป็น Send จะปรากฏดังนี้ 15.คลิก Screen1 กำ หนด Align Horizontal เป็น center 16.คลิก Horizontal_Arrangement กำ หนด Align Horizontal เป็น center 17.คลิก Social เลือก texting ลากมาไว้หน้าจอ texting จะไม่ปรากฏบนจอแต่จะไปปรากฏที่ all Components บทที่ 7 การออกแบบและพัฒนาแอปพลิเคชั่นส่ง SMS

บททีี่ 8 การออกแบบและพัฒนาแอปพลิเคชั่นการวาดรูป 1.สร้างโปรเจกต์ใหม่ 2.คลิก Screen1 กำ หนด Title เป็นฝึกวาดภาพ 3.เลือก Canvas ไว้หน้าจอ จะปรากกฏดังรูป กำ หนด Width ความกว้าง เป็น Fill parent 4..เลือก Horizontal Arrangement ลาก Horizontal Arrangement ไว้ต่อจาก canvas 5.เลือก Button ลาก Button ไว้ใน Horizontal Arrangement จะเป็น Button1 ลาก Button ไว้ใน Horizontal Arrangement จะเป็น Button2 6.คลิก Space ปรับปุ่ม Button2 Font Size = 20 ปรับปุ่ม Height = 40% ปรับสีปุ่ม ปรับค่า canvas เป็นFill parent

1.สร้างโปรเจคใหม่ ตั้งชื่อ Camera_Scan_Light และกำ หนดให้ ไม่แสดงชื่อ Screen1 โดยนำ เครื่องหมายถูก ในช่อง title Visible ออก 2.คลิก User Interface เลือก Image ลากมาไว้ที่หน้าจอ 3.คลิก User Interface เลือก Label ลากมาไว้ที่หน้าจอ 4.คลิก Layout เลือก General และเลือก Horizontal Arrangement ลากไปไว้หน้าจอ 5.คลิก User Interface เลือก Button ลากมาไว้ที่หน้าจอต่อจาก Image 6.ให้ลาก Button มาไว้อีก 2 Button รวมเป็นทั้งหมด 3 Button 7.คลิก Media เลือก Camera ลากมาไว้ที่หน้าจอ 8.คลิก Sensors เลือก Barcode Scanner ลากมาไว้หน้าจอ คลิกที่ Screen1 กำ หนด Align Horizontal กำ หนด Image1 ให้เป็น fill parent ทั้งสองด้าน 9.คลิก Image1 เลือก Upload file ในส่วนของ picture ปรากฏกรอบ Assets Manager คลิก Upload asset เลือกรูปภาพที่ต้องการ เสร็จแล้วคลิกที่ open 10.คลิก Label1 กำ หนดไว้ตรงกลาง โดยกำ หนด text alignment ให้เป็น center เปลี่ยนชื่อเป็น ผลงานของ พวกเรา 11.รายละเอียดของ Label1 Properties โดยเปลี่ยน Background Color, font Size, Width เป็น Fill parent 12.กำ หนดสีกรอบของปุ่มเครื่องมือ โดยกำ หนด Horizontal_Arrangement เปลี่ยนสี Background color ปรับ ขนาดของปุ่มให้มีขนาดเท่ากับ 80px ทั้ง 2 ด้าน ทุกปุ่ม 13.คลิกที่ Image1 ในส่วนของ picture คลิกรูปภาพที่ต้องการ คลิก button1 เลือก image1 ในช่อง Properties และลบข้อความออก บททีี่ 9 การออกแบบและพัฒนาแอปพลิเคชั่นกล้อง สแกน ไฟฉาย

1.กำ หนดให้ Screen1 เป็น Title Visible เพื่อไม่ให้แสดง 2.กำ หนดให้ Screen1 อยู่กึ่งกลางโดยกำ หนดที่ Align Horizontal (การจัดวางแนวนอน) ให้เป็น Center และ Align Vertical (การจัดวางแนวตั้ง) ให้เป็น Center 3.คลิกคอมโพเนนต์ชื่อ User Interface ลาก Label ไว้ที่หน้าจอ กำ หนด Font size = 50 Font Bold Text = Game และ Text Color = Red 4.กำ หนด Text Color (สีตัวอักษร) ตามที่ต้องการ ปรากฏดังรูป 5.คลิก Sensors เลือก Clock ลากมาไว้ที่หน้าจอ 6.เพิ่ม Screen โดยคลิกที่ Add Screen กำ หนดชื่อ Main คลิกที่ Main เพื่อกำ หนดค่าต่างๆ กำ หนด Align Horizontal (การจัดวางแนวนอน) ให้เป็น Center และ Align Vertical (การจัดวางแนวตั้ง) ให้เป็น Center กำ หนดให้ title Visible ปรับเป็นไม่แสดง 7.คลิก Layout เลือก General เลือก Space ลากไว้หน้าจอจำ นวน 2 ครั้ง ปรากฏดังรูป 8.คลิก User Interface ลาก Button ไว้ระหว่าง Space ปรากฏดังรูป คลิก Space1 กำ หนด Height = Fill parent คลิก Space2 กำ หนด Height = Fill parent 9.คลิก Text for Button1 กำ หนด Font Size = 30 กำ หนด Font Bold กำ หนด Background Color = Red กำ หนด Width = Fill parent กำ หนด Shape = Rounded และกำ หนด Text = Start Game จะปรากฏดังรูป 10.คลิก Layout เลือก General เลือก Horizontal Arrangement ลากมาไว้หน้าจอบน Space1 กำ หนด Width = Fill parent คลิก Layout เลือก General คลิกที่ Horizontal Arrangement แล้วลากไว้ด้านล่าง Space2 11.คลิก Monetization เลือก Advertising เลือก Startapp Banner ลากไว้หน้าจอ ในกรอบ Horizontal Arrangement ด้านบนและด้านล่าง คลิก OK 12.เพิ่ม Screen กำ หนดชื่อ Game กำ หนด Title Visible ออก คลิก Layout เลือก Views เลือก Web Viewer ลากมาไว้ที่หน้าจอ 13.คลิก Monetization เลือก Advertising คลิกที่ Admob Interstitial ไว้ในหน้าจอ คลิก web_viewer1 แล้ว กำ หนด Home URL โดยคัดลอก URL มาวางไว้ บททีี่ 10 การออกแบบและพัฒนาแอปพลิเคชั่นการสร้างเกม

1.สร้างโปรเจคใหม่ คลิกที่คอมโพเนนต์ Layout เลือก Navigation และคลิกที่ view Pager ลากมาไว้ที่จอ 2.คลิกที่ Layout เลือก General คลิกที่ vertical Arrangement ลากมาไว้หน้าจอ 3.กำ หนดจำ นวนหน้า โดยการลาก vertical Arrangement มาต่อกันในที่นี้กำ หนด จำ นวน 3หน้า รวมHome เปลี่ยนชื่อ Vertical_Arrangement1 เป็น Home Vertical_Arrangement2 เป็น P1 Vertical_Arrangement3 เป็น P2 4.คลิก User Interface เลือก Image ลาก Image ใส่ในกรอบ vertical Arrangement ให้ครบทั้ง3หน้า 5.คลิก User Interface เลือก button ลาก button มาไว้ด้านล่างของ Image 6.คลิก Image1 ให้ upload file เลือกรูปภาพโดยคลิกที่ upload asset คลิกรูปที่ต้องการ แล้วกด open กำ หนด Scale Picture To Fit Visible 7.นำ รูปภาพมาใส่ใน Image2 และกำ หนดรายละเอียด และทำ ให้ครบทั้ง 3 อัน 8.คลิก Media ลาก Text to Speech ไว้หน้าจอ เปลี่ยนภาษาเป็น English 9.คลิกที่ Button1 กำ หนด Font Size = 20 กำ หนด width เป็น Fill parent กำ หนด Text เป็น Voice ทั้ง 3 ปุ่ม 10.นำ Screen1 ออก ไม่ให้ปรากฏที่หน้าจอโดยที่คลิก Title Visible บททีี่ 11 การออกแบบและพัฒนาแอปพลิเคชั่น text to speech

บททีี่ 12 การออกแบบและพัฒนาแอปพลิเคชั่น e-book 1.สร้างโปรเจคใหม่ คลิกที่คอมโพเนนต์ Layout เลือก General และคลิกที่ vertical Arrangement ลากมา ไว้ที่จอ 2.อัพโหลดรูปเข้าใน vertical Arrangement ตั้งค่า width และ Height 3.คลิกที่ Layout เลือก Views คลิกที่ web viewer ลากมาไว้หน้าจอ 4.คัดลอก URL ของ ebook มาวางในช่อง Home URL 5.คลิกที่ Layout เลือก Navigation คลิกที่ buttom Navigation ลากมาไว้หน้าจอ 6.แทรกรูป home และ book เข้าใน blocks

History of the creator นางสาวปริลัริกลัษณ์ วรพันพัธ์ นักนัศึกษา สาขาวิชวิาคอมพิวพิเตอร์ธุรกิจกิ เกิดกิ: 3 ธันธัวาคม 2548 นางสาวพิย พิ ดา นัน นั นิยงค์ นัก นั ศึกษา สาขาวิช วิ าคอมพิว พิ เตอร์ธุรกิจ กิ เกิด กิ : 30 พฤษจิก จิ ายน 2548