Как использовать Bootstrap и jQuery, не используя внешний источник?

Question

[Ruders82]

Как использовать Bootstrap и jQuery, не используя внешний источник?
Пытаюсь использовать сайдбар в таблице. По коду идёт подключение Bootstrap и jQuery по url.

// Подключаем Bootstrap
    var sidebarHTML = '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">';
    // Подключаем jQuery
    sidebarHTML += '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';

Сайдбар грузится больше минуты. Плохая связь. Как правильно загрузить Bootstrap и jQuery в проект и использовать уже внутренний вызов этих библиотек. Прошу объяснить подробнее, так как я ещё начинающий. И какие части обязательны для работы с сайдбаром.

Comments

[Григорий Боев]

Для сайдбара нужен любой HTML код. Bootstrap, jQuery и прочее нужны только для удобства верстки и написания кода внутри страницы.

Знакомый код. Делал по этому примеру - работало достаточно быстро, по крайней мере не было такого:

Сайдбар грузится больше минуты

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

[Ruders82]

Григорий Боев, Как это правильно сделать. Я только начинающий. Код я использую такой

// Открытие сайдбара
function showSidebar() { 
  var htmlOutput = HtmlService
    .createHtmlOutput('<p>A change of speed, a change of style...</p>')
    .setTitle('Цвет текста в ячейке поменялся');
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
 
}
//*****************************************************************************************************************

function showSidebar() {
 
    // Подключаем Bootstrap
    var sidebarHTML = '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">';
    // Подключаем jQuery
    sidebarHTML += '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';
    
    
    sidebarHTML += '<form style="padding: 20px;text-align:center;">\
        <div class="form-group">\
            <label for="profit_ratio">Коэффициет прибыли</label>\
            <input type="text" class="form-control" id="profit_ratio" name="profit_ratio" value="">\
        </div>\
        <div class="form-group">\
            <label for="manager_ratio">Коэффициет менеджера</label>\
            <input type="text" class="form-control" id="manager_ratio" name="manager_ratio" value="">\
        </div>\
        <div class="form-group">\
            <label for="ad_ratio">Коэффициет рекламы</label>\
            <input type="text" class="form-control" id="ad_ratio" name="ad_ratio" value="">\
        </div>\
        <button type="submit" class="btn btn-primary">Записать данные в таблицу</button>\
        <br><br><br>\
        <button type="button" id="sidebarClose" class="btn btn-danger">Закрыть сайдбар</button>\
    </form>';
 
    // Создаём форму

    // Добавляем скрипты
    // При сабмите формы вызываем функцию writeStrInTable() и передаём ей введённые данные
    // https://developers.google.com/apps-script/guides/html/reference/run
    // При клике на кнопку 'Закрыть сайдбар' закрываем его
    // https://developers.google.com/apps-script/guides/html/reference/host#close()
    //**********************************************************************************************************************************************
     sidebarHTML += "<script>\
     $(document).on('submit', 'form', function () { \
        google.script.run \
     .withSuccessHandler(function (resultMsg) { \
                  alert(resultMsg);\
         })\
     .writeStrInTable(\
                { profit_ratio: $('#profit_ratio').val(), manager_ratio: $('#manager_ratio').val() }\
     );\
        return false;\
     });\
\
     $('#sidebarClose').on('click', function() {\
        google.script.host.close();\
     });\
     </script>";
    var htmlOutput = HtmlService
        .createHtmlOutput(sidebarHTML)
        .setTitle('Цвет текста в ячейке поменялся');
    SpreadsheetApp.getUi().showSidebar(htmlOutput);
 
}

Меня интересует вынесите скрипты и стили в отдельные файлы и подключайте уже их. Хотелось бы так. А Bootstrap и jQuery это скрипты, стили или библиотеки. Как правильно?

[Alexander Ivanov]

Уж больно вы вопросов накидали много. Структурируйте. Выделяйте главное. Создавайте больше топиков: один топик - один вопрос. Ссылайтесь на предыдущие вопросы.

[Ruders82]

Alexander Ivanov, Вопрос Как использовать Bootstrap и jQuery не используя внешний источник? Пожалуйста поподробнее я только начинающий.

[Alexander Ivanov]

Ruders82, ну, как есть - подтягивайтесь. Иначе толку-то не будет. Тут был один "начинающий" - уж пол года в формулу не воткнет. Это нехорошо.

Answer 1

[Alexander Ivanov]

HTML Service: Best Practices

На стороне сервера создаете

tools.gs

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

bs.html

<style>
  Тут код вашего BS
</style>

jq.html

<script>
  Тут код вашей JQ
</script>

Для клиента создаете

