msit แอปพลิเคชั่นบนอุปกรณ์เคลื่อนที่...

MSIT แอปพลเคชนบนอปกรณเคลอนท MSIT mobile application

(iMSIT)

ธรชย ศรเมธากล

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

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

ปการศกษา 2556

I

หวขอ MSIT แอปพลเคชนบนอปกรณเคลอนท (iMSIT) MSIT mobile application (iMSIT) ชอนกศกษา ธรชย ศรเมธากล รหสนกศกษา 5517670011 หลกสตร วทยาศาสตรมหาบณฑต สาขาเทคโนโลยสารสนเทศ ปการศกษา 2556 อาจารยทปรกษา ผศ.ดร.หมดอามน หมนหลน

บทคดยอ

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

II

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

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

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

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

ขอขอบพระคณพๆ เพอนๆ และทกคนทเปนก าลงใจและใหขอเสนอแนะ ท าใหขาพเจามก าลงใจในการพฒนาระบบ iMSIT จนส าเรจลลวงได

ธรชย ศรเมธากล

III

สารบญ

หนา

บทคดยอ ................................................................................................................................. I กตตกรรมประกาศ .................................................................................................................. II สารบญ.................................................................................................................................. III สารบญรป ............................................................................................................................ VII สารบญตาราง ........................................................................................................................ XI บทท 1 บทน า......................................................................................................................... 1

1.1 ปญหา หรอแรงจงใจ ............................................................................................ 1 1.2 วตถประสงค ........................................................................................................ 1 1.3 แนวทางในการปญหา .......................................................................................... 1 1.4 ขอบเขตของการท างานระบบ ............................................................................... 2 1.5 ประโยชนทคาดวาจะไดรบ ................................................................................... 3 1.6 แผนการด าเนนงาน .............................................................................................. 4

บทท 2 พนฐานและทฤษฎทเกยวของ ..................................................................................... 5 2.1 ทฤษฎการประชาสมพนธ ..................................................................................... 5 2.2 ทฤษฎ UML (Unified Modeling Language) ....................................................... 6

2.2.1 Use Case Diagram .......................................................................... 8 2.2.2 Sequence Diagram .......................................................................... 9 2.2.3 Class Diagram ............................................................................... 10

2.3 ภาษาออบเจกทฟ-ซ (Objective-C Language) ................................................... 11 2.4 เครองมอทใชในการพฒนาภาษาออบเจกทฟซ (Xcode) ................................... 15 2.5 เวบเซอรวส (Web Services) ............................................................................. 22 2.6 PHP Language ................................................................................................ 25 2.7 HTML ............................................................................................................... 25

บทท 3 แนวคดและการออกแบบระบบ .................................................................................. 26 3.1 การออกแบบแผนการท างาน (Use Case Diagram) .......................................... 26

3.1.1 System context model .................................................................... 26 3.1.2 Use Case Diagram ......................................................................... 28 3.1.2.1 Use Case: Login ................................................................ 28 3.1.2.2 Use Case: View Course .................................................... 29 3.1.2.3 Use Case: Feed News ....................................................... 30

IV

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

3.1.2.4 Use Case: Feed Knowleadge ............................................ 31 3.1.2.5 Use Case: Feed Webboard ............................................... 32 3.1.2.6 Use Case: View Instructor ................................................. 33 3.1.2.7 Use Case: View Cost ......................................................... 33 3.1.2.8 Use Case: View FAQ ......................................................... 34 3.1.2.9 Use Case: View Admission ............................................... 34 3.1.2.10 Use Case: Change Password ........................................ 35 3.1.2.11 Use Case: Logout ............................................................ 35 3.1.2.12 Use Case: Notification ..................................................... 36

3.2 Activity Diagram .............................................................................................. 36 3.2.1 ระบบ Login ...................................................................................... 36 3.2.2 ระบบ View Course .......................................................................... 37 3.2.3 ระบบ Feed News ............................................................................ 38 3.2.4 ระบบ Feed Knowledge ................................................................... 38 3.2.5 ระบบ Feed Webboard .................................................................... 39 3.2.6 ระบบ View Instructor ...................................................................... 40 3.2.7 ระบบ View Cost .............................................................................. 41 3.2.8 ระบบ View FAQ .............................................................................. 41 3.2.9 ระบบ View Admission ..................................................................... 42 3.2.10 ระบบ Change Password ............................................................... 42 3.2.11 ระบบ Logout ................................................................................. 43 3.2.12 ระบบ Notification ........................................................................... 44

3.3 แผนภาพคลาสและความสมพนธ Class Diagram ............................................... 45 3.3.1 Class login ....................................................................................... 46 3.3.2 Class getiNews ............................................................................... 47 3.3.3 Class getiSectionBoardMenu ......................................................... 48 3.3.4 Class getiSectionKnowMenu ........................................................... 49 3.3.5 Class getiKnowWeb ......................................................................... 50 3.3.6 Class ishow ..................................................................................... 51 3.3.7 Class getiInstructor ......................................................................... 52

V


3.3.8 Class ihistory ................................................................................... 53 3.3.9 Class iCourse .................................................................................. 54 3.3.10 Class ChangePass ......................................................................... 54 3.3.11 Class Logout ................................................................................. 55 3.3.12 Class postiUpdateVis ..................................................................... 56 3.3.13 Class postiTop .............................................................................. 56 3.3.14 Class postiWeb ............................................................................. 57

3.4 Sequence Diagram ......................................................................................... 58 3.4.1 Login ................................................................................................ 58 3.4.2 View Course .................................................................................... 59 3.4.3 Feed News ...................................................................................... 59 3.4.4 Feed Knowledge .............................................................................. 60 3.4.5 Feed Webboard .............................................................................. 62 3.4.6 View Instructor ................................................................................ 64 3.4.7 View Cost ........................................................................................ 65 3.4.8 View FAQ ........................................................................................ 65 3.4.9 View Admission ............................................................................... 66 3.4.10 Change Password ......................................................................... 67 3.4.11 Logout ........................................................................................... 67 3.4.12 Notification ..................................................................................... 68

บทท 4 การพฒนาและผลการด าเนนงาน ............................................................................... 69 4.1 เครองมอและอปกรณทใชในการพฒนาระบบ ..................................................... 69

4.1.1 Hardware .......................................................................................... 69 4.1.2 Software .......................................................................................... 69

4.2 ผลการด าเนนงานพฒนาแอปพลเคชน iMSIT .................................................... 70 4.2.1 ไอคอนของแอปพลเคชน ................................................................... 70 4.2.2 หนาจอ Splash Screen บนแอปพลเคชน iMSIT ............................... 70 4.2.3 หนาจอเขาระบบ Login บนแอปพลเคชน iMSIT ................................. 71 4.2.4 หนาจอระบบ iMSIT บนแอปพลเคชน iMSIT ...................................... 72

VI


4.2.5 หนาจอระบบ iHome บนแอปพลเคชน iMSIT .................................... 73 4.2.6 หนาจอระบบ News บนแอปพลเคชน iMSIT ....................................... 75 4.2.7 หนาจอระบบ Knowledge บนแอปพลเคชน iMSIT .............................. 76 4.2.8 หนาจอระบบ Webboard บนแอปพลเคชน iMSIT ............................... 78 4.2.9 หนาจอเมน More บนแอปพลเคชน iMSIT ......................................... 79 4.2.10 หนาจอเมน Instructor บนแอปพลเคชน iMSIT ................................ 80 4.2.11 หนาจอเมน Cost บนแอปพลเคชน iMSIT ....................................... 81 4.2.12 หนาจอเมน FAQ บนแอปพลเคชน iMSIT ........................................ 82 4.2.13 หนาจอเมน Admission บนแอปพลเคชน iMSIT .............................. 83 4.2.14 หนาจอเมน Contact Us บนแอปพลเคชน iMSIT .............................. 84 4.2.15 หนาจอเมน Setting บนแอปพลเคชน iMSIT ..................................... 85 4.2.16 หนาจอเมน About บนแอปพลเคชน iMSIT ....................................... 86 4.2.17 หนาจอเมน Logout บนแอปพลเคชน iMSIT ..................................... 87 4.2.18 หนาจอ Notification บนแอปพลเคชน iMSIT .................................... 88

บทท 5 สรปผลการด าเนนงาน .............................................................................................. 89 5.1 สรปผลโครงการ ................................................................................................. 89 5.2 ปญหาและอปสรรคจากการพฒนาโครงการ ........................................................ 89 5.3 วธแกปญหาจากการพฒนาโครงงาน ................................................................. 90 5.4 ขอเสนอแนะ ..................................................................................................... 92

เอกสารอางอง....................................................................................................................... 93

VII

สารบญรป หนา

รปท 1.1 โครงสรางของระบบ iMSIT ....................................................................................... 2 รปท 2.1 ตวอยาง Use Case Diagram การถอนเงน ............................................................... 8 รปท 2.2 ตวอยาง Sequence Diagram ของการขอดยอดเงน ................................................ 10 รปท 2.3 องคประกอบของ Class Diagram ........................................................................... 11 รปท 2.4 ตวอยาง Class Diagram ........................................................................................ 11 รปท 2.5 iOS Framework [8] ............................................................................................... 14 รปท 2.6 รป Icon X-Code .................................................................................................... 15 รปท 2.7 หนาตางแรก Welcome to Xcode .......................................................................... 15 รปท 2.8 หนาตาง Template ส าหรบการสรางโปรเจค .......................................................... 16 รปท 2.9 หนาตางการตงชอโปรเจคและการเลอก Device เพอการพฒนา ............................... 16 รปท 2.10 หนาตาง MainStoryboard.storyboard แยกตาม Area ตางๆ ................................ 17 รปท 2.11 Toolbar ............................................................................................................... 17 รปท 2.12 Navigator ............................................................................................................ 17 รปท 2.13 หนาตาง Editor .................................................................................................... 18 รปท 2.14 หนาตางการก าหนดคณสมบตและObject ตางๆ .................................................... 19 รปท 2.15 หนาจอ Debug..................................................................................................... 19 รปท 2.16 Project Navigator ................................................................................................ 20 รปท 2.17 เบองหลงการท างานของ Xcode ........................................................................... 21 รปท 2.18 iPhone Simulator บน Xcode ทเสมอนจรง .......................................................... 21 รปท 2.19 ขนตอนการ Build code into executables บน Simulatorและบนอปกรณจรง ........ 22 รปท 2.20 การท างานของ REST .......................................................................................... 23 รปท 3.1 System context model ระบบ iMSIT ..................................................................... 26 รปท 3.2 Use Case Diagram and actors ของระบบ iMSIT โดยละเอยด .............................. 28 รปท 3.3 Use Case Login ................................................................................................... 29 รปท 3.4 Use Case View Course ....................................................................................... 30 รปท 3.5 Use Case Feed News .......................................................................................... 30 รปท 3.6 Use Case Feed Knowledge ................................................................................ 31 รปท 3.7 Use Case Feed Webboard .................................................................................. 32 รปท 3.8 Use Case View Instructor .................................................................................... 33 รปท 3.9 Use Case View Cost ............................................................................................ 33

VIII

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

รปท 3.10 Use Case View FAQ .......................................................................................... 34 รปท 3.11 Use Case View Admission ................................................................................ 34 รปท 3.12 Use Case Change Password ........................................................................... 35 รปท 3.13 Use Case Logout ............................................................................................... 35 รปท 3.14 Notification ........................................................................................................ 36 รปท 3.15 Activity Diagram ระบบ Login ............................................................................. 37 รปท 3.16 Activity Diagram ระบบ View Course ................................................................ 37 รปท 3.17 Activity Diagram ระบบ Feed News ................................................................... 38 รปท 3.18 Activity Diagram ระบบ Feed Knowledge ......................................................... 39 รปท 3.19 Activity Diagram ระบบ Feed Webboard ............................................................ 40 รปท 3.20 Activity Diagram ระบบ View Instructor .............................................................. 40 รปท 3.21 Activity Diagram ระบบ View Cost...................................................................... 41 รปท 3.22 Activity Diagram ระบบ View FAQ ..................................................................... 41 รปท 3.23 Activity Diagram ระบบ View Admission ............................................................ 42 รปท 3.24 Activity Diagram ระบบ Change Password ....................................................... 43 รปท 3.25 Activity Diagram ระบบ Logout ........................................................................... 43 รปท 3.26 Activity Diagram ระบบ Notification ................................................................... 44 รปท 3.27 Conceptual Class Diagram ของระบบ iMSIT ..................................................... 45 รปท 3.28 Class Login ........................................................................................................ 46 รปท 3.29 Class getiNews .................................................................................................. 47 รปท 3.30 Class getSectionBoardmenu ............................................................................. 48 รปท 3.31 Class getSectionKnowmenu .............................................................................. 49 รปท 3.32 Class getiKnowWeb .......................................................................................... 50 รปท 3.33 Class ishow ....................................................................................................... 51 รปท 3.34 Class getiInstructor ............................................................................................ 52 รปท 3.35 Class ihistory ..................................................................................................... 53 รปท 3.36 Class iCours ....................................................................................................... 54 รปท 3.37 Class changePass ............................................................................................. 54 รปท 3.38 Class logout ....................................................................................................... 55 รปท 3.39 Class postiUpdateVis ........................................................................................ 56

IX


รปท 3.40 Class postiTop ................................................................................................... 56 รปท 3.41 Class postiWeb ................................................................................................. 57 รปท 3.42 Sequence Diagram ระบบ Login ........................................................................ 58 รปท 3.43 Sequence Diagram ระบบ View Course ........................................................... 59 รปท 3.44 Sequence Diagram ระบบ Feed News ............................................................... 60 รปท 3.45 Sequence Diagram ระบบ Feed Knowledge .................................................... 61 รปท 3.46 Sequence Diagram ระบบ Feed Webboard ...................................................... 63 รปท 3.47 Sequence Diagram ระบบ View Instructor ......................................................... 64 รปท 3.48 Sequence Diagram ระบบ View Cost ................................................................. 65 รปท 3.49 Sequence Diagram ระบบ View FAQ ................................................................. 66 รปท 3.50 Sequence Diagram ระบบ View Admission ....................................................... 66 รปท 3.51 Sequence Diagram ระบบ Change Password ................................................... 67 รปท 3.52 Sequence Diagram ระบบ Logout ...................................................................... 68 รปท 3.53 Sequence Diagram ระบบ Notification ............................................................... 68 รปท 4.1 ไอคอนแอปพลเคชน iMSIT .................................................................................... 70 รปท 4.2 หนาจอ Splash Screen ......................................................................................... 70 รปท 4.3 หนาจอระบสถานะ .................................................................................................. 71 รปท 4.4 หนาจอ Member Login .......................................................................................... 71 รปท 4.5 หนาจอ Login ไมส าเรจ .......................................................................................... 71 รปท 4.6 หนาจอ Status ไม Active ...................................................................................... 71 รปท 4.7 หนาจอระบบ iMSIT ............................................................................................... 72 รปท 4.8 หนาจอระบบ iMSIT ............................................................................................... 72 รปท 4.9 หนาจอเมน iHome ................................................................................................. 73 รปท 4.10 หนาจอเมนแผนการศกษา .................................................................................... 73 รปท 4.11 หนาจอขอมลหลกสตร .......................................................................................... 74 รปท 4.12 หนาจอแผนการศกษา .......................................................................................... 74 รปท 4.13 หนาจอเมน News ................................................................................................ 75 รปท 4.14 หนาจอแสดงรายละเอยดของขาว .......................................................................... 75 รปท 4.15 หนาจอเมน Knowledge ....................................................................................... 76 รปท 4.16 หนาจอแสดงหวขอเรองแตละหมวดหม ................................................................. 76

