Làm project đặt vé event hay ho của riêng bạn: Làm Google Form, gửi mail cho user
White

Nguyễn Hoàng Minh viết ngày 14/07/2018

Đôi điều tâm sự

Hmm đã bao giờ bạn bị nhờ là: "Mày ơi mấy hôm nữa câu lạc bộ làm cái ì ven, mày làm cái form nào đăng kí cái là chúng nó có vé/mail báo thành công" hay bạn là cái đứa được nhờ cũng muốn tìm hiểu :D Chẳng là ông bạn tui tính làm cái event nho nhỏ giao lưu offline trong group nên muốn cái gì đó hay ho chút nên nhờ tui làm. Mà tui lại rất là ngại mảng front-end, ngồi responsive linh ta linh tinh cũng hết bố nó 1 tuần rồi -.- (Tôi làm chậm lắm :D) nên là tôi tìm hiểu Google App Script của Google luôn.

Thế Google App Script(GAS) là cái của nợ gì?

Thì GAS là một bộ script tích hợp 1 loạt cái hay ho của GG từ GG Form, Docs, Sheet nói chung là cái của nợ gì của nó cũng hay ho luôn :D Anh em lên đó xem qua thì biết

Vậy thôi bắt đầu

Trước hết làm cái Google Form cái nhỉ?

Google Form quá dễ rồi chắc tui không hướng dẫn nữa :D Nếu lần đầu tiếp xúc thì cũng quá dễ dàng để làm quen(Nhưng tôi chắc nếu ông nào biết đến Kipa là gì thì chắc cũng phải dùng Google Form 1 lần là ít)
Ở đây việc tạo như thế nào là anh em tự túc nhé :D Tui sẽ tạo 1 cái đơn giản thôi (Kiểu như thế này

Okay xong, ta cùng nghịch 1 chút về Script nhé

Để vào mục script ta vào trang edit của form và chọn 3 chấm -> Script Editoralt text
Chính nó :3 Nó sẽ tự bắn vào 1 trang khác. alt text
Vào thì sẽ có 1 file tên là Code.gs. Đây chính là trang chúng ta sẽ viết code xử lí :3
Ở đây ta có thể dùng các Trigger, libs(mình không biết gọi libs có chuẩn không) để có thể send maill (Ví dụ MailApp.sendEmail để gửi mail)
Okay cùng thử nhé

function myFunction() {
  MailApp.sendEmail("nghminh163@outlook.com","Xin chào bạn", "Lớp diu <3");
}

Mình sẽ thử gửi mail về cho mình
alt text
À các bạn lưu ý là nhớ chọn đúng function chạy vào nhé. Mặc định nó sẽ vào function myFunction(kiểu main vậy) bạn có thể chuyển, mình ở đây sẽ cứ để myFunction nhé
Okay run
alt text
Ở đây nó sẽ đòi quyền gửi mail :3 App của mình mà mình cấp phép nó thôi
Nếu chưa nhận được sau khi cấp quyền hãy thử send lại nhé
alt text
Ở đây nó nghĩ là spam :)) Cũng khá đúng nhưng mà dù sao mình cũng nhận được. Nghịch vậy thôi cùng tiếp tục với project của chúng ta nào

Bắt sự kiện người dùng submit form

Nếu bạn nào đã liếc qua tài liệu của Google 1 chút rồi thì thấy là nó cũng có 1 trigger là Form Submit đấy nhưng mà nó chẳng trả cái gì mấy (Docs thì đây này). Tui thì sẽ get hết response về và lấy cái response cuối cùng :D Chủ trương là như vậy nhé.
Trước hết làm 1 cái function tên nó là onSubmit đã. Các bạn đặt tên gì cũng được, ở đây tui đặt theo thói quen thôi. (Xóa hết function đi để cái này cũng được hoặc các bạn có thể dùng luôn cái myFunction cũng đc)
Okay tôi sẽ set trigger cho nóalt text
Bấm vô cái đồng hồ tí hon này này :D
Bấm "No triggers set up. Click here to add one now." alt text
Set như mình rồi save vào là được
Okay ở đây mình sẽ get cái response cuối cùng như sau

function onSubmit(){
   var listRes = FormApp.getActiveForm().getResponses();
   var response = listRes[listRes.length-1].getItemResponses();
  for(var i=0;i<response.length;i++){
      Logger.log(response[i].getItem().getTitle()); //Title của câu hỏi
      Logger.log(response[i].getResponse()); //Câu trả lời
}}

