Wie man ein Office-Add-In mit der DeepL API in nur einem Tag erstellt

Einmal im Monat nehmen die Mitarbeitenden von DeepL am „Hack Friday“ teil, einem Tag, an dem sie an Projekten arbeiten können, die nicht unbedingt zu ihrem Arbeitsalltag gehören. Hack Fridays bieten eine hervorragende Gelegenheit, mit unserer API zu experimentieren, und gelegentlich werden die Ergebnisse für die Nutzer verfügbar gemacht. Tatsächlich war unser kürzlich veröffentlichtes Google Tabellen-DeepL-Skript das Ergebnis eines Hack Friday-Projekts. An einem Hack Friday im September 2022 entwickelten der DeepL-Softwareentwickler Marvin Becker und der Entwickler-Evangelist Tim Cadenbach einen Prototyp eines DeepL-API-Add‑ins für Microsoft Word, mit dem Benutzer direkt in einem Word-Dokument mit DeepL übersetzen können.

Hier ein kleiner Einblick:

Aber was macht das Projekt so interessant?

Geschäftliche Kommunikation ist ein beliebter Anwendungsfall für DeepL – DeepL-Übersetzungen ermöglichen es einer globalen, mehrsprachigen Belegschaft, effizient zusammenzuarbeiten und gleichzeitig sensible Unternehmensdaten schützen. Wir erhalten häufig Anfragen von Kunden, die ihr eigenes Office-Add‑in mit der DeepL API erstellen möchten und nach Ressourcen suchen, um damit zu beginnen. Um die Fragen unserer Kunden besser beantworten zu können, wollten wir aus erster Hand erfahren, was es braucht, um eine Integration zu realisieren. 

Unsere Ergebnisse präsentieren wir Ihnen in diesem Blogpost. Wir stellen Ihnen auch Open-Source-Code zur Verfügung, damit Sie Ihr Projekt schneller umsetzen können. Sind Sie bereit für ? Dann ab an die Arbeit! 

Tipp 0 (optional): Recherche ist das A und O  

Sollten Sie noch keine Erfahrung mit den Office-APIs haben, empfehlen wir Ihnen, Informationen zur Office JavaScript-API in der Dokumentation von Microsoft. Kurz gesagt, alle Office-Produkte bieten eine gemeinsame API mit produktspezifische APIs . Es könnte auch hilfreich sein, dieses Tutorial durchzulesen, bevor Sie zu Tipp 1 übergehen. 

Tipp 1: Einen Prototyp mit Script Lab erstellen (oder unseren verwenden) 

Script Lab ist ein von Microsoft betreutes Open-Source-Projekt. Mit diesem Tool können Sie direkt in Excel, Outlook, Word oder PowerPoint mit der Office-JavaScript-API experimentieren. Das Script Lab GitHub-Repository enthält ein Tutorial, das Ihnen den Einstieg erleichtert.

Script Lab ist ideal, um Code zu schreiben und ihn schnell in Aktion zu sehen. So konnten wir den ersten Prototyp unseres Add-Ins erstellen, der nur aus einer einzigen JavaScript-, HTML- und CSS-Datei besteht.

Dieser erste Schritt führt Sie zwar noch nicht zum Add-In, das Sie mit Ihren Teammitgliedern teilen können, aber er gibt Ihnen immerhin schon einmal eine Vorstellung davon, welche Möglichkeiten Ihnen die DeepL API bietet und welche Art von Benutzererfahrung Sie mit Ihrem Add-In schaffen können.

Erinnern Sie sich noch? Weiter oben haben wir Ihnen Open-Source-Code versprochen. Script Lab bietet die Möglichkeit, „Snippets“ von anderen zu importieren. Daher haben wir das von uns erstellte Word-Snippet als Open Source zur Verfügung gestellt, so dass auch Sie es verwenden können. Sie finden es hier auf GitHub.

Zusätzlich benötigen Sie einen API-Authentifizierungsschlüssel, um diesen Schritt auszuführen. Sie können sich hier für ein Konto registrieren.

Bitte kopieren Sie das Gist YAML wie in der Anleitung beschrieben, fügen Sie Ihren DeepL API-Schlüssel in die Platzhalter in Zeile 32 ein, und Sie können unseren Snippet mit nur wenigen Klicks ausführen.

Das Beste daran? Das Script Lab-Snippet kann wiederverwendet werden, wenn Sie die Add-In-Vorlage einrichten! Alle Vorbereitungen, die Sie jetzt in Script Lab treffen, werden sich also später als nützlich erweisen.

Tipp 2: Ein Office-Add-In mit dem Yeoman-Generator erstellen

Nachdem wir nun einen Prototyp in Script Lab erstellt und die Grundlagen der Office-Skripterstellung kennengelernt haben, können wir mit der Erstellung des eigentlichen Add-Ins mit Yeoman loslegen. Yeoman ist ein Open-Source-Tool, mit dem sich relativ einfach neue Projekte erstellen lassen. Für Office-Add-Ins kann eine von Microsoft erstellte Vorlage verwendet werden, die auch als „Yo Office“ bekannt ist. 

