Saladpuk.com
🏆 เนื้อหาหลัก
🏆 เนื้อหาหลัก
  • 💖สลัดผัก
  • 📰มีอะไรใหม่บ้าง
    • 2020
      • 2020-11
      • 2020-10
      • 2020-09
      • 2020-08
      • 2020-03
      • 2020-02
      • 2020-01
    • 2019
      • 2019-12
      • 2019-11
      • 2019-10
      • 2019-09
      • 2019-08
  • 🤔อ่านเรื่องไรดี ?
  • มือใหม่หัดเขียนโค้ด
    • 👶เขียนโค้ดด้วยภาษา C#
      • เกิดมาไม่เคยเขียนโค้ดมาก่อนเบย
      • 👶พื้นฐาน
        • 1.โปรแกรมที่ต้องลง
        • 2.โครงสร้างของโค้ด
        • 3.ชนิดของข้อมูล
        • 4.การสร้างตัวแปร
        • 5.คำสั่งพื้นฐาน
        • 6.การแปลงข้อมูล
        • 7.การเปรียบเทียบค่า
        • 8.การตัดสินใจด้วย IF statements
        • 9.การตัดสินใจด้วย Switch statements
        • 10.การทำงานซ้ำๆด้วย While
        • 11.การทำงานซ้ำๆด้วย Do While
        • 12.การทำงานซ้ำๆด้วย For
        • 13.การแก้โจทย์จากรูป
        • 14.มารู้จักกับ Array กัน
      • 🧑ระดับกลาง
        • 15.Value type vs Reference type
        • 16.ลดงานซ้ำๆด้วย Method
        • 17.มารู้จักกับ Class & Field กัน
        • 18.มารู้จักกับ Constructor กันบ้าง
        • 19.มาเขียน Method ใน Class กัน
        • 20.มารู้จักกับ Property กัน
        • 21.ลองใช้คลาสแบบจริงจังบ้าง
        • 22.การสืบทอด Inheritance
        • 23.Polymorphism
        • 24.Abstract Class
        • 25.Interface
        • 26.Namespace
        • 27.Enum
        • 28.Exception handler
        • 29.ลงลึกกับ string
        • 30.StringBuilder เพื่อนคู่ string
      • 👨⏳ระดับสูง
        • Generic
        • Delegates
        • Action & Func
        • Lambda expression
        • LINQ
        • พระคัมภีร์การใช้คำสั่ง LINQ
      • 💡Tips
        • 💡C# version 8.0
        • 💡Boxing & Unboxing
    • 👶Algorithm
      • 👾Algorithm Big-O
      • 👽Algorithm P & NP
    • 👦OOP
      • 💖Abstraction
      • 💖Encapsulation
      • 🏆Abstraction & Encapsulation
      • 💖Inheritance
      • 💖Polymorphism
      • 🏆Inheritance & Polymorphism
      • 📝ลองเขียน OOP ดูดิ๊
      • 👑OOP + Power of Design
      • 🥰เทคนิคในการออกแบบ
    • 👶บทสรุปฐานข้อมูล
      • เก็บรูปในฐานข้อมูล
      • Database indexing
      • การลบข้อมูล
    • 👦Communication Patterns
    • 👦Design Patterns
      • 🤰Creational Patterns
        • 🏭Factory Method
        • 🏭Abstract Factory
        • ☝️ Singleton Pattern
        • 🏗️ Builder Pattern
        • 🎎Prototype Pattern
      • 🧱Structural Patterns
        • 🔌Adapter Pattern
        • 📪Proxy Pattern
  • Puzzle
    • 🧠Challenges
      • 🐴Google ม้า 25 ตัว
      • 🌉Amazon เสา 2 ต้น
      • 🥇ทองเก๊
      • 💊ยาต้านโควิด
      • 🎩CP หมวก 5 ใบ
      • 🧓Einstein's Riddle 01
  • พื้นฐานที่ควรต้องรู้
    • 🐳Docker
      • 📦Docker Containers
      • 🃏Docker Exercise 01
      • 🛠️ Docker Tools
      • 🗃️ Docker Registry
      • 🖼️ Container Image
      • 📢Docker Push
      • 🔄WSL
    • 👶Clean Code
      • 🧓Uncle Bob - Clean Code
      • 🧓Uncle Bob - Comments
      • 🧓Uncle Bob - Naming
      • 🧓Uncle Bob - Mindset
      • 🧓Uncle Bob - TDD
    • 👶Code Smells
    • 👶สิ่งที่คนเขียนโค้ดมักเข้าใจผิด
    • 👶AI พื้นฐาน
    • 👶Git พื้นฐาน
      • Git branching strategy
    • 👶Cloud พื้นฐาน
    • 👶UML พื้นฐาน
      • Activity Diagram
      • Class Diagram
      • Sequence Diagram
      • Use case Diagram
      • บทสรุปการใช้ UML
    • 👶Data Scientist
      • การเลือก Algorithms ให้ AI (1/5)
      • การเตรียมข้อมูลให้ AI (2/5)
      • หลักการตั้งคำถามให้ AI (3/5)
      • แฉความลับของ AI Model (4/5)
      • หัดเขียน AI จาก AI ของคนอื่น (5/5)
    • 👶DevOps พื้นฐาน
    • 👶Docker ขั้นพื้นฐาน
      • Image and Container
      • แชร์ Docker Image ที่สร้างไว้
    • 👶Microservices พื้นฐาน
      • Microservices ที่ดีมีลักษณะยังไง
      • Microservices Tips
      • จาก Monolith สู่ Microservices
    • 👶ความรู้พื้นฐานในการทำเว็บ
    • 👦Bottlenecks of Software
      • หัวใจที่สำคัญที่สุดของฐานข้อมูล
    • 👦Agile Methodology
      • Agile in a Nutshell
      • Software Development Life Cycle
      • Code Review
    • 👦Security พื้นฐาน
      • การเก็บรหัสผ่านที่ถูกต้อง
      • Security in actions
        • Hash function
      • Security Principles
      • 😎The Matrix 1
      • 😎The Matrix 2
      • HTTPS in a nutshell
    • 👦SOLID Design Principles
      • มารู้จักกับ SOLID กันดีกว่า
      • Single-Responsibility Principle
      • Open/Closed Principle
      • Liskov Substitution Principle
      • Interface Segregation Principle
      • Dependency-Inversion Principle
  • Cloud Computing
    • 👶Microsoft Azure 101
      • สมัคร Microsoft Azure
      • รู้จักกับ Resource Groups
      • สร้างเว็บตัวแรกกัน
      • สร้าง Virtual Machine กัน
      • ประเภทของคลาว์เซอร์วิส
      • มาสร้าง Logic App กัน
      • มาสร้าง Function App กัน
      • คลาว์คิดเงินยังไง ?
      • Cloud Native
      • Guideline for Cloud scaling
      • Auto Scaling
    • 👶Azure App Services
    • 👶App Service Plan
    • 👶Azure Storage
      • Blob storage
        • ลองสร้างที่เก็บไฟล์กันเลย
        • เข้าใจ Blob storage ให้มากขึ้น
        • ลองเขียนโค้ดอัพโหลดไฟล์กันบ้าง
        • สร้างเว็บจากที่ฝากไฟล์บนคลาว์
    • 👶Azure Bot Service
      • Bot เข้าใจเราได้ยังไงกันนะ
    • 👶Azure Cognitive Services
      • การสร้าง Cognitive Services
      • การ Login ด้วยใบหน้า
      • อ่านลายมือจากรูปเป็นตัวอักษร (OCR)
      • เขียน AI แยกของต่างๆทำยังไง?
      • เขียนแอพ ทายอายุ บอกเพศ ง่ายจิ๊ดเดียว
      • เขียนแอพให้ AI อธิบายรูปเป็นภาษาคน
    • 👶Machine Learning Studio
      • มาสร้าง AI ของแท้ตัวแรกของเรากัน
      • สร้าง AI ตัดสินใจอนุมัติบัตรเครดิต 💳
      • ลองเรียกใช้ AI ของเรากัน
    • 👶Azure Service Fabric
      • สร้าง Service Fabric กัน
    • 👶Blockchain
      • Blockchain ทำงานยังไง ?
      • Consensus Algorithm คืออะไร ?
      • สร้าง Blockchain ใช้เองกัน !
      • หัดเขียน Smart Contract กัน
    • 👶Power BI
    • 👶Azure Web App
      • เซิฟเวอร์บนคลาว์ ราคา? ต่าง?
    • 👶Azure DevOps
      • เล่น Azure DevOps กัน
      • เล่นกับ Repository
      • ลองทำ Continuous Integration (CI)
      • ลองทำ Continuous Delivery (CD)
      • เล่น Kanban Board
    • 🤠Cloud Playground
      • การป้องกันความลับหลุดตอนที่ 1
      • การป้องกันความลับหลุดตอนที่ 2
      • การป้องกันความลับหลุดตอนที่ 3
      • การป้องกันความลับหลุดตอนจบ
  • Software Testing
    • 👦Test-First Design
    • 👦Test-Driven Development
      • 1.มารู้จักกับ TDD กันดีกว่า
      • 2.Test cases เขาเขียนกันยังไงนะ
      • 3.เครื่องมือในการทดสอบ
      • 4.การใช้ Theory และ InlineData
      • 5.โค้ดที่ทดสอบได้
      • 6.Mantra of TDD
      • 7.Functional & None-Functional testing
      • 8.Manual vs Automation testing
      • 9.Automation Frameworks in .NET
      • 10.Mock Framework
      • 11.มาเรียนการใช้ Moq กันเถอะ
      • 12.สรุป
  • Web
    • 👦Web API
      • 1.Web API คืออะไร
      • 2.ติดตั้ง .NET Core SDK
      • 3.สร้าง Web API ตัวแรกกัน
      • 4.Verbs
      • 5.Swagger เพื่อคู่ API
      • 6.การใช้ Model
      • 7.เรียก Web API ผ่าน Postman
      • 8.มาจัดกลุ่ม API กัน (1/2)
      • 9.มาจัดกลุ่ม API กัน (2/2)
  • Software Design
    • 🤴Design Patterns
      • 🦈Creational patterns
        • Abstract Factory
        • Builder
        • Factory Method
        • Prototype
        • Singleton
      • 🦈Structural patterns
        • Adapter
        • Bridge
        • Decorator
        • Facade
        • Proxy
      • 🦈Behavioral patterns
        • Chain of Responsibility
        • Command
        • Iterator
        • Mediator
        • Memento
        • Observer
        • State
        • Strategy
        • Template Method
        • Visitor
