Technik bei AMCON: Fortschritt, Projekte & digitale Lösungen - AMCON SYSTEMLÖSUNGEN GMBH

Entwicklung eines LLM-Systems bei AMCON

verenadrees — Thu, 06 Mar 2025 11:09:13 +0000

Die Integration von künstlicher Intelligenz (KI) in Unternehmen ist heutzutage kein Luxus mehr, sondern eine Notwendigkeit. Bei AMCON arbeiten wir daran, effiziente und sichere KI-Systeme zu entwickeln, um unsere internen Prozesse zu optimieren. Ein besonderer Fokus liegt dabei auf der Entwicklung eines lokalen Large Language Models (LLM). Dieses arbeitet mit Retrieval-Augmented Generation (RAG) und ReACT-Agenten. Der Datenschutz steht dabei im Vordergrund: Alle Daten verbleiben auf lokalen Servern und werden nicht ins Internet übertragen.

Terminologien und Grundlagen der KI

Was sind LLMs?

Large Language Models (LLMs) wie GPT-4, Llama 3.2 oder Gemini 2.0 sind KI-Systeme, die darauf trainiert sind, natürliche Sprache zu verarbeiten und zu generieren. Sie können Texte analysieren, Zusammenfassungen erstellen oder Code generieren. Diese Modelle basieren auf Transformer-Architekturen und verwenden Mechanismen wie „Attention“, um kontextbezogene Vorhersagen zu treffen.

Embedding & RAG

Embedding-Modelle wandeln Text in Zahlenvektoren um, die es KI-Systemen ermöglichen, Beziehungen zwischen Wörtern, Sätzen oder Dokumenten zu erkennen. RAG (Retrieval-Augmented Generation) verbessert LLMs durch die Integration externer Wissensquellen. Das bedeutet, dass das Modell nicht nur auf bereits gelernten Daten basiert, sondern auch relevante Informationen aus internen Datenbanken oder Dokumenten abrufen kann. Dies geschieht in zwei Phasen: der Retrieval-Phase, in der relevante Dokumente identifiziert werden, und der Generations-Phase, in der die KI eine fundierte Antwort formuliert.

ReACT-Agenten

ReACT (Reasoning + Acting) ist eine Technik, bei der KI-Agenten nicht nur auf Anfragen reagieren. Sie führen auch komplexe Entscheidungsprozesse durch. Sie kombinieren Schlussfolgerungen mit gezielten Aktionen. So können sie beispielsweise Jira- oder Confluence-Daten intelligent auswerten. Durch den Einsatz von Reinforcement Learning und regelbasierter Entscheidungsfindung können diese Agenten selbstständig Anfragen priorisieren und Aufgaben delegieren. Dabei stehen den Agenten verschiedene Werkzeuge zur Verfügung, die sie je nach Bedarf einsetzen können – z.B. das Abfragen von APIs, das Durchsuchen interner Datenquellen oder das Abrufen externer Informationen.

Anwendungsfall: Lokales LLM für AMCON

Technologische Umsetzung

Das System basiert auf mehreren zentralen Komponenten:

Daten & Retrieval: Dokumente und Inhalte aus Jira und Confluence werden strukturiert verarbeitet und für das LLM aufbereitet. Dies geschieht durch eine Kombination aus regulären Ausdrücken zur Textextraktion und Transformer-basierten Modellen zur semantischen Analyse.
Embedding & RAG: Die Dokumente werden in Vektoren transformiert, damit das Modell gezielt auf relevante Informationen zugreifen kann. Dazu wird das Embedding-Modell multilingual-e5-large verwendet.
Backend & Model Access: Eine interne API verbindet verschiedene Anwendungen mit dem KI-System. Dabei werden Technologien wie FastAPI für die API-Schnittstelle und ONNX für die performante Modellinferenz eingesetzt. Der ReACT-Agent kann mit den APIs von Confluence und Jira kommunizieren, um bei Bedarf relevante Informationen abzurufen. Dies geschieht über die Atlassian Python API, die dem Agenten zur Verfügung gestellt wird und für Jira und Confluence optimiert wurde.
Frontend: Eine benutzerfreundliche Webschnittstelle zur einfachen Interaktion mit dem KI-Modell wird noch implementiert.
Verwendete Technologien: Für die Speicherung und Verarbeitung von Vektordaten nutzen wir ChromaDB, als Sprachmodelle setzen wir auf Llama 3.2 und Gemma.
Langchain & LangGraph: Die gesamte Architektur wurde mit LangChain und LangGraph aufgebaut, um komplexe Interaktionen zwischen Agenten, Datenquellen und Retrieval-Mechanismen effizient zu orchestrieren.

Herausforderungen bei der Entwicklung

Datenschutz und Sicherheit

Da alle Daten lokal gespeichert werden, mussten wir sicherstellen, dass unser System nicht auf externe Server zugreift. Außerdem ist eine robuste Zugriffskontrolle erforderlich, damit nur autorisierte Benutzer auf sensible Informationen zugreifen können. Dazu setzen wir auf OAuth 2.0 und rollenbasierte Zugriffskontrollen.

Modelloptimierung

Ein LLM lokal zu betreiben, bedeutet, dass es performante Hardware-Ressourcen benötigt. Daher mussten wir das Modell optimieren, um einen guten Kompromiss zwischen Leistung und Effizienz zu finden. Hier setzen wir Techniken wie Quantisierung (z.B. mit HuggingFace’s bitsandbytes) und Knowledge Distillation ein, um Speicher- und Rechenanforderungen zu reduzieren.

Integration in bestehende Systeme

Die nahtlose Integration in Jira und Confluence war eine Herausforderung, da unterschiedliche Datenformate verarbeitet und harmonisiert werden mussten. Die Entwicklung spezieller Retriever spielte dabei eine zentrale Rolle. Eine Kombination aus schlagwortbasierten und semantischen Suchmethoden ermöglicht eine sehr effiziente und präzise Informationsbereitstellung.

Zukunftsaussichten

In den kommenden Jahren werden wir uns darauf konzentrieren, das System weiter zu verbessern:

Optimierung des Inferenzprozesses: Schnellere und präzisere Antworten durch spezialisierte Modellarchitekturen und effizientere Implementierung der Verarbeitungspipelines.
Erweiterung der Agentenfunktionalität: Entwicklung und Implementierung neuer KI-Agenten für spezifische Geschäftsaufgaben, u.a:
Code Improvement Agent: Analysiert bestehenden Code, identifiziert Optimierungspotenziale und schlägt effizientere Lösungen vor.
Onboarding Agent: Unterstützt neue Mitarbeiter bei der Einarbeitung durch Bereitstellung relevanter Dokumentationen und Unternehmensrichtlinien.
Projektmanagement-Assistent: Hilft bei der Koordination von Aufgaben, der Zuweisung von Ressourcen und der Verfolgung des Projektfortschritts.
Templating Agent: Automatisiert die Erstellung von Vorlagen und Standarddokumenten zur Effizienzsteigerung.
Neue bzw. bessere LLMs: Integration neuer, leistungsfähigerer LLMs wie zukünftige Versionen von Llama, DeepSeek sowie domänenspezifische Einbettungsmodelle.
Adaptive Werkzeugnutzung durch Agenten: Die Agenten erhalten eine flexible Toolchain, die es ihnen erlaubt, je nach Bedarf unterschiedliche Werkzeuge wie API-Abfragen, semantische Suche oder externe Datenquellen zu nutzen.
Erweiterte Retrievalmethoden: Verbesserung des Information Retrieval durch hybride Suchtechniken, die semantische und klassische Indexierung kombinieren.
Skalierbarkeit und Infrastruktur: Evaluierung und Implementierung neuer Hard- und Softwarelösungen zur Skalierung der KI-Architektur, z.B. durch dezentrale Verarbeitung und spezialisierte KI-Beschleuniger.
Bessere Integration in bestehende Geschäftsprozesse: Gewährleistung einer nahtlosen Integration der KI-Lösung in bestehende Arbeitsabläufe und Anwendungen, um die betriebliche Effizienz weiter zu steigern.

