jadtaphon 30/04/63

.vs/ProjectSettings.json

+{
+  "CurrentProjectSetting": "No Configurations"
+}
\ No newline at end of file

.vs/VSWorkspaceState.json

+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}
\ No newline at end of file

Document/Latex/.gitignore

+## Core latex/pdflatex auxiliary files:
+*.aux
+*.lof
+*.log
+*.lot
+*.fls
+*.out
+*.toc
+*.fmt
+*.fot
+*.cb
+*.cb2
+.*.lb
+
+## Intermediate documents:
+*.dvi
+*.xdv
+*-converted-to.*
+# these rules might exclude image files for figures etc.
+# *.ps
+# *.eps
+# *.pdf
+
+## Generated if empty string is given at "Please type another file name for output:"
+.pdf
+
+## Bibliography auxiliary files (bibtex/biblatex/biber):
+*.bbl
+*.bcf
+*.blg
+*-blx.aux
+*-blx.bib
+*.run.xml
+
+## Build tool auxiliary files:
+*.fdb_latexmk
+*.synctex
+*.synctex(busy)
+*.synctex.gz
+*.synctex.gz(busy)
+*.pdfsync
+
+## Build tool directories for auxiliary files
+# latexrun
+latex.out/
+
+## Auxiliary and intermediate files from other packages:
+# algorithms
+*.alg
+*.loa
+
+# achemso
+acs-*.bib
+
+# amsthm
+*.thm
+
+# beamer
+*.nav
+*.pre
+*.snm
+*.vrb
+
+# changes
+*.soc
+
+# comment
+*.cut
+
+# cprotect
+*.cpt
+
+# elsarticle (documentclass of Elsevier journals)
+*.spl
+
+# endnotes
+*.ent
+
+# fixme
+*.lox
+
+# feynmf/feynmp
+*.mf
+*.mp
+*.t[1-9]
+*.t[1-9][0-9]
+*.tfm
+
+#(r)(e)ledmac/(r)(e)ledpar
+*.end
+*.?end
+*.[1-9]
+*.[1-9][0-9]
+*.[1-9][0-9][0-9]
+*.[1-9]R
+*.[1-9][0-9]R
+*.[1-9][0-9][0-9]R
+*.eledsec[1-9]
+*.eledsec[1-9]R
+*.eledsec[1-9][0-9]
+*.eledsec[1-9][0-9]R
+*.eledsec[1-9][0-9][0-9]
+*.eledsec[1-9][0-9][0-9]R
+
+# glossaries
+*.acn
+*.acr
+*.glg
+*.glo
+*.gls
+*.glsdefs
+
+# gnuplottex
+*-gnuplottex-*
+
+# gregoriotex
+*.gaux
+*.gtex
+
+# htlatex
+*.4ct
+*.4tc
+*.idv
+*.lg
+*.trc
+*.xref
+
+# hyperref
+*.brf
+
+# knitr
+*-concordance.tex
+# TODO Comment the next line if you want to keep your tikz graphics files
+*.tikz
+*-tikzDictionary
+
+# listings
+*.lol
+
+# makeidx
+*.idx
+*.ilg
+*.ind
+*.ist
+
+# minitoc
+*.maf
+*.mlf
+*.mlt
+*.mtc[0-9]*
+*.slf[0-9]*
+*.slt[0-9]*
+*.stc[0-9]*
+
+# minted
+_minted*
+*.pyg
+
+# morewrites
+*.mw
+
+# nomencl
+*.nlg
+*.nlo
+*.nls
+
+# pax
+*.pax
+
+# pdfpcnotes
+*.pdfpc
+
+# sagetex
+*.sagetex.sage
+*.sagetex.py
+*.sagetex.scmd
+
+# scrwfile
+*.wrt
+
+# sympy
+*.sout
+*.sympy
+sympy-plots-for-*.tex/
+
+# pdfcomment
+*.upa
+*.upb
+
+# pythontex
+*.pytxcode
+pythontex-files-*/
+
+# tcolorbox
+*.listing
+
+# thmtools
+*.loe
+
+# TikZ & PGF
+*.dpth
+*.md5
+*.auxlock
+
+# todonotes
+*.tdo
+
+# vhistory
+*.hst
+*.ver
+
+# easy-todo
+*.lod
+
+# xcolor
+*.xcp
+
+# xmpincl
+*.xmpi
+
+# xindy
+*.xdy
+
+# xypic precompiled matrices
+*.xyc
+
+# endfloat
+*.ttt
+*.fff
+
+# Latexian
+TSWLatexianTemp*
+
+## Editors:
+# WinEdt
+*.bak
+*.sav
+
+# Texpad
+.texpadtmp
+
+# LyX
+*.lyx~
+
+# Kile
+*.backup
+
+# KBibTeX
+*~[0-9]*
+
+# auto folder when using emacs and auctex
+./auto/*
+*.el
+
+# expex forward references with \gathertags
+*-tags.tex
+
+# standalone packages
+*.sta
+

Document/Latex/1-introduction.tex

+\chapter{บทนำ}
+
+\section{ที่มาและเหตุผล }
+การเช็คชื่อเข้าเรียน เป็นสิ่งสำคัญในการตรวจสอบความกระตือรือร้นในการเข้าเรียนของนักศึกษา และเป็นตัวชี้วัดการให้คะแนนนักศึกษาของผู้สอนหรือเช็คยอดนักศึกษาที่เข้าเรียนในคลาสนั้น ๆ ซึ่งการเช็คชื่อเป็นสิ่งสำคัญที่ช่วยคณะกรรมการตรวจสอบ และเป็นหลักฐานในการให้คะแนนของผู้สอนที่จะแสดงต่อคณะกรรมการเมื่อมีการตรวจสอบแหล่งที่มาของคะแนน
+
+การเช็คชื่อในคลาสเรียนส่วนมากเป็นการเรียกชื่อนักศึกษาแล้วให้นักศึกษาขานตอบ ซึ่งจะทำให้การเช็คชื่อนั้นมีความล่าช้าและทำให้เสียเวลาในการเรียนการสอน ซึ่งเวลาที่เสียไปในการเช็คชื่อนักศึกษาสามารถนำไปใช้ทำสิ่งต่าง ๆ ได้ เช่น พักครึ่ง  ทำแบบฝึกหัด ติว ตอบคำถาม และเตรียมตัวสำหรับคาบต่อไป เป็นต้น นอกจากนี้ผู้สอนบางท่านอาจจะใช้วิธีสุ่มเช็คชื่อเพื่อลดเวลาในที่ใช้ในการเช็คชื่อในบ้างคาบเรียน แต่นั่นทำให้นักศึกษาส่วนมากคิดว่าผู้สอนอาจจะไม่เช็คชื่อในคาบเรียนจึงไม่เข้าเรียน และมีผู้สอนบางท่านยังใช้กระดาษในการเช็คชื่อ ซึ่งเป็นการสิ้นเปลืองกระดาษและอาจทำให้กระดาษชำรุด หรือสูญหาย ส่งผลทำให้ไม่มีหลักฐานในการให้คะแนนนักศึกษาที่เข้าเรียน และยังไม่สามารถระบุแหล่งที่มาของคะแนนที่ให้นักศึกษาต่อคณะกรรมการอีกดัวย  
+
+จากปัจจัยที่กล่าวมา ผู้พัฒนาจึงมีความคิดที่จะพัฒนาระบบเช็คชื่อเข้าเรียน โดยจะเน้นให้ระบบใช้งานง่ายไม่ซับซ้อน เข้าถึงง่าย และมีความรวดเร็ว โดยใช้เทคโนโลยี Quick Response Code (QR Code) เพื่อให้ง่ายต่อการใช้งาน ซึ่งจะให้นักศึกษาสแกน QR Code ของผู้สอน โดยผู้สอนจะเปิด QR Code ให้นักศึกษาทุกคนในคลาสเรียนสแกนเพื่อเป็นการเช็คชื่อเข้าเรียน นอกจากนี้นักศึกษาไม่จำเป็นต้องโหลดแอปพลิเคชันเพิ่มก็สามารถเช็คชื่อเข้าเรียนได้ 
+
+\newpage
+\section{วัตถุประสงค์}
+\begin{enumerate}
+	\item เพื่อพัฒนาระบบแอปพลิเคการเช็คชื่อในคลาสเรียนที่มีขนาดใหญ่ 
+	\item  เพื่อเป็นแหล่งเก็บข้อมูลการเข้าเรียนของนักศึกษาและเป็นหลักฐานแสดงการมาเรียนของนักศึกษา ซึ่งจะเป็นแหล่งที่มาของคะแนนการเข้าเรียน
+	\item  เพื่อลดการใช้กระดาษที่ใช้ในการเช็คชื่อ และป้องกันการสูญหายหรือชำรุดของข้อมูล
+\end{enumerate}
+\section{ขอบเขตของโครงงาน}
+\begin{enumerate}[label=1.3.\arabic*]
+	\item ผู้สอน
+	 \begin{itemize}
+		 	\item สามารถเพิ่ม และลบ คลาสเรียน
+		 	\item สามารถตรวจสอบรายชื่อนักศึกในคลาสเรียน
+		 	\item สามารถจัดการคะแนนของนักศึกษา
+		 	\item สามารถสร้าง QR Code สำหรับให้นักศึกษาสแกนเพื่อเช็คชื่อได้
+		 	\item สามารถเพิ่ม ลบ และแก้ไข ชื่อนักศึกษาในคลาสเรียนได้
+		 	\item สามารถรวมไฟล์คะแนน ของคลาสเรียนเดียวกัน
+	 \end{itemize}
+	\item นักศึกษา
+	\begin{itemize}
+		\item สแกน QR Code ของผู้สอนเพื่อเป็นการเช็คชื่อเข้าเรียน
+	\end{itemize}
+\end{enumerate}
+\section{ประโยชน์ที่คาดว่าจะได้รับ}
+\begin{enumerate}
+	\item ช่วยอำนวยความสะดวกผู้สอนและนักศึกษามีเวลาในการเรียนการสอนมากขึ้น
+	\item ช่วยให้นักศึกษามีความกระตือรือร้นในการมาเรียนและตรงต่อเวลา 
+  \item ผู้สอนมีแหล่งเก็บข้อมูลการเข้าเรียนของนักศึกษาและป้องกันการชำรุดหรือเสียหายของข้อมูล
+  \item ผู้สอนตรวจสอบพฤติกรรมการเข้าเรียนของนักศึกษาได้ง่าย
+\end{enumerate}
+\newpage
+\section{เครื่องมือที่ใช้ในการพัฒนา (Development tools)}
+\subsection{ฮาร์ดเเวร์}
+\begin{enumerate}
+	\item สมาร์ทโฟน (Smart phone)
+		\begin{itemize}
+			\item ทำงานบนระบบปฏิบัติการแอนดรอย์เวอร์ชัน 5.0 หรือ API Level 21
+			\item หน่วยประมาลผลกลาง Mediatek MT6753 Octa-core ความเร็ว 1.3 กิกะเฮิร์ตซ์ (Gigahertz, GHz)
+			\item หน่วยประมวลผลกราฟฟิกอย่างน้อย Mali-T720MP3
+			\item หน่วยความจำหลักอย่างน้อย 2 กิกะไบต์ (Gigabyte, GB)
+			\item หน่วยความจำสำรองอย่างน้อย 16 กิกะไบต์ (Gigabyte, GB)
+			\item หน้าจอแสดงผลความละเอียดอย่างน้อย 1080 x 1920 พิกเซล  (Pixel)
+			\item หน้าจอแสดงผลขนาดอย่างน้อย 5 นิ้ว
+			\item กล้องถ่ายรูปความละเอียดอย่างน้อย 13 เมกกะพิกเซล (Magapixel)
+		\end{itemize}
+	
+	\item เครื่องคอมพิวเตอร์ส่วนบุคคล (Personal computer)
+		\begin{itemize}
+			\item  ทำงานบนระบบปฏิบัติการวินดโวส์ 10 (Windows operating system 10)
+			\item  หน่วยประมวลผลกลาง Intel(R) Core(TM) i7-7500U CPU ความเร็ว 2.70 กิกะเฮิร์ต (Gigahertz, GHz)
+			\item  หน่วยประมวลผลกราฟฟิก NVIDIA GeForce 960M ความจำ 4 กิกะไบต์ (Gigabyte, GB) 
+			\item  หน่วยความจำหลัก 4 กิกะไบต์ (Gigabyte, GB)
+			\item  หน่วยความจำสำรอง 1 เทระไบต์ (Terabyte: TB)
+		\end{itemize}
+\end{enumerate}
+
+\subsection{ซอฟต์แวร์ (Software)}
+\begin{enumerate}
+	\item Angular เวอร์ชั่น 8 เป็นเฟรมเวิร์ค (Framework) สำหรับทำหน้าเว็บแสดงผล โดยใช้ JavaScript ในการพัฒนา 
+	\item MongoDB คือฐานข้อมูลแบบไม่มีความสัมพันธ์ของตารางซึ่งมีโครงสร้างแบบ NoSQL (Not Only Structured Query Language) มีรูปแบบการจัดเก็บข้อมูลแบบ JSON(JavaScript Object Notation) 
+	\item Echo Golang เวอร์ชั่น 1.13 ใช้สำหรับทำเว็บเซิฟเวอร์ (Web Server) พัฒนาดัวยภาษา Golang
+	\item Postman คือเครื่องมือสำหรับช่วยในพัฒนา API (Applocation Programming Interface) ใช้ในการทดสอบการทำงานของ Service รวมถึงจำลอง Service
+	\item Visual Studio Code คือเครื่องมือแก้ไขและปรับแต่งโค้ดสำหรับพัฒนาเว็บแอปพลิเคชัน
+	\item Google Chrome คือโปรแกรมเว็บเบราเซอร์ (Web Browser) ใช้สำหรับเปิดเว็บไซต์และเป็นเครื่องมือที่ช้สำหรับตรวจสอบ หรือหาจุดบกพร่องของเว็บแอปพลิเคชัน
+\end{enumerate}
+
+\subsection{แผนการดำเนินการ}
+	ในการสร้างระบบเช็คชื่อดัวยคิวอาร์โค้ด ผู้พัฒนาได้แบ่งขั้นตอนการดำเนินงานไว้ด้วยกัน 7 ขั้นตอน ดังต่อไปนี้
+
+%\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}{22}
+		\gantttitle{2562}{10}
+		\gantttitle{2563}{12}\\
+		\gantttitle{ต.ค.}{2}
+		\gantttitle{พ.ย.}{2}
+		\gantttitle{ธ.ค.}{2} 
+		\gantttitle{ม.ค.}{2}
+		\gantttitle{ก.พ.}{2}
+		\gantttitle{มี.ค.}{2}
+		\gantttitle{เม.ย.}{2}
+		\gantttitle{พ.ค.}{2}
+		\gantttitle{มิ.ย.}{2} 
+		\gantttitle{ก.ค.}{2}
+		\gantttitle{ส.ค.}{2} \\
+		\ganttbar{1.ศึกษาความเป็นไปได้}{1}{6} \\
+		\ganttbar{2.เสนอหัวข้อโครงงาน}{7}{8} \\
+		\ganttbar{3.ศึกษาค้นคว้าข้อมูล}{7}{9} \\
+		\ganttbar{4.ศึกษาการใช้เครื่องมือ}{8}{10} \\
+		\ganttbar{5.วิเคราะห์และออกแบบ}{9}{12} \\
+		\ganttbar{6.เขียนโปรแกรม}{9}{14} \\
+		\ganttbar{7.ทดสอบและแก้ปัญหา}{13}{14} \\
+		\ganttbar{8.จัดทำเอกสาร}{13}{16} \\
+	\end{ganttchart}
+	\label{tab:ganttchart}
+\end{table}
+%\end{landscape}
+%TODO แก้เทมเพลตเอาชื่อตารางไว้ด้านบน

Document/Latex/2-background.tex

+\chapter{ทฤษฎีที่เกี่ยวข้อง}
+บทนี้จะเป็นรายละเอียดเกี่ยวกับทฤษฎีและงานวิจัยที่เกี่ยวของกับการพัฒนาโปรแกรมในครั้งนี้ โดยที่แต่ละหัวข้อจะมีความสัมพันธ์กันเป็นลำดับ โดยหัวข้อที่หนึ่งจะแนะนำความรู้เรื่อง การพัฒนาเว็บแอปพลิเคชัน เพื่อให้เข้าใจพื้นฐานเบื้องต้นเกี่ยวกับที่มาของโครงงาน หัวข้อที่สองที่สามจะช่วยเตรียมให้ผู้อ่านเข้าใจเทคโนโลยที่ใช้ในการออกแบบและพัฒนา ส่วนของระบบเช็คชื่อดัวยคิวอาร์โค้ด
+
+\section{ความรู้พื้นฐานของเว็บแอปพลิเคชัน}
+	เว็บแอปพลิเคชัน \cite{wabapp} คือ โปรแกรมประยุกต์ที่เข้าถึงดัวยโปรแกรมค้นดูเว็บผ่านเครือข่ายคอมพิวเตอร์อย่างอินเทอร์เน็ต โดยระบบเว็บแอปพลิเคชันสามารถแบ่งได้ 2 รูปแบบคือแบบ Online ซึ่งเป็นแบบ Local ใช้ภายในวง LAN โดยไม่จำเป็นต้องใช้อินเทอร์เน็ต และแบบ Global ซึ่งต้องใช้งานผ่านเครือข่ายอินเทอร์เน็ต ทำให้เหมาะสำหรับงานที่ต้องการข้อมูลแบบ Real Time 
+	\subsection{ความสำคัญของเว็บแอปพลิเคชัน}
+	ในอดีตที่ยังไม่มีระบบเว็บแอปพลิเคชันการทำงานของคอมพิวเตอร์ส่วนบุคคลจะเป็น ลักษณะที่เรียกว่า Standalone ยกตัวอย่างเช่น เครื่องคอมพิวเตอร์ที่ติดตั้งโปรแกรมเช่น Microsoft office เป็นต้น โปรแกรมเหล่านี้จะเรียกว่าเป็น Desktop application ซึ่งติดตั้งที่เครื่องคอมพิวเตอร์แต่ละบุคคล โดยโปรแกรมดังกล่าวบางหน่วยงานติดตั้งที่เครื่องคอมพิวเตอร์เป็นลักษณะไคลแอนเซิร์ฟเวอร์ (Client-Server application) เก็บฐานข้อมูลไว้ที่เซิร์ฟเวอร์ (Server) และติดตั้งตัวโปรแกรมที่เครื่องใช้งาน (Client) 
+	ซึ่งตอบสนองความต้องการเพิ่มขึ้นในด้าน Multi-User หรือใช้งานพร้อมกันได้หลายคน โดยใช้ฐานข้อมูลเดียวกันเก็บเป็นฐานข้อมูลส่วนกลาง ซึ่งเทคโนโลยี Desktop Application ไม่สามารถตอบสนองความต้องการในการบริหารจัดการข้อมูลได้ โดยเฉพาะการทำธุรกิจที่ต้องการข้อมูลที่เปลี่ยนแปลงตลอดเวลา ระบบ Client-Server Application ตัวโปรแกรมมีความซับซ้อน การแก้ไข การ Upgrade ทำได้ยุ่งยาก ปัญหาเหล่านี้ ถูกจัดการด้วยเทคโนโลยีเว็บแอปพลิเคชัน เพราะสามารถตอบสนองปัญหาข้างต้นได้เป็นอย่างดี และสามารถแทนที่ Desktop Application ที่เป็น Client-Server Application ได้เป็นอย่างดีตัวโปรแกรมของเว็บแอปพลิเคชัน จะถูกติดตั้งไว้ที่ Server คอยให้บริการกับ Client และที่ Client ก็ไม่ต้องติดตั้งโปรแกรมเพิ่มเติม สามารถใช้โปรแกรมประเภท Brower ที่ติดมากับ OS ใช้งานได้ทันทีอย่าง Internet Explorer หรือ GoogleChorme
+	
+	\subsection{ส่วนประกอบของเว็บแอปพลิเคชัน}
+	การทำความเข้าใจส่วนประกอบของเว็บแอปพลิเคชัน ถือว่าเป็นสิ่งสำคัญเพราะถ้านักพัฒนาโปรแกรม สามารถมองภาพโดยรวมของระบบได้ทั้งหมด จะสามารถเข้าใจถึงกระบวนการทำงานได้ดียิ่งขึ้น และสามารถนำไปช่วยในการออกแบบโปรแกรมที่ต้องการพัฒนาเพื่อให้เกิดประสิทธิภาพในการทำงาน
+	
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.8\columnwidth]{Figures/2/webappsystem}
+		\caption{โครงสร้างของระบบปฏิบัติการแอนดรอยด์}{ที่มา : https://www.blog.tamacorp.com/wp-content}
+		\label{Fig:androidarchitecture}
+	\end{figure}
+	จากโครงสร้างของระบบปฏิบัติการแอนดรอยด์ในรูปที่ \ref{Fig:androidarchitecture} จะสังเกตได้ว่า มีการแบ่งออกเป็นส่วน ๆ โดยจะแบ่งเป็น 2 ส่วนใหญ่ๆ คือ ส่วนประกอบฝั่งผู้ใช้งาน (Client-side Techology) และส่วนประกอบฝั่งเซิร์ฟเวอร์ (Server-side Tchnology)
+
+	\begin{enumerate}
+		\item ส่วนประกอบฝั่งผู้ใช้งาน 
+		
+		จากรูป 2.1 ด้านซ้ายจะเป็นเทคโนโลยีฝั่งผู้ใช้งาน ซึ่งประกอบดัวย 3 ส่วนหลักๆ ได้แก่
+		\begin{enumerate}[label=1.\arabic*]
+			\item เว็บเบราว์เซอร์ (Web Browser) เป็นซอฟต์แวร์ที่ผู้ใช้งานใช้เข้าถึงเว็บแอปพลิเคชั่น โดยเริ่มต้นให้ผู้ใช้งานใส่ URL หรือว่าชื่อของเว็บไซต์ที่ต้องการเข้าใช้งาน เช่น www.google.com เมื่อเบราว์เซอร์ได้รับชื่อเว็บไซตืก็จะทำการแปลงชื่อเว็บไซต์เป็น IP address ผ่าน DNS หลังจากนั่นเบราว์เซอร์จะทำการสร้าง HTTP requst เพื่อส่งคำร้องไปยังเว็บเซิร์ฟเวอร์ผ่านทางเครือข่ายอินเตอร์เน็ต เมื่อได้รับ HTTP response จากเว็บเซิร์ฟเวอร์แล้ว เบราว์เซอร์จะทำหน้าที่ในการอ่าน และแปลง HTTP response ให้เป็นข้อมูลที่ใช้ในการแสดงผลให้กับผู้ใช้งาน
+			\item ส่วนต่อความสามารถเว็บและเบราว์เซอร์ (Web Plugin และ Browser Add-on/Extension)
+			\begin{itemize}
+			\item Web Plugin คือโปรแกรมที่ถูกเขียนให้ทำงานร่วมกับเว็บเบราว์เซอร์ Web Plugin ที่เป็นที่รู้จัก เช่น Adobe Flash Plugin, Pdf reader และ Java Applet เป็นต้น ซึ่งเหล่านี้จะถูกเบราว์เซอร์เรียกใช้ก็ต่อเมื่อเว็บไซต์ที่เข้าใช้งานมีเนื้อหาที่ต้องแสดงผลโดย Plugin
+			
+			\item Browser Add-on/Extension เป็นโปรแกรมที่ใช้ในการเพิ่มความสามารถให้กับเบราวเซอร์ เช่น ส่วนเพิ่มความสามารถที่ช่วยในการจัดการไฟล์ดาวโหลด ส่วนเพิ่มความสามารถที่ช่วยในการดาวโหลดไฟล์วีดิโอ เป็นต้น ซึ่งส่วนเพิ่มความสามารถเบราว์เซอร์เหล่านี้จะเน้นเพิ่มความสามารถให้กับเบราว์เซอร์ มากกว่าการประมวลผลเนื้อหาเว็บไซต์
+		\end{itemize}
+			\item ระบบปฏิบัติการ (Operating System)  ทำหน้าที่ในการจัดการกับทรัพยากรของเครื่องคอมพิวเตอร์ ทำหน้าที่ในการรับ HTTP request จากเบราว์เซอร์และส่งต่อไปให้กับอินเทอร์เน็ต DNS ในระบบปฏิบัติการทำหน้าที่ในการแปลง URL ให้เป็น IP Address เพื่อค้นหาเครื่องเว็บเซิร์ฟเวอร์ สร้างการเชื่อมต่อ (TCP connection) ระหว่างเครื่องผู้ใช้งานและเครื่องเซิร์ฟเวอร์ ดังนั้นการทำงานของระบบปฏิบัติการจะเป็นสิ่งที่ผู้ใช้งานมองไม่เห็นแต่ก็มีความสำคัญมาก
+		\end{enumerate}
+		\item ส่วนประกอบฝั่งเซิร์ฟเวอร์
+		
+		  เว็บเซิร์ฟเวอร์ที่ทำหน้าที่เป็นผู้ให้บริการแก่ผู้ใช้งานเว็บไซต์ประกอบไปด้วยเทคโนโลยีและซอฟต์แวร์หลายส่วนทำงานร่วมกัน โดยซอฟต์แวร์หลักที่ใช้ในการให้บริการของเว็บเซิร์ฟเวอร์ประกอบไปด้วย 4 ส่วนประกอบหลัก
+			\begin{enumerate}[label=1.\arabic*]
+				\item เว็บแอปพลิเคชั่น (Web Application)
+				คือส่วนสำคัญของเว็บไซต์เนื่องจากทำหน้าที่ติดต่อกับผู้ใช้งาน รับและแสดงข้อมูล ประมวลผลข้อมูล จัดการข้อมูลในฐานข้อมูล และอื่น ๆ เรียกได้ว่าเว็บแอปพลิเคชั่นเป็นซอฟต์แวร์ที่ให้บริการผู้ใช้งานทั่วโลกผ่านอินเทอร์เน็ต
+				หากนักพัฒนาได้เขียนเว็บแอปพลิเคชั่นตาม Model-View-Controller (MVC) แล้วก็จะสามารถแบ่งเว็บแอปพลิเคชันออกได้เป็นสามส่วนหลัก ๆ คือ
+				\begin{itemize}
+					\item ส่วนที่ติดต่อกับผู้ใช้งานเพื่อรับข้อมูลและแสดงผล (View)
+					\item ส่วนที่ประมวลผลการทำงาน (Controller)
+					\item ส่วนที่ใช้ในการติดต่อและจัดการกับข้อมูลและฐานข้อมูล (Model)
+				\end{itemize}
+			
+				\item เว็บเซิร์ฟเวอร์ซอฟต์แวร์ (Web Server Software) เป็นโปรแกรมที่ทำงานอยู่บน web server ซึ่งหน้าที่หลักของ web server software คือการประมวลผล HTTP request ที่ได้รับมาและตอบกลับด้วย HTTP response ให้กับผู้ใช้งาน ปัจจุบันมี web server software หลายตัวที่ถูกใช้งานอย่างแพร่หลายเช่น Apache HTTP server, Internet Information Service (IIS) และ Nginx ยังมี web server software ตัวอื่นอีกมากในท้องตลาดที่ไม่ได้กล่าวถึงในที่นี้ อย่างไรก็ตาม web server software ที่ได้รับความนิยมอย่างแพร่หลายมากที่สุดในปัจจุบันคือ Apache HTTP server และผู้ใช้งานมักจะใช้คู่กับ PHP (ตัวแปลภาษา PHP) และ MySQL (ฐานข้อมูล)
+				
+			
+				\item ระบบปฏิบัติการ (Operating System) ระบบปฏิบัติการบนฝั่งของเซิร์ฟเวอร์มีหน้าที่ในการจัดการกับทรัพยากรของเครื่องเซิร์ฟเวอร์ เช่น CPU memory และ bandwidth เป็นต้น เนื่องจาก web application เป็นบริการที่เปิดให้ผู้ใช้งานเข้าถึงได้ตลอดเวลา ดังนั้น ระบบปฏิบัติการบนเซิร์ฟเวอร์จึงต้องมีความเสถียรและสามารถจัดการกับทรัพยากรของเครื่องได้อย่างมีประสิทธิภาพ
+				
+			\end{enumerate}
+		
+	\end{enumerate}
+%	\subsection{ข้อเด่นของระบบปฏิบัติการแอนดรอยด์}
+%	เนื่องจากระบบปฏิบัติการแอนดรอยด์มีการเจริญเติบโตอย่างรวดเร็วและมีส่วนแบ่งตลาดของอุปกรณ์ด้านนี้ขึ้นทุกขณะ ทำให้กลุ่มผู้ใช้งานและกลุ่มนักพัฒนาโปรแกรมให้ความสำคัญกับระบบปฏิบัติการแอนดรอยด์เพิ่มมากขึ้น
+%	
+%	เมื่อมองในด้านของกลุ่มผลิตภัณฑ์บริษัทที่มีการพัฒนาผลิตภัณฑ์รุ่นใหม่ ได้มีการนำเอาระบบปฏิบัติการแอนดรอยด์ไปใช้ในสินค้าของตนเองพร้อมทั้งยังมีการปรับแต่งให้ระบบปฏิบัติการมีความสามารถ การจัดวาง โปรแกรมและลูกเล่นใหม่ ๆ ที่แตกต่างจากคู่แข่งในท้องตลาดโดยเฉพาะอย่างยิ่งกลุ่มสินค้าที่เป็นมือถือรุ่นใหม่(SmartPhone)และอุปกรณ์จอสัมผัส(Touch Screen)โดยมีลักษณะแตกต่างกันไป เช่น ขนาดหน้าจอ ระบบโทรศัพท์ ความเร็วของหน่วยประมวลผล ปริมาณหน่วยความจำ แม้กระทั่งอุปกรณ์ตรวจจับ(Sensor)ต่าง ๆ 
+%	
+%	หากมองในด้านของการพัฒนาโปรแกรม ทางบริษัท Google ได้มีการพัฒนา Application Framework ไว้สำหรับนักพัฒนาใช้งานได้อย่างสะดวกและไม่เกิดปัญหาเมื่อนำชุดโปรแกรมที่พัฒนาขึ้นมา ไปใช้กับอุปกรณ์ที่มีลักษณะต่างกัน เช่น ขนาดจออุปกรณ์ไม่เท่ากัน ก็ยังสามารถใช้งานโปรแกรมได้เหมือนกัน เป็นต้น
+	
+
+
+
+\section{ความรู้พื้นฐานภาษาโก (Go)}
+ภาษาโก \cite{Go} คือ ภาษาโปรแกรมที่เป็นโอเพนซอร์ส (Open-Source) ถูกสร้างขึ้นจากบริษัทกูเกิล ในปี ค.ศ. 2007 โดย Robert Griesemer, Rob Pike และ Ken Thompson เผยแพร่อย่างเป็นทางการ ในปี ค.ศ. 2009 ภาษาโกมีไวยากรณ์คล้ายกับภาษาซี (C) แต่ก็ยอมให้ผู้พัฒนาซอฟต์แวร์สามารถเขียนโปรแกรม ในรูปแบบของภาษาสคริปต์ได้ (script language) 
+
+ภาษาโกถูกออกแบบมาสำหรับการเขียนซอฟต์แวร์ระบบเป็นหลัก มีลักษณะเป็นแบบ statically typed language หมายถึง ชนิดข้อมูลจะถูกกำหนดในช่วงเวลาของการคอมไพล์ โปรแกรม (compile time) มี garbage collection เพื่อช่วยเพิ่มประสิทธิภาพการทำงานของ โปรแกรม มีการสนับสนุนการคอมไพล์โปรแกรมเพื่อนำไปใช้บนแพลตฟอร์มอื่นๆ (cross-compiler) และมีการสนับสนุนการทำงานแบบภาวะพร้อมกัน ที่ถูกออกแบบขึ้นมาตามแนวคิดของ Hoare's Communicating Sequential Processes นอกจากนี้การเขียนโปรแกรมด้วยภาษาโกนั่นง่ายเพราะบางส่วนของภาษาโกมีลักษณะคล้ายคลึงกับภาษาสคริปต์ 
+
+	\subsection{ชุดคำสั่งในภาษาโก}
+	คำสั่งในภาษาโก \cite{Go} มีคำสั่งจำนวนมากให้เลือกใช้งานตามความ เหมาะสมแต่ในระบบนี้ขอนำเสนอ 6 คำสั่งได้แก่ คำสั่ง if-else คำสั่ง func คำสั่ง go คำสั่ง var คำสั่ง for และคำสั่ง channel ซึ่งคำสั่งเหล่านี้เพียงพอต่อการพัฒนาโปรแกรมด้วยภาษาโก 
+	\begin{enumerate}[label=2.2.2.\arabic*]
+		\item คำสั่ง if-else เป็นคำสั่งสำหรับเลือกเส้นทางการทำงานของโปรแกรมตามเงื่อนไขที่ได้ 
+		กำหนดไว้ รูปแบบของคำสั่ง if-else แสดงดังภาพที่ 2.2 จากภาพถ้าเงื่อนไข exp เป็นจริง กลุ่มคำสั่ง
+		ที่อยู่ภายใต้ if จะทำงาน หากเงื่อนไขเป็นเท็จกลุ่มคำสั่งที่อยู่ภายใต้ else จะถูกทำงานแทน โครงสร้างของคำสั่ง if-else แสดงดังภาพที่ 2.2
+			\begin{figure}[H]
+			{\setstretch{1.0}\begin{lstlisting}
+				
+if exp {    
+	//body if 
+	} else{   
+	// body else
+	 }
+	 
+				\end{lstlisting}}
+			\caption{โครงสร้างคำสั่ง if-else }
+			\label{Fig:JavaListing}
+		\end{figure}
+		\item คำสั่ง func เป็นคำสั่งสำหรับสร้างฟังก์ชันเพื่ออำนวยความสะดวกในการประมวลผล กลุ่มคำสั่งต่างๆ รูปแบบของคำสั่ง func แสดงดังภาพที่ 2.3 จากภาพจะเห็นได้ว่าฟังก์ชันชื่อว่า A จะ สามารถรับค่าอยู่ในรูปแบบของ ชื่อว่าตัวแปร param1 ตามด้วย ptype1 คือชนิดของตัวแปร param1 และสามารถรับได้หลายๆค่าโดยคั่นด้วยเครื่องหมายจุลภาค (,) และสามารถคืนค่าได้โดยตัว แปร val1 ตามด้วยชนิดของตัวแปร vtype1 และสามารถคืนค่าได้หลายๆค่าโดยคั่นด้วยเครื่องหมาย จุลภาค โครงสร้างคำสั่ง func แสดงดังภาพที่ 2.3
+		\begin{figure}[H]
+			{\setstretch{1.0}\begin{lstlisting}
+				
+func A(param1 ptype1 | [param… ptype… ,] ) (val1 vtype1 | [val.. vtype… ,]) {   //body func } body else
+				}
+				
+				\end{lstlisting}}
+			\caption{โครงสร้างคำสั่ง func }
+			\label{Fig:JavaListing}
+		\end{figure}
+		\item คำสั่ง go เป็นคำสั่งที่กำหนดให้โปรแกรมทำงานแบบภาวะพร้อมกันอย่างอัตโนมัติ ตัวอย่างรูปแบบของคำสั่งแสดงได้ในภาพที่ 2.4 การทำงานของคำสั่งโก โปรแกรมจะถูกแบ่งออกเป็น โพรเซสย่อยๆหลายอันทำงานแบบภาวะพร้อมกัน  ซึ่งภาษา go เรียกโพรเซสย่อยแต่ละอันว่า goroutines โปรแกรมเมอร์ไม่จำเป็นต้องรู้เรื่องของการแบ่งแยกโปรแกรมออกเป็นโพรเซสย่อยๆ ตัว ภาษาโกจะเป็นตัวจัดการให้โครงสร้างการใช้ของคำสั่ง go แสดงดังภาพที่ 2.4
+		\begin{figure}[H]
+			{\setstretch{1.0}\begin{lstlisting}
+				
+func A() { //body func}  go A() 
+
+				\end{lstlisting}}
+			\caption{โครงสร้างคำสั่ง go }
+			\label{Fig:JavaListing}
+		\end{figure}
+	\item  คำสั่งที่ใช้สำหรับการประกาศตัวแปร แสดงดังภาพที่ 2.5 จากภาพเราสามารถประกาศ ตัวแปรได้ 2 รูปแบบ คือการประกาศแบบใช้คำสั่ง var และการประกาศแบบย่อโดยใช้ เครื่องหมาย := ในการประกาศตัวแปร ทั้งสองแบบมีความแตกต่างกันที่การประกาศในรูปแบบ var สามารถประกาศโดยระบุชนิดของข้อมูลหรือหากไม่ระบุชนิดข้อมูลภาษาโกจะทำการกำหนดชนิด ข้อมูลให้ตามค่าที่อยู่ทางขาวมือของเครื่องหมายเท่ากับโดยอัตโนมัติและสามารถประกาศได้ทั้งภายใน และภายนอกฟังก์ชัน ส่วนการประกาศในรูปแบบเครื่องหมาย := นั้นสามารถประกาศได้เฉพาะภายในฟังก์ชัน เท่านั้นและไม่ต้องระบุชนิดของข้อมูลโดยภาษาโกจะกำหนดชนิดข้อมูลให้อัตโนมัติเช่นกัน โครงสร้าง การประกาศตัวแปร แสดงดังภาพที่ 2.5
+		\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+			
+// การประกาศโดยใช้ var แบบไม่ระบุชนิด 
+var num = 10 
+// การประกาศโดยใช้ var แบบระบุชนิด 
+var num int = 10
+// การประกาศแบบย่อ num := 10  
+
+			\end{lstlisting}}
+		\caption{โครงสร้างการประกาศตัวแปร}
+		\label{Fig:JavaListing}
+	\end{figure}
+	\item คำสั่ง for เป็นคำสั่งที่ทำงานแบบวนซ้ำ โดยจะทำการวนซ้ำถ้าหากเงื่อนไขเป็นจริง รูปแบบของคำสั่งแสดงดังภาพที่ 2.6 จากภาพถ้า condition เป็นจริงกลุ่มคำสั่งที่อยู่ภายใต้ for จะ ทำงานวนไปเรื่อยๆจนกว่าเงื่อนไขจะเป็นเท็จ โดยในภาษาโกนั้นจะไม่มีคำสั่ง while หรือ do-while ดังเช่นภาษาอื่น มีเพียงคำสั่ง for ที่สามารถเขียนแทนคำสั่งเหล่านั้นได้ โครงสร้างของคำสั่ง for แสดง ดังภาพที่ 2.6
+	 	\begin{figure}[H]
+	 	{\setstretch{1.0}\begin{lstlisting}
+	 		
+// คล้าย for ในภาษา C for init; condition; post { } 
+// คล้าย while ในภาษา C  for condition { } 
+// คล้าย for(;;) ในภาษา C  for { }
+
+	 		\end{lstlisting}}
+	 	\caption{โครงสร้างคำสั่ง for }
+	 	\label{Fig:JavaListing}
+	 \end{figure}
+ 	\item คำสั่ง channel เป็นคำสั่งที่ใช้สำหรับเป็นช่องทางในการติดต่อสื่อสารรับหรือส่งข้อมูล ระหว่าง goroutines ที่ทำงานแบบภาวะพร้อมกันโดยจะใช้เครื่องหมาย “<-” ในการระบุว่าต้องการ รับหรือส่งข้อมูล ดังแสดงในภาพที่ 2.7
+ 	 \begin{figure}[H]
+ 	 	{\setstretch{1.0}\begin{lstlisting}
+ 	 		
+// รับค่าจาก channel <- channel 
+// ส่งค่าเข้า channel  channel <-
+
+ 	 		\end{lstlisting}}
+ 	 	\caption{โครงสร้างคำสั่ง channel }
+ 	 	\label{Fig:JavaListing}
+ 	 \end{figure}
+	
+	\end{enumerate}
+
+\newpage
+	\section{ความรู้พื้นฐาน Java Script}
+	 JavaScript \cite{js} คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ที่กำลังได้รับความนิยมอย่างสูง Java JavaScript เป็นภาษาสคริปต์เชิงวัตถุที่เรียกว่า “สคริปต์”  (Script) ซึ่งในการสร้างและพัฒนาเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น ซึ่งมีวิธีการทำงานในลักษณะ “แปลความและดำเนินงานไปทีละคำสั่ง” (Interpret) หรือเรียกว่า อ็อบเจ็กโอเรียนเต็ด (Object Oriented Programming) ที่มีเป้าหมายในการออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ตสำหรับผู้เขียนด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ โดยทำงานร่วมกับภาษา HTML และภาษา Java Script ทำงานได้ทั้งทางฝั่งไคลเอนต์ (Client) และทางฝั่งเซิร์ฟเวอร์ (Server) 
+	 
+	 JavaScript ถูกพัฒนาขึ้นโดย เน็ตสเคปคอมมิวนิเคชันส์ (Netscape Communications Corporation) โดยใช้ชื่อว่า Live Script ออกมาพร้อมกับ Netscape Navigator2.0 เพื่อใช้สร้างเว็บเพจโดยติดต่อกับเซิร์ฟเวอร์แบบ Live Wire ต่อมาเน็ตสเคปจึงได้ร่วมมือกับ บริษัทซันไมโครซิสเต็มส์ปรับปรุงระบบของบราวเซอร์เพื่อให้สามารถติดต่อใช้งานกับภาษาจาวาได้ และได้ปรับปรุง LiveScript ใหม่เมื่อ ปี 2538 แล้วตั้งชื่อใหม่ว่า JavaScript 
+	 
+	 JavaScript สามารถทำให้ การสร้างเว็บเพจ มีลูกเล่น ต่าง ๆ มากมายและสามารถโต้ตอบกับผู้ใช้ได้อย่างทันที เช่น การใช้เมาส์คลิกหรือการกรอกข้อความในฟอร์ม เป็นต้น 
+	 
+	 เนื่องจาก JavaScript ช่วยให้ผู้พัฒนาสามารถสร้างเว็บเพจได้ตรงกับความต้องการและมีความน่าสนใจมากขึ้นประกอบกับเป็นภาษาเปิด ที่ใครก็สามารถนำไปใช้ได้ ดังนั้นจึงได้รับความนิยมเป็นอย่างสูง มีการใช้งานอย่างกว้างขวาง รวมทั้งได้ถูกกำหนดให้เป็นมาตรฐานโดย ECMA การทำงานของ JavaScript จะต้องมีการแปลความคำสั่ง ซึ่งขั้นตอนนี้จะถูกจัดการโดยบราวเซอร์ (เรียกว่าเป็น client-side script) ดังนั้น JavaScript จึงสามารถทำงานได้ เฉพาะบนบราวเซอร์ที่สนับสนุน ซึ่งปัจจุบันบราวเซอร์เกือบทั้งหมดก็สนับสนุน JavaScript แล้ว อย่างไรก็ดีสิ่งที่ต้องระวังคือ JavaScript มีการพัฒนาเป็นเวอร์ชั่นใหม่ ๆ ออกมาด้วยดังนั้น ถ้านำโค้ดของเวอร์ชั่นใหม่ไปรันบนบราวเซอร์รุ่นเก่าที่ยังไม่สนับสนุนอาจจะทำให้เกิดข้อผิดพลาด (Error) ได้
+	 
+	 \subsection{ลักษณะการทำงานของ JavaScript}
+	 JavaScript เป็นภาษาสคริปต์เชิงวัตถุหรือเรียกว่าอ็อบเจ็กโอเรียนเต็ด (Object Oriented Programming) ที่มีเป้าหมายในการออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ตสำหรับผู้เขียนเอกสารด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ทำงานร่วมกับภาษา HTML และภาษาจาวาได้ทั้งทางฝั่งไคลเอนต์ (Client) และ ทางฝั่งเซิร์ฟเวอร์ (Server) โดยมีลักษณะการทำงานดังนี้ 
+
+	\begin{figure}[H]
+			{\setstretch{1.0}\begin{lstlisting}		
+// import ฟังก์ชั่นสำคัญของ angular/core		
+import {Component, OnInit} from `@angular/core`;
+			
+@Component({
+
+//ประกาศชื่อ selector เพื่อให้ component อื่นสามารถนำไปใช้ได้
+	
+selector: 'student',
+			
+//ระบุชื่อไฟล์ html ที่ใช้ฟังก์ชันใน component โดยตรง
+			
+templateUrl: './student.component.html',
+			
+//ระบุ style ที่นำไปใช้กับ html
+			
+styleUrls: ['./student.component.css']
+}) 
+
+export class StudentComponent implements OnInit {
+	
+constructor() { }
+	
+ngOnInit() { }
+
+}		
+			\end{lstlisting}}
+		%\centering
+		%\inputminted{cpp}{sample/main.cpp}
+		%\inputminted[firstnumber=10]{html}{sample/reactapp.jsx}
+		%\inputminted{ts}{sample/student.component.ts}
+		%\inputminted[firstnumber=10]{dart}{sample/flutterapp.dart}
+		\caption{ตัวอย่างคำสั่งภาษา TypeScript ด้วย minted}
+		\label{Fig:tsmintedexample}
+	\end{figure}
+   
+	 \begin{itemize}
+		 \item Navigator JavaScript เป็น Client-Side JavaScript ซึ่งหมายถึง JavaScript ที่ถูกแปลทางฝั่งไคลเอนต์ หมายถึงฝั่งเครื่องคอมพิวเตอร์ของผู้ใช้ไม่ว่าจะเป็นเครื่องพีซี (Personal computer, PC) เครื่องแมคอินทอช (Macintosh) หรืออื่น ๆ จึงมีความเหมาะสมต่อการใช้งานของผู้ใช้ทั่วไปเป็นส่วนใหญ่ 
+		 \item LiveWire JavaScript เป็น Server-Side JavaScript ซึ่งหมายถึง JavaScript ที่ถูกแปลทางฝั่งเซิร์ฟเวอร์ (หมายถึงฝั่งเครื่องคอมพิวเตอร์ของผู้ให้บริการเว็บโดยอาจจะเป็นเครื่องของซันซิลิคอมกราฟิกส์หรืออื่น ๆ) สามารถใช้ได้เฉพาะกับ LIveWire ของเน็ตสเคป โดยตรง
+	 \end{itemize}
+	
+	 \subsection{JavaScript กับ HTML}
+	 การเขียน JavaScript อาจเขียนรวมอยู่ในไฟล์เดียวกันกับ HTML ได้ ซึ่งแตกต่างจากการเขียนโปรแกรมภาษา Java ที่ต้อง เขียนแยกออกเป็นไฟล์ต่างหากไม่สามารถเขียนรวมอยู่ในไฟล์เดียวกับ HTML ได้ วิธีการเขียน JavaScript เพื่อสั่งให้เว็บเพจทำงาน มีอยู่ด้วยกัน 2 วิธี ดังนี้
+	 \begin{itemize}
+	 	\item เขียนด้วยชุดคำสั่งและฟังก์ชันของ JavaScript เอง
+	 	\item เขียนตามเหตุการณ์ที่เกิดขึ้นตามการใช้งานจากชุดคำสั่งของ HTML
+	 \end{itemize}
+ 
+ 
+	  เมื่อเริ่มใช้งานโปรแกรมบราวเซอร์จะอ่านข้อมูลจากส่วนบนของเพจ HTML และทำงานไปตามลำดับจาก บนลงล่าง (top-down) โดยเริ่มที่ส่วน < HEAD >...< /HEAD > ก่อนจากนั้นจึงทำงานในส่วน < BODY >...< /BODY > เป็นลำดับ ซึ่งการทำงานของ JavaScript ดูไม่แตกต่างไปจาก HTML เท่าใดนัก แต่ HTML จะวางเลย์เอาต์โครงสร้างของอ็อบเจ็กต์ภายใน และส่วนเชื่อมโยงกับเว็บเพจเท่านั้น ในขณะที่ JavaScript สามารถเพิ่มเติมส่วนของการเขียนโปรแกรมและลอจิกเข้าไป
+	 
+	 \subsection{โครงสร้างภาษา}
+	 	\begin{enumerate}
+		 \item ตัวแปร (Variable) หมายถึง ชื่อหรือสัญลักษณ์ที่ตั้งขึ้นสำหรับการเก็บค่าใด ๆ ที่ไม่คงที่ โดยการจองเนื้อที่ในหน่วยความจำของระบบเครื่องที่เก็บข้อมูลซึ่งสามารถอ้างอิงได้ มีขนาดขึ้นอยู่กับชนิดของข้อมูลและค่าของข้อมูล ซึ่งค่าในตัวแปรนี้สามารถเปลี่ยนแปลงได้ตามคำสั่งในการประมวลผล
+		 
+		 \item การตั้งชื่อ (Identifier or Name) เป็นชื่อที่ตั้งขึ้นมาเพื่อกำหนดให้เป็นชื่อของโปรแกรมหลัก ฟังก์ชัน ตัวแปร ค่าคงที่ คำสั่ง และคำสงวน โดยมีหลักการตั้งชื่อว่า
+			 \begin{itemize}
+				\item ขึ้นต้นด้วยตัวอักษรในภาษาอังกฤษ ตามด้วยตัวอักษรหรือตัวเลขใด ๆ ก็ได้ 
+				\item ห้ามเว้นช่องว่าง 
+				\item ห้ามใช้สัญลักษณ์พิเศษ ยกเว้นขีดล่าง (\_) และดอลล่าร์ (\$) 
+				\item สำหรับความยาวของชื่อใน JavaScript จะมีความยาวเท่าใดก็ได้ แต่ที่นิยมใช้ ไม่เกิน 20 ตัวอักษร 
+				\item การตั้งชื่อมีข้อพึงระวังว่า จะต้องไม่ซ้ำกับคำสงวน (Reserve word) และตัวอักษรของชื่อจะจำแนกแตกต่างกันระหว่างอักษรตัวพิมพ์เล็กกับอักษรตัวพิมพ์ใหญ่ 
+			    \item ควรจะตั้งชื่อโดยให้ชื่อนั้นมีสื่อความหมายให้เข้ากับข้อมูล สามารถอ่านและเข้าใจได้ 
+				ตัวอย่างเช่น ชื่อที่ถูกต้อง Hahaha, I\_Love\_you, Doll\$ เป็นต้น
+			 \end{itemize}
+		 \item คำสงวน (Reserve word) เป็นคำที่มีความหมายเฉพาะตัวในภาษา JavaScript สงวนไม่ให้มีการตั้งชื่อซ้ำกับชื่อโปรแกรม ฟังก์ชัน ตัวแปร ค่าคงที่ และคำสั่ง คำสงวน สามารถเรียกใช้ได้ทันทีโดยไม่ต้องมากำหนดความหมายใหม่แต่อย่างใด
+	
+		 \item ชนิดของข้อมูลของตัวแปร (Data Type) เป็นการกำหนดประเภทค่าของข้อมูลให้กับตัวแปร เพื่อให้เหมาะสมกับการอ้างอิงข้อมูลจากตัวแปรในการใช้งาน ชนิดข้อมูลของตัวแปรนั้นมีอยู่ด้วยกัน 4 ชนิด ได้แก่
+			 \begin{itemize}
+				 \item number หมายถึง ข้อมูลชนิดตัวเลข ประกอบด้วย เลขจำนวนเต็ม (Integer) และเลขจำนวนจริง (Floating) 
+				 \item logical หมายถึง ข้อมูลทางตรรกะ มี 2 สถานะ คือ จริง (True) และเท็จ (False) 
+				 \item string หมายถึง ข้อมูลที่เป็นข้อความ ซึ่งจะต้องกำหนดไว้ในเครื่องหมายคำพูด (``...") 
+				 \item null หมายถึง ไม่มีค่าข้อมูลใดๆ ซึ่งค่า null ใช้สำหรับการยกเลิกพื้นที่เก็บค่าของตัวแปรออกจากหน่วยความจำ 
+			 \end{itemize}
+		 \item การประกาศตัวแปร (Declarations) เป็นการกำหนดชื่อและชนิดข้อมูลให้กับตัวแปรเพื่อนำไปใช้ในโปรแกรม โดยการตั้งชื่อจะต้องคำนึงถึงค่าของข้อมูลและ ชนิดของข้อมูลที่อ้างอิง นอกจากนี้การตั้งชื่อควรให้สื่อความหมายของข้อมูล และอักษรของชื่อจะจำแนกแตกต่างกันระหว่างอักษรตัวพิมพ์เล็กกับอักษรตัวพิมพ์ใหญ่
+		 
+		 รูปแบบ
+		 Var ชื่อตัวแปร;
+		 เป็นรูปแบบการประกาศตัวแปรปกติหรือ Var ชื่อตัวแปร = ข้อมูล; เป็นรูปแบบการกำหนดค่าเริ่มต้น
+		 ในกรณีที่ต้องการกำหนดตัวแปรหลายตัวในบรรทัดเดียวกันให้ใช้เครื่องหมาย คอมม่า ( , ) คั่นระหว่างชื่อตัวแปรและปิดท้ายด้วยเครื่องหมายเซมิโคล่อน ( ; )
+		 การกำหนดค่าให้กับตัวแปร
+		 
+		 รูปแบบ
+		 ชื่อตัวแปร = ค่าของข้อมูล
+		 โดยที่ค่าของข้อมูล ได้แก่
+		 \begin{itemize}
+		 	\item ข้อมูลที่เป็นตัวเลข โดยกำหนดตัวเลขไปได้เลย เช่น num = 500
+		 	\item ข้อมูลในทางตรรกะ ได้แก่ จริง (True) หรือ เท็จ (False) เช่น test = True; 
+		 	\item ข้อมูลสตริง ให้กำหนดอยู่ในเครื่องหมายคำพูด (``...") เช่น name = ``Adisak";
+		 \end{itemize}
+		 ตัวแปรมี 2 จำพวก หากกำหนดชื่อตัวแปรไว้ที่โปรแกรมหลักโดยไม่ได้อยู่ภายในขอบเขตฟังก์ชันใด ๆ เรียกว่าเป็นตัวแปรแบบโกลบัล (Global) ตัวแปรจำพวกนี้จะมีค่าคงอยู่ในหน่วยความจำตลอดการทำงานของโปรแกรม ทำให้สามารถเรียกใช้ได้จากทุก ๆ ส่วนของโปรแกรม รวมถึงภายในฟังก์ชันต่าง ๆ ด้วย
+		 แต่ถ้ากำหนดตัวแปรไว้ภายในขอบเขตฟังก์ชันใด ๆ จะเรียกว่าเป็นตัวแปรแบบ โลคัล (Local) เพราะจะเป็นตัวแปรที่มีค่าคงอยู๋ และสามารถเรียกใช้ได้เฉพาะภายในขอบเขตของฟังก์ชันนั้น ๆ เท่านั้น 
+		 
+		 \item ตัวแปรแบบอาร์เรย์ (Array) หมายถึงตัวแปรซึ่งมีค่าได้หลายค่าโดยใช้ชื่ออ้างอิงเพียงชื่อเดียว ด้วยการใช้หมายเลขลำดับเป็นตัวจำแนกความแตกต่างของค่าตังแปรแต่ละตัว ถ้าจะเรียกตัวแปรชนิดนี้ว่า “ตัวแปรชุด” ก็เห็นจะไม่ผิดนัก ตัวแปรชนิดนี้มีประโยชน์มาก ลองคิดถึงค่าข้อมูลจำนวน 100 ค่า ที่ต้องการเก็บไว้ในตัวแปรจำนวน 100 ตัว อาจทำให้ต้องกำหนดตัวแปรที่แตกต่างกันมากถึง 100 ชื่อ กรณีอย่างนี้ควรจะทำอย่างไรดี แต่ด้วยการใช้สมบัติอาร์เรย์ สามารถนำตัวแปรหลาย ๆ ตัวมาอยู่รวมเป็ฯชุดเดียวกันได้และสามารถเรียกใช้ตัวแปรทั้งหมดโดยระบุผ่านชื่อเพียงชื่อเดียวเท่านั้น ด้วยการระบุหมายเลขลำดับ หรือ ดัชนี (index) กำกับตามหลังชื่อตัวแปร ตัวแหรเพียงชื่อเดียวจึงมีความสามารถเทียบได้กับตัวแปรนับร้อยตัว พันตัว (ตัวที่ 1) ในตัวแปรแบบอาร์เรย์มีดัชนีเป็น 0 ส่วนตัวแปรต่อ ๆ ไปก็จะมีดัชนีเป็น 1,2,3,... ไปตามลำดับ เมื่อต้องการระบุชื่อตัวแปรแบบอาร์เรย์แต่ละตัว ก็จะใช้รูปแบบ name[0], name[1],... เรียงต่อกันไปเรื่อย ๆ สามารถสร้างตัวแปรอาร์เรย์ใหม่ด้วย myArray = new Array() ดังรูป 2.9
+		 			\begin{figure}[H]
+		 				{\setstretch{1.0}\begin{lstlisting}
+ myArray[0] = 17;
+ myArray[1] = "Nun";
+ myArray[2] = "Stop";
+		 					\end{lstlisting}}
+		 				\caption{ตัวแปรอาร์เรย์}
+		 				\label{Fig:ตัวแปรอาร์เรย์}
+		 			\end{figure}	
+\newpage
+		 \item ค่าคงที่ (Literal หรือ Constant) หมายถึง ค่าของข้อมูลที่เมื่อกำหนดแล้วจะทำการเปลี่ยนแปลงค่าเป็นอย่างอื่นไม่ได้ ชนิดข้อมูลของค่าคงที่ได้แก่
+			 \begin{itemize}
+				  \item เลขจำนวนเต็ม (Integer) เป็นตัวเลขที่ไม่มีเศษทศนิยม สามารถเขียนให้อยู่ในแบบ เลขฐานสิบ (0-9), เลขฐานสิบหก (0-9, A-F) หรือ เลขฐานแปด (0-7) โดยการเขียนเลขฐานแปดให้ นำหน้าด้วย O  (Octenary) ส่วนการเขียนเลขฐานสิบหกให้นำหน้าด้วย Ox หรือ OX (Hexadenary) 
+				  \item เลขจำนวนจริง (Floating) ใช้รูปแบบการเขียนโดยประกอบไปด้วยตัวเลข จุดทศนิยมและตัวเลขยกกำลัง E (Exponential) เช่น 
+				  5.00E2 จะหมายถึงค่า 5.00 คูณด้วย 10 ยกกำลัง 2 จะมีค่าเป็น 500 
+				  3.141E5 จะหมายถึงค่า 3.141 คูณด้วย 10 ยกกำลัง 5 จะมีค่าเป็น 314,1000 
+				  \item ค่าบูลีน (Boolean) เป็นค่าคงที่เชิงตรรกะ คือมีค่าเป็น จริง (True) และ เท็จ (False) เท่านั้น 
+				  \item ข้อความสตริง (String) เป็นค่าคงที่แบบข้อความที่อยู่ภายในเครื่องหมายคำพูด “...” หรือ `...' เช่น “บริษัท เอ็กซ์ทรีม จำกัด”, `นางนฤมล เวชตระกูล' 
+			 \end{itemize}
+		
+		 \item รหัสคำสั่งพิเศษ (Character escape code) เป็นการกำหนดรหัสเพื่อควบคุมงานพิมพ์สตริงโดยใช้เครื่องหมาย Backslash นำหน้าตัวอักษรที่ต้องการกำหนดเป็นรหัส เพื่อให้กลายเป็นรหัสคำสั่งพิเศษ
+		 รหัส Character escape code
+		 
+		 \item นิพจน์ (Expression) เป็นข้อคำสั่งที่ใช้กำหนดค่าของข้อมูล เช่น การบวกตัวเลข การเปรียบเทียบข้อมูล โดยการกำหนดชื่อของตัวแปร ตามด้วยเครื่องหมายที่ต้องการกระทำ (Operations) ต่อข้อมูลเป็นผลให้เกิดค่าข้อมูลใหม่ค่าหนึ่งให้กับตัวแปรเพื่อนำไปใช้งาน
+		 
+		 นิพจน์ JavaScript มีด้วยกัน 3 ชนิดดังนี้
+			 \begin{itemize}
+			 	 \item นิพจน์คณิตศาสตร์ (Arithmetic) เป็นนิพจน์ที่ใช้เครื่องหมายทางคณิตศาสตร์เป็นตัวกระทำ ผลลัพธ์ที่ได้จะมีค่าเป็นตัวเลขให้กับตัวแปร
+			 	 เช่น ให้ตัวแปร num เก็บตัวเลข 5000 จะเขียนได้ดังนี้
+			 	 num = 5000;
+			 	 \item นิพจน์ตรรกะ (Logical) เป็นนิพจน์ในการเปรียบเทียบข้อมูลโดยใช้เครื่องหมายในการเปรียบเทียบเพื่อตรวจสอบข้อมูลในการเปรียบเทียบว่าจริงหรือเท็จ
+			 	 เช่น กำหนดให้ ดังรูป 2.10
+			 	 		 			\begin{figure}[H]
+			 	 		 				{\setstretch{1.0}\begin{lstlisting}
+a = 50;
+b = 70;
+c = b>a;
+			 	 		 					\end{lstlisting}}
+			 	 		 				\caption{การเปรียบเทียบว่าจริงหรือเท็จ}
+			 	 		 				\label{Fig:การเปรียบเทียบว่าจริงหรือเท็จ}
+			 	 		 			\end{figure}	
+			 	 ผลลัพธ์ที่ได้คือ c จะมีค่าเป็นจริง (True)
+			 	 \item นิพจน์ข้อความ (String)
+			 	 เป็นนิพจน์เกี่ยวกับการกำหนดข้อความ การเชื่อประโยคข้อความ ใช้ประมวลผลข้อความในลักษณะต่าง ผลลัพธ์ที่ได้จึงมีค่าเป็นตัวอักษรหรือข้อความเสมอ
+			 	 เช่น ให้ตัวแปร name เก็บชื่อ Adisak จะเขียนได้ดังนี้
+			 	 name = ``Adisak";
+			 \end{itemize}
+		
+		 \item ตัวดำเนินการ (Operator) หมายถึง เครื่องหมายกำหนดกรรมวิธีทางคณิตศาสตร์ พีชคณิต บูลีน การเปรียบเทียบ ระหว่างข้อมูล 2 ตัว ซึ่งเรียกว่า Operand โดยอาจมีค่าเป็นตัวเลข ข้อความ ค่าคงที่ หรือตัวแปรต่าง ๆ
+		 
+		 \item ชนิดของตัวดำเนินการ
+			 \begin{itemize}
+			 			 \item ตัวดำเนินการคณิตศาสตร์ (Arithmetic operator) หมายถึง ใช้สำหรับคำนวณโอประแรนด์ที่เป็นค่าคงที่หรือตัวแปรก็ได้ โดยให้ค่าผลลัพธ์เป็นตัวเลขค่าเดียว
+			 			 
+			 			 \item ตัวดำเนินการเชิงเปรียบเทียบ (Comparison operator) หมายถึง เครื่องหมายในการเปรียบเทียบข้อมูล ผลลัพธ์ที่ได้จะมีค่าตรรกะบูลลีนเป็น จริง (True) และ เท็จ (False)
+			 			 
+			 			 \item ตัวดำเนินการเชิงตรรกะ (Logical operator) เป็นเครื่องหมายที่ให้ค่าจริง (True) และ เท็จ (False) ในการเปรียบเทียบ
+			 			 
+			 			 \item ตัวดำเนินการเชิงข้อความ (String operator) เป็นการเชื่อมประโยคข้อความเข้าด้วยกัน (concatenation) โดยใช้เครื่องหมายบวก (+) เป็นตัวกระทำ
+			 			 ดังรูป 2.11 
+		 	 		 			\begin{figure}[H]
+		 	 		 				{\setstretch{1.0}\begin{lstlisting}
+Name = "Bodin";
+Say = "Hey "+Name;
+		 	 		 					\end{lstlisting}}
+		 	 		 				\caption{ตัวดำเนินการเชิงข้อความ}
+		 	 		 				\label{Fig:ตัวดำเนินการเชิงข้อความ}
+		 	 		 			\end{figure}	
+			 			 ผลลัพธ์ที่ได้ Say จะมีข้อความเป็น Hey Bodin
+			 			 
+			 			 \item ตัวดำเนินการระดับบิต (Bitwise operator) เป็นการดำเนินการเชิงตรรกะในระดับบิต โดยจะใช้มุมมองในแบบเลขฐาน 2 มาจัดการกับข้อมูล นั่นคือ ข้อมูลตัวเลขนั้นจะถูกแปลงเป็นเลขฐานสองในหน่วยความจำในขณะที่มีการดำเนินการเชิงตรรกะในระดับบิต ซึ่งโดยปกติแล้วการกระทำใน JavaScript จะอยู่ในระดับตัวอักษร ที่เรียกว่า ระดับไบต์ (byte) 
+			 \end{itemize}
+	 \end{enumerate}
+	 
+	 \section{ความรู้พื้นฐาน Angular Fronted Framework}
+		Angular \cite{angular} เป็นเฟรมเวิร์คที่เน้นเรื่องการทำ User Interface คือเป็นจาวาสคริปต์เฟรมเวิร์คที่เข้ามาช่วยเรื่องการแสดงผล เป็นเฟรมเวิร์คที่เปิดโอเพนซอร์ส   โดยวัตถุประสงค์หลังของการงานสำหรับสร้างแอปพลิเคชั่นในฝั่งไคลเอ็นในรูปแบบของ HTML, CSS และ JavaScript/TypeScript ซึ่ง TpyeScript จะถูก compile ไปเป็น JavaScript
+
+
+		แองกูลาร์เป็นเฟรมเวิร์คช่วยจัดการและทำให้การพัฒนาเว็บง่ายขึ้น เน้นพัฒนาส่วนติดต่อผู้ใช้ของเว็บ เช่น components, declarative UI, hot-reloading, time-travel debugging และอื่น ๆ ให้สะดวกต่อการใช้งาน พยายามลดสิ่งที่ไม่จำเป็นต่อการพัฒนาเว็บออกทำให้มีขนาดเล็กและง่ายต่อการนำไปใช้ของนักพัฒนา 
+	
+		
+		\subsection{การติดตั้ง}
+		การติดตั้งเพื่อใช้งานแองกูลาร์จำเป็นต้องติดตั้ง Nodejs เวอร์ชั่น 6.9 ขึ้นไป และติดตั้ง npm เวอร์ชั่น 3 ขึ้นไป เมื่อตรวจสอบการติดตั้งว่าพร้อมแล้ว ก็สามารถติดตั้งและรันแองกูลาร์ได้ดังวิธีต่อไปนี้
+			\begin{itemize}
+				\item Angular Cli เป็นชุดคำสั่งที่ใช้ในการสร้าง Project ด้วย Angular ซึ่งได้มีการรวบรวมชุดเครื่องมือรวมถึงไลบรารีต่าง ๆ ที่จำเป็นต่อการพัฒนาไว้ โดยเราสามารถเลือก Templates เพื่อใช้งานตามความเหมาะสมของงานได้
+				\begin{enumerate} [label={\arabic*}.]
+					\item ทำการใช้คำสั่ง npm install -g @angular/cli เพื่อติดตั้ง angular CLI
+					\item ทำการใช้คำสั่ง ng new my-project เพื่อการสร้าง Project 
+					\item ทำการใช้คำสั่ง cd my-project เพื่อเข้าไปที่ path ของ Project
+					\item ทำการใช้คำสั่ง npm install เพื่อติดตั้ง node module ซึ่งเป็นชุดเครื่องมือที่ใช้สำหรับพัฒนาเว็บแอปพลิเคชัน
+					\item ทำการใช้คำสั่ง ng serve เริ่มการทำงานของโปรแกรม
+				\end{enumerate}
+			\end{itemize}
+		\subsection{คุณลักษณะของแองกูลาร์}
+		ในหัวข้อนี้จะขอกล่าวถึงคุณลักษณะของแองกูลาร์เวอร์ชั่น 8 เพราะเป็นเวอร์ชั่นที่ใช้พํฒนาระบบนี้
+			\begin{itemize}
+				\item Angular CLI 8 เปลี่ยนมาใช้ dart-sass แทน node-sass ทำให้การ build ไฟล์ Sass เร็วขึ้นอีกมาก
+				\item ใน Angular 8 รองรับการใช้งาน compiler (และ runtime) ตัวใหม่ที่ชื่อว่า Ivy ทำให้ประสิทธิภาพของโปรเจค Angular เราดีขึ้นมาก 
+				สามารถทำได้ตอนสร้างโปรเจคใหม่ ด้วยคำสั่ง ดังรูป2.12
+						 	 		 			\begin{figure}[H]
+						 	 		 				{\setstretch{1.0}\begin{lstlisting}
+ng new project –enable-ivy
+						 	 		 					\end{lstlisting}}
+						 	 		 				\caption{สร้างโปรเจคใหม่แบบ Ivy}
+						 	 		 				\label{Fig:Components}
+						 	 		 			\end{figure}		 	 		 		 		
+			\end{itemize}
+		\subsection{ข้อดีของ Angular}
+		\begin{itemize}
+			\item ช่วยแยก Logic การตัดสินใจออกจากโค้ด (Code) การแสดงผล
+			\item ช่วยแยกหน้าเว็บออกเป็น Component ทำให้การจัดการง่ายขึ้นและนำกลับมาใช้ได้
+			\item ช่วยจัดการเรื่อง Dynamic data 
+			\item มีการเก็บสถานะต่าง ๆ ไว้ที่จุดเดียวเพื่อให้ง่ายต่อการจัดการและการเรียกใช้งานของ Component โดยการใช้งาน Angular
+		\end{itemize}
+\newpage
+	\section{ความรู้พื้นฐาน MongoDB}
+	MongoDB \cite{MongoDB} คือ ฐานข้อมูลแบบไม่มีความสัมพันธ์ของตารางแบบมีโครงสร้าง (Structured Query Language: SQL) หรือเรียกอีกชื่อหนึ่งว่า NoSQL มีรูปแบบการจัดการเก็บข้อมูลแบบ JSON (JavaScript Object Notation) 
+	\subsection{ทำไมถึงเลือกใช้ MongoDB}
+	 ในการพัฒนาซอฟต์แวร์อาจพบว่าการเปลี่ยนแปลงของข้อมูลจากระบบไปยังฐานข้อมูลเชิงโครงสร้างและต้องนำข้อมูลนั้นมาแสดงผลนั้นมีความยุ่งยาก ซึ่งในบางครั้งอาจจะมีการแก้ไขจัดการปัญหาดัวยการทำ Normalization แต่ผลลัพธิ์ที่ได้ส่วนใหญ่ระบบกลับไม่สามารถรองรับการใช้งานจำนวนมากได้ MongoDB จึงมีบทบาทเพื่อมาแก้ไขปัญหาดังกล่าว ทำให้ไม่จำเป็นต้องแปลงข้อมูลซ้ำซ้อน และโดยเฉพาะในปัจจุบันระบบงานมีรูปแบบข้อมูลหลากหลายมาก มีปริมาณสูง ทำให้ระบบจัดเก็บข้อมูลต้องพร้อมรองรับได้ โดยสาเหตุหลักที่สมควรเลือกใช้งานฐานข้อมูล MongoDB คือ เพื่อปรับปรุงการพัฒนาระบบฐานข้อมูล และปรับปรุงประสิทธิภาพในการเข้าถึงข้อมูล เมื่อข้อมูลมีปริมาณมาก เพื่อลดเวลาในการรับส่งข้อมูล และเพิ่มจำนวน transaction/request ที่ถูกสร้างขึ้น 
+	 \subsection{Schema-less คืออะไร}
+	 Shema-less คือ การไม่กำหนดโครงสร้างของฐานข้อมูล NoSQL ซึ่งมีความแตกต่างจาก SQL ปกติ เช่นแสดงในรูป 2.13 Collection มีแค่ name ต่อมาเราสามารถเพิ่มการเก็บ position ก็สามารถเพิ่มได้เลย
+		\begin{figure}[H]
+			{\setstretch{1.0}\begin{lstlisting}
+{ "name" : "Phon"}
+				
+{ "name" : "Phon", "position" : "Developer"}
+				\end{lstlisting}}
+			\caption{ตัวอย่างข้อมูลใน Collection }
+			\label{Fig:Collection}
+		\end{figure}
+
+\newpage
+	\section{เอกสารและงานวิจัยที่เกี่ยวข้อง}
+		  กล่าวถึงเอกสาร งานวิจัย หรือระบบงานที่คล้ายกัน โดยแต่ละหัวข้อให้อธิบายความสำคัญ ฟังก์ชันการทำงาน ข้อดี และข้อเสีย ดังต่อไปนี้
+		 \subsection{เว็บไซต์ Plickers}
+		 Plickers \cite{plickers} เป็นเว็บที่ให้บริการอาจารย์สำหรับจัดการเรียนการสอน ซึ่งภายในเว็บจะสามารถสร้างชั้นเรียนได้ โดยอาจารย์เป็นคนเพิ่มนักศึกษาภายในชั้นเรียนเข้าระบบ และสามารถเช็คชื่อนักศึกษาได้ โดยการสแกนคิวอาร์โค้ดของนักศึกษาที่ได้มาจากระบบ อีกทั้งยังสามารถสร้างแบบฝึกหัดภายในชั้นเรียนได้ ดังแสดงในรูป 2.14
+		 
+		 
+		 โดยคิวอาร์โค้ดนั้นจะมีกระดาษเป็นคิวอาร์โค้ดให้นักศึกษาทุกคนถือ ซึ่งกระดาษคิวอาร์โค้ดจะมีด้านที่แตกต่างกัน 4 ด้าน โดยแต่ละด้านจะมีตัวเลขเฉพาะของนักศึกษาแต่ละคนอยู่ที่มุมกระดาษดังรูป 2.15 ซึ่งคิวอาร์โค้ดที่นักศึกษาได้นั่นจะนำมาใช้ในการเช็คชื่อมาเรียนหรือตอบคำถาม โดยการเช็คชื่ออาจารย์เป็นผู้สแกนคิวอาร์โค้ดของนักศึกษา ส่วนการตอบคำถามให้นักศึกษาพลิกกระดาษโค้ดของตนเองเพื่อเลือกคำตอบ และอาจารย์จะเป็นผู้สแกนคิวอาร์โค้ด 
+		 
+		 
+		 เว็บไซต์ plickers สามารถเข้าไปใช้งานได้ที่ https://get.plickers.com ซึ่งเป็นระบบเปิดให้ใช้งานได้ฟรี
+			 \begin{figure}[H]
+			 	\centering
+			 	\includegraphics[width=0.8\textwidth]{Figures/2/plickers}
+			 	\caption{หน้าแรกของเว็บไซต์ plickers}{ที่มา : https://get.plickers.com}
+			 	\label{Fig:plickers}
+			 \end{figure}
+		
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=0.8\textwidth]{Figures/2/plickers_qr}
+				\caption{คิวอาร์โค้ดของ plickers}{ที่มา : https://get.plickers.com}
+				\label{Fig:plickers1}
+			\end{figure}
+			\begin{itemize}
+				\item ข้อดี \\
+				- ฟังก์ชันการใช้งานหลากหลาย เช่น สามารถทำแบบฝึกหัดออนไลน์ได้ และสามารถใช้ในการเช็คชื่อเข้าเรียนได้  เป็นต้น \\ 
+				- สามารถใช้ได้ทั้งคอมพิวเตอร์ และโทรศัพท์มือถือ โดยเข้าได้ทั้งในเว็บเบราว์เซอร์และแอปพลิเคชันบนโทรศัพท์มือถือ \\ 
+				- ใช้งานได้ฟรี \\ 
+				\item ข้อเสีย \\
+				- ในการเช็คชื่อหรือการทำแบบฝึกหัดยังจำเป็นจะต้องพิมพ์คิวอาร์โค้ดให้นักเรียน นักศึกษาถือซึ่งถ้าหากคิวอาร์โค้ดชำรุดหรือขาด ก็จะไม่สามารถใช้งานคิวอาร์โค้ดได้ \\
+			\end{itemize}
+		
+		
+		
+		\subsection{เว็บไซต์ smart classroom QR-Code Check-in}
+		เว็บ smart classroom QR-Code Check-in \cite{smartclassroom} เป็นเว็บที่ให้บริการอาจารย์ในการเช็คชื่อนักศึกษา และเก็บข้อมูลนักศึกษาที่มาเรียนในรูปแบบออนไลน์บนเว็บเบราว์เซอร์ 
+		
+		
+		การทำงานของเว็บ smart classroom คือ อาจารย์สามารถสร้างชั้นเรียน และจัดการข้อมูลต่าง ๆ ในชั้นเรียนได้ ซึ่งการเช็คชื่อจะทำได้ โดยอาจารย์เป็นผู้พิมพ์คิวอาร์โค้ดให้นักศึกษาทุกคนในชั้นเรียนถือ แล้วอาจารย์เป็นผู้สแกน 
+		
+		โดยเว็บ smart classroom QR-Code Check-in สามารถเข้าใช้งานที่ http://www.mse-exam.net ซึ่งระบบเปิดให้ใช้งานได้ฟรี
+			\begin{figure}[H]
+			 	\centering
+			 	\includegraphics[width=0.8\textwidth]{Figures/2/smartclassroom}
+			 	\caption{หน้าแรกของเว็บไซต์ smart classroom QR-Code Check-in}{ที่มา : http://www.mse-exam.net/qr}
+			 	\label{Fig:smartclassroom0}
+			 \end{figure}
+			\begin{itemize}
+				\item ข้อดี \\
+				- ใช้งานง่าย และฟรี \\ 
+				- สามารถใช้ได้ทั้งคอมพิวเตอร์ และโทรศัพท์มือถือ โดยเข้าได้ทั้งในเว็บเบราว์เซอร์และแอปพลิเคชันบนโทรศัพท์มือถือ \\ 
+				\item ข้อเสีย \\
+				- ในการเช็คชื่อหรือการทำแบบฝึกหัดยังจำเป็นจะต้องพิมพ์คิวอาร์โค้ดให้นักเรียน นักศึกษาถือซึ่งถ้าหากคิวอาร์โค้ดชำรุดหรือขาด ก็จะไม่สามารถใช้งานคิวอาร์โค้ดได้ \\
+			\end{itemize}			 
+
+		\subsection{โปรแกรม Student Care}
+		โปรแกรม Student Care \cite{StudentCare} เป็นโปรแกรที่ให้บริการเกี่ยวกับการเช็คชื่อนักเรียนในการมาโรงเรียน ซึ่งโปรแกรมจะเป็นระบบสแกนในหน้าผ่านกล้อง AI โดยระบบจะตรวจจับใบหน้านักเรียนแล้วตรวจสอบข้อมูลในฐานข้อมูล ซึ่งอำนวยความสะดวกให้กับคุณครูและนักเรียนในความรวดเร็วของการเช็คชื่อ ดังแสดงในรูป 2.17 นอกจากนี้ยังมีระบบแจ้งเตือนไปให้ผู้ปกครองว่านักเรียนมาเรียนหรือไม่ โดยระบบจะแจ้งเตือนผ่านทาง Line Application 
+		
+		
+		โดยโปรแกรม Student Care สามารถติดต่อสอบถามได้ที่ http://www.student.co.th ซึ่งเว็บสำหรับติดต่อเจ้าหน้าที่ที่ติดตั้งโปรแกรม Student Care
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=0.8\textwidth]{Figures/2/studentcare02}
+				\caption{โปรแกรม Student Care}{ที่มา : http://www.student.co.th/}
+				\label{Fig:StudentCare1}
+			\end{figure}
+			\begin{itemize}
+				\item ข้อดี \\
+				- มีเทคโนโลยีที่ทันสมัยและใช้งานง่าย \\ 
+				- มีการแจ้งเตือนถึงผู้ปกครองของนักเรียน
+				\item ข้อเสีย \\
+				- การจะใช้งานระบบ Student Care จำเป็นต้องเสียค่าบริการรายเดือน \\
+				- ระบบสแกนใบหน้ายังไม่สามารถแยกภาพถ่ายกับคนจริงได้ \\
+			\end{itemize}
+	

Document/Latex/3-design.tex

+\chapter{การวิเคราะห์และออกแบบระบบ}
+
+การวิเคราะห์และออกแบบระบบก่อนดำเนินการจริงเป็นอีกหนึ่งขั้นตอนที่มีความสำคัญมาก เพราะการวิเคราะห์และออกแบบระบบนั้นเป็นการกระทำที่ทำให้ผู้พัฒนาเห็นรายละเอียดส่วนย่อยของงานทั้งหมด เพิ่มประสิทธิภาพในการวางแผน การทำงาน และยังช่วยลดปัญหาที่อาจจะเกิดขึ้นในระหว่างพัฒนา เพื่อให้ระบบมีความสมบูรณ์มากยิ่งขึ้น เนื่องจากการวิเคราะห์และออกแบบระบบนั้นจะช่วยให้ให้บริการ จัดการทรัพยากรได้อย่างคุ้มค่าและตรงตามความต้องการของระบบ
+
+การวิเคราะห์และออกแบบระบบเช็คชื่อดัวยคิวอาร์โค้ด ในบทนี้จะมีขั้นตอนเพื่อให้เห็นการดำเนินงานอย่างมีระบบ ในหัวข้อแรกจะนำเสนอภาพรวมของระบบ ก่อนจะนำเสนอเอกสารแสดงความต้องการของระบบซึ่งจะทำให้เห็นที่มาของเพจต่าง ๆ ในขั้นตอนของการออกแบบในหัวข้อที่สาม ส่วนหัวข้อที่เหลือจะแสดงแผนภาพการการทำงานของระบบโดยใช้ UML diagram ซึ่งประกอบไปด้วย Use Case, Class และ Sequence Diagram เพื่อแสดงรายละเอียดของระบบก่อนนำไปเขียนคำสั่งด้วยภาษาโปรแกรมในบทต่อไป
+
+\begin{enumerate}[label=3.\arabic*]
+	\item โครงสร้างภาพรวมของระบบ (System Architecture) เป็นการออกแบบภาพรวมและเทคโนโลยีของระบบ
+	\item System Requirements คือ ความต้องการหรือสิ่งที่ระบบควรจะทำ หรือหน้าที่หลักของระบบที่จะต้องทำ
+	\item User Interface Design เป็นการออกแบบส่วนต่อประสานกับผู้ใช้
+	\item Use Case Diagram เป็นแผนภาพที่ใช้แสดงให้ทราบว่าระบบทำงานหรือมีหน้าที่ใดบ้าง
+	\item Class Diagram เป็นแผนภาพที่ใช้แสดง Class และความสัมพันธ์ระหว่าง Class
+	\item Sequence Diagram เป็นแผนภาพที่ใช้แสดงให้เห็นถึงการตอบโต้ข้อมูลระหว่างคลาส เรียงตามลำดับของเวลาที่เกิดเหตุการณ์จากน้อยไปมาก
+\end{enumerate}	
+
+\section{โครงสร้างภาพรวมของระบบ}
+    ความหมายของ System Architecture \cite{architecture} หมายถึง กรอบโครงสร้างของระบบที่อธิบายความสัมพันธ์ขององค์ประกอบต่าง ๆ ไปจนถึงขั้นการเชื่อมต่อกันของระบบย่อยต่าง ๆ โดยจัดกลุ่มองค์ประกอบไว้ในหลาย ๆ ลักษณะเพื่อให้ผู้เกี่ยวข้อง Stakeholder จากพื้นฐานสาขาอาชีพที่แตกต่าง กันสามารถทำความเข้าใจได้ง่าย เช่น การจัดแบ่งองค์ประกอบตามลักษณะการทำงานของระบบ (functional components) เป็นต้น
+    
+    การออกแบบ System architecture แสดงภาพรวมและเทคโนโลยีของระบบเช็คชื่อดัวยคิวอาร์โค้ด มีรายละเอียดดังรูปที่ \ref{Fig:architecture}
+   	\begin{figure}[H]
+   		\centering
+   		\includegraphics[width=\textwidth]{Figures/3/architecture/Server}
+   		\caption{System architecture ระบบเช็คชื่อดัวยคิวอาร์โค้ด}
+   		\label{Fig:architecture}
+   	\end{figure}
+   
+   จากรูปที่ \ref{Fig:architecture} สามารถอธิบายโครงสร้างและเทคโนโลยีของระบบโดยแบ่งเป็น 3 ส่วนหลัก ดังนี้
+   \begin{enumerate}
+   	\item Database
+   	 ระบบใช้บริการฐานข้อมูลแบบ NoSQL ของ MongoDB 
+	  \item Server
+	   กระบวนการทำงานในส่วนของเซิฟเวอร์ (server) แบ่งเป็น 2 ส่วนได้แก่
+	   \begin{itemize}
+	   	\item Heroku เป็นบริการสำหรับเป็น API กลางเพื่อเปลี่ยนสถานะของคิวอาร์โค้ด ซึ่งในที่นี้ใช้ Go ในการพัฒนา
+	   	\item ชุดบริการ API ใช้สำหรับการทำงานกับบริการต่าง ๆ ของระบบตัวอย่างเช่น ใช้สำหรับเก็บข้อมูลชั้นเรียน และเก็บคะแนนของนักศึกษา เป็นต้น โดยใช้ Go ในการพัฒนา
+	   \end{itemize}
+	   \item Client
+	     เว็บแอปพลิเคชันวัตถุประสงค์ในใช้งานเพื่อรองรับการทำงานของผู้ใช้งานบนบราวเซอร์โดยพัฒนาด้วย Angular
+	    	
+   \end{enumerate}
+
+\section{System Requirements}
+\subsection{Functional Requirements}
+	ระบบเช็คชื่อดัวยคิวอาร์โค้ด แบ่งความสามารถของระบบตามประเภทของผู้ใช้งานดังนี้
+	\begin{enumerate}
+		\item อาจารย์
+			\begin{itemize}[label={--}]
+				\item สามารถสร้าง และเพิ่มชั้นเรียนได้
+				\item สามารถตรวจสอบรายชื่อของนักศึกษาได้
+				\item สามารถจัดการคะแนนของนักศึกษาได้
+				\item สามารถสร้างคิวอาร์โค้ดให้นักศึกษาสแกนได้
+				\item สามารถกำหนดเวลาของคิดอาร์โค้ดได้
+				\item สามารถเพิ่ม ลบ และแก้ไข ชื่อกับรหัสนักศึกษาได้
+				\item สามารถดาวน์โหลดไฟล์รายชื่อของนักศึกษาได้
+				\item สามารถรวมไฟล์คะแนน สำหรับวิชาเดียวกันได้
+			\end{itemize}
+		\item นักศึกษา
+			\begin{itemize}[label={--}]
+				\item สามารถสแกนคิวอาร์โค้ดของอาจารย์เพื่อยืนยันการมาเรียนได้	
+			\end{itemize}
+	\end{enumerate}
+
+\subsection{Non-functional Requirements}
+		\begin{enumerate}
+		\item เว็บแอปพลิเคชัน
+		\begin{itemize}[label={--}]
+			\item ใช้โปรโตคอล (Protocol) แบบ Hypertext Transfer Protocol Secure (HTTPS)  ในการสื่อสารที่ช่วยรักษาความสมบูรณ์ถูกต้องของข้อมูลผู้ใช้และเก็บข้อมูลไว้เป็นความลับระหว่างคอมพิวเตอร์ของผู้ใช้กับเว็บไซต์ 
+			\item รองรับการใช้งานของผู้ใช้พร้อมกันอย่างน้อย 100 คน
+		\end{itemize}
+	\end{enumerate}
+	
+\section{User Interface Design}
+ในการออกแบบ User Interface Design ของระบบเช็คชื่อดัวยคิวอาร์โค้ด ใช้การออกแบบใน 2 ส่วนคือ ส่วนของอาจารย์ และส่วนของนักศึกษา
+	\begin{enumerate}[label=3.3.\arabic*]
+	\item ส่วนของอาจารย์ \\
+	โดยการออกแบบหน้าจอของอาจารย์ประกอบดัวยส่วนต่างๆดังนี้
+		 
+		\begin{enumerate}[label=3.3.1.\arabic*]
+			\item การออกแบบหน้าหลัก \\
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/homepage}
+				\caption{หน้าหลัก}
+				\label{Fig:หน้าหลัก}
+			\end{figure}
+			จากภาพที่ \ref{Fig:หน้าหลัก} แสดงหน้าจอสำหรับให้อาจารย์ใช้ทำการตรวจสอบชั้นเรียน
+\newpage
+			\item การออกแบบหน้าเพิ่มชั้นเรียน \\
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/newclass}
+				\caption{หน้าจอสร้างชั้นเรียน}
+				\label{Fig:หน้าจอสร้างชั้นเรียน}
+			\end{figure}
+			จากภาพที่ \ref{Fig:หน้าจอสร้างชั้นเรียน}แสดงหน้าจอสร้างชั้นเรียนสำหรับอาจารย์ใช้ทำการ
+			เพิ่มชั้นเรียนใหม่ โดยการเพิ่มไฟล์รายชื่อนักศึกษาและใส่ข้อมูลให้ครบ
+			
+			\item การออกแบบหน้าจัดการคะแนนนักศึกษา \\
+				\begin{figure}[H]
+				\centering
+				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/classroominfo}
+				\caption{หน้าจอจัดการคะแนนนักศึกษา}
+				\label{Fig:หน้าจอจัดการคะแนนนักศึกษา}
+			\end{figure}
+			จากภาพที่ \ref{Fig:หน้าจอจัดการคะแนนนักศึกษา} แสดงหน้าจอจัดการคะแนนนักศึกษาเพื่อตรวจสอบคะแนนของนักศึกษาและจัดการคะแนนของนักศึกษา
+\newpage			
+			\item การออกแบบหน้าประวัติการเข้าเรียน \\
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/classroomrecord}
+				\caption{หน้าจอประวัติการเข้าเรียน}
+				\label{Fig:หน้าจอประวัติการเข้าเรียน}
+			\end{figure}
+			จากภาพที่ \ref{Fig:หน้าจอประวัติการเข้าเรียน} แสดงหน้าจอประวัติการเข้าเรียนเพื่อดูข้อมูลการเข้าเรียนของนักศึกษา และในหน้านี้ยังใช้ในการเข้าถึงการดาวน์โหลดไฟล์ หรือเข้าถึงหน้ารวมไฟล์ได้
+			
+			\item การออกแบบหน้ารวมไฟล์ \\
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/totalpoints}
+				\caption{หน้ารวมไฟล์}
+				\label{Fig:หน้ารวมไฟล์}
+			\end{figure}
+			จากภาพที่ \ref{Fig:หน้ารวมไฟล์} แสดงหน้าจอหน้ารวมไฟล์เป็น Pop-up เพื่อจัดการรวมไฟล์โดยการเลือกไฟล์ที่จะทำการรวม ซึ่งไฟล์ที่จะสามารถทำการรวมไฟล์ได้นั่นต้องเป็นวิชาเดียวกันเท่านั่น
+			
+			\item การออกแบบหน้าสร้างคิวอาร์โค้ด \\
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/startqrcode}
+				\caption{หน้าสร้างคิวอาร์โค้ด}
+				\label{Fig:หน้าสร้างคิวอาร์โค้ด}
+			\end{figure}
+			จากภาพที่ \ref{Fig:หน้าสร้างคิวอาร์โค้ด} แสดงหน้าจอสร้างคิวอาร์โค้ด เพื่อให้อาจารย์ตั้งค่าต่างๆของคิวอาร์โค้ด ได้แก่ เวลา และอาทิตย์ที่สร้างคิวอาร์โค้ด
+			
+			\item การออกแบบหน้าแสดงคิวอาร์โค้ด \\
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/qrcodepage}
+				\caption{หน้าแสดงคิวอาร์โค้ด}
+				\label{Fig:หน้าแสดงคิวอาร์โค้ด}
+			\end{figure}
+			จากภาพที่ \ref{Fig:หน้าแสดงคิวอาร์โค้ด} แสดงหน้าจอแสดงคิวอาร์โค้ด หน้านี้จะแสดงก็ต่อเมื่ออาจารย์ตั้งค่า และกดสร้างคิวอาร์โค้ดเท่านั่น โดยจะแสดงคิวอาร์โค้ดที่สร้างรวมถึงเวลาที่เหลือในการสแกน
+			
+				\item การออกแบบหน้าจัดการนักศึกษา \\
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/updatestudent}
+				\caption{หน้าจัดการนักศึกษา}
+				\label{Fig:หน้าจัดการนักศึกษา}
+			\end{figure}
+			จากภาพที่ \ref{Fig:หน้าจัดการนักศึกษา} แสดงหน้าจอจัดการนักศึกษาเพื่อจัดการข้อมูลของนักศึกษา เช่น แก้ไข ลบ และเพิ่มนักศึกษา เป็นต้น
+			
+			
+		\end{enumerate}	
+	
+	\end{enumerate}
+\newpage
+
+\section{Use Case Diagram}
+	Use Case Diagram เป็นแผนผังเพื่อแสดงฟังก์ชันแสดงการทำงานของระบบโดยรวม แสดงส่วนประกอบในระบบและกิจกรรมที่เกิดขึ้นในระบบซึ่งในระบบเช็คชื่อดัวยคิวอาร์โค้ด ผู้ใช้จำเป็นต้องเข้าสู่ระบบเพื่อใช้งานระบบ สัญลักษณ์ที่ใช้ในการเขียน Use Case Diagram แสดงในตารางที่ \ref{tab:use-case2}
+	\begin{table}[H]
+		\caption{สัญลักษณ์ของ Use case Diagram}
+		\label{tab:use-case2}
+		\begin{tabular}{|c|p{10cm}|}
+		\hline
+		\textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{การใช้งาน}} \\ \hline
+		\raisebox{-\totalheight}{Use case}
+		& \setstretch{1.5} {Use case คือส่วนย่อยของระบบงาน แทนด้วยวงรีและชื่อของ Use case ภายในวงรี} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[height=1.5cm]{Figures/table/use-case/2}}
+		& \setstretch{1.5} {Actor คือบุคคลหรือระบบงานอื่นที่ใช้งานระบบหรือได้รับประโยชน์จากระบบซึ่งอยู่ภายนอกระบบ แทนด้วยรูปคนและมีชื่อบทบาทการใช้งานระบบ} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[width=3cm]{Figures/table/use-case/3}}
+		& \setstretch{1.5} {เส้นตรงที่แสดงถึงการใช้งาน Use case ของผู้กระทำ} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/use-case/4}}
+		& \setstretch{1.5} {กรอบสี่เหลี่ยมแสดงถึงขอบเขตของระบบโดยแสดงชื่อระบบภายในหรือด้านบนกรอบสี่เหลี่ยม Use case อยู่ภายในกรอบสี่เหลี่ยม และ actor อยู่ภายนอกกรอบสี่เหลี่ยม} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/use-case/5}}
+		& \setstretch{1.5} {ความสัมพันธ์แบบ <<includes>> แสดงว่า Use case หนึ่งดำเนินการตามขั้นตอนของ Use case อื่น โดยแทนด้วยสัณลักษณ์ลูกศรเส้นประ ซึ่ง Use case ที่หางลูกศรเรียกใช้งาน Use case ที่หัวลูกศรทุกครั้งที่มีการทำงาน} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/use-case/6}}
+		& \setstretch{1.5} {ความสัมพันธ์แบบ <<extend>> แสดงว่า Use case หนึ่งดำเนินการตามขั้นตอนของ Use case อื่น โดยแทนด้วยสัญลักษณ์ลูกศรเส้นประ ซึ่ง Use case ที่หัวลูกศรเรียกใช้งาน Use case ที่หางลูกศร แต่การใช้งานไม่จำเป็นต้องเกิดขึ้นทุกครั้งขึ้นอยู่กับเงื่อนไขระหว่างการทำงาน} \\ \hline
+		\end{tabular}
+	\end{table}
+
+	\begin{figure}[H]
+		\includegraphics[width=1.0\textwidth]{Figures/3/Usercase/Usercase01}
+		\caption{Use Case Diagram ของระบบเช็คชื่อดัวยคิวอาร์โค้ด}
+		\label{Fig:usecase1}
+	\end{figure}
+	
+	\begin{table}[H]
+		\centering
+		\caption{อธิบาย Use Case หน้าที่ของระบบ ในภาพที่ \ref{Fig:usecase1}}
+		\label{tab:usecase}
+		\resizebox{\totalheight}{!}{\textwidth}{%
+			\begin{tabular}{|c|p{10cm}|}
+				\hline
+				\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
+				สร้างวิชา & อาจารย์สามารถสร้างชั้นเรียนได้ โดยการที่จะสร้างชั้นเรียนใหม่จำเป็นจะต้องอัปโหลดไฟล์ที่ดาวน์โหลดมาจากระบบของมหาวิทยาลัยเท่านั่น ซึ่งไฟล์จะต้องเป็นไฟล์ Excel และไม่สามารถสร้างชั้นเรียนซ้ำได้ \\ \hline
+				อัพเดทข้อมูล 
+				นักศึกษา & อาจารย์สามารถจัดการรายชื่อนักศึกษาได้โดยการ เพิ่ม ลบและแก้ไข ข้อมูลชื่อและรหัสนักศึกษาได้ \\ \hline
+				สร้าง QR code & อาจารย์สามารถสร้าง QR code รวมถึงการตั้งค่า QR code เช่น เวลาในการสแกน QR code เป็นต้น \\ \hline
+				จัดการคะแนน & หน้าแสดงรายชื่อ และคะแนนแต่ละสัปดาห์ของนักศึกษา โดยอาจารย์สามารถจัดการกับคะแนนในแต่ละสัปดาห์ของนักศึกษาแต่ละคน \\ \hline
+				ดูประวัติการเข้าเรียน & อาจารย์สามารถตรวจสอบการเข้าเรียนของนักศึกษาทั้งหมดในชั้นเรียนนั้น โดยจะแสดงเป็นรายสัปดาห์ \\ \hline
+				สแกน QR code & นักศึกษาสามารถสแกน QR code ของอาจารย์เพื่อเข้าสู่หน้ากรอกรหัสนักศึกษาเพื่อเป็นการยืนยันตัวตนในการมาเรียน โดยการจะสแกนได้นั้นขึ้นอยู่กับเวลาของ QR code ของอาจารย์ดัวย ซึ่งถ้าหากเวลาของ QR code หมด นักศึกษาก็ไม่สามารถสแกน QR code ได้ \\ \hline
+				อัพเดท url & อัพเดท url สำหรับให้นักศึกษาสแกน \\ \hline
+				กรอกรหัสนักศึกษา & แสดงหน้าให้นักศึกษากรอกรหัสนักศึกษา เพื่อเป็นการยืนยันตัวตน โดยการจะมาที่หน้านี้ได้ต้องสแกน QR code ของอาจารย์เท่านั้น \\ \hline
+			\end{tabular}%
+		}
+	\end{table}
+
+	% Please add the following required packages to your document preamble:
+	% \usepackage{graphicx}
+	\begin{table}[H]
+		\centering
+		\caption{Use Case สร้างวิชา}
+		\label{tab:usecase}
+		\resizebox{\totalheight}{!}{\textwidth}{%
+			\begin{tabular}{|p{10cm}|p{10cm}|}
+				\hline
+				\multicolumn{1}{|c|}{\textbf{Use Case Title : สร้างวิชา}} & \multicolumn{1}{c|}{\textbf{Use case Id : 1 }} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Primary Actor : อาจารย์} \\ \hline
+			    \multicolumn{2}{|p{\linewidth}|}{Stakeholder Actor : -} \\ \hline
+			    \multicolumn{2}{|p{\linewidth}|}{Main Flow : อาจารย์สามารถสร้างหรือเพิ่มชั้นเรียนใหม่} \\ \hline
+			    \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่มีไฟล์รายชื่อนักศึกษาที่ดาวน์โหลดมาจากระบบของมหาวิทยาลัย จะไม่สามารถสร้างหรือเพิ่มชั้นเรียนใหม่ได้} \\ \hline
+			\end{tabular}%
+		}
+	\end{table}
+	\begin{table}[H]
+		\centering
+		\caption{Use Case อัพเดทข้อมูลนักศึกษา}
+		\label{tab:usecase}
+		\resizebox{\totalheight}{!}{\columnwidth}{%
+			\begin{tabular}{|p{7cm}|p{7cm}|}
+				\hline
+				\multicolumn{1}{|c|}{\textbf{Use Case Title : เพิ่ม/ลบ/แก้ไข นักศึกษา}} & \textbf{Use case Id : 2 } \\ \hline
+				\multicolumn{2}{|l|}{Primary Actor : อาจารย์} \\ \hline
+				\multicolumn{2}{|l|}{Stakeholder Actor : นักศึกษา} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Main Flow : อาจารย์สามารถ เพิ่ม ลบ และแก้ไขรายชื่อหรือรหัสของนักศึกษาในชั้นเรียนที่สร้างขึ้นได้} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่มีการเพิ่มหรือสร้างชั้นเรียน ก็ไม่สามารถ เพิ่ม ลบ และแก้ไขรายชื่อหรือรหัสของนักศึกษาได้} \\ \hline
+			\end{tabular}%
+		}
+	\end{table}
+
+	\begin{table}[H]
+		\centering
+		\caption{Use Case สร้าง QR code}
+		\label{tab:usecase}
+		\resizebox{\totalheight}{!}{\textwidth}{%
+			\begin{tabular}{|p{7cm}|p{7cm}|}
+				\hline
+				\multicolumn{1}{|c|}{\textbf{Use Case Title : สร้าง QR code}} & \textbf{Use case Id : 3 } \\ \hline
+				\multicolumn{2}{|l|}{Primary Actor : อาจารย์} \\ \hline
+				\multicolumn{2}{|l|}{Stakeholder Actor : นักศึกษา} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Main Flow : อาจารย์สามารถสร้าง QR code เพื่อให้นักศึกษาใช้สแกนเพื่อเข้าสู่หน้ากรอกรหัสนักศึกษาได้} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่มีการเพิ่มหรือสร้างชั้นเรียน จะอาจารย์ไม่สามารถสร้าง QR code ได้} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 2 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ต จะอาจารย์ไม่สามารถสร้าง QR code ได้} \\ \hline
+			\end{tabular}%
+		}
+		\end{table}
+		
+		\begin{table}[H]
+			\centering
+			\caption{Use Case จัดการคะแนน}
+			\label{tab:usecase}
+			\resizebox{\totalheight}{!}{\textwidth}{%
+				\begin{tabular}{|p{10cm}|p{10cm}|}
+					\hline
+					\multicolumn{1}{|c|}{\textbf{Use Case Title : จัดการคะแนน}} & \multicolumn{1}{c|}{\textbf{Use case Id : 4 }} \\ \hline
+					\multicolumn{2}{|l|}{Primary Actor : อาจารย์} \\ \hline
+					\multicolumn{2}{|l|}{Stakeholder Actor : นักศึกษา} \\ \hline
+					\multicolumn{2}{|p{\linewidth}|}{Main Flow : อาจารย์สามารถจัดการคะแนนของนักศึกษาแต่ละสัปดาห์ได้ } \\ \hline
+					\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่มีการเพิ่มหรือสร้างชั้นเรียน จะไม่สามารถจัดการคะแนนของนักศึกษาได้} \\ \hline
+				\end{tabular}%
+			}
+		\end{table}
+		
+		\begin{table}[H]
+			\centering
+			\caption{Use Case ดูประวัติการเข้าเรียน}
+			\label{tab:usecase}
+			\resizebox{\totalheight}{!}{\textwidth}{%
+				\begin{tabular}{|c|p{10cm}|}
+					\hline
+					\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูประวัติการเข้าเรียน}} & \multicolumn{1}{c|}{\textbf{Use case Id : 5 }} \\ \hline
+					\multicolumn{2}{|l|}{Primary Actor : อาจารย์} \\ \hline
+					\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
+					\multicolumn{2}{|p{\linewidth}|}{Main Flow : หน้าแสดงข้อมูลการเข้าเรียนของนักศึกษาทั้งหมด } \\ \hline
+					\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่มีการเพิ่มหรือสร้างชั้นเรียน จะไม่สามารถดูข้อมูลการเข้าเรียนของนักศึกษาได้} \\ \hline
+				\end{tabular}%
+			}
+		\end{table}	
+
+		\begin{table}[H]
+			\centering
+			\caption{Use Case สแกน QR code}
+			\label{tab:usecase}
+			\resizebox{\totalheight}{!}{\textwidth}{%
+				\begin{tabular}{|c|p{10cm}|}
+					\hline
+					\multicolumn{1}{|c|}{\textbf{Use Case Title : สแกน QR code}} & \multicolumn{1}{c|}{\textbf{Use case Id : 6 }} \\ \hline
+				\multicolumn{2}{|l|}{Primary Actor : นักศึกษา} \\ \hline
+					\multicolumn{2}{|l|}{Stakeholder Actor : อาจารย์} \\ \hline
+					\multicolumn{2}{|p{\linewidth}|}{Main Flow : สแกน QR code ที่อาจารย์สร้างขึ้น} \\ \hline
+					\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่อ Wifi เดียวกันกับอาจารย์ จะไม่สามารถสแกน QR code} \\ \hline
+				\end{tabular}%
+			}
+		\end{table}	
+	
+		\begin{table}[H]
+		\centering
+		\caption{Use Case อัพเดท URL}
+		\label{tab:usecase}
+		\resizebox{\totalheight}{!}{\textwidth}{%
+			\begin{tabular}{|c|p{10cm}|}
+				\hline
+				\multicolumn{1}{|c|}{\textbf{Use Case Title : อาจารย์}} & \multicolumn{1}{c|}{\textbf{Use case Id : 7 }} \\ \hline
+				\multicolumn{2}{|l|}{Primary Actor : อาจารย์} \\ \hline
+				\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Main Flow : อัพเดท url ของคิวอาร์โค้ด} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : ผู้ใช้ต้องทำการสร้างคิวอาร์โค้ดก่อน จึงจะสามารถอัพเดท URL ได้} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 2 : ผู้ใช้จำเป็นต้องเชื่อมต่ออินเตอร์เน็ต จึงจะทำการอัพเดท URL ได้} \\ \hline
+			\end{tabular}%
+		}
+	\end{table}	
+
+		 \begin{table}[H]
+		 	\centering
+		 	\caption{Use Case กรอกรหัสนักศึกษา}
+		 	\label{tab:usecase}
+		 	\resizebox{\totalheight}{!}{\textwidth}{%
+		 		\begin{tabular}{|c|p{10cm}|}
+		 			\hline
+		 			\multicolumn{1}{|c|}{\textbf{Use Case Title : กรอกรหัสนักศึกษา}} & \multicolumn{1}{c|}{\textbf{Use case Id : 8 }} \\ \hline
+	 			\multicolumn{2}{|l|}{Primary Actor : นักศึกษา} \\ \hline
+		 			\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
+		 			\multicolumn{2}{|p{\linewidth}|}{Main Flow : หน้ากรอกข้อมูลรหัสนักศึกษาเพื่อยืนยันตัวตน} \\ \hline
+		 			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้สแกน QR code ของอาจารย์ไม่ผ่าน จะไม่สามารถมาที่หน้ากรอกรหัสนักศึกษาได้} \\ \hline
+		 			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่อ Wifi เดียวกันกับอาจารย์ จะไม่สามารถมาที่หน้ากรอกรหัสนักศึกษาได้} \\ \hline
+		 		\end{tabular}%
+		 	}
+		 \end{table}	
+	 
+	 \newpage
+	 	\begin{figure}[H]
+	 	\includegraphics[width=0.7\textwidth]{Figures/3/Usercase/Usercase02}
+	 	\caption{Use Case Diagram ของระบบ API กลาง}
+	 	\label{Fig:usecase2}
+	 \end{figure}
+	 
+	 \begin{table}[H]
+	 	\centering
+	 	\caption{อธิบาย Use Case หน้าที่ของระบบ ในภาพที่ \ref{Fig:usecase2}}
+	 	\label{tab:usecase}
+	 	\resizebox{\totalheight}{!}{\textwidth}{%
+	 		\begin{tabular}{|c|p{10cm}|}
+	 			\hline
+	 			\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
+	 			อัพเดท url & เมื่ออาจารย์สร้างคิวอาร์โค้ดระบบจะส่ง URL ไปเก็บไว้ในฐานข้อมูลเพื่อให้นักศึกษาสแกน \\ \hline
+	 			สร้าง url & เมื่ออาจารย์สร้างคิวอาร์โค้ดครั้งแรกระบบจะส่ง URL ไปเก็บไว้ในฐานข้อมูลเพื่อให้นักศึกษาสแกน \\ \hline
+	 		\end{tabular}%
+	 	}
+	 \end{table}
+	 
+	 		 \begin{table}[H]
+	 	\centering
+	 	\caption{Use Case อัพเดท URL}
+	 	\label{tab:usecase}
+	 	\resizebox{\totalheight}{!}{\textwidth}{%
+	 		\begin{tabular}{|c|p{10cm}|}
+	 			\hline
+	 			\multicolumn{1}{|c|}{\textbf{Use Case Title : อัพเดท url}} & \multicolumn{1}{c|}{\textbf{Use case Id : 9 }} \\ \hline
+				\multicolumn{2}{|l|}{Primary Actor : อาจารย์} \\ \hline
+				\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Main Flow : อัพเดท url ของคิวอาร์โค้ด} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : ผู้ใช้ต้องทำการสร้างคิวอาร์โค้ดก่อน จึงจะสามารถอัพเดท URL ได้} \\ \hline
+				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 2 : ผู้ใช้จำเป็นต้องเชื่อมต่ออินเทอร์เน็ต จึงจะทำการอัพเดท URL ได้} \\ \hline
+	 		\end{tabular}%
+	 	}
+	 \end{table}
+ 
+ 		 \begin{table}[H]
+ 	\centering
+ 	\caption{Use Case สร้าง URL}
+ 	\label{tab:usecase}
+ 	\resizebox{\totalheight}{!}{\textwidth}{%
+ 		\begin{tabular}{|c|p{10cm}|}
+ 			\hline
+ 			\multicolumn{1}{|c|}{\textbf{Use Case Title : สร้าง url}} & \multicolumn{1}{c|}{\textbf{Use case Id : 10 }} \\ \hline
+			\multicolumn{2}{|l|}{Primary Actor : อาจารย์} \\ \hline
+			\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
+			\multicolumn{2}{|p{\linewidth}|}{Main Flow : อัพเดท url ของคิวอาร์โค้ด} \\ \hline
+			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : ผู้ใช้ต้องทำการสร้างคิวอาร์โค้ดก่อน จึงจะสามารถสร้าง URL ได้} \\ \hline
+			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 2 : ผู้ใช้จำเป็นต้องเชื่อมต่ออินเทอร์เน็ต จึงจะทำการสร้าง URL ได้} \\ \hline
+ 		\end{tabular}%
+ 	}
+ \end{table}
+		  	
+\newpage
+
+\section{Class Diagram}
+	Class Diagram คือแผนภาพที่ใช้แสดงคลาสและความสัมพันธ์ในแบบต่างๆ ระหว่างคลาส สัญลักษณ์ที่ใช้ในการเขียน Class Diagram แสดงในตารางที่ \ref{tab:class2} 
+	\begin{center}
+	\begin{table}[H]
+		\centering
+		\caption{สัญลักษณ์ของ Class Diagram}
+		\label{tab:class2}
+		\begin{tabular}{|c|p{10cm}|}
+			\hline
+			\textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{การใช้งาน}} \\ \hline
+			\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/class/11}}
+			& \setstretch{1.5} {คลาส สัญลักษณ์แทนด้วยสี่เหลี่ยมแบ่งเป็น 3 ส่วน 
+				ส่วนบน เป็นชื่อของ class ส่วนกลาง เป็นชื่อ Attribute และส่วนล่างเป็น Operation Name หรือ Method ใช้สำหรับเขียนฟังก์ชันในการทำงานของคลาสนั้น ๆ
+				ชนิดของ Visibility ของ Method และ Attribute
+				แบ่งเป็น 3 ชนิด ได้แก่
+				\begin{enumerate}
+					\item Public แทนสัญลักษณ์ด้วยเครื่องหมายบวก (+)
+					\item Private แทนสัญลักษณ์ด้วยเครื่องหมายลบ (-)
+					\item Protected แทนสัญลักษณ์ด้วยเครื่องหมายชาร์ป (#)
+				\end{enumerate}
+			} \\ \hline
+			\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/class/1}}
+			& \setstretch{1.5} {Dependency Relationship หมายความว่า คลาสที่อยู่ฝั่งต้นลูกศรสามารถเรียกใช้คลาสที่อยู่ฝั่งหัวลูกศร}
+			\\ \hline
+			\raisebox{-\totalheight}{\includegraphics[width=0.35\textwidth]{Figures/3/Class/aggre}}
+			& \setstretch{1.5} {Composition Relationship เป็นความสัมพันธ์ระหว่างออบเจ็กต์หรือคลาสแบบขึ้นต่อกันและมีความเกี่ยวข้องกันเสมอ} \\ \hline
+			\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/3/Class/implement}}
+			& \setstretch{1.5} {Realization Relationship เป็นความสัมพันธ์ระหว่าง Object หรือ Class ในลักษณะของการสืบทอดคุณสมบัติจาก Class หนึ่ง (Super class) ไปยังอีก Class หนึ่ง (Subclass)} \\ \hline
+			\raisebox{-\totalheight}{\includegraphics[width=50,height=50]{Figures/table/class/connector}}
+			& \setstretch{1.5} {Connector เป็นสัญลักษณ์แทนด้วยรูปห้าเหลี่ยมและมีชื่ออยู่ตรงกลาง จะสร้างสัญลักษณ์นี้ไว้เมื่อต้องการเชื่อมต่อคลาสที่อยู่คนละหน้า} \\ \hline
+		\end{tabular}
+	\end{table}
+	\end{center}
+
+\newpage
+  %IMAGE of class
+	Class Diagram แสดงความสัมพันธ์ในรูปแบบต่างๆ ระหว่างคลาสของเว็บแอปพลิเคชันระบบเช็คชื่อดัวยคิวอาร์โค้ด อธิบายได้ตามภาพที่ \ref{Fig:MainActivity20C} ดังต่อไปนี้
+	\begin{figure}[H]
+		\includegraphics[width=0.8\columnwidth]{Figures/3/class diagram/SDiagram}
+		\caption{Class Diagram ของแอปพลิเคชันระบบ เช็คชื่อดัวยคิวอาร์โค้ด}
+		\label{Fig:MainActivity20C}
+	\end{figure}
+	
+\begin{sidewaysfigure}
+	\begin{figure}[H]
+		\includegraphics[width=1.0\columnwidth]{Figures/3/class diagram/TDiagram}
+		\caption{Class Diagram ของแอปพลิเคชันระบบ เช็คชื่อดัวยคิวอาร์โค้ด}
+		\label{Fig:DocC}
+	\end{figure}
+\end{sidewaysfigure}
+
+	\begin{figure}[H]
+	\includegraphics[width=1.0\columnwidth]{Figures/3/class diagram/Sarver}
+	\caption{Class Diagram ของแอปพลิเคชันระบบ API}
+	\label{Fig:SarverMB}
+	\end{figure}
+
+	\begin{figure}[H]
+	\includegraphics[width=1.0\columnwidth]{Figures/3/class diagram/HerokuSeerver}
+	\caption{Class Diagram ของแอปพลิเคชันระบบ API กลาง}
+	\label{Fig:HerokuSeerverMB}
+	\end{figure}
+	
+
+	% TABLE of class
+\newpage	
+	จากรูปภาพที่ \ref{Fig:MainActivity20C} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้
+	\begin{table}[H]
+		\centering
+		\caption{อธิบาย Class Diagram ของคลาสส่วนของนักศึกษา}
+		\label{tab:class}
+		\begin{tabular}{|c|p{10cm}|}
+			\hline
+			\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
+			\raisebox{-\totalheight}{FromstusentComponent}
+			& \setstretch{1.5} {คลาส FromstusentComponent จะถูกเรียกใช้งานทุกครั้งเมื่อนักศึกษาสามารถสแกนคิวอาร์โค้ดของอาจารย์ได้ โดยวัตถุประสงค์การทำงานของคลาสนี้คือ เพื่อให้นักศึกษายืนยันตัวตนเพื่อรับคะแนนในการเข้าเรียน } \\ \hline
+			
+	\end{tabular}
+\end{table}
+
+\newpage
+จากรูปภาพที่ \ref{Fig:DocC} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้
+\begin{table}[H]
+	\centering
+	\caption{อธิบาย Class Diagram ของคลาสส่วนของอาจารย์}
+	\label{tab:class}
+	\begin{tabular}{|c|p{10cm}|}
+		\hline
+		\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
+		\raisebox{-\totalheight}{TopbarComponent}
+		& \setstretch{1.5} {คลาส TopbarComponent จะถูกเรียกใช้งานทุกครั้งเมื่ออาจารย์เข้าสู่เว็บแอปพลิเคชั่น โดยวัตถุประสงค์ของการทำงานของคลาสนี้คือ จัดการเกี่ยวกับการแสดงแถบเมนูส่วนบนของเว็บแอปพลิเคชั่น ซึ่งสามารถเรียกใช้งานคลาส CardComponent และ UploadfileComponent ได้} \\ \hline
+		\raisebox{-\totalheight}{UploadfileComponent}
+		& \setstretch{1.5} {คลาส UploadfileComponent เป็นคลาสที่มีหน้าที่ในการทำงานเกี่ยวกับการเพิ่มไฟล์รายชื่อนักศึกษา โดยวัตถุประสงค์ของคลาสนี้คือ ใช้ในการเพิ่มชั้นเรียนใหม่ ซึ่งการเพิ่มชั้นเรียนต้องเพิ่มไฟล์ที่ได้จากระบบของมหาลัยเท่านั้น นอกจากนี้ยังแสดงรายชื่อทั้งหมดในไฟล์ที่นำเข้าอีกดัวย} \\ \hline
+		\raisebox{-\totalheight}{CardComponent}
+		& \setstretch{1.5} {คลาส CardComponent จะถูกเรียกใช้งานทุกครั้งเมื่ออาจารย์เข้าสู่เว็บแอปพลิเคชั่น โดยวัตถุประสงค์ของการทำงานของคลาสนี้คือ แสดงชั้นเรียนทั้งหมดที่มี และแสดงเมนูสำหรับการเข้าถึงคลาสต่างๆ ดังนี้  InfoComponent QrcodeComponent  EditComponent และ InfonameComponent } \\ \hline
+		\raisebox{-\totalheight}{EditComponent}
+		& \setstretch{1.5} {คลาส EditComponent เป็นคลาสที่มีหน้าที่ในการทำงานเกี่ยวกับการจัดการข้อมูลนักศึกษา เช่น การเพิ่ม ลบและแก้ไข ชื่อหรือรหัสนักศึกษา} \\ \hline
+		\raisebox{-\totalheight}{QrcodeComponent}
+		& \setstretch{1.5} {คลาส QrcodeComponent เป็นคลาสที่มีหน้าที่ในการทำงานเกี่ยวกับการสร้างคิวอาร์โค้ด โดยวัตถุประสงค์ของคลาสนี้คือ เพื่อตั้งค่าข้อมูลของคิวอาร์โค้ด และแสดงคิวอาร์โค้ดที่สร้างให้นักศึกษาสามารถสแกนได้} \\ \hline
+	
+	\end{tabular}
+\end{table}
+
+\newpage
+\begin{table}[H]
+	\centering
+	\caption{อธิบาย Class Diagram ของคลาสส่วนของอาจารย์}
+	\label{tab:class}
+	\begin{tabular}{|c|p{10cm}|}
+		\hline
+		\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
+		\raisebox{-\totalheight}{InfoComponent}
+		& \setstretch{1.5} {คลาส InfoComponent เป็นคลาสที่มีหน้าที่ในการทำงานเกี่ยวกับการแสดงข้อมูลการเข้าเรียนทั้งหมดของนักศึกษา นอกจากนี้คลาสนี้ยังทำหน้าที่ในการดาวน์โหลดไฟล์รายชื่อ และรวมไฟล์รายชื่อ เพื่อรวมคะแนนของนักศึกษาในกรณีที่มีอาจารย์มากกว่าหนึ่งคน} \\ \hline
+		\raisebox{-\totalheight}{InfonameComponent}
+		& \setstretch{1.5} {คลาส InfonameComponent เป็นคลาสที่มีหน้าที่ในการทำงานเกี่ยวกับการจัดการคะแนนของนักศึกษา โดยวัตถุประสงค์ของคลาสนี้คือ การจัดการคะแนนของนักศึกษาทั้งหมดในรายวิชานั้นๆ} \\ \hline
+	\end{tabular}
+\end{table}
+
+\newpage
+จากรูปภาพที่ \ref{Fig:SarverMB} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้
+\begin{table}[H]
+	\centering
+	\caption{อธิบาย Class Diagram ของคลาสส่วนของอาจารย์}
+	\label{tab:class}
+	\begin{tabular}{|c|p{10cm}|}
+		\hline
+		\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
+		\raisebox{-\totalheight}{server}
+		& \setstretch{1.5} {คลาส server จะถูกเรียกใช้งานทุกครั้งเมื่ออาจารย์เข้าสู่เว็บแอปพลิเคชั่น โดยวัตถุประสงค์ของการทำงานของคลาสนี้คือให้บริการ API และตรวจสอบข้อมูลต่างๆ} \\ \hline
+		\raisebox{-\totalheight}{Handler}
+		& \setstretch{1.5} {คลาส Handler เป็นคลาสที่มีหน้าที่ในการเป็นโมเดลของฐานข้อมูล} \\ \hline		
+	\end{tabular}
+\end{table}
+
+จากรูปภาพที่ \ref{Fig:HerokuSeerverMB} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้
+\begin{table}[H]
+	\centering
+	\caption{อธิบาย Class Diagram ของคลาสส่วนของอาจารย์}
+	\label{tab:class}
+	\begin{tabular}{|c|p{10cm}|}
+		\hline
+		\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
+		\raisebox{-\totalheight}{server}
+		& \setstretch{1.5} {คลาส server จะถูกเรียกใช้งานทุกครั้งเมื่ออาจารย์เข้าสู่เว็บแอปพลิเคชั่น โดยวุตถุประสงค์ของการทำงานของคลาสนี้คือให้บริการ API และตรวจสอบข้อมูลต่างๆ} \\ \hline
+		\raisebox{-\totalheight}{Handler}
+		& \setstretch{1.5} {คลาส Handler เป็นคลาสที่มีหน้าที่ในการเป็นโมเดลของฐานข้อมูล} \\ \hline		
+	\end{tabular}
+\end{table}
+
+
+
+
+
+\newpage
+\section{Sequence Diagram}
+	Sequence Diagram เป็น Diagram ที่แสดงขั้นตอนการทำงานของแต่ละ Use Case ระหว่าง Object ต่าง ๆ ที่ส่งข้อความถึงกันและกัน โดย Sequence Diagram จะช่วยให้มองเห็นการทำงานของภาพรวมของระบบ ส่วนประกอบสัญลักษณ์ที่ใช้ในการเขียน Sequence Diagram 
+	แสดงดังตารางที่ \ref{tab:Sequences}
+	
+	\begin{table}[H]
+		\centering
+		\caption{สัญลักษณ์ของ Sequence Diagram}
+		\label{tab:Sequences}
+		\begin{tabular}{| c	| p{10cm} |}
+		\hline
+		\textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{การใช้งาน}} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[width=0.17\textwidth]{Figures/table/Sequence/Sequence1}}
+		& \setstretch{1.5} {Class แสดงถึงการทำงานของ Use Case ในการส่งหรือรับข้อความ แทนด้วยสัญลักษณ์สี่เหลี่ยมมีชื่อคลาสอยู่ภายใน} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[height=0.08\textheight]{Figures/table/Sequence/Sequence2}}
+		& \setstretch{1.5} {Lifeline หรือเส้นอายุขัย แสดงช่วงเวลาตั้งแต่เริ่มสร้าง object ในคลาสนั้น จนกระทั่ง object นั้นถูกทำลาย สัญลักษณ์แทนด้วยเส้นประ} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[height=0.08\textheight]{Figures/table/Sequence/Sequence3}}
+		& \setstretch{1.5} {Focus of control หรือจุดควบคุม เป็นจุดควบคุมที่ object ใช้ทำการส่งหรือรับข้อความ สัญลักษณ์แทนด้วยสี่เหลี่ยม} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/Sequence/Sequence4}}
+		& \setstretch{1.5} {Message คือ ข้อความที่รับส่งระหว่าง Object สัญลักษณ์แทนด้วยลูกศรและประกอบด้วย 2 ส่วน คือ ข้อมูล (Data) และฟังก์ชัน (Function)} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/Sequence/Sequence5}}
+		& \setstretch{1.5} {Return Message เป็นข้อมูลที่ส่งกลับหลังจากทำงานเสร็จ} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[height=0.08\textheight]{Figures/3/selfcall}}
+		& \setstretch{1.5} {Self call เป็นการเรียกฟังชันก์การทำงานภายในตัวเอง} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[height=0.1\textheight,width=0.3\textwidth]{Figures/3/frame}}
+		& \setstretch{1.5} {สร้างกรอบการทำงานของโปรแกรม เพื่อให้รู้ขอบเขตของการทำงานเช่น ลูป(loop)} \\ \hline
+		\end{tabular}
+	\end{table}
+%
+%	Sequence Diagram ที่ใช้อธิบายการทำงานของระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยสศาสตร์ มหาวิทยาลัยอุบลราชธานี มีรายละเอียดดังต่อไปนี้
+
+\newpage
+		\begin{landscape}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=0.8\columnwidth]
+			{Figures/3/Sequence Diagram/UploadfileComponent}
+			\caption{Sequence Diagram สร้างชั้นเรียน}
+			\label{Fig:Sequence-Uploadfile}
+		\end{figure}
+	\end{landscape}
+	
+	จากภาพที่ \ref{Fig:Sequence-Uploadfile} สามารถอธิบายแผนภาพ Sequence Diagram สร้างชั้นเรียน ได้ดังนี้ เมื่อ
+	ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด ngOnInit() ที่คลาส TopbarComponent ระบบจะคืนค่าข้อมูลชั้นเรียนโดยจะแสดงเป็นการ์ด เมื่อผู้ใช้คลิกปุ่มเพิ่มชั้นเรียนระบบจะทำการไปที่หน้าเพิ่มชั้นเรียนจากนั่นจะเรียกใช้เมธอด ngOnInit() เพิ่มแสดงหน้าเพิ่มชั้นเรียน ผู้ใช้คลิกเลือกไฟล์ระบบจะเรียกใช้เมธอด onFileChange() ในคลาส UploadfileCom
+	ponent โดยเมธอดนี้จะทำหน้าที่อ่านไฟล์ที่เลือกเข้ามาและเตรียมข้อมูลสำหรับอัพโหลด และแสดงข้อมูล เมื่อผู้ใช้คลิกปุ่ม Upload ระบบจะเรียกใช้เมธอด Upload() ที่คลาส Upload
+	fileCom
+	ponent ระบบจะส่งข้อมูลที่เตรียมไว้ส่งข้อมูลในรูปแบบ POST ไปที่ฐานข้อมูล ฐานข้อมูลจะเรียกใช้เมธอด uploadCourse() ซึ่งเมธอดนี้จะทำหน้าที่บันทึกข้อมูลลงฐานข้อมูล เมื่อบันทึกเสร็จจะคืนค่าข้อมูลชั้นเรียนจากนั้นระบบจะกลับสู่หน้าแรก
+
+		\begin{landscape}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=0.55\columnwidth]
+			{Figures/3/Sequence Diagram/EditComponent}
+			\caption{Sequence Diagram อัพเดทข้อมูลนักศึกษา}
+			\label{Fig:Sequence-Edit}
+		\end{figure}
+	\end{landscape}
+	
+	จากภาพที่ \ref{Fig:Sequence-Edit} สามารถอธิบายแผนภาพ Sequence Diagram อัพเดทข้อมูลนักศึกษา ได้ดังนี้ เมื่อ
+	ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด ngOnInit() ที่คลาส CardComponent ระบบจะส่งคำร้องขอไปที่ฐานข้อมูล ซึ่งฐานข้อมูลจะเรียนใช้เมธอด getAllCourse() โดยจะทำหน้าที่ค้นหาและคืนค่าข้อมูลชั้นเรียนที่มีในฐานข้อมูล จากนั้นระบบจะรับค่าที่คืนมาจากฐานข้อมูลโดยจะแสดงเป็นการ์ด เมื่อผู้ใช้เลือกคิวอาร์โค้ดระบบจะเรียกใช้งานเมธอด pageup() ระบบจะไปที่หน้าสร้างคิวอาร์โค้ดโดยส่งข้อมูล id ของชั้นเรียนไปในรูปแบบ ActivatedRoute เมื่อมาที่หน้าสร้างคิวอาร์โค้ดแล้วระบบจะเรียกใช้เมธอด ngOnInit() ที่คลาส EditComponent ระบบจะส่งข้อมูล id ไปที่ฐานข้อมูลไปค้นหาในรูปแบบ POST ในเมธอด report() โดยเมธอดจะค้นหาชั้นเรียนตาม id ที่ได้มาและคืนค่าข้อมูลชั้นเรียนที่หาพบและระบบจะแสดงหน้าอัพเดทข้อมูลนักศึกษา ผู้ใช้งานคลิกเพิ่มนักศึกษาระบบจะเรียกใช้เมธอด show() ในคลาส EditComponent โดยเมธอดนี้จะทำการแสดงหน้ากรอกข้อมูลนักศึกษา เมื่อกรอกข้อมูลนักศึกษาแล้วกดปุ่มตกลงระบบจะเรียนใช้เมธอด addup() ในคลาส EditComponent โดยเมธอดนี้จะทำหน้าส่งข้อมูลที่กรอกเข้ามาในหน้ากรอกข้อมูลนักศึกษาส่งไปในรูปแบบ POST เพื่อเก็บในฐานข้อมูล ซึ่งจะเรียกใช้เมธอด addupstudent() ในการบันทึกลงในฐานข้อมูลและจะคืนค่าข้อมูลนักศึกษาที่เพิ่มใหม่มาที่คลาส EditCompo
+	nent จากนั้นจะแสดงข้อมูลรายชื่อนักศึกษา ต่อมาผู้ใช้งานคลิกปุ่มแก้ไขนักศึกษาระบบจะเรียกใช้เมธอด show() ในคลาส EditComponent โดยเมธอดนี้จะทำการแสดงหน้ากรอกข้อมูลนักศึกษา เมื่อกรอกข้อมูลนักศึกษาแล้วกดปุ่มตกลงระบบจะเรียนใช้เมธอด editstude
+	nt() ในคลาส EditComponent โดยเมธอดนี้จะทำหน้าส่งข้อมูลที่กรอกเข้ามาในหน้ากรอกข้อมูลนักศึกษาส่งไปในรูปแบบ POST เพื่อเก็บในฐานข้อมูล ซึ่งจะเรียกใช้เมธอด editstudent() ในการบันทึกลงในฐานข้อมูลและจะคืนค่าข้อมูลนักศึกษามาที่คลาส EditCo
+	mponent จากนั่นจะแสดงข้อมูลรายชื่อนักศึกษา สุดท้ายผู้ใช้งานคลิกลบนักศึกษาระบบจะเรียกใช้เมธอด delete() ในคลาส EditComponent โดยเมธอดนี้จะทำหน้าส่งข้อมูล id ชั้นเรียนและรหัสนักศึกษาไปในรูปแบบ POST เพื่อค้นหาและทำการลบข้อมูลในฐานข้อมูล ซึ่งจะเรียกใช้เมธอด deletestudent() ในการลบข้อมูลในฐานข้อมูลและจะคืนค่าข้อมูลนักศึกษามาที่คลาส EditComponent จากนั้นจะแสดงข้อมูลรายชื่อนักศึกษา	
+			
+		\begin{landscape}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=0.65\columnwidth]
+			{Figures/3/Sequence Diagram/QrcodeComponent}
+			\caption{Sequence Diagram สร้างคิวอาร์โค้ด}
+			\label{Fig:Sequence-Qrcode}
+		\end{figure}
+	\end{landscape}
+	จากภาพที่ \ref{Fig:Sequence-Qrcode} สามารถอธิบายแผนภาพ Sequence Diagram สร้างคิวอาร์โค้ด ได้ดังนี้ เมื่อ
+ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด ngOnInit() ที่คลาส CardComponent ระบบจะส่งคำร้องขอไปที่ฐานข้อมูล ซึ่งฐานข้อมูลจะเรียกใช้เมธอด getAllCourse() โดยจะทำหน้าที่ค้นหาและคืนค่าข้อมูลชั้นเรียกที่มีในฐานข้อมูล จากนั้นระบบจะรับค่าที่คืนมาจากฐานข้อมูลโดยจะแสดงเป็นการ์ด เมื่อผู้ใช้เลือกคิวอาร์โค้ดระบบจะเรียกใช้งานเมธอด pageqr() ที่คลาส CardComponent ระบบจะไปที่หน้าสร้างคิวอาร์โค้ดโดยส่งข้อมูล id ของชั้นเรียนไปในรูปแบบ ActivatedRoute เมื่อมาที่หน้าสร้างคิวอาร์โค้ดแล้วระบบจะเรียกใช้เมธอด ngOnInit() ที่คลาส UploadfileComponent ระบบจะส่งข้อมูล id ไปที่ฐานข้อมูลไปค้นหาในรูปแบบ POST ในเมธอด report() โดยเมธอดจะค้นหาชั้นเรียนตาม id ที่ได้มาและคืนค่าข้อมูลชั้นเรียนที่หาพบและระบบจะแสดงหน้าสร้างคิวอาร์โค้ด จากนั้นเมื่อผู้ใช้งานตั้งค่าคิวอาร์โค้ดแล้วกด Start QRcode ระบบจะเรียกใช้เมธอด Start() ซึ่งเมธอดนี้จะทำหน้าที่ในการสร้าง URL ของคิวอาร์โค้ดและเรียกใช้เมธอด heroku() โดยเมธอดนี้จะทำหน้าที่อัพเดท URL ที่เก็บไว้ในฐานข้อมูล จากนั้นระบบจะเรียกใช้งานเมธอด ngOnInit() ซึ่งจะหน้าที่ในการนับเวลาของคิวอาร์โค้ด เมื่อเวลาเริ่มนับถอยหลังระบบจะส่งข้อมูล URL ในรูปแบบ POST ไปเก็บไว้ในฐานข้อมูลและคืนค่า URL ที่บันทึกในฐานข้อมูล จากนั้นระบบจะแสดงคิวอาร์โค้ด เมื่อเวลานับถ่อยหลังหมดลงระบบจะส่ง URL ไปอัพเดทในฐานข้อมูลและคืนค่า URL ที่บันทึกในฐานข้อมูล จากนั้นจะแสดงรายชื่อนักศึกษาที่เข้าเรียน  
+
+		\begin{landscape}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=0.55\columnwidth]
+			{Figures/3/Sequence Diagram/InfoComponent}
+			\caption{Sequence Diagram จัดการคะแนน}
+			\label{Fig:Sequence-Info}
+		\end{figure}
+	\end{landscape}
+	จากภาพที่ \ref{Fig:Sequence-Info} สามารถอธิบายแผนภาพ Sequence Diagram จัดการคะแนน ได้ดังนี้ เมื่อ
+	ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด ngOnInit() ที่คลาส CardComponent ระบบจะส่งคำร้องขอไปที่ฐานข้อมูล ซึ่งฐานข้อมูลจะเรียกใช้เมธอด getAllCourse() โดยจะทำหน้าที่ค้นหาและคืนค่าข้อมูลชั้นเรียนที่มีในฐานข้อมูล จากนั้นระบบจะรับค่าที่คืนมาจากฐานข้อมูลโดยจะแสดงเป็นการ์ด เมื่อผู้ใช้คลิกจัดการคะแนนระบบจะเรียกใช้งานเมธอด pageinfo() ที่คลาส CardComponent ระบบจะไปที่หน้าสร้างคิวอาร์โค้ดโดยส่งข้อมูล id ของชั้นเรียนไปในรูปแบบ ActivatedRoute เมื่อมาที่หน้าจัดการคะแนนแล้วระบบจะเรียกใช้เมธอด ngOnInit() ที่คลาส InfoComponent ระบบจะส่งข้อมูล id ไปที่ฐานข้อมูลไปค้นหาในรูปแบบ POST ในเมธอด report() โดยเมธอดจะค้นหาชั้นเรียนตาม id ที่ได้มาและคืนค่าข้อมูลชั้นเรียนที่หาพบและระบบจะแสดงหน้าจัดการคะแนน โดยหน้าจัดการคะแนนจะโชว์รายชื่อและข้อมูลคะแนนของนักศึกษา เมื่อผู้ใช้งานคลิกปุ่มมาระบบจะเรียกใช้เมธอด checkbyTcome() ในคลาส InfoComponent ซึ่งเมธอดนี้จะทำการส่งข้อมูล id ชั้นเรียนและรหัสนักศึกษาไปที่ฐานข้อมูลในรูปแบบ POST โดยฐานข้อมูลจะเรียกใช้เมธอด checkIn() เพื่อให้คะแนนและจะคือค่าที่อัพเดทคะแนนกลับมาที่คลาส InfoComponent จากนั้นก็จะแสดงรายชื่อพร้อมคะแนนที่อัพเดท ต่อมาเมื่อผู้ใช้งานคลิกปุ่มสายระบบจะเรียกใช้เมธอด checkbyTlast() ในคลาส InfoComponent ซึ่งเมธอดนี้จะทำการส่งข้อมูล id ชั้นเรียนและรหัสนักศึกษาไปที่ฐานข้อมูลในรูปแบบ POST โดยฐานข้อมูลจะเรียกใช้เมธอด checknameT() เพื่อให้คะแนนและจะคือค่าที่อัพเดทคะแนนกลับมาที่คลาส InfoComponent จากนั้นก็จะแสดงรายชื่อพร้อมคะแนนที่อัพเดท สุดท้ายเมื่อผู้ใช้งานคลิกปุ่มมาระบบจะเรียกใช้เมธอด checkbyOut() ในคลาส InfoComponent ซึ่งเมธอดนี้จะทำการส่งข้อมูล id ชั้นเรียนและรหัสนักศึกษาไปที่ฐานข้อมูลในรูปแบบ POST โดยฐานข้อมูลจะเรียกใช้เมธอด checknameO() เพื่อให้คะแนนและจะคือค่าที่อัพเดทคะแนนกลับมาที่คลาส InfoComponent จากนั้นก็จะแสดงรายชื่อพร้อมคะแนนที่อัพเดท 
+
+		\begin{landscape}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=0.65\columnwidth]
+			{Figures/3/Sequence Diagram/InfonameComponent}
+			\caption{Sequence Diagram ดูประวัติ}
+			\label{Fig:Sequence-Infoname}
+		\end{figure}
+	\end{landscape}
+	จากภาพที่ \ref{Fig:Sequence-Infoname} สามารถอธิบายแผนภาพ Sequence Diagram ดูประวัติ ได้ดังนี้ เมื่อ
+	ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด ngOnInit() ที่คลาส CardComponent ระบบจะส่งคำร้องขอไปที่ฐานข้อมูล ซึ่งฐานข้อมูลจะเรียกใช้เมธอด getAllCourse() โดยจะทำหน้าที่ค้นหาและคืนค่าข้อมูลชั้นเรียนที่มีในฐานข้อมูล จากนั้นระบบจะรับค่าที่คืนมาจากฐานข้อมูลโดยจะแสดงเป็นการ์ด เมื่อผู้ใช้คลิกดูประวัติระบบจะเรียกใช้งานเมธอด pageinfoname() ที่คลาส CardComponent ระบบจะไปที่หน้าสร้างคิวอาร์โค้ดโดยส่งข้อมูล id ของชั้นเรียนไปในรูปแบบ ActivatedRoute เมื่อมาที่หน้าจัดการคะแนนแล้วระบบจะเรียกใช้เมธอด ngOnInit() ที่คลาส InfonameComponent ระบบจะส่งข้อมูล id ไปที่ฐานข้อมูลไปค้นหาในรูปแบบ POST ในเมธอด report() โดยเมธอดจะค้นหาชั้นเรียนตาม id ที่ได้มาและคืนค่าข้อมูลชั้นเรียนที่หาพบและระบบจะแสดงหน้าประวัติ โดยหน้าประวัติจะโชว์ข้อมูลรายชื่อและคะแนนแต่ละสัปดาห์ของนักศึกษา เมื่อผู้ใช้คลิกปุ่มรวมไฟล์ระบบจะเรียกใช้งานเมธอด showsumfile() ในคลาส InfonameComponent ซึ่งเมธอดนี้ทำหน้าที่แสดงหน้ารวมไฟล์ เมื่อผู้ใช้เลือกไฟล์ระบบขะเรียกใช้งานเมธอด readfile() ในคลาส InfonameComponent ซึ่งเมธอดนี้จะทำหน้าที่อ่านไฟล์และตรวจสอบ ถ้าผู้ใช้กด save ระบบจะเรียกใช้งานเมธอด totlescore() ในคลาส InfonameComponent ซึ่งเมธอดนี้จะทำการรวมคะแนนจากไฟล์ที่นำเข้าและคะแนนเดิม จากนั้นจะเรียกใช้เมธอด sumscore() โดยเมธอดนี้จะทำการส่งข้อมูลไปที่ฐานข้อมูลที่อัพดกทไปเก็บในฐานข้อมูล ซึ่งฐานข้อมูลจะเรียกใช้เมธอด updatescore() เพื่อบันทึกข้อมูล จากนั้นจะส่งค่าข้อมูลที่อัพเดทกลับมาที่คลาส InfonameComponent แล้วจึงแสดงข้อมูลที่อัพเดท แต่ถ้าผู้ใช้งานกดกลับระบบจะกลับสู่หน้าประวัติ เมื่อผู้ใช้งานกดปุ่มดาวน์โหลดระบบจะเรียกใช้งานเมธอด downloadfile() ในคลาส InfonameComponent ซึ่งเมธอดนี้ทำหน้าที่ในการดาวน์โหลดข้อมูลรายชื่อและคะแนนของนักศึกษาเป็นไฟล์ excel
+
+	\begin{sidewaysfigure}
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.8\columnwidth]
+		{Figures/3/Sequence Diagram/QRcdoe}
+		\caption{Sequence Diagram สแกน QRcode}
+		\label{Fig:Sequence-scanQRcdoe}
+	\end{figure}
+	\end{sidewaysfigure}
+	\newpage
+	จากภาพที่ \ref{Fig:Sequence-scanQRcdoe} สามารถอธิบายแผนภาพ Sequence Diagram สแกน QRcode ได้ดังนี้ เมื่อนักศึกษาสแกนคิวอาร์โค้ด คิวอาร์โค้ดจะลิงค์ไปยัง Server โดยจะส่งค่า key ที่เก็บไว้ในคิวอาร์โค้ดไปเพื่อนำไปค้นหาชั้นเรียน จากนั้น Server จะเรียกใช้เมธอด getKey() ซึ่งเมธอดนี้จะทำหน้าที่คืนค่า url สำหรับไปที่หน้ากรอกรหัสนักศึกษา 
+	
+		\begin{sidewaysfigure}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=0.8\columnwidth]
+			{Figures/3/Sequence Diagram/FromstusentComponent}
+			\caption{Sequence Diagram กรอกรหัสนักศึกษา}
+			\label{Fig:Sequence-Fromstusent}
+		\end{figure}
+	\end{sidewaysfigure}
+	\newpage
+	จากภาพที่ \ref{Fig:Sequence-Fromstusent} สามารถอธิบายแผนภาพ Sequence Diagram กรอกรหัสนักศึกษา ได้ดังนี้ เมื่อนักศึกษาสแกนคิวอาร์โค้ดผ่านจะเข้ามาที่หน้ากรอกรหัสนักศึกษาโดยระบบจะให้
+	กรอกรหัสนักศึกษาเพื่อเป็นการยื่นยันตัวตนจากนั้นระบบจะเรียกใช้งานเมธอด getlocaltion() ในคลาส FromstusentComponent  เพื่อระบุตำแหน่งของนักศึกษา เมื่อกดตกลงระบบจะเรียกใช้เมธอด bitween() เพื่อคำนวนหาระยะห่างระหว่างอาจารย์กับนักศึกษา จากนั้นจะเรียกใช้เมธอด checknamesad() เพื่อตรวจสอบว่านักศึกษาเช็คชื่อไปแล้วหรือยัง แล้วจึงเรียกใช้เมธอด saddata() เพื่อส่งข้อมูลไปที่ฐานข้อมูลในรูปแบบ POST โดยฐานข้อมูลจะเรียกใช้เมธอด checkIn() เพื่อจัดการคะแนนของนักศึกษา จากนั้นจะคืนค่าสถานะกลับมาที่คลาส FromstusentComponent ซึ่งคลาสจะทำการแจ้งเตือนการเช็คชื่อของนักศึกษา
+\newpage	 
+	
+\section{โครงสร้างฐานข้อมูลไฟร์เบส (MongoDB Database Stucture)}
+MongoDB Database นั้นเป็น Database แบบ NoSQL และเป็น JSON database ที่มีโครงสร้างที่เป็น Key และ Value จัดเก็บข้อมูลในลักษณะโหนด โดยการท่องไปยังโหนดที่ต้องการ ส่วนประกอบสัญลักษณ์ที่ใช้ในการเขียนโครงสร้างฐานข้อมูลแบบ MongoDB
+แสดงดังตารางที่ \ref{tab:DB}
+
+\begin{table}[H]
+	\centering
+	\caption{สัญลักษณ์ของโครงสร้างฐานข้อมูลแบบ MongoDB}
+	\label{tab:DB}
+	\begin{tabular}{| c	| p{10cm} |}
+		\hline
+		\textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[width=0.1\textwidth]{Figures/3/DB/dbroot}}
+		& \setstretch{1.5} {Database เป็นการเรียกชื่อแทนโหนด (Node) บนสุดที่ใช้ในการเก็บข้อมูล} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[width=0.1\textwidth]{Figures/3/DB/dbcollection}}
+		& \setstretch{1.5} {Collection เป็นการเรียกชื่อแทนของการเก็บหลาย ๆ เอกสารไว้ด้วยกัน} \\ \hline
+		\raisebox{-\totalheight}{\includegraphics[width=0.1\textwidth]{Figures/3/DB/dbdoc}}
+		& \setstretch{1.5} {Document เป็นการเรียกชื่อแทนหน่วยการเก็บของข้อมูลใน Cloud Firestore ภายในจะประกอบไปด้วย ชื่อของ Document  ชื่อของคีย์ (key) และ ค่าข้อมูล (value) โดยชื่อของ Document ห้ามซ้ำกัน ซึ่งใน Cloud Firestore สามารถระบุประเภทของข้อมูลได้ 9 ประเภทได้แก่ boolean, number, string, geo point, timestamp, array, object, reference และ null} \\ \hline
+	\end{tabular}
+\end{table}
+	
+	\begin{figure}[H]
+	\centering
+	\includegraphics[width=0.7\columnwidth]
+	{Figures/3/DB/New folder/MongoDB}
+	\caption{โครงสร้างฐานข้อมูลแบบ MongoDB}
+	\label{Fig:DB1}
+\end{figure}
+\newpage
+จากรูที่ \ref{Fig:DB1} สามารถอธิบายโครงสร้างของข้อมูลได้ดังนี้
+
+
+test คือชื่อฐานข้อมูลของระบบเช็คชื่อดัวยคิวอาร์โค้ด ซึ่งจะเก็บข้อมูลต่าง ๆ เช่น ข้อมูลรายวิชา รายชื่อนักศึกษา และคะแนนในการเข้าเรียน โดยระบบจะเก็บข้อมูลเหล่านี้ไว้ในฐานข้อมูลบนคอมพิวเตอร์ของอาจารย์ ซึ่งข้อมูลจะเก็บไว้ใน Collection ชื่อ course โดยใน course จะเก็บข้อมูลชั้นเรียนทั้งหมดที่ถูกเพิ่มเข้ามา ดังตารางที่ 3.22    
+\begin{table}[H]
+	\centering
+	\caption{อธิบายส่วนที่ใช้เก็บข้อมูล}
+	\label{my-label1}
+	\begin{tabular}{|c|p{10cm}|}
+		\hline
+		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
+		course & โหนดสำหรับเก็บข้อมูลชั้นเรียนทั้งหมด \\ \hline
+		course\_id  &  สำหรับเก็บข้อมูลไอดีของชั้นเรียน \\ \hline
+		course\_name  & สำหรับเก็บข้อมูลชื่อของชั้นเรียน \\ \hline
+		time & สำหรับเก็บข้อมูลเวลาของชั้นเรียน  \\ \hline
+		seson & สำหรับเก็บข้อมูลเทอมของชั้นเรียน \\ \hline
+		students & โหนดสำหรับเก็บข้อมูลนักศึกษาทั้งหมด \\ \hline
+		number\_id  & สำหรับเก็บเลขที่ของนักศึกษา \\ \hline
+		id\_student  & สำหรับเก็บรหัสนักศึกษา \\ \hline
+		name   & สำหรับเก็บชื่อของศึกษา \\ \hline
+		weeks & โหนดสำหรับเก็บข้อมูลคะแนนแต่ละอาทิตย์ \\ \hline
+		week    & สำหรับเก็บคะแนนศึกษา \\ \hline
+		id\_active   & สำหรับเก็บสถานะ \\ \hline
+	\end{tabular}
+\end{table}
+
+\newpage
+\begin{figure}[H]
+	\centering
+	\includegraphics[width=0.5\columnwidth]
+	{Figures/3/DB/New folder/HerokuDB}
+	\caption{โครงสร้างฐานข้อมูลแบบ MongoDB }
+	\label{Fig:DB2}
+\end{figure}
+จากรูที่ \ref{Fig:DB2} สามารถอธิบายโครงสร้างของข้อมูลได้ดังนี้
+
+
+huroku\_4v7v1l คือชื่อฐานข้อมูลของคิวอาร์โค้ด ฐานข้อมูลส่วนนี้จะเก็บข้อมูลต่าง ๆ ของคิวอาร์โค้ดไว้ใน Collection ชื่อ qr\_api ซึ่งข้อมูลใน Collection นี้จะเก็บในรูปแบบ Object  ดังตารางที่ 3.23
+\begin{table}[H]
+	\centering
+	\caption{อธิบายส่วนที่ใช้เก็บข้อมูลใน Heroku Server}
+	\label{my-label1}
+	\begin{tabular}{|c|p{10cm}|}
+		\hline
+		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
+		qr\_api & โหนดสำหรับเก็บข้อมูลของคิวอาร์โค้ดทั้งหมด \\ \hline
+		course\_id  &  สำหรับเก็บไอดีของชั้นเรียน \\ \hline
+		course\_key  & สำหรับเก็บคีย์ของคิวอาร์โค้ด \\ \hline
+		url  & สำหรับเก็บ URL ของคิวอาร์โค้ด \\ \hline
+	\end{tabular}
+\end{table}

Document/Latex/5-testing.tex

+\chapter{การทดสอบระบบ}
+การทดสอบการทำงานของเว็บแอปพลิเคชันระบบเช็คชื่อดัวยคิวอาร์โค้ด โดยทำการทดสอบในลักษณะ Black-box Testing \cite{blackbox} หรือ Data-Driven testing ซึ่งเป็นการเทสแบบที่ไม่สนใจโปรเซส (Process) การทำงานภายในของโปรแกรมว่าทำงานอย่างไร แต่จะเน้นไปที่ Input และ Result ที่ได้มากกว่าว่าการทำงานต่าง ๆ ถูกต้องตามความต้องการ (Requirement) หรือไม่ ซึ่งการทดสอบการใช้งานเว็บแอปพลิเคชัน ได้ผลดังนี้
+
+\section{การทดสอบการใช้งานเว็บแอปพลิเคชัน}
+	
+	\subsection{การทดสอบหน้าสร้างชั้นเรียน}
+	การทดสอบหน้าสร้างชั้นเรียนของเว็บแอปพลิเคชันในการสร้างชั้นเรียนของอาจารย์ ซึ่งการทำงานประกอบด้วย เมนูเลือกไฟล์ เมนูอัพโหลดไฟล์ และรายละเอียดของชั้นรียนที่อัพโหลด ผลทดสองแสดงดังตารางที่ \ref{tab:ผลการทดหน้าสร้างชั้นเรียน}
+	\begin{table}[H]
+		\caption{ผลการทดสอบการสร้างชั้นเรียน}
+		\centering	
+		\label{tab:ผลการทดหน้าสร้างชั้นเรียน}
+		\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+			\hline
+			% {\setstretch{1.0} } 
+			{\multicolumn{1}{c}{\centering การทำงาน}}  & 
+			{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+			\setstretch{1.0}{สร้างชั้นเรียน} 
+			& \setstretch{1.0}{กดปุ่มเมนูเลือกไฟล์}
+			& \setstretch{1.0}{ระบบแสดงผลหน้าจอเลือกไฟล์ที่จะอัพโหลด} \\ \cline{2-3}
+			& \setstretch{1.0}{เลือกไฟล์ excel ทีถูกเทมเพลต}
+			& \setstretch{1.0}{ระบบแสดงรายละเอียดข้อมูลของชั้นเรียน ถ้าไฟล์ไม่ถูกเทมเพลตระบบแสดงข้อความ ``ไฟล์ไม่ถูกต้อง"} \\ \cline{2-3}
+			& \setstretch{1.0}{กดปุ่มเมนูเลือกเทอม}
+			& \setstretch{1.0}{ระบบแสดงตัวเลือก 1 2 และ 3 } \\ \cline{2-3}
+			& \setstretch{1.0}{กดปุ่มเมนูอัพโหลดไฟล์}
+			& \setstretch{1.0}{ระบบจะทำการอัพโหลดไฟล์ไปที่ฐานข้อมูล และกลับไปที่หน้าหลัก} \\ \hline 
+
+		\end{tabular}
+	\end{table}
+	
+	\newpage
+\subsection{การทดสอบหน้าอัพเดทข้อมูลนักศึกษา}
+ในการแสดงผลหน้าอัพเดทข้อมูลนักศึกษานั้นจะประกอบไปด้วย รายละเอียดรายชื่อนักศึกษา เมนูเพิ่มนักศึกษา เมนูแก้ไขและเมนูลบ ผลการทดสอบดังตารางที่ \ref{tab:การทดหน้าอัพเดทข้อมูลนักศึกษา}
+\begin{table}[H]
+	\caption{ผลการทดสอบหน้าอัพเดทข้อมูลนักศึกษา}
+	\centering	
+	\label{tab:การทดหน้าอัพเดทข้อมูลนักศึกษา}
+	\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering การทำงาน}}  & 
+		{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+		\setstretch{1.0}{หน้าอัพเดทข้อมูลนักศึกษา} 
+		& \setstretch{1.0}{กดปุ่มเพิ่มนักศึกษา}
+		& \setstretch{1.0}{ระบบแสดงผลหน้าสำหรับกรอกข้อมูลนักศึกษา} \\ \cline{2-3} 
+		& \setstretch{1.0}{กดปุ่มแก้ไข} 
+		& \setstretch{1.0}{ระบบแสดงผลหน้าสำหรับกรอกข้อมูลนักศึกษา} \\ \cline{2-3} 
+		& \setstretch{1.0}{กดปุ่มลบ} 
+		& \setstretch{1.0}{ระบบลบข้อมูลนักศึกษา} \\ \cline{2-3} 
+		& \setstretch{1.0}{กดปุ่มกลับ} 
+		& \setstretch{1.0}{ระบบแสดงผลหน้าจอหลัก} \\ \hline
+	\end{tabular}
+\end{table}
+	
+	\newpage
+	\subsection{การทดสอบหน้าสร้างคิวอาร์โค้ด}	ในการแสดงผลหน้าสร้างคิวอาร์โค้ดนั้นจะประกอบไปด้วย เมนูเลือกสัปดาห์ เมนูเลือกเวลา และเมนูสร้างคิวอาร์โค้ด  ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าสร้างคิวอาร์โค้ด}
+	\begin{table}[H]
+		\caption{ผลการการทดสอบหน้าสร้างคิวอาร์โค้ด}
+		\centering	
+		\label{tab:การทดสอบหน้าสร้างคิวอาร์โค้ด}
+		\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+			\hline
+			% {\setstretch{1.0} } 
+			{\multicolumn{1}{c}{\centering การทำงาน}}  & 
+			{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+			\setstretch{1.0}{สร้างคิวอาร์โค้ด} 
+			& \setstretch{1.0}{กดปุ่มเมนูเลือกสัปดาห์}
+			& \setstretch{1.0}{ระบบแสดงตัวเลือก 1-16 ซึ่งเป็นสัปดาห์ที่เช็คชื่อ} \\ \cline{2-3} 
+			& \setstretch{1.0}{กดปุ่มเมนูเลือกเวลา} 
+			& \setstretch{1.0}{ระบบแสดงตัวเลือก 5, 10, 15 และ 30 ซึ่งเป็นเวลาของคิวอาร์โค้ดที่เช็คชื่อ} \\ \cline{2-3}
+			& \setstretch{1.0}{กดปุ่ม Start QR code} 
+			& \setstretch{1.0}{ระบบแสดงคิวอาร์โค้ดพร้อมกับเวลาและสัปดาห์ของคิวอาร์โค้ดที่ตั้งค่า} \\ \hline 
+
+		\end{tabular}
+	\end{table}
+	
+	\newpage
+	\subsection{การทดสอบหน้าจัดการคะแนน}
+	ในการแสดงผลหน้าจัดการคะแนนนั้นจะประกอบไปด้วย เมนูเลือกสัปดาห์ เมนูเลือกสถานะ รายชื่อและคะแนนนักศึกษา เมนูมา เมนูสาย และเมนูขาด ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าจัดการคะแนน}
+	\begin{table}[H]
+		\caption{ผลการการทดสอบหน้าจัดการคะแนน}
+		\centering	
+		\label{tab:การทดสอบหน้าจัดการคะแนน}
+		\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+			\hline
+			% {\setstretch{1.0} } 
+			{\multicolumn{1}{c}{\centering การทำงาน}}  & 
+			{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+			\setstretch{1.0}{จัดการคะแนน} 
+			& \setstretch{1.0}{กดปุ่มเมนูเลือกสัปดาห์} 
+			& \setstretch{1.0}{ระบบแสดงตัวเลือก 1-16 ซึ่งเป็นสัปดาห์ที่เช็คชื่อ} \\ \cline{2-3} 
+			& \setstretch{1.0}{กดปุ่มเมนูเลือกสถานะ} 
+			& \setstretch{1.0}{ระบบแสดงตัวเลือก มา ขาด และสาย ซึ่งเป็นสถานะของนักศึกษา} \\ \cline{2-3} 
+			& \setstretch{1.0}{กดปุ่มเมนูมา}
+			& \setstretch{1.0}{ระบบส่งคะแนนไปเก็บในฐานข้อมูล และแสดงคะแนน} \\ \cline{2-3} 
+			& \setstretch{1.0}{กดปุ่มเมนูสาย}
+			& \setstretch{1.0}{ระบบส่งคะแนนไปเก็บในฐานข้อมูล และแสดงคะแนน} \\ \cline{2-3} 
+			& \setstretch{1.0}{เมนูขาด} 
+			& \setstretch{1.0}{ระบบส่งคะแนนไปเก็บในฐานข้อมูล และแสดงคะแนน} \\ \hline
+		\end{tabular}
+	\end{table}
+
+	\newpage
+	
+	\subsection{การทดสอบหน้าดูประวัติการเข้าเรียน}
+	ในการแสดงผลหน้าดูประวัติการเข้าเรียนนั้นจะประกอบไปด้วย รายชื่อและคะแนนนักศึกษาทั้งหมด เมนูดาวน์โหลดไฟล์และเมนูรวมไฟล์ ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าดูประวัติการเข้าเรียน}
+	\begin{table}[H]
+		\caption{ผลการการทดสอบหน้าดูประวัติการเข้าเรียน}
+		\centering	
+		\label{tab:การทดสอบหน้าดูประวัติการเข้าเรียน}
+		\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+			\hline
+			% {\setstretch{1.0} } 
+			{\multicolumn{1}{c}{\centering การทำงาน}}  & 
+			{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+			\setstretch{1.0}{ดูประวัติการเข้าเรียน} 
+			& \setstretch{1.0}{กดปุ่มดูประวัติจากหน้าหลัก}
+			& \setstretch{1.0}{ระบบแสดงผลหน้าจอตารางรายชื่อและคะแนนของนักศึกษาทั้งหมดในชั้นเรียน} \\ \cline{2-3}
+			& \setstretch{1.0}{กดปุ่มดาวน์โหลดไฟล์}
+			& \setstretch{1.0}{ระบบทำการดาวน์โหลดรายชื่อและคะแนนของนักศึกษาทั้งหมดในชั้นเรียน โดยดาวน์โหลดเป็นไฟล์ excel} \\ \cline{2-3}
+			& \setstretch{1.0}{กดปุ่มรวมไฟล์}
+			& \setstretch{1.0}{ระบบแสดงผลหน้าจอเลือกไฟล์ที่จะอัพโหลด โดยไฟล์ต้องเป็นไฟล์ที่ดาวน์โหลดจากระบบช็คชื่อดัวยคิวอาร์โค้ดถ้าไม่ใช่ระบบจะแสดงข้อความ ``ไฟล์ไม่ถูกต้อง" เมื่อเลือกไฟล์แล้วระบบจะแสดงรายละเอียดข้อมูลของชั้นเรียน} \\ \cline{2-3} 
+			& \setstretch{1.0}{กดปุ่ม save}
+			& \setstretch{1.0}{ระบบทำการอัพเดทข้อมูลคะแนนแต่ละสัปดาห์ และบันทึกลงในฐานข้อมูล} \\ \cline{2-3} 
+			& \setstretch{1.0}{กดปุ่มกลับ} 
+			& \setstretch{1.0}{ระบบแสดงผลหน้าจอหลัก} \\ \hline
+		\end{tabular}
+	\end{table}
+\newpage
+
+\subsection{การทดสอบหน้ากรอกรหัสนักศึกษา}
+ในการแสดงผลหน้ากรอกรหัสนักศึกษานั้นจะประกอบไปด้วย ช่องกรอกข้อมูล เมนูตกลง ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้ากรอกรหัสนักศึกษา}
+\begin{table}[H]
+	\caption{ผลการการทดสอบหน้ากรอกรหัสนักศึกษา}
+	\centering	
+	\label{tab:การทดสอบหน้ากรอกรหัสนักศึกษา}
+	\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering การทำงาน}}  & 
+		{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+		\setstretch{1.0}{กรอกรหัสนักศึกษา} 
+		& \setstretch{1.0}{สแกนคิวอาร์โค้ดของอาจารย์ก่อนหมดเวลา}
+		& \setstretch{1.0}{ระบบแสดงหน้ากรอกข้อมูลสำหรับรหัสนักศึกษา} \\ \cline{2-3}
+		& \setstretch{1.0}{สแกนคิวอาร์โค้ดของอาจารย์หลังหมดเวลา}
+		& \setstretch{1.0}{ระบบแสดงหน้าหมดเวลาสแกน} \\ \cline{2-3}
+		& \setstretch{1.0}{กดปุ่มเมนูตกลง}
+		& \setstretch{1.0}{ระบบทำการส่งข้อมูลรหัสนักศึกษาไปตรวจสอบและบันทึกคะแนนลงในฐานข้อมูล} \\ \hline
+	\end{tabular}
+\end{table}
+

Document/Latex/6-conclusion.tex

+\chapter{สรุปและข้อเสนอแนะ}
+
+การดำเนินโครงงานเพื่อพัฒนาระบบเช็คชื่อดัวยคิวอาร์โค้ดนี้ พบว่าระบบสามารถทำงานได้ตามที่วิเคราะห์และออกแบบไว้ แต่ก็พบปัญหาและอุปสรรคระหว่างการพัฒนา ในบทนี้ผู้พัฒนาจึงขอสรุปความสามารถของระบบ ชี้แจงปัญหาและอุปสรรค พร้อมเสนอแนวทางในการพัฒนาระบบเช็คชื่อดัวยคิวอาร์โค้ดต่อตามลำดับ
+
+\section{สรุปความสามารถของระบบ}
+	ระบบเช็คชื่อดัวยคิวอาร์โค้ด เว็บแอปพลิเคชันสามารถสรุปความสามารถที่ระบบทำได้ดังนี้
+	\subsection{เว็บแอปพลิเคชัน}
+	ความสามารถหลักของเว็บแอปพลิเคชันนั้นเน้นสร้างความสะดวกต่อการจัดการเอกสารเรื่องข้อมูลต่างๆ ที่เกี่ยวข้องกับระบบเช็คชื่อดัวยคิวอาร์โค้ด โดยแบ่งความสามารถของระบบตามประเภทของผู้ใช้งานดังนี้
+		\begin{enumerate}
+			 \item อาจารย์
+				 \begin{itemize}
+				 	\item ตรวจสอบรายชื่อนักศึกษาในคลาสเรียน
+				 	\item เพิ่ม และลบ คลาสเรียน
+				 	\item จัดการคะแนนของนักศึกษา 
+				 	\item เพิ่ม ลบ และแก้ไข ชื่อนักศึกษาในคลาสเรียนได้
+				 	\item รวมไฟล์คะแนน ของคลาสเรียนเดียวกัน
+				 	\item สร้างคิวอาร์โค้ด สำหรับให้นักศึกษาสแกนเพื่อเช็คชื่อได้
+				 \end{itemize}
+			\item นักศึกษา
+				\begin{itemize}
+					\item สแกนคิวอาร์โค้ดของผู้สอนเพื่อเป็นการเช็คชื่อเข้าเรียน 
+				\end{itemize}
+		\end{enumerate}
+	
+\newpage
+
+\section{ปัญหาและอุปสรรคในการพัฒนา}
+  \begin{enumerate}
+   \item เนื่องจากตัวระบบเป็นเว็บแอปพลิเคชันจึงไม่สามารถดึงค่า IP ของเครื่องคอมพิวเตอร์ของอาจารย์ได้จึงจำเป็นต้องตั้งค่าเลข IP ก่อนจะใช้งานระบบ \\ 
+   แนวทางการแก้ไข : ทำเป็นโปรแกรมเดสก์ท็อปที่สามารถติดตั้งบนเครื่องคอมพิวเตอร์ ซึ่งสามารถดึงค่า IP ของเครื่องคอมพิวเตอร์มาใช้งานได้    
+  \end{enumerate}
+
+\section{แนวทางการพัฒนาต่อ}
+\begin{enumerate}
+	\item พัฒนาระบบ Login สำหรับอาจารย์เพื่อใช้ฐานข้อมูลเดียวกัน ซึ่งจะแก้ปัญหาเรื่องการแก้ไขจำนวนนักศึกษาของอาจารย์แต่ละคน และทำไม่สามารถรวมไฟล์คะแนนได้เนื่องจากจำนวนนักศึกษาไม่ตรงกันจากการแก้นั้น
+	\item สร้าง Web server ของระบบซึ่งเป็นโปรแกรมที่มีหน้าที่ให้บริการด้านการจัดการเว็บไซต์และ Database server ซึ่งเป็นโปรแกรมที่ทำหน้าที่ให้บริการด้านการจัดการดูแลข้อมูลต่าง ๆ ภายในเว็บไซต์ 
+	\item พัฒนาระบบให้เป็นโปรแกรมบนเดสก์ท็อป โดยสามารถเปิดใช้งานผ่านเครื่องคอมพิวเตอร์ได้เลยไม่จำเป็นต้องเข้าผ่านเว็บเบราว์เซอร์
+	
+\end{enumerate}
+
+
+
+

Document/Latex/CS5911400000.tex

+% Default language option is [thaithesis]. The other possible option is [engthesis].
+% Default format option is [ugrad]. Other possible options are [master,doctor].
+\documentclass[a4paper,thaithesis]{ubu}
+
+% List all required packages here
+% ทุก package รวมไว้ที่เดียว 
+\usepackage{coding}
+
+%%------------------------------------------------------------
+%%-               SETTING THESIS PARAMETERS                  -
+%%------------------------------------------------------------
+
+%%-----------------   ชื่อโครงงาน                 -----------%%
+%% หัวข้อโครงงาน {ไทย} {English}
+\thesistitle                 
+{ระบบเช็คชื่อดัวยคิวอาร์โค้ด} 
+{QR Code check name} 
+
+%%-----------------   ผู้พัฒนาโครงงาน              -----------%%
+%% คำนำหน้า {ไทย} {English}
+\authortitle                            
+{นาย}                           
+{Mr.}                             
+%% ชื่อสกุล {ไทย} {English}
+\thesisauthor                           
+{เจตพล ชินพันธ์}                
+{Jadtaphon Chinnapan}            
+
+%%----------------   ผู้ร่วมพัฒนาโครงงาน (ถ้ามี)      -----------%%
+%% คำนำหน้า {ไทย} {English}
+%\coauthortitle                            
+                              
+%% ชื่อสกุล {ไทย} {English}
+%\thesiscoauthor                           
+                 
+
+%%----------------   อาจารย์ที่ปรึกษาโครงงาน        ----------%%
+\advisor   
+{อาจารย์ ดร.เกรียงศักดิ์ ตรีประพิณ}               
+{ดร. เกรียงศักดิ์ ตรีประพิณ}                          
+{Kriengsak Treeprapin, Ph.D.}  
+{KRIENGSAK TREEPRAPIN, Ph.D.}          
+
+%%----------------   อาจารย์ที่ปรึกษาโครงงาน (ถ้ามี)  ----------%%
+%\coadvisor
+%{อาจารย์ ดร.ชื่อร่วม สกุล}               
+%{ดร. ชื่อร่วม สกุล}                          
+%{Cofirstname Lastname, Ph.D.}  
+%{COFIRTNAME LASTNAME, Ph.D.}          
+
+%%----------------   ข้อมูลสถาบัน                  ----------%%
+%% คณะ {ไทย} {English}
+\faculty
+{วิทยาศาสตร์}                          
+{Science}                           
+%% ภาควิชา {ไทย} {English}
+\department                             
+{คณิตศาสตร์ สถิติ และคอมพิวเตอร์}                      
+{Mathematics Statistics and Computer}                  
+
+%%----------------   ข้อมูลหลักสูตรและรายวิชา        ----------%%
+%% ชื่อหลักสูตร
+\fieldofstudy                           
+{วิทยาการคอมพิวเตอร์}                      
+{Computer Science}                  
+%% ชื่อปริญญา
+\degree                                 
+{วิทยาศาสตรบัณฑิต}                   
+{Bachelor of Science}                  
+%% ปีการศึกษาที่ทำโครงงาน
+\academicyear{2562}                     
+%% รหัสประจำตัวนักศึกษา
+\authorid{59110440112}                   
+%% รหัสวิชา
+\subjID{1104494}							
+%% ชื่อวิชา
+\subjName								
+{โครงงานวิทยาศาสตร์}
+{Senior Project}
+
+%%----------------   หัวหน้าภาควิชา            ----------%%
+\deanname                               
+{ผศ.ดร. สุพจน์ สีบุตร}                       
+{ Asst. Prof. Supot Seebut, Ph.D.}     
+
+%%----------------   รายชื่อคณะกรรมการสอบโครงงาน -------%%
+\committee                              
+{
+\CommitteeBlockAdvisor                  
+\CommitteeBlockCoAdvisor                
+\CommitteeBlock{กรรมการ}{ดร.ทศพร จูฉิม} 
+\CommitteeBlock{กรรมการ}{ดร.ไพชยนต์ คงไชย} 
+}
+
+%%-------------------------------------------------------------------------------
+%%-                               DOCUMENT                                      -
+%%-------------------------------------------------------------------------------
+\begin{document}
+% หน้าปกภาษาไทย - Thai Cover
+\makethaicover
+\newpage
+
+% หน้าปกภาษาอังกฤษ - English Cover
+%\makeenglishcover
+%\newpage
+
+% หน้ารายชื่อคณะกรรมการสอบ - Committee page
+%\makecommittee
+\ThaiCommittee
+\newpage
+
+% หน้ากิตติกรรมประกาศจากไฟล์ acknowledgement.tex
+\include{acknowledgement}
+\newpage
+
+% หน้าบทคัดย่อภาษาไทยจากไฟล์ abstractthai.tex
+\include{abstractthai}
+\newpage
+
+% หน้าบทคัดย่อภาษาอังกฤษจากไฟล์ abstractenglish.tex
+\include{abstractenglish}
+\newpage
+
+
+% คำสั่งสร้างรายการสารบัญ
+\tableofcontents
+\newpage
+% คำสั่งสร้างรายการตาราง
+\listoftables
+\newpage
+% คำสั่งสร้างรายการภาพอ้างอิง
+\listoffigures
+\newpage
+
+% คำสั่งรวมไฟล์ต่างๆในโครงการ แยกรายบท
+\include{1-introduction} 
+\include{2-background}
+\include{3-design}
+\include{4-implementation}
+\include{5-testing}
+\include{6-conclusion}
+
+
+% คำสั่งรวมแหล่งอ้างอิง
+\ULforem %%%
+\setlength{\bibhang}{1.5cm}
+\bibliographystyle{chulanat} 
+\bibliography{references} % ใช้แหล่งอ้างอิงจากไฟล์ชื่อ references.bib
+\normalem
+
+
+% รายการภาคผนวก - Appendix Section
+\numappendices{3}        % จำนวนภาคผนวก
+\startappendix
+\include{appendix1-setup}
+\include{appendix2-installation}
+\include{appendix3-manual}
+
+%% ข้อมูลผู้ดำเนินโครงการจากไฟล์ biography.tex - Biography Section
+\include{biography} 
+
+\end{document}

Document/Latex/Figures/3/Class Diagram.xml

+<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.12" editor="www.draw.io" type="device"><diagram name="Page-1" id="9f46799a-70d6-7492-0946-bef42562c5a5">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</diagram></mxfile>
\ No newline at end of file

Document/Latex/Figures/3/DNNStructure.xml

+<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.13" editor="www.draw.io" type="device"><diagram id="813d08ba-7be8-3800-d292-465b29ec56fa" name="Page-1">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</diagram></mxfile>
\ No newline at end of file

Document/Latex/Figures/3/Sequence Diagram.xml

+<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.12" editor="www.draw.io" type="device"><diagram name="Page-1" id="13e1069c-82ec-6db2-03f1-153e76fe0fe0">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</diagram></mxfile>
\ No newline at end of file

Document/Latex/Figures/3/StateDiagram.xml

+<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.12" editor="www.draw.io" type="device"><diagram id="4d4f0bbd-8f27-e171-19e5-097d03e0079a" name="Page-1">7VpRk5o6FP41PN4dkoDCI9ht+9KZO7MPt33MSlSmaJwYV72/vkESQgIRV9G6nW4fCicJhHzf+c45iR6aLPdfGF4vvtGMFB70s72HPnkQAvFP/FdaDpUljMLKMGd5Jjtpw0v+P5FGX1q3eUY2RkdOacHztWmc0tWKTLlhw4zRndltRgvzrWs8Jy3DyxQXbet/ecYXlTWCY23/SvL5Qr0ZjOKq5RVPf84Z3a7k+zyIZse/qnmJ1bPkh24WOKO7hgk9e2jCKOXV1XI/IUW5tmrZqnGfHa31vBlZ8bMGBNWIN1xsiZrycWL8oBZDjBDrLm7SBV8WwgbEpZj4umzfcMz4C8e8bJ/lRTGhBWXHgcg//pWdOaM/SaNlNlMt6vvLmxld8c94mRcla76S4o3wfIpFg5wjYZzsnR8K6uUTtCR0STg7iC5ygCKgJCSS67/T6CrTogGssmHJp3n9XL2m4kIuq2OJw/YSP/teGnlxeryIvSiWluSTaorLmVC+oyxrA5IJsspbyviCzukKF8/a2gSqXDWxikVS5POVsL1SzulSNJBVlpSuUj5kTVaVRbpidBK0HpzK6RkobeiWTYlJuDOQY6TAPH8zn9WFhBz6L83FE2vEge8bkANogSmYOydcjrLwrKdxHsRjJ8ShQhapi7G8iCJlSVroJyfQZwu6fN2Kb0h3i5yTlzU+ru1OKLGJvOWNpQpNH8QbkQOahjuCoMMfoyH8MeoGS7hhoIAAyqIwikfyIlWuGoEWMu/ySyz9sSAzfmc3FSCxw3c5j+PNjxLzp7C83ee8bhLXuuUc5x47iCDC99HZmhrgJMc//hMSf9W4a0UAmkwLz9MAseL40Oi2LjtsTrwmtgg9ssJuT/8gtBhcTcAarGZDZ7MNuVqzYqdm3ZvrnK5vTHS/TfTh6NxI3DrpDIZhshXOAv9GVLbeA00qm9y8gHfKIdu8q0NkCnQclARUypwiO2imLa2OWhE2hZrI8skTk+N1DiYu1CuiRDe1gnCZ4pNM8rsnEGM2lTwO/MeOy0q3avCDjsAMOwJzMEBghs4sKkncGF/ADGHxW53rRA3qzh8m8XZH7SslUGHdI4EIdtPqSs1DwKKjXY85NK/3QWBsPaj65iFqAehIL4XmjG2qxrEtUJp90NSlRnWQAFO7hCX8zQI1gPSgsQlRdEflQY6YFDcCRqrXuleCdNXXqOgs5dHF/9hkw8Xq9OEgD4PfCDm8HPKzEToX8pPurqvSWj9qtWjn5X9oYoJC9GTu4N01NVHV6M1TkwGZ8PDJit5w+NHMTxpNKl0B5yUryqf7kpXoNsmKVdMjm3gDFWiB2kJVjuCf3muAVmC1+l9d0KHRIL7RGTM/HKcHScA7+Gvk5FEHpx17EFdyOohM7sQX5t+htQ1XH/QNn3+jd+TfpwXV1mzfJmjdOQ76xfsBs/a7RW9ol18dx2+3i93Ojc5T+nRpFLapFtqvuDkLGxlsEra+4u+mhpaIvn3dG+UJlhYC+1BruHPJoKOubcF/6nS/xPDxz/ZD63BfZTj3ON0PQLe6NGvEtga8s9L/s3Mmsw4AnrsO8N3+3ZMzKaib/h3cJmcKoclGgMLLkqZRYNPaepAjaXpvQTFy/FDCOS/7hOi6gkLc6t87Vd31j8rQ8y8=</diagram></mxfile>
\ No newline at end of file

Document/Latex/Figures/3/use case diagram (2).xml

+<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.12" editor="www.draw.io" type="device"><diagram id="120ff508-374b-bf88-8e7a-aaa9685ebcdc" name="Page-1">5VlLk+I2EP41PoayJD+PGGayqUqqpjKH7B4F1oBrbcuxxcDk16eFJduSzYZQwLK1cxmp1Xp9/fVDxiGL4vBrTavtHzxluYPd9OCQpYMx8nAA/6Tko5WE2G0FmzpLlVIveM3+YUqo1XZZyhpDUXCei6wyhWtelmwtDBmta7431d54bu5a0Q0bCV7XNB9L/8pSsW2lEQ57+SeWbbZ6ZxTE7ciKrr9uar4r1X4OJm/Hv3a4oHotddFmS1O+H4jIk0MWNeeibRWHBcslthq2dt7zidHu3DUrxTkT1LHfab5j+sTHc4kPjcV+mwn2WtG17O/B3g5JtqLIoYegSZuqtcBbdmCwavLGS/FMiyyXtv/E8ncmsjWFAbUVqwU7nDwu6kAAcjFeMFF/gMp+aAWF3XZggU5IleU33dz+9tBQAJxAD0+gEeSwRbKCxkYcL9EK5C0NnIK/d1wP/NIcGT0HBexVh36wW+XJdZLImS91w1eNBKlGDJZxdTuxR6Ol3UiwrTwneqhbx9MS3ZjHeqjViZ1ooSW6kcR6SCtHcy2J9DqhbnSIAdgtRiZuIB5gaVENiCFMdt2ETGoCJoozKkghv+0OuEY0JYZcI9egGvlBHK8L6SZWsTvCyp/yS/8qfumPwFoyIS8Pm3Gx53U6Ag9WgGQBneQ/YLwlal5gMcwbw4Ymw9k1UItGqM3XgtcjqCAHVbK5K/JWgSTy1oBC/jtdsfyFN5nIeAkqKy4EL0AhlwNJl+wWPJfzln2669eY59lGzhXcQp7vRJ6VbNHlcPfG5vBNa2B/wuEnjBFcwRjayEN/t8N0F/pl3vitrHYyeNJColaummoqYD4Ey0lo4krcO7JcV5oDYF8FhfILajF5xgJq08eEzU4/eAo2bwK28BqwTRR+io+j5B7p5B5huxLoCxhkVgtdSQPK3qgywTbl1RagrGuVKBnVKmRUojzbs/o6ZDkx6yFp4FlRqcsZ96ABmQhLOuaocm3Yy8p1vpP+pIQbQ2W6pmMpvKxUt+QlM5FlZTqX7zXo8oqVE2mjSzkpbbayzjnOO5F/1AYn7cUOmfgsM83MV70v3UEAusGQ7H5ROam9k7zIt20M9+a7es3MkC9ovWFi6HbffN4gbf+a5VRk7+aeU8ZWy73w7Pgk0eEliExe2dG2PauaNXwiWgt5rhXeQ99cqL3gaKEj97o7nkfHcVX8J2sqXjaPGsPR93Re7yd13oHrDrz189CT+7ELnTceO2/Lzrs4L4ksn4ssnzvXee2FvPh2zhv+LzrCU5/JMu1qbGzgKsLi44ChasJRS31whMf93fKNG2ODthGJVP+F1RnAzGpN7btkonuSGfkz36JzOLuQ0JCNZihGgRcGbkgCK8kRL55FLmiFhMSx7TRX5PoZ303Pjp1q8CQRT7OrY8o47GnmIYN1xPo7QcHLaKY/OBgFT3A3msXWc8ouU85lGA7sese9FY28qfL7/jR6EKq4340ql2ZXZGVXjG8WcTz0kxZ7s9gNDWIiPzwZ+9BVWaq/LQ1Z2n6Lvk/etL6rYXJpzrQjGroWTaHb/1bZqvc/CJOnfwE=</diagram></mxfile>
\ No newline at end of file

Document/Latex/Figures/component

+
+
+
+\section{ }
+	\subsection{ }
+
+\begin{itemize}
+	\item 
+\end{itemize}
+
+\begin{enumerate}
+	\item 
+\end{enumerate}
+
+		\begin{figure}[h]
+			\centering
+			\includegraphics[scale=0.5]{Figures/2/}
+			\caption{}
+			\label{Fig:rbg-image}
+		\end{figure}
+
+\begin{figure}[h]
+    \includegraphics[width=\columnwidth]{Figures/2/}
+    \caption{ }
+    \label{Fig:}
+\end{figure}
+
+\begin{figure}[h]
+	\begin{lstlisting}
+
+    \end{lstlisting}
+    \caption{ }
+    \label{Fig: }
+\end{figure}
+
+
+\begin{table}[h]
+	\caption{ตารางขั้นตอนการดำเนินการ}
+	\begin{tabular}{c}
+		\includegraphics[width=\columnwidth]{Figures/table/use-case}	\\ 
+	\end{tabular}
+\end{table}
\ No newline at end of file

Document/Latex/Fonts/tex-gyre/README.txt

+The TeX Gyre font collection defines versions of the base 35 PostScript
+fonts with greatly extended glyph collections. The original fonts are
+the base35 release from URW.
+
+Home page: http://www.gust.org.pl/projects/e-foundry/tex-gyre
+
+License: GUST Font License (an instance of the LaTeX Project Public License)
+http://www.gust.org.pl/fonts/licenses/GUST-FONT-LICENSE.txt

Document/Latex/Fonts/tex-gyre/afm/qcrb.afm

+StartFontMetrics 2.0
+Comment Generated by MetaType1 (a MetaPost-based engine)
+Comment Creation Date: 30th October 2009
+Notice Copyright 2007-2009 for TeX Gyre extensions by B. Jackowski and J.M. Nowacki (on behalf of TeX USERS GROUPS). Vietnamese characters were added by Han The Thanh.
+Comment Supported by CSTUG, DANTE eV, GUST, NTG, TUG, and TUG India.
+Comment METATYPE1/Type 1 version by B. Jackowski & J. M. Nowacki
+Comment from GUST (http://www.gust.org.pl).
+Comment This work is released under the GUST Font License.
+Comment See the MANIFEST-TeX-Gyre-Cursor.txt and README-TeX-Gyre-Cursor.txt
+Comment files for the details. For the most recent version of this license
+Comment see http://www.gust.org.pl/fonts/licenses/GUST-FONT-LICENSE.txt
+Comment or http://tug.org/fonts/licenses/GUST-FONT-LICENSE.txt
+Comment This work has the LPPL maintenance status "maintained".
+Comment The Current Maintainer of this work is Bogus\l{}aw Jackowski and Janusz M. Nowacki.
+Comment This work consists of the files listed in the MANIFEST-TeX-Gyre-Cursor.txt file.
+FontName TeXGyreCursor-Bold
+FullName TeXGyreCursor-Bold
+FamilyName TeXGyreCursor
+Weight Bold
+ItalicAngle 0
+IsFixedPitch true
+UnderlinePosition -75
+UnderlineThickness 50
+Version 2.004
+EncodingScheme FontSpecific
+FontBBox -531 -278 1140 1071
+CapHeight 583
+XHeight 437
+Descender -205
+Ascender 624
+Comment PFM parameters: * * * 0xEE
+Comment TFM designsize: 10 (in points)
+Comment TFM fontdimen  1: 0          (slant)
+Comment TFM fontdimen  2: 6          (space)
+Comment TFM fontdimen  3: 0          (space stretch)
+Comment TFM fontdimen  4: 0          (space shrink)
+Comment TFM fontdimen  5: 4.37       (xheight)
+Comment TFM fontdimen  6: 12         (quad)
+Comment TFM fontdimen  7: 6          (extra space)
+Comment TFM fontdimen  8: 5.83       (non-standard: uc height)
+Comment TFM fontdimen  9: 6.24       (non-standard: ascender)
+Comment TFM fontdimen 10: 10.71      (non-standard: accented cap height)
+Comment TFM fontdimen 11: 2.05       (non-standard: descender depth)
+Comment TFM fontdimen 12: 10.71      (non-standard: max height)
+Comment TFM fontdimen 13: 2.78       (non-standard: max depth)
+Comment TFM fontdimen 14: 6          (non-standard: digit width)
+Comment TFM fontdimen 15: 1          (non-standard: uc stem)
+Comment TFM fontdimen 16: 12         (non-standard: baselineskip)
+Comment TFM fontdimen 17: 1          (non-standard: lc stem)
+Comment TFM fontdimen 18: 0.55556    (non-standard: u, i.e., font unit)
+Comment TFM fontdimen 19: 0.14       (non-standard: overshoot)
+Comment TFM fontdimen 20: 1          (non-standard: thin stem, hair)
+Comment TFM fontdimen 21: 1          (non-standard: cap thin stem, i.e., cap_hair)
+Comment TFM fontdimen 22: 2.5        (math axis)
+Comment TFM headerbyte  9: FontSpecific
+Comment TFM headerbyte 49: TeXGyreCursor
+Comment TFM headerbyte 72: 234
+StartCharMetrics 1086
+C 32 ; WX 600 ; N space ; B 0 0 0 0 ;
+C 33 ; WX 600 ; N exclam ; B 220 -15 381 638 ;
+C 34 ; WX 600 ; N quotedbl ; B 131 328 469 615 ;
+C 35 ; WX 600 ; N numbersign ; B 62 -92 538 675 ;
+C 36 ; WX 600 ; N dollar ; B 83 -123 517 684 ;
+C 37 ; WX 600 ; N percent ; B 80 -15 521 618 ;
+C 38 ; WX 600 ; N ampersand ; B 75 -14 508 550 ;
+C 39 ; WX 600 ; N quotesingle ; B 240 328 360 615 ;
+C 40 ; WX 600 ; N parenleft ; B 264 -153 488 632 ;
+C 41 ; WX 600 ; N parenright ; B 117 -153 341 632 ;
+C 42 ; WX 600 ; N asterisk ; B 83 208 517 622 ;
+C 43 ; WX 600 ; N plus ; B 15 -35 585 535 ;
+C 44 ; WX 600 ; N comma ; B 135 -186 320 160 ;
+C 45 ; WX 600 ; N hyphen ; B 42 229 558 329 ;
+C 46 ; WX 600 ; N period ; B 225 -15 375 117 ;
+C 47 ; WX 600 ; N slash ; B 83 -113 517 695 ;
+C 48 ; WX 600 ; N zero ; B 83 -15 517 638 ;
+C 49 ; WX 600 ; N one ; B 83 0 517 638 ;
+C 50 ; WX 600 ; N two ; B 54 0 508 638 ;
+C 51 ; WX 600 ; N three ; B 66 -15 529 638 ;
+C 52 ; WX 600 ; N four ; B 75 0 508 622 ;
+C 53 ; WX 600 ; N five ; B 66 -15 529 622 ;
+C 54 ; WX 600 ; N six ; B 105 -15 540 638 ;
+C 55 ; WX 600 ; N seven ; B 75 -1 508 622 ;
+C 56 ; WX 600 ; N eight ; B 83 -15 517 638 ;
+C 57 ; WX 600 ; N nine ; B 106 -15 541 638 ;
+C 58 ; WX 600 ; N colon ; B 225 -15 375 437 ;
+C 59 ; WX 600 ; N semicolon ; B 175 -186 375 437 ;
+C 60 ; WX 600 ; N less ; B 80 13 520 487 ;
+C 61 ; WX 600 ; N equal ; B 15 103 585 397 ;
+C 62 ; WX 600 ; N greater ; B 80 13 520 487 ;
+C 63 ; WX 600 ; N question ; B 104 -15 517 598 ;
+C 64 ; WX 600 ; N at ; B 76 -152 509 620 ;
+C 65 ; WX 600 ; N A ; B -21 0 621 583 ;
+C 66 ; WX 600 ; N B ; B 13 0 571 583 ;
+C 67 ; WX 600 ; N C ; B 33 -14 564 597 ;
+C 68 ; WX 600 ; N D ; B 13 0 550 583 ;
+C 69 ; WX 600 ; N E ; B 13 0 550 583 ;
+C 70 ; WX 600 ; N F ; B 13 0 550 583 ;
+C 71 ; WX 600 ; N G ; B 33 -14 592 597 ;
+C 72 ; WX 600 ; N H ; B 23 0 581 583 ;
+C 73 ; WX 600 ; N I ; B 83 0 517 583 ;
+C 74 ; WX 600 ; N J ; B 54 -14 613 583 ;
+C 75 ; WX 600 ; N K ; B 13 0 602 583 ;
+C 76 ; WX 600 ; N L ; B 33 0 571 583 ;
+C 77 ; WX 600 ; N M ; B -19 0 623 584 ;
+C 78 ; WX 600 ; N N ; B -8 0 592 583 ;
+C 79 ; WX 600 ; N O ; B 21 -14 579 597 ;
+C 80 ; WX 600 ; N P ; B 13 0 529 583 ;
+C 81 ; WX 600 ; N Q ; B 21 -145 579 597 ;
+C 82 ; WX 600 ; N R ; B 13 0 619 583 ;
+C 83 ; WX 600 ; N S ; B 62 -14 538 597 ;
+C 84 ; WX 600 ; N T ; B 42 0 558 583 ;
+C 85 ; WX 600 ; N U ; B 10 -14 590 583 ;
+C 86 ; WX 600 ; N V ; B -21 0 621 583 ;
+C 87 ; WX 600 ; N W ; B -10 0 610 583 ;
+C 88 ; WX 600 ; N X ; B 10 0 590 583 ;
+C 89 ; WX 600 ; N Y ; B 21 0 579 583 ;
+C 90 ; WX 600 ; N Z ; B 73 0 527 583 ;
+C 91 ; WX 600 ; N bracketleft ; B 250 -148 475 627 ;
+C 92 ; WX 600 ; N backslash ; B 82 -113 517 695 ;
+C 93 ; WX 600 ; N bracketright ; B 125 -148 350 627 ;
+C 94 ; WX 600 ; N asciicircum ; B 83 325 517 652 ;
+C 95 ; WX 600 ; N underscore ; B -12 -125 612 -75 ;
+C 96 ; WX 600 ; N grave ; B 139 484 380 676 ;
+C 97 ; WX 600 ; N a ; B 42 -16 571 450 ;
+C 98 ; WX 600 ; N b ; B -8 -14 571 624 ;
+C 99 ; WX 600 ; N c ; B 54 -16 565 450 ;
+C 100 ; WX 600 ; N d ; B 33 -14 613 624 ;
+C 101 ; WX 600 ; N e ; B 33 -16 550 450 ;
+C 102 ; WX 600 ; N f ; B 75 0 571 623 ;
+C 103 ; WX 600 ; N g ; B 33 -205 592 451 ;
+C 104 ; WX 600 ; N h ; B 13 0 581 624 ;
+C 105 ; WX 600 ; N i ; B 62 0 538 640 ;
+C 106 ; WX 600 ; N j ; B 117 -205 488 640 ;
+C 107 ; WX 600 ; N k ; B 33 0 571 624 ;
+C 108 ; WX 600 ; N l ; B 62 0 538 624 ;
+C 109 ; WX 600 ; N m ; B -19 0 623 450 ;
+C 110 ; WX 600 ; N n ; B 23 0 571 450 ;
+C 111 ; WX 600 ; N o ; B 42 -16 558 450 ;
+C 112 ; WX 600 ; N p ; B -8 -205 571 450 ;
+C 113 ; WX 600 ; N q ; B 33 -205 613 450 ;
+C 114 ; WX 600 ; N r ; B 54 0 571 449 ;
+C 115 ; WX 600 ; N s ; B 73 -16 527 450 ;
+C 116 ; WX 600 ; N t ; B 13 -16 529 591 ;
+C 117 ; WX 600 ; N u ; B 13 -13 571 437 ;
+C 118 ; WX 600 ; N v ; B 0 0 600 437 ;
+C 119 ; WX 600 ; N w ; B 0 0 600 437 ;
+C 120 ; WX 600 ; N x ; B 21 0 579 437 ;
+C 121 ; WX 600 ; N y ; B 21 -205 579 437 ;
+C 122 ; WX 600 ; N z ; B 85 0 519 437 ;
+C 123 ; WX 600 ; N braceleft ; B 167 -153 433 623 ;
+C 124 ; WX 600 ; N bar ; B 250 -148 350 627 ;
+C 125 ; WX 600 ; N braceright ; B 167 -153 433 623 ;
+C 126 ; WX 600 ; N asciitilde ; B 62 179 538 385 ;
+C 128 ; WX 600 ; N Euro ; B 4 -14 524 597 ;
+C 129 ; WX 600 ; N fi ; B -14 0 619 640 ;
+C 130 ; WX 600 ; N fl ; B -17 0 617 623 ;
+C 131 ; WX 600 ; N Ydieresis ; B 21 0 579 776 ;
+C 132 ; WX 600 ; N quotedblbase ; B 26 -186 429 160 ;
+C 133 ; WX 600 ; N ellipsis ; B 25 -15 575 117 ;
+C 134 ; WX 600 ; N dagger ; B 94 -92 506 622 ;
+C 135 ; WX 600 ; N daggerdbl ; B 94 -92 506 622 ;
+C 136 ; WX 600 ; N Ecircumflex ; B 13 0 550 813 ;
+C 137 ; WX 600 ; N perthousand ; B 0 0 600 618 ;
+C 138 ; WX 600 ; N Scaron ; B 62 -14 538 813 ;
+C 139 ; WX 600 ; N Scommaaccent ; B 62 -278 538 597 ;
+C 140 ; WX 600 ; N Sacute ; B 62 -14 538 812 ;
+C 141 ; WX 600 ; N OE ; B -20 0 612 583 ;
+C 142 ; WX 600 ; N Zcaron ; B 73 0 527 813 ;
+C 143 ; WX 600 ; N Zacute ; B 73 0 527 812 ;
+C 144 ; WX 600 ; N threequartersemdash ; B 0 229 600 329 ;
+C 145 ; WX 600 ; N quoteleft ; B 236 301 420 647 ;
+C 146 ; WX 600 ; N quoteright ; B 175 301 360 647 ;
+C 147 ; WX 600 ; N quotedblleft ; B 127 301 530 647 ;
+C 148 ; WX 600 ; N quotedblright ; B 66 301 469 647 ;
+C 149 ; WX 600 ; N bullet ; B 120 39 480 399 ;
+C 150 ; WX 600 ; N endash ; B 42 229 558 329 ;
+C 151 ; WX 600 ; N emdash ; B 42 229 558 329 ;
+C 152 ; WX 600 ; N ecircumflex ; B 33 -16 550 677 ;
+C 153 ; WX 600 ; N anglearc ; B 40 -85 560 585 ;
+C 154 ; WX 600 ; N scaron ; B 73 -16 527 677 ;
+C 155 ; WX 600 ; N scommaaccent ; B 73 -278 527 450 ;
+C 156 ; WX 600 ; N sacute ; B 73 -16 527 676 ;
+C 157 ; WX 600 ; N oe ; B -11 -16 613 450 ;
+C 158 ; WX 600 ; N zcaron ; B 85 0 519 677 ;
+C 159 ; WX 600 ; N zacute ; B 85 0 519 676 ;
+C 160 ; WX 600 ; N nbspace ; B 0 0 0 0 ;
+C 161 ; WX 600 ; N exclamdown ; B 219 -201 380 452 ;
+C 162 ; WX 600 ; N questiondown ; B 83 -161 496 452 ;
+C 163 ; WX 600 ; N Lslash ; B 33 0 571 583 ;
+C 164 ; WX 600 ; N currency ; B 73 64 527 519 ;
+C 165 ; WX 600 ; N Aogonek ; B -21 -250 621 583 ;
+C 166 ; WX 600 ; N diameter ; B 15 -35 585 535 ;
+C 167 ; WX 600 ; N section ; B 36 -170 564 583 ;
+C 168 ; WX 600 ; N Uogonek ; B 10 -250 590 583 ;
+C 169 ; WX 600 ; N copyright ; B 10 -14 590 566 ;
+C 170 ; WX 600 ; N AE ; B -20 0 614 583 ;
+C 171 ; WX 600 ; N guillemotleft ; B 33 20 571 415 ;
+C 172 ; WX 600 ; N Ntilde ; B -8 0 592 783 ;
+C 173 ; WX 600 ; N minus ; B 15 200 585 300 ;
+C 174 ; WX 600 ; N registered ; B 10 -14 590 566 ;
+C 175 ; WX 600 ; N Zdotaccent ; B 73 0 527 776 ;
+C 176 ; WX 600 ; N degree ; B 125 243 475 596 ;
+C 177 ; WX 600 ; N plusminus ; B 15 0 585 635 ;
+C 178 ; WX 600 ; N lessequal ; B 80 -50 520 637 ;
+C 179 ; WX 600 ; N lslash ; B 62 0 538 624 ;
+C 180 ; WX 600 ; N greaterequal ; B 80 -50 520 637 ;
+C 181 ; WX 600 ; N mu ; B 13 -153 571 437 ;
+C 182 ; WX 600 ; N paragraph ; B 49 -174 558 583 ;
+C 183 ; WX 600 ; N periodcentered ; B 234 184 366 316 ;
+C 184 ; WX 600 ; N uogonek ; B 13 -250 585 437 ;
+C 185 ; WX 600 ; N aogonek ; B 42 -250 585 450 ;
+C 186 ; WX 600 ; N ae ; B -13 -16 612 450 ;
+C 187 ; WX 600 ; N guillemotright ; B 33 20 571 415 ;
+C 188 ; WX 600 ; N ntilde ; B 23 0 571 647 ;
+C 189 ; WX 600 ; N Tcommaaccent ; B 42 -278 558 583 ;
+C 190 ; WX 600 ; N tcommaaccent ; B 13 -278 529 591 ;
+C 191 ; WX 600 ; N zdotaccent ; B 85 0 519 640 ;
+C 192 ; WX 600 ; N Agrave ; B -21 0 621 812 ;
+C 193 ; WX 600 ; N Aacute ; B -21 0 621 812 ;
+C 194 ; WX 600 ; N Acircumflex ; B -21 0 621 813 ;
+C 195 ; WX 600 ; N Atilde ; B -21 0 621 783 ;
+C 196 ; WX 600 ; N Adieresis ; B -21 0 621 776 ;
+C 197 ; WX 600 ; N Aring ; B -21 0 621 863 ;
+C 198 ; WX 600 ; N Cacute ; B 33 -14 564 812 ;
+C 199 ; WX 600 ; N Ccedilla ; B 33 -250 564 597 ;
+C 200 ; WX 600 ; N Egrave ; B 13 0 550 812 ;
+C 201 ; WX 600 ; N Eacute ; B 13 0 550 812 ;
+C 202 ; WX 600 ; N Eogonek ; B 13 -250 550 583 ;
+C 203 ; WX 600 ; N Edieresis ; B 13 0 550 776 ;
+C 204 ; WX 600 ; N Igrave ; B 83 0 517 812 ;
+C 205 ; WX 600 ; N Iacute ; B 83 0 517 812 ;
+C 206 ; WX 600 ; N Icircumflex ; B 83 0 517 813 ;
+C 207 ; WX 600 ; N Idieresis ; B 83 0 517 776 ;
+C 208 ; WX 600 ; N Eth ; B 10 0 550 583 ;
+C 209 ; WX 600 ; N Nacute ; B -8 0 592 812 ;
+C 210 ; WX 600 ; N Ograve ; B 21 -14 579 812 ;
+C 211 ; WX 600 ; N Oacute ; B 21 -14 579 812 ;
+C 212 ; WX 600 ; N Ocircumflex ; B 21 -14 579 813 ;
+C 213 ; WX 600 ; N Otilde ; B 21 -14 579 783 ;
+C 214 ; WX 600 ; N Odieresis ; B 21 -14 579 776 ;
+C 215 ; WX 600 ; N multiply ; B 83 33 517 467 ;
+C 216 ; WX 600 ; N Oslash ; B 9 -70 590 638 ;
+C 217 ; WX 600 ; N Ugrave ; B 10 -14 590 812 ;
+C 218 ; WX 600 ; N Uacute ; B 10 -14 590 812 ;
+C 219 ; WX 600 ; N Ucircumflex ; B 10 -14 590 813 ;
+C 220 ; WX 600 ; N Udieresis ; B 10 -14 590 776 ;
+C 221 ; WX 600 ; N Yacute ; B 21 0 579 812 ;
+C 222 ; WX 600 ; N Iogonek ; B 83 -250 517 583 ;
+C 223 ; WX 600 ; N germandbls ; B 13 -16 529 623 ;
+C 224 ; WX 600 ; N agrave ; B 42 -16 571 676 ;
+C 225 ; WX 600 ; N aacute ; B 42 -16 571 676 ;
+C 226 ; WX 600 ; N acircumflex ; B 42 -16 571 677 ;
+C 227 ; WX 600 ; N atilde ; B 42 -16 571 647 ;
+C 228 ; WX 600 ; N adieresis ; B 42 -16 571 640 ;
+C 229 ; WX 600 ; N aring ; B 42 -16 571 723 ;
+C 230 ; WX 600 ; N cacute ; B 54 -16 565 676 ;
+C 231 ; WX 600 ; N ccedilla ; B 54 -250 565 450 ;
+C 232 ; WX 600 ; N egrave ; B 33 -16 550 676 ;
+C 233 ; WX 600 ; N eacute ; B 33 -16 550 676 ;
+C 234 ; WX 600 ; N eogonek ; B 33 -250 550 450 ;
+C 235 ; WX 600 ; N edieresis ; B 33 -16 550 640 ;
+C 236 ; WX 600 ; N igrave ; B 62 0 538 676 ;
+C 237 ; WX 600 ; N iacute ; B 62 0 538 676 ;
+C 238 ; WX 600 ; N icircumflex ; B 62 0 538 677 ;
+C 239 ; WX 600 ; N idieresis ; B 62 0 538 640 ;
+C 240 ; WX 600 ; N eth ; B 42 -16 558 646 ;
+C 241 ; WX 600 ; N nacute ; B 23 0 571 676 ;
+C 242 ; WX 600 ; N ograve ; B 42 -16 558 676 ;
+C 243 ; WX 600 ; N oacute ; B 42 -16 558 676 ;
+C 244 ; WX 600 ; N ocircumflex ; B 42 -16 558 677 ;
+C 245 ; WX 600 ; N otilde ; B 42 -16 558 647 ;
+C 246 ; WX 600 ; N odieresis ; B 42 -16 558 640 ;
+C 247 ; WX 600 ; N divide ; B 15 -10 585 510 ;
+C 248 ; WX 600 ; N oslash ; B 23 -70 573 494 ;
+C 249 ; WX 600 ; N ugrave ; B 13 -13 571 676 ;
+C 250 ; WX 600 ; N uacute ; B 13 -13 571 676 ;
+C 251 ; WX 600 ; N ucircumflex ; B 13 -13 571 677 ;
+C 252 ; WX 600 ; N udieresis ; B 13 -13 571 640 ;
+C 253 ; WX 600 ; N yacute ; B 21 -205 579 676 ;
+C 254 ; WX 600 ; N iogonek ; B 62 -250 538 640 ;
+C 255 ; WX 600 ; N ydieresis ; B 21 -205 579 640 ;
+C -1 ; WX 600 ; N acute ; B 220 484 461 676 ;
+C -1 ; WX 600 ; N Acute ; B 220 474 461 666 ;
+C -1 ; WX 600 ; N circumflex ; B 127 483 473 677 ;
+C -1 ; WX 600 ; N Circumflex ; B 127 473 473 667 ;
+C -1 ; WX 600 ; N dieresis ; B 132 520 468 640 ;
+C -1 ; WX 600 ; N breve ; B 119 484 481 676 ;
+C -1 ; WX 600 ; N Breve ; B 119 474 481 666 ;
+C -1 ; WX 600 ; N dotaccent ; B 240 520 360 640 ;
+C -1 ; WX 600 ; N macron ; B 75 540 525 620 ;
+C -1 ; WX 600 ; N ring ; B 165 457 435 723 ;
+C -1 ; WX 600 ; N hungarumlaut ; B 169 486 531 691 ;
+C -1 ; WX 600 ; N caron ; B 127 483 473 677 ;
+C -1 ; WX 600 ; N tilde ; B 115 514 485 647 ;
+C -1 ; WX 600 ; N cedilla ; B 180 -250 407 5 ;
+C -1 ; WX 600 ; N ogonek ; B 200 -250 464 65 ;
+C -1 ; WX 600 ; N hookabove ; B 184 471 417 729 ;
+C -1 ; WX 600 ; N Hookabove ; B 184 481 417 739 ;
+C -1 ; WX 600 ; N dotlessi ; B 62 0 538 437 ;
+C -1 ; WX 600 ; N dotlessj ; B 117 -205 488 437 ;
+C -1 ; WX 600 ; N ff ; B -14 0 674 623 ;
+C -1 ; WX 600 ; N infinity ; B 33 49 567 388 ;
+C -1 ; WX 600 ; N Delta ; B 15 0 585 583 ;
+C -1 ; WX 600 ; N Pi ; B 23 0 581 583 ;
+C -1 ; WX 600 ; N Sigma ; B 25 0 550 583 ;
+C -1 ; WX 600 ; N Omega ; B 8 0 592 591 ;
+C -1 ; WX 600 ; N at.alt ; B 76 -224 509 548 ;
+C -1 ; WX 600 ; N Eng ; B -8 -250 592 583 ;
+C -1 ; WX 600 ; N Oogonek ; B 21 -250 579 597 ;
+C -1 ; WX 600 ; N Scedilla ; B 62 -250 538 597 ;
+C -1 ; WX 600 ; N Tcedilla ; B 42 -250 558 583 ;
+C -1 ; WX 600 ; N eng ; B 23 -205 510 450 ;
+C -1 ; WX 600 ; N oogonek ; B 42 -250 558 450 ;
+C -1 ; WX 600 ; N scedilla ; B 73 -250 527 450 ;
+C -1 ; WX 600 ; N tcedilla ; B 13 -250 529 591 ;
+C -1 ; WX 600 ; N Thorn ; B 14 0 523 583 ;
+C -1 ; WX 600 ; N thorn ; B -8 -205 571 624 ;
+C -1 ; WX 600 ; N sterling ; B 33 0 550 598 ;
+C -1 ; WX 600 ; N cent ; B 83 -44 499 661 ;
+C -1 ; WX 600 ; N florin ; B 57 -123 548 638 ;
+C -1 ; WX 600 ; N yen ; B 21 0 579 580 ;
+C -1 ; WX 600 ; N one.superior ; B 166 247 434 638 ;
+C -1 ; WX 600 ; N two.superior ; B 149 247 429 637 ;
+C -1 ; WX 600 ; N three.superior ; B 157 238 442 637 ;
+C -1 ; WX 600 ; N guilsinglright ; B 262 20 571 415 ;
+C -1 ; WX 600 ; N guilsinglleft ; B 33 20 342 415 ;
+C -1 ; WX 600 ; N ordfeminine ; B 118 182 489 595 ;
+C -1 ; WX 600 ; N ordmasculine ; B 122 182 480 595 ;
+C -1 ; WX 600 ; N onehalf ; B -34 0 629 638 ;
+C -1 ; WX 600 ; N onequarter ; B -4 0 599 638 ;
+C -1 ; WX 600 ; N threequarters ; B -13 0 610 637 ;
+C -1 ; WX 600 ; N fraction ; B 21 102 580 500 ;
+C -1 ; WX 600 ; N commaaccent ; B 183 -278 351 -59 ;
+C -1 ; WX 600 ; N quotesinglbase ; B 135 -186 320 160 ;
+C -1 ; WX 600 ; N Ohorn ; B 21 -14 631 613 ;
+C -1 ; WX 600 ; N Uhorn ; B 10 -14 658 613 ;
+C -1 ; WX 600 ; N dcroat ; B 33 -16 613 624 ;
+C -1 ; WX 600 ; N ohorn ; B 42 -16 621 467 ;
+C -1 ; WX 600 ; N radical ; B 12 -60 642 697 ;
+C -1 ; WX 600 ; N uhorn ; B 13 -13 642 467 ;
+C -1 ; WX 600 ; N horn ; B 496 245 642 467 ;
+C -1 ; WX 600 ; N zero.taboldstyle ; B 83 -15 517 452 ;
+C -1 ; WX 600 ; N one.taboldstyle ; B 83 0 517 454 ;
+C -1 ; WX 600 ; N two.taboldstyle ; B 54 0 508 454 ;
+C -1 ; WX 600 ; N three.taboldstyle ; B 66 -201 529 452 ;
+C -1 ; WX 600 ; N four.taboldstyle ; B 75 -185 508 437 ;
+C -1 ; WX 600 ; N five.taboldstyle ; B 66 -185 529 452 ;
+C -1 ; WX 600 ; N six.taboldstyle ; B 105 -15 540 638 ;
+C -1 ; WX 600 ; N seven.taboldstyle ; B 75 -185 508 438 ;
+C -1 ; WX 600 ; N eight.taboldstyle ; B 83 -15 517 638 ;
+C -1 ; WX 600 ; N nine.taboldstyle ; B 106 -201 541 452 ;
+C -1 ; WX 600 ; N interrobang ; B 104 -15 517 648 ;
+C -1 ; WX 600 ; N paragraph.alt ; B 101 -174 490 583 ;
+C -1 ; WX 600 ; N lira ; B 33 0 550 598 ;
+C -1 ; WX 600 ; N Gamma ; B 13 0 550 583 ;
+C -1 ; WX 600 ; N Lambda ; B -21 0 621 583 ;
+C -1 ; WX 600 ; N Upsilon ; B 17 0 583 583 ;
+C -1 ; WX 600 ; N Theta ; B 21 -14 579 597 ;
+C -1 ; WX 600 ; N Xi ; B 50 0 550 583 ;
+C -1 ; WX 600 ; N longs ; B 75 0 571 623 ;
+C -1 ; WX 600 ; N approxequal ; B 62 34 538 466 ;
+C -1 ; WX 600 ; N summation ; B 45 -97 538 671 ;
+C -1 ; WX 600 ; N partialdiff ; B 102 -16 524 590 ;
+C -1 ; WX 600 ; N centigrade ; B 20 -14 584 597 ;
+C -1 ; WX 600 ; N IJ ; B -10 -14 617 583 ;
+C -1 ; WX 600 ; N ij ; B 41 -205 545 640 ;
+C -1 ; WX 600 ; N numero ; B 17 0 574 583 ;
+C -1 ; WX 600 ; N a.sc ; B 3 0 598 439 ;
+C -1 ; WX 600 ; N aogonek.sc ; B 3 -250 598 439 ;
+C -1 ; WX 600 ; N b.sc ; B 34 0 552 439 ;
+C -1 ; WX 600 ; N c.sc ; B 52 -10 546 449 ;
+C -1 ; WX 600 ; N ccedilla.sc ; B 52 -250 546 449 ;
+C -1 ; WX 600 ; N d.sc ; B 34 0 533 439 ;
+C -1 ; WX 600 ; N e.sc ; B 34 0 533 439 ;
+C -1 ; WX 600 ; N eogonek.sc ; B 34 -250 533 439 ;
+C -1 ; WX 600 ; N f.sc ; B 34 0 533 439 ;
+C -1 ; WX 600 ; N g.sc ; B 52 -10 572 449 ;
+C -1 ; WX 600 ; N h.sc ; B 43 0 562 439 ;
+C -1 ; WX 600 ; N i.sc ; B 98 0 503 439 ;
+C -1 ; WX 600 ; N iogonek.sc ; B 98 -250 503 439 ;
+C -1 ; WX 600 ; N j.sc ; B 71 -10 591 439 ;
+C -1 ; WX 600 ; N k.sc ; B 34 0 581 439 ;
+C -1 ; WX 600 ; N l.sc ; B 52 0 552 439 ;
+C -1 ; WX 600 ; N lslash.sc ; B 52 0 552 439 ;
+C -1 ; WX 600 ; N m.sc ; B 5 0 600 440 ;
+C -1 ; WX 600 ; N n.sc ; B 15 0 572 439 ;
+C -1 ; WX 600 ; N eng.sc ; B 15 -246 572 439 ;
+C -1 ; WX 600 ; N o.sc ; B 41 -10 560 449 ;
+C -1 ; WX 600 ; N oogonek.sc ; B 41 -250 560 449 ;
+C -1 ; WX 600 ; N p.sc ; B 34 0 514 439 ;
+C -1 ; WX 600 ; N q.sc ; B 41 -102 560 449 ;
+C -1 ; WX 600 ; N r.sc ; B 34 0 596 439 ;
+C -1 ; WX 600 ; N s.sc ; B 79 -10 522 449 ;
+C -1 ; WX 600 ; N scedilla.sc ; B 79 -250 522 449 ;
+C -1 ; WX 600 ; N t.sc ; B 60 0 541 439 ;
+C -1 ; WX 600 ; N tcedilla.sc ; B 60 -250 541 439 ;
+C -1 ; WX 600 ; N u.sc ; B 31 -10 570 439 ;
+C -1 ; WX 600 ; N uogonek.sc ; B 31 -250 570 439 ;
+C -1 ; WX 600 ; N v.sc ; B 3 0 598 439 ;
+C -1 ; WX 600 ; N w.sc ; B 13 0 588 439 ;
+C -1 ; WX 600 ; N x.sc ; B 31 0 570 439 ;
+C -1 ; WX 600 ; N y.sc ; B 41 0 560 439 ;
+C -1 ; WX 600 ; N z.sc ; B 89 0 512 439 ;
+C -1 ; WX 600 ; N ohorn.sc ; B 41 -10 609 467 ;
+C -1 ; WX 600 ; N uhorn.sc ; B 31 -10 646 467 ;
+C -1 ; WX 600 ; N ae.sc ; B 4 0 592 439 ;
+C -1 ; WX 600 ; N oe.sc ; B 4 0 590 439 ;
+C -1 ; WX 600 ; N thorn.sc ; B 35 0 509 439 ;
+C -1 ; WX 600 ; N eth.sc ; B 31 0 533 439 ;
+C -1 ; WX 600 ; N oslash.sc ; B 30 -49 570 478 ;
+C -1 ; WX 600 ; N ij.sc ; B 10 -10 590 439 ;
+C -1 ; WX 600 ; N bigcircle ; B 10 -14 590 566 ;
+C -1 ; WX 600 ; N copyleft ; B 10 -14 590 566 ;
+C -1 ; WX 600 ; N copyright.alt ; B 130 369 420 659 ;
+C -1 ; WX 600 ; N published ; B 10 -14 590 566 ;
+C -1 ; WX 600 ; N registered.alt ; B 130 372 420 662 ;
+C -1 ; WX 600 ; N minusplus ; B 15 -135 585 500 ;
+C -1 ; WX 600 ; N lessorequalslant ; B 80 -84 520 637 ;
+C -1 ; WX 600 ; N greaterorequalslant ; B 80 -84 520 637 ;
+C -1 ; WX 600 ; N dblverticalbar ; B 150 -148 450 627 ;
+C -1 ; WX 600 ; N dblbracketleft ; B 125 -148 525 627 ;
+C -1 ; WX 600 ; N dblbracketright ; B 75 -148 475 627 ;
+C -1 ; WX 600 ; N brokenbar ; B 250 -198 350 677 ;
+C -1 ; WX 600 ; N angleleft ; B 150 -198 450 677 ;
+C -1 ; WX 600 ; N angleright ; B 150 -198 450 677 ;
+C -1 ; WX 600 ; N logicalnot ; B 15 103 535 397 ;
+C -1 ; WX 600 ; N notequal ; B 15 13 585 487 ;
+C -1 ; WX 600 ; N referencemark ; B 4 -46 596 546 ;
+C -1 ; WX 600 ; N quillbracketleft ; B 167 -153 483 623 ;
+C -1 ; WX 600 ; N quillbracketright ; B 167 -153 483 623 ;
+C -1 ; WX 600 ; N leaf ; B 19 -18 581 488 ;
+C -1 ; WX 600 ; N lozenge ; B 51 -14 549 607 ;
+C -1 ; WX 600 ; N died ; B 65 -50 535 633 ;
+C -1 ; WX 600 ; N asteriskmath ; B 40 2 560 498 ;
+C -1 ; WX 600 ; N dong ; B 28 -90 521 583 ;
+C -1 ; WX 600 ; N arrowleft ; B 65 -25 561 525 ;
+C -1 ; WX 600 ; N arrowright ; B 39 -25 535 525 ;
+C -1 ; WX 600 ; N arrowup ; B 25 -11 575 485 ;
+C -1 ; WX 600 ; N arrowdown ; B 25 15 575 511 ;
+C -1 ; WX 600 ; N openbullet ; B 120 39 480 399 ;
+C -1 ; WX 600 ; N colonmonetary ; B 33 -73 564 656 ;
+C -1 ; WX 600 ; N guarani ; B 33 -73 592 656 ;
+C -1 ; WX 600 ; N baht ; B 13 -73 571 656 ;
+C -1 ; WX 600 ; N dollar.oldstyle ; B 62 -73 538 656 ;
+C -1 ; WX 600 ; N cent.oldstyle ; B 54 -73 565 510 ;
+C -1 ; WX 600 ; N blanksymbol ; B -8 -14 571 624 ;
+C -1 ; WX 600 ; N peso ; B 13 0 529 583 ;
+C -1 ; WX 600 ; N recipe ; B 13 0 619 583 ;
+C -1 ; WX 600 ; N married ; B -12 32 612 469 ;
+C -1 ; WX 600 ; N divorced ; B -128 -187 728 687 ;
+C -1 ; WX 600 ; N discount ; B 33 -50 567 633 ;
+C -1 ; WX 600 ; N musicalnote ; B 100 -14 535 597 ;
+C -1 ; WX 600 ; N estimated ; B 9 0 592 525 ;
+C -1 ; WX 600 ; N Caron ; B 127 473 473 667 ;
+C -1 ; WX 600 ; N Tilde ; B 115 504 485 637 ;
+C -1 ; WX 600 ; N Dotaccent ; B 240 510 360 630 ;
+C -1 ; WX 600 ; N Grave ; B 139 474 380 666 ;
+C -1 ; WX 600 ; N circumflexgrave ; B 127 473 473 858 ;
+C -1 ; WX 600 ; N Circumflexgrave ; B 127 473 473 858 ;
+C -1 ; WX 600 ; N circumflexacute ; B 127 473 473 858 ;
+C -1 ; WX 600 ; N Circumflexacute ; B 127 473 473 858 ;
+C -1 ; WX 600 ; N circumflextilde ; B 115 473 485 810 ;
+C -1 ; WX 600 ; N Circumflextilde ; B 115 473 485 810 ;
+C -1 ; WX 600 ; N circumflexhookabove ; B 127 473 501 925 ;
+C -1 ; WX 600 ; N Circumflexhookabove ; B 127 473 501 925 ;
+C -1 ; WX 600 ; N brevegrave ; B 119 474 481 857 ;
+C -1 ; WX 600 ; N Brevegrave ; B 119 474 481 857 ;
+C -1 ; WX 600 ; N breveacute ; B 119 474 481 857 ;
+C -1 ; WX 600 ; N Breveacute ; B 119 474 481 857 ;
+C -1 ; WX 600 ; N brevetilde ; B 115 474 485 827 ;
+C -1 ; WX 600 ; N Brevetilde ; B 115 474 485 827 ;
+C -1 ; WX 600 ; N brevehookabove ; B 119 474 481 904 ;
+C -1 ; WX 600 ; N Brevehookabove ; B 119 474 481 904 ;
+C -1 ; WX 600 ; N dblgrave ; B 69 486 431 691 ;
+C -1 ; WX 600 ; N Hungarumlaut ; B 169 486 531 691 ;
+C -1 ; WX 600 ; N dblGrave ; B 69 486 431 691 ;
+C -1 ; WX 600 ; N Dieresis ; B 132 510 468 630 ;
+C -1 ; WX 600 ; N Macron ; B 75 530 525 610 ;
+C -1 ; WX 600 ; N Ring ; B 165 451 435 717 ;
+C -1 ; WX 600 ; N ringacute ; B 165 451 435 918 ;
+C -1 ; WX 600 ; N Ringacute ; B 165 451 435 918 ;
+C -1 ; WX 600 ; N Hbar ; B 23 0 581 583 ;
+C -1 ; WX 698 ; N hbar ; B 65 0 633 624 ;
+C -1 ; WX 600 ; N hbar.sc ; B 6 0 594 439 ;
+C -1 ; WX 600 ; N gnaborretni ; B 83 -167 496 496 ;
+C -1 ; WX 600 ; N won ; B -10 0 610 583 ;
+C -1 ; WX 600 ; N naira ; B -8 0 592 583 ;
+C -1 ; WX 600 ; N alpha ; B 65 -14 550 451 ;
+C -1 ; WX 600 ; N beta ; B 37 -250 535 597 ;
+C -1 ; WX 600 ; N delta ; B 42 -16 558 583 ;
+C -1 ; WX 600 ; N gamma ; B 65 -240 535 437 ;
+C -1 ; WX 600 ; N eta ; B 65 -240 535 451 ;
+C -1 ; WX 600 ; N epsilon.alt ; B 54 -16 565 450 ;
+C -1 ; WX 600 ; N kappa ; B 33 0 571 437 ;
+C -1 ; WX 600 ; N omega ; B 33 -14 568 437 ;
+C -1 ; WX 600 ; N pi.alt ; B 33 -14 568 610 ;
+C -1 ; WX 600 ; N phi.alt ; B 42 -240 558 583 ;
+C -1 ; WX 600 ; N sigma ; B 42 -16 622 501 ;
+C -1 ; WX 600 ; N sigma1 ; B 65 -240 535 451 ;
+C -1 ; WX 600 ; N xi ; B 65 -240 535 588 ;
+C -1 ; WX 600 ; N zeta ; B 65 -240 535 588 ;
+C -1 ; WX 600 ; N theta ; B 65 -14 535 597 ;
+C -1 ; WX 600 ; N rho ; B 65 -240 535 451 ;
+C -1 ; WX 600 ; N rho.alt ; B 42 -250 558 450 ;
+C -1 ; WX 600 ; N upsilon ; B 65 -14 535 437 ;
+C -1 ; WX 600 ; N nu ; B 98 -25 535 437 ;
+C -1 ; WX 600 ; N psi ; B 66 -240 535 583 ;
+C -1 ; WX 600 ; N theta.alt ; B 65 -14 585 633 ;
+C -1 ; WX 600 ; N phi ; B 64 -240 535 451 ;
+C -1 ; WX 600 ; N chi ; B 65 -240 535 437 ;
+C -1 ; WX 600 ; N lambda ; B 65 0 535 593 ;
+C -1 ; WX 600 ; N lscript ; B 110 -14 490 597 ;
+C -1 ; WX 600 ; N epsilon ; B 65 -39 535 476 ;
+C -1 ; WX 600 ; N iota ; B 250 -19 500 437 ;
+C -1 ; WX 600 ; N mu.alt ; B 65 -240 535 437 ;
+C -1 ; WX 600 ; N weierstrass ; B 51 -250 535 501 ;
+C -1 ; WX 600 ; N pi ; B 33 0 568 437 ;
+C -1 ; WX 600 ; N tau ; B 90 -10 510 437 ;
+C -1 ; WX 600 ; N Phi ; B 16 0 584 583 ;
+C -1 ; WX 600 ; N Psi ; B 16 0 584 583 ;
+C -1 ; WX 600 ; N omicron ; B 42 -16 558 450 ;
+C -1 ; WX 600 ; N Alpha ; B -21 0 621 583 ;
+C -1 ; WX 600 ; N Beta ; B 13 0 571 583 ;
+C -1 ; WX 600 ; N Epsilon ; B 13 0 550 583 ;
+C -1 ; WX 600 ; N Zeta ; B 73 0 527 583 ;
+C -1 ; WX 600 ; N Eta ; B 23 0 581 583 ;
+C -1 ; WX 600 ; N Iota ; B 83 0 517 583 ;
+C -1 ; WX 600 ; N Kappa ; B 13 0 602 583 ;
+C -1 ; WX 600 ; N Mu ; B -19 0 623 584 ;
+C -1 ; WX 600 ; N Nu ; B -8 0 592 583 ;
+C -1 ; WX 600 ; N Omicron ; B 21 -14 579 597 ;
+C -1 ; WX 600 ; N Rho ; B 13 0 529 583 ;
+C -1 ; WX 600 ; N Tau ; B 42 0 558 583 ;
+C -1 ; WX 600 ; N Chi ; B 10 0 590 583 ;
+C -1 ; WX 600 ; N dotlessi.sc ; B 98 0 503 439 ;
+C -1 ; WX 600 ; N dotlessj.sc ; B 71 -10 591 439 ;
+C -1 ; WX 600 ; N ringhalfleft ; B 122 232 478 559 ;
+C -1 ; WX 600 ; N ringhalfright ; B 122 232 478 559 ;
+C -1 ; WX 600 ; N macron.alt ; B 175 540 425 620 ;
+C -1 ; WX 600 ; N Macron.alt ; B 175 530 425 610 ;
+C -1 ; WX 600 ; N breveinverted ; B 119 484 481 676 ;
+C -1 ; WX 600 ; N Breveinverted ; B 119 474 481 666 ;
+C -1 ; WX 600 ; N brevebelow ; B 119 -239 481 -47 ;
+C -1 ; WX 600 ; N brevebelowinverted ; B 119 -239 481 -47 ;
+C -1 ; WX 600 ; N dotbelow ; B 240 -203 360 -83 ;
+C -1 ; WX 600 ; N macronbelow ; B 75 -183 525 -103 ;
+C -1 ; WX 600 ; N linebelow ; B 75 -183 525 -103 ;
+C -1 ; WX 600 ; N tildebelow ; B 115 -209 485 -76 ;
+C -1 ; WX 600 ; N tildelow ; B 62 -103 538 103 ;
+C -1 ; WX 0 ; N Acutecomb ; B -380 620 -139 812 ;
+C -1 ; WX 0 ; N acutecomb ; B -380 484 -139 676 ;
+C -1 ; WX 0 ; N Brevecomb ; B -481 620 -119 812 ;
+C -1 ; WX 0 ; N brevecomb ; B -481 484 -119 676 ;
+C -1 ; WX 0 ; N brevebelowcomb ; B -481 -239 -119 -47 ;
+C -1 ; WX 0 ; N brevebelowinvertedcomb ; B -481 -239 -119 -47 ;
+C -1 ; WX 0 ; N Breveinvertedcomb ; B -481 620 -119 812 ;
+C -1 ; WX 0 ; N breveinvertedcomb ; B -481 484 -119 676 ;
+C -1 ; WX 0 ; N Caroncomb ; B -473 619 -127 813 ;
+C -1 ; WX 0 ; N caroncomb ; B -473 483 -127 677 ;
+C -1 ; WX 0 ; N Circumflexcomb ; B -473 619 -127 813 ;
+C -1 ; WX 0 ; N circumflexcomb ; B -473 483 -127 677 ;
+C -1 ; WX 0 ; N commaaccentcomb ; B -417 -278 -249 -59 ;
+C -1 ; WX 0 ; N dblGravecomb ; B -531 632 -169 837 ;
+C -1 ; WX 0 ; N dblgravecomb ; B -531 486 -169 691 ;
+C -1 ; WX 0 ; N Dieresiscomb ; B -468 656 -132 776 ;
+C -1 ; WX 0 ; N dieresiscomb ; B -468 520 -132 640 ;
+C -1 ; WX 0 ; N Dotaccentcomb ; B -360 656 -240 776 ;
+C -1 ; WX 0 ; N dotaccentcomb ; B -360 520 -240 640 ;
+C -1 ; WX 0 ; N dotbelowcomb ; B -360 -203 -240 -83 ;
+C -1 ; WX 0 ; N Gravecomb ; B -461 620 -220 812 ;
+C -1 ; WX 0 ; N gravecomb ; B -461 484 -220 676 ;
+C -1 ; WX 0 ; N Hookabovecomb ; B -242 627 -9 885 ;
+C -1 ; WX 0 ; N hookabovecomb ; B -242 471 -9 729 ;
+C -1 ; WX 0 ; N Hungarumlautcomb ; B -431 632 -69 837 ;
+C -1 ; WX 0 ; N hungarumlautcomb ; B -431 486 -69 691 ;
+C -1 ; WX 0 ; N linebelowcomb ; B -525 -183 -75 -103 ;
+C -1 ; WX 0 ; N macronbelowcomb ; B -525 -183 -75 -103 ;
+C -1 ; WX 0 ; N Macroncomb ; B -525 676 -75 756 ;
+C -1 ; WX 0 ; N macroncomb ; B -525 540 -75 620 ;
+C -1 ; WX 0 ; N Ringcomb ; B -435 597 -165 863 ;
+C -1 ; WX 0 ; N ringcomb ; B -435 457 -165 723 ;
+C -1 ; WX 0 ; N Tildecomb ; B -485 650 -115 783 ;
+C -1 ; WX 0 ; N tildecomb ; B -485 514 -115 647 ;
+C -1 ; WX 0 ; N tildebelowcomb ; B -485 -209 -115 -76 ;
+C -1 ; WX 600 ; N Dieresisacute ; B 132 510 468 859 ;
+C -1 ; WX 600 ; N dieresisacute ; B 132 520 468 883 ;
+C -1 ; WX 600 ; N Dieresiscaron ; B 127 510 473 860 ;
+C -1 ; WX 600 ; N dieresiscaron ; B 127 520 473 884 ;
+C -1 ; WX 600 ; N Dieresisgrave ; B 132 510 468 859 ;
+C -1 ; WX 600 ; N dieresisgrave ; B 132 520 468 883 ;
+C -1 ; WX 600 ; N aacute.sc ; B 3 0 598 676 ;
+C -1 ; WX 600 ; N Abreve ; B -21 0 621 812 ;
+C -1 ; WX 600 ; N abreve ; B 42 -16 571 676 ;
+C -1 ; WX 600 ; N abreve.sc ; B 3 0 598 676 ;
+C -1 ; WX 600 ; N Abreveacute ; B -21 0 621 1003 ;
+C -1 ; WX 600 ; N abreveacute ; B 42 -16 571 857 ;
+C -1 ; WX 600 ; N abreveacute.sc ; B 3 0 598 857 ;
+C -1 ; WX 600 ; N Abrevedotbelow ; B -21 -203 621 812 ;
+C -1 ; WX 600 ; N abrevedotbelow ; B 42 -203 571 676 ;
+C -1 ; WX 600 ; N abrevedotbelow.sc ; B 3 -203 598 676 ;
+C -1 ; WX 600 ; N Abrevegrave ; B -21 0 621 1003 ;
+C -1 ; WX 600 ; N abrevegrave ; B 42 -16 571 857 ;
+C -1 ; WX 600 ; N abrevegrave.sc ; B 3 0 598 857 ;
+C -1 ; WX 600 ; N Abrevehookabove ; B -21 0 621 1050 ;
+C -1 ; WX 600 ; N abrevehookabove ; B 42 -16 571 904 ;
+C -1 ; WX 600 ; N abrevehookabove.sc ; B 3 0 598 904 ;
+C -1 ; WX 600 ; N Abrevetilde ; B -21 0 621 973 ;
+C -1 ; WX 600 ; N abrevetilde ; B 42 -16 571 827 ;
+C -1 ; WX 600 ; N abrevetilde.sc ; B 3 0 598 827 ;
+C -1 ; WX 600 ; N Acaron ; B -21 0 621 813 ;
+C -1 ; WX 600 ; N acaron ; B 42 -16 571 677 ;
+C -1 ; WX 600 ; N acaron.sc ; B 3 0 598 677 ;
+C -1 ; WX 600 ; N acircumflex.sc ; B 3 0 598 677 ;
+C -1 ; WX 600 ; N Acircumflexacute ; B -21 0 621 1004 ;
+C -1 ; WX 600 ; N acircumflexacute ; B 42 -16 571 858 ;
+C -1 ; WX 600 ; N acircumflexacute.sc ; B 3 0 598 858 ;
+C -1 ; WX 600 ; N Acircumflexdotbelow ; B -21 -203 621 813 ;
+C -1 ; WX 600 ; N acircumflexdotbelow ; B 42 -203 571 677 ;
+C -1 ; WX 600 ; N acircumflexdotbelow.sc ; B 3 -203 598 677 ;
+C -1 ; WX 600 ; N Acircumflexgrave ; B -21 0 621 1004 ;
+C -1 ; WX 600 ; N acircumflexgrave ; B 42 -16 571 858 ;
+C -1 ; WX 600 ; N acircumflexgrave.sc ; B 3 0 598 858 ;
+C -1 ; WX 600 ; N Acircumflexhookabove ; B -21 0 621 1071 ;
+C -1 ; WX 600 ; N acircumflexhookabove ; B 42 -16 571 925 ;
+C -1 ; WX 600 ; N acircumflexhookabove.sc ; B 3 0 598 925 ;
+C -1 ; WX 600 ; N Acircumflextilde ; B -21 0 621 956 ;
+C -1 ; WX 600 ; N acircumflextilde ; B 42 -16 571 810 ;
+C -1 ; WX 600 ; N acircumflextilde.sc ; B 3 0 598 810 ;
+C -1 ; WX 600 ; N Adblgrave ; B -21 0 621 837 ;
+C -1 ; WX 600 ; N adblgrave ; B 42 -16 571 691 ;
+C -1 ; WX 600 ; N adblgrave.sc ; B 3 0 598 691 ;
+C -1 ; WX 600 ; N adieresis.sc ; B 3 0 598 640 ;
+C -1 ; WX 600 ; N Adotbelow ; B -21 -203 621 583 ;
+C -1 ; WX 600 ; N adotbelow ; B 42 -203 571 450 ;
+C -1 ; WX 600 ; N adotbelow.sc ; B 3 -203 598 439 ;
+C -1 ; WX 600 ; N AEacute ; B -20 0 614 812 ;
+C -1 ; WX 600 ; N aeacute ; B -13 -16 612 676 ;
+C -1 ; WX 600 ; N aeacute.sc ; B 4 0 592 676 ;
+C -1 ; WX 600 ; N agrave.sc ; B 3 0 598 676 ;
+C -1 ; WX 600 ; N Ahookabove ; B -21 0 621 875 ;
+C -1 ; WX 600 ; N ahookabove ; B 42 -16 571 729 ;
+C -1 ; WX 600 ; N ahookabove.sc ; B 3 0 598 729 ;
+C -1 ; WX 600 ; N Amacron ; B -21 0 621 756 ;
+C -1 ; WX 600 ; N amacron ; B 42 -16 571 620 ;
+C -1 ; WX 600 ; N amacron.sc ; B 3 0 598 620 ;
+C -1 ; WX 600 ; N Aogonekacute ; B -21 -250 621 812 ;
+C -1 ; WX 600 ; N aogonekacute ; B 42 -250 585 676 ;
+C -1 ; WX 600 ; N aogonekacute.sc ; B 3 -250 598 676 ;
+C -1 ; WX 600 ; N aring.sc ; B 3 0 598 723 ;
+C -1 ; WX 600 ; N Aringacute ; B -21 0 621 1064 ;
+C -1 ; WX 600 ; N aringacute ; B 42 -16 571 918 ;
+C -1 ; WX 600 ; N aringacute.sc ; B 3 0 598 918 ;
+C -1 ; WX 600 ; N atilde.sc ; B 3 0 598 647 ;
+C -1 ; WX 600 ; N cacute.sc ; B 52 -10 546 676 ;
+C -1 ; WX 600 ; N Ccaron ; B 33 -14 564 813 ;
+C -1 ; WX 600 ; N ccaron ; B 54 -16 565 677 ;
+C -1 ; WX 600 ; N ccaron.sc ; B 52 -10 546 677 ;
+C -1 ; WX 600 ; N Ccircumflex ; B 33 -14 564 813 ;
+C -1 ; WX 600 ; N ccircumflex ; B 54 -16 565 677 ;
+C -1 ; WX 600 ; N ccircumflex.sc ; B 52 -10 546 677 ;
+C -1 ; WX 600 ; N Cdotaccent ; B 33 -14 564 776 ;
+C -1 ; WX 600 ; N cdotaccent ; B 54 -16 565 640 ;
+C -1 ; WX 600 ; N cdotaccent.sc ; B 52 -10 546 640 ;
+C -1 ; WX 0 ; N cwm ; B 0 0 0 0 ;
+C -1 ; WX 0 ; N cwmascender ; B 0 0 0 0 ;
+C -1 ; WX 0 ; N cwmcapital ; B 0 0 0 0 ;
+C -1 ; WX 600 ; N Dcaron ; B 13 0 550 813 ;
+C -1 ; WX 600 ; N dcaron ; B 33 -14 732 624 ;
+C -1 ; WX 600 ; N dcaron.sc ; B 34 0 533 677 ;
+C -1 ; WX 600 ; N Ddotbelow ; B 13 -203 550 583 ;
+C -1 ; WX 600 ; N ddotbelow ; B 33 -203 613 624 ;
+C -1 ; WX 600 ; N ddotbelow.sc ; B 34 -203 533 439 ;
+C -1 ; WX 600 ; N Dlinebelow ; B 13 -183 550 583 ;
+C -1 ; WX 600 ; N dlinebelow ; B 33 -183 613 624 ;
+C -1 ; WX 600 ; N dlinebelow.sc ; B 32 -183 533 439 ;
+C -1 ; WX 600 ; N eacute.sc ; B 34 0 533 676 ;
+C -1 ; WX 600 ; N Ebreve ; B 13 0 550 812 ;
+C -1 ; WX 600 ; N ebreve ; B 33 -16 550 676 ;
+C -1 ; WX 600 ; N ebreve.sc ; B 34 0 533 676 ;
+C -1 ; WX 600 ; N Ecaron ; B 13 0 550 813 ;
+C -1 ; WX 600 ; N ecaron ; B 33 -16 550 677 ;
+C -1 ; WX 600 ; N ecaron.sc ; B 34 0 533 677 ;
+C -1 ; WX 600 ; N ecircumflex.sc ; B 34 0 533 677 ;
+C -1 ; WX 600 ; N Ecircumflexacute ; B 13 0 550 1004 ;
+C -1 ; WX 600 ; N ecircumflexacute ; B 33 -16 550 858 ;
+C -1 ; WX 600 ; N ecircumflexacute.sc ; B 34 0 533 858 ;
+C -1 ; WX 600 ; N Ecircumflexdotbelow ; B 13 -203 550 813 ;
+C -1 ; WX 600 ; N ecircumflexdotbelow ; B 33 -203 550 677 ;
+C -1 ; WX 600 ; N ecircumflexdotbelow.sc ; B 34 -203 533 677 ;
+C -1 ; WX 600 ; N Ecircumflexgrave ; B 13 0 550 1004 ;
+C -1 ; WX 600 ; N ecircumflexgrave ; B 33 -16 550 858 ;
+C -1 ; WX 600 ; N ecircumflexgrave.sc ; B 34 0 533 858 ;
+C -1 ; WX 600 ; N Ecircumflexhookabove ; B 13 0 550 1071 ;
+C -1 ; WX 600 ; N ecircumflexhookabove ; B 33 -16 550 925 ;
+C -1 ; WX 600 ; N ecircumflexhookabove.sc ; B 34 0 533 925 ;
+C -1 ; WX 600 ; N Ecircumflextilde ; B 13 0 550 956 ;
+C -1 ; WX 600 ; N ecircumflextilde ; B 33 -16 550 810 ;
+C -1 ; WX 600 ; N ecircumflextilde.sc ; B 34 0 533 810 ;
+C -1 ; WX 600 ; N Edblgrave ; B 13 0 550 837 ;
+C -1 ; WX 600 ; N edblgrave ; B 33 -16 550 691 ;
+C -1 ; WX 600 ; N edblgrave.sc ; B 34 0 533 691 ;
+C -1 ; WX 600 ; N edieresis.sc ; B 34 0 533 640 ;
+C -1 ; WX 600 ; N Edotaccent ; B 13 0 550 776 ;
+C -1 ; WX 600 ; N edotaccent ; B 33 -16 550 640 ;
+C -1 ; WX 600 ; N edotaccent.sc ; B 34 0 533 640 ;
+C -1 ; WX 600 ; N Edotbelow ; B 13 -203 550 583 ;
+C -1 ; WX 600 ; N edotbelow ; B 33 -203 550 450 ;
+C -1 ; WX 600 ; N edotbelow.sc ; B 34 -203 533 439 ;
+C -1 ; WX 600 ; N egrave.sc ; B 34 0 533 676 ;
+C -1 ; WX 600 ; N Ehookabove ; B 13 0 550 875 ;
+C -1 ; WX 600 ; N ehookabove ; B 33 -16 550 729 ;
+C -1 ; WX 600 ; N ehookabove.sc ; B 34 0 533 729 ;
+C -1 ; WX 600 ; N Emacron ; B 13 0 550 756 ;
+C -1 ; WX 600 ; N emacron ; B 33 -16 550 620 ;
+C -1 ; WX 600 ; N emacron.sc ; B 34 0 533 620 ;
+C -1 ; WX 600 ; N Eogonekacute ; B 13 -250 550 812 ;
+C -1 ; WX 600 ; N eogonekacute ; B 33 -250 550 676 ;
+C -1 ; WX 600 ; N eogonekacute.sc ; B 34 -250 533 676 ;
+C -1 ; WX 600 ; N Ereversed ; B 13 0 550 583 ;
+C -1 ; WX 600 ; N ereversed ; B 33 -16 550 450 ;
+C -1 ; WX 600 ; N ereversed.sc ; B 34 0 533 439 ;
+C -1 ; WX 600 ; N Etilde ; B 13 0 550 783 ;
+C -1 ; WX 600 ; N etilde ; B 33 -16 550 647 ;
+C -1 ; WX 600 ; N etilde.sc ; B 34 0 533 647 ;
+C -1 ; WX 600 ; N eturned ; B 33 -16 550 450 ;
+C -1 ; WX 600 ; N eturned.sc ; B 34 0 533 439 ;
+C -1 ; WX 600 ; N schwa ; B 33 -16 550 450 ;
+C -1 ; WX 600 ; N Gacute ; B 33 -14 592 812 ;
+C -1 ; WX 600 ; N gacute ; B 33 -205 592 676 ;
+C -1 ; WX 600 ; N gacute.sc ; B 52 -10 572 676 ;
+C -1 ; WX 600 ; N Gbreve ; B 33 -14 592 812 ;