Der Vorgang wird hier erklärt: Office-Add‑in Yeoman Generator.

Nachdem Sie die Einrichtung abgeschlossen haben, kopieren Sie den Code von Script Lab in Ihr neu erstelltes Repository. Es gibt noch ein paar weitere Dinge zu konfigurieren, aber Sie können sofort loslegen, indem Sie „npm run start“ ausführen. Dadurch wird Word gestartet und Ihr Add‑In automatisch geladen. Sie können jede beliebige IDE für die Entwicklung verwenden, allerdings funktioniert die generierte Vorlage am besten mit den Microsoft-eigenen Code-Editoren VS Code oder Visual Studio. Wir empfehlen die Verwendung von Visual Studio, da wir hier bessere Erfahrungen beim Coden und Debuggen gemacht haben.

Tipp 3: Die DeepL API implementieren

Die Implementierung von DeepL ist einfach: Ein JavaScript-Skript ruft den Endpunkt der Textübersetzung auf. Für unseren Prototyp war das ausreichend. Wenn Sie die Glossare In Ihrem Add‑in möchten Sie etwas mehr Aufwand betreiben.

Wir haben die offizielle DeepL-Bibliothek nicht verwendet. Node.js-Clientbibliothek für das Projekt verwendet, da die Bibliothek nicht für clientseitigen JavaScript-Code vorgesehen ist. Der Grund hierfür ist die Sicherheit – beim Aufruf von clientseitigem Code würden Sie Ihren API-Schlüssel offenlegen. In der oben geteilten GIST-Datei finden Sie weitere Details zu unserem Ansatz (ab Zeile 102).

Tipp 4: Debuggen für Mac-Benutzer 

In den letzten Jahren hat Microsoft erheblich in die Verbesserung seiner Unterstützung für Mac-Benutzer investiert. Obwohl Mac-Systeme für die Entwicklung mit .NET Core recht gut geeignet sind, lässt Apple bei der Entwicklung von Software für Windows – und somit für Microsoft Office-Anwendungen – noch einiges zu wünschen übrig. Daher ist es auch nicht so einfach, Microsoft-Software auf dem Mac zu debuggen. Tim schwört auf Microsoft (und ist sogar ein MVP!), daher hatte er keine Probleme. Mac-Benutzer Marvin hingegen musste Parallels herunterladen, um richtig debuggen zu können.  Ausführung von Microsoft Office und Visual Studio-Code in Parallels können Sie Apps debuggen und ordnungsgemäß an dem Add‑in arbeiten. Das ist zwar keine 100%ige Lösung, aber sie erfüllt ihren Zweck!

Tipp 5: Ihr Add-In mit Benutzern teilen

Office-Add-Ins werden auf die in den Office-Anwendungen verwendete Webansicht geladen und mithilfe von iFrames angezeigt. Das bedeutet, dass Sie Ihr Add-In auf einem Webserver hosten müssen, auf den Sie Zugriff haben. Weitere Informationen darüber, Das Bereitstellen und Veröffentlichen von Office-Add‑Ins in der Microsoft-Dokumentation. 

Sobald das Add‑in eingerichtet und betriebsbereit ist, kann jeder Office-Administrator es für Nutzer und Gruppen in seiner Organisation bereitstellen über das Microsoft 365-Verwaltungscenterbereitstellen. Add-Ins, die über das Admin Center bereitgestellt werden, können sofort verwendet werden.

Bonus: Ihr Add-In auf andere Microsoft-Anwendungen erweitern 

Sie können Ihr Add-In ganz einfach auf andere Anwendungen erweitern. Office Add-Ins haben viele Komponenten gemeinsam und können in der Regel in allen Anwendungen der Suite verwendet werden, d. h. in Outlook, Word, Excel, PowerPoint, Visio und OneNote.

Alle Anwendungen haben jedoch unterschiedliche Ereignisse. In unserem Word-Beispiel haben wir „OnTextSelected“ verwendet, während Sie in Excel wahrscheinlich etwas wie „OnColumnSelected“ oder „Row. “ verwenden würden. Damit Ihr Add‑In in anderen Applikationen funktioniert, fügen Sie einfach die entsprechenden Ereignisse oder Aktionen hinzu, auf die Ihr Add‑In reagieren soll – so einfach ist das. Der Großteil Ihres Codes kann in anderen Anwendungen wiederverwendet werden.  

Im Allgemeinen empfiehlt es sich, Ihren spezifischen Code in eine Funktion umzuwandeln, die Sie wiederverwenden und mit den erforderlichen Anwendungsspezifika erneut aufrufen können. Wir empfehlen Ihnen, die hier verfügbaren Artikel durchzulesen.

Darüber hinaus gibt es ein nützliches MS Learn-Modul , das Ihnen weiterhelfen kann.

Zu guter Letzt

Wir hoffen, dass Sie diesen kleinen Überblick hilfreich fanden! Sollten Sie Fragen haben, erstellen Sie bitte ein Ticket im GitHub-Repository mit dem Script Lab-Snippet und teilen Sie uns dies mit.  

Gutes Gelingen!