Fazit

Mit der Entwicklung eines lokalen LLM-Systems hat AMCON einen wichtigen Schritt in Richtung KI-gestützter Prozessoptimierung gemacht. Durch den Einsatz von RAG- und ReACT-Agenten kann Unternehmenswissen effizienter genutzt werden, ohne Kompromisse beim Datenschutz einzugehen. Die Zukunft der KI bei AMCON liegt in der kontinuierlichen Weiterentwicklung dieser Technologien, um einen maximalen Mehrwert für die Mitarbeiter zu schaffen. Gleichzeitig setzen wir auf eine enge Verzahnung mit bewährten DevOps- und MLOps-Strategien, um den Entwicklungszyklus effizient zu gestalten und eine kontinuierliche Verbesserung zu gewährleisten.

Der Beitrag Entwicklung eines LLM-Systems bei AMCON erschien zuerst auf AMCON SYSTEMLÖSUNGEN GMBH.

Gamechanger für UX und ÖPNV: Wie das Barrierefreiheitsstärkungsgesetz alle in Bewegung bringt

verenadrees — Mon, 09 Dec 2024 11:16:20 +0000

Was ist User Experience Design (UX-Design)?

User Experience Design (kurz UX-Design) befasst sich mit der Analyse und Optimierung der Nutzerfreundlichkeit eines Produkts, um so die Zufriedenheit und Zugänglichkeit für die Anwender zu optimieren. Es geht darum, wie ein Benutzer (User) die Erfahrung (Experience) mit einem Produkt wahrnimmt – sei es eine Software, Hardware oder eine Kombination aus beidem.

Wir bei AMCON beziehen uns in der Regel auf die UX bei der Nutzung von Software im Zusammenspiel mit der verwendeten Hardware in dem jeweiligen Nutzungskontext. Wir schaffen intuitive und zugängliche Lösungen, die optimal an die Bedürfnisse der Benutzer angepasst sind.

Beispiele bei AMCON:

Software:

Windows-Apps
Mobile-Apps
Web-Apps
Websites

Hardware:

PC und Laptops
Smartphones und Tablets
Automaten und Kassensysteme
Spezielle Monitore, wie z. B. Fahrgastmonitore in Bussen

Nutzungskontexte:

Arbeiten im Büro
Unterwegs im Freien
Umgebungen mit hohem Lärmpegel
Nutzung bei kleinen Monitoren oder unter Stress
Einflüsse wie starker Lichteinfall oder Dunkelheit

Barrierefreiheit: Ein Schlüsselaspekt moderner UX

Barrierefreiheit ist ein zentrales Thema des modernen UX-Designs. Sie stellt sicher, dass digitale Produkte für Menschen mit unterschiedlichsten Fähigkeiten und Einschränkungen zugänglich sind. Barrierefreies Design sorgt nicht nur dafür, dass alle Nutzer von digitalen Anwendungen profitieren können, sondern steigert auch insgesamt die Benutzerzufriedenheit und fördert die Inklusion.

Technologien, die Barrieren abbauen

Ein Beispiel für eine mittlerweile alltäglich genutzte Technologie, die ursprünglich als Hilfsmittel für Menschen mit Behinderungen entwickelt wurde, ist die Autovervollständigung beim Schreiben. Ebenso tragen Sprachsteuerung und smarte Assistenten nicht nur zur Bequemlichkeit bei, sondern ermöglichen vielen Menschen den Zugang zu digitalen Produkten. Sie stehen sinnbildlich für ein Design, das echte Teilhabe schafft.

Rechtlicher Hintergrund des BFSG

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist ein deutsches Gesetz, das am 22. Juli 2021 verabschiedet wurde und auf der EU-Richtlinie zur Barrierefreiheit von Produkten und Dienstleistungen (Richtlinie (EU) 2019/882) basiert. Es ist ein bedeutender Schritt, um die Barrierefreiheit in digitalen und physischen Produkten sowie Dienstleistungen zu fördern und zu verbessern, um damit die digitale Teilhabe zu stärken.

Das Gesetz tritt bis 2025 vollständig in Kraft und betrifft dann auch den privaten Sektor und nicht mehr nur öffentliche Stellen:

Ab dem 28. Juni 2025 müssen alle betroffenen Produkte und Dienstleistungen den neuen Anforderungen des BFSG entsprechen.
Produkte und Dienstleistungen, die vor diesem Datum eingeführt wurden, können vorübergehend weiterhin genutzt werden, jedoch müssen auch diese in absehbarer Zeit den Anforderungen angepasst werden.

Bereits heute sollte also Barrierefreiheit von Anfang an in den Designprozess integriert werden, um zukünftigen Anforderungen gerecht zu werden und Inklusion aktiv zu fördern.

Konsequenzen bei Nichteinhaltung

Unternehmen, die die Vorgaben des BFSG nicht einhalten, müssen mit Sanktionen und rechtlichen Konsequenzen rechnen. Da das BFSG eine gesetzliche Verpflichtung darstellt, kann eine Missachtung bspw. zu Bußgeldern führen. Darüber hinaus kann die Missachtung der Barrierefreiheitsanforderungen auch negative Auswirkungen auf das Markenimage haben. Ein Mangel an Barrierefreiheit kann zu Reputationsverlusten führen und das Vertrauen der Kundschaft beeinträchtigen.

Ein positives Beispiel hingegen zeigt, dass barrierefreies Design nicht nur gesetzliche Anforderungen erfüllt, sondern auch eine Gelegenheit darstellt, sich als inklusives und verantwortungsbewusstes Unternehmen zu positionieren.

Relevanter Anwendungsbereich des BFSG

Das BFSG umfasst eine Vielzahl von Produkten und Dienstleistungen und verpflichtet Unternehmen, Barrierefreiheit für bestimmte digitale und physische Produkte zu gewährleisten. Der Anwendungsbereich des BFSG ist vielseitig und umfasst u.a. folgende Produkte und Dienstleistungen ein:

Digitale Dienstleistungen wie Websites, mobile Apps und Software, die der breiten Öffentlichkeit zugänglich sind.
Öffentliche Verkehrsmittel und Ticketautomaten – Geräte und Informationen im öffentlichen Verkehrswesen müssen barrierefrei gestaltet sein.
E-Commerce – Online-Marktplätze und -Shops müssen sicherstellen, dass ihre Plattformen den Anforderungen an die Barrierefreiheit entsprechen.

Von den Regelungen ausgenommen sind Produkte, die ausschließlich von Fachpersonal genutzt werden und somit nicht der breiten Öffentlichkeit zugänglich sind.

