1

ระบบสตวโลกแอปพลเคชน Animal Application System

อภนนท สมบรณกล

สารนพนธนเปนสวนหนงของการศกษา หลกสตรวทยาศาสตรมหาบณฑต สาขาวชาเทคโนโลยสารสนเทศ

คณะวทยาการและเทคโนโลยสารสนเทศ มหาวทยาลยเทคโนโลยมหานคร

ปการศกษา 2559

I

หวขอ ระบบ สตวโลกแอปพลเคชน Animal Application System ชอนกศกษา นายอภนนท สมบรณกล รหสนกศกษา 5817700002 หลกสตร วทยาศาสตรมหาบณฑต สาขาเทคโนโลยสารสนเทศ ปการศกษา 2559 อาจารยทปรกษา ดร.สรณพร ภมวฒสาร

บทคดยอ ระบบโครงงาน สตวโลกแอปพลเคชน (Animal Application System) ถกพฒนาขนบนอปกรณสมารทโฟนและแทบเลต ของระบบปฏบตการ iOS ซงพฒนาขนส าหรบเดกวย 4-5 ปและผทใหความสนใจเรองของสตวชนดตาง ๆ โดยแอปพลเคชนนผใชจะไดเรยนรสตวชนดตางๆ ท งภาพ เสยง และวดโอของสตวชนดตางๆ และไดฝกทกษะการจ าภาพ และเสยงจากเกมทสรางขนบนอปกรณสมารทโฟน และแทบเลต เนองดวยปจจบนผปกครองนยมใหบตรหลานของตนเอง เรยนร และฝกทกษะการจ าในดานตางๆ บนอปกรณสมารทโฟน และแทบเลต

II

กตตกรรมประกาศ โครงงานเทคโนโลยสารสนเทศนส าเรจลลวงดวยด เนองจากไดรบความชวยเหลอเปนอยางสงจาก อาจารย ดร.สรณพร ภมวฒสาร ซงเปนอาจารยทปรกษาโครงงานทไดใหค าแนะน ามาโดยตลอด และขอขอบคณอาจารยทกทาน ทไดใหความรอนมคาแกผจดท า ขอขอบพระคณ อาจารยเชาวรน สกลวรากลาง ซงใหความรทมคณคาดานการใชเครองมอ UML (Unified Modeling Language) คอยหาตวอยางดๆ และใหค าปรกษาอยางสม าเสมอ ขอขอบพระคณอาจารยในภาควชาเทคโนโลยสารสนเทศ คณะวทยาการ และเทคโนโลยสารสนเทศ ทประสทธประสาทความรใหกบผจดท าโครงงานมาโดยตลอด ขอขอบพระคณก าลงใจจากครอบครว เพอนๆ ทคณะวทยาการ และเทคโนโลยสารสนเทศทคอยชวยเหลอ และเปนก าลงใจใหผจดท า ท าใหโครงงานนส าเรจลลวงไปดวยด

อภนนท สมบรณกล ธนวาคม 2559

III

สารบญ หนา

บทคดยอ ............................................................................................................................................. I

กตตกรรมประกาศ.............................................................................................................................. II

สารบญ .............................................................................................................................................. III

สารบญรป ......................................................................................................................................... V

สารบญตาราง ..................................................................................................................................VIII

บทท 1 บทน า ................................................................................................................................... 1

1.1 ปญหาและแรงจงใจ ................................................................................................................ 1

1.2 แนวทางการแกปญหา ............................................................................................................ 1

1.3 วตถประสงค ........................................................................................................................... 1

1.4 ภาพรวมของระบบทจดท า ...................................................................................................... 1

1.5 ขอบเขตของโครงงาน ............................................................................................................. 2

1.6 แผนการด าเนนงาน ................................................................................................................ 3

บทท 2 พนฐานและทฤษฎทเกยวของ ............................................................................................... 5

2.1 พฒนาการดานสตปญญาของเดกอาย 4-5 ป .......................................................................... 5

2.2 ผลส ารวจการใชสมารทโฟน และแทบเลตของเดกอาย 4-5 ป ................................................ 5

2.3 การจ าแนกสตว ..................................................................................................................... 6

บทท 3 ระบบทน าเสนอ .................................................................................................................... 8

3.1 กลาวน า .................................................................................................................................. 8

3.2 Use case diagram of Animal Application ...................................................................... 8

3.3 Use case diagram of Animal web service system ....................................................... 9

3.4 Use case description of Animal Application .............................................................. 10

3.5 Use case description of Animal web service system ............................................... 16

3.6 Activity diagram of Animal Application ....................................................................... 25

3.7 Activity diagram of Animal web service system ........................................................ 31

3.8 Class diagram of Animal Application .......................................................................... 41

IV

สารบญ (ตอ)

หนา

3.9 ค าอธบาย Class diagram for Animal Application ........................................................ 42

3.10 E-R diagram of Animal Web Service System ........................................................... 49

3.11 Data Dictionary of E-R Diagram .................................................................................. 51

3.12 Class diagram of Animal web service system ........................................................ 52

3.13 ค าอธบาย Class diagram for Animal web service system ...................................... 53

3.14 Sequence diagram of Animal Application ................................................................ 60

3.15 Sequence diagram of Animal web service System ................................................ 66

บทท 4 ผลการด าเนนงาน ............................................................................................................... 73

4.1 ผลการด าเนนงานของ Animal Application...................................................................... 73

4.2 ผลการด าเนนงานของ Animal web service system ...................................................... 83

บทท 5 สรปผลการด าเนนงาน ...................................................................................................... 100

5.1 ปญหา และอปสรรค แนวทางการแกไข .............................................................................. 100

5.2 แนวทางการน าไปพฒนาในอนาคต ..................................................................................... 100

บรรณานกรม ................................................................................................................................. 101

V

สารบญรป หนา

รปท 3. 1 Use case diagram ของระบบ Animal Application ..................................................... 9 รปท 3. 2 Use case diagram ของระบบ Animal web service system ..................................... 9 รปท 3. 3 Use case for View files .............................................................................................. 10 รปท 3. 4 Use case for View image gallery ............................................................................. 12 รปท 3. 5 Use case for Play shadow game ............................................................................. 13 รปท 3. 6 Use case for Play sound game ................................................................................ 15 รปท 3. 7 Use case for Login ...................................................................................................... 16 รปท 3. 8 Use case for Manage data ........................................................................................ 18 รปท 3. 9 Use case for Random quiz for the game .............................................................. 23 รปท 3. 10 Activity diagram of View files Use Case (UC1) .................................................. 25 รปท 3. 11 Activity diagram of View image gallery Use Case (UC1.1) ................................ 27 รปท 3. 12 Activity diagram of Play shadow game Use Case (UC2) ................................... 28 รปท 3. 13 Activity diagram of Play sound game Use Case (UC3) ..................................... 30 รปท 3. 14 Activity diagram of Login Use case ....................................................................... 31 รปท 3. 15 Activity diagram of Manage data Use case ......................................................... 32 รปท 3. 16 Activity diagram of Manage animal data Use case ........................................... 34 รปท 3. 17 Activity diagram of Manage animal image gallery Use case ........................... 35 รปท 3. 18 Activity diagram of Manage quiz for sound game Use case ........................... 37 รปท 3. 19 Activity diagram of Manage quiz for shadow game Use case ......................... 38 รปท 3. 20 Activity diagram of Random quiz for game Use case ....................................... 40 รปท 3. 21 Class diagram ของระบบ Animal application ........................................................ 41 รปท 3. 22 Class diagram of ViewController ........................................................................... 42 รปท 3. 23 Class diagram of TypeAnimalViewController ..................................................... 42 รปท 3. 24 Class diagram of MainData ..................................................................................... 43 รปท 3. 25 Class diagram of DataViewController ................................................................... 44 รปท 3. 26 Class diagram of GalleryViewController .............................................................. 45 รปท 3. 27 Class diagram of ImageViewController ................................................................ 46 รปท 3. 28 Class diagram of GameShadowViewController .................................................. 46 รปท 3. 29 Class diagram of ShowScoreShadow ................................................................... 47

VI

สารบญรป (ตอ) หนา

รปท 3. 30 Class diagram of GameSoundViewController ..................................................... 48 รปท 3. 31 Class diagram of ShowScoreSound ...................................................................... 49 รปท 3. 32 E-R Diagram of Animal web service system ........................................................ 50 รปท 3. 33 Class diagram of Animal web service system .................................................... 53 รปท 3. 34 Class diagram of MyDatabase ................................................................................ 53 รปท 3. 35 Class diagram of Login ............................................................................................ 54 รปท 3. 36 Class diagram of InsertData .................................................................................... 55 รปท 3. 37 Class diagram of UpdateData ................................................................................ 55 รปท 3. 38 Class diagram of InsertGallery ............................................................................... 56 รปท 3. 39 Class diagram of DeleteGallery ............................................................................. 56 รปท 3. 40 Class diagram of InsertShadow ............................................................................. 57 รปท 3. 41 Class diagram of InsertTestShadow ...................................................................... 57 รปท 3. 42 Class diagram of DeleteShadow ........................................................................... 58 รปท 3. 43 Class diagram of InsertTestSound......................................................................... 58 รปท 3. 44 Class diagram of DeleteSound .............................................................................. 59 รปท 3. 45 Class diagram of RandomShadow ........................................................................ 59 รปท 3. 46 Class diagram of RandomSound ........................................................................... 60 รปท 3. 47 Sequence diagram of View files ............................................................................ 61 รปท 3. 48 Sequence diagram of View image gallery ........................................................... 63 รปท 3. 49 Sequence diagram of Play shadow game ........................................................... 64 รปท 3. 50 Sequence diagram of Play sound game .............................................................. 65 รปท 3. 51 Sequence diagram of Login ................................................................................... 67 รปท 3. 52 Sequence diagram of Manage animal data ........................................................ 68 รปท 3. 53 Sequence diagram of Manage animal image gallery ........................................ 69 รปท 3. 54 Sequence diagram of Manage quiz for sound game ........................................ 70 รปท 3. 55 Sequence diagram of Manage quiz for shadow game ..................................... 71 รปท 3. 56 Sequence diagram of Random quiz for game ................................................... 72 รปท 4. 1 หนาจอเมนหลก 73 รปท 4. 2 หนาจอเมนหมวดหมของสตว .......................................................................................... 74

VII

สารบญรป (ตอ) หนา

รปท 4. 3 หนาจอเมนสตวตามชนดทเลอก ...................................................................................... 75 รปท 4. 4 หนาจอแสดงเมนแสดงรายละเอยดของสตวชนดทเลอก .................................................. 76 รปท 4. 5 หนาจอแสดงวดโอของสตว ............................................................................................. 77 รปท 4. 6 หนาจอแสดงภาพของสตวขนาดใหญ .............................................................................. 78 รปท 4. 7 หนาจอแสดงคลงภาพสตว .............................................................................................. 78 รปท 4. 8 หนาจอแสดงค าถามในเกมเงาสตวปรศนา ....................................................................... 79 รปท 4. 9 หนาจอแสดงคะแนนจากการเลนเกมเงาปรศนา .............................................................. 80 รปท 4. 10 หนาจอแสดงค าถามในเกมทายเสยงสตว ....................................................................... 81 รปท 4. 11 หนาจอแสดงคะแนนจากการเลนเกมทายเสยงสตว ....................................................... 82 รปท 4. 12 หนาจอการเขาสระบบ .................................................................................................. 83 รปท 4. 13 หนาจอแสดงเมนการจดการขอมล ................................................................................ 84 รปท 4. 14 หนาจอเพมขอมลสตว ................................................................................................... 85 รปท 4. 15 หนาจอแสดงขอมลสตวทงหมด ..................................................................................... 86 รปท 4. 16 หนาจอแกไขขอมลสตว ................................................................................................. 87 รปท 4. 17 หนาจอเพมภาพสตวใน Gallery ................................................................................... 88 รปท 4. 18 หนาจอแสดงภาพสตวใน Gallery ................................................................................. 89 รปท 4. 19 หนาจอแสดงการลบภาพสตวใน Gallery...................................................................... 90 รปท 4. 20 หนาจอเพมภาพเงาสตว ................................................................................................ 91 รปท 4. 21 หนาจอแสดงภาพเงาทงหมด ......................................................................................... 92 รปท 4. 22 หนาจอเพมขอมลค าถามเกมเงาภาพปรศนา ................................................................. 93 รปท 4. 23 หนาจอแสดงขอมลค าถามเกมเงาภาพปรศนา ............................................................... 94 รปท 4. 24 หนาจอลบขอมลค าถามเกมเงาภาพปรศนา ................................................................... 95 รปท 4. 25 หนาจอเพมขอมลค าถามเกมทายเสยงสตว .................................................................... 96 รปท 4. 26 หนาจอแสดงขอมลค าถามเกมทายเสยงสตว ................................................................. 97 รปท 4. 27 หนาจอลบขอมลค าถามเกมทายเสยงสตว ..................................................................... 98

VIII

สารบญตาราง หนา

ตารางท 1. 1 ตารางการด าเนนงานโครงงาน 1 ................................................................................. 3 ตารางท 1. 2 ตารางการด าเนนงานโครงงาน 2 ................................................................................. 4 ตารางท 2. 1 ขอมลทวไปของผปกครองของเดกระดบอนบาล 1-2 (N = 115) 6 ตารางท 3. 1 ตาราง animal เกบขอมลสตว 51 ตารางท 3. 2 ตาราง gallery เกบขอมลคลงรปภาพสตว ................................................................. 51 ตารางท 3. 3 ตาราง type เกบขอมลประเภทของสตว ................................................................... 51 ตารางท 3. 4 ตาราง soundgame เกบขอมลเกมทายเสยงสตว .................................................... 52 ตารางท 3. 5 ตาราง shadowgame เกบขอมลเกมเงาสตว ............................................................ 52

1

บทท 1 บทน า

1.1 ปญหาและแรงจงใจ ปจจบนนผปกครองนยมใหบตรหลานของตนเอง เรยนร และฝกทกษะการจ าในดานตาง ๆบนอปกรณสมารทโฟน และแทบเลต จงสงผลใหมผพฒนา Application ทเกยวกบสตวโลกนานาชนด ออกมาใหวย 4-5 ป และผทสนใจเรองของสตว ไดรจกกบสตว ชนดตางๆ แต Application เหลานนอาจจะยงไมตอบโจทยกบเดก ๆ และผทสนใจเรองของสตว เพราะวา Application สวนใหญจะมแค เกม ใหไดทดสอบความร และความจ าของตนเอง แตถาตองการเรยนร และฝกความจ า ตอง Download Application เพมเตม สงผลใหอาจจะตองมคาใชจายในการ Download Application เหลานน เพอใหไดเรยนรเกยวกบสตวชนดตาง ๆ

1.2 แนวทางการแกปญหา

จากปญหาเบองตนทไดกลาวมาแลวนน จงไดมแนวทางในการแกปญหา และเกดแรงจงใจในการพฒนา ระบบสตวโลกแอปพลเคชนขน ส าหรบเดกวย 4-5 ป และผทสนใจเรองของสตว โดย แอปพลเคชนน เดก ๆ และผทสนใจเรองของสตว จะไดเรยนรสตวชนดตาง ๆ ทงภาพ เสยง และวดโอของสตวชนดตางๆ และเดกๆ จะไดฝกทกษะการจ าภาพ และเสยงจากเกมทผพฒนาสรางขนบนอปกรณสมารทโฟน และแทบเลต โดยเนนเฉพาะระบบปฏบตการ iOS เทานน

1.3 วตถประสงค

