MyProfiles Lesson 3 - Development Environment and Tools for Google Apps Script

 

This lesson will guide you through setting up a development environment specifically for Google Apps Script.  The API backend using Firebase Functions won't be covered here.

What is a Development Environment?

Imagine you want to build a treehouse. You wouldn't just grab some wood and nails and start hammering in your backyard, right? You'd need a dedicated space, tools (hammer, saw, measuring tape), a blueprint, and a way to test if your structure is stable.

A development environment is very similar. It's your dedicated workspace, a collection of tools, and a set of practices that help you write, test, and manage your code efficiently. It's where you bring your ideas to life!

Why is a Good Development Environment Important?

A well-set-up environment can:

1. Keep You Organized: Just like a tidy workshop, an organized environment helps you find your files and code easily, saving you time and frustration.

2. Prevent Mistakes: Proper tools can highlight errors before they become big problems.

3. Make Testing Easier: You can quickly check if your code works as expected.

4. Help You Learn Faster: By having the right tools, you can focus on learning to code, not struggling with setup issues.

5. Allow for Collaboration (Later): While not our focus today, good practices prepare you for working with others.

Best Practices

Here are some simple "best practices" to keep in mind, even as a non-programmer:

• Start Simple: Don't try to learn everything at once. Focus on the core tools you need for your current project.

• Keep Things Organized: Create dedicated folders for your projects. Name your files clearly.

• Save Your Work Often: This is crucial! Losing progress is frustrating.

• Test as You Go: Don't wait until the very end to see if your code works. Test small pieces as you write them.

• Don't Be Afraid to Experiment: That's how you learn! If something breaks, that's an opportunity to understand why.

Your Windows 11 Development Environment for Google Apps Script

Now, let's get specific! You want to write Google Apps Script code to embed into a Google Sites webpage, and this script will call an API. Google Apps Script is fantastic because it's mostly cloud-based, meaning a lot of your "environment" is already set up for you online!

Here's what you'll need and how to set it up:

1. Google Account and Web Browser

• What it is: You need a Google account (like a Gmail account) and a modern web browser (Google Chrome, Microsoft Edge, Mozilla Firefox).

• Why you need it: Google Apps Script lives entirely within your Google account and is accessed through your browser.

• Setup: If you have Gmail, you already have a Google account! Just open your favorite browser.

2. The Google Apps Script Editor (Your Primary Workspace)

• What it is: This is Google's online code editor specifically designed for Apps Script. It's like a simplified word processor for code.

• Why you need it: This is where you'll write, save, and run your Apps Script code.

• Setup:

  1. Go to script.google.com in your web browser.

  2. Sign in with your Google account if prompted.

  3. You'll see a page where you can create new projects. Click "New project" or "Start a new project".

  4. This opens the online editor. You'll see a file named Code.gs by default. This is where your script goes!

3. Understanding APIs (The "Calling an API" Part)

An API (Application Programming Interface) is like a waiter in a restaurant. You (your Apps Script) tell the waiter (the API) what you want (e.g., "give me the current weather for Paris"), and the waiter goes to the kitchen (the server where the data lives), gets the information, and brings it back to you.

Your Apps Script will use a special built-in function called UrlFetchApp to "talk" to these APIs.

4. Mock JSON Tools (Playing with Test Data)

When you're learning, it's often helpful to have some fake data to practice with, rather than relying on real APIs that might require special access or have limits. This is where mock JSON tools come in!

JSON (JavaScript Object Notation) is a common way that APIs send and receive data. It looks a bit like a structured list or a dictionary.

Why use mock JSON tools?

• Safe Experimentation: You can test your code without affecting real systems.

• No API Keys Needed: Many real APIs require special "keys" to access them. Mock APIs don't.

• Consistent Data: You know exactly what data you'll get back, which helps with testing.

• Offline Development (Conceptual): Even though Apps Script is online, mock data helps you build the logic before connecting to a live API.

How to use them:

These tools provide a simple URL that, when accessed, returns a predefined set of JSON data. You'll use this URL in your Apps Script.

Examples of Mock JSON Tools:

• JSONPlaceholder: This is a fantastic free online REST API that provides fake data (posts, comments, users, todos).

  • Website: https://jsonplaceholder.typicode.com/

  • Example Usage: If you go to https://jsonplaceholder.typicode.com/posts/1, you'll see a JSON object representing a single blog post. You can use this URL in your Apps Script to simulate getting data.

• Mocky: This tool allows you to create your own custom mock JSON responses. You define the JSON, and it gives you a URL.

  • Website: https://designer.mocky.io/

  • Example Usage: You can paste in some JSON like {"name": "Alice", "age": 30} and Mocky will give you a unique URL that returns this exact data.

5. Local Text Editor (Optional but Recommended)

While the Google Apps Script editor is great for simple tasks, a more powerful local text editor can enhance your experience, especially as your scripts grow.

• Visual Studio Code (VS Code):

  • What it is: A free, powerful, and very popular code editor from Microsoft. It runs on your Windows 11 computer.

  • Why you need it: It offers features like syntax highlighting (colors your code to make it easier to read), auto-completion, and extensions that can help you write code more efficiently.

  • Setup:

    1. Go to https://code.visualstudio.com/

    2. Download and install the Windows version.

    3. Once installed, you can open a new file and start typing code. You'd then copy-paste this code into the Google Apps Script editor.

6. Version Control (A Glimpse for the Future)

• What it is: Tools like Git and services like GitHub help you track changes to your code over time. Think of it like "undo" for your entire project, but much more powerful.

• Why it's important (later): It's essential for collaborating with others and for keeping a history of your changes, allowing you to revert to previous versions if you make a mistake.

• For beginners: Don't worry too much about this now. The Google Apps Script editor has its own basic version history. As you progress, you might explore clasp (a command-line tool for Apps Script) which integrates with Git. But for now, focus on the online editor.
  
  
  

BTW:  Since we are trying to get people to DIY with their own projects from these lessons it will be text and not video based.

From now and forward give yourself a week per lesson to soak things in and test things out, play around with it.  Remember that the goal is for you to learn skills that you can use to development things on your own.