Besonders im Bereich des öffentlichen Personennahverkehrs (ÖPNV) spielt das BFSG eine zentrale Rolle. Personen, die im Vertrieb und Einkauf von Verkaufs- und Kontrollsystemen tätig sind, sollten das Gesetz kennen, da Verkaufsautomaten, Ticket-Web-Shops und Mobil-Apps unter die Regelungen für digitale und physische Produkte fallen.

Anforderungen und Normen für UX-Design und Barrierefreiheit

Das BFSG legt spezifische Anforderungen fest, die digitale Produkte und Dienstleistungen erfüllen müssen. Die Richtlinien stützen sich auf die Web Content Accessibility Guidelines (WCAG) 2.1, die als international anerkannter Standard für Barrierefreiheit gelten.

Die Anforderungen lassen sich auf folgende Bereiche aufschlüsseln:

Wahrnehmbarkeit: Informationen und Benutzeroberflächen müssen für alle Nutzer wahrnehmbar sein. Beispielsweise sollen Textalternativen für Bilder bereitgestellt und audiovisuelle Inhalte mit Untertiteln versehen werden
Bedienbarkeit: Die Interaktion mit den digitalen Oberflächen muss uneingeschränkt möglich sein. Alle Funktionen sollen/müssen über die Tastatur zugänglich sein, und Benutzer sollen ausreichend Zeit zur Interaktion haben.
Verständlichkeit: Inhalte und Navigation sollen leicht verständlich und vorhersehbar sein. Dabei ist es wichtig, klare Beschriftungen, konsistente Navigation und verständliche Formulierungen zu verwenden.
Robustheit: Die Inhalte müssen robust und mit unterschiedlichen Hilfsmitteln wie Screenreadern kompatibel sein, sodass sie von Menschen mit Behinderungen genutzt werden können.

Zusätzlich zu diesen Bereichen gibt es Konformitätsstufen, die die Erreichung der Anforderungen bewerten. Ähnlich wie bei der Energieeffizienzskala werden die Stufen A, AA und AAA verwendet. Um die gesetzlichen Vorgaben zu erfüllen, genügt es, die Anforderungen der Stufen A und AA umzusetzen.

A: niedrigste Stufe, höchste Priorität
AA: dies ist der Standard, der für gute Zugänglichkeit erreicht werden sollte
AAA: höchste Stufe, niedrigste Priorität

Konkrete Hinweise zu den Barrierefreiheitsstandards finden sich direkt bei der WCAG.

Deutsche Hinweise zum Thema gibt es bei Der Beauftragte der Bundesregierung für Informationstechnik.

Relevanz des BFSG für UX-Designer

Das Barrierefreiheitsstärkungsgesetz (BFSG) stellt UX-Designer und Entwickler vor die Herausforderung, Barrierefreiheit von Anfang an in ihre Projekte zu integrieren. Das Gesetz schafft klare Standards, die in der Gestaltung berücksichtigt werden müssen. Hier sind einige praktische Schritte für UX-Designer:

Barrierefreiheit als festen Bestandteil im Designprozess verankern: Ähnlich wie andere Designziele sollte auch Barrierefreiheit von Anfang an in der Projektplanung berücksichtigt werden.
Testing und Prototyping: Durch regelmäßiges Testing mit Tools und realen Nutzern, die unterschiedliche Einschränkungen aufweisen, können UX-Designer sicherstellen, dass ihre Produkte in der Praxis barrierefrei funktionieren.
Standards kennen und anwenden: Die WCAG 2.1-Richtlinien und andere Barrierefreiheitsstandards bieten eine solide Grundlage, um die Anforderungen des BFSG umzusetzen.
Schulung und Weiterbildung: Barrierefreiheit erfordert spezialisiertes Wissen. Daher ist es hilfreich, Schulungen zu besuchen und auf dem neuesten Stand der Best Practices zu bleiben.

Fazit: Barrierefreiheit als zentraler Baustein im modernen UX-Design

Das BFSG ist ein bedeutender Schritt in Richtung einer inklusiveren digitalen Welt. Besonders im deutschen ÖPNV, wo Ticketkäufe eine große Hürde durch die vielen verschiedenen Tarife und Regeln mit komplexen Verkaufsoberflächen darstellen, wird die Umsetzung des BFSG eine Verbesserung für alle Fahrgäste schaffen. Für UX-Designer und -Entwickler bedeutet es, Barrierefreiheit als Standard zu betrachten und in den gesamten Designprozess zu integrieren. Die Einhaltung der gesetzlichen Anforderungen fördert nicht nur die Zufriedenheit der Nutzer, sondern stellt sicher, dass Produkte und Dienstleistungen von allen Menschen genutzt werden können.

Darüber hinaus bietet das Gesetz Unternehmen die Chance, ihr Markenimage zu stärken, die Kundenzufriedenheit zu steigern und innovative, inklusive Lösungen zu entwickeln. Eine frühzeitige und umfassende Umsetzung von Barrierefreiheitsstandards ist dabei der Schlüssel für ein nachhaltiges und zukunftssicheres Produkt – Eben Soft- und Hardware, die ALLE bewegt.

Der Beitrag Gamechanger für UX und ÖPNV: Wie das Barrierefreiheitsstärkungsgesetz alle in Bewegung bringt erschien zuerst auf AMCON SYSTEMLÖSUNGEN GMBH.

Erfahrung als Teilnehmer an der Project Management Championship

verenadrees — Fri, 14 Apr 2023 11:25:14 +0000

Eduard Stremel hatte das Glück, als Teilnehmer an der 9. Project Management Championship in Kooperation mit der Infineon Technologies AG in München teilzunehmen und erzählt uns davon in diesem Blogbeitrag. Die Veranstaltung fand am 31.03.2023 statt und brachte Teams von verschiedenen Hochschulen aus Deutschland zusammen, die um den Titel des nationalen Champions im Projektmanagement wetteiferten.

Wir haben zuvor noch nie von einer solchen Veranstaltung gehört und waren fasziniert von der Idee, dass Studierende aus verschiedenen Hochschulen in Deutschland die Chance haben, ihre Projektmanagement-Fähigkeiten zu messen und ihr Wissen zu erweitern. Die Qualifikation für das nationale Finale erfolgte über eine Online-Qualifikationsrunde, bei der die Teams 100 Fragen im Rahmen eines Multiple-Choice Tests in einem Zeitraum von 100 Minuten absolvieren müssen.

Da wir das Modul zum Projektmanagement erst im nächsten Semester bearbeiten werden, hatten wir Bedenken, ob wir überhaupt die notwendigen Fähigkeiten und Kenntnisse besitzen, um erfolgreich zu sein. Aber wir beschlossen es zu versuchen und gaben unser Bestes bei der Qualifikationsrunde. Schlussendlich hatte unsere Gruppe das Glück, sich für das Finale zu qualifizieren und durften uns so auf die spannende Herausforderung vorbereiten.

In München angekommen trafen wir uns am Vorabend des Wettbewerbs im Scandic Hotel und hatten die Gelegenheit, uns kennenzulernen und in einer entspannten Atmosphäre mit den anderen Teams auszutauschen. Das gemeinsame Abendessen und Get-together war eine großartige Möglichkeit, sich auf den nächsten Tag vorzubereiten und aufeinander einzustimmen.

