Как на мобильной платформе 1С сделать игру. Расширяем возможности через Поле HTML Документа

14.12.22

Разработка - Мобильная разработка

Как вы считаете, можно ли создавать игры на мобильной платформе 1С? Независимый разработчик Никита Вельмаскин убежден – да, можно. На Infostart Event Post-Apocalypse он продемонстрировал, как работают гибридные приложения на мобильной платформе 1С и дал исходники игры, чтобы изучить все возможности веб-технологий применительно к мобильной разработке в 1С.

Скачать файлы

Наименование Файл Версия Размер
Как на мобильной платформе 1С сделать игру. Расширяем возможности через Поле HTML Документа: архив
.zip 44,68Mb
98
.zip 44,68Mb 98 Скачать бесплатно

Мой доклад вроде как про разработку мобильных игр, но на самом деле, он о том, как на мобильной платформе 1С расширить возможности ваших бизнес-приложений.

Расскажу, о чем пойдет речь:

  1. Коснусь теории игр. Расскажу, из каких компонентов состоит игра, чтобы стало понятно, почему игра – это такое же интерактивное приложение, как и все остальные.

  2. Расскажу, как сделать гибридное приложение на 1С.

  3. Покажу, как расширить возможности 1С, попутно расширяя ваше сознание.

  4. Продемонстрирую пример готовой игры, упакованной в 1С. Более того, дам вам исходники к игре Flappy bird, которую разработал для этого доклада.

  5. Разберем игру Flappy bird по косточкам. На примере игры покажу, как устроены компоненты мобильного приложения.

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

Теория игр

 

https://lh5.googleusercontent.com/HyS7wes0z8CkaZUKYCZNitibQ4FVBCYDbF0Rh2AE8CT2Zao-vqSWjzTkyJtIGPk4jrULCS_3ewXNya_wqsWjhMZlonFss_PR8keM5zZSeuzc1wKnjKXOPXXef3_2sr_D-4ThwR1zHSqS5DR5lXfEJU8hMRINB_lyRTrMIpBg7KaWnmwypiYYBzjevo5HqQ 

 

Согласно «Википедии», компьютерная (видео) игра – это компьютерная программа, служащая для организации игрового процесса (геймплея), связи с партнерами по игре, или сама выступающая в качестве партнера.

Если здесь заменить слово «игра» на слово «автоматизация», станет понятно, что игра – это такое же приложение, как Word или CRM, с такой же функциональностью и возможностями.

 

https://lh5.googleusercontent.com/1bKD974DichzW3OChEnhab1afl_xE0WMBHHfI6bbUzjCZjUqqqN-ZCKWRuodWIQP5X_WQhE2RHB0FVYfR4FgUoliPGLUu4aUDYO5-04HTWJWslvq_8RAVDox_H83dZ5ClDmCqKIL9gtB6B1VZqzgX0Z_JBv0PkLrwCSLTSMu4DsUod7DhV52XvHGewi1LQ

 

Многие игроки даже не подозревают, почему они играют в игры, и почему та или иная игра «цепляет». Для изучения этих вопросов существует целая наука – геймдизайн.

Геймдизайн выделяет три основных компонента, из которых состоит игра.

  1. Механика игры – это основные правила игры, ее законы и сам игровой принцип. Этим компонентом занимаются геймдизайнеры. Многие считают, что это те, кто рисуют уровни, но нет. Геймдизайнер – это бог игры, который придумывает правила этого мира;

  2. Геймплей – компонент игры, отвечающий за интерактивное взаимодействие игры с игроком. Этот компонент неразрывно связан с механикой – сюда относится то, как игрок реагирует на игру, как игра реагирует на действия игрока, и вообще принципы того, что творит игра для игрока.
    В технических заданиях 1С-ников часто не хватает описания сценариев действия пользователя. Я нигде в ТЗ не встречал, чтобы в нем было описано, как приложение будет относиться к пользователю, и как пользователь будет относиться к приложению, какая между ними будет взаимосвязь. Это – плохо.

  3. Сеттинг игры – пространство игры: мир, нарратив и окружение. Сюда относится визуальная часть, музыка, модели – все, что мы можем ощутить физически.

Как вы считаете, можно ли создавать игры или приложения со структурой игры на мобильной платформе 1С? Я считаю, что да, это можно сделать. И я вам сегодня продемонстрирую, как можно сделать игру на мобильной платформе 1С через гибридное приложение.

 

Расширяем 1С через Web-технологии

 

https://lh6.googleusercontent.com/SBqf3ob43qM-dVZgbOXJaE3tv7dQ0SZ_dp_rw2Fo6nFihAbim1mnVl3hO20407Czjx6ZCPHalIEjGAwUhwXXN6maaBejb3o4HuRyaX0ZN6cYZamXyNhJI2LLEbOE2ilnZJVLxOmKb2OMSCL7YFiwPnrWjBrLbkTaObpV5UT6ceElMlJj-rn3uzlmVN09rA

 

