เริ่มต้นเขียนโปรแกรมให้สนุกเหมือนเล่นเกม กับแอปพลิเคชัน Grasshopper
ก่อนอื่นต้องขอกราบสวัสดีพี่น้องแฟนเพลงทุกท่าน พ่าม! ผิดงาน!! สวัสดีอีกครั้ง และต้องเกริ่นกันก่อนเลยว่าเอาจริง ๆ แล้ว เราก็ไม่ได้เก่งการเขียนโค้ดจนขั้นเซียนเสียแต่อย่างใด มีเพียงแค่พื้นฐานมาทำงานจริงได้บ้าง แต่ในเมื่อการเขียนโค้ด หรือฟังก์ชันต่าง ๆ ก็มีหลากหลาย เพราะแต่ละคนมีการเขียนโค้ดที่เป็นลายเส้นในแนวของตัวเอง ซึ่งถือว่าแตกต่างกันออกไป เมื่อเราได้เห็นรูปแบบการใช้งานของแอปพลิเคชัน GRASSHOPPER ทำให้เราอยากทบทวนโค้ดอีกครั้ง และพอได้เล่นมาสักพักนึงแล้วรู้สึกว่า นี่มันน่าสนใจมาก ๆ เพราะถึงแม้ว่าคนที่ไม่มีพื้นฐานของการเขียนโค้ดเลย ก็สามารถทำได้ แถมทำได้ง่าย ๆ และสนุกเหมือนเล่นเกมไปพร้อมกับเจ้าตั๊กแตนเขียว ๆ ในแอปพลิเคชันนี้อีกด้วย
Grasshopper จะสอนพื้นฐานการเขียนโปรแกรมแบบพื้นฐาน ด้วยภาษา JavaScript เป็นหลัก ซึ่งนี่เป็นการสร้างพื้นฐานการเขียนโปรแกรมเพื่อนำไปเป็นพื้นฐานการเขียนโปรแกรมขั้นสูง หรือสามารถนำไปพัฒนางานตัวเองได้เลย ～
และผู้ที่หลงไหลการเขียนโปรแกรม แต่!! ไม่รู้ว่าจะเริ่มต้นยังไง เชิญทางนี้ เพราะเราจะมานำเสนอแอปพลิเคชัน “GRASSHOPPER” ชื่อที่แปลมาจากตั๊กแตน ซึ่งก็เป็นมาสคอตประจำแอปพลิเคชันนี้เอง การสอนก็จะเป็นแบบ Step by Step มีทดสอบเป็นด่าน ๆ ไป และมีการประมวลผลจากการเขียนโค้ดชัดเจน กับมีภาพกราฟิกช่วยให้ดูเข้าใจง่ายอีกด้วย แอปพลิเคชันบนโทรศัพท์มือถือที่ทาง Google พัฒนาขึ้นเพื่อให้ “ทุกคน” ได้เรียน และเขียนโปรแกรมผ่านโทรศัพท์มือถือได้ทุกที่ ทุกเวลา ให้ความสะดวกมาก ๆ และที่สำคัญยังฟรีอีกต่างหาก ว่าแต่ในเมื่อไม่มีความรู้อะไรมาก่อนเลย ไม่รู้ว่าตัวแปรไหนมีคำสั่งการทำงานยังไง คงอยากได้ How to คู่มือที่สั้น ๆ และง่ายสำหรับคุณกันใช่ไหม งั้นต่อหลังจากบรรทัดนี้ไป พูดเลยว่าต้องห้ามพลาด !!
ขั้นตอนแรก คือต้องโหลดก่อน— สำหรับตัวแอปพลิเคชัน สามารถเข้าไปโหลดฟรีได้ทั้ง Android และ iOS ลองเข้าไปดาวน์โหลดได้ที่
Grasshopper : Learn to Code for Free (Android) และ Grasshopper by Area 120 (iOS)
- เริ่มต้นการใช้งานโปรแกรม Grasshopper —ดาวน์โหลดเสร็จ เมื่อเปิดแอปพลิเคชันมาก็จะเจอหน้าจอที่แสดงผลแบบนี้ หน้านี้เราสามารถลงชื่อเข้าใช้ด้วย Google ได้เลย แต่ถ้าใครมีบัญชีอยู่แล้วไปที่ Get Started
2. ลงทะเบียน — เมื่อเราลงทะเบียนเข้าใช้เสร็จแล้ว ก็จะเจอแบบนี้ แล้วคลิก Next เพื่อไปหน้าต่อไปได้เลย
3.เข้าสู่การเริ่มต้นสร้างโค้ด — ต่อไปก็จะเจอหน้านี้ สำหรับผู้เริ่มต้นให้ตอบว่า “Yes, I’m new to coding” โดยโปรแกรมจะอธิบายเรื่อง Coding ให้ผู้เล่นทำความเข้าใจก่อน ซึ่งเนื้อหาในนี้นอกจากจะเป็นการเขียนโค้ด ก็จะเป็นภาษาอังกฤษทั้งหมดมาให้เราได้เรียนรู้ศัพท์ภาษาอังกฤษอีกด้วยแหละ
4. START QUIZ ตอบคำถาม — หน้าต่อมาจะเป็นการเริ่ม QUIZ การตอบคำถามของแอปพลิเคชัน โดยข้อมูลหน้านี้ จะนำไปใช้ในการตอบคำถามเพื่อตรวจสอบความเข้าใจในเรื่อง Coding ของผู้เล่นนั่นเอง ไม่ต้องกลัวว่าจะตอบถูก หรือผิดนะ เพราะเป็นเพียงเเค่คำถามให้โปรแกรมเข้าใจว่าผู้เล่นมีความเข้าใจการเขียนโปรแกรมมากแค่ไหน เพราะสุดท้ายแล้วแอปพลิเคชันก็จะมีการเริ่มต้นจาก Level 1 เหมือนกัน ถ้าพร้อมแล้วก็กด START QUIZ เลย
5. START CODING — เมื่อตอบคำถามเสร็จหมดแล้ว หน้านี้ผู้เล่นจะเห็นว่าโปรแกรมได้บอกว่า คุณได้การเรียนรู้เกี่ยวกับโค้ดเป็นที่เรียบร้อยแล้ว จากนั้นมากด START CODING เพื่อเริ่มสู่การเขียนโปรแกรมใน Level 1 กันโลด!
6. คำอธิบายวิธีการเขียนฟังก์ชันโค้ด — ก่อนไปเริ่มต้นเขียนโปรแกรมนั้น แอปพลิเคชันก็จะมีการอธิบายฟังก์ชันตัวแปรของ Level 1 โดย Level นี้ จะให้ใช้คำสั่ง drawBox ( ) ซึ่งคำสั่ง drawBox นี้เรียกง่าย ๆ ก็คือกล่องนั้นเอง โดยวงเล็บสามารถให้เราพิมพ์สีใส่มาเติมไว้ใน ( ) เพื่อ add คำสั่งเรียกใช้สีได้เลย และใน Level 1 ก็มีการให้ใช้อยู่ 3 สี จะมีสีฟ้า, ขาว, แดง อ่านการใช้กันเสร็จ กด NEXT ไปเริ่มต้นเขียนโค้ดกันเลย
7. ตัวอย่างการแสดงโปรแกรม — ก่อนการเริ่มต้นเขียนโปรแกรม เราจะเห็นว่า มี EXAMPLE SOLUTION ตัวอย่างการแสดงผลที่เราต้องเขียนโค้ดให้แสดงผลออกมาตามตัวอย่าง โดยจะมีกล่องสีอยู่ 3 สี ต่อจากนี้ให้เรากด NEXT เพื่อเขียนโปรแกรมในบทเรียนจริงกันเถอะ
8. การเริ่มต้นเข้าสู่การเขียนโค้ด — หน้านี้เราจะเห็นตั๊กแตนกำลังยืนอยู่ นั่นคือบรรทัดของเราที่ต้องเขียนโค้ดให้ตรงกับสีด้านบน ถ้าพร้อมแล้วกด START PUZZLE ไปเลยออเจ้า
9. เขียนโค้ด — หน้านี้เราจะเห็นว่าโค้ดก่อนหน้านี้ ต้องใช้คำสั่ง drawbox (); โดยให้ใส่คำสั่งสีไปในวงเล็บ () เพื่อแสดงผลให้ออกมาตามสีตาม EXAMPLE ซึ่งเราจะเห็นว่ามี newLine(); นั่นคือคำสั่งการขึ้นบรรทัดใหม่นั่นเอง ในขั้นตอนนี้เรากดเขียนโค้ดตามปุ่มโค้ดที่มีได้เลย หรือผู้เล่นสามารถพับปุ่มโค้ดลง เเล้วพิมพ์คำสั่งเองก็ได้ หรือจะลองเขียนโดยใช้ตัวแปรให้สั้นลง อย่างเช่น อักษรย่อของสี อย่าง green ก็พิมพ์แค่อักษร ‘ggg’ ได้ ถ้าใครงงว่า เเล้วต้องเขียนโค้ดอันไหนก่อน ไม่ต้องวิตกไป เพราะ Level นี้ยังมีการสอนโดยจะเป็นเเถบข้อความให้กดโค้ดที่ถูกต้องอยู่ด้านข้าง หรือผู้เล่นจะดูตามโค้ดก่อนหน้านี้ก็ย่อมได้ ถ้าเขียนโค้ดเสร็จแล้ว ให้กด Run หรือปุ่ม Play สีเขียวด้านขวาเพื่อแสดงโค้ดของเราได้เลย ถ้าถูกต้องเจ้าตั๊กแตนก็จะโดดดึ๋ง ๆ ไปตามที่เราเขียน
10. Run Code — ถ้าเราเขียนโค้ดถูกต้อง เจ้าตั๊กแตนก็จะจุดพลุแล้ว Congrats! ให้ผู้เล่นกับการเริ่มต้นการเขียนโปรแกรมภาษา Javascript ครั้งแรก เมื่อการเริ่มต้นไปด้วยดีแบบนี้ ก็กด NEXT LESSON เข้าสู่บทเรียนต่อไปได้เลย
11. การช่วยเหลือ — ส่วนในบทเรียนถัด ๆ ไป ผู้เล่นจะได้เรียนรู้เรื่องราวที่ซับซ้อนมากขึ้น อย่างการเรียกฟังก์ชั่น ตั้งตัวแปร และโครงสร้างข้อมูล เช่น อาเรย์ และการใช้คำสั่ง LOOPS หรือการทำงานซ้ำ ซึ่งทั้งหมดก็จะเรียนรู้เป็นภาษา Javascipt สำหรับในบทเรียนที่สูงขึ้นก็จะมีความซับซ้อนมากขึ้นแต่ไม่ต้องกังวล เพราะหากไม่เข้าใจจริงๆ ก็สามารถคลิกเข้าไปขอความช่วยเหลือได้ที่ Stuck? Get help ก็จะมีคำอธิบายอย่างละเอียด
โดยเจ้าแอปพลิเคชัน Grasshopper ก็จะเป็นบทเรียนที่เริ่มต้นจากง่ายไประดับยาก ซึ่งโปรแกรมนี้ไม่ว่าจะเป็นคนที่มีพื้นฐานอยู่แล้วก็สามารถเข้ามาทบทวนกันได้ ส่วนคนที่ไม่มีพื้นฐานมาก่อน ก็สามารถเข้ามาเริ่มต้นเป็น Coding กันได้สนุก ๆ ซึ่งโปรแกรมนี้อาจจะไม่ได้ให้เราเขียนในรูปแบบทั้งหมดที่มีบนโลก แต่ตัวภาษา Javascript ในแอปพลิเคชัน Grasshopper จะมีฟังก์ชันที่หลัก ๆ ของการเขียนโปรแกรมมาให้เราเรียนรู้ และสามารถนำไปปรับใช้กับงานของเราเองได้
นอกจากแอปพลิเคชัน Grasshopper นี้ผู้เล่นคงได้เห็นแบบฝึกหัด และเกม โดยระหว่างการเรียนรู้ก็จะมีคำถามระหว่างบทเรียนสอดแทรกเป็นระยะ เพื่อทบทวนผู้เรียนว่ามีความเข้าใจในเรื่องที่เรียนรู้อยู่หรือไม่ แถมยังมีฟีเจอร์ที่ใช้ “เตือน” ให้ผู้ใช้เข้าเรียนบทเรียนใหม่ ๆ หรือจัดเตรียมโค้ดโปรแกรมที่เคยเรียนมาแล้ว ให้มันผ่านตาคุณเรื่อยๆ จนคุณสามารถจำได้ขึ้นใจเลยทีเดียว อ่านมาถึงตรงนี้แล้ว ลองดาวน์โหลด Grasshopper มาเล่นกันเถอะ ～
