การเรียกใช้งาน API ใน Ionic

ในบทความนี้ เราจะมาดูวิธีการตั้งค่าและเรียกใช้งาน API ใน Ionic แอปพลิเคชัน โดยจะแบ่งออกเป็นสามส่วนหลัก:

1. การตั้งค่า API Configuration
2. การสร้าง API Service
3. การใช้งาน API ในหน้าแอปพลิเคชัน

1. การตั้งค่า API Configuration

ก่อนอื่น เราจะสร้างไฟล์ api-config.ts เพื่อเก็บค่า URL ของ API ที่เราจะใช้งาน

วิธีการสร้างไฟล์:

1. เปิด Terminal หรือ Command Prompt
2. นำทางไปยังโฟลเดอร์ของโปรเจค Ionic ของคุณ
3. รันคำสั่งต่อไปนี้เพื่อสร้างไฟล์:

ionic generate environments

เปิดไฟล์ src/environments/environment.ts และแก้ไขเนื้อหาดังนี้

environment.ts
const BASE_URL = 'https://finalUrl.cloud/api';
const LOCAL_URL = 'http://localhost:3000/api';

export const environment = {
  production: false,  // เปลี่ยนเป็น true เมื่อใช้ใน production
  apiUrl: LOCAL_URL,  // เปลี่ยนเป็น BASE_URL เมื่อใช้ production server
};

ในไฟล์นี้ เรากำหนดค่า URL สำหรับ API ทั้งแบบ production และ local ซึ่งเราสามารถสลับใช้งานได้ตามต้องการ

2. การสร้าง API Service

ต่อไป เราจะสร้าง API Service เพื่อจัดการการเรียกใช้งาน API

วิธีการสร้าง API Service:

1. รันคำสั่งต่อไปนี้ใน Terminal

ionic generate service services/api

2. เปิดไฟล์ src/app/services/api.service.ts และแก้ไขเนื้อหาดังนี้

api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = environment.apiUrl;

  constructor(private http: HttpClient) { }

  addUser(data: any): Observable<any> {
    return this.http.post(`${this.baseUrl}/save-user`, data);
  }

  getUsers(): Observable<any> {
    return this.http.get(`${this.baseUrl}/users`);
  }

  getUserById(userId: string): Observable<any> {
    return this.http.get(`${this.baseUrl}/user/${userId}`);
  }
}

ใน Service นี้ เราได้สร้างเมธอดสำหรับการเพิ่มผู้ใช้ ดึงรายการผู้ใช้ทั้งหมด และดึงข้อมูลผู้ใช้ตาม ID

3. การใช้งาน API ในหน้าแอปพลิเคชัน

สุดท้าย เราจะมาดูวิธีการใช้งาน API Service ในหน้าแอปพลิเคชัน

ตัวอย่างการใช้งานใน add.page.ts:

1. เปิดไฟล์ src/app/add/add.page.ts
2. เพิ่ม import และแก้ไข constructor ดังนี้

add.page.ts
import { ApiService } from '../services/api.service';

export class AddPage {
  constructor(
    private apiService: ApiService
  ) { }

  // เมธอดสำหรับเพิ่มผู้ใช้
  addUser(formData: any) {
    this.apiService.addUser(formData).subscribe(
      response => {
        console.log('User added successfully', response);
        // จัดการการตอบกลับตามต้องการ
      },
      error => {
        console.error('Error adding user', error);
        // จัดการข้อผิดพลาดตามต้องการ
      }
    );
  }
}

ในตัวอย่างนี้ เราได้สร้างเมธอด addUser ที่ใช้ ApiService เพื่อส่งข้อมูลผู้ใช้ไปยัง API

สรุป: ด้วยวิธีการนี้ คุณสามารถตั้งค่า สร้าง และใช้งาน API ใน Ionic แอปพลิเคชันของคุณได้อย่างมีประสิทธิภาพ โดยแยกส่วนการตั้งค่า การจัดการ API และการใช้งานออกจากกันอย่างชัดเจน