สวัสดีครับ เมื่อไม่นานมานี้ได้มีโอกาสให้คำแนะนำผู้คนทางออนไลน์ที่สนใจทำเว็บไซต์แต่ไม่มีพื้นฐานคอมพิวเตอร์มาก่อน ก็เลยเริ่มคิดว่า ไหนๆ ผมเองก็อยู่วงการทำเว็บไซต์มากพอสมควร ไม่เคยเขียนเล่าถึงพื้นฐานตั้งแต่ต้นเลย ทั้งๆ ที่เป็นสิ่งที่เล่าให้หลายๆ คนฟังบ่อยมาก (เพื่อที่จะได้ไม่ต้องเล่าเรื่องเดิมซ้ำๆ) วันนี้จึงมาเขียนบันทึกเอาไว้ซะหน่อยว่า จะทำเว็บขึ้นมาสักเว็บนั้น ต้องมีความรู้อะไรบ้าง ตั้งแต่พื้นฐานการทำงานของคอมพิวเตอร์ ไปจนถึงการเขียนโปรแกรม การสื่อสาร การทำเว็บ เทคโนโลยีการทำเว็บที่ก้าวล้ำ และเทคโนโลยีที่ช่วยให้ทีมทำเว็บขนาดใหญ่ทำงานร่วมกันได้ ทั้งหมดที่จะเล่ามานี้อาจดูซับซ้อน แต่ผมอยากบอกอย่างหนึ่งว่า ทุกอย่างล้วนมีที่มาจากเลขฐานสอง 0 1 ที่ร้อยเรียงต่อกันจนทำให้เกิดความเป็นไปได้ในทุกอย่างที่เราใช้งานกันอยู่ ดังนั้น คอมพิวเตอร์ที่เราใช้งาน ไม่ใช่พระเจ้าที่เสกสรรสิ่งต่างๆ ที่ไม่สามารถเข้าใจได้แต่อย่างใด แต่ความมันเกิดจากความพยายามของมนุษย์จากทั่วโลก ที่สร้างสิ่งนี้ขึ้นมาใช้งานร่วมกัน
คอมพิวเตอร์ความจริงก็แค่อุปกรณ์ไฟกระพริบแสนธรรมดา
เรื่องแรกที่ผมอยากบอกให้ทุกคนเข้าใจคือ คอมพิวเตอร์ไม่ใช่พระเจ้า มันเป็นแค่อุปกรณ์อิเล็กทรอนิกส์ตัวหนึ่ง มันเป็นอุปกรณ์ใช้ไฟฟ้าที่ทำงานด้วยสัญญาณปิดเปิดของไฟฟ้า 0 1 0 1 0 .. อย่างที่ท่านๆ ก็น่าจะได้เห็นกันอยู่แล้ว สิ่งนี้เราเรียกว่าเลขฐาน 2 (มี 2 ค่าคือ 1 และ 0 นั่นเอง) เพียงแต่ว่า 0 1 0 1 ที่ว่านี่มันเร็วมาก เร็วมาก และเยอะมากๆ มันสามารถประมวลผลเลขเหล่านี้อย่างรวดเร็ว มันจึงคิดเลขได้ไวมากๆ
อีกเรื่องที่อยากบอกก็คือ มันไม่มีโปรแกรมเมอร์คนไหนเขียนโปรแกรมด้วยเลขฐาน 2 เช่นกัน โปรแกรมเมอร์เองก็ไม่ใช่พระเจ้า แต่พวกเราเขียนโปรแกรมกันอย่างไร เดี๋ยวผมจะเล่าให้ฟังแน่นอน
เลข 1 หรือ 0 ตัวโดดๆ เนี่ย ไม่มีประโยชน์อันใด แต่เมื่อเลขนี้เกาะกลุ่มกันขึ้นมา มันจึงเกิดเป็นความเป็นไปได้ที่สูงมากขึ้นเรื่อยๆ ตัวอย่างเช่น เลข 1 หรือ 0 หลักเดียว มีความเป็นไปได้ 2 อย่างคือ 0 หรือ 1 ถ้าประกอบกัน 2 ชุด ก็จะได้ 4 แบบ คือ 00 / 01 / 10 / 11 ถ้ามี 3 ชุด ก็จะได้ 8 แบบ ตั้งแต่ 000 ไปจนถึง 111 ซึ่งจะเห็นได้ว่า ยิ่งเพิ่มหลัก ยิ่งมีความเป็นไปได้สูงมากขึ้นเรื่อยๆ ตามสมการ 2^n นั่นเอง (เมื่อ n คือจำนวนหลัก)
โดยปรกติ นักคอมพิวเตอร์จะจัดกลุ่มเลขนี้ 8 หลัก ก็คือ 2^8 หรือที่ความเป็นไปได้ที่ 256 นั่นเอง เราเรียกมันว่า 1 byte ส่วนตัวเลข 1 0 โดดๆ เรียกมันว่า bit นอกจากนั้นเพื่อความสั้นแทนที่จะเขียน 8 ตัวยาวๆ เราจับ 4 ตัวมารวมกันเป็นเลขฐาน 16 แทนที่ด้วยตัวเลข 0 1 2 3 4 5 6 7 8 9 A B C D E F โดย 0000 = 0 และ 1111 = F นั่นเอง เราเรียกมันว่า Hex ดังนั้น 1 byte จึงใช้ประกอบด้วย 2 หลัก คือ 00 – FF นั่นเอง
การแมพข้อมูลโลกความเป็นจริงไปเป็นข้อมูลบนคอมพิวเตอร์ที่พื้นฐานที่สุดก็คือการแมพหนังสือนั่นเอง a-z, A-Z, 0-9 และตัวอื่นๆ อีกหลายตัวของทางฝั่ง Latin (คือคอมพิวเตอร์มันถูกคิดจากทางฝั่งโลกตะวันตกอะนะ) เราเรียกมาตรฐานการแทนค่าที่แสนที่พื้นฐานนี้ว่า ASCII โดย 1 ตัวหนังสือก็แทนตรงๆ เลยด้วย 1 byte หรือ 8 bits เนี่ยล่ะ
ตัวอย่างเช่น ASCII ของ C A T คือ 01000011 01000001 01010100 บน Binary นั่นเอง เวลาเราเขียนไฟล์ที่มีคำว่า CAT คอมพิวเตอร์มันก็จะบันทุกว่า 010000110100000101010100 แล้วมันก็จะแบ่ง 8 ตัวเป็น 1 ตัวอักษร ก็จะได้ C A T ออกมา
ในทำนองเดียวกัน ตัวเลขก็มีการคำนวณในแบบเดียวกัน คือเราจะกำหนดมาว่า เราจะเก็บตัวเลข 1 ตัว ด้วย Block ขนาดเท่าไหร่ เช่นโดยทั่วไปเราจะเก็บข้อมูลจำนวณเต็มที่ 4 Bytes ซึ่งแต่ละ Byte ได้ปริมาณความเป็นไปได้ที่ 256 อย่างที่ได้เล่าไปแล้ว ถ้า 4 Bytes ก็จะได้ 256^4 หรือ 4,294,967,296 นั่นเอง ถ้าเป็นคนติดตามข่าวสารจะได้ยินข่าวระบบล้มเพราะตัวเลขเกินขนาดที่เก็บได้ (Overflow) ก็อยู่ที่ประมาณ 4 พันกว่าล้าน เนี่ยแหละ
ส่วนการคำนวณเลขนั้นความจริงก็คล้ายๆ กับที่เราคำนวณกัน เพียงแต่อย่าลืมว่ามันมีแค่ 2 ค่าคือ 0 กับ 1 ดังนั้นเมื่อไหร่ที่มันจะขึ้นเลข 2 ก็จะต้องทดหลักใหม่ขึ้นไปเท่านั้นเอง
แต่ยังมีหนึ่งคำถามที่ผมเที่ยวเดินถามอาจารย์ไปทั่วภาควิชาในสมัยยังเรียน ป.ตรี อยู่ นั่นก็คือ..
แล้วคอมพิวเตอร์มันต่างกับเครื่องคิดเลขอย่างไร?
แน่นอน คอมพิวเตอร์แพงกว่าเครื่องติดเลข และดูจะทำอะไรล้ำๆ ได้มากกว่า แต่จริงๆ แล้ว เจ้าสองเครื่องใช้ไฟฟ้านี้มันต่างกันอย่างไร
พอได้เรียนลึกลงไป ก็ทำให้เข้าใจว่า อ๋อ คอมพิวเตอร์มันเขียนโปรแกรมลงไปได้ ส่วนเครื่องคิดเลข มันเขียนโปรแกรมไม่ได้นั่นเอง (โอเค บางเครื่องคิดเลขอาจจะเขียนโปรแกรมได้ นิดๆ หน่อยๆ แต่มันไม่ใช่โปรแกรมในระดับที่คอมพิวเตอร์ทำได้)
การเขียนโปรแกรมคืออะไร?
การที่เรากดเครื่องคิดเลข 1+2 = 3 แล้วก็จบไป นั่นไม่ใช่การโปรแกรม แต่ถ้าเราบอกว่า เอา 1+2 = 3 แล้วเอาเลขก่อนหน้ามาบวกกับคำตอบ ได้ 2+3 = 5 แล้วเอา 3+5 = 8 แล้วเอา 5+8 = 13 เราอยากรู้ว่า ถ้าทำแบบนี้ต่อไป 100 ครั้ง แล้วได้ค่าเท่าไหร่ มีใครจะยังกดเครื่องคิดเลขอยู่บ้าง?
แต่เราสามารถเขียนโปรแกรมให้คอมพิวเตอร์ทำงานซ้ำๆ นี้ให้เราได้ เพียงแค่เราสร้างตัวแปรมาเก็บค่าตัวบวกและคำตอบเอาไว้ และให้มันเปลี่ยนไปเรื่อยๆ ในแต่ละรอบที่มันคำนวณได้ จากนั้นบอกมันว่า เจ้า จงทำมัน 100 ครั้ง เครื่องคอมพิวเตอร์ก็จะคิดเลขอย่างรวดเร็ว และได้คำตอบครั้งสุดท้ายเก็บเอาไว้พร้อมให้เราเรียกใช้งาน
อนุกรมที่คำนวณไปนั้นเราเรียกว่า Fibonacci Sequence มันเป็นส่วนหนึ่งของการคำนวณ Golden Ratio ที่หลายๆ คนหลงไหลนั่นเอง 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, …
เอาล่ะ รู้สึกออกนอกทะเล เอาเป็นว่า เราสามารถสั่งคอมพิวเตอร์ ให้เก็บข้อมูล ให้คำนวณเลข ให้ทำโน่นนี่นั่นเท่าที่เราจะจินตนาการได้ ผ่านการเขียนโปรแกรม
โดยพื้นฐานของศาสตร์การเขียนโปรแกรมก็อาศัยหลักๆ 2 วิชา ได้แต่ วิชา Algorithm ว่าด้วยการออกแบบการทำงานแบบเป็นขั้นเป็นตอน ทำวนๆ ซ้ำๆ เพื่อให้ได้ผลลัพธ์ที่ต้องการ และ Data Structure ว่าด้วยเรื่องของการเก็บข้อมูล จะเก็บข้อมูลยังไง จะเรียกคืนข้อมูลด้วยวิธีการแบบไหน เพื่อให้คอมพิวเตอร์มันจัดการได้
ส่วนภาษาที่ใช้เขียนโปรแกรมก็อย่างที่ผมบอกว่า เราไม่ได้สั่งงานคอมพิวเตอร์ด้วยเลขฐาน 2 แต่เราใช้ภาษาคอมพิวเตอร์ที่มีให้ใช้อย่างมากมาย คนรุ่นเก่าๆ หน่อยก็น่าจะคุ้นหูกับภาษา Pascal ภาษ C ส่วนเด็กสมัยนี้ก็น่าจะได้ยิน Python กันอยู่บ่อยๆ ซึ่งผมอยากจะบอกว่า นี่มันเข้าใกล้ภาษาคนมากแล้วนะ
ภาษาคอมพิวเตอร์มันคือชุดคำสั่งที่สั่งให้คอมพิวเตอร์มันทำงาน โดยตัวภาษานี้เวลาจะใช้งานจริงเนี่ย มันจะถูก Compile ลงไปเป็นชุดคำสั่งของ Microchip หรือ CPU หรือ Processor แล้วแต่ใครจะเรียก แล้วมันก็จะไปสุดที่ Machine Language หรือเลขฐานสอง จุดเริ่มต้นของทุกสิ่ง
เห็นไหมล่ะ สุดท้ายแล้วคอมพิวเตอร์มันก็เป็นแค่อุปกรณ์ไฟกระพริบ 0 1 0 1 จริงๆ ทำงานตามที่เราสั่ง มันคิดเองไม่ได้ ทุกอย่างที่เราเห็นว่ามันเก่งขึ้นมาได้นั้น ล้วนเกิดขึ้นจากความสามารถของมนุษย์ที่เอามันมาประยุกต์ใช้ทั้งสิ้น
ทีนี้พอเราเขียนโปรแกรมบนคอมพิวเตอร์ได้แล้ว เราเซฟ เราโหลดข้อมูลที่เคยทำเอาไว้ได้ ใช้งานบนเครื่องตัวเองได้แล้ว แต่นี่มันเป็นเพียงจุดเริ่มต้น ประเด็นต่อมาที่เราจะพูดคุยกันก็คือ แล้ว..
คอมพิวเตอร์สื่อสารกันได้อย่างไร?
เมื่ออุปกรณ์ไฟกระพริบ มาเจอกับอุปกรณ์ไฟกระพริบอีกตัว จึงเกิดเป็น ไฟกระพริบ 2 ดวง ไม่ใช่ละ!
กลับมาเข้าเรื่อง ในเมื่อเราทำให้ไฟกระพริบในเครื่องคอมพิวเตอร์เครื่องแรกของเราได้แล้ว มันก็ต้องมีทางทำให้มันไปกระพริบบนคอมพิวเตอร์ที่ตั้งอยู่ข้างๆ ได้ด้วย
แน่นอน คอมพิวเตอร์มันเป็นอุปกรณ์ไฟฟ้า มันก็สื่อสารด้วยสายไฟ ซึ่งเดี๋ยวนี้ไปใช้ WiFi เป็นสัญญาณวิทยุกันหมด แต่มันก็ใช้พื้นฐานเดียวกัน นั่นก็คือ ฝั่งหนึ่งคอยเงี่ยหูฟัง ส่วนอีกคนเป็นคนพูด เพียงแค่นี้ ข้อความจากผู้พูด ก็จะถูกส่งไปหาผู้ฟังได้ เรียบง่ายแบบนั้นเลย
แต่ว่า จะไปรู้ได้ยังไงว่า ไอ้คนที่พูด มันพูดภาษาอะไรมา สุดท้ายแล้วเลขฐานสองที่พ่นออกมาเป็นล้านๆ ตัวภายในเวลาแค่เสี้ยววินาที มีความเป็นไปได้อย่างมหาศาล ถ้า 2 เครื่องฟังและพูดกันคนละภาษา ก็ไม่มีทางเลยที่จะพูดคุยกันรู้เรื่อง คอมพิวเตอร์จึงต้องมีการกำหนดมาตรฐานในการพูดคุยกันก่อนทั้งสองเครื่อง จึงจะพูดคุยกันได้
แล้วใครฟัง แล้วใครพูด สุดท้ายก็หนีไม่พ้นโปรแกรมคอมพิวเตอร์เนี่ยแหละ ที่เล่าไปข้างบน มันเป็นในระดับของ Hardware แต่สุดท้ายข้อความต่างๆ ที่สื่อสารหากัน จะฟัง จะส่ง ให้กัน เราก็ต้องเขียนโปรแกรมคอมพิวเตอร์ขึ้นมาฟัง ขึ้นมาส่ง ให้ถึงกัน ให้สื่อสารกันได้
แล้วโปรแกรมเมอร์ มันจะเขียนโปรแกรมอะไรก็ได้ แล้วจะเอาสิ่งใดเป็นมาตรฐานในการสื่อสาร ทางฝั่งนักวิทยาศาสตร์คอมพิวเตอร์จึงพัฒนามาตรฐานการสื่อสารขึ้นมา เราเรียกมันว่า..
Network Protocol
Network Protocol หรือเรียกสั้นๆ กันแค่ Protocol คือมาตรฐานการสื่อสารในแบบต่างๆ ที่ถูกกำหนดเอาไว้ เพื่อให้นักพัฒนาโปรแกรม ใช้การสื่อสารที่เป็นแบบเดียวกัน เพื่อให้การพัฒนาโปรแกรมสำหรับสื่อสารข้ามเครื่องกัน เป็นไปได้รูปแบบเดียวกัน ไม่ใช่ต่างคนต่างทำ
Network Protocols นั้นมีเยอะมากกกก เยอะมากจริงๆ แต่ผู้ชนะที่ถูกใช้อย่างยอดนิยมสุดๆ เลยก็คือ TCP และ UDP ผมคงไม่ลงลึกก็ละกัน เพราะมันออกนอกเรื่องที่จะเล่า
แต่ที่อยากจะบอกก็คือ TCP/IP เป็นมาตรฐานที่เราใช้สื่อสารหลักบนโลกอินเทอร์เน็ต ดังนั้น เวลาเราเขียนโปรแกรมขึ้นมา เพื่อความง่าย และเข้ากันได้กับชาวบ้าน เราจึงใช้เจ้าเนี่ยแหละเป็นหลัก
มาถึงตอนนี้แล้ว เราก็สามารถทำให้คอมพิวเตอร์ 2 เครื่องต่อหากันได้แล้ว หรือต่อให้เราต่อคอมพิวเตอร์หลายๆ เครื่องเข้าหากัน มันก็สามารถรู้จักทุกคนในวงได้ แต่ถ้าวงที่ว่านี้มันขยายใหญ่ขึ้นไปอีกล่ะ ใหญ่เป็นระดับโลกเลยล่ะ สิ่งนี้แหละ เราเรียกมันว่า อินเทอร์เน็ต
Internet
คือเครือข่ายของคอมพิวเตอร์ทั่วโลกที่เชื่อมเข้าหากันด้วย Protocol ที่มีชื่อว่า IP หรือ Internet Protocol
เอ๊ะ ฟังแล้วงงๆ เอาใหม่ จำได้ไหมว่า TCP/IP ที่เคยเขียนไปข้างบน Protocol จริงๆ ที่สื่อสารเนี่ย มันคือ TCP ส่วน IP มันคือ Protocol ที่ TCP วิ่งอยู่ข้างบนอีกทีหนึ่ง ซึ่งชื่อเต็มๆ ของ IP ก็คือ Internet Protocol
หน้าที่หลักจริงๆ ของ Internet Protocol คือการระบุเลขที่และเส้นทางในการสื่อสาร มันทำหน้าที่เหมือนกับไปรษณีย์ โดยคอมพิวเตอร์หนึ่งเครื่อง เปรียบเหมือนบ้านหนึ่งหลัง ที่มีเลขที่หน้าบ้านอย่างเป็นระบบระเบียบ ส่วนบุรุษไปรษณีย์สุดหล่อมีหน้าที่ในการชี้ว่า ถ้า U จะส่งข้อมูลไปหาบ้านเลขที่ X เจ้านั่นคือคอมพิวเตอร์เครื่องนั้น วิ่งไปหามันได้เลย บ้านมันอยู่ตรงโน้น!
ทีนี้คอมพิวเตอร์ทุกๆ เครื่องที่เชื่อมต่อเข้ามาใน Network ก็จะถูกกำหนด IP ของตน เพื่อให้ทุกเครื่องในเครือข่ายสามารถติดต่อหาเขาได้ รวมถึงให้เขาสามารถติดต่อหาคนอื่นได้เช่นกัน
และเมื่อเรานำเครือข่ายที่ว่านี้ ขยายใหญ่ขึ้นในระดับโลก โดยมีองค์กรที่คอยบริหารจัดสรรเลข IP นี้ให้แก่ผู้ให้แก่บริการอินเทอร์เน็ตทั่วโลก (ISP) ไปใช้งาน และ ISP ทั่วโลกก็ล้วนเชื่อมต่อเข้าหากัน ทำให้คอมพิวเตอร์ทั่วโลกสามารถเชื่อมต่อเข้าหากันได้ และนั่นแหละจึงเกิดเป็นอินเทอร์เน็ตที่เราใช้กันอยู่นั่นเอง!!
IP หน้าตาเป็นยังไง นี่ไง คุ้นๆ ไหม 192.168.1.1 ความจริงแล้วมันมีตั้งแต่ 0.0.0.0 ไปจนถึง 255.255.255.255 เลยนะ
เห็นมะ วนกลับมาเรื่องเดิมอีกละ 0 – 255 มาจากไหน มันก็คือความเป็นไปได้ 256 แบบนั่นแหละ มันก็คือข้อมูล 1 Byte นั่นเอง ดังนั้น IP จึงมีขนาด 4 Bytes นั่นก็คือเก็บตัวเลขได้ประมาณ 4 พันกว่าล้านค่านั่นเอง คุ้นๆ อีกแล้วไหมตัวเลขนี้ มันคือขนาดของตัวเลขจำนวนเต็ม 4 Bytes ที่ได้พูดถึงไปข้างต้นนั่นเอง
IP นี้ก็มี Version ด้วยนะ ที่ใช้ 4 Bytes เนี่ย เราเรียกว่า IPv4 ไอ้ตัวเลข 4 พันล้านเนี่ย มันก็ดูเยอะมากๆ เลยนะ อุปกรณ์คอมพิวเตอร์เชื่อมต่อเข้าหากัน 4 พันล้านเครื่อง มันคงจะพอ แต่ที่ไหนได้ ผ่านไป 40 กว่าปี อุปกรณ์ที่ต่ออินเตอร์เน็ตทั่วโลกมีจำนวนเกินค่านี้ไปแล้ว จึงมีการอัพเกรดเวอร์ชั่น ขยายความยาว เป็น IPv6 ซึ่งขยายความยาวออกไปอีกเป็น 128 bits จึงเพิ่มความเป็นไปได้มาเป็น 2^128 หรือในเลขฐานสิบก็ประมาณ 3.4*10^38 (มีเลข 0 ห้อยท้าย 38 ตัว) ซึ่งฟังดูก็เยอะมากๆ และน่าจะเพียงพอสำหรับการใช้งานของมวลมนุษยชาติไปอีกนาน
แต่โชคร้าย.. การจะเปลี่ยนอุปกรณ์ Network ทั่วโลกที่ใช้ IPv4 มารองรับ IPv6 ด้วยกันนั้นเป็นเรื่องยาก เพราะว่า IPv4 มันก็ยังใช้งานกันได้อยู่ จะไปเปลี่ยนทำไมให้มันเปลืองเงิน ด้วยเหตุผลนี้ ทำให้การเปลี่ยนแปลงจึงเกิดขึ้นอย่างเชื่องช้า ช้าถึงขนาดที่ว่า องค์กรที่คอยจัดสรร IPv4 บอกว่า เลขมันหมดแล้ว ฉันแจกให้ ISP ไปหมดแล้ว จะต้องไปดึงกลับมาจากเจ้าเก่าๆ ที่เคยแจกให้ไปกลับมา Recycle เอาแล้ว ทุกคนก็ยังบอกว่า ไม่เป็นไร IPv4 ก็ยังใช้ได้อยู่ เพราะว่า เรามีสิ่งที่เรียกว่า NAT ใช้งาน
Network Address Translation
Network Address Translation หรือที่เรียกสั้นๆ ว่า NAT เป็นวิธีหนึ่งในการทำให้เกิด Network วงย่อยๆ ลงมา ซึ่งทุกวันนี้ความจริงเราก็ใช้งานอยู่โดยไม่รู้ตัว โดยเร้าเตอร์ที่บ้านเราที่มันแจก IP ให้เราใช้นั่นแหละ เวลาเราต่อเข้า WiFi เร้าเตอร์บ้าน เราจะได้ (Private) IP ประมาณว่า 192.168.1.xxx อีกเครื่องต่อเข้ามาก็จะได้ 192.168.1.xxy ประเด็นคือ ที่บ้านเพื่อนเรา ก็ได้ IP หน้าตาคล้ายๆ กันนี่นะ แล้วคอมพิวเตอร์ที่บ้านเรา จะต่อหาคอมพิวเตอร์ที่บ้านเพื่อนได้ไหมผ่าน IP Address เลยได้ไหม คำตอบก็คือ ไม่ได้ เพราะว่ามันอยู่คนละวง Network กัน หรือมันอยู่กันคนละวง NAT แล้วแต่ใครจะเรียก
กลไกการทำงานมันคือ ISP ให้ (Public/External) IP Address สำหรับเล่นอินเทอร์เน็ตมาให้ที่บ้านเรา 1 เลข สำหรับใช้ต่อเข้าสู่โลกภายนอก แต่ทำไม 1 IP นี้ สามารถต่ออุปกรณ์ที่บ้านเราได้ทั้งบ้านเลข ก็เพราะเร้าเตอร์ของเราทำ NAT ให้ เราจะจำให้เราว่า เจ้า Private IP นี้ ขอส่งข้อมูลออกโลกภายนอกไปหาคนโน้น และเวลาได้ความมูลกลับมา มันก็จะส่งกลับมาหา Private IP ที่ร้องขอไปได้อย่างถูกต้อง แต่การสื่อสารออกโลกอินเตอร์เน็ตจริงๆ นั้น เราใช้ Public IP หรือ External IP ขึ้นอยู่กับใครจะเรียก ภาษาบ้านๆ ชอบเรียกกันว่า IP แท้ ก็ตามแต่
ความดั้นด้นของ ISP มันมาถึงในระดับที่ว่า แทนที่ ISP จะแจก Public IP ให้แต่ละบ้าน ตอนหลังนี่ ISP ก็ทำวง NAT ขึ้นมาภายใน แล้วเอาแต่ละบ้านไปเป็นเหมือนลูกข่ายข้างในนั้นอีกที ทำให้ตอนนี้ IP ที่เราได้จาก ISP ก็ไม่ใช่ IP แท้อีกต่อไป คนทำกล้องวงจรปิดจะดูนอกบ้านก็เลยเดือดร้อนไปหมด แต่สำหรับผู้ใช้อินเทอร์เน็ตทั่วไปก็ใช้งานได้เหมือนเดิมตามปรกติ พอมันเป็นแบบนี้แล้วผมก็มองไม่เห็นเลยว่า เมื่อไหร่ IPv6 จะถูกนำมาใช้งานจริงๆ จังๆ สำหรับโลกที่ทุกอย่างเป็นเงินเป็นทองแล้ว อะไรที่ราคาถูกกว่ามักจะถูกเลือกเสมอ..
อย่างไรก็ดี แต่พอเราจะทำเว็บ เราจะตั้ง Server ขึ้นมาให้บริการ เราจำเป็นจะต้องมี Public IP ดังนั้นจึงเป็นเรื่องยากลำบากมากที่เราจะเอาเน็ตบ้านมาให้บริการเว็บไซต์ ซึ่งเดี๋ยวค่อยมาว่ากันในภายหลัง
เอาล่ะ พาออกนอกทะเลอีกแล้ว สังเกตไหมว่า หรือบางคนอาจจะยังงงๆ กับคำว่า IP เลยซะด้วยซ้ำ ไอ้เลข 192.168.1.1 มันไม่ใช่สิ่งที่ฉันคุ้นเคย โลกอินเทอร์เน็ตมันไม่ใช่แบบนี้ ฉันไม่ได้เข้า google.com ด้วย 172.217.174.174 ซะหน่อย (ความจริงเข้าได้เหมือนกันนะ ลอง copy ไปเปิดดู 555)
แน่นอน ไม่มีใครเข้า Google ด้วย 172.217.174.174 ถึงแม้เลขมันจะสวยขนาดไหนก็ตามดี แล้วทำไม 172.217.174.174 มันถึงกลายเป็น google.com ได้ล่ะ แล้วทำไมเราพิมพ์ google.com ถึงพาเราไปหาเครื่อง 172.217.174.174 ได้ล่ะ และนั่นเป็นสิ่งที่เราจะพูดคุยกันต่อไป
Domain Name System
ด้วยความที่คนเราสื่อสารกันด้วยคำ ไม่ใช่ตัวเลข การจำพิมพ์ IP Address เพื่อเปิดเว็บไซต์จึงเป็นเรื่องที่ไม่เวิร์คสำหรับการใช้งานจริง จึงมีการพัฒนาระบบ Domain Name System ขึ้นมา เพื่อใช้ในการเชื่อมโยงจากชื่อให้เป็น IP Address ทีนี้แทนที่เราจะจำเลข IP สำหรับเข้าเว็บไซต์ เราก็เปลี่ยนมาเข้าผ่านทางชื่อเว็บไซต์ที่เราคุ้นเคยกัน
แล้ว Domain Name คืออะไร มันก็คือชื่อเว็บนั่นเอง อย่างเช่น google.com ก็เป็นตัวอย่างหนึ่งที่น่าจะเข้าใจง่ายที่สุด
แต่จะว่าไปแล้ว ถ้าอยากจะมีชื่อ Domain Name ของตัวเองบ้าง จะต้องทำอย่างไร เนื่องจากระบบอินเทอร์เน็ตมีหนึ่งเดียว จึงต้องมีผู้กำกับดูแล ก็มีองค์กรกลางที่ชื่อว่า ICANN คอยดูแล จัดการผู้ให้บริการจด Domain Name ต่างๆ หรือที่เรียกว่า Domain Registrar ให้ดำเนินการไปตามกฎที่กำหนด โดยเฉพาะเรื่องการชำระค่าธรรมเนียมและการยืนยันสิทธิ์การเป็นเจ้าของ เพื่อป้องกันการขโมยชื่อคนอื่นไปใช้
ดังนั้นเวลาเราจะจด Domain เราก็ไปจดกับ Registrar เนี่ยแหละ มีหลายเจ้าให้ใช้งาน ถ้ามีเงินหรือมีเป้าหมายจะใช้งาน ก็ไปจองชื่อกันได้ถ้ายังว่าง ตอนนี้ .com ก็แทบจะมีทุกคำที่เราจะคิดได้แล้ว ส่วน dot อื่นๆ ที่น่าสนใจตอนนี้ก็มีเยอะอยู่
ทีนี้พอเราได้ Domain มาแล้ว เราก็จะ Registrar ให้ชี้ชื่อนี้ไปหา Name Server (NS) หรือ DNS Server ที่เป็นบริการสำหรับบอกว่า ถ้าเข้ามาที่ชื่อนี้ ให้ลิงค์ไปที่ IP Address อะไร ชื่อที่ผมพูดถึงในที่นี้ คือชื่อระดับ Subdomain ด้วย ตัวอย่างเช่น www.google.com มี subdomain คือ www และ mail.google.com มี subdomain เป็น mail ซึ่งจะรู้ว่าจะชี้ไปที่ไหน ก็ต้องไปถาม DNS Server เนี่ยล่ะ แต่ก่อนจะรู้ว่าจะชี้ไปที่ DNS Server ไหน ก็ต้องถามว่า google.com ไปจดไว้ที่ Registrar เจ้าไหนก่อน แล้วเขาก็จะบอกว่าจะไปถามใครได้
สังเกตว่ามันเป็นการถามต่อๆ กันจากหลายๆ ที่ เนื่องจากระบบอินเทอร์เน็ตนั้นใหญ่มาก เราไม่สามารถให้คอมพิวเตอร์ตัวเดียวเก็บข้อมูลทุกอย่างเอาไว้ได้ จึงต้องอาศัยการชี้ต่อๆ จนไป ช่วยกันทำงาน จนกว่าจะถึงปลายทาง
อ่อ แน่นอน Registrar และ DNS Server เนี่ย มันสื่อสารกันในระดับ IP Address แล้วนะครับ และเราไม่ต้องไปรู้ว่า 2 อย่างที่ว่านี้มัน IP อะไร คอมพิวเตอร์มันรู้และจัดการของมันเอง เพราะเวลาเราต่ออินเตอร์เน็ต ISP จะส่ง DNS Server IP Address มาให้ด้วย เราก็ใช้เลขนี้เนี่ยแหละในการหาว่า Domain ที่จะไปนั้น IP Address อะไร ระบบ DNS มันจะช่วยกันค้นหาให้เราเอง
สำหรับใครที่สนใจอ่านเรื่อง DNS Server เพิ่มเติม ว่าทำไมต้องมี มันทำงานยังไง ตั้งค่ายังไง ผมเคยเขียน Blog เอาไว้ด้วย สามารถตามไปอ่านกันได้ที่ การตั้งค่า DNS Server ฉบับผู้เริ่มต้น
ทีนี้ล่ะ อินเทอร์เน็ตของเราก็เริ่มเข้าใกล้สิ่งที่เรารู้จักแล้ว แต่ยังขาดไปอีกอย่างที่น่าจะเคยผ่านหูผ่านตามาบ้าง นั่นก็คือ Protocol HTTP
HTTP
หลังจากเราได้ IP Address เป้าหมายมาแล้วว่า เราก็จะสื่อสารไปหาเขาแล้ว Protocol หลักที่ใช้สื่อสารนี้มีชื่อว่า HTTP (Hypertext Transfer Protocol) ซึ่ง Protocol นี้คือรากฐานที่สำคัญของความเป็นอินเทอร์เน็ตเลยล่ะ และแน่นอน Domain Name ชื่อที่เราพิมพ์เข้าไปเพื่อเปิดเว็บก็เป็นส่วนหนึ่งในนี้ด้วยเช่นกัน (HTTP เป็น Protocol ที่วิ่งอยู่ข้างบน TCP/IP อีกทีหนึ่ง)
จุดประสงค์ของ Protocol นี้จริงๆ มันเกิดขึ้นมาเพื่อใช้สื่อสารกันระหว่าง Web Server และ Web Client มันก็จะมีคำสั่งที่ใช้กันประจำ เช่น GET เอาไว้เปิดขอข้อมูล ซึ่งจะยิงผ่านไปทาง URL และ POST เอาไว้ยิงข้อมูลจาก Client ไปหา Server เพื่อให้เก็บข้อมูล ซึ่งจะไม่แสดงบน URL ทำให้สามารถส่งอะไรใหญ่ๆ ขึ้นไปได้ นอกจากนั้นยังมีอีกหลายๆ คำสั่งซึ่งไม่ได้เกี่ยวกับเรื่องที่จะเล่า
ที่เขาเรียกว่า Hypertext เนี่ย ก็เป็นเพราะว่า มันสื่อสารได้มากกว่าแค่ข้อความ Text ไงล่ะ อย่างที่บอกไปข้างบนว่า เวลาอยากเปิดเว็บอะไร เราพิมพ์ชื่อเว็บลงไป เรากด Enter เราได้ข้อมูลกลับมา เบื้องหลังจริงๆ มันมีการจัดข้อมูลของเราก่อนจะส่งเพื่อให้เป็นมาตรฐานตาม HTTP ก่อนส่งให้ Web Server แล้วก็ตอบกลับมาแสดงผลให้เราเห็น
ดังนั้นองค์ประกอบหลักๆ ของ HTTP จึงมี 3 ส่วน คือ URL ว่าจะเอา Resource อะไรจาก Web Server ตามมาด้วย Request ว่าจะแนบอะไรไปให้ Web Server บ้าง ตัวอย่างที่ชัดเจนมากคือ Cookie ซึ่งเดี๋ยวจะเล่าให้ฟังทีหลัง แล้ว Web Server ก็จะตอบกลับมาด้วย Response ว่ามีข้อมูลอะไรกลับมาให้แสดงผล เอาไปใช้งาน หรือคำสั่งต่างๆ ให้ Web Browser ทำงานอย่างที่ต้องการ
ทุกๆ การเข้าเว็บหนึ่งหน้า ก็จะต้องเกิด HTTP Request อย่างน้อย 1 ครั้ง Request แรกนี้เราเรียกมันว่า Document ที่เป็นไฟล์ HTML หลักของหน้านั้น หลังจากนั้นจะมีรูปภาพ มีเนื้อหาอะไรต้องโหลดเพิ่มเติม ก็จะเกิด HTTP Requests รัวๆ หลังจากนั้น บางเว็บเราเปิดทีเกิดเป็นร้อย Requests ต่อครั้ง
ก่อนจะจบ HTTP ผมอยากแถมเรื่อง HTTPS สักหน่อย เนื่องจาก HTTP มันสื่อสารโดยไม่เข้ารหัส เวลาสื่อสารจึงถูกแอบอ่านข้อมูลได้ ไม่ปลอดภัยอย่างมาก โดยเฉพาะเวลาต้องส่ง Username Password หรือข้อมูลสำคัญไปบนเว็บไซต์ จึงมีการเอา Protocol อื่นมาครอบมันอีกครั้งเพื่อเข้ารหัสข้อมูล เราเรียกมันว่า TLS ซึ่งผมคงไม่ลงรายละเอียด แต่เอาเป็นว่า มันจะทำการเข้ารหัสข้อมูล HTTP ของเราทั้งขาไปขากลับด้วยกุญแจที่ปลอดภัย ทำให้ข้อมูลที่สื่อสารออกไปนั้นเป็นความลับระหว่าง Client และ Server เท่านั้น ดังนั้นเวลาเข้าเว็บให้สังเกตหน่อยว่า เรากำลังใช้ HTTPS อยู่หรือเปล่า ถ้าไม่ ดูดีๆ ถ้าจะกรอกข้อมูลอะไรลงไปในเว็บนั้น การสื่อสารเป็นกระแสไฟฟ้า เราอาจมองไม่เห็น เหมือนปลอดภัย แต่ความจริง ผู้ให้บริการ หรือผู้ไม่หวังดีที่รู้จักเรื่องพวกนี้ดีมากพอ สามารถเปิดอ่านข้อมูลของเราได้สบายมาก ถ้าไม่มั่นใจ อย่ากรอกข้อมูลให้ไปจะดีกว่ากรอกไปแล้วข้อมูลรั่ว เกิดความเสียหายในภายหลัง
Server/Client
แอบพูดถึง Server และ Client ไปก่อนที่จะอธิบายถึง แน่นอนเราจะย้อนกลับมาอธิบายให้รู้จักกัน
อย่างที่ผมได้เล่าไปแล้วว่า ความจริงอินเทอร์เน็ตความจริงแล้วมันก็เป็นแค่เครือข่ายของคอมพิวเตอร์ที่เชื่อมต่อกันทั่วโลก คำถามก็คือ แล้วพวกเว็บไซต์ต่างๆ มันถูกเก็บเอาไว้ที่ไหนล่ะ ซึ่งความก็อยู่บนเครื่องพิวเตอร์เนี่ยแหละ เครื่องที่เราเรียกว่าผู้ให้บริการ หรือ Server เจ้าคอมพิวเตอร์ตัวนี้เนี่ยจะต้องต่อกับอินเทอร์เน็ตด้วย Public IP Address เพื่อให้คนอื่นๆ บนอินเทอร์เน็ตเข้ามาใช้งานได้ เรามักจะวางเครื่อง Server ไว้ที่อินเทอร์เน็ตแรงๆ สมัยก่อนก็เอาไปตั้งกันไว้ที่ ISP หรือ Data Center ที่มีเครื่องคอมพิวเตอร์เย็นๆ ตั้งเรียงรายกันในห้องแอร์ น่าจะเคยเห็นภาพกันมาบ้าง แต่ยุคนี้เข้าสื่อยุคของ Cloud แล้ว ผู้ให้บริการจะจัดการการตั้งเครื่องเหล่านี้ให้กับเรา แล้วแบ่งทรัพยากรเล็กๆ น้อยๆ จากเครื่องที่แรงแสนแรงมาให้เราใช้งาน จนหลังๆ นี่แทบจะไม่ต้องตั้งเครื่องละก็ใช้งานได้ ซึ่งมันจะลึกไปหน่อยสำหรับบทความนี้ ถ้าใครสนใจตามไปอ่านกันต่อได้ที่เรื่อง Server & Application Deployment History
ส่วน Client หรือเครื่องลูก หรือผู้ขอใช้บริการ ก็คือคอมพิวเตอร์ที่เราเอาไว้ใช้ต่ออินเทอร์เน็ตเข้าไปเปิดเว็บไซต์นั่นเอง สำหรับฝั่ง Website เนี่ย เราใช้ตัวแทนคนหรือโปรแกรม Web Agent ซึ่งซึ่งเราเรียกกันว่า Web Browser ซึ่งก็มีหลากหลายยี่ห้อ เช่น Internet Explorer ที่ไม่ยอมหมดไปจากโลกเสียที, Edge ที่พยายามมาแทนที่ IE แต่ฝันยังอีกไกล, Google Chrome ยอดนักบริโภคแรม, Firefox ความเสรีที่ลู่เข้าสู่ความอ้างว้าง, Safari ผู้เดียวดายจากค่ายผลไม้ ความจริงมีเจ้าอื่นๆ อีกมากมาย สุดท้ายมันก็เอาไว้เปิดเว็บเนี่ยแหละ โดยไส้ในของมันก็คือการสื่อสารด้วย HTTP แล้วเอาข้อมูลมา Render แสดงให้ผู้ใช้เห็นนั่นเอง
Web Site
เว็บไซต์คืออะไร เว็บไซต์ก็คือสิ่งที่คุณเข้ามาอ่านเนี่ยล่ะ เว็บนี้ชื่อ spicydog.org ส่วนหน้าที่คุณอ่านอยู่ เราเรียกมันว่า Web Page เว็บไซต์คือ Web Pages หลายๆ หน้ามารวมกัน มีการลิงค์ข้อมูลต่างๆ เข้ามาหากัน ส่วนหน้าแรกของเว็บไซต์ที่เปิดขึ้นมา โดยไม่มี / ต่อท้าย เราเรียกมันว่า Home Page หรือหน้า Index ของเว็บไซต์
ความจริงเว็บไซต์ก็ไม่ได้มีอะไรมาก มันก็เป็นแค่ไฟล์ข้อมูลที่ถูกเก็บเอาไว้บนเครื่อง Web Server รอให้มี Client เรียกมาขอข้อมูล แล้วก็ส่งไฟล์ที่เขาต้องการกลับไปให้ หน้าที่ของโปรแกรมเมอร์ก็คือการสร้างเจ้าไฟล์พวกนี้ให้อยู่ในรูปแบบที่พร้อมเปิดให้บริการ ทำให้มันลิงค์เข้าหากันได้ และจับมันยัดขึ้นไปไว้บนเครื่อง Server นั่นเอง
เครื่อง Server ที่เอาไว้เก็บไฟล์เว็บไซต์ เรานิยมเรียกมันว่าเครื่อง Hosting ซึ่งก็คือเครื่อง Web Server ที่ได้กล่าวไปก่อนหน้านี้นั่นเอง สมัยก่อนฝึกทำเว็บใหม่ๆ การหา Free Hosting ไว้ฝากเว็บนี่เป็นหัวใจสำคัญในการพัฒนาความรู้เลย แต่เดี๋ยวนี้เข้ายุค Cloud แล้ว ใครมีพื้นฐานดีหน่อย ใช้ Linux เป็น ไปสมัคร Free tier มีเครื่องดีๆ ให้ใช้งานกันได้ฟรีๆ น่าอิจฉาเด็กสมัยนี้ชะมัด 😏
เอาล่ะ คุยกันมาเยอะแล้ว ได้เวลาเขียนโปรแกรมกันแล้ว ต่อไปเราจะมาดูกันว่า เว็บไซต์ประกอบด้วยอะไรบ้าง จะสร้างเว็บไซต์ขึ้นมาสักอัน ต้องรู้จักอะไร แต่ละอย่างมีไว้ทำไมกัน แล้วมันเชื่อมโยงกันจนขึ้นมาเป็นเว็บไซต์ที่สวยงามได้อย่างไรกัน!
Web Development
เอาล่ะ มาถึงส่วนที่หลายๆ คนน่าจะตั้งใจมาอ่านกัน นั่นก็คือ แล้วถ้าจะทำเว็บขึ้นมาสักเว็บ จะต้องรู้อะไรบ้าง ซึ่งต้องขออภัยไว้ก่อนเลยว่าผมคงจะไม่ลงลึกมากนักในบทความนี้ แต่อย่างน้อยบทความนี้ก็น่าจะช่วยให้ผู้ที่เพิ่งเริ่มได้เห็นภาพรวมเป็นอย่างดี
โดยพื้นฐานแล้ว การทำเว็บก็คือการเขียนโปรแกรมชนิดหนึ่งแหละ เว็บที่ว่าเนี่ย มันมาจาก www หรือการเขียนโปรแกรมให้มันเข้ากันได้กับโลกอินเทอร์เน็ตนั่นเอง ดังนั้นเป้าหมายของการเขียนโปรแกรมนี้มักจะมีจุดประสงค์เพื่อ เผยแพร่ข้อมูลให้ผู้อื่นเข้ามาใช้งานได้ผ่านทางอินเทอร์เน็ต
อ่อ ก่อนจะไปต่อ การทำเว็บ เราไม่จำเป็นต้อง Coding เสมอไป มันมีเครือมือง่ายๆ ให้ใช้งานเยอะแยะไปหมด แต่การพัฒนาเว็บไซต์ที่ผมจะเล่าต่อไปนี้ คือการพัฒนาเว็บไซต์แบบ Coding เป็นเรื่องเป็นราวนะครับ
เวลาเราเขียนโปรแกรม เราจะต้องรู้ว่า เราจะเขียนโปรแกรมไปรันที่ไหน บางทีเขียนให้รันบน Windows บ้าง Mac บ้าง Linux บ้าง หรือบนโทรศัพท์มือถือที่เป็น Android หรือ iOS การเขียนโปรแกรมนี่ก็แตกต่างกันไป เพราะแต่ละระบบปฏิบัติการก็มีวิธีการรันโปรแกรมที่ต่างกันออกไป
แล้วการเขียนเว็บ เขียนโปรแกรมให้ไปรันที่ไหนล่ะ?
ส่วนใหญ่ถ้าพูดถึงทำเว็บแล้ว เรามักจะพูดถึงเขียนเพื่อให้รันได้บน Web Browser หรือทางฝั่ง Front end หรือทางฝั่งของเครื่อง User แต่ความจริงแล้ว เบื้องหลังไส้ในนั้นอยู่ที่ฝั่ง Hosting ที่อยู่บนอินเทอร์เน็ต หรือที่เรียกว่า ฝั่ง Back end ซึ่งแต่ละฝั่งก็มีความเฉพาะในแบบของมัน ซึ่งเดี๋ยวผมจะพาตะลุยไปทีละฝั่ง ไปลุยกันเลย
Front end Web Development
การพัฒนาเว็บไซต์ขึ้นมาในฝั่งนี้ คือการเขียนโปรแกรมให้มันขึ้นไปรันได้บน Web Browser ซึ่งทุก Web Browser จะพยายามทำตามมาตรฐาน W3C เพื่อให้สามารถแสดงผลได้เหมือนกัน ซึ่งผมค่อนข้างแนะนำให้ลองฝึกเขียนดูได้ มันง่ายมากๆ แล้วก็เห็นภาพดีด้วย การเริ่มพัฒนาเว็บควรเริ่มจากตรงนี้เนี่ยล่ะ
ส่วนประกอบของการพัฒนาเว็บในฝั่ง Front end นี้ ไม่เคยเปลี่ยนแปลงมาตั้งแต่โบราณกาล ได้แก่ HTML, CSS และ JavaScript ทั้ง 3 ภาษานี้เป็นภาษาที่ใช้สำหรับสั่งงาน Web Browser ให้ Render ภาพขึ้นมาบนหน้าจอให้ผู้ใช้เห็น โดยหลักการทำงานนั้นจะมี HTML เป็นไฟล์หลักไฟล์แรกที่โหลดขึ้นมา จากนั้นไฟล์ HTML นั้นจะมีเขียนบอก Web Browser เอาไว้ว่า จะต้อง Render หน้าเว็บออกมาอย่างไร จะต้องโหลดไฟล์อะไรมาใช้งานเพิ่มเติมบ้าง เพื่อที่จะแสดงเว็บไซต์ให้ได้อย่างที่ต้องการ ทีนี้ล่ะ เราจะเจาะลึกลงไปต่อว่า แต่ละภาษามันสำคัญอย่างไร
Hypertext Markup Language (HTML)
ไฟล์หลักของหน้าเว็บ เจ้าไฟล์นี้เป็นโครงกระดูกของหน้าเว็บ
สิ่งที่เขียนใน HTML นั้น จะอยู่ในรูปของ <tag> เปิด และ </tag> ปิด โดยแต่ละ tag นั้นก็จะมีคุณสมบัติของมันอยู่ เช่น เป็นหัวข้อ เป็นย่อหน้า เป็นบล็อคไว้ใส่ข้อความ เป็นตาราง อะไรก็ว่าไป การเอา tag มาวางต่อกันเป็นชั้นๆ ก็คือการบอก Web Browser ว่า หน้าเว็บที่เปิดอยู่นี้ มีโครงสร้างเป็นอย่างไรนั่นเอง
ส่วนวิธีการพัฒนานั้นก็ง่ายมากๆ ความจริงเปิดโปรแกรม Notepad ขึ้นมา แล้วก็เขียน Code ลงไป แล้วก็เซฟเป็นไฟล์ .html จากนั้น ก็เปิดใช้งานได้เลยผ่านทาง Web Browser ง่ายสุดๆ ไปเลย
Cascading Style Sheets (CSS)
ภาษาสำหรับแต่งสวยแต่งงามให้กับหน้าเว็บ เปรียบเสมือนการเอาผิวหนัง (CSS) ไปแปะทับบนโครงกระดูก (HTML) นั่นเอง
การใส่สี จัดวางตำแหน่ง ขนาดต่างๆ ถึงแม้ความจริงแล้ว HTML เองก็ทำได้ แต่การทำบน CSS จะช่วยให้สามารถจัดการบริหารได้มากยิ่งขึ้น เพราะเราสามารถบอกว่า ให้ตัวหนังสือบนหน้าเว็บทั้งหน้า ขนาดเท่านี้ หนาเท่านี้ เป็นสีนี้นะ ภายในคำสั่งเดียว แทนที่จะต้องไปเขียนใน HTML วนซ้ำหลายๆ รอบ
ส่วนการเขียน CSS นั้น จะต้องมีโครง HTML เป็นพื้นอย่างที่บอกไป จากนั้นก็อ้างถึง tag ต่างๆ บนหน้าเว็บ HTML ผ่านทางสิ่งที่เรียกว่า CSS Selector แล้วอยากจะได้ Property อะไรก็เขียนต่อลงไปในนั้นเลย
JavaScript (JS)
ภาษาที่ทำให้เว็บไซต์มีชีวิตขึ้นมา ภาษานี้คอยสั่งการให้ Element ต่างๆ บนเว็บไซต์ สามารถมีปฏิสัมพันธ์กับผู้ใช้ได้ เช่น เมื่อถูกคลิก ให้ทำ Action อะไรต่อไป หรือแสดงผลบางอย่างตามเงื่อนไขที่ซับซ้อนได้
การเขียน JS นั้น นับเป็นการเขียนโปรแกรมจริงๆ จังๆ แล้ว เพราะจะมี Logic ในการควบคุม Element ต่างๆ มีการสร้างตัวแปร มีการคำนวณค่า มีการทำเงื่อนไขต่างๆ ไปจนถึงการออกแบบโครงสร้างที่ซับซ้อนมากๆ ซึ่งเดี๋ยวจะเล่าให้ฟังทีหลังว่าเกิดอะไรขึ้น (มันบ้าบอมากๆ เลยบอกไว้ก่อน)
ซึ่ง JS ก็สามารถอ้างอิง Element ที่จะควบคุมผ่านทาง HTML ได้ด้วย เพื่อใช้ดึงข้อมูลออกมา หรือใช้แสดงผลลัพธ์ให้กับทางผู้ใช้
อ่อ แล้วก็ JavaScript ไม่ได้มีความสัมพันธ์อะไรกับภาษา Java นะครับ อย่าเอาไปตีกันเด็ดขาด มันคนละเรื่องคนละราวกันเลย แค่ชื่อคล้ายกันเฉยๆ
ทีนี้แหละ พอเรารู้จักภาษาทั้ง 3 นี้ เราก็สามารถเริ่มพัฒนาเว็บไซต์ให้เปิดขึ้นมาใช้งานได้ในเครื่องแล้ว ถ้าจะเอากันจริงๆ ก็คือ สร้างโฟลเดอร์ขึ้นมาสักอัน เข้าไปสร้างไฟล์ชื่อ index.html แล้วก็เริ่มพัฒนาจากตรงนั้นได้เลยครับ จะต่อไฟล์ CSS ต่อไฟล์ JS เข้าไป ก็สร้างเอาไว้ในโฟลเดอร์เดียวกันนั้นล่ะ
สำหรับคนที่จะเริ่มฝึกเขียน HTML/CSS/JS สามารถเข้าไป W3Schools ได้เลย ในตอนต้นนั้นไม่ยากเลยลองเข้าไปเรียนรู้กันได้
Web Front End Revolutions
เรื่องหนึ่งที่ผมอยากจะเล่าก็คือ สมัยนี้คอมพิวเตอร์เร็วขึ้นมากๆ แล้วจากยุคที่เราเพิ่งมี www ส่วน applications ที่มาให้ใช้ก็มาความซับซ้อนขึ้นเรื่อยๆ ยุคแรกๆ เราใช้แค่เผยแพร่งานต่างๆ ต่อมาเริ่มมากระดานถามตอบ เกิดกลายเป็น Social Network ที่ซับซ้อน มีโปรแกรมแผนที่ไว้นำทางให้ใช้ ไปจนกระทั่งเอามาใช้ลงโปรแกรมมือถือก็ยังได้
นี่คือวิวัฒนาการของ Web Browser ที่พัฒนาขึ้นมาอย่างมาก เกิดมาตรฐานต่างๆ ขึ้นมานับไม่ถ้วน ทั้ง HTML5, CSS3, ES, PWA ขยายขอบเขตของเว็บไซต์ให้กลายเป็น Application ที่อยู่ภายใต้ Web Browser อีกทีหนึ่งได้อย่างสมบูรณ์ ตอนนี้จึงกลายเป็นว่า แค่เรามีอินเทอร์เน็ตและ Web Browser ก็เพียงพอแล้วสำหรับการใช้งานคอมพิวเตอร์ทั่วไป
ซึ่งเมื่อมันซับซ้อนมากขึ้นมาแล้ว การพัฒนาก็ยิ่งทำยากขึ้นไปด้วย ก็เลยเกิดการพัฒนาเครื่องมือสำหรับใช้พัฒนาโปรแกรมทางฝั่งนี้ขึ้นมาอย่างต่อเนื่อง สำหรับ JS Frameworks ชื่อดังตอนนี้ก็น่าจะหนีไม่พ้น React, Vue, Angular และยังมีค่ายอีกๆ อีกนะ นักพัฒนาก็สามารถเรียนรู้ Frameworks เหล่านี้เพื่อช่วยให้การพัฒนาเว็บไซต์ที่ซับซ้อนสามารถทำได้ง่ายมากขึ้น (แน่นอน Learning Curve สำหรับการเข้าวงการก็ยิ่งสูงขึ้นตามไปด้วยเช่นกัน)
ดังนั้นการประมวลผลอย่างมากจึงถูกย้ายมาอยู่ทางฝั่ง front end มากขึ้น แต่ไม่ว่าอย่างไร จะเขียนด้วยภาษาอะไร ท่าไหน หรือ Frameworks อะไร ท้ายที่สุดสิ่งที่เขียนก็ถูก Compile กลับมาเป็น HTML, CSS, JS อยู่ดี
Back End Web Development
หลังจากพอเห็นภาพแล้วว่า เว็บไซต์มันขึ้นมาโผล่บน Web Browser ได้อย่างสวยงามได้อย่างไร ทีนี้สงสัยบ้างไหมว่า แล้วใครส่งไฟล์ HTML/CSS/JS ให้กับ User ของเราล่ะ แต่บอกได้เลยว่า User ไม่ได้มาเปิดโฟลเดอร์ในเครื่องที่เรากำลังพัฒนาอยู่อย่างแน่นอน
คนที่คอย Serve ไฟล์ฝั่ง Front end ให้กับ Web Browser นั้นก็คือ Web Server นั่นเอง
เราจะต้องเอาไฟล์ของเรา ไปเก็บไว้บนโปรแกรมเฉพาะชนิดหนึ่งที่เรียกว่า Web Server โดยหน้าที่ของมันคือการเปิดสื่อสารผ่านทาง Protocol HTTP ให้ทางฝั่ง Web Browser สามารถ Connect เข้ามาได้ (สังเกตดูถ้าเราเปิดไฟล์ index.html จากข้างในเครื่องเรา มันจะขึ้นบน Address Bar ว่า file:// แต่ถ้าเราเปิดผ่านทาง www มันจะขึ้นว่า http:// Scheme ที่เห็นนั่นคือสิ่งที่บอกว่าเปิดข้อมูลผ่าน Protocol อะไร)
ก็อย่างที่ได้เล่าไปแล้วเช่นกันว่า Web Server นี่ จะถูกเก็บไว้บน Web Hosting โดยเราเอาไฟล์ไปเก็บไว้บนนั้น แล้วมันก็จะค่อยส่งไฟล์ให้กับ User ที่ต่อเข้ามาหาทางอินเทอร์เน็ต ผ่านทาง HTTP
Web Server ที่ Serve แค่ไฟล์ HTML/CSS/JS โดยไม่มีการเปลี่ยนแปลงนั้น เราเรียกมันว่า Static Web หรือเว็บไซต์ที่แน่นิ่ง ไม่มีการเปลี่ยนแปลงข้อมูล แต่โลกความจริงก็เป็นอย่างที่เราเห็น Website ที่เราเข้าไป มันมีการเปลี่ยนแปลงได้ ข้อมูลต่างๆ แสดงผลอิงตามผู้ใช้แต่ละคน ผู้ใช้สามารถบันทึกเรื่องราวของตัวเองไปเก็บเอาไว้ได้ ซึ่งสิ่งนี้เราเรียกว่า Dynamic Website และนี่แหละที่การทำ Back End Web Development นั้นซับซ้อน
Database
ฐานข้อมูลนั้นสำคัญไฉน? โลกคอมพิวเตอร์ความจริงแล้วมีแค่ 2 อย่างที่คุณต้องรู้ หนึ่งคือ มันประมวลผลได้ สองคือ มันเก็บข้อมูลให้คุณได้ ฐานข้อมูลเป็นโปรแกรมชนิดหนึ่งที่ถูกพัฒนาขึ้นมาเพื่อเก็บข้อมูลจำนวนมาก และสามารถดึงข้อมูลที่ต้องการออกมาใช้งานได้อย่างรวดเร็ว ซึ่งส่วนใหญ่จะใช้ RDBMS ที่ใช้ภาษา SQL ในการดึงข้อมูลออกมา
ข้อมูลของผู้ใช้บริการทั้งหมด จำเป็นจะต้องมีที่เก็บ และส่วนใหญ่เราก็เก็บกันในฐานข้อมูลเนี่ยแหละ แต่เราจะสามารถให้ผู้ใช้เห็นข้อมูลของผู้ใช้คนอื่นๆ ได้หรือไม่ คำตอบส่วนใหญ่ก็คือ ไม่ เราต้องปกป้องข้อมูลของผู้ใช้แต่ละคน ไม่ให้เข้าถึงได้จากคนที่ไม่ควรจะเห็นได้ คนที่ควบคุมการเข้าถึงข้อมูลก็คือคนทำ back end development นั่นเอง
ประเภทของฐานข้อมูลนั้นก็มีหลายแบบ ถ้าสนใจอยากศึกษาข้อมูลเพิ่มเติมเกี่ยวกับการเก็บข้อมูลบนคอมพิวเตอร์ ผมแนะนำให้ตามไปอ่านบทความนี้ที่ผมเคยเขียนเอาไว้ครับ Data Engineer กับทักษะที่ต้องมี โจทย์ เครื่องมือ และความท้าทายที่ต้องเจอ
Back End Programming
แล้วทำ Back end ใช้ภาษาอะไรเขียนได้บ้าง ในขณะที่อีกฝั่งนั้นมี HTML, CSS, JS ตายตัว แต่ทางนี้ถ้าจะให้พูดกันตรงๆ ก็คือ ใช้ภาษาอะไรก็ได้ที่มันตอบกลับไปเป็น HTTP ได้ แต่ภาษาที่นิยมกันหน่อยตอนนี้ก็อย่างเช่น NodeJS, Python, Java, .NET C#, PHP, Go, และอื่นๆ อีกเยอะมากๆ
โปรแกรมที่เขียนนั้นเพื่อใช้รันบนฝั่งของ Server นั่นเอง นั่นคือการตอบคำถามว่า front end เขียนขึ้นมา แล้วต่อขึ้นมาหาใคร ก็ต่อขึ้นมาหาทาง back end เนี่ยล่ะ
ความเป็นจริงแล้วจะมองให้มันเรียบง่ายก็คือ ฝั่ง back end ก็คือเป็นคนไปประมวลผล ดึงข้อมูล ออกมาจาก Database แล้วก็ส่งไปให้ front end ใช้งานต่อ อาจจะ Generate ออกมาเป็น HTML ทั้งหน้า หรืออาจจะส่งทาง AJAX ไปเป็น JSON ให้ front end โลกใหม่เขาเอาไป Render แสดงผลให้ผู้ใช้เห็น
แต่แล้วทำไมถึงบอกว่ามันซับซ้อนล่ะ?
สมมุติเราเขียน front end ถ้าโปรแกรมเราซับซ้อนมากๆ ต้องใช้พลังงานประมวลผลมาก เครื่องที่ประมวลผลคือเครื่อง User ที่มาเปิดเว็บของเรา ถ้าเปิดกันพันเครื่อง แต่ละเครื่องก็ไปประมวลผล ของใคร ของมัน
แต่ฝั่ง back end นั้นตรงกันข้าม เพราะ front end จากทุกหนแห่งเรียกมาหาเครื่อง server ที่เดียว แล้วเครื่อง server จะต้องทำการประมวลผลส่งที่ user ต้องการ ส่งกลับไปให้เขา ถ้า user เข้ามาพันคนพร้อมกัน ก็ต้องประมวลผลพันครั้งพร้อมกันบนเครื่องเดียว นี่ไงล่ะ เวลาเว็บล่มเพราะคนเข้าเยอะ ก็เพราะแบบนี้เนี่ยล่ะ
แต่มีทางแก้ ทางแก้ก็คือ การขยายเครื่องในแนวตั้ง เพิ่ม CPU เพิ่ม RAM เข้าไป เครื่องจะได้แรงๆ ให้บริการคนได้จำนวนมากได้ แล้วถ้าคนเข้ามาเป็นล้านคนพร้อมกัน อย่างเว็บ Facebook เว็บ Google ล่ะ คอมพิวเตอร์จากสวรรค์ก็เอาไม่อยู่ เราจำเป็นต้องขยายในแนวนอน เอาเครื่องหลายๆ เครื่องมาต่อบน Network เดียวกัน ช่วยกันทำงานให้ทันที่ผู้ใช้ Request เข้ามา
ขยายเครื่องสำหรับรัน App แนวนอนแล้ว ปัญหาที่ตามมาอีกก็คือ ไม่สามารถเก็บไฟล์บนแต่ละเครื่องได้แล้ว เพราะว่าถ้า User เข้ามาครั้งแรกที่เครื่อง A แล้วบันทึกไฟล์ไว้บนนั้น กลับมาอีกครั้งที่เครื่อง B มาตามหาไฟล์นั้นก็จะหาไม่เจอแล้ว ดังนั้นการเก็บข้อมูลก็ต้องเปลี่ยนไป ต้องไปเก็บบน Blob Storage ที่เป็น Network และกลุ่มของเครื่อง Server อีกประเภท
ฝั่ง Database ก็ไม่น้อยหน้า ฝั่ง App อาจจะเขียนขึ้นมาให้รันพร้อมกันได้เป็นพันเครื่อง แต่มาทึ้งเครื่อง Database เครื่องเดียวก็ย่อมไม่รอด ก็จำเป็นต้องเปลี่ยนไปใช้ Database ที่รอบรับการขยายในแนวนอนด้วยเช่นกัน ก็จำเป็นต้องสร้าง Database Cluster ขึ้นมาใช้งาน
พอทุกอย่างขยายในแนวนอนได้แล้ว ปัญหาต่อมาก็คือการต้องมาคอยจัดการบริหาร Servers ต่างๆ วันไหนเครื่องล่ม จะแก้ยังไง Network Database ตัด ข้อมูลไม่ Sync กัน จะจัดการยังไง
โชคดี สมัยนี้มี Cloud มีผู้เชี่ยวชาญขั้นนำของโลกคอยดูแล ออกแบบระบบสถาปัตยกรรมพวกนี้ให้เราใช้กันง่ายๆ เพียงแค่มีเงินจ่าย แต่ง่ายที่ว่าเนี่ย ก็ยังต้องใช้เวลาศึกษาเครื่องมือต่างๆ วิธีการใช้งาน วิธีการเอามันมาต่อกัน ซึ่งมีรายละเอียดและวิธีการที่ผมว่าก็ไม่ง่ายอยู่เหมือนกันนะ (ยากกว่าทำเองเครื่องเดียว แต่ง่ายกว่าถ้าเราจะต้องบริหารหลายๆ เครื่อง)
นี่ยังไม่นับถึงการต้องออกแบบ Database ให้ดี ให้มัน Query ให้เร็ว ประหยัดพลังการประมวลผล จะได้ให้บริการผู้ใช้ได้อย่างรวดเร็ว
ไหนจะเรื่องการออกแบบการทำ Caching เพื่อเก็บข้อมูลที่เคยประมวลผลเอาไว้แล้วให้พร้อมถูกนำมาใช้ซ้ำอีกครั้ง ซึ่งเมื่อรวมกับการทำขยายเครื่องในแนวนอนแล้ว ก็จะเกิดปัญหาเรื่อง Cache Invalidation ระดับหลายเครื่อง ซึ่งจัดเป็นหนึ่งในปัญหาที่ยุ่งยากที่สุดในการพัฒนาโปรแกรม
ที่ผมเล่ามาเนี่ยไม่ได้จะยกว่า back end มันเหนือกว่า front end แต่อย่างไร เพียงแต่บอกให้เข้าใจว่า ทำไมเขาถึงบอกว่า การทำ web back end ถึงได้ถูกกล่าวว่ามันซับซ้อนนัก อย่างไรก็ดี ผมอยากจะบอกว่า ทางฝั่ง front end ทุกวันนี้แม่งก็โคตรซับซ้อนไม่ได้แพ้กันเลย ตั้งแต่มี webpack เกิดขึ้นมา โลก web front end development ก็พลิกจากหน้ามือเป็นหลังตีนในสายตาของผม แล้วเดี๋ยวผมอยากให้รอดู WebAssembly อีกอย่าง มารอชมกันว่า โลก web front end development จะเปลี่ยนไปขนาดไหน 😉
Cookies
ในโลกความเป็นจริง Cookie เป็นของกิน แต่ในโลกคอมพิวเตอร์นั้น Cookie ไม่ได้เกี่ยวอะไรกันเลย
ที่ผมดึง Cookie ขึ้นมาเล่าในที่นี้ก็เพราะว่า มันเป็นคำศัพท์ที่ทุกคนน่าจะได้เห็นกันบ่อย และบ่อยมากขึ้นเรื่อยๆ เพราะเรื่อง Data Privacy แล้วมันเกี่ยวอะไรด้วยล่ะ? แล้ว Cookie คืออะไร?
Cookie แท้จริงแล้ว เป็นไฟล์เล็กๆ ที่ Web Browser จะเก็บเอาไว้ และแนบไปกับทุก Request ที่ส่งไปหา Back end โดย Content ข้างในไฟล์นั้น มักจะเก็บข้อมูลว่า ผู้ใช้คนนี้คือใคร เคยเข้าเว็บมาแล้วหรือยัง เพื่อเอาไว้ใช้ระบุตัวตนของผู้ใช้ จะแสดงข้อมูลให้เหมาะสมกับผู้ใช้แต่ละคน และใช้ติดตามผู้ใช้เพื่อเก็บข้อมูลการใช้งาน
ด้วยเหตุนี้การที่เราส่ง Cookie ไปให้ Back end จึงเป็นดาบ 2 คม คมที่หนึ่งก็คือ เพื่อใช้บริการให้ได้อย่างเต็มที่ ส่วนอีกคมก็คือ การยอมให้ผู้ให้บริการได้เก็บบันทึกการใช้งานของเรา
ซึ่งหลังๆ มานี้มีการ Concern เกี่ยวกับความเป็นส่วนตัวมากขึ้น เว็บไซต์ต่างๆ จึงต้องถามผู้ใช้ว่าจะให้อนุญาตในการใช้งาน Cookie หรือไม่ เราจึงได้เห็นคำเตือน คำถาม เหล่านี้ เต็มไปหมด
Git
สิ่งหนึ่งที่สำคัญมากสำหรับการพัฒนาโปรแกรมแต่มักจะมองข้ามกันคือ Version Control Software
Version Control คือโปรแกรมที่เอาไว้ช่วยเก็บ ช่วยจัดการบริหาร Source Code ของโปรแกรมที่เราเขียนขึ้นมา ลองคิดดูเล่นๆ ซิว่า ถ้าโปรแกรมของเรา มี Code เป็นหมึ่น เป็นแสน บรรทัด ถ้าคอมพิวเตอร์ที่ทำงานอยู่วันดีคืนดีมีอันเป็นไป เปิดไม่ขึ้นขึ้นมา จะทำอย่างไร แล้วหรือมีเพื่อนร่วมงานสักสิบคน พัฒนาโปรแกรมเดียวกันนี้ จะทำงานกันอย่างไร คนหนึ่งทำส่วนหนึ่ง อีกคนดันไปแก้ไอ้ตรงนั้นอยู่แล้ว แล้วตอนเซฟ มันจะชนกัน Code ของใครจะอยู่ ของใครจะไป เรื่องพวกนี้จำเป็นต้องมีเครื่องมือสำหรับการจัดการบริหาร
ความจริง Version Control มีหลายตัวมาก แต่ที่ผมเลือก Git ก็เพราะทุกวันนี้เขาย้ายมาใช้ Git กันหมดแล้ว มันกลายเป็นมาตรฐานโลกไปแล้ว โปรแกรมเมอร์ทุกคนจะต้องใช้ Git เป็น ถ้าใช้ไม่เป็น ให้ไปเรียนเดี๋ยวนี้เลย ไม่งั้นคุณไปไหนไม่ได้ไกลแน่นอน การพัฒนาเราทำกันเป็นทีม Source Code ที่แบ่งปันทุกวันนี้ก็ทำผ่านทาง Git ทั้งนั้น นี่เป็นทักษะที่จำเป็น นี่เป็นสิ่งที่คุณควรจะมีก่อนเริ่มเขียนโปรแกรมเป็นเสียอีก!
Web Application Deployment
หัวข้อสุดท้ายที่จะเล่าในนี้คือการนำโปรแกรมที่พัฒนาขึ้นมาขึ้นไปอยู่บนอินเทอร์เน็ต ซึ่งอย่างที่ได้เล่าไปก่อนหน้านี้แล้วว่า ถ้าเราจะเอาเว็บขึ้นไปไว้บนอินเทอร์เน็ต เราก็ต้องมี Web Hosting ก่อน แต่ความจริงวิธีการส่งโปรแกรมขึ้นไปรันนั้นมีหลายแบบมาก แต่ผมขอแบ่งคร่าวๆ ดังนี้ก่อน
Static Website
Static Website ก็คือเว็บไซต์ที่มีแต่ส่วนของ Front end เนื่องจากมันไม่ได้เปลืองทรัพยาอะไรมากมายนักสำหรับการ Host เว็บไซต์ประเภทนี้ (ยกเว้นเรื่อง Storage และ Traffic) จึงมีบริการโฮสเว็บพวกนี้ฟรีหลายแหล่งอยู่
ที่ผมใช้อยู่ประจำคือ GitLab ที่ให้บริการ GitLab Pages เนื่องจากเราพัฒนาโปรแกรมแล้วก็เอาไปเก็บบน Git อยู่แล้วอะนะ เราก็แค่สั่งให้ GitLab ช่วยเอา Source Code ตรงนี้ขึ้นไปโฮสให้หน่อย ซึ่งก็จะได้เว็บมาใช้งานเลยสบายๆ
นอกจากนั้นเรายังสามารถเอา Domain Name ของเราไปผูกได้ด้วย สำหรับสายมือปืนรับจ้าง พัฒนาเว็บไซต์ขาย ถ้าย้ายมาใช้ Solution อาจจะไม่ต้องเสียค่า Hosting อีกต่อไปเลยทีเดียว ลองตามไปดูรายละเอียดกันได้ที่นี่ถ้าสนใจ ทำเว็บไซต์ด้วย Hugo แล้วโฮสกันฟรีๆ บน GitLab Pages และ Cloudflare
ความจริงมีบริการอย่างนี้อีกหลายเจ้านะครับ พวก Cloud เจ้าใหญ่ก็มี Blob Storage ให้ใช้ ไม่ยาก และราคาไม่แพง ทำได้เหมือนกัน
Dynamic Website
ถ้าเว็บไซต์เรามีฝั่ง back end เป็นเรื่องเป็นราว ทีนี้แหละต้องหา Hosting ใช้งานเป็นชิ้นเป็นอันละ
เขียน PHP หรอ ใช้ Shared Host ซิ ราคาแสนถูก ของฟรีก็มี
จุดหนึ่งที่ไม่มีใครเอาชนะ PHP ได้เลยก็คือเรื่องความแพร่หลายของโฮส เนื่องจาก PHP ถูกออกแบบมาให้เครื่องหนึ่งเครื่องสามารถโฮสให้บริการผู้ใช้หลายๆ ได้อย่างง่ายดาย นอกจากนั้นการใช้งานก็เพียงแค่เอาไฟล์ไปวางไว้ ก็ใช้งานได้แล้ว เราจึงสามารถหา Web Hosting ที่เป็น PHP มาใช้ได้อย่างง่ายและราคาถูกมากด้วย ฟรีก็เยอะแยะนะ
วิธีการใช้งานนั้นก็แสนง่าย เพียงแค่ FTP เอาไฟล์ที่พัฒนาขึ้นไปวาง แล้วก็เปิด URL Path ที่ถูกกำหนดเอาไว้บน Hosting เพียงเท่านี้ก็เรียบร้อย แต่นี่ไม่ใช่ท่าปรกติที่ Professional ยุคนี้เขาทำกัน
ตั้ง Server ขึ้นมาใช้เองเลย
วิธีการที่ตรงไปตรงมาที่สุดก็คงหนีไม่พ้นการตั้งเครื่องขึ้นมาใช้งานเอง เดี๋ยวนี้เราย้ายไปใช้ Cloud กันหมดแล้ว ก็สามารถตั้งเครื่อง VM ขึ้นมา แล้วก็ Remote SSH เข้าไป Setup Runtime Environment ให้พร้อมสำหรับการใช้งานได้เลย ที่เหลือก็แค่เอาโปรแกรมลงไปวางแล้วรัน
ใช้ Platform as a Service (PaaS) ซิ
อีกหนึ่งทางเลือกที่น่าสนใจมากๆ เลยคือการใช้บริการ PaaS ผู้ให้บริการกลุ่มนี้จะมีโครงโปรแกรมให้เราไว้แล้ว เราเพียงลอกโครงนั้นลงมา พัฒนาต่อขึ้นไปเป็นโปรแกรมของเรา แล้วก็เซฟกลับขึ้นไป ระบบก็จะเอาโปรแกรมของเราไป Deploy และ Run ให้โดยอัตโนมัติ โดยที่เราไม่จำเป็นต้องจับเครื่อง Server แต่อย่างไร
ตัวอย่างบริการที่เป็นที่นิยมและผมชอบมากๆ เลยก็คือ Heroku ซึ่งมีหมวดให้ใช้งานฟรีด้วย เอาไว้โฮสโปรแกรมเล็กๆ ที่ใช้งานส่วนตัวได้ง่ายๆ ไม่ต้องปวดหัวกับการมาตั้ง มาดูแล Server
ใช้ Container as a Service (CaaS) ซิ
เทคโนโลยีหนึ่งที่ได้รับความนิยมสูงมากเลยตอนนี้ก็คือ Container ที่เจ้าตลาดคือ Docker ที่หลายๆ คนน่าจะรู้จักหรือไม่ก็เคยผ่านหูกันมาบ้าง
เทคโนโลยี Container คือการ Pack Runtime Environment พร้อมกับโปรแกรมที่เราจะใช้รันไปเป็นสิ่งที่เรียกว่า Image เปรียบเสมือนการเอาโปรแกรมเราทำเป็นไฟล์ .exe แล้ว Copy ไปรันบนเครื่องโน่นเครื่องนี้
ทีนี้หลังจากเราได้ App Image มาแล้ว (มันจะอยู่ในรูปของ URL) เราก็แค่เอาไป Config ไว้ในบริการ CaaS เหล่านี้ มันก็จะรันโปรแกรมของเราขึ้นมา พร้อมกับ URL สำหรับเข้าไปใช้งาน
บริการที่ผมชื่นชอบและใช้เยอะมากๆ เลยตอนนี้ก็คือ Google Cloud Run บริการเหล่านี้เราไม่ต้องจับเครื่อง Server อีกแล้วเช่นกัน ทางฝั่ง Cloud เป็นคนไปจัดหาเครื่องมาหาเรา ส่วนเราก็จ่ายเงินตามเวลาที่เครื่องถูกรันขึ้นมาใช้งานจริง เวลาเราไม่ใช้เครื่อง Cloud Provider ก็เอาเครื่องไปให้บริการคนอื่น ส่วนเราก็ไม่ต้องจ่ายเงิน เรียกว่าแฟร์กับทุกฝ่าย ส่วนเวลาเข้าใช้งานเยอะมากๆ ความจริงก็ไม่ได้แพงไปกว่าการตั้ง Server ขึ้นมารันโหลดเลย
ใช้ Container Orchestration ซิ
สำหรับสายแข็ง อาจจะอยากสร้าง Cluster สำหรับจัดการ Container ขึ้นมาใช้งานเอง เพื่อจะได้มี Control อย่างเต็มที่ ซึ่งโปรแกรมที่ได้รับความนิยมสูงสุดตอนนี้ก็คงหนีไม่พ้น Kubernetes (K8S) นั่นเอง
แต่เส้นทางนี้มี Learning Curve ค่อนข้างสูงมาก แม้ว่าทุกวันนี้ Cloud Provider จะมีบริการ Managed Kubernetes ให้ใช้กันแล้ว การ Config เอา Container ขึ้นไปรันก็ยังไม่ใช้เรื่องที่มือใหม่จะเอาอยู่ ต้องอาศัยความรู้ความเข้าใจเยอะมาก
แต่ที่ผมยกขึ้นมาเล่าให้ฟังก็เพราะว่านี่เป็นสิ่งที่ส่วนใหญ่ Platform ขนาดใหญ่จะใช้งานกัน เพราะว่าอย่างน้อยนี่ก็จัดการง่ายกว่าการต้อง Remote เข้าไปควบคุมเครื่อง VM แต่ละเครื่อง เพราะเจ้า Orchestration นี่จะดูแลให้หมดเลย ตั้งแต่เรื่อง Scaling เพิ่ม ลด จำนวนเครื่อง ไปจนถึง Network การทำ Load Balancing ต่างๆ
การทำ Automation
เรื่องสุดท้ายของของการทำ Deployment ก็คือ ความจริงแล้วการทำงานจริงๆ เพื่อให้สะดวกสบายมากขึ้น เราได้มีการทำขั้นตอนการ Testing การ Deploy โปรแกรมให้เป็นอัตโนมัติ คือการเขียนโปรแกรมให้ทุกๆ ครั้งที่มีการ Commit ขึ้นไปบน Git ให้มันรัน Script เหล่านี้โดยอัตโนมัติ ผลลัพธ์สุดท้ายคือการที่โปรแกรมถูกเอาไปรันโดยคนไม่ต้องเข้าไปยุ่งเลย ทำให้นักพัฒนาทำงานได้อย่างสะดวกสบายอย่างหาที่สุดมิได้
คนที่มีหน้าที่ในการพัฒนา Script เหล่านี้ เราเรียกเขาว่า DevOps ซึ่งผมก็เคยได้เขียนบทความเอาไว้ (อีกแล้ว ขายของเก่าไม่หยุดสักที 555) ถ้าสนใจว่า DevOps คือใคร ทำงานอะไรบ้าง สามารถตามเข้าไปอ่านได้ที่ DevOps คืออะไร นำมาประโยชน์ได้ยังไง และตัวอย่างการทำ DevOps ที่ Credit OK
เทคโนโลยีการทำเว็บจะไม่หยุดเพียงเท่านี้
ประวัติศาสตร์ของมนุษยชาตินั้นความจริงแล้วช่างสั้นนักเมื่อเทียบกับอายุขัยของโลก แต่ก็ไม่น่าเชื่อว่าเราสามารถสร้างอารยธรรมขึ้นมาได้อย่างรวดเร็วถึงเพียงนี้ เราเพิ่งจะมีไฟฟ้าและหลอดไฟดวงแรกใช้กันเมื่อประมาณ 100 กว่าปีก่อน หลอดไฟที่เปลี่ยนวิถีชีวิตมนุษย์จากกลางคืนอันมืดมึดให้กลายเป็นช่วงเวลาอันสว่างไสว ส่วนคอมพิวเตอร์ที่เราใช้กันตามบ้านก็เพิ่งเกิดขึ้นมาเมื่อประมาณ 40 ก่อนเท่านั้น และในขณะที่เครือข่ายอินเทอร์เน็ตที่โยงใยคอมพิวเตอร์ทั่วโลกเข้าด้วยกันมีอายุเพียงแค่ประมาณ 30 ปี
แน่นอนว่า HTML,CSS,JS นั้นเกิดหลังจากนั้นอีก และ Docker, Kubernetes, Vue, React, Webpack ที่เราใช้พัฒนาเว็บไซต์สมัยใหม่กันนี้อายุยังไม่ถึงทศวรรษเสียด้ายซ้ำ แต่ถูกนำมาใช้งานอย่างแพร่หลายทั่วโลกในเวลาอันสั้นนัก เพื่อใช้สร้างสรรค์เว็บไซต์ให้ผู้คนสามารถสื่อสารหากันได้ไม่ว่าจะอยู่มุมไหนของโลกได้ภายในชั่วเวลาเพียงชั่วเพียงพริบตา
ความสำเร็จของ www ย่อมเป็นที่ประจักษ์แก่สายตาของมนุษย์ทั่วโลกถึงคุณประโยชน์ที่มากมายเกินคณานับ แล้วผมก็เชื่อมั่นอย่างยิ่งว่า เครื่องไม้เครื่องมือที่เกี่ยวข้องกับการพัฒนาเว็บไซต์จะถูกสร้างสรรค์ จะถูกพัฒนาต่อยอดขึ้นมาอีกมาก ผ่านทางฝีไม้ลายมือของนักพัฒนาหลายล้านชีวิตทั่วโลก ที่จะช่วยให้การทำเว็บไซต์สามารถทำสิ่งที่มันไม่เคยทำได้ ให้เป็นจริงขึ้นมาได้ เพื่อที่โลกนี้ หมุนเร็วขึ้น เร็วขึ้น ขึ้น ขึ้น ไปอีก 🙂
จบแล้วครับผม ขอบคุณมากที่อ่านมากันจนถึงตรงนี้ (หรือจะเลื่อนข้ามมาอ่านก็เถอะ 555) สำหรับท่านใดที่มีคำถาม มีคำแนะนำ มีข้อติชมต่างๆ มีเรื่องอยากเล่า มาเรื่องอยากคุย ก็สามารถพูดคุยกันได้ผ่านทางช่อง Comment ข้างล่างเลยนะครับ ส่วนบทความนี้ ผมก็ขอจบเอาไว้เพียงเท่านี้ แล้วกลับมาพบกันใหม่ในโอกาสหน้า สวัสดีครับ..