Powered by GitBook
On this page
  • 😢 ปัญหา
  • 😄 วิธีแก้ปัญหา
  • 🤔 UML คืออะไร ?
  • 🤔 UML ใช้อธิบายอะไรได้บ้าง ?
  • 🔥 Activity Diagram
  • 🔥 Sequence Diagram
  • 🔥 Use case Diagram
  • 🔥 Class Diagram
  • 🤔 แผนภาพมีเพียงแค่นี้เองเหรอ?
  • 🧭 เนื้อหาของคอร์สทั้งหมด
  • 🤔 สร้าง UML ใช้โปรแกรมอะไรได้บ้าง?
  • 🎯 บทสรุป

Was this helpful?

Export as PDF
  1. พื้นฐานที่ควรต้องรู้

UML พื้นฐาน

🤔 เคยสงสัยไหมว่า developer เขาคุยกันเข้าใจได้ยังไง ?

PreviousCloud พื้นฐานNextActivity Diagram

Last updated 5 years ago

Was this helpful?

😢 ปัญหา

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

😄 วิธีแก้ปัญหา

สาเหตุหลักๆที่คุยกันไม่เข้าใจ หรือ เสียเวลาอธิบายกันนานนั้นมีสาเหตุมาจาก ตัวโค้ดของโปรแกรมมันจับต้องไม่ได้ มันเป็นแค่ตัวหนังสือที่อยู่ในคอม ต้องเสียเวลาในการทำความเข้าใจว่าอะไรมันเชื่อมต่อกันยังไงบ้างนั่นเอง ซึ่งจากปัญหาที่ว่ามานี้เราจะใช้สิ่งที่เรียกว่า Unified Modeling Language หรือที่เรียกกันติดปากว่า UML เป็นตัวอธิบายแทนโค้ดของเราทั้งหมด โดยเจ้า UML นั้นจะแปลงของที่เข้าใจยากๆเหล่านั้นให้กลายเป็นรูปภาพที่ developer สากลทั่วโลกดูแล้วจะเข้าใจในระดับนึงนั่นเอง ดังนั้นถ้าเราเอา UML เข้ามาใช้มันจะทำให้ทุกคนในทีมสามารถเข้าใจสิ่งต่างๆได้ตรงจุดมากขึ้น และข้อดีที่สุดของมันคือ ทีมสามารถป้องกันข้อผิดพลาดได้ก่อนที่มันจะเกิดเสียอีก เพราะแผนภาพมันจะฟ้องว่าทีมเข้าใจติดตรงไหน