X


รปท 4.17 หนาจอแสดงรายละเอยด ...................................................................................... 76 รปท 4.18 หนาจอโพสตถาม-ตอบ ......................................................................................... 76 รปท 4.19 หนาจอ Popup กอนโพสตขอมล ........................................................................... 77 รปท 4.20 หนาจอเมน Webboard ........................................................................................ 78 รปท 4.21 หนาจอแสดงหวขอเรองแตละหมวดหม ................................................................. 78 รปท 4.22 หนาจอโพสตหวขอค าถาม .................................................................................... 78 รปท 4.23 หนาจอแสดงรายละเอยด ...................................................................................... 78 รปท 4.24 หนาจอเมน More ................................................................................................. 79 รปท 4.25 หนาจอเมน Instructor .......................................................................................... 80 รปท 4.26 หนาจอประวตคณาจารย ...................................................................................... 80 รปท 4.27 หนาจอเมน Cost .................................................................................................. 81 รปท 4.28 หนาจอเมน FAQ .................................................................................................. 82 รปท 4.29 หนาจอเมน Admission ........................................................................................ 83 รปท 4.30 หนาจอเมนกรอกรายละเอยดการสมคร ................................................................. 83 รปท 4.31 หนาจอเมน Contact Us ....................................................................................... 84 รปท 4.32 หนาจอแผนท MSIT ............................................................................................. 84 รปท 4.33 หนาจอเมน Setting .............................................................................................. 85 รปท 4.34 หนาจอเมน About ................................................................................................ 86 รปท 4.35 หนาจอเมน Logout .............................................................................................. 87 รปท 4.36 หนาจอ iMSIT Notification ................................................................................... 88 รปท 4.37 หนาจอ iMSIT Notification ................................................................................... 88 รปท 5.1 Table Log_read .................................................................................................... 90 รปท 5.2 การเพม Field ใน Table board_member ............................................................... 90 รปท 5.3 การเพม Field ใน Table board_data ..................................................................... 91 รปท 5.4 การเพม ขอมลใน Table board_catmember และ board_membergroup ................ 91 รปท 5.5 การ Set คา Database Properties ......................................................................... 92

XI

สารบญตาราง

หนา

ตารางท 1.1 แผนการด าเนนงานโครงงาน 1 ............................................................................ 4 ตารางท 1.2 แผนการด าเนนงานโครงงาน 2 ............................................................................ 4 ตารางท 2.1 สญลกษณพนฐานทใชใน Use Case Diagram .................................................... 7 ตารางท 2.2 องคประกอบของ Sequence Diagram ................................................................ 9 ตารางท 2.3 REST Web Service HTTP Method................................................................. 23

1

บทท 1 บทน า

1.1 ปญหาหรอแรงจงใจ เนองดวยในปจจบนการเผยแพรขอมลขาวสาร การประชาสมพนธ การตดตอสอสาร การคนหาขอมลตางๆ นน ไมจ าเปนตองผานทาง Internet Browser บน PC, Labtop เพยงชองทางเดยว ในขณะท Smart phone ไดเขามามบทบาทในชวตประจ าวนเพมมากขนและการพฒนา Application on mobile เพอทจะเขามาชวยท าใหการใชงาน การตดตอสอสาร ฯลฯ ไดสะดวกยงขน ดงนนการพฒนาเนอหาขอมลจากเวบไซต MSIT MUT ไปสเทคโนโลย ในรปแบบ Smart application เพอเพมชองทางอกหนงชองทาง ในยค Smart Phone เพอใหนกศกษาไดเขาถงขอมลทสะดวก รวดเรว งายตอการคนหาขอมล ตดตามขาวสารประชาสมพนธ และการตดตอสอสาร ของทางมหาลยไดสะดวกยงขน และสามารถเขาถงขอมลหลกสตร ประมาณการคาใชจายตอหลกสตร ของ MSIT MUT ไดอยางงายดายและสามารถสมครศกษาตอไดทนทเมอเปดการรบสมครหรอเมอไดรบขาวสารการประชาสมพนธผานทางระบบ Notification ทสงผานทาง Application on mobile 1.2 วตถประสงค

1.2.1 เพอเปนชองทางอกหนงทางเลอกในการเขาถงขอมลทนอกเหนอจากทตองเขาผาน Browser เทานน

1.2.2 เพองายตอการตดตอสอสารกบอาจารยผสอน การคนหาขอมล การรบขอมลขาวสาร 1.2.3 เพอใหบคคลภายนอกทวไปสามารถรบทราบขาวสาร เขาถงขอมลหลกสตร คาใชจาย ส าหรบผทก าลงสนใจจะศกษาตอและสามารถสมครศกษาผานทาง Application on mobile ไดทนท 1.3 แนวทางในการแกปญหา iMSIT นนเปน Application on Mobile บนระบบปฎบตการ iOS และเปนอกชองทางในการเขาถงขอมลขาวสารทมอยภายในเวบไซต http://www.msit.mut.ac.th โดยไดรวบรวมขอมลตามหวขอหลกๆ เชน ขอมลหลกสตร, ประมาณการคาใชจายตอหลกสตร, ขาวประชาสมพนธ, ขาวกจกรรม, คณาจารยผสอน, แหลงรวมความร, กระดานถามตอบ, การสมครศกษาตอ มาจดรวมหมวดหมใหอยในรปแบบ Mobile application เพองายตอการคนหาขอมล การถามขอสงสยในการและการตดตามขาวสารตางๆ ของทางคณะ

2

โครงสรางของระบบ

Internet

MSIT MUT

WEBSITE

DATABASE

Mobile Device

Tablet Device

Query Command

รปท 1.1 หลกการท างานเบองตนของระบบ iMSIT

1.4 ขอบเขตการท าโครงงาน ขอบเขตโครงงานในการพฒนาเนอหาในเวบไซต MSIT MUT ไปสแอปพลเคชนบนอปกรณเคลอนท (iMSIT) พฒนาบนระบบปฏบตการ iOS ตามหวขอหลกดงตอไปน

1.4.1 ขอมลหลกสตร - Doctor of Philosophy in Information Technology - Master of Science in Information Systems Security - Master of Science in Network Engineering - Master of Science in IT Management

- IT Management - Network and System Administration - Software Development and Quality Assurance - Mobile Technology

- Cost - FAQ

1.4.2 ขาว - ประกาศขาวคณะ - ประกาศขาวกจกรรม

3

1.4.3 คลงความร - ตามหวขอ ARTICLE

- ฮารดแวร - ระบบปฏบตการ (OS) - Networking - Database

- Programming - Web Development - IT Management - Network and Information Security - SAP - Tip & Tricks - Internet Application - Idea for Network and internet application

- Network and System Management Tools 1.4.4 กระดานถามตอบ

- ตามหวขอ Webboard - ถามตอบเรองเรยน - คยเรอง IT - เฮฮาตามประสา MSMUT - ประกาศรบสมครงาน - หลกสตรอบรม - หลกสตรวทยาศาสตรมหาบณฑตสาขาวศกรรมเครอขาย -Board PhD.IT - หลกสตรความมนคงทางระบบสารสนเทศ (MISS) 1.4.5 คณาจารยผสอน 1.4.6 การรบสมครศกษาตอ 1.4.7 Contact Us

1.5 ประโยชนทคาดวาจะไดรบ 1.5.1 นกศกษาเขาถงขอมลไดสะดวกยงขน 1.5.2 บคคลภายนอกสามารถเขาถงขอมลหลกสตร ประมาณการคาใชจายไดสะดวกยงขน 1.5.3 บคคลภายนอกสามารถตดสนใจสมครศกษาตอผาน Application ไดทนทเมอมการเปดรบสมคร 1.5.4 นกศกษาและบคคลภายนอกไดรบขาวสารทรวดเรวผานชองทาง Notification

4

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

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

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

แผนงานพฒนาระบบ iMSIT มถนายน กรกฎาคม สงหาคม กนยายน ตลาคม

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1. วเคราะหและศกษาระบบงานปจจบน

2. ศกษาความตองการของระบบ

3. ศกษาปญหา, ขอจ ากด และรายละเอยดของระบบ

4. วเคราะหและออกแบบระบบ

แผนงานพฒนาระบบ iMSIT เมษายน พฤษภาคม มถนายน กรกฎาคม สงหาคม

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1. พฒนาระบบ iMSIT

2. ทดสอบและแกไขระบบ

3. จดท าคมอและเอกสารตางๆ

5

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

ความรพนฐานและทฤษฎทเกยวของทจะน ามาใชในการพฒนาโปรแกรมบนสมารทโฟน เชน iPhone, iPad, iPod ซงการพฒนาจะใชเครองมอในการพฒนาทเรยกวา Xcode ในการพฒนา Application บนระบบปฏบตการ iOS ภาษาทใชในการพฒนาโปรแกรมคอภาษา Objective-C ซงจะอธบายรายละเอยดดงตอไปน 2.1 ทฤษฎการประชาสมพนธ องคประกอบของสอโฆษณาไดมการเปลยนรปแบบไป โดยเรมจากการสอสารแบบบรณาการและการท าการตลาดและตดสนใจจากประสบการณมากกวาการคาดการณในอดต สอไดถกเปลยนรปแบบไปยงรปแบบการพดคยและการมสวนรวม ( Interactive and engagement model) ในโลกทกลยทธการสอสารเปลยนแปลงทรวดเรว งานวจยหลายๆ ชนในอดตไมสามารถน ามาใชงานได และมการทจะน าสอหลายสอทมอยนนมาใชประโยชนรวมกนสงขนเพราะสามารถใชประโยชนรวมกนจากการผสมผสานระหวางสอ การน าแนวคดการสอสารแบบบรณาการ (IMC: Integrated Marketing Communication) ในการวางแผนการโฆษณามการยอมรบมากขน โดยลกษณะการสอสารตลาดแบบผสมผสานทถกน ามาใชบอยครงคอ ลกษณะของการน าเครองมอการสอสารหลากรปแบบมาใช ความหมายของค าวาสอ “สอ” กวางขนโดยมองวา “สอ” คอจดเชอมโยงการสอสารทกรปแบบ ทสามารถตดตอสอสารกบบคคลตางๆ ได ดงนนความตองการในขอมลมากขนในเชงลก เพอทจะท าการวางแผนตางๆ ไดตรงกลมมากขน การสอสารและการเรยนรเทคนคการสอสารและการศกษาวจยเปนสงทจ าเปนทขาดไมได ระบบการสอสารเปนเครองมอหนงของการน าเสนอสารสนเทศเพอใชส าหรบงานตางๆ ในสวนการพฒนาและการวางแผน จ าเปนจะตองใชสอทเกยวของเพอศกษาในดานความตองการ ดานคแขง ตลอดจนสงแวดลอมทกรอบดาน เนองจากปจจบนขอมลการสอสารทใหญขน ขอมลมความซบซอนมากขน สภาพแวดลอมทเปลยนแปลงไปอยางรวดเรวและมการแขงขนทสงขน ดวยเหตนการใชการสอสารททนตอเหตการณจงยงจ าเปนมากยงขนและเมอใชรวมกบระบบวจย จงเปนสงทสามารถเชอมโยงกบบคคลตางๆ ใหเขามารวมกนโดยผานการใชขอมลขาวสาร การน าขอมลขาวสารทไดไปใช เพอบรรลและก าหนดถงโอกาส เพอการปรบปรงและประเมนผลในดานตางๆ การสอสารแบบบรณาการ (IMC: Integrated Marketing Communication) เปนการจดการสอสารโดยใชสอตางๆ รวมกบกจกรรมหลากหลายรปแบบตอเนอง เพอเกดการจงใจ เกดประสบประการณ การไดยน การไดเหน ในทกชองทางในการประชาสมพนธ สรางประสบการณ

6

ทแปลกใหมเพอการรบรและใหเกดความประทบใจ การสอสารแบบครบวงจรเปนการวางแผนภายใตแนวคดเดยวโดยการใชสอหลายๆ รปแบบเพอบรรลแผนดงกลาว เปาหมายของ IMC คอ การมงเนนพฤตกรรมของกลมเปาหมายใหสอดคลองกบความตองการ โดยพจารณาวธการสอสาร เพอใหบคคลทวไปไดร บร ร บทราบซงจะน าไปสความคนเคยและบอกตอและเกดความเชอมน หวใจหลกของ IMC คอ การกระตนไมเพยงแคการสรางการรบร การจดจ าและการยอมรบเทานน IMC เปนกระบวนการสอสารทจงใจในระยะยาวและตอเนอง โดยใชเครองมอหลายรปแบบ เชน โฆษณา ประชาสมพนธ ตลาดตรง การสงเสรมการขาย การจดการความสมพนธ เนนกจกรรม คอลเซนเตอร และอเมลฯลฯ เพอใหเกดความตองการ [1] การสอสารโดยการโฆษณาประชาสมพนธจงจ าเปนตองด าเนนการควบคไปกบการวจยอยางสม าเสมอแนวคดการตลาดแบบ IMC ตองมการน าทกอยางมาประสมประสานเขาดวยกนและการวางแผนวาจะใชเครองมอไหนมากหรอนอย เพอใหบรรลจดมงหมายในแตละชวงเวลา การท า IMC ตองเรมหาแนวทางการวางแผนดวยการท าวจยและควรจะท าอยางตอเนองเพอทจะใชเครองมอใหไดภาพทชดเจน เพอทจะสามารถน าจดออนจดแขงทไดจากการวจยมาชวยในการพฒนางานใหไดดยงขนตอไป 2.2 ทฤษฎ UML (Unified Modeling Language) UML (Unified Modeling Language) คอการรวบรวมขอมลเกยวกบความตองการของผใช (Requirement Collection) ในการใชระบบ การวเคราะห (Analysis) การออกแบบ (Design) และการเขยนโปรแกรมหรอการสรางซอฟตแวร (Implementation) UML เปรยบเสมอนเครองมอทจะเขามาชวยในการด าเนนงานโครงการท าซอฟตแวรใหเปนไปอยางมประสทธภาพ ทจะชวยเราไดตงแตการวเคราะห การออกแบบ และการด าเนนการพฒนา UML จรงๆ ไมสามารถท าการสรางโปรแกรมได (Code Generation) แตทวาจะเปนรปแบบหรอหนาทจะสามารถน าไปสการพฒนา (Coding) ไดอยางเรวและงายดายมาก UML มององคประกอบตางๆ เปนออบเจคต (Object) โดยออบเจคตแตละตวมความเกยวของกนโดยอาศยความสมพนธ (Relationships) เปนตวเชอมโยงกน อกทงออบเจคตยงสามารถตดตอกนเองกนภายในท าใหซอฟตแวรท างานตามทผใชตองการได UML จงชวยใหการเขยนโปรแกรมเชงวตถ (Object-Oriented Programming) เปนไปไดงาย

