\chapter{บทนำ}

\section{ที่มาและเหตุผล }
เนื่องจากปัจจุบัน การดำเนินธุรกิจร้านเสริมสวยที่ให้บริการเสริมความงาม เช่น การทำผม ตัดผม ออกแบบทรงผม อบไอน้ำ โดยปกติผู้ใช้บริการจะมาที่ร้านเลยโดยที่ไม่จองคิว และพบว่าร้านที่มาใช้บริการมีลูกค้าเป็นจำนวนมาก จึงทำให้ผู้ใช้บริการต้องรอคิวนานหรือต้องเสียเวลามาใช้บริการในวันอื่น บางครั้งผู้ใช้บริการโทรมาสอบถามคิวและจองคิว แต่ช่างกำลังทำผมให้ลูกค้าท่านอื่นไม่สามารถรับโทรศัพท์ได้ ผู้พัฒนาจึงมีแนวคิดจะทำระบบการจองคิวร้านเสริมสวยขึ้น เพื่อแก้ปัญหาการรอคิวนานและสามารถรองรับการแสดงผลบนอุปกรณ์สมาร์ทโฟนในปัจจุบัน ทำให้สามารถจองคิวหรือติดต่อสื่อสารในเรื่องของการจองคิวทำผมกับทางร้านได้สะดวกมากยิ่งขึ้น

จากที่กล่าวมาข้างต้น ผู้พัฒนาจึงได้พัฒนาเว็บแอปพิเคชัน ระบบจองคิวร้านเสริมสวยขึ้นซึ่งช่วยในการจัดการจองคิวให้เป็นระบบ ลดขั้นตอนการดำเนินงานที่ซับซ้อน ลดระยะเวลาในการดำเนินงาน ลดความผิดพลาดที่จะเกิดขึ้นในขั้นตอนการดำเนินงาน และช่วยเพิ่มประสิทธิภาพในการทำงาน




\section{วัตถุประสงค์}
\begin{enumerate}
	\item เพื่อออกแบบและพัฒนาเว็บแอปพลิเคชั่นจองคิวร้านเสริมสวย
	\item เพื่อแก้ปัญหาการรอคิวร้านเสริมสวย
	 
\end{enumerate}
\section{ขอบเขตของโครงงาน}
\begin{enumerate}[label=1.3.\arabic*]
	\item เจ้าของร้าน
	\begin{itemize}
		\item สามารถลงทะเบียนเข้าสู่ระบบด้วย Email ได้
		\item สามารถดูคิวที่ผู้ใช้บริการได้ทำการจองคิวไว้
		\item สามารถ post ภาพผลงานทั้งหมดของร้านได้
		\item สามารถเพิ่ม แก้ไข และลบรายการให้บริการประจำร้านได้
		\item สามารถเพิ่ม แก้ไข  ข้อมูลร้านได้
		\item สามารถเพิ่ม แก้ไข ข้อมูลตำแหน่งร้านได้ 
	\end{itemize}
	\item ช่างประจำร้าน
	\begin{itemize}
		\item ลงทะเบียนใช้ web ด้วย Email ได้
		\item สามารถดูตารางการทำงานของตนเองได้
		\item สามารถ post ภาพผลงานของตัวเองได้
		\item สามารถแก้ไขข้อมูลส่วนตัวได้
	\end{itemize}
	\item ผู้ใช้บริการ
	\begin{itemize}
		\item สามารถลงทะเบียนเข้าสู่ระบบด้วย Email ได้
		\item สามารถค้นหาร้านเสริมสวยได้
		\item สามารถจองคิวของร้านเสริมสวยได้
		\item สามารถดูคิวว่างของร้านเสริมสวยได้
		\item สามารถดูข้อมูลต่างๆของร้านเสริมสวยได้
		\item สามารถดูตำแหน่งของทางร้านได้
		\item สามารถเขียนรีวิว ติชม ได้
	\end{itemize}
	
\end{enumerate}
\section{ประโยชน์ที่คาดว่าจะได้รับ}
\begin{enumerate}
	\item ช่วยลดขั้นตอนการจองคิวร้านเสริมสวย
	\item ช่วยลดปัญหาในการใช้บริการที่เกิดจากการรอคิวนาน
	\item ช่วยให้การจองคิวมีระเบียบมากขึ้น
	