🤔 UML คืออะไร ?

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

ในคอร์สนี้ผมคงไม่ร่ายยาวประวัติ UML ให้ฟังเพราะหาอ่านได้ตาม Google เลย แต่แค่จะบอกว่ามันมีวิวัฒนาการมาหลายๆเวอร์ชั่น ส่วนรายละเอียด UML อ่านได้จากเว็บนี้ได้เลย

🤔 UML ใช้อธิบายอะไรได้บ้าง ?

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

🔥 Activity Diagram

เป็นแผนภาพที่เอาไว้ อธิบายทิศทางในการทำงาน หรือที่เราเรียกกันว่า Workflow นั่นเอง ดังนั้นเราลองมาดูว่าถ้าเราไม่ใช้ activity diagram ผมจะต้องอธิบายการทำงานไว้แบบนี้

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

แล้วลองเปรียบเทียบกับการเอา activity diagram มาใช้อธิบายตามรูปด้านล่าง ก็จะเห็นว่าคำอธิบายวุ่นวายๆนั้นหายไปหมดเลย

🔥 Sequence Diagram

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

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

แล้วลองเปรียบเทียบกับการเอา sequence diagram มาใช้อธิบายตามรูปด้านล่าง ก็จะเห็นว่าคำอธิบายวุ่นวายๆนั้นหายไปหมดเลย

