แอปพลิเคชันค้นหาร้านกาแฟ...

แอปพลเคชนคนหารานกาแฟ RaanNaiDee

นายวชยยนร ศรอดฮาด 5604800015 นายชชวาลย โมกขะรตน 5604800023

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

มหาวทยาลยสยาม ปการศกษา 2561

ก

หวขอภาคนพนธ แอปพลเคชนคนหารานกาแฟ รานไหนด หนวยกตของภาคนพนธ 3 หนวยกต รายชอคณะผจดท า นาย วชยยนร ศรอดฮาด 5604800015

นาย ชชวาลย โมกขะรตน 5604800023 อาจารยทปรกษา อาจารยเอก บ ารงศร ระดบการศกษา วทยาศาสตรบณฑต ภาควชา วทยาการคอมพวเตอร ปการศกษา 2561

บทคดยอ

วตถประสงคในการท าภาคนพนธเพอพฒนาแอปพลเคชนในการคนหารานกาแฟ รานไหนด โดยผจดท าไดมองเหนปญหาของกลมผนยมดมกาแฟทตองการเขาถงขอมลรานไดสะดวกมากขน จงไดเนนพฒนาแอปพลเคชนใหสะดวกตอการใชงาน และยงสามารถใชเปนสอกลางในการโปร โมทรานกาแฟดวย ระบบการท างานถกแบงออกเปนเวบแอปพลเคชนส าหรบผดแลระบบใชในการจดการหรอปรบปรงแกไขมลของรานคาทงหมด สวนของรานคาใชในการปรบปรงหรอแกไขขอมลของรานตวเองผานเวบแอปพลเคชนเชนกน และสดทายสวนทใชในการแสดงผลเปนโมบายแอปพลเคชนบนแพลตฟอรม Android ส าหรบผใชงานทวไป สามารถคนหารานกาแฟไดจากบรเวณทตนเองอยหรอคนหาจากการระบชอจงหวด สามารถเลอกดขอมลรายละเอยดหรอสนคาของรานกาแฟทตองการได มระบบการใหคะแนนรานคาโดยผใชตองเขาสระบบกอนจงจะสามารถใหคะแนนรานได การพฒนารระบบถกแบงออกเปน Back-End System พฒนาดวยภาษา PHP และ SQL เปนเวบแอปพลเคชนใชในการปรบปรงแกไขขอมลของรานกาแฟ และ Front-End System พฒนาดวยภาษา Java ท างานบนแพลตฟอรม Android มการน า Android SDK และ Google Maps API มาประยกตใช ซงหลงจากการพฒนาแอปพลเคชนนขนพบวาผใชสามารถเขาใชงานแอปพลเคชนไดโดยงาย และยงสามารถใชคนหาขอมลรานกาแฟไดจรง

ค าส าคญ: โมบายแอปพลเคชน, เวบแอปพลเคชน, คนหารานกาแฟ

ค

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

(Acknowledgment)

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

1. อาจารยเอก บ ารงศร อาจารยทปรกษา

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

คณะผจดท า

นายวชยยนร ศรอดฮาด นายชชวาลย โมกขะรตน

สารบญ หนา

บทคดยอ............................................................................................................................................ก Abstract.............................................................................................................................................ข กตตกรรมประกาศ.............................................................................................................................ค

บทท 1 บทน า 1.1 ทมาของการพฒนา...............................................................................................................1 1.2 วตถประสงค........................................................................................................................1 1.3 ขอบเขตภาคนพนธ..............................................................................................................1 1.4 ขนตอนและวธการด าเนนงาน..............................................................................................2 1.5 ประโยชนทไดรบ.................................................................................................................3 1.6 ระยะเวลาด าเนนภาคนพนธ.................................................................................................4 1.7 อปกรณและเครองมอทใชในการพฒนาระบบ....................................................................4 1.8 อปกรณและเครองมอทรบรองระบบ...................................................................................5

บทท 2 การทบทวนวรรณกรรมและแนวคดทเกยวของ 2.1 Web Application….............................................................................................................6 2.2 Mobile Application……….................................................................................................7 2.3 Bootstrap…………….........................................................................................................7 2.4 PHP...............…………......................................................................................................8 2.5 Javascript................…………............................................................................................8 2.6 MySQL…………..................………….............................................................................9 2.7 Google Maps API……............………..............................................................................10

บทท 3 การวเคราะหระบบงาน 3.1 รายละเอยดของภาคนพนธ................................................................................................12 3.2 แสดงฟงกชนการท างานของระบบดวย Use Case Diagram..............................................13 3.3 Use Case Description…………………………………....................................................14 3.4 Sequence Diagram............................................................................................................28 3.5 Class Diagram…………………………………………….…………………..................36

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

3.6 แผนภาพแสดงความสมพนธระหวางเอนทต (Entity Relationship Diagram)…................37 3.7 พจนานกรมขอมล (Data Dictionary)….............................................................................38

บทท 4 การออกแบบทางกายภาพ 4.1 การออกแบบสวนตดตอผใช (User Interface Design)...................................................... 42

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

5.1 สรปผลภาคนพนธ ............................................................................................................. 61 5.2 ขอดของระบบ.................................................................................................................... 61 5.3 ขอจ ากดของระบบ ............................................................................................................. 61 5.4 ขอเสนอแนะ ...................................................................................................................... 62

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

สารบญตาราง

หนา

ตารางท 1.1 ตารางแสดงระยะเวลาด าเนนงานภาคนพนธ................................................................4 ตารางท 3.1 รายระเอยดของ Use Case : Login on website..............................................................14 ตารางท 3.2 รายระเอยดของ Use Case : Manage Coffee Shop Detail.............................................15 ตารางท 3.3 รายระเอยดของ Use Case : Manage Product...............................................................16 ตารางท 3.4 รายระเอยดของ Use Case : Register on website..........................................................17 ตารางท 3.5 รายระเอยดของ Use Case : Mark Coffee Shop Location...........................................18 ตารางท 3.6 รายระเอยดของ Use Case : Upload Coffee Shop Image..............................................19

ตารางท 3.7 Use Case : Show Coffee Shop on map.........................................................................20 ตารางท 3.8 ตารางท 3.8 รายระเอยดของ Use Case : Search Coffee Shop.......................................21 ตารางท 3.9 รายระเอยดของ Use Case : View Coffee Shop............................................................22 ตารางท 3.10 รายระเอยดของ Use Case : View Coffee Shop Image...............................................23 ตารางท 3.11 รายระเอยดของ Use Case : View Product.................................................................24 ตารางท 3.12 รายระเอยดของ Use Case : Login by Facebook.........................................................25 ตารางท 3.13 รายระเอยดของ Use Case : Vote................................................................................26 ตารางท 3.14 รายระเอยดของ Use Case : Navigate to the Coffee Shop...........................................27

ตารางท 3.15 รายละเอยดของรายละเอยดของตารางขอมล ztb_user..............................................38

ตารางท 3.16 รายละเอยดของรายละเอยดของตารางขอมล ztb_location........................................39

