162 lines
14 KiB
HTML
162 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<meta charset="utf-8">
|
||
<head>
|
||
<link rel="stylesheet" href="../../style.css">
|
||
</head>
|
||
<body>
|
||
<script data-goatcounter="https://services.opengamestudio.org:443/count" async src="//services.opengamestudio.org:443/count.js"></script>
|
||
<div id="header">
|
||
<div class="header2">
|
||
<div class="menu">
|
||
<a href="../../ru/news/index.html">Новости</a>
|
||
<a href="../../ru/game/index.html">Игры</a>
|
||
<a href="../../ru/tool/index.html">Инструменты</a>
|
||
<a href="../../ru/page/about.html">О нас</a>
|
||
</div>
|
||
<div id="lang">
|
||
<a href="../../en/news/gitjs-intro.html">EN</a>
|
||
<a href="../../ru/news/gitjs-intro.html">RU</a>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
</div>
|
||
<h3 class="left_item_title">В новостях...</h3>
|
||
<center>
|
||
<div class="news_item">
|
||
<h2 class="news_item_title">
|
||
<a href="gitjs-intro.html">Как я создаю приложения для браузера прямо в браузере</a>
|
||
</h2>
|
||
<p class="news_item_date">
|
||
2021-01-28 00:00
|
||
</p>
|
||
<div class="news_item_contents">
|
||
<p><img src="../../images/2021_gitjs-intro_снимок.jpg" alt="GitJS" /></p>
|
||
<p>В этой статье Михаил поделится опытом создания доступных долговечных приложений.</p>
|
||
<p>В 2013 году компания Canonical <a href="https://habr.com/ru/post/187480">пыталась собрать средства на выпуск смартфона
|
||
Ubuntu Edge</a>. Особенностью продукта должна была стать возможность
|
||
преобразовывать смартфон в полноценный ПК. Увы, необходимую сумму собрать не
|
||
удалось, поэтому мечта создать универсальное устройство так и осталась мечтой.</p>
|
||
<p>Со своей стороны я давно искал универсальность со стороны программного
|
||
обеспечения, не железа. Сегодня с уверенностью могу сказать, что нашёл
|
||
необходимую комбинацию: Git и JavaScript.</p>
|
||
<p>Ранее я уже описывал как преимущества браузерных приложений на примере
|
||
генератора статических сайтов <a href="http://opengamestudio.org/ru/news/on-the-way-to-durable-applications.html">nCKOB</a>, так и преимущества замены
|
||
очередного сервера с АПИ на Git для общения с внешним миром на примере
|
||
приложения учёта трат <a href="http://opengamestudio.org/ru/news/git-budget.html">ГитБюджет</a>. После выпуска ГитБюджета
|
||
оставшуюся часть 2020 года я потратил на систему, позволяющую создавать
|
||
браузерные приложения прямо в браузере. Эту систему я назвал GitJS.</p>
|
||
<p><cut/></p>
|
||
<h1 id="gitjs">GitJS</h1>
|
||
<p>Git в новой системе используется для:</p>
|
||
<ul>
|
||
<li>долговременного хранения данных <strong>вне</strong> устройства;</li>
|
||
<li>общения с внешним миром;</li>
|
||
<li>доставки приложения на устройство по HTTP.</li>
|
||
</ul>
|
||
<p>Таким образом, на текущий момент Git не используется в качестве контроля версий,
|
||
лишь как широко распространённая технология хранения с доступом на чтение
|
||
(HTTP) и запись. Это несколько противоречит первоначальной задумке автора,
|
||
однако позволяет каждому определить условия хранения своих данных:
|
||
платно/бесплатно, локально/дистанционно.</p>
|
||
<p>Альтернативой Git могло бы стать использование FTP/rsync, но нет ни широко
|
||
известных и доступных сервисов вроде SourceForge/GitHub/BitBucket/GitLab, ни
|
||
реализаций для работы с FTP/rsync из браузера вроде <a href="https://isomorphic-git.org">Isomorphic-Git</a>.</p>
|
||
<p>JS (вместе с HTML/CSS) используется для:</p>
|
||
<ul>
|
||
<li>интерфейса;</li>
|
||
<li>логики;</li>
|
||
<li>долговременного хранения приложения и данных <strong>на</strong> устройстве.</li>
|
||
</ul>
|
||
<p>GitJS состоит из следующих трёх обязательных частей (в порядке исполнения):</p>
|
||
<ol>
|
||
<li><a href="https://gitlab.com/gitjs/gitjs.gitlab.io/-/blob/master/index.html">Страница HTML</a><ul>
|
||
<li>вводит правила GitJS</li>
|
||
<li>имеет крошечный размер для работы на медленных сетях</li>
|
||
<li>запрашивается с веб-сервера при каждом обновлении страницы</li>
|
||
<li>может располагаться локально, чтобы обходиться без Интернета</li></ul></li>
|
||
<li><a href="https://bitbucket.org/gitjs/0000/src/master/0000.js">Правила GitJS</a><ul>
|
||
<li>представляют из себя код JS</li>
|
||
<li>вводят понятие модулей с их загрузкой, сохранением и исполнением</li>
|
||
<li>вводят понятие черёд: способа оформления кода реактивно-событийно</li>
|
||
<li>запрашиваются страницей HTML лишь при отсутствии или при обновлении</li>
|
||
<li>сохраняются страницей HTML в LocalStorage для ускорения последующих пусков</li></ul></li>
|
||
<li><a href="https://git.opengamestudio.org/kornerr/nPOBEPuTb-JSZip">Пусковой модуль</a><ul>
|
||
<li>указывается в адресной строке после символа <code>?</code></li>
|
||
<li>исполняется после загрузки правил GitJS</li>
|
||
<li>делает что угодно, например, вводит понятие других модулей, которые нужно загрузить перед началом работы</li>
|
||
<li>в примере по ссылке я проверял библиотеку JSZip</li></ul></li>
|
||
</ol>
|
||
<p>Пусковой модуль может ввести абсолютно любые дополнительные правила к GitJS или
|
||
же их заменить, поэтому фантазия тут ограничена лишь возможностями браузера:
|
||
в частности, не удастся удалить все файлы пользователя на диске.</p>
|
||
<p>Отдельно повторю, что наличие локальных страницы HTML и веб-сервиса Git
|
||
позволяет сделать систему независимой от Интернета.</p>
|
||
<h1 id="gitjs1gitjs">Приложение GitJS №1: редактор модулей GitJS</h1>
|
||
<p>На текущий момент редактор обладает минимальной необходимой функциональностью:</p>
|
||
<p><strong>1.1. Правка текстовых файлов модуля</strong></p>
|
||
<p><img src="../../images/2021_gitjs-intro_правка-текстовых-файлов.png" alt="" /></p>
|
||
<p><strong>1.2. Публикация изменений в Git</strong></p>
|
||
<p><img src="../../images/2021_gitjs-intro_публикация-изменений.png" alt="" /></p>
|
||
<p><strong>Замечание</strong>: пароли хранит браузер.</p>
|
||
<p><strong>1.3. Правка структуры модуля</strong></p>
|
||
<p><img src="../../images/2021_gitjs-intro_правка-структуры.png" alt="" /></p>
|
||
<p><strong>1.4. Открытие ранее загруженного модуля из LocalStorage/IndexedDB</strong></p>
|
||
<p><img src="../../images/2021_gitjs-intro_открытие-модуля.png" alt="" /></p>
|
||
<p><strong>1.5. Сохранение изменений локально в LocalStorage/IndexedDB</strong></p>
|
||
<p>Последняя версия редактора доступна здесь: <a href="http://gitjs.org/📦">http://gitjs.org/📦</a>. Первый пуск происходит не быстро, так что наберитесь терпения.</p>
|
||
<h1 id="gitjs2">Приложение GitJS №2: пасьянс Маджонг</h1>
|
||
<p>Игра на текущий момент обладает следующей функциональностью:</p>
|
||
<p><strong>2.1. Выбор и удаление фишек с поля в соответствии с правилами пасьянса Маджонг</strong></p>
|
||
<p><img src="../../images/2021_gitjs-intro_механика.png" alt="" /></p>
|
||
<p><strong>2.2. Выбор темы фишек</strong></p>
|
||
<p><img src="../../images/2021_gitjs-intro_темы.png" alt="" /></p>
|
||
<p><strong>2.3. Выбор раскладки игрового поля</strong></p>
|
||
<p><img src="../../images/2021_gitjs-intro_раскладки.png" alt="" /></p>
|
||
<p><strong>2.4. Определение победы и поражения</strong></p>
|
||
<p>Последняя версия игры доступна здесь: <a href="http://gitjs.org/🀄/1.0.14">http://gitjs.org/🀄/1.0.14</a>.</p>
|
||
<p>Конечной целью для игры является воспроизведение выпущенного много лет назад
|
||
<a href="http://opengamestudio.org/ru/game/ogs-mahjong-1.html">Маджонга</a>, который работал лишь на Linux и Windows.</p>
|
||
<h1 id="">Ограничения</h1>
|
||
<p>Ограничения GitJS проистекают из ограничений браузеров.</p>
|
||
<p><strong>1. CORS</strong></p>
|
||
<p>Для записи изменений в Git необходимо соблюсти CORS.
|
||
На текущий момент крупные сервисы <a href="https://github.com/isomorphic-git/isomorphic-git#cors-support">не разрешают невозбранно писать в их Git</a>,
|
||
поэтому приходится либо использовать прокси, либо поднимать свой Git.</p>
|
||
<p><strong>2. Полноэкранный режим на мобилках</strong></p>
|
||
<p>Нынче в моду вошло схлопывание элементов управления браузеров при перемотке
|
||
страниц, не помещающихся в экран. В результате выходит, что якобы
|
||
освобождённые области сверху и снизу всё равно нельзя трогать, т.к. это
|
||
приводит к возвращению элементов управления и изменению размера области
|
||
отображения.</p>
|
||
<p>В пасьянсе Маджонг эту проблему я обошёл поддержкой портретного режима и
|
||
возможностью смещать игровое поле влево/вправо. К сожалению, это усложняет
|
||
игру, т.к. не видно целиком игрового поля.</p>
|
||
<h1 id="-1">Планы</h1>
|
||
<p>Упоминавшийся ранее <a href="http://opengamestudio.org/ru/news/on-the-way-to-durable-applications.html">nCKOB</a> в этому году станет приложением GitJS, что
|
||
позволит создавать статические сайты, не покидая браузер. Посмотрим, что из
|
||
этого выйдет.</p>
|
||
<p>ЗЫ: Первым изображением является картина "Баян", написанная Виктором Васнецовым в 1910 году.</p>
|
||
</div>
|
||
</div>
|
||
<div id="disqus_thread"></div>
|
||
<script>
|
||
var disqus_config = function () {
|
||
this.page.url = "https://opengamestudio.org/ru/news/gitjs-intro.html";
|
||
this.page.identifier = "gitjs-intro.html";
|
||
};
|
||
(function() { // DON'T EDIT BELOW THIS LINE
|
||
var d = document, s = d.createElement('script');
|
||
s.src = 'https://opengamestudio.disqus.com/embed.js';
|
||
s.setAttribute('data-timestamp', +new Date());
|
||
(d.head || d.body).appendChild(s);
|
||
})();
|
||
</script>
|
||
<noscript>Пожалуйста, включите JavaScript для просмотра <a href="https://disqus.com/?ref_noscript">комментариев на платформе Disqus.</a></noscript>
|
||
<div id="footer">
|
||
Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
|
||
из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
|
||
</div>
|
||
</center>
|
||
</body>
|
||
</html> |