1. เพอใหผเลนไดเรยนรพฤตกรรมของสตวชนดตางๆ ไดสะดวกมากขน 2. เพอใหผเลนไดฟงเสยงของสตวชนดตางๆ ไดอยางถกตอง 3. เพอใหผเลนไดฝกทกษะการจ าภาพ และเสยง

1.4 ภาพรวมของระบบทจดท า

ในการพฒนาแอปพลเคชน ใชภาษา Swift รนบนระบบปฏบตการ iOS โดยรายละเอยดการท างานของแอปพลเคชนม 3 สวน ดงน

2

สวนท 1 แกลลอรรปภาพของสตว มรายละเอยดดงน 1. ผใชสามารถฟงเสยงของสตวได

เมอผ ใช เลอกฟงเสยงของสตวทตองการ ระบบจะดงไฟล เสยงจากแอปพลเคชน ทผพฒนาสรางขน มาแสดงผลทสมารทโฟน หรอแทบเลตของผใช 2. ผใชสามารถเลอกดวดโอ ของสตวทตองการได

เมอผใชเลอกดวดโอ ระบบจะดงไฟลวดโอจากแอปพลเคชน ทผพฒนาสรางขน มาแสดงผลทหนาจอสมารทโฟน หรอแทบเลตของผใช 3. ผใชสามารถเลอกดคลงรปภาพของสตวทตองการได

เมอผใชเลอกดคลงรปภาพของสตวทตองการ ระบบจะดงไฟลภาพจากแอปพลเคชน ทผพฒนาสรางไว มาแสดงผลทหนาจอสมารทโฟน หรอแทปเลตของผใช

สวนท 2 เกมทายเสยงสตว มรายละเอยดดงน เมอผใชเลอกเลนเกมทายเสยงสตว ระบบจะดงไฟลเสยงมาแสดงผลใหผใชเลอกวา

เสยงทแสดงผลนนเปนเสยงของสตวชนดใด โดยคลกเลอกรปภาพหวสตวทแสดงผลบนหนาจอสมารทโฟน หรอแทบเลต ซงระบบจะสรางเกมทายเสยงไวทงหมด 5 ขอ

สวนท 3 เกมเงาสตวปรศนา มรายละเอยดดงน

เมอผใชเลอกเลนเกมเงาสตวปรศนา ระบบจะดงไฟลทเปนเงาของสตว และมตวเลอกเปนภาพสตวมาแสดงผลบนหนาจอ ใหผใชเลอกวาเงาของสตวทแสดงผลนนเปนเงาของสตวชนดใด โดยคลกเลอกรปภาพสตวทแสดงผลบนหนาจอสมารทโฟน หรอแทบเลต ซงระบบจะสรางเกมเงาสตวปรศนา ไวทงหมด 5 ขอ

1.5 ขอบเขตของโครงงาน

ระบบสตวโลกแอปพลเคชน เปนการพฒนาเพอสรางทกษะ และเพอการเรยนรเรองสตวชนดตาง ๆ บนอปกรณสมารทโฟน และแทบเลต ของระบบปฏบตการ iOS เทานน โดยมขอบเขตการท างาน ดงตอไปน

1. สามารถน าไฟลวดโอ ไฟลภาพ และไฟลเสยง ทผพฒนาสรางขน มาแสดงผลบนอปกรณสมารทโฟน และแทบเลตได

2. สามารถเกมทายเสยงของสตวได 3. สามารถเลนเกมเงาภาพของสตวได

3

1.6 แผนการด าเนนงาน ตารางท 1. 1 ตารางการด าเนนงานโครงงาน 1

แผนการท างาน แตละสปดาห

สงหาคม กนยายน ตลาคม พฤศจกายน

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1. เสนอหวขอโครงงาน

2. เกบรวบรวมขอมล และศกษาการท างานของระบบ

3. วเคราะห และออกแบบระบบงาน

3.1 สรางUse Case Diagram

3.2 สราง Activity Diagram

3.3 สราง Class Diagram

3.4 สราง Sequence Diagram

4. พฒนาโปรแกรม

4

ตารางท 1. 2 ตารางการด าเนนงานโครงงาน 2

แผนการท างาน แตละสปดาห

มกราคม กมภาพนธ มนาคม เมษายน 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1.พฒนาโปรแกรม

2.ทดสอบโปรแกรม และการใชงาน

3.ตรวจสอบ และแกไขขอผดพลาด

4.จดท าคมอการใชโปรแกรม

5.เรมใชงานจรง

5

บทท 2 พนฐาน และทฤษฎทเกยวของ

การพฒนาโปรแกรมสตวโลกแอปพลเคชน (Animal Application System) เปนการพฒนาเพอใหผใชเกดความสนกสนาน และสรางทกษะความจ าจากเกมทพฒนาขน บนอปกรณสมารทโฟนและแทบเลต ซงมทฤษฎทเกยวของ ดงตอไปน 2.1 พฒนาการดานสตปญญาของเดกอาย 4-5 ป เดกตงแตแรกเกดจนถงขวบปแรกจะมพฒนาการดานสตปญญา รอยละ 20 และเมออาย 4 ป จะมพฒนาการดานสตปญญาถงรอยละ 50 และจากชวงอาย 4-8 ป จะพฒนาเพมขนอกรอยละ 30 รวมเปน 80% และทเหลออก 20% จะอยในชวงอาย 8-17 ป ซงแสดงใหเหนวาพฒนาการดานสตปญญาของมนษย จะไดรบการพฒนาในวยเดก ซงถาหากวาไมไดรบการพฒนาในดานสตปญญาอยางถกตอง ความสามารถในการเรยนรอาจจะถกยบยงได และสงแวดลอมตาง ๆ ถอวาเปนสวนส าคญทจะท าใหพฒนาการดานสตปญญาของเดกในระยะ 4-5 ป มการพฒนาเพมขนได เดกวย 4 ขวบ เรมท าอะไรไดเอง โดยไมตองมผใหญคอยชวย ดงนนเดกวยนสวนมากมความเชอมน ชอบยนยนความคดของตนเอง ความสนใจของเดกวยนมกวางขวางขน และสามารถท ากจกรรมไดนานขน เดกวย 5 ขวบ เดกวยนมอสระมากขน มความมนใจมากขน และเขาใจค าสงมากขน แตกยงตองการการยอมรบจากผอน การใชกลามเนอมอ และการใชสายตามประสานกนไดดขน สามารถจ าตวเลข และตวอกษรตามล าดบได เดก 5 ขวบยงคงชอบเลนบทบาทสมมต แตกมความสนใจสงทเปนจรงในโลกน สรปไดวา เดกวย 4-5 ขวบ มลกษณะทแตกตางกนดงทกลาวมาแลว แตไมไดหมายความวาเมอเดกอายมากขนอกหนงขวบจะมพฒนาการเพมขนอยางเหนไดชด แตการพฒนา หรอเปลยนแปลงจะคอยเปนคอยไป และเปนไปอยางตอเนอง อกทงเดกแตละคนกมพฒนาการทแตกตางกนเชนกน (พญ.จนทรเพญ ชประภาวรรณ, 2556)

2.2 ผลส ารวจการใชสมารทโฟน และแทบเลตของเดกอาย 4-5 ป ผพฒนาไดแจกแบบสอบถามกบผปกครองของเดกระดบอนบาล 1-2 ของโรงเรยนวฒวทยา จงหวดชลบร เพอประเมนการมสมารทโฟน และแทบเลตใช จ านวน 115 คน ไดรบแบบสอบถามตอบกลบจ านวน 115 ชด คดเปนรอยละ 100 ของจ านวนผปกครองของเดกระดบอนบาล 1 -2 พบขอมลดงน

ขอมลทวไปของผปกครองของเดกระดบอนบาล 1-2 ปรากฏในตารางท 2.1

6

ตารางท 2. 1 ขอมลทวไปของผปกครองของเดกระดบอนบาล 1-2 (N = 115)

ขอมล รายละเอยด ความถ รอยละ 1.เพศ ชาย 49 42.61

หญง 66 57.39

2.ความสมพนธ บดา/มารดา 72 62.61

ป/ยา/ตา/ยาย 26 22.61

อน ๆ 17 14.78

3.ระดบการศกษาของบตรหลาน

อนบาล 1 62 53.91

อนบาล 2 53 46.09

4.การมสมารทโฟน หรอแทบเลตใหบตรหลานใช

ม 72 62.61

ไมม 43 37.39

จากตารางท 2.1 พบวา โดยภาพรวมของผปกครองของเดกระดบอนบาล 1-2 เปนเพศ ชาย 49 คน มเพศหญง

66 คน มความสมพนธ เปน บดา/มารดา 72 คน เปนป/ยา/ตา/ยาย 26 คน เปนอน ๆ 17 คน ระดบการศกษาของบตรหลาน อยในระดบอนบาล 1 จ านวน 62 คน ระดบอนบาล 2 จ านวน 53 คน และการมสมารทโฟน หรอแทบเลตใหบตรหลานใช 72 คน ไมมสมารทโฟน หรอแทบเลตใหบตรหลานใช 43 คน 2.3 การจ าแนกสตว สตว (องกฤษ: Animal) เปนสงมชวตกลมทใหญทสด เปนสงมชวตพวกทนวเคลยสมผนงหอหม ประกอบดวย หลายเซลลมการแบงหนาทของแตละเซลลเพอท าหนาทเฉพาะอยางแบบถาวร ไมมคลอโรฟลล สรางอาหารเองไมได ด ารงชวตไดหลายลกษณะทงบนบกในน า และบางชนดเปนปรสต อาณาจกรนไดแกสตวทกชนด ตงแตสตวไมมกระดกสนหลงจนถงสตวทมกระดกสนหลง

2.3.1 สตวบก เปนสงมชวต ทเปนสตวเดรจฉาน มทง 2ขาและ 4ขาหรอมากกวานน ไมนบคน จะอาศยใชชวตอยบนบก สวนใหญเปนสตวทเลยงลกดวยนมทใหญ ๆ คอ พวกทออกลกเปนไข เชน ไก พวกออกลกเปนตวเชน แมว สนข ชาง พวกทมกระเปาหนาทองเชน จงโจ และพวกทมรก โดย สตวบก สามารถแบงออกได 2 ชนด • สตวเลอยคลาน คอสตว 4 เทา ผวหนงมเกลดปกคลม บางชนดจะเปนกระดองหอหม บางชนดไมปรากฏเทา

7

• สตวเลยงลกดวยนม จดเปนสตวชนสง มตอมส าหรบสรางน านมไวเลยงลก บางชนดสามารถบนได เชนคางคาว บางชนดอยในน า เชน ปลาวาฬ โลมา พะยน เปนสตวเลอดอน หายใจดวยปอด 2.3.2 สตวปก หรอ นก (รวมถง ไก , เปด, หาน , ไกฟา) จดอย ในไฟลมสตวมแกนสนหลง ชน Aves (ค าวา Aves เปนภาษาละตน หมายถง นก) โดยมลกษณะทวไปคอ เปนสตวทวบาท เลอดอน ออกลกเปนไข รยางคคหนาเปลยนแปลงไปเปนปก มขนนก และมกระดกทกลวงเบา ในปจจบนทวโลกมนกอยประมาณ 8,800 ถง 9,800 ชนด (ตามการจดอนกรมวธานทตางกน) ซงนบวานกเปนชนของสตวมกระดกสนหลงทมความหลากหลายมากทสด ในบรรดาชนของสตวมกระดกสนหลงทงหลายทอาศยอยบนพนดน ความหลากหลายของนกนบเนองไปตงแตในเร องของขนาดตว สสน เสยงรอง อาหารการกน และถนทอยอาศย นกเปนสตวทมความส าคญเปนอนมากทงตอระบบนเวศและตอชวตมนษย ความสมพนธระหวางคนกบนกเปนไปอยางแนนแฟน และการเกอกลกนระหวางนกกบสรรพสงตางๆ ตามธรรมชาตกเปนไปอยางแนบแนน ถาหากปราศจากนก คงเปนเรองยากทจะจนตนาการถงการด ารงอยตอไปของชวภาคใบน 2.3 .3 สตวสะเทนน าสะเทนบก หรอทนยมเรยกอย างท ว ไปว า สตวคร งบกคร งน า (องกฤษ: Amphibian) เปนสตวมกระดกสนหลงทอยในชน Amphibia อาศยอยไดทงในน าและบนบก มลกษณะเฉพาะ คอ ผวหนงมตอมเมอกท าใหผวหนงชมชนตลอดเวลา ผวหนงเปยกลนอยเสมอ ไมมเกลดหรอขน หายใจดวยเหงอก , ปอด, ผวหนง หรอผวในปากในคอ โดยชนผวหนงนนมลกษณะพเศษสามารถแลกเปลยนออกซเจนไดเนองจากมโครงขายหลอดเลอดฝอยจ านวนมาก เพอใชในการหายใจ สบพนธโดยการผสมพนธภายนอกล าตว สบพนธเมออาย 2–3 ป ออกลกเปนไขอยในน า ไมมเปลอก วางไขเปนกลมในน ามสารเปนวนหม สตวสะเทนน าสะเทนบกสวนใหญจะมการเปลยนแปลงรปรางทงภายนอกและภายในอยางสนเชง ไปตามวงจรชวต ตวออนอาศยอยในน า หายใจดวยเหงอก เมอโตขนจะเปลยนรปรางอาศยอยบนบก หายใจดวยปอดหรอผวหนง โดยเฉพาะในชวงฤดแลงในชวงระหวางฤดหนาวถงฤดรอน สวนใหญจะขดรจ าศล เพอหนความแหงแลง มใหผวหนงแหง ถาผวหนงแหงจะหายใจไมไดและตายในทสด เพราะกาชจากอากาศตองละลายไปกบน าเมอกทผวหนง แลวจงแพรเขาสกระแสโลหต ระยะนจะใชอาหารทสะสมไวในรางกายอยางชา ๆ นวตและซาลามานเดอรกเปนสตวครงบกครงน าเหมอนกน แตแตกตางกนตรงทนวตและซาลามานเดอรจะยงคงหางของมนไว เมอเจรญเตบโตเตมท สตวสะเทนน าสะเทนบกถอเปนสตว เลอดเยน เชนเดยวกบสตวพวกปลา หรอแมลง หรอสตวเลอยคลาน ปจจบนมการอนกรมวธานสตวในชนแลวกวา 6,500 ชนด

8

บทท 3 ระบบทน าเสนอ

3.1 กลาวน า เนองจากปญหา และแรงจงใจทเกดขนในการสรางแอปพลเคชน เรองสตวโลกแอปพลเคชน ทมงเนนใหเดกอาย 4-5 ขวบ และผทสนใจเรองของสตว ไดเรยนรเรองสตวชนดตาง ๆ จากภาพ เสยง และวดโอ อกทงเดกยงไดฝกทกษะการจ าภาพ และเสยงจากเกม ทผพฒนาสรางขน ดงทไดกลาวมาแลวในบทท 1 จงเปนทมาของการพฒนา และออกแบบแอปพลเคชน Animal Application เพอใหเดกไดมพฒนาการดานสตปญญาเพมมากขน แนวคด และการออกแบบ Animal Application นนไดน าเครองมอ UML (Unified Modeling Language) มาใชในการออกแบบเพอใหเหนภาพรวมการท างาน และขอบเขตของระบบ การสอสารระหวางผใชกบระบบ และล าดบขนตอนการท างานของระบบในแตละเหตการณ โดยอธบายกระบวนการท างานของระบบตามความตองการของผใชดวย Use case diagram แสดงจดเรมตน และจดสนสดของกจกรรมทเกดขนในแตละ Use case ไดดวย Activity diagram แสดงแผนภาพล าดบเหตการณทเกยวของกนระหวาง Object ของแตละ Use case ดวย Sequence diagram อธบายโครงสรางของขอมล และกจกรรมหลกทเกดขนกบขอมลนนดวย Class diagram 3.2 Use case diagram of Animal Application เปนแผนภาพทแสดงขอบเขต และฟงกชนการท างานของระบบทเกดขนในการใชงาน Animal Application วามสวนใดเกยวของกนบาง ดงรปท 3.1