ตารางท 3.17 รายละเอยดของรายละเอยดของตารางขอมล ztb_province.......................................40

ตารางท 3.18 รายละเอยดของรายละเอยดของตารางขอมล ztb_multipicture.................................40

ตารางท 3.19 รายละเอยดของรายละเอยดของตารางขอมล ztb_product.........................................40

ตารางท 3.20 รายละเอยดของรายละเอยดของตารางขอมล ztb_vote..............................................41

ตารางท 3.21 รายละเอยดของรายละเอยดของตารางขอมล zms_votetype......................................41

สารบญรปภาพ

หนา

รปท 3.1 Use Case Diagram ของแอปพลเคชนรานไหน.............................................….................6 รปท 3.2 Sequence Diagram : Register on website.........................................................................28 รปท 3.3 Sequence Diagram : Login on website.............................................................................29 รปท 3.4 Sequence Diagram : Manage Coffee Shop Detail............................................................30 รปท 3.5 Sequence Diagram : Manage Product………...................................................................30 รปท 3.6 Sequence Diagram : Mark Coffee Shop...........................................................................31 รปท 3.7 Sequence Diagram : Upload Image Coffee Shop.............................................................31 รปท 3.8 Sequence Diagram : Show Coffee Shop on map…..........................................................32 รปท 3.9 Sequence Diagram : View Coffee Shop...........................................................................32 รปท 3.10 Sequence Diagram : View Coffee Shop Image..............................................................33 รปท 3.11 Sequence Diagram : View Product.................................................................................33 รปท 3.12 Sequence Diagram : Login by Facebook........................................................................34 รปท 3.13 Sequence Diagram : Vote...............................................................................................34 รปท 3.14 Sequence Diagram : Navigate to the Coffee Shop………............................................35 รปท 3.15 Class Diagram ของแอปพลเคชนคนรานไหนด.............................................................36 รปท 3.16 Entity Relationship Diagram ของแอปพลเคชนคนรานไหนด.......................................37 รปท 4.1 หนาส าหรบรอโหลดเขาสหนาแรก..................................................................................43 รปท 4.2 หนาแสดงต าแหนงรานกาแฟ...........................................................................................44 รปท 4.3 หนาแสดงต าแหนงรานกาแฟ (ตอ)...................................................................................45 รปท 4.4 หนาแสดงต าแหนงรานกาแฟ (ตอ)...................................................................................46 รปท 4.5 หนาแสดงรายละเอยดของราน.........................................................................................47 รปท 4.6 หนาแสดงรายการสนคาหรอเมนของราน.........................................................................48 รปท 4.7 หนาใหคะแนนราน...........................................................................................................49 รปท 4.8 หนาส าหรบน าทางไปยงราน............................................................................................50 รปท 4.9 หนาดรปภาพขนาดใหญ...................................................................................................51 รปท 4.10 หนาสมครสมาชก...........................................................................................................52 รปท 4.11 หนาเขาสระบบ...............................................................................................................52 รปท 4.12 หนาส าหรบจดการรายละเอยดของราน..........................................................................53

สารบญรปภาพ ( ตอ )

หนา

รปท 4.13 หนาอปโหลดรปภาพตวอยางของราน...........................................................................54 รปท 4.14 หนาจดการสนคา............................................................................................................55 รปท 4.15 หนาเพมสนคา................................................................................................................56 รปท 4.16 หนาแกไขรายละเอยดสนคา...........................................................................................57 รปท 4.17 หนาเลอกต าแหนงทตงของราน.....................................................................................58 รปท 4.18 หนาเขาสระบบโดยผดแลระบบ....................................................................................59 รปท 4.19 หนาจดการรานคา..........................................................................................................60

1

บทท 1

บทน ำ

1.1 ทมำของกำรพฒนำ

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

1.2 วตถประสงค

เพอพฒนา แอปพลเคชนรานไหนด บนแพลตฟอรมแอนดรอยด

1.3 ขอบเขตภำคนพนธ

1.3.1 พฒนาโดยใชสถาปตยกรรมไคลเอนท/เซรฟเวอร

1.3.2 กลมผใชแบงเปน 3 กลม

1.3.2.1 ผดแลระบบ

1.3.2.1.1 สามารถเขาถงขอมลของรานคาไดทกราน

1.3.2.1.2 สามารถก าหนดหรอแกไขรายละเอยดของรานคาแตละรานได

1.3.2.1.3 สามารถก าหนดหรอแกไขรายละเอยดของสนคาแตละรานได

1.3.2.2 ตวแทนรานกาแฟ

1.3.2.2.1 สามารถสมครสมาชกเพอเพมรายละเอยดรานคาผานเวบไซสได

1.3.2.2.2 สามารถก าหนดและแกไขรายละเอยดรานคาของตนเองได

2

1.3.2.2.3 สามารถเพมต าแหนงหรอพกดรานคาของตนเองได

1.3.2.2.4 สามารถก าหนดหรอแกไขรายละเอยดสนคาของรานตนเองได

1.3.2.3 ผใช

1.3.2.3.1 สามารถลอคอนแอปพลเคชนดวย Facebook ได

1.3.2.3.2 สามารถคนหารานกาแฟรอบขางจากพกดของนเองได

1.3.2.3.3 สามารถคนหารานกาแฟจากการระบชอจงหวดทตองการ

1.3.2.3.4 สามารถก าหนดคณลกษณะของรานในการคนหารานคาได เชน รานม

Wi-Fi,สามารถน าสตวเลยงเขาได, มแอร ฯลฯ

1.3.2.3.5 สามารถเขาดรายละเอยดของรานและสนคาผานแอปพลเคชนได

1.3.2.3.6 สามารถใหคะแนนรานกาแฟตามหมวดหมของคะแนนได

1.3.2.3.7 สามารถใชแอปพลเคชนน าทางไปยงรานได

1.4 ขนตอนและวธกำรด ำเนนงำนภำคนพนธ

1.4.1 กำรศกษำระบบเบองตนและศกษำควำมเปนไปได (System Feasibility)

ศกษาระบบงานเบองตนจากอางองจากระบบงานอนทความใกลเคยงกนโดย

วเคราะหหาจดดอยและจดเดนเพอน ามาประยกตใชกบระบบงานใหม และชวยในการ

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

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

หลงจากการพฒนาแอปพลเคชน

1.4.2 กำรวเครำะหระบบ (System Analysis)

น าขอมลท งหมดทไดรวบรวมมาวเคราะหความเปนไปไดและวางแผนการ

ปฏบตงาน โดpแยกการท างานทงหมดออกเปน 3 สวน ไดแก 1.สวนของผดแลระบบ 2.

สวนของรานคา 3.สวนของผใชทวไป มาวเคราะหและจดท าเปน Diagram ตางๆ เชน Use

Case Diagram, Class Diagram, Workflow Diagram, และ ER-Diagram จากนนจงมาท าใน

สวนทตดตอกบผใช ซงจะท าลกษณะ มอกอพ (Mockup) คอหนาจอของโปรแกรม

