Онлайн-компиляция на статическом сайте, рецепт для начинающих

  • Tutorial

Вы несколько лет писали свой проект и теперь хотите привлечь пользователей? У меня есть простой, как холостяцкая яичница с беконом, рецепт специально для вас.

Для приготовления простого сайта вам понадобится:
  • репозиторий на GitHub — 1 штука
  • готовый html шаблон, для придания приятного вида — 1 штука
  • кусочек свежего компилирущегося C++ кода — минимум 1 строка кода
  • готовые javascript соусы из магазина — ~500Kb
  • картинки и анимашки по вкусу

Меняйте любые компоненты, экспериментируйте и готовьте свои сайты для любимого языка!

Готовим хостинг


В данном примере для хостинга я буду использовать GitHub. Да-да, он позволяет не только работать с репозиториями, но и предоставляет возможность публиковать сайты для проекта. Всё что нужно сделать, это создать ветку gh-pages и закоммитить туда файл index.html с сайтом:
# Прим: здесь и далее не забывайте заменять user на ваше имя в GitHub,
# а repository на имя вашего репозитория.

# Клонируем наш репозиторий в локальную папку:
git clone github.com/user/repository.git

# Создаем ветку gh-pages
cd repository
git checkout --orphan gh-pages

# Удаляем всё лишнее
git rm -rf .

# Создаём и коммитим index.html
echo "Test" > index.html
git add index.html
git commit -a -m "Testing gh-pages"

# Закидываем изменения обратно на GitHub
git push origin gh-pages

Теперь ваша страница доступна по адресу http(s)://user.github.io/repository/. Разумеется, при желании, вы можете выбрать другой хостинг.

Украшаем блюдо html статикой



