AICodeProjects.com: May 2025

MyProfiles Lesson 5 - App Script HTML Template

This lesson will guide you through setting up a Google App Script HTML template. The API backend using Firebase Functions won't be covered here.

Using UI Libraries

In the MyProfiles web app we use App Script to call an API to pull data into our app. The data comes in the format of Json. We need to define a prettier look and one that will allow the user to interact with large data results in a user-friendly manner.

To achieve this, we will use a User Interface, UI, library. A UI library helps you more quickly create interfaces for the data the user will view and/or interact with. When you scroll through the results from a search you are using an UI that allow you to go through many records as pages or maybe you'll see a View More button for a continuous view of search records. The UI allows this viewing all while staying on the same page in a small area. That isn't the natural order of data, a record per line is. The UI rewrote the natural order to have a UI that is far more user friendly to view a boat load of records.

Our App Script connects to an HTML template that has the code information on how to display information and data for that particular script. The HTML template can create an interface that offer buttons for the user to change the view to grid view, or list view. These are user interfaces you can create in the HTML template by using the right UI library to help you quickly built that interface. Most UI libraries will use HTML and CSS3 or JavaScript to achieve their interfaces.

MyProfiles will use a library I've used for years, W3.CSS. It has a low learning curve, and it is on one of my most go to sites to quickly recall how to do something regarding building a website from backend coding to HTML and CSS. Sometimes you won't recall all the tags and attribute values you can use so this site is a reference site. They also offer hosting. I haven't used it, and I am not an affiliate.

I usually recommend students start here to learn a language or something else for websites. More advance things are not covered. W3Schools.com has been around for 27 years now. They are not associated with the WWW Consortium standards board or W3C standards. They make the rules all web browsers and web development products are to comply with. Companies can do more than W3C requires. Similar to a company can pay the federal minimum wage or much more. In web dev you will find it frustrating at times to get everything compatible. Your site runs great in Chrome but breaks in Safari. Usually keeping it basic, standard and simple avoids compatibility problems. Staying as Pure to CSS, HTML and JavaScript, which you'll see online as Pure CSS, Pure HTML and Vanilla JavaScript in the description of a library.

The W3.CSS library is fun, offer plenty of styling for most site, has online learning and testing of the learnt concept all for free. The learning curve is low. It will become a top reference site, bookmarked, when you develop your own website and app.

To see if I'm missing out on anything I asked Google's Gemini AI to give me the best UI library to use in a Google App Script HTML template.

Asking Google's Gemini AI About UI Libraries

For an HTML template in Google Apps Script, the best style library to use is generally one that is lightweight and primarily CSS-based, due to the way Apps Script serves HTML content.

Here are the top recommendations:

1. TailwindCSS:

Why it's best: It's a "utility-first" framework. This means you apply small, single-purpose CSS classes directly in your HTML. When properly configured (or by using a CDN that provides a small build), it can result in extremely small CSS file sizes because you only include the styles you actually use. It's pure CSS, so it doesn't add JavaScript overhead for styling.

Ideal for: Projects where you want high customization and minimal CSS footprint.

2. Bulma:

Why it's a great alternative: Bulma is also a pure CSS framework (no JavaScript dependencies for its core components) and is built on Flexbox for responsive layouts. It's modular, allowing you to import only what you need, which helps keep the file size down. Its class names are generally more semantic than Tailwind's.

Ideal for: Projects needing a robust, responsive framework without JavaScript, with a slightly gentler learning curve than Tailwind.

3. Lightweight Microframeworks (e.g., Skeleton, Milligram, Pure.css):

Why they're good: These are extremely minimal CSS libraries, often just a few kilobytes. They provide basic styling for HTML elements and a simple grid system.

Ideal for: Very simple Apps Script UIs where you need a quick, clean starting point without much visual complexity or custom styling.

Avoid (or use with caution):

Heavy frameworks like full Bootstrap: While popular, the full Bootstrap package includes a lot of CSS and JavaScript that can significantly increase the load time of your Apps Script web app. If you use Bootstrap, consider a highly customized build to reduce its size.

We are done with Gemini for now. For further reading and understanding of HTML templates navigate to: HTML Service: Templated HTML | Apps Script | Google for Developers. When you are on an area with the source code, there are 3 buttons; Explain this code, Change to Dark Mode Theme, and Copy text. Click the 1st button to get a good explanation on what the code is doing. The more you do this the better your understanding of code and logic the more you can do more advanced things on your own.

I tried the TailwindCSS and it is bulkier the W3Schools' W3C.CSS. If you already know a library that works you can stick with it if it doesn't interfere with App Scripts way of getting things done.

We really aren't in need of much JavaScript functioning but, if needed there is:

W3.JS @ https://www.w3schools.com/w3js/