Am Tag des Wettbewerbs startete der offizielle Teil mit der Vorstellung der GPM und GPM Young Crew. Anschließend erhielten wir eine Case Study von der Infineon AG, bei der wir eine globale Projektmanagement-Konferenz innerhalb von fünf Stunden planen sollten. Die Aufgabe, die wir bearbeiten mussten, war anspruchsvoll und umfangreich, aber mit viel Zusammenarbeit und Kreativität haben wir es geschafft, alle Anforderungen zu erfüllen. Dank unserer guten Teamarbeit und der Anwendung geeigneter Projektmanagement-Methoden wie der Stakeholder-Matrix und der Umfeldanalyse konnten wir die Aufgabe mit großem Erfolg umsetzen. Abschließend präsentierten alle Gruppen ihre Ergebnisse während einer zehnminütigen Präsentation.

Bevor sich die Expertenjury zur Besprechung und Bewertung der Ergebnisse zurückzog, bekamen wir eine Firmenbesichtigung auf dem Infineon-Gelände. Dabei wurden uns die Produkte von Infineon und ihre Anwendungen beim Endverbraucher erläutert. Es war sehr interessant, die Produkte zu sehen und zu erfahren, wie sie zum täglichen Leben beitragen.

Am Abend fanden sich dann alle Teilnehmer, Sponsoren, die Jury und das Orga-Team der Young Crew in der Rooftop Abendlocation von Infineon ein, wo die Preisverleihung und das Gala-Event stattfanden. Leider hat es nicht ganz für den Sieg gereicht, jedoch konnte unser Team trotzdem überzeugen, was uns aufgrund unserer fehlenden Erfahrung besonders gefreut hat. Zudem bekamen wir ausführliches Feedback der Jury und konnten so neuen Input mitnehmen, der uns in gewisser Weise schon auf das Projektmanagement im nächsten Semester vorbereitete.

Fazit

Unsere Gruppe war durchweg positiv überrascht. Die Organisation und Location der Veranstaltung haben uns sehr begeistert, da Infineon über einen sehr großen Campus verfügt. Für mich persönlich war die Teilnahme am Finale der Project Management Championship in München eine unglaubliche Erfahrung. Vor allem die Gelegenheiten, die ich während der Veranstaltung hatte, um mich mit anderen Studierenden und Projektmanagement-Experten zu vernetzen und auszutauschen, waren sehr lehrreich.

Insgesamt war die Project Management Championship eine unglaubliche Erfahrung und ich würde es jedem empfehlen, der in diesem Bereich tätig ist oder sich für Projektmanagement interessiert. Es ist eine großartige Chance, neue Methoden und Techniken zu erlernen, von den Erfahrungen anderer zu profitieren, sich zu vernetzen und Spaß zu haben. Ich bin sehr dankbar für die Erfahrung und freue mich darauf, in Zukunft an ähnlichen Veranstaltungen teilzunehmen.

Der Beitrag Erfahrung als Teilnehmer an der Project Management Championship erschien zuerst auf AMCON SYSTEMLÖSUNGEN GMBH.

Eyetracking als Ersatz für die Maus

verenadrees — Tue, 14 Dec 2021 11:30:34 +0000

Projektziel

Bei dem Projekt handelt es sich darum (wie der Name schon vielleicht vermuten lässt), die Maus durch eine Eyetrackingleiste zu ersetzen, um den eigenen Workflow zu optimieren. Es ist nicht das Ziel des Projekts den Computer nur per Eyetracking zu benutzen. Die Verwendung der Eyetrackingleiste muss (bei unserer Implementierung) in Verbindung mit der Tastatur verwendet werden. Die Vorstellung ist es, dass, wie bei dem Texteditor Vi, bei der Bedienung sich nur auf die Tastatur zu verlassen und diese mit den Händen nie zu verlassen. Der Vorteil gegenüber dem Vi zum Eyetracking soll dann sein, dass man nicht 100 verschiedene Shortcuts auswendig lernen muss, sondern lediglich 5-8 und trotzdem nie die Hände von der Tastatur nimmt.

Vergleich zwischen dem Arbeiten mit einer Maus und mit Eyetracking

Die Abbildung veranschaulicht nochmal wie viel Schritte mehr das Arbeiten mit einer Maus gegenüber dem Arbeiten mit Eyetracking braucht.

Für den Abschluss des Bachelor an der HSW muss jeder Studierende im 5. und 6. Semester an einem Projektstudium mitarbeiten. Das Projektstudium ist ein Projekt, das (in der Regel) von einem externen Unternehmen gestellt wird, in dem die Studierenden sich selbst organisieren müssen, um die Anforderungen zu erfüllen. Lars Kölker, Lukas Hein und ich haben uns für das Projekt „Eyetracking als Mausersatz“ entschieden.

Projektvergangenheit

Das Projekt ist schon 5 Jahre alt und wurde zuvor von anderen Studierenden bearbeitet. In der Vergangenheit wurde bereits ein C#-Projekt angelegt, mit dem die Daten einer Tobii-Eyetrackingleiste ausgelesen und per Shortcuts in Maus-Inputs umgewandelt werden können. Die Anwendung hat bei unserer Übernahme auch Funktionen zum Scrollen und Vergrößern.

Es existiert außerdem eine Lern- und Testsoftware (TuLs), mit der die Bedienung der Eyetrackingleiste in Kombination mit unserer Software erlernt und getestet werden kann. Die Software war vor allem für die Nutzerstudien, die in der Vergangenheit durchgeführt wurden, wichtig.

Test- und Lernsoftware (TuLs)

Unser Ziel

Wir haben zu Beginn des Projektstudiums drei Anforderungen bekommen:

Konzeptionierung und Entwicklung für eine Lösung des Rand-Problems der Lupe
Implementierung eines neuen Scrolling-Ansatzes
Erstellung eines Papers

Die Fisheye-Lupe

Die Fisheye-Lupe ist ein wichtiges Feature für die Bedienung des Computers mit der Eyetrackingleiste. Das Feature dient als Ausgleich für die noch vorhandene Ungenauigkeit der Eyetrackingleiste. Es wurde sich für eine Fisheye-Lupe im Gegensatz zu einer linearen Lupe entschieden, damit eine verlustfreie Vergrößerung geboten werden kann. Der Hintergrund ist, dass die Lupe ähnlich wie ein Mausklick auch nicht unbedingt mit einer 100%igen Genauigkeit platziert werden kann. Eine Vergrößerung mit Verlust könnte deswegen aus Versehen den Bereich verdecken, der eigentlich vergrößert werden sollte.

Das Rand-Problem

Ein Problem, das mit der Lupe noch besteht, ist die Bedienung der Lupe am Rand des Bildschirms. Wird die Lupe nämlich nah am Rand verwendet, kann es sein, dass ein Teil des vergrößerten Bereiches außerhalb des Bildschirmes ragt.

Fisheye-Lupe am Rand

Um diesem Problem entgegenzuwirken, haben wir ein Konzept für die Fisheye-Lupe am Randbereich durchdacht. Die Überlegung ist, dass die Lupe in der Nähe vom Rand sich, ähnlich wie ein Wassertropfen, an den Rand des Bildschirmes schmiegt.

Konzept für die Teardrop-Lupe

Dies verlangt aber, dass der vergrößerte Bereich nicht mehr am Blickpunkt zentriert sein kann, sondern in Richtung der Bildschirmmitte wächst. Dies wiederum löst ein weiters Problem aus: Der Punkt, auf den ein Benutzer seinen Blick fokussiert, bewegt sich abrupt an eine neue Stelle. Ein solches Verhalten kann einen Benutzer kurz desorientieren. Eine Lösung für dieses Problem ist eine animierte Lupe, die laufend auf eine vorbestimmte Größe heranwächst.