Гибридное приложение – это приложение, совмещающее в себе технологии и архитектуры различных платформ. 

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

Достоинство гибридных приложений – кроссплатформенность. Это означает, что теоретически ваше приложение запустится везде, где есть интернет-браузер. 

Недостатки гибридных приложений вытекают из достоинств. Гибридные приложения имеют плохую обратную совместимость используемых стандартов на различных операционных системах. Поэтому готовьтесь к тому, что при разработке гибридного мобильного приложения вам придется тестировать его и на Android, и на iOS – проверять, как приложение выглядит и работает в одних и тех же технических условиях.

В контексте этого доклада мы будем скрещивать Web-технологии и технологии 1С. 

  • У Web несомненное преимущество в широчайших возможностях визуализации – на нем можно прекрасно делать фронтенд. 

  • У 1С классное преимущество – работа с базой данных, с Web-сервисами, отчетностью, PDF и т. д. Это будет наш бэкенд.

 

https://lh4.googleusercontent.com/baTsxyGg1mAAp1iJyNdZPUwK8J5QJSOj1UCKFqtHuh8JWrIYCE5DFSYJ4Tvz_yA8TLoDNIuHXky-de22ylDMZEHf8hG7XbqVClzeUo5jPIydtCjwEcFLiGbGZysfFQeq05FFpkscp4iF-IiBAPTHiV8T4-wOnh-V9MWom9tOKCsMZi4ECLR1dxGY5m1m-Q

 

На слайде представлены приложения Boss, «Бюджет» и «Диеты» – это программы, созданные компанией «1С-Рарус». Кто не знает их, скачайте и изучите. Деинженировать эти приложения – особое удовольствие.

По моему мнению, при появлении возможностей мобильной разработки, платформа 1С переросла из платформы только для прикладной разработки в универсальную. Теперь 1С-нику доступны возможности разработки любых приложений на любых платформах. Этим подходом и воспользовались разработчики «1С-Рарус». Они взяли все самое лучшее из мобильной платформы и добавили через свой уникальный веб-интерфейс. Я вам просто рекомендую посмотреть это.

 

https://lh4.googleusercontent.com/5qYBznerRun1ikIoJC7JGFqglmSsAu995PnTEoMO-rXXFO09jHF2EIIf36BPCPNUF9frpeBKMXmcNTOz-76CYg2Rvyd3qH2Ex8ERxOb43Lx_ObCiuII6G_GAlUwwGYXk_GeBIinteJCTAd05ezLyKn5HSmctTnIAYyOi-SPAi9DS5eDBjK44aLZyUET5sw

 

Говоря о расширении UI платформы 1С через веб-технологии, я бы рекомендовал строить самый интерфейс таким образом:

  1. Красивый HTML. На первом уровне – в форме, которую я называю «посадочной страницей», пользователю выводятся красивые графики и кнопки. Не дай Бог вам там реализовать работу с вводом текста – не надо этого делать. На посадочной странице дайте пользователю насладиться видом цифр, которые хранятся в приложении.

  2. Гибрид HTML и 1С. На следующем уровне можно начать скармливать пользователю гибрид интерфейса HTML и 1C.

  3. Только 1С. На третьем и более уровнях можно скармливать пользователю родной UI. Он этого даже не заметит.

Такой подход даст вам возможность разрабатывать более защищенный UI. Не надо все пихать в HTML, лучше совмещать HTML с родным 1С-ным интерфейсом.

 

https://lh5.googleusercontent.com/HP2SkaEnJxLaD0OeqwwMUGDA6kW-2Btlr3v-FNwmpGBHl74konQlIinJKhRejJnswTWPlVenZX5hrsTM-NwSH3lugoAUAQIopm5InCvyyXFsX8oGZzITZQDHPtXnyM5BH0rstoARSmioiLSKA7A9z2S9xB34oE3mo2bh9j8MuKzAIXzLnijjkBjw-V29xw

 

Я взял форму из приложения Boss от компании 1С-Рарус и декомпозировал ее. 

Форма состоит из горизонтальных блоков, которые скомпонованы вертикально. Обратите внимание, что прямо между элементами UI от платформы 1С, разработчики вставили UI, написанный в HTML. Этот HTML-элемент выглядит, как родной – пользователь не замечает никаких странностей в его отрисовке. Единственный способ распознать, что это веб-View – слабозаметная дуга при свайпе сверху вниз. Это будет говорить о том, что элемент разработан на HTML и отображается через веб-View платформы. Это просто, эффективно и красиво.