For the MyProfiles app we will have several template files and will get into each one at a time in later lessons. For now, we're covering the content most template files will contain.

Our MyProfiles run on servers. We need to save on server resources every change we get. I asked CoPilot about using CDNs. You could ask about "How to same on App Script servers while using HTML templates". It would give different options. I try to stick with what the lessons themselves will need so I go straight to asking about CDNs.

Asking Microsoft's Gemini AI About CDNs

Introduction to Content Delivery Networks (CDNs)

A Content Delivery Network (CDN) is a network of servers strategically placed around the world to help deliver web content faster and more efficiently. Instead of relying on a single server to handle all requests, CDNs distribute the load, ensuring that users can access websites, images, videos, and other resources with minimal delay.

Pros of Using a CDN

1. Improved Website Speed – CDNs store copies of your website’s content on multiple servers, reducing the distance between users and the data they request. Faster load times improve user experience.

2. Better Scalability – If your site experiences a traffic spike, CDNs help distribute the load, preventing crashes and slowdowns.

3. Enhanced Security – CDNs offer protection against cyber threats like Distributed Denial-of-Service (DDoS) attacks and can provide encryption to secure sensitive data.

4. Reduced Bandwidth Costs – CDNs optimize content delivery, reducing strain on your primary server and lowering bandwidth consumption.

5. Global Reach – By hosting content in multiple regions, CDNs ensure that international users can access your website quickly, regardless of location.

Cons of Using a CDN

1. Cost Considerations – While some CDNs are free, premium services can be expensive, depending on storage, traffic, and security requirements.

2. Complex Setup – Implementing a CDN may require technical expertise to configure caching, DNS settings, and security protocols.

3. Reliance on Third-Party Infrastructure – If the CDN provider experiences downtime, it may affect your website’s availability.

4. Potential Latency Issues – While CDNs usually improve speed, incorrect configurations or certain network conditions may introduce unexpected delays.

5. Limited Control – Since CDNs operate through external providers, you may have less control over the specifics of how your content is distributed and stored.

Is a CDN Right for You?

For businesses, e-commerce sites, media platforms, and websites with global audiences, CDNs can be a game-changer. However, smaller sites with local audiences might not need the added infrastructure unless they experience heavy traffic or security threats.

Would you like me to help you choose a CDN or explore how to integrate one into your setup?

We do not need this answer. We're good. If it were your project, you could go further into getting answers from AI if needed.

Do not be afraid to use the AI and ask it as detailed a question for your needs as possible. They are pretty advanced and get more advanced by the day.

What the MyProfiles Project Will Use

The W3.CSS library will be used. Most of the tools introduce in this course were chosen because they have a generous free tier so that you can test and get started on building your idea before spending a ton of money on tools. Once you grow you will have to upgrade to the paid levels of these or other tools. By that time, you'll have enough knowledge to pick out things that work best for your project.

W3.CSS is fast to pick up, has plenty of CSS options to make your output look good. They offer a CDN. Since they are popular with many sites around the globe the odds are that some other website that the user visited also uses this CDN. The plus is that it was downloaded and that means you site can load faster since it will not have to download the library to the local machine of the visitor again.

We only have one line to add to the HTML template to start using the W3.CSS library. In the <head> after the <meta> tags and before the </head> end tag is where you will place the link data for the W3.CSS library.

The next lesson will walk you through how to use an API and connect it to an Interface we define in the HTML template, the Index.html file. We use W3.CSS to make it look prettier. I am keeping it simple for learning's sake. Once you get the basics more complex styling and coding may be used in the lessons.

The next lessons pull things together so code data will be those lessons.

You can see the finale test from the next lesson @ https://sites.google.com/view/myprofilesacp/testapi

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.

MyProfiles Lesson 4 - Google Sites Website

This lesson will guide you through setting up a Google Sites website. The API backend using Firebase Functions won't be covered here.

What is a Google Sites website?

Google Sites is a free Google hosted website. The websites are hosted on cloud servers, so they load fast. You can create multiple websites for free.

Google Sites normally serve static pages. Static pages are pages that do not change. The content only changes if you edit the page in a webpage editor.

Google Sites can serve dynamic pages. Dynamic pages are pages where the content changes based on some condition or trigger.

An example of a static page would be a Terms of Service. The content doesn't change based on a condition. You only need basic HTML to render the content. The content changes when the files content changes.

A "dynamic webpage" changes what the visitor sees based on certain conditions—like their location—without altering the actual file or code. It’s a bit like a smart sign that automatically adjusts its message depending on who is looking at it.

For example, imagine you run an online store. If someone visits from the U.S., the website could automatically show prices in dollars, while a visitor from France would see prices in euros. The webpage isn’t changing on the backend—it’s just displaying different information based on the visitor's location.

