Referenz: eigenes Portal
Das Werkzeug, mit dem wir selbst arbeiten.
Tickets, Zeiten, Angebote, Rechnungen, Verträge und die Überwachung der Server führen wir seit 2026 in einer eigenen Anwendung, die wir entwickeln, betreiben und jeden Tag benutzen. Was wir Kunden als interne Anwendung anbieten, hat hier zuerst den eigenen Alltag bestanden. Wie die Website im selben System läuft, zeigt die Referenz zur bytediver-Website.
Die Aufgabe und der Weg
Herausforderung und Umsetzung
Ein kleines Team braucht keine Konzernsoftware, aber einen Ort, an dem Tickets, Zeiten und Geld zusammenlaufen.
Ausgangslage
Die Herausforderung
Zeiterfassung in einem Werkzeug, Tickets in einem zweiten, Angebote und Rechnungen in einem dritten. Jeder Übergang war ein Abtippen, und die Frage nach den Kosten eines Projekts brauchte eine Tabelle. Dazu Kunden, deren Tickets in awork, GitLab und Jira liegen, und Server, deren Zustand niemand an einem Ort sah.Getrennte Werkzeuge, Fremde Ticketsysteme, Betrieb
Umsetzung
Die Umsetzung
Wir haben das Portal als eine Anwendung entwickelt, in der jeder Vorgang vom Ticket bis zur Rechnung an einem Faden hängt, und die fremden Ticketsysteme über ihre Schnittstellen eingebunden. Die Server melden ihren Zustand in dieselbe Oberfläche, ein Echtzeit-Dienst verteilt jede Änderung an alle offenen Sitzungen, und seit 2026 arbeiten wir täglich darin.Angular, PHP, Echtzeit
Startseite
Ein Blick, der den Tag ordnet
Was man sieht
Die Startseite ist ein Raster aus Kacheln, das jede Person im Team für sich anordnet. Darin liegen ausgewählte Tickets in Spalten je Status, der laufende Timer, der nächste Termin und die Kennzahlen der überwachten Anwendungen.
Was jemand nicht braucht, blendet er aus. Änderungen erscheinen ohne Neuladen, denn ein Echtzeit-Dienst verteilt jedes neue Ticket und jeden gestarteten Timer sofort an alle offenen Sitzungen.
Auf dem Handy stehen dieselben Kacheln untereinander. Wer unterwegs eine Zeit bucht oder ein Ticket weiterschiebt, braucht keine zweite App.
Angebote
Eine Spanne statt einer Zahl
Was die Funktion kann
Ein Angebot nennt bei uns keinen Festpreis für Unbekanntes, sondern eine Spanne samt den Annahmen, auf denen sie ruht. Jede Annahme trägt die Folge für den Aufwand, falls sie nicht zutrifft.
Der Kunde öffnet das Angebot über einen Link ohne Anmeldung, bestätigt die Annahmen einzeln und wählt optionale Positionen dazu. Was er bestätigt hat, ist später der Beleg, auf den sich ein Nachtrag stützt.
Anfrage, Kostenvoranschlag, Angebot, Vertrag und Rechnung hängen als ein Vorgang zusammen. Aus einem angenommenen Angebot werden Vertrag und Rechnungsentwurf vorbelegt, ohne dass jemand Kunde und Anschrift ein zweites Mal erfasst.
Tickets und Zeiten
Jede Minute hängt an einem Ticket
Was die Funktion kann
Ein Timer startet direkt am Ticket und nimmt Kunde und Projekt mit; wer lieber nachträgt, bucht die Dauer von Hand in dieselbe Maske. Ein Wecker je Timer warnt, bevor eine gesetzte Grenze erreicht ist, und stoppt nie von selbst.
Am Monatsende sucht niemand Zeiten zusammen: Offene Stunden liegen je Kunde bereit, und eine Abrechnungsregel macht daraus den Rechnungsentwurf.
Betrieb
Die Server melden sich, bevor der Kunde anruft
Was die Funktion kann
Für jede betriebene Anwendung zeigt das Portal Verfügbarkeit, Antwortzeit und Auslastung der Server bei Hetzner in Deutschland, die wir selbst betreuen. Schwellen lösen Meldungen aus, und nächtliche Lighthouse-Messungen bewerten, wie schnell und zugänglich eine Seite für Besucher ist.
Dazu kommen die Sicherungen samt ihrer Laufzeiten, bekannte Schwachstellen der eingesetzten Container-Images (der abgeschlossenen Software-Pakete je Anwendung) und die Updates, die auf einem Server anliegen. Was wir Kunden im Hosting zusagen, messen wir hier an unseren eigenen Anwendungen zuerst.
Warum selbst
Vier Gründe für eine eigene Anwendung
Ein eigenes Portal kostet Zeit, die sonst Kunden bekommen. Vier Gründe, warum sie gut angelegt ist.
foto
Prüfstand
Wir sind unser erster Kunde
Jede Funktion, die wir Kunden anbieten, läuft hier zuerst im eigenen Alltag. Was uns selbst stört, bessern wir nach, bevor ein Kunde es zu sehen bekommt.Ein Vorgang
Vom Ticket bis zur Rechnung an einem Faden
Anfrage, Angebot, Vertrag, Zeiten und Rechnung hängen aneinander. Wer die Rechnung öffnet, sieht den Weg dorthin, ohne in einem zweiten Werkzeug zu suchen.Automatik
Regeln, die abschaltbar sind
Erinnerungen, Fristen und Meldungen folgen Regeln, die ein Admin im Portal ein- und ausschaltet. Nichts läuft im Verborgenen, jeder Auslöser steht in einem Katalog.Datenschutz
Fristen, die ein Mensch einstellt
Wie lange das Portal Protokolle, Anfragen und Sicherungen aufbewahrt, steht in den Einstellungen, mit Untergrenzen, wo eine Norm sie verlangt. Die Aufräum-Läufe halten sich daran.
Womit umgesetzt
Technologien im Projekt
Die Technik ist dieselbe, die wir Kunden empfehlen: Werkzeuge, die wir jeden Tag selbst in der Hand haben.
logo
Oberfläche
Angular
Eine Oberfläche, die auf dem Schreibtisch ein Werkzeug ist und auf dem Handy eine App: dieselbe Grundlage wie in den Kundenportalen, die wir entwickeln.
Schnittstelle
PHP mit TYPO3 als API
Das Backend ist eine TYPO3-Erweiterung, die nur Daten liefert und keine Seiten. Rechte, Regeln und Vorgänge liegen dort, die Oberfläche fragt sie ab.
Echtzeit
Centrifugo
Jede Änderung geht als Nachricht an alle offenen Sitzungen: ein neues Ticket, ein gestarteter Timer, eine Meldung vom Server. Niemand lädt die Seite neu.
Auslieferung
Docker
Jeder Stand wird als geprüftes Paket ausgeliefert, das Test und Produktion gleich ausführen. Ausgeliefert wird erst, wenn alle Prüfungen der Pipeline grün sind.
Betrieb
Hetzner
Hetzner stellt die Server, der Standort ist Deutschland. Betriebssystem, Container und Updates verantworten wir selbst, mit Überwachung und Sicherungen aus demselben Portal.
Dokumente
Typst
Angebote, Rechnungen und Verträge entstehen als PDF auf unserem Briefpapier, gesetzt mit Typst in einem eigenen Dienst. Das Portal liefert die Daten, der Dienst setzt sie.
Referenzen
Wo dieselbe Technik noch arbeitet
Kundenportal
VSM Abrasives
Was im eigenen Haus entstanden ist, steht auch beim Kunden. Im Portal des Schleifmittelherstellers konfiguriert der Außendienst seine Angebote selbst.Angular, PHP, ERP-Anbindung
Referenz VSM Abrasives
Aus eigener Hand
bytediver-Website
Dieselbe Anwendung liefert die Seite aus, die du gerade liest: TYPO3 gibt die Inhalte, Angular zeigt sie.TYPO3 headless, Angular
Referenz bytediver-Website
Signal senden
Fragen zum eigenen Portal? Sprich direkt mit Tim.
Interne Anwendungen
Angular
Betrieb
Tim Rücker
Geschäftsführer
Nächster Schritt
Alle Vorgänge an einem Ort statt in getrennten Werkzeugen?
Tickets, Zeiten und Rechnungen liegen bei dir in getrennten Werkzeugen? Zeig uns, wo das Abtippen beginnt.
Wir zeigen dir, was eine eigene Anwendung zusammenführt und wo eine Regel genügt.