\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{ชุดคำสั่งในภาษาโก} คำสั่งในภาษาโก มีคำสั่งจำนวนมากให้เลือกใช้งานตามความ เหมาะสมแต่ในระบบนี้ขอนำเสนอ 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}