การพัฒนาความคิดด้วย flowchart EP. 1
จากพาร์ทที่แล้วที่ผมมักจะพูดถึงการพัฒนา Logic เป็นสิ่งสำคัญในการเขียนโปรแกรม (สำหรับคนที่ยังไม่เคยอ่านบทความอันเก่า เริ่มต้นจากตรงนี้เลยก็ได้ครับเพราะว่าพาร์ทนี้จะเป็นจุดเริ่มต้นตั้งแต่ศูนย์จริง ๆ) ก่อนที่จะเริ่มแนะนำการพัฒนา Logic ผมขอกล่าวถึงความสำคัญของมันก่อนนะครับ
ที่มา: https://www.pexels.com/photo/man-sitting-in-front-of-three-computers-4974915/
Q : ทำไมการพัฒนา Logic ถึงสำคัญมากๆ
A : เพราะว่าการทำงานของคอมพิวเตอร์ไม่ได้ทำงานเหมือนสมองหรือความคิดของเรา การทำงานของคอมพิวเตอร์จะมีการทำงานที่เป็นขั้นเป็นตอน ซึ่งบางทีเราก็ไม่ได้คิดแบบหุ่นยนต์หรือโปรแกรม ดังนั้น เราเลยต้องรู้จักการเป็นหุ่นยนต์นั่นเองครับ แหะ ๆ
Q : แล้วจะพัฒนายังไง?
A : อันนี้จริง ๆ มันก็พูดยากนะครับ เพราะมันมีหลายวิธีมาก ๆ บางคนก็เริ่มจากการเขียนโปรแกรมเลย โดยฝึกทำโจทย์ Programming หรือฝึกพวก Algorithms (กระบวนการแก้ปัญหาที่มีรูปแบบขั้นตอน) หรือการทำ Flowchart ซึ่งในพาร์ทนี้ผมจะเริ่มจาก Flowchart ครับ
Flowchart คืออะไร
Flowchart คือ แผนผังรูปที่ใช้แสดงความคิดและกระบวนการในการทำงาน ง่าย ๆ คือมันคล้าย Mind mapping แต่มีการแสดงเป็นลำดับขั้นตอน ซึ่ง Flowchart มันจะมีหลายแบบหลายเวอร์ชั่นมาก ๆ โดยของผมจะเอาแบบเบสิคสุด ๆ เนื่องจากเราต้องจำความหมายของรูปและกระบวนการการเขียน ซึ่งมันยาวและหลากหลายมากครับ ยิ่งพวกเวอร์ชั่นใหม่ ๆ นี่อะไรก็ไม่รู้ (ขอบ่นหน่อย) ดังนั้น ผมจะเอาแบบอันที่มีรูปหรือเครื่องหมายน้อยสุดเพื่อที่จะได้จดจำง่าย เพราะอย่าลืมนะครับ พาร์ทนี้เราแค่มาฝึกพัฒนาตรรกะกันเฉย ๆ โดยตัวที่ผมจะใช้คือ Flowchart raptor
หน้าตาจะประมาณนี้
STEP 1 : เลื่อนลงมาเลยครับจะเจอ DOWNLOAD lastet version เห็นแล้วคลิกเล้ย!
STEP 2 : ดาวน์โหลดเสร็จ กดโปรแกรมที่โหลดมา แล้วกด Next ไปเรื่อย ๆ เพื่อติดตั้ง
Step 3 : หลังดาวน์โหลดเสร็จแล้ว ถ้าเราไม่ได้ตั้งค่า Folder ที่จะเก็บไฟล์ ตัวไฟล์มันจะไปอยู่ใน C:\Program Files (x86)\RAPTOR
Step 4 : คลิก Program raptor ที่เป็นตัว Application สำหรับคนที่ไม่รู้ ดูจากชื่อ Type ครับ ในที่นี้คือตัวล่างสุดที่มีไอคอน Raptor ตรง Type จะเป็นชื่อประเภท Application ครับ
Note : สำหรับคนที่หาไม่เจอ ให้กดปุ่ม Window แล้วลองพิมคำว่า Raptor ดูนะครับ
เมื่อคลิกเข้าโปรแกรมหน้าตาจะประมาณนี้
ซึ่งส่วนที่เป็น Symbols กับ Main จะเอาไว้สร้าง Flowchart ครับ ส่วนตรง Masterconsole จะมีไว้แสดง input และ output (การรับข้อมูลกับผลลัพธ์เมื่อโปรแกรมส่งคำสั่งออกมา)
ก่อนที่เราจะไปช่วงสัญลักษณ์ ผมอยากให้เรารู้เรื่องอย่างหนึ่งก่อน
การที่โปรแกรมจะดำเนินการต่อไปได้ เราต้องมีตัวแปร (ตัวเก็บค่าที่เราต้องการแสดงไว้) ยกตัวอย่างเช่น หากเราต้องการให้โปรแกรมพิมค่า 5 ออกมา เราสามารถทำได้เลยโดยไม่ต้องมีตัวแปร แต่ถ้าเราต้องการเอาค่า 5 ไปเปรียบเทียบแล้วเอาไปทำไรสักอย่างเราต้องมีตัวแปร (เหมือนคณิตศาสตร์เลยครับอย่างถ้า X = 5 และ Y = 6 แล้ว Y – X = เท่าไหร่ อะไรแบบนี้) โดยตัวแปรเนี่ย เราจะตั้งชื่อมันว่าไรก็ได้ จะ X,Y,Z หมูหมากาไก่อะไรก็ได้แต่ไม่ควรเป็นตัวเลข ถามว่าทำไม? ไว้ผมจะลงรายละเอียดทีหลังนะครับ ถ้าจะเอาเป็นตัวเลขจริง ๆ ก็ขอให้ใส่หลังตัวอักษรครับ เช่น X_1 หรือ X2 เป็นต้น
โดยทั่วไปทางคณิตศาตร์ เวลาเราเขียนตัวแปรเราจะเขียนว่า X = 5 (หมายถึง X มีค่าเท่ากับ 5) แต่เซย์โนเลยครับ ทางโปรแกรมมันไม่ได้หมายความว่างั้นครับ มันหมายความว่าเอาค่า 5 ใส่ไปที่ X ต่างหาก (ถ้าเป็น Flowchart ของ Raptor จะเป็น x <- 5)
*ข้อควรระวัง* การเขียนตัวแปรนั้น ตัวใหญ่กับตัวเล็กมีความหมายต่างกันเพราะงั้นต้องระวังการใส่ตัวแปรด้วยนะ!
สัญลักษณ์ (Symbols)
ก่อนที่เราจะเริ่มการฝึกหรือลองเขียน Flowchart เราต้องรู้จักสัญลักษณ์คร่าว ๆ กันก่อนครับ มาเริ่มกันเลย
ASSIGNMENT : การให้ค่าตัวแปร (เหมือนเป็นกล่องบอกความคิด)
Input : เป็นการรับค่าจากตัว keyboard นี่แหละครับ
OUTPUT : เป็นคำสั่งที่เราอยากให้โปรแกรมแสดงผลลัพธ์ออกมาทางหน้าจอ
CALL : จะเป็นเหมือน Function (เหมือนเราเอากระบวนการคิดไปสร้างเป็นกล่อง ๆ หนึ่ง แล้วส่งค่ากลับมาผ่านตัวแปร ทำให้การเขียน code/flowchart หลักไม่ยาวมากและอ่านง่ายขึ้น โดยถ้าเราเป็นคนอ่านก็ไม่จำเป็นต้องรู้ว่าเราคิดมาได้ไง แต่รู้ว่ามันทำอะไรได้ ซึ่งส่วนนี้ผมจะอธิบายแบบละเอียดยิบทีหลังนะครับ)
Selection : ตามชื่อเลยครับ เป็นการเลือกเปรียบเทียบ ถ้าใช่ไปทางซ้าย ไม่ใช่ไปทางขวา
Loop : การทำวนซ้ำโดยมีเงื่อนไข ถ้าไม่ตรงเงื่อนไขก็กลับมาทำซ้ำ ถ้าตรงก็ไปต่อเงื่อนไขอื่น
โดยการทำงานทั้งหมดนี้ จะเริ่มจาก Start ไป Stop หรือบนลงล่างนะครับ (ทั้งนี้ แล้วแต่ Flowchart ด้วยนะ)
เข้าสู่ Tradition การเขียนโปรแกรม / Flowchart
โดยพาร์ทนี้ ผมจะแสดงการทำงานแค่ input - output เท่านั้นนะครับ ส่วนอันอื่นรอติดตามกันพาร์ทหน้านะครับ ยาวไปเดี๋ยวผู้อ่านเหนื่อยกันซะก่อน
ก่อนอื่นต้องเปิดโปรแกรมก่อน
ในส่วนนี้ลองลาก input/output มาใส่ตรงลูกศรข้างล่าง Start ดูนะครับ (ถ้ามันขึ้นให้ save ก็อย่าลืม save ก่อนนะครับ)
จะได้ประมาณนี้
ลอง double click ตรง input
จะมีหน้าจอแบบนี้ขึ้นมา
จะมีไอเจ้านี่ออกมา โดยที่ข้างบน (Enter prompt Here) คือข้อความที่จะแสดงออกมา อันนี้ลองเขียนไรก็ได้ครับ (เช่น “input” อย่าลืมใส่ “ ” ด้วยนะไม่งั้นโปรแกรมมันจะคิดว่าเป็นตัวแปร) ถ้าไม่รู้จะใส่อะไร ก็ใส่ “” ไว้ก็ได้ครับ ถือว่าเป็นการไม่แสดงข้อความ ส่วนข้างล่างช่องเล็ก ๆ (Enter variable here) จะเป็นการใส่ค่าตัวแปร
โดยที่นี้ผมใส่ชื่อข้อความว่า input ส่วนตัวแปรคือ X โดย input นี้ รับค่า (GET) ไปไว้ที่ X
หลังกดDone ตัว input จะเปลี่ยนไป
ต่อไปลอง double click output ดูจะขึ้นหน้าจอแบบนี้ครับ
ต่อไปลอง double click output ดูจะขึ้นหน้าจอแบบนี้ครับ
โดยตรงส่วน Enter output here คือ จะทำการแสดงผล ซึ่งทำได้หลายแบบ (แบบตามตัวแปรหรือตามคำสั่งของเรา) ในที่นี้ ผมจะให้มันแสดงตามตัวแปรก่อนนะครับ (แสดงข้อมูลของตัวแปร X (put))
หลังกด done หน้าตาจะประมาณนี้
ทีนี้ลองกดเครื่องหมายเล่น หรือ CTRL+F5
ถ้าทุกอย่างถูกต้องเมื่อ run แล้วจะมีกล่องค่า input แบบในรูปทางขวามือออกมาให้เราลองใส่ Hello world ดูครับ
หลังกด Enter แล้ว ด้านซ้ายจะเห็นว่าตัวแปร X เก็บค่า “Hello world” อยู่ ส่วน MasterConsole จะเป็นการแสดงผลออกมาจากหน้าจอครับ
หาก RUN ไม่ได้
1. ลองเช็คส่วนของ input ว่าตรงส่วนแสดงข้อความนั้นมีการใส่ “ ” หรือไม่
2. ลองเช็คตัวแปรของ input/output ว่าเป็นตัวเดียวกันไหม (พิมพ์ใหญ่พิมพ์เล็กให้ผลแตกต่างกัน อย่าลืมนะ!)
ก็จบไปแล้วนะครับกับพาร์ทนี้ ถ้าหากลองแล้ว Run ไม่ได้สามารถ Comment สอบถามได้นะครับ หากผมอธิบายไม่ถี่ถ้วน ตกหล่นหรือไม่เข้าใจแสดงความคิดเห็นไว้ข้างล่างได้เลยครับ ผมจะได้เอาไปปรับปรุงให้ทุกคนเข้าใจมากขึ้น
สำหรับพาร์ทหน้า ผมจะมาอธิบายการทำงานเพิ่มเติมครับ ทั้งในส่วนของ Assignment กับ call จากนั้นก็ตามด้วย selection และจบด้วย loop ครับ สำหรับคนที่ขี้เกียจรอบทความของผม สามารถเรียนรู้ด้วยตัวเองผ่านทางช่อง youtube เลยครับ ซึ่งจริง ๆ ก็มีคนทำเป็นคลิปสอนยาวเลย ผมเองก็พึ่งรู้เหมือนกัน แหะ ๆ ผมจะแปะลิ้งค์ไว้ข้างล่างนะครับ (บอกก่อนว่าไม่ใช่ช่องของผมนะ! ผมเห็นว่าดี เลยเอามาบอกต่อครับ ไม่ได้ค่าแอดใด ๆ ทั้งสิ้น) เจอกันในพาร์ทหน้านะครับ สวัสดีครับ!
- 1
ดูเพิ่มเติมในซีรีส์
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2025 Blockdit