Самое время наполнить сайт чем-либо полезным. Находим в интернете приятный для глаза html шаблон и закидываем его на наш хостинг.
# Закидываем наш html шаблон в репозиторий:
cp -rf ../folder_with_template/* ./

Поварские хитрости
Выбирая шаблон стоит сразу обращать внимание на то, отображается ли он корректно на мобильных устройствах. Делается это очень просто: меняете масштаб страницы (Ctrl + +). Шаблон на большом масштабе должен хорошо выглядеть и горизонтальная полоса прокрутки не должна появляться.

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

По завершении, не забываем все закоммитить и отправить на GitHub:
git add *
git commit -m "Added some content"
git push


Подготавливаем мясо код


Для маринада нам понадобится jQuery и редактор Ace написанный на javascript. Можно обойтись и без этих компонентов, или заменить их на что-то иное. Лично я попробовал несколько редакторов и Ace.js показался мне самым удобным и функциональным. Из недостатков у него большой вес ~500Kb.

Выбираем местечко на странице, куда мы поместим онлайн компиляцию. Добавляем в нужное место:
<div id="code">
    ... your code goes here ...
</div>

Не забываем добавить CSS и загрузку javascript:
<style type="text/css" media="screen">
    #code { 
         width: 100%;
         float:left;
         min-height:100px;
         overflow: hidden;
     }
</style>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/ace/ace.js"></script>

Теперь нужно настроить наш редактор:
<script>
    var code;
    
    $(function() {
        code = ace.edit("code");                      // создаем редактор из элемента с id="code"
        code.setTheme("ace/theme/textmate");          // выбираем тему оформления для подсветки синтаксиса
        code.getSession().setMode("ace/mode/c_cpp");  // говорим что код надо подсвечивать как C++ код
        code.setShowPrintMargin(false);               // опционально: убираем вертикальную границу в 80 сиволов
        code.setOptions({
            maxLines: Infinity,                       // опционально: масштабировать редактор вертикально по размеру кода
            fontSize: "12pt",                         // опционально: размер шрифта ставим побольше
        });
        code.$blockScrolling = Infinity;              // отключаем устаревшие, не поддерживаемые фишки редактора
    });
</script>

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

С GitHub избежать этого достаточно просто, благо он позволяет cross-origin resource sharing. То есть вы можете запрашивать со своей статической страницы на http(s)://user.github.io/repository/ ресурсы, например с raw.githubusercontent.com. Просто допишите следующее после code.$blockScrolling = Infinity;
$.get("https://raw.githubusercontent.com/user/repository/master/" + "path_to_source_file_in_repo.cpp", function(data) {
    code.setValue(data);    // обновляем содержимое редактора полученными данными
    code.clearSelection();  // опционально: снимаем выделение строк в редакторе
});

Продвинутые кулинары могут самостоятельно добавить проверку ошибок и вывод соответствующего сообщения пользователю.

В результате вы должны увидеть ваш код в редакторе с красивой подсветкой синтаксиса:


Жарим бекон код


Итак, теперь нам надо добавить кнопку для компиляции кода и место для вывода результата на нашу страницу:
<button id="run" onclick='run();'>Run</button> 

<p>Output:</p><pre id="output">Waiting...</pre>

С онлайн компиляцией нам будет помогать сервис Coliru:
function run() {
    // Команда для компиляции на удаленном сервере
    var cmd = "g++ -Wall main.cpp -o main_prog && echo 'Compilation: SUCCESS."
        + " Program output is:\n' && ./main_prog && echo \"\nExit code: $?\"";

    var output = $("#output");
    output.text('');
    var to_compile = {
        "src": code.getValue(),
        "cmd": cmd,
    };

    output.text("Executing... Please wait.");

    $.ajax({
        url: "http://coliru.stacked-crooked.com/compile",
        type: "POST",
        data: JSON.stringify(to_compile),
        contentType:"text/plain; charset=utf-8",
        dataType: "text"
    }).done(function(data) {
        output.text(data);
    }).fail(function(data) {
        output.text("Server error: " + data);
    });
};

Почему был выбран именно Coliru?
Сервисов для онлайн-компиляции развелось достаточно много, но у большинства из них нет никакого внешнего API, либо этот API незадокументирован. Coliru был первым сервисом онлайн компиляции С++ кода который у меня заработал.


Даём попробовать блюдо друзьям


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

Можно воспользоваться плагином SocialLikes
<link rel="stylesheet" href="social-likes_flat.css">
<meta property="og:title" content="Your Title"/>
<meta property="og:image" content="Your logo"/>
<link rel="canonical" href="https://user.github.io/repository/">
<meta property="og:url" content="https://user.github.io/repository/"/>
<meta property="og:site_name" content="Your repository name"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="Your short description"/>
...
<script src="social-likes.min.js"></script>
...

<div class="social-likes right" data-counters="no">
    <div class="facebook" title="Share on Facebook">Facebook</div>
    <div class="twitter" title="Share on Twitter">Twitter</div>
    <div class="plusone" title="Share on Google+">Google+</div>
    <div class="vkontakte" title="Share on VK">VK</div>
    <div class="odnoklassniki" title="Share on Odnoklassniki">Odnoklassniki</div>
    <div class="mailru" title="Share on MyWorld">MyWorld</div>
</div>


Готово! Осталось хитростью и обманом заставить людей вас полайкать. Например написать им: «Привет, Вася. Проверь, пожалуйста, работают ли у меня социальные кнопки!».

Вместо итога


Получившееся блюдо можно модифицировать на ваш вкус. Вместо GitHub можно использовать любые понравившиеся вам сервисы, Coliru умеет компилировать и С код (возможно что другие языки так же поддерживаются). Сервисов для онлайн-компиляции имеется достаточно много, если поискать, то можно найти аналогичные сервисы и для вашего любимого языка.

Надеюсь этот мини-рецепт будет кому-то полезен и добавит интерактивности вашим проектам.

Результат в моем случае выглядит вот так: apolukhin.github.io/Boost-Cookbook-4880OS

P.S.: Если не сложно, проверьте пожалуйста, работают ли социальные кнопки.
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 16
  • 0
    Не думал что когда-нибудь на самом деле появятся сервисы онлайн компиляции. Просто предстваить себе не могу, для чего они нужны? Единственный сеттинг который улавливаю — это для обучения студентов и обмена маленькими программами-лабораторками.

    Просветите меня, зачем это вообще нужно?
    • –1
      Имхо для обучения в первую очередь.

      Но бывают и другие случаи :) Например, хочется попробовать новый язык или быстро наваять что-то на ходу, попробовать какую-то идею, алгоритм, а на нетбуке нет среды разработки и компилятора, они только дома на десктопе или ноутбуке помощнее и потяжелее или, вообще, у Вас ChromeBook. В этих случах online IDE самое то.

      Сам пользуюсь для таких случаев c9.io поддерживает github, bitbacket, кучу разных языков программирования.
      • 0
        В основном для обучения и экспериментов.

        Обучение:
        Допустим что пользователь хочет понять, нужна ли ему библиотека Boost для проекта и научиться делать простые вещи на её основе. Для обучения и экспериментов ему понадобится скачать+скомпилировать+установить библиотеку, подобрать компилятор, скачать примеры, научиться их собирать. С непривычки это может занять пару часов.

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

        Эксперименты:
        «О! У меня есть гениальная идея как сделать очень крутую штуку под Windows. Надо только убедиться, что подобное можно сделать и под Linux».
        Перезагружаться из одной ОС в другую — занятие долгое и скучное, особенно если приходится это делать по несколько раз на дню (виртуалка конечно спасает, но на слабых ноутбуках она сильно тормозит и есть много ресурсов хост системы). Онлайн компилятор тут сильно спасает.
        • +1
          Я, конечно, рискую огрести, но установка библиотек и прочего инструментария в linux — это одна команда или три клика мышью. А ещё есть WINE, которая позволяет обкатать практически что угодно для винды (за исключением, конечно, того, что ещё не реализовано проектом WINE).
          Так что я по-прежнему не убеждён в нужности таких сервисов.
      • +2
        > С онлайн компиляцией нам будет помогать сервис Coliru
        пожалуй с этого и стоило начинать.
        • 0
          А я думал, вы скомпириловали emscripten на emscripten. Что-то вроде этой демки, только не из LLVM а прямо из C++.
          • 0
            Основная проблема с таким подходом для С++/С — необходимость отдавать пользователю большое количество библиотек и заголовочных файлов. Для библиотеки Boost придется отдавать более 100MB данных (точнее 100MB — это если в бинарном виде; в emscripten размер наверняка увеличится раза в два-три).

            К тому же некоторые вещи очень сложно перенести в браузер (многопоточность, работа с файлами и директориями, coroutines, true random numbers).

            Высокие требования к производительности тоже проблема: примеры на Boost.Spirit или Boost.GIL на среднем железе могут собираться более 20 секунд, а на сайт могут заходить и с мобильных устройств. Уж лучше собирать эти примеры на мощном удаленном сервере и быстрее показывать пользователю результат.
          • +2
            Что вами движет, когда вы пишете «репозитарий»? Repository же.
            • +1
              С русским языком в технических статьях всегда сложно. С одной стороны надо стараться писать статью на русском, с другой стороны необходимо минимально коверкать термины.

              Придерживаюсь следующего (неидеального) правила:
              * переводить на русский созвучные часто употребимые термины (static -> статический, class -> класс, repository -> репозитарий)
              * оставлять неизменными редкие или звучащие на русском абсолютно по другому термины (inline -> встраиваемые, alignment -> выравнивание)
              • +2
                Мне кажется, что «репозитарий» — уж очень редкое слово в русском языке, и что калька с английского была бы уместнее.
                • 0
                  Калька это заменять «репозиторий» на слово «хранилище».

                  А в данном случае репозитарий это просто устоявшееся и ошибочное написание лат. repositorium (хранилище). Видимо под воздействием другого однокоренного слова лат. depositarius (хранитель), где действительно пишется «а».

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

                  В английском такая же ситуация — a repository, но a depositary.
                  • +1
                    Да, с «калькой» я погорячился. Не знаю тогда, как назвать обычное заимствование.
                    Репозитарий Торвальдс, я понял.
                    Спасибо за разъяснение!
                • +6
                  Грамота.ру говорит, что репозиторий.
                  new.gramota.ru/spravka/buro/search-answer?s=274414
              • +2
                А лично меня ещё коробит порядок слов в «html шаблон», «C++ код». В английском это нормальный порядок слов, но в русском он кажется чужим. Ведь почему-то не говорят «gh-pages ветку», «index.html файл», «Ace редактор», «Coliru сервис» и т.д.
                /discuss
                • 0
                  Это можно легко игнорировать, мысленно подставив девис: «HTML-шаблон» уже не так сильно режет взгляд, правда? В целом же, я согласен, мне тоже не нравится заимствование чуждых структур речи. Правда, хоть это и просторечие, многие говорят «сентябрь-месяц», и здесь я даже насчёт дефиса не уверен.

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