บทที่ 1 การพัฒนาแอปพลิเคชัน

วทิ ยาการคานวณ ม.3
บทท่ี 1 การพัฒนาแอปพลเิ คชนั

1
ทบทวนความรูก้ อ่ นเรยี น

ใ น บ ท เ รี ย น นี้ นั ก เ รี ย น จ ะ ไ ด้ ท ร า บ ถึ ง
กระบวนการท่ีสาคัญในการพัฒนาแอปพลิเคชัน
รวมถึงตัวอย่างเครื่องมือท่ีสามารถนามาประยุกต์
ในการวางแผน ติดตาม และส่ื อสารกันระหว่างผู้
รว่ มพัฒนาไดส้ ะดวกและมีประสิทธภิ าพ

2
ทบทวนความรูก้ อ่ นเรยี น

การพัฒนาแอปพลิเคชั่น หรือซอฟต์แวร์
ค อ ม พิ ว เ ต อ ร์ นั้ น อ า จ ท า ไ ด้ โ ด ย ใ ช้ เ ค รื่ อ ง
คอมพิวเตอร์เครื่องเดียว ทาให้สามารถเร่ิมต้นได้
ง่ า ย แ ต ก ต่ า ง จ า ก ก า ร พั ฒ น า ผ ลิ ต ภั ณ ฑ์ ท า ง
วิศวกรรมอื่นๆ ท่ีต้องการแรงงานและเคร่ืองจักร
จานวนมาก เช่น การผลิตรถยนต์ ยานพาหนะ
ส่ิงกอ่ สรา้ งขนาดใหญ่

3
ทบทวนความรูก้ อ่ นเรยี น

อย่างไรก็ตาม แอปพลิเคชันนั้ นอาจมี
ความซบั ซอ้ นมาก ดังนั้ นการพัฒนาแอปพลิเคชั่น
ที่ดีต้องมีการวางแผนการดาเนิ นการอย่างเป็น
ร ะ บ บ โ ด ย เ ฉ พ า ะ อ ย่ า ง ย่ิ ง ใ น ก า ร พั ฒ น า
แอปพลเิ คชัน่ ทม่ี ีผู้ร่วมพัฒนาหลายคน ไม่เช่นนั้ น
อาจทาให้เกดิ ความลม้ เหลวได้

4
การพัฒนาแอปพลเิ คชนั

ก า ร พั ฒ น า แ อ ป พ ลิ เ ค ชั่ น ห รื อ
ผลิตภัณฑ์ทางซอฟต์แวร์นั้ น สามารถนา
กระบวนการทางวศิ วกรรมทใ่ี ชใ้ นการพัฒนา
ผลิตภัณฑ์ประเภทอ่ืนมาประยุกต์ใช้เพ่ือวาง
แผนการดาเนิ นงาน ซ่งึ มขี ั้นตอนทวั่ ไปดงั น้ี

5
ขั้นตอนการพัฒนาแอปพลเิ คชนั

1.การศึ กษาความต้องการ
2.การออกแบบ
3. การลงมือพัฒนา
4.การทดสอบ

6 ขั้นตอนการพัฒนาแอปพลเิ คชัน

1.การศึ กษาความต้องการ

แ อ ป พ ลิ เ ค ชั่ น ถู ก ส ร้ า ง ข้ึ น ต า ม ค ว า ม ต้ อ ง ก า ร แ ล ะ เ พื่ อ แ ก้ ปั ญ ห า
ของลูกค้าหรือผู้ใช้ ผู้พัฒนาต้องทราบความต้องการหรือปัญหาก่อน
ดาเนิ นการออกแบบ ซ่ึงจะได้ข้อกาหนดที่เป็นคุณสมบัติต่างๆ ของ
แอปพลิเคชั่น ซ่ึงเป็นขั้นตอนที่ต้องอาศั ยประสบการณ์ ของผู้พัฒนา
เพ่ือให้ได้ความต้องการของลูกค้าหรือผู้ใช้ท่ีแท้จริง เพราะอาจมีการ
ส่ือสารความต้องการทค่ี ลาดเคล่อื น