🔥 Use case Diagram

เป็นแผนภาพที่ใช้อธิบายว่า ในระบบมีใครทำอะไรกันได้บ้าง ดังนั้นเราลองมาดูว่าถ้าเราไม่ใช่ use case diagram ผมจะต้องอธิบายการทำงานไว้แบบนี้

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

แล้วลองเปรียบเทียบกับการเอา suser case diagram มาใช้อธิบายตามรูปด้านล่าง ก็จะเห็นว่าคำอธิบายวุ่นวายๆนั้นหายไปหมดเลย

🔥 Class Diagram

เป็นแผนภาพที่ใช้อธิบายว่า ในระบบมีคลาสอะไรอยู่บ้างและแต่ละคลาสมีความสัมพันธ์กันยังไง ดังนั้นเราลองมาดูว่าถ้าเราไม่ใช่ class diagram ผมจะต้องอธิบายการทำงานไว้แบบนี้

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

หรือทั้งหมดที่ยกตัวอย่างมาผมสามารถเขียนโค้ดให้เข้าใจง่ายๆได้ว่า

public abstract class Animal
{
    public virtual void Goes()
    {
        Console.WriteLine("ส่งเสียงร้อง");
    }
}

public class Dog : Animal
{
    public override void Goes()
    {
        Console.WriteLine("โฮ่งๆ");
    }
}

public class Cat: Animal
{
    public override void Goes()
    {
        Console.WriteLine("เหมี๊ยวๆ");
    }
}

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

🤔 แผนภาพมีเพียงแค่นี้เองเหรอ?

ใจเย็นโยม มีอีกเพียบให้ศึกษาเลย นี่แค่เป็นเพียงน้ำจิ้มให้เห็นถึงพลังของ UML ที่ทำให้ทีมเข้าใจของหลายๆอย่างได้เร็วขึ้นเท่านั้น และในแต่ละแผนภาพนั้นก็มีรายละเอียดในการอธิบายอยู่เยอะเลยล่ะ ดังนั้นเดี๋ยวเราไปดูรายละเอียดของแต่ละแผนภาพกันเลยละกัน

🧭 เนื้อหาของคอร์สทั้งหมด

🤔 สร้าง UML ใช้โปรแกรมอะไรได้บ้าง?

มีโปรแกรมอยู่ยั้วเยี้ยบทเน็ทเลย ลอง search หาดูเอาละกันทั้งฟรีและไม่ฟรี ซึ่งตัวที่แนะนำก็จะขอแบ่งเป็น 2 หมวดละกันคือ

หมวดสร้างแผนภาพจาก text

หมวดสร้างแผนภาพจาก เครื่องมือ

โปรแกรมที่แนะนำ ตัวที่ผมชอบใช้จริงๆมี 2 ตัวคือ Plant UML กับ Star UML ซึ่งแต่ก่อนชอบ Star UML มากเพราะลากวางแล้วสวยมากครับฟรีด้วย (แต่ก็มีให้จ่ายเงินเหมือนกันนะ) แต่หลังๆมาชอบใช้ Plant UML มากกว่าเพราะเวลาที่ผมแก้ไข diagram มันไม่ต้องมาคอยจัดตำแหน่งเส้นต่างๆ เพราะโปรแกรมมันจะจัดการให้หมดเรามีหน้าที่แค่พิมพ์ของที่เราอยากได้แค่นั้นเอง ทำให้ผมลดเวลาในการทำงานลงไปได้เยอะมาก

🎯 บทสรุป

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

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

👶
Saladpuk Facebook
Activity Diagram
Class Diagram
Sequence Diagram
Use case Diagram
บทสรุปการใช้ UML
Plant UML
MermaidJS
FlowChart.JS
Lucidchart (online)
Creately.com (online)
Draw.io (online)
Start UML (app)
Visio (app)
https://www.uml.org
ถ้ามองไม่ชัดให้กดที่รูปเพื่อขยายดูได้นะ