|
- <!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>
- <strong id="title">Open Game Studio</strong>
- <div id="lang">
- <a href="../../en/news/gitjs-intro.html">EN</a>
- <a href="../../ru/news/gitjs-intro.html">RU</a>
- </div>
- </div>
- <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>
- <a class="discord" href="https://discord.gg/3A6THQabNf">
- <img src="../../images/discord.png"></img>
- </a>
- <div class="clear"></div>
- </div>
- </div>
- <center>
- <h1>В новостях...</h1>
- <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>.
- Сайт размещён на <a href="https://pages.github.com">GitHub Pages</a>.
- </div>
- </center>
- </body>
- </html>
|