Development on local machine

AtlasX Web Application (Berlin Template) ถูกออกแบบมาให้สามารถทำงานแยกอิสระจากเว็บเซอร์วิสโดยเฉพาะ หากต้องการเรียกใช้งาน Rest API จากเว็บเซอร์วิส เช่น การใช้ระบบล็อกอิน, การเรียกใช้ Stored procedure หรืออัพโหลดไฟล์ไปยังเซิร์ฟเวอร์ สามารถจัดเตรียมเว็บเซอร์วิสและเว็บแอพพลิเคชันตามรายละเอียดดังต่อไปนี้

เตรียมเว็บเซอร์วิสให้พร้อม

ในส่วนของเว็บเซอร์วิส เราสามารถเตรียมพร้อมให้เว็บแอพฯ เรียกใช้งานได้ 3 วิธีด้วยกัน ได้แก่

คอนฟิกเว็บแอพฯ ให้รองรับกับการทำงานของเว็บเซอร์วิสแต่ละวิธี

ในโครงสร้างของ AtlasX Web Application (Berlin Template) ได้จัดเตรียมคอนฟิกต่าง ๆ เพื่อให้นักพัฒนาโปรแกรมสามารถปรับแก้ได้อย่างง่ายดาย โดยคอนฟิกจะถูกเก็บอยู่ที่ไฟล์ environment.ts สำหรับ Develop และไฟล์ environment.prod.ts สำหรับ Production

เนื่องจากเราจะพัฒนาเว็บแอพที่เครื่องของตัวเอง ดังนั้นจึงจำเป็นต้องแก้ไขคอนฟิกในไฟล์ environment.ts เพื่อให้เว็บแอพฯ ทำงานร่วมกับเว็บเซอร์วิสโดยการปรับแก้ค่าของ webServiceUrl

File: environments/environment.ts

import { AxAuthenticationConfig } from '@atlasx/core/authentication'
import { ApplicationConfig } from '../app/core/config/application.config'

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment: ApplicationConfig & AxAuthenticationConfig = {
  production: false,

  // เซิร์ฟเว็บเซอร์วิสด้วย .NET CLI
  webServiceUrl: 'https://localhost:5001',
  // โฮสต์เว็บเซอร์วิสบน Local IIS
  // webServiceUrl: 'https://localhost/demo-service',
  // โฮสต์เว็บเซอร์วิสบน IIS ของเซิร์ฟเวอร์กลาง
  // webServiceUrl: 'https://appserver2.cdg.co.th/demo-service',

  // Other configuration below here
  // ...
}

import { AxAuthenticationConfig } from '@atlasx/core/authentication'
import { ApplicationConfig } from '../app/core/config/application.config'

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment: ApplicationConfig & AxAuthenticationConfig = {
  production: false,

  // เซิร์ฟเว็บเซอร์วิสด้วย .NET CLI
  webServiceUrl: 'https://localhost:5001',
  // โฮสต์เว็บเซอร์วิสบน Local IIS
  // webServiceUrl: 'https://localhost/demo-service',
  // โฮสต์เว็บเซอร์วิสบน IIS ของเซิร์ฟเวอร์กลาง
  // webServiceUrl: 'https://appserver2.cdg.co.th/demo-service',

  // Other configuration below here
  // ...
}

รันเว็บแอพฯ

1. เปิด Terminal ขึ้นมา
2. ย้ายไปที่โฟล์เดอร์ ClientApp ด้วยคำสั่งcd ClientApp
3. รันเว็บแอพฯ ด้วยคำสั่งnpm start
4. เปิดเว็บบราวเซอร์แล้วเข้าไปที่ http://localhost:4200 จากนั้นทดลองเล่นโฟล์วล็อกอิน จะสังเกตุเห็นการ Redirect ไปยังเว็บเซอร์วิสตาม Url ที่เราทำการคอนฟิกไว้ใน environment.ts

ในการพัฒนาแอพฯ ที่เครื่องของเราเองยังไม่มีความจำเป็นต้องใช้งาน DataParser เนื่องจากเครื่องเราเองสามารถมองเห็นเว็บเซอร์วิสได้อยู่แล้ว ดังนั้นจึงไม่จำเป็นต้องเซิร์ฟ Backend (โปรเจค .NET ที่อยู่ในโฟล์เดอร์ ServerApp) ขึ้นมา