แอพพลเคชนเกมเวททอง

บรษท สนกออนไลน จ ากด GAME WAETEETHONG APPLICATION

SANOOK ONLINE LIMITED

นายชตภทร โชคพพฒนพร

โครงงานสหกจนเปนสวนหนงของการศกษาตามหลกสตร

ปรญญาวทยาศาสตรบณฑต สาขาวชาเทคโนโลยมลตมเดย

คณะเทคโนโลยสารสนเทศ

สถาบนเทคโนโลยไทย – ญปน พ.ศ. 2556

แอพพลเคชนเกมเวททอง บรษท สนก ออนไลน จ ากด

GAME WAETEETHONG APPLICATION SANOOK ONLINE LIMITED

นายชตภทร โชคพพฒนพร

โครงงานสหกจศกษานเปนสวนหนงของการศกษาตามหลกสตร

ปรญญาวทยาศาสตรบณฑต สาขาเทคโนโลยมลตมเดย คณะเทคโนโลยสารสนเทศ สถาบนเทคโนโลยไทย-ญป น

พ.ศ. 2556

คณะกรรมการสอบ ........................................................................ประธานกรรมการสอบ (อาจารย ดร. ภาสกร อภรกษวรพนต ) ........................................................................กรรมการสอบ ( อาจารย ภสมะ เจรญพงษ ) .........................................................................อาจารยทปรกษา ( อาจารย ชาญ จารวงศรงส ) .........................................................................ประธานสหกจศกษาสาขาวชา ( อาจารย ภวดล ศรกองธรรม )

ลขสทธของสถาบนเทคโนโลยไทย-ญป น

ก

ชอโครงงาน แอพพลเคชนเกมเวททอง

ผเขยน นาย ชตภทร โชคพพฒนพร

คณะวชา เทคโนโลยสารสนเทศ สาขาวชาเทคโนโลยมลตมเดย

อาจารยทปรกษา อาจารยชาญ จารวงศรงส

พนกงานทปรกษา นาย จรวฒน กรณยวทยาการ

ชอบรษท บรษท สนก ออนไลน จ ากด

ประเภทธรกจ / สนคา ธรกจการใหบรการบนอนเตอรเนต

บทสรป

ไดพฒนาแอพพลเคชนเกมเวททองในระบบปฏบตการAndroid โดยไดท าการศกษาแอพ-

พลเคชนประเภทเกมทายค าจากภาพทมอยแลวใน Play Store และน ามาวเคราะหขอดขอเสย รวมถง

สอบถามความตองการของผใชใน Features ตางๆทตองการใหมในแอพพลเคชนประเภทเกมทายค า

จากภาพ เพอน ามาพฒนาแอพพลเคชนเกมเวททองใหตรงตามความตองการ เมอพฒนาแอพพลเค-

ชนเสรจเรยบรอยแลว ไดน าแอพพลเคชนไปทดสอบ ซงแอพพลเคชนสามารถท างานและแสดงผล

ไดถกตองตรงตามทตองการ

ในการสหกจศกษาครงนไดเรยนรถงการท างานจรงของ Developer ในบรษทขนาดกลาง,

ไดเรยนรเทคนคใหมๆในการเขยนโปรแกรม, ไดรถงงานโปรแกรมเมอรทบรษทสวนใหญตองการ,

ไดพฒนาทกษะของตนเองทงในดานของการเขยนโปรแกรม ( Android, SQL, PHP, CSS ) และ

การออกแบบ ( เวบไซดและแอพพลเคชน ) อกทงไดรบรถงสถานการณและสภาพชวตในการด า-

เนนชวตทท างานจรงและการท างานรวมกบผอน ซงถอวาเปนประสบการณทส าคญในการพฒนา

ตนเองตอไปในอนาคต

ข

Project’s name Game Waeeteethong Application

Writer Mr. Chutipat Chokpipatporn

Faculty Faculty of Information Technology, Multimedia Technology Program

Faculty Advisor Mr. Chan Jaruvongrangsee

Job Supervisor Mr. Jirawat Karanwittayakarn

Company’s name Sanook! Online Limited

Business Type Provided services on the internet

Summary

This project is to develop a game application called Game Waeteethong that available in

mobile platform, Android OS, by studying the word games that have published in Play Store and

analysis those applications about their adventages and disadventages. Then collecting requirement

from users about features that they want in word game application in order to developing Game

Waeteethong application to meet the requirements, before developing game application. When

finished, testing the application to find errors and fix them, which can display result correctly and

all features can response efficiently.

After going to cooperative education at Sanook! Online Limited, I had an experience

about “how developer’s working in large company” , learning a lot of skills in Android and PHP

programming, learning about skills of programmer that most companies required, practicing my

programming skills such as PHP, SQL, Android, CSS ,and practicing design skills in Website and

Android application. Moreover, I learned about real situation and real life during working time

and in working with another people, which is the most important experience for developing

myself in the future.

ค

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

ในการปฏบตงานสหกจศกษาทบรษท สนก ออนไลน จ ากด เปนระยะเวลาทงสน 4 เดอน

นน ไดรบความกรณาและการดแลจากบคคลหลายๆทาน, ไดรบเรยนรการท างานจรง, และไดรบ

ความรตางๆมากมาย ท าใหการปฏบตงานครงนส าเรจลลวงไปไดดวยด

ขอขอบคณ คณจรวฒน กรณยวทยาการ พนกงานทปรกษา ซงใหการดแลและใหค าปรกษา

ตางๆในการท างาน รวมถงตอบขอสงสยตางๆอยางกระจาง พรอมทงแนะน าเทคนคในการท างาน

ซงสามารถน าไปใชไดจรง รวมไปถงพนกงานทานอนๆ ทใหการดแลและตอบขอสงสย รวมถงเปน

ทปรกษาและคอยใหขอมลในดานตางๆในการท างาน ท าใหการสหกจศกษาตลอด 4 เดอนทผานมา

เปนความทรงจ าทนาประทบใจ ขอขอบพระคณทกทานไว ณ โอกาสนดวย

ง

สารบญ

หนา

บทสรป ก Summary ข กตตกรรมประกาศ ค สารบญ ง สารบญตาราง ช สารบญภาพประกอบ ซ

บทท 1. บทน า 1 1.1 ชอและทตงของสถานประกอบการ 1 1.2 ลกษณะธรกจของสถานประกอบการ หรอการใหบรการหลกขององคกร 2 1.3 รปแบบการจดการองคกรและการบรหารองคกร 4 1.4 ต าแหนงและหนาทงานทนกศกษาไดรบมอบหมาย 5 1.5 พนกงานทปรกษาและต าแหนงของพนกงานทปรกษา 5 1.6 ระยะเวลาทปฏบตงาน 5 1.7 ทมาและความส าคญของปญหา 5 1.8 วตถประสงคหรอจดมงหมายของโครงงาน 6 1.9 ผลทคาดวาจะไดรบจากการปฏบตงานหรอโครงงานทไดรบมอบหมาย 6 1.10 นยามศพทเฉพาะ 7

2. ทฤษฎและเทคโนโลยทใชในการปฏบตงาน 8 2.1 ทฤษฎทใชในการปฏบตงาน 8 2.1.1 โครงสรางของแอพพลเคชนบนระบบปฏบตการAndroid 8 2.1.2 สวนประกอบของแอพพลเคชนบนระบบปฏบตการAndroid 9 2.1.3 วงจรชวตของ Android Activity 10 2.2 เทคโนโลยทใชในการปฏบตงาน 12 2.2.1 Java 12

จ

2.2.2 Javascript Object Notation : JSON 13 2.2.3 MySQL 14 2.2.4 Google Cloud Messaging : GCM 15 2.2.5 phpMyAdmin 16 2.2.6 Adobe DreamWeaver 17 2.2.7 File Transfer Protocol : FTP 19 2.2.8 GenyMotion 23

3. แผนงานการปฏบตงานและขนตอนการด าเนนงาน 24 3.1 แผนการปฏบตงาน 24 3.2 รายละเอยดโครงงาน 25 3.2.1 ประชากรและกลมตวอยาง 25 3.2.2 การสรางเครองมอทใชในโรงงาน 25 3.2.2.1 วธการตดตงโปรแกรม Adobe Master Collection CS6 25 3.2.2.2 วธการตดตงโปรแกรม AppServ 27 3.2.2.3 วธการตดตง Java Development Kit : JDK 31 3.2.2.4 วธการตดตงโปรแกรม Eclipse 33 3.2.2.5 วธการตดตงโปรแกรม GenyMotion 34 3.2.3 การเกบรวบรวมขอมล 37 3.3 ขนตอนการด าเนนงานทนกศกษาปฏบตงานหรอโครงงาน 38 3.3.1 งานทปฏบต 38 3.3.1.1 Sanook Weather Application 38 3.3.1.2 Test SQLite Application 41 3.3.1.3 jsTwit Application 44 3.3.1.4 genPassword Application 47 3.3.2 โครงงานแอพพลเคชนเกมเวททอง 49

4. สรปผลการด าเนนงาน การวเคราะหและสรปผลตางๆ 52

4.1 ขนตอนและผลการด าเนนงาน 52 4.1.1 ศกษาและท าความเขาใจเกยวกบรปแบบของชวงปรศนาจกมก 52 ในรายการเวททอง

ฉ

4.1.2 ศกษาแอพพลเคชนเกมทายค าจากภาพทมอยแลวใน Play Store 52 4.1.3 วเคราะหความตองการของผใชงาน 54 4.1.4 ออกแบบ Mock Up ของแอพพลเคชน 55 4.1.5 สรางเวบหลงบานของแอพพลเคชนเกมเวททอง 55 4.1.6 สรางเดโมของแอพพลเคชนเกมเวททอง 59 4.1.7 ทดสอบการท างานของเดโมแอพพลเคชน 61 4.1.8 น าFeedbackและขอเสนอแนะทไดจากการน าเสนอเดโมแอพพลเคชน 61 ไปปรบปรง 4.1.9 พฒนาเดโมแอพพลเคชนใหเปนแอพพลเคชนตวเตม 61 4.1.10 ทดสอบการท างานของแอพพลเคชนเพอหาขอผดพลาดและน าไปปรบปรง 61

4.2 ผลการวเคราะห 62 4.2.1 วเคราะหการท างานและการตอบสนองของระบบเกม 62 4.2.2 วเคราะหการท างานและการตอบสนองของ features ตางๆในแอพพลเคชน 62 4.2.3 วเคราะหการท างานและการตอบสนองของเวบหลงบาน 62

4.3 วจารณขอมลโดยเปรยบเทยบผลทไดรบกบวตถประสงคและจดมงหมาย 63 การปฏบตงานหรอการจดท าโครงการ

5. บทสรปและขอเสนอแนะ 68

5.2 สรปผลการด าเนนงาน 68 5.2 แนวทางแกไขปญหา 69 5.3 ขอเสนอแนะจากการด าเนนงาน 69

เอกสารอางอง 70

ภาคผนวก 73 ก. Code Web หลงบาน ของ Application เกมเวททอง 74 ข. Code Android ของ Application เกมเวททอง 103 ค. รายงานประจ าสปดาห 179

ประวตผจดท าโครงการ 198

ช

สารบญตาราง

ตารางท หนา

3.1 แผนการปฏบตสหกจศกษา 24

4.1 Data Dictionary ของฐานขอมล 578032 57

4.2 Data Dictionary ของฐานขอมล 578032db2 57

ซ

สารบญภาพประกอบ

ภาพท หนา

1.1 แผนทบรษท สนก ออนไลน จ ากด 1

1.2 แผนผงองคกร 4

2.1 โครงสรางของแอพพลเคชนบนระบบปฏบตการAndroid 9

2.2 Android Activity Life Cycle 11

2.3 การท างานของ GCM 15

2.4 ตวอยางหนาจอ phpMyAdmin 16

2.5 มมมองแบบ Code ใน Dreamweaver 18

2.6 มมมองแบบ Split ใน Dreamweaver 18

2.7 มมมองแบบ Design ใน Dreamweaver 19

2.8 ลกษณะการท างานของ FTP : File Transfer Protocol 22

2.9 Interface ของ GenyMotion 23

3.1 ขนตอนการลงโปรแกรม Adobe Master Collection CS6 (1) 25

3.2 ขนตอนการลงโปรแกรม Adobe Master Collection CS6 (2) 26

3.3 ขนตอนการลงโปรแกรม Adobe Master Collection CS6 (3) 26

3.4 ขนตอนการลงโปรแกรม Adobe Master Collection CS6 (4) 27

3.5 ขนตอนการตดตงโปรแกรม AppServ 27

3.6 แสดงรายละเอยดเงอนไขการ GNU License 28

3.7 เลอกปลายทางการตดตงโปรแกรม AppServ 28

ฌ

3.8 เลอก Package Components ทตองการตดตง 29

3.9 แสดงการก าหนดคาคอนฟกคา Apache Web Server 29

3.10 แสดงการก าหนดคาคอนฟกของ MySQL Database 30

3.11 แสดงหนาจอขนตอนสนสดการตดตงโปรแกรม AppServ 30

3.12 ขนตอนการตดตง JDK ( 1 ) 31

3.13 ขนตอนการตดตง JDK ( 2 ) 31

3.14 ขนตอนการตดตง JDK ( 3 ) 32

3.15 ขนตอนการตดตง JDK ( 4 ) 32

3.16 ขนตอนการตดตงโปรแกรม Eclipse ( 1 ) 33

3.17 ขนตอนการตดตงโปรแกรม Eclipse ( 2 ) 33

3.18 ขนตอนการตดตงโปรแกรม GenyMotion ( 1 ) 34

3.19 ขนตอนการตดตงโปรแกรม GenyMotion ( 2 ) 34

3.20 ขนตอนการตดตงโปรแกรม GenyMotion ( 3 ) 35