How does this happen? The website has built-in instructions that check the visitor’s location and then show the right content. This process happens instantly, and the visitor doesn’t need to do anything.

The code we'll create in later lesson will embed the Google App Script code into the home page. This will make the home page dynamic under the hood.

Currently you can create the site and add the static pages. Our test site has an example to follow. you should have an About, Contact, Privacy and Terms of Service.

These lessons assume you are familiar with Google Sites and setting up page, hiding and displaying page links in a menu, etc.

Visit sample site at:

https://myprofiles.aicodeprojects.com

Best Practices

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

Keep Things Simple: Don't try to do everything at once.
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.

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.

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:

Keep You Organized: Just like a tidy workshop, an organized environment helps you find your files and code easily, saving you time and frustration.
Prevent Mistakes: Proper tools can highlight errors before they become big problems.
Make Testing Easier: You can quickly check if your code works as expected.
Help You Learn Faster: By having the right tools, you can focus on learning to code, not struggling with setup issues.
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.

Site Update

Occasionally there will be update posts related to AI Code Projects itself at this site.

For each project:

Lessons:

https://www.aicodeprojects.com/

User Guide How-to Videos:

https://www.youtube.com/channel/UCYugC-DBnx6iA7pb95118og

Test Site:

https://myprofiles.aicodeprojects.com

Source Code:

AICodeProjects Frontend and Back End Code

MyProfiles Lesson 2 - App Functionality

INTRODUCTION

This lesson will dive into the functionality the app will have.

This app will be a website that has a search box and search button on the home page. If a user enters a term or name in the box and then click search a results list will appear underneath the search box on the screen.

We are limiting results to the first 50 records. We are bootstrapping and cannot afford to waste resources. Most searchers will not go past the first page on search engines which are usually 30 to 30 records. We'll have a note on the limits and reasoning.

We'll put the records in an interface that allow the user to hit a forward or backward arrow to sit through records. The interface will also allow them to jump to a block. A block will be 10 records.

When you design interfaces think of how you use similar things. You can even go to a site and note your habits and wishes. Odds are you do not like a boat load of information at once or for things to take too long. If it does you try some other search terms. This is user behavior. When you design you want to design with that in mind.

Google was the first site to show simplicity sells. Unlike other search engine's landing pages Google's page simply had a search box and a menu item or two and ended with the copyright and attribution in the footer. People loved not getting bombarded with too much just to find something. It was too distraction. Google's page still maintains that simplicity and they are still the top engine.

Our landing page is also simple. Other than the search box, search button and footer data is a menu item that says, "Account".

When the user clicks the Account menu item a pop-up box will offer social login for Google, Microsoft or Facebook. We could add more but these three covers most people, especially English speakers in the USA, our target. You can do research on your target and tailor to them to streamline your design and costs. Studies show that social login gets more signups and returns because of ease of functionality. Try to always think of your target and how they will potentially use your app.

We target busy people who could easily be multitasking while at our site. We have to make things useful and quick for that reason alone. This helps us in not overloading our workload with uselessness.

The popup will have the social login. We could put a line to Register if they never had. Sometimes this is futile because people can actually forget they signed up and duplicate accounts happen. One reason developers have the "Register?" is that it reduces function calls. Our free tier is generous and the pay tier for calls to Firebase Functions are pretty low and affordable, so we won't ask users the Register question.

We can simply check if the login credentials they've chosen is in our datastore. If so then they already have an account and we send them to the Admin page, if not we send them to our Registration process. The registration process gets permission from the social network to use the credentials and request access to the email so that we can send emails regarding their account.

A plus in using social login is the amount of work we do not have to do. If they forget their password the social network handles that. The security the social networks have helps us stay more secure. We also do not have to go through the email validation process since the social network did that already. We save coding time and resources.

The Admin page is broken into sections. We use a tabbed interface. There will be an Account Info, Social Links, Money Links and Tags section. User inputs their data and save it. Each section has mostly input fields. We valid input via code to make sure it isn't hacker tricks or ill-formed. The Account information section has a Delete Account button.

Each button has processes as do the input fields. We use App Scripts to handle the functionality and make even backend calls if needed.

Each Buttons or Section will get its own detailed lesson. The final code will be mentioned in a lesson when it represents the final code of a feature. The Search makes read only calls. The Admin make CRUD which stands for Create, Read, Update, Delete. There will be at least one API call for each CRUD function. Some like read can get more than one since we can go to read several records or one record by ID or a record by some other value or key. Keys are data that gets you to specific data faster.

In our code each function will be an API endpoint. With Google Firebase Functions each endpoint is a separate, single block of code that will execute and return data or/and a server status message. We handle calling endpoints to send or receive information with App Scripts which is written in Typescript a structured JavaScript.

