You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

169 line
14KB

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5. <link rel="stylesheet" href="../../style.css">
  6. </head>
  7. <body>
  8. <script data-goatcounter="https://services.opengamestudio.org:443/count" async src="//services.opengamestudio.org:443/count.js"></script>
  9. <div id="header">
  10. <div>
  11. <strong id="title">Open Game Studio</strong>
  12. <div id="lang">
  13. <a href="../../en/news/gitjs-intro.html">EN</a>
  14. <a href="../../ru/news/gitjs-intro.html">RU</a>
  15. </div>
  16. </div>
  17. <div class="header2">
  18. <div class="menu">
  19. <a href="../../ru/news/index.html">Новости</a>
  20. <a href="../../ru/game/index.html">Игры</a>
  21. <a href="../../ru/tool/index.html">Инструменты</a>
  22. <a href="../../ru/page/about.html">О нас</a>
  23. </div>
  24. <a class="discord" href="https://discord.gg/3A6THQabNf">
  25. <img src="../../images/discord.png"></img>
  26. </a>
  27. <div class="clear"></div>
  28. </div>
  29. </div>
  30. <h3 class="left_item_title">В новостях...</h3>
  31. <center>
  32. <div class="news_item">
  33. <h2 class="news_item_title">
  34. <a href="gitjs-intro.html">Как я создаю приложения для браузера прямо в браузере</a>
  35. </h2>
  36. <p class="news_item_date">
  37. 2021-01-28 00:00
  38. </p>
  39. <div class="news_item_contents">
  40. <p><img src="../../images/2021_gitjs-intro_снимок.jpg" alt="GitJS" /></p>
  41. <p>В этой статье Михаил поделится опытом создания доступных долговечных приложений.</p>
  42. <p>В 2013 году компания Canonical <a href="https://habr.com/ru/post/187480">пыталась собрать средства на выпуск смартфона
  43. Ubuntu Edge</a>. Особенностью продукта должна была стать возможность
  44. преобразовывать смартфон в полноценный ПК. Увы, необходимую сумму собрать не
  45. удалось, поэтому мечта создать универсальное устройство так и осталась мечтой.</p>
  46. <p>Со своей стороны я давно искал универсальность со стороны программного
  47. обеспечения, не железа. Сегодня с уверенностью могу сказать, что нашёл
  48. необходимую комбинацию: Git и JavaScript.</p>
  49. <p>Ранее я уже описывал как преимущества браузерных приложений на примере
  50. генератора статических сайтов <a href="http://opengamestudio.org/ru/news/on-the-way-to-durable-applications.html">nCKOB</a>, так и преимущества замены
  51. очередного сервера с АПИ на Git для общения с внешним миром на примере
  52. приложения учёта трат <a href="http://opengamestudio.org/ru/news/git-budget.html">ГитБюджет</a>. После выпуска ГитБюджета
  53. оставшуюся часть 2020 года я потратил на систему, позволяющую создавать
  54. браузерные приложения прямо в браузере. Эту систему я назвал GitJS.</p>
  55. <p><cut/></p>
  56. <h1 id="gitjs">GitJS</h1>
  57. <p>Git в новой системе используется для:</p>
  58. <ul>
  59. <li>долговременного хранения данных <strong>вне</strong> устройства;</li>
  60. <li>общения с внешним миром;</li>
  61. <li>доставки приложения на устройство по HTTP.</li>
  62. </ul>
  63. <p>Таким образом, на текущий момент Git не используется в качестве контроля версий,
  64. лишь как широко распространённая технология хранения с доступом на чтение
  65. (HTTP) и запись. Это несколько противоречит первоначальной задумке автора,
  66. однако позволяет каждому определить условия хранения своих данных:
  67. платно/бесплатно, локально/дистанционно.</p>
  68. <p>Альтернативой Git могло бы стать использование FTP/rsync, но нет ни широко
  69. известных и доступных сервисов вроде SourceForge/GitHub/BitBucket/GitLab, ни
  70. реализаций для работы с FTP/rsync из браузера вроде <a href="https://isomorphic-git.org">Isomorphic-Git</a>.</p>
  71. <p>JS (вместе с HTML/CSS) используется для:</p>
  72. <ul>
  73. <li>интерфейса;</li>
  74. <li>логики;</li>
  75. <li>долговременного хранения приложения и данных <strong>на</strong> устройстве.</li>
  76. </ul>
  77. <p>GitJS состоит из следующих трёх обязательных частей (в порядке исполнения):</p>
  78. <ol>
  79. <li><a href="https://gitlab.com/gitjs/gitjs.gitlab.io/-/blob/master/index.html">Страница HTML</a><ul>
  80. <li>вводит правила GitJS</li>
  81. <li>имеет крошечный размер для работы на медленных сетях</li>
  82. <li>запрашивается с веб-сервера при каждом обновлении страницы</li>
  83. <li>может располагаться локально, чтобы обходиться без Интернета</li></ul></li>
  84. <li><a href="https://bitbucket.org/gitjs/0000/src/master/0000.js">Правила GitJS</a><ul>
  85. <li>представляют из себя код JS</li>
  86. <li>вводят понятие модулей с их загрузкой, сохранением и исполнением</li>
  87. <li>вводят понятие черёд: способа оформления кода реактивно-событийно</li>
  88. <li>запрашиваются страницей HTML лишь при отсутствии или при обновлении</li>
  89. <li>сохраняются страницей HTML в LocalStorage для ускорения последующих пусков</li></ul></li>
  90. <li><a href="https://git.opengamestudio.org/kornerr/nPOBEPuTb-JSZip">Пусковой модуль</a><ul>
  91. <li>указывается в адресной строке после символа <code>?</code></li>
  92. <li>исполняется после загрузки правил GitJS</li>
  93. <li>делает что угодно, например, вводит понятие других модулей, которые нужно загрузить перед началом работы</li>
  94. <li>в примере по ссылке я проверял библиотеку JSZip</li></ul></li>
  95. </ol>
  96. <p>Пусковой модуль может ввести абсолютно любые дополнительные правила к GitJS или
  97. же их заменить, поэтому фантазия тут ограничена лишь возможностями браузера:
  98. в частности, не удастся удалить все файлы пользователя на диске.</p>
  99. <p>Отдельно повторю, что наличие локальных страницы HTML и веб-сервиса Git
  100. позволяет сделать систему независимой от Интернета.</p>
  101. <h1 id="gitjs1gitjs">Приложение GitJS №1: редактор модулей GitJS</h1>
  102. <p>На текущий момент редактор обладает минимальной необходимой функциональностью:</p>
  103. <p><strong>1.1. Правка текстовых файлов модуля</strong></p>
  104. <p><img src="../../images/2021_gitjs-intro_правка-текстовых-файлов.png" alt="" /></p>
  105. <p><strong>1.2. Публикация изменений в Git</strong></p>
  106. <p><img src="../../images/2021_gitjs-intro_публикация-изменений.png" alt="" /></p>
  107. <p><strong>Замечание</strong>: пароли хранит браузер.</p>
  108. <p><strong>1.3. Правка структуры модуля</strong></p>
  109. <p><img src="../../images/2021_gitjs-intro_правка-структуры.png" alt="" /></p>
  110. <p><strong>1.4. Открытие ранее загруженного модуля из LocalStorage/IndexedDB</strong></p>
  111. <p><img src="../../images/2021_gitjs-intro_открытие-модуля.png" alt="" /></p>
  112. <p><strong>1.5. Сохранение изменений локально в LocalStorage/IndexedDB</strong></p>
  113. <p>Последняя версия редактора доступна здесь: <a href="http://gitjs.org/📦">http://gitjs.org/📦</a>. Первый пуск происходит не быстро, так что наберитесь терпения.</p>
  114. <h1 id="gitjs2">Приложение GitJS №2: пасьянс Маджонг</h1>
  115. <p>Игра на текущий момент обладает следующей функциональностью:</p>
  116. <p><strong>2.1. Выбор и удаление фишек с поля в соответствии с правилами пасьянса Маджонг</strong></p>
  117. <p><img src="../../images/2021_gitjs-intro_механика.png" alt="" /></p>
  118. <p><strong>2.2. Выбор темы фишек</strong></p>
  119. <p><img src="../../images/2021_gitjs-intro_темы.png" alt="" /></p>
  120. <p><strong>2.3. Выбор раскладки игрового поля</strong></p>
  121. <p><img src="../../images/2021_gitjs-intro_раскладки.png" alt="" /></p>
  122. <p><strong>2.4. Определение победы и поражения</strong></p>
  123. <p>Последняя версия игры доступна здесь: <a href="http://gitjs.org/🀄/1.0.14">http://gitjs.org/🀄/1.0.14</a>.</p>
  124. <p>Конечной целью для игры является воспроизведение выпущенного много лет назад
  125. <a href="http://opengamestudio.org/ru/game/ogs-mahjong-1.html">Маджонга</a>, который работал лишь на Linux и Windows.</p>
  126. <h1 id="">Ограничения</h1>
  127. <p>Ограничения GitJS проистекают из ограничений браузеров.</p>
  128. <p><strong>1. CORS</strong></p>
  129. <p>Для записи изменений в Git необходимо соблюсти CORS.
  130. На текущий момент крупные сервисы <a href="https://github.com/isomorphic-git/isomorphic-git#cors-support">не разрешают невозбранно писать в их Git</a>,
  131. поэтому приходится либо использовать прокси, либо поднимать свой Git.</p>
  132. <p><strong>2. Полноэкранный режим на мобилках</strong></p>
  133. <p>Нынче в моду вошло схлопывание элементов управления браузеров при перемотке
  134. страниц, не помещающихся в экран. В результате выходит, что якобы
  135. освобождённые области сверху и снизу всё равно нельзя трогать, т.к. это
  136. приводит к возвращению элементов управления и изменению размера области
  137. отображения.</p>
  138. <p>В пасьянсе Маджонг эту проблему я обошёл поддержкой портретного режима и
  139. возможностью смещать игровое поле влево/вправо. К сожалению, это усложняет
  140. игру, т.к. не видно целиком игрового поля.</p>
  141. <h1 id="-1">Планы</h1>
  142. <p>Упоминавшийся ранее <a href="http://opengamestudio.org/ru/news/on-the-way-to-durable-applications.html">nCKOB</a> в этому году станет приложением GitJS, что
  143. позволит создавать статические сайты, не покидая браузер. Посмотрим, что из
  144. этого выйдет.</p>
  145. <p>ЗЫ: Первым изображением является картина "Баян", написанная Виктором Васнецовым в 1910 году.</p>
  146. </div>
  147. </div>
  148. <div id="disqus_thread"></div>
  149. <script>
  150. var disqus_config = function () {
  151. this.page.url = "https://opengamestudio.org/ru/news/gitjs-intro.html";
  152. this.page.identifier = "gitjs-intro.html";
  153. };
  154. (function() { // DON'T EDIT BELOW THIS LINE
  155. var d = document, s = d.createElement('script');
  156. s.src = 'https://opengamestudio.disqus.com/embed.js';
  157. s.setAttribute('data-timestamp', +new Date());
  158. (d.head || d.body).appendChild(s);
  159. })();
  160. </script>
  161. <noscript>Пожалуйста, включите JavaScript для просмотра <a href="https://disqus.com/?ref_noscript">комментариев на платформе Disqus.</a></noscript>
  162. <div id="footer">
  163. Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
  164. из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
  165. </div>
  166. </center>
  167. </body>
  168. </html>