3.21 ขนตอนการตดตงโปรแกรม GenyMotion ( 4 ) 35

3.22 ขนตอนการตดตงโปรแกรม GenyMotion ( 5 ) 36

3.23 ขนตอนการตดตงโปรแกรม GenyMotion ( 6 ) 36

3.24 หนงสอคมอเขยนแอพAndroid ฉบบรวมโคด 37

3.25 ไอคอนของแอพพลเคชน Sanook Weather 38

3.26 Widget ของแอพพลเคชน Sanook Weather 39

3.27 Interface ของแอพพลเคชน Sanook Weather ในหนาแสดงสภาพอากาศ 39 วนปจจบน

ญ

3.28 Interface ของแอพพลเคชน Sanook Weather ในหนาแสดงสภาพอากาศ 40 ในสปดาหน

3.29 Interface ของแอพพลเคชน Sanook Weather ในหนาตงคาหนวยของ 40 อณหภมทจะใหแสดง

3.30 ไอคอนของแอพพลเคชน SQLite Test 41

3.31 SplashScreen ของแอพพลเคชน SQLite 41

3.32 Interface หนาแรก ( แสดงรายชอเพอน ) ของแอพพลเคชน SQLite 42

3.33 Interface เมอกดไปทรายชอเพอนในแอพพลเคชน SQLite 42

3.34 Interface หนาแกไขขอมลของเพอนในแอพพลเคชน SQLite 43

3.35 Interface หนาเพมเพอนใหมในแอพพลเคชน SQLite 43

3.36 ไอคอนของแอพพลเคชน jsTwit 44

3.37 SplashScreen ของแอพพลเคชน jsTwit 44

3.38 Interface หนาแรกของแอพพลเคชน jsTwit 45

3.39 หนาจอ login เขาส twitter ของแอพพลเคชน jsTwit 45

3.40 Interface หลงจาก login 46

3.41 Interface หนาแสดงขอมลขาว จส.100 47

3.42 Interface ของโปรแกรม genPassword 48

3.43 Interface เมอกดป ม generate 48

3.44 Interface เมอน าAPI Key ไปตรวจสอบ 48

3.45 รปภาพป มของโหมดคลาสสคเกม 49

3.46 รปภาพป มของโหมดโกสตมาสเตอร 50

ฎ

4.1 แอพพลเคชน SalahToonLite 52

4.2 Interface หนาแรก 53

4.3 Interface หนาเลนเกม 54

4.4 MockUp ของแอพพลเคชนเกมเวททอง 55

4.5 ฐานขอมลของตาราง game 56

4.6 ฐานขอมลตาราง mode 56

4.7 ฐานขอมลตาราง gcm_users 56

4.8 Interface หนาแรกของเวบหลงบาน 58

4.9 Interface หนาเพมดานใหม 58

4.10 Interface หนาเลอก feed 58

4.11 หนา feed 58

4.12 โลโกแอพพลเคชน 59

4.13 หนา SplashScreen 59

4.14 หนา MainActivity 59

4.15 หนา choosemode 59

4.16 หนา download 59

4.17 หนา Settings 59

4.18 หนา HowToPlay 60

4.19 หนา classicgame 60

4.20 หนา ghostmaster 60

4.21 Notification ในโทรศพทมอถอ เมอมการเพมดานใหม 64

ฏ

4.22 การใชงาน ViewPager ในโหมดคลาสสคเกม 64

4.23 การใชงาน Custom ListView ในหนา download 65

4.24 การใช SharedPreferences ในหนา Settings 66

4.25 Splash Screen Animation ของแอพพลเคชนเกมเวททอง 67

1

บทท 1

บทน า

1.1 ชอและทตงของสถานประกอบการ

1.1.1) ชอของสถานประกอบการ : บรษท สนก ออนไลน จ ากด

1.1.2) ทตงของสถานประกอบการ :

อาคารเมองไทย-ภทร คอมเพลกซ อาคาร A ชน 15-1 เลขท 252/19-20

ถนนรชดาภเษก แขวงหวยขวาง เขตหวยขวาง กรงเทพฯ 10310 ประเทศไทย

โทรศพท : +662-833-3000 โทรสาร : +662-833-3113

ภาพท 1.1 แผนทบรษท สนก ออนไลน จ ากด

2

1.2 ลกษณะธรกจของสถานประกอบการ หรอการใหบรการหลกขององคกร

บรษท สนก ออนไลน จ ากด เปนบรษททใหบรการบนอนเทอรเนตแบบครบวงจรทพรอม

ใหบรการส าหรบบคคลทวไปและในสวนของภาคธรกจ เราครบครนดวยขอมล ขาวสาร ความ

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

ททกเวลา

ปจจบนบรษท สนก ออนไลน จ ากด มการใหบรการหลกๆ แบงออกเปน 5 ประเภท ดงน

1) สนก! พอรทล / เวบไซตสนกดอทคอม

เวบไซตอนดบหนงของประเทศ อดแนนไปดวยขอมลขาวสาร, ความบนเทง

น าเสนอดวยความรวดเรวทนเหตการณ อพเดทตลอด 24 ชวโมง, เกาะตดกระแสฮตในสงคม, ฟง

เพลงใหม, ขอมลภาพยนตร, คลปวดโอ, แชท, ดดวง, เวบบอรด, ความรก, การเงน, ไอท, กฬา, และ

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

2) สนก! เกมส 2.1) สนก! เพลยทาวน

โซเชยลเนตเวรกใหม! ส าหรบคนรกเกมสแหงแรกในประเทศไทยอดแนนดวย

โซเชยลเกมสคณภาพ หลากหลายแนว เลนสนกเขาใจงายไมตองแปล ทกเกมสเปนภาษาไทย เปน

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

เทคนคเกมส กบเพอนใหมๆ มตรภาพดๆ เรมตนทน

2.2) สนก! เกมส

เปนผใหบรการเกมสทใหญทสดในประเทศไทย มเกมสแฟลชใหเลอกเลน

มากกวา 10,000 เกมส พรอมทงใหบรการขอมลขาวสารเกมส, พรววเกมส, รววเกมส, เทคนคเกมส

ของเกมสออนไลน เกมสพซ เกมสคอนโซล, คลปวดโอเกมสใหม, ภาพเกมส, ภาพพรตตงานเกมส,

และ คอสเพลย ซงอพเดททกวน

3

3) สนก! อคอมเมรซ

3.1) Sabuy.com

แหลงรวมสนคาคณภาพ และสนคาทหลากหลายประกอบไปดวยรานคามากกวา

1,500 รานคา และสนคามากกวา 200,000 ชน ทงสนคาแฟชน แบรนดเนม Gadget และสนคาทวไป

พรอมเปดบรการใหมเพอสรางความมนใจใหผซอสนคามากยงขนดวย Sabuy Guarantee ครอบ

คลมไปดวยการรบประกนความพงพอใจ, การรบประกนไดสนคาในเวลาทก าหนดหรอหากสนคา

ช ารดหรอไมตรงตามค าบรรยาย สามารถเปลยน/คนสนคาได

3.2) Dealfish.co.th

เวบไซตทจะชวยใหคณประกาศซอ-ขาย หรอคนหาสนคาทอยในพนทเดยวกบท

คณตองการ ไดอยางงายดายและรวดเรวทสด

3.3) สนก! คปอง

น าเสนอคปองสวนลดพเศษสดทงรานอาหาร, ทพก, สถานบนเทง, แหลงชอปปง

และอกมากมาย คณจะไดขอเสนอทดทสดโดยไมตองเสยเวลาคนหาดวยตวเอง

4) สนก! โมบาย

4.1) สนก! โมบายเมจก

เปนการใหบรการเสรมผานโทรศพทมอ ถอ เ ชน บรการดาวนโหลด ,

บรการขอมลขาวสารผานSMS, บรการ SMS Voting, บรการAudio Text 1900 เปนตน

4.2) สนก! บนมอถอ

เปนบรการยอโลกขาวสารสาระบนเทงและชวยใหเขาถงบรการจากสนก! ทคณ

ประทบใจ

4

4.3) สนก! เบราวเซอร

พฒนามาเพอใชทองโลกอนเทอรเนตบนโทรศพทมอถอ

5) บรการโฆษณาออนไลน

ใหบรการดานการสอสารทางการตลาดออนไลนแบบครบวงจรและใหบรการ

โฆษณาออนไลนทสามารถตอบสนองตอวตถประสงค และความตองการของลกคาทกรายไดอยาง

แมนย าและครบวงจร

1.3 รปแบบการจดการองคกรและการบรหารองคกร

ภาพท 1.2 แผนผงองคกร

5

1.4 ต าแหนงและหนาทงานทนกศกษาไดรบมอบหมาย

ต าแหนงงาน : นกศกษาฝกงานดาน Android Application หนาท : พฒนาแอพพลเคชนบนโทรศพทมอถอระบบปฏบตการ Android ทงการเขยนโปรแกรมตามทไดรบมอบหมายจากพเลยงและการออกแบบ Interface ของโปรแกรมใหครอบคลมกบโทรศพทมอถอระบบปฏบตการAndroid ซงมขนาดของหนาจอทแตกตางกนไป

1.5 พนกงานทปรกษา และต าแหนงของพนกงานทปรกษา

ชอ-นามสกล : นาย จรวฒน กรณยวทยาการ

ต าแหนง : ผชวยผจดการดานไอท

1.6 ระยะเวลาทปฏบตงาน

เรมตนการปฏบตงาน : 3 มถนายน พ.ศ. 2556

สนสดการปฏบตงาน : 4 ตลาคม พ.ศ. 2556

เปนระยะเวลาทงสน : 18 สปดาห ( 4 เดอน )

1.7 ทมาและความส าคญของปญหา

ในอดตมรายการเกมโชวยอดนยมรายการหนงชอวา “เวททอง” ภายในรายการเวททอง

ประกอบไปดวยชวงในรายการหลายชวง โดยชวงหนงในรายการทถกพดถงมากทสดคอชวง

ปรศนาจกมกนนเอง ในชวงปรศนาจกมกน ผเขาแขงขนจะตองทายค าศพทจากภาพใหถกตอง

ภายในระยะเวลาทก าหนด แตละภาพทน ามาใชไดสรางความสนกสนานใหกบผชมและผเขา

แขงขนเปนอยางมาก ท าใหรายการเวททองไดออกอากาศในรายการโทรทศนเปนเวลายาวนาน

จนกระทงในปพ.ศ.2550 จงถกถอดออกไปจากผงรายการโทรทศน รวมระยะเวลาทไดออกอากาศ

ทงสนเปนเวลากวา18ป

จากเหตผลขางตน ผจดท าจงมความตองการทจะน ารายการเวททองในชวงปรศนาจกมก

กลบมาอกครงในรปแบบของแอพพลเคชนบนโทรศพทมอถอระบบปฏบตการAndroid เพอคลายความคดถงและสรางความเพลดเพลนใหกบผใช

6

1.8 วตถประสงคหรอจดมงหมายของโครงงาน

1) เพอศกษาการใชงาน Push Notification โดยใช GCM

2) เพอศกษาการใชงาน ViewPager ในAndroid

3) เพอศกษาการ get json data จาก api มาเกบไวใน Database ของโทรศพทมอถอ และน า

ขอมลทเกบอยใน Database มาแสดงในหนาจอโทรศพทมอถอ 4) เพอศกษาการท างานของ ArrayList ในAndroid 5) เพอศกษาการดาวนโหลดรปภาพจาก Internet ผานURLของรปภาพนน มาเกบไวใน

หนวยความจ าของโทรศพทมอถอ

6) เพอศกษาการใชงาน Custom ListView ในAndroid 7) เพอศกษาการใชงาน SharedPreferences ในAndroid 8) เพอศกษาการประยกตใช Library ของโปรแกรมทมนกพฒนาแอพพลเคชนไดเขยน

เอาไวแลว มาใชกบแอพพลเคชนของเรา

9) เพอศกษาการท า Animation แบบงายๆใหกบ SplashScreen ของแอพพลเคชน

10) เพอฝกการออกแบบ User Interface และ Layout ในหนาตางๆของแอพพลเคชนให

รองรบกบโทรศพทมอถอและแทบเลตทใชระบบปฏบตการAndroid อยางครอบคลมมากทสด

1.9 ผลทคาดวาจะไดรบจากการปฏบตงานหรอโครงงานทไดรบมอบหมาย

1) สามารถน าความรทกอยางทไดจากการพฒนาแอพพลเคชนน ไปประยกตใชตอไดใน

อนาคต

2) ไดรบประสบการณในการท างานจรงในบรษท

3) ไดเรยนรหลกการในการออกแบบ User Interface และ Layout ในหนาตางๆของ

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

รบผดชอบเขยนแอพพลเคชนนนๆใหท างานไดสะดวกยงขน

7

1.10 นยามศพทเฉพาะ

Google Cloud Messaging ( GCM ) เปนบรการทอนญาตใหนกพฒนาแอพพลเคชนสามารถสงขอมลจาก Server ของตน ไปยงอปกรณAndroid

Push คอการสงขอมลไปยงโทรศพทมอถอ เชน SMS และ Notification

DPI หรอ Dot Per Inch คอ ความหนาแนนของหนาจอโดยวดจาก จ านวนพกเซลตอ 1 นว เชน โทรศพทมอถอมขนาดจอทเทากน แตจอหนงมความละเอยดมากกวา อกจอหนงมความละเอยดนอยกวา จอทมความละเอยดมากกวาจะมความหนาแนนของหนาจอเยอะกวา ซง DPI แบงออกเปน 6 แบบ ไดแก ldpi, mdpi, tvdpi, hdpi, xhdpi และ xxhdpi

หนวย DP เปนหนวยของความละเอยดหนาจอ ทสมมตขนมาในAndroidโดยองจาก Resolution, Size และ Density ของจอบนเครองนนๆ