9

3.3 Use case diagram of Animal web service system เปนแผนภาพทแสดงขอบเขต และฟงกชนการท างานของระบบทเกดขนในการใชงาน Animal web service system วามสวนใดเกยวของกนบาง ดงรปท 3.2

รปท 3. 1 Use case diagram ของระบบ Animal Application

รปท 3. 2 Use case diagram ของระบบ Animal web service system

10

3.4 Use case description of Animal Application 3.4.1 Use case for View files คอ แผนภาพทแสดงขอบเขตกระบวนการดไฟลภาพ ไฟลวดโอ และไฟลเสยง ดงรปท 3.3

Use Case UC1: ดไฟลภาพ ไฟลวดโอ และไฟลเสยง Scope: ระบบสตวโลกแอปพลเคชน Level: User-goal Primary Actor: User Stakeholders and their interests: User ตองการดไฟลภาพ ไฟลวดโอ และไฟลเสยงของ สตวทตองการดได

Animal web service system ตองการใหระบบสตวโลกแอปพลเคชน ดง ขอมลไปใชงาน

Pre-condition: มไฟลภาพ ไฟลวดโอ และไฟลเสยงในระบบ Success Guarantee: ไฟลภาพ ไฟลวดโอ และไฟลเสยงแสดงผลตรงตามทผใช

เลอก Main Success Scenario:

1. ผใชเลอกหมวดของสตวทตองการ

2. ระบบสรางเมนรปภาพสตวตามหมวดทผใชเลอก

3. ระบบดงขอมลภาพสตวตามหมวดทผใชเลอกจาก Animal web service system

4. Animal web service system สงคนคาเปนชดขอมลของภาพสตวใหระบบ

5. ระบบดงขอมลภาพสตวจากชดขอมล เพอแสดงผลบนหนาจอสมารท- โฟนของผใช

รปท 3. 3 Use case for View files

11

6. แสดงภาพสตวตามหมวดทผใชเลอกบนอปกรณสมารทโฟนของผใช 7. ผใชเลอกภาพสตวทตองการดรายละเอยด 8. ระบบสรางเมนรายละเอยดของสตวตามภาพสตวทผใชเลอก 9. แสดงเมนรายละเอยดของสตวบนอปกรณสมารทโฟนของผใช 10. ผใชเลอกเมนรายละเอยดของสตวทตองการ 11. ระบบตรวจสอบเมนทผใชเลอก ซงมใหเลอก 3 เมนคอ

11.1 เมนฟงเสยงของสตว 11.1.1 ระบบอานขอมลไฟลเสยง 11.1.2 ระบบแสดงผลเปนเสยงของสตว

11.2 เมนดวดโอ 11.2.1 ระบบอานขอมลไฟลวดโอ 11.2.2 ระบบแสดงผลเปนวดโอของสตว 11.2.3 ถาผใชกดปม Back 1) ระบบหยดเลนไฟลวดโอ 2) แสดงเมนรายละเอยดของสตว

11.3 เมนดคลงรปภาพ 11.3.1 ระบบแสดงหนาจอคลงรปภาพของสตวตามทผใชเลอก ในขอ 7 (Extend) Use Case View image gallery 11.3.2 ถาผใชกดปม Back 1) แสดงเมนรายละเอยดของสตว

Extensions: - Special Requirements: - Technology and Data Variation List:

- ภาพสตวทใหผใชเลอกถกปอนโดยผใชแตะนว 1 ครงทหนาจอสมารทโฟน หรอแทบเลต

- เมน 3 เมน คอ ดคลงรปภาพ ฟงเสยงของสตว และดวดโอ แสดงผลเปนปมใหผใชแตะนว 1 ครงทหนาจอสมารทโฟน หรอแทบเลต

Frequency of Occurrence: - เกดขนตามทผใชตองการ

Open Issues: -

12

3.4.2 Use case for View image gallery คอ แผนภาพทแสดงขอบเขตกระบวนการดคลงรปภาพ ดงรปท 3.4

Use Case UC1.1: ดคลงรปภาพ Scope: ระบบสตวโลกแอปพลเคชน Level: User-goal Primary Actor: User Stakeholders and their interests: User ตองการดคลงรปภาพของสตวทตองการได

Animal web service system ตองการใหระบบสตวโลกแอปพลเคชน ดง ขอมลไปใชงาน

Pre-condition: ผใชเลอกภาพสตวทตองการ และเลอกเมนดคลงรปภาพ Success Guarantee: แสดงผลคลงรปภาพตรงตามสตวทผใชเลอก Main Success Scenario:

1. ระบบสรางคลงรปภาพตามภาพของสตวทผใชเลอก

2. ระบบดงขอมลคลงภาพสตวตามภาพสตวทผใชเลอกจาก Animal web service system

3. Animal web service system สงคนคาเปนชดขอมลของคลงภาพสตวใหระบบ

4. ระบบดงขอมลคลงภาพสตวจากชดขอมล เพอแสดงผลบนหนาจอสมารทโฟนของผใช

5. แสดงคลงรปภาพ

6. ถาผใชเลอกภาพของสตวทตองการดแบบขยาย

6.1 ระบบอานไฟลภาพของสตวทผใชเลอกแบบขยาย

6.2 แสดงรปภาพสตวแบบขยายตามทผใชเลอก

รปท 3. 4 Use case for View image gallery

13

Extensions: - Special Requirements: - Technology and Data Variation List:

- ภาพสตวทใหผใชเลอกถกปอนโดยผใชแตะนว 1 ครงทหนาจอสมารทโฟน หรอแทบเลต

Frequency of Occurrence: - เกดขนตามทผใชตองการ

Open Issues: -

3.4.3 Use case for Play shadow game คอ แผนภาพทแสดงขอบเขตกระบวนการเลนเกมเงาสตวปรศนา ดงรปท 3.5

Use Case UC2: เลนเกมเงาสตวปรศนา Scope: ระบบสตวโลกแอปพลเคชน Level: User-goal Primary Actor: User Stakeholders and their interests: User ตองการเลนเกมเงาสตวปรศนาได

Animal web service system ตองการใหระบบสตวโลกแอปพลเคชน ดง ขอมลไปใชงาน

Pre-condition: มไฟลค าถามประเภทเงาสตว และไฟลภาพทเปนตวเลอกในระบบ Success Guarantee: ระบบแสดงผลคะแนนจากการเลนเกมของผใชเปนรปดาว

รปท 3. 5 Use case for Play shadow game

14

Main Success Scenario: 1. ระบบสรางเกมเงาสตวปรศนา 2. ระบบดงขอมลค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4

ตวเลอกจาก Animal web service system 3. Animal web service system สงคนคาเปนชดขอมลของค าถามเปน

เงาของสตวและตวเลอกเปนภาพ 4 ตวเลอกใหระบบ 4. ระบบดงขอมลค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4

ตวเลอกจากชดขอมลเพอแสดงผลบนหนาจอสมารทโฟนของผใช 5. แสดงค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอก

6. ผใชเลอกค าตอบทตองการจากภาพของสตวทเปนตวเลอก

7. ระบบจะตรวจสอบค าตอบของผใช เพอค านวณคะแนน

8. ระบบตรวจสอบจ านวนขอของค าถาม

8.1 ถาจ านวนขอนอยกวา 5 ขอ

8.1.1 ระบบดงขอมลค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอก ขอถดไป จากชดขอมล เพอแสดงผลบนหนาจอ สมารทโฟนของผใช 8.1.2 แสดงค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอก ขอถดไป 8.2 ถาจ านวนขอมากกวา 5 ขอ 8.2.1 ระบบแสดงผลคะแนนเปนรปดาว โดยมผลการเลน คอ 5

ดาว 4 ดาว 3 ดาว 2 ดาว และ1 ดาว ตามจ านวนขอทผใช ตอบถก

Extensions: - Special Requirements: - Technology and Data Variation List:

- การตอบค าถามถกปอนโดยใหผเลนแตะนว 1 ครงทตวเลอกทตองการ

Frequency of Occurrence: เกดขนตามทผเลนตองการ Open Issues: -

15

3.4.4 Use case for Play sound game คอ แผนภาพทแสดงขอบเขตกระบวนการเลนเกมทายเสยงสตว ดงรปท 3.6

Use Case UC3: เลนเกมทายเสยงสตว Scope: ระบบสตวโลกแอปพลเคชน Level: User-goal Primary Actor: User Stakeholders and their interests: User ตองการเลนเกมทายเสยงสตวได

Animal web service system ตองการใหระบบสตวโลกแอปพลเคชน ดง ขอมลไปใชงาน

Pre-condition: มไฟลค าถามประเภทเสยงของสตว และไฟลภาพทเปนตวเลอก ในระบบ

Success Guarantee: ระบบแสดงผลคะแนนจากการเลนเกมของผใชเปนรปดาว Main Success Scenario:

1. ระบบสรางเกมทายเสยงสตว 2. ระบบดงขอมลค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4

ตวเลอกจาก Animal web service system 3. Animal web service system สงคนคาเปนชดขอมลของค าถามเปน

เสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอกใหระบบ 4. ระบบดงขอมลค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4

ตวเลอกจากชดขอมลเพอแสดงผลบนหนาจอสมารทโฟนของผใช 5. แสดงค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอก

6. ผใชเลอกค าตอบทตองการจากภาพของสตวทเปนตวเลอก

7. ระบบจะตรวจสอบค าตอบของผใช เพอค านวณคะแนน

รปท 3. 6 Use case for Play sound game

16

8. ระบบตรวจสอบจ านวนขอของค าถาม

8.1 ถาจ านวนขอนอยกวา 5 ขอ

8.1.1 ระบบดงขอมลค าถามเปนเสยงของสตว และตวเลอกเปน

ภาพ 4 ตวเลอก ขอถดไป จากชดขอมล เพอแสดงผลบน หนาจอสมารทโฟนของผใช 8.1.2 แสดงค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอก ขอถดไป 8.2 ถาจ านวนขอมากกวา 5 ขอ 8.2.1 ระบบแสดงผลคะแนนเปนรปดาว โดยมผลการเลน คอ 5

ดาว 4 ดาว 3 ดาว 2 ดาว และ1 ดาว ตามจ านวนขอทผใช ตอบถก

Extensions: - Special Requirements: - Technology and Data Variation List:

- การตอบค าถามถกปอนโดยใหผเลนแตะนว 1 ครงทตวเลอกทตองการ

Frequency of Occurrence: เกดขนตามทผเลนตองการ Open Issues: -

3.5 Use case description of Animal web service system

3.5.1 Use case for Login คอ แผนภาพทแสดงขอบเขตกระบวนการเขาสระบบ ดงรปท 3.7

รปท 3. 7 Use case for Login

17

Use Case UC-WS1: เขาสระบบ Scope: ระบบเวบไซตใหบรการขอมลของสตว Level: User-goal Primary Actor: Admin Stakeholders and their interests: Admin ตองการเขาสระบบ เพอจดการกบขอมลตางๆ ของสตว Pre-condition: มขอมลชอผใช และรหสผานในระบบ Success Guarantee: ผดแลระบบเขาสระบบไดส าเรจ Main Success Scenario:

1. ผดแลระบบปอนขอมลชอผใช และรหสผาน 2. ระบบตรวจสอบขอมลชอผใช และรหสผาน

2.1 ถาขอมลชอผใช และรหสผานตรงกบขอมลในระบบ 2.1.1 แสดงหนาจอจดการขอมล 2.2 ถาขอมลชอผใช และรหสผานไมตรงกบขอมลในระบบ

2.2.1 แสดงขอความแจงผดแลระบบ 2.2.2 แสดงหนาจอเขาสระบบ

Extensions: - Special Requirements: - Technology and Data Variation List: - Frequency of Occurrence:

- เกดขนตามทผดแลระบบตองการ Open Issues: -

18

3.5.2 Use case for Manage data คอ แผนภาพทแสดงขอบเขตกระบวนการจดการขอมล ดงรปท 3.8

Use Case UC-WS2: จดการขอมล Scope: ระบบเวบไซตใหบรการขอมลของสตว Level: User-goal Primary Actor: Admin Stakeholders and their interests: Admin ตองการจดการกบขอมลตางๆ ของสตว Pre-condition: - Success Guarantee: ผดแลระบบจดการกบขอมลตาง ๆไดส าเรจ Main Success Scenario:

1. ผดแลระบบเลอกประเภทขอมลทตองการจดการ 2. ระบบตรวจสอบประเภทขอมล

2.1 ถาผดแลระบบเลอกจดการขอมลของสตว 2.1.1 แสดงหนาจอการจดการขอมลของสตว (Extend) Manage animal data Use case

2.2 ถาผดแลระบบเลอกจดการกบขอมลคลงรปภาพ 2.2.1 แสดงหนาจอการจดการขอมลคลงรปภาพ (Extend) Manage animal image gallery Use case

2.3 ถาผดแลระบบเลอกจดการกบขอมลค าถามของเกมทายเสยงสตว

รปท 3. 8 Use case for Manage data

19

2.3.1 แสดงหนาจอการจดการกบขอมลค าถามของเกมทายเสยง สตว (Extend) Manage quiz for sound game Use case

2.4 ถาผดแลระบบเลอกจดการกบขอมลค าถามของเกมเงาสตวปรศนา 2.4.1 แสดงหนาจอการจดการกบขอมลค าถามของเกมเงาสตว ปรศนา (Extend) Manage quiz for shadow game Use case

Extensions: - Special Requirements: - Technology and Data Variation List: - Frequency of Occurrence:

- เกดขนตามทผดแลระบบตองการ Open Issues: -

3.5.3 Use case for Manage animal data คอ แผนภาพทแสดงขอบเขตกระบวนการ

จดการกบขอมลของสตว ดงรปท 3.8

Use Case UC-WS2.1: จดการกบขอมลของสตว Scope: ระบบเวบไซตใหบรการขอมลของสตว Level: User-goal Primary Actor: Admin Stakeholders and their interests: Admin ตองการจดการกบขอมลตางๆ ของสตว Pre-condition: - Success Guarantee: ผดแลระบบจดการกบขอมลของสตวไดส าเรจ Main Success Scenario:

1. ผดแลระบบเลอกรปแบบการจดการกบขอมลของสตว โดยมรปแบบใหเลอกคอ เพม และแกไข

2. ระบบตรวจสอบรปแบบการจดการทผดแลระบบเลอก 2.1 ระบบแสดงหนาจอการท างานส าหรบการเพมขอมลของสตว เชน ชอ ไฟลเสยง ไฟลวดโอ ไฟลรปภาพ จากนนกดบนทก 2.1.1 ระบบท าการบนทกขอมลของสตวทผดแลระบบเพม 2.1.2 ระบบแสดงขอความใหทราบวาเพมขอมลส าเรจ

2.2 ระบบอานขอมลของสตวทจะแสดงใหผดแลระบบเลอก เพอแกไข

20

