Generischer OpenAPI Client (T3CMD24)

Ein generischer API Client im TYPO3 um Daten einer OpenAPI Schnittstelle anzubinden.

Transcript

1. Generischer OpenAPI Client TYPO3Camp Mitteldeutschland 16.03.2024
2. 01 Einführung 02 OpenAPI 03 04 Demo Agenda Konzept 05 Ausblick © Copyright XIMA MEDIA 2024
3. Einführung
4. © Copyright XIMA MEDIA 2024 Einführung • Anbindung von generischen OpenAPI Schnittstellen ans TYPO3 • Einfache Verwaltung von Endpunkten • Nachnutzung der vorhandenen Spezifikation für die Konfiguration
5. © Copyright XIMA MEDIA 2024 Einführung • Anbindung von generischen OpenAPI Schnittstellen ans TYPO3 • Einfache Verwaltung von Schnittstellen Endpunkten • Nachnutzung der vorhandenen Spezifikation für die Konfiguration Hintergrund • Einbindung einer Schnittstelle beim Deutschen Weininstitut • Umsetzungszeitraum 2022-2023 • TYPO3 v12
6. © Copyright XIMA MEDIA 2024 Anforderungen • generischer Ansatz • flexibler Einsatz • höchst konfigurierbar • erweiterbar • redaktionelle Bearbeitung • Wiederverwendbarkeit • Nutzung mehrerer API Endpoints
7. OpenAPI
8. © Copyright XIMA MEDIA 2024 Überblick • OpenAPI ist eine Spezifikation für die maschinenlesbare Beschreibung von RESTful APIs (vormals Swagger) • klare & präzise Definition der Funktionsweise einer API • Ziel ist die Standardisierung und Interoperabilität zwischen verschiedenen Software-Tools zu ermöglichen • Spezifikation in YAML oder JSON Format Komponenten • API-Endpunkte • Anfrage- und Antwortformate • HTTP-Methoden • Parameter • Authentifizierungsmethoden • andere Metadaten
9. © Copyright XIMA MEDIA 2024 Vorteile • automatische Generierung von API-Dokumentationen • Generierung von Server- und Clientcode in verschiedenen Programmiersprachen • breites Ökosystem von Tools und eine aktive Community -> apidays Singapore 2024 • weite Verbreitung
10. Konzept
11. © Copyright XIMA MEDIA 2024 Konzept • Umsetzung des generischen Clients innerhalb TYPO3 • generelle Unterscheidung zwischen Daten und Layout • Welche Daten sollen wie dargestellt werden?
12. © Copyright XIMA MEDIA 2024
13. © Copyright XIMA MEDIA 2024 Konzept • Umsetzung des generischen Clients innerhalb TYPO3 • generelle Unterscheidung zwischen Daten und Layout • Welche Daten sollen wie dargestellt werden? • Umsetzung setzt sich aus drei Bestandteilen zusammen • Datenquelle • Explore • Reusable Request • Layout • Register Template • Kombination • Plugin
14. © Copyright XIMA MEDIA 2024
15. Demo
16. © Copyright XIMA MEDIA 2024 Demo • API Demo: Swagger Petstore • https:/ /petstore3.swagger.io/ • Extension: • https:/ /github.com/xima-media/xima-api-client
17. © Copyright XIMA MEDIA 2024
18. © Copyright XIMA MEDIA 2024 Data Layout
19. © Copyright XIMA MEDIA 2024
20. © Copyright XIMA MEDIA 2024
21. © Copyright XIMA MEDIA 2024
22. © Copyright XIMA MEDIA 2024 Temporäre Abfrage • Testen des API Endpunkts • Anpassen der Parameter • Anzeige der Ergebnisse
23. © Copyright XIMA MEDIA 2024 Wiederverwendbare Abfrage • Reusable Request • Speichern der temporären Abfrage zur Wiederverwendung • Konfiguration u.a. der folgenden Parameter • Caching • Erlaubte Templates (für sinnvolle Daten + Layout Kombination)
24. © Copyright XIMA MEDIA 2024 Data Layout
25. © Copyright XIMA MEDIA 2024 Templates • Verfügbare Templates im TypoScript registrieren plugin.tx_ximaapiclient.settings.registeredRequestTemplates.teaser { label = LLL:EXT:your_extension/Resources/Private/Language/locallang_be.xl template = EXT:your_extension/Resources/Private/Templates/Teaser.html description = LLL:EXT:your_extension/Resources/Private/Language/locallang preview = EXT:your_extension/Resources/Public/Preview/Teaser.png category = something }
26. © Copyright XIMA MEDIA 2024 Templates • Daten stehen als api_data Variable zur Verfügung • Metadaten zum Request finden sich unter api_meta
27. © Copyright XIMA MEDIA 2024 Data Layout
28. © Copyright XIMA MEDIA 2024
29. © Copyright XIMA MEDIA 2024
30. © Copyright XIMA MEDIA 2024
31. © Copyright XIMA MEDIA 2024
32. © Copyright XIMA MEDIA 2024
33. © Copyright XIMA MEDIA 2024
34. © Copyright XIMA MEDIA 2024 Features • Manipulation des Requests/Response durch EventListener • zB Anpassen der Sprache anhand der Site Language • Überschreiben von Parametern durch die URL • zB Paginierung von Ergebnissen, Detailseite anzeigen • Individuelles Caching der Requests integriert • zB Seiten Cache leeren bereinigt alle auf der Seite integrierten Request Caches • Sinnvolle Kombination aus Request und Template ist konfigurierbar
35. © Copyright XIMA MEDIA 2024 Features • Programmatische Nutzung möglich $endpoint =“/pet/findByStatus?status=available“; $reusableRequest = $this->reusableRequestRepository-> findByPreparedEndpoint($endpoint); $this->apiClient->init($reusableRequest->getClientAlias()); $this->apiClient->request( $reusableRequest->getPreparedEndpoint(), $reusableRequest->getMethod() );
36. Ausblick
37. © Copyright XIMA MEDIA 2024 Vorteile • komplett konfigurierbare Schnittstellen Integration • lediglich Templates müssen durch Entwickler bereitgestellt werden • dennoch Nachnutzung vorhandener Templates möglich • Endpunkt Testing möglich • schnelle Anbindung neuer Endpunkte und weiterer OpenAPI Schnittstellen
38. © Copyright XIMA MEDIA 2024 Ausblick • Known Limitations • nur GET • nur JSON • mehr Formate unterstützen • Inkonsistenzen berücksichtigen (veränderte Spezifikation) • Redaktionelle Nutzung verbessern (Usability) Ideen • Dynamische Objekte (basierend auf dem Schema) • Dynamische Filter (basierend auf Werte anderer Endpunkte) • mehr Sicherheitsmechanismen unterstützen (Session, Token, etc.) • Custom Result Browser • konsequente Weiterentwicklung …
39. Besten Dank Fragen?
40. © Copyright XIMA MEDIA 2024 Bildnachweise • Icon-Pack: Web design & development | Lineal (flaticon) • https:/ /unsplash.com/de/fotos/3-manner-spielen-tagsuber-golf-auf-grunem-rasen-adudERb6uDM • https:/ /unsplash.com/de/fotos/menschen-in-braunem-boot-tagsuber-auf-dem-gewasser-TF3g66Jhs50 • https:/ /unsplash.com/de/fotos/autos-tagsuber-auf-der-strasse-zwischen-hochhausern-y0OWfnOGnzo • https:/ /unsplash.com/de/fotos/ein-gemalde-eines-pferdes-das-auf-einem-feld-steht-HA77W0vdlQQ • https:/ /unsplash.com/de/fotos/AKzYmuhhC1o • https:/ /unsplash.com/de/fotos/braunes-und-weisses-haus-miniatur-aPNE3B0WHTM • https:/ /unsplash.com/de/fotos/ein-gemalde-einer-gruppe-von-mannern-auf-pferden-HTQKWADZJp4