Splash Screen คอ หนา Intro กอนเขาแอพพลเคชน Android อาจเปนหนาทแสดงโลโกของบรษท หรอสญลกษณของแอพพลเคชน

8

บทท 2

ทฤษฎและเทคโนโลยทใชในการปฏบตงาน

2.1 ทฤษฎทใชในการปฏบตงาน

แอพพลเคชนบนระบบปฏบตการ Android เขยนขนมาจากภาษา Java โดยใช Android SDK ททาง Google ไดปลอยออกมาใหนกพฒนาแอพพลเคชนสามารถน าไปใชไดฟร โดยใช

โปรแกรม Eclipse มาเปนเครองมอในการพฒนาโปรแกรม

2.1.1) โครงสรางของแอพพลเคชนบนระบบปฏบตการAndroid

1) src ( Source Code ) เปนสวนของ Source Code ทเกบไฟล .java

2) gen ( Generated JAVA Files ) เปนสวนทถกสรางขนโดยอตโนมต ภายในจะ

ประกอบไปดวยขอความและ UI Element โดยถกน าเขามาในโปรเจคผาน Android Plug-in ซงไฟล

นเปรยบเสมอนการชไปยงโฟลเดอร Drawable, Layout ,และ Values

3) res ( Resource ) เปนสวนของการแสดงผลของไฟลอนๆทน ามาเปน

สวนประกอบรวมกบ Code ทเขยนขน โดยมการแบงโฟลเดอรไวตามชนดของ Resource ทถกสรางขนมาพรอมกบโปรเจค

4) AndroidMainFest.xml เปนโครงสรางของ xml ไฟล ซงจ ากดคณสมบตและการตงคาตางๆของแอพพลเคชน เชน การก าหนดสทธ และเวอรชนของ Code เปนตน

9

ภาพท 2.1 โครงสรางของแอพพลเคชนบนระบบปฏบตการAndroid

2.1.2) สวนประกอบของแอพพลเคชนบนระบบปฏบตการAndroid

1) Activity หรอ User Interface คอสงทใชในการแสดงผลเพอใหผใชงานไดเหน

และใชงานได โดยหนงแอพพลเคชนสามารถมไดมากกวาหนง Activity

2) Service หรอ Service Provider ( ผใหบรการ Service ) เปนสวนของการท างาน

เบอง หลง โดย Service นนอาจมการกระท าบางอยาง เชน ตดตอรบสงขอมลผานเครอขาย หรอ

ค านวณคาตางๆและน าผลลพธไปแสดงในActivity

3) Broadcast Receiver เปนตวคอยรบและตอบสนองเหตการณตางๆ เชน

แบตเตอรต า, ผใชเปลยนภาษา เปนตน Broadcast Receiverไมมสวนของการแสดงผลแตจะเรยก

Activityขนมาแสดงใหผใช

4) Content Provider ( ผใหบรการขอมล ) คอกลมของขอมลทสรางข นจากแอพพลเคชน เพอใหแอพพลเคชนอนๆสามารถน าไปใชได โดยการจดเกบขอมลของผใหบรการ

ขอมลนนจะอยในลกษณะของไฟล, SQLite, และอนๆ

10

2.1.3) วงจรชวตของAndroid Activity

Activity มหนาทสรางและควบคมการท างานของหนาจอเพอโตตอบกบผใช ซงจะ

มไดแค Activity เดยวเทานนทโตตอบกบผใชในขณะนน โดยแตละ Activity จะมวงจรชวตเปน

ของตวเอง แบงออกไดดงน

1) Running : เปนสถานะทบงบอกวา Activity ก าลงท างานอยในขณะนน

2) Pause : เปนสถานะทบงบอกวา Activity ปรากฏอยบนหนาจอ แต

ยงไมไดท างานในขณะนน

3) Stop : เปนสถานะทบงบอกวา Activityไมปรากฏบนหนาจอ

4) Kill : เปนสถานะทบงบอกวา Activity ถกท าลายไป

Android ถกออกแบบมาเพอใชงานกบอปกรณมอถอ ซงจะมทรพยากรของระบบ

ทจ ากด จงจ าเปนตองมกลไกทคอยจดการบรหารทรพยากรเหลานน เรยกวา Android Activity

Lifecycle ซงจะก าหนดสถานะหรออเวนตท Activity ตองผานตงแตตอนทถกสรางขนจนกวาจะ

เสรจสนการท างาน ดงรปท 2.2 ซงแตละ Activity จะตรวจสอบและตอบสนองกบอเวนตเหลาน

โดย Instant Method ท Override จากคลาส Activity ไดแก

1) onCreate จะถกเรยกเมอ Activity ถกสรางขนครงแรก ซงปกตจะมการสรางสวน

ตดตอผใชหรอวว (View) ตางๆ เปดไฟลขอมลถาวรทใชใน Activity และก าหนดคาเรมตนของ

Activity

2) onStart จะถกเรยกกอนท Activity จะแสดงผลออกมาทหนาจอ เมอ onStart

ท างานเสรจ ถาActivityสามารถเปนโฟรกราวน Activity บนหนาจอ การควบคมจะถกสงตอไปยง

onResume แตถา Activity ไมสามารถเปนโฟรกราวน Activity ได การควบคมจะถกสงตอไปยงเมธ

อด onStop

3) onResume จะถกเรยกหลงจาก onStart ถา Activity เปนโฟรกราวน Activity ณ จด

นActivityจะท างานและตอบสนองกบผใช นอกจากน onResume ยงถกเรยกอกครง ถา Activity ท

ไมไดเปนโฟรกราวนกลบมาเปนโฟรกราวน Activity อกครง

11

4) onPause จะถกเรยกเมอระบบท าการน า Activity ใหมมาเปนโฟรกราวน ซง

Activityเดมจะไมสามารถเขาถงหนาจอและจ าเปนตองหยดการด าเนนการทใชแบตเตอรและCPU

Cycleชวคราว โดยActivityจ าเปนตองใชประโยชนจากเมธอดนในการจดเกบสถานะหรอคาตางๆ

ทจ าเปนจะตองใชในกรณทActivityกลบมาเปนโฟรกราวน Activity อกครง ซง Android ยงไม

รบประกนวาActivityจะสามารถกลบมาเปน โฟรกราวนไดเสมอไป เนองจากถาอปกรณม

หนวยความจ าไมเพยงพอและไมมหนวยความจ าเสมอน (Virtual memory) บนดสกทขยายตอได

ดงนนActivityจะถกท าลายและคนทรพยากรใหแกระบบ

5) onStop จะถกเรยกเมอ Activity ไมสามารถมองเหนไดอก หรอ Activity ก าลงจะ

ถก ท าลาย ถดจากนเมธอด onRestart จะถกเรยก ถา Activity จะกลบมาแสดงผลและตอบสนอง

กบผใช หรอเมธอด onDestroy จะถกเรยกเมอ Activity สนสดการท างาน

6) onDestroy เมธอดสดทายท Activity จะท างานกอนทจะถกท าลาย

ภาพท 2.2 Android Activity Life Cycle

12

2.2 เทคโนโลยทใชในการปฏบตงาน

2.2.1 Java

Java หรอ Java Programming Language คอภาษาโปรแกรมเชงวตถ พฒนาโดย

เจมส กอสลง และวศวกรคนอนๆ ทบรษท ซน ไมโครซสเตมส ภาษานมจดประสงคเพอใชแทน

ภาษาC++ โดยรปแบบทเพมเตมขนคลายกบภาษา Objective-C แตเดมภาษานเรยกวา ภาษาโอก

(Oak) ซงตงชอตามตนโอกใกลทท างานของ เจมส กอสลง แลวภายหลงจงเปลยนไปใชชอ "จาวา"

ซงเปนชอกาแฟแทน จดเดนของภาษา Java อยทผเขยนโปรแกรมสามารถใชหลกการของ Object-

Oriented Programming มาพฒนาโปรแกรมของตนดวย Java ได

ภาษา Java เปนภาษาส าหรบเขยนโปรแกรมทสนบสนนการเขยนโปรแกรมเชง

วตถ ( OOP : Object-Oriented Programming) โปรแกรมทเขยนขนถกสรางภายในคลาส ดงนน

คลาสคอทเกบเมทอด (Method) หรอพฤตกรรม (Behavior) ซงมสถานะ (State) และรปพรรณ

(Identity) ประจ าพฤตกรรม (Behavior)

ขอดของ ภาษา Java

1) ภาษา Java เปนภาษาทสนบสนนการเขยนโปรแกรมเชงวตถแบบสมบรณ ซง

เหมาะส าหรบพฒนาระบบทมความซบซอน การพฒนาโปรแกรมแบบวตถจะชวยใหเราสามารถใช

ค าหรอชอ ตาง ๆ ทมอยในระบบงานนนมาใชในการออกแบบโปรแกรมได ท าใหเขาใจไดงายขน

2) โปรแกรมทเขยนขนโดยใชภาษา Java จะสามารถท างานไดในระบบปฏบตการ

ทแตกตางกน ไมจ าเปนตองดดแปลงแกไขโปรแกรม เชน หากเขยนโปรแกรมบนเครอง Sun

โปรแกรมนนกสามารถถก Compile และ Run บนเครองพซธรรมดาได

3) ภาษา Java มการตรวจสอบขอผดพลาดทงตอน Compile Time และ Runtime

ท าใหลดขอผดพลาดทอาจเกดขนในโปรแกรม และชวยให Debug โปรแกรมไดงาย

4) ภาษา Java มความซบซอนนอยกวาภาษา C++ เมอเปรยบเทยบ Code ของ

โปรแกรมทเขยนขนโดยภาษา Java กบ C++ พบวา โปรแกรมทเขยนโดยภาษา Java จะมจ านวน

13

Code นอยกวาโปรแกรมทเขยนโดยภาษา C++ ท าใหใชงานไดงายกวาและลดความผดพลาดไดมาก

ขน

5) ภาษา Java ถกออกแบบมาใหมความปลอดภยสงตงแตแรก ท าใหโปรแกรมท

เขยนข นดวย Java มความปลอดภยมากกวาโปรแกรมทเขยนขน ดวยภาษาอน เพราะ Java ม

Security ทง Low Level และ High Level ไดแก Electronic Signature, Public And Private Key

Management, Access Control และ Certificates

6) ม IDE, Application Server, และ Library ตาง ๆ มากมายส าหรบจาวาทเรา

สามารถใชงานไดโดยไมตองเสยคาใชจาย ท าใหเราสามารถลดคาใชจายทตองเสยไปกบการซอ

Tool และ S/W ตาง ๆ

ขอเสยของ ภาษา Java

1) ท างานไดชากวา Native Code (โปรแกรมท Compile ใหอยในรปของ

ภาษาเครอง) หรอโปรแกรมทเขยนขนดวยภาษาอน อยางเชน C หรอ C++ ทงนกเพราะวาโปรแกรม

ทเขยนขนดวยภาษาจาวาจะถกแปลงเปนภาษากลาง กอน แลวเมอโปรแกรมท างานค าสงของ

ภาษากลางนจะถกเปลยนเปนภาษาเครองอก ทหนง ทละค าสง (หรอกลมของค าสง) ณ Runtime ท า

ใหท างานชากวา Native Code ซงอยในรปของภาษาเครองแลวตงแต Compile โปรแกรมทตองการ

ความเรวในการท างานจงไมนยมเขยนดวยจาวา

2) Tool ทมในการใชพฒนาโปรแกรม Java มกไมคอยเกง ท าใหหลายอยาง

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

ของ MS จะใชงานไดงายกวา และพฒนาไดเรวกวา (แตเราตองซอ Tool ของ MS และกตองรนบน

Platform ของ MS)

2.2.2 JavaScript Object Notation : JSON

JSON เปนฟอรแมตส าหรบแลกเปลยนขอมลคอมพวเตอร ฟอรแมต JSON นนอยในรปขอความธรรมดา (Plain Text) ททงมนษยและโปรแกรมคอมพวเตอรสามารถอานเขาใจได

14

มาตรฐานของฟอรแมต JSON คอ RFC 4627 ม Internet Media Type เปน Application/JSON และมนามสกลของไฟลเปน .json แตสวนใหญจะไมใช File นามสกลน เพราะ สวนใหญทท าเปน JSON จะ เปนเวบ Dynamic เพอจะเรยก JSON ใชงานรวมกบ Ajax

กอนหนาน Ajax โปรแกรมเกมสจะนยมใชรบขอมลแบบ XML ซงจะจบขอมลมาใส Tag ตางๆ เปนชดๆ เพองายตอการจดกลมขอมล ซง JSON จะมลกษณะเปนชดขอมลแบบ XML แตการเขยนจะสนกวาเยอะซงท าใหลดคา Transfer Data ไดเลกนอย ลกษณะCode ตวอยางของ JSON มลกษณะดงน { "firstName": "John", "lastName": "Smith", "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumbers": [ "212 555-1234", "646 555-4567" ] } 2.2.3 MySQL

MySQL คอ โปรแกรมระบบจดการฐานขอมล ทพฒนาโดยบรษทMySQL AB ม

หนาทเกบขอมลอยางเปนระบบ รองรบค าสงเอสควแอล (SQL = Structured Query Language) เปน

เครองมอส าหรบเกบขอมล ทตองใชรวมกบเครองมอหรอโปรแกรมอนอยางบรณาการ เพอใหได

ระบบงานทรองรบความตองการของผใช เชนท างานรวมกบเครองบรการเวบ (Web Server) เพอ

15

ใหบรการแกภาษาสครปตทท างานฝงเครองบรการ (Server-Side Script) เชน ภาษา PHP , ภาษา

ASP.NET , หรอภาษา JSP เปนตน หรอท างานรวมกบโปรแกรมประยกต (Application Program)

เชน ภาษา VB ภาษา JAVA เปนตน โปรแกรมถกออกแบบใหสามารถท างานไดบน