7 ขั้นตอนการพัฒนาแอปพลเิ คชนั

2.การออกแบบ

เป็นหัวใจสาคัญในการพัฒนาแอปพลิเคชั่น ซ่ึงค่อนข้างมีความ
ซับซ้อนและมีรายละเอียดจานวนมาก ต้องอาศั ยแนวคิดเชิงคานวณมา
ประยุกต์ใช้ในการออกแบบอย่างเป็นระบบ ผลจากการออกแบบจะได้
เป็นโครงร่างของแอปพลิเคชั่นท่ีมีส่ วนประกอบย่อยที่มีการกาหนด
หน้ าทกี่ ารทางานไว้

8 ขั้นตอนการพัฒนาแอปพลเิ คชนั

3. การลงมอื พัฒนา

ผพู้ ัฒนาหรอื โปรแกรมเมอร์ (programmer) ลงมือเขียนคาสั่งใน
ส่ วนประกอบย่อยท่ีได้ออกแบบไว้ ซ่ึงอาจพบข้อจากัดหรือข้อบกพร่อง
จากขั้นตอนการออกแบบ หรือขั้นตอนศึ กษาความต้องการ จึงเป็นเร่ือง
ปกตทิ ต่ี อ้ งยอ้ นกลับไปแกไ้ ขการออกแบบหรอื ศึกษาความต้องการ

9 ขั้นตอนการพัฒนาแอปพลเิ คชัน

4.การทดสอบ

เป็นการตรวจสอบคุณภาพของแอปพลิเคชัน่ เพ่ือค้นหาข้อผดิ พลาด
ที่มีอยู่ระหว่างท่ีแอปพลิเคชั่นทางาน และสร้างความมั่นใจแอปพลิเคชั่น
ทางานได้ถูกต้องและตรงความต้องการอย่างแท้จริง หากพบข้อผิดพลาด
ต้องทาการปรับปรุ ง แก้ไข และทดสอบซา้ เพ่ือไม่ให้เกิดข้อผิดพลาด
ระหวา่ งการใช้งานจรงิ ซ่งึ อาจทาให้เกดิ ความเสียหายอยา่ งรุนแรงตามมา

10
การพัฒนาแอปพลเิ คชนั

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

1

การวางแผนพัฒนา

2

การวางแผนพัฒนา

ในการพัฒนาแอปพลิเคชั่น แต่ละขั้นตอนมี
รายละเอียดทตี่ ้องจัดลาดับความสาคัญ ความเรง่ ดว่ น
เพื่อให้การจัดสรรทรัพยากรคนและเวลา เป็นไป
อย่างเหมาะสม รวมถึงต้องกาหนดบทบาทหน้ าที่
ผู้รับผิดชอบ และติดตามความก้าวหน้ าของการ
ดาเนิ นงาน หากละเลยขั้นตอนดังกล่าว มีความเสี่ ยง
ทท่ี าให้การพัฒนาแอปพลิเคชั่นเสร็จไม่ทันเวลา หรือ
มกี ารทางานบางอยา่ งไม่ตรงตามทอ่ี อกแบบไว้

3

การด์ คัมบงั

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

4

การด์ คัมบัง

อาจแบง่ ออกเป็น 3 เฟส คือ

To do Doing Done
เฟสท่ีจะทา เฟสท่กี าลงั ทา เฟสท่ีทาเสรจ็ แล้ว

5

การด์ คัมบงั

หากแอปพลิเคช่ันมีความซับซ้อนมาก อาจแยกกระดานออกเป็นหลาย
กระดานยอ่ ย เพื่อจัดการแต่ละเรอื่ งไดอ้ ย่างละเอียดย่ิงข้ึน เชน่ กระดานสาหรับการ
สารวจความต้องการผู้ใช้ การดานสาหรับการออกแบบแอพพลิเคช่ัน กระดาน
สาหรบั การพัฒนาแอปพลเิ คช่นั และกระดานสาหรบั การทดสอบ