Что еще можно сделать при помощи веб-технологий в 1С? 

  • Например, работать с анимацией – прямо в платформе можно отображать анимацию у себя в мобильном устройстве. 

  • Вы можете работать с векторной графикой через SVG – это даже меньше ест память.

  • Вы можете работать с 3D-графикой.

  • И, конечно, работать с аудио – даже есть постобработка аудио через JavaScript. 

Если вы будете делать гибридное приложение, это все доступно и в мобильной платформе.

Гибридное приложение дает вам преимущества с обеих сторон:

  • во фронтенд-логике вашего приложения веб-возможности перемешиваются с родным UI, и у вас появляются красивые кнопки, заманиловки и вообще все, что любит пользователь;

  • на бэкенде остается 1С, при помощи которого вы работаете с базой данных и отчетностью.

 

Как сделать гибридное приложение на 1С

 

https://lh4.googleusercontent.com/ciXcG2j6V6RqekkKn90fplpWNTUvhlklrEkNbx4bicBszBJufAHpQIpNzY45ESrTrhnX4VkVEoWp2uD176Hh86L47DCIL2cMzbfDJPfnQrOzdbMMQH3l24nzXApI1E3_OzX2B-phD2JOOP4dtzFlcfLEBJu3iUPD5ab53YUL09Lx6wNVkDeV4FB8P6BOsg

 

Расскажу, как сделать гибридное приложение в мобильной платформе 1С. 

Это – очень просто: 

  • добавляете в форме строковый реквизит с видом ПолеHTMLДокумента;

  • забрасываете этот реквизит на форму – всё, вы создали гибридное приложение;

  • потом в модуле формы достаточно в эту строку записать значение, содержащее HTML-теги

Вуаля! В режиме 1С:Предприятие у вас вместо строки отображается целая HTML-страница. Очень удобно и эффективно.

 

Пример готовой игры, реализованной на 1С

 

https://lh5.googleusercontent.com/vx7BpEz67oKv2RwGbm5aHOM9O_kQ_PbNNzGXWAmALx4c1SiO6paZERB93GsLl6IaTvPLVdAzKGrCG6lYwPieSXCbTMR3j9IoUP0CY7b0yZkLYxk2sbZ4wk1QdnpfyCY2-uodzqkd4-akBoDxMoyMQKQIgWAlmcnLdiXvYP95cbSK8bQTwUvmxBB9PpMywQ

 

Представляю вам мобильную игру, разработанную на мобильной платформе 1C.

Это – классический Flappy Bird, в конце статьи приложен архив с файлами. Вы можете скачать:

  • apk-файл этой игры, чтобы поставить на телефон Android;

  • полные исходники к игре – я специально оставил много комментариев, чтобы объяснить, как это работает. 

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

Расскажу про три игровых компонента, из которых состоит игра.

Механика. Игрок – это маленькая птичка, которая летит по бесконечному горизонтальному миру, сражается с гравитацией и облетает препятствия. Если игрок соприкасается с землей или с препятствием, он погибает (у него отнимается жизнь).

Почему игрок будет вообще в это играть? В дизайн-документе игры разработчики отвечают на этот вопрос. Согласно теории геймдизайна, существует восемь причин, почему игрок играет. Одна из причин – человеческое стремление к преодолению препятствий. Когда мы преодолеваем препятствия, наш мозг награждает нас эндорфинами. Увеличивая размер препятствия, вы получаете больше удовольствия.

Геймплей. Игрок управляет взмахом крыльев птицы через нажатие на экран телефона. Если игрок преодолевает препятствие, играет победный аудиоблок, если падает или спотыкается об препятствие, – звучит аудио проигрыша, и игра возвращается в первоначальное состояние.

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

 

https://lh6.googleusercontent.com/a17aNKcKRnkZhlUAA0uJ6vX0-wQZpwmnezy8jvesFFiiiByqLwFU5NKJ_s54oTsHNcHFicAQqQIGipS8VqGoReBiOIZhM6hG89ohpjn24Lri8B9UcyaaeujjL4Az1zhcx43Q60jKPH26ceoizDTxYMirlTXFE9lYMj_LSWemP8Vg_IsA-OBryBjS4snuDg

 

Сеттинг. Мир, где обитает птица – это бесконечно горизонтальный мир, населенный страшными фиолетовыми трубами.

С игрой понятно. Переходим к технической части.

 

Стандарты с WebView на мобильной платформе (CSS, HTML5, JS)

 

https://lh3.googleusercontent.com/qHyZqjMuU9U6DTvg5VaXqHoYGv1yXCueuNHZ5fXyEdRqxd9Gcr-yrmgwTHhdwBoATlwhCeaskWELfII41H8gVOzbjkKBOeSU3znZAs1w4I9FKxswO-O_OtYRpEz4ZDE1WFl-IQ5L8pb2E4yPtEP_yjdUwLUBz2Nhf9tQ0SiiuCYm1krkG6K3G_cioUrEgw

 