ระบบปฏบตการทหลากหลาย และเปนระบบฐานขอมลโอเพนทซอรททถกน าไปใชงานมากทสด

ชนดของขอมลทสนบสนน

1) ชนดของขอมลทเปนตวเลข เชน BIT, TINYINT, SMALLINT, MEDIUMINT, INT,BIGINT 2) ชนดของขอมลทเปนวนทและเวลา เชน DATETIME, TIMESTAMP, YEAR 3) ชนดของขอมลทเปนตวอกษร เชน CHAR, VARCHAR, BINARY, BLOB, TEXT, ENUM

2.2.4 Google Cloud Messaging : GCM

GCM เปนบรการทอนญาตใหนกพฒนาแอพพลเคชนสามารถสงขอมลจาก Server

ของตน ไปยงอปกรณ Android โดยระหวางทางนกพฒนาแอพพลเคชนตองสงขอมลจากเซรฟเวอรของตวเองมายงเซรฟเวอร GCM ของ Google ผาน API เพอให Google สง Notification ไปยง

ปลายทางซงกคอโทรศพทมอถอนนเอง

ภาพท 2.3 การท างานของ GCM

16

2.2.5 phpMyAdmin

phpMyAdmin คอโปรแกรมทถกพฒนาโดยใชภาษา PHP เพอใชในการบรหารจดการฐานขอมล MySQL แทนการคยค าสง เนองจากถาเราจะใชฐานขอมลทเปน MySQL บางครงจะมความล าบากและยงยากในการใชงาน ดงนนจงมเครองมอในการจดการฐานขอมล MySQL ขนมาเพอใหสามารถจดการ ตวDBMS ทเปน MySQL ไดงายและสะดวกยงขน โดย phpMyAdmin กถอเปนเครองมอชนดหนงในการจดการนนเอง

phpMyAdmin เปนสวนตอประสานทสรางโดยภาษาพเอชพ ซงใชจดการฐานขอมล MySQL ผานเวบเบราวเซอร โดยสามารถทจะท าการสรางฐานขอมลใหม หรอท าการสราง Table ใหมๆ และยงม Function ทใชส าหรบการทดสอบการ Query ขอมลดวยภาษา SQL พรอมกนนน ยงสามารถท าการ Insert Delete Update หรอแมกระทงใช ค าสงตางๆ เหมอนกบกนการใชภาษา SQL ในการสรางตารางขอมล phpMyAdmin เปนโปรแกรมประเภท MySQL Client ตวหนงทใชในการจดการขอมล MySQL ผาน Web Browser ไดโดยตรง phpMyAdmin ตวนจะท างานบน Web Server เปน PHP Application ทใชควบคมจดการ MySQL Server ความสามารถของ phpMyAdmin คอ - สรางและลบ Database - สรางและจดการ Table เชน แทรก Record, ลบ Record, แกไข Record, ลบ Table, แกไข Field - โหลดเทกซไฟลเขาไปเกบเปนขอมลในตารางได - หาผลสรป (Query) ดวยค าสง SQL

ภาพท 2.4 ตวอยางหนาจอ phpMyAdmin

17

2.2.6 Adobe DreamWeaver

Adobe Dreamweaver เปนโปรแกรมแกไข HTML พฒนาโดยบรษทแมโครมเดย ส าหรบการออกแบบเวบไซตในรปแบบ WYSIWYG กบการควบคมของสวนแกไขรหส HTML ในการพฒนาโปรแกรมท มการรวมทงสองแบบเขาดวยกนแบบน ท าให Dreamweaver เปนโปรแกรมทแตกตางจากโปรแกรมอนๆ ในประเภทเดยวกน ในชวงปลายปทศวรรษ 2533 จนถงปพ.ศ. 2544 Dreamweaver มสดสวนตลาดโปรแกรมแกไข HTML อยมากกวา 70%

Dreamweaver มทงในระบบปฏบตการแมคอนทอช และไมโครซอฟทวนโดวส

Dreamweaver ยงสามารถท างานบนระบบปฏบตการแบบยนกซ ผานโปรแกรมจ าลองอยาง WINEได รนลาสดคอ Dreamweaver CS6 การท างานกบภาษาตางๆ

Dreamweaver สามารถท างานกบภาษาคอมพวเตอรในการเขยนเวบไซตแบบได

นามค ซงมการใช HTML เปนตวแสดงผลของเอกสาร เชน ASP, ASP.NET, PHP, JSP และ ColdFusion รวมถงการจดการฐานขอมลตางๆ อกดวย และในเวอรชนลาสด (เวอรชน 8) ยงสามารถท างานรวมกบ XML และ CSS ไดอยางงายดาย มมมองในการท างานกบ Dreamweaver - มมมองแบบ Code เปนมมมองทใชในการแกไขโคด HTML หากผทจะใชมมมอง Code ในการจดการกบไฟลตองมความรเกยวกบโคด HTML - มมมองแบบ split เปนมมมองทแสดงใหเหนทงโคด HTML และมมมองปกต ซงจะบอกใหทราบวาการท างานกบไฟล ขณะนนอยในสวนใดของโคด HTML กบมมมองปรกต - มมมองแบบ Design เปนมมมองการท างานปรกต ทแสดงเหมอนจรงของเอกสารเวบเพจ

18

ภาพท 2.5 มมมองแบบ Code ใน Dreamweaver

ภาพท 2.6 มมมองแบบ Split ใน Dreamweaver

19

ภาพท 2.7 มมมองแบบ Design ใน Dreamweaver 2.2.7 File Transfer Protocol : FTP FTP คอการแลกเปลยนขอมลแบบ FTP หมายถง การดาวนโหลด หรอยายไฟลในระบบอนเตอรเนตมายงเครองคอมพวเตอร เชนเดยวกนกสามารถน าไฟลจากเครองคอมพวเตอรไปไวในพนทเกบขอมลโดยผานโปรแกรม FTP สามารถดาวนโหลดไฟลไดหลายประเภทแลวแตวาผใชจะตองการใชงานไฟลประเภทใด จดเดนสามารถน าไปใชรวมกบระบบการการท าเวบไซต, เปนชองทางเกบหรอสงขอมลหาลกคาหรอภายในองคกรได ท Webmaster ใช นนคอ การ FTP อพไฟล ขนโฮส (Host) เอฟทพ (FTP) ยอมาจากภาษาองกฤษวา File Transfer Protocol : FTP หมายถง การดงไฟลจากคอมพวเตอรในเครอขายอนเทอรเนตมายงเครองคอมพวเตอรของเราหรอของผใชคนอน โดยปกตการดงไฟลจากอนเทอรเนต เราจะตองตดตอไปยงผใหบรการ ซงเรยกวา เอฟทพไซต (FTP Site) เอฟทพไซตทส าคญในอดตจะเปนหนวยงานของรฐบาล หรอมหาวทยาลย FTP เปนโปรแกรมทใชส าหรบ Upload/Download หรอดโครงสรางของไฟลและ Directory ใน Server ซง FTP มอย 2 ประเภท ไดแก

20

- FTP ประเภทท 1 คอ ไพรเวทเอฟทพ (Private FTP) หรอเอฟทพเฉพาะกลม นยมใชตามสถานศกษาและภายในบรษท ผใชบรการจะตองมรหสผานเฉพาะจงจะใชงานได - FTP ประเภทท 2 คอ อะโนนมสเอฟทพ (Anonymous FTP) เปนFTPสาธารณะใหบรการดงไฟลฟรโดยไมตองมรหสผาน เราสามารถตดตอเวบไซตเหลานไดโดยผานเวบเบราเซอร ซงปจจบนเวบไซตสาธารณะมอยเปนจ านวนมาก การใชFTPมจดมงหมายหลกกคอ การน าเอาไฟลขอมลตางๆ ทอยบนอนเทอรเนตมาใชงาน ขอมลเหลานนอาจเปนขอมลตวหนงสอ รปภาพ เสยง วดโอ หรอโปรแกรมส าเรจรป โดยเฉพาะโปรแกรมใหมๆ ทบรษทตางๆ คดคนขนมาและตองการเผยแพรไปสสาธารณชน ผใชอนเทอรเนตคนใดทสนใจกสามารถใชFTPดงเอาโปรแกรมเหลานนมาใชงานได ประเภทของแฟมขอมล ไฟลทเราสามารถดงมาใชงานไดนน แบงออกเปนหลายประเภท ดงน - ไฟลขอความ (Text File) เปนไฟลทแพรหลายมากทสดในอนเทอรเนต โดยจะบรรจขอความตวอกษรภาษาตางๆ เชน ไทย องกฤษ ญป น จน และอนๆ เปนตน ปจจบนเวลดไวดเวบนยมใชไฟลขอความมาก เชน หนงสอพมพ นตยสาร อเมล เปนตน การสงเกตไฟลขอความดไดจากนามสกล คอ txt , doc , html เปนตน การดงไฟลขอความจากอนเทอรเนตท าไดงาย ใชเวลานอย เพราะมขนาดไมใหญมาก - ไฟลภาพ (Graphics) เปนภาพประกอบบนเวบเพจ นยมใชกนมากรองจากไฟลขอความ โดยปกตไฟลภาพจะมขนาดใหญ การดงไฟลจงตองใชเวลานานกวาปกต ตวอยางไฟลสงเกตไดจากนามสกลไฟล เชน bmp , jpg , gif เปนตน - ไฟลเสยง ไฟลเสยงไดรบความนยมมากขนตามล าดบโดยเฉพาะไฟลเสยงจาก Real Audio ทใหเสยงตอเนองเหมนฟงรายการเพลงจากวทยทวไป และไฟลประเภท Mp3 ซงเปนเพลงตางๆ ทงภาษาไทยและภาษาองกฤษ ไฟลเสยงทนยมใชประกอบในหนาเวบเพจ ตวอยางไฟลเสยง เชน au , ra , ram , wav เปนตน

21

FTP มความส าคญและประโยชนอยางไร ในโลกธรกจปจจบนทมการแขงขนกนมากในทกๆ ดาน ไมวาจะเปนดานการผลต ดาน การตลาด การบรหาร การจดการ และดานทขาดไมไดดวยเชนกน คอ ดานการสอสาร ซงแตละธรกจมความจ าเปนตองใช ไมวาจะเปนการตดตอสอสารกบลกคา การตดตอสอสารภายในหรอระหวางบรษท ซง FTP มสวนชวยอยางมากในการสอสารตางๆ FTP จะชวยใหการถายโอนขอมลเปนไปไดงายมากขน แตละบรษทหรอหนวยงานสามารถมขอมลมากมายหลายรปแบบทตองการสอสารไปยงแหลงอน หรอแมแตตองการขอมลทเปนประโยชนจากแหลงอนเขามาใช เชน ขอมลขาวสารประจ าวน บทความ ขอมลทางสถต ผลการทดลองทางวทยาศาสตร เปนตน การจะเดนทางไปเอาขอมลตางๆ เองกถอเปนการเสยเวลาโดยเปลาประโยชน ในเมอมเทคโนโลยเขามาชวยเหลอแลว FTP จะเปนตวชวยใหการไดรบขอมลเหลานสามารถท าไดงายยงข นเพยงอยหนาจอคอมพวเตอรเทานน ผใชงานสามารถใช FTP ในการโอนขอมลจ านวนมากจากแหลงทอนญาต ใหใชได ซงเรยกวาเปนแหลงบรการ FTP ซงมกเปนศนยรวบรวมขอมลขาวสารตางๆอยมาก และเปดบรการทวไป เพยงแคผใชอนเตอรเนตเขาไป ใชบรการคดลอกแฟมขอมลตางๆ มาใชงาน วธการท างานของ FTP FTP ท างานในแบบไคลเอนตเซรฟเวอร โดยพฒนาขนตามโปรโตคอลพนฐาน TCP ซงจะตองมการตดตอเพอจองชองสอสาร (Connection Establishment) กอนท าการสอสารจรง ซงเรยกวาเปนการตดตอแบบทตองขอเชอมตอกอน (Connection - Oriented) ในการใชงาน FTP เพอเรมการตดตอสอสารนน จะตองระบหมายเลข IP ปลายทาง และตองผานการแจงรหส Login และ Password ของเซรฟเวอรทจะตดตอกอนจงจะเขาใชงานได ขอมลของ FTP ทสอสารระหวางกนม 2 ประเภทคอ • ขอมล(Data) หมายถงขอมลตางๆทตองการรบสง รวมทงไฟลทรบมาจากเซรฟเวอร หรอสงมาจาก ไคลเอนตแลวไปเกบทเซรฟเวอร • ขอมลค าสง (Command) FTP จะมค าสงทใชสงงานตางๆ เชน Dir เปนค าสงทใชแสดงชอไฟลหรอไดเรคทอรในเครองเซรฟเวอรหรอ Get ใชโหลดไฟลมาทเครองไคลเอนตผานโปรแกรม FTP แลวโปรแกรมจะสงค าสงไปยงเซรฟเวอรเพอท างาน และแจงผลการท างานกลบมา

22

ยงไคลเอนต ซงผลการท างานนจะน าหนาดวยตวเลข 3 หลก เปนรหสทใชแสดงสถานะการท างานภายในของ FTP และตอดวยขอความทเปนเทกซตอทาย ซงกคอผลการท างานหรอค าอธบายตางๆ โดยท FTP มกระบวนการภายในทจะตรวจสอบไดวาขอมลทจะรบสงนเปนประเภทค าสงไมใชตวขอมลทตองการจะโอนยาย การท FTP สามารถแยกแยะขอมลจรงออกจากขอมลทเปนค าสงไดนน ถอวาเปนหนาทการท างานของโมดลใน FTP ทเรยกวาโปรโตคอล (Protocol Interpreter Module หรอ PI) ซงท าหนาทรองรบการท างานค าสงตางๆของ FTP และในสวนของขอมลทรบสงนนจะเปนหนาทของโมดลโอนขอมล (Data Transfer หรอ DT) ซงโมดลทงสองนจะตองท างานอยท งในเครองทเปนเซรฟเวอร และไคลเอนต

