Google App Script: How to create a simple Hello World standalone HTML/Javascript page with Example in Google App Script

Google Apps Script is a scripting language based on JavaScript that will allow you to create Google Apps like Docs, Sheets, and Forms. You don't need to install anything there, Google provides you a code editor and that editor can open in browser, and also you can run scripts Google's servers. Wow! that's fantastic feature no headache of server management :)

In this post, I will show you how we can simply create a simple Hello World standalone page/program and how to publish that web app privately or publicly over there.

Please refer following steps one by one and create your first standalone Google App Script project.

Step 1: First visit http://script.google.com if not logged in yet then please login by using gmail account.



Step 2: Create a new project Go to menu New->Project then click on 'Untitled Project' you can see on left corner and enter project name there like 'HelloWorld' (It can be anything)



Step 3: Go to menu File -> New -> Html file and create a HTML file name as 'helloworld.html'

Step 4: Copy the following code in 'helloworld.html' file.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function clickMe() {        
        google.script.run
              .withSuccessHandler(showAlert) // will execute showAlert(value) function on success
              .myFunction(); // will call myFunction() function present in Code.gs file
      }
      
      function showAlert(value) {
        document.getElementById('message').innerHTML = value;
      }
    </script>
  </head>
  <body>
    <h2>Hello World!!!</h2>
    <div id="message" style="color:green"></div>    
    <p><button onclick="clickMe(); return false;">Click Me</button></p> 
  </body>
</html>


Step 5: When you created the project first time there is a Code.gs file by default in the script editor. Click on that and copy paste following code in it.


function myFunction() {
  return 'Hey!!! Welcome To My First Google AppScript!';
}
function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('helloworld.html')
    .setTitle("Hello World Example");//We can set title from here
}


Very Important Note:  We need to add doGet(e) function in Code.gs to publish project as Web App. This function uses HTMLService to return HTML Output of helloworld.html file that we created earlier.

#Deploying/Publishing a script as a web app

Now our script is ready to publish so do the following steps to publish it.

Step 1: Save a new version of the script by selecting File > Manage Versions, then Save New Version.
For Example : type 1 there if this is your first build.




Step 2: Then select Publish > Deploy as web app.




Step 3: You can see under Project Version, select the version you just saved above.


Step 4: Under the 'Execute the app as', select the authorization for the app, means this app should be accessible by you only or it should be publicly accessed.

Step 5: Under the 'Who has access to the app', you need to select who should be allowed to visit this web app. The options are differ depending on the type of account you have choose, but they can include "Only myself", any member of your domain, "Anyone" (with a Google account), or "Anyone, even anonymous".

Step 6: Click Deploy.

As you click on Deploy button, you can see a message indicating that your project has been successfully deployed as a web app.

For testing execute that Current web app URL then you will see web page with Click Me button.
When you click on that Click Me button you will get success message like below screen.


For more detail please refer google developers doc: https://developers.google.com/apps-script/guides/web


I hope, it must be helpful & please share your feedback or queries in comments box. Thanks!
Google App Script: How to create a simple Hello World standalone HTML/Javascript page with Example in Google App Script Google App Script: How to create a simple Hello World standalone HTML/Javascript page with Example in Google App Script Reviewed by Web Technology Funda on 7:05:00 AM Rating: 5

No comments

Free! Free!Free! Subscribe to Get Free PHP (Magento) tutorial Update in Your Inbox!!! Hurry Up!!!