Навеяно комментариями про google sites…

В свое время, года 3 назад, поигравшись возможностями google sites в части ведения блогов, пришел к выводу, что как полноценный инструмент для этого они скорее не подходят. Ну и потом у гугл есть для этого сервис Blogger.

Однако, если надо собрать на лету SPA без особых знаний верстки, css и js, а так же затем быстро его опубликовать — то решение вполне себе приемлемое потому, что позволяет базово украсить страницу ну и плюсом добавить туда почти всё гугл окружение: календари, карты, формы опроса, таблицы, документы, презентации. Удобно? Вполне!

Но, что если хочется большего? Не быть зажатым в рамках доступного на google sites.

Решение есть. Оно, конечно не самое простое в части UI и UX, а так же не оптимально масштабируется для телефонов, но все же… в общем решение вставки через URL.

А гланды мы лечим так же , как и все прогрессивное медицинское сообщество!

Почему-то вспомнился этот старый анекдот…. Но по сути так и есть — не самым очевидным и прямым способом, но добиться можно любого результата 🙂

В рамках обучения фронтенду у меня был написан тестовый сайт с использованием Vue 3 и Random user api — нажимаешь кнопку, фетчишь данные с АПИшки, выводишь их при помощи Vue.

Почему бы не переложить его на гугл сайт, подумал я. Челлендж? Вполне!

1. Пишу непосредственно «статическую» часть на гугл сайте.

Тут все просто. Выбор темы, шрифтов и расположения контента. Ничего нового и сложного нет вообще.

2. Создаю google script и наполняю содержимым.

Сначала непосредственно gs часть, необходимая чтобы развернуть Web app. Ну а какой web app без doGet():

function doGet() {
   const webFile = HtmlService.createTemplateFromFile("index");
   return webFile.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Вот этот код — return webFile.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); — необходим для того чтобы на телефоне гугл сайт корректно отображал вставленный url, не ругаясь на то, что файл не найден.

Далее создаю в гугл скриптах index.html и наполняю его стилями с подключенным в конце Vue 3 CDN и собственно кодом для Vue:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First project - random user generator</title>
    <style>
        * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  #app {
    width: 400px;
    height: 100vh;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  h1,
  h3 {
    margin-bottom: 1rem;
    font-weight: normal;
  }
  
  img {
    border-radius: 50%;
    border: 5px #333 solid;
    margin-bottom: 1rem;
  }
  
  .male {
    border-color: steelblue;
    background-color: steelblue;
  }
  
  .female {
    border-color: pink;
    background-color: pink;
    color: #333;
  }
  
  button {
    cursor: pointer;
    display: inline-block;
    background: #333;
    color: white;
    font-size: 18px;
    border: 0;
    padding: 1rem 1.5rem;
  }
  
  button:focus {
    outline: none;
  }
  
  button:hover {
    transform: scale(0.98);
  }
  
     </style>
</head>

<body>

    <div id="app">
        <img :class="gender" v-bind:src="picture" :alt="firstName">
        <h1>{{firstName}} {{lastName}}</h1>
        <h3> Email: {{email}}</h3>
        <button v-on:click="getUser()"
            :class="gender">Рандомный юзер</button>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const vueApp = {

          data() {
              return {
                  firstName: 'John',
                  lastName: 'Smith',
                  email: "john@smith.com",
                  gender: 'male',
                  picture: 'https://randomuser.me/api/portraits/men/41.jpg'
              }
          },
          methods: {
              async getUser() {
                  const res = await fetch('https://randomuser.me/api')
                  const { results } = await res.json()

                  // console.log(results)

                  this.firstName = results[0].name.first
                  this.lastName = results[0].name.last
                  this.email = results[0].email
                  this.gender = results[0].gender
                  this.picture = results[0].picture.large
              }
          }
      }

        const app = Vue.createApp(vueApp)

      app.mount('#app') 
    </script>
</body>

</html>

3. Разворачиваю web app, проверяю его жизнеспособность

Пациент готов и имеет следующий вид:

4. Ссылка в google sites

Просто вставляю «…./exec» как url в google sites. Публикую: https://sites.google.com/view/gsite-vue-3-random-user/

При нажатии на кнопку «рандомный юзер» Vue делает всю магию по фетчу данных с random user api и выводит их на сайт.

Таким образом через скрипты можно вставлять почти всё, что угодно.

На этом всё.

Метки: , , , , , , , , , , , , ,

Добавить комментарий