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

\section{ขั้นตอนการติดตั้งโปรแกรม Visual Studio Code หรือ VS Code}
\begin{enumerate}[label=\arabic*.]
	\item เข้าไปที่เว็บไซต์ https://code.visualstudio.com/ และ Download โปรแกรม VS Code โดยเลือกให้ตรงกับ OS ของเครื่องคอมพิวเตอร์
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]{Figures/prepareation/หน้าเว็บดาวน์โหลด Visual Studio Code}
		\caption{หน้าเว็บดาวน์โหลด Visual Studio Code}
		\label{Fig:หน้าเว็บดาวน์โหลด Visual Studio Code}
	\end{figure}

\newpage
	\item  หลังดาวน์โหลดโปรแกรมเสร็จจะได้ไฟล์ ดับเบิ้ลคลิก หรือคลิกขวาและกด “Open” โปรแกรมที่ดาวน์โหลดมา
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/ไฟล์โปรแกรมที่โหลดมาได้}
		\caption{ไฟล์โปรแกรมที่โหลดมาได้}
		\label{Fig:ไฟล์โปรแกรมที่โหลดมาได้}
	\end{figure}
	
	\item  หลังจากคลิกขวาและกด “Open” โปรแกรมที่ดาวน์โหลดมาแล้วระบบจะแสดงหน้าต่าดังรูปที่ ก.3 คลิกปุ่ม “Run”
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างแจ้งเตือนก่อนการติดตั้งโปรแกรม}
		\caption{หน้าต่างแจ้งเตือนก่อนการติดตั้งโปรแกรม}
		\label{Fig:หน้าต่างแจ้งเตือนก่อนการติดตั้งโปรแกรม}
	\end{figure}

\newpage
	\item  หลังจากคลิก Run แล้ว จะแสดงหน้าต่างดังรูปที่ ก.4 เลือก “I accept the agreement” และคลิกปุ่ม “Next”
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างข้อตกลงการใช้งาน Visual Studio Code}
		\caption{หน้าต่างข้อตกลงการใช้งาน Visual Studio Code}
		\label{Fig:หน้าต่างข้อตกลงการใช้งาน Visual Studio Code}
	\end{figure}
	
	\item เลือกพื้นที่ในการจัดเก็บโปรแกรม (แนะนำให้ใช้ Default ที่ให้มา) และคลิกปุ่ม “Next”
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างที่จัดเก็บไฟล์ต่างๆ ของ Visual Studio Code}
		\caption{หน้าต่างที่จัดเก็บไฟล์ต่างๆ ของ Visual Studio Code}
		\label{Fig:หน้าต่างที่จัดเก็บไฟล์ต่างๆ ของ Visual Studio Code}
	\end{figure}

\newpage
	\item  จากนั้นจะแสดงหน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code ทำการกด “Next”
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code}
		\caption{หน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code}
		\label{Fig:หน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code}
	\end{figure}

	\item เลือกส่วนเพิ่มงานให้เลือก Create a desktop icon และ Add to PATH (Requires Shell Restart) จากนั้นให้คลิกปุ่ม “Next”
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างเริ่มทำการติดตั้งทำการกดของ Visual Studio Code}
		\caption{หน้าต่างเริ่มทำการติดตั้งทำการกดของ Visual Studio Code}
		\label{Fig:หน้าต่างเริ่มทำการติดตั้งทำการกดของ Visual Studio Code}
	\end{figure}

\newpage
	\item  คลิกปุ่ม “Install” เพื่อติดตั้งโปรแกรม
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างสุดท้ายการติดตั้งของ Visual Studio Code}
		\caption{หน้าต่างสุดท้ายการติดตั้งของ Visual Studio Code}
		\label{Fig:หน้าต่างสุดท้ายการติดตั้งของ Visual Studio Code}
	\end{figure}
\newpage
	\item  คลิกปุ่ม “Finish” เสร็จสิ้นการติดตั้งโปรแกรม VS Code
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างการติดตั้งของ Visual Studio Code เสร็จสิ้น}
		\caption{หน้าต่างการติดตั้งของ Visual Studio Code เสร็จสิ้น}
		\label{Fig:หน้าต่างการติดตั้งของ Visual Studio Code เสร็จสิ้น}
	\end{figure}
	\item   Visual Studio Code 
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างเมื่อเขาโปรแกรมหลังติดตั้งเสร็จของ Visual Studio Code}
		\caption{หน้าต่างเมื่อเขาโปรแกรมหลังติดตั้งเสร็จของ Visual Studio Code}
		\label{Fig:หน้าต่างเมื่อเขาโปรแกรมหลังติดตั้งเสร็จของ Visual Studio Code}
	\end{figure}