Как же делать веб-приложения и использовать при этом 1С? 

В первую очередь, важно соблюдение стандартов. 

  • WebView платформы разработано на WebKit. Придется много гуглить, чтобы понять, какие CSS-нотации использовать, какая часть JavaScript-кода будет отрабатывать на WebKit, а какая нет;

  • HTML. Я при разработке этой игры использовал HTML5, где даже Canvas работает. На Canvas можете рисовать все что угодно, – это безграничные возможности;

  • CSS. Я использовал CSS 2.0, я уверен, что на WebKit и CSS 3 будет работать. У меня анимация работает в CSS 2.0.

  • JavaScript. Необходимо не превышать стандарт ECMAScript 6 (ES6), поэтому новомодные стандарты JavaScript не подойдут. 

Не забывайте, что вариантов дисплеев много. Поскольку вы уже обладаете знаниями по расширению возможностей UI, комбинируйте возможности платформы 1С, HTML, CSS и JavaScript. Делайте адаптивный интерфейс. Это вам поможет сделать все красиво, грамотно и главное – быстро. Не забывайте все тестировать на различных устройствах.

 

Тонкости Web-разработки в 1С

 

https://lh6.googleusercontent.com/Yx3zDuM9FI6_ioivvInCTObEQCXVQ9cIcrvHEg2IQ16PZwNGDh9142Dew-1zrgKvnkZN0iQ5QNQq2QgObQ6CmLkuW9SS53ZSxfQsZX4279sACbR7DYKnhTUUB5uBjKdMpNY8FHE87GkvQVftkVtM12LDxnLInWLW1Io1TZZVQIgEKY00H04qdkabv-cesQ

 

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

Что нужно сделать в первую очередь? 

  1. Заблокировать зум, чтобы пользователь не смог увеличивать страницу руками. Делается это при помощи метатега ’viewport’.
    <meta name=’viewport’ content=‘width=device-width’, initial-scale=1.0, maximum-scale=1.0, user-scalable=no’>
    В этом случае элемент будет отображаться так, как вы его и задумали.

  2. Управлять скролл-барами элементов страницы через CSS. На слайде показана установка свойству overflow элемента body значение hidden, которое блокирует отображение скролл-баров. При желании вы можете указать для этого свойства значение scroll, которое добавляет полосы прокрутки всегда. Или значение auto, которое делает отображение скролл-баров автоматическим. Но это вы уже сами разберетесь через CSS. 

  3. Заблокировать кэш. Это нужно, чтобы WebView платформы отображало только актуальные данные. Сам WebKit и несущая операционная система кэшируют предыдущие данные и показывают их – в этом случае пользователь может увидеть белиберду. Чтобы этого избежать, нужно делать блокировку кэша –  она тоже делается через метатеги.
    <meta http-equiv=’Cache-Control’ content=’no-store, no-cache, must-revalidate’ />
    <meta http-equiv=’Cache-Control’ content=’max-age=0’ />

  4. Использовать в css указание webkit-нотаций. Не забывайте для правил CSS указывать webkit-нотацию. Например, для задания правил тех же анимаций использовать @-webkit-keyframes, а не просто @keyframes.

 

Стандартизируй ЭТО. Инструкция для ленивых: как быстро отлаживать HTML и объединять с 1С

 

https://lh4.googleusercontent.com/pjrRNMv5MZwLBegeMNdL0xxy50C4F3csgS-OJFC1m6b4Szw9TUi8ks84D8RNdXhdQFl5FwsuR5S28qroMTQs4r8oyD2lrsezaHttpY63ZNHi3MdBu0Z2UUkCZq_XoXEs6MxkCRx9W4uVgUU5X01MvC3j3yakZXtn8Njc7DqV7KfX_c7ALDhlg7l6Xc3RVw

 

 

Дам краткую выжимку того, что нужно делать с веб-проектом, когда настанет время компоновать его в конфигурацию 1С. 

  1. Все файлы веб-проекта на стороне конфигурации лучше хранить в макетах в виде двоичных данных. Веб-проект вы должны разработать отдельно от конфигурации и протестировать его как автономный сайт. Но когда вы будете сохранять его в конфигурации, лучше сохранять HTML-страницы, js-файлы, изображения в двоичных макетах. Для игры про птичку я использовал общие макеты, но вы можете засунуть файлы сайта в макеты обработки, документа – как хотите. Главное – хранить в двоичном макете. Это нужно для того, чтобы вы могли вычитать двоичные данные при помощи потоков и загнать сразу в память. Это быстро и удобно

  2. Для замены URL-ссылок на изображения и js-файлы можно использовать «временное хранилище». URL-ссылки следует преобразовать во внутренние ссылки платформы – для этого я использовал механизм временного хранилища. На слайде – кусок кода из игры, где картинка вычитывается из макета, сохраняется в списке значений и помещается во временное хранилище, чтобы получить новую ссылку. Сюда же передается исходная ссылка – как она обозначена у вас на странице. Зачем это нужно – сейчас покажу.

 

