Türöffnen mit Raycast

Unser Büro ist lang. Sehr lang. Wenn es an der Tür klingelt, heißt das: Aufstehen, 20 Meter laufen oder besser sprinten und die Tür öffnen. Wenn man nicht zum Sprint ansetzt, klingeln manche Paketboten schon ein zweites Mal, während andere schon weggefahren sind, bevor wir überhaupt die Sprechanlage erreicht haben. Aber das hat jetzt ein Ende! Dank unserer neuen Exivo Raycast Extension können wir die Eingangstür nun vom Laptop aus öffnen. Bis jemand von uns vorne an der Eingangstüre angekommen ist, ist der Besuch schon im Treppenhaus auf dem Weg zu uns nach oben.

Eine Tastenkombination genügt: Hyper-Key (◆) + D → ENTER → Türe offen!

In diesem Blogbeitrag möchte ich beschreiben, wie man eine Raycast-Extension erstellt und warum wir mit diesem Ansatz unser Türenproblem so praktikabel lösen konnten.

Warum Raycast?

Wir haben uns für Raycast entschieden, weil es einfach unschlagbar praktisch ist. Der Zugriff auf eine gewünschte Funktion erfolgt direkt über die Tastatur, ohne dass man eine App öffnen oder sich in einer Web-App anmelden muss. Außerdem mussten wir für unseren Use Case keine eigene App entwickeln, da alles direkt über Raycast läuft. Und was die Benutzeroberfläche angeht, ist der Entwicklungsaufwand minimal, da es ein sehr gut dokumentiertes SDK gibt. So kann man sich voll und ganz auf die Funktionalität konzentrieren und muss sich kaum Gedanken über das UI-Design machen. Wenn du Raycast noch nicht kennst, empfehle ich dir, zuerst den Gastbeitrag von Moritz zu lesen. Anhand konkreter Anwendungsbeispiele bietet er einen sehr guten Einstieg in das Tool.

Vorbereitungen

In unserer Idealvorstellung hören wir im Büro, wenn jemand an der Eingangstür klingelt, und können diese direkt vom Arbeitsplatz aus entsperren. Das nachfolgende Schaubild zeigt den Weg, den man zurücklegen muss, um in unser Büro zu gelangen: Zunächst muss man die Haustür im Untergeschoss und anschließend das Treppenhaus passieren, um letztlich durch die Bürotür unser Büro zu betreten.

Ein zentraler Aspekt war die Anbindung der Schließanlage an unsere Softwarelösung. Von Vorteil war hier, dass wir eine elektronische Schließanlage von Dormakaba haben, die sich über die Exivo REST-API ansprechen lässt. Exivo ist ein cloudbasiertes Zutrittsmanagementsystem, das speziell für kleine und mittlere Unternehmen entwickelt wurde. Es ermöglicht die Verwaltung und Überwachung von Zutrittsrechten über eine webbasierte Benutzeroberfläche oder eine App. Dank der gut dokumentierten API war die Integration in unser Softwaretool, in diesem Fall Raycast, besonders unkompliziert.

Die technische Umsetzung

Wer Raycast um eine gewünschte Funktion erweitern möchte, schreibt einfach eine Extension.

Um eine neue Raycast-Extension zu erstellen öffnen wir zunächst Raycast und geben „Create Extension“ ein. Anschließend geben wir der Extension einen sprechenden Namen und wählen als Template Show List and Details aus, um direkt eine Liste mit Detailansicht zu erstellen.

Navigieren wir danach mit dem Terminal in den Ordner, in der wir die Extension abgelegt haben und führen npm install && npm run dev aus, und schon startet die Extension!

Hurra, die Extension tut, jetzt gehts ans Coden! 🚀

Es wurde folgende Dateistruktur erstellt: Je nach ausgewähltem Template kann der Inhalt variieren.

Unter /src/unlock-door.tsx finden wir die Komponente, die angezeigt wird, wenn das unlock-door Command geöffnet wird. Die Zuordnung von Command zu Komponente wird über den Dateinamen hergestellt, d.h. die Datei muss den gleichen Namen wie das Command haben.

In unserem konkreten Beispiel mit der Schließanlage kommt eine einfache Liste zum Einsatz, die die in Exivo bekannten Schließzylinder anzeigt.

Dafür bietet das Raycast SDK die Möglichkeit, ein Icon, einen Titel und einen Untertitel festzulegen. Die Anordnung und Darstellung der Felder ist fix vorgegeben, damit sich alle Erweiterungen homogen „anfühlen”.