2.3 ระบบแสดงหนาจอการท างานการแกไขคาขอมลของสตวใหผดแล ระบบเลอกขอมลทตองการแกไข และปอนขอมลทตองการแกไข จากนนกดปมบนทก 2.3.1 ระบบท าการแกไขขอมลของสตวทผดแลระบบแกไข 2.3.2 ระบบแสดงขอความใหทราบวาแกไขขอมลส าเรจ 3. ระบบแสดงหนาจอขอมลของสตว Extensions: - Special Requirements: - Technology and Data Variation List: - Frequency of Occurrence:

- เกดขนตามทผดแลระบบตองการ Open Issues: -

3.5.4 Use case for Manage animal image gallery คอ แผนภาพทแสดงขอบเขต

กระบวนการจดการกบขอมลคลงรปภาพสตว ดงรปท 3.8

Use Case UC-WS2.2: จดการกบขอมลคลงรปภาพสตว Scope: ระบบเวบไซตใหบรการขอมลของสตว Level: User-goal Primary Actor: Admin Stakeholders and their interests: Admin ตองการจดการกบขอมลคลงรปภาพสตว Pre-condition: - Success Guarantee: ผดแลระบบจดการกบขอมลคลงรปภาพสตวไดส าเรจ Main Success Scenario:

1. ผดแลระบบเลอกรปแบบการจดการกบขอมลคลงรปภาพสตวโดยมรปแบบใหเลอกคอ เพม และลบ

2. ระบบตรวจสอบรปแบบการจดการทผดแลระบบเลอก 2.1 ระบบแสดงหนาจอการท างานส าหรบการเพมขอมลคลงรปภาพ สตว จากนนกดบนทก 2.1.1 ระบบท าการบนทกขอมลคลงรปภาพสตวทผดแลระบบเพม 2.1.2 ระบบแสดงขอความใหทราบวาเพมขอมลส าเรจ

21

2.2 ระบบอานขอมลคลงรปภาพสตวทจะแสดงใหผดแลระบบเลอก เพอลบ

2.3 ระบบแสดงหนาจอการลบขอมลภาพในคลงสตวใหผดแลระบบ เลอกขอมลทตองการลบจากนนกดยนยนการลบ 2.3.1 ระบบท าการลบขอมลของภาพในคลงสตวทผดแลระบบ เลอก 2.3.2 ระบบแสดงขอความใหทราบวาลบขอมลส าเรจ 3. ระบบแสดงหนาจอขอมลคลงรปภาพสตว Extensions: - Special Requirements: - Technology and Data Variation List: - Frequency of Occurrence:

- เกดขนตามทผดแลระบบตองการ Open Issues: -

3.5.5 Use case for Manage quiz for sound game คอ แผนภาพทแสดงขอบเขตกระบวนการจดการกบขอมลค าถามเกมทายเสยงสตว ดงรปท 3.8

Use Case UC-WS2.3: จดการกบขอมลค าถามเกมทายเสยงสตว Scope: ระบบเวบไซตใหบรการขอมลของสตว Level: User-goal Primary Actor: Admin Stakeholders and their interests: Admin ตองการจดการกบขอมลค าถามเกมทายเสยงสตว Pre-condition: - Success Guarantee: ผดแลระบบจดการกบขอมลค าถามเกมทายเสยงสตวได Main Success Scenario:

1. ผดแลระบบเลอกรปแบบการจดการกบขอมลค าถามเกมทายเสยงสตวโดยมรปแบบใหเลอกคอ เพม และลบ

2. ระบบตรวจสอบรปแบบการจดการทผดแลระบบเลอก 2.1 ระบบแสดงหนาจอการท างานส าหรบการเพมขอมลค าถามเกม ทายเสยงสตวจากนนกดบนทก

22

2.1.1 ระบบท าการบนทกขอมลค าถามเกมทายเสยงสตวทผดแล ระบบเพม 2.1.2 ระบบแสดงขอความใหทราบวาเพมขอมลส าเรจ

2.2 ระบบอานขอมลค าถามเกมทายเสยงสตวทจะแสดงใหผดแลระบบ เลอกเพอลบ

2.3 ระบบแสดงหนาจอการลบค าถามเกมทายเสยงสตวใหผดแลระบบ เลอกขอมลทตองการลบจากนนกดยนยนการลบ 2.3.1 ระบบท าการลบขอมลค าถามเกมทายเสยงสตวทผดแล ระบบเลอก 2.3.2 ระบบแสดงขอความใหทราบวาลบขอมลส าเรจ 3. ระบบแสดงหนาจอขอมลค าถามเกมทายเสยงสตว Extensions: - Special Requirements: - Technology and Data Variation List: - Frequency of Occurrence:

- เกดขนตามทผดแลระบบตองการ Open Issues: -

3.5.6 Use case for Manage quiz for shadow game คอ แผนภาพทแสดงขอบเขตกระบวนการจดการกบขอมลค าถามเกมเงาสตวปรศนา ดงรปท 3.8

Use Case UC-WS2.4: จดการกบขอมลค าถามเกมเงาสตวปรศนา Scope: ระบบเวบไซตใหบรการขอมลของสตว Level: User-goal Primary Actor: Admin Stakeholders and their interests: Admin ตองการจดการกบขอมลค าถามเกมเงาสตวปรศนา Pre-condition: - Success Guarantee: ผดแลระบบจดการกบขอมลค าถามเกมเงาสตวปรศนาได

23

Main Success Scenario: 1. ผดแลระบบเลอกรปแบบการจดการกบขอมลค าถามเกมเงาสตว

ปรศนาโดยมรปแบบใหเลอกคอ เพม และลบ 2. ระบบตรวจสอบรปแบบการจดการทผดแลระบบเลอก

2.1 ระบบแสดงหนาจอการท างานส าหรบการเพมขอมลค าถามเกมเงา สตวปรศนาจากนนกดบนทก 2.1.1 ระบบท าการบนทกขอมลค าถามเกมเงาสตวปรศนาทผดแล ระบบเพม 2.1.2 ระบบแสดงขอความใหทราบวาเพมขอมลส าเรจ

2.2 ระบบอานขอมลค าถามเกมเงาสตวปรศนาทจะแสดงใหผดแล ระบบเลอก เพอลบ

2.3 ระบบแสดงหนาจอการลบค าถามเกมเงาสตวปรศนาใหผดแล ระบบเลอกขอมลทตองการลบจากนนกดยนยนการลบ 2.3.1 ระบบท าการลบขอมลค าถามเกมเงาสตวปรศนาทผดแล ระบบเลอก 2.3.2 ระบบแสดงขอความใหทราบวาลบขอมลส าเรจ 3. ระบบแสดงหนาจอขอมลค าถามเกมเงาสตวปรศนา Extensions: - Special Requirements: - Technology and Data Variation List: - Frequency of Occurrence:

- เกดขนตามทผดแลระบบตองการ Open Issues: -

3.5.7 Use case for Random quiz for the game คอ แผนภาพทแสดงขอบเขตกระบวนการสมค าถามส าหรบเลนเกม ดงรปท 3.9

รปท 3. 9 Use case for Random quiz for the game

24

Use Case UC-WS3: สมค าถามส าหรบเลนเกม Scope: ระบบเวบไซตใหบรการขอมลของสตว Level: User-goal Primary Actor: Admin Stakeholders and their interests: Animal application system ตองการน าขอมลค าถามของเกมทได จากการสมไปแสดงผลในแอปพลเคชน Pre-condition: มขอมลค าถามของเกมในระบบ Success Guarantee: สมค าถามตามประเภทเกมได Main Success Scenario:

1. ระบบดงค าถามตามเกมทตองการ

2. ระบบสมขอสอบจ านวน 5 ขอ 3. ระบบระบบตรวจสอบจ านวนขอสอบ (Extensions 3a) 4. สงคนคาขอมลค าถามและตวเลอก

Extensions: *3a ถาจ านวนขอนอยกวาหรอเทากบ 5 ใหวนกลบไปท าขอ 2 ใหม ถาจ านวนขอมากกวา 5 ใหท าขอ 4 Special Requirements: - Technology and Data Variation List: - Frequency of Occurrence:

- เกดขนตามทผดแลระบบตองการ Open Issues: -

25

3.6 Activity diagram of Animal Application 3.6.1 Activity diagram of View files (UC1) คอ แผนภาพทแสดงกจกรรมท

เกดขนในกระบวนการดไฟลภาพ ไฟลเสยง และไฟลวดโอ ดงรปท 3.10

รปท 3. 10 Activity diagram of View files Use Case (UC1)

26

กระบวนการท างานของ Activity diagram of View file Use Case 1. Select category หมายถง ผใชเลอกหมวดของสตวทตองการ 2. Create animal images menu based on category หมายถง ระบบสรางเมน

รปภาพสตวตามหมวดทผใชเลอก 3. Retrieve animal images based on category หมายถง ระบบดงขอมลภาพสตว

ตามหมวดทผใชเลอกจาก Animal web service system 4. Animal web service system return data group หมายถง Animal web

service system สงคนคาเปนชดขอมลของภาพสตวใหระบบ 5. Retrive animal data group หมายถง ระบบดงขอมลภาพสตวจากชดขอมล เพอ

แสดงผลบนหนาจอสมารทโฟนของผใช 6. Show animal images menu based on category หมายถง แสดงภาพสตวตาม

หมวดทผใชเลอกบนอปกรณสมารทโฟนของผใช 7. Select animal image หมายถง ผใชเลอกภาพสตวทตองการดรายละเอยด 8. Create animal detail menu based on selected animal image หมายถง

ระบบสรางเมนรายละเอยดของสตวตามภาพสตวทผใชเลอก 9. Show animal detail menu based on sound, video, gallery หมายถง แสดง

เมนรายละเอยดของสตวบนอปกรณสมารทโฟนของผใช 10. Select animal detail menu หมายถง ผใชเลอกเมนรายละเอยดของสตวท

ตองการ 11. Check menu หมายถง ระบบตรวจสอบเมนทผใชเลอก ซงมใหเลอก 3 เมนคอ

11.1 เมนฟงเสยงของสตว 11.1.1 Retrieve path sound หมายถง ระบบอานขอมลไฟลเสยง

11.1.2 Display sound หมายถง ระบบแสดงผลเปนเสยงของสตว 11.2 เมนดวดโอ

11.2.1 Retrieve path video หมายถง ระบบอานขอมลไฟลวดโอ 11.2.2 Display video หมายถง ระบบแสดงผลเปนวดโอของสตว 11.2.3 ถาผใชกดปม Back 1) Stop video หมายถง ระบบหยดเลนไฟลวดโอ 2) Show animal detail menu based on sound, video, gallery หมายถง แสดงเมนรายละเอยดของสตว

27

11.3 เมนดคลงรปภาพ 11.3.1 Show animal gallery page หมายถง Activity ทท าหนาทเรยก การท างานของ Activity Diagram of View image gallery (UC1.1) 11.3.2 ถาผใชกดปม Back

1) Show animal detail menu based on sound, video, gallery หมายถง แสดงเมนรายละเอยดของสตว

3.6.2 Activity diagram of View image gallery (UC1.1) คอ แผนภาพทแสดงกจกรรมทเกดขนในกระบวนการดคลงรปภาพสตว ดงรปท 3.11 กระบวนการท างานของ Activity diagram of View image gallery Use Case

1. Create gallery based on category หมายถง ระบบสรางคลงรปภาพตามภาพของสตวทผใชเลอก

2. Retrieve animal images based on category หมายถง ระบบดงขอมลคลงภาพสตวตามภาพสตวทผใชเลอกจาก Animal web service system

3. Animal web service system return data group หมายถง Animal web service system สงคนคาเปนชดขอมลของคลงภาพสตวใหระบบ

รปท 3. 11 Activity diagram of View image gallery Use Case (UC1.1)

28

4. Retrieve animal images from data group หมายถง ระบบดงขอมลคลงภาพสตวจากชดขอมล เพอแสดงผลบนหนาจอสมารทโฟนของผใช

5. Show image gallery หมายถง แสดงคลงรปภาพ 6. Check users choose to view the big image หมายถง ถาผใชเลอกภาพของ

สตวทตองการดแบบขยาย 6.1 Retrieve big image based on selected animal image หมายถง ระบบ

อานไฟลภาพของสตวทผใชเลอกแบบขยาย 6.2 Show big image หมายถง แสดงรปภาพสตวแบบขยายตามทผใชเลอก

3.6.3 Activity diagram of Play shadow game (UC2) คอ แผนภาพทแสดงกจกรรมทเกดขนในกระบวนการเลนเกมเงาเสยงสตว ดงรปท 3.12 กระบวนการท างานของ Activity diagram of Play shadow game Use Case

1. Create shadow game หมายถง ระบบสรางเกมเงาสตวปรศนา 2. Retrieve quiz shadow game data หมายถง ระบบดงขอมลค าถามเปนเงาของ

สตว และตวเลอกเปนภาพ 4 ตวเลอกจาก Animal web service system

รปท 3. 12 Activity diagram of Play shadow game Use Case (UC2)

29

3. Animal web service system return quiz data group หมายถง Animal web service system สงคนคาเปนชดขอมลของค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอกใหระบบ

4. Retrieve quiz shadow game from data group หมายถง ระบบดงขอมลค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอกจากชดขอมลเพอแสดงผลบนหนาจอสมารทโฟนของผใช

5. Show shadow question and choice หมายถง แสดงค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอก

6. Select the answer หมายถง ผใชเลอกค าตอบทตองการจากภาพของสตวทเปนตวเลอก

7. Check answers หมายถง ระบบจะตรวจสอบค าตอบของผใช เพอค านวณคะแนน 8. Check rule number หมายถง ระบบตรวจสอบจ านวนขอของค าถาม

8.1 ถาจ านวนขอนอยกวา 5 ขอ 8.1.1 Retrieve quiz shadow game from data group หมายถง ระบบ ดงขอมลค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอก ขอถดไป จากชดขอมล เพอแสดงผลบนหนาจอสมารทโฟนของผใช 8.1.2 Show shadow question and choice หมายถง แสดงค าถามเปน เงาของสตว และตวเลอกเปนภาพ 4 ตวเลอก ขอถดไป 8.2 ถาจ านวนขอมากกวา 5 ขอ 8.2.1 Show score is star หมายถง ระบบแสดงผลคะแนนเปนรปดาว โดยมผลการเลน คอ 5 ดาว 4 ดาว 3 ดาว 2 ดาว และ1 ดาว ตาม จ านวนขอทผใชตอบถก

30

3.6.4 Activity diagram of Play sound game (UC3) คอ แผนภาพทแสดงกจกรรมทเกดขนในกระบวนการเลนเกมทายเสยงสตวปรศนา ดงรปท 3.13

กระบวนการท างานของ Activity diagram of Play sound game Use Case

1. Crete sound game หมายถง ระบบสรางเกมทายเสยงสตว 2. Retrieve quiz sound game data หมายถง ระบบดงขอมลค าถามเปนเสยงของ

สตวและตวเลอกเปนภาพ 4 ตวเลอกจาก Animal web service system 3. Animal web service system return quiz data group หมายถง Animal web

service system สงคนคาเปนชดขอมลของค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอกใหระบบ

4. Retrieve quiz sound game from data group หมายถง ระบบดงขอมลค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอกจากชดขอมล เพอแสดงผลบนหนาจอสมารทโฟนของผใช

5. Show sound question and choice หมายถง แสดงค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอก

รปท 3. 13 Activity diagram of Play sound game Use Case (UC3)

31

6. Select the answer หมายถง ผใชเลอกค าตอบทตองการจากภาพของสตวทเปนตวเลอก

7. Check answer หมายถง ระบบจะตรวจสอบค าตอบของผใช เพอค านวณคะแนน 8. Check rule number หมายถง ระบบตรวจสอบจ านวนขอของค าถาม