https://lh3.googleusercontent.com/6ZBbEiaobnwhSlVEYvrN76wv4trABNJV5rYgWzpqfcMQDavvHjd9ych5reo7hDEcrL5Dzdrexb89xmxrF-38EDZkuD2pesJAEyqLAIDDU_5ETj3qd-cVW-zZr33fydRpiO1U7AuBPF8OaD6VdHx_O6s03k03mDdqVV0gM1jBil7xLHGrpSIPS2O8exzyvw

 

 

3. При работе с HTML-кодом на стороне 1С лучше всего оперировать с ним как со строкой и использовать «СтрЗаменить()». Слева на слайде показан код, который получает содержимое общего макета в виде строки. Он открывает поток двоичных данных для чтения и получает строку, с которой дальше уже можно оперировать обычными строковыми функциями платформы, например, СтрЗаменить()

А справа показано, как обрабатывается список значений для изображений на странице. Вы просто делаете «СтрЗаменить()», и старый URL меняется на внутреннюю ссылку. Этот подход позволит вам компоновать HTML-страницу в конфигурации сразу без преобразования. Разработали и загрузили в двоичные макеты конфигурации – а дальше обработайте HTML-код по аналогии, алгоритм вам доступен.

 

https://lh3.googleusercontent.com/0rVlfpN-WJA4Tew6e1WGTBdwrS9OBADd6L5vShW_XRY1irn-BaSirct3b7H6S8ITrvnRTF787vP5bJESKR7zoaZkI1neDTPy-BwkAPWmMf3fEdWXRcZY5JzsM6AiuzSSKv7AlWk_ApKSmsSc6t5xslujkrfGYWDVs213pdE4SHXkHiuGHhPKDn7K4yzOrg

 

4. Не забывайте указывать webkit-нотацию для HTML-анимаций. Здесь на слайде я показал, как с помощью СтрЗаменить() заменить @keyframes на @-webkit-keyframes.

 

Обработка событий страницы в ПолеHTMLДокумента в коде модуля формы 1С

 

https://lh4.googleusercontent.com/jHcoWA8Ero0nYYgHbIAHSXLt62SsvpXFdJllXdBYa7PZKYXuKrRl-v5tKlqdd_gt4hLQUMfg20b_1Rf6tqeFU5Cf9JWNkuZWgwG7FZDgqeJ-aGIhXG9MJgXlx4Z6XU-mpaOhQl7_B_Vra_VoAWBnv-e7f6wKr6CEQ1sS09WDHdBUYYJzx2qdk_K79X7J8w

 

Обработка событий – самая больная и противоречивая тема. Здесь придется со многим мириться и соглашаться. Я привел несколько стратегий, которые помогут вам обработать общение между Web и 1С.

  1. Обработка события ПриНажатии() элемента ПолеHTMLДокумента – казалось бы, это событие самое главное, но, к сожалению, оно сейчас нерабочее. Очень жду, когда это пофиксят. Почему-то в поздних версиях платформы событие ПриНажатии() стало странно работать, поэтому вместо него приходится посылать страницу в постбэк (применять опрос HTML кода через таймер). Ранее в данных события ПриНажатии() можно было получить href ссылки, на которую кликнул пользователь. На стороне приложения в эту ссылку вы могли передавать различные параметры, чтобы понять, на какую кнопку пользователь тыкнул, или что он сделал. Это быстрая обратная связь.

 

https://lh3.googleusercontent.com/JJVB1n_VaY6CnaCWdylmoPnsX6EFrT2Uty059WgcP9vCJLTxj2QrNW3oPrs-2saqNZzEpDTI7Hh2IqsMp74vsKQyHhOd7drpDt2jfA943XRl805fqcEQ29PcFUhcSIwGw0C0Cc19QKr8r1122MM3WxQEN5fZE6nBvWeY5EElEBw6-9j9rwZoXBK9WwIW2A

 

2. Асинхронный обмен данными через невидимые HTML-поля. При этой стратегии мы на уровне HTML создаем невидимые div-ы – у них в стиле установлено значение “display: none”. Это – хранилище. Движок JavaScript сохраняет в этом хранилище данные: очки, жизни, состояние игры. А на уровне 1С эта информация вычитывается через контекст браузера (свойство defaultView объекта Документ элемента ПолеHTMLДокумента).

