feat: add career

.vitepress/config.mts

@@ -45,6 +45,10 @@ export default defineConfig({
       "/paths/software-architecture": {
         base: "/paths/software-architecture/",
         items: sidebarSoftwareArchitecture()
+      },
+      "/paths/career": {
+        base: "/paths/career/",
+        items: sidebarCareer()
       }
     },
     socialLinks: [
@@ -505,3 +509,31 @@ function sidebarTypeScript(): DefaultTheme.SidebarItem[] {
     },
   ];
 }
+
+function sidebarCareer(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: "ตำแหน่งสายงาน IT",
+      items: [
+        {
+          text: "Management",
+          collapsed: true,
+          base: "/paths/career/management/",
+          items: [
+            { text: "CTO", link: "cto" },
+            { text: "CIO", link: "cio" },
+          ],
+        },
+        {
+          text: "Developer",
+          collapsed: true,
+          base: "/paths/career/developer/",
+          items: [
+            { text: "Front-end Developer", link: "frontend" },
+            { text: "Back-end Developer", link: "backend" },
+          ],
+        }
+      ],
+    },
+  ];
+}

README.md

@@ -68,6 +68,95 @@ npm run docs:dev
 
 ![](./images/vscodetasks.jpg)
 
+## วิธีการเพิ่มเนื้อหา
+
+### ศึกษาการเขียน Markdown 
+- [GitHub Docs: Basic writing and formatting syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)
+- [VitePress: Markdown Extensions](https://vitepress.dev/guide/markdown)
+
+### เพิ่ม Path ใหม่
+![](./images/Path01.jpg)
+
+- ขั้นตอนแรกให้เราทำการเปิด File [index.md](./index.md)
+- ทำการเพิ่มเนื้อหาของ `Path` ใหม่ที่ต้องการ
+   - ตัวอย่างเช่น Path สำหรับตำแหน่งสายงาน IT
+   ```markdown
+    - title: ตำแหน่งสายงาน IT
+    details:  แนะนำสายงาน IT ทั้งตำแหน่งและหน้าที่โดยแบ่งเป็น 7 สาย Management, Developer, QA/Tester, Designer, Analyst, Data, Infrastructure และ Support 
+    link: /paths/career
+   ``` 
+- ผลลัพธ์ที่ได้
+ ![](./images/Path03.jpg)
+- เสร็จแล้วให้ทำการเพิ่ม Folder ใน [Paths](./paths/)
+  - ตัวอย่างของผมจะเพิ่มเป็น `career` เพื่อให้ตรงกับรายละเอียดที่ระบุใน [index.md](./index.md) ก่อนหน้านะครับ (`link: /paths/career`)
+- ให้ทำการเพิ่ม `index.md` มาเป็นหน้าต้อนรับผู้อ่านที่สนใจ `Path` ของเรานะครับ พร้อมกับระบุรายละเอียดในรูปแบบ Markdown
+  - ตัวอย่าง
+    ```markdown
+    ---
+    outline: deep
+    title: 'ตำแหน่งสายงาน IT'
+    description: แนะนำสายงาน IT ทั้งตำแหน่งและหน้าที่โดยแบ่งเป็น 7 สาย Management, Developer, QA/Tester, Designer, Analyst, Data, Infrastructure และ Support
+    ---
+    # ตำแหน่งสายงาน IT
+    ในแต่ละสายงานนั่นมีอาชีพที่หลากหลายและต่างก็มีความต้องการในตลาดเป็นอย่างสูง 
+    ```
+- ผลลัพธ์สุดท้ายจะเป็นดังนี้ครับ
+  ![](./images/Path04.jpg)
+- หน้าตาโครงสร้างจะประมาณนี้นะครับ
+  ![](./images/Path05.jpg)
+
+### เพิ่มหมวดหมู่ของเนื้อหา
+![](./images/Path02.jpg)
+
+- ขั้นตอนแรกให้เราเปิดไฟล์ [.vitepress/config.mts](./.vitepress/config.mts) และทำการเพิ่มรายละเอียดของเมนูที่ต้องการ
+  - ทีมอยากขอยกตัวอย่างให้เห็นภาพมากขึ้นจากโค้ดชุดนี้นะครับ 
+    - โดยเป็นการเพิ่มเมนู `ตำแหน่งสายงาน IT` 
+    - และมีเมนูย่อย 
+      - `Management`: มีเมนูย่อย `CTO`, `CIO`
+      - `Developer`: มีเมนูย่อย `Front-end Developer`, `Back-end Developer`
+    - ให้ทำการเพิ่ม Function ใหม่ล่างสุดของไฟล์
+      ```javascript
+      function sidebarCareer(): DefaultTheme.SidebarItem[] {
+        return [
+          {
+            text: "ตำแหน่งสายงาน IT",
+            items: [
+              {
+                text: "Management",
+                collapsed: true,
+                base: "/paths/career/management/",
+                items: [
+                  { text: "CTO", link: "cto" },
+                  { text: "CIO", link: "cio" },
+                ],
+              },
+              {
+                text: "Developer",
+                collapsed: true,
+                base: "/paths/career/developer/",
+                items: [
+                  { text: "Front-end Developer", link: "frontend" },
+                  { text: "Back-end Developer", link: "backend" },
+                ],
+              }
+          },
+        ];
+      }
+      ```
+    - เสร็จแล้วให้ทำการ Register Function ใน `defineConfig()` ที่ Property  `sidebar`
+      ```javascript
+      export default defineConfig({
+        sidebar: {
+          "/paths/career": {
+            base: "/paths/career/",
+            items: sidebarCareer()
+          }
+        }});
+      ```
+    - หน้าตาโครงสร้างผลลัพธ์ที่ได้ตอนนี้
+      ![](./images/Path06.jpg)
+    - หน้าตาเว็บไซต์ผลลัพธ์ที่ได้ตอนนี้
+      ![](./images/Path07.jpg)
 ## ขอบคุณผู้ร่วมพัฒนาทุกคน ❤
 
  <a href = "https://contrib.rocks/image?repo=ThaiProgrammer/tpa-path">

index.md

@@ -20,6 +20,9 @@ hero:
   }
 
 features:
+  - title: ตำแหน่งสายงาน IT
+    details:  แนะนำสายงาน IT ทั้งตำแหน่งและหน้าที่โดยแบ่งเป็น 7 สาย Management, Developer, QA/Tester, Designer, Analyst, Data, Infrastructure และ Support 
+    link: /paths/career
   - title: Practices
     details: กระบวนการ วิธีการ และหลักการที่ใช้ในการพัฒนาและดูแลรักษาซอฟต์แวร์ที่ใช้กันอย่างแพร่หลายในปัจจุบัน
     link: /paths/practices

paths/career/developer/backend.md

@@ -0,0 +1,49 @@
+# Back-end Developer
+คือผู้เชี่ยวชาญด้านการพัฒนาส่วนหลังของเว็บไซต์และแอปพลิเคชัน ซึ่งเกี่ยวข้องกับการจัดการฐานข้อมูล, การเขียนโค้ดฝั่งเซิร์ฟเวอร์, และการบูรณาการกับ API (Application Programming Interface) โดยทำงานร่วมกับ Front-end Developer เพื่อให้ระบบทั้งหมดทำงานอย่างราบรื่นและมีประสิทธิภาพ
+
+## หน้าที่ของ Back-end Developer
+
+1. **พัฒนาและดูแลฝั่งเซิร์ฟเวอร์**: เขียนโค้ดและพัฒนาแอปพลิเคชันฝั่งเซิร์ฟเวอร์ โดยใช้ภาษาโปรแกรม เช่น Node.js, Python, Java, Ruby, PHP, และอื่นๆ
+2. **จัดการฐานข้อมูล**: ออกแบบและจัดการฐานข้อมูลทั้งเชิงสัมพันธ์ (Relational Database) และฐานข้อมูลแบบ NoSQL เพื่อเก็บและเข้าถึงข้อมูล
+3. **พัฒนา API**: สร้างและบูรณาการ API เพื่อให้ Front-end และแอปพลิเคชันอื่นๆ สามารถติดต่อและรับส่งข้อมูลได้
+4. **ความปลอดภัยของระบบ**: ป้องกันการโจมตีและความเสี่ยงด้านความปลอดภัยโดยการใช้เทคนิคและเครื่องมือต่างๆ เช่น การเข้ารหัส, การตรวจสอบสิทธิ์ และการจัดการเซสชัน
+5. **ประสิทธิภาพและการขยายระบบ**: ปรับปรุงและเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชัน และออกแบบระบบให้สามารถขยายได้เมื่อมีผู้ใช้เพิ่มขึ้น
+6. **การทดสอบและ Debugging**: ทดสอบการทำงานของโค้ดและแก้ไขข้อบกพร่องที่พบเพื่อให้แอปพลิเคชันทำงานได้อย่างถูกต้องและมีประสิทธิภาพ
+7. **ทำงานร่วมกับทีม Front-end**: ประสานงานกับ Front-end Developer เพื่อให้การเชื่อมต่อระหว่างฝั่งเซิร์ฟเวอร์และฝั่งผู้ใช้ทำงานอย่างราบรื่น
+
+## ความสามารถที่ต้องมี
+
+1. **ทักษะการเขียนโปรแกรม**: มีความรู้และทักษะในการใช้ภาษาโปรแกรมที่ใช้ในฝั่งเซิร์ฟเวอร์ เช่น Node.js, Python, Java, Ruby, PHP, และอื่นๆ
+2. **การจัดการฐานข้อมูล**: มีความรู้เกี่ยวกับฐานข้อมูลเชิงสัมพันธ์ (เช่น MySQL, PostgreSQL) และ NoSQL (เช่น MongoDB, Cassandra)
+3. **การพัฒนา API**: ความสามารถในการสร้างและบูรณาการ RESTful API หรือ GraphQL
+4. **ความรู้ด้านความปลอดภัย**: เข้าใจและสามารถใช้เทคนิคการป้องกันความปลอดภัยของข้อมูลและแอปพลิเคชัน
+5. **การจัดการเซิร์ฟเวอร์และโครงสร้างพื้นฐาน**: ความรู้เกี่ยวกับการตั้งค่าและจัดการเซิร์ฟเวอร์, การใช้ Docker, Kubernetes, และบริการคลาวด์ เช่น AWS, Google Cloud Platform, Azure
+6. **ทักษะการแก้ปัญหา**: มีทักษะในการวิเคราะห์และแก้ไขข้อบกพร่องของโค้ดได้อย่างรวดเร็วและมีประสิทธิภาพ
+7. **การทำงานร่วมกับทีม**: สามารถสื่อสารและทำงานร่วมกับทีมพัฒนาอื่นๆ ได้ดี
+
+## การเตรียมตัวและเส้นทางการเติบโต
+
+1. **การศึกษา**:
+    - ปริญญาตรีในสาขาวิทยาการคอมพิวเตอร์, วิศวกรรมคอมพิวเตอร์ หรือสาขาที่เกี่ยวข้อง
+    - การเรียนรู้ด้วยตัวเองหรือการเข้าคอร์สออนไลน์ที่เน้นการพัฒนาเว็บฝั่งเซิร์ฟเวอร์
+
+2. **การฝึกงานและประสบการณ์การทำงาน**:
+    - หาประสบการณ์การทำงานหรือฝึกงานในสายงานพัฒนาเว็บ
+    - สร้างโปรเจ็กต์ส่วนตัวหรือพอร์ตโฟลิโอเพื่อแสดงความสามารถและผลงานของตนเอง
+
+3. **การเรียนรู้ตลอดชีวิต**:
+    - ติดตามการเปลี่ยนแปลงและแนวโน้มในวงการเทคโนโลยีเว็บ
+    - เข้าร่วมชุมชนออนไลน์, ฟอรัม, และการประชุมหรือสัมมนาด้านเทคโนโลยีเว็บ
+
+## การพัฒนาทักษะเพิ่มเติม
+
+1. **เรียนรู้เฟรมเวิร์กและไลบรารีใหม่ๆ**: เช่น Express.js, Django, Spring Boot เพื่อเพิ่มประสิทธิภาพในการพัฒนาและขยายขอบเขตความสามารถของตนเอง
+2. **เรียนรู้เกี่ยวกับการพัฒนา Microservices**: เพื่อเตรียมความพร้อมสำหรับการพัฒนาแอปพลิเคชันที่มีการแบ่งส่วนและขยายตัวได้ง่าย
+3. **การเรียนรู้เพิ่มเติมเกี่ยวกับ DevOps**: การเรียนรู้เครื่องมือและเทคนิคที่ใช้ในการปรับปรุงกระบวนการพัฒนาและการส่งมอบซอฟต์แวร์ เช่น Jenkins, GitLab CI/CD
+4. **พัฒนาทักษะการออกแบบระบบ**: การเรียนรู้การออกแบบระบบและสถาปัตยกรรมซอฟต์แวร์ เช่น Domain-Driven Design (DDD), Event-Driven Architecture (EDA)
+
+## คำแนะนำเพิ่มเติม
+
+1. **สร้างเครือข่าย**: เข้าร่วมกลุ่มและชุมชนของนักพัฒนาเว็บ เพื่อแลกเปลี่ยนประสบการณ์และความรู้
+2. **ทำโปรเจ็กต์ส่วนตัว**: สร้างและพัฒนาโปรเจ็กต์ส่วนตัว เพื่อฝึกฝนทักษะและสร้างพอร์ตโฟลิโอ
+3. **เรียนรู้จากแหล่งข้อมูลออนไลน์**: ใช้ประโยชน์จากคอร์สออนไลน์, บทความ, วิดีโอ และหนังสือ เพื่อพัฒนาความรู้และทักษะของตนเอง