Wie baut T3AI auf TYPO3 Core Standards auf? (UI/UX und Code)

Wie baut T3AI auf TYPO3 Core Standards auf? (UI/UX und Code)

FYI. This blog is translated by machine. Please ignore any spelling and grammar errors; sorry for such inconvenience. We appreciate your understanding and support.

Möchten Sie wissen, wie unsere beliebte TYPO3 Erweiterung T3AI entstanden ist? Wir haben sie entwickelt, indem wir uns sorgfältig an die TYPO3 Kernstandards für das Backend-UI/UX und die Codierungspraktiken gehalten haben. Lesen Sie weiter, um das Was, Warum und Wie hinter der Entwicklung zu erfahren!

Wir lieben TYPO3 & AI! Wir bei T3Planet sind leidenschaftliche TYPO3 Fans! Wir sind stolz darauf, die allererste funktionsreiche TYPO3 AI Erweiterung, T3AI, entwickelt und auf den Markt gebracht zu haben. In diesem Blog erfahren Sie, wie wir diese maßgeschneiderte TYPO3 Erweiterung unter Einhaltung der TYPO3 Kernprinzipien für UI/UX und der technischen Coding-Standards entwickelt haben.

Wussten Sie schon? Durch die Einhaltung der TYPO3 Kernrichtlinien mussten wir keine einzige zusätzliche Zeile HTML, CSS oder JavaScript schreiben, um die beeindruckende UI/UX von TYPO3 zu erreichen.

- Von ChatGPT (5. September 2024)

- By ChatGPT (5th Sep 2024)

Bevor wir tiefer eintauchen, wollen wir ein paar Zahlen nennen, die die harte Arbeit hinter T3AI widerspiegeln (nicht aus der Marketing Perspektive, sondern als Beleg für das Engagement der TYPO3 Entwickler):

  • 3000+ Stunden für den Relaunch von T3AI v4
  • 500+ Tassen Kaffee
  • 10+ Engagierte Ressourcen
  • 1814+ Git Commits
  • 350+ Merge-Anfragen
  • 300$+ OpenAIs Rechnungen
  • 80+ Git-Tickets
  • 25+ Branches
  • 15+ Releases

T3AI v1 war unser experimenteller Vorstoß in die Integration von KI in das TYPO3 CMS. Wir begannen mit kleinen Funktionen wie einem 3 Step TYPO3 Page Launch, AI Powered Content über TYPO3 RTE, SEO Optimierung mit AI, automatisierte Seitenübersetzung und ChatGPT Personal Assistant.

Während sich v1 auf die technische Machbarkeit und die Erweiterung der TYPO3 Kernstandards konzentrierte, kam es im Bereich UI/UX zu kurz. Den frühen Versionen fehlte der letzte Schliff, wie die Screenshots unten zeigen.

SEO Optimierung am Seitenmodul

ChatGPT Hilfe

T3AI v2 führte weitere KI Funktionen ein, während v3 bedeutende Änderungen mit sich brachte, einschließlich der Umbenennung von EXT:ns_openai (nur ChatGPT) in EXT:ns_t3ai (Unterstützung mehrerer KI Modelle wie Gemini, DeepL, Azure usw.).

Zu den neuen Funktionen gehören eine ChatGPT Seitenleiste, SEO Optimierungen mit einem Klick, Sprachübersetzungseinträge, KI generierte Bilder, automatische Inhaltserstellung und eine Glossar Übersetzungsfunktion.

AI Seite im Seitenmodul erstellen

RTE Unterstützung

AI Image als benutzerdefiniertes Modul

T3AI v4 wurde am 15. August 2024 veröffentlicht und markierte eine komplette Neuentwicklung, die sich auf das Backend UI/UX und die Codestruktur konzentrierte. Ein Early Access Programm lieferte wertvolles Feedback und führte zu positiven Reaktionen von unseren Early Adopters.

Diese Version bietet eine umfassende TYPO3 AI Erweiterung mit einem Dashboard, SEO Tools, Content Management, Übersetzung, Lokalisierung, benutzerdefinierten Prompts und einem AI-Chatbot. Das UI/UX orientiert sich eng an den TYPO3 Kernstandards und gewährleistet eine nahtlose Integration mit der nativen Oberfläche von TYPO3.

Hier ist die Liste der Anpassungen, die ich in Bezug auf die Benutzeroberfläche und die Benutzererfahrung erwähnen möchte, um eine enge Verbindung mit dem TYPO3 Kern herzustellen.

Dashboard TYPO3 Core Erweiterung

Wir haben EXT:dashboard von TYPO3 core für ein einheitliches Design verwendet.

TYPO3 Core Dashboard

T3AI Backend Modul

Benutzerdefinierte Module & Kontextmenü

