Skip to content

5
59110440259
Commit 8b75acaa authored by Piyaphorn Arphornsri's avatar Piyaphorn Arphornsri
Browse files
Options

updete

parent 52b77fac
Show whitespace changes
Inline Side-by-side
Showing with 678 additions and 361 deletions
Document/Latex/3-design.tex
View file @ 8b75acaa
...@@ -86,160 +86,170 @@ ...@@ -86,160 +86,170 @@
\end{enumerate} \end{enumerate}
\section{User Interface Design} \section{User Interface Design}
User Interface Design ของระบบการจองคิวร้านเสริมสวย มีดังนี้ User Interface Design ของระบบการจองคิวร้านเสริมสวย แบ่งเป็น 3 ส่วน มีดังนี้
\begin{enumerate} \begin{enumerate}
\item ผู้ใช้บริการ \\ \item ผู้ใช้บริการ \\
User Interface ผู้ใช้บริการ จะแบ่งออกแบบให้สะดวกต่อการใช้งาน User Interface ผู้ใช้บริการ จะออกแบบให้สะดวกต่อการใช้งาน
\begin{itemize}
\item การออกแบบหน้าจอหลัก
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/login} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Home}
\caption{หน้าจอเข้าสู่ระบบ} \caption{หน้าจอหลัก}
\label{Fig:หน้าจอเข้าสู่ระบบ} \label{Fig:Home}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:หน้าจอเข้าสู่ระบบ} แสดงหน้าจอสำหรับให้ผู้ใช้ทำการเข้าสู่ระบบ โดยจำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อใช้ในการเข้าสู่ระบบ จากภาพที่ \ref{Fig:Home} แสดงหน้าจอหลักบนเว็บแอปพลิเคชัน เพื่ออำนวยความสะดวกต่อผู้ใช้งาน ในหน้าหลักได้รวบรวมข้อมูลสรุปของร้านและเมนูเข้าถึงด่วนซึ่งแบ่งเป็น 3 ส่วนหลักได้แก่ เมนูจองคิว รายละเอียดร้านและข้อมูลรีวิว
\item การออกแบบหน้าจอข้อมูลร้าน
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/feed} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shop}
\caption{หน้าจอข้อมูลร้าน} \caption{หน้าจอข้อมูลร้าน}
\label{Fig:หน้าจอข้อมูลร้าน} \label{Fig:Shop}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:หน้าจอข้อมูลร้าน} แสดงหน้าจอข้อมูลรา้นเพื่อใช้ตัดสินใจในกาเลือกรจองคิวร้านเสริมสวย จากภาพที่ \ref{Fig:Shop} แสดงหน้าจอข้อมูลรายละเอียดภายในร้าน
\newpage
\item การออกแบบหน้าจอการจองคิว
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/feed} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopgueue}
\caption{หน้าจอข้อมูลแต่ละร้าน} \caption{หน้าจอการจองคิว}
\label{Fig:หน้าจอข้อมูลแต่ละร้าน} \label{Fig:Shopgueue}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:หน้าจอข้อมูลแต่ละร้าน} จากภาพที่ \ref{Fig:Shopgueue} แสดงหน้าจอการจองคิวร้านเสริมสวย ทั้งนี้ผู้ที่มีสิทธิ์ในการจองคิวมีเพียงผู้ใช้งานเท่านั้น
แสดงหน้าจอข้อมูลแต่ละร้าน เพื่อดูข้อมูลและการประชาสัมพันธ์ของร้าน \newpage
\item การออกแบบหน้าจอดูรายการ
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/calendar} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shoplist}
\caption{หน้าจอการเลือกวันในการจองคิว} \caption{หน้าจอดูรายการ}
\label{Fig:หน้าจอการเลือกวันในการจองคิว} \label{Fig:Shoplist}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:หน้าจอปฎิธินกำหนดการ} แสดงหน้าจอปฏิทินกำหนดการการดำเนินการเพื่อให้ผู้ใช้สามารถตรวจสอบกำหนดการวันที่และเวลาในการดำเนินงานของกองทุนโดยหน้าจอมีการแสดงปฏิทินและแถวรายการกำหนดการ จากภาพที่ \ref{Fig:Shoplist} แสดงหน้าจอรายการที่ให้บริการประจำร้าน
\newpage
\item High-fidelity wireframes \\ \item การออกแบบหน้าจอเขียนรีวิว
ใช้งาน High-fidelity wireframes สำหรับการนำเสนอไอเดีย (idea) หรือรูปแบบการ Action ให้แก่ Customer เสมือนงานจริงมากที่สุด ข้อดีคือ สามารถชี้นำการใช้งานจากหน้าหนึ่งไปยังอีกหนึ่งได้ดีด้วยการทำ Motion ระหว่างหน้ารวมทั้งสามารถทำ Interaction กับผู้ใช้งานซึ่งเป็นการสร้างการโต้ตอบการใช้งานกับผู้ใช้ได้ดี
\begin{itemize}
\item โมบายแอปพลิเคชัน
\begin{itemize}
\item การออกแบบหน้าจอ splash screen
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/splash_screen} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopreview}
\caption{หน้าจอ splash screen} \caption{หน้าจอเขียนรีวิว}
\label{Fig:splash_screen} \label{Fig:Shopreview}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:splash_screen} แสดงหน้าจอ splash screen ใช้ในการแสดงทุกครั้งที่ผู้ใช้เปิดแอปพลิเคชันโดยวัตถุประสงค์การทำงานของหน้านี้คือเพื่อใช้แสดงขณะที่แอปพลิเคชันทำการประมวลผลข้อมูลบนพื้นหลัง (Background process) เช่น การตรวจสอบสถานะการเข้าสู่ระบบของผู้ใช้คนปัจจุบัน เป็นต้น จากภาพที่ \ref{Fig:Shopreview} แสดงหน้าจอการเขียนรีวิว ทั้งนี้ผู้ที่มีสิทธิ์ในการอัพโหลดเอกสารมีเพียงผู้ใช้งานเท่านั้น
\item การออกแบบหน้าจอเข้าสู่ระบบ \newpage
\item การออกแบบหน้าจอลงทะเบียน
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/sign_in} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/register}
\caption{หน้าจอเข้าสู่ระบบ} \caption{หน้าจอลงทะเบียน}
\label{Fig:sign_in} \label{Fig:Register}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:sign_in} แสดงหน้าจอสำหรับให้ผู้ใช้ทำการเข้าสู่ระบบเมื่อผู้ใช้ยังไม่ได้ทำการเข้าสู่ระบบ โดยจำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อใช้ในการเข้าสู่ระบบ ซึ่งการเข้าสู่ระบบจะทำเพียงครั้งเดียวเท่านั้น เมื่อผู้ใช้เปิดการทำงานแอปพลิชันใหม่ในครั้งถัดไประบบจะระบุข้อมูลของผู้ใช้งานอัตโนมัติ จากภาพที่ \ref{Fig:Register} แสดงหน้าจอการลงทะเบียนของผู้ใช้บริการ เพื่อใช้ในการเข้าสู่ระบบ
\item การออกแบบหน้าจอสมัครสมาชิก \item การออกแบบหน้าจอเข้าสู่ระบบ
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/sign_up} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Login}
\caption{หน้าจอสมัครสมาชิก} \caption{หน้าจอเข้าสู่ระบบ}
\label{Fig:sign_up1} \label{Fig:Login}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:sign_up1} แสดงหน้าจอสมัครสมาชิก หากผู้ใช้ยังไม่มีบัญชีในระบบผู้ใช้งานสามารถทำการสมัครสมาชิกเพื่อเข้าใช้งานระบบได้จากหน้าสมัครสมาชิก โดยผู้ใช้จำเป็นต้องกรอกข้อมูลอีเมล รหัสผ่านและรหัสนักศึกษาในการสมัครสมาชิก จากภาพที่ \ref{Fig:Login} แสดงหน้าจอการเข้าสู่ระบบของผู้ใช้โดยผู้ใช้จำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อเข้าใช้งานระบบ
\item การออกแบบหน้าจอข่าวสารและประชาสัมพันธ์ \end{itemize}
\newpage
\item เจ้าของร้าน \\
User Interface เจ้าของร้าน จะออกแบบให้สะดวกต่อการใช้งาน
\begin{itemize}
\item การออกแบบหน้าจอโปรไฟล์ร้าน
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_feed} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopprofile}
\caption{หน้าจอข่าวสารและประชาสัมพันธ์} \caption{หน้าจอโปรไฟล์ร้าน}
\label{Fig:home_feed} \label{Fig:Shopprofile}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:home_feed} แสดงหน้าจอข่าวสารหรือประชาสัมพันธ์จากเจ้าหน้าที่หรือผู้ที่เกี่ยวข้อง จากภาพที่ \ref{Fig:Shopprofile} แสดงหน้าจอโปรไฟล์บนเว็บแอปพลิเคชัน เพื่อดูข้อมูลของเจ้าของร้าน
\item การออกแบบหน้าจอเมนูนำทางหลัก \newpage
\item การออกแบบหน้าจอเพิ่มข้อมูลร้าน
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_drawer_nav} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/datashop}
\caption{หน้าจอเมนูนำทางหลัก} \caption{หน้าจอเพิ่มข้อมูลร้าน}
\label{Fig:home_drawer_nav} \label{Fig:Datashop}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:home_drawer_nav} แสดงเมนูนำทางหลักที่ใช้นำทางผู้ใช้งานไปยังหน้าจออื่นๆ ภายในแอปพลิเคชัน จากภาพที่ \ref{Fig:Datashop} แสดงหน้าจอเพิ่มข้อมูลร้าน เพื่อให้เจ้าของร้านเพิ่มข้อมูลร้าน
\item การออกแบบหน้าจอปฏิทินกำหนดการการดำเนินการ \newpage
\item การออกแบบหน้าจอเพิ่มรายการ
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_calendar} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/list}
\caption{หน้าจอปฏิทินกำหนดการการดำเนินการ} \caption{หน้าจอเพิ่มรายการ}
\label{Fig:home_calendar} \label{Fig:List}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:home_calendar} แสดงหน้าจอปฏิทินกำหนดการการดำเนินการเพื่อให้ผู้ใช้สามารถตรวจสอบกำหนดการวันที่และเวลาในการดำเนินงานของกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี จากภาพที่ \ref{Fig:List} แสดงหน้าจอเพิ่มข้อมูลรายการของร้าน เพื่อให้เจ้าของร้านเพิ่มข้อมูลรายการที่ให้บริการประจำร้าน
\item การออกแบบหน้าจอสนทนา
\item การออกแบบหน้าจอเพิ่มข้อมูลช่าง
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_chat} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/qely}
\caption{หน้าจอสนทนา} \caption{หน้าจอเพิ่มข้อมูลช่าง}
\label{Fig:home_chat} \label{Fig:Qely}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:home_chat} นักศึกษาสามารถส่งข้อความไปยังเจ้าหน้าที่เพื่อติดต่อสอบถามข้อมูลกับทางเจ้าหน้าที่ได้โดยตรง จากภาพที่ \ref{Fig:Qely} แสดงหน้าจอข้อมูลช่าง เพื่อเพิ่มและอสดงข้อมูลช่างประจำร้าน
\item การออกแบบหน้าจอเอกสารที่เกี่ยวข้อง \newpage
\item การออกแบบหน้าจอดูการจองคิว
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_doc} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopqely}
\caption{หน้าจอเอกสารที่เกี่ยวข้อง} \caption{หน้าจอดูการจองคิว}
\label{Fig:home_doc} \label{Fig:ShopQely}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:home_doc} นักศึกษาสามารถดาวน์โหลดเอกสารที่เกี่ยวข้องกับกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี เช่น ข้อกำหนดและคุณสมบัติของผู้กู้ยืม เป็นต้น ซึ่งเอกสารได้ถูกอัพโหลดไว้โดยเจ้าหน้าที่ จากภาพที่ \ref{Fig:ShopQely} แสดงหน้าจอการจองคิว เพื่อให้เจ้าของร้านดูข้อมูลการจองคิวจากผู้ใช้งาน
\item การออกแบบหน้าจอจองวันที่และเวลาส่งเอกสาร \item การออกแบบหน้าจอเพิ่มรูปภาพ
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_booking} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shoppic}
\caption{หน้าจอจองวันที่และเวลาส่งเอกสาร} \caption{หน้าจอเพิ่มรูปภาพ}
\label{Fig:home_booking} \label{Fig:Shoppic}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:home_booking} เมื่อเจ้าหน้าที่ทำการเพิ่มวันที่และช่วงเวลาในการส่งเอกสาร นักศึกษาสามาจองวันที่และเวลาในการส่งเอกสารฉบับจริงของตนได้จากหน้าจอดังกล่าวโดยมีเงื่อนไขคือนักศึกษาผู้ที่จะทำการส่งเอกสารฉบับจริงจำเป็นต้องส่งภาพสำเนาเอกสารผ่านทางระบบเพื่อให้เจ้าหน้าที่ยืนยันความถูกต้องเสียก่อน จากภาพที่ \ref{Fig:Shoppic} แสดงหน้าจอเพิ่มรูปภาพ เพื่ออัปโหลดรุปภาพเฉพาะเจ้าของร้าน
\end{itemize} \end{itemize}
\item เว็บแอปพลิเคชัน \newpage
\item เจ้าของร้าน \\
User Interface เจ้าของร้าน จะออกแบบให้สะดวกต่อการใช้งาน
\begin{itemize} \begin{itemize}
\item การออกแบบหน้าจอหลัก \item การออกแบบหน้าจอโปรไฟล์ช่าง
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Home} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/bprofile}
\caption{หน้าจอหลัก} \caption{หน้าจอโปรไฟล์ช่าง}
\label{Fig:Home} \label{Fig:Bprofile}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:Home} แสดงหน้าจอหลักบนเว็บแอปพลิเคชัน เพื่ออำนวยความสะดวกต่อเจ้าหน้าที่ ในหน้าหลักได้รวบรวมข้อมูลสรุปและเมนูเข้าถึงด่วนซึ่งแบ่งเป็น 3 ส่วนหลักได้แก่ เมนูนำทาง ข่าวสารประชาสัมพันธ์และปฏิทินกำหนดการ จากภาพที่ \ref{Fig:Bprofile} แสดงหน้าจอโปรไฟล์บนเว็บแอปพลิเคชัน เพื่อดูข้อมูลของช่าง
\item การออกแบบหน้าจอสนทนา \item การออกแบบหน้าจอดูตารางงาน
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Chat} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/work}
\caption{หน้าจอสนทนา} \caption{หน้าจอดดูตารางงาน}
\label{Fig:Chat} \label{Fig:Work}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:Chat} แสดงหน้าจอสนทนามีการแสดงรายชื่อนักศึกษาและส่วนของห้องสนทนาด้วย จากภาพที่ \ref{Fig:Work} แสดงหน้าจอตารางงาน เฉพาะช่าง
\item การออกแบบหน้าจออัพโหลดเอกสาร \newpage
\begin{figure}[H] \item การออกแบบหน้าจอเพิ่มรูปภาพผลงานช่าง
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Doc}
\caption{หน้าจออัพโหลดเอกสาร}
\label{Fig:Doc}
\end{figure}
จากภาพที่ \ref{Fig:Doc} แสดงหน้าจออัพโหลดเอกสารที่เกี่ยวข้องกับกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ทั้งนี้ผู้ที่มีสิทธิ์ในการอัพโหลดเอกสารมีเพียงเจ้าหน้าที่เท่านั้น
\item การออกแบบหน้าจอเข้าสู่ระบบ
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Login} \includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/bpic}
\caption{หน้าจอเข้าสู่ระบบ} \caption{หน้าจอเพิ่มรูปภาพผลงานช่าง}
\label{Fig:Login} \label{Fig:Bpic}
\end{figure} \end{figure}
จากภาพที่ \ref{Fig:Login} แสดงหน้าจอการเข้าสู่ระบบของผู้ใช้โดยผู้ใช้จำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อเข้าใช้งานระบบ จากภาพที่ \ref{Fig:Bpic} แสดงหน้าจอเพิ่มรูปภาพ เพื่ออัพโหลดรุปภาพผลงานเฉพาะช่าง
\end{itemize}
\end{itemize} \end{itemize}
\end{enumerate} \end{enumerate}
\newpage \newpage
\section{Use Case Diagram} \section{Use Case Diagram}
Use Case Diagram เป็นแผนผังเพื่อแสดงฟังก์ชันแสดงการทำงานของระบบโดยรวม แสดงส่วนประกอบในระบบและกิจกรรมที่เกิดขึ้นในระบบซึ่งในระบบระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ผู้ใช้จำเป็นต้องเข้าสู่ระบบเพื่อใช้งานระบบ สัญลักษณ์ที่ใช้ในการเขียน Use Case Diagram แสดงในตารางที่ \ref{tab:use-case2} Use Case Diagram เป็นแผนผังเพื่อแสดงฟังก์ชันแสดงการทำงานของระบบโดยรวม แสดงส่วนประกอบในระบบและกิจกรรมที่เกิดขึ้นในระบบซึ่งระบบจองคิวร้านเสริมสวย ผู้ใช้จำเป็นต้องเข้าสู่ระบบเพื่อใช้งานระบบ สัญลักษณ์ที่ใช้ในการเขียน Use Case Diagram แสดงในตารางที่ \ref{tab:use-case2}
\begin{table}[H] \begin{table}[H]
\caption{สัญลักษณ์ของ Use case Diagram} \caption{สัญลักษณ์ของ Use case Diagram}
\label{tab:use-case2} \label{tab:use-case2}
...@@ -262,8 +272,8 @@ User Interface Design ของระบบการจองคิวร้า ...@@ -262,8 +272,8 @@ User Interface Design ของระบบการจองคิวร้า
\end{table} \end{table}
\begin{figure}[H] \begin{figure}[H]
\includegraphics[width=1.2\textwidth]{Figures/3/usecase} \includegraphics[width=1.05\textwidth]{Figures/3/Usecase}
\caption{Use Case Diagram ของระบบ XX} \caption{Use Case Diagram ของระบบ จองคิวร้านเสริมสวย}
\label{Fig:usecase} \label{Fig:usecase}
\end{figure} \end{figure}
...@@ -272,32 +282,39 @@ User Interface Design ของระบบการจองคิวร้า ...@@ -272,32 +282,39 @@ User Interface Design ของระบบการจองคิวร้า
\caption{อธิบาย Use Case หน้าที่ของระบบ ในภาพที่ \ref{Fig:usecase}} \caption{อธิบาย Use Case หน้าที่ของระบบ ในภาพที่ \ref{Fig:usecase}}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{8cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
ดูประชาสัมพันธ์ & นักศึกษาสามารถดูประชาสัมพันธ์ได้โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline ดูข้อมูลต่างๆของร้านเสริมสวย & ผู้ใช้บริการสามารถดูข้อมูลได้โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline
ดูปฏิทินกำหนดการ & นักศึกษาสามารถเปิดดูปฏิทินวันที่และเวลากำหนดการของกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์วิทยาลัยอุบลราชธานี โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline ดูตำแหน่งของร้านเสริมสวย & ผู้ใช้บริการสามารถดูตำแหน่งร้านได้ โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline
ดาวน์โหลดเอกสาร & นักศึกษาดาวน์โหลดเอกสารที่เกี่ยวข้องกับกองทุนกู้ยีมการศึกษาคณะวิทยาศาสตร์มหาวิทยาลัยอุบลราชธานีได้โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline ค้นหาร้านเสริมสวย & ผู้ใช้งานทั่วไปสามารถค้นหาร้านได้โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline
ดู FAQs & หน้าแสดงรายการคำถามที่พบบ่อย \\ \hline ดูผลงานของร้านเสริมสวย & ผู้ใช้บริการสามารถดูผลงานของร้านเสริมสวยได้โดยไม่ต้องทำการเข้าสู่ระบบก่อน\\ \hline
จองคิวส่งเอกสาร & เมื่อนักศึกษาเข้าสู่ระบบเรียบร้อยแล้วนักศึกษา สามารถจองคิววันที่และเวลาในการส่งเอกสารฉบับจริงหลังจากที่ได้รับการตรวจสอบโดยเจ้าหน้าที่เรียบร้อยแล้ว \\ \hline ดูคิวว่างของร้านเสริมสวย& ผู้ใช้บริการสามารถดูคิวว่างของร้านเสริมสวยได้โดยไม่ต้องทำการเข้าสู่ระบบก่อน \\ \hline
ส่งเอกสารตรวจสอบ & นักศึกษาสามารถส่งเอกสารหน้าที่ตรวจสอบโดยการถ่ายรูปแล้วทำการอัพโหลดเข้าสู่ระบบ เมื่อเจ้าหน้าที่ตรวจสอบเรียบร้อยแล้วจะยืนยันสถานะของเอกสารอีกที \\ \hline ดูรีวิว & ผู้ใช้บริการสามารถดูรีวิวได้โดยไม่จำเป็นต้องเข้าสู่ระบบก่อน \\ \hline
สนทนา & นักศึกษาสามารถสอบถามข้อมูลของกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ได้จากช่องสนทนา \\ \hline เขียนรีวิวติชม & ผู้ใช้บริการสามารถเขียนรีวิวติชมได้โดยจำเป็นต้องเข้าสู่ระบบก่อน \\ \hline
จัดการกำหนดการส่งเอกสาร & ใช้สำหรับเจ้าหน้าที่เพื่อ เพิ่ม แก้ไขหรือลบกำหนดการส่งเอกสารของนักศึกษา \\ \hline จองคิวร้านเสริมสวย & ผุ้ใช้บริการสามารถจองคิวร้านเสริมสวยได้โดยจำเป็นต้องเข้าสู่ระบบก่อน และจำเป็นต้อง เลือก วันที่ รายการ ช่าง เวลา \\ \hline
เพิ่ม แก้ไข และลบรายการ & ใช้เจ้าของร้านเพื่อ เพิ่ม แก้ไขหรือลบข้อมูลรายการ \\ \hline
post ภาพผลงานทั้งหมดของร้านเสริมสวย & ใช้สำหรับเจ้าของร้านเพื่อ เพิ่ม post รูปภาพผลงานของร้าน\\ \hline
เพิ่มแก้ไขและลบข้อมูลร้าน & ใช้สำหรับเจ้าของร้านเพื่อ เพิ่ม แก้ไขหรือลบข้อมูลร้าน \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{อธิบาย Use Case หน้าที่ของระบบ(ต่อ) ในภาพที่ \ref{tab:usecase-15}} \caption{อธิบาย Use Case หน้าที่ของระบบ(ต่อ) ในภาพที่ \ref{Fig:usecase}}
\label{tab:usecase-15} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
จัดการประชาสัมพันธ์ & ใช้สำหรับเจ้าหน้าที่เพื่อ เพิ่ม แก้ไขหรือลบประชาสัมพันธ์ \\ \hline ดูการจองคิว & ใช้สำหรับเจ้าของร้านเพื่อ ดูคิวจองที่ผู้ใช้บริการได้ทำการจองคิว \\ \hline
จัดการปฏิทินกำหนดการ & ใช้สำหรับเจ้าหน้าที่เพื่อ เพิ่ม แก้ไขหรือลบกำหนดการการดำเนินการของกองทุน \\ \hline เพิ่มข้อมูลช่าง & ใช้สำหรับเจ้าของร้านเพื่อ เพิ่ม ข้อมูลช่าง \\ \hline
จัดการเอกสาร & ใช้สำหรับเจ้าหน้าที่เพื่อ เพิ่ม แก้ไขหรือลบเอกสารที่เกี่ยวข้องของกองทุน \\ \hline แก้ไขข้อมูล & ใช้สำหรับช่างเพื่อ แก้ไขข้อมูลส่วนตัว \\ \hline
แจ้งเตือนนักศึกษา & ใช้เพื่อส่งแจ้งเตือนไปยังนักศึกษาเมื่อมีการเพิ่มประชาสัมพันธ์โดยเจ้าหน้าที่ \\ \hline ดูตารางงาน & ใช้สำหรับช่างเพื่อ ดูตารางงาน \\ \hline
post ภาพผลงานของตัวเอง & ใช้สำหรับช่างเพื่อ post ภาพผลงาน \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
...@@ -305,114 +322,113 @@ User Interface Design ของระบบการจองคิวร้า ...@@ -305,114 +322,113 @@ User Interface Design ของระบบการจองคิวร้า
% \usepackage{graphicx} % \usepackage{graphicx}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case ดูประชาสัมพันธ์} \caption{Use Case ดูข้อมูลต่างๆของร้านเสริมสวย}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|p{10cm}|p{10cm}|} \begin{tabular}{|p{10cm}|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูประชาสัมพันธ์}} & \multicolumn{1}{c|}{\textbf{Use case Id : 1 }} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : ดูข้อมูลต่างๆของร้านเสริมสวย}} & \multicolumn{1}{c|}{\textbf{Use case Id : 1 }} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Primary Actor : นักศึกษา} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Primary Actor : ผู้ใช้บริการ} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Stakeholder Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Stakeholder Actor : เจ้าของร้าน} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : นักศึกษาดูประชาสัมพันธ์โดยไม่จำเป็นต้องเข้าสู่ระบบ} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : ผู้ใช้บริการดูข้อมูลต่างๆของร้านเสริมสวยโดยไม่จำเป็นต้องเข้าสู่ระบบ} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถดูประชาสัมพันธ์ได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถดูข้อมูลต่างๆ ของร้านเสริมสวยได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case ดูปฏิทินกำหนดการ} \caption{Use Case ดูตำแหน่งของร้านเสริมสวย}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\columnwidth}{% \resizebox{\totalheight}{!}{\columnwidth}{%
\begin{tabular}{|p{7cm}|p{7cm}|} \begin{tabular}{|p{7cm}|p{7cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูปฏิทินกำหนดการ}} & \textbf{Use case Id : 2 } \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : ดูตำแหน่งของร้านเสริมสวย}} & \textbf{Use case Id : 2 } \\ \hline
\multicolumn{2}{|l|}{Primary Actor : นักศึกษา} \\ \hline \multicolumn{2}{|l|}{Primary Actor : ผู้ใช้บริการ} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : เจ้าของร้าน} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : นักศึกษาสามารถเปิดดูปฏิทินวันที่และเวลากำหนดการของกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ไม่จำเป็นต้องเข้าสู่ระบบ} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : ผู้ใช้บริการสามารถดูตำแหน่งร้านเสริมสวย ไม่จำเป็นต้องเข้าสู่ระบบ} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถดูปฏิทินกำหนดการได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถดูตำแหน่งของร้านเสริมสวยได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case ดาวน์โหลดเอกสาร} \caption{Use Case ค้นหาร้านเสริมสวย}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|p{7cm}|p{7cm}|} \begin{tabular}{|p{7cm}|p{7cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : ดาวน์โหลดเอกสาร}} & \textbf{Use case Id : 3 } \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : ค้นหาร้านเสริมสวย}} & \textbf{Use case Id : 3 } \\ \hline
\multicolumn{2}{|l|}{Primary Actor : นักศึกษา} \\ \hline \multicolumn{2}{|l|}{Primary Actor : ผู้ใช้บริการ} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : เจ้าของร้าน} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : นักศึกษาดาวน์โหลดเอกสารที่เกี่ยวข้องกับกองทุนกู้ยีมการศึกษา \multicolumn{2}{|p{\linewidth}|}{Main Flow : ผู้ใช้บริการสามารถค้นหาร้านเสริมสวย ไม่จำเป็นต้องเข้าสู่ระบบ} \\ \hline
คณะวิทยาศาสตร์มหาวิทยาลัยอุบลราชธานีได้ไม่จำเป็นต้องเข้าสู่ระบบ} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถค้นหาร้านเสริมสวยได้} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารดาวน์โหลดเอกสารที่เกี่ยวข้องกับกองทุนได้} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 2 : หากผู้ใช้โมบายแอปพลิเคชันไม่เปิดสิทธิ์การอ่านและเขียนไฟล์บนความจำสำรอง จะไม่สามารถดาวน์โหลดเอกสารที่เกี่ยวข้องกับกองทุนได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case ดู FAQs} \caption{Use Case ดูผลงานของร้านเสริมสวย}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|p{10cm}|p{10cm}|} \begin{tabular}{|p{10cm}|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : ดู FAQs}} & \multicolumn{1}{c|}{\textbf{Use case Id : 4 }} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : ดูผลงานของร้านเสริมสวย}} & \multicolumn{1}{c|}{\textbf{Use case Id : 4 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : นักศึกษา} \\ \hline \multicolumn{2}{|l|}{Primary Actor : ผู้ใช้บริการ} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : เจ้าของร้าน} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : ใช้เพื่อแสดงรายการคำถามที่พบบ่อย } \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : ดูผลงานของร้านเสริมสวย โดยไม่จำเป็นต้องเข้าสู่ระบบ } \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถดูคำถามที่พบบ่อยได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถดูผลงานของร้านเสริมสวยได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case จองคิวส่งเอกสาร} \caption{Use Case ดูคิวว่างของร้านเสริมสวย}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : จองคิวส่งเอกสาร}} & \multicolumn{1}{c|}{\textbf{Use case Id : 5 }} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : ดูคิวว่างของร้านเสริมสวย}} & \multicolumn{1}{c|}{\textbf{Use case Id : 5 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : นักศึกษา} \\ \hline \multicolumn{2}{|l|}{Primary Actor : ผู้ใช้บริการ} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : เจ้าของร้าน} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow :เมื่อนักศึกษาเข้าสู่ระบบเรียบร้อยแล้วนักศึกษา สามารถจองคิววันที่และเวลาในการส่งเอกสารฉบับจริงหลังจากที่ได้รับการตรวจสอบโดยเจ้าหน้าที่เรียบร้อยแล้ว } \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : ดูคิวว่างของร้านเสริมสวยได้ โดยไม่จำเป็นต้องเข้าสู่ระบบ } \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถจองคิวส่งเอกสารได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถดูคิวว่างของร้านเสริมสวยได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case ส่งเอกสารตรวจสอบ} \caption{Use Case ดูรีวิว}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : ส่งเอกสารตรวจสอบ}} & \multicolumn{1}{c|}{\textbf{Use case Id : 6 }} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : ดูรีวิว}} & \multicolumn{1}{c|}{\textbf{Use case Id : 6 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : นักศึกษา} \\ \hline \multicolumn{2}{|l|}{Primary Actor : ผู้ใช้บริการ} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : เจ้าของร้าน} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : นักศึกษาสามารถส่งเอกสารหน้าที่ตรวจสอบโดยการถ่ายรูปแล้วทำการอัพโหลดเข้าสู่ระบบ เมื่อเจ้าหน้าที่ตรวจสอบเรียบร้อยแล้วจะยืนยันสถานะของเอกสารอีกที } \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : ดูรีวิวได้โดยไม่จำเป็นต้องเข้าสู่ระบบ} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถส่งเอกสารตรวจสอบได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถดูรีวิวได้} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้โมบายแอปพลิเคชันไม่เปิดสิทธิ์ใช้งานกล้อง จะไม่สามารถถ่ายภาพเพื่อส่งเอกสารตรวจสอบได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case สนทนา} \caption{Use Case เขียนรีวิว}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : สนทนา}} & \multicolumn{1}{c|}{\textbf{Use case Id : 7 }} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : เขียนรีวิว}} & \multicolumn{1}{c|}{\textbf{Use case Id : 7 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : นักศึกษา} \\ \hline \multicolumn{2}{|l|}{Primary Actor : ผู้ใช้บริการ} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อนักศึกษาเข้าสู่ระบบแล้วจะสามารถสอบถามข้อมูลของกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ได้จากช่องสนทนา} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : เขียนรีวิวติชมได้ต้องเข้าสู่ระบบ} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถสนทนาได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถเขียนรีวิวได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
...@@ -448,76 +464,136 @@ User Interface Design ของระบบการจองคิวร้า ...@@ -448,76 +464,136 @@ User Interface Design ของระบบการจองคิวร้า
% \end{table} % \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case จัดการกำหนดการส่งเอกสาร} \caption{Use Case จองคิวร้านเสริมสวย}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|}
\hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : จองคิวร้านเสริมสวย}} & \multicolumn{1}{c|}{\textbf{Use case Id : 10 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้บริการ} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : เจ้าของร้าน,ช่าง} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : ผู้ใช้บริการทำการจองคิวร้านเสริมสวย ได้โดยจำเป็นต้องเข้าสู่ระบบ และจำเป็นต้องเลือก วันที่ รายบการ ช่าง เวลา } \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ จองคิวร้านเสริมสวยได้} \\ \hline
\end{tabular}%
}
\end{table}
\begin{table}[H]
\centering
\caption{Use Case เพิ่ม แก้ไข และลบรายการ}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|}
\hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : เพิ่ม แก้ไข และลบรายการ}} & \multicolumn{1}{c|}{\textbf{Use case Id : 11 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : เจ้าของร้าน} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : เจ้าของร้าน เพิ่ม แก้ไขหรือลบรายการในระบบได้
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าหน้าที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ เพิ่ม แก้ไขหรือลบรายการได้} \\ \hline
\end{tabular}%
}
\end{table}
\begin{table}[H]
\centering
\caption{Use Case post ภาพผลงานทั้งหมดของร้าน}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|}
\hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : post ภาพผลงานทั้งหมดของร้าน}} & \multicolumn{1}{c|}{\textbf{Use case Id : 12 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : เจ้าของร้าน} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : เจ้าของร้าน post ภาพผลงานทั้งหมดของร้านได้} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าหน้าที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ post ภาพผลงานทั้งหมดของร้านได้} \\ \hline
\end{tabular}%
}
\end{table}
\begin{table}[H]
\centering
\caption{Use Case เพิ่มแก้ไขและลบข้อมูลร้าน}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|}
\hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : เพิ่มแก้ไขและลบข้อมูลร้าน}} & \multicolumn{1}{c|}{\textbf{Use case Id : 13 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor :เจ้าของร้าน} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : เจ้าของร้าน เพิ่ม แก้ไขและลบข้อมูลร้าน} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าหน้าที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ เพิ่ม แก้ไขและลบข้อมูลร้านได้} \\ \hline
\end{tabular}%
}
\end{table}
\begin{table}[H]
\centering
\caption{Use Case ดูการจองคิว}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : จัดการกำหนดการส่งเอกสาร}} & \multicolumn{1}{c|}{\textbf{Use case Id : 10 }} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : ดูการจองคิว}} & \multicolumn{1}{c|}{\textbf{Use case Id : 14 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Primary Actor :เจ้าของร้าน} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : เจ้าหน้าที่ เพิ่ม แก้ไขหรือลบกำหนดการส่งเอกสารของนักศึกษา} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : ดูการจองคิวที่ผู้ใช้บริการได้ทำการจองคิว โดยผู้ใช้บริการ} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าหน้าที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ เพิ่ม แก้ไขหรือลบกำหนดการส่งเอกสารของนักศึกษาได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าของร้านที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถดูการจองคิวที่ผู้ใช้บริการได้ทำการจองคิว โดยผู้ใช้บริการได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case จัดการประชาสัมพันธ์} \caption{Use Case เพิ่มข้อมูลช่าง}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : จัดการประชาสัมพันธ์}} & \multicolumn{1}{c|}{\textbf{Use case Id : 11 }} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : เพิ่มข้อมูลช่าง}} & \multicolumn{1}{c|}{\textbf{Use case Id : 15 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Primary Actor :เจ้าของร้าน} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : เจ้าหน้าที่ เพิ่ม แก้ไขหรือลบปฏิทินกำหนดการในระบบได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : เจ้าของร้านเพิ่มข้อมูลช่าง} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าหน้าที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ เพิ่ม แก้ไขหรือลบปฏิทินกำหนดการได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าของร้านที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถเพิ่มข้อมูลช่างได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case จัดการปฏิทินกำหนดการ} \caption{Use Case แก้ไขข้อมูล}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : จัดการปฏิทินกำหนดการ}} & \multicolumn{1}{c|}{\textbf{Use case Id : 12 }} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : แก้ไขข้อมูล}} & \multicolumn{1}{c|}{\textbf{Use case Id : 16 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Primary Actor :ช่าง} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : เจ้าหน้าที่ เพิ่ม แก้ไขหรือลบปฏิทินกำหนดการได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : ช่างแก้ไขข้อมูลส่วนตัว} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าหน้าที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ เพิ่ม แก้ไขหรือลบปฏิทินกำหนดการได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากช่างที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถแก้ไขข้อมูลส่วนตัวได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case จัดการเอกสาร} \caption{Use Case ดูตารางงาน}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : จัดการเอกสาร}} & \multicolumn{1}{c|}{\textbf{Use case Id : 13 }} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : ดูตารางงาน}} & \multicolumn{1}{c|}{\textbf{Use case Id : 17 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Primary Actor :ช่าง} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : เจ้าหน้าที่ เพิ่ม แก้ไขหรือลบเอกสารที่เกี่ยวข้องกับกองทุนได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : ดูตารางงาน ที่ผู้ใช้บริการได้ทำการจองคิว} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าหน้าที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ เพิ่ม แก้ไขหรือลบเอกสารที่เกี่ยวข้องกับกองทุนได้} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากช่างที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถดตารางงานได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{Use Case แจ้งเตือนนักศึกษา} \caption{Use Case post ภาพผลงานของตัวเอง}
\label{tab:usecase} \label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{% \resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{10cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : แจ้งเตือนนักศึกษา}} & \multicolumn{1}{c|}{\textbf{Use case Id : 14 }} \\ \hline \multicolumn{1}{|c|}{\textbf{Use Case Title : post ภาพผลงานของตัวเอง}} & \multicolumn{1}{c|}{\textbf{Use case Id : 18 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : เจ้าหน้าที่} \\ \hline \multicolumn{2}{|l|}{Primary Actor :ช่าง} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline \multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : แจ้งเตือนไปยังนักศึกษาเมื่อมีการเพิ่มประชาสัมพันธ์โดยเจ้าหน้าที่} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Main Flow : post ภาพผลงานของตัวเองได้} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากนักศึกษาที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถรับแจ้งเตือนเมื่อมีการเพิ่มประชาสัมพันธ์โดยเจ้าหน้าที่} \\ \hline \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากช่างที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถpost ภาพผลงานของตัวเองได้} \\ \hline
\end{tabular}% \end{tabular}%
} }
\end{table} \end{table}
...@@ -720,69 +796,146 @@ User Interface Design ของระบบการจองคิวร้า ...@@ -720,69 +796,146 @@ User Interface Design ของระบบการจองคิวร้า
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.95\columnwidth] \includegraphics[width=0.95\columnwidth]
{Figures/3/Sequence/feed} {Figures/3/Sequence/home}
\caption{Sequence Diagram การแสดงข่าวสาร} \caption{Sequence Diagram ข้อมูลร้าน}
\label{Fig:Sequence-feed} \label{Fig:Sequence-home}
\end{figure} \end{figure}
\end{landscape} \end{landscape}
จากภาพที่ \ref{Fig:Sequence-feed} สามารถอธิบายแผนภาพ Sequence Diagram แสดงข่าวสาร ได้ดังนี้ เมื่อ จากภาพที่ \ref{Fig:Sequence-home} สามารถอธิบายแผนภาพ Sequence Diagram แสดงข้อมูลร้าน ได้ดังนี้ เมื่อ
ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส WebBrowser เมื่อ Shopdata ถูกติดตั้งบน ShowShop เมธอด callData() จะสืบค้นข้อมูลจากฐานข้อมูลบน MySQL (node:shops) และส่งข้อมูลที่ได้ไปแปลงที่คลาส ShowShop โดยมีการคืนค่าเป็นข้อมูลร้านแต่ละแถวและในขั้นตอนสุดท้ายคลาส ShowShop จะทำการแสดงรายการข้อมูลร้านทั้งหมดออกทางหน้าจอ หากผู้ใช้มีการกดเลือกร้านบางแถวคลาส ShowShop จะทำการเรียกใช้ ShowShopDetail เพื่อแสดงรายละเอียดข้อมูลร้านของแถวที่ถูกเลือก
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส FeedFragment เมื่อ FeedFragment ถูกติดตั้งบน MainActivity เมธอด callData() จะสืบค้นข้อมูลจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส FeedItemAdapter โดยมีการคืนค่าเป็นข้อมูลข่าวสารแต่ละแถวและในขั้นตอนสุดท้ายคลาส FeedFragment จะทำการแสดงรายการข้อมูลข่าวสารทั้งหมดออกทางหน้าจอ หากผู้ใช้มีการกดเลือกข่าวสารบางแถวคลาส FeedFragment จะทำการเรียกใช้ PostDetailActivity เพื่อแสดงรายละเอียดข้อมูลข่าวสารของแถวที่ถูกเลือก
\begin{sidewaysfigure} \begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\columnwidth] \includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/calendar} {Figures/3/Sequence/shop}
\caption{Sequence Diagram การแสดงปฏิทินกำหนดการ} \caption{Sequence Diagram การแสดงข้อมูลโปรโมชั่น}
\label{Fig:Sequence-calendar} \label{Fig:Sequence-shop}
\end{figure} \end{figure}
\end{sidewaysfigure} \end{sidewaysfigure}
\newpage \newpage
จากภาพที่ \ref{Fig:Sequence-calendar} สามารถอธิบายแผนภาพ Sequence Diagram แสดงปฏิทินกำหนดการ ได้ดังนี้ เมื่อ จากภาพที่ \ref{Fig:Sequence-shop} สามารถอธิบายแผนภาพ Sequence Diagram แสดงโปรโมชั่น ได้ดังนี้ เมื่อ
ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส WebBrowser ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส ScheduleFragment เมื่อ ScheduleFragment ถูกติดตั้งบน MainActivity เมธอด callData() จะสืบค้นข้อมูลกำหนดการของวันปัจจุบันจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส Schedule-ItemAdapter โดยมีการคืนค่าเป็นข้อมูลกำหนดการแต่ละแถวและในขั้นตอนสุดท้ายคลาส Schedule-Fragment จะทำการแสดงรายการกำหนดการวันปัจจุบันออกทางหน้าจอ หากผู้ใช้มีการกดเลือกวันที่ที่ต้องการทราบกำหนดการจากปฏิทินคลาส ScheduleFragment จะทำการเรียกใช้ callData() อีกครั้งโดยสืบค้นข้อมูลกำหนดการของวันที่ถูกเลือกจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส ScheduleItemAdapter โดยมีการคืนค่าเป็นข้อมูลแต่กำหนดการละแถวและในขั้นตอนสุดท้ายคลาส ScheduleFragment จะทำการแสดงรายการกำหนดการวันที่ผู้ใช้เลือกออกทางหน้าจอ ข้อมูลโปรโมชั่น ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส WebBrowser เมื่อ ข้อมูลโปรโมชั่น ถูกติดตั้งบน ShowPromotion เมธอด callData() จะสืบค้นข้อมูลกำหนดการของวันปัจจุบันจากฐานข้อมูลบน MySQL node:promotions และส่งข้อมูลที่ได้ไปแปลงที่คลาส ShowPromotion โดยขั้นตอนสุดท้ายคลาส ShowPromotion จะทำการแสดงข้อมูลโปรโมชั่นออกทางหน้าจอ
\begin{sidewaysfigure} \begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\columnwidth] \includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/doc} {Figures/3/Sequence/review}
\caption{Sequence Diagram การแสดงดาวน์โหลดเอกสาร} \caption{Sequence Diagram การแสดงข้อมูลรีวิว}
\label{Fig:Sequence-doc} \label{Fig:Sequence-review}
\end{figure} \end{figure}
\end{sidewaysfigure} \end{sidewaysfigure}
\newpage \newpage
จากภาพที่ \ref{Fig:Sequence-doc} สามารถอธิบายแผนภาพ Sequence Diagram แสดงดาวน์โหลดเอกสาร ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง จากภาพที่ \ref{Fig:Sequence-review} สามารถอธิบายแผนภาพ Sequence Diagram แสดงข้อมูลรีวิว ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส WebBrowser ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส DocumentsFragment เมื่อ DocumentsFragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะสืบค้นข้อมูลเอกสารทั้งหมดจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส DocItem-Adapter โดยมีการคืนค่าเป็นข้อมูลเอกสารแต่ละแถวและในขั้นตอนสุดท้ายคลาส Documents-Fragment จะทำการแสดงรายการกำหนดการวันปัจจุบันออกทางหน้าจอ ข้อมูลรีวิว ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส WebBrowser เมื่อ บ้อมูลรีวิว ถูกติดตั้งบน Showreview เมธอด callData() จะสืบค้นข้อมูลรีวิวทั้งหมดจากฐานข้อมูลบน MySQL node:reviews และส่งข้อมูลที่ได้ไปแปลงที่คลาส Showreview โดยจะทำการแสดงข้อมูลรีวิวออกทางหน้าจอ
\begin{sidewaysfigure} \begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\columnwidth] \includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/chat} {Figures/3/Sequence/addreview}
\caption{Sequence Diagram การแสดงบทสนทนา} \caption{Sequence Diagram การเพิ่มรีวิว}
\label{Fig:Sequence-chat} \label{Fig:Sequence-addreview}
\end{figure} \end{figure}
\end{sidewaysfigure} \end{sidewaysfigure}
\newpage \newpage
จากภาพที่ \ref{Fig:Sequence-chat} สามารถอธิบายแผนภาพ Sequence Diagram แสดงการสนทานา ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง จากภาพที่ \ref{Fig:Sequence-addreview} สามารถอธิบายแผนภาพ Sequence Diagram แสดงการสนทานา ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส UserChatFragment เมื่อ UserChatFrag-ment ถูกติดตั้งบน MainActivity เมธอด getMessage() จะสืบค้นข้อมูลประวัติการสนทนาของผู้ใช้คนปัจจุบันทั้งหมดจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส MessagesListAdapter โดยมีการคืนค่าเป็นข้อมูลรายการประวัติการสนทนาทั้งหมดและในขั้นตอนสุดท้ายคลาส User-ChatFragment จะทำการแสดงรายการประวัติการสนทนาทั้งหมดออกทางหน้าจอ เมื่อผู้ใช้พิมพ์ข้อความและกดปุ่มส่งระบบจะเรียกให้เมธอด send() เพื่อทำการบันทึกข้อมูลไว้บน Firebase FireStore และทำการแสดงข้อมูลรายการประวัติการสนทนาทั้งหมดที่ถูกอัพเดท Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส UserChatFragment เมื่อ UserChatFrag-ment ถูกติดตั้งบน MainActivity เมธอด getMessage() จะสืบค้นข้อมูลประวัติการสนทนาของผู้ใช้คนปัจจุบันทั้งหมดจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส MessagesListAdapter โดยมีการคืนค่าเป็นข้อมูลรายการประวัติการสนทนาทั้งหมดและในขั้นตอนสุดท้ายคลาส User-ChatFragment จะทำการแสดงรายการประวัติการสนทนาทั้งหมดออกทางหน้าจอ เมื่อผู้ใช้พิมพ์ข้อความและกดปุ่มส่งระบบจะเรียกให้เมธอด send() เพื่อทำการบันทึกข้อมูลไว้บน Firebase FireStore และทำการแสดงข้อมูลรายการประวัติการสนทนาทั้งหมดที่ถูกอัพเดท
\begin{sidewaysfigure} \begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\columnwidth] \includegraphics[width=0.99\columnwidth]
{Figures/3/Sequence/submit} {Figures/3/Sequence/booking}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ} \caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
\label{Fig:Sequence-submit} \label{Fig:Sequence-booking}
\end{figure} \end{figure}
\end{sidewaysfigure} \end{sidewaysfigure}
\newpage \newpage
จากภาพที่ \ref{Fig:Sequence-submit} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง จากภาพที่ \ref{Fig:Sequence-booking} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
\begin{sidewaysfigure}
\begin{figure}[H]
\centering
\includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/addshop}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
\label{Fig:Sequence-addshop}
\end{figure}
\end{sidewaysfigure}
\newpage \newpage
จากภาพที่ \ref{Fig:Sequence-addshop} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
\begin{sidewaysfigure}
\begin{figure}[H]
\centering
\includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/addlist}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
\label{Fig:Sequence-addlist}
\end{figure}
\end{sidewaysfigure}
\newpage
จากภาพที่ \ref{Fig:Sequence-addlist} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
\begin{sidewaysfigure}
\begin{figure}[H]
\centering
\includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/addpromotion}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
\label{Fig:Sequence-addpromotion}
\end{figure}
\end{sidewaysfigure}
\newpage
จากภาพที่ \ref{Fig:Sequence-addpromotion} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
\begin{sidewaysfigure}
\begin{figure}[H]
\centering
\includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/addbeautician}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
\label{Fig:Sequence-addbeautician}
\end{figure}
\end{sidewaysfigure}
\newpage
จากภาพที่ \ref{Fig:Sequence-addbeautician} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
\begin{sidewaysfigure}
\begin{figure}[H]
\centering
\includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/addshopimage}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
\label{Fig:Sequence-addshopimage}
\end{figure}
\end{sidewaysfigure}
\newpage
จากภาพที่ \ref{Fig:Sequence-addshopimage} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
\begin{sidewaysfigure}
\begin{figure}[H]
\centering
\includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/addbeauticianimage}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
\label{Fig:Sequence-addbeauticianimage}
\end{figure}
\end{sidewaysfigure}
\newpage
จากภาพที่ \ref{Fig:Sequence-addbeauticianimage} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
\newpage
\section{โครงสร้างฐานข้อมูลไฟร์เบส(Firebase Database Stucture)} \section{โครงสร้างฐานข้อมูลไฟร์เบส(Firebase Database Stucture)}
Firebase Database นั้นเป็น Database แบบ NoSQL และเป็น JSON database ที่มีโครงสร้างที่เป็น Key และ Value จัดเก็บข้อมูลในลักษณะโหนด หากต้องการเรียกงานจะเรียกใช้โดย Firebase Database นั้นเป็น Database แบบ NoSQL และเป็น JSON database ที่มีโครงสร้างที่เป็น Key และ Value จัดเก็บข้อมูลในลักษณะโหนด หากต้องการเรียกงานจะเรียกใช้โดย
การท่องไปยังโหนดที่ต้องการ ส่วนประกอบสัญลักษณ์ที่ใช้ในการเขียนโครงสร้างฐานข้อมูลแบบ Firebase การท่องไปยังโหนดที่ต้องการ ส่วนประกอบสัญลักษณ์ที่ใช้ในการเขียนโครงสร้างฐานข้อมูลแบบ Firebase
......
Document/Latex/5-testing.tex
View file @ 8b75acaa
\chapter{การทดสอบระบบ} \chapter{การทดสอบระบบ}
การทดสอบการทำงานขอแอนดรอยด์งแอปพลิเคชันระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานีและทดสอบการทำงานในส่วนของเว็บไซต์ โดยทำการทดสอบในลักษณะ Black-box Testing \cite{blackbox} หรือ Data-Driven testing ซึ่งเป็นการเทสแบบที่ไม่สนใจโปรเซส (Process) การทำงานภายในของโปรแกรมว่าทำงานอย่างไร แต่จะเน้นไปที่ Input และ Result ที่ได้มากกว่าว่าการทำงานต่าง ๆ ถูกต้องตามความต้องการ (Requirement) หรือไม่ ซึ่งการทดสอบการใช้งานแอนดรอยด์แอปพลิเคชัน และ การใช้งานเว็บแอปพลิเคชัน ได้ผลดังนี้ การทดสอบการทำงานของเว็บไซต์ โดยทำการทดสอบในลักษณะ Black-box Testing \cite{blackbox} หรือ Data-Driven testing ซึ่งเป็นการเทสแบบที่ไม่สนใจโปรเซส (Process) การทำงานภายในของโปรแกรมว่าทำงานอย่างไร แต่จะเน้นไปที่ Input และ Result ที่ได้มากกว่าว่าการทำงานต่าง ๆ ถูกต้องตามความต้องการ (Requirement) หรือไม่ ซึ่งการทดสอบการใช้งานแอนดรอยด์แอปพลิเคชัน และ การใช้งานเว็บแอปพลิเคชัน ได้ผลดังนี้
\section{การทดสอบการใช้งานแอนดรอยด์แอปพลิเคชัน} \section{การทดสอบการใช้งานแอนดรอยด์แอปพลิเคชัน}
\begin{itemize} \begin{itemize}
......
Document/Latex/6-conclusion.tex
View file @ 8b75acaa
...@@ -39,14 +39,13 @@ ...@@ -39,14 +39,13 @@
\section{ปัญหาและอุปสรรคในการพัฒนา} \section{ปัญหาและอุปสรรคในการพัฒนา}
\begin{enumerate} \begin{enumerate}
\item เนื่องจากทางผู้พัฒนามีความประสงค์ให้ระบบนี้สามารถใช้งานได้จริง ดังนั้น การพัฒนาในตอนนี้ยังมีข้อจำกัดเรื่องขนาดของเอกสารที่จัดเก็บบนไฟร์เบสที่สามารถอัพโหลดเข้าสู่ระบบสูงสุดเพียง 5 GB ซึ่งหากระบบถูกใช้งานจริงจำนวนข้อมูลในระบบจะเกินจำนวนที่ไฟร์เบสให้ใช้งานฟรี \\ \item เนื่องจากทางผู้พัฒนามีความประสงค์ให้ระบบนี้สามารถใช้งานได้จริง ดังนั้น การพัฒนาในตอนนี้ยังมีข้อจำกัดเรื่องขนาดของข้อมูลที่จัดเก็บบนไฟร์เบสที่สามารถอัพโหลดเข้าสู่ระบบสูงสุดเพียง 5 GB ซึ่งหากระบบถูกใช้งานจริงจำนวนข้อมูลในระบบจะเกินจำนวนที่ไฟร์เบสให้ใช้งานฟรี \\
แนวทางการแก้ไข : ทำการบีบอัดข้อมูลให้มีขนาดเล็กลง ส่วนในอนาคตอาจจำเป็นต้องศึกษาแนวทางการสร้างเซิฟเวอร์ (Server) เป็นของระบบเอง แนวทางการแก้ไข : ทำการบีบอัดข้อมูลให้มีขนาดเล็กลง ส่วนในอนาคตอาจจำเป็นต้องศึกษาแนวทางการสร้างเซิฟเวอร์ (Server) เป็นของระบบเอง
\end{enumerate} \end{enumerate}
\section{แนวทางการพัฒนาต่อ} \section{แนวทางการพัฒนาต่อ}
\begin{enumerate} \begin{enumerate}
\item สร้าง Web server ของระบบซึ่งเป็นโปรแกรมที่มีหน้าที่ให้บริการด้านการจัดการเว็บไซต์และ Database server ซึ่งเป็นโปรแกรมที่ทำหน้าที่ให้บริการด้านการจัดการดูแลข้อมูลต่าง ๆ ภายในเว็บไซต์ โปรแกรมที่มีการใช้งานส่วนใหญ่เป็น mysql, postgresql, DB2
\item การพัฒนาช่องทางการติดต่อ \item การพัฒนาช่องทางการติดต่อ
\item เจ้าของร้านสามารถยืนยันการจองคิวได้ \item เจ้าของร้านสามารถยืนยันการจองคิวได้
\item การพัฒนาเป็นแอปพลิเคชัน \item การพัฒนาเป็นแอปพลิเคชัน
......
Document/Latex/Figures/3/usecase.png
View replaced file @ 52b77fac View file @ 8b75acaa
Document/Latex/Figures/3/usecase.png

