So in this lesson, we're going to be setting up the end points and what the end point is going to do
is it's Google Apps script, so it's going to track information into the spreadsheets, the email,
the user and the message as well as it's going to send us an email to our email account with the parameters
from the input form.
So let's go ahead and send it.
So notice we are on the local machine we had sent.
The content that we're sending over gets deposited into the spreadsheet, we also get indication that
the message has been sent.
Go over to the inbox within the inbox.
There's our message that was coming from the Web form.
So any changes to the content here?
Will also be sent over and that will send another message over to our email address so you could use
this as a way to have a quick contact form on your website.
So let's create the endpoint for this for this lesson.
You are going to need to have a Google account so you can just use a Gmail account or Google account.
And we're going to be selecting the data and returning it back and actually sending an email.
And this is all going to be done with the backend code on Google Apps script.
So if you're not familiar with Google Apps script, this is similar to code to JavaScript.
Essentially, it's the same as JavaScript with a bunch of custom methods that allow you to connect calendar
docs, drive Gmail sheet slides and all of your favorite Google Apps together to do some really pretty
cool functionality.
So it's modern JavaScript platform in the cloud, the ideas on the cloud as well.
So in order to access it, all you need is a Google account so you can also access it with the free
accounts.
There's two different types of scripts to create their standalone and bound scripts.
So we are going to be creating a bound script within the spreadsheet.
In addition, you can also find out more information about Google off script and developers dot Google
dot com, for example, script.
And we are going to be using the mail function in order to send the email and track the information
that's being submitted using the post request to our web app Endpoint.
So let's get started.
Open up here, Google Drive and from there you can select new and from the drop down menu and selecting
new sheets.
So it's creating a brand new sheet object and you can access apps, script from sheets, from docs,
from slides, and I'll show you how to do that.
So this is give it a name contact info.
And so this is going to be depositing some of the contact form requests into the spreadsheet.
And I'll show you how to do that as well and send it as an email.
And then once you've given it a name, you don't have to actually do anything else.
You can go to Tools and under script editor.
This is going to open up the online editor where we can write our Google Apps script and with the Google
Apps scripts.
So I'll just give this project a name as well.
And this is going to be contact tester.
And there's also if you want to go to script dot Google dot com forward slash home.
So that's the home.
And that will list out all of the Google scripts that you currently have.
So there are some default functions within Google Apps script, and one of them is to deploy a Web app.
So it uses a custom function and the function that generates the Web app is called Do Get and you can
pass in your event parameters there.
So the same thing as what you would expect with JavaScript where we create functions and then these
functions run the code blocks and produce the functionality within Google Apps script.
And there's a few different methods with Google Apps script.
So one of them to logout content, you can do logger log and that will logout content into the log.
So when we do run the script in order to run the script, there's a run the selected function option
here in the navigation menu.
And then from the dropdown list, you can select the function that you want to run.
So once we run the function, the execution log will pop up and for right now it just will have the
logger and the logging information.
And this is going to actually function the same way as the console log.
So now with the newer version, you can also do console like.
So we're outputting the value of Halo into the log and let's construct some content.
So this is just some test content and then there's a number of services and the one that we want to
use is the content service.
So this one can create text output.
And this is also where we can create the.
Output, the Jason output, and let's create a temporary object.
Now, you don't have to do this.
This is just to demonstrate how Google Apps script is going to handle the content that's coming in.
So we might have a number of pieces of content within the object.
And within the parameters.
So parameter and then this can have a value of tests or something like that.
So if we want to output the object information, you can use the JSON string of fine Seimas JavaScript
in order to string a fighter object and just do the console log and you could also do the logger log.
So this is what we're actually going to be outputting.
So run that one more time.
And so now we've got the string of object and this is actually what we want to output back to the page.
So we want to take the contents of the event object that's being passed in to the do get function and
string A that we're going to log it out as output and then we're going to be returning that information
back to the user for the Web page.
And it's expecting the do get when it runs the web up, it does have a return function so you can return
content.
And in this case, we're going to be returning that object that's created by content service, create
text output and the text output that we want to create is going to be within output.
So having done all of that, you can also shorten this just to do a return of the content service,
text output, JSON string of IHI parameters.
So I'll add that.
The most important part is that you're returning something for this and that as well, you've got some
type of content that you're constructing using the different methods that are available to create the
output.
So this one statement is actually all we need.
But I'll keep this stuff in here so that we can take a closer look at it.
If we want to debug it, we can debug it.
So now, in order to create the Web app, the next step is once you've got the do get function and this
is the most important part, because without this, you're not going to have a Web webapp and then also
make sure that your returning content, if you're not returning content, it'll throw an error and it'll
ask you to return some content.
So the top right hand side, there's a blue button and that is the deployment button.
So this will give you select the type of deployments and we want to create a Web app.
So this is the contact tester and select the app that you want to execute us.
And since we do want to send an email, you need to execute it as whatever Google account.
So in this case, we're going to be sending that email from my account over to wherever we're specifying.
So the email is going to be originating.
So this is the same thing that you do with any backend code where you need to send the email from the
server.
So you need to have the server mail client setup.
So setting up the account is can also provide the permissions for it and then who has access to it.
And we do want to have this open so we can set this up and just leave it to anyone.
So deploying the new deployment is going to construct an endpoint for us.
So this is the endpoint, executable endpoint.
And I know it's fairly long.
You can copy this content and it's also got a deployment ID and so on.
So once you've copied the euro, you've actually deployed the application and now you can go to that
endpoint and you're going to see some output here.
So right now, we haven't passed in any parameters into the string.
If we do something like ID equals one hundred and test equals tester, it will output those as parameters.
So this is where we can pick up using the get method.
So if we are using get we're sending this information over to the server within the request parameters.
And if we go into the execution log, we're not actually looking out the content that is like that when
we're making the request.
So it does make it a little bit hard to debug where we can't just launch the function to do the debug.
So just keep that in mind.
So the endpoint is going to be actually the same.
So open up the Web application and I'm going to update you URL to be the new executable endpoint you
URL.
And right now it's still going to throw an error because it's not that doesn't have a post and we're
trying to post to somewhere where there's no due post.
So if you do run into the course error, this typically with Google Apps script is going to be an error
with the script itself.
So let's update and we'll add in the new post method.
And what do Post does is the same as you get, but it picks up any post method requests to the server.
And we can also do the same where we outputting and returning back the contents every time you do make
some updates to it, we want to make sure that we redeploy the application as otherwise the properties
won't won't be updated.
So this is version two and just do a deploy of it.
Same web.
You are also you can copy it here at this point.
And if you ever do need to get the web you URL, you can always go over to deploy, manage deployments.
And from here you can pick up the web app, you URL as well, and you can change the permissions and
then you could redeploy it.
So let's try that one more time, go back to our application and hit send.
And this time we're actually getting back the post data so we're successfully able to send our post
data over to the server side.
So now it's a matter of picking up that post data within the Google side so we can pass the contents.
And this is within the post data, within the event parameter, the post data contents, and all it's
doing is it's just returning back whatever we're sending through so you can update these values do ascend
and it's going to send the content and then it's also going to return it back.
So this is the part that we're looking for is within the post data and we want to return back just the
post data to the user so it go back into the script editor and let's create a JavaScript object.
So Jason and I add some spaces to move it up.
So using JSON pass is just as we would with JavaScript.
We can take the EA post data contents.
So the same that we saw within the request parameters that were returning back so we can pass it and
that's going to allow us to once again use it as an object.
So if we only want to return back the actual object data that we're sending over, so now we can use
it, we can get the various values so we can get the email and so on, and we can use it within that
Google off script code.
So just did another update to it.
And now let's set this as V three for our application, redeploy it and now want to make a request to
the endpoint so we can clear it.
And you don't have to refresh because this is a client site code.
So we're getting exactly the object back.
And that means that we can also use this object within our script.
So going back once again to the script, let's add the content into our spreadsheet.
So with the spreadsheets, once it's connected, every Google document will have its own unique ID.
Easiest way to get the idea is to go within the Web URL.
So let's take the contents there.
And this is also how you can create a log and so on, adding content into the spreadsheet.
So we're going to select the spreadsheet and there is a class for that.
So it's the spreadsheet app.
And here we want to get so we can get the active spreadsheet because we are connected to it with bound
script or we can also open by it ID and usually I do prefer to open by ID, so let's create another
variable name and that's just going to be the ID.
So open by ID.
So we specify the ID of the object and that's going to be the spreadsheet and to get the sheet itself
now that we've got a spreadsheet object.
We can get sheet by.
Name, so let's select the sheet and we've got it as sheet one, so that will select the sheet object
for us and then for the sheet itself.
We can append a row of content to it, and now that we've got content within the JSON object, if we
want to turn this JSON object into an array or for now, what we can do is we can just track the contents
and so let's redeploy it because we've made changes to it webapp and select it and we'll do a version
four.
So redeploy it and we're going to have to accept permissions so authorizing the webapp and that's authorizing
it to access the spreadsheet itself.
And then under that Vance tab, you can see the permissions that are going to be provided.
Also, at any point, you can go to my account, Google dot com forward slash permissions to remove
the permissions that you've added for any Web app.
And that's under that link here where we've got the Google account to selecting allow to allow the authorization
and then done.
And let's go back.
And now whenever we're sending the data, we're actually deposited into the spreadsheet.
And that's all being done with the Google script.
So let's minimize this and show you and just sometimes as good as well to test it out, just to make
sure things are working.
So now that we've got this content, we can separate it out because this is an object within the spreadsheets
so we can separate out the content into different columns if we wanted to or if this is OK.
We can also just track it directly.
And as well, you can also take the data part and apply conditions on it before you send the actual
email.
So in this case, we're just going to keep it fairly simple and we'll check to see if the email we'll
get the contents out and we've got that within a JSON object.
So the email value is going to be chasten and that's contained within the email.
There's the user and that's contained within the chase on the user value.
And then the message is going to be contained within the JSON and that's contained within that Jason
message object.
So that's actually just going to separate out the values.
And then we can also do this as an array now that we've separated the content.
So this is just one way that we can get all of the post content.
And each array within the earth, within the array, that's going to be a new line so we can just do
email, user and message if we want to track that information back and redeploy it.
So creating a new version, I think we're probably version five.
And of course, for your real application, put actual real values into the names.
So just click.
And now we've got the email, we've got the name and we've got that content so we can delete the rows.
We can actually insert one rule above and then use this as our kind of like a tracking email.
So whenever any content comes in and let's reset it so we can track that information into the spreadsheet.
So it's always going to drop it into the spreadsheet.
And now last but of course, not least is to send the email.
So also because this is JavaScript in the cloud, I can use the same function where I'm validating an
email so I can just copy and paste the function over here and I can check to see if it's a valid email
and so on.
So we'll do our conditions.
And right now it is true and we'll do our condition.
And we'll validate the email address, so if it's not a valid email, so if it is a valid email, then
we just keep it true.
And if this comes back as false, so do negate it.
And then here we can update the value of valid and said that to false.
You can have any conditions on any of these, just as we did with JavaScript.
So before you actually added we can have the condition and then if we want to append it to the spreadsheet
here, we can append to the spreadsheet.
And check to see if valid and if it is, then we run this code.
And I'll also append Vallet here.
And then this would just be the same thing.
So this is whatever code you want to run.
So actually append to rules for every submission.
And this is just if you want to have conditions on it.
So let's try that again and get our spreadsheet on screen, send the message so it's coming back true.
And actually it's not going to let us submit if it's not a valid email, but if it did, then we could
also catch it on the server side as well.
So that's another option.
And if you are sending an email, generally, it's good to make sure it is a valid email.
If if it's not something that if you just want to get the messages no matter what, you can just simply
send over the message information.
So that's going to be the last part here.
And actually it's really easy to send a message with a script.
So it's created a function.
I'll just call it Maler and this is going to take the user information.
So email user and message and so email user and message.
And we'll send it over, so if it is a valid.
So if valid is OK, then we'll send a message.
So it is all just type into the tracking the spreadsheet that we sent, the message.
So within the mailer there's a function that sends mail and that's the mail app service within app script.
And to send the email that's sent email.
And then within the email, you've got a number of parameters that you can add in.
So this is going to be within an object format.
So to and where we're sending that email to and generally this will be my email address.
So I want to receive all of the emails.
And this is the email address that you want to send the email to.
And there's also the subject, so whatever you want as the subject, I'm not sure I should be calling
JavaScript object format from Web form and then for the body.
So that's under HTML body.
And with here, this is where you can construct the body contents that you want so you can do from name
and then add in the Jason name or its design user and then construct whatever information you want,
email and then add the chase on email and then the message and add the juice on the message.
So that will send the email so you can customize this however you want.
This is going to be an HTML, so you can just add in the line breaks.
And there we go, and it's actually not passing in the Jason information, and we can just use the values
that were actually passed and.
So that was why it was throwing the air there and just save that, you can do the save and let's deploy
it for the last time.
So now we've got our final code.
So that's the final version already.
We need to authorize it to use the mail service.
So, again, we cannot just authorize it on the email account that I've been using to create it.
So under advanced and then go to contact Testor.
So it just shows you the application name.
So that's the same name as the deployment and the app script project name, and it tells you the permissions
that were accepting.
So there's the sheets, there's the email.
So I'm OK with it.
Hit allow and same end point URL.
So go back into the JavaScript and within the Google email.
Whenever you accept permissions, it'll give you a quick alert there about the permissions.
So now let's refresh and click send.
And it looks like we threw an error there, so let's do some quick troubleshooting and this is the best
way to troubleshoot, just create a function to simulate the content that you're sending over and then
you can select and run the test function.
And it looks like the email address is not valid and not sure what happened there.
So it didn't have an email address that it could send to.
So let's run the tester one more time.
So that looked like it sent.
OK, could check your inbox.
Just make sure that you were able to send the email.
And it's actually I've got an S there at the end.
So before we redeploy it, run the tester function just to make sure that it's running OK.
And let's try that one more time.
So that time it sent an email address without us.
So there's our content being sent.
So now we're ready to do another deployment and final and I'll just call it final final.
So hopefully this will work properly and we don't have any issues.
And then we can send the email from the content, from the form.
So it's clear that and hit send and go to our email.
And now we've got the content coming from the localhost and that's being sent to our email address so
that we've got some content that's been filled out there.
In addition, we're also adding it to the spreadsheet so you can either copy the Google app script code
that I was using or create your own version.
And you're going to and just make sure that you have the endpoint set up and you could be ready to move
on to the last lesson where we're going to finalize the application.
Thanks for this lesson, our log into your Google account, create the new doc, access the script editor
from within the sheet so that can be done under the tools and then go down to the script editor that
will open up your Google app, script ID, online ID, and from there you can start writing scripts.
So create the do post function and that's the default function for the post method to the webapp end
point and then get the contents that are being passed in.
So the post data using the E post data get content or contents, object property and pass that back
into a usable JavaScript object that then you can deconstruct and use within the Google script.
You can append a roll to the spreadsheet by using the add roll method and using the spreadsheet app
service and also send an email using mail app services using the send email function.
Available within the mail app and send the post data over to your email address.
And then finalize, deploy at your end point and use that endpoint within your local machine when you're
doing testing to make sure that you're able to send data over to the endpoint and also that you've got
the emails that are coming in properly to your account.