S SaeeAM
Google App Scripts

Google App Scripts

Posted on

SaeeAM से कम लो Indian college student startup company. We work on education, project, and startups/business.

SaeeAM Startup- SaeeAM के साथ Business Karo

SaeeAM Education - SaeeAM के साथ Sikho

SaeeAM Project - SaeeAM के साथ Project Karo 


SaeeAM Team learn/teach on weekend 5-day and last of the weekend we do a project that related to real business problem solve it and make profitable startup and business. If you want your existing business and startup business make profitable and You want to grow yourself and your existing business and startup Join Us at SaeeAM Startup World and grow your business and yourself.


SaeeAM Indian Collage Student Startup Company



Google App Scripts Website Here Click Now

Introduction 

Index.html

index.html is the default file name for the home page of a website. It is the file that is loaded when a user visits the root URL of a website.

For example, if a user visits the URL http://www.example.com, the server will look for an index.html file in the root directory of the website and send it back to the user's browser to be displayed.

index.html is just a normal HTML file and can contain any HTML content you want to include on your home page. It is usually the starting point for users to navigate to other pages on the website.

If you are working on a Google Apps Script project that uses HTML files, the index.html file could be the main file for your project, containing the layout and content for your app. You can then link to other HTML files or resources (such as JavaScript or CSS files) from the index.html file.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SaeeAM Classes For Google App Scripts Learn</title>
<?!= include('Stylesheet'); ?>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<!-- With Normal css use -->
<h1 class="saeeam">Hello, SaeeaM!</h1>

<!-- with bootstrap use -->
<h1>Hello, SaeeaM!</h1>

<p>Hello SaeeAM How r U</p>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<?!= include('JavaScript'); ?>
</body>
</html>

Stylesheet.html

A stylesheet is a file that specifies the styles (e.g., colors, fonts, layout) for a web page or a group of web pages. Stylesheets are usually written in CSS (Cascading Style Sheets) and are applied to HTML or XML documents to give them a specific look and feel.

There are three main ways to apply a stylesheet to an HTML file:

  1. External stylesheet: An external stylesheet is a separate file that contains the styles for an HTML file. To apply an external stylesheet to an HTML file, you can include a link element in the head of the HTML file that points to the stylesheet file.

  2. Internal stylesheet: An internal stylesheet is a set of styles that are defined in the head of an HTML file. To create an internal stylesheet, you can include a style element in the head of the HTML file and define the styles inside it.

  3. Inline styles: Inline styles are styles that are applied directly to individual HTML elements using the style attribute. Inline styles override any styles that are defined in external or internal stylesheets.

Using stylesheets allows you to separate the content of an HTML file from its presentation and makes it easier to maintain and update the styles for a website


<style>
p {
color: green;
}
</style>

JavaScript.html

JavaScript is a programming language that is commonly used in web development. It is used to add interactivity and dynamic behavior to websites, such as responding to user input, updating content, and validating forms.

JavaScript code is usually written in .js files and is executed by the browser when a web page is loaded. It can be added to an HTML file using a script element, either in the head or the body of the HTML file.

For example, consider the following HTML file:

<html> 
<head> 
<script src="myscript.js"></script> 
</head> 
<body>
    <button onclick="sayHello()">Click me</button> 
</body>
</html>

This HTML file includes a script element that loads the myscript.js file and a button element that calls a sayHello function when clicked. The sayHello function could be defined in the myscript.js file like this:

function sayHello() {
  alert('Hello, world!');
}

When the user clicks the button, the sayHello function will be executed and an alert message will be displayed.

JavaScript is a powerful and widely used language that is essential for building modern, interactive websites

<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>

code.gs

code.gs is the default filename for the main code file in a Google Apps Script project. The code in this file is executed when the script is run or when specific triggers are activated.

The code.gs file is a plain text file that contains JavaScript code. You can use this file to define functions, set up triggers, and perform other tasks in your Google Apps Script project.

For example, consider the following code.gs file:

function greet(name) {
  return 'Hello, ' + name + '!';
}

function onOpen() {
  SpreadsheetApp.getUi().createMenu('Custom Menu')
      .addItem('Greet', 'showGreeting')
      .addToUi();
}

function showGreeting() {
  var name = SpreadsheetApp.getActiveSheet().getRange('A1').getValue();
  var message = greet(name);
  SpreadsheetApp.getUi().alert(message);
}

This code.gs file defines a greet function that returns a greeting for a given name, and an onOpen function that adds a custom menu to the active spreadsheet when it is opened. The onOpen function also adds a menu item that displays a greeting using the greet function when clicked.

