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

\section{การติดตั้ง Visual Studio Code}
\begin{enumerate}
	\item สามารถดาวน์โหลด Visual Studio Code ได้ที่ https://code.visualstudio.com/download ดังแสดงในรูปที่ \ref{Fig:vscode}
	      \begin{figure}[H]
		      \includegraphics[width=\columnwidth]{Figures/prepareation/vscode}
		      \caption{หน้าเว็บดาวน์โหลด Visual Studio Code}
		      \label{Fig:vscode}
	      \end{figure}
\newpage
	\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}

	\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}
\newpage
	\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}
\newpage
	\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}
\newpage
\section{การติดตั้ง Node.js}
\begin{enumerate}
	\item สามารถดาวน์โหลด Node.js installer package ได้ที่ https://nodejs.org/en/download/ ดังแสดงในรูปที่ \ref{Fig:nodejs}
	      \begin{figure}[H]
		      \includegraphics[width=\columnwidth]{Figures/prepareation/nodejs}
		      \caption{หน้าเว็บดาวน์โหลด Node.js}
		      \label{Fig:nodejs}
	      \end{figure}

	\item เปิดไฟล์ติดตั้ง ชื่อ node-vx.xx.x-x64.msi เพื่อทำการติดตั้ง ดังแสดงในรูปที่ \ref{Fig:nodei1}
	      \begin{figure}[H]
		      \includegraphics[width=\columnwidth]{Figures/prepareation/nodei1}
		      \caption{ไฟล์ติดตั้งสำหรับติดตั้ง Node.js}
		      \label{Fig:nodei1}
	      \end{figure}
\newpage
	\item แสดงหน้าต่างต้อนรับของ Node.js ทำการกด Next เพื่อเริ่มกระบวนการติดตั้ง ดังแสดงในรูปที่ \ref{Fig:nodei2}
	      \begin{figure}[H]
		      \centering
		      \includegraphics[width=0.7\columnwidth]{Figures/prepareation/nodei2}
		      \caption{หน้าต่างตอนรับของ Node.js}
		      \label{Fig:nodei2}
	      \end{figure}

	\item แสดงหน้าต่างข้อตกลงในการใช้ Node.js ให้เลือกช่อง I accept the terms in the License Agreement และกด Next ดังแสดงในรูปที่ \ref{Fig:nodei3}
	      \begin{figure}[H]
		      \centering
		      \includegraphics[width=0.7\columnwidth]{Figures/prepareation/nodei3}
		      \caption{หน้าต่างข้อตกลงในการใช้ Node.js}
		      \label{Fig:nodei3}
	      \end{figure}
\newpage
	\item แสดงหน้าต่างเลือกโฟลเดอร์ที่จะทำการติดตั้ง ดังแสดงในรูปที่ \ref{Fig:nodei4}
	      \begin{figure}[H]
		      \centering
		      \includegraphics[width=0.7\columnwidth]{Figures/prepareation/nodei4}
		      \caption{หน้าต่างเลือกโฟลเดอร์ที่จะทำการติดตั้ง Node.js}
		      \label{Fig:nodei4}
	      \end{figure}

	\item แสดงหน้าต่างสำหรับติดตั้ง Node.js ทำการกด Install เพื่อทำการติดตั้ง ดังแสดงในรูปที่ \ref{Fig:nodei5}
	      \begin{figure}[H]
		      \centering
		      \includegraphics[width=0.7\columnwidth]{Figures/prepareation/nodei5}
		      \caption{หน้าต่างติดตั้ง Node.js}
		      \label{Fig:nodei5}
	      \end{figure}
\end{enumerate}

\newpage
\section{การติดตั้ง Angular}
\begin{enumerate}

	\item สามารถติดตั้ง Angular ได้ที่ https://angular.io/guide/quickstart ดังแสดงในรูปที่ \ref{Fig:angular}
		  \begin{figure}[H]
			\centering
		      \includegraphics[width=\columnwidth]{Figures/prepareation/angular}
		      \caption{หน้าเว็บ Angular}
		      \label{Fig:angular}
		  \end{figure}
		  
	\item เปิด Node.js command prompt ขึ้นมาแล้วใช้คำสั่ง npm install -g @angular/cli ดังแสดงในรูปที่ \ref{Fig:angular1}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/angular1}
		\caption{ใช้คำสั่งติดตั้ง Angular}
		\label{Fig:angular1}
	\end{figure}

	\item Node.js จะทำการดาวน์โหลดและติดตั้ง Angular 6 ดังแสดงในรูปที่ \ref{Fig:angular2}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/angular2}
		\caption{ใช้คำสั่งติดตั้ง Angular}
		\label{Fig:angular2}
	\end{figure}
\newpage
\item เข้าสู่ไดเร็กทอรีของ project แล้วพิมพ์คำสั่ง ng new my-project ดังแสดงในรูปที่ \ref{Fig:angular3}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.7\columnwidth]{Figures/prepareation/angular3}
	\caption{ใช้คำสั่งสร้าง project}
	\label{Fig:angular3}
\end{figure}

\item ng คือ prefix ของคำสั่ง Angular ในที่นี้เราสร้างโปรเจ็กต์ใหม่ชื่อ my-project รอจนดาวน์โหลดเทมเพลตของ project เสร็จเรียบร้อย ดังแสดงในรูปที่\ref{Fig:angular4}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.7\columnwidth]{Figures/prepareation/angular4}
	\caption{ใช้คำสั่งสร้าง project}
	\label{Fig:angular4}
\end{figure}

	\item เข้าสู่ไดเร็กทอรีของ project แล้วพิมพ์คำสั่ง cd my-project เเละ ng serve --open ดังแสดงในรูปที่\ref{Fig:angular5}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/angular5}
		\caption{ใช้คำสั่งสร้าง project}
		\label{Fig:angular5}
	\end{figure}
\newpage
	\item คำสั่ง serve จะไปเรียกใช้งาน webpack เพื่อเปิด localhost ที่พอร์ต 4200  ดังแสดงในรูปที่\ref{Fig:angular6}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/angular6}
		\caption{การใช้คำสั่งรัน project}
		\label{Fig:angular6}
	\end{figure}

	\item หน้าแรกของเว็บไซต์เเสดงดังรูปที่ \ref{Fig:angular7}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/angular7}
		\caption{หน้าแรกของเว็บไซต์}
		\label{Fig:angular7}
	\end{figure}
\end{enumerate}