8.1 ถาจ านวนขอนอยกวา 5 ขอ 8.1.1 Retrieve quiz sound game from data group หมายถง ระบบ ดงขอมลค าถามเปนเสยงของสตว และตวเลอกเปน ภาพ 4 ตวเลอก ขอถดไป จากชดขอมล เพอแสดงผลบนหนาจอสมารทโฟนของผใช 8.1.2 Show sound question and choice หมายถง แสดงค าถามเปน เสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอก ขอถดไป 8.2 ถาจ านวนขอมากกวา 5 ขอ 8.2.1 Show score is star หมายถง ระบบแสดงผลคะแนนเปนรปดาว

โดยมผลการเลน คอ 5 ดาว 4 ดาว 3 ดาว 2 ดาว และ1 ดาว ตาม

จ านวนขอทผใชตอบถก 3.7 Activity diagram of Animal web service system 3.7.1 Activity diagram of Login (UC-WS1) คอ แผนภาพทแสดงกจกรรมทเกดขนในกระบวนการเขาสระบบ ดงรปท 3.14

รปท 3. 14 Activity diagram of Login Use case

32

กระบวนการท างานของ Activity diagram of Login Use case 1. Enter username and password หมายถง ผดแลระบบปอนขอมลชอผใช และ

รหสผาน 2. Check username and password หมายถง ระบบตรวจสอบขอมลชอผใช และ

รหสผาน 2.1 ถาขอมลชอผใช และรหสผานตรงกบขอมลในระบบ 2.1.1 Show manage data page หมายถง แสดงหนาจอจดการขอมล 2.2 ถาขอมลชอผใช และรหสผานไมตรงกบขอมลในระบบ 2.2.1 Show message หมายถงแสดงขอความแจงผดแลระบบ 2.2.2 Show login page หมายถง แสดงหนาจอเขาสระบบ

3.7.2 Activity diagram of Manage data (UC-WS2) คอ แผนภาพทแสดงกจกรรมทเกดขนในกระบวนการจดการขอมล ดงรปท 3.15 รปท 3. 15 Activity diagram of Manage data Use case

33

กระบวนการท างานของ Activity diagram of Manage data Use Case 1. Select type manage หมายถง ผดแลระบบเลอกประเภทขอมลทตองการจดการ 2. Check type manage หมายถงระบบตรวจสอบประเภทขอมล

2.1 ถาผดแลระบบเลอกจดการขอมลของสตว 2.1.1 Show animal data manage page หมายถง Activity ทท าหนาทในการเรยกการท างานของ Activity diagram of Manage animal data (UC-WS2.1)

2.2 ถาผดแลระบบเลอกจดการกบขอมลคลงรปภาพ 2.2.1 Show animal image gallery data manage page หมายถง Activity ทท าหนาทในการเรยกการท างานของ Activity diagram of Manage animal image gallery (UC-WS2.2) 2.3 ถาผดแลระบบเลอกจดการกบขอมลค าถามของเกมทายเสยงสตว 2.3.1 Show quiz for sound game manage page หมายถง Activity ทท าหนาทในการเรยกการท างานของ Activity diagram of Manage quiz for sound game (UC-WS2.3) 2.4 ถาผดแลระบบเลอกจดการกบขอมลค าถามของเกมเงาสตวปรศนา 2.4.1 Show quiz for shadow game manage page หมายถง Activity ทท าหนาทในการเรยกการท างานของ Activity diagram of Manage quiz for shadow game (UC-WS2.4)

34

3.7.3 Activity diagram of Manage animal data (UC-WS2.1) คอ แผนภาพทแสดงกจกรรมทเกดขนในกระบวนการจดการกบขอมลของสตว ดงรปท 3.16 กระบวนการท างานของ Activity diagram of Manage animal data Use Case

1. Select type manage หมายถง ผดแลระบบเลอกรปแบบการจดการกบขอมลของสตว โดยมรปแบบใหเลอกคอ เพม ลบ และแกไข

2. Check Type manage หมายถง ระบบตรวจสอบรปแบบการจดการทผดแลระบบเลอก 2.1 Show animal data insert page หมายถง ระบบแสดงหนาจอการท างาน ส าหรบการเพมขอมลของสตว เชน ชอ ไฟลเสยง ไฟลวดโอ ไฟลรปภาพ จากนนกดบนทก

รปท 3. 16 Activity diagram of Manage animal data Use case

35

2.1.1 Insert animal data หมายถง ระบบท าการบนทกขอมลของสตวท ผดแลระบบเพม 2.1.2 Insert Successful หมายถง ระบบแสดงขอความใหทราบวาเพม ขอมลส าเรจ 2.2 Retrieve animal data หมายถง ระบบอานขอมลของสตวทจะแสดงใหผดแล ระบบเลอกแกไข หรอลบ 2.3 Show animal data edit page หมายถง ระบบแสดงหนาจอการท างานการ แกไขคาขอมลของสตวใหผดแลระบบเลอกขอมลทตองการแกไข และปอน ขอมลทตองการแกไขจากนนกดปมบนทก 2.3.1 Edit animal data หมายถง ระบบท าการแกไขขอมลของสตวท ผดแลระบบแกไข 2.3.2 Edit successful หมายถง ระบบแสดงขอความใหทราบวาแกไข ขอมลส าเรจ

3. Show animal data หมายถง ระบบแสดงหนาจอขอมลของสตว 3.7.4 Activity diagram of Manage animal image gallery (UC-WS2.2) คอ แผนภาพทแสดงกจกรรมทเกดขนในกระบวนการจดการขอมลคลงรปภาพสตว ดงรปท 3.17

รปท 3. 17 Activity diagram of Manage animal image gallery Use case

36

กระบวนการท างานของ Activity diagram of Manage animal image gallery Use case

1. Select type manage หมายถง ผดแลระบบเลอกรปแบบการจดการกบขอมลคลงรปภาพสตว โดยมรปแบบใหเลอกคอ เพม ลบ และแกไข

2. Check type manage หมายถง ระบบตรวจสอบรปแบบการจดการทผดแลระบบเลอก 2.1 Show animal image gallery data insert page หมายถง ระบบแสดง หนาจอการท างานส าหรบการเพมขอมลคลงรปภาพสตว จากนนกดบนทก 2.1.1 Insert animal image gallery data หมายถง ระบบท าการบนทก ขอมลคลงรปภาพสตวทผดแลระบบเพม 2.1.2 Insert successful หมายถง ระบบแสดงขอความใหทราบวาเพมขอมล ส าเรจ 2.2 Retrieve animal image gallery data หมายถง ระบบอานขอมลคลง รปภาพสตวทจะแสดงใหผดแลระบบเลอกเพอลบ 2.3 Show animal image gallery data delete page หมายถง ระบบแสดง หนาจอการลบขอมลภาพในคลงสตวใหผดแลระบบเลอกขอมลทตองการลบ จากนนกดยนยนการลบ 2.3.1 Delete animal image gallery data หมายถง ระบบท าการลบขอมล ของภาพในคลงสตวทผดแลระบบเลอก 2.3.2 Delete successful หมายถง ระบบแสดงขอความใหทราบวาลบขอมล ส าเรจ

3. Show animal image gallery data หมายถง ระบบแสดงหนาจอขอมลคลง รปภาพสตว

37

3.7.5 Activity diagram of Manage quiz for sound game (UC-WS2.3) คอ แผนภาพทแสดงกจกรรมทเกดขนในกระบวนการเลนเกมทายเสยงสตว ดงรปท 3.18 กระบวนการท างานของ Activity diagram of Manage quiz for sound game Use case

1. Select type manage หมายถง ผดแลระบบเลอกรปแบบการจดการกบขอมลค าถามเกมทายเสยงสตวโดยมรปแบบใหเลอกคอ เพม และลบ

2. Check type manage หมายถง ระบบตรวจสอบรปแบบการจดการทผดแลระบบเลอก 2.1 Show quiz for sound game insert page หมายถง ระบบแสดงหนาจอ การท างานส าหรบการเพมขอมลค าถามเกมทายเสยงสตวจากนนกดบนทก 2.1.1 Insert quiz for sound game หมายถง ระบบท าการบนทกขอมล ค าถามเกมทายเสยงสตวทผดแลระบบเพม

รปท 3. 18 Activity diagram of Manage quiz for sound game Use case

38

2.1.2 Insert successful หมายถง ระบบแสดงขอความใหทราบวาเพมขอมล ส าเรจ 2.2 Retrieve quiz for sound game หมายถง ระบบอานขอมลค าถามเกมทาย เสยงสตวทจะแสดงใหผดแลระบบเลอกเพอลบ 2.3 Show quiz for sound game delete page หมายถง ระบบแสดงหนาจอ การลบค าถามเกมทายเสยงสตวใหผดแลระบบเลอกขอมลทตองการลบจากนน กดยนยนการลบ 2.3.1 Delete quiz for sound game หมายถง ระบบท าการลบขอมล ค าถามเกมทายเสยงสตวทผดแลระบบเลอก 2.3.2 Delete successful หมายถง ระบบแสดงขอความใหทราบวาลบขอมล ส าเรจ

3. Show quiz for sound game หมายถง ระบบแสดงหนาจอขอมลค าถามเกมทาย เสยงสตว 3.7.6 Activity diagram of Manage quiz for shadow game (UC-WS2.4) คอ แผนภาพทแสดงกจกรรมทเกดขนในกระบวนการเลนเกมเงาสตวปรศนา ดงรปท 3.19

รปท 3. 19 Activity diagram of Manage quiz for shadow game Use case

39

กระบวนการท างานของ Activity diagram of Manage quiz for shadow game Use case

1. Select type manage หมายถง ผดแลระบบเลอกรปแบบการจดการกบขอมลค าถามเกมเงาสตวปรศนาโดยมรปแบบใหเลอกคอ เพม และลบ

2. Check type manage หมายถง ระบบตรวจสอบรปแบบการจดการทผดแลระบบเลอก 2.1 Show quiz for shadow game insert page หมายถง ระบบแสดงหนาจอ การท างานส าหรบการเพมขอมลค าถามเกมเงาสตวปรศนาจากนนกดบนทก 2.1.1 Insert quiz for shadow game หมายถง ระบบท าการบนทกขอมล ค าถามเกมเงาสตวปรศนาทผดแลระบบเพม 2.1.2 Insert successful หมายถง ระบบแสดงขอความใหทราบวาเพมขอมล ส าเรจ 2.2 Retrieve quiz for shadow game หมายถง ระบบอานขอมลค าถามเกมเงา สตวปรศนาทจะแสดงใหผดแลระบบเลอกเพอลบ 2.3 Show quiz for shadow game delete page หมายถง ระบบแสดงหนาจอ การลบค าถามเกมเงาสตวปรศนาใหผดแลระบบเลอกขอมลทตองการลบ จากนนกดยนยนการลบ 2.3.1 Delete quiz for shadow game หมายถง ระบบท าการลบขอมล ค าถามเกมเงาสตวปรศนาทผดแลระบบเลอก 2.3.2 Delete successful หมายถง ระบบแสดงขอความใหทราบวาลบขอมล ส าเรจ

3. Show quiz for shadow game หมายถง ระบบแสดงหนาจอขอมลค าถามเกมเงา สตวปรศนา

40

3.7.7 Activity diagram of Random quiz for game (UC-WS3) คอ แผนภาพทแสดงกจกรรมทเกดขนในกระบวนการสมค าถามเพอเลนเกม ดงรปท 3.20 กระบวนการท างานของ Activity diagram of Random quiz for game Use case

1. Retrieve quiz based on type game หมายถง ระบบดงค าถามตามเกมทตองการ

2. Random 5 quiz หมายถง ระบบสมขอสอบจ านวน 5 ขอ 3. Check rule number หมายถง ระบบระบบตรวจสอบจ านวนขอสอบ 4. Return quiz data for game based on type game หมายถง สงคนคาขอมล

ค าถาม และตวเลอก

รปท 3. 20 Activity diagram of Random quiz for game Use case

41

3.8 Class diagram of Animal Application เปนแผนภาพทแสดง Class และความสมพนธในแงตาง ๆ ทเกดขนในการใชงาน Animal Application วาแตละกจกรรมมความสมพนธกนแบบใด ดงรปท 3.21

รปท 3. 21 Class diagram ของระบบ Animal application

1 1

42

3.9 ค าอธบาย Class diagram for Animal Application 3.9.1 Class diagram of ViewController

ค าอธบาย Class diagram of ViewController

+ TypeAnimalViewController() หมายถง operation ทท าหนาทเรยกหนาจอดไฟลภาพ ไฟลเสยง และไฟลวดโอ

+GameSoundViewController() หมายถง operation ทท าหนาทเรยก หนาจอการเลนเกมทายเสยงสตว +GameShadowViewController() หมายถง operation ทท าหนาทเรยก หนาจอการเลนเกมเงาสตวปรศนา

3.9.2 Class diagram of ViewAnimal

ค าอธบาย Class diagram of ViewAnimal

+ prepare() หมายถง operation ทท าหนาทเปรยบเสมอนผใชเลอกหมวดของสตว +viewDidload() หมายถง operation ทท าหนาทเปรยบเสมอนระบบเปดหนาหมวดของสตว

รปท 3. 22 Class diagram of ViewController

รปท 3. 23 Class diagram of TypeAnimalViewController

43

3.9.3 Class diagram of MainData ค าอธบาย Class diagram of MainData

- Type : Integer หมายถง ประเภทของสตวทผใชเลอก - Values : NSArray[ ] หมายถง ชดขอมล jsonObject - nameTh : String [ ] หมายถง ชอสตวภาษาไทย - nameEn : String [ ] หมายถง ชอสตวภาษาองกฤษ - dataAnimal : String [ ] หมายถง ขอมลรายละเอยดของสตว - img : String [ ] หมายถง ชอไฟลภาพของสตว - sound : String [ ] หมายถง ชอไฟลเสยงของสตว - video : String [ ] หมายถง ชอไฟลวดโอของสตว

+ viewDidload() หมายถง operation ทท าหนาทดงขอมลรายละเอยดของสตวจาก Animal web service system +collectionView() หมายถง operation ทท าหนาทสรางเมนรายการภาพสตว +prepare() หมายถง operation ทท าหนาทแสดงหนาคลงภาพของสตว

รปท 3. 24 Class diagram of MainData

44

3.9.4 Class diagram of DataViewController ค าอธบาย Class diagram of DataViewController

- dataAnimal : String หมายถง รายละเอยดของสตว - nameAnimal : String หมายถง แสดงชอของสตวเปนภาษาไทย - imgButton : String หมายถง แสดงภาพของสตว - segment1 : Integer หมายถง หมายเลข Index ของเมน - type : Integer หมายถง ชนดของสตว - getNameTh : String หมายถง ชอภาษาไทยของสตว - getNameEn : String หมายถง ชอภาษาองกฤษของสตว - getData : String หมายถง รายละเอยดของสตว - getImg : String หมายถง ชอไฟลภาพของสตว - getSound : String หมายถง ชอไฟลเสยงของสตว - getVideo : String หมายถง ชอไฟลวดโอของสตว - url : NSURL หมายถง ทอยของไฟลเสยง - sound : AVAudioPlayer หมายถง Instant ทไดมาจาก Class

AVAudioPlayer()

รปท 3. 25 Class diagram of DataViewController

45