Neuer Scrolling-Ansatz

Die bisherige Art des Scrollens mit unserer Anwendung ist ähnlich wie das Scrollen mit der mittleren Maustaste. Um zu scrollen muss erst der Scrolling-Modus aktiviert werden, dann kann durch Bewegung des Blickpunktes an den oberen oder unteren Bildschirmrandes gescrollt werden. Der Nachteil an diesem Ansatz ist, dass eine Seite nicht während des Scrollens durchsucht werden kann, weil durch die Bewegung des Blickpunktes das Scrollen gesteuert wird.

Der neue Ansatz löst das Problem des aktuellen Scrolling-Modus. Dieser funktioniert so: Der Anwender sucht sich auf dem Bildschirm einen Blickpunkt aus und druckt einen von zwei Shortcuts. Je nach Shortcut wird dann der Blickpunkt an den oberen oder untern Bildschirmrand bewegt. Während des Scrollings ist der Benutzer in der Lage, die Seite zu scannen. Der Ansatz kann mit den Tasten „Bild auf“ und „Bild ab“ verglichen werden.

Erstellung eines Papers

Das letzte Ziel unseres Projektstudiums ist die Erstellung eines Papers. Eigentlich sollte ursprünglich das Paper den neuen Scrolling-Ansatz als Thema behandeln. Aber wie sich im Nachhinein herausstellte, wurde das Thema schon vor ein paar Jahren von einer anderen Person genauso behandelt. Es musste also kurzfristig ein neues Thema her. Wir hatten uns deswegen für eine neue Funktion entschieden: die Auto-Lupe.

Die Idee ist: Wenn unsere Anwendung erkennt, dass sehr viele klickbare Objekte sich am Klickpunkt befinden, dann soll statt einem Klick die Lupe geöffnet werden. Für die Erkennung, ob die Lupe jetzt geöffnet werden soll, wurden sich schon zwei Konzepte überlegt:

Erkennung über Kantenzählung
Erkennung über Machine Learning

Die Erkennung über Kantenzählung ist eine ziemlich simple Lösung. Es wird einfach mit einer Bildverarbeitungsbibliothek gezählt, wie viele abgeschlossene Blöcke es gibt. Anhand eines festen Schwellenwerts wird dann entschieden, ob die Lupe geöffnet wird oder nicht.

Das zweite Konzept ist im Vergleich dazu nicht so simple. Es soll nämlich ein Machine Learning Algorithmus trainiert werden, welcher potenziell klickbaren Objekte innerhalb eines Bildausschnittes zählt. Um so einen Algorithmus zu trainieren, braucht es wiederum viele Testdaten mit Bildausschnitten und der dazugehörigen Anzahl an klickbaren Objekten.

Fazit

Der Blogeintrag ist nur eine kurze Zusammenfassung von dem, was wir eigentlich alles behandeln und wissen. Eigentlich haben wir aus auch noch coolere Bezeichnungen für einzelnen Features ausgedacht, aber diese wurden der Einfachheit halber weg gelassen.

Insgesamt kann man sagen, dass Lars Kölker, Lukas Hein und ich ein sehr spaßiges und interessantes Projektstudium ausgesucht haben. Wenn ihr weitere Fragen zu unserm Projektstudium habt, könnt ihr gerne auf uns zu kommen.

Der Beitrag Eyetracking als Ersatz für die Maus erschien zuerst auf AMCON SYSTEMLÖSUNGEN GMBH.

Aufsetzen eines „Pi-Hole“ netzwerkweiten AdBlockers

verenadrees — Wed, 20 Oct 2021 11:32:44 +0000

Wie Du Werbung aus Apps und deinem Smart-TV verbannst

Werbung im Internet kann ziemlich nervig sein. Vor allem wenn Du Dir ein Youtube-Video anschaust und alle paar Minuten 1-2 Spots eingeblendet werden. Gleiches gilt auch für „kostenlose“ Apps. Ob Wetter-, Spiel oder Übersetzungs-App – irgendwann startet die Werbung. Um das zu verhindern habe ich ein Pi-Hole aufgesetzt und erkläre Dir im Blogbeitrag, wie das funktioniert.

Was ist ein "Pi-Hole"?

Ein Pi-Hole ist Software die auf einem Raspberry Pi (ein kleiner Mikro-PC) läuft und sämtliche Werbung aus einem Netzwerk rausfiltern kann.

Dies geschieht, indem die Geräte, welche im Heimnetz sind, den Pi-Hole anstelle ihres normalen DNS (Domain Name Server) benutzen.

Der DNS ist das was der Router bzw. der PC anfragt, um aus einer Internetadresse eine IP-Adresse zu bekommen.

Wird also von z.B. Youtube eine Anfrage für „www.NervigerWerbeanbieter.de“ losgeschickt, um die übliche nervige Werbung zu laden, so wird diese abgefangen und stattdessen nichts zurückgegeben.

Warum brauche ich einen Pi-Hole?

Ein Pi-Hole kann nicht nur Werbung von Internetseiten in einem üblichen Browser blockieren (wie es ein normales Adblocker Plugin für den Browser auch tut), sondern dies zum Beispiel auch innerhalb von Apps auf dem Handy oder auch in der Youtube-App eines Smart-TVs machen.

Und das ganze netzwerkweit, ohne dass auf irgendeinem der Geräte ein eigener Adblocker läuft.

Hier die einzelnen Schritte:

Raspberry Pi aufsetzen

1. Falls Du noch keinen Raspberry Pi hast, kannst Du Dir einen auf der offiziellen Seite bestellen. Es gibt sie aber auch als ganze Sets auf Amazon oder ähnlichen Seiten. Für den Pi-Hole eignen sich fast alle Arten des Raspberry Pi, da die Anforderungen recht gering sind. Ich gehe im Weiteren von einem Raspberry Pi 3B aus, welchen ich zuhause hierfür verwendet habe. Du solltest auf jeden Fall darauf achten, dass Du ein passendes Netzteil dazu besorgst, speziell eines mit 2,5A/5V. herkömmliche USB-Netzteile sind meistens nur auf 1A/5V ausgelegt und führen dann zu sog. „Brownouts“. Bei einem Raspberry Pi siehst Du, falls es zu einem Brownout kommt, wenn oben rechts am Bildschirm ein Blitzsymbol erscheint.
2. Als nächstes musst Du ein Betriebssystem auf eine SD-Karte „etchen“. Dafür benutze ich den Raspberry Pi Imager, wobei es aber noch andere sog. Etchingtools gibt wie z.B. Balena.
3. Jetzt brauchst Du ein Image des Betriebssystems. In unserem Fall Raspberry Pi OS, oder auch früher Raspbian genannt, da es auf der Linux Distribution Debian basiert. Beim Raspberry Pi Imager kannst Du die aktuelle Version des Betriebssystems herunterladen und direkt auf die SD-Karte schreiben.
4. Wenn Du nun die SD-Karte in den Raspy steckst, ein HDMI Kabel an einen Bildschirm anschließt und eine Maus/Tastatur-Kombination in eine der USB-Anschlüsse steckst und schließlich das Netzteil anschließt, wirst Du mit dem Betriebssystem Raspberry Pi OS begrüßt.

Raspy konfigurieren

