แนะนำเว็บ Glitch

ในบทก่อนหน้า เราได้ลองใช้ JavaScript Console ในการคำนวณตัวเลขแบบเบื้องต้นดูแล้ว แต่บางที อยู่กับแค่หน้า console อย่างเดียวมันอาจจะไม่ค่อยสนุกเท่าไหร่ เพราะเราจะทำได้แค่เสกคาถาทีละบรรทัดสองบรรทัด

ในบทนี้เลยอยากจะพามาลองสร้าง web application กันดูครับ จะได้สร้างของที่เป็นชิ้นเป็นอัน ที่เราสามารถใช้เอง หรือแชร์ให้เพื่อนๆ ใช้ได้ด้วย

โดยเราจะใช้เว็บ Glitch ที่เป็นเว็บที่ให้เราสร้าง web application ได้ง่ายๆ กันครับ

Glitch คืออะไร

• Glitch.com เป็นเว็บที่ช่วยให้เราสร้าง web application ได้ง่ายๆ บนเว็บนี้มีโปรเจกต์ตัวอย่างต่างๆ ให้ลองเล่นดู และถ้าเจอโปรเจกต์ไหนที่อยากใช้เป็นต้นแบบ ก็สามารถกด “Remix” เพื่อเอาโปรเจกต์นั้นมาต่อยอด สร้างเป็นโปรเจกต์ใหม่ของเราได้เลย

• ผมลองกด Remix โปรเจกต์ที่ชื่อ “Glitch in Bio” ดู

  

• เมื่อกดปุ่ม Remix แล้ว ก็จะเจอกับหน้า “Editor” ของ Glitch ที่ข้างในประกอบไปด้วยสองส่วนหลักๆ:

  1. รายชื่อไฟล์ต่างๆ ที่อยู่ในโปรเจกต์
  2. ตัว Editor ที่เอาไว้ใช้แก้ไขเนื้อหาในไฟล์ที่เลือก

  

• อ่านดูในไฟล์ README.md ก็จะเห็นว่าโปรเจกต์นี้เป็นเว็บที่เอาไว้สร้าง Links Page ของตัวเอง ในนี้เขียนไว้ว่า ให้ลองกด Preview ตรงข้างล่างแล้วเลือก Preview in a new window ดู…

  

• เมื่อกดแล้ว ก็จะมีแท็บใหม่โผล่ขึ้นมา

  

• โปรเจกต์แต่ละโปรเจกต์ใน Glitch จะมีลิงก์ URL เป็นของตัวเอง เราสามารถ copy URL ของโปรเจกต์นั้นๆ ไปแชร์ให้เพื่อนๆ ดูได้ ซึ่งจะมีประโยชน์ในช่วงที่เราเรียนรู้มากๆ โดยเฉพาะเวลาที่เราติดปัญหา เราสามารถส่งลิงก์ไปให้คนอื่นเข้ามาดูโค้ดของเราได้เลย

• หรือถ้าเลือก Open preview pane ก็จะเห็นผลลัพธ์ทางด้านขวาแทนครับ:

  

  ข้อจำกัดของ preview pane

  เวลาแสดงตัวอย่างเว็บใน preview pane ด้านขวา ฟังก์ชันบางอย่างบนเว็บเราอาจจะใช้งานไม่ได้ เวลาพัฒนาเว็บด้วย Glitch จึงแนะนำให้ใช้คำสั่ง “Open in a new window” แทนครับ

• กลับมาทีไฟล์ README… ในนี้เขียนไว้ด้วยว่า ให้ลองไปแก้ไฟล์ที่ชื่อ settings.json แล้วใส่ข้อมูลของตัวเองเข้าไปดู

  

• พอลองไปที่ไฟล์ แล้วแก้ไขข้อความ รอสักพักนึงก็จะเห็นการเปลี่ยนแปลงตรงด้านขวาครับ

  

  เรียนรู้เพิ่มเติม

  ถ้าสนใจเรียนรู้เพิ่มเติมเกี่ยวกับโปรเจกต์นี้ ลองไปอ่านบทความ “ทำ links page ของตัวเองแบบง่ายๆ ด้วย Glitch in Bio” ของคุณ MikkiPastel ได้ครับ

• จะเห็นว่าตรงด้านซ้าย โปรเจกต์นี้มีไฟล์อะไรก็ไม่รู้เต็มไปหมดเลย เราสามารถลองไปดู และเข้าไปแก้แต่ละไฟล์ดูได้ แล้วก็สังเกตดูว่าพอแก้แล้วเกิดผลลัพธ์อะไรขึ้นบ้าง ถ้าแก้แล้วมันพังก็ไม่เป็นไร สามารถ undo หรือลอง Remix โปรเจกต์ใหม่ได้เลยครับ

• แต่สำหรับคอร์สนี้ เราจะมาลองสร้าง web application ขึ้นมาใหม่เองจากหน้าเปล่าๆ กันครับ

  สร้างแอคเคาท์ใน Glitch

  ก่อนจะไปต่อขอแนะนำให้สร้างแอคเคาท์ใน Glitch ครับ และล็อกอินด้วยครับ เพราะว่าถ้าไม่ล็อกอิน โปรเจกต์ที่เราสร้างจะถูกลบโดยอัตโนมัติภายใน 5 วัน