Did you know that you can develop add-ons and apps for Google Workspace?
With a little bit of coding knowledge, you can create tools to help make your work life easier. In this article, we’ll walk you through the process of creating a basic add-on or app.
Let’s get started!
Steps to Develop Google Workspace Add-ons and Apps
1. Pick the Right Tool for the Job
The first step is to decide whether you want to develop an add-on or an app. The best way to determine which one will work best for you is to think about what you want to do, how much time you have available to complete the project and the level of knowledge that you have regarding coding.
If you’re just starting out, use the Google Add-ons tool. If you’ve worked with JavaScript before, go ahead and check out the Google Apps Script Add-on Builder.
2. Set up Your Development Environment
Now that you’ve decided which tool you want to use, it’s time to set up your development environment. This involves installing the necessary software and setting up some basic configuration files. The setup process will vary depending on which tool you’re using.
If you’re developing an app, you’ll need the following:
App Script Editor
If you’re developing a script for a Google Apps Add-on, use the Google App Scripts editor; if you’re working with apps on G Suite, use Google Sheets.
To access the Google app scripts editor, create a new document in Google Docs and open the app scripts from the extensions tab. It will look like this:
App Script CLI
The Chrome Developer Tools have included a command line interface (CLI) that allows you to control Google Apps script directly from your command line.
A Google Account
You’ll need a Google account to access Google Apps and all their services. You’ll use this account when you install Google Chrome on your development machine and sign in with your Google Account so that your development machine will be associated with your Google account.
The same goes for the add-ons as well.
3. Write Some Code!
Now it’s time to start coding. The specifics will depend on which tool you’re using, but in general, you’ll need to write some HTML, CSS, and JavaScript. You can read about how to do that with any text editor or IDE (integrated development environment).
After you’ve written your code, you can test it in the browser or on a device (phone, tablet, or computer) running the Play Store.
HTML
HyperText Markup Language (HMTL) is used to generate web pages. The page consists of HTML elements and tags. HTML is a markup language that defines how your web page looks and what content will be displayed when people view the page.
You can generate a new HTML file in Google App Script like this:
To make an effective app, you’ll use HTML to define the app’s structure, create buttons and other user interface elements, and display data from your database.
HTML for your app should be written inside a tag, which surrounds all of the content in your app. To see how the HTML for an app works, you can create a new project by choosing File > New Project. Choose the Web App option.
CSS
Cascading Style Sheets are used to apply a style to HTML elements in your app. The best way to see what CSS looks like is to visit the Developer Tools in Chrome or Firefox. Once you open the Developer Tools, click the Toggle device toolbar button or type control + I to toggle between mobile and desktop mode. Then select the Design view.
The CSS and JavaScript libraries may be used by using other libraries, thanks to Apps Script. An illustration of how to link to the JQuery library in the header section is shown below.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<?!=content?>
...
</head>
<body>
You’ll see the basic HTML for your app, along with the styling properties applied to it. When the app launches, the styling properties also take effect. However, if the styling is applied to the wrong element, the result might not look very good.
JavaScript
JavaScript is a programming language that adds more dynamic features to your app. For example, JavaScript lets you add interactivity to a web page. JavaScript is usually included in your project files when you create a new app. If you want to add additional JavaScript to your app, you can do so by adding more files to your project.
It’s to understand how JavaScript works because it allows you to create sophisticated custom code that can run inside Google Docs.
To create an add-on, first, you need to develop the JavaScript needed to create an interactive feature in your app. You also need to know about several important Google APIs, such as the JavaScript library used by Google Docs to create rich text formatting, the Document List API to retrieve lists of documents, the Drive service for accessing files stored on Google’s servers, and the Drive service for uploading files.
You can access most of these APIs when you create an add-on for Google Docs. However, you may have to change the app’s JavaScript library or other parts. For example, the JavaScript library does not expose the Document List API, so you must implement the logic to query a list of documents yourself.
Additionally, the JavaScript library contains only a small subset of functions, so you may have to write your own functions to create richer interactions.
It’s important to test and debug any code you write to ensure that it will run correctly. Because an add-on is embedded within the app, you can use the normal JavaScript debugging tools found on websites.
4. Test and Publish Your Add-on or App
Once you’ve written your code, it’s time to test it. This is important to ensure that your add-on or app works as intended. Testing your add-on or app ensures that the code is solid and that you’ve covered every possible scenario.
After all, you don’t want to spend hours developing something only to realize there was a bug in the code after your user gets it. Once you’re satisfied with your work, go ahead and publish it on the Workspace Labs site.
You can either upload the published add-on or app directly, or link to a copy on Google Drive.
Leave a Reply