1. Wenn Du möchtest, kannst Du den Raspy auch „Headless“ einrichten. Dafür musst Du keine Tastatur und Maus anschließen. Ein nützliches Tutorial findest Du hier.
2. Du kannst den Raspy sowohl über LAN als auch WLAN betreiben, wobei LAN generell eine stabilere Verbindung bietet.
3. über die Commandline kannst Du nun folgende Zeile eingeben: curl -sSL https://install.pi-hole.net | bash
4. wenn alles gut läuft, ist die Einrichtung vom Raspy fertig

DNS manuell eingeben

Du kannst nun entweder:

1. 1. für alle Geräte, die den Adblock haben sollen, den DNS manuell im jeweiligen Gerät auf die IP-Adresse des Raspys stellen
  2. Oder bei Deinem Router (Hier ein Beispiel für die FritzBox) den DNS des Routers auf die IP des Raspys stellen.

Wenn nun alles gut lief, hast Du jetzt einen Netzwerkweiten adblocker.

Meine Motivation hinter dem ganzen war, dass mein Fernseher eine Youtube App hat, die aber leider bei allen Videos immer wieder mehrere Werbeblocks abspielt. Sowas ist mit dem Raspy dann auch gelöst.

Außerdem bietet ein Raspy auch Sicherheit für das gesamte System, auch wenn man Leute im Haushalt hat, die vielleicht nicht so technikaffin sind. Diese müssen nichts weiteres auf ihrem Handy/Tablet/Laptop installieren, um im Internet keine Werbung zu bekommen.

Der Raspy hat auch ein Web-Interface, das Du durch „http:///admin/“ in Deinem Browser aufrufen kannst.

Der Beitrag Aufsetzen eines „Pi-Hole“ netzwerkweiten AdBlockers erschien zuerst auf AMCON SYSTEMLÖSUNGEN GMBH.

Was ist Scrum?

verenadrees — Wed, 05 May 2021 11:48:45 +0000

Agile Prozesse in der Softwareentwicklung

Wenn wir ein neues Projekt starten, muss im Vorfeld vieles geklärt werden zwischen Kunden, Anwendern, Projektleitern und Softwareentwicklern. Damit alle Projektleiter und Entwickler die gleichen Vorstellungen von dem fertigen Produkt haben wie der Kunde, ist ein gutes Projektmanagement für alle Beteiligten das A und O. Wir bei AMCON arbeiten in der Projektabwicklung mit dem Scrum-Modell und stellen Euch heute mal vor, wie das in der Praxis so abläuft.

Die Kunst, konstruktiv aneinander vorbei zu denken

Dieses Bild ist vielleicht bekannt. Frage: Wie bekommen wir den Elefanten in den Kühlschrank? Manche sagen: „Tür auf, Elefant rein, Tür zu“. Aber ist da wirklich so einfach, wenn wir nicht wissen, wie groß Elefant und Kühlschrank sind und was sich möglicherweise noch im Kühlschrank befindet? Die Voraussetzungen sind nicht klar. Ebenso verhält es sich mit den Anforderungen, die in diesem Fall ebenfalls nicht definiert sind. Wir wissen schließlich nicht, in welchem Zustand wir den Elefanten in den Kühlschrank befördern sollen – im Ganzen, in Stücken oder püriert? Es gibt also sowohl beim Anforderungsprofil als auch beim Vorgehen einige offene Fragen. Eine vermeintlich einfache Aufgabe erweist sich als komplex und jeder würde hier individuell vorgehen. Ob man damit das erreicht, was sich der Aufgabensteller vorstellt, ist allerdings fraglich.

Agiles Arbeiten im Team – Was ist Scrum und wie funktioniert es?

Aus dem Englischen übersetzt bedeutet der Begriff Scrum Gedränge. Die Vorstellung davon passt sehr gut, da der Sinn dieser agilen Softwareentwicklungsmethode darin besteht, dass sich die Teams täglich zusammensetzen (im übertragenen Sinne zusammen drängen) und kurz und strukturiert über die Fortschritte des Projekts sprechen. In Corona-Zeiten geschieht das natürlich alles über Videochats. Die Methode wurde 1990 in Japan entwickelt und stärkt die Rolle jedes einzelnen in einem Team. Das ist auch für die Projektleiter sehr wichtig, da sie nun nicht mehr diejenigen sind, die nur Anforderungen kommunizieren, sondern direkt in die Entwicklungsprozesse eingebunden werden. Wir nennen es übrigens SCRUMCON, als eigene Wortkreation aus Scrum und AMCON. Da jedes Unternehmen, das nach dieser Methode arbeitet, die Regeln selbstständig und auf das eigene Unternehmen zugeschnitten festlegt, darf die natürlich auch einen eigenen Namen haben Grundsätzlich ist für uns die Arbeit mit SCRUMCON dann effektiv, wenn die Anforderungen an ein Projekt komplex sind und es sich in viele Einzelteile zerlegen lässt, die schrittweise abgearbeitet werden können. Dabei werden unterschiedliche Rollen verteilt. Der Product-Owner definiert die User-Stories im Sinne des Kunden. Bei uns übernimmt diese Aufgabe der Projektleiter, der die Anforderungen im Vorfeld mit den Kunden definiert und sie dann dem Team mitteilt. Je genauer der Product-Owner die User-Stories beschreibt, desto genauer kann der Entwickler programmieren. So erhält der Kunde am Ende auch das Produkt, das er angefragt hat.

Backlog Grooming, Planning und Velocities – Wir erklären das mal kurz

In dieser ersten Phase (auch Backlog Grooming genannt), kann das Entwicklerteam Fragen stellen, sodass am Ende alle auf dem gleichen Wissensstand sind. Im nächsten Schritt legt das Entwicklerteam gemeinsam mit dem Scrum-Master die Definition of Ready (DoR) fest. Das bedeutet, dass die Anforderungskriterien an das UFHO-System festgelegt, einzelne Entwicklungsschritte terminiert und eine Arbeitsvereinbarung zwischen Projekteiter, Produktverantwortlichem und Entwicklerteam getroffen werden. Der Scrum-Master kümmert sich um die Aufteilung der einzelnen Aufgaben im Team und hält den Kollegen den Rücken frei. In unserem Fall macht das der Produktverantwortliche. Dabei kümmert er sich auch um die richtige Planung (Planning), damit auch Urlaube, Zeit für Fehlerbehebungen (Bug-Fixing) und Geschwindigkeiten (Velocities) beachtet werden. Bei der hier angesprochenen Geschwindigkeit geht es darum, dass wir die historische Performance des Teams berücksichtigen. Schaffte das Team in den letzten 3 Sprints im Durchschnitt 70 Story Points, so geht dies als Kenngröße in das Planning ein. Zu erwarten, das Team würde im nächsten Sprint 150 Punkte schaffen, wäre unrealistisch. Beim Planning schätzt das Team jede einzelne User-Story mit Story Points. Ein Story Point drückt dabei keine feste Zeitangabe aus, sondern die Komplexität. Das ist insofern ein Vorteil, da erfahrene Entwickler mehr in kürzerer Zeit schaffen als Anfänger. Für die Einschätzung der Komplexität wird eine allgemeingültige Skala herangezogen, die sich an den Fibonacci-Zahlen orientiert.

Ohne die Entwicklerteams läuft hier gar nichts

