Начнем с бэкэнда. Идем по адресу https://script.google.com/, создаем пустой проект:
Пишем код скрипта:
function doPost(e) {
MailApp.sendEmail('Ваш_Email@gmail.com', 'Feed from mysite.ru', 'My super message',{
htmlBody: '<p>from: ' + 'me' + '</p>' + '<p>email: ' + 'my@gmail.com' + '</p>' +
'<p>message: ' + 'Hello, world!' + '</p>'
});
}
Сохраняем, назовем как-нибудь скрипт:
Выполняем:
Авторизуем скрипт:
Проверяем почту:
Все ОК. Сохраняем версию проекта:
Разворачиваем веб-приложение:
Выбираем уровень доступа - "Все, включая анонимных пользователей":
Копируем URL веб-приложения - пригодится:
Переходим к фронтэнду. Качаем Bootstrap 3 и jQuery. Пишем HTML-код нашей формы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Contact Form</title> <link href="bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" style="text-align: center; margin-top: 10px;"> <a href="#contact" data-toggle="modal" class="btn btn-primary btn-lg">Большая синяя кнопка</a> </div> <div id="contact" class="modal fade" tabindex="-1", role="dialog", aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal", aria-hidden="true">×</button> <h3 class="modal-title">Контакты:</h3> </div> <form id="contact-form" class="modal-body" role="form"> <div class="form-group"> <input class="form-control input-lg" type="text", placeholder="Ваше имя", required, name="name"> </div> <div class="form-group"> <input class="form-control input-lg" type="email", placeholder="Ваш email", required, name="mail"> </div> <div class="form-group"> <textarea class="form-control input-lg" rows="5", placeholder="Ваше сообщение", required, name="message"></textarea> </div> </form> <div class="modal-footer"> <button class="btn btn-default btn-lg" type="submit", title="Отправить Email", form="contact-form">Отправить</button> </div> </div> </div> </div> <script src="./jquery-1.10.2.min.js"></script> <script src="./bootstrap.min.js"></script> </body> </html>
Сохраняем HTML-файл.
Не забываем положить рядом с сохраненным HTML-файлом скачанные ранее библиотеки: bootstrap.min.css, bootstrap.min.js и jquery-1.10.2.min.js.
Открываем HTML-файл в браузере, нажимаем большую синюю кнопку:
Продолжаем разговор. Добавляем в самый конец тэга <body> HTML-файла код скрипта:
<script>
$('#contact-form').on('submit', function(e) {
e.preventDefault(); // предотвратим отправку формы - действие по умолчанию
var that = $(e.target); // получаем ссылку на источник события - форму #contact-form
$.ajax({ // отправляем данные
// URL развернутого скрипта Google Apps Script
url: 'https://script.google.com/macros/s/AKfycby2HeahiWEdoKK0ZwXAPk5xjivrg-Yrs3qZu8hwxx5lSOhCaXU/exec',
data: $(this).serialize(), // собираем запрос
jsonp: 'cb', // имя параметра запроса
jsonpCallback: 'bingo', // имя функции
dataType:'jsonp', // тип данных
success: function bingo(data){
console.log(data); // проверим данные, полученные с бэкэнда
if (data == 'Error') {
alertForm({form: that, type: 'alert-danger', msg: 'Не удалось отправить сообщение.'});
return;
}
alertForm({form: that, type: 'alert-success', msg: 'Ваше сообщение отправлено.'});
that.find('textarea').val('');
},
error: function(){
alertForm({form: that, type: 'alert-danger', msg: 'Не удалось отправить сообщение.'});
}
});
});
// функция вывода сообщений в модальную форму
function alertForm(alert) {
var div = $('<div class="alert ' + alert.type + '" style="display: none;">' + alert.msg + '</div>');
alert.form.prepend(div);
div.slideDown(400).delay(3000).slideUp(400, function() {
alert.form.closest('.modal').modal('hide');
div.remove();
});
}
</script>
Примечание: к сожалению Google Apps Script не дружит с XMLHttpRequest, поэтому для работы с данными используем JSONP.
Возвращаемся к бэкэнду - нашему скрипту Google Apps Script, редактируем код:
function doGet(e) {
try {
MailApp.sendEmail('Ваш_Email@gmail.com', 'Feed from mysite.ru', e.parameters.message, {
htmlBody: '<p>from: ' + e.parameters.name + '</p>' + '<p>email: ' + e.parameters.mail + '</p>' +
'<p>message: ' + e.parameters.message + '</p>'
});
return ContentService.createTextOutput(e.parameters.cb + '("OK")').setMimeType(ContentService.MimeType.JAVASCRIPT);
} catch(e) {
return ContentService.createTextOutput(e.parameters.cb + '("Error")').setMimeType(ContentService.MimeType.JAVASCRIPT);
}
}
Сохраняем новую версию проекта:
Разворачиваем новую версию веб-приложения:
Открываем новую версию HTML-файла в браузере, нажимаем большую синюю кнопку, заполняем поля данными:
Оправляем данные формы:
Примечание: если вы тестируете код на моей версии HTML-файла, то получите сообщение об ошибке. Мне не хотелось бы получать письмо каждый раз, когда очередной читатель будет отправлять данные в адрес моего скрипта на Google Apps Script, поэтому я изменил его код таким образом, чтобы он в любом случае возвращал "Error" - все по чесноку :) - для того, чтобы убедиться, откройте консоль браузера.
Открываем консоль браузера (Ctrl+Shift+J):
Похоже все ОК. Проверяем почту:
Как и обещал - все доступно, повторяемо и легкоусвояемо :).
Комментариев нет:
Отправить комментарий
Комментарий будет опубликован после модерации