The Firebase Functions endpoint code blocks as well as the App Script code will be in the lessons. A section could have a string of lessons. For Example, the Social Links Section will have a lesson for each CRUD, the tags could have just one lesson since it only does a Read function.

The Test site at the location:

https://myprofiles.aicodeprojects.com

will be where the final code can be tested.

There will be other projects that will also have a subdomain for testing. Only the SaveMyProfiles is made into a live production website located at:

https://www.savemyprofiles.com

There are no lessons for this project, and it uses different code platforms for its Firebase frontend and backend. Live production sites are real sites on the internet that are for customers to use at will. It's a business website in our case.

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.

MyProfiles Lesson 1 - Introduction

Welcome.

INTRODUCTION

This is lesson one. Lesson one is an introduction to the project and the decision process for the platform the project will reside upon.

This is an AI Code Projects project. The goal is to use Google Workspace tools to help bootstrap a website to earn income.

This project is the My Profiles project. My Profiles is web app that allow users to add multiple online profile information in one place, use a detail page to get traffic to multiple online locations.

It's free. You can quickly add your online locations to get traffic to your multiple locations online. People can go to one place to find your online activities including your money links.

It took some research to finally decide on the platform for the project. Cost is a major factor. Initially WordPress seemed like a good choice. The maintenance portion of the project made that platform a turn off. I do not want to have to do updates all the time and worry about code breaking due to some update of some module. If you do things that stay within the WordPress world then it works but it really worked when you get the managed version which costs money. Self-management will drain your time. That is money.

Costs, security, speed and maintenance, in that order, are the major factors in making the decisions. Google Workspace offer plenty of tools with a generous free tier that can be integrated and with some non-complex coding the integration and integration form other services can make the tools more custom and functional for your needs.

I asked Microsoft's CoPilot to help me narrow down my best approach in using Google Workspace to develop a website that will allow users to add profiles and search for profiles. Note: the more specific you are with any of the AI tools he better the response. After a few brainstorming chats I had the direction of the platform and approach to accomplish the goals for this project.

To meet my goals for costs, etc. I will use Google Firebase Functions as a backend API. This will allow for frontend flexibility, and it was the most cost-effective way to meet my goals. There are other considerations such as your skill set and the tools you have at your disposal to build your project. The AI tools are a major game changer in increasing your productivity levels and a boost to the skills level you possess.

For the project I will have a real live production site at https://www.savemyprofiles.com and a test of the project at https://myprofiles.aicodeprojects.com.

The live production site is the real McCoy and actually uses a Google Firebase frontend web app as well as the Google Firebase Functions as a backend API. The code generations for the front end and back end aren't a part of the lessons. The site is free to use and may become open sourced. I haven't made the final decision on that.

The test site exists for the lessons. The lessons are to show how you can add functionality to Google Sites that works with dynamic content instead of static only content. Static only content pages are webpages that simply display content such as images, text videos. There is no programming for some conditions in order to display it. Dynamic content is content that changes based on some condition and requires programming to output the content.

With dynamic content capabilities you can do many things such as add a paywall or create a membership site where users sign up, sign in to access content. You could make it a free or paid or both membership site. This makes Google Sites go beyond the standard static content features. I'm showing these lessons for entrepreneurs who have to bootstrap a dynamic content site before they have the funds to pay for the resources.

I hope what is learnt jumpstarts sites, but the sites created in the lessons are not intended to scale to tens of thousands of users or more. You have to spend for that and if you bootstrap correctly, you can get it achieved with little out of pocket money. That is the goal of the lessons.

These are exciting times since non-programmers that have strong logic skills can actually code like a programmer using AI tools in the correct sequence. This is covered in the lessons. You do not have to spend bundles on IT help to get functionality you want with many of the latest AI tools. Strong logic skills should suffice.

Breaking your project down into parts that interconnect correctly allow you to apply all kinds of resources to create the functioning of those smaller parts. We will have a Google Sites front end, use App Scripts to add the backend functionality or in our case since we are using an API for our backend, we'll use App Scripts to call the API and display the call's results. The code will also manipulate the frontend for things such are sorting the data or changing the display layout of the date. Other pages will be static content so that is like using a word processor, no coding involved, the Sites tools handle the under the hood work.

RECAP

We will create a site that allow users to add a profile via registering for an account and then signing in to modify the account. The site will allow site visitors to search the profiles, rate and share the profiles. Those that sign up for an account will be able to add their profile information that the search engine will use. The lesson will go into detail of the different functions.

The platform we'll use to achieve the goals of cost efficiency, security, speed and maintenance ease will be Google Sites for our frontend user interactions, Google Firebase Functions for our backend API and Google App Scripts to tie the frontend and backend together to achieve our work.

This is an introduction to the project. The next lesson will dive more into the app functionality more. The lesson following that will dive into the tools and platform more before finally getting to code work.

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.