Die größte und wichtigste Gruppe ist das Entwicklerteam selbst. Man spricht hier auch vom Developer-Team, kurz Dev-Team. Die Mitglieder des Dev-Teams kümmern sich eigenverantwortlich um die einzelnen Teilschritte in der Entwicklung des UFHO-Systems für unsere Kunden. Im Laufe des Prozesses werden neben der kurzen täglichen Abstimmung (wir nennen das Daily) in regelmäßigen Abständen auch größere Runden gemacht, um erste Teilabschnitte des gesamten Projekts intensiv zu besprechen, zu testen und eventuell Verbesserungsvorschläge zu bringen. Hier kommen wieder alle zusammen und jeder Einzelne darf und soll sich einbringen. Dabei spielen – wie immer bei uns – die Hierarchien keine Rolle. Bei Definition of Done (DoD) entscheidet das Team, wann eine bestimmte Anforderung fertig ist und ein Pull Request (so nennt man in der Versionsverwaltung die Vorgehensweise, die den Code aus einem Branch in die Quellcode-Basis einfließen lässt) wird erst erzeugt, wenn alles umgesetzt wurde, was bis zu diesem Schritt passiert sein soll. Die DoR und DoD werden einmalig für das Dev-Team festgelegt und stellen im Grunde genommen eine Arbeitsvereinbarung zwischen dem Dev-Team und dem Anforderer dar. Zum einen kann das Dev-Team dadurch sicherstellen, qualitativ hochwertige Anforderungsdefinitionen zu bekommen, die ihren Vorgaben entsprechen. Auf der anderen Seite dient die DoD dazu, dass dem Anforderer nur getestete und (möglichst) fertig entwickelte Anforderungen geliefert werden, die auch seinen Qualitätskriterien entsprechen.

Welche Chancen bietet SCRUMCON?

Wie bei jeder agilen Methodik, haben auch wir für uns das beste und praktikabelste Vorgehen erarbeitet. Mit SCRUMCON steigern wir die Produktivität, optimieren unsere Kommunikation sowohl intern als auch extern mit dem Kunden, steigern die Flexibilität und auch die Qualität des Produktes und sorgen für mehr Verständnis zwischen den unterschiedlichen Abteilungen, die an einem Projekt arbeiten. Am Ende eines Projekts ist die Retrospektive sehr wichtig, um Prozesse stetig optimieren zu können. Dabei setzen wir uns noch mal alle zusammen, wenn der Sprint abgeschlossen ist. Jeder kann dann sagen, was gut lief, was man hätte anders machen können und wo zukünftig Verbesserungspotenzial besteht. Unser Entwicklungsleiter Sebastian Schnieder, technischer Projektleiter Alex Stasewitsch und Ausbildungsleiter Rolf Norrenbrock haben die Methode für agiles Arbeiten bei uns eingeführt. „Scrum baut auf hochqualifizierte, interdisziplinär besetzte Entwicklungsteams, die zwar eine klare Zielvorgabe bekommen, für die Umsetzung jedoch allein zuständig sind. Das eigenverantwortliche Arbeiten erhöht die Zufriedenheit der einzelnen Teammitglieder und das ist sehr schön zu beobachten“, sagt Rolf Norrenbrock.

Der Beitrag Was ist Scrum? erschien zuerst auf AMCON SYSTEMLÖSUNGEN GMBH.

Workflow mit Google Chrome-Erweiterungen unterstützen

verenadrees — Mon, 29 Mar 2021 11:50:43 +0000

Eine Einführung in die Entwicklung von Browser-Erweiterungen für Google Chrome.

Browser-Erweiterungen sind mittlerweile weitläufig bekannt. Die allermeisten Nutzer installieren jedoch lediglich einen Adblocker und kehren dem Chrome Web Store danach den Rücken. Dabei können Erweiterungen sowohl für Unternehmen als auch für private Personen von großem Nutzen sein, denn diese beschränken sich keineswegs nur auf das Blockieren von Werbung.

Das Wichtigste in Kürze:

Um euch das Erstellen einer Erweiterung etwas näher zu bringen, werden wir im Folgenden eine simple Browser-Erweiterung erstellen, welche einem aktuell zugewiesene Aufgaben über die URL-Leiste vorschlägt.

Erweiterung konfigurieren

Um eine Erweiterung zu erstellen, benötigen wir eine manifest.json Datei, welche die Konfiguration unserer Erweiterung enthält. Diese habe ich der Einfachheit halber in einem eigenen Ordner angelegt.

Die Manifest-Datei verwendet das JSON-Format. Es können nur Eigenschaften verwendet werden, die in der Dokumentation definiert sind. Damit ihr euch nicht durch die ganze Dokumentation quälen müsst, stelle ich euch die Manifest-Datei für unsere Erweiterung zur Verfügung.

