AppsScriptPulse

Building the Ultimate Google Apps Script Front Ends. Part 2: Bundling NPM Modules

Hey there, friends! šŸ‘‹ Our Emojibar — yes, that’s what we’re calling it now — is coming along nicely! In the previous post, we learned how to bundle the project with Vite and vite-plugin-singlefile, and it’s now time to add some real functionality!

To complete our Emojibar, we’ll use two NPM modules:

  • Unicode-Emoji-JSON:Ā We need a complete list of emojis, and this simple module provides them in JSON format. Perfect!
  • ToastifyJS:Ā When users click on an emoji, it’ll be copied into their buffer. Just so they have some feedback, we’ll show them a confirmation toast. This library is great for this purpose.

We’ll also add search and navigation functionality, meaning that we’ll have the entire backbone of the application ready by the end of this post.

Source: Building the Ultimate Google Apps Script Front Ends. Part 2: Bundling NPM Modules

Building the Ultimate Google Apps Script Front Ends, Part 1: Bundling with Vite šŸš€

 

Last week, we talked about the best way to build front-ends for Google Apps Script. Today, let’s roll up our sleeves and dive in! šŸ˜Ž

Source: Building the Ultimate Google Apps Script Front Ends, Part 1: Bundling with Vite šŸš€

The Ultimate Google Apps Script Front-End Development Guide. Part 0: The Worst and the Best Practices

Welcome to the Ultimate Google Ultimate Google Apps Script Front-End Development Guide!

If you are reading this post, then you likely have experience with Google Apps Script. Essentially, there are three types of front-ends that you can create with Apps Script:

  • Web apps
  • Modal/modeless dialogues
  • Sidebars

In this blog post series, we will only discuss HTML front-ends, as this is where you can create the most powerful and sophisticated user experiences. Unfortunately, the Card Service is outside the scope of this series, and it is not nearly as powerful as an HTML front-end. With that in mind, Google, how about allowing HTML front-ends for Workspace add-ons?

Source: The Ultimate Google Apps Script Front-End Development Guide. Part 0: The Worst and the Best Practices

Using ChatGPT to Generate Fake Data in Your Spreadsheet with Google Apps Script

ChatGPT is pretty much a universal API: one endpoint to get any data.

Fake data is useful for testing purposes. At times, real data is too sensitive, and sometimes you do not have access to real data before production, but you need to begin working with something. Here is where fake data comes in.

We used to have a great library for fake data calledĀ Faker.js; however, Marak, the author, became so frustrated that he could not monetize the solution that heĀ pushed an update that broke everything, which led to him being blocked on GitHub and NPM. As a result, the library is no longer maintained. ChatGPT, however, is not going anywhere.

Source: Using ChatGPT to Generate Fake Data in Your Spreadsheet with Google Apps Script

Three pitfalls to avoid when using the onEdit trigger in Google Apps Script

Illustration by ahmiruddinhidayat111198 on freepik.com https://www.freepik.com/author/fahmiruddinhidayat111198

  1. Making a Single Function Do Everything
  2. Expecting onEdit to Catch All Changes by Default

Source: Three Pitfalls to Avoid When Using the onEdit Trigger in Google Apps Script

If you use clasp with Google Apps Script, you need this environment switching utility right now!

When working in a team and/or with a client, you want to have multiple environments. At minimum, you probably want a dev environment (or multiple ones) in which you are working, and a test environment in which the client or your team can run acceptance tests before production. Of course, they must both be separate from the production environment. To push your code to the correct environment, you need to either update theĀ .clasp.jsonĀ file manually or keep multiple copies of your script with differentĀ .clasp.json files. Fortunately, things have just become significantly easier, as I recently built an app for this purpose calledĀ clasp-env,Ā which is available onĀ NPM. See the source link for details.

Source: “If You Use Clasp With Google Apps Script, You Need This Utility Right Now”

How I Programmed the Game of Life in a Google Sheet with Google Apps Script

According to Wikipedia, the Game of Life ā€œis a cellular automaton devised by the British mathematician John Horton Conway in 1970.ā€

It begins on a two-dimensional grid of square cells. Each cell can be either alive or dead. Every cell interacts with its eight immediate neighbors. A live cell only remains alive if it has two or three living neighbors. If it has fewer than two living neighbors, it dies as if by underpopulation. Conversely, if it has more than three, it dies as if by overpopulation. A dead cell remains dead unless it has exactly three living neighbors; otherwise, it becomes a live cell, as if by reproduction.

There is no immediate practical use for the Game of Life in a spreadsheet; however, it is a fun algorithmic challenge. Moreover, Google Sheets natively provides us with the perfect data structure: a two-dimensional array. This is all the more reason to work on those array skills!

As usual, there is a GitHub repo with the full source code. Alternatively, you can just make a copy of this spreadsheet.

Source: “How I Programmed the Game of Life in a Google Sheet with Google Apps Script

How to Build an API Wrapper in Google Apps Script

No Google Apps Script SDK for your favorite API? No problem!

I’ve never seen a Google Apps Script SDK made available as part of an API, as, surprise surprise, it’s not the most popular choice for professional development. It’s time to start changing that, so we will learn to build our own!

[Editor note: Really impressive work from Dmitry providing a framework you can use to develop your own service for interacting with 3rd party APIs. The post includes lots of clear instructions and guidance to help you understand and learn about approaches for structuring your Google Apps Script code projects]

Source: How to Build an API Wrapper in Google Apps Script

The ULTIMATE Guide to NPM Modules in Google Apps Script

The What and Why of NPM Modules

Google Apps Script has some amazing built-in stuff. It gives us native access to all Google apps like Sheets and Gmail, seamlessly integrates with GCP services like BigQuery, allows for the building of interfaces with HTML and CardService, facilitates the creation of simple webhooks/APIs and web apps with simple and efficient client-server communication, can make use of any API through UrlFetchApp, and can be bundled into add-ons for efficient distribution. In my experience, it’s enough for 99% of all Google Apps Script developers.

However, one thing that Google Apps Script is missing is modules. NPM has an extremely impressive database of JavaScript modules that don’t automatically integrate with Apps Script. Of course, in Apps Script we have libraries, but the selection is extremely limited and there is no marketplace for those. By the way, who wants to participate in creating one? Let me know in the comments! However, the very first warning on the libraries documentation page notes that libraries make Apps Script slow. Well, Apps Script is already far from being the fastest programming language on Earth, so slowing it down further is not an idea that I’m a fan of!

But what if I told you that there actually is a way to use some NPM modules in Apps Script? You just need to bundle them with Webpack. Not sure what I mean? Keep reading.

Source: The ULTIMATE Guide to NPM Modules in Google Apps Script.

How to Write Google Apps Script Code Locally in VS Code and Deploy It With clasp

Google Apps Script Power Up

Why Write GAS Code Locally?

When it came out, the new Google Apps Script IDE was, of course, a big deal. It’s way better than the legacy one. It brought syntax highlighting, keyboard shortcuts, command palette and just a much better UI experience.

In fact the reason it’s so good is that it’s built on top of VS CodeĀ Monaco editor. But it’s definitely still far away from what a real VS Code installation can do. You can get all the functionality of the online IDE and much more more: autocomplete, custom themes, installation of modules, linting, snippets, etc.

The bare minimum that you would need is :

  • AĀ VS CodeĀ installation (duh!)
  • Node.jsĀ + NPM : a JavaScript runtime with a built-in module installer;
  • Autocomplete;
  • clasp: a CLI utility to sync your GAS code

Let’s get into it!

Source: How to Write Google Apps Script Code Locally in VS Code and Deploy It With clasp