+viewWillDissappear() หมายถง operation ทท าหนาทหยดเลนวดโอ +viewWillAppear() หมายถง operation ทท าหนาทเปรยบเสมอนผใชกดปมยอนกลบจากหนาคลงรปภาพสตว +playSound(url:NSURL) หมายถง operation ทท าหนาทเลนไฟลเสยงของสตว +viewDidload() หมายถง operation ทท าหนาทแสดงขอมลรายละเอยดของสตว +changMenu() หมายถง operation ทท าหนาทเปรยบเสมอนผใชเลอกเมน +backMain() หมายถง operation ทท าหนาทเปรยบเสมอนผใชกดปมยอนกลบ

3.9.5 Class diagram of GalleryViewController

ค าอธบาย Class diagram of GalleryViewController

- nameEn : String หมายถง ชอภาษาไทยของสตว - values : NSArray [ ] หมายถง ขอมล jsonObject - image : String [ ] หมายถง คลงรปภาพของสตว - collectionImage : Integer หมายถง ต าแหนงขอมลของรปในคลงภาพ

+viewDidload() หมายถง operation ทท าหนาทดงขอมลรปภาพจาก Animal web service system +collectionView() หมายถง operation ทท าหนาทแสดงคลงรปภาพของสตว

รปท 3. 26 Class diagram of GalleryViewController

46

+prepare() หมายถง operation ทท าหนาทเปรยบเสมอนผใชเปดหนารปภาพของสตวขนาดใหญ

3.9.6 Class diagram of ImageViewController

ค าอธบาย Class diagram of ImageViewController

- imageName : String หมายถง ชอไฟลของรปภาพ - img : UIImageView หมายถง รปภาพขนาดใหญของสตว

+viewDidload() หมายถง operation ทท าหนาทแสดงภาพขนาดใหญของสตวตามทผใชเลอก

3.9.7 Class diagram of GameShadowViewController

รปท 3. 27 Class diagram of ImageViewController

รปท 3. 28 Class diagram of GameShadowViewController

47

ค าอธบาย Class diagram of GameShadowViewController - ex : String หมายถง ค าถามทเปนเงาของสตว - ch1 : string หมายถง รปภาพตวเลอกท 1 - ch2 : string หมายถง รปภาพตวเลอกท 2 - ch3 : string หมายถง รปภาพตวเลอกท 3 - ch4 : string หมายถง รปภาพตวเลอกท 4 - answer : String หมายถง ค าตอบทถก - select : String หมายถง ตวเลอกทผใชเลอก - n : Integer หมายถง จ านวนขอ - values : NSArray [ ] หมายถง ขอมล jsonObject - textEx : UIImageView หมายถง รปเงาทของค าถาม

+viewDidload() หมายถง operation ทท าหนาทดงขอมลค าถามเงาจาก Animal web service system +getData() หมายถง operation ทท าหนาทแสดงค าถามทละขอ +checkAnswer() หมายถง operation ทท าหนาทตรวจค าตอบและค านวณคะแนน

3.9.8 Class diagram of ShowScoreShadow

ค าอธบาย Class diagram of ShowScoreShadow

- data : String หมายถง ขอมลคะแนน - img : UIImageView หมายถง ขอมลรปดาว - score : Integer หมายถง ขอมลคะแนนทได

+viewDidload() หมายถง operation ทท าหนาทแสดงคะแนนทไดจากการเลนเกม โดยแสดงผลเปนรปดาว

รปท 3. 29 Class diagram of ShowScoreShadow

48

3.9.9 Class diagram of GameSoundViewController ค าอธบาย Class diagram of GameSoundViewController

- ex : String หมายถง ค าถามทเปนเงาของสตว - ch1 : string หมายถง รปภาพตวเลอกท 1 - ch2 : string หมายถง รปภาพตวเลอกท 2 - ch3 : string หมายถง รปภาพตวเลอกท 3 - ch4 : string หมายถง รปภาพตวเลอกท 4 - answer : String หมายถง ค าตอบทถก - select : String หมายถง ตวเลอกทผใชเลอก - n : Integer หมายถง จ านวนขอ - values : NSArray [ ] หมายถง ขอมล jsonObject - sound : AVAudioPlayer หมายถง Instant ทไดมาจาก Class

AVAudioPlayer +viewDidload() หมายถง operation ทท าหนาทดงขอมลค าถามจาก Animal web service system +getData() หมายถง operation ทท าหนาทแสดงค าถามทละขอ

รปท 3. 30 Class diagram of GameSoundViewController

49

+checkAnswer() หมายถง operation ทท าหนาทตรวจค าตอบและค านวณคะแนน +playSound() หมายถง operation ทท าหนาทเลนเสยงของสตว

3.9.10 Class diagram of ShowScoreSound

ค าอธบาย Class diagram of ShowScoreSound

- data : String หมายถง ขอมลคะแนน - img : UIImageView หมายถง ขอมลรปดาว - score : Integer หมายถง ขอมลคะแนนทได

+viewDidload() หมายถง operation ทท าหนาทแสดงคะแนนทไดจากการเลนเกม โดยแสดงผลเปนรปดาว

3.10 E-R diagram of Animal Web Service System E-R diagram เปนแบบจ าลองเพออธบายโครงสรางของฐานขอมล รวมทงอธบายโครงสราง

และความสมพนธของขอมลในระบบ Animal Web Service System ดงรปท 3.32

รปท 3. 31 Class diagram of ShowScoreSound

50

รปท 3. 32 E-R Diagram of Animal web service system

51

3.11 Data Dictionary of E-R Diagram ตารางท 3. 1 ตาราง animal เกบขอมลสตว

ล าดบ Attribute ความหมาย ชนด/ขนาด Key Constraint หมายเหต

1 name_eng ชอสตวภาษาองกฤษ VARCHAR(50) PK NOT NULL 2 name_thai ชอสตวภาษาไทย VARCHAR(50) NOT NULL

3 id_sound รหสค าถามเสยง INT FK NOT NULL soundgame

4 id_shadow รหสค าถามเงา INT FK NOT NULL shadowgame 5 video ไฟลวดโอสตว VARCHAR(50) NOT NULL

6 sound ไฟลเสยงสตว VARCHAR(50) NOT NULL

7 picture รปภาพสตว VARCHAR(50) NOT NULL 8 detail รายละเอยด VARCHAR(50) NOT NULL

9 image ภาพการตนสตว VARCHAR(50) NOT NULL 10 shadow ภาพเงาการตนสตว VARCHAR(50) NOT NULL

ตารางท 3. 2 ตาราง gallery เกบขอมลคลงรปภาพสตว ล าดบ Attribute ความหมาย ชนด/ขนาด Key Constraint หมายเหต

1 id รหสภาพ INT PK NOT NULL 2 name_eng ชอสตวภาษาองกฤษ VARCHAR(50) FK NOT NULL animal

3 pic รปภาพสตว VARCHAR(50) NOT NULL

ตารางท 3. 3 ตาราง type เกบขอมลประเภทของสตว

ล าดบ Attribute ความหมาย ชนด/ขนาด Key Constraint หมายเหต 1 id_type รหสประเภท INT PK NOT NULL

2 type ชอประเภท VARCHAR(20) NOT NULL

52

ตารางท 3. 4 ตาราง soundgame เกบขอมลเกมทายเสยงสตว

ล าดบ Attribute ความหมาย ชนด/ขนาด Key Constraint หมายเหต 1 id_sound รหสค าถามเสยง INT PK NOT NULL

2 choice1 ตวเลอกท 1 VARCHAR(50) NOT NULL

3 choice2 ตวเลอกท 2 VARCHAR(50) NOT NULL 4 choice3 ตวเลอกท 3 VARCHAR(50) NOT NULL

5 choice4 ตวเลอกท 4 VARCHAR(50) NOT NULL 6 answer ตวเลอกทถก INT NOT NULL

ตารางท 3. 5 ตาราง shadowgame เกบขอมลเกมเงาสตว ล าดบ Attribute ความหมาย ชนด/ขนาด Key Constraint หมายเหต

1 id_shadow รหสค าถามเงา INT PK NOT NULL 2 choice1 ตวเลอกท 1 VARCHAR(50) NOT NULL

3 choice2 ตวเลอกท 2 VARCHAR(50) NOT NULL

4 choice3 ตวเลอกท 3 VARCHAR(50) NOT NULL 5 choice4 ตวเลอกท 4 VARCHAR(50) NOT NULL

6 answer ตวเลอกทถก INT NOT NULL

3.12 Class diagram of Animal web service system เปนแผนภาพทแสดง Class และความสมพนธในแงตาง ๆ ทเกดขนในการใชงาน Animal web service system วาแตละกจกรรมมความสมพนธกนแบบใด ดงรปท 3.33

53

3.13 ค าอธบาย Class diagram for Animal web service system

3.13.1 Class diagram of MyDatabase

รปท 3. 34 Class diagram of MyDatabase

รปท 3. 33 Class diagram of Animal web service system

54

ค าอธบาย Class diagram of MyDatabase - host : String หมายถง ชอเครอง server - user : String หมายถง ขอมลชอผใชส าหรบเขาถงเครอง server - password : String หมายถง รหสผาน ส าหรบเขาถงเครอง server - database : String หมายถง ชอฐานขอมล +connect() หมายถง operation ทท าหนาทเชอมตอกบฐานขอมล

+fncInsertRecord() : String หมายถง operation ทท าหนาทเพมขอมล ในฐานขอมล +fncSelectRecord() : String หมายถง operation ทท าหนาทคนหา ขอมลในฐานขอมล +fncUpdateRecord() : String หมายถง operation ทท าหนาทแกไข ขอมลในฐานขอมล +fncDeleteRecord() : String หมายถง operation ทท าหนาทลบขอมล ในฐานขอมล +destruct() หมายถง operation ทท าหนาทจบการเชอมตอกบฐานขอมล

3.13.2 Class diagram of Login

ค าอธบาย Class diagram of Login - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objSelect : String หมายถง ผลการคนหาขอมลผดแลระบบในฐานขอมล +checkLogin(strTable, strCondition) : String หมายถง operation

ทท าหนาทตรวจสอบขอมล user และ password จากแฟมขอมลผดแล ระบบ

รปท 3. 35 Class diagram of Login

55

3.13.3 Class diagram of InsertData

ค าอธบาย Class diagram of InsertData - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objInsert : String หมายถง ผลของการเพมขอมลสตวในฐานขอมล

+insertRecord(strTable, strField, strValue) : String หมายถง operation ทท าหนาทเพมขอมลสตวในฐานขอมล

3.13.4 Class diagram of UpdateData

ค าอธบาย Class diagram of UpdateData - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objUpdate : String หมายถง ผลของการแกไขขอมลสตวในฐานขอมล - objSelect : String หมายถง ขอมลสตวทตองการแกไขจากฐานขอมล

+updateRecord(strTable, strCommand, strCondition) : String หมายถง operation ทท าหนาทแกไขขอมลสตวในฐานขอมล

+getData(strTable, strCondition) : String หมายถง operation ทท า หนาทอานขอมลสตวจากฐานขอมล

รปท 3. 36 Class diagram of InsertData

รปท 3. 37 Class diagram of UpdateData

56

3.13.5 Class diagram of InsertGallery

ค าอธบาย Class diagram of InsertGallery - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objInsert : String หมายถง ผลของการเพมขอมลคลงภาพสตวในฐานขอมล

+insertRecord(strTable, strField, strValue) : String หมายถง operation ทท าหนาทเพมขอมลคลงภาพสตวในฐานขอมล

3.13.6 Class diagram of DeleteGallery

ค าอธบาย Class diagram of DeleteGallery - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objDelete : String หมายถง ผลของการลบขอมลคลงภาพสตวในฐานขอมล +deleteRecord(strTable, strCondition) : String หมายถง

operation ทท าหนาทลบขอมลคลงภาพสตวจากฐานขอมล

รปท 3. 38 Class diagram of InsertGallery

รปท 3. 39 Class diagram of DeleteGallery

57

3.13.7 Class diagram of InsertShadow

ค าอธบาย Class diagram of InsertShadow - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objInsert : String หมายถง ผลของการเพมขอมลค าถามของเกมเงาปรศนาในฐานขอมล

+insertRecord(strTable, strField, strValue) : String หมายถง operation ทท าหนาทเพมขอมลค าถามของเกมเงาปรศนาในฐานขอมล

3.13.8 Class diagram of InsertTestShadow

ค าอธบาย Class diagram of InsertTestShadow - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objInsert : String หมายถง ผลของการเพมขอมลของเกมเงาปรศนาในฐานขอมล

+insertRecord(strTable, strField, strValue) : String หมายถง operation ทท าหนาทเพมขอมลของเกมเงาปรศนาในฐานขอมล

รปท 3. 40 Class diagram of InsertShadow

รปท 3. 41 Class diagram of InsertTestShadow

58

3.13.9 Class diagram of DeleteShadow

ค าอธบาย Class diagram of DeleteShadow - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objDelete : String หมายถง ผลของการลบขอมลของเกมเงาปรศนาใน ฐานขอมล +deleteRecord(strTable, strCondition) : String หมายถง

operation ทท าหนาทลบขอมลของเกมเงาปรศนาจากฐานขอมล

3.13.10 Class diagram of InsertTestSound

ค าอธบาย Class diagram of InsertTestSound - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objInsert : String หมายถง ผลของการเพมขอมลของเกมทายเสยงสตวในฐานขอมล

+insertRecord(strTable, strField, strValue) : String หมายถง operation ทท าหนาทเพมขอมลของเกมทายเสยงสตวในฐานขอมล

รปท 3. 42 Class diagram of DeleteShadow

รปท 3. 43 Class diagram of InsertTestSound

59

3.13.11 Class diagram of DeleteSound

ค าอธบาย Class diagram of DeleteSound - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objDelete : String หมายถง ผลของการลบขอมลของเกมทายเสยงสตวใน ฐานขอมล +deleteRecord(strTable, strCondition) : String หมายถง

operation ทท าหนาทลบขอมลของเกมเกมทายเสยงสตวจากฐานขอมล

3.13.12 Class diagram of RandomShadow

ค าอธบาย Class diagram of RandomShadow - connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objSelect : String หมายถง ขอมลเกมเงาปรศนาทสมมา 5 ขอจากฐานขอมล +getData(strTable, strCondition) : String

หมายถง operation ทท าหนาทอานขอมลเกมเงาปรศนาจากฐานขอมลโดยสมมา 5 ขอ

รปท 3. 44 Class diagram of DeleteSound

รปท 3. 45 Class diagram of RandomShadow

60

3.13.13 Class diagram of RandomSound

ค าอธบาย Class diagram of RandomSound

- connection : MyDatabase หมายถง สราง Instant ของคลาส MyDatabase - objSelect : String หมายถง ขอมลเกมทายเสยงสตวทสมมา 5 ขอจากฐานขอมล +getData(strTable, strCondition) : String

หมายถง operation ทท าหนาทอานขอมลเกมทายเสยงสตวจากฐานขอมลโดยสมมา 5 ขอ

3.14 Sequence diagram of Animal Application

Sequence diagram เปนแผนภาพแสดงล าดบเหตการณ และการสอสารของ Object ทเกดขนในแตละฟงกชนการท างานหลกของระบบ Animal Application

รปท 3. 46 Class diagram of RandomSound

61

3.14.1 Sequence diagram of View files คอแผนภาพแสดงล าดบเหตการณดไฟลภาพ ไฟลวดโอ และไฟลเสยง ดงรปท 3.47

รปท 3. 47 Sequence diagram of View files

62

1: prepare() หมายถง operation ทท าหนาทเสมอนผใชเลอกหมวดของสตวทตองการ 1.1: viewDidload() หมายถง operation ทท าหนาทสรางเมนรปภาพสตวตามหมวดทผใชเลอก

