<style>html[data-arrive]:not([data-fonts-ready]) .bd-page-fade, html[data-arrive]:not([data-fonts-ready]) .bd-page-light { animation-play-state: running; }</style>

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 des bytediver-Portals mit Ticketkacheln, laufendem Timer und Betriebszahlen, Desktop und Handy

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.

Annahme-Seite eines Angebots im bytediver-Portal mit Annahmen und Positionen mit Mengenspanne, Desktop

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.

Zeitbuchung am Ticket im bytediver-Portal mit laufendem Timer und Ticketliste, Desktop

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.

Server-Überwachung im bytediver-Portal mit Verfügbarkeit, Auslastung und Lighthouse-Werten, Desktop

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.

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 von Angular

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.

Logo von PHP

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.

Logo von Centrifugo

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.

Logo von Docker

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.

Logo von Hetzner

Betrieb

Hetzner

Hetzner stellt die Server, der Standort ist Deutschland. Betriebssystem, Container und Updates verantworten wir selbst, mit Überwachung und Sicherungen aus demselben Portal.

Logo von Typst

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

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

Alle Referenzen

Signal senden

Fragen zum eigenen Portal? Sprich direkt mit Tim.

Portrait von Tim Rücker
  • 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. Wo sich bei dir Werkzeuge zusammenlegen lassen, sehen wir im kostenlosen Erstgespräch von 30 Minuten.