\chapter{บทนำ}

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

\section{วัตถุประสงค์}
\begin{enumerate}
	\item เพื่อออกแบบและพัฒนาเว็บแอปพลิเคชั่น จองคิวร้านเสริมสวย
	\item เพื่อแก้ปัญหาการรอคิวร้านเสริมสวย
	
\end{enumerate}
\section{ขอบเขตของโครงงาน}
\begin{enumerate}[label=1.3.\arabic*]
	\item เจ้าของร้าน
	 \begin{itemize}
			\item สามารถลงทะเบียนเข้าสู่ระบบด้วย Email ได้
		 	\item สามารถดูคิวที่ผู้ใช้บริการได้ทำการจองคิวไว้
		 	\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 สามารถดูผลงานของร้านได้
		\item สามารถเขียนรีวิว ติชม ได้
	\end{itemize}
\end{enumerate}
\newpage
\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 React JS เป็น Java Script Framework ที่ใช้ในการพัฒนาเว็บไซต์ฝั่งผู้ใช้งาน
	\item Node Js เป็น เทคโนโลยีที่ใช้ในการพัฒนาเว็บไซต์ฝั่งที่ติดต่อกับฐานข้อมูล
	\item JavaScript เป็น ภาษาที่ใช้ในการพัฒนาเว็บ
	\item MySQL เป็น โปรแกรมระบบจัดการฐานข้อมูล 
	\item Visual Studio Code เป็น Code Editor ที่ใช้ในการเเก้ไขเเละปรับเเต่ง Code
	\item Google Map API  เทคโนโลยีที่ใช้ในการใช้งานแผนที่
	
\end{enumerate}

\newpage
\section{แผนการดำเนินการ}
	ในการสร้างระบบแนะนำสถานที่ท่องเที่ยวในจังหวัดอุบลราชธานี ผู้พัฒนาได้แบ่งขั้นตอนการดำเนินงานไว้ด้วยกัน 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 แก้เทมเพลตเอาชื่อตารางไว้ด้านบน