1.1.1: Connect Animal web service system หมายถง ระบบดงขอมลภาพสตวตามหมวดทผใชเลอกจาก Animal web service system 1.1.2: Return jsonObject Data หมายถง เปรยบเสมอน Animal web service system สงคนคาเปนชดขอมลของภาพสตวใหระบบ 1.1.3: collectionView() หมายถง operation ทท าหนาทดงขอมลภาพสตวจากชดขอมล เพอแสดงผลบนหนาจอสมารทโฟนของผใช 1.1.4: Show animal list หมายถง แสดงภาพสตวตามหมวดทผใชเลอกบนอปกรณสมารทโฟนของผใช

2: prepare() หมายถง operation ทท าหนาทเสมอนผใชเลอกภาพสตวทตองการดรายละเอยด 2.1: viewDidload() หมายถง operation ทท าหนาทสรางเมนรายละเอยดของสตวตามภาพสตวทผใชเลอก

2.1.1: Show animal detail menu หมายถง แสดงเมนรายละเอยดของสตวบนอปกรณสมารทโฟนของผใช

3: changMenu() หมายถง operation ทท าหนาทผใชเลอกเมนรายละเอยดของสตวทตองการ 3.1: playSound() หมายถง operation ทท าหนาท อานขอมลไฟลเสยง 3.2: Play animal sound หมายถง ระบบแสดงผลเปนเสยงของสตว 3.3: Play video animal หมายถง ระบบแสดงผลเปนวดโอของสตว 3.4: viewWillDissappear() หมายถง operation ทท าหนาทหยดเลนไฟลวดโอ 3.5: Show animal detail menu หมายถง แสดงเมนรายละเอยดของสตว 3.6: viewWillAppear() หมายถง operation ทท าหนาทเรยกการท างานของ Sequence diagram of View image gallery 3.7: Show animal detail menu หมายถง แสดงเมนรายละเอยดของสตว

63

3.14.2 Sequence diagram of View image gallery คอแผนภาพแสดงล าดบเหตการณดคลงรปภาพ ดงรปท 3.48 1:viewDidload() หมายถง operation ทท าหนาทสรางคลงรปภาพตามภาพของสตวทผใชเลอก

1.1:Connect Animal web service system หมายถง ระบบดงขอมลคลงภาพสตวตามภาพสตวทผใชเลอกจาก Animal web service system 1.2:Return jsonObject Data หมายถง เปรยบเสมอน Animal web service system สงคนคาเปนชดขอมลของคลงภาพสตวใหระบบ 1.3:collectionView() หมายถง operation ทท าหนาทดงขอมลคลงภาพสตวจากชดขอมลเพอแสดงผลบนหนาจอสมารทโฟนของผใช 1.4:Show animal image gallery หมายถง แสดงคลงรปภาพ

2:prepare() หมายถง operation ทท าหนาทเสมอนผใชเลอกภาพของสตวทตองการดแบบขยาย 2.1:viewDidload() หมายถง operation ทท าหนาทอานไฟลภาพของสตวทผใชเลอกแบบขยาย

2.1.1:Show animal big image หมายถง แสดงรปภาพสตวแบบขยายตามทผใชเลอก

รปท 3. 48 Sequence diagram of View image gallery

64

3.14.3 Sequence diagram of Play shadow game คอแผนภาพแสดงล าดบเหตการณเลนเกมเงาสตวปรศนา ดงรปท 3.49

1:viewDidload() หมายถง operation ทท าหนาท สรางเกมเงาสตวปรศนา 2:Connect Animal web service system หมายถง ระบบดงขอมลค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอกจาก Animal web service system

2.1:Return jsonObject Data หมายถง เปรยบเสมอน Animal web service system สงคนคาเปนชดขอมลของค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอกใหระบบ

3:getData() หมายถง operation ทท าหนาทดงขอมลค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอกจากชดขอมล เพอแสดงผลบนหนาจอสมารทโฟนของผใช 4:Show question and choice หมายถง แสดงค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอก 5:checkAnswer() หมายถง operation ทท าหนาทเปรยบเสมอนผใชเลอกค าตอบทตองการจากภาพของสตวทเปนตวเลอก

5.1:Check answer หมายถง ระบบจะตรวจสอบค าตอบของผใช เพอค านวณคะแนน

รปท 3. 49 Sequence diagram of Play shadow game

65

5.2:getData() หมายถง operation ทท าหนาทดงขอมลค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอก ขอถดไป จากชดขอมล เพอแสดงผลบนหนาจอสมารทโฟนของผใช 5.3:Show question and choice หมายถง แสดงค าถามเปนเงาของสตว และตวเลอกเปนภาพ 4 ตวเลอก ขอถดไป 5.4:viewDidload() หมายถง operation ทท าหนาทดงผลคะแนน

5.4.1:Show score is star หมายถง แสดงผลคะแนนเปนรปดาว โดยมผลการเลน คอ 5 ดาว 4 ดาว 3 ดาว 2 ดาว และ1 ดาว ตามจ านวนขอทผใชตอบถก

3.14.4 Sequence diagram of Play sound game คอแผนภาพแสดงล าดบเหตการณเลนเกมทายเสยงสตว ดงรปท 3.50

รปท 3. 50 Sequence diagram of Play sound game

66

1:viewDidload() หมายถง operation ทท าหนาท สรางเกมทายเสยงสตว 2:Connect Animal web service system หมายถง ระบบดงขอมลค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอกจาก Animal web service system

2.1:Return jsonObject Data หมายถง เปรยบเสมอน Animal web service system สงคนคาเปนชดขอมลของค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอกใหระบบ

3:getData() หมายถง operation ทท าหนาทดงขอมลค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอกจากชดขอมล เพอแสดงผลบนหนาจอสมารทโฟนของผใช 4:playSound() หมายถง operation ทท าหนาทเลนเสยงสตว 5:Show question and choice หมายถง แสดงค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอก 6:checkAnswer() หมายถง operation ทท าหนาทเปรยบเสมอนผใชเลอกค าตอบทตองการจากภาพของสตวทเปนตวเลอก

6.1:Check answer หมายถง ระบบจะตรวจสอบค าตอบของผใช เพอค านวณคะแนน 6.2:getData() หมายถง operation ทท าหนาทดงขอมลค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอก ขอถดไป จากชดขอมล เพอแสดงผลบนหนาจอสมารทโฟนของผใช 6.3:playSound() หมายถง operation ทท าหนาทเลนเสยงสตว 6.4:Show question and choice หมายถง แสดงค าถามเปนเสยงของสตว และตวเลอกเปนภาพ 4 ตวเลอก ขอถดไป 6.5:viewDidload() หมายถง operation ทท าหนาทดงผลคะแนน

6.5.1:Show score is star หมายถง แสดงผลคะแนนเปนรปดาว โดยมผลการเลน คอ 5 ดาว 4 ดาว 3 ดาว 2 ดาว และ1 ดาว ตามจ านวนขอทผใชตอบถก

3.15 Sequence diagram of Animal web service System Sequence diagram เปนแผนภาพแสดงล าดบเหตการณ และการสอสารของ Object ท

เกดขนในแตละฟงกชนการท างานหลกของระบบ Animal web service System

67

รปท 3. 51 Sequence diagram of Login

3.15.1 Sequence diagram of Login คอแผนภาพแสดงล าดบเหตการณเขาสระบบ ดงรปท 3.51

1: Enter user and password หมายถง ผดแลระบบปอนขอมลชอผใช และรหสผาน 1.1: checkLogin(strTable, strCondition) : String หมายถง operation ทท าหนาท ตรวจสอบขอมลชอผใช และรหสผาน 1.2: Display manage animal data page หมายถง แสดงหนาจอจดการขอมล

1.3: Show message หมายถง แสดงขอความแจงผดแลระบบ 1.4: Display login page หมายถง แสดงหนาจอเขาสระบบ

68

3.15.2 Sequence diagram of Manage animal data คอแผนภาพแสดงล าดบเหตการณจดการขอมลสตว ดงรปท 3.52 1: Select type manage data หมายถง ผดแลระบบเลอกรปแบบการจดการกบขอมลของสตว โดยมรปแบบใหเลอกคอ เพม ลบ และแกไข 2: Enter animal data หมายถง ผดแลระบบเพมขอมลของสตว เชน ชอ ไฟลเสยง ไฟลวดโอ ไฟลรปภาพ

2.1: insertRecord(strTable, strField, strValue) : String หมายถง operation ทท าหนาทบนทกขอมลของสตวทผดแลระบบเพม

2.2: Show message “success” หมายถง แสดงขอความใหทราบวาเพมขอมลส าเรจ 3: getData(strTable, strCondition) : String หมายถง operation ทท าหนาทเสมอนผดแลระบบแกไขคาขอมลของสตวทตองการ

3.1: updateRecord(strTable, strCommand, strCondition) : String หมายถง operation ทท าหนาทแกไขขอมลของสตวทผดแลระบบแกไข 3.2: Show message “success” หมายถง แสดงขอความใหทราบวาแกไขขอมลส าเรจ

รปท 3. 52 Sequence diagram of Manage animal data

69

3.15.3 Sequence diagram of Manage animal image gallery คอแผนภาพแสดงล าดบเหตการณจดการขอมลคลงรปภาพสตว ดงรปท 3.53 1: Select type manage data หมายถง ผดแลระบบเลอกรปแบบการจดการกบขอมลของสตว โดยมรปแบบใหเลอกคอ เพม ลบ และแกไข

2: Enter gallery animal หมายถง ผดแลระบบเพมขอมลคลงรปภาพสตว 2.1: insertRecord(strTable, strField, strValue) : String หมายถง operation ทท าหนาทบนทกขอมลของสตว 2.2: Show message “success” หมายถง แสดงขอความใหทราบวาเพมขอมลส าเรจ

3: Select image in gallery หมายถง ผดแลระบบเลอกขอมลทตองการลบ 3.1: deleteRecord(strTable, strCondition) : String หมายถง ระบบท าการลบขอมลของภาพในคลงสตวทผดแลระบบเลอก

3.2: Show message “success” หมายถง แสดงขอความใหทราบวาลบขอมลส าเรจ

รปท 3. 53 Sequence diagram of Manage animal image gallery

70

3.15.4 Sequence diagram of Manage quiz for sound game คอแผนภาพแสดงล าดบเหตการณจดการขอมลเกมทายเสยงสตว ดงรปท 3.54 1: Select type manage data หมายถง ผดแลระบบเลอกรปแบบการจดการกบขอมลค าถามเกมทายเสยงสตวโดยมรปแบบใหเลอกคอ เพม ลบ

2: Enter question and choice หมายถง ระบบแสดงหนาจอการท างานส าหรบการเพมขอมลค าถามเกมทายเสยงสตว

2.1: insertRecord(strTable, strField, strValue) : String หมายถง operation ทท าหนาทบนทกขอมลค าถามเกมทายเสยงสตวทผดแลระบบเพม 2.2: Show message “success” หมายถง แสดงขอความใหทราบวาเพมขอมลส าเรจ

3: Select quiz for delete หมายถง ผดแลระบบเลอกค าถามเกมทายเสยงสตวทตองการ 3.1: deleteRecord(strTable, strCondition) : String หมายถง operation ทท าหนาทลบขอมลค าถามเกมทายเสยงสตวทผดแลระบบเลอก

3.2: Show message “success” หมายถง แสดงขอความใหทราบวาลบขอมลส าเรจ

รปท 3. 54 Sequence diagram of Manage quiz for sound game

71

3.15.5 Sequence diagram of Manage quiz for shadow game คอแผนภาพแสดงล าดบเหตการณจดการขอมลเกมเงาสตวปรศนา ดงรปท 3.55 1: Select type manage data หมายถง ผดแลระบบเลอกรปแบบการจดการกบขอมลค าถามเกมเงาสตวปรศนาโดยมรปแบบใหเลอกคอ เพม ลบ

2: insertRecord(strTable, strField, strValue) : String หมายถง operation ทท าหนาทเสมอนผดแลระบบเพมขอมลค าถามของเกมเงาสตวปรศนา

2.1: insertRecord(strTable, strField, strValue) : String หมายถง operation ทท าหนาทเสมอนผดแลระบบเพมขอมลตวเลอกของเกมเงาสตวปรศนา 2.2: Show message “success” หมายถง แสดงขอความใหทราบวาเพมขอมลส าเรจ

3: Select quiz for delete หมายถง ผดแลระบบเลอกค าถามเกมเงาสตวปรศนาทตองการ 3.1: deleteRecord(strTable, strCondition) : String หมายถง operation ทท าหนาทลบขอมลค าถามเกมเงาสตวปรศนาทผดแลระบบเลอก

3.2: Show message “success” หมายถง แสดงขอความใหทราบวาลบขอมลส าเรจ

รปท 3. 55 Sequence diagram of Manage quiz for shadow game

72

3.15.6 Sequence diagram of Random quiz for game คอแผนภาพแสดงล าดบเหตการณสมค าถามของเกมทตองการ ดงรปท 3.56 1: Retrieve quiz of shadow game หมายถง ระบบสตวโลกแอปพลเคชนตองการดงค าถามของเกมเงาสตวปรศนา

1.1: getData(strTable, strCondition) : String หมายถง operation ทท าหนาทสมค าถามของเกมเงาสตวปรศนา จ านวน 5 ขอ 1.2: Return jsonObject Data หมายถง สงคนคาขอมลค าถามและตวเลอก

2: Retrieve quiz of Sound game หมายถง ระบบสตวโลกแอปพลเคชนตองการดงค าถามของเกมทายเสยงสตว

2.1: getData(strTable, strCondition) : String หมายถง operation ทท าหนาทสมค าถามของเกมทายเสยงสตว จ านวน 5 ขอ 2.2: Return jsonObject Data หมายถง สงคนคาขอมลค าถามและตวเลอก

รปท 3. 56 Sequence diagram of Random quiz for game

73

บทท 4 ผลการด าเนนงาน

การพฒนาแอปพลเคชน Animal Application เปนการพฒนาตามขอบเขตใหสอดคลองกบ

วตถประสงคของการจดท าโครงงาน ซงมผลการด าเนนงาน เปนดงน 4.1 ผลการด าเนนงานของ Animal Application

4.1.1 Main menu รายละเอยดหนาจอเมนหลก

1. ปม LEARNING คอ ตองการศกษารายละเอยดของสตวชนดตาง ๆ 2. ปม SOUND GAME คอ ตองการเลนเกมทายเสยงสตว 3. ปม SHADOW GAME คอ ตองการเลนเกมเงาสตวปรศนา

รปท 4. 1 หนาจอเมนหลก

74

4.1.2 Screen for View files Use case 1) หนาจอเมนหมวดหมของสตว

รายละเอยดหนาจอเมนหมวดหมของสตว

1. ปม สตวบก คอ ตองการดสตวชนดสตวบก 2. ปม สตวปก คอ ตองการดสตวชนดสตวปก 3. ปม ครงบกครงน า คอ ตองการดสตวชนดสตวครงบกครงน า

รปท 4. 2 หนาจอเมนหมวดหมของสตว

75

2) หนาจอเมนสตวตามชนดทเลอก รายละเอยดหนาจอเมนสตวตามชนดทเลอก

1. Collection view แสดงรปภาพสตวเปนเมนใหผใชเลอกวาตองการดสตวอะไร

2. ปม MENU คอตองการกลบไปหนาเมนหมวดหมของสตว

รปท 4. 3 หนาจอเมนสตวตามชนดทเลอก

76

3) หนาจอเมนแสดงรายละเอยดของสตวทเลอก รายละเอยดหนาจอเมนแสดงรายละเอยดของสตวตามชนดทเลอก