Redakteure können über benutzerdefinierte Backend-Module von überall auf T3AI zugreifen.

Kontext menü

Kartendesign der Verwaltungstools

Die Funktionen werden wie Admin Tools dargestellt, um ein vertrautes Aussehen zu gewährleisten.

Verwaltungswerkzeuge von TYPO3 Core

AI Module bei T3AI

Modalbox von TYPO3 Core

Wir haben den Modalbox Stil von TYPO3 übernommen, um Platz zu sparen.

Popup in TYPO3 Core

Popup in T3AI

Übersetzung im Sprachassistenten

Integriert nahtlos in den Sprachassistenten von TYPO3.

AI-Modell im Übersetzungsassistenten

Auflistung von Datensätzen wie beim Logs Manager

Gestaltet wie der Logs und Extensions Manager von TYPO3.

Logs Manager von TYPO3 Core

Veranlasst Manager der T3AI

Befolgte Dateistruktur

AI Bilder folgen dem Design des Dateilistenmoduls von TYPO3 Core.

Dateimodul von TYPO3 Core

AI Bild der T3AI

T3AI Copilot in RTE/CKEditor

T3AI folgt den Designüberlegungen von CKEditor.

AI Bild überall generieren

Von mehreren Stellen in TYPO3 aus zugänglich.

AI Image at File Modul

AI Image bei der FAL

Aus technischer Sicht war die Einhaltung der TYPO3 Kerncodierungsstandards entscheidend. Wir folgten:

  • TYPO3 Kerncodierungsstandards
  • PHP PSR Regeln
  • Extbase Framework
  • MVC und Modellierung
  • Flüssiges Templating
  • TYPO3 Kern Erweiterungen
  • Fortgeschrittene Techniken (z.B. Services, DTO, Factory, Hooks, VH)
  • TYPO3 Rektor
  • Semantische Versionierung 2.0
  • Automatische Code Überprüfung
  • Code Linting (PHP Stan, PHP CS Fixer)
  • YAML Lint
  • TypoScript Lint
  • Flüssiges Lint
  • XLF Lint
  • Senior Code Reviews

Sehen Sie sich die Extension Architektur mit 30 PHP Klassen an, die unsere Verwendung der TYPO3 Kern APIs zur Entwicklung und Erweiterung von T3AI veranschaulicht.

Implementierung des PHP PSR 12 Codierungsstandards

  • Alle PHP Dateien halten sich an die Unix Zeilenenden LF (Linefeed).
  • Für die Zeilenlänge gibt es keine feste Grenze.
  • Die declare Anweisung wird für jede Klasse verwendet.

Verwendung von DataHandler
Seiten, Datensätze und die Erstellung von Inhalten folgen dem Standardansatz von TYPO3 mit DataHandler.

Behandlung von Ausnahmen
Die Fehlerbehandlung wird mit benutzerdefinierten Exception Handler-Klassen für spezifische Szenarien verwaltet.

Verwendung von Interfaces
TYPO3 Core Interfaces werden für die Integration von Doc Header Buttons, Content Buttons und Context Menüs verwendet.

Code Refactoring und -Optimierung
Basisklassen werden implementiert, um Code-Redundanz zu reduzieren und die Optimierung zu verbessern.

ES6 im TYPO3 Backend
JavaScript Module werden nach dem neuen Ansatz mit JavaScriptModules.php und entsprechenden Importen hinzugefügt.

AJAX/Routen
AJAX-Anfragen werden für jede JavaScript-Anfrage verwendet, mit definierten Routen für verschiedene Aktionen.

Ereignis Listener
TYPO3 Core Events werden zusammen mit selbst entwickelten Events verwendet, um die gewünschten Funktionen zu erreichen.

Wir könnten viel über die Initiierung und den Weg von T3AI zu v4 schreiben. Unser Team hat fleißig gearbeitet, sich an die TYPO3-Kernstandards gehalten und sich auf die Benutzererfahrung konzentriert. Haben Sie T3AI schon erkundet? Wenn nicht, dann tauchen Sie ein und erleben Sie die Innovation!

Wir wünschen Ihnen viel Spaß mit TYPO3 AI!

Your One-Stop Solutions for Custom TYPO3 Development

  • A Decade of TYPO3 Industry Experience
  • 350+ Successful TYPO3 Projects
  • 87% Repeat TYPO3 Customers
TYPO3 Service
service

Post a Comment

×
Captcha Code Kann das Bild nicht gelesen werden? Klicken Sie hier, um zu aktualisieren
  • user
    Dirk Eberhardt 2024-09-25 um 9:50 pm

    The blog about TYPO3 AI is Great! It shows how T3Planet cares about quality by sticking to TYPO3's core guidelines. Learning that they didn’t have to write extra code to make it user-friendly is impressive. I'm excited to use T3AI!