การพัฒนาแอปพลิเคชั่น จัดท าโดย นายกฤติน แก้วมณี เลขที่ 17 ชั้นมัธยมศึกษาปี ที่ 5/2 เสนอ ครูนภา จันทร์ทรง รายงานฉบับน ี เ้ป็ นส ่ วนหน ึ่งของรายวชิาวทิยาการคอมพวิเตอร ์ประยุกต ์ ว30282 ภาคเรียนที่ 1 ปี การศึกษา 2566 โรงเร ี ยนวทิยาศาสตร ์ จุฬาภรณราชวทิยาลยัเพชรบุร ี
ข ค าน า รายงานเล่มน้ีจดัทา ข้ึนเพื่อเป็นส่วนหน่ึงของวิชาวิทยาการคอมพิวเตอร์ประยกุต์ว30282 ช้นั มัธยมศึกษาปี ที่ 5 เพื่อให้ได้ศึกษาหาความรู้ในเรื่องการพฒันาแอปพลิเคชนั่และไดศ้ึกษาอยา่งเขา้ใจเพอื่เป็นประโยชน์กบั การเรียน ผู้จัดท าหวงัวา่รายงานเล่มน้ีจะเป็นประโยชนก์บัผอู้่าน หรือนกัเรียน นกัศึกษา ที่กา ลังหาข้อมูล เรื่องน้ีอยู่หากมีขอ้แนะนา หรือข้อผิดพลาดประการใด ผู้จัดท าขอนอ้มรับไวแ้ละขออภยัมา ณ ที่น้ีดว้ย ผู้จัดท า วันที่23 สิงหาคม 2023
ค สารบัญ เรื่อง หน้า การพฒันาแอปพลิเคชนั่1 การวางแผนพัฒนา 3 เครื่องมือช่วยวางแผนและติดตามความกา้วหนา้ 4 เวบ็ไซตส์ร้างแอพพลิเคชนั่ Thunkable 5 Thunkable คืออะไร 6 การสร้างแอปพลิเคชัน จาก Thunkable 6 เครื่องมือที่น่าสนใจใน Thunkable 7 น า Thunkable ไปใช้สร้างโมบายแอปพลิเคชันอะไรได้บ้าง 8 วิธีการสร้างแอปพลิเคชัน จาก Thunkable 8
ง สารบัญรู ปภาพ เรื่อง หน้า ภาพที่ 1 ภาพข้ นั ตอนการพฒั นาแอปพลิ เคชนั่2 ภาพที่ 2 การใช้งานการ์ดคัมบัง 3 ภาพที่3 ตวั อยา่งการแบ่งเฟสบนกระดานคมั บงั 4 ภาพที่4 ตวั อยา่งแอพเทรลโล 5 ภาพที่ 5 Thunkable 6
1 การพัฒนาแอปพลิเคชั่น “การพฒันาแอปพลิเคชนั่หรือซอฟตแ์วร์คอมพิวเตอร์น้นั อาจท าได้โดยใช้เครื่องคอมพิวเตอร์ เครื่องเดียว ทา ใหส้ามารถเริ่มตน้ ไดง้่ายแตกต่างจากการพฒันาผลิตภณัฑท์างวิศวกรรมอื่นๆ ที่ตอ้งการ แรงงานและเครื่องจกัรจา นวนมากเช่น การผลิตรถยนต์ยานพาหนะ สิ่งก่อสร้างขนาดใหญ่ อยา่งไรกต็าม แอปพลิเคชนัน้นัอาจมีความซบัซอ้นมาก ดงัน้นัการพฒันาแอปพลิเคชนั่ที่ดีตอ้งมีการ วางแผนการดา เนินการอยา่งเป็นระบบ โดยเฉพาะอยา่งยงิ่ในการพฒันาแอปพลิเคชนั่ที่มีผรู้่วมพฒันาหลาย คน ไม่เช่นน้นัอาจทา ใหเ้กิดความลม้เหลวได้เช่น การผลิตแอปพลิเคชนั่ที่ไม่ตรงกบัความตอ้งการของลูกคา้ หรือผู้ใช้งาน ผลิตภัณฑ์มีองคป์ระกอบไม่ครบตามความตอ้งการที่กา หนดไว้ส่งมอบผลิตภณัฑล์ ่าชา้เกินกวา่ ระยะเวลาที่กา หนดไว้มีความผดิพลาดระหวา่งทา งาน รวมถึงการประเมินค่าใชจ้่ายและปริมาณทรัพยากรที่ ตอ้งใชค้ลาดเคลื่อนจากความจริงไปเป็นอยา่งมาก” 1.1 การพัฒนาแอปพลิเคชั่น การพฒันาโมบายแอพพลิเคชนั่คือการเขียนซอฟแวร์สา หรับอุปกรณ์พกพา เช่น สมาร์ทโฟน (Smart phone) และ แท็บเล็ต(Tablet) หรือพดูกนัง่ายๆ คือการทา แอพลิเคชนั่หรือการสร้างแอพลิเคชนั่ สา หรับมือถือ ซ่ึงผพู้ฒันาจะเขียนแอพลิเคชนั่มือถือเพื่อใชป้ระโยชน์จากอุปกรณ์บางอยา่งของมือถือที่มี คุณลักษณะเฉพาะ เช่น เซ็นเซอร์ตรวจจบัลกัษณะการเคลื่อนไหวของสมาร์ทโฟน (Accelerator Sensor), GPS และขอ้มูลจากเซ็นเซอร์ตวัอื่นๆ เป็นตน้ขอ้เสียของการพฒันาแอพพลิเคชนั่มือถือคือผพู้ฒันาไม่ สามารถน า source code ของระบบปฎิบตัิการหน่ึงไปใชอ้ีกระบบปฏิบตัิการได้ตวัอยา่งเช่น source code ที่ ใชท้า แอพพลิเคชนั่หรือสร้างแอพพลิเคชนั่ด้งัเดิมสา หรับอุปกรณ์Android ไม่สามารถทา งานร่วมกบั Windows Phone โปรแกรมประยุกต์ที่ใช้เบราว์เซอร์ต้องมี equipment-agnostic เพื่อให้เบราว์เซอร์ท างานบน อุปกรณ์มือถือต่างๆได้ การพฒันาแอปพลิเคชนั่หรือผลิตภณัฑท์างซอฟตแ์วร์น้นัสามารถนา กระบวนการทางวิศวกรรมที่ ใชใ้นการพฒันาผลิตภณัฑป์ระเภทอื่นมาประยกุตใ์ชเ้พอื่วางแผนการดา เนินงาน ซ่ึงมีข้นัตอนทวั่ ไปดงัน้ี 1. การศึกษาความต้องการ –แอปพลิเคชนั่ถูกสร้างข้ึนตามความตอ้งการและเพื่อแกป้ ัญหาของลูกคา้ หรือผใู้ช้ผพู้ฒันาตอ้งทราบความตอ้งการหรือปัญหาก่อนดา เนินการออกแบบ ซ่ึงจะไดข้อ้กา หนดที่ เป็นคุณสมบตัิต่างๆ ของแอปพลิเคชนั่ซ่ึงเป็นข้นัตอนที่ตอ้งอาศยัประสบการณ์ของผพู้ฒันา เพื่อให้ ได้ความต้องการของลูกค้าหรือผู้ใช้ที่แท้จริง เพราะอาจมีการสื่อสารความต้องการที่คลาดเคลื่อน
2 2. การออกแบบ –เป็นหวัใจสา คญั ในการพฒันาแอปพลิเคชนั่ซ่ึงค่อนขา้งมีความซบัซอ้นและมี รายละเอียดจา นวนมาก ตอ้งอาศยัแนวคิดเชิงคา นวณมาประยกุตใ์ชใ้นการออกแบบอยา่งเป็นระบบ ผลจากการออกแบบ จะได้เป็นโครงร่างของแอปพลิเคชนั่ที่มีส่วนประกอบยอ่ยที่มีการกา หนด หน้าที่การท างานไว้ 3. การลงมือพัฒนา –ผู้พัฒนาหรือโปรแกรมเมอร์ (programmer) ลงมือเขียนคา สงั่ในส่วนประกอบ ยอ่ยที่ไดอ้อกแบบไว้ซ่ึงอาจพบขอ้จา กดัหรือขอ้บกพร่องจากข้นัตอนการออกแบบ หรือข้นัตอน ศึกษาความต้องการจึงเป็นเรื่องปกติที่ตอ้งยอ้นกลบัไปแกไ้ขการออกแบบหรือศึกษาความตอ้งการ 4. การทดสอบ –เป็นการตรวจสอบคุณภาพของแอปพลิเคชนั่เพื่อคน้หาขอ้ผดิพลาดที่มีอยรู่ะหวา่งที่ แอปพลิเคชนั่ทา งาน และสร้างความมนั่ใจแอปพลิเคชนั่ทา งานไดถู้กตอ้งและตรงความตอ้งการ อยา่งแทจ้ริง หากพบขอ้ผดิพลาด ตอ้งทา การปรับปรุงแกไ้ขและทดสอบซ้า เพื่อไม่ใหเ้กิด ขอ้ผดิพลาดระหวา่งการใชง้านจริง ซ่ึงอาจทา ใหเ้กิดความเสียหายอยา่งรุนแรงตามมา ภาพที่1 ภาพขั้นตอนการพัฒนาแอปพลิเคชั่น ในแต่ละขั้นตอนนั้น สามารถย้อนกลับไปปรับแก้ไขผลลัพธ์ที่ได้ในขั้นตอนก่อนหน้า โดยเฉพาะใน กรณีที่ลูกค้าหรือผู้ใช้มีส่วนร่วมในแต่ละขั้นตอนของการด าเนินงาน จะท าให้ก าหนดความต้องการ
3 ของแอปพลิเคชั่นได้ชัดเจนมากยิ่งขึ้น และได้ผลิตภัณฑ์ซอฟต์แวร์ที่มีความสามารถตรงกับต้องการ โดยแท้จริง 1.2 การวางแผนพัฒนา ในการพฒันาแอปพลิเคชนั่แต่ละข้นัตอนมีรายละเอียดที่ตอ้งจดัลา ดบัความสา คญัความ เร่งด่วน เพื่อใหก้ารจดัสรรทรัพยากรคนและเวลา เป็นไปอยา่งเหมาะสม รวมถึงตอ้งกา หนดบทบาท หนา้ที่ผรู้ับผดิชอบ และติดตามความกา้วหนา้ของการดา เนินงาน หากละเลยข้นัตอนดงักล่าว มี ความเสี่ยงที่ทา ใหก้ารพฒันาแอปพลิเคชนั่เสร็จไม่ทนัเวลา หรือมีการทา งานบางอยา่งไม่ตรงตามที่ ออกแบบไว้ การใช้งานการ์ดคัมบัง ผใู้ชจ้ะนา การ์ดแต่ละใบมาติดไวบ้นกระดาน ซ่ึงแบ่งช่องในแนวต้งัหรือแนวนอนกไ็ด้เพื่อ กา หนดแบ่งช่วงเวลาใหก้บังานยอ่ยๆ ซ่ึงไม่ไดม้ีขอ้กา หนดที่แน่นอน อาจข้ึนอยกู่บัการตกลงกนั ใน ทีมผพู้ฒันา สา หรับแอปพลิเคชนั่ที่ไม่ซบัซอ้นมากอาจแบ่งออกเป็น 3เฟส คือ 1. To do – ช่วงระยะที่จะทา 2. Doing – ช่วงระยะที่กา ลงัทา 3. Done – ช่วงระยะที่ทา เสร็จแลว้ ภาพที่ 2 การใช้งานการ์ดคัมบัง หากแอปพลิเคชนั่มีความซบัซอ้นมากอาจแยกกระดานออกเป็นหลายกระดานยอ่ยเพอื่ จดัการแต่ละเรื่องไดอ้ยา่งละเอียดยงิ่ข้ึน เช่น กระดานสา หรับการสา รวจความตอ้งการผใู้ช้การดาน สา หรับการออกแบบแอพพลิเคชนั่กระดานสา หรับการพฒันาแอปพลิเคชนั่และกระดานสา หรับ การทดสอบ
4 ภาพที่ 3 ตวัอยา่งการแบ่งเฟสบนกระดานคมับงั การใชก้ระดานคมับงัเริ่มจากการนา การ์ดที่ระบุงานติดไวใ้นเฟสแรกที่ช่องซา้ยมือและยา้ยมาทีละช่องทาง ขวาเพื่อแสดงถึงความกา้วหนา้ในการทา งานและสื่อสารใหผ้รู้่วมทีมไดร้ับทราบทวั่กนับนการ์ดแต่ละใบอาจ มีการกา หนดขอ้มูลต่าง ๆ ดงัน้ี –ค าอธิบายรายละเอียดของาน –ความสา คญัของงาน เช่น วกิฤติ(critical) ส าคัญมาก (major) ปกติ (normal) ไม่เร่งด่วน (minor) – ประเภทงาน เช่น ลกัษณะเฉพาะหรือฟีเจอร์(feature) ความผดิพลาดที่ตอ้งแกไ้ข(bug) งานอื่น ๆ –กา หนดเวลาแลวเสร็จ ้ –ผู้รับผิดชอบ 1.3 เครื่องมือช่วยวางแผนและติดตามความก้าวหน้า เทรลโล (Trello) เป็นแอปพลิเคชนั่ที่นา มาใชบ้ริหารจดัการงานในรูปแบบกระดานคมับงัไดง้่ายไม่ ซบัซอ้น รองรับการทา งานร่วมกบัผอู้ื่นไดอ้ยา่งมีประสิทธิภาพ สามารถสมคัรใชง้านไดท้นัทีผา่นทาง เว็บไซต์ trello.com โดยไม่ตอ้งเสียค่าใชจ้่ายแต่มีการจา กดัจา นวนกระดานหรือจา นวนผรู้่วมพฒันา
5 ภาพที่ 4 ตวัอยา่งแอพเทรลโล เว็บไซต์สร้างแอพพลิเคชั่น Thunkable การสร้างโมบายแอปพลิเคชนัสา หรับผเู้ริ่มตน้ที่สนใจไม่วา่จะเป็น นกัเรียน นิสิต นกัศึกษา หรือผทู้ี่ประกอบ อาชีพต่าง ๆ น้นัการหาเครื่องมือหรือโปรแกรมหรือเวบ็ไซตด์งักล่าวในปัจจุบนัมีใหเ้ลือกอยา่งมากมายแต่ ที่เป็นนิยมมากท้งัในและต่างประเทศ ที่มาแรงมากคือ Thunkable ซ่ึงเป็นเวบ็ไซตท์ ี่เรียนรู้ไดง้่ายมีเครื่องมือ และชุดคา สงั่ที่ใชรู้ปแบบของ Blockly เป็ นการสร้างบล๊อคเสมือนการเขียนโปรแกรมที่ใช้ในการสร้างโค้ด โดย Blockly น้นัเป็นผลิตภณัฑใ์นส่วนของ Google Education ของ Google . ดว้ยรูปแบบการใชง้านเครื่องมือน้ีที่ช่วยในการเขียนโปรแกรมง่ายมากข้ึนกวา่เมื่อในอดีต เพียงแค่ ลากแลว้วางเท่าน้นั ไม่จา เป็นตอ้งมีพ้ืนฐานมาก่อนหรือไม่มีความรู้ทางดา้นการเขียนโคด้มาก่อน กส็ามารถ ทา ไดแ้ละใชเ้วลาไม่เยอะในการเรียนรู้ดงัน้นั ไม่วา่จะประกอบอาชีพใด กส็ามารถสรรคส์ร้างโมบายแอป พลิเคชนัต้งัแต่ระบบพ้ืนฐานไปจนถึงข้นัผปู้ระกอบการได้
6 ภาพที่ 5 Thunkable Thunkable คืออะไร . Thunkable เป็นเครื่องมือสร้างโมบายแอปพลิเคชนัเพื่อติดต้งับนสมาร์ตโฟนที่ใชร้ะบบปฏิบตัิการ Android, iOS โดยเครื่องมือที่ใชใ้นการสร้างน้นันอกจากเครื่องมือพ้ืนฐานแลว้ยงัมีการเชื่อมต่อไปยงั ผลิตภัณฑ์จาก Google , Twitter และ Microsoft โดยชุดคา สงั่หลงัจากที่ออกแบบหนา้จอดว้ยเครื่องมือต่าง ๆ Thunkable คือเว็บไซต์ที่ให้เราสามารถสร้างโมบายแอปพลิเคชัน สวยๆ ใช้งานได้ และมีประโยชน์ ตาม แนวคิด “Thunkable enables anyone to create beautiful and powerful mobile apps” สามารถเข้าไปทดลอง ใช้งานได้ที่ https://thunkable.com . ผู้สร้างโมบายแอปพลิเคชนัสามารถแสดงถึงแนวคิดการเขียนโปรแกรมเป็นบลอ็กไดโ้ดยง่ายดว้ย ภาษาองักฤษอยา่งแต่ตอ้งมีการฝึกฝนเครื่องมือและชุดคา สงั่ใหค้ล่องและปฏิบตัิการดา้นโปรแกรมทดลอง แยกออกเป็นส่วน ๆ การสร้างแอปพลิเคชัน จาก Thunkable –เข้าใช้งานโดยใช้ผู้ใช้งานจาก Google – สร้างโมบายแอปพลิเคชนัจากข้นัพ้นืฐานถึงข้นัสูงได้ – สามารถติดต้งับนระบบปฏิบตัิการ Android และ ระบบปฏิบัติการ iOS ได้ – สามารถนา ข้ึน ดว้ย Google Play Store ส าหรับระบบปฏิบัติการ Android และข้ึน App Store ส าหรับ ระบบปฏิบัติการ iOS ได้
7 เครื่องมือที่น่าสนใจใน Thunkable . Media . –Speech Recognizer –> เป็ นการรู้จ าเสียงพูด จาก Google . – Text-to-Speech –> การแสดงเสียงจากข้อความ จาก Google . Sensor . – Accelerometer –> ใชง้านดา้นความเร่ง . – Barcode Scanner –> ใชง้านดา้นเครื่องอ่านบาร์โคด้ . – Clock –> ใช้งานด้านเวลา . – Gyroscope –> ใช้งานด้านวัดการหมุน . – Location Sensor –> ใชง้านดา้นตา แหน่ง . – NFC Sensor –> ใช้งานด้านเทคโนโลยีสื่อสารไร้สายระยะใกล้ . – Orientation Sensor –> ใช้งานด้านการปรับของสมาร์ตโฟน . –Pedometer –> ใชง้านดา้นการนบักา้ว . –Proximity Sensor –> ใช้งานด้านวัดความใกล้ชิด . Social . – Twitter –> เป็ นการใช้บริการสังคมออนไลน์ของ Twitter . Visualization . – Google Maps –> เป็ นการใช้บริการด้านแผนที่ของ Google . Artificial Intelligence . – Emotion Recognizer –> เป็ นการวิเคราะห์อารมณ์ ของ Microsoft . –Image Recognizer –> เป็ นการวิเคราะห์ภาพ ของ Microsoft
8 . LEGO MINDSTORMS –> สา หรับควบคุมอุปกรณ์หุ่นยนต์LEGO . Experimental . –Firebase DB –> เป็นการติดต่อกบัฐานขอ้มูลFirebase ของ Google . –Spreadsheets –> เป็นการติดต่อไฟลต์ารางทา การออนไลน์ของ Google น า Thunkable ไปใช้สร้างโมบายแอปพลิเคชันอะไรได้บ้าง . – โปรแกรมคา นวณตวัเลขอยา่งง่าย . – โปรแกรมสุ่มตวัเลข . – โปรแกรมฝึ กเขียนตัวอักษร . – โปรแกรมฝึ กวาดภาพ . – โปรแกรมประยกุตด์า้นงานต่างๆ ที่ใชฐ้านขอ้มูล . – โปรแกรมนับการเดิน . – โปรแกรมวิเคราะห์อารมณ์ วิธีการสร้างแอปพลิเคชัน จาก Thunkable เข้าใช้งานโดยใช้ผู้ใช้งานจาก Google สร้างโมบายแอปพลิเคชนัจากข้นัพ้ืนฐานถึงข้นัสูงได้ สามารถติดต้งับนระบบปฏิบัติการ Android และ ระบบปฏิบัติการ iOS ได้ สามารถนา ข้ึน ดว้ย Google Play Store ส าหรับระบบปฏิบัติการ Android และข้ึน App Store ส าหรับ ระบบปฏิบัติการ iOS ได้
9 บรรณานุกรม KruNui 2564. “Chapter 1 : การพัฒนาแอปพลิเคชั่น”. [ระบบออนไลน์]. แหล่งที่มา https://nuiphen.wordpress.com/chapter-1- %E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%9E%E0%B8%B1%E0%B8%92%E0%B8%99%E0%B8% B2%E0%B9%81%E0%B8%AD%E0%B8%9B%E0%B8%9E%E0%B8%A5%E0%B8%B4%E0%B9%80%E0%B 8%84%E0%B8%8A%E0%B8%B1%E0%B9%88%E0%B8%99/ (25 สิงหาคม 2023) KruNui 2564. “Chapter 2 : เว็บไซต์สร้างแอพพลิเคชั่น Thunkable”. [ระบบออนไลน์]. แหล่งที่มา https://nuiphen.wordpress.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0 %b8%8b%e0%b8%95%e0%b9%8c%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0 %b9%81%e0%b8%ad%e0%b8%9e%e0%b8%9e%e0%b8%a5%e0%b8%b4%e0%b9%80%e0%b8%84%e0 %b8%8a/ (25 สิงหาคม 2023)