1. แถบเมน Sound เปน (SegmentedControl) คอ ตองการฟงเสยงสตว 2. แถบเมน Video เปน (SegmentedControl) คอ ตองการดวดโอของสตว 3. แถบเมน Gallery เปน (SegmentedControl) คอ ตองการดคลงภาพสตว 4. รปภาพสตว เปน Image view คอ สามารถเลนเสยงสตวได เมอผใชแตะนว 1

ครงท รปภาพ 5. ปม back คอ ตองการกลบไปหนาจอเมนสตวตามชนดทเลอก

รปท 4. 4 หนาจอแสดงเมนแสดงรายละเอยดของสตวชนดทเลอก

77

4) หนาจอแสดงวดโอของสตว รายละเอยดหนาจอแสดงวดโอของสตว

1. แถบเมน Sound เปน (SegmentedControl) คอ ตองการฟงเสยงสตว 2. แถบเมน Video เปน (SegmentedControl) คอ ตองการดวดโอของสตว 3. แถบเมน Gallery เปน (SegmentedControl) คอ ตองการดคลงภาพสตว 4. ปม Back คอ ตองการกลบไปหนาเมนแสดงรายละเอยดของสตวตามชนดท

เลอก

รปท 4. 5 หนาจอแสดงวดโอของสตว

78

4.1.3 Screen for View image gallery Use case

รายละเอยดหนาจอแสดงคลงภาพสตว 1. ปม Back คอ ตองการกลบไปหนาเมนแสดงรายละเอยดของสตวตามชนดท

เลอก 2. รปภาพสตว เปน Collection view คอ ตองการดภาพของสตวขนาดใหญ ให

ผใชแตะนวทรปภาพ จากนนระบบจะแสดงผลเปนหนาจอภาพขนาดใหญดงรปท 4.7

รปท 4. 6 หนาจอแสดงภาพของสตวขนาดใหญ รปท 4. 7 หนาจอแสดงคลงภาพสตว

79

4.1.4 Screen for Play shadow game Use case 1) หนาจอแสดงค าถามในเกมเงาสตวปรศนา

รายละเอยดหนาจอแสดงค าถามในเกมเงาสตวปรศนา

1. รปเงาสตว เปน Image view คอ แสดงค าถามเงาสตว 2. ปม รปภาพทง 4 ปม คอ ตวเลอกทแสดงเปนรปภาพใหผใชแตะนว 1 ครง

ทตวเลอกทตองการ จากนน ระบบจะแสดงค าถามขอถดไป 3. ปม เลกเลน คอ ตองการกลบไปหนาจอเมนหลก

รปท 4. 8 หนาจอแสดงค าถามในเกมเงาสตวปรศนา

80

2) หนาจอแสดงคะแนนจากการเลนเกมเงาปรศนา รายละเอยดหนาจอแสดงคะแนนจากการเลนเกมเงาปรศนา

1. รปดาว เปน Image view คอ แสดงจ านวนดาวตามคะแนนทได 2. คะแนนทได เปน Label คอ แสดงคะแนนทได 3. ปม เลนใหม คอ ตองการกลบไปหนาจอแสดงค าถามในเกมเงาสตวปรศนา 4. ปม กลบเมน คอ ตองการกลบไปหนาจอเมนหลก

รปท 4. 9 หนาจอแสดงคะแนนจากการเลนเกมเงาปรศนา

81

4.1.5 Screen for Play sound game Use case 1) หนาจอแสดงค าถามในเกมทายเสยงสตว

รายละเอยดหนาจอแสดงค าถามในเกมทายเสยงสตว

1. รปล าโพง เปน Image view คอ แสดงค าถามเปนเสยงสตว 2. ปม รปภาพทง 4 ปม คอ ตวเลอกทแสดงเปนรปภาพใหผใชแตะนว 1 ครง

ทตวเลอกทตองการ จากนน ระบบจะแสดงค าถามขอถดไป 3. ปม เลกเลน คอ ตองการกลบไปหนาจอเมนหลก

รปท 4. 10 หนาจอแสดงค าถามในเกมทายเสยงสตว

82

2) หนาจอแสดงคะแนนจากการเลนเกมทายเสยงสตว รายละเอยดหนาจอแสดงคะแนนจากการเลนเกมทายเสยงสตว

1. รปดาว เปน Image view คอ แสดงจ านวนดาวตามคะแนนทได 2. คะแนนทได เปน Label คอ แสดงคะแนนทได 3. ปม เลนใหม คอ ตองการกลบไปหนาจอแสดงค าถามในเกมทายเสยงสตว 4. ปม กลบเมน คอ ตองการกลบไปหนาจอเมนหลก

รปท 4. 11 หนาจอแสดงคะแนนจากการเลนเกมทายเสยงสตว

83

4.2 ผลการด าเนนงานของ Animal web service system 4.2.1 Screen for Login Use case

รายละเอยดหนาจอการเขาสระบบ

1. ผดแลระบบกรอกขอมล Username และ Password 2. ปม เขาสระบบ คอ ตองการเขาสระบบ

รปท 4. 12 หนาจอการเขาสระบบ

84

4.2.2 Screen for Manage data

รายละเอยดหนาจอแสดงการจดการขอมล 1. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 2. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 3. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 4. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 5. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 6. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 7. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา

รปท 4. 13 หนาจอแสดงเมนการจดการขอมล

85

8. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 9. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

4.2.3 Screen for Manage animal data Use case 1) หนาจอเพมขอมลสตว

รายละเอยดหนาจอเพมขอมลสตว 1. ผดแลระบบปอนขอมล ชอสตวภาษาไทย, ชอสตวภาษาองกฤษ, รายละเอยด

ของสตว 2. ผดแลระบบเลอกชนดของสตว, ภาพหนาปกของสตว, ไฟลวดโอ, ไฟลเสยง 3. ปม เพม คอ ตองการเพมขอมลสตวในระบบ 4. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 5. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 6. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 7. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 8. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว

รปท 4. 14 หนาจอเพมขอมลสตว

86

9. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 10. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 11. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 12. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

2) หนาจอแสดงขอมลสตวทงหมด

บรรณานกรม [1] พฒนาการดานสตปญญา: วยกอนอนบาล (Young Chicdren Cognitive Development). [Online]. Available: http://taamkru.com/th/, 2548

รปท 4. 15 หนาจอแสดงขอมลสตวทงหมด

87

รายละเอยดหนาจอแสดงขอมลสตวทงหมด 1. ปม แกไข คอ ตองการแกไขขอมลสตว 2. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 3. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 4. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 5. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 6. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 7. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 8. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 9. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 10. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

3) หนาจอแกไขขอมลสตว

รปท 4. 16 หนาจอแกไขขอมลสตว

88

รายละเอยดหนาจอแกไขขอมลสตว 1. ผดแลระบบปอนขอมลชอสตวภาษาไทย และรายละเอยด 2. ผดแลระบบเลอกชนดของสตว 3. ปม แกไข คอ ตองการแกไขขอมลสตว 4. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 5. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 6. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 7. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 8. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 9. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 10. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 11. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 12. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

4.2.4 Screen for Manage animal image gallery 1) หนาจอเพมภาพสตวใน Gallery

รปท 4. 17 หนาจอเพมภาพสตวใน Gallery

89

รายละเอยดหนาจอเพมภาพสตวใน Gallery 1. ผดแลระบบเลอกชอสตวทตองการเพม และภาพหนาปก 2. ปม เพม คอ ตองการเพมขอมลภาพสตวใน Gallery 3. ปม ด Gallery คอ ตองการดภาพใน Gallery ทงหมด 4. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 5. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 6. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 7. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 8. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 9. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 10. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 11. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 12. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

2) หนาจอแสดงภาพสตวใน Gallery

รปท 4. 18 หนาจอแสดงภาพสตวใน Gallery

90

รายละเอยดหนาจอแสดงภาพสตวใน Gallery 1. ผดแลระบบเลอกชอสตวทตองการลบ 2. ปม แสดง คอ ตองการแสดงภาพสตวใน Gallery 3. ปม ลบ คอ ตองการลบขอมลภาพสตวใน Gallery 4. ปม ด Gallery คอ ตองการดภาพใน Gallery ทงหมด 5. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 6. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 7. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 8. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 9. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 10. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 11. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 12. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 13. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

3) หนาจอแสดงการลบภาพสตวใน Gallery

รปท 4. 19 หนาจอแสดงการลบภาพสตวใน Gallery

91

รายละเอยดหนาจอแสดงการลบภาพสตวใน Gallery 1. ปม OK คอ ตองการลบภาพสตวใน Gallery 2. ปม Cancel คอ ตองการยกเลกการลบขอมลภาพสตวใน Gallery 3. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 4. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 5. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 6. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 7. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 8. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 9. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 10. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 11. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

4.2.5 Screen for Manage quiz for sound game Use case 1) หนาจอเพมภาพเงาสตว

รปท 4. 20 หนาจอเพมภาพเงาสตว

92

รายละเอยดหนาจอเพมภาพเงาสตว 1. ผดแลระบบปอนขอมลชอสตว 2. ผดแลระบบเลอกภาพปกต และภาพเงาสตว 3. ปม เพม คอ ตองการเพมขอมลภาพเงาสตว 4. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 5. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 6. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 7. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 8. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 9. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 10. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 11. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 12. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

2) หนาจอแสดงภาพเงาทงหมด

รปท 4. 21 หนาจอแสดงภาพเงาทงหมด

93

รายละเอยดหนาจอเพมภาพเงาสตว 1. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 2. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 3. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 4. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 5. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 6. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 7. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 8. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 9. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

3) หนาจอเพมขอมลค าถามเกมเงาภาพปรศนา

รปท 4. 22 หนาจอเพมขอมลค าถามเกมเงาภาพปรศนา

94

รายละเอยดหนาจอลบขอมลค าถามเกมเงาภาพปรศนา 1. ผดแลระบบเลอกโจทยเงา , ภาพตวเลอก 4 ภาพ และค าตอบทถก 2. ปม เพม คอ ตองการเพมขอมลค าถามเกมเงาภาพปรศนา 3. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 4. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 5. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 6. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 7. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 8. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 9. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 10. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 11. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

4) หนาจอแสดงขอมลค าถามเกมเงาภาพปรศนา

รปท 4. 23 หนาจอแสดงขอมลค าถามเกมเงาภาพปรศนา

95

รายละเอยดหนาจอแสดงขอมลค าถามเกมเงาภาพปรศนา 1. ปม ลบ คอ ตองการลบขอมลค าถามเกมเงาปรศนา 2. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 3. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 4. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 5. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 6. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 7. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 8. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 9. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 10. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

5) หนาจอลบขอมลค าถามเกมเงาภาพปรศนา

รปท 4. 24 หนาจอลบขอมลค าถามเกมเงาภาพปรศนา

96

รายละเอยดหนาจอลบขอมลค าถามเกมเงาภาพปรศนา 1. ปม OK คอ ตองการลบขอมลค าถามเกมเงาภาพปรศนา 2. ปม Cancel คอ ตองการยกเลกการลบขอมลค าถามเกมเงาภาพปรศนา 3. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 4. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 5. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 6. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 7. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 8. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 9. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 10. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 11. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

4.2.6 Screen for Manage quiz for shadow game Use case

1) หนาจอเพมขอมลค าถามเกมทายเสยงสตว

รปท 4. 25 หนาจอเพมขอมลค าถามเกมทายเสยงสตว

97

รายละเอยดหนาจอเพมขอมลค าถามเกมทายเสยงสตว 1. ผดแลระบบเลอกโจทยเสยง , ภาพตวเลอก 4 ภาพ และค าตอบทถก 2. ปม เพม คอ ตองการเพมขอมลค าถามเกมเงาภาพปรศนา 3. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 4. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 5. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 6. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 7. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 8. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 9. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 10. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 11. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

2) หนาจอแสดงขอมลค าถามเกมทายเสยงสตว

รปท 4. 26 หนาจอแสดงขอมลค าถามเกมทายเสยงสตว

98

รายละเอยดหนาจอแสดงขอมลค าถามเกมทายเสยงสตว 1. ปม ลบ คอ ตองการลบขอมลค าถามเกมทายเสยงสตว 2. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 3. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 4. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 5. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 6. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 7. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 8. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 9. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 10. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

3) หนาจอลบขอมลค าถามเกมทายเสยงสตว

รปท 4. 27 หนาจอลบขอมลค าถามเกมทายเสยงสตว

99

รายละเอยดหนาจอลบขอมลค าถามเกมทายเสยงสตว 1. ปม OK คอ ตองการลบขอมลค าถามเกมทายเสยงสตว 2. ปม Cancel คอ ตองการยกเลกการลบขอมลค าถามเกมทายเสยงสตว 3. เมน ขอมลสตว คอ ตองการแกไขขอมลสตว 4. เมน เพมสตว คอ ตองการเพมขอมลสตวตวใหม 5. เมน เพมรป Gallery คอ ตองการเพมรปภาพใน Gallery 6. เมน ขอมลภาพเงา คอ แสดงขอมลภาพเงาสตวทงหมด 7. เมน เพมภาพเงา คอ ตองการเพมขอมลภาพเงาสตว 8. เมน ขอมลเกมเงาปรศนา คอ ตองการลบค าถามเกมเงาปรศนา 9. เมน เพมเกมเงาปรศนา คอ ตองการเพมค าถามใหมในเกมเงาปรศนา 10. เมน ขอมลเกมทายเสยง คอ ตองการลบค าถามเกมทายเสยง 11. เมน เพมเกมทายเสยง คอ ตองการเพมค าถามใหมในเกมเงาเสยง

100

บทท 5 สรปผลการด าเนนงาน

5.1 ปญหา และอปสรรค แนวทางการแกไข 5.1.1 สรปปญหา และอปสรรคของการด าเนนงาน 1) เวลาทมในการด าเนนงานมจ ากด มผลตอการพฒนาโครงการใหมประสทธภาพ เนองจากผพฒนาตองใชเวลาในการศกษาขอมลเรองการตดตอใชขอมลของระบบ Web service 2) โปรแกรมทพฒนาขนนสามารถใชไดเฉพาะอปกรณมอถอทเปนระบบปฏบตการ iOS เทานน 3) โปรแกรม Swift ทน ามาใชเพอพฒนาระบบสตวโลกแอปพลเคชนนน มการ

ปรบปรง version อยตลอดเวลา ท าให code ในโปรแกรมบางอยางไมสามารถใชไดกบ version ใหม

5.1.2 แนวทางการแกไขปญหา 1) ผพฒนาตองวางแผนการท าโครงการใหเหมาะสม เพอใหโครงการทพฒนาขนนม

ประสทธภาพ และส าเรจตามเปาหมายทวางไว 2) ตองพฒนาโปรแกรมนใหรองรบกบระบบปฏบตการอนๆ นอกเหนอจาก iOS เชน ระบบปฏบตการ Android เปนตน 3) ผพฒนาตองปรบปรง code ในโปรแกรมใหใชไดกบ version ใหมอยเสมอ เพอใหระบบสตวโลกแอปพลเคชน สามารถใชงานไดตลอดเวลา

5.2 แนวทางการน าไปพฒนาในอนาคต 5.2.1 มการปรบการใชงานใหเขากบสมารทโฟนทกระบบปฏบตการ

101

บรรณานกรม [1] พฒนาการดานสตปญญา: วยกอนอนบาล (Young Chicdren Cognitive Development). [Online]. Available: http://taamkru.com/th/, 2548 [2] สตวมหศจรรย. [Online]. Available: https://athidtiya1995.wordpress.com/, 2559