สวน Shareware หมายถง ซอฟตแวรทผผลตแจกใหลองไปใชดกอน และเมอใชแลวพอใจจะน าไปใชจรงกคอยสงเงนมาช าระทหลง ถาไมน าไปใชจรงกไมตองสงเงนมาช าระ ผผลต Freeware และ ผผลต Shareware จะท าการสงซอฟตแวรของตนเองทตองการแจกจายไปไวทคอมพวเตอรทเปน FTP Server และใครกตามทสนใจจะลองน าไปซอฟตแวรของผผลตไปใชดกใหไปท าการ Download จากคอมพวเตอรทเปน FTP Server เครองนนมายงเครองคอมพวเตอรของตนเอง ในบางกรณถาทานมขอมลทนาสนใจและตองการเผยแพร ทานกสามารถสงขอมลนนไปไวท FTP Server ได ตวอยาง FTP Server เชน ftp.chula.ac.th

ภาพท 2.8 ลกษณะการท างานของ FTP : File Transfer Protocol

23

2.2.8 GenyMotion

GenyMotion เปน Emulator ทสรางขนมาเพอนกพฒนาซงมความเรวกวา Default Emulator บนEclipse อยางมาก ขอดของ GenyMotion คอสามารถ Login Google Account เพอใชงานSync กบ Gmail ได และสามารถเขา Play Store เพอดาวนโหลดแอพพลเคชนไดและรองรบ Google Maps Android API v2 ดวย

ภาพท 2.9 Interface ของ GenyMotion

24

บทท 3

แผนงานการปฏบตงานและขนตอนการด าเนนงาน

3.1 แผนการปฏบตงาน

ตารางท 3.1 แผนการปฏบตสหกจศกษา

หวของาน เดอนท 1 เดอนท 2 เดอนท 3 เดอนท 4

ศกษาการใชงาน JSON / ท า Application Weather Forecast

ศกษาการสราง Widget / ท า Widget ของ App ทท าไว

ศกษาการใชงาน SQLite

ท า Application ดง feed จาก Twitter

ออกแบบ Layout Web หลงบานของApplication เกมเวททอง

ออกแบบ Layout Application เกมเวททอง

ศกษาการเขยน JSON Encode จาก PHP

เขยนCode Web หลงบานของApplication เกมเวททอง

เขยนCode Application เกมเวททอง

ทดสอบ Application เพอหาขอผดพลาด

แกไขขอผดพลาดของ Web หลงบาน และ App

Demo Application เกมเวททอง

จดท ารปเลมรายงาน

ตรวจสอบและแกไขขอผดพลาดของรปเลมรายงาน

25

3.2 รายละเอยดโครงงาน

3.2.1 ประชากรและกลมตวอยาง

โครงงานแอพพลเคชนเกมเวททองมกลมเปาหมายคอประชาชนชาวไทยทใช

โทรศพทมอถอและ SmartPhone ระบบปฏบตการAndroid ซงรองรบฟงกชนการ TouchScreen และมเวอรชนของระบบปฏบตการ Android เปนเวอรชน 2.3.3 ( Gingerbread ) ขนไป

3.2.2 การสรางเครองมอทใชในโครงงาน

3.2.2.1 วธการตดตงโปรแกรม Adobe Master Collection CS6

1) ดาวนโหลด Adobe CS6 ท http://www.adobe.com/downloads เมอดาวนโหลดโปรแกรม เสรจแลว ใหเปดโปรแกรมแลวคลกท CREATE INSTALL PACKAGE เพอท าการตดตง

ภาพท 3.1 ขนตอนการลงโปรแกรม Adobe Master Collection CS6 (1)

26

2) กรอก Serial Number ของโปรแกรมใหเรยบรอย

ภาพท 3.2 ขนตอนการลงโปรแกรม Adobe Master Collection CS6 (2)

3) เลอกโปรแกรมทตองการตดตง โดยตกถกหนาโปรแกรมทตองการ ส าหรบโครงงานชนนเลอก Adobe Photoshop และ Adobe DreamWeaver เมอเลอกโปรแกรมทตองการเสรจแลว ใหกดทป ม Next

ภาพท 3.3 ขนตอนการลงโปรแกรม Adobe Master Collection CS6 (3)

27

4) ระบบจะท าการตดต งโปรแกรมลงในเครองคอมพวเตอร หากโปรแกรมทงหมดถกตดตงเสรจสมบรณแลวจะปรากฏดงภาพท 3.4 จากนนใหกดป ม Close เพอเรมตนการใชงานโปรแกรม

ภาพท 3.4 ขนตอนการลงโปรแกรม Adobe Master Collection CS6 (4)

3.2.2.2 วธการตดตงโปรแกรม AppServ

1) ดาวนโหลดโปรแกรม AppServ จาก http://www.appservnetwork.com เมอดาวนโหลดโปรแกรมเสรจ ใหดบเบลคลกไฟล appserv-win32-x.x.x.exe เพอท าการตดตง

ภาพท 3.5 ขนตอนการตดตงโปรแกรม AppServ

28

2) เขาสขนตอนเงอนไขการใชงานโปรแกรม โดยโปรแกรม AppServ ไดแจกจายในรปแบบ GNU License หากผตดตงอานเงอนไขตางๆ เสรจสนแลว หากยอมรบเงอนไขใหกด Next เพอเขาสการตดตงในขนตอไป แตหากวาไมยอมรบเงอนไขใหกด Cancel เพอออกจากการตดตงโปรแกรม AppServ ดงรป

ภาพท 3.6 แสดงรายละเอยดเงอนไขการ GNU License

3) เขาสขนตอนการเลอกปลายทางทตองการตดต ง โดยคาเรมตนปลายทางทตดตงจะเปน C:AppServ หากตองการเปลยนปลายทางทตดตง ใหกด Browse แลวเลอกปลายทางทตองการ ตามรปท 3 เมอเลอกปลายทางเสรจสนใหกดป ม Next เพอเขาสขนตอนการตดตงขนตอไป

ภาพท 3.7 เลอกปลายทางการตดตงโปรแกรม AppServ

29

4) เลอก Package Components ทตองการตดตง โดยคาเรมตนนนจะใหเลอกลงทก Package แตหากวาผใชงานตองการเลอกลงเฉพาะบาง Package กสามารถเลอกตามขอทตองการออก

ภาพท 3.8 เลอก Package Components ทตองการตดตง

5) ก าหนดคาคอนฟกของ Apache Web Server มอยดวยกนทงหมด 3 สวน ไดแก Server Name คอชองส าหรบปอนขอมลชอ Web Server ของทาน, Admin Email คอชองส าหรบปอนขอมล อเมลผดแลระบบ, HTTP Port คอชองส าหรบระบ Port ทจะเรยกใชงาน Apache Web Server

ภาพท 3.9 แสดงการก าหนดคาคอนฟกคา Apache Web Server

30

6) ก าหนดคา Root Password คอชองส าหรบปอน รหสผานการเขาใชงานฐานขอมลของ Root Character Sets ใชในการก าหนดคาระบบภาษาทใชในการจดเกบฐานขอมล

ภาพท 3.10 แสดงการก าหนดคาคอนฟกของ MySQL Database

7) สนสดขนตอนการตดตงโปรแกรม AppServ ส าหรบขนตอนสดทายนจะมใหเลอกวาตองการสงใหมการรน Apache และ MySQL ทนทหรอไม จากนนกดป ม Finish เพอเสรจสนการตดตงโปรแกรม AppServ

ภาพท 3.11 แสดงหนาจอขนตอนสนสดการตดตงโปรแกรม AppServ

31

3.2.2.3 วธการตดตง Java Development Kit : JDK

1) ดาวนโหลดโปรแกรมไดท http://www.oracle.com/technetwork/java/ javase/downloads/index.html โดยเลอกดาวนโหลดตวทเปน JDK เมอดาวนโหลดเสรจแลว ใหดบเบลคลกเพอท าการตดตงโปรแกรม

ภาพท 3.12 ขนตอนการตดตง JDK ( 1 )

2) คลก Next

ภาพท 3.13 ขนตอนการตดตง JDK ( 2 )

32

3) คลก Next อกครง

ภาพท 3.14 ขนตอนการตดตง JDK ( 3 )

4) เลอก Destination ทตองการจะตดตงโปรแกรมลงไป เสรจแลวกด Next

โปรแกรมจะเรมท าการตดตง

ภาพท 3.15 ขนตอนการตดตง JDK ( 4 )

33

3.2.2.4 วธการตดตงโปรแกรม Eclipse

1) ดาวนโหลดโปรแกรมท http://www.eclipse.org/downloads/ โดยเลอกเวอรชนทเปน Eclipse Classic

ภาพท 3.16 ขนตอนการตดตงโปรแกรม Eclipse ( 1 )

2) หลงจากดาวนโหลดโปรแกรมเสรจแลว จะไดไฟล Zip มา ใหน าไฟลนไปแตกไฟลในททตองการตดตงโปรแกรมไวไดเลย ( กรณนเลอกตดตงไวท C:\Eclipse ) เมอแตกไฟลเสรจแลว สามารถเปดโปรแกรมใชงานไดเลยโดยคลกท Eclipse.exe

ภาพท 3.17 ขนตอนการตดตงโปรแกรม Eclipse ( 2 )

34

3.2.2.5 วธการตดตงโปรแกรม GenyMotion

1) สมครสมาชกกบทาง GenyMotion ท https://cloud.genymotion.com/ page/customer/login/?next=/page/launchpad/download/ โดยกรอก Username, E-mail, Password ,และ Confirmation Password ในชอง Sign Up เมอกรอกเสรจแลวใหกดป ม Sign Up ระบบจะสง E-mail ยนยนมาใหใน E-mail กรอกลงไป

ภาพท 3.18 ขนตอนการตดตงโปรแกรม GenyMotion ( 1 )

2) ด าวน โหลดโปรแกรม ไดท https://cloud.genymotion.com/page /launchpad/ download/ เมอดาวนโหลดโปรแกรมและตดต งโปรแกรมเสรจแลว ใหคลกไปทไอคอนของ GenyMotion เพอท าการ SetUp Emulator

ภาพท 3.19 ขนตอนการตดตงโปรแกรม GenyMotion ( 2 )

35

3) จากน นคลกไปทป ม Add เพอท าการดาวนโหลด Emulator ของโทรศพทมอถอททานตองการ โดยกอนจะดาวนโหลดจะตองกรอก Username และ password ทไดสมครในขนตอนแรก

ภาพท 3.20 ขนตอนการตดตงโปรแกรม GenyMotion ( 3 )

4) จากนนเลอกรนของ Emulator ของโทรศพทมอถอทตองการ แลวคลกป ม Add โปรแกรมจะท าการดาวนโหลด Emulator

ภาพท 3.21 ขนตอนการตดตงโปรแกรม GenyMotion ( 4 )

36

5) เมอดาวนโหลด Emulator เสรจแลว ชอของ Emulator จะปรากฏขนมา แตกอนจะใชงาน Emulator ตองต งคาให Emulator เชอมตอกบ Eclipse โดยคลกท Menu > Settings แลวเปลยน Path ใหตรงกบต าแหนงทเกบไฟล Android-sdk-windows ไว ( กรณนเปน C:\ android-sdk-windows)

ภาพท 3.22 ขนตอนการตดตงโปรแกรม GenyMotion ( 5 )

6) เปดการใชงาน Emulator โดยคลกเลอก Emulator ทตองการ จากนนคลกป ม Play

ภาพท 3.23 ขนตอนการตดตงโปรแกรม GenyMotion ( 6 )

37

3.2.3 การเกบรวบรวมขอมล

เกบและรวบรวมความตองการของผใชจากนกศกษาคณะเทคโนโลยสารสนเทศช นปท 3 และ 4 ของสถาบนเทคโนโลยไทย -ญป นท ใชโทรศพทมอถอหรอ SmartPhone ระบบปฏบตการ Android และคนควารวบรวมขอมลในการด าเนนการโครงงานแอพพลเคชนเกมเวททองในสวนของเวบไซดจาก Internet และคนควารวบรวมขอมลในสวนของแอพพลเคชนจาก Internet กบ หนงสอคมอเขยนแอพ Android ฉบบรวมโคด ของ พรอมเลศ หลอวจตร

ภาพท 3.24 หนงสอคมอเขยนแอพAndroid ฉบบรวมโคด

38

3.3 ขนตอนการด าเนนงานทนกศกษาปฏบตงานหรอโครงงาน

3.3.1 งานทปฏบต

งานทปฏบตในระหวางการสหกจศกษาทกชนงานจะเปนงานทพทปรกษามอบหมายมาให เพอฝกฝนทกษะในดานตางๆใหเพมพนมากขน, รจกเครองมอและเทคนคใหมๆเพมมากขน, และสรางไอเดยในการท าโครงงานโปรเจค ( ขนตอนในการด าเนนงานแตละขน ขาพเจาจะขอละไวในหวขอน แตจะน าไปกลาวในบทท 4 แทน ) โดยแอพพลเคชนทขาพเจาไดรบมอบหมายใหฝกฝนมทงหมด 3 ชน คอ Sanook Weather Application, SQLite Test Application, และ jsTwit Application