{

„name“: „Jira++“,

„description“: „Jira Tickets über die Omnibox abrufen.“,

„version“: „1.0“,

„icons“: {

„16“: „jira_16.png“,

„48“: „jira_48.png“,

„128“: „jira_128.png“

„manifest_version“: 2,

„background“: {

„persistent“: false,

„scripts“: [ „background.js“ ]

„options_ui“: {

„chrome_style“: true,

„page“: „options/options.html“

„permissions“: [ „storage“ ],

„omnibox“: { „keyword“: „jira“ }

}

Die meisten Eigenschaften sind dabei selbsterklärend. Zuerst definieren wir „kosmetische“ Eigenschaften wie Name (name), Beschreibung (description), Version (version) und die zu verwendenden Icons (icons).

Über das Objekt background definieren wir eine JavaScript-Datei, welche im Hintergrund ausgeführt wird. Das bedeutet, dass dieses Script keinen direkten Zugriff auf den Inhalt einer Website hat und diesen auch nicht manipulieren kann.

Mit dem Objekt options_ui legen wir eine Optionsseite für die Erweiterung fest. chrome_style bedeutet in dem Kontext, dass sich die Optionsseite nicht in einem neuen Fenster öffnet.

Abschließend gibt es noch die Eigenschaften permissions und omnibox. Die erstgenannte Eigenschaft ermöglicht es uns, Berechtigungen für die Erweiterung zu registrieren. Für unsere Erweiterung benötigen wir dabei lediglich storage, sodass wir Daten auf dem Computer des Endnutzers abspeichern können.

Da wir, wie anfangs bereits erläutert, Vorschläge in der URL-Leiste („Omnibox“) machen wollen, müssen wir zudem ein Schlagwort (engl. „keyword“) definieren. Dies ist in meinem Fall jira.

Fehlende Dateien anlegen

Bevor wir die Installation jedoch durchführen, müssen wir noch die fehlenden Dateien anlegen. In unserem Fall sind dies einmal die Icons (jira_16.png, usw.), background.js und options.html. Die letztere Datei befindet sich zudem in einem Unterordner options.

Eure Ordnerstruktur sollte nach dem Anlegen der Dateien in etwa wie folgt aussehen:

Erweiterung

│ │ background.js

│ │ jira_128.png

│ │ jira_16.png

│ │ jira_48.png

│ │ manifest.json

│ │

│ └───options

│ options.html

Erweiterung installieren

Nachdem ihr die Manifest-Datei erstellt habt, könnt ihr die Erweiterung zum Testen bereits installieren. Dies geht wie folgt:

1. Navigiert in der Adressleiste zu chrome://extensions

2. Aktiviert oben rechts den „Entwicklermodus“

3. Klickt links auf den Button „Entpackte Erweiterung laden“

4. Wählt in dem Dialog euren Ordner mit den Erweiterungsdateien aus

5. Wurde die Erweiterung erfolgreich installiert, sollte eine Kachel ähnlich der folgenden Abbildung bei euch zu sehen sein (das Icon weicht natürlich ab)

Hinweis

Im Entwicklermodus könnt ihr über den Pfeil in Kreisform die Erweiterung neu laden, falls ihr Änderungen vorgenommen habt.

Optionsseite nach der Installation anzeigen

Nachdem bis jetzt nur Konfigurationen vorgenommen wurden, wird in diesem Schritt mit dem Programmieren begonnen. Dazu öffnet ihr die angelegte Datei background.js in einem Editor eurer Wahl (bspw. Notepad++).

In der Manifest-Datei haben wir vorab eine Optionsseite definiert. Da in dieser einige Einstellungen konfiguriert werden, welche einen essenziellen Einfluss auf die Verwendung der Erweiterung haben, ist es von Vorteil, wenn wir diese Optionsseite bereits beim Installieren einmal aufrufen, sodass der Endnutzer direkt die Daten eintragen kann und dies nicht übersieht oder vergisst.

Um etwas bei der Installation etwas auszuführen, muss ein Event-Listener für das onInstalled Event definiert werden:

chrome.runtime.onInstalled.addListener(details => {

if(details.reason === „install“) {

chrome.runtime.openOptionsPage();

}

});

Der Event-Listener ist leider etwas unglücklich benannt. Dieser fängt nicht nur das Installationsevent der Erweiterung ab, sondern auch andere Installations- und Updateevents. Deshalb geben wir als optionalen Parameter details an. Dieses Objekt beinhaltet den eigentlichen Installationsgrund – in unserem Fall müssen wir schauen, ob der Grund install ist, also ob die Erweiterung gerade installiert wurde.

Ist das der Fall, können wir über die chrome.runtime API die Optionsseite aufrufen.

Installation testen

Um die Installation zu Testen, müsst ihr die Erweiterung deinstallieren (Button „Entfernen drücken“) und danach die Schritte unter „Erweiterung installieren“ erneut durchführen. Das liegt daran, dass beim Klicken auf den Pfeil der Installationsgrund nicht install sondern update ist.

Vorschläge anzeigen

Kommen wir nun zum eigentlichen Inhalt der Erweiterung. Öffnet dazu erneut die background.js Datei. Hier legen wir einen onInputChanged Event-Listener für die Omnibox an:

chrome.omnibox.onInputChanged.addListener((input, suggest) => {

// Weiteren Code hier einfügen

});

Dieser wird ausgeführt, sobald ein beliebiges Zeichen in der Adressleiste eingegeben und vorab das Keyword (in meinem Fall jira) davor eingegeben wurde.

Um nun etwas vorzuschlagen, können wir den zweiten Parameter suggest verwenden, dieser ist eine Funktion – kann also aufgerufen werden. Die Variable input beinhaltet den Text, welcher nach dem Keyword eingegeben wurde.

Für den Zweck dieser Erweiterung ist der eingegebene Text allerdings irrelevant, deshalb wird die Variable im weiteren Verlauf nicht näher betrachtet.

Bei AMCON setzen wir intern Lösungen von Atlassian ein. Unter anderem auch das Tool Jira, mit welchem Tickets („Aufgaben“) erstellt und verwaltet werden können. Jira bietet dafür eine API an, mit der diese Tickets abgefragt werden können (u.a. auch nach Personen gefiltert).

Hinweis

Sofern ihr Jira nicht verwendet, könnt ihr natürlich auch andere Endpunkte ansprechen oder auf den Speicher der Erweiterung zurückfallen, wo ihr bspw. Aufgaben etc. gespeichert habt.

Um meine Tickets zu laden, kann folgender Code verwendet werden – dabei müsst ihr die verwendete URL natürlich durch eure eigene austauschen.

const suggestions = [];

chrome.storage.local.get([„username“], async (res) => {

const { username } = res;

if(username) {

const issues = await

fetch(`https://intern.amcon.de/tickets/${username}`)

.then(res => res.json());

issues.forEach(issue => {

suggestions.push({

content: issue.key,

description: `${issue.key} — ${issue.title} [${issue.priority}] [${issue.status}]`

});

}

suggest(suggestions);

})

Diesen Codeblock fügt ihr an der Stelle // Weiteren Code hier einfügen ein.

Zuerst wird eine Konstante angelegt, in welcher wir unsere Vorschläge zwischenspeichern. Danach laden wir die Spalte username aus dem Speicher unserer Erweiterung (der Benutzername kann in der Optionsseite definiert werden). Sofern dieser definiert ist, laden wir alle Tickets dieses Benutzers als JSON. Danach gehen wir die Tickets einzeln durch und fügen für jedes Ticket einen Vorschlag hinzu. Die Vorschläge sind immer ein Objekt mit den Eigenschaften content und description. Die description wird dabei dem Endnutzer angezeigt.

Abschließend rufen wir nun die Funktion suggest auf, um unsere geladenen Vorschläge anzuzeigen.

Vorschläge abrufen

Angezeigt werden die Vorschläge jetzt bereits. Jedoch passiert noch nichts, wenn diese angeklickt werden (durch Klicken oder Enter). Dazu muss ein onInputEntered Event-Listener definiert werden, der genau diese Interaktionen abfängt.

Fügt dazu den folgenden Quellcode unterhalb des vorab definierten onInputChanged Event-Listeners ein:

chrome.omnibox.onInputEntered.addListener((input, suggest) => {

chrome.tabs.create({„url“:`https://intern.amcon.de/browse/${input.toUpperCase()}`});

});

Dieser Code öffnet bei einer Interaktion einen neuen Tab und ruft dabei die angegebene URL auf. Die Variable input beinhaltet dabei den Text, welchen wir aktuell in der Adressleiste eingegeben haben. Wählen wir stattdessen einen Vorschlag aus, wird der content für den input eingesetzt.

Geben wir nun in unsere Adressleiste jira web-1000 ein und bestätigen mit Enter, wird die Seite https://intern.amcon.de/browse/WEB-1000 aufgerufen. Wählen wir einen Vorschlag aus, wird statt der getätigten Eingabe der content eingesetzt.

Optionsseite erstellen

Die Optionsseite ist eine normale Website, mit der Ausnahme, dass beim Speichern die Daten in den Speicher der Erweiterung geladen werden. Um den Beitrag deshalb nicht zu sehr in die Länge zu ziehen, befinden sich die benötigten Dateien für die Optionsseite im Anhang. Legt diese Dateien einfach im Verzeichnis options ab. Die Datei options.html könnt ihr dabei überschreiben.

Download:

media/files/options.html

media/files/options.js

media/files/style.css

Fazit

Erweiterungen zu Erstellen kann, wie anhand dieses Beispiels aufgezeigt, viele Möglichkeiten bieten. Um die Erweiterung zu verwenden, könnt ihr diese erst einmal mithilfe des Entwicklermodus installieren. Sofern ihr die Erweiterung anderweitig installieren wollt, gibt es dafür natürlich auch Möglichkeiten. Sofern ihr dazu mehr wissen wollt, meldet euch unter lars.koelker@amcon.de.

Der Beitrag Workflow mit Google Chrome-Erweiterungen unterstützen erschien zuerst auf AMCON SYSTEMLÖSUNGEN GMBH.