แบบคราวๆ เพอจ าลองและแสดงเหตการณตางๆ ท เ กด ขนในขณะใชงาน Application

และน ามาเปนแนวทางในการออกแบบ Application ตอไป

3

1.4.3 กำรออกแบบระบบ (System Design)

1.4.3.1 ออกแบบสถาปตยกรรม (Architecture Design)

1.4.3.2 ออกแบบโครงสรางขอมลและฐานขอมล (Data Structure and Database

Design)

1.4.3.3 ออกแบบสวนตดตอกบผใช (User Interface Design)

1.4.3.4 ออกแบบเครองมอฮารดแวรและซอฟตแวร (Hardware and Software

Design)

1.4.4 กำรพฒนำระบบ (System Development)

ท าการเขยนโปรแกรมโดยใชภาษา PHP, SQL, JavaScript ในการพฒนาเวบแอป

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

ดวยภาษา Java

1.4.5 การทดสอบระบบ (System Testing)

1.4.5.1 การทดสอบระดบฟงกชน (Unit Testing)

1.4.5.2 การทดสอบรวมฟงกชน (Integration Testing)

1.4.5.3 การทดสอบระบบ (System Testing)

1.4.6 การจดท าเอกสารประกอบการใชงานระบบ (System Documentation)

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

พฒนาระบบ จดใหอยในรปแบบมาตรฐาน เปนขนตอน แสดงรายละเอยดการพฒนาและ

เปนคมอในการใชงานระบบ อกทงยงเปนเอกสารส าหรบการน าระบบไปพฒนาตอใน

อนาคต

1.5 ประโยชนทคำดวำจะไดรบ

1.5.1 สามารถคนหารากาแฟไดจรง

1.5.2 ชวยลดขนตอนและเวลาทใชในการคนหาใหนอยลง

1.5.3 ชวยลดเวลาในการคนหาสนคาหรอรานคาทตองการได

1.5.4 สรางโอกาสใหกบรานกาแฟเพอเพมยอดขายหรอเปนอกชองทางในการโปรโมทราน

4

1.6 ระยะเวลำด ำเนนงำนภำคนพนธ

ตารางท 1.1 แสดงระยะเวลาด าเนนภาคนพนธ

ขนตอนในกำรด ำเนนงำน ระยะเวลำ ก.ย. 61

ต.ค. 61

พ.ย. 61

ธ.ค. 61

ม,ค. 62

ก,พ, 62

1. ร วบรวมและศ กษ าค ว า มตองการ

2. วเคราะหระบบ

3. ออกแบบระบบ

4. พฒนาระบบ

5. ทดสอบระบบ

6. จดท าเอกสาร

1.7 อปกรณและเครองมอทใชในกำรพฒนำระบบ

1.7.1 ฮารดแวร

1.7.1.1 อปกรณ Laptop Lenovo Ideapad 700

1.7.1.2 Smart Phone ส าหรบทดสอบ Oneplus 5T

1.7.2 ซอฟตแวร

1.7.2.1 ระบบปฏบตการ Windows 10

1.7.2.2 Program Android Studio Version 2.2.2.0 1.7.2.3 Program Notepad++ 1.7.2.4 Program Adobe Photoshop CS6 1.7.2.5 Program Microsoft Word 2016 1.7.2.6 Program Xamp ประกอบดวย Apache, Phpmyadmin, My SQL

5

1.8 อปกรณและเครองมอทรองรบระบบ

1.8.1 ฮารดแวร

1.8.1.1 ฝงโมบายแอปพลเคชน (Mobile-Application Side)

1.8.1.1.1 Smart Phone Android ทกรนทมขนาดหนาจอตงแต 4-6 นว

และตองมคณสมบต GPS ในตวเอง

1.8.1.2 ฝงเวบแอปพลเคชน (Web-Application Side)

1.8.1.2.1 คอมพวเตอรทกระบบปฏบตการทสามารถเชอมตออนเตอรเนต

ไดและมความละเอยดหนาจอ (Screen Resolution) ไมต ากวา

800 x 600 พกเซล

1.8.1.2.2 Smart Phone และ Tablet ทกระบบปฏบตการทสามารถเชอมตอ

อนเตอรเนตได และมความละเอยดหนาจอ (Screen Resolution)

ไมต ากวา800 x 600 พกเซล

1.8.2 ซอฟตแวร

1.8.2.1 ฝงโมบายแอปพลเคชน (Mobile-Application Side)

1.8.2.1.1 ระบบปฏบตการ Android (Android OS) ตงแตเวอรชน 4.4

(Kitkat) เปนตนไป

1.8.2.2 ฝงเวบแอปพลเคชน (Web-Application Side)

1.8.2.2.1 ระบบปฏบตการวนโดวน (Windows) ตงแตเวอรชน Windows7

เปนตนไปหรอระบบปฏบตการ MacOSX ตงแตเวอรชนรน 10.6

(Snow Leopard) เปนตนไป

1.8.2.2.2 ชดซอฟตแวรบรการจดการฐานขอมล (Database Management

System) phpMyAdmin ตงแตเวอรชน 5 ขนไป

6

บทท 2

การทบทวนวรรณกรรมทเกยวของ

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

2.1 Web Application (เวบแอปพลเคชน)1

Web Application คอกำรพฒนำระบบงำนบนเวบ เหมำะส ำหรบงำนทตองกำรขอมลแบบ Real-time ระบบมประสทธภำพ ใชงำนงำยไมตองตดตงโปรแกรมเสรมใดๆ กสำมำรถใชงำนไดจำกทกท ระบบทพฒนำขนจะเปนระบบเฉพำะ รองรบใหตรงกบกำรท ำงำนมำกทสด ไมเหมอนกบโปรแกรมส ำเรจรปทสำมำรถประยกตกบงำนไดหลำยประเภท

ตวอยำงระบบงำนทเหมำะกบเวบแอปพลเคชน เชน ระบบกำรจองสนคำหรอบรกำรตำง ๆ เชน กำรจองทพก กำรจองโปรแกรมทวร จองตวคอนเสรต ฯลฯ ระบบงำนบคลำกร ระบบกำรสงซอแบบพเศษ ระบบรำนคำและกำรขำยสนคำ ระบบงำนในโรงเรยน เชน ระบบงำนวดและประเมนผล ระบบงำนปกครอง ระบบงำนหองสมด ระบบกำรลงทะเบยน เชคเกรด ฯลฯ ระบบงำนอน ๆ ทตองกำรน ำขอมลมำ Online ใชสถำปตยกรรม Web Application เนองจำกสะดวกในกำรใชงำน เพรำะไมจ ำเปนตองลงโปรแกรมกสำมำรถใชงำนระบบได ขอดของ Web Application (เวบแอปพลเคชน)

• สำมำรถใชงำนไดงำย สะดวกทกท ทกเวลำ ถำหำกไมมเครองคอมพวเตอร แตตองกำรใช Web browser (เวบเบรำเซอร)กสำมำรถใชแอปพลเคชนประเภทนได