3.3.1.1) Sanook Weather Application แอพพลเคชนนเปนแอพพลเคชนทฝกฝนการดงขอมล JSON มากใชงานในAndroid, ฝกการท า SharePreferences, ฝกการท า Custom ListView, ฝกการแสดงภาพจาก URL, และฝกการท า Animation ใหกบ ListView โดยจะแสดงขอมลพยากรณอากาศใหกบผใชงาน ซง จะมทงสวนทเปนแอพพลเคชนและสวนทเปนWidget โดยขอมลพยากรณอากาศทแสดงจะแบงออกเปน 2 หมวด คอ สภาพอากาศของวนปจจบนและสภาพอากาศ ในสปดาหนซงผใชสามารถเลอกประเภทของหนวยอณหภมไดวาจะดไดองศาเซลเซยสหรอองศาฟาเรนไฮด

ภาพท 3.25 ไอคอนของแอพพลเคชน Sanook Weather

39

ภาพท 3.26 Widget ของแอพพลเคชน Sanook Weather

ภาพท 3.27 Interface ของแอพพลเคชน Sanook Weather ในหนาแสดงสภาพอากาศวนปจจบน

40

ภาพท 3.28 Interface ของแอพพลเคชน Sanook Weather ในหนาแสดงสภาพอากาศในสปดาหน

ภาพท 3.29 Interface ของแอพพลเคชน Sanook Weather ในหนาตงคาหนวยของอณหภมทจะใหแสดง

41

3.3.1.2) Test SQLite Application

แอพพลเคชนนเปนแอพพลเคชนทท าขนเพอฝกฝนการใชงาน SQLite, การจดการ Database ใน Android, และการท า SplashScreen ใหกบแอพพลเคชน โดยแอพพลเคชนนจะใหผใชบนทกขอมลของเพอนเขาไป จากนนแอพจะแสดงรายชอของเพอนออกมาในรปแบบของList ซงหากผใชกดไปทชอของเพอนคนใด กจะม Dialog Box แสดงขอมลของเพอนคนนน และมป มใหกดเพอแกไขขอมลของเพอนคนนนและเพอลบ ขอมลของเพอนคนนนออกจาก List

ภาพท 3.30 ไอคอนของแอพพลเคชน SQLite Test

ภาพท 3.31 SplashScreen ของแอพพลเคชน SQLite

42

ภาพท 3.32 Interface หนาแรก ( แสดงรายชอเพอน ) ของแอพพลเคชน SQLite

ภาพท 3.33 Interface เมอกดไปทรายชอเพอนในแอพพลเคชน SQLite

43

ภาพท 3.34 Interface หนาแกไขขอมลของเพอนในแอพพลเคชน SQLite

ภาพท 3.35 Interface หนาเพมเพอนใหมในแอพพลเคชน SQLite

44

3.3.1.3) jsTwit Application แอพพลเคชนนเปนแอพพลเคชนทฝกฝนการใชงาน Twitter Api 1.1, การตรวจสอบ Internet Connection, การท า Pull to Refresh, การท า Pull to Load More, และการเกบขอมลทดาวนโหลดมาจาก Internet ไปไวใน SQLite โดยในหนาแรกของแอพพลเคชนนจะม2ป มใหเลอก คอ Login เขาส Twitter และดขอมลจส.100

ภาพท 3.36 ไอคอนของแอพพลเคชน jsTwit

ภาพท 3.37 SplashScreen ของแอพพลเคชน jsTwit

45

ภาพท 3.38 Interface หนาแรกของแอพพลเคชน jsTwit

1) login เขาส twitter เมอผใชกดป มเขามาแลว จะมชองใหผใชกรอก Username และ Password ของ Twitter เพอเขาใชงาน

ภาพท 3.39 หนาจอ login เขาส twitter ของแอพพลเคชน jsTwit

46

หลงจากกรอกขอมลแลวจะพบกบ Interface ดงภาพท 3.16 ซงจะมขอความตอนรบและรปโปรไฟลของผใช รวมถงสามารถTweetขอความไปยง Twitter ผานแอพพลเคชน jsTwit, ดขอมลจส.100, logout ออกจาก twitter, และ, ดขอมลใน Twitter ของผใช เชน ScreenName , จ านวนขอความท Tweet, จ านวนคนFollow, ขอความลาสดท Tweet เปนตน

ภาพท 3.40 Interface หลงจาก login

2) See js100 หนานจะเปนหนาทแสดงขอมลขาวจส.100ทไดรบมาจาก Feed API ของ Sanook! ขาวทรบมาจะแสดงในรปแบบของList ซงเมอไดรบขาวมาแลว ระบบจะเกบขอมลขาวลงใน SQLite หากโทรศพทมอถอไมไดเชอมตอInternet ระบบจะดงขอมลขาวทเกบไวในSQLite ออกมาแสดง แตถาโทรศพทมอถอไดเชอมตอ Internet ระบบกจะไปดาวนโหลดขาวจาก Feed มาแสดง

47

ภาพท 3.41 Interface หนาแสดงขอมลขาว จส.100 3.3.1.4) genPassword Application แอพพลเคชนนเปนแอพพลเคชนทฝกฝนการ generate API Key ใหกบระบบ ซงการท างานของแอพพลเคชนนคอสามารถgenerate API Key ขนมาอตโนมต และสามารถน า API Key ไปตรวจสอบไดวาเปนAPI Key ทถกตองหรอไม และAPI Key น หมดอายการใชงานหรอยง โดย API Key ทถก generate ขนมา จะถกเขารหสกอน เพอปองกนการ Hack จากภายนอก

48

ภาพท 3.42 Interface ของโปรแกรม genPassword

ภาพท 3.43 Interface เมอกดป ม generate ภาพท 3.44 Interface เมอน าAPI Key ไปตรวจสอบ

49

3.3.2 โครงงานแอพพลเคชนเกมเวททอง

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

ในสวนของเวบหลงบานจดท าข นเพอปอนขอมลในรป Feed JSON ใหกบแอพพลเคชนไดน าเอาขอมลไปใช ไดแก ภาพดานเกม, ชอยของภาพนน, และค าใบของภาพนน โดยสามารถเพมดานใหม, ลบดานออก, และแกไขขอมลของดานภายในเวบหลงบานได เมอมการเพมดานใหมในเวบหลงบาน จะมNotification แสดงขนมาในโทรศพทมอถอของผใช เพอบอกวาขณะนมดานเกมดานใหมเขามาแลว

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

„ โหมดคลาสสคเกม 1) ค าตอบของโหมดนจะม 2 ค า 2) หากคดค าตอบไมออก สามารถขามไปภาพถดไปไดเลย เพยงแคสไลดภาพจากดานขวาไปดานซาย หรอหากอยากยอนกลบไปใหมกเพยงแคสไลดภาพจากดาน- ซายไปดานขวา 3) มตวจบเวลา 1 ตว คอ ตวจบเวลารวม 4) มตวชวย 1 ตว คอ ค าใบ ซงมการก าหนดจ านวนครงในการใช

ภาพท 3.45 รปภาพป มของโหมดคลาสสคเกม

50

„ โหมดโกสตมาสเตอร 1) ค าตอบของโหมดนจะม 3 ค า 2) ไมสามารถสไลดขาม/ยอนกลบไดเหมอนกบโหมดคลาสสคเกม 3) มตวจบเวลา 2 ตว คอ ตวจบเวลารวม และตวจบเวลา 10 วนาท 4) ภาพในโหมดนจะมการจบเวลา10วนาท หากยงทายค าไมถกใน10วนาท ภาพจะเปลยนเปนภาพถดไปอตโนมต 5) ตวชวยในโหมดนม 2 ตว คอ ค าใบ และ ป มขาม ซงมการก าหนดจ านวนครงในการใชตวชวย 6) ไมมการเรยงล าดบของภาพในเกม คอจะRandomภาพทกครงทเขามาเลนใหม 7) เมอทายภาพถก สามารถแชรใหเพอนในFacebookลองทายภาพนนดไดโดยกดป มแชร ซงภาพทแชรนนจะไปแสดงอยในหนาWallของผใช

ภาพท 3.46 รปภาพป มของโหมดโกสตมาสเตอร

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

51

ในแอพพลเคชนเกมเวททองน ม Featureใหผใชสามารถดาวนโหลดดานเกมใหมๆได โดยจะมป มดาวนโหลดอยในหนาแรกของแอพพลเคชน เมอผใชกดเขาไปจะเขาสหนาดาวนโหลดดานซงหากมดานใหมเขามา Interface จะแสดงดานใหมในรปแบบของ List รายการ หากไมมดานใหม Interface จะแสดงขอความวาขอมลของคณอพเดตลาสดแลว โดยในการดาวนโหลดดานใหมนน ผใชจ าเปนจะตองเชอมตอ Internet กอนจงจะสามารถดาวนโหลดดานใหมได และหากมดานใหมอพเดตเขามาในระบบจะม Notification แสดงขนมาในโทรศพทมอถอของผใชวาขณะนมดานใหมเขามาแลว ซง Notification แจงเตอนนจะแสดงขนมาไดกตอเมอโทรศพทมอถอของผใชมการเชอมตอ Internet ในขณะทระบบก าลงอพเดตดานใหม และผใชตงคาใหเปดการใชงานการแจงเตอนในแอพพลเคชน

ผใชสามารถตงคาเสยงในเกมและตงคาการแจงเตอน (Notification)ได โดยกดไปทป มตงคาเกมในหนาแรกของแอพพลเคชน เมอผใชกดเขามาแลว หากอยากเปดการท างานในสวนใดใหตก ถกทดานหลงของฟงกชนนน เชน อยากใหมเสยงในขณะเลนเกม ใหผใชตกถกทชองดานหลงของฟงกชนเสยงดนตรประกอบ แตหากผใชอยากตงคาใหเปดการแจงเตอน ผใชตองเชอมตอ Internet กอน จงสามารถเปดใชงานการแจงเตอนได เนองจากการระบบจะสง Notificationแจงเตอนมาไมได หากไมมการเชอมตอ Internet

52

บทท 4

ผลการด าเนนงาน การวเคราะหและสรปผลตางๆ

4.1 ขนตอนและผลการด าเนนงาน

4.1.1) ศกษาและท าความเขาใจเกยวกบรปแบบของชวงปรศนาจกมกในรายการเวททอง

การศกษาและท าความเขาใจเกยวกบรปแบบการด าเนนรายการของชวงปรศนา

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

สวนของขอมลจะตองมการประเมนขอมลทจะใชในการพฒนาแอพพลเคชน เชน ขอมลใดบางทจ าเปนตองใชในการเลนเกม, ขอมลใดเหมาะสมในการน ามาใชในแอพพลเคชน, และขอมลทน ามาจะถกจดเกบอยในรปแบบใดใหสามารถเรยกใชขอมลไดอยางถกตองรวดเรวทสด เพอปองกน ไมใหผใชเกดความร าคาญ รวมถงตองศกษาลกษณะของแอพพลเคชนเปนลกษณะของเกมทายค าจากภาพเพอน าไอเดยมาประยกตใชในการพฒนาแอพพลเคชนเกมเวททอง

4.1.2) ศกษาแอพพลเคชนเกมทายค าจากภาพทมอยแลวใน Play Store

การศกษาแอพพลเคชนประเภทเกมทายค าศพทจากภาพทมอยแลวใน Play Store เพอใหสามารถก าหนดขอบเขตของการท างาน, ทราบถงกระบวนการท างานของระบบเกม, และทราบถงสงทควรเพมเตมเพอความสนกสนานของระบบเกม ท าใหสามารถออกแบบโครงสรางและ Interface ของแอพพลเคชนไดอยางเหมาะสม ซงเปนสวนชวยในการพฒนาแอพพลเคชนใหสามารถใชงานไดอยางมประสทธภาพ โดยในครงนขาพเจาไดน าแอพพลเคชน SalahToonLite มาใชในการศกษา

ภาพท 4.1 แอพพลเคชน SalahToonLite

53

เมอกดเขามาแลว จะพบกบ Interface ดงภาพท 3.19 ซงม 3 โหมดใหเลอก คอ งาย, ปานกลาง, และยาก

ภาพท 4.2 Interface หนาแรก

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

วธเอาชนะเกมน ผใชจะตองทายค าศพทใหถกตองทงหมดภายในเวลาทก าหนด ซงตวเกมจะมเวลานบถอยหลงอยบรเวณมมดานซายลางของจอ หากตอบครบทกภาพแลว

ในสวนของตวชวย ตวชวยในเกมนมอย 2 ตว คอ ขามไปรปถดไป กบ ค าใบ ซงจะอยบรเวณมมบนขวาของหนาจอและสามารถกดกครงกได

54

ภาพท 4.3 Interface หนาเลนเกม ขอเสยของแอพพลเคชนนคอ สามารถกดป มค าใบไดไมจ ากดครง, หากทายภาพ

ไมถกสามารถขามไดเรอยๆ, ดานเกมไมมการ Random ท าใหเกดความนาเบอ, ไมม Feature ให

ดาวนโหลดดานใหมๆ, เวลากด Back 2 ครงเพอออกจากโปรแกรม ยงม Force Code อย

4.1.3) วเคราะหความตองการของผใชงาน

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

1) มการ Random ดาน เพอท าใหการเลนเกมไมสนกแคครงแรกทไดเลน

2) ก าหนดวาสามารถขามไดกครงและสามารถใชค าใบไดกครง

3) มดานใหมๆใหอพเดทอยสม าเสมอ

4) มหนาสอนวธการเลนเกม

55

4.1.4) ออกแบบ MockUp ของแอพพลเคชน

การออกแบบ MockUp ของแอพพลเคชนกอนเรมตนการพฒนาแอพพลเคชน จะท าใหเหนภาพของแอพพลเคชนไดอยางชดเจน เชน มกหนา อะไรบาง, มกป ม กดป มนแลวไปหนาใด, สงใดทเราตองศกษาและเรยนรเพม, และแตละหนามการจดวาง Layout อยางไร ซงสงเหลานจะชวยใหทมพฒนาทงทมโปรแกรมเมอรและทมดไซนเกดความเขาใจทตรงกน

ภาพท 4.4 MockUp ของแอพพลเคชนเกมเวททอง

