Wussten Sie, dass Sie Add-Ons und Apps für entwickeln können? Google-Arbeitsbereich?
Mit ein wenig Programmierkenntnissen können Sie Tools erstellen, die Ihnen dabei helfen, Ihr Arbeitsleben zu erleichtern. In diesem Artikel führen wir Sie durch den Prozess zum Erstellen eines einfachen Add-Ons oder einer App.
Lass uns loslegen!
Schritte zum Entwickeln von Google Workspace-Add-ons und -Apps
1. Wählen Sie das richtige Werkzeug für den Job
Entscheiden Sie im ersten Schritt, ob Sie ein Add-On oder eine App entwickeln möchten. Der beste Weg, um festzustellen, welches für Sie am besten geeignet ist, besteht darin, darüber nachzudenken, was Sie tun möchten, wie viel Zeit Sie zur Verfügung haben, um das Projekt abzuschließen, und wie viel Wissen Sie über das Programmieren haben.
Wenn Sie gerade erst anfangen, verwenden Sie das Google Add-ons-Tool. Wenn Sie bereits mit JavaScript gearbeitet haben, sehen Sie sich den Google Apps Script Add-on Builder an.
2. Richten Sie Ihre Entwicklungsumgebung ein
Nachdem Sie sich entschieden haben, welches Tool Sie verwenden möchten, ist es an der Zeit, Ihre Entwicklungsumgebung einzurichten. Dies umfasst die Installation der erforderlichen Software und die Einrichtung einiger grundlegender Konfigurationsdateien. Der Einrichtungsvorgang hängt davon ab, welches Tool Sie verwenden.
Wenn Sie eine App entwickeln, benötigen Sie Folgendes:
App-Skript-Editor
Wenn Sie ein Skript für ein Google Apps-Add-on entwickeln, verwenden Sie den Google App Scripts-Editor. Wenn Sie mit Apps in der G Suite arbeiten, verwenden Sie Google Sheets.
Um auf den Google-App-Skripteditor zuzugreifen, erstellen Sie ein neues Dokument in Google Text & Tabellen und öffnen Sie die App-Skripte auf der Registerkarte „Erweiterungen“. Es wird so aussehen:
App Script-CLI
Die Chrome-Entwicklertools enthalten eine Befehlszeilenschnittstelle (CLI), mit der Sie das Google Apps-Skript direkt von Ihrer Befehlszeile aus steuern können.
Ein Google-Konto
Sie benötigen ein Google-Konto, um auf Google Apps und alle seine Dienste zugreifen zu können. Sie verwenden dieses Konto, wenn Sie Google Chrome auf Ihrem Entwicklungscomputer installieren und sich mit Ihrem Google-Konto anmelden, damit Ihr Entwicklungscomputer mit Ihrem Google-Konto verknüpft wird.
Dasselbe gilt auch für die Add-Ons.
3. Schreiben Sie etwas Code!
Jetzt ist es an der Zeit, mit dem Codieren zu beginnen. Die Einzelheiten hängen davon ab, welches Tool Sie verwenden, aber im Allgemeinen müssen Sie etwas HTML, CSS und schreiben JavaScript. Wie das mit jedem Texteditor oder jeder IDE (Integrated Development Environment) geht, können Sie nachlesen.
Nachdem Sie Ihren Code geschrieben haben, können Sie ihn im Browser oder auf einem Gerät (Smartphone, Tablet oder Computer) testen, auf dem der Play Store ausgeführt wird.
HTML
HyperText Markup Language (HMTL) wird zum Generieren von Webseiten verwendet. Die Seite besteht aus HTML-Elementen und Tags. HTML ist eine Auszeichnungssprache, die definiert, wie Ihre Webseite aussieht und welche Inhalte angezeigt werden, wenn Personen die Seite anzeigen.
Sie können eine neue HTML-Datei in Google App Script wie folgt generieren:
Um eine effektive App zu erstellen, verwenden Sie HTML, um die Struktur der App zu definieren, Schaltflächen zu erstellen und vieles mehr Benutzerschnittstelle Elemente und zeigen Daten aus Ihrer Datenbank an.
HTML für Ihre App sollte in ein Tag geschrieben werden, das den gesamten Inhalt Ihrer App umgibt. Um zu sehen, wie der HTML-Code für eine App funktioniert, können Sie ein neues Projekt erstellen, indem Sie „Datei“ > „Neues Projekt“ auswählen. Wählen Sie die Option Web-App.
CSS
Cascading Style Sheets werden verwendet, um einen Stil auf HTML-Elemente in Ihrer App anzuwenden. Der beste Weg, um zu sehen, wie CSS aussieht, ist der Besuch der Entwicklertools in Chrome oder Firefox. Nachdem Sie die Entwicklertools geöffnet haben, klicken Sie auf die Schaltfläche Gerätesymbolleiste umschalten oder geben Sie Strg + I ein, um zwischen Mobil- und Desktopmodus umzuschalten. Wählen Sie dann die Entwurfsansicht.
Die CSS- und JavaScript-Bibliotheken können dank Apps Script unter Verwendung anderer Bibliotheken verwendet werden. Unten sehen Sie eine Veranschaulichung, wie Sie im Header-Abschnitt auf die JQuery-Bibliothek verlinken.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<?!=content?>
...
</head>
<body>
Sie sehen den grundlegenden HTML-Code für Ihre App zusammen mit den darauf angewendeten Stileigenschaften. Beim Start der App werden auch die Styling-Eigenschaften wirksam. Wenn das Styling jedoch auf das falsche Element angewendet wird, sieht das Ergebnis möglicherweise nicht sehr gut aus.
JavaScript
JavaScript ist eine Programmiersprache, die Ihrer App dynamischere Funktionen hinzufügt. Mit JavaScript können Sie beispielsweise einer Webseite Interaktivität hinzufügen. JavaScript ist normalerweise in Ihren Projektdateien enthalten, wenn Sie eine neue App erstellen. Wenn Sie Ihrer App zusätzliches JavaScript hinzufügen möchten, können Sie dies tun, indem Sie Ihrem Projekt weitere Dateien hinzufügen.
Es geht darum, die Funktionsweise von JavaScript zu verstehen, da Sie damit anspruchsvollen benutzerdefinierten Code erstellen können, der in Google Docs ausgeführt werden kann.
Um ein Add-On zu erstellen, müssen Sie zunächst das JavaScript entwickeln, das zum Erstellen einer interaktiven Funktion in Ihrer App erforderlich ist. Sie müssen auch einige wichtige Google-APIs kennen, wie z. B. die JavaScript-Bibliothek, die von Google Docs zum Erstellen von Rich-Text-Formatierungen verwendet wird, die Document List-API zum Abrufen von Dokumentenlisten, den Drive-Dienst für den Zugriff auf Dateien, die auf den Google-Servern gespeichert sind, und Drive Dienst zum Hochladen von Dateien.
Sie können auf die meisten dieser APIs zugreifen, wenn Sie ein Add-on für Google Docs erstellen. Möglicherweise müssen Sie jedoch die JavaScript-Bibliothek der App oder andere Teile ändern. Beispielsweise stellt die JavaScript-Bibliothek die Dokumentlisten-API nicht bereit, sodass Sie die Logik zum Abfragen einer Liste von Dokumenten selbst implementieren müssen.
Darüber hinaus enthält die JavaScript-Bibliothek nur eine kleine Teilmenge von Funktionen, sodass Sie möglicherweise Ihre eigenen Funktionen schreiben müssen, um reichhaltigere Interaktionen zu erstellen.
Es ist wichtig, jeden von Ihnen geschriebenen Code zu testen und zu debuggen, um sicherzustellen, dass er ordnungsgemäß ausgeführt wird. Da ein Add-On in die App eingebettet ist, können Sie die normalen JavaScript-Debugging-Tools verwenden, die auf Websites zu finden sind.
4. Testen und veröffentlichen Sie Ihr Add-on oder Ihre App
Sobald Sie Ihren Code geschrieben haben, ist es an der Zeit, ihn zu testen. Dies ist wichtig, um sicherzustellen, dass Ihr Add-On oder Ihre App wie vorgesehen funktioniert. Das Testen Ihres Add-Ons oder Ihrer App stellt sicher, dass der Code solide ist und Sie jedes mögliche Szenario abgedeckt haben.
Schließlich möchten Sie nicht Stunden damit verbringen, etwas zu entwickeln, nur um festzustellen, dass ein Fehler im Code enthalten ist, nachdem Ihr Benutzer ihn erhalten hat. Wenn Sie mit Ihrer Arbeit zufrieden sind, können Sie sie auf der Workspace Labs-Website veröffentlichen.
Sie können das veröffentlichte Add-on oder die veröffentlichte App entweder direkt hochladen oder auf eine Kopie auf Google Drive verlinken.
Hinterlassen Sie uns einen Kommentar