• มกำรอพเดท แกไขขอผดพลำดตำงๆ อยตลอดเวลำ และใชงำนไดทกแพลตฟอรม • ไมตองใชควำมสำมำรถของ Hardware ทมำกนกกสำมำรถใชงำนได

1https://mdsoft.co.th/ควำมร/359-web-application.html

7

2.2 Mobile Application 2 Mobile Application ประกอบขนดวยค ำสองค ำ คอ Mobile กบ Application มควำมหมำย

ดงน Mobile คออปกรณสอสำรทใชในกำรพกพำ ซงนอกจำกจะใชงำนไดตำมพนฐำนของโทรศพทแลว ยงท ำงำนไดเหมอนกบเครองคอมพวเตอร เนองจำกเปนอปกรณทพกพำไดจงมคณสมบตเดน คอ ขนำดเลกน ำหนกเบำใชพลงงำนคอนขำงนอย ปจจบนมกใชท ำหนำทไดหลำยอยำงในกำรตดตอแลกเปลยนขำวสำรกบคอมพวเตอร ส ำหรบ Application หมำยถงซอฟตแวรทใชเพอชวยกำรท ำงำนของผใช (User) โดย Application จะตองมสงทเรยกวำ สวนตดตอกบผใช (User Interface หรอ UI) เพอเปนตวกลำงกำรใชงำนตำง ๆ

ขอดของหรอประโยชนของ Mobile Application • สำมำรถรองขอและเขำถงขอมล Resource ไดมำกกวำ • ประหยดคำใชจำยในกำรจดท ำ โดยไมตองท ำแยกกนระหวำง mobile และ desktop • รองรบผใชทกอปกรณ

2.3 Bootstrap3

Bootstrap คอ Front-end Framework ตวหนงทประกอบดวยภำษำ CSS, HTML และ Javascript เปนชดค ำสงทถกพฒนำขนมำเพอก ำหนดกรอบหรอ รปแบบกำรพฒนำเวบไซตในสวนของกำรปฏสมพนธกบผใชงำนเวบไซต (User Interface) เรำจงสำมำรถเรยก Bootstrap วำเปน Front-end framework คอใชส ำหรบ พฒนำเวบไซตสวนกำรแสดงผล ซงแตกตำงจำกภำษำประเภท Server Side Script อยำง PHP, Python หรอภำษำอน ๆ

ขอด-ขอเสย Bootstrap เปนเครองมอทชวยในกำรออกแบบเวบไซตทท ำใหใชระยะเวลำในกำรพฒนำ

ระบบนอยลง และไดรปแบบทสวยงำมงำยตอกำรใชงำน แตมกำรใช Bootstrap อยำงแพรหลำย ท ำใหเวบไซตทใช Bootstrap ในกำรออกแบบหนำตำทคลำยคลงกน

2 https://www.admissionpremium.com/it/news/1852 3https://www.codebee.co.th/labs/bootstrap-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/

8

2.4 PHP4 ใชภำษำ PHP เปนหลกในกำรพฒนำระบบ PHP คอ ภำษำคอมพวเตอรจ ำพวก scripting

language ซงค ำสงตำงๆจะเกบอยในไฟล script เวลำใชงำนตองใชตวแปรชดค ำสง แตลกษณะจะแตกตำงจำกภำษำสครปตแบบอนๆ คอ PHP ไดรบกำรพฒนำและออกแบบมำ เพอใชงำนในกำร

สรำงเอกสำรแบบ HTML ดงนน PHP จงเปนภำษำทเรยกวำ server-side หรอ HTML-embedded scripting language นนคอกอนทเครองคอมพวเตอรซงใหบรกำรเปน Web server จะสงหนำเวบเพจทเขยนดวย PHP จะท ำกำรประมวลผลตำมค ำสงทมอยใหเสรจเสยกอน แลวจงคอยสงผลลพธทไดใหเรำ จดไดวำ PHP เปนเครองมอทชวยใหเรำสำมำรถสรำง Dynamic Web pages ไดอยำงมประสทธภำพ และมลกเลนมำกขน

จดเดน

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

2.5 Javascript5