ความหมายของ “ปญหา” คอสงทเราตองด าเนนการแกไขจนกระทงโครงการเสรจสนการด าเนนงาน ความหมายของ “ปญหา” ในดานของ Modeling Language คอความพยายามทจะอธบายปญหาของซอฟตแวรทจะด าเนนการพฒนาขน ตวโมเดลจะแสดงใหเหนถงออบเจคตตางๆ ทเกยวของและสมพนธระหวางออบเจคตเหลานน วธการแกไขปญหาเราอาจจะใชไดอะแกรม เนอความ หรอ รปแบบอนๆ ทเปนการยอมรบระหวางกน

7

ท าไมตองใช UML เนองจากซอฟตแวรในปจจบนมขนาดใหญและสลบซบซอนทมากยงขน และวธการท างานทโปรแกรมเมอรมกจะใชกนอยเสมอคอการเขยนโปรแกรมแลวกคดไปพรอมกน โดยปราศจากเครองมอทจะเขามาชวยในการจดการกบขนาดและความซบซอนของซอฟตแวรเหลานน จงท าใหซอฟตแวรทไดยงอาจจะเตมไปดวยบก (Software Bugs) ซงยากตอการแกไขหรอหาสาเหต UML จงเปนเครองมออนดอนหนงทจะด าเนนการทกขนทกตอนอยางสมเหตสมผล [2]

กลไกการท างานเบองตนของ UML จะประกอบไปดวยโมเดลดงตอไปน 1. Use Case Diagram 2. Sequence Diagram 3. Class Diagram 4. Activity Diagram 5. Collaboration Diagram 6. Component Diagram 7. Deployment Diagram 8. Object Diagram 9. Statechart Diagram

จากโมเดลตางๆ ของ UML ทแสดงใหดขางบน จะเหนวาโมเดล 3 โมเดลแรกคอ Use Case, Sequence Diagram และ Class Diagram เปนโมเดลพนฐานทใชในระบบงานทวไป พอเพยงทจะใชถายถอดแนวความคดของผพฒนาหรอผวเคราะหระบบ

ตารางท 2.1 สญลกษณพนฐานทใชใน Use Case Diagram สญลกษณ ความหมาย

ชอสญลกษณ: Use case name ความหมาย: แทนหนาทของระบบทจะตองท า

ชอสญลกษณ: Actor name ความหมาย: ท าหนาหนาผลกดนใหเกดกจกรรมตางๆ ของระบบ

8

ชอสญลกษณ: System name

ความหมาย: ท าหนาทเปนเสนแบงขอบเขตระหวางระบบกบ Actor

ชอสญลกษณ: Connection ความหมาย: ท าหนาทเปนเสนเชอมระหวาง Actor กบ Use case

2.2.1 Use Case Diagram

คอการใชงานทเกดจากมมมองของผใชระบบหรอจะกลาวถงกรณการใชงานดงกลาวกคอการอธบายฟงกชนการท างานตางๆ ของระบบแตละกรณของการใชงาน (Use Case) เชนตวอยางการถอนเงน ดงรป 2.1

Use Case Diagram ประกอบดวย

1. Actor คอ ผทกระท ากบระบบ เปรยบเทยบไดกบผใชงานระบบ 2. Use Case คอ หนาทหรองานตางๆ ในระบบ เชน การถอนเงน เปนตน 3. Relationship คอ ความสมพนธระหวาง Use Case กบ Actor

รปท2.1 ตวอยาง Use Case Diagram การถอนเงน

9

2.2.2 Sequence Diagram คอไดอะแกรมทแสดงล าดบขนตอน (Sequence) การท างานภายในของ Use Case โดย Use Case ไมสามารถบอกขนตอนการท างานภายในแตเปน Sequence Diagram ตางหากทท าใหเราเปนขนตอนการท างานภายใน Use Case ตวนนได เชนตวอยางการขอดยอดเงน ดงรปท 2.2 ประโยชนของ Sequence Diagram - ชวยในการพจารณาวาใน class diagram ทสรางม function ใดขาดหายไป

- ท าให class ตางๆ มความสมบรณมากยงขน

ตารางท 2.2 องคประกอบของ Sequence Diagram

Actor

Object

Lileline

Focus of Control

Message

Return

Self Message

10

รปท2.2 ตวอยาง Sequence Diagram ของการขอดยอดเงน

2.2.3 Class Diagram คอแผนภาพทใชแสดง Class และความสมพนธในแงตางๆ (Relation) ระหวาง

Class เหลานน สงทปรากฏใน Class Diagram นนประกอบดวยกลมของ Class และกลมของ Relationship โดยสญลกษณทใชในการแสดง Class นน จะแทนดวยสเหลยมทแบงออกเปน 3 สวนโดนแตละสวนนนจะใชแสดงชอของ Class, Attribute(Properties), และฟงกชนตางๆ ตามล าดบ สญลกษณ Class ประกอบดวย

Class Name คอชอของ Class Attribute ของ Class คอคณสมบตของ Class Method หรอ Operation ของ Class คอพฤตกรรมของ Class

การเขยนสญลกษณแทน Class นนตองค านงถงระดบการเขาถงแบงออกเปน 3

ประเภท ไดแก 1. Private ( - ) หมายถง Attribute หรอ ฟงกชนทสามารถมองเหนไดจาก