\end{enumerate}

\newpage
\section{การเริ่มต้นใช้ PythonAnywhere}
ตัวอย่างแนะนำการใช้งาน pythonanywhere พัฒนา web app
\begin{enumerate}[label=\arabic*.]
	\item pythonanywhere เป็น web hosting สำหรับภาษา Python แบบฟรี โดยจะนำ web app ที่เราสร้างไปเก็บไว้บน cloud ทำให้สามารถเข้าถึง web ได้แบบออนไลน์
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]{Figures/7/1}
		\caption{หน้าแรกของ pythonanywhere ก่อนเข้าสู่ระบบ}
		\label{Fig:1}
	\end{figure}

\newpage
	\item เมื่อทำการสมัครสมาชิกและเข้าสู่ระบบเรียบร้อยแล้ว ให้กดไปที่ Web
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]{Figures/7/2}
		\caption{หน้าแรกหลังจากทำการเข้าสู่ระบบเสร็จ}
		\label{Fig:2}
	\end{figure}

	\item กดสร้าง web app ใหม่
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/3}
		\caption{หน้าเริ่มการสร้างเว็บ}
		\label{Fig:3}
	\end{figure}

\newpage
	\item จะมีหน้าต่างปรากฏขึ้นบอกว่า domain name ของ web เรานั้นจะมีชื่อเป็น username.pythonanywhere.com ซึ่งในที่นี้คือ lookinggreat.pythonanywhere.com ถ้าต้องการเปลี่ยนชื่อ web ต้อง upgrade account แต่ถ้าไม่ต้องการสามารถกด Next เพื่อสร้าง web app ต่อได้เลย
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/4}
		\caption{หน้าสร้าง web app}
		\label{Fig:4}
	\end{figure}

	\item การ upgrade account ต้องจ่ายเงินเพิ่มแล้วจะได้สิทธิพิเศษตามแต่ละขั้น
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/5}
		\caption{หน้าเงื่อนไขการ upgrade account}
		\label{Fig:5}
	\end{figure}

\newpage	
	\item ถ้าหากกด Next ต่อมาจะแสดงหน้าต่างให้เลือก framework ที่จะใช้ในการสร้าง web ขึ้นมา ในที่นี้ได้เลือกใช้ Django
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/6}
		\caption{หน้าการสร้าง web}
		\label{Fig:6}
	\end{figure}

	\item จากนั้นเลือก version ของ python ที่จะใช้
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/7}
		\caption{หน้าการเลือก version ของ python}
		\label{Fig:7}
	\end{figure}

\newpage
	\item ตั้งชื่อ project และเลือก directory เก็บ file directory ที่เก็บไฟล์นี้จะถูกเก็บไว้ใน cloud ของ pythonanywhere ไม่เกี่ยวข้องกับพื้นที่เก็บข้อมูลในเครื่องแต่อย่างใด
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/8}
		\caption{หน้าการตั้งชื่อ project และเลือก directory เก็บ file directory}
		\label{Fig:8}
	\end{figure}

	\item จะมีข้อความบ่งบอกว่าสร้าง web app สำเร็จแล้วพร้อมกับรายละเอียดของ web app ของเราด้านล่าง
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/9}
		\caption{หน้าการสร้าง web app สำเร็จ}
		\label{Fig:9}
	\end{figure}

\newpage
	\item เมื่อลองเข้าลิ้งค์เว็บของเราจะปรากฏข้อความว่าสามารใช้งาน web ได้ของ Django
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/10}
		\caption{หน้าสามารใช้งาน web ได้ของ Django}
		\label{Fig:10}
	\end{figure}

	\item หากไปที่หน้า Consoles และกด Bash จะเป็นการเปิด Console ขึ้นมา
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/11}
		\caption{หน้า Consoles}
		\label{Fig:11}
	\end{figure}

	\item Consoles มีหน้าที่คล้าย terminal สามารถลง modules เพิ่มเติมได้จากการพิมพ์คำสั่งในหน้านี้
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/12}
		\caption{หน้าการเปิด Console ขึ้นมา}
		\label{Fig:12}
	\end{figure}
\end{enumerate}