Home project THAI CLEFT LINK

THAI CLEFT LINK

ศูนย์แก้ไขความพิการบนใบหน้าและกะโหลกศีรษะ มูลนิธิเทคโนโลยีสารสนเทศตามพระราชดำริ ฯ มหาวิทยาลัยเชียงใหม่ ได้จัดทำ Mobile Application เพื่อดำเนินงานการบริหารจัดการวางแผนการรักษา โดยการเก็บรวบรวมข้อมูล การจัดเก็บ การนำเข้า การตรวจสอบ การแก้ไขข้อมูล เพื่อการวิเคราะห์วางแผนการรักษาโดยใช้ปัญญาประดิษฐ์ โดยพัฒนาระบบแผนการรักษาสำหรับผู้มีภาวะปากแหว่งเพดานโหว่ด้วยปัญญาประดิษฐ์ (Mobile Application) ซึ่งเป็น Application ที่สามารถคาดการณ์การรักษาของผู้ป่วยได้เมื่อกรอกรายละเอียดของผู้ป่วย เช่น การวินิจฉัยโรค อายุ และหัตถการ รวมถึงการรักษาที่เคยได้รับการรักษามาแล้ว

รายละเอียดโครงการ

ส่วนงานที่ 1 Android Mobile Application ได้ถูกพัฒนาโดยใช้เครื่องมือ Angular JS ซึ่งถูกใช้งานสำหรับส่วนการแสดงผลในหน้า UI ที่ถูกใช้งานโดยหมอและพยาบาล เพื่อทำการบันทึกข้อมูลผู้ป่วยและการวิเคราะห์วางแผนการรักษาโดยใช้ปัญญาประดิษฐ์

ส่วนที่ 2 Web Service พัฒนาโดยใช้เครื่องมือ Laravel Framework ซึ่งมีหน้าแสดงผลสำหรับผู้ใช้งานที่ได้รับสิทธิ Admin ใช้สำหรับการจัดการข้อมูลผู้ใช้งานและเพื่อเชื่อมต่อกับส่วนที่ 3 Web Service Treatment Guidelines ที่สามารถคาดการณ์การรักษาของผู้ป่วยได้เมื่อกรอกรายละเอียดของผู้ป่วย เช่น การวินิจฉัยโรค อายุ และหัตถการ รวมถึงการรักษาที่เคยได้รับการรักษามาแล้วและบันทึกข้อมูลลงในฐานข้อมูลที่ปลอดภัย ทั้งสามารถจัดเก็บและเรียกคืนกรณีที่เกิดปัญหาต่างๆ เช่น การโจมตี

เทคโนลียีที่ใช้ในการพัฒนา

Angular JS

การพัฒนา Mobile App (หรือ Mobile Web App) ด้วย Angular Framework มีข้อดีหลายประการ โดยเฉพาะเมื่อเป้าหมายคือการสร้าง Web App ที่ใช้งานได้ดีบนมือถือ (Mobile-Friendly Web App) หรือ Progressive Web App (PWA) ที่สามารถติดตั้งและทำงานคล้าย Native App ได้บนมือถือ

✅ ข้อดีของการใช้ Angular Framework ในการพัฒนา Mobile App / Mobile Web

1. รองรับการพัฒนาแบบ Responsive

Angular สามารถใช้ร่วมกับ CSS Framework เช่น Angular Material, Bootstrap, หรือ Tailwind ทำให้สามารถออกแบบ UI ที่ Responsive สำหรับหน้าจอมือถือได้อย่างมีประสิทธิภาพ

2. พัฒนาเป็น Progressive Web App (PWA) ได้ง่าย

Angular รองรับการสร้าง PWA โดยใช้ Angular CLI เพียงไม่กี่คำสั่ง เช่น: bashCopyEditng add @angular/pwa
PWA มีข้อดี เช่น โหลดเร็ว, ใช้งานแบบ Offline ได้ และสามารถติดตั้งเป็นไอคอนบนหน้าจอมือถือได้เหมือน Native App

3. Component-Based Architecture

Angular ใช้แนวคิด Component-based ทำให้การพัฒนา UI ที่ซับซ้อนสำหรับมือถือทำได้ง่ายขึ้น และสามารถแยกส่วนการทำงานได้อย่างเป็นระบบ

4. ใช้ Codebase เดียวสำหรับ Web และ Mobile