ภายในตวของ Class เองเทานน 2. Protect ( # ) หมายถง Attribute หรอ ฟงกชนทไวส าหรบการท าการสบทอด

โดยเฉพาะ 3. Public ( + ) หมายถง Attribute หรอ ฟงกชนทสามารถมองเหนไดจาก

ภายนอกและสามารถเปลยนคา อานคาหรอเรยกใชงานได

11

รปท2.3 องคประกอบของ Class Diagram Association ความสมพนธเชงโครงสราง ใชส าหรบอธบายการเชอมโยงระหวางวตถก าหนดความสมพนธแบบ one to many หรอ one to one เชน

1..* ตวอยาง พนกงาน 1 คนสามารถสงกดไดหลายแผนก 0..* ตวอยาง แผนก 1 แผนกสามารถมพนกงานไดตงแต 0 ถง * (อาจจะไมม

เลยกได) 1..1 ตวอยาง แผนก 1 แผนกสามารถมพนกงานได 1 คน

รปท2.4 ตวอยาง Class Diagram

2.3 ภาษาออบเจกทฟ-ซ (Objective-C Language) ภาษาออบเจกทฟ-ซ คอภาษาหลกทใชในการพฒนาโปรแกรมบน iDevice ทออกแบบมาเพอใชเขยนโปรแกรมเชงวตถทมความซบซอน โดยภาษาออบเจกทฟ-ซยงคงเปนควาเปนภาษาซอยโดยสวนเพมเตมจากภาษาซ นนคอ สวนของการสงเมสเสจเพอสงคาไปยงวตถใดๆ เพอรองรบในสวนของการเขยนโปรแกรมเชงวตถ

12

การพฒนาแอปพลเคชนทท างานบนระบบปฏบตการ iOS ตองพฒนาบนพนฐานของภาษาออบเจกทฟ-ซ โดยใชเครองมอทใชในการพฒนาแอปพลเคชนในภาษาออบเจกทฟ-ซไดแก เอกโคด (XCode) ซงเปนโปรแกรมทท างานบนระบบปฏบตการ Mac OS X เทานน [4]

นยามค าศพทของ Objective-C - Class (description/template for an object) คอการสรางค าอธบายของ Class หรอ เปนโครงรางของ Object ตวอยางเชน การสราง Class ของ Book จะได Book.h และ Book.m ขนมาในทกๆ คลาส

- Instance (manifestation of a class) คอการสรางตวแปรของ Class เพอทจะน าไปใชงานหรอเรยกวา Instance of Class ตวอยางเชน

Book *myBook = [[Book alloc]init];

- Message (Sent to object to make them act) คอการสงคา Object ตางๆ ผาน Message ใหไปท างาน ตวอยางเชน

[bbLabel setText:@”Hanaka”];

- Method (code invoked by a Message) คอการท างานโดยการสงการของ Message หรอจะเรยกไดวาเปน ฟงกชนของ Class ตวอยางเชน

-(int) idbook; หรอ

-(void) idbook: (int) id;

- Instance Variable (object-specific storage) คอการก าหนดตวแปร Instance เพอส าหรบใชงาน

13

ตวอยางเชน

NSString *myBook;

myBook = @”Hello Wolrd”;

- Properties คอการก าหนดรปแบบสทธการใชงานของ Attributes ตวอยางเชน

@property(nonatomic, assign) NSInteger Booknum;

การสราง Class

วธการสราง Class ใน Objective-C จะท าการสราง Interface file หรอเรยกงายๆวา (.h) และ Implement file หรอเรยกงายๆ วา (.m) ในการสราง Class ระบบจะท าการสราง (.h) และ (.m) ขนมาพรอมกนทกๆ การสรางหนง Class Interface file (.h) จะเปนการสราง Class ขนมาโดยมการประกาศตวแปร (instance variable) และ Method ทมการตงชอแตยงไมมการเขยนการท างาน Implement file (.m) จะตองน า Method ทประกาศไวใน Interface file (.h) มาท าการเขยนการท างานเพอให Method นนๆ ท างาน

ตวอยางโครงสราง Interface file (.h)

@interface NameOfClass :NameofSuperClass { Instance variable declarations } - Instance method declarations + class method declarations @end

14

ตวอยางโครงสราง Implement file (.m)

#import “interfaceNameClass.h” @implementation nameofCalss:NameofSuperClass { Instance variable declarations } - Instance method declarations + class method declarations @end Debug ค าสง Debug แบบงายๆ ใน Objective-C นน เราจะใช Command Line Dialog เพอ

แสดงคาทเราตองการ Debug ผาน Dialog เพอตรวจสอบคาทไดตรงกบความตองการหรอไม ตวอยางเชน

NSLog(@”%@ %i”,@”Hanaka”,1);

ปจจบนภาษาออบเจกทฟ-ซ ถกใชมากใน Cocoa (API) ในระบบปฏบตการ Mac Os X

โดยมภาษาออบเจกทฟ-ซ เปนภาษาหลก ปจจบน Mac Os X ใช Cocoa เปนเฟรมเวรกส าหรบสรางโปรแกรมประยกต โดยใชไลบรารและAPI เปนสวนเพมขยาย และใช เอกโคด (XCode) เปนเครองมอในการพฒนาแอปพลเคชนตางๆ

รปท2.5 iOS Framework [8]

15

จากรปท2.5 นนจะแสดงใหเหนถงสถาปตยกรรมของ iOS Framework วาแตละขนตอนท างานอยางไรจนมาถงขนสดทาย เมอคณเรมทเขยนซอฟแวร iOS โดยสวนใหญนกพฒนาจะใช Foundation และ UIKit Framework ซงเปนสงทนกพฒนาแอปพลชนตองการเพราะสามารถครอบคลมการพฒนาไดมาก

2.4 เครองมอทใชในการพฒนาภาษาออบเจกทฟ-ซ (XCode) เอกโคด (XCode) เปนเครองมอ (tools) อกหนงเครองมอจากหลายๆ เครองมอทจะเขามาชวยในการพฒนาแอปพลเคชนโดยใชภาษาออบเจกทฟ-ซนน ในการพฒนา เอกโคดนนยงสามารถโหลดไดฟรจาก Mac App Store [5]

รปท2.6 รป Icon X-Code

เมอเราเขาส XCode แลวนนจะเจอหนาตางแรกคอหนาตาง Welcome to Xcode ดงรปท5 จะเปนเหมอนหนาของเครองมอตางทวๆ ไปทจะสามารถสรางโปรเจคใหมหรอเปดโปรเจคทเคยพฒนาผานมาแลวผานทาง Recents

รปท2.7 หนาตางแรก Welcome to Xcode

16

ถาเราจะเรมโปรเจคใหมนนกดสามารถกดท Create a new Xcode project ไดเลยกจะปรากฏหนาตางดงรปท2.8 เพอใหเราเลอกใช Template กอนจะเขาสข นตอนตอไป (เลอก Single View Application)

รปท2.8 หนาตาง Template ส าหรบการสรางโปรเจค

มาสหนาจอการตงชอโปรเจคดงรปท2.9 อนดบแรกคอตงชอ เลอก Device วาจะพฒนา Device อะไร และกเลอก Use Storyboards และ Use Automatic Reference Counting

รปท2.9 หนาตางการตงชอโปรเจคและการเลอก Device เพอการพฒนา

17

เมอผานขนตอนตางๆจากขางบนเรากเขามาสหนาตาง MainStoryboard.storyboard มสวนประกอบทส าคญดงรปท2.10 เราสามารถแยกสวนประกอบส าคญไดดงตอไปน

รปท2.10 หนาตาง MainStoryboard.storyboard แยกตาม Area ตางๆ

1. Toolbar Area เปนพนททจะประกอบไปดวยสวนทใชงานบอยๆ เชน Run Stop, เปลยนแปลง Device ส าหรบการ Run, หนาจอแสดงผลของการคอมไพล, การสวตซหนาตางในสวนของ Editor และ View ดงรปท2.11

รปท2.11 Toolbar

2. Navigator Area จะประกอบไปดวย Navigator ตางๆ ดงรปท2.12 ทจะแสดงรายละเอยดในสวนของแตละ Navigator ดงตอไปน

รปท2.12 Navigator

18

- Project Navigator บอกขอมลเกยวกบไฟลตางๆทใชในโปรเจคของเรา เชน source code , header และ Framework ทใชในโปรเจคเปนตน

- Symbol Navigator ในสวนนจะบอกขอมลเกยวกบ class และ symbol ตางๆในโปรเจค

- Search Navigator ใชในการคนหาค าตางๆ และแสดงค าทเคยคนหากอนหนาน - Issue Navigator แสดงความผดพลาดตางๆ เชน error หรอ warning จากการ

คอมไพลโปรแกรม - Debug Navigator แสดง thread และตวแปรตางๆในการ debug ปกตเมอเรา

debug จะเปลยนมาใช navigator นโดยอตโนมต - Breakpoint Navigator บอกต าแหนงของ breakpoint ทไดวางในโปรเจค - Log Navigator แสดงรายงานของการคอมไพล

3. Editor Area เปนพนทส าหรบไวเขยนโปรแกรมหรอการออกแบบรปแบบหนาโดยผาน MailStoryboard.Storyboard ดงรปท2.13

รปท2.13 หนาตาง Editor

4. Utility Area เปนพนทส าหรบก าหนดคณสมบตตางๆ ของ Storyboard คณสมบตจะเปลยนไปตาม Storyboard หรอ Object ตางๆ ในสวนนจะบอกกอบไปดวย 2 สวนใหญๆ คอ

19

สวนทก าหนดคณสมบตตางๆ และ ในสวนของ Object ตางๆ ทจะใชใน Storyboard ดงรปท2.14

รปท2.14 หนาตางการก าหนดคณสมบตและObject ตางๆ

5. Debug Area จะแบงเปน 2 สวนส าคญ สวนท1 จะแสดงผลของการ Debug คาของตวแปรตางๆ ในสวนดานซาย Local และในสวนท2 จะแสดงผลของการ Run ขอมลในรปแบบ Log messages ในสวนของ All Output ดงรปท2.15

รปท2.15 หนาจอ Debug

20

หลงจากทไดทราบรายละเอยดตางๆ ของแตละ Area แลวเรากเขามาสเมนหลกทจะใชพฒนาแอปพลเคชน จะอยในสวนของ Navigator area --> Project Navigator ในสวนนจะแสดง File Structure ทงหมดในโปรเจค ดงรปท2.16

รปท2.16 Project Navigator ไฟลตางๆ ทแสดงใน Project Navigator ทจ าเปนจะตองรจก มอยดวยกน 4 ชนดคอ 1. Header File (.h) เปนไฟลไวส าหรบการประกาศคลาสและเมธอดและชอของไฟลมกจะเปน

ชอเดยวกบคลาส เชน ประกาศคลาส ViewContoller กจะม header file ชอ ViewContoller.h

2. Source File (.m) เปนไฟลทไวเขยนการท างานของคลาสมกจะมชอเหมอนคลาส เชน ViewContoller.m

3. Frameworks คอไลบรารทน ามาใชใน application เชน Framework ตางๆ ไดแกFoundation, Map, Audio ฯลฯ ทจะน าเขามาใชส าหรบโปรเจคนนๆ

4. Product คอผลลพธทไดจากการ Run โปรเจคมกจะเปน application หรอโปแกรม

21

รปท2.17 เบองหลงการท างานของ Xcode เราไดท าการรจกในสวนตางๆ ทส าคญของ Project Navigator แลวนนสวนทส าคญเมอเราไดท าการเขยนโปรแกรมเสรจคอการ Execute โปรแกรมทเราเขยนขนมาเพอตรวจเชคความถกตองของขอมลและรปแบบทเราไดจดไวน นตรงตามทเราตองการหรอไมผาน application ของ Xcode ทเรยกวา Simulator ไมวาจะเปน iPhone Simulator หรอ iPad Simulator หรอแมแตกระทงสามารถ Run บนอปกรณจรงๆ (อาจจะตอง Register เปนนกพฒนากอนและกตดตง Certification ลงใน Xcode เพอให Xcode รจกอปกรณกอน) เพอตรวจเชคแบบเหนภาพทชดเจน ดงตวอยางรปท2.18

รปท2.18 iPhone Simulator บน Xcode ทเสมอนจรง

22

รปท2.19 ขนตอนการ Build code into executables บน Simulatorและบนอปกรณจรง

2.5 เวบเซอรวส (Web Services) เวบเซอรวส (Web Service) เปนระบบซอฟตแวรทออกแบบมาเพอสนบสนนการท างานระหวางคอมพวเตอรผานระบบเครอขาย โดยใชภาษา เอกซเอมแอล (XML) เปนภาษาทใชในการอธบายการเรยกใชซอฟตแวรและการตดตอสอสาระหวางโปรแกรม เชนการตรวจสอบเงนฝาก การอานขาวตามแหลงตางๆ โดยใชเวบเซอรวสแบบ REST ในการพฒนา [6]

REST ซงยอมาจาก Representational State Transfer ซงเปนแนวคดในการพฒนา Web Service REST โดยมองเวบในฐานะทเปนแหลงขอมล (resources) ซงสามารถทจะจดการไดโดยวธการตาง ๆ ดงน

„ GET ส าหรบไดการน าเสนอ (representation) ของแหลงขอมล „ DELETE ส าหรบลบการน าเสนอ „ PUT ส าหรบการสรางและเปลยนแปลงการน าเสนอ เวบเซอรวสแบบ REST จะม URL ก ากบเพอบอกทอยของแหลงขอมล ผพฒนาเวบ

เซอรวสสามารถเลอกใช GET/DELETE/POST/PUT ซงแลวแตความแหมาะสมกบแอปพลเคชน

„ GET เหมาะส าหรบการดงขอมลออกมาด „ POST ส าหรบการแกไขแหลงขอมล โดยทผลของการเรยกเวบเซอรวสจะไดผลลพธมาอยในรปแบบของเอกสารในรปแบบของ

XML, JSON

23

รปท2.20 การท างานของ REST

ขอดของ REST คอผพฒนาเวบเซอรวสสามารถสรางและเรยกใชเวบเซอรวสไดงาย เพราะใชแค XML และ HTTP ขอดอยของ REST คอการตดตอขอขอมลจะเปนไดแบบประสานเวลา (synchronous) เทานน และการจดการความปลอดภยของขอมลเพมเตมจากในสวนของเวบเซรฟเวอร และการจดการขอมลทมความสลบซบซอนไดจากการเขยนโคดขนมาเอง

ตารางท2.3 REST Web Service HTTP Method Method ลกษณะการท างาน รปแบบ URL

GET เรยกขอมลมาแสดงแบบหลายรายการ http://xxxx.com/products/

เรยกขอมลมาแสดงแบบทละรายการ http://xxxx.com/products/12

POST สงขอมลจากฟอรมหรอโปรแกรม เพอเพมขอมล http://xxxx.com/products/

PUT สงขอมลจากฟอรมหรอโปรแกรม เพอแกไขขอมล http://xxxx.com/products/12

DELETE สงขอมลจากโปรแกรม เพอลบขอมล http://xxxxx.com/products/12

24

ตวอยางการท างานของเวบเซอรวสแบบ REST โดยใชเมธอด GET เวบเซอรวสแบบ REST โดยใชเมธอด GET จะมการรบพารามเตอรจาก URL ซงจะม

ทงโอเปอเรชนของเวบเซอรวส และคาตางๆทสงผานไปใหโอเปอเรชนนนๆ จากนนเวบเซอรวสจะสง REST กลบมาเปนไฟลในรปแบบของ XML, JSON รปแบบการสง REST Request

http://localhost/rest/BB.php?Operation=add&param1=66&param2=77

Operation=add จะเปนโอเปอเรชนของเวบเซอรวสทเราสรางขนในทนม 2 ตวคอ add และ subtract ในตวอยางเปนการเรยกใช Opearation=addparam1=66&param2=77 เปนพารามเตอรทเราตองใสเขาไปซงจากตวอยางจะพบวาตองมพารามเตอร 2 ตว ซงชอวา param1 และ param2 ผใชโปรแกรมพมพ request ตรงชองใส URL ของบราวเซอรเปน http://localhost/rest/Calc.php?Operation=add&param1=66&param2=77 หลงจากนนผใชจะไดผลลพธออกมาเปนไฟลในรปแบบของ XML, JSON ซงมเนอหาดงน

ไฟลรปแบบ XML

<?xml version="1.0"?>

<calculator>

<operation name="add">

<result>11</result>

</operation>

</calculator>

ไฟลรปแบบ JSON {"operation":"add","status":{"status":"000","detail":"Success"}, "result":{"calculator":"11"}}

25

2.6 PHP Language PHP มาจากค าวา PHP Hypertext Preprocessor หรอชอเดม Personal Home Page เปนภาษาสครปต (Script language) โดยเวลาจะใชงานตองอาศยตวแปลชดค าสง PHP เปนเครองมอทส าคญทเขามาชวยใหเราสามารถพฒนา HTML แบบ Dynamic ไดอยางมประสทธภาพโดยสามารถน าสครปตไปใสในสวนของ HTML ไดเลย เมอ HTML นนถกเรยกขนมา Web server จะท าการตรวจสอบสครปตของ PHP กอนแลวเอาผลลพธมารวมกบเนอหา ลกเลนของ HTML และท าการแสดงผล 2.7 HTML HTML ยอมาจาก Hypertext Markup Language โดยถกพฒนาขนเพอใชเปนภาษาส าหรบการเขยน Website เมอ World Wide Web เปนทแพรหลาย HTML จงถกน ามาใชเพอพฒนา Website ในปจจบน HTML พฒนามาถงเวอรชน 5.0 โดยเพม Feature หลายๆ อยางเพอใหเขากบยค Mobility โดยยงคงมาตราฐานทใชในการจดโครงสรางเหมอน HTML 4.01 และ XHTML 1.1 ตวอยางของภาษา HTML และ PHP

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test html</title> </head> <body> Display <?php echo "Hello, World!"; ?> </body> </html>

26

บทท 3 แนวคดและการออกแบบระบบ

หลกในการออกแบบ iMSIT นนไดน าแนวความคดการสอสารแบบบรณาการ (IMC: Integrated Marketing Communication) เขามาชวยในการเชอมโยงขอมลและการสอสารในเชงบรณาการเพอใหเกดกจกรรมหลากหลายรปแบบ เพอใชในการประชาสมพนธขอมลขาวสาร การไดเหน การสมผส และไดน าทฤษฎ UML (Unified Modeling Language) มาใชในการออกแบบระบบ iMSIT โดยมการออกแบบแผนภาพการท างานแบบ System context model ทเปนภาพรวมของระบบหลกทงหมดและระบบยอยโดยแยกตามหลก Use case diagram และอธบายกระบวนการท างานของแตละ Use case ตามหลก Sequence diagram และขยายความแตละ Sequence ดวยหลก Class diagram และใชเวบเซอรวส (Restful API) ชวยในการสงคาหรอรบคาจากฐานขอมล 3.1 การออกแบบแผนภาพการท างาน (Use Case Diagram)

3.1.1 System context model

รปท3.1 System context model ระบบ iMSIT

27

ค าอธบาย System context model ระบบ iMSIT Actor Member หมายถงนกศกษามหาวทยาลยเทคโนโลยมหานคร Guest หมายถงบคคลภายนอกทวไป

Staff หมายถงเจาหนาทคณะวทยาการและเทคโนโลยสารสนเทศ มหาวทยาลยเทคโนโลยมหานครผท าหนาทอพเดทขอมล

iMSIT System คอระบบแสดงขอมลขาวสารตางๆ ของคณะวทยาการและเทคโนโลยสารสนเทศ มหาวทยาลยเทคโนโลย บนอปกรณเคลอนท (Mobile Device) ของระบบปฎบตการ iOS โดยขอมลตางๆ ตามทผใชงานรองขอนน ค ารองขอจะถกสงไปรองขอผานทาง Web Service บน MSIT System และจะสงคาทรองขอกลบไปแสดงผลยงอปกรณเคลอนท (Mobile Device) ตางๆ

MSIT System คอเครองแมขายของทางคณะวทยาการและเทคโนโลยสารสนเทศ มหาวทยาลยเทคโนโลย ทเปนฐานขอมลส าหรบเกบขอมลตางๆ ของคณะวทยาการและเทคโนโลยสารสนเทศ มหาวทยาลยเทคโนโลย โดยระบบ MSIT System จะรอรบการรองขอมลจาก iMSIT System ผานทาง Web Service เพอท าการ Query หรอ บนทกขอมลตามทรองขอตาม Web Service นนๆ และท าการสงขอมลกลบไปยง iMSIT System

Apple Notification (APNs) คอระบบสงขอความแจงเตอนไปยงบนอปกรณเคลอนท (Mobile Device) บนระบบปฏบตการ iOS เมอ Staff ไดเพมขาวใหมเขาสระบบและท าการแจงเตอนใหกบผใชงานไดรบทราบถงขาวสารไดทนท

28

3.1.2 Use Case Diagram คอแผนภาพทใชอธบาย System context model โดยแตกยอยแตละ Use case วาม

การอางองสวนการท างานใดของระบบเขามาใชในแอปพลเคชน iMSIT บาง ดงรปท3.2

รปท3.2 Use Case Diagram and Actors ของระบบ iMSIT โดยละเอยด

Use Case 3.1.2.1 Use Case: Login ค าอธบาย Use case Login ท าหนาทตรวจสอบสถานะผใชงานวาเปน Member หรอ Guest โดยจะ

ไดสทธใชงานเมนไมเทากน เมอ Login เรยบรอยระบบจะสราง Token และ Device ID (ไดมาจาก Apple Notification Center) และรบขอมลพนฐานของผใชงานจาก MSIT System ผานทาง Restful API เมอผล Login ส าเรจ ดงแสดงในรปท3.3

29

รปท3.3 Use Case Login

3.1.2.2 Use Case: View Course ค าอธบาย Use case View Course คอเมนขอมลหลกสตรตางๆ ของทางคณะคณะวทยาการและเทคโนโลยสารสนเทศ มหาวทยาลยเทคโนโลยมหานคร ซงจะประกอบไปดวย ขอมลหลกสตรระดบปรญญาเอก, ขอมลหลกสตรระดบปรญญาโท โดยแยกยอยออกเปนเมนตางๆ ดงน

1. เมน Ph.D IT คอขอมลหลกสตรระดบปรญญาเอก 2. เมน MISS คอขอมลหลกสตรระดบปรญญาโท สาขาความมนคงทางระบบสารสนเทศ โดยแบงออกเปน 2 แผนการศกษาไดแก แผน ก. (เนนท าวจย), แผน ข. (เนนท าโครงงาน) 3. เมน MSNE คอขอมลหลกสตรระดบปรญญาโท สาขาวศวกรรมเครอขาย โดยแบงออกเปน 2 แผนการศกษาไดแก แผน ก. (เนนท าวจย), แผน ข. (เนนท าโครงงาน) 4. เมน MSIT IT Management คอขอมลหลกสตรระดบปรญญาโท แขนงการจดการเทคโนโลยสารสนเทศ แผน ข. (เนนท าโครงงาน) 5. เมน MSIT Network and System Administration คอขอมลหลกสตรระดบปรญญาโท แขนงการบรหารเครอขายและระบบ แผน ข. (เนนท าโครงงาน) 6. เมน MSIT Software Development and Quality Assurance คอขอมลหลกสตรระดบปรญญาโท แขนงการพฒนาและประกนคณภาพซอฟตแวร แผน ข. (เนนท าโครงงาน) 7. เมน MSIT Mobile Technology คอขอมลหลกสตรระดบปรญญาโท แขนงเทคโนโลยบนอปกรณเคลอนท แผน ข. (เนนท าโครงงาน) ซง Member และ Guest ทผานการ Login แลวกจะสามารถเขาดขอมลหลกสตรตางๆ ได ดงแสดงในรปท3.4

30

รปท3.4 Use Case View Course

3.1.2.3 Use Case: Feed News ค าอธบาย Use case

Feed News คอเมนขอมลขาวคณะและประกาศกจกรรมตางๆ ของคณะวทยาการและเทคโนโลยสารสนเทศ ซงจะประกอบไปดวยขอมลขอมลขาวคณะและประกาศกจกรรม ซง Member และ Guest ทผานการ Login แลวกจะสามารถเขาดขอมลขาวคณะและประกาศกจกรรม ได ดงแสดงในรปท3.5

รปท3.5 Use Case Feed News

31

3.1.2.4 Use Case: Feed Knowledge ค าอธบาย Use case Feed Knowledge คอเมนคลงความร ของคณะวทยาการและเทคโนโลยสารสนเทศ ซงจะประกอบไปดวยเมนตางๆ ดงน

1. Hardware 2. OS 3. Networking 4. Database 5. Programming 6. Web Development 7. It Management 8. Network & Information 9. IT Application 10. Tips & Tricks 11. SAP 12. Internet Application 13. Network & System Tools 14. New Idea

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

รปท3.6 Use Case Feed Knowledge

32

3.1.2.5 Use Case: Feed Webboard ค าอธบาย Use case Feed Webboard คอเมนกระดานถามตอบ ของคณะวทยาการและเทคโนโลยสารสนเทศ ซงจะประกอบไปดวยเมนตางๆ ดงน

1. ถามตอบทวไปเรองการรบสมคร 2. ถามตอบเรองเรยน 3. คยเรอง IT 4. เฮฮาตามประสา MSMUT 5. ประกาศรบสมครงาน 6. หลกสตรความมนคงทางระบบสารสนเทศ (MISS) 7. หลกสตรอบรม 8. หลกสตรวทยาศาสตรมหาบณฑตสาขาวศวกรรมเครอขาย 9. Board Ph.D

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

รปท3.7 Use Case Feed Webboard

33

3.1.2.6 Use Case: Feed Instructor ค าอธบาย Use case Feed Instructor คอเมนทแสดงรายชอคณาจารยผสอนของคณะวทยาการและเทคโนโลยสารสนเทศ ทงหมดและยงสามารถดขอมลประวตของผสอนและสามารถสงขอความอเมลถงผสอนไดทนท เมอ Member และ Guest ท าการ Login เขาสระบบเรยบรอยแลว ดงแสดงในรปท3.8

รปท3.8 Use Case Feed Instructor

3.1.2.7 Use Case: View Cost ค าอธบาย Use case View Cost คอเมนทแสดงประมาณการคาใชจายในการศกษาตอระดบปรญญาเอกและปรญญาโทของทกสาขาในคณะวทยาการและเทคโนโลยสารสนเทศ เมอ Member และ Guest ท าการ Login เขาสระบบเรยบรอยแลว ดงแสดงในรปท3.9

รปท3.9 Use Case View Cost

34

3.1.2.8 Use Case: View FAQ ค าอธบาย Use case View FAQ คอเมนค าถามทพบบอยเกยวกบการศกษาตอในระดบปรญญาเอกและปรญญาโทโดยทางคณะวทยาการและเทคโนโลยสารสนเทศ ไดท าการรวบรวมไวเพองายตอการตดสนใจ เมอ Member และ Guest ท าการ Login เขาสระบบเรยบรอยแลว ดงแสดงในรปท3.10

รปท3.10 Use Case View FAQ

3.1.2.9 Use Case: View Admission ค าอธบาย Use case

View Admission คอเมนการสมครศกษาตอโดยจะมแผนผงการศกษาตอใหทราบถงขอมลและยงสามารถสมครศกษาตอไดทนทเมอสนใจ เมอ Member และ Guest ท าการ Login เขาสระบบเรยบรอยแลว ดงแสดงในรปท3.11

รปท3.11 Use Case View Admission

35

3.1.2.10 Use Case: Change Password ค ำอธบำย Use case Change Password คอเมนการเปลยนรหสผานโดยเมนนจะแสดงส าหรบ Member เทานน เมอ Member และ Guest ท าการ Login เขาสระบบเรยบรอยแลว ดงแสดงในรปท3.12

รปท3.12 Use Case Change Password

3.1.2.11 Use Case: Logout ค าอธบาย Use case Logout คอเมนการออกจากระบบเมอท าการ Logout แลวและระบบจะไมท าการ Auto Login เมอเขาสโปรแกรมใหมและจะไมสามารถรบ Notification เมอมการแจงเตอนขาวคณะและขาวประกาศกจกรรมใหมเขามา เนองจากระบบจะท าการลบขอมล Token และ Device ID ออกจากระบบ ดงแสดงในรปท3.13

รปท3.13 Use Case Logout

36

3.1.2.12 Notification Notification คอการแจงเตอนขาวคณะและขาวประกาศกจกรรมททาง Staff เพมเขามาในระบบ และกดสง Notification เพอแจงไปยงผใชงาน iMSIT และผทจะไดรบ Notification นนจะตองไมท าการ Logout ออกจากระบบ ดงแสดงในรปท3.14

รปท3.14 Notification 3.2 Activity Diagram

จากการวเคราะหระบบ iMSIT ตามแตละ Use Case ตามหวขอท3.1.2 นน สามารถแบง Activity Diagram ไดดงน

3.2.1 ระบบ Login ระบบ Login เมอ Member หรอ Guest เขามาใชระบบ iMSIT แลว Apple Notification

Center จะท าการสงคา Token (Device ID) มาในระบบ iMSIT เมอจะท าการเขาสระบบ Member จะตองกดปม Member เพอท าการกรอกขอมล Username และ Password ส าหรบการ Login เพอแสดงสถานะการเปนนกศกษาและในสวนของ Guest นนสามารถกดปม Guest ระบบจะท าการสราง Username และ Password ใหอตโนมต ระบบจะท าการเชคคาวางของ Username และ Password เมอท าการใสขอมลเรยบรอยแลวระบบจะสงคาไปยง MSIT System เพอท าการเชคสทธในการเขาใชงานเมอ Login เรยบรอยระบบจะสงขอมลพนฐานและ Token ของผใชงานนนๆ กลบมายงระบบ iMSIT เพอน าไปแสดงผลและเชคสทธการใชงานในเมนตางๆ ตอไป ดงรปท3.15 Activity Diagram ระบบ Login

37

รปท3.15 Activity Diagram ระบบ Login

3.2.2 ระบบ View Course เมอ Member หรอ Guest ท าการ Login เรยบรอยและได Token เมอเขาสระบบ View Course ระบบจะท าการตรวจสอบสทธการ Login โดยเชค Token และสงคารองขอไปยง MSIT System กอนทจะแสดงขอมลหลกสตรตางๆ ของคณะวทยาการและเทคโนโลยสารสนเทศ มหาวทยาลยเทคโนโลยมหานคร เมอเขาไปหลกสตรนนๆ ระบบจะโชวรายละเอยดขอมลหลกสตรหรอพบกบเมนแผนการศกษาเมอเขาไปในแผนการศกษาทเราตองการ ระบบจะโชวขอมลรายละเอยดขอมลหลกสตรตามแผนการศกษาทเราตองการทราบ ดงรปท3.16 Activity Diagram ระบบ View Course

รปท3.16 Activity Diagram ระบบ View Course

38

3.2.3 ระบบ Feed News เมอ Member หรอ Guest ท าการ Login เรยบรอยและได Token เมอเขาสระบบ Feed News ระบบจะท าการตรวจสอบสทธการ Login โดยเชค Token และสงคารองขอไปยง MSIT System กอนทจะแสดงขอมลขาวคณะหรอขาวประกาศกจกรรมโดยระบบจะมเครองหมาย New เมอเปนขาวใหมและยงไมไดท าการอาน เมอกดเขาไปอานรายละเอยดของขาวระบบจะคาการอานและเครองหมาย New จะหายไป และระบบจะอพเดทคาการเขาอาน ดงรปท3.17 Activity Diagram ระบบ Feed News

รปท3.17 Activity Diagram ระบบ Feed News

3.2.4 ระบบ Feed Knowledge เมอ Member หรอ Guest ท าการ Login เรยบรอยและได Token เมอเขาสระบบ Feed

Knowledge ระบบจะท าการตรวจสอบสทธการ Login โดยเชค Token และสงคารองขอไปยง MSIT System กอนทจะแสดงขอมลโดยจะหมวดหมและเลขรายการทยงไมไดท าการอานเมอเขาไปสดานในของแตหมวดหมจะปรากฎหวขอคลงความรตางๆ ในหมวดหมนนๆ ทท าการเลอก ระบบจะใสรป unread เพอแสดงวาหวขอคลงความรนนๆ ยงไมไดท าการอาน ในหนานจะสามารถท าการคนหาโดยใสคยเวรดเพอท าการคนหาชอหวขอคลงความรทเราตองการไดเมอตองการอานหวขอคลงความร ระบบจะท าการแสดงผลเนอหาของหวขอคลงความรโดยอพเดทคาการเยยมชมและคาการอานไปยง Server โดยในเนอหานนสามารถโพสตสอบถามหรอตอบค าถามเมอท าการโพสต ระบบจะโชว Popup ค าถามเพอตรวจสอบถาใสขอมลไดถกตองระบบจะท าการสงคาพรอม Token ไปบนทกยง Server แตถาไมถกตองระบบจะใหตอบค าถามใหม ดงรปท3.18 Activity Diagram ระบบ Feed Knowledge

39

รปท3.18 Activity Diagram ระบบ Feed Knowledge

3.2.5 ระบบ Feed Webboard เมอ Member หรอ Guest ท าการ Login เรยบรอยและได Token เมอเขาสระบบ Feed Webboard ระบบจะท าการตรวจสอบสทธการ Login โดยเชค Token และสงคารองขอไปยง MSIT System กอนทจะแสดงขอมลโดยจะหมวดหมและเลขรายการทยงไมไดท าการอานเมอเขาไปสดานในของแตหมวดหมจะปรากฎหวขอกระดานขาวตางๆ ในหมวดหมนนๆ ทท าการเลอก ระบบจะใสรป unread เพอแสดงวาหวขอกระดานขาวนนๆ ยงไมไดท าการอาน ในหนานจะสามารถท าการคนหาโดยใสคยเวรดเพอท าการคนหาชอหวขอกระดานขาวทเราตองการไดและยงสามารถโพสตหวขอกระดานขาวใหมไดเมอท าการโพสต ระบบจะโชว Popup ค าถามเพอตรวจสอบถาใสขอมลไดถกตองระบบจะท าการสงคาพรอม Token ไปบนทกยง Server แตถาไมถกตองระบบจะใหตอบค าถามใหม และเมอตองการอานหวขอกระดานขาว ระบบจะท าการแสดงผลเนอหาของหวขอกระดานขาวโดยอพเดทคาการเยยมชมและคาการอานไปยง Server โดยในเนอหานนสามารถโพสตสอบถามหรอตอบค าถามเมอท าการโพสต ระบบจะโชว Popup ค าถามเพอตรวจสอบถาใสขอมลไดถกตองระบบจะท าการสงคาพรอม Token ไปบนทกยง Server แตถาไมถกตองระบบจะใหตอบค าถามใหม ดงรปท3.1.9 Activity Diagram ระบบ Feed Webboard

40

รปท3.19 Activity Diagram ระบบ Feed Webboard

3.2.6 ระบบ View Instructor เมอ Member หรอ Guest ท าการ Login เรยบรอยและได Token เมอเขาสระบบ View Instructor ระบบจะท าการตรวจสอบสทธการ Login โดยเชค Token และสงคารองขอไปยง MSIT System กอนทจะแสดงขอมลคณาจารยทงหมดของคณะวทยาการและเทคโนโลยสารสนเทศ โดยสามารถกดเขาไปดประวตตางๆ ของคณาจารยแตละทานและยงสามารถสงอเมลไปสอบถามเรองตางๆ กบคณาจารยไดทนท ดงรปท3.20 Activity Diagram ระบบ View Instructor

รปท3.20 Activity Diagram ระบบ View Instructor

41

3.2.7 ระบบ View Cost เมอ Member หรอ Guest ท าการ Login เรยบรอยและได Token เมอเขาสระบบ View Cost ระบบจะท าการตรวจสอบสทธการ Login โดยเชค Token และสงคารองขอไปยง MSIT System กอนทจะแสดงขอมลการประมาณการคาใชจายหลกสตรทเปดสอนทงหมดของคณะวทยาการและเทคโนโลยสารสนเทศ ดงรปท3.21 Activity Diagram ระบบ View Cost

รปท3.21 Activity Diagram ระบบ View Cost

3.2.8 ระบบ View FAQ เมอ Member หรอ Guest ท าการ Login เรยบรอยและได Token เมอเขาสระบบ View FAQ ระบบจะท าการตรวจสอบสทธการ Login โดยเชค Token และสงคารองขอไปยง MSIT System กอนทจะแสดงขอมลทพบบอยเกยวกบการศกษาตอในระดบปรญญาเอกและปรญญาโทของคณะวทยาการและเทคโนโลยสารสนเทศ ดงรปท3.22 Activity Diagram ระบบ View FAQ

รปท3.22 Activity Diagram ระบบ View FAQ

42

3.2.9 ระบบ View Admission เมอ Member หรอ Guest ท าการ Login เรยบรอยและได Token เมอเขาสระบบ View Admission ระบบจะท าการตรวจสอบสทธการ Login โดยเชค Token กอนทจะแสดงผงการสมครศกษาตอตอในระดบปรญญาเอกและปรญญาโทและสามารถสมครศกษาตอไดทนท ดงรปท3.23 Activity Diagram ระบบ View Admission

รปท3.23 Activity Diagram ระบบ View Admission

3.2.10 ระบบ Change Password เมอ Member หรอ Guest ท าการ Login เรยบรอยและได Token เมอเขาสระบบ Change Password ระบบจะท าการตรวจสอบสทธการ Login โดยเชค Token กอนทและจะเชคสทธวาเปน Member หรอไมถาใชจะแสดงเมน Setting ถาไมใชจะไมแสดงเมน Setting เมน Setting เปนเมนส าหรบเปลยนแปลงรหสผานเมอท าการใสรหสผานเกาและรหสผานใหมเรยบรอยระบบสงคาไปยง MSIT System เพอตรวจเชครหสผานเกานนถกตองหรอไม ถาถกตองระบบจะท าการเปลยนรหสผานใหมและจะสงคากลบมาแสดงใหทราบวาไดท าการเปลยนรหสผานใหมเรยบรอยแลวและระบบจะท าการ Logout และใหท าการ Login ดวยรหสผานใหม ดงรปท3.24 Activity Diagram ระบบ Change Password

43

รปท3.24 Activity Diagram ระบบ Change Password

3.2.11 ระบบ Logout เมอ Member หรอ Guest ท าการ Login เรยบรอยและได Token เมอเขาสระบบ Logout ระบบจะท าการตรวจสอบสทธการ Login โดยเชค Token เมอกดปม Logout แลวระบบจะแสดง Popup เพอยนยนการ Logout เมอท าการ Logout ระบบจะสงคาไปยง MSIT System เพอลบคา Token, Device Id ออกจากระบบ ดงรปท3.25 Activity Diagram ระบบ Logout

รปท3.25 Activity Diagram ระบบ Logout

44

3.2.12 ระบบ Notification เมอ Staff ท าการกดปมสง Notification แลวนนระบบจะท าการตรวจเชคขอมลขาวใหม ถาไมมขาวใหมระบบจะหยดท างาน แตเมอพบขาวใหมแลวระบบจะท าการตรวจเชค Device Id ของผใชงานทอยในระบบทงหมดเพอท าการจดสงหวขอขาวใหมไปยง Apple Notification Center เพอท าการสง Notification ไปยงอปกรณเคลอนท (Mobile Device) ทใชงานแอปพลเคชน iMSIT ดงรปท3.26 Activity Diagram ระบบ Notification

รปท3.26 Activity Diagram ระบบ Notification

45

3.3 แผนภาพคลาสและความสมพนธ (Class Diagram) จากแผนภาพ Sequence Diagram สามารถอธบายแผนโดยรวม (Conceptual Class Diagram) ของระบบ iMSIT ไดดงน

รปท3.27 Conceptual Class Diagram ของระบบ iMSIT

46

3.3.1 Class Login ประกอบไปดวย

รปท3.28 Class Login Attribute ประกอบดวย 1. mem_id ส าหรบโชวขอมลรหสนกศกษาและผเยยมชม

2. username ส าหรบโชวรหสผใช

3. name ส าหรบโชวขอมลชอ

4. email ส าหรบโชวขอมลอเมล

5. cat_type ส าหรบโชวขอมลรหสสถานะ

6. cat_name ส าหรบโชวขอมลชอสถานะ

7. token_id ส าหรบโชวขอมล Key ส าหรบการ Login

8. device_id ส าหรบโชวขอมล Token Notification

9. data_login ส าหรบโชวขอมลวนทการ Login

10. createdate ส าหรบโชวขอมลวนทบนทก

11. status ส าหรบโชวรหสสถานะการเรยกขอมล

12. detail ส าหรบโชวรายละเอยดสถานะการเรยกขอมล

47

Operation ประกอบดวย 1. getmethod ส าหรบรบคา Restful API

2. username ส าหรบรบคา username

3. password ส าหรบรบคา password

4. device_id ส าหรบรบคา token apple notification

5. flag ส าหรบรบคาเชคเปน member or guest

3.3.2 Class getiNews ประกอบไปดวย

รปท3.29 Class getiNews

Attribute ประกอบดวย 1. no ส าหรบโชวขอมลรหสการโพสต

2. subject ส าหรบโชวขอมลหวขอ

3. name ส าหรบโชวขอมลรายชอ

4. note ส าหรบโชวขอมลเนอหา

5. date_order ส าหรบโชวขอมลวนทบนทกขอมลลาสด

6. sdate_order ส าหรบแปลงขอมล date_order

48

7. isread ส าหรบโชวขอมลขาวทยงไมไดท าการอาน

8. category ส าหรบโชวขอมลรหสหมวดหม

9. cat_name ส าหรบโชวขอมลชอหมวดหม




2. account_id ส าหรบรบคารหสผใชงาน

3. start_id ส าหรบรบคาวนท

4. token_id ส าหรบรบคาเพอท าการตรวจสอบการ Login

3.3.3 Class getiSectionBoardMenu ประกอบไปดวย

รปท3.30 Class getiSectionBoardMenu

Attribute ประกอบดวย 1. no ส าหรบเรยงล าดบเมน

2. type ส าหรบไวแยกประเภท

3. title ส าหรบโชวหวขอหมวดหม

4. total ส าหรบโชวจ านวน Record ทงหมด

49

5. cat_id ส าหรบโชวรหสหมวดหม

6. unread ส าหรบโชวจ านวนขอมลทยงไมไดท าการอาน





3.3.4 Class getiSectionKnowMenu ประกอบไปดวย

รปท3.31 Class getiSectionKnowMenu

Attribute ประกอบดวย 1. no ส าหรบเรยงล าดบเมน

2. type ส าหรบไวแยกประเภท

3. title ส าหรบโชวหวขอหมวดหม

4. total ส าหรบโชวจ านวน Record ทงหมด

5. cat_id ส าหรบโชวรหสหมวดหม

6. unread ส าหรบโชวจ านวนขอมลทยงไมไดท าการอาน


50




3.3.5 Class getiKnowWeb ประกอบไปดวย

รปท3.32 Class getiKnowWeb Attribute ประกอบดวย 1. no ส าหรบโชวรหสการโพสต

2. date ส าหรบโชวขอมลวนท

3. time ส าหรบโชวขอมลเวลา

4. date_entered ส าหรบโชวขอมลวนทบนทก

5. isread ส าหรบโชวปม unread

6. date_order ส าหรบเรยงขอมลวนทตอบลาสด

7. subject ส าหรบโชวหวขอ Topic

51

8. name ส าหรบโชวชอผโพสต

9. vis ส าหรบโชวจ านวนผเยยมชม

10. reply ส าหรบโชวจ านวนผตอบค าถาม

11. stutus ส าหรบโชวรหสสถานะการเรยกขอมล




3. start_id ส าหรบรบคาวนท


5. cat_id ส าหรบรบคาหมวดหม

6. i_keyword ส าหรบรบคาคนหาขอมล

7. page ส าหรบรบคาหนาเมน

8. rows ส าหรบรบคาบรรทดในแตละเมน

3.3.6 Class ishow ประกอบไปดวย

รปท3.33 Class ishow

52

Attribute ประกอบดวย 1. no ส าหรบโชวรหสการโพสต

2. subject ส าหรบโชวหวขอ Topic

3. name ส าหรบโชวชอผโพสต

4. date_order ส าหรบเรยงขอมลวนทตอบลาสด

5. note ส าหรบโชวเนอหาของ Topic

6. ano_order ส าหรบโชวรหสการตอบ

7. adate_entered ส าหรบบนทกวนทตอบ

8. anote ส าหรบโชวขอมลการตอบ

9. aname ส าหรบโชวชอผตอบ

Operation ประกอบดวย 1. qid ส าหรบรบคารหสหวขอขาว

3.3.7 Class getiInstructor ประกอบไปดวย

รปท3.34 Class getiInstructor Attribute ประกอบดวย 1. no ส าหรบโชวเลขท running number

2. mem_ordernum ส าหรบโชวเลขล าดบการเรยง

53

3. name ส าหรบโชวชอคณาจารย

4. mem_position ส าหรบโชวต าแหนงคณาจารย

5. mem_email ส าหรบโชวอเมล

6. picture ส าหรบโชวรปภาพ






3.3.8 Class ihistory ประกอบไปดวย

รปท3.35 Class ihistory

Attribute ประกอบดวย 1. mem_prename ส าหรบโชวค าน าหนาชอ

2. mem_name ส าหรบโชวชอคณาจารย

3. mem_position ส าหรบโชวต าแหนงคณาจารย

4. memdetailcat_name ส าหรบโชวหวขอประวต

5. memdetail_text ส าหรบโชวเนอหาประวต

54

Operation ประกอบดวย 1. qid ส าหรบรบคารหสคณาจารย

3.3.9 Class iCourse ประกอบไปดวย

รปท3.36 Class iCourse

Attribute ประกอบดวย 1. msubcat_name ส าหรบโชวหวขอเมน

2. msubcat_detail ส าหรบโชวรายละเอยดขอมล

Operation ประกอบดวย 1. qid ส าหรบรบคารหสหวขอ

2. sqid ส าหรบรบคารหสหวขอยอย

3.3.10 Class ChangePass ประกอบไปดวย

รปท3.37 Class ChangePass

Attribute ประกอบดวย 1. status ส าหรบโชวรหสสถานะการเรยกขอมล


55




4. oldpass ส าหรบรบคา password เดม

5. newpass ส าหรบรบคา password ใหม

3.3.11 Class logout ประกอบไปดวย

รปท3.38 Class logout




2. mem_id ส าหรบรบคารหสผใชงาน


56

3.3.12 Class postiUpdateVis ประกอบไปดวย

รปท3.39 Class postiUpdateVis





3. qid_t ส าหรบรบคารหส Topic

3.3.13 Class postiTop ประกอบไปดวย

รปท3.40 Class postiTop



57



3. topic ส าหรบรบคา Topic

4. note_t ส าหรบรบคาเนอหา

5. name_t ส าหรบรบคาชอผโพสต

6. email_t ส าหรบรบคาอเมล

7. catid ส าหรบรบคารหสหมวดหม

8. token_id ส าหรบรบคาตรวจสอบการ Login

3.3.14 Class postiWeb ประกอบไปดวย

รปท3.41 Class postiWeb Attribute ประกอบดวย 1. status ส าหรบโชวรหสสถานะการเรยกขอมล




3. note_t ส าหรบรบคาเนอหา

58

4. name_t ส าหรบรบคาชอผโพสต

5. email_t ส าหรบรบคาอเมล

6. catid ส าหรบรบคารหสหมวดหม

7. token_id ส าหรบรบคาตรวจสอบการ Login

8. qid ส าหรบรบคารหส Topic

3.4 Sequence Diagram Sequence Diagram จะอธบายถงกระบวนการท างานของแอปพลเคชน iMSIT จะแบงออกเปนแตละ Use Case โดยอางอง Use Case จากขอ3.1.2 และ Activity Diagram จากขอ3.2 แลวใช Sequence Diagram เปนตวอธบายการท างานอยางละเอยดตงแตเรมเขาใชงานจนกระทงสนสดการไดขอมลทจะน ามาแสดงบนแอปพลเคชน iMSIT ตอไปน

3.4.1 Login

ระบบ Login เมอผใชงานเขาสระบบ iMSIT นนจะพบกบหนา Login เมอกดปมMember ระบบจะถกจ ากดตองเปนนกศกษาและจ าเปนตองม Username และ Password ส าหรบใชในการเขาระบบ แตถากดปม Guest ระบบจะท าการสราง Username และ Password ใหอตโนมตโดยมขอมล token ทไดมาจาก Apple notification center (APNs) ทง Member และ Guest สงรวมไปกบขอมลตางๆ ไปบนทกยง Server และสงขอมลของพนกงานกลบมาสระบบและระบบจะท าการเกบขอมลทไดจากการ Login เพอใชกบเมนอนๆ ตอไป ดงแสดงในรปท3.42

รปท3.42 Sequence Diagram ระบบ Login

59

3.4.2 View Course ระบบ View Course เปนระบบทแสดงขอมลหลกสตรตางๆ ของคณะวทยาการและเทคโนโลยสารสนเทศ มหาวทยาลยเทคโนโลยสารสนเทศ โดยเมอผานการ Login หนาแรกของระบบ iMSIT จะเขาสเมน iHOME คอเมนของขอมลหลกสตรเมอตองการดขอมลหลกสตรจะตรวจสอบขอมล เมอตรวจสอบเรยบรอย ระบบจะท าการรองขอไปยงหลกสตรและสงคากลบไปแสดงผลใหผใชงานไดทราบถงขอมล ดงแสดงในรปท3.43

รปท3.43 Sequence Diagram ระบบ View Course

3.4.3 Feed News ระบบ Feed News คอระบบทแสดงขอมลขาวคณะและประกาศกจกรรมเมอผใชงานท าการ Login เขาสระบบเรยบรอยแลวกดปมเมน News ระบบจะท าการรองขอขอมลจาก เมอท าการตรวจสอบเรยบรอย ระบบจะท าการสงขอมลขาวคณะและขาวประกาศกจกรรมกลบมาแสดงผล เมอผใชงานเขาสเนอหาของขาวนนๆ ระบบจะท าการตรวจสอบขอมล เมอตรวจสอบเรยบรอย ระบบจะท าการสงคาการเขาอานไปอพเดทแลวกท าการรองขอมลรายละเอยดขาวเพอมาแสดงผล ดงแสดงในรปท3.44

60

รปท3.44 Sequence Diagram ระบบ Feed News

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

61

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

รปท3.45 Sequence Diagram ระบบ Feed Knowledge

62

3.4.5 Feed Webboard ระบบ Feed Webboard คอระบบทแสดงขอมลกระดานถามตอบเมอผใชงานท าการ Login เขาสระบบเรยบรอยแลวกดปมเมน Webboard ระบบจะท าการรองขอขอมลหมวดหม และตรวจสอบขอมลการอานของแตละหมวดหม เมอท าการตรวจสอบเรยบรอย ระบบจะท าการสงขอมลหมวดหมกระดานถามตอบกลบมาแสดงผล เมอผใชงานเขาสหมวดหมของแตละหมวดหมระบบจะท าการรองขอขอมลหวขอกระดานถามตอบของหมวดหมนนๆ และท าการตรวจสอบขอมลการอาน เมอท าการตรวจสอบเรยบรอย ระบบจะท าการสงขอมลหวขอกระดานถามตอบกลบมาแสดงผล หนาของหวขอกระดานถามตอบ ผใชงานสามารถเพมหวขอโพสตขอความใหมไดโดยกดปมโพสตและท าการกรอกขอมลเมอกดปมโพสต ระบบจะท าการ Random ค าถามเพอใหตอบกอนโพสตเมอตอบค าถามเรยบรอยระบบสงขอมลการโพสต ระบบจะท าการตรวจสอบขอมล เมอตรวจสอบเรยบรอยจะท าการสงขอมลการโพสตไปบนทก พรอมกบสงคาสถานะการโพสตเพอแสดงผล เมอผใชงานเขาไปอานเนอหาของหวขอกระดานถามตอบนนๆ ระบบจะท าการตรวจสอบขอมลโดยสงคาการเขาอานไปอพเดทขอมลการอาน เมอตรวจสอบเรยบรอย ระบบจะท าการรองขอมลรายละเอยดหวขอระบบจะท าการเพมคาการเยยมชมและรองขอมลการตอบ เพอรวมมาพรอมกบขอมลรายละเอยดหวขอกระดานถามตอบนนๆ เพอมาแสดงผล หนาของรายละเอยดของหวขอผใชงานสามารถโพสตขอความตอบค าถามหรอถามขอสงสยไดโดยกดปมโพสตและท าการกรอกขอมลเมอกดปมโพสต ระบบจะท าการ Random ค าถามเพอใหตอบกอนโพสตเมอตอบค าถามเรยบรอยระบบสงขอมลการโพสต ระบบจะท าการตรวจสอบขอมล เมอตรวจสอบเรยบรอยระบจะท าการสงขอมลการโพสตไปบนทก และสงคาการโพสตไปยงหวขอกระดานถามตอบนนๆ พรอมกบสงคาสถานะการโพสตเพอแสดงผล ดงแสดงในรปท3.46

63

รปท3.46 Sequence Diagram ระบบ Feed Webboard

64

3.4.6 View Instructor ระบบ View Instructor คอระบบทแสดงขอมลกระดานถามตอบเมอผใชงานท าการ Login เขาสระบบเรยบรอยแลวกดปมเมน Instructor ระบบจะท าการรองขอขอมลคณาจารย ระบบจะท าการตรวจสอบขอมล เมอตรวจสอบเรยบรอย ระบบจะท าการสงขอมลขอมลรายละเอยดของคณาจารยมาแสดงผล เมอเลอกคณาจารยระบบจะท าการรองขอรายละเอยดประวตคณาจารย เมอระบบท าการตรวจสอบเรยบรอย ระบบจะท าการสงขอมลรายละเอยดประวตคณาจารย เมอตองการสงอเมลสามารถกดปมอเมลระบบจะท าการแสดงผล อเมลคณาจารย, และชอคณาจารยแสดงบนฟอรมอเมลของระบบ iOS ดงแสดงในรปท3.47

รปท3.47 Sequence Diagram ระบบ View Instructor

65

3.4.7 View Cost ระบบ View Cost คอระบบทแสดงขอมลกระดานถามตอบเมอผใชงานท าการ Login เขาสระบบเรยบรอยแลวกดปมเมน Cost ระบบจะท าการรองขอขอมลประมาณการณคาใชจายของแตละหลกสตร ระบบจะท าการตรวจสอบขอมล เมอตรวจสอบเรยบรอย ระบบจะท าการสงขอมลขอมลประมาณการณคาใชจายของแตละหลกสตรมาแสดงผล ดงแสดงในรปท3.48

รปท3.48 Sequence Diagram ระบบ View Cost

3.4.8 View FAQ ระบบ View FAQ คอระบบทแสดงขอมลกระดานถามตอบเมอผใชงานท าการ Login เขาสระบบเรยบรอยแลวกดปมเมน FAQ ระบบจะท าการรองขอขอมลค าถามทพบบอย ระบบจะท าการตรวจสอบขอมล เมอตรวจสอบเรยบรอย ระบบจะท าการสงขอมลขอมลค าถามทพบบอยมาแสดงผล ดงแสดงในรปท3.49

66

รปท3.49 Sequence Diagram ระบบ View FAQ 3.4.9 View Admission

ระบบ View Admission คอระบบทแสดงขอมลกระดานถามตอบเมอผใชงานท าการ Login เขาสระบบเรยบรอยแลวกดปมเมน Admission ระบบจะท าการรองขอขอมลสมครศกษาตอ ระบบจะท าการตรวจสอบขอมล เมอตรวจสอบเรยบรอย ระบบจะท าการลงคหนาสมครศกษาตอมาแสดงผล ดงแสดงในรปท3.50

รปท3.50 Sequence Diagram ระบบ View Admission

67

3.4.10 Change Password ระบบ Change Password คอระบบทแสดงขอมลกระดานถามตอบเมอผใชงานท าการ Login เขาสระบบเรยบรอยแลวกดปมเมน Setting ระบบจะท าการรองขอขอมลการเปลยนรหสผาน ระบบจะท าการตรวจสอบขอมล เมอตรวจสอบเรยบรอย ระบบจะแสดงหนาเปลยนรหสผานมาแสดงผล ดงแสดงในรปท3.51

รปท3.51 Sequence Diagram ระบบ Change Password

3.4.11 Logout ระบบ Logout คอระบบทแสดงขอมลกระดานถามตอบเมอผใชงานท าการ Login เขาสระบบเรยบรอยแลวกดปมเมน Logout ระบบจะท าการรองขอขอมลออกจากระบบ ระบบจะท าการตรวจสอบขอมล เมอตรวจสอบเรยบรอย ระบบจะท าการลบขอมล token, device id ออกจากระบบและสงขอมลการ Logout มาแสดงผล ดงแสดงในรปท3.52

68

รปท3.52 Sequence Diagram ระบบ Logout 3.4.12 Notification

ระบบ Logout คอระบบทแสดงขอมลกระดานถามตอบเมอผใชงานท าการ Login เขาสระบบเรยบรอยแลวกดปมเมน Logout ระบบจะท าการรองขอขอมลออกจากระบบ ระบบจะท าการตรวจสอบขอมล เมอตรวจสอบเรยบรอย ระบบจะท าการลบขอมล token, device id ออกจากระบบและสงขอมลการ Logout มาแสดงผล ดงแสดงในรปท3.53

รปท3.53 Sequence Diagram ระบบ Notification

69

บทท 4 การพฒนาและผลการด าเนนงาน

4.1 เครองมอและอปกรณทใชในการพฒนาระบบ อปกรณทใชในการพฒนาแอปพลเคชน ระบบฐานขอมล และเวบเซอรวส ในสวนแอปพลเคชนไดพฒนามาจากภาษา Objective-C โดยพฒนาผานโปรแกรม Xcode ในการพฒนาแอปพลเคชน สวนระบบฐานขอมลทใชพฒนาระบบใชโปรแกรม AppServe เพอจ าลองขอมลในการแสดงผลผานแอปพลเคชน และในสวนของการพฒนาเวบเซอรวสนน ภาษาทน ามาใชในการพฒนาคอ HTML และ PHP เพอเปนตวกลางในการเชอมระหวางแอปพลเคชนและฐานขอมล อยางทกลาวไวในบทท 2 บทนจงขอน าเสนอหนาจอการท างานของแอปพลเคชนหลงจากถกพฒนาขนเรยบรอยตามขอบเขตทไดก าหนดไวในบทท 1 4.1.1 Hardware - เครอง MacBook Air 1 เครอง (ใชส าหรบการพฒนาแอปพลเคชน) - เครอง PC 1 เครอง (ใชส าหรบจ าลองฐานขอมลและพฒนาเวบเซอรวส) - โทรศพทเคลอนท iPhone 4 และ iPad mini ระบบปฏบตการ iOS7 (ใชส าหรบทดสอบบนอปกรณ) 4.1.2 Software - Mac Os X Mountain Lion (ระบบปฏบตการของ Mac OS) - Xcode5.0 (โปรแกรมส าหรบการออกแบบและพฒนาแอปพลเคชน) - Notepad++ (ส าหรบส าหรบพฒนาเวบเซอรวสและHTML) - AppServe 2.5.10 (ส าหรบการจ าลองเปน Database Server) - NaviCat for MySQL (ส าหรบการจดการ Database)

70

4.2 ผลการด าเนนงานพฒนาแอปพลเคชน iMSIT 4.2.1 ไอคอนของแอปพลเคชน ไอคอนโปรแกรมแอปพลเคชนบน iPhone ของแอปพลเคชน iMSIT จะมไอคอนเปนรปภาพสเหลยมจตรสขนาด 120x120 พกเซล ใชเปนไอคอนแสดงถงแอปพลเคชน iMSIT ดงรป4.1

รปท4.1 ไอคอนแอปพลเคชน iMSIT

4.2.2 หนาจอ Splash Screen บนแอปพลเคชน iMSIT หนาจอ Splash Screen คอหนา Intro กอนเขาใชงานแอปพลเคชน iMSIT ดงรป4.2

รปท4.2 หนาจอ Splash Screen

71

4.2.3 หนาจอเขาระบบ Login บนแอปพลเคชน iMSIT จากรปท4.2 เมอผานหนาจอ Splash Screen ระบบจะเขาสหนาหนาจอเขาระบบ Login โดยอตโนมต เพอใหนกศกษาหรอบคคลภายนอกไดใชงานแอปพลเคชน iMSIT ตามความตองการ

รปท4.3 หนาจอระบสถานะ รปท4.4 หนาจอ Member Login

รปท4.5 หนาจอ Login ไมส าเรจ รปท4.6 หนาจอ Status ไม Active

72

อธบายการท างาน จากรปท4.3 หนาจอระบสถานะ เพอเปนการแสดงสทธวาเปนนกศกษาหรอบคคลภายนอก เมอกดปม Member จะเขาสหนาจอ Member Login ดงแสดงในรปท4.4 เมอนกศกษาใสขอมล และ Login เขาระบบเรยบรอย ระบบจะเขาสระบบ iMSIT โดยระบบจะท าการโชวขอมลเมนส าหรบ Member แตถาเปนบคคลภายนอกกสามารถกดปม Guest ระบบจะท าการสรางขอมลตางๆ และท าการ Login ใหอตโนมตโดยระบบจะท าการโชวเมนส าหรบ Guest รปท4.5 หมายถงการ Login ไมส าเรจเนองจาก username หรอ password ไมถกตอง และรปท4.6 คอนกศกษาอาจจะลาออกหรอไมไดศกษาตอสถานะเลยไม Active เพมเตม เมอผใชงานยงไมไดกด Logout ออกจากระบบเมอเขาใชงานใหมระบบจะท าการเขาสระบบใหอตโนมต

4.2.4 หนาจอระบบ iMSIT บนแอปพลเคชน iMSIT จากรปท4.3 และรปท4.4 เมอผานขนตอนดงกลาวเรยบรอยกจะเขาสระบบ iMSIT ดง

รปท 4.7

รปท4.7 หนาจอระบบ iMSIT รปท4.8 หนาจอระบบ iMSIT อธบายการท างาน จากรปท4.7 และ รปท4.8 หนาจอระบบ iMSIT เมอเขาสระบบ iMSIT จะพบกบแถบยนดตอนรบ และเมนตางๆของแอปพลเคชน iMSIT ไดแก เมน iHome(ขอมลหลกสตร), News(ขาวกจกรรมและขาวคณะ), Knowledge(คลงความร), Webboard(กระดานถามตอบ), More(เมนทนอกเหนอจากทกลาวไปแลว ดงแสดงในรปท4.8) เชน Instructor(คณาจารย), Cost(การประมาณคาใชจาย), Setting(ส าหรบเปลยน Password ส าหรบ

73

Member), FAQ(ค าถามทพบบอย), Admission(การรบสมครนกศกษา), Contact Us(ขอมลตดตอมหาลย), About(ส าหรบแสดงเวอรชนและการแกไขปรบเปลยนในเวอรชนใหม), Logout(การออกจากระบบ)

4.2.5 หนาจอระบบ iHome บนแอปพลเคชน iMSIT

จากรปท4.3 และรปท4.4 เมอผานขนตอนดงกลาวเรยบรอยกจะเขาสระบบ iMSIT เมนแรกทจะไดพบคอเมน iHome เมนนจะรวบรวมขอมลหลกสตรตางๆ ของทางคณะทเปดท าการสอนดงรปท4.9

รปท4.9 หนาจอเมน iHome รปท4.10 หนาจอเมนแผนการศกษา

74

รปท4.11 หนาจอขอมลหลกสตร รปท4.12 หนาจอแผนการศกษา

อธบายการท างาน จากรปท4.9 รปท4.10 รปท4.11 รปท4.12 จะเปนการท างานของแตละขนตอนเมอตองการดขอมลหลกสตรใดหลกสตรหนงกสามารถกดทปมหลกสตรทสนใจเชน Ph.D เมอกดปม PHDIT จากหนาเมน iHome ดงแสดงในรปท4.9 กจะเขาสเมนแผนการศกษา ดงแสดงในรปท4.10 เราสามารถทจะกดปมแผนการศกษาเพอดขอมลหลกสตร ดงแสดงในรปท 4.11 หรอจะกดปมแผน ก. เพอดขอมลแผนการศกษาทสนใจ ดงแสดงในรปท4.12 เพมเตม แตละหลกสตรอาจจะมแผนการศกษาไมเหมอนกนระบบจะท าการแสดงผลตามแผนการศกษา

75

4.2.6 หนาจอระบบ News บนแอปพลเคชน iMSIT จากรปท4.3 และรปท4.4 เมอผานขนตอนดงกลาวเรยบรอยกจะเขาสระบบ

iMSIT เมอกดเมน News ระบบจะท าการแสดงขอมลของขาว ดงรปท4.13

รปท4.13 หนาจอเมน News รปท4.14 หนาจอแสดงรายละเอยดของขาว อธบายการท างาน จากรปท4.13 รปท4.14 ระบบไดเขาสเมน News โดยเมนนจะท าการรวบรวมขาวของคณะและขาวกจกรรมรวมไวดวยกน เมอมขาวใหมทยงไมไดท าการอานจะมรป NEW ปรากฎ และตวเลขจ านวนขาวทยงไมไดอานโชวบนเมน News ดงแสดงในรปท4.13 เมอท าการอานขาวแลวรป NEW จะหายไปและตวเลขจะลดลงไปตามจ านวนทเขาไปอานขาว

76

4.2.7 หนาจอระบบ Knowledge บนแอปพลเคชน iMSIT จากรปท4.3 และรปท4.4 เมอผานขนตอนดงกลาวเรยบรอยกจะเขาสระบบ iMSIT เมอกดเมน Knowledge ระบบจะท าการแสดงขอมลของคลงความรโดยแบงตามหมวดหม ดงรปท4.15

รปท4.15 หนาจอเมน Knowledge รปท4.16 หนาจอแสดงหวขอเรองแตละหมวดหม

รปท4.17 หนาจอแสดงรายละเอยด รปท4.18 หนาจอโพสตถาม-ตอบ

77

รปท4.19 หนาจอ Popup กอนโพสตขอมล อธบายการท างาน จากรปท4.15 เมอเขาสเมน Knowledge จะพบกบหมวดหมทสนใจ และยงมตวเลขแสดงเมอมหวขอเรองใหมทเขามาแลวยงไมไดท าการอาน เมอเขาไปสแตละหมวดหมจะพบกบหวขอเรอง ดงแสดงในรปท4.16 ในหนานจะโชวจด Unread เพอแสดงวาหวขอเรองทมจดนนยงเปนหวขอใหมทยงไมไดอานและยงสามารถคนหาขอมลตามหวขอเรอง เมอเขาไปสรายละเอยดของแตละหวขอเรอง ดงแสดงในรปท4.17 จะโชวขอมลของรายละเอยด และยงสามารถโพสตสอบถามหรอตอบค าถามไดอกดวย ดงแสดงในรปท4.18 เมอกดปม Post จะม Popup ใหตอบค าถามเมอตอบค าถามไดถกตองระบบจะท าการโพสตขอมลดงแสดงในรปท4.19

78

4.2.8 หนาจอระบบ Webboard บนแอปพลเคชน iMSIT จากรปท4.3 และรปท4.4 เมอผานขนตอนดงกลาวเรยบรอยกจะเขาสระบบ iMSIT เมอ

กดเมน Webboard ระบบจะท าการแสดงขอมลของกระดานถามตอบโดยแบงตามหมวดหม ดงรปท4.20

รปท4.20 หนาจอเมน Webboard รปท4.21 หนาจอแสดงหวขอเรองแตละหมวดหม

รปท4.22 หนาจอโพสตหวขอค าถาม รปท4.23 หนาจอแสดงรายละเอยด

79

อธบายการท างาน จากรปท4.20 เมอเขาสเมน Webboard จะพบกบหมวดหมทสนใจ และยงมตวเลขแสดงเมอมหวขอค าถามใหมทเขามาแลวยงไมไดท าการอาน เมอเขาไปสแตละหมวดหมจะพบกบหวขอเรอง ดงแสดงในรปท4.21 ในหนานจะโชวจด Unread เพอแสดงวาหวขอเรองทมจดนนยงเปนหวขอค าถามใหมทยงไมไดอาน ยงสามารถคนหาขอมลตามหวขอเรองและยงสามารถโพสตหวขอค าถามใหมเพมเตมได ดงแสดงในรปท4.22 เมอเขาไปสรายละเอยดของแตละหวขอเรอง ดงแสดงในรปท4.23 จะโชวขอมลของรายละเอยด และยงสามารถโพสตสอบถามหรอตอบค าถามไดอกดวยเหมอนในรปท4.18 เมอกดปม Post จะม Popup ใหตอบค าถามเมอตอบค าถามไดถกตองระบบจะท าการโพสตขอมล ดงแสดงในรปท 4.19

4.2.9 หนาจอเมน More บนแอปพลเคชน iMSIT จากรปท4.3 และรปท4.4 เมอผานขนตอนดงกลาวเรยบรอยกจะเขาสระบบ iMSIT เมอกดเมน More ระบบจะโชวเมนทไมไดแสดงบนแถบเมนดานลาง ดงรปท4.24

รปท4.24 หนาจอเมน More อธบายการท างาน จากรปท4.24 เมอเขาสเมน More จะพบกบเมนเพมเตมจากแถบเมนดานลางโดยเมน Setting จะปรากฎในการ Login แบบ Member และท าการซอนเมอท าการเขาระบบดวย Guest

80

4.2.10 หนาจอเมน Instructor บนแอปพลเคชน iMSIT เมอผานขนตอนจากรปท4.24 เรยบรอยกจะพบกบเมนตางๆ เพมเตมเมอกดเมน

Instructor ระบบจะโชวขอมลของคณาจารยทงหมดของ MSIT MUT ดงรปท4.25

รปท4.25 หนาจอเมน Instructor รปท4.26 หนาจอประวตคณาจารย อธบายการท างาน จากรปท4.25 เมอเขาสเมน Instructor จะพบรายชอคณาจารยผสอน เมอกดไปยงแถบคณาจารยผสอนแตละทานจะแสดงขอมลประวตสวนตวของคณาจารยและยงสามารถสง Email ไปหาอาจารยแตทานไดทนทเมอมค าถามหรอขอสงสย

81

4.2.11 หนาจอเมน Cost บนแอปพลเคชน iMSIT เมอผานขนตอนจากรปท4.24 เรยบรอยกจะพบกบเมนตางๆ เพมเตมเมอกดเมน Cost ระบบจะโชวขอมลรายละเอยดประมาณการคาใชจายของแตละหลกสตร ดงรปท4.27

รปท4.27 หนาจอเมน Cost อธบายการท างาน จากรปท4.27 เมอเขาสเมน Cost กจะพบขอมลรายละเอยดประมาณการคาใชจายของแตละหลกสตร

82

4.2.12 หนาจอเมน FAQ บนแอปพลเคชน iMSIT เมอผานขนตอนจากรปท4.24 เรยบรอยกจะพบกบเมนตางๆ เพมเตมเมอกดเมน FAQ

ระบบจะโชวขอมลรายละเอยดค าถามทพบบอย ดงรปท4.28

รปท4.28 หนาจอเมน FAQ อธบายการท างาน จากรปท4.28 เมอเขาสเมน FAQ จะพบขอมลรายละเอยดค าถามทพบบอย

83

4.2.13 หนาจอเมน Admission บนแอปพลเคชน iMSIT เมอผานขนตอนจากรปท4.24 เรยบรอยกจะพบกบเมนตางๆ เพมเตมเมอกดเมน Admission ระบบจะโชวแผนผงการสมครศกษาตอ ดงรปท4.29

รปท4.29 หนาจอเมน Admission รปท4.30 หนาจอเมนกรอกรายละเอยดการสมคร อธบายการท างาน จากรปท4.29 เมอเขาสเมน Admission จะพบแผนผงการสมครศกษาตอ เมอตองการสมครศกษาตอสามารถกดปม สมครไดทนทโดยระบบจะ Link ไปยงระบบรบสมครนกศกษาใหมทนท ดงแสดงในรปท4.30

84

4.2.14 หนาจอเมน Contact Us บนแอปพลเคชน iMSIT เมอผานขนตอนจากรปท4.24 เรยบรอยกจะพบกบเมนตางๆ เพมเตมเมอกดเมน

Contact Us ระบบจะโชวขอมลสถานทต ง เบอรโทรศพทตดตอ แผนท ดงรปท4.31

รปท4.31 หนาจอเมน Contact Us รปท4.32 หนาจอแผนท MSIT อธบายการท างาน จากรปท4.31 เมอเขาสเมน Contact Us จะพบขอมลสถานทตง เบอรโทรศพทตดตอ แผนท ดงแสดงในรปภาพท4.31 เมอกดไปยงรปแผนท ระบบจะโชว Map MSIT และยงสามารถสามารถเปลยนโหมดการดดงแสดงในรปท4.32

85

4.2.15 หนาจอเมน Setting บนแอปพลเคชน iMSIT เมอผานขนตอนจากรปท4.24 เรยบรอยกจะพบกบเมนตางๆ เพมเตมเมอกดเมน Setting จะพบหนาจอส าหรบการเปลยน password ดงรปท4.33

รปท4.33 หนาจอเมน Setting อธบายการท างาน จากรปท4.33 เมอเขาสเมน จะพบหนาจอส าหรบการเปลยน password โดยสามารถกดปม Show password เมอตองการตรวจวาขอมลนนถกตองหรอไม

86

4.2.16 หนาจอเมน About บนแอปพลเคชน iMSIT เมอผานขนตอนจากรปท4.24 เรยบรอยกจะพบกบเมนตางๆ เพมเตมเมอกดเมน

About ระบบจะโชวขอมลรายละเอยดของเวอรชนและรายละเอยดในการปรบปรง ดงรปท4.34

รปท4.34 หนาจอเมน About อธบายการท างาน จากรปท4.34 เมอเขาสเมน About จะพบขอมลขอมลรายละเอยดของเวอรชนและรายละเอยดในการปรบปรง

87

4.2.17 หนาจอเมน Logout บนแอปพลเคชน iMSIT เมอผานขนตอนจากรปท4.24 เรยบรอยกจะพบกบเมนตางๆ เพมเตมเมอกดเมน Logout ระบบท าการ Logout ออกจากระบบ ดงรปท4.35

รปท4.35 หนาจอเมน Logout อธบายการท างาน จากรปท4.35 เมอเขาสเมน Logout ระบบท าการ Logout ออกจากระบบ และจะกลบไปยงหนาจอระบบ Login ดงแสดงในรปท4.3

88

4.2.17 หนาจอ Notification บนแอปพลเคชน iMSIT จากรปท4.3 และรปท4.4 เมอผานขนตอนดงกลาวเรยบรอยกจะเขาสระบบ iMSIT เมอ

เราพกแอปพลเคชนและยงไมไดท าการ Logout ออกจากระบบเมอมประกาศขาวคณะหรอประกาศกจกรรมใหมระบบจะท าการสง Notification มายงอปกรณของผใชงาน ดงรปท4.36 และรปท4.37

รปท4.36 หนาจอ iMSIT Notification รปท4.37 หนาจอ iMSIT Notification อธบายการท างาน จากรปท4.36 และรปท4.37 เมอเขาสระบบ iMSIT และท าการเขาระบบทย งไมท าการ Logout เมอมขาวคณะหรอขาวประกาศกจกรรมใหม ระบบจะท าการสง Notification แจงมายงผใชงาน

89

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

5.1 สรปผลโครงการ จากการด าเนนการพฒนาระบบ iMSIT ผพฒนาสามารถสรปผลการด าเนนโครงงานในการพฒนาระบบ iMSIT ภายใตขอบเขตการด าเนนงานทไดระบไวในหวขอ1.4 โดยผลการสรปทางผพฒนาสามารถพฒนาระบบ iMSIT ไดตามขอบเขตทระบไวในหวขอ1.4 โดยในการพฒนานน ผพฒนาไดพบปญหาและอปสรรคระหวางด าเนนโครงงานและวธแกปญหาของ เพอใหระบบ iMSIT พฒนาไดตามขอบเขตทระบไวในหวขอ1.4 สดทายนกลาวถงปญหาและอปสรรคจากการพฒนาโครงงาน วธการแกปญหาและขอเสนอแนะเพอเปนแนวทางส าหรบผทสนใจน าโครงการนไปพฒนาตอในอนาคต ดงน 5.2 ปญหาและอปสรรคจากการพฒนาโครงงาน 1. เนองจากผพฒนาไมเคยเรยนรเกยวกบเวบเซอรวสมากอน ผพฒนาจงตองท าการศกษาขนตอนการพฒนาซงท าใหเสยเวลากบขนตอนนไปพอสมควร 2. Xcode ทใชในการพฒนาแอปพลเคชนปรบเปลยนจากเวอรชน4 เปนเวอรชน5 ท าใหตองเสยเวลาในการอพเดทและแกไขโคตใหมเพอใหสามารถใชงานไดกบ Xcode5 ได 3. เน องจากการพฒนาแอปพลเคชนบนระบบปฏบตการ iOS ท าใหผใชงาน ระบบปฏบตการ Android ไมสามารถใชงานแอปพลเคชนได 4. การออกแบบกราฟฟคคอนขางมปญหากบผพฒนาเนองจากไมมความรทางดานนมากนก 5. ระบบ Notification นนเปนการท างานทซบซอนหลายขนตอนและไมมหนงสอหรอบทความทเปนภาษาไทยใหศกษา ตองใชความสามารถในการเรยนรและพฒนาอยางมาก 6. การพฒนาแอปพลเคชนคอนขางซบซอนและพฒนาบนฐานขอมลทมอยในปจจบนซงยงขาด Table ในการเกบขอมลหรอ Field ใน Table เพอเกบขอมลเพมเตม

90

5.3 วธแกปญหาจากการพฒนาโครงงาน 1. เพม Table log_read ในฐานขอมลเพอเกบขอมล Unread ดงรปท5.1

รปท5.1 Table Log_read

2. เพม Fileds ใน Table board_member ดงรปท5.2

รปท5.2 การเพม Field ใน Table board_member

91

3. เพม Field ส าหรบการสง Push Notification ใน Table board_data ดงรปท5.3

รปท5.3 การเพม Field ใน Table board_data

4. เพมขอมล ผเยยมชม ใน Table board_catmember และ board_membergroup ดงรปท5.4

รปท5.4 การเพม ขอมลใน Table board_catmember และ board_membergroup

92

5. ฐานขอมลตอง Set เปน UTF-8 Unicode ดงรปท5.5

รปท5.5 การ Set คา Database Properties 5.4 ขอเสนอแนะ 1. รวบรวมขอเสนอแนะและความคดเหนตางๆ จากผใชงานเพอน าไปปรบปรงหรอตอยอดกบฟงกชนอนๆเพอใหแอปพลเคชนตรงความตองการของผใชงานและมประสทธภาพ 2. พฒนาระบบใหสามารถใชงานบนระบบปฏบตการ Android 3. พฒนาระบบใหสามารถดการเรยนการสอนแบบ Live Streaming ได หรอสามารถดแบบ On Demand ได 4. พฒนาใหสามารถอานสารนพนธและวทยานพนธและสามารถโหลดเกบไวอานภายหลงได

93

เอกสารอางอง

[1] สาระดด.คอม, “การประชาสมพนธและการสงเสรมการขายโดยใชแนวคดการสอสารแบบบรณาการ”, http://www.sara-dd.com, Retrieved Aug 2013, Available: http://www.sara-dd.com/index.php?option=com_content& view=article&id=84:imc-integrated-marketing-ommunication&catid=25:the-project&Itemid=72

[2] โครงการชลประทานเพชรบรณ ส านกชลประทานท10 กรมชลประทาน กระทรวงเกษตรและสหกรณ, “แนวคดการใชเทคโนโลยชวยการเรยนร”, http://ridceo.rid.go.th/petboon , Retrieved Aug 2013, Available: http://ridceo.rid.go.th/petboon/km/04/04.php

[3] ดร.บรรจง หะรงษและนางญาณวรรณ สนธภญโญ, “แนะน า UML เบองตน”, Nectec Technical Journal หนา 184-198, Vol.1 No.5 November-December 1999, Available: http://sathit.dusit.ac.th/wp-content/uploads/2011/ 06/uml_nectac.pdf

[4] นางสาวจตราวรรณ พฤกษไพศาลและนายธนวฒน พลสวรรณ, ” โปรแกรมชวยแมดแลสขภาพทารกและเดกบน iOS”, คณะวศวกรรมศาสตร ภาควชาวศวกรรมคอมพวเตอร มหาวทยาลยขอนแกน

[5] macfeteria by TeR, ” Objective-C Book”, http://macfeteria.com/, Retrieved Aug 2013, Available: http://macfeteria.com/tutorial/

[6] macfeteria by TeR, ” Objective-C 2.0 Programming : Property”, http://macfeteria.com/, Retrieved Aug 2013, Available: http://macfeteria.com/2008/10/22/objective-c-programming-property/

[7] กานดา รณนะพงศา พงษศกด ฮนตระกล ชยวฒน บตรไชยและภานวฒน คามวลย ”แนวทางในการทดสอบฟงกชนการท างานของเวบเซอรวสแบบ REST”, คณะวศวกรรมศาสตร ภาควชาวศวกรรมคอมพวเตอร มหาวทยาลยขอนแกน

[8] http://www.howzhi.com/files/course/2012/04/18/14175536521e770789.png

msit แอปพลิเคชั่นบนอุปกรณ์เคลื่อนที่...

Documents