156 KB | W: | H:

Document/Latex/Figures/3/usecase.png

360 KB | W: | H:

Document/Latex/Figures/3/usecase.png
Document/Latex/Figures/3/usecase.png
Document/Latex/Figures/3/usecase.png
Document/Latex/Figures/3/usecase.png
  • 2-up
  • Swipe
  • Onion skin
Source/Backend/controllers/list/index.js
View file @ 8b75acaa
...@@ -62,6 +62,24 @@ exports.getListuser = async (req, res) => { ...@@ -62,6 +62,24 @@ exports.getListuser = async (req, res) => {
}); });
} }
}; };
exports.getListshop = async (req, res) => {
try {
const listshop = req.params.shop;
let list = await List.findAll({
where: {
shop: listshop
}
});
console.log('list', list)
res.status(200).send(list);
} catch (err) {
// console.log(err);
// res.sendStatus(401);
res.send({
error: err.message
});
}
};
exports.updateList = async (req, res) => { exports.updateList = async (req, res) => {
try { try {
......
Source/Backend/controllers/shop/index.js
View file @ 8b75acaa
...@@ -27,8 +27,8 @@ exports.deleteshop = async (req, res) => { ...@@ -27,8 +27,8 @@ exports.deleteshop = async (req, res) => {
const shopId = req.params.shopId; const shopId = req.params.shopId;
await Shop.destroy({ await Shop.destroy({
where: { where: {
id: shopId id: shopId,
} },
}); });
res.status(200).send("success"); res.status(200).send("success");
} catch (err) { } catch (err) {
...@@ -42,8 +42,8 @@ exports.getShopId = async (req, res) => { ...@@ -42,8 +42,8 @@ exports.getShopId = async (req, res) => {
const shopId = req.params.id; const shopId = req.params.id;
let shop = await Shop.findOne({ let shop = await Shop.findOne({
where: { where: {
id: shopId id: shopId,
} },
}); });
res.status(200).send(shop); res.status(200).send(shop);
} catch (err) { } catch (err) {
...@@ -65,13 +65,13 @@ exports.updateShop = async (req, res) => { ...@@ -65,13 +65,13 @@ exports.updateShop = async (req, res) => {
}; };
exports.getUserId = async (req, res) => { exports.getUserId = async (req, res) => {
try { try {
const userId = req.params.id; const userId = req.params.userId;
let shop = await Shop.findOne({ let response = await Shop.findOne({
where: { where: {
userId: id userId: userId,
} },
}); });
res.status(200).send(shop); res.status(200).send(response);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
res.sendStatus(401); res.sendStatus(401);
......
Source/Backend/models/shopimage/index.js
View file @ 8b75acaa
...@@ -19,7 +19,7 @@ module.exports = db.sequelize.define("shopimages", { ...@@ -19,7 +19,7 @@ module.exports = db.sequelize.define("shopimages", {
referencesKey: 'id' referencesKey: 'id'
}, },
image: { image: {
type: Sequelize.BLOB type: Sequelize.BLOB('long')
}, },
type: { type: {
type: Sequelize.STRING type: Sequelize.STRING
......
Source/Backend/routers/list/index.js
View file @ 8b75acaa
...@@ -8,6 +8,7 @@ router.post("/add", listController.addlist); ...@@ -8,6 +8,7 @@ router.post("/add", listController.addlist);
router.get('/all', listController.getList); router.get('/all', listController.getList);
router.delete('/delete/:listId',listController.deletelist); router.delete('/delete/:listId',listController.deletelist);
router.get('/getListuser/:userId',listController.getListuser); router.get('/getListuser/:userId',listController.getListuser);
router.get("/getListshop/:shop", listController.getListshop)
router.put('/updateList/id',listController.updateList); router.put('/updateList/id',listController.updateList);
......
Source/Backend/routers/shop/index.js
View file @ 8b75acaa
...@@ -7,7 +7,7 @@ router.post("/add", shopController.addShop); ...@@ -7,7 +7,7 @@ router.post("/add", shopController.addShop);
router.get("/all", shopController.getShop); router.get("/all", shopController.getShop);
router.delete("/delete/:shopId", shopController.updateShop); router.delete("/delete/:shopId", shopController.updateShop);
router.get("/getShopId/:id", shopController.getShopId); router.get("/getShopId/:id", shopController.getShopId);
router.put("/updateshop/id", shopController.updateShop); router.put("/updateshop/:id", shopController.updateShop);
router.get("/getUserId/:userId", shopController.getUserId); router.get("/getUserId/:userId", shopController.getUserId);
router.put("/updateuserId/:userId", shopController.updateuserId); router.put("/updateuserId/:userId", shopController.updateuserId);
......
Source/Backend/routers/storage/index.js
View file @ 8b75acaa
...@@ -4,25 +4,23 @@ const router = express.Router(); ...@@ -4,25 +4,23 @@ const router = express.Router();
const storage = require('../../multer'); const storage = require('../../multer');
const ShopImage = require('../../models/shopimage'); const ShopImage = require('../../models/shopimage');
router.post('/upload/shop/:userId', storage.single('images',5), async (req, res) => { router.post('/upload/shop/:shopId', storage.array('images', 5), async (req, res) => {
console.warn(req.files) console.log(images)
// const images = req.files;
const images = req.files; // for (let i = 0; i < images.length; i++) {
for (let i = 0; i < images.length; i++) { // await ShopImage.create({
await ShopImage.create({ // shop_id: req.params.productId,
shop_id: req.params.shop_id, // userId: req.params.productId,
user_id: req.params.userId, // image: images[i].buffer,
image: images[i].buffer, // type: images[i].mimetype
type: images[i].mimetype // });
}); // }
} // res.send('success')
res.send('success')
}) })
// get file //get file
router.get('/file/Shop/:imageId', async (req, res) => { router.get('/file/product/:imageId', async (req, res) => {
const existingImage = await ShopImage.findOne({ const existingImage = await ProductImage.findOne({
where: { where: {
image_id: req.params.imageId image_id: req.params.imageId
} }
...@@ -32,3 +30,4 @@ router.get('/file/Shop/:imageId', async (req, res) => { ...@@ -32,3 +30,4 @@ router.get('/file/Shop/:imageId', async (req, res) => {
}) })
module.exports = router; module.exports = router;
Source/Backend/server.js
View file @ 8b75acaa
...@@ -15,7 +15,7 @@ app.use("/api/shop", router.shop); ...@@ -15,7 +15,7 @@ app.use("/api/shop", router.shop);
app.use("/api/promotion", router.promotion); app.use("/api/promotion", router.promotion);
app.use("/api/review", router.review); app.use("/api/review", router.review);
app.use("/api/booking", router.booking); app.use("/api/booking", router.booking);
// app.use("/api/storage", router.storage); app.use("/api/storage", router.storage);
app.listen(port, () => { app.listen(port, () => {
console.log("Express server listening on port " + port); console.log("Express server listening on port " + port);
......
Source/b_beauty_project/src/views/BeauticianShopPage/Profile/index.js
View file @ 8b75acaa
...@@ -2,27 +2,21 @@ import React, { Component } from "react"; ...@@ -2,27 +2,21 @@ import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles"; import { withStyles } from "@material-ui/core/styles";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import compose from "recompose/compose"; import compose from "recompose/compose";
import Input from "@material-ui/core/Input"; import {
import InputLabel from "@material-ui/core/InputLabel"; InputAdornment,
import InputAdornment from "@material-ui/core/InputAdornment"; TextField,
import FormControl from "@material-ui/core/FormControl"; Button,
import TextField from "@material-ui/core/TextField"; Fab
import Grid from "@material-ui/core/Grid"; } from "@material-ui/core";
import AccountCircle from "@material-ui/icons/AccountCircle"; import AccountCircle from "@material-ui/icons/AccountCircle";
import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
import MailOutlineIcon from "@material-ui/icons/MailOutline"; import MailOutlineIcon from "@material-ui/icons/MailOutline";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import Button from "@material-ui/core/Button";
import TextareaAutosize from "@material-ui/core/TextareaAutosize";
import ContactPhoneIcon from "@material-ui/icons/ContactPhone"; import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
import BusinessIcon from "@material-ui/icons/Business"; import BusinessIcon from "@material-ui/icons/Business";
import Fab from "@material-ui/core/Fab";
import EditIcon from "@material-ui/icons/Edit"; import EditIcon from "@material-ui/icons/Edit";
import Paper from "@material-ui/core/Paper"; import { connect } from "react-redux";
import CardMedia from "@material-ui/core/CardMedia";
import PhotoCameraIcon from "@material-ui/icons/PhotoCamera"; import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
import Avatar from "react-avatar"; import Avatar from "react-avatar";
import axios from "axios";
const styles = theme => ({ const styles = theme => ({
margin: { margin: {
margin: theme.spacing(1) margin: theme.spacing(1)
...@@ -30,9 +24,24 @@ const styles = theme => ({ ...@@ -30,9 +24,24 @@ const styles = theme => ({
}); });
class Profile extends Component { class Profile extends Component {
render() { state = {
const { classes } = this.props; user: ""
};
componentDidMount = async () => {
const { location, userInfo } = this.props;
// const id = userInfo.id;
const response = await axios.get(
`http://localhost:9000/api/auth/getUserById/${userInfo.id}`
);
console.log(response.data);
this.setState({
user: response.data
});
};
render() {
const { classes, userInfo } = this.props;
const { user } = this.state;
return ( return (
<div className="row center"> <div className="row center">
<div className="row mt-2 mb-2"> <div className="row mt-2 mb-2">
...@@ -62,8 +71,10 @@ class Profile extends Component { ...@@ -62,8 +71,10 @@ class Profile extends Component {
<div ClassName="row"> <div ClassName="row">
<TextField <TextField
className={classes.margin} className={classes.margin}
id="outlined-uncontrolled" id="name"
label="ชื่อร้าน" name="name"
value={user.name}
label="ชื่อ-นามสกุล"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
...@@ -76,7 +87,9 @@ class Profile extends Component { ...@@ -76,7 +87,9 @@ class Profile extends Component {
<TextField <TextField
className={classes.margin} className={classes.margin}
id="outlined-uncontrolled" id="email"
name="email"
value={user.email}
label="E_mail" label="E_mail"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -92,41 +105,9 @@ class Profile extends Component { ...@@ -92,41 +105,9 @@ class Profile extends Component {
<div> <div>
<TextField <TextField
className={classes.margin} className={classes.margin}
id="outlined-password-input" id="address"
label="Password" name="address"
type="password" value={user.address}
autoComplete="current-password"
variant="outlined"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<VpnKeyIcon />
</InputAdornment>
)
}}
/>
<TextField
className={classes.margin}
id="outlined-password-input"
label="Confirm-Password"
type="password"
autoComplete="current-password"
variant="outlined"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<VpnKeyIcon />
</InputAdornment>
)
}}
/>
</div>
<br></br>
<div>
<TextField
className={classes.margin}
id="outlined-password-input"
label="ที่อยู่" label="ที่อยู่"
autoComplete="address" autoComplete="address"
variant="outlined" variant="outlined"
...@@ -138,9 +119,12 @@ class Profile extends Component { ...@@ -138,9 +119,12 @@ class Profile extends Component {
) )
}} }}
/> />
<TextField <TextField
className={classes.margin} className={classes.margin}
id="outlined-password-input" id="tel"
name="tel"
value={user.tel}
label="เบอร์โทร" label="เบอร์โทร"
autoComplete="Phone number" autoComplete="Phone number"
variant="outlined" variant="outlined"
...@@ -176,4 +160,13 @@ class Profile extends Component { ...@@ -176,4 +160,13 @@ class Profile extends Component {
); );
} }
} }
export default compose(withStyles(styles), withRouter)(Profile); const mapStateToProps = state => ({
userInfo: state.user
});
const mapDispatchToProps = dispatch => {};
export default connect(
mapStateToProps,
mapDispatchToProps
)(compose(withStyles(styles), withRouter)(Profile));
Source/b_beauty_project/src/views/DataShopPage/Datashop/index.js
View file @ 8b75acaa
...@@ -133,7 +133,7 @@ class Datashop extends Component { ...@@ -133,7 +133,7 @@ class Datashop extends Component {
const { location, userInfo } = this.props; const { location, userInfo } = this.props;
// const id = location.state.id; // const id = location.state.id;
const response = await axios.get( const response = await axios.get(
`http://localhost:9000/api/shop/getuserId/${userInfo.id}` `http://localhost:9000/api/shop/getUserId/${userInfo.id}`
); );
if (response.data) this.setState({ shop: response.data }); if (response.data) this.setState({ shop: response.data });
...@@ -210,11 +210,11 @@ class Datashop extends Component { ...@@ -210,11 +210,11 @@ class Datashop extends Component {
axios axios
.post( .post(
`http://localhost:9000/api/storage/upload/shop/${userInfo.id}`, `http://localhost:9000/api/storage/upload/shop/${shop.id}`,
formData, formData,
// shop.id, shop.id,
// userInfo.id userInfo.id
) )
.then(response => { .then(response => {
console.log("เพิ่มรูปภาพสำเร็จ", response); console.log("เพิ่มรูปภาพสำเร็จ", response);
......
Source/b_beauty_project/src/views/HomePage/index.js
View file @ 8b75acaa
...@@ -5,6 +5,7 @@ import { ...@@ -5,6 +5,7 @@ import {
Button, Button,
DialogActions, DialogActions,
DialogContent, DialogContent,
Typography,
DialogContentText, DialogContentText,
DialogTitle, DialogTitle,
Paper, Paper,
...@@ -28,7 +29,9 @@ import DirectionsIcon from "@material-ui/icons/Directions"; ...@@ -28,7 +29,9 @@ import DirectionsIcon from "@material-ui/icons/Directions";
import ListIcon from "@material-ui/icons/List"; import ListIcon from "@material-ui/icons/List";
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd"; import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
import Rating from "@material-ui/lab/Rating"; import Rating from "@material-ui/lab/Rating";
import MaterialTable from "material-table";
import moment from "moment";
import "moment/locale/th";
const styles = theme => ({ const styles = theme => ({
root: { root: {
// padding: "2px 4px", // padding: "2px 4px",
...@@ -130,7 +133,9 @@ class HomePage extends Component { ...@@ -130,7 +133,9 @@ class HomePage extends Component {
open: false, open: false,
list: false, list: false,
rating: 0, rating: 0,
shops: [] shops: [],
columns: [{ title: "เวลา", field: "time" }],
data: [],
}; };
handleClickOpen = () => { handleClickOpen = () => {
this.setState({ this.setState({
...@@ -180,6 +185,15 @@ class HomePage extends Component { ...@@ -180,6 +185,15 @@ class HomePage extends Component {
tab: tab, tab: tab,
shops: response.data shops: response.data
}); });
// console.log("response", response.data);
// let { timeopen, timeclose } = response.data;
// timeopen = timeopen.split(":");
// timeclose = timeclose.split(":");
// let dateClose = new Date();
// dateClose.setHours(parseInt(timeclose[0]));
// dateClose.setMinutes(parseInt(timeclose[1]));
// const result = this.calculate(moment(dateClose), timeopen);
}; };
handleChangeTab = (event, newValue) => { handleChangeTab = (event, newValue) => {
...@@ -212,7 +226,8 @@ class HomePage extends Component { ...@@ -212,7 +226,8 @@ class HomePage extends Component {
const { classes } = this.props; const { classes } = this.props;
// const tab = this.state.tab; // const tab = this.state.tab;
// หรือ // หรือ
const { tab, date, open, list, value, rating, shops } = this.state; const { tab, date, open, list, value, rating, shops, columns,
data, } = this.state;
return ( return (
<div> <div>
<AppBra tab={tab} handleChangeTab={this.handleChangeTab} /> <AppBra tab={tab} handleChangeTab={this.handleChangeTab} />
...@@ -297,7 +312,9 @@ class HomePage extends Component { ...@@ -297,7 +312,9 @@ class HomePage extends Component {
</Button> </Button>
<Dialog <Dialog
open={open} open={open}
onClose={this.handleClose} fullWidth={true}
maxWidth="md"
onClose={this.handleCloseQ}
aria-labelledby="alert-dialog-title" aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description" aria-describedby="alert-dialog-description"
> >
...@@ -305,12 +322,13 @@ class HomePage extends Component { ...@@ -305,12 +322,13 @@ class HomePage extends Component {
{"จองคิว"} {"จองคิว"}
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<h6> <div className="row">
วันที่ที่เลือกคือ{" "} <div className="col s12 m5">
{format(new Date(date), "dd MMMM yyyy", { <div
locale: th style={{
})} maxWidth: "fit-content"
</h6> }}
>
<DatePicker <DatePicker
autoOk autoOk
orientation="static" orientation="static"
...@@ -320,34 +338,19 @@ class HomePage extends Component { ...@@ -320,34 +338,19 @@ class HomePage extends Component {
value={date} value={date}
onChange={this.handleChangeDate} onChange={this.handleChangeDate}
/> />
</DialogContent> </div>
<DialogActions> </div>
<Button <div className="col s12 m7">
variant="outlined" <Typography>
onClick={this.handleClose} วันที่ที่เลือกคือ{" "}
color="primary" {format(new Date(date), "dd MMMM yyyy", {
> locale: th
ยกเลิก })}
</Button> </Typography>
<Button <div className="mt-2">
variant="outlined" <Typography>กรุณาเลือกข้อมูลการจอง</Typography>
color="primary" <div className="row mt-2">
onClick={this.ClickOpen} <div className="col">
>
ถัดไป
</Button>
</DialogActions>
</Dialog>
<Dialog
open={list}
onClose={this.Close}
aria-labelledby="max-width-dialog-title"
>
<DialogTitle id="max-width-dialog-title">
กรุณาเลือกข้อมูลการจอง
</DialogTitle>
<DialogContent>
<DialogContentText>
<TextField <TextField
className={classes.margin} className={classes.margin}
id="list" id="list"
...@@ -368,11 +371,16 @@ class HomePage extends Component { ...@@ -368,11 +371,16 @@ class HomePage extends Component {
}} }}
> >
{currencieslist.map(option => ( {currencieslist.map(option => (
<option key={option.value} value={option.value}> <option
key={option.value}
value={option.value}
>
{option.label} {option.label}
</option> </option>
))} ))}
</TextField> </TextField>
</div>
<div className="col">
<TextField <TextField
className={classes.margin} className={classes.margin}
id="list" id="list"
...@@ -393,19 +401,59 @@ class HomePage extends Component { ...@@ -393,19 +401,59 @@ class HomePage extends Component {
}} }}
> >
{currencies.map(option => ( {currencies.map(option => (
<option key={option.value} value={option.value}> <option
key={option.value}
value={option.value}
>
{option.label} {option.label}
</option> </option>
))} ))}
</TextField> </TextField>
</DialogContentText> </div>
<div className="col s12 mt-2">
<MaterialTable
title=""
columns={columns}
data={data}
onRowClick={(evt, selectedRow) => {
console.log("selectedRow", selectedRow);
this.setState({ selectedRow });
}}
options={{
selection: false,
search: false,
showTitle: false,
toolbar: false,
rowStyle: rowData => ({
backgroundColor:
this.state.selectedRow &&
this.state.selectedRow.tableData.id ===
rowData.tableData.id
? "#EEE"
: "#FFF"
})
}}
/>
</div>
</div>
</div>
</div>
</div>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={this.Close} color="primary"> <Button
Cancel variant="outlined"
onClick={this.handleCloseQ}
color="secondary"
>
ยกเลิก
</Button> </Button>
<Button onClick={this.Close} color="primary"> <Button
Subscribe variant="outlined"
color="primary"
onClick={this.handleSaveQ}
>
ยืนยัน
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
......
Source/b_beauty_project/src/views/ShopPage/index.js
View file @ 8b75acaa
...@@ -136,14 +136,89 @@ const currencies = [ ...@@ -136,14 +136,89 @@ const currencies = [
label: "ช่าง" label: "ช่าง"
} }
]; ];
const currenciesreview = [
{
value: "1",
label: " กรุณาเลือกหัวข้อการรีวิว "
},
{
value: "2",
label: "รีวิวช่าง"
},
{
value: "3",
label: "รีวิวร้าน"
},
{
value: "4",
label: "การให้บริการ"
},
{
value: "5",
label: "การต้อนรับ"
},
{
value: "6",
label: "บรรยากาศ"
},
{
value: "7",
label: "อื่นๆ"
}
];
const currenciespoint = [
{
value: "1",
label: " กรุณาเลือกคะแนน "
},
{
value: "2",
label: "0.5"
},
{
value: "3",
label: "1"
},
{
value: "4",
label: "1.5"
},
{
value: "5",
label: "2"
},
{
value: "6",
label: "2.5"
},
{
value: "7",
label: "3"
},
{
value: "8",
label: "3.5"
},
{
value: "9",
label: "4"
},
{
value: "10",
label: "4.5"
},
{
value: "11",
label: "5"
}
];
class ShopPage extends Component { class ShopPage extends Component {
state = { state = {
reviweOpen: false, reviweOpen: false,
list: false, list: false,
date: new Date(), date: new Date(),
open: true, // open: true,
// open: false, open: false,
shop: null, shop: null,
reviwe: { reviwe: {
topic: "", topic: "",
...@@ -151,8 +226,15 @@ class ShopPage extends Component { ...@@ -151,8 +226,15 @@ class ShopPage extends Component {
point: "" point: ""
}, },
columns: [{ title: "เวลา", field: "time" }], columns: [{ title: "เวลา", field: "time" }],
columnslist: [
{ title: "ชื่อรายการ", field: "name" },
{ title: "ราคา", field: "price" },
{ title: "เวลาที่จอง", field: "time" }
],
data: [], data: [],
selectedRow: null selectedRow: null,
datalist: []
}; };
handleClickOpenreview = () => { handleClickOpenreview = () => {
...@@ -217,6 +299,7 @@ class ShopPage extends Component { ...@@ -217,6 +299,7 @@ class ShopPage extends Component {
const id = location.state.id; const id = location.state.id;
const response = await axios.get( const response = await axios.get(
`http://localhost:9000/api/shop/getShopId/${id}` `http://localhost:9000/api/shop/getShopId/${id}`
// `http://localhost:9000/api/list//getListshop/${id}`
); );
console.log("response", response.data); console.log("response", response.data);
let { timeopen, timeclose } = response.data; let { timeopen, timeclose } = response.data;
...@@ -227,10 +310,20 @@ class ShopPage extends Component { ...@@ -227,10 +310,20 @@ class ShopPage extends Component {
dateClose.setMinutes(parseInt(timeclose[1])); dateClose.setMinutes(parseInt(timeclose[1]));
const result = this.calculate(moment(dateClose), timeopen); const result = this.calculate(moment(dateClose), timeopen);
// console.log("response.data", response.data);
// if (response.data) {
// this.setState({
// datalist: response.data
// });
// } else {
// console.log("cannot get shop data");
// }
this.setState({ this.setState({
shop: response.data, shop: response.data,
data: result data: result
}); });
// console.log(this.state.shop); // console.log(this.state.shop);
}; };
...@@ -266,7 +359,9 @@ class ShopPage extends Component { ...@@ -266,7 +359,9 @@ class ShopPage extends Component {
open, open,
columns, columns,
data, data,
selectedRow datalist,
selectedRow,
columnslist
} = this.state; } = this.state;
return ( return (
...@@ -303,7 +398,7 @@ class ShopPage extends Component { ...@@ -303,7 +398,7 @@ class ShopPage extends Component {
<Dialog <Dialog
open={list} open={list}
fullWidth={true} fullWidth={true}
maxWidth="md" // maxWidth="mr"
onClose={this.Close} onClose={this.Close}
aria-labelledby="max-width-dialog-title" aria-labelledby="max-width-dialog-title"
> >
...@@ -312,8 +407,16 @@ class ShopPage extends Component { ...@@ -312,8 +407,16 @@ class ShopPage extends Component {
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText> <DialogContentText>
You can set my maximum width and whether to adapt or <div className="row">
not. <MaterialTable
title="รายการ"
columns={columnslist}
data={datalist}
options={{
selection: false
}}
/>
</div>
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
...@@ -609,14 +712,17 @@ class ShopPage extends Component { ...@@ -609,14 +712,17 @@ class ShopPage extends Component {
</Button> </Button>
<Dialog <Dialog
open={reviweOpen} open={reviweOpen}
// TransitionComponent={Transition}
keepMounted
onClose={this.handleClosereview} onClose={this.handleClosereview}
aria-labelledby="form-dialog-title" aria-labelledby="alert-dialog-slide-title"
aria-describedby="alert-dialog-slide-description"
> >
<DialogTitle id="form-dialog-title"> <DialogTitle id="alert-dialog-slide-title">
เขียนรีวิวติชม เขียนรีวิวติชม
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText> <DialogContentText id="alert-dialog-slide-description">
<div className={classes.root}> <div className={classes.root}>
<TextField <TextField
className={classes.margin} className={classes.margin}
...@@ -637,7 +743,7 @@ class ShopPage extends Component { ...@@ -637,7 +743,7 @@ class ShopPage extends Component {
) )
}} }}
> >
{currencieslist.map(option => ( {currenciesreview.map(option => (
<option key={option.value} value={option.value}> <option key={option.value} value={option.value}>
{option.label} {option.label}
</option> </option>
...@@ -663,7 +769,7 @@ class ShopPage extends Component { ...@@ -663,7 +769,7 @@ class ShopPage extends Component {
) )
}} }}
> >
{currencieslist.map(option => ( {currenciespoint.map(option => (
<option key={option.value} value={option.value}> <option key={option.value} value={option.value}>
{option.label} {option.label}
</option> </option>
...@@ -690,11 +796,11 @@ class ShopPage extends Component { ...@@ -690,11 +796,11 @@ class ShopPage extends Component {
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={this.handleClosereview} color="primary"> <Button onClick={this.handleClickOpenreview} color="primary">
Cancel ยกเลิก
</Button> </Button>
<Button onClick={this.handleClosereview} color="primary"> <Button onClick={this.handleClickOpenreview} color="primary">
Subscribe ยันยัน
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment