Gift Moments: Approfondimento sulle Funzionalità

Oltre all'architettura di base, Gift Moments include diversi moduli specializzati che migliorano l'esperienza utente.

Pagamenti Estensibili

Il sistema di pagamento utilizza un modello a provider, consentendo l'integrazione di nuovi gateway senza riscrivere la logica principale. Questa estensibilità è cruciale per supportare metodi di pagamento regionali accanto ai provider standard.

Il backend definisce un contratto chiaro per i gateway di pagamento tramite l'interfaccia IPaymentGateway:

// tc-be/src/common/interfaces/models.interface.ts

export interface IPaymentGateway extends IBase {    
    gatewayCode: string; // es. 'stripe', 'paypal'
    gatewayName: string;
    isActive: boolean;
    apiKeyPublic?: string; // Chiave API pubblica
    apiKeySecret?: string; // Chiave API segreta (crittografata)
    webhookSecret?: string; // Segreto Webhook
    webhookUrl?: string; // URL Webhook 
}

Ricchezza Multimediale

L'applicazione colma il divario tra contenuti locali e remoti.

Risorse Esterne

Il supporto nativo per il collegamento di contenuti multimediali da piattaforme come Vimeo e YouTube è gestito tramite provider specifici. Ad esempio, il Provider YouTube estrae automaticamente i metadati e gestisce l'incorporamento:

// tc-app/src/app/Services/common/external-providers/youtube-provider.service.ts

@Injectable({
  providedIn: 'root'
})
export class YouTubeProviderService extends BaseProviderService {
  
  readonly providerName = 'YouTube';
  readonly supportedDomains = ['youtube.com', 'youtu.be'];

  /**
   * Estrae i metadati dall'URL di YouTube
   */
  extractMetadata(url: string): Observable {
    const videoId = this.extractContentId(url);
    
    const metadata: IRemoteContent = {
      // ... logica di estrazione metadati
      thumbnailUrl: videoId ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg` : undefined,
      metadata: {
        videoId: videoId,
        embedUrl: this.getEmbedUrl(url),
        provider: 'youtube'
      },
      // ...
    };

    return of(metadata);
  }
}

Visualizzatore Multimediale

Un visualizzatore personalizzato garantisce un'esperienza di riproduzione coerente per diversi tipi di contenuti multimediali, siano essi caricamenti locali o streaming esterni.

Caccia al Tesoro

Forse la funzionalità più unica è la Caccia al Tesoro. Questa sfrutta la Geolocalizzazione per bloccare i contenuti a specifiche coordinate fisiche.

Utilizziamo Leaflet per fornire una mappa interattiva per impostare queste posizioni:

// tc-app/src/app/Features/map-location/map-location-picker.component.ts

private initMap(): void {
  // Crea la mappa con controlli di zoom
  this.map = L.map('map', {
    zoomControl: true,
    touchZoom: true,
    dragging: true,
    tapHold: true,
    zoomSnap: 0.5,
  }).setView([location.lat, location.lng], 13);
  
  // Aggiungi il livello di tile OpenStreetMap
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(this.map);

  // Aggiungi un marker alla posizione iniziale con popup
  this.marker = L.marker([location.lat, location.lng], {
    draggable: true
  })
    .addTo(this.map)
    .bindPopup(this.capsuleLocationText)
    .openPopup();
}

Gli utenti devono fisicamente recarsi a queste coordinate per "sbloccare" il regalo, trasformando il dono digitale in un'avventura nel mondo reale.