A web app like this sits independently from the other Google Apps meaning it is not bound to Google Sheets or Docs for instance, instead it provides a webpage that can be interacted with directly. At some point it is likely you will want the script to interact with Google Apps in some way so that you can achieve a desired task - this will come in later blog posts.
Code.gs
We begin with the function that is called when the webpage first opens and that will ultimately launch our index.html file. We use 'doGet(e)' to capture the HTTP request for which we can use the 'HtmlService' to then create the HTML webpage.
NOTE: This snippet of code is very much a 'copy and re-use' for each of your web app projects going forwards.
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
index.html
Next we have the HTML webpage and its content, for which I have included comments throughout (<!-- comment -->) in order to understand what each line is doing. There is very little going on in order to ensure the minimum requirements for displaying a simple webpage.
We insert the standard Google Style Sheet which helps to improve the overall look of the page (something that will become more apparent as extra content is added).
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">In the <body> we create a div tag (called holdall in our example) which we use to define a section in an HTML document. This will later allow us to manipulate the whole content in between the <body></body> tags in one go (such as adding padding so the content is not so close to the left-hand side of the page).
<div id="holdall">In the final part we add some content using a Heading tag (<h1>) and a paragraph tag (<p>).
<h1>Welcome to your new web app</h1>As usual you can download this project file at the bottom of the page.
<p>Congratulations! We will continue to develop this going forwards.</p>
Deploying a script as a web app
Use the following website for instructions on publishing your script as a web app.
Web app - getting started.gs
No comments:
Post a Comment