Я это обернул в геттеры и сеттеры на JavaScript. Получается офигенная оболочка – вы не дергаете с бэкенда конкретное поле div, а вызываете специальный метод, который обращается к нужному вам полю фронтенда и быстро возвращает его данные тогда, когда вам надо.

 

https://lh3.googleusercontent.com/P-8f088wpoXuBKJ6chEvPYYg8bikf7mUMrn3FPWvTKjfCbCTT7WuAXANMVllrfzJegt6eBUJ8lDPsVve0C1KaK_AK0JzyvnfUY5eWXtPPqZb_d26Rngvdk95XrDcvN2JGmSEVtcm4xVcqdhWl-JfpN0Bv8qHPUfNqiXo7J4RPivXTwL0LeTut44NNIcA-g

 

3. Опрос фронтенда с бэкенда по таймеру. Эта стратегия работает на всех платформах – я проверял. Это когда периодически бэкенд обращается к HTML-коду фронтенда и забирает оттуда данные.  Именно такой подход в сочетании с предыдущей стратегией я использовал при разработке игры. 

Обмен между бэкендом и фронтендом осуществляется быстро (полсекунды), и человек его не замечает. Для устройства это может быть нагружено, но в некоторых случаях этим можно пренебречь.

 

Инструменты разработки

 

https://lh4.googleusercontent.com/2517fS99syLS0ETQFCYFqvYNih7KBMSGSxavIJHOodMEvRc_CPc439uB-dcgz7V4Xe4yCdgy4SI141hBKQ1nF3Pw5H4YeUHEwYCNZB2JrrquDgzU33RFkOxysxYUlxcsWQSkwUqlZxEwXlyt66pMex57ihV5jXLTTzFkWJhnesns1zkj8i8d61GllS6mRg

 

Когда вы будете делать Web-часть, которую потом встроите в конфигурацию, вам придется использовать какие-то инструменты. Я рекомендую эти:

  • PhpStorm – это платная IDE, но у нее хорошо сделан интеллисенс (механизм автоподстановки). В нем есть встроенные механизмы тестирования JavaScript, CSS и HTML во всех браузерах, которые стоят в операционной системе. Очень удобно.

  • Visual Studio Code – это бесплатная IDE от Майкрософт. Можно накачать плагинов из интернета, большое комьюнити поможет быстро освоиться. Особенно удобно использовать на Macintosh;

  • Notepad++ – это бесплатный редактор с подсветкой.

 

https://lh4.googleusercontent.com/f5BHbHLSC5ua84HW1F_7Ts_J4uLflM2eaddNnPD6-h90BiCJ3_UZOrbnYIpRgNDzx7fasmmBMVvkn90wj9m6IZh9V51LQd-3ZjhdoqRDw_DFK9fcGhs-YiyQIS37Zb4O01J9gmE4nCeCy5oTY-Mr2Q6dfwsCDgd9fhcxEudJF_6xarZgXIK9GCta5TehMA

Для программиста очень важно научиться мыслить абстрактно – условно говоря, рисовать блок-схемы в голове. 

Язык программирования – это инструмент, при помощи которых вы свои блок-схемы реализуете. Используя абстрактное мышление, вы сможете реализовывать свои идеи на любой платформе.

  • https://jscompress.com/ – веб-сервис, который упаковывает JavaScript. Он может уменьшить его в 2-3 раза, сохраняя его работоспособность, и тогда JavaScript работает быстрее.

  • https://www.love2d.org/ – игровой движок для старта разработки 2D-игр. Он не касается разработки гибридных приложений, но поможет понять, как строится двухмерная игра. Если вам захочется попробовать себя в геймдеве, то я настоятельно рекомендую его изучить.

  • https://gdevelop.io/ – игровой движок на JavaScript, тоже может быть полезен.

  • https://melonjs.org/ – тоже игровой движок, который написан на JavaScript и HTML5. На нем есть много видеоуроков и теоретически он может хорошо вставиться в платформу 1С.

 

Примеры игр и приложений

 

https://lh5.googleusercontent.com/TfAEkYE6oxzRhmNC-ROd3o2je5EgzDkYAjayQ0EkBM9fLEgn4X3EQ94KUWHEYA0bWKtHTbV3ay3xGmoJoNIjInFSdkS8bqhr5ejjzVWmBFjMzJgBkmKxlqY6ED-cfghgRiluTRZr3yNJe4OiY3Yfq2OuppBf4exc-o8Nv5ZSr_MWMo2M22qtI3SQl7QQ7Q

 

Какие приложения можно делать с применением гибридных технологий web и 1С? Здесь вас должно разрывать от возможностей. 

Хотите игры? Вот вам игры! 

  • Викиум для тренировки мозга и развития мышления – вы такое можете сделать уже сейчас. 

  • Всякие раскраски и обучалки для детей – тоже вам доступны. 

  • Приложения для изучения языков.