สามารถพัฒนา Mobile Web App และ Desktop Web App ด้วย Codebase เดียวกัน ช่วยลดเวลาและต้นทุนในการพัฒนา

5. มีเครื่องมือและ CLI ที่ทรงพลัง

Angular CLI ช่วยให้การสร้างโปรเจกต์, สร้าง component, build, test และ deploy ทำได้รวดเร็วและเป็นระบบ

6. มีระบบ Routing และ Lazy Loading

Angular มีระบบ Routing และ Lazy Loading ในตัว ช่วยให้โหลดเฉพาะหน้าที่ต้องการใช้งาน ซึ่งเหมาะกับ Mobile ที่ต้องการความเร็วและประหยัด bandwidth

7. ความปลอดภัยในระดับสูง

Angular มีการป้องกัน Cross Site Scripting (XSS) โดยอัตโนมัติจากระบบ template และการ bind ข้อมูล ช่วยเสริมความปลอดภัยของแอปบนมือถือ

8. Community และ Ecosystem ที่เข้มแข็ง

มีเอกสารชัดเจน และ Community ใหญ่ ช่วยให้หาความรู้และแก้ปัญหาได้ง่าย

หากคุณนำ Laravel มาใช้ร่วมกับ Angular ในการพัฒนาเว็บแอป (รวมถึง Mobile Web App หรือ PWA) จะได้ประโยชน์หลายอย่างจากการแยกหน้าที่ของระบบฝั่ง Frontend และ Backend อย่างชัดเจน ซึ่งแนวทางนี้เป็นที่นิยมมากในระบบขนาดกลางถึงใหญ่

✅ ข้อดีของการใช้ Laravel + Angular ร่วมกัน

1. แยกการทำงานแบบ Full-Stack (Frontend-Backend)

Angular จะดูแล Frontend (UI/UX, Routing, Logic ฝั่ง Client)
Laravel จะทำหน้าที่ Backend API (RESTful API หรือ GraphQL API)
แยกการทำงานทำให้แต่ละฝั่งสามารถพัฒนาและปรับปรุงแยกกันได้ง่ายขึ้น

2. ความปลอดภัยสูงด้วย Laravel

Laravel มีระบบความปลอดภัยที่ดี เช่น CSRF Protection, Authentication, Middleware
หากใช้ร่วมกับ Sanctum หรือ Passport, สามารถจัดการ Token Authentication ได้ดีมาก (เช่น สำหรับ JWT หรือ API Token)

3. ใช้ Laravel เป็น API Server

คุณสามารถสร้าง Laravel API ที่ Angular เรียกใช้ได้ เช่น: bashCopyEditRoute::get('/api/users', [UserController::class, 'index']);
Angular จะใช้ HttpClient ทำ API request ไปยัง Laravel เพื่อรับหรือส่งข้อมูล

4. ทำ Frontend Mobile-Friendly ได้ด้วย Angular

Angular ทำ UI สำหรับมือถือได้ดีมาก โดยใช้ Component Libraries เช่น Angular Material, Ionic, Tailwind CSS
รองรับ PWA ได้ ทำให้สามารถติดตั้งเหมือน Mobile App ได้แม้พัฒนาด้วย Web

5. ทดสอบง่ายและมีเครื่องมือครบ

Laravel มีระบบ Unit Test และ Feature Test ฝั่ง Backend
Angular มีระบบ Unit Test (Jasmine + Karma) และ E2E test (Protractor หรือ Cypress)
ช่วยให้สามารถเขียน test ครบทั้งระบบได้ง่าย

6. รองรับการ Deploy และ Scaling ได้ดี

Angular สร้างเป็น static files (ng build) ที่สามารถ deploy ไปยัง CDN หรือ Web Server ใดก็ได้
Laravel รันเป็น API Server แยกต่างหาก และสามารถ scale ตาม Load ได้ เช่น บน Laravel Forge, Docker, หรือ Cloud Platform

แนวทางการทำงานโดยสรุป

ส่วนประกอบ	เครื่องมือ	บทบาท
Frontend (UI)	Angular	แสดงผล, ดึงข้อมูล, UX
Backend (API)	Laravel	จัดการข้อมูล, Auth, Logic
DB	MySQL / PostgreSQL	จัดเก็บข้อมูล
Auth Token	Laravel Sanctum / Passport	จัดการ Token Login
Deploy	Angular → CDN / Laravel → VPS	แยก deploy ได้