client.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('bs'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('jq'); ?>
  </body>
</html>

Создание сайдбара

function showSidebar() { 
  var htmlTemplate = HtmlService
    .createTemplateFromFile('client');
  SpreadsheetApp.getUi().showSidebar(htmlTemplate.evaluate()
    .setTitle('Цвет текста в ячейке поменялся'));
}

Исходя из комментариев, я так и не понял, почему я "должен" предоставлять пример, а страждущие знаний ничего не будут делать, даже пример, который очевидно, должен быть.

Пример использования https://script.google.com/d/1VpI6PRVsIQ08W6gIHs2y1...
Сниппет https://github.com/contributorpw/google-apps-scrip...

Comments

[Ruders82]

А где это сторона сервера и клиента? Мне подробнее можно.
Код вашего BS- откуда его брать?
Тут код вашей JQ а это код откуда брать?

[Ruders82]

В коде

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

filename какое имя надо вставлять?

[Alexander Ivanov]

• BS https://getbootstrap.com
  
• JQ https://jquery.com
  
• filename уже за вас вставлен
  
• Сторона сервера и клиента - условное разделение кодовой базы для ориентирования. Сервер, это то, что выполняется на сервере, клиент - на клиенте.
  

[Ruders82]

Alexander Ivanov, Всё таки где нужно разместить вот это

tools.gs
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

bs.html
<style>
  Тут код вашего BS
</style>

jq.html
<script>
  Тут код вашей JQ
</script>

И где нужно разместить вот это

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('bs'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('jq'); ?>
  </body>
</html>

И в коде

function showSidebar() { 
  var htmlTemplate = HtmlService
    .createTemplateFromFile('client');
  SpreadsheetApp.getUi().showSidebar(htmlTemplate.evaluate()
    .setTitle('Цвет текста в ячейке поменялся'));
}

Что надо писать вместо 'client'

[Ruders82]

Сделал так. Создал три html для

bs.html
<style>
  Тут код вашего BS
</style>


jq.html
<script>
  Тут код вашей JQ и 
</script>


Для клиента создаете

client.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('bs'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('jq'); ?>
  </body>
</html>

Записал BS и JQ по ссылкам из предыдущей программы
Написал скрипт

tools.gs
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Переписал

function showSidebar() { 
  var htmlTemplate = HtmlService
    .createTemplateFromFile('client');
  SpreadsheetApp.getUi().showSidebar(htmlTemplate.evaluate()
    .setTitle('Цвет текста в ячейке поменялся'));
}

Закоментировал строки

// Подключаем Bootstrap
    
    //var sidebarHTML = '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">';
    // Подключаем jQuery
    
    //sidebarHTML += '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';

Выполнил программу
function onOpen()
Выскакивает программа на имени первой программы

function showSidebar() { 
  var htmlTemplate = HtmlService
    .createTemplateFromFile('client');
  SpreadsheetApp.getUi().showSidebar(htmlTemplate.evaluate()
    .setTitle('Цвет текста в ячейке поменялся'));
}

Чего я опять не понимаю? Как сделать правильно?

[Alexander Ivanov]

Ruders82, добавил ссылки на рабочий пример.

[Alexander Ivanov]

Ruders82,

Выскакивает программа на имени первой программы

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

[Ruders82]

Я@oshliaer, Я не вижу ссылки на рабочий пример. Спасибо за помощь. Вы сильно помогли. И с помощью добрых людей я запустил ваши предложения по коду. Но вид сайдбара изменился в худшую сторону. А скорость загрузки осталась прежней.

За предложение о консультации и частном обучении спасибо. Но пока нет денег.
Ваши услуги наверное же дорогие. Хотя поучиться у вас было бы большой удачей для меня.

[Ruders82]

Alexander Ivanov, Нашёл ссылки на рабочий пример. Спасибо.

[Alexander Ivanov]

Ruders82, ну, ваш вопрос был в статической загрузке.

Как я понимаю, проблема, совершенно в другом, но вы этого не спрашивали =)

[Ruders82]

Alexander Ivanov, Я просто ещё мало знаю чтобы задать такой вопрос. Да вопрос было бы лучше задать такой. Как уменьшить время загрузки сайдбара? Но умные мысли приходят позже чем надо. Хотя лучше поздно чем никогда. Можно задать такой вопрос?

Answer 2

[Владимир Зуев]

Сделал так. Ошибка

// Подключаем Bootstrap
     var sidebarHTML = '<?!= include('bs'); ?>';
    //var sidebarHTML = '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">';
    // Подключаем jQuery
    sidebarHTML += '<?!= include('jq'); ?>'
    //sidebarHTML += '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';

Comments

[Alexander Ivanov]

Это реплика, а не ответ. Без полного листинга сказать что-то определенное не представляется возможным.

Так работать не будет '<?!= include('bs'); ?>';. Разве у вас работает var a = '<'b'>'?

[Владимир Зуев]

Сделал всё так как обсуждалось. Теперь вылетает на строке
.setTitle('Цвет текста в ячейке поменялся'));
В функции

function showSidebar() { 
  var htmlTemplate = HtmlService
    .createTemplateFromFile('client');
  SpreadsheetApp.getUi().showSidebar1(htmlTemplate.evaluate()
    .setTitle('Цвет текста в ячейке поменялся'));
}

[Владимир Зуев]

Alexander Ivanov, Заменил
var sidebarHTML = '<?!= include('bs'); ?>';
на

var sidebarHtml = HtmlService.createTemplateFromFile("client");

[Alexander Ivanov]

Владимир Зуев, вы ведете переписку в реплике, которая стоит в очереди на удаление. Зачем? Какая польза? Создайте новый топик, сошлитесь на этот и обсуждайте в комментариях все, что хотите.