В таких приложениях главное – контент и вы его можете обернуть при помощи мобильной платформы 1С и Web в красивое приложение. Это все вы можете сделать сейчас.

 

https://lh4.googleusercontent.com/X-jR28l3ryS-qh9jpN9TbUXYvb2ihlM9Vm121A1xwSPe6L36vJSgtcZgujTxXpM4xPfCFNHseDpOHX2cu7cxdYr2ff9RXb96H-a1zBvpiwef7h_Xx0akgYOmesV88LZfh4E1aCzhyLIFvukyKU1Lw3DqFcsJFp_Qw-ni_i_fCcNbV3p6kK5OtIewJRNRaw

 

Приложения-спутники и приложения, которые помогают человеку. 

  • Школа инсульта – для тех, кто пережил инсульт и где показывают, какие упражнения нужно делать для восстановления. 

  • Общение с детьми аутистами – это тоже важная область, куда мало кто суется. 

  • Тренажер для дыхания. 

Только подумайте – у вас жизнь перевернется, если благодарный пользователь напишет в комментариях «спасибо». А инструмент, чтобы разработать эту игру – уже есть, и это мобильная платформа 1С.

 

Домашнее задание

 

https://lh5.googleusercontent.com/_AWztIDFWhIngQYwDnMFG68kqblKUoeFyHUHcFipSFyxzi_ys2M8sueJhJJsEu9kn_gVfsYi4mIyFVJ1YN0rykQPLazmC17juxbu_DasMnEM52fkaVVtrrJjtg87WaUejoxJPSTcKz0uMIaQE6I58_GXhT1jkUJSdlHGHQEC1974c1kSgCOpY0bc_iKJ4A

 

Когда вы скачаете исходники, вот что вам нужно сделать. 

  1. Добавить сбор птичкой монет;

  2. Добавить запись информации о заработанных очках и состоянии игрока в базу данных уже средствами платформы 1С

  3. Добавить отображение графика прогресса игрока, используя интерфейс мобильной платформы.

1С и Web – это всего лишь технологии. Они могут меняться, исчезать, а ваша задача – учиться расширять свой кругозор и свое мышление. Тогда вы действительно станете настоящим ценным активом любой компании.

 

*************

Данная статья написана по итогам доклада (видео), прочитанного на конференции Infostart Event 2021 Post-Apocalypse.

 

30 мая - 1 июня 2024 года состоится конференция Анализ & Управление в ИТ-проектах, на которой прозвучит 130+ докладов.

Темы конференции:

  • Программная инженерия.
  • Инструментарий аналитика.
  • Решения 1С: архитектура, учет и кейсы автоматизации на 1С.
  • Управление проектом.
  • Управление продуктом.
  • Soft skills, управление командой проекта.

Конференция для аналитиков и руководителей проектов, а также других специалистов из мира 1С, которые занимаются системным и бизнес-анализом, работают с требованиями, управляют проектами и продуктами!

Подробнее о конференции.

 


См. также

"Штрихкод-информер" - мобильный ТСД и прайс-чекер в смартфоне

Мобильная разработка Сканер штрих-кода Терминал сбора данных Управляемые формы Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

Сбор заказов, инвентаризация, проверка ценников, просмотр полной информации об остатках и ценах со смартфона Онлайн. Отправка данных со смартфона выполняется либо напрямую в открытую форму документа, отсканировав QR-код, либо в общую корзину учетной системы, не подходя к компьютеру. Кассир или оператор сможет просмотреть список присланных данных и загрузить в любую форму, поддерживающую работу с ТСД. Для работы с мобильным приложением требуется опубликовать HTTP-сервис из поставляемого расширения.

2880 руб.

03.12.2018    54604    137    102    

161

SALE! 25%

Что нам стоит бота построить? Нарисуем - будет жить! Графический конструктор телеграм-ботов/Telegram

Мобильная разработка Мессенджеры и боты Платформа 1С v8.3 Платные (руб)

Теперь создать telegram-бота - элементарно. Достаточно просто нарисовать блок-схему телеграм-бота, и он сразу заработает. Это возможно при использовании Графического конструктора телеграм-ботов. Это единственный конструктор ботов для telegram, чье качество и функционал подтверждены фирмой 1С, есть сертификат 1С:Совместимо. Расширение в интерактивном режиме, с помощью блок-схем, позволяет с минимальными трудозатратами создать телеграм-ботов в любой конфигурации, работающей на платформе «1С:Предприятие 8.3».

13200 9900 руб.

27.12.2021    33276    80    157    

174

