Frontend Integrations

1. Angular (TypeScript)

Angular natively employs RxJS `HttpInterceptor` abstractions, making connecting to your GO-DUCK APIs simple.

Creating a Service for Entity

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common';
import { Observable } from 'rxjs';

export interface Entity {
  id: number;
  name: any;
  model: any;
  year: any;
  price: any;
  color: any;
  features: any;
}

@Injectable({ providedIn: 'root' })
export class EntityService {
  private apiUrl = 'http://localhost:8080/api/entitys';

  constructor(private http: HttpClient) {}

  // Standard REST Fetch with Pagination Parameters
  getAll(page: number = 1, pageSize: number = 10): Observable<any> {
    let params = new HttpParams()
        .set('page', page.toString())
        .set('pageSize', pageSize.toString());
    return this.http.get<any>(this.apiUrl, { params });
  }

  // Example: Using the powerful Generic Search RPC Engine
  search(queryField: string, operator: string, value: string): Observable<any> {
    let params = new HttpParams().set(queryField, \`\${operator}.\${value}\`);
    return this.http.get<any>('http://localhost:8080/api/rpc/entity', { params });
  }
}

2. Flutter (Dart)

Connecting a cross-platform mobile app requires managing state efficiently. Here's a raw HTTP Dart integration model you can bind to Provider, Riverpod, or BLoC patterns seamlessly over your Keycloak environment.

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class ApiProvider {
  static const String baseUrl = "http://localhost:8080/api/entitys";
  final storage = const FlutterSecureStorage();

  // Retrieve Keycloak Bearer token from secure storage
  Future<Map<String, String>> _getHeaders() async {
    String? token = await storage.read(key: 'jwt_token');
    return {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer $token',
      'X-Tenant-ID': 'default', // If using Multi-Tenancy module
    };
  }

  // Fetch API collection
  Future<List<dynamic>> fetchEntitys() async {
    final response = await http.get(Uri.parse(baseUrl), headers: await _getHeaders());
    if (response.statusCode == 200) {
      final data = json.decode(response.body);
      return data['results']; 
    } else {
      throw Exception('Failed to load data. Res code: \${response.statusCode}');
    }
  }
}