Mithilfe des Event-Handler onSearchTextChange der List-Komponente können Benutzereingaben in der Suchleiste ausgewertet werden. Dadurch ist es möglich, die angezeigten Listenelemente dynamisch zu filtern. Der folgende Code aus der offiziellen Dokumentation zeigt, wie sich eine Liste mit integrierter Suchfunktion umsetzen lässt. Falls keine eigene Such- oder Filterlogik definiert wird, nutzt Raycast standardmäßig das title-Property für die Suche.

import { useEffect, useState } from "react";
import { Action, ActionPanel, List } from "@raycast/api";

const items = [
  { "title": "codeuntiy GmbH Haupteingang", "mode": "normal" },
  { "title": "Büro OG", "mode": "normal" }
];

export default function Command() {
  const [searchText, setSearchText] = useState("");
  const [filteredList, filterList] = useState(items);

  useEffect(() => {
    filterList(items.filter((item) => item.title.includes(searchText)));
  }, [searchText]);

  return (
    <List onSearchTextChange={setSearchText}>
      {filteredList.map((item) => (
        <List.Item
          key={item.title}
          title={item.title}
          subtitle={item.mode}
          ...
        />
      ))}
    </List>
  );
}

Für die Liste können verschiedene Actions bestimmt werden mit denen beispielsweise der Webbrowser geöffnet, zu einer Detailseite navigiert oder einfach nur eine JavaScript-Funktion ausführt wird. Letztere verwenden wir, um für den ausgewählten Schließzylinder beim Drücken der ENTER-Taste den API-Call auszuführen, der die Tür entsperrt. Auf die Anbindung der Exivo-API wird nicht näher eingegangen, da diese mit Standard-fetch-Calls realisiert wurde. Der Code des Listenelements mit Actions sieht wie folgt aus:

<List.Item
    key={item.title}
    title={item.title}
    subtitle={item.mode}
        actions={
          <ActionPanel>
            <Action onAction={() => unlock(item.id)}
                    title={`Unlock {exivoComponent.identifier}`} />
            <Action onAction={() => setMode(exivoComponent.id, "open")}
                    title="Activate Permanent Open Mode" />
          </ActionPanel>
        }
  />

Mithilfe der gezeigten Codeschnipsel und einiger Anpassungen für unseren Anwendungsfall erreichen wir mit wenigen Zeilen Code die Auflistung unserer Schließzylinder. Durch Drücken der ENTER-Taste wird das ausgewählte Türschloss entsperrt.

Wer im Codeausschnitt „Das ActionPanel eines ListItems“ zuvor gut aufgepasst hat, sieht, dass dort im ActionPanel zwei Actions definiert sind. Neben der Haupt-Action, die automatisch die zuerst definierte Action ist, bekommt man damit über CMD + K zusätzlich die Möglichkeit, weitere Actions auf einem ListItem zu hinterlegen. Außer dem entsperren eines Türschlosses haben wir hier auch die Funktion implementiert, den Betriebsmodus des Schließzylinders von „normalem Betrieb“ auf „Dauerauf“ umzustellen. Das ist besonders dann hilfreich, wenn Kunden oder Handwerker im Haus sind und mehrfach ein- und ausgehen möchten. Darüber hinaus können auch die Zutrittsprotokolle angezeigt werden, was allerdings nur eine Spielerei ist, weil es halt möglich ist 😉.

Vorteile der Raycast Extension

Folgende Aspekte dieser Lösung sind besonders hervorzuheben.

• Schnelle Entwicklung
  Die Implementierung der Extension dauerte zwei Stunden.
• Extension teilen
  Mit Raycast Teams kann die Extension im Team geteilt oder im Raycast Store veröffentlicht werden.
• Kein Sprint zur Türe mehr nötig
  … mein persönlicher Favorit 😀!

Ein kleiner Nachteil

Die Lösung hat derzeit dennoch ein Problem: Da wir die Eingangstür vom Arbeitsplatz aus nicht direkt einsehen können, wissen wir meist nicht, wer geklingelt hat. Abhilfe könnte hier eine Kamera schaffen, deren Bild in den Details des selektierten Schließzylinders angezeigt wird. Dieses Feature ist für die nächste Version geplant! Außerdem gilt noch zu erwähnen, dass bisher nur Mac-User in den Genuss von Raycast kommen.

Fazit

Mit den Extensions bietet uns Raycast eine perfekte Basis zur Lösung unseres alltäglichen Klingel- bzw. Türproblems. Anstatt eine eigene App oder Webanwendung implementieren zu müssen, konnten wir unseren Use Case mit minimalem Programmieraufwand umsetzen und bereitstellen. Um ehrlich zu sein, kann ich es kaum erwarten, dass jemand klingelt, damit ich die Extension wieder benutzen kann! Hier seht ihr das Ganze in Aktion 😉!