4.1.5) สรางเวบหลงบานของแอพพลเคชนเกมเวททอง

เนองจากแอพพลเคชนเกมเวททองจะม Feature ในการดาวนโหลดดานใหมๆเขามา จงตองสรางเวบขนมาเพอใสขอมลส าหรบเอาไวดาวนโหลดลงแอพพลเคชน เวบหลงบานทท าขนมาม 4 ฟงกชน ไดแก เพมดานใหม, ลบดาน, แกไขดาน, และแสดง Feed JSON ขอมลดานตางๆของเกม เชน Link รปภาพ, ค าใบ, Choice ค าตอบ ฯลฯ

56

ภาพท 4.5 ฐานขอมลของตาราง game

ภาพท 4.6 ฐานขอมลตาราง mode

ภาพท 4.7 ฐานขอมลตาราง gcm_users

57

ตารางท 4.1 Data Dictionary ของฐานขอมล 578032

ชอแฟม ความหมาย รายละเอยด ความหมาย game ขอมลของเกม game_id

mode_id pic_num game_answer game_hint game_image game_pic_type game_choice1 game_choice2 game_choice3 game_choice4 game_choice5 game_choice6 game_choice7 game_choice8

รหสดานเกม รหสโหมดเกม หมายเลขรปภาพในเกม ค าตอบของเกม ค าใบของเกม ภาพของเกม

นามสกลของภาพในเกม

ตวเลอกท1 ของเกม

ตวเลอกท2 ของเกม

ตวเลอกท3 ของเกม

ตวเลอกท4 ของเกม

ตวเลอกท5 ของเกม

ตวเลอกท6 ของเกม

ตวเลอกท7 ของเกม

ตวเลอกท8 ของเกม mode ขอมลของโหมดเกม mode_id

mode_name รหสโหมดเกม

ชอของโหมดเกม

ตารางท 4.2 Data Dictionary ของฐานขอมล 578032db2

ชอแฟม ความหมาย รายละเอยด ความหมาย gcm_users ขอมลของ user ใน gcm id

gcm_regid status created_at

รหส user รหสของ user ใน gcm สถานะของ user วนทลงทะเบยนกบ gcm

58

ภาพท 4.8 Interface หนาแรกของเวบหลงบาน ภาพท 4.9 Interface หนาเพมดานใหม

ภาพท 4.10 Interface หนาเลอก feed ภาพท 4.11 หนา feed *สามารถด Code ของเวบหลงบานของแอพพลเคชนเกมเวททองไดในสวนของภาคผนวก ก

59

4.1.6) สรางเดโมของแอพพลเคชนเกมเวททอง

หลงจากสรางเวบหลงบานเสรจเรยบรอยแลวจงเรมตนการพฒนาแอพพลเคชน โดยเรมตนจากออกแบบ Interface และ ป มตางๆ ในครบทกหนากอน

ภาพท 4.12 โลโกแอพพลเคชน ภาพท 4.13 หนา SplashScreen ภาพท 4.14 หนา MainActivity

ภาพท 4.15 หนา choosemode ภาพท 4.16 หนา download ภาพท 4.17 หนา Settings

60

ภาพท 4.18 หนา HowToPlay ภาพท 4.19 หนา classicgame

ภาพท 4.20 หนา ghostmaster

หลงจากออกแบบเสรจแลว จงเรมตนเขยน Code ของเดโมแอพพลเคชนเกมเวททองดวยโปรแกรม Eclipse ซงภาษาทใชในการพฒนาแอพพลเคชนประกอบดวยภาษา Java กบ ภาษา SQL ตวเดโมนท าขนมาเพอทดสอบ Feature การใชงานทจะมในแอพพลเคชน ท าใหไมจ าเปนตองลงรายละ- เอยดในสวนของการดไซน เนองจากตองการแคทดสอบ Feature การใชงานเทานน

61

4.1.7) ทดสอบการท างานของเดโมแอพพลเคชน

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

4.1.8) น า Feedback และขอเสนอแนะทไดจากการน าเสนอเดโมแอพพลเคชนไปปรบปรง

ขนตอนนเปนขนตอนทส าคญมาก เ นองจากเราจะไดรบ Feedback และขอเสนอแนะจากทางบรษท ท าใหรถงขอผดพลาดของเดโมแอพพลเคชน, ไดรบไอเดยใหมๆในการพฒนาแอพพลเคชน, รวมถงไดรบความรใหมๆเพอน ามาพฒนาตนเองตอไปในอนาคต

4.1.9) พฒนาเดโมแอพพลเคชนใหเปนแอพพลเคชนตวเตม

หลงจากน า Feedback ทไดรบมาปรบปรงใหกบเดโมแอพพลเคชนแลว ขนตอนถดไปคอพฒนาเดโมแอพพลเคชนใหเปนแอพพลเคชนตวเตม โดยการลงรายละเอยดในสวนของการดไซนและการจดวาง Layout ใหสวยงาม รวมถงท าใหแอพพลเคชนสามารถใชงานไดในโทรศพทมอถอระบบปฏบตการ Android ใหครอบคลมมากทสด

*สามารถด Code ของแอพพลเคชนเกมเวททองไดในสวนของภาคผนวก ข

4.1.10) ทดสอบการท างานของแอพพลเคชนเพอหาขอผดพลาดและน าไปปรบปรง

หลงจากสรางแอพพลเคชนเสรจแลวจะตองน าแอพพลเคชนไปทดสอบกอน เนองจากหาก Launch แอพพลเคชนขน Google Play โดยทไมไดทดสอบกอน แลวเกดขอผดพลาดตามมา จะสงผลใหผใชงานเกดความร าคาญและลบแอพพลเคชนของเราทงไปได ซงผท าการทดสอบแอพพลเคชนสวนใหญจะเปนทม Test ของบรษทนนหรอนกพฒนาแอพพลเคชนของบรษทนน เนองจากหากบคคลภาย นอกเปนผท าการทดสอบ ขอมลหรอสงทเราก าลงพฒนาอยอาจจะรวไหลไปยงบรษทคแขงได ท าใหบรษทของเราสญเสยรายไดในอนาคต

62

การทดสอบการท างานในขนตอนน จะตองทดสอบกบโทรศพทมอถอจรงหลายๆรน เนองจากโทรศพทมอถอทใชระบบปฏบตการ Android นนมจ านวนมาก ซงแตละรนจะมขนาดของหนาจอทแตกตางกน, ขนาดของ Resolution ทแตกตางกน, และเวอรชนของระบบปฏบตการAndroid ทแตกตางกน สงผลใหการแสดงผลของแอพพลเคชนในแตละ Devices สามารถผดเพยนไปได

4.2 ผลการวเคราะหขอมล

4.2.1) วเคราะหการท างานและการตอบสนองของระบบเกม

จากการทดสอบระบบเกมทงโหมดคลาสสคเกมและโหมดโกสตมาสเตอร พบวาระบบเกมสามารถท างานไดเปนอยางด และไมมขอผดพลาดในระบบเกมทท าใหตองยตระบบเพอแกไข แตการประมวลผลของโหมดโกสตมาสเตอรจะเรวกวาโหมดคลาสสคเกมเลกนอย เนองจากภาพในเกมของโหมดโกสตมาสเตอรจะถกดงขอมลมาจาก Internal Storage ของโทรศพทมอถอทงหมด สวนภาพในเกมของโหมดคลาสสคเกมจะถกดงขอมลมาจาก Internal Storage ( เฉพาะภาพดานทดาวนโหลดมาใหม ) และ Folder res/drawable ในแอพพลเคชน ซงภาพทถกเกบไวในนจะมการประมวลผลขอมลชากวาภาพทถกเกบเอาไวใน SD Card

4.2.2) วเคราะหการท างานและการตอบสนองของ features ตางๆในแอพพลเคชน

จากการทดสอบการท างานของ Features ทงการดาวนโหลดดานใหม, การสอนวธการเลน, การรบ Notification, การตงคาเสยงและNotification, และการแชรภาพบน Facebook พบวาทก Features สามารถท างานไดเปนอยางด และแสดงผลไดถกตองตามทตองการ 4.2.3) วเคราะหการท างานและการตอบสนองของเวบหลงบาน

จากการทดสอบการท างานของเวบหลงบานพบวาเวบหลงบานสามารถท างานไดเปนอยางด โดยสามารถ Insert, Update, Delete ขอมลดานเกมได และสามารถใหขอมล Feed JSONไดอยางถกตอง ซงแอพพลเคชนสามารถดงขอมลจาก Feed ไดอยางถกตอง

63

4.3 วจารณขอมลโดยเปรยบเทยบผลทไดรบกบวตถประสงคและจดมงหมายการ

ปฏบตงานหรอการจดท าโครงการ

จากวตถประสงคของการพฒนาแอพพลเคชนเกมเวททองมดงตอไปน 1) เพอศกษาการใชงาน Push Notification โดยใช GCM 2) เพอศกษาการใชงาน ViewPager ในAndroid 3) เพอศกษาการ Get JSON Data จาก feed มาเกบไวใน Database ของโทรศพทมอถอ และน าขอมลทเกบอยใน Database มาแสดงในหนาจอโทรศพทมอถอ 4) เพอศกษาการท างานของ ArrayList ในAndroid 5) เพอศกษาการดาวนโหลดรปภาพจาก Internet ผานURLของรปภาพนน มาเกบเอาไวในหนวยความจ าของโทรศพทมอถอ 6) เพอศกษาการใชงาน Custom ListView ในAndroid 7) เพอศกษาการใชงาน SharedPreferences ในAndroid 8) เพอศกษาการประยกตใช Library ของโปรแกรมทมนกพฒนาแอพพลเคชนไดเขยนเอาไวแลว มาใชกบแอพพลเคชนของเรา 9) เพอศกษาการท า Animation แบบงายๆใหกบ SplashScreen ของแอพพลเคชน 10) เพอฝกการออกแบบ User Interface และ Layout ในหนาตางๆของแอพพลเคชนใหรองรบกบโทรศพทมอถอและแทบเลตทใชระบบปฏบตการAndroid อยางครอบคลมมากทสด

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

4.3.1 ศกษาการใชงาน Push Notification โดยใช GCM

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

64

ภาพท 4.21 Notification ในโทรศพทมอถอ เมอมการเพมดานใหม

4.3.2 ศกษาการใชงาน ViewPager ใน Android

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

ภาพท 4.22 การใชงาน ViewPager ในโหมดคลาสสคเกม

4.3.3 ศกษาการ get json data จาก feed มาเกบไวใน Database ของโทรศพทมอถอ และน า

ขอมลทเกบอยใน Database มาแสดงในหนาจอโทรศพทมอถอ

แอพพลเคชนสามารถดงขอมลดานใหมๆจากเวบหลงบานซงแสดงขอมลใน

Format ของ JSON ซงขอมลเหลานนมทงสวนทเปนขอความและสวนทเปนURLของภาพ เอามาเกบไวใน Database ของโทรศพทมอถอได และสามารถน าขอมลทถกเกบไวใน Database มาแสดงในแอพพลเคชนไดอยางถกตอง โดยน าขอมลทถกเกบไวใน Database มาแสดงในหนาเกมทงโหมดคลาสสคเกมและโหมดโกสตมาสเตอร

65

4.3.4 ศกษาการท างานของ ArrayList ใน Android

เนองจากแอพพลเคชนเกมเวททองม Feature ในการดาวนโหลดดานใหม จงตองมการแสดงรายการดานใหมทมในระบบเพอใหผใชไดดกอนทจะดาวนโหลดดานเกมดานใหมๆลงในโทรศพทมอถอ ซงไดใช ArrayList ในการเอาขอมลดานใหมๆมาแสดงในแอพพลเคชน

4.3.5 ศกษาการดาวนโหลดรปภาพจาก Internet ผานURLของรปภาพนน มาเกบไวใน

หนวยความ-จ าของโทรศพทมอถอ

เนองจากเวบหลงบานของแอพพลเคชนเกมเวททองใหขอมลของรปเปน URL ท าใหฝงแอพพลเคชนตองแปลง URL เปน ภาพ Bitmap กอน จากนนจงแปลงภาพ Bitmap เปน BLOB เพอทจะเกบภาพลงในหนวยความจ าของโทรศพทมอถอ ซงการท างานของเมธอดในการแปลงจาก URLเปน Bitmap และแปลง Bitmap เปน BLOB สามารถท างานไดเปนอยางด

4.3.6 ศกษาการใชงาน Custom ListView ใน Android

สบเนองจากขอ 4.3.4 แอพพลเคชนจะแสดงขอมลของดานใหมๆทมในระบบใหผ ใชไดดกอนจะท าการดาวนโหลด ซงขอมลดานใหมจะถกแสดงในรปแบบของ List รายการ โดยใช Tools ListView ใน Android มาใช ซงแสดงอยในหนาดาวนโหลดดานใหม ดงภาพท 4.23

ภาพท 4.23 การใชงาน Custom ListView ในหนา download

66

4.3.7 ศกษาการใชงาน SharedPreferences ใน Android

ในแอพพลเคชนเกมเวททองม feature ใหผใชสามารถตงคาในเกมได เชน การตงคาเสยง ตองมการเกบคาจากทางแอพพลเคชนวาตอนนผใชเปด/ปดการใชงานเสยงอยหรอไม ซงใน

Eclipse มฟงกชนชอ SharedPreferences ซงสามารถเกบคาการต งคาได และเมอผใชเขาใชงานแอพพลเคชนในครงถดไป คาทตงคาไวจะยงคงอยเหมอนเดม หลงจากการน า SharedPreferences มาเกบการตงคาในแอพพลเคชน ปรากฏวาสามารถเกบคาการตงคาตางๆไดอยางถกตอง

ภาพท 4.24 การใช SharedPreferences ในหนา Settings

4.3.8 ศกษาการประยกตใช Library ของโปรแกรมทมนกพฒนาแอพพลเคชนไดเขยน