\end{enumerate}
\section{เครื่องมือที่ใช้ในการพัฒนา (Development tools)}
\subsection{ฮาร์ดเเวร์}
\begin{enumerate}
	\item เครื่องคอมพิวเตอร์ส่วนบุคคล (Personal computer) เพื่อใช้ในการพัฒนาโมบายแอปพลิเคชัน โดยมีคุณสมบัติอย่างน้อยดังนี้
	\begin{itemize}
		\item ทำงานบนระบบปฏิบัติการ Elementary OS พื้นฐานการทำงานบน Windows 10
		\item หน่วยประมวลผลกลาง AMD Rezen(™) 5 3500U
		\item หน่วยประมวลผลกราฟฟิก AMD Radeon(™) Vega(8) Mobile Graphics
		\item หน่วยความจำหลักอย่างน้อย 8 กิกะไบต์ (Gigabyte, GB)
		\item หน่วยความจำสำรองอย่างน้อย 256 กิกะไบต์ (Gigabyte, GB)
	\end{itemize}


\end{enumerate}

\subsection{ซอฟต์แวร์ (Software)}
\begin{enumerate}
	\item ReactJS เป็น JavaScript Framework โดยมีชุดคำสั่งและไลบารี่ (Library) ให้ใช้งานเป็นจำนวนมาก
	\item Node.js คือ Cross Platform Runtime Environment หรือเรียกอีกอย่างว่า Backend Framework ใช้สำหรับเป็นเว็บเซิฟเวอร์ (Web Server) ซึ่งเขียนด้วยภาษา JavaScript 
	\item JavaScript เป็น ภาษาที่ใช้ในการพัฒนาเว็บ Environment) 
	\item Xampp เป็นโปรแกรม Apache web server ไว้จำลอง web server เพื่อทดสอบระบบระหว่างพัฒนา 
	\item MySQL เป็น โปรแกรมระบบจัดการฐานข้อมูล 
	\item Google Map API  เทคโนโลยีที่ใช้ในการใช้งานแผนที่
	\item Visual Studio Code เครื่องมือสำหรับพัฒนาเว็บแอปพลิเคชัน
\end{enumerate}

\newpage
\subsection{แผนการดำเนินการ}
ในการสร้างระบบจองคิวร้านเสริมสวย ผู้พัฒนาได้แบ่งขั้นตอนการดำเนินงานไว้ด้วยกัน 8 ขั้นตอน ดังตารางที่ \ref{tab:ganttchart}

%\begin{landscape}
%\sffamily
\begin{table}[H]
	\noindent
	\caption{ขั้นตอนการดำเนินงาน}
	\begin{ganttchart}[
		canvas/.append style={fill=none, draw=black!5, line width=.75pt},
		vgrid={*2{draw=black!7, line width=.75pt}},
		title label font=\bfseries\footnotesize,
		bar label node/.append style={
			align=left,
			text width=width("7. Functional Testing On")},
		bar/.append style={draw=none, fill=black!63}
		]{1}{18}
		\gantttitle{2562}{10}
		\gantttitle{2563}{8}\\
		\gantttitle{ส.ค.}{2}
		\gantttitle{ก.ย.}{2}
		\gantttitle{ต.ค.}{2}
		\gantttitle{พ.ย.}{2}
		\gantttitle{ธ.ค.}{2} 
		\gantttitle{ม.ค.}{2}
		\gantttitle{ก.พ.}{2}
		\gantttitle{มี.ค.}{2}		
		\gantttitle{เม.ย.}{2} \\
		\ganttbar{1.ศึกษาความเป็นไปได้}{1}{2} \\
		\ganttbar{2.เสนอหัวข้อโครงงาน}{2}{2} \\
		\ganttbar{3.ศึกษาค้นคว้าข้อมูล}{3}{8} \\
		\ganttbar{4.ศึกษาการใช้เครื่องมือ}{3}{4} \\
		\ganttbar{5.วิเคราะห์และออกแบบ}{5}{15}\\
		\ganttbar{6.เขียนโปรแกรม}{6}{17} \\
		\ganttbar{7.ทดสอบและแก้ปัญหา}{6}{17} \\
		\ganttbar{8.จัดทำเอกสาร}{11}{17} \\
		
	\end{ganttchart}
	\label{tab:ganttchart}
\end{table}
%\end{landscape}
%TODO แก้เทมเพลตเอาชื่อตารางไว้ด้านบน
