В части I мы подготовили нашу среду Vue, а в части II мы создали простой пользовательский интерфейс для формы.

Итак, сегодня мы создадим весь серверный сервис для Vue WebApp с использованием четырех технологий Google: Google Form, Google Spreadsheet, Google Drive и Gmail, а также Google Chrome DevTools.

Перейдите в Google Form и создайте blank форму.

Слева вверху назовите файл MyFormWebApp, а затем измените содержимое, как показано ниже; обязательно используйте правую боковую панель для добавления карточек, а затем измените содержание, чтобы оно было короткими, за исключением message, чтобы он был абзацем.

После создания полей или карточек в форме Google мы можем теперь создать электронную таблицу, в которой будут храниться все наши ответы.

В верхней части формы есть две вкладки: Questions и Responses. Выберите ответы

Теперь нажмите Зеленую кнопку, которая создаст новую таблицу Google на Google Диске.

Выберите значение по умолчанию, равное create new spreadsheet.

Он свяжет нашу форму с электронной таблицей, и вы сможете найти все это в своей учетной записи на Google Диске.

Чтобы получать уведомления на свой Gmail, сделайте следующее:

  • Мы создали новую форму Google
  • Мы сделали ответы, чтобы они сохранялись в таблице Google, которая полностью обрабатывается Google Диском.
  • Мы ответили, что Gmail может получать уведомления.

Теперь давайте проведем тестирование в реальном времени, связав Google Form с нашим веб-приложением.

В форме Google нажмите кнопку preview, вторую в правом верхнем углу, чтобы открыть окно предварительного просмотра, в котором вы можете вводить данные.

Вместо этого щелкните F12 или щелкните правой кнопкой мыши и выберите inspect. Это откроет Chrome DevTools.

Чтобы связать форму с нашим Vue WebApp, щелкните ctrl+shift+c или кнопку, выделенную на фотографии выше с помощью курсора.

Щелкнув по нему или используя команду, мы можем выбрать элемент и проверить его. Таким образом, выберите поле ввода на name, которое будет выглядеть следующим образом:

Если вы можете помочь заметить, есть поле name со значением entry.126 и т. Д. Это значение поможет нам связать нашу форму с Vue WebApp. Итак, чтобы извлечь значение, щелкните правой кнопкой мыши светло-синюю область и выберите edit as HTML.

Перейдите в наше приложение Vue и вставьте значение, скопированное из DevTools, в наш v-text-field из name:

Мы проделаем со всем точно такую ​​же процедуру, шаги которой показаны ниже:

На рисунках выше показано, как извлечь поля email, phone number и message из формы с помощью Chrome DevTools.

Теперь нам осталось, как отправить значения, введенные в нашу форму Google, которая, в свою очередь, сохранит их в таблице Google на Google Диске.

Мы будем выполнять тот же процесс, в ходе которого мы будем проверять форму, чтобы взять ссылку и передать ее как действие в нашу форму.

Снова нажмите кнопку preview. После этого щелкните F12 или щелкните правой кнопкой мыши и inspect

Найдите тег form и скопируйте action со ссылкой, например:

В вашем редакторе кода это должно выглядеть так:

Итак, в основном,

  • Мы добавили ссылку формы на v-form в смысле action, target, method и id
  • Мы извлекли имя со значениями каждого поля в форме, используя inspect в Chrome DevTool, и соответственно добавили значения в код.

Используйте npm run serve, чтобы убедиться, что он работает

Это завершает все для серверной части.

Итак, теперь мы создаем серверную часть, используя 4 технологии Google:

  • Форма Google для сбора входных данных
  • Таблица Google, чтобы увидеть ответы
  • Google Диск для хранения наших данных в качестве серверной службы
  • Gmail для служб уведомлений
  • И, наконец, Chrome DevTools для проверки и устранения всей суеты, стоящей за этим.

У нас остался только хостинг с использованием Firebase, который мы рассмотрим в следующей статье, так что следите за обновлениями!