JavaScript คอ ภำษำคอมพวเตอรส ำหรบกำรเขยนโปรแกรมบนระบบอนเทอรเนต ทก ำลงไดรบควำมนยมอยำงสง Java JavaScript เปน ภำษำสครปตเชงวตถ (ทเรยกกนวำ "สครปต" (script) ซงในกำรสรำงและพฒนำเวบไซต (ใชรวมกบ HTML) เพอใหเวบไซตของเรำดมกำรเคลอนไหว สำมำรถตอบสนองผใชงำนไดมำกขน ซงมวธกำรท ำงำนในลกษณะ "แปลควำมและด ำเนนงำนไปทละค ำสง" (interpret) หรอเรยกวำ ออบเจกโอเรยลเตด (Object Oriented Programming) ทมเปำหมำยในกำร ออกแบบและพฒนำโปรแกรมในระบบอนเทอรเนต ส ำหรบผเขยนดวยภำษำ HTML สำมำรถท ำงำนขำมแพลตฟอรมได โดยท ำงำนรวมกบ ภำษำ HTML และภำษำ Java ไดทงทำงฝงไคลเอนต (Client) และ ทำงฝงเซรฟเวอร (Server)

4 http://www.mindphp.com/คมอ/73-คออะไร/2127-php-คอ อะไร.html 5http://www.mindphp.com/คมอ/73-คออะไร/2187-java-javascript-คออะไร.html

http://www.mindphp.com/คมอ/73-คอ%20%20%20%20%20%20อะไร/2127-php-คอ

http://www/

http://www/

9

2.6 MySQL6 คอ โปรแกรมระบบจดกำรฐำนขอมล ทพฒนำโดยบรษท MySQL AB มหนำทเกบขอมลอยำงเปนระบบ รองรบค ำสง SQL เปนเครองมอส ำหรบเกบขอมล ทตองใชรวมกบเครองมอหรอโปรแกรมอนอยำงบรณำกำร เพอใหไดระบบงำนทรองรบ ควำมตองกำรของผใช เชนท ำงำนรวมกบเครองบรกำรเวบ (Web Server) เพอใหบรกำรแกภำษำสครปตทท ำงำนฝงเครองบรกำร (Server-Side Script) เชน ภำษำ php ภำษำ aps.net หรอภำษำเจเอสพ เปนตน หรอท ำงำนรวมกบโปรแกรมประยกต (Application Program) เชน ภำษำวชวลเบสกดอทเนต ภำษำจำวำ หรอภำษำซชำรป เปนตน โปรแกรมถกออกแบบใหสำมำรถท ำงำนไดบนระบบปฏบตกำรทหลำกหลำย และเปนระบบฐำนขอมลโอเพนทซอรท (Open Source)ทถกน ำไปใชงำนมำกทสด MySQL จดเปนระบบจดกำรฐำนขอมลเชงสมพนธ (RDBMS : Relational Database Management System) ซงเปนทนยมใชกนมำกในปจจบน จดเดน

MySQL เปนฟรแวรทำงดำนฐำนขอมลทมประสทธภำพสง นกพฒนำฐำนขอมลทเคยใช MySQL ตำงยอมรบในควำมรวดเรว กำรรองรบจ ำนวนผใช และขนำดของขอมลจ ำนวนมหำศำล สนบสนนกำรใชงำนบนระบบปฏบตกำรมำกมำย เชน UNIX OS/2 MAC OS Windows สำมำรถใชงำนรวมกบ Web Development platform เชน C, C++ , Java, Perl, PHP, Python, TCL, หรอ ASP ไดรบควำมนยมอยำงมำกในปจจบน และมแนวโนมสงขนเรอยๆในอนำคต

6https://www.itgenius.co.th/article/(MySQL)%20%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html

10

2.7 Google Maps API7 Google Maps คอ บรกำรแผนทของ Google ซงใหบรกำร Services ทเกยวของกบแผนท

ทงหมด โดยในปจจบน แผนทของกเกลนนมอยหลำกหลำยประเภทมำก อำทเชนทเรำใชบรกำรแผนทบนเวบไซต หรอ Application บน Smartphone และทำงชองทำงอนๆ อกมำกมำยนบไมถวน โดย Services เหลำนเรำสำมำรถเรยกใชงำนไดฟร ในกรณทผำน Application ทวๆ ไป แตถำในกรณทเรำจะมกำรเรยกใชงำนในเวบไซตหรอ Application ทพฒนำขนเอง Google Maps กจะม API ใหใชงำนไดเชนเดยวกน แตใหเขำใจนดหนงวำ Services ตำงๆ ของ Google นนมขอจ ำกดหรอ Limit ในกำรใชงำน แตถำหำกตองกำรใชในบรมำณทสงขน กจะตองซอ Package ททำง Google Maps มมำให ซงโดยปกตจะมกำรจ ำกดจ ำนวนท Request เขำมำเรยกใชงำน

จดเดน • กำรปรบแตงแผนท (Styled Map) • ชดควบคมแผนท (Map Control) • ชดเครองมอวำดภำพบนแผนท (Drawing) • กำรน ำทำงจำกจดหนงไปยงอกจดหนง (Directions Service) • กำรค ำนวณควำมสงของจดพกด (Elevation Service) • กำรแปลงทอยเปนพกด Lattitude เเละ Longtitude (GeoCoding Service) • กำรดงขอมล POI (Point of Interest) คอขอมลสถำน ท ตำง ๆ ท Google

รวบรวมไวให เชน โรงแรม หำงสรรพสนคำ โรงเรยน -สถำนทรำชกำรตำงๆ เเละอนๆ อกมำกมำย (Places API) มำใชงำนใน application เรำ

• Street View

7https://medium.com/@todspolwonhchomphu/%E0%B9%83%E0%B8%8A%E0%B9%89-google-maps-%E0%B9%83%E0%B8%99-android-13252509dca0

12

บทท 3

การวเคราะหระบบงาน

3.1 รายละเอยดของภาคนพนธ แอปพลเคชนรานไหนด (RaanNaiDee) เปนรปแบบของโมบายแอปพลเคชนทท างานบนระบบปฏบตการแอนดรอยด โดยผใชสามารถคนหารานกาแฟทอยบรเวณโดย รอบและสามารถเลอกคนหาโดยก าหนดจงหวดทตงของรานและก าหนดหมวดหมของการใหบรการใหบรการเสรมของราน เพอเพมความสะดวกและลดชวยลดขนตอนในการคนใหนอยลง ตวแอปพลเคชนมระบบใหคะแนนรานเพอน าคะแนนมาเฉลยแลวแลวแสดงใหกบผใชทวไปทราบอกดวย โดยในสวนของผใชทเปนตวแทนของรานสามารถเขาใชงานและจดการในสวนของรายละเอยดของรานในทางเวบแอปพลเคชน เทคโนโลยทใชในภาคนพนธนจะแบงการท างานออกเปนสองสวนคอ ฝง Android Platform และ Web Service โดยฝง Web Service จะมหนาทเปน Web Application ท าหนาอ านวยความสะดวกใหกบทางผดแลระบบและตวแทนรานกาแฟ ในการแกไขหรอเพมขอมลรายละเอยดของหรอสนคาของราน เหตทตองใชเทคโนโลย Web Service เขามาชวยเพราะกรณทตวแทนรานกาแฟตองการจะเพมหรอแกไขรายละเอยดของรานดวยตวเองการกรอกขอมลดวยมอในปรมาณมากผาน Web Application นาจะสะดวกและงายกวาการกรอกขอมลดวย Android Application ทางผพฒนาจงเหนวา ควรจะน าระบบนมาใชในการพฒนานาจะมประโยชนกบผใชมากทสด ในสวนของ Android Platform เทคโนโลยหลกๆ ทจะถกน ามาใชคอ Location Based Service (LBS) มหนาทชวยแสดงหรอคนหารานกาแฟในบรเวณทอยใกลๆ กบผใช โดยในสวนของการแสดงผลจะถกออกแบบใหแสดงออกมาในรปแบบของแผนทซงมการใชเทคโนโลยของ Google Maps API เขามาชวย

13

3.2 แสดงฟงกชนการท างานของระบบดวย Use Case Diagram

รปท 3.1 Use Case Diagram ของแอปพลเคชนรานไหนดบนแพลตฟอรมแอนดรอยด

14

3.3 Use Case description

ตารางท 3.1 รายระเอยดของ Use Case : Login on website Use Case Name Login on website Use Case ID UC1 Brief Description ยนยนการเขาสระบบ Primary Actors Administrator, Coffee Shop Owner Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอผดแลระบบหรอตวแทนรานกาแฟปอนชอผใช และรหสผาน และคลกปม Login

2. ระบบจะเชคขอมลชอผใชและรหสผานทปอนเขามาตรงกบฐานขอมลวาตรงกนหรอไม 2.1 ขอมลผใชและรหสผานทตรงกนอยในฐานขอมล

2.1.1 ระบบไปยงหนาหลกเพอเลอกเมนและท างานตอไป 2.2 ขอมลชอผใชและรหสผานไมตรงกบฐานขอมล

2.2.1 ระบบแสดงขอความแจงเตอแจงเตอนวา “Username หรอ Password ไมถกตอง!” ไมสามารถเขาสระบบไดเนองจากชอผใชหรอรหสผานไมถกตอง

Post Condition ถาเขาสระบบภายดวยสทธของผดแลระบบจะสามารถเขาเรยกดและ

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

Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ

- แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง

15

ตารางท 3.2 รายระเอยดของ Use Case : Manage Coffee Shop Detail Use Case Name Manage Coffee Shop Detail Use Case ID UC2 Brief Description จดการรานกาแฟ Primary Actors Administrator, Coffee Shop Owner Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอผดแลระบบหรอตวแทนรานกาแฟคลกเลอกเขาสหนาจดการรายละเอยดของราน

2. ผดแลระบบหรอตวแทนรานกาแฟกรอกรายละเอยดของราน, ชอราน, เบอรตดตอ, เวลาท าการ ทตองการเพมหรอแกไข

Post Condition ระบบแสดงขอมลรายละเอยดของรานกาแฟทถกเพมหรอแกไขเขาไป

ใหมทงบน Website และใน Application Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ


16

ตารางท 3.3 รายระเอยดของ Use Case : Manage Product Use Case Name Manage Product Use Case ID UC3 Brief Description จดการรานกาแฟ Primary Actors Administrator, Coffee Shop Owner Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอผดแลระบบหรอตวแทนรานกาแฟคลกเลอกเขาสหนาจดการสนคา 2. ผดแลระบบหรอตวแทนรานกาแฟกรอกรายละเอยดของสนคา, ชอสนคา, ราคา, รป

สนคา ทตองการเพมหรอแกไข

Post Condition ระบบแสดงขอมลรายละเอยดของสนคาทถกเพมหรอแกไขเขาไปใหมทงบน Website และใน Application



17

ตารางท 3.4 รายระเอยดของ Use Case : Register on website Use Case Name Register on website Use Case ID UC4 Brief Description สมครสมาชกโดยตวแทนรานกาแฟ Primary Actors Coffee Shop Owner Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอผใชงานตองการทจะสมครสมาชกเขาสระบบ 2. ผใชระบบท าการกรอกขอมล Username, Password , Firstname ,Lastname, Email 3. เขาสระบบได

Post Condition ตวแทนรานกาแฟเขาสระบบได Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ


18

ตารางท 3.5 รายระเอยดของ Use Case : Mark Coffee Shop Location Use Case Name Mark Coffee Shop Location Use Case ID UC5 Brief Description เลอกต าแหนงทตงของรานกาแฟ Primary Actors Coffee Shop Owner Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอตวแทนรานกาแฟเลอกเขาสหนาแผนท 2. ระบบจะแสดงต าแหนงปจจบนของผเขาใชจากพกด GPS พรอม Marker 3. ท าการเลอกพกดของรานในแผนทโดยใช Marker เปนการบอกต าแหนง 4. ระบบบนทกพกด Latitude, longitude ลงในฐานขอมล

Post Condition ระบบท าการบนทกขอมล Latitude, longitude ลงในฐานขอมลของราน Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ


19

ตารางท 3.6 รายระเอยดของ Use Case : Upload Coffee Shop Image Use Case Name Upload Coffee Shop Image Use Case ID UC6 Brief Description อปโหลดรปภาพตวอยางของราน Primary Actors Coffee Shop Owner Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอผดแลระบบหรอตวแทนรานกาแฟกดปม Upload Images 2. ผดแลระบบหรอตวแทนรานกาแฟกดปม Choose a file.. 3. เลอกรปภาพทตองการอปโหลดเปนรปตวอยางของราน โดยเลอกไดมากกวา 1 รป 4. ระบบบนทกรปภาพลงในฐานขอมล

Post Condition ระบบแสดงรปภาพตวอยางของรานกาแฟทถกเพมเขามาทงบน Website และใน Application



20

ตารางท 3.7 รายระเอยดของ Use Case : Show Coffee Shop on map Use Case Name Show Coffee Shop on map Use Case ID UC7 Brief Description แสดงรานกาแฟทงหมดในแผนทบน Application Primary Actors User Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอผใชเขาส Application 2. ระบบแสดงหนาแผนทพรอมต าแหนงปจจบนของผ 3. ระบบแสดง Marker ของรานกาแฟทงหมดทอยรอบตวของผใช

Post Condition แสดง Marker ของรานกาแฟทงหมดทอยโดยรอบต าแหนงของผใช Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ


21

ตารางท 3.8 รายระเอยดของ Use Case : Search Coffee Shop Use Case Name Search Coffee Shop Use Case ID UC8 Brief Description คนหารานกาแฟ Primary Actors User Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอผใชกดเลอกฟงชนกคนหา 2. เลอกจงหวดและรายละเอยดของราน เชน รานม Wi-fi, รานบรรยากาศด, น าสตวเลยง

เขาได, รานเปด 24 ชวโมง เปนตน 3. ระบบแสดงต าแหนงจงหวดของรานและแสดงรายชอของรานทงหมดทตรงตามความ

ตองการของผใช Post Condition ระบบจะแสดงต าแหนงของจงหวดทเลอกและแสดงรายชอของราน

ทงหมดทตรงตามความตองการของผใช Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ


22

ตารางท 3.9 รายระเอยดของ Use Case : View Coffee Shop Use Case Name View Coffee Shop Use Case ID UC9 Brief Description เขาดรายละเอยดของราน Primary Actors User Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอผใชกดเลอกรานทตองการ 2. ระบบไปยงหนาแสดงรายละเอยดของราน 3. ระบบแสดงรายละเอยดทงหมดของราน

Post Condition ระบบแสดงรายละเอยดทงหมดของรานไดแก คะแนนราน, ชอราน, รปภาพของราน, รายละเอยดราน, เบอรโทรศพท, เวลาเปดปด



23

ตารางท 3.10 รายระเอยดของ Use Case : View Coffee Shop Image Use Case Name View Coffee Shop Image Use Case ID UC10 Brief Description ดรปภาพตวอยางของราน Primary Actors User Secondary Actors - Preconditions - Main Flow :

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

Post Condition สามารถดรปภาพในใหญขน ท าใหเหนรายละเอยดตางๆของภาพไดงายขน



24

ตารางท 3.11 รายระเอยดของ Use Case : View Product Use Case Name View Product Use Case ID UC11 Brief Description ดสนคาของราน Primary Actors User Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอผใชกดเลอกดเมน 2. ระบบแสดงเมนสนคาทงหมดของราน

Post Condition สามารถดเมนรายละเอยดและราคาของสนคาทงหมดในรานได Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ

แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง

25

ตารางท 3.12 รายระเอยดของ Use Case : Login by Facebook Use Case Name Login by Facebook Use Case ID UC12 Brief Description เขาสระบบดวย Facebook Primary Actors User Secondary Actors - Preconditions - Main Flow :

1. ยสเคสจะเกดขนเมอผตองการทจะเขาสระบบเพอใหคะแนนราน 2. ผใชกดปม “ด าเนนการตอดวย Facebook” เพอเขาสระบบ 3. ระบบท าการ Sync ขอมล Application กบ บญช Facebook ของผใช 4. ระบบแสดงรปภาพ Profile ของผใช Facebook ทก าลง Login อย

Post Condition สามารถใหคะแนนรานกาแฟไดตามตองการ Alternative Flows - Exception ไมสามารถเชอมตอ อนเทอรเนตได หรอ Server ขดของ

แจงเตอนใหผใชงานทราบ ไมสามารถเชอมตออนเทอรเนตไดกรณาลองใหมอกครงในภายหลง

26

ตารางท 3.13 รายระเอยดของ Use Case : Vote Use Case Name Vote Use Case ID UC13 Brief Description ใหคะแนนรานกาแฟ Primary Actors User Secondary Actors - Preconditions - Main Flow :

1. ยเคสจะเกดขนเมอผใชตองการทจะใหคะแนนราน 2. ระบบแสดงเกณฑใหคะแนนรานโดยแบงออกเปน บรรยากาศ, ราคา, รสชาต, การ

บรการ 3. ผใชกดใหคะแนนในรปแบบของดาว โดยมทงหมด 1-5 ดาว 4. ระบบท าการบนทกคะแนนลงในฐานขอมล

Post Condition คะแนนทถกบนทกลงในฐานขอมลจะถกเฉลยรวมกนและแสดงออกมาในหนาแรกของราน

27

ตารางท 3.14 รายระเอยดของ Use Case : Navigate to the Coffee Shop Use Case Name Navigate to the Coffee Shop Use Case ID UC14 Brief Description แสดงแผนทและน าทางไปยงรานกาแฟ Primary Actors User Secondary Actors - Preconditions - Main Flow :

1. ยเคสจะเกดขนเมอผใชเลอกฟงชนกแผนท 2. ระบบจะสงขอมลพกดของรานไปยง Application Google Maps และน าทางไปยงราน

ใหอตโนมต โดยพกด Latitude, longitude ของรานจะถกดงมาจากฐานขอมล Post Condition แสดงแผนทดวย Application Google Maps และแสดงเสนทางไปยง

ราน

28

3.4 Sequence Diagram

รปท 3.2 Sequence Diagram : Register on website

29

รปท 3.3 Sequence Diagram : Login on website

30

รปท 3.4 Sequence Diagram : Manage Coffee Shop Detail

รปท 3.5 Sequence Diagram : Manage Product

31

รปท 3.6 Sequence Diagram : Mark Coffee Shop

รปท 3.7 Sequence Diagram : Upload Image Coffee Shop

32

รปท 3.8 Sequence Diagram : Show Coffee Shop on map

รปท 3.9 Sequence Diagram : View Coffee Shop

33

รปท 3.10 Sequence Diagram : View Coffee Shop Image

รปท 3.11 Sequence Diagram : View Product

34

รปท 3.12 Sequence Diagram : Login by Facebook

รปท 3.13 Sequence Diagram : Vote

35

รปท 3.14 Sequence Diagram : Navigate to the Coffee Shop

รปท 3.14 Sequence Diagram : Navigate to the Coffee Shop

36

3.5 Class Diagram

รปท 3.15 Class Diagram ของแอปพลเคชนคนรานไหนด

37

3.6 แผนภาพแสดงความสมพนธระหวางเอนทต (Entity Relationship Diagram)

รปท 3.16 Entity Relationship Diagram ของแอปพลเคชนคนรานไหนด

38

3.7 พจนานกรมขอมล (Data Dictionary)

ตารางท 3.15 รายละเอยดของรายละเอยดของตารางขอมล ztb_user

Attribute Description Attribute Domain

Type PK FK Reference

id รหสของชอผใช int(10) Yes username ชอในการเขาส

ระบบ varchar(50)

password รหสผานในการเขาสระบบ

varchar(50)

name ชอจรง varchar(255) status สถานะปจจบน int(1) active ต าแหนงของผใช int(1) email อเมล varchar(50)

39

ตารางท 3.16 รายละเอยดของรายละเอยดของตารางขอมล ztb_location



Location_ID ชอราน int(10) Yes Province_ID รหสจงหวด varchar(10) Yes ztb_province Location_Name ชอราน varchar(255) Latitude พกดละตจด double Longtitude พกดลองจจด double Description รายละเอยดของ

ราน varchar(255)

Contact เบอรโทร varchar(15) Office_Hours เวลาเปด-ปดของ

ราน varchar(100)

Picture รปภาพหลกของราน

varchar(255)

User_ID รหสผใชทเปนเจาของราน

องจากฟลด id ในตาราง user

varchar(10) ztb_user

Chk1 Checkbox บรการของราน 1

รานเปดกลางวน

bit(1)


กาแฟซกเนเจอร

bit(1)


รานมแอร bit(1)


ม Wi-fi bit(1)


รานเปด 24 ชม.

bit(1)


น าสตวเลยงเขาได

bit(1)


รานเนนบรรยากาศ

bit(1)

40

ตารางท 3.17 รายละเอยดของรายละเอยดของตารางขอมล ztb_province



Province_ID รหสของจงหวด int(10) Yes Province_Name ชอจงหวด varchar(255) Latitude พกดละตจด double Longtitude พกดลองจจด double

ตารางท 3.18 รายละเอยดของรายละเอยดของตารางขอมล ztb_multipicture



Multipicture_ID รหสของรปภาพ int(10) Yes Location_ID รหสของราน รหสของราน

ทเปนเจาของรปน

varchar(10) Yes ztb_location

mPicture ลงครป varchar(255)

ตารางท 3.19 รายละเอยดของรายละเอยดของตารางขอมล ztb_product



Product_ID รหสสนคา int(10) Yes Location_ID ชอราน ชอรานทเปน

เจาของสนคาน


Product_Name ชอสนคา varchar(255) Price ราคา int(10) Description รายละเอยด

สนคา varchar(255)

Picture รปสนคา varchar(255)

41

ตารางท 3.20 รายละเอยดของรายละเอยดของตารางขอมล ztb_vote



Vote_ID รหสการโหวต int(10) Yes Location_ID รหสราน รหสของราน

ทไดรบการโหวตน


User_Facebook ผใชทเปนคนโหวต

รหส User Facebook ทเปนคนโหวต

varchar(255)

VoteType_ID หวขอการโหวต Yes zms_votetype Score คะแนน

ตารางท 3.21 รายละเอยดของรายละเอยดของตารางขอมล zms_votetype



VoteType_ID รหสหวขอการโหวต

int(10) Yes

Vote หวขอการโหวต บรรยากาศ, ราคา, รสชาต, บรการ

varchar(255)

42

บทท 4

การออกแบบทางกายภาพ

4.1 การออกแบบสวนตดตอผใช (User Interface Design)

แอปพลเคชนรานไหนดออกแบบโดยยดหลก UX (User Experience) เปนหลก โดยค านงถงความสะดวกและความพอใจของผใชเปนหลกจงออกแบบผใชไมจ าเปนตองเขาสระบบเมอเปดแอปพลเคชน ในสวนของหนาแสดงต าแหนงของรานถกออกแบบโดยใชรปแบบแผนท (Google Maps) และแสดงต าแหนงของรานในแผนทดวยการปกหมด (Marker) เนองจากผใชจ านวนไมนอยคนชนกบการใชแอปพลเคชนจ าพวกแผนทมากอนจงไมนาจะเปนปญหาตอการใชงาน และท า

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

43

4.1.1 สวนของผใช

รปท 4.1 หนาส าหรบรอโหลดเขาสหนาแรก

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

เสยกอนโดยคลกทปม REGISTER

44

รปท 4.2 หนาแสดงต าแหนงรานกาแฟ

จากรปท 4.2 คอหนาหลกทใชแสดงต าแหนงของรานกาแฟบนแผนทโดย จะเลอก

แสดงรานทอยบรเวณโดยรอบผใชเปนอนดบแรก

45

รปท 4.3 หนาแสดงต าแหนงรานกาแฟ (ตอ)

จากรปท 4.3 หลงจากผใชกดบนปกหมด (Marker) ทแสดงบนแผนทระบบจะ

แสดงชอรานและคะแนนรววเฉลยของราน ผใชสามารถกดเขาไปดรายละเอยดของรานได

46

รปท 4.4 หนาแสดงต าแหนงรานกาแฟ (ตอ)

จากรปท 4.4 เปนหนาส าหรบก าหนดการคนหา รานในจงหวดอนๆ และสามารถ

ก าหนดลกษณะหรอบรการเสรมของรานทตองการคนหาได

47

รปท 4.5 หนาแสดงรายละเอยดของราน

จากรปท 4.5 เปนหนาส าหรบรายละเอยดของรานหลงจากผใชกดเลอกหมดของทแสดงบนแผนท โดยจะแสดงรายละเอยดของรานคราวๆ เชน คะแนนรววราน, รปภาพของราน,

รายละเอยด, เบอรตดตอ และ เวลาท าการ

48

รปท 4.6 หนาแสดงรายการสนคาหรอเมนของราน

จากรปท 4.6 เมอผใชกดปม “รายการ” จากหนาแสดงรายละเอยดของรานจะเขา

มายงหนานทเปนหนาแสดงรายสนคาหรอรายการอาหารของรานทงหมด

49

รปท 4.7 หนาใหคะแนนราน

จากรปท 4.7 เมอผใชกดปม “ใหคะแนน” จากหนาแสดงรายละเอยดของรานจะ

เขามายงหนานทเปนหนาส าหรบใหคะแนนรานโดยจะแบงเกณฑการใหคะแนนเปนหมวดไดแก บรรยากาศ, ราคา, รสชาต, การบรการ โดยผใชจะตองท าการเขาสระบบดวย Facebook User กอน

ถงจะท าการใหคะแนนได

50

รปท 4.8 หนาส าหรบน าทางไปยงราน

จากรปท 4.8 เมอผใชกดปม “แผนท” จากหนาแสดงรายละเอยดของรานระบบจะ

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

51

รปท 4.9 หนาดรปภาพขนาดใหญ

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

ระบบจะท าการขยายและแสดงรปภาพทเลอกใหมขนาดใหญขน

52

4.1.2 สวนของรานกาแฟ

รปท 4.10 หนาสมครสมาชก

จากรปท 4.10 เปนหนาส าหรบสมครสมาชกเพอเขาสระบบในนามของรานกาแฟ

รปท 4.11 หนาเขาสระบบ

53

รปท 4.12 หนาส าหรบจดการรายละเอยดของราน

จากรปท 4.12 หลงจากเขาสระบบเมอตวแทนรานปม รายละเอยดรานคา จะเขาสหนา

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

54

รปท 4.13 หนาอปโหลดรปภาพบรรยากาศราน

จากรปท 4.13 กดปม Upload Images ในหนารายละเอยดรานคาเพอเขาสหนาส าหรบ

อปโหลดภาพบรรยากาศของรานทจะไปแสดงในแอปพลเคชน

55

รปท 4.14 หนาจดการสนคา

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

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

56

รปท 4.15 หนาเพมสนคา

จากรปท 4.15 หนาส าหรบเพมสนคา กรอกรายละเอยดของสนคาเลอกรปและท าการ

บนทกขอมล

57

รปท 4.16 หนาแกไขรายละเอยดสนคา

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

แกไขแลวท าการบนทกขอมล

58

รปท 4.17 หนาเลอกต าแหนงทตงของราน

จากรปท 4.17 เมอกดปมแผนทจะเขาสหนาเลอกต าแหนงทตงของราน โดยสามารถก าหนด

ไดจากการปกหมดบนแผนท

59

4.1.2 สวนของผดแลระบบ

รปท 4.18 หนาเขาสระบบโดยผดแลระบบ

60

รปท 4.19 หนาจดการรานคา

จากรปท 4.19 เมอผดแลระบบกดปมจดการรานคา ระบบจะแสดงรายชอรานทงหมดใน

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

รายละเอยดสนคาของรานรานนน

61

บทท 5

สรปผลและขอเสนอแนะ

5.1 สรปผลภาคนพนธ

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

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

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

5.2 ขอดของระบบ

5.2.1 สามารถหารานกาแฟได 5.2.1.1 สามารถคนหารานกาแฟบรเวณใกลเคยงกบผใชได 5.2.1.2 สามารถคนหารานกาแฟโดยการระบบจงหวดได 5.2.1.3 สามารถคนหารานกาแฟจากการระบลกษณะหรอบรการเสรมของรานได

เชน รานม Wi-fi, เอาสตวเลยงเขาได เปนตน 5.2.2 สามารถลอคอนดวย Facebook User ได

5.2.3 สามารถใหคะแนนรานอาหารได 5.2.4 สามารถดรายละเอยดของรานได เชนรปภาพในราน, เวลาเปด-ปด, เบอรตดตอของ ราน เปนตน 5.2.5 สามารถดรายการสนคาหรอเมนอาหารของรานเบองตนได 5.2.6 สามารถน าทางไปยงรานได

5.3 ขอจ ากดของระบบ ระบบใหคะแนนรานผใชจะตองท าการ Login กอนจงจะใหคะแนนได โดยตองลอคอนดวย Facebook User เทานนยงไมสามารถ Login ดวยวธแบบอนได

62

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

บรรณานกรม

โคดบ. (2561). บทสแตรป คออะไร. เขาถงไดจาก https://www.codebee.co.th/labs/bootstrap- %E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84 %E0%B8%A3/

มายดพเอชพ. (2561). พเอชพ คออะไร. เขาถงไดจาก http://www.mindphp.com/คมอ/73-คออะไร/ 2127-php-คอ อะไร.html

มายดพเอชพ. (2561). จาวาสครปต คออะไร. เขาถงไดจาก http://www.mindphp.com/คมอ/73-คอ อะไร/2187-java-javascript-คออะไร.html

มเดยม. (2561). กเกลแมพเอพไอคออะไร. เขาถงไดจาก https://medium.com/@todspolwonhchomphu /%E0%B9%83%E0%B8%8A%E0%B9%89-google-maps-%E0%B9%83%E0%B8%99-

-13252509dca0 เอมดซอฟท. (2561). เวบแอปพลเคชน คออะไร. เขาถงไดจาก https://mdsoft.co.th/ความร/359-

web-application.html แอดมชชนพรเมยม. โมบายแอปพลเคชน คออะไร. เขาถงไดจาก https://www.admissionpremium.

com/it/news/1852 ไอทจเนยส. (2561). มายเอสควแอล คออะไร. เขาถงไดจากhttps://www.itgenius.co.th/article

/(MySQL)%20%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B 0%E0%B9%84%E0%B8%A3.html

แอปพลิเคชันค้นหาร้านกาแฟ...

Documents