"Мобильный ТСД" - инвентаризация и сбор штрихкодов для iOS и Android

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Платформа 1С v8.3 Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Розничная и сетевая торговля (FMCG) Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Простой мобильный терминал сбора данных для смартфонов на iOS и Android, не требующий сложных настроек и установки дополнительных программ. Обмен между Вашей 1С и мобильным приложением осуществляется через облачный сервис и расширение конфигурации. Работает с конфигурациями УТ 11, ERP, КА2, Розница 2, Розница 3, УНФ 1.6, УНФ 3.0. Полнофункциональный демо-доступ для своей конфигурации можно запросить в настройках мобильного приложения - все необходимое придет на почту автоматически.

2000 руб.

22.04.2019    91939    511    186    

293

Магазин 15 - приемка товара по штрихкодам или инвентаризация в торговом зале

Логистика, склад и ТМЦ Мобильная разработка Платформа 1С v8.3 1С:Комплексная автоматизация 1.х 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Розница 3.0 Розничная и сетевая торговля (FMCG) Россия Платные (руб)

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

12950 руб.

30.05.2023    3387    2    0    

4

Работа с графикой в браузере (SimpleWEB). Векторный редактор

Мобильная разработка WEB-интеграция Мобильная платформа Абонемент ($m)

В SimpleWEB добавились средства для работы с графикой и отслеживание событий мыши, в онлайн редактор https://seditor.ru:1555/ добавился «Векторный редактор» на этом API. Теперь можно нарисовать схемы складов на ПК, сделать карты (*.sug-файлы) для мобильной платформы SimpleUI, выводить данные из 1С в графическом виде. Таким образом, API для работы с векторными файлами теперь есть и в веб- и в мобильной платформе, а также средства для создания и редактирования векторных файлов есть тоже в обеих платформах.

1 стартмани

20.03.2024    1465    0    informa1555    1    

39

Зачем нам 1С:Элемент

Мобильная разработка Языки и среды Бесплатно (free)

Flutter может быть использован с 1С:Предприятием для разработки кроссплатформенных мобильных приложений, обеспечивая единый интерфейс и функциональность на устройствах под управлением iOS и Android. Это позволяет создавать приложения с высокой производительностью благодаря использованию собственного движка рендеринга Flutter. Интеграция Flutter с 1С:Предприятием позволяет создавать мобильные приложения любого уровня сложности, интегрировать их в корпоративные информационные системы, а также реализовывать бизнес-логику

19.03.2024    6827    ROk_dev    56    

37

JavaScript в Simple

Мобильная разработка Бесплатно (free)

В SimpleUI и SimpleWEB, наряду с обработчиками на python и онлайн (1С и т.д.) добавляется интерпретатор JavaScript. В андроид платформе он скорее играет на поле python, т.к. является оффлайновым решением для самостоятельной обработки и расширяет аудиторию разработчиков для разработки самостоятельных решений. Дополнение к основной статье https://infostart.ru/1c/tools/1153616/

12.02.2024    1626    informa1555    0    

25
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. alexey_kurdyukov 155 15.12.22 13:53 Сейчас в теме
Но это же нечестно, это просто игра на JavaScript
maksa2005; avbolshakov; hairman; user1224429; kser87; serverstar; Lemmonbri; rabid_otter; CSiER; starik-2005; +10 Ответить
2. starik-2005 3033 15.12.22 14:25 Сейчас в теме
Ну ежели на странице нет ничего, кроме хтмл, джаваскрипт и цсс, то зачем там этот желтый контейнер для поля хтмл-документа? Есть же вебапп.
smit1c; maksa2005; avbolshakov; mrChOP93; elcoan; user1224429; papami; dsdred; kser87; serverstar; van_za; Lemmonbri; rabid_otter; CSiER; +14 Ответить
6. пользователь 27.12.22 09:51
Сообщение было скрыто модератором.
...
3. coollerinc 185 15.12.22 15:18 Сейчас в теме
Вообще это все костыли из за ограниченности. Хорошо, что хоть такая возможность есть, как HTML интерфейс. Но если реально хочется сделать мобильное приложение, то лучше использовать соответствующую среду разработки. 1с это все же бизнес-инструмент, а не приложения для конечных пользователей. Обычный юзер, скорее удалит приложение, пока запустится 1с.
avbolshakov; mrChOP93; user1224429; smit1c; +4 Ответить
4. Vasvas05 22 15.12.22 15:41 Сейчас в теме
5. serverstar 62 15.12.22 17:43 Сейчас в теме
Ух ты, я даже и не знала, что из этой темы можно целый доклад запилить ))
Вот мой вариант игры FlappyBird. У меня идет просто внешней обработкой, а не конфой. Ну и нет подсчета монеток

https://infostart.ru/public/1673085/
VitaliyCeban; dsdred; +2 Ответить
Оставьте свое сообщение