Scaffolding

หลังจากที่สร้าง template ขึ้นมาแล้ว ในการพัฒนาส่วนที่เป็น Web Application (Angular) นั้นจะอยู่ใน ClientApp

Project Structure

ClientApp/
└──src/
    ├── app/
    ├── assets/
    ├── environments/
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    ├── test.ts
    └── web.config

ClientApp/
└──src/
    ├── app/
    ├── assets/
    ├── environments/
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    ├── test.ts
    └── web.config

ในไดเรกทอรี่ src/ จะประกอบไปด้วยไฟล์หลาย ๆ ไฟล์ เช่น index.html ไฟล์คอนฟิกต่าง ๆ ของ Angular ไฟล์รูปภาพและเนื้อหาอื่น ๆ จะเก็บในโฟลเดอร์ assets/ และโค้ดของแอพทั้งหมดจะอยู่ในโฟลเดอร์ app/

ซึ่งทางทีมได้นำ Clean Architecture มาประยุกต์ใช้งานกับ template ตัวนี้ด้วย จะสังเกตได้ว่าโครงสร้างของโปรเจกต์จะมีการแบ่งโฟลเดอร์ดังนี้

src/
  └── app/
      ├── components/
      ├── core/
      ├── data/
      ├── presentation/
      ├── service/
      ├── app-routing.module.ts
      ├── app.component.html
      ├── app.component.spec.ts
      ├── app.component.ts
      └── app.module.ts

src/
  └── app/
      ├── components/
      ├── core/
      ├── data/
      ├── presentation/
      ├── service/
      ├── app-routing.module.ts
      ├── app.component.html
      ├── app.component.spec.ts
      ├── app.component.ts
      └── app.module.ts

1. Components

components จะประกอบไปด้วย component ต่าง ๆ ของ angular

components/
├── auth/
├── consent/
├── gis/
├── home/
├── mis/
└── shared/

components/
├── auth/
├── consent/
├── gis/
├── home/
├── mis/
└── shared/

ซึ่งเราได้ทำการแยกเป็น module เอาไว้และเรียกใช้งานแบบ Lazy-loading modules สำหรับการพัฒนาหลาย ๆ module ในแอพเดียวซึ่ง module ที่ติดมากับ template จะประกอบไปด้วย auth, consent, gis, home และ mis สามารถดูรายละเอียดการเรียกใช้งานได้ที่ Angular Lazy-loading feature modules

2. Core

core จะประกอบไปด้วยส่วนต่าง ๆ ที่จะถูกเรียกใช้งานในแอพพลิเคชั่นซึ่งถูกออกแบบให้สอดคล้องกับ Dependency Inversion Principle ของ Clean Architecture ซึ่งจะประกอบไปด้วยโฟลเดอร์ต่อไปนี้

core/
├── base/
├── config/
├── domain/
├── repositories/
└── service/

core/
├── base/
├── config/
├── domain/
├── repositories/
└── service/

• base จะเอาไว้เก็บ abstract class ต่าง ๆ ที่จะเอาไว้ใช้งานภายใน Core เช่น Mapper<I, O>
• config เอาไว้เก็บการตั้งค่าต่าง ๆ ของแอพพลิเคชั่นที่จะส่งผลใน build time
• domain เอาไว้เก็บ model ต่าง ๆ เพื่อกำหนด data type ของข้อมูลที่ได้มาจาก API
• repositories เป็น interface ที่จะเอาไว้เก็บ method ต่าง ๆ ที่จะใช้ในการเรียกใช้งาน API
• service เป็น service ต่าง ๆ ที่จะเอาไว้เรียกใช้งาน repositories และจัดการ logic ต่าง ๆ ที่เกี่ยวข้องกับ domain

Note

ส่วนที่เป็น repositories และ service จะเป็นส่วนที่จะถูกเรียกใช้งานใน data และ presentation ซึ่งจะอธิบายในส่วนต่อไป

Note

Disclaimer: เนื่องด้วยข้อจำกัดของภาษา TypeScript ที่ไม่สามารถสร้าง interface ที่มี abstract method ได้ เราจึงต้องใช้ abstract class มาสร้างแทน

3. Data

4. Presentation

5. Service