Up next in 10
Buy the full source code of application here:
https://bit.ly/3UMJ7Z7
Show More Show Less View Video Transcript
0:00
Uh hi friends, today in this tutorial I
0:02
will be telling you that how to make
0:04
this full web app which will be sending
0:06
messages to users. So you can see that
0:09
on your screen there is two input fields
0:11
out there email and message and there is
0:13
a button called as send email. So here
0:16
inside this email field I will be
0:18
providing the email address to whom I
0:20
need to send the message and in the
0:22
second input field I will be typing the
0:24
message. Let's suppose this is a message
0:27
and click on when I click on send email
0:30
it will actually send this email to the
0:32
user. And now if I go to back my email
0:35
address this is giggum
0:38
0:40
If I refresh this you will see that this
0:43
email address will be there inside this
0:45
inbox. You can see that hello this is a
0:47
new email. And if I open this email you
0:50
will see the body that I typed here. I
0:53
can even change the address. Let's
0:55
suppose I change the email address
1:02
to this email address. And if I click
1:04
send email and now it will send the same
1:07
email address to this email address. So
1:09
now if I open this
1:11
email address, you will see that now it
1:14
has sent this email address.
1:17
If I open this, this is the same email
1:19
body. You can see that. And now in this
1:22
tutorial we will be accomplish
1:25
making making this inside Google
1:26
appcript. So first and the foremost
1:30
thing that you need to do you need to
1:31
open
1:34
Google and type here
1:37
just go to this link which is
1:39
script.google.com.
1:44
So this will open the Google app script
1:46
for you. And first of all you need to
1:48
make a project a new project. So we will
1:51
click on the new button and you will be
1:54
redirected to the Google app script
1:55
here. So inside this we will be writing
1:58
our code. So first of all we need to
2:00
have a HTML document. So for that we
2:03
will be having a do get function. So
2:07
basically this function will be
2:08
responsible for loading the HTML file.
2:10
So here we will just write return HTML
2:13
service
2:20
dot and there is a method method inside
2:22
this which is create HTML output from
2:25
file and in in in the parenthesis we
2:27
will provide the file name which is
2:29
index. So now we will create a new file
2:33
new HTML file which should be index
2:36
HTML. Just create this file
2:41
and click on okay. So it will create a
2:43
brand new index.html file. And here we
2:46
just need to integrate Bootstrap for the
2:48
styling purposes. So I will go back to
2:49
this website bootstrapcdn.com
2:52
and I will copy this CDN here. And uh
2:56
here after the head we will be making a
2:58
link tag relative stylesheet.
3:03
And in the href we need to
3:07
copy paste the CDN. Copy paste it
3:13
and close the tag. And now inside the
3:15
body we just need a simple form which
3:18
will be having two input fields.
3:21
So we will be declaring a form tag.
3:24
So inside this form tag guys we will be
3:27
having first of all a div which will be
3:30
having a class of form group. So this is
3:32
all bootstrap.
3:36
So inside this div we will be having our
3:39
input field of type email. So input type
3:43
will be email because we are entering
3:45
the email address inside this field. We
3:48
will be giving a id to it of email and a
3:50
name field also email and a placeholder
3:54
which will be email. So this is just a
3:57
label which will be appearing right here
3:58
inside the input field
4:01
and I will be giving a placeholder uh
4:03
the bootstrap class to it of form
4:06
control.
4:10
And now after this we will be having a
4:12
text area where the user can write the
4:14
body of the message.
4:16
So I will copy this. So I will just
4:18
change this to text area. for this input
4:21
field
4:23
text area.
4:29
I will also close this text area here
4:32
like this.
4:35
I will change the placeholder to message
4:39
and also change this to message
4:42
and also change this to message.
4:47
And here type will not be there. So just
4:50
remove the type
4:53
and now after that we will be having a
4:55
simple submit button in order to send
4:57
the message. So again we will be having
5:00
this div class of form group.
5:08
So inside this div now we will be having
5:10
a simple input type will be submit
5:16
and let me just give it a class or
5:18
bootstrap class btnb btn danger
5:24
and I will be giving a value also to it
5:27
of send message. So it will be appearing
5:30
right
5:33
top of the button send message.
5:37
So close this.
5:39
And now if I just run this application,
5:42
if I save this and go to this uh
5:48
deploy as web app. So it will be
5:51
deploying this as web app. So just give
5:53
a project version as one and just select
5:57
this to anyone even anonymous and deploy
6:00
it. So basically it will give you a link
6:02
here. So just copy this link and now if
6:06
you open the browser copy paste this
6:08
link.
6:12
So you will see this uh HTML template is
6:16
there email message and a button of send
6:18
message. And now what we want we need to
6:22
get the values that the user type and
6:24
send this message. So now we just need
6:27
to write some JavaScript code here.
6:31
So this is our file here.
6:35
So we need to write some JavaScript
6:37
code. So just after the HTML in the body
6:41
we will be having a script tag.
6:46
So first of all we will be selecting our
6:50
uh
6:51
uh
6:54
uh form. We will be giving a form
6:56
variable here. Let me just zoom in.
7:01
So we will be targeting this by document
7:04
dotquery selector
7:09
and uh
7:12
I will be selecting it by the id. So let
7:15
me just give it a ID to the form.
7:19
ID form.
7:24
So this will get the reference of the
7:25
form. And now we just need to add a
7:28
event listener. add event listener like
7:30
this.
7:32
So we will be adding a submit event. So
7:35
when the form is submitted this function
7:37
call back function will execute.
7:40
So first of all we will be preventing
7:42
the form from autosubmitting. So for
7:44
that we will be executing this function
7:46
e.t prevent default
7:49
and after that we will get the values.
7:51
We will be declaring a email value.
7:56
We need to send this.
7:59
>> For this we will be uh executing a
8:02
function inside of a Google script. For
8:04
that we just need to write here Google
8:06
script
8:08
dot run dot send message. So basically
8:12
send message will be the function that
8:14
we will be creating in this file. And
8:15
here we just need to pass document dot
8:18
forms zero. So this will target our form
8:22
here. So we we have passed this form and
8:26
now we just need to create this send
8:28
message function. So now inside this we
8:31
just need to create send message
8:34
function.
8:39
So this will hold our form.
8:43
Now inside this there is a function
8:45
which is there inside uh Gmail app.
8:50
Gmail app dot send email. So basically
8:54
it takes three arguments. First is the
8:56
recipient. So we will be
9:00
to whom do you want to send the email.
9:02
So we will be getting the email address
9:04
that the user has tied by form.
9:07
And this is a subject simple subject.
9:10
Hello this is a subject. Let me just
9:13
surround this inside double quotes.
9:18
Hello, this is a
9:25
uh this is Gotham
9:28
and the body will be the user what
9:30
message the user has typed. So form dot
9:32
message. So we are taking this variables
9:36
from the name attribute that we have
9:37
declared. You can see that
9:42
we have given the name attribute. name
9:44
is equal to email and name is equal to
9:46
message. So we are taking from these.
9:51
So now guys you just need to run this.
9:53
So in order to run this we will be
9:57
running this by this run method.
10:00
So first of all you need to grant
10:01
permissions because you have made this
10:04
Gmail call. So you need to enable the
10:06
Gmail permission. So go to advance like
10:10
this
10:12
and allow this permission. So allow.
10:26
So now guys if I just uh refresh the
10:29
application, this is my application.
10:34
Let me just uh send a email address.
10:38
Hello, this is a test email. I am
10:41
sending it to this email address. Geeky
10:44
Gotham send message. If I send this
10:58
Sorry guys, I made a change here. So,
11:00
need I need to update it first of all. I
11:03
haven't updated it. So I need to go to
11:05
my project. So first of all I need to
11:08
save all these changes. This is not the
11:10
project. This is this was the project.
11:13
So I need to save all these changes. So
11:15
just click on save button.
11:17
And now we once again need to go to
11:20
publish deploy as web app. And now in
11:22
this case we need to change the project
11:23
version from from 1 to two. And now we
11:26
just need to update. So whenever you
11:28
make any kind of changes you need to
11:30
update your web app like this. So now
11:32
once again if I
11:37
take this address here.
11:40
Copy this and paste it inside my
11:42
browser.
11:45
And this is my app. Here I enter the
11:48
email address. This is my hello.
11:51
This is a test message.
11:57
Click on send message. And you will see
11:59
that if I open my inbox a message will
12:02
be there. If I refresh this
12:09
you will see that guys. Hello this is
12:11
Gotham. And if I open this hello this is
12:14
a test message. It is you can see that
12:16
it is received now 0 minutes ago. Now if
12:19
I change this to let's suppose another
12:22
email address
12:25
a different email address then also it
12:27
will send this email and now if I open
12:29
this
12:32
and now you can see that this email
12:33
address is received here email is
12:35
received. So hello this is a test
12:37
message. So in this way you can just
12:41
build a very simple web app of email
12:43
sending. Through this you can send any
12:46
email address to any email like this.
12:50
So, thanks very much for watching this