\chapter{การติดตั้งเครื่องมือที่ใช้พัฒนาโปรแกรม}
การติดตั้งเครื่องมือที่ใช้ในการพัฒนาระบบจองคิดร้านเสริมสวย มีโปรแกรมที่จำเป็นในการพัฒนาระบบดังต่อไปนี้
\begin{itemize}
	\item การติดตั้ง Node.js
	\item การติดตั้ง React.js
	\item การติดตั้ง Visual Studio Code
\end{itemize}

\section{การติดตั้ง Node.js}
\begin{enumerate}[label=\arabic*)]
	\item สามารถดาวน์โหลด Node.js ได้ที่ https://nodejs.org/en/download/ แสดงดังรูปที่ \ref{Fig:nodeInstall1}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]{Figures/7/1}
		\caption{หน้าเว็บดาวน์โหลด Node.js}
		\label{Fig:nodeInstall1}
	\end{figure}
	\newpage
	\item  เปิดไฟล์ติดตั้ง ชื่อ node-v10.15.3-x64.msi เพื่อติดตั้ง แสดงดังรูปที่ \ref{Fig:nodeInstall2}
	\begin{figure}[H]
		\includegraphics[scale=1.5]{Figures/7/2}
		\caption{ไฟล์ติดตั้งสำหรับติดตั้ง Node.js}
		\label{Fig:nodeInstall2}
	\end{figure}
	
	\item แสดงหน้าต่างตอนรับของ Node.js ให้กดปุ่ม Next แสดงดังรูปที่ \ref{Fig:nodeInstall3}
	\begin{figure}[H]
		\centering
		\includegraphics[width=10cm]{Figures/7/3}
		\caption{หน้าต่างตอนรับของ Node.js}
		\label{Fig:nodeInstall3}
	\end{figure}
	\newpage
	\item แสดงหน้าต่างข้อตกลงในการใช้ Node.js ให้เลือกช่อง I accept the terms in the License Agreement และกดปุ่ม Next แสดงดังรูปที่ \ref{Fig:nodeInstall4}
	\begin{figure}[H]
		\centering
		\includegraphics[width=10cm]{Figures/7/4}
		\caption{หน้าต่างข้อตกลงในการใช้ Node.js}
		\label{Fig:nodeInstall4}
	\end{figure}
	
	\item แสดงหน้าต่างเลือกโฟลเดอร์ที่จะทำการติดตั้ง แสดงดังรูปที่ \ref{Fig:nodeInstall5}
	\begin{figure}[H]
		\centering
		\includegraphics[width=10cm]{Figures/7/5}
		\caption{หน้าต่างเลือกโฟลเดอร์ที่จะทำการติดตั้ง Node.js}
		\label{Fig:nodeInstall5}
	\end{figure}
	\newpage
	\item แสดงหน้าต่างสำหรับติดตั้ง Node.js ให้กดปุ่ม Install เพื่อทำงานติดตั้ง แสดงดังรูปที่ \ref{Fig:nodeInstall6}
	\begin{figure}[H]
		\centering
		\includegraphics[width=10cm]{Figures/7/6}
		\caption{หน้าต่างติดตั้ง Node.js}
		\label{Fig:nodeInstall6}
	\end{figure}
\end{enumerate}
\section{การติดตั้ง React.js}

การติดตั้ง React.js สามารถทำผ่านคำสั่ง command line ได้ แสดงดังรูปที่ \ref{Fig:reactinstall}
\begin{figure}[H]
	{\setstretch{1.0}
		\begin{lstlisting}[numbers=none]
		npm install create-react-app --save              
		\end{lstlisting}}
	\caption{คำสั่งสำหรับติดตั้ง React.js}
	\label{Fig:reactinstall}
\end{figure}
\newpage
\section{การติดตั้ง Visual Studio Code}
\begin{enumerate}
	\item สามารถดาวน์โหลด Visual Studio Code ได้ที่ https://code.visualstudio.com/download ดังแสดงในรูปที่ \ref{Fig:vscode}
	\begin{figure}[H]
		\centering
	\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vscode}
		\caption{หน้าเว็บดาวน์โหลด Visual Studio Code}
		\label{Fig:vscode}
	\end{figure}

	\item เมื่อเปิดตัวติดตั้งขึ้นมาแล้ว จะแสดงหน้าจอ Welcome to the Visual Studio Code Setup Wizard ให้กดปุ่ม Next เพื่อเริ่มกระบวนการติดตั้ง ดังแสดงในรูปที่ \ref{Fig:vsi1}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi1}
		\caption{หน้าต่างต้อนรับของ Visual Studio Code}
		\label{Fig:vsi1}
	\end{figure}
	\newpage
	\item หลังจากนั้นจะแสดงหน้าต่างข้อตกลงการใช้งาน Visual Studio Code ทำการเลือกที่ I accept the areement แล้วกดปุ่ม Next ดังแสดงในรูปที่ \ref{Fig:vsi2}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi2}
		\caption{หน้าต่างข้อตกลงการใช้งาน  Visual Studio Code}
		\label{Fig:vsi2}
	\end{figure}
	
	\item จากนั้นจะแสดงหน้าต่างที่จัดเก็บไฟล์ต่างๆ ของ Visual Studio Code ทำการกดปุ่ม Next ดังแสดงในรูปที่ \ref{Fig:vsi3}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi3}
		\caption{หน้าต่างที่จัดเก็บไฟล์ต่างๆ ของ  Visual Studio Code}
		\label{Fig:vsi3}
	\end{figure}
	
	\item จากนั้นจะแสดงหน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code ทำการกดปุ่ม Next ดังแสดงในรูปที่ \ref{Fig:vsi4}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi4}
		\caption{หน้าต่างการจัดการซอร์ดคัท ของ  Visual Studio Code}
		\label{Fig:vsi4}
	\end{figure}

	\item จากนั้นแสดงหน้าต่างเริ่มทำการติดตั้งกดปุ่ม Next ดังแสดงในรูปที่ \ref{Fig:vsi5}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi5}
		\caption{หน้าต่างเริ่มทำการติดตั้งของ  Visual Studio Code}
		\label{Fig:vsi5}
	\end{figure}
	
	\item จากนั้นจะแสดงหน้าต่างเมื่อเข้าโปรแกรมหลังติดตั้งเสร็จ ดังแสดงในรูปที่ \ref{Fig:vsi6}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi6}
		\caption{ หน้าต่างเมื่อเข้าโปรแกรมหลังติดตั้งเสร็จ ของ Visual Studio Code}
		\label{Fig:vsi6}
	\end{figure}
\end{enumerate}