Mình sẽ save lại và thử phát. Trước khi test nhớ check lại Trigger nhé.
alt text
Cap cho các ông cái form :Dalt text
Và đây là cái log :D. Có vẻ như xong rồi đó. Nốt gửi mail báo về user là xong

Muốn mail đẹp phải thì phải dùng html nhỉ?

Đúng rồi muốn mail đẹp thì phải làm file html cho nó ngon :D Trong project sẽ tạo mới 1 file html nhé
alt text
Như nói trên đó tui khá kém khoản "hát tờ mờ lờ" với "cờ sờ sờ" nên tui sẽ đơn giản như màu chữ vớ vẩn thôi :)
Để có thể đặt biến vào html này bạn dùng <?= tenbien ?>
Đây mình có cái html như sau

<!DOCTYPE html>
<html>
  <body>
      <h1 style="color:red;"> Chúng tôi xin xác minh tên bạn là: <?= name ?></h1>
      <h2 style="color:yellow;">Hiện tại bạn đang ở: <?= address ?>   </h2>
      <h3 style="color:blue;">Và tình trạng vợ con của bạn là: <?= married ?>  </h3>
  </body>
</html>

Okay quay lại với cái file .gs nhé. Để import html thì ta dùng

var template = HtmlService.createTemplateFromFile('tenfile');
template.tenbien = bien

Ví dụ ở đây mình có luôn i=0 thì sẽ là name, i=1 thì là địa chỉ, i=2 là tình trạng ghệ, mình ngại for nên mình sẽ set cứng giá trị luôn

Xong rồi dùng hàm sendEmail để send mail thôi

  MailApp.sendEmail(emailto,title,"",{htmlBody:template.evaluate().getContent()});

alt text
Đây là kết quả ta có

:D Hề ở số lần sau mình sẽ hướng dẫn các bạn có thể là up cái data nên lên Firebase Firestore và dùng Cloud Function của Firebase trả về QRCode sau đó send cho user nhé. :D Cảm ơn đã đọc bài viết của mình. Mọi thắc mắc cũng như là góp ý vui lòng comment nhé.

Vì mình không đem điện thoại theo người mà cái github lại bị 2fa nên kh up source được mình để source dưới đây nhé

<!-- response.html -->
<!DOCTYPE html>
<html>
  <body>
      <h1 style="color:red;"> Chúng tôi xin xác minh tên bạn là: <?= name ?></h1>
      <h2 style="color:yellow;">Hiện tại bạn đang ở: <?= address ?>   </h2>
      <h3 style="color:blue;">Và tình trạng vợ con của bạn là: <?= married ?>  </h3>
  </body>
</html>
//Code.gs
function onSubmit(){
   var listRes = FormApp.getActiveForm().getResponses()
   var response = listRes[listRes.length-1].getItemResponses();
   var name = response[0].getResponse();
   var addr = response[1].getResponse();
   var married = response[2].getResponse();

  var template = HtmlService.createTemplateFromFile('response');
  template.name = name;
  template.address = addr;
  template.married = married;

  MailApp.sendEmail("nghminh163@outlook.com","Bạn vừa đăng kí dự tiệc offline của hội không có ghệ D:","",{htmlBody:template.evaluate().getContent()});
}
//Bạn có thể để 1 ô nhập mail để trả về cho user nhé :D ở đây mình quên mất
Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nguyễn Hoàng Minh

8 bài viết.
24 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
6 2
Set custom domain free cho Firebase hosting Như tiêu đề, em vừa tìm ra cách set được Domain của Freenom cho Firebase Hosting để đỡ phải vất vả nhậ...
Nguyễn Hoàng Minh viết 7 tháng trước
6 2
White
3 5
Một chút lời nói đầu Cảm ơn các bạn đã ủng hộ mình trong post (Link) Mình xin phép đừng dừng Series này vì mình hiện tại không có đủ khả năng để ...
Nguyễn Hoàng Minh viết 3 ngày trước
3 5
White
2 0
Học Firebase qua Project Phần 1: Giới thiệu và tạo giao diện cho ứng dụng nhắn tin Như các bạn đã biết Firebase hiện tại là nền tảng khá phố biến ...
Nguyễn Hoàng Minh viết 6 tháng trước
2 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
8 bài viết.
24 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!