6

การด์ คัมบงั

ตวั อยา่ งการแบง่ เฟสบนกระดานคัมบงั

7

การด์ คัมบัง

การใช้กระดานคัมบังเร่ิมจากการนาการ์ดท่ีระบุงานติดไว้ในเฟสแรก
ท่ีช่องซ้ายมือและย้ายมาทีละช่องทางขวาเพื่อแสดงถึงความก้าวหน้ าในการ
ทางานและสื่อสารให้ผู้รว่ มทมี ไดร้ บั ทราบท่วั กัน

To do Doing Done

• คาอธิบายรายละเอีย ด • คาอธิบายรายละเอีย ด
ของงาน ของงาน

• ความสาคญั ของงาน • ความสาคญั ของงาน
• ประเภทงาน • ประเภทงาน
• กาหนดเวลาแล้วเสร็จ • กาหนดเวลาแลว้ เสรจ็
• ผู้รับผดิ ชอบ • ผู้รบั ผดิ ชอบ

8

การด์ คัมบัง

บนการด์ แต่ละใบอาจมกี ารกาหนดข้อมลู ตา่ ง ๆ ดงั น้ี

• ค า อ ธิ บ า ย ร า ย ล ะ เ อี ย ด 1.คาอธบิ ายรายละเอยี ดของงาน
ของงาน
2. ความสาคัญของงาน
• ความสาคัญของงาน เชน่ วิกฤติ (critical) สาคัญมาก (major)
• ประเภทงาน ปกติ (normal) ไมเ่ รง่ ดว่ น (minor)
• กาหนดเวลาแลว้ เสรจ็
• ผู้รบั ผิดชอบ

9

การด์ คัมบงั

3. ประเภทงาน • ค า อ ธิ บ า ย ร า ย ล ะ เ อี ย ด
ของงาน
เ ช่ น ลั ก ษ ณ ะ เ ฉ พ า ะ ห รื อ ฟี เ จ อ ร์
(feature) ความผดิ พลาดท่ตี ้องแกไ้ ข • ความสาคัญของงาน
(bug) งานอน่ื ๆ • ประเภทงาน
• กาหนดเวลาแล้วเสรจ็
• ผู้รบั ผิดชอบ

10

การด์ คัมบัง

• ค า อ ธิ บ า ย ร า ย ล ะ เ อี ย ด 4. กาหนดเวลาแลว้ เสรจ็
ของงาน
5. ผู้รบั ผิดชอบ
• ความสาคัญของงาน
• ประเภทงาน
• กาหนดเวลาแลว้ เสรจ็
• ผู้รบั ผิดชอบ

11

กจิ กรรมท่ี 1.1

ให้นั กเรียนใช้การ์ดคัมบังวาง
แผนการพัฒนาแอปพลิเคชันในการจัด
เวรทาความสะอาดห้องเรยี นให้เหมาะสม
กับความต้องการของเพ่ือนในห้องและ
ครบทกุ งาน เช่น งานกวาดพ้ืน ถูพื้น จัด
โตะ๊ เกา้ อ้ี ท้งิ ขยะ เป็นตน้

1

เครอื่ งมือชว่ ยวางแผนและ
ติดตามความก้าวหน้ า

2

เทรลโล (Trello)

เทรลโล (Trello) เป็นแอปพลิเคชั่นท่ีนามาใช้บริหาร
จัดการงานในรู ปแบบกระดานคัมบังได้ง่าย ไม่ซับซ้อน รองรับ
การทางานร่วมกับผู้อื่นได้อย่างมีประสิ ทธิภาพ สามารถสมัครใช้
งานได้ทนั ทีผ่านทางเว็บไซต์ trello.com โดยไม่ต้องเสี ยค่าใช้จ่าย
แต่มีการจากดั จานวนกระดานหรอื จานวนผรู้ ว่ มพัฒนา

3

เทรลโล (Trello)