You can run the functions in the code.gs file by selecting them from the script editor or by activating a trigger (such as the onOpen trigger in this example)


const ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1hpQt1DtXllEiYF9_8hZ8DCP2F6V8mHSamBcRmv5d2Yk/edit#gid=1386834576")
const sheet = ss.getSheetByName("Todo");


function datafetch(e){
let obj = {};
let data = sheet.getDataRange().getValues()
obj.content = data;
console.log(obj.content[0][0]);
// return ContentService.createTextOutput(JSON.stringify(obj)).setMimeType(ContentService.MimeType.JSON);
}

Index.html website show on google App Scripts

HtmlService.createTemplateFromFile('Index') is a method in Google Apps Script that loads an HTML file as a template and returns a template object that you can use to create an HTML output.

The evaluate() method is a method of the template object that generates the final HTML output by filling the template with the specified data and returning the resulting HTML as a string.

For example, consider the following code:


function doGet(request) {
return HtmlService.createTemplateFromFile('Index')
.evaluate();
}

Here, the Index.html file is loaded as a template and the title and body variables are set on the template object. Then, the evaluate() method is called to generate the final HTML output by replacing the <?= title ?> and <?= body ?> placeholders in the Index.html file with the values of the title and body variables.

This allows you to reuse an HTML template and customize it with different data for each instance of the template.

var template = HtmlService.createTemplateFromFile('Index'); template.title = 'My Page'; template.body = 'Hello, world!'; var htmlOutput = template.evaluate();


The include function you have shown is a simple utility function that can be used to include the content of one HTML file in another HTML file.

To use the function, you can call it from within an HTML file and pass the filename of the HTML file you want to include as an argument. The function will return the content of the specified HTML file as a string.

For example, consider the following HTML file (main.html):

<html> 
<body> 
<h1>My Page</h1> 
<div><?= include('header.html'); ?></div> 
<p>Welcome to my page.</p> 
</body> 
</html>

This HTML file includes the header.html file by calling the include function and passing the filename as an argument. The content of the header.html file will be inserted into the main.html file in place of the include function call.

This can be useful for creating reusable components or for separating the layout and content of an HTML file.


function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}

HtmlService.createHtmlOutputFromFile is a method in Google Apps Script that returns an object that represents an HTML file. You can use this object to serve the HTML file as the content of a web page or as the body of an email message.

For example, consider the following code:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

This code creates an object that represents the Index.html file and returns it as the content of the web page. When a user visits the web page, the server will send the Index.html file back to the user's browser to be displayed.

You can also use the setSandboxMode method to specify the sandbox mode for the HTML file. For example:

function doGet() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('Index');
  htmlOutput.setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return htmlOutput;
}

This code creates an object that represents the Index.html file and sets the sandbox mode to IFRAME. The sandbox mode determines the permissions and restrictions for the HTML file, such as whether it is allowed to run JavaScript or make external connections


Installation 

Google Apps Script is a cloud-based scripting language based on JavaScript that allows you to write scripts to automate tasks and create custom solutions for Google products such as Google Docs, Sheets, and Forms.

To set up Google Apps Script for web development, you will need to have a Google account and be signed in. Then, follow these steps:

  1. Go to the Google Apps Script homepage at https://script.google.com/.

  2. Click the "New script" button to create a new script project.

  3. A new tab will open with a blank script editor. You can write your script code in the editor using JavaScript.

  4. To run your script, click the "Run" button or use the Run menu.

  5. To deploy your script as a web app, click the "Publish" button and select "Deploy as web app".

  6. In the "Deploy as web app" dialog, enter a name for your web app and choose the "Execute the app as" and "Who has access to the app" options. Then, click the "Deploy" button.

  7. A dialog will appear with the URL of your web app. You can use this URL to access your web app from a web browser.

Note that Google Apps Script has limitations on the execution time and number of requests per day for web apps. You can find more information about Official Websites.

uses

Google App Scripts is a scripting language based on JavaScript that lets you do new and cool things with Google Apps like Docs, Sheets, and Forms. With Google App Scripts you can: 1. Automate tasks across Google products and third-party services 2. Access various Google services such as Gmail, Calendar, Drive, and more 3. Create custom user interfaces for your apps 4. Integrate with other web services 5. Create add-ons for Google Docs, Sheets, and Forms 6. Build web applications



Resource -- https://developers.google.com/apps-script/guides/html/best-practices#page.html

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)