เอาไวแลว มาใชกบแอพพลเคชนของเรา

เนองจากในแอพพลเคชนเกมเวททองมหลาย Features ซงในบาง Feature จ าเปนตองเรยกใช Library จากไฟลอนๆซงไดมผเขยนไวแลว เชน ในการแชรภาพลง Facebook ตองเรยกใช Library Facebook - SDK จากทาง Facebook, การแสดงจดเคลอนทในขณะสไลดภาพในหนาวธการเลน ตองเรยกใช Library ViewPagerIndicator ของ Jake Wharton, และแสดงภาพทเกบไวในหนวยความจ าของโทรศพทมอถอในดานเกม ตองเรยกใช Library Universal ImageLoader ของ Sergey Tarasevich มาใชซงหลงจากเรยกใชงาน Library ทงหมดทกลาวมาใชงานแลว แอพพลเคชนกสามารถท างานไดถกตองและแสดงผลไดถกตองตามทตองการ

67

4.3.9 ศกษาการท า Animation แบบงายๆใหกบ SplashScreen ของแอพพลเคชน

การใส Animation ใหกบ SplashScreen ท าเพอเพมความนาสนใจใหกบแอพพลเคชน ซง SplashScreen ของแอพพลเคชนเกมเวททอง สามารถเลน Animation ไดถกตองตามทไดออกแบบไวในตอนแรก

ภาพท 4.25 Splash Screen Animation ของแอพพลเคชนเกมเวททอง

4.3.10 ฝกการออกแบบ User Interface และ Layout ในหนาตางๆของแอพพลเคชนให

รองรบกบโทรศพทมอถอและแทบเลตทใชระบบปฏบตการAndroid อยางครอบคลมมากทสด

เนองจาก Devices ทใชระบบปฏบตการ Android มขนาดของหนาจอทตางกน, ขนาดของ Resolution ของจอภาพทแตกตางกน, และเวอรชนของระบบปฏบตการ Android ทแตกตางกน ท าใหการแสดงผลในแตละ Devices อาจเกดการผดเพยนได ท าใหตองออกแบบ Layout ใหรองรบกบ Devices ใหไดมากทสด ซงหลงจากการแกไข สงผลใหแอพพลเคชนสามารถแสดงผลกบ Devices สวนใหญไดถกตองตามทตองการ

68

บทท 5

บทสรปและขอเสนอแนะ

5.1 สรปผลการด าเนนโครงงาน

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

1) สามารถดาวนโหลดดานเกมใหมๆได 2) สามารถตงคาการเปด/ปดเสยง และ เปด/ปด Notification ได 3) สามารถแชรภาพลงใน Facebook ได ( ในโหมดโกสตมาสเตอร ) 4) เมอมดานใหมเขามาในระบบ จะม Notification แจงเตอนใหผใชทราบ

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

ในสวนของการพฒนาแอพพลเคชนนนมอปสรรคและปญหาพอสมควร เนองจากความรทจ าเปนตองใชในการพฒนาแอพพลเคชนเกมเวททองน เปนความรใหมเกอบทงหมด จงตองมการศกษาหาความรจากทาง Internet, จากหนงสอ ,และจากการสอบถามพทปรกษา ซงในบางครงตองมการลองผดลองถก เพอความเขาใจทมากขนในการเรยนร และตองวางแผนในการท างานใหรอบคอบ เพอไมใหใชระยะเวลาในการพฒนาแอพพลเคชนเกนกวาทก าหนดไว

อกปญหาหนงคอจ านวนรนของ Devices ทใชระบบปฏบตการAndroid เนองจาก Devices ทใชระบบปฏบตการ Android มขนาดของหนาจอทตางกน, ขนาดของ Resolution ของจอภาพทแตกตางกน, และเวอรชนของระบบปฏบตการ Android ทแตกตางกน ท าใหการแสดงผลในแตละ Devices อาจเกดการผดเพยนได

69

5.2 แนวทางการแกไขปญหา

ในการพฒนาแอพพลเคชนในเวอรชนตอๆไป ควรพฒนาใหม Features ทมากขน เชน สามารถแชรภาพลงใน Twitter ได, มการเกบคะแนนเพอแขงกบเพอนใน Facebook, และพฒนาระบบเกมใหมความสนกมากยงขน นอกจากนควรพฒนาใหแอพพลเคชนรองรบกบ Devices รนใหมๆ ซงผลตออกมาอยางตอเนองและเวอรชนของระบบปฏบตการ Android รนใหมๆ

5.3 ขอเสนอแนะจากการด าเนนงาน

ในการสหกจศกษาตลอดระยะเวลา 4 เดอนทผานมาพบวา การท างานของ Developer ในการพฒนาแอพพลเคชนขนมา 1 แอพพลเคชน จะตองรวมมอกบฝายตางๆ เชน Developer ในบรษทสนกออนไลนจ ากด จะตองประสานงานกบฝายดไซนกบฝาย Business ซง Developer จะตองคอยแนะน าหรอแสดงความคดเหนในแอพพลเคชนททางฝายดไซนกบฝาย Business คดขนมา วามสวนไหนทสามารถท าไดสวนไหนทไมควรท า สวนไหนทท าไดแตขดกบ Experience ของผใชงาน เปนตน

การวางแผนในการท างานเปนสงทส าคญมากส าหรบผทตองการจะเปน Developer เนองจากDeveloperแตละคนไมไดเขยนแอพพลเคชนเดยว บางคนอาจจะตองเขยนถง 2 ‟ 3 แอพ พรอมๆกน หากไมมการวางแผนการท างานอาจท าใหงานทกสวน Delay ได

การปฏบตสหกจศกษาทบรษท สนก ออนไลน จ ากด เหมาะกบผทตองการเรยนรการเขยนเวบไซด, การจดการเวบไซด, และการท าแอพพลเคชนในระบบปฏบตการ Android / iOS / WindowsPhone ซงหากนกศกษาไดศกษาสงเหลานนมากอน จะท าใหสามารถเรยนรไดรวดเรวมากขนและไดรบความรใหมๆเปนจ านวนมาก แตเนองจากบรษท สนก ออนไลน จ ากด เปนบรษททมชอเสยง พนกงานแตละคนจงมงานทเยอะตลอดเวลา ท าใหทกษะในการเรยนรสงใหมๆดวยตวเองจงมความจ าเปนมาก

70

เอกสารอางอง

1. Ravi Tamada, 2012, AndroidHive [Online], Avaliable :

http://www.androidhive.info/2012/01/android-json-parsing-tutorial [2013, June 3].

2. Ravi Tamada, 2012, AndroidHive [Online], Avaliable :

http://www.androidhive.info/2012/ 07/android-detect-internet-connection-status [2013, June 5].

3. ณฐพล ภญโญ, 2013, สอน Android สไตลไทยๆ [Online], Avaliable :

http://www.youtube.com/watch?v=QNa8iO4bpOc&list=PL3D46C3E9831EE466&index =19 [2013, June 6].

4. ณฐพล ภญโญ, 2012, สอน Android สไตลไทยๆ [Online], Avaliable :

http://www.youtube.com/watch?v=Q8PrOEewujI&list=PL3D46C3E9831EE466

&index=6 [2013, June 10].

5. ณฐพล ภญโญ, 2013, สอน Android สไตลไทยๆ [Online], Avaliable :

http://www.youtube.com/watch?v=AfiBo5cmRro&list=PL3D46C3E9831EE466& index=16 [2013, June 10].

6. ณฐพล ภญโญ, 2012, สอน Android สไตลไทยๆ [Online], Avaliable :

http://www.youtube.com/watch?v=fghB6EdrCyw&list=PL3D46C3E9831EE466&

index=12 [2013, June 17].

7. ณฐพล ภญโญ, 2012, สอน Android สไตลไทยๆ [Online], Avaliable :

http://www.youtube.com/watch?v=Y1k_ggWeSxw&list=PL3D46C3E9831EE466& index=13 [2013, June 20].

71

8. Ravi Tamada, 2012, AndroidHive [Online], Avaliable :

http://www.androidhive.info/2012/ 03/android-listview-with-load-more-button [2013, June 24].

9. Twitter4J, 2013, Code Examples [Online], Avaliable : http://twitter4j.org/en/code-

examples.html [2013, June 27].

10. ThaiCreate.com Team, 2012, Android Pull Down to Refresh And Release to Refresh or Update (Part 1) [Online], Avaliable : http://www.thaicreate.com/mobile/android-pull- down-refresh.html [2013, July 4] . 11. 2013, json_encode [Online], Avaliable : http://www.php.net/manual/en/function.json- encode.php[2013, July 17]. 12. 2013, CountDownTimer [Online], Avaliable : http://developer.android.com/reference/android/os/CountDownTimer.html [2013, July 23].

13. 2013, Using ViewPager for Screen Slides [Online], Avaliable :

http://developer.android.com/training/animation/screen-slide.html [2013, July 25].

14. Chris Banes, 2013, chrisbanes/PhotoView [Online], Avaliable :

https://github.com/chrisbanes/PhotoView [2013, July 25].

15. Jake Wharton, 2012, Android ViewPagerIndicator [Online], Avaliable :

https://github.com/JakeWharton/Android-ViewPagerIndicator [2013, August 1].

16. พรอมเลศ หลอวจตร, 2013, คมอเขยนแอพAndroidฉบบรวมโคด, พมพครงท 1, บรษท

Provision จ ากด, บรษท พมพด จ ากด, หนา 58-61 .

72

17. Sergey Tarasevich, 2013, Universal Image Loader For Android [Online], Avaliable :

https://github.com/nostra13/Android-Universal-Image-Loader [2013, August 7].

18. Ravi Tamada, 2012, AndroidHive [Online], Avaliable :

http://www.androidhive.info/2012/10/android-push-notifications-using-google-cloud-

messaging-gcm-php-and-mysql [2013, August 13].

19. 2012, Sleeping For Less [Online], Avaliable :

http://www.akexorcist.com/2012/06/android-code-supporting-multiple.html

[2013, August 13].

20. Prajak Boonjaratcha, 2013, MobileDep [Online], Avaliable :

http://mobiledep.blogspot.com/2011/09/activity.html [2013, August 26].

21. PHP MindPHP.com, 2012, Java คออะไร [Online], Avaliable : http://www.mindphp.com/

คมอ/73-คออะไร/2185-java-คออะไร.html [2013, August 26].

22. iTCyBER, 2010, ท าความรจกกบ JSON [Online], Avaliable : http://www.itcyber.com/intr- json [2013, August 26].

23. JoomlaHitZ, 2013, MySQL คออะไร [Online], Avaliable :

http://www.joomlahitz.com/index.php/basic-website/46-what-is-my-sql.html# .UhsnLRvp2So [2013, August 26].

24. 2013, Google Cloud Messaging For Android [Online], Avaliable :

http://developer.android.com/google/gcm/index.html [2013, August 27].

73

ภาคผนวก

74

ภาคผนวก ก

Code Web หลงบาน ของ Application เกมเวททอง

75

1. หนา connect.php

2. หนา db_connect.php

76

3. หนา db_functions.php

77

4. หนา config.php

5. หนา send_message.php

78

6. หนา gcm.php

79

7. หนา register.php

80

8. หนา index.php

81

82

83

84

85

9. หนา InsertForm.php

86

87

88

89

10. หนา InsertSave.php

90

91

11. หนา EditForm.php

92

93

94

95

12. หนา EditSave.php

96

97

13. หนา Feed.php

98

99

14. หนา Delete.php

15. changeStatus.php

100

16. หนา feed_all.php

101

17. หนา feed_classicgame.php

102

18. หนา feed_ghostmaster.php

103

ภาคผนวก ข

Code Android ของ Application เกมเวททอง

104

1. หนา SplashScreen.java

2. หนา MainActivity.java

105

106

107

108

109

3. หนา AlertDialogManager.java

4. WakeLocker.java

110

5. ConnectionDetector.java

6. CommonUtilities.java

111

7. JSONParser.java

112

8. GCMIntentService.java

113

114

9. ServerUtilities.java

115

116

10. DataGame.java

117

118

11. choosemode.java

119

12. HowToPlay.java

120

121

13. Settings.java

122

123

124

14. download.java

125

126

127

128

129

130

131

132

133

134

15. DBHelper.java

135

136

137

138

16. storeImg.java

139

140

17. ClassicGameDataEntry.java

141

142

143

18. classicgame.java

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

19. ghostmaster.java

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

ภาคผนวก ค

รายงานประจ าสปดาห

198

ประวตผจดท าโครงงาน

ชอ – สกล นายชตภทร โชคพพฒนพร

วน เดอน ปเกด 7 เมษายน 2535

ประวตการศกษา

ระดบประถมศกษา ประถมศกษาตอนปลาย พ.ศ. 2547

โรงเรยนแมพระฟาตมา

ระดบมธยมศกษา มธยมศกษาตอนปลาย พ.ศ. 2553

โรงเรยนสาธตแหงมหาวทยาลยรามค าแหง ( ฝายมธยมฯ )

ระดบอดมศกษา คณะเทคโนโลยสารสนเทศ สาขาเทคโนโลยมลตมเดย พ.ศ. 2556

สถาบนเทคโนโลยไทย – ญป น

ทนการศกษา ทนการศกษาภายใตกองทน TNI ( ทนประเภทท 3 )

ประวตการฝกอบรม 1. Computer Art & Graphic Design ณ โรงเรยนสอนคอมพวเตอร NetDesign 2. ธรกจAnimationในประเทศไทย ณ สถาบนเทคโนโลยไทย – ญป น

3. โครงการ Kizuna Bond Project ครงท 3 ณ เมองโตเกยว, เมองเคะเซนนมะ,

และเมองโตโยฮาช ประเทศญป น

ผลงานทไดรบการตพมพ - ไมม -