เมื่อเข้าสู่เว็บไซต์ของเทรลโลเป็นครง้ั แรก
นักเรยี นจาเป็นต้องสมัครเพ่ือสรา้ งบัญชผี ู้ใช้

4

เทรลโล (Trello)

เม่อื ลงช่อื เข้าใชง้ านระบบแล้ว จะปรากฎหน้าจอดังภาพ

คลกิ Create new board
เพื่อสรา้ งกระดาน

5

เทรลโล (Trello)

เม่อื คลิก Create new board จะพบหน้า Create board เพื่อเลือกรูปแบบดงั น้ี

เลอื กพ้ืนหลัง
ให้กระดาน

ตงั้ ช่อื กระดาน

6

เทรลโล (Trello)

• ตั้งค่าแบบส่วนตวั
• ตั้งค่าเฉพาะสมาชกิ
• ตั้งค่าสาธารณะ

กาหนดสิทธ์ใิ น
การมีส่วนรว่ ม

7 เทรลโล (Trello)

เมื่อคลกิ สรา้ ง (Create) จะปรากฎหน้าจอดงั ภาพ

พิมพ์ชอื่ รายการ

8 เทรลโล (Trello)

เมื่อคลิกสรา้ ง (Create) จะปรากฎหน้าจอดงั ภาพ

คลกิ Add list
เพื่อสรา้ งรายการ

9 เทรลโล (Trello)

คลกิ Add list และต้ังชื่อรายการจนครบ 3 รายการ
คือ ท่ีจะทา , กาลังทา และทาเสรจ็ แล้ว ตามลาดบั

10 เทรลโล (Trello)

คลิก Add a card เพื่อสรา้ งการด์ งาน

11 เทรลโล (Trello)

หน้ าจอแกไ้ ขรายละเอียดของการด์

12 เทรลโล (Trello)

การด์ ท่ตี ดิ ลงไปในกระดานน้ั น สามารถย้ายลาดับหรอื ย้าย
รายการโดยการคลิกแลว้ ลากไปวางในตาแหน่ งท่ีต้องการ

13 สรุปท้ายบท

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

14 สรุปทา้ ยบท

ขั้ น ตอ น เ ห ล่ าน้ี เ มื่อ น าม า ป ฏิ บั ติจ ริ ง อ า จ
ป ร ะ ก อ บ ไ ป ด้ ว ย ร า ย ล ะ เ อี ย ด ป ลี ก ย่ อ ย จ า น ว น ม า ก
กระด าน ค าบั งและการ์ด ค าบั ง เป็ น เ ทคนิ ค ท่ีไ ม่
ซับ ซ้อ น และนิ ยม น าม าใช้ ใ น ก ารจั ดลาดับ ค ว าม
เร่งด่วนและความสาคัญของงานย่อยแต่ละงาน ง่าย
ต่อการกาหนดผู้รับผิดชอบและติดตามความก้าวหน้ า
ช่ ว ย ใ ห้ ส า ม า ร ถ บ ริ ห า ร เ ว ล า แ ล ะ ก า ลั ง ค น อ ย่ า ง
เหมาะสม

15 สรุปท้ายบท

ในปัจจุบันมีแอปพลิเคชันออนไลน์ มากมาย
ท่ี ใ ห้ บ ริ ก า ร จั ด ก า ร ง า น ใ น รู ป ก ร ะ ด า น คั ม บั ง
โปรแกรมเทรลโล เป็นแอปพลิเคชันหน่ึ งท่ีใช้งาน
รองรบั การทางานรว่ มกับผู้อ่ืนได้อย่างมีประสิทธิภาพ
และสมคั รใชง้ านได้ทนั ทีโดยไม่มีค่าใชจ้ ่าย

16 คาถามท้ายบท

นั กเรียนจะนาเทคนิ ค
ก า ร์ ด คั ม บั ง ไ ป ใ ช้ ใ น
ชีวิตประจาวันเพื่ อทางาน
ใดบา้ ง ?