gifts2017

Быстрое прототипирование веб и мобильных приложений

Опубликовал Антон Безруков (antonbezrukov) в раздел Программирование - Практика программирования

В статье я хочу рассказать о быстром прототипировании мобильных веб-приложений, а также про их интеграцию с 1С:Предприятием. Сразу оговорюсь, что я ничего не буду говорить про мобильную платформу 1С, я буду касаться только прототипирования гибридных приложений (нативных приложений, использующих веб-технологии) и непосредственно веб-приложений. Данная статья написана по материалам доклада, прочитанного автором на Конференции Инфостарта IE 2014 29-31 октября 2014 года

Что собой представляет прототипирование?

Прототипирование – это процесс, при котором мы получаем некий прототип продукта, сервиса. Я вообще считаю, что это один из ключевых этапов в создании продукта, в создании какого-то сервиса, программы. Почему?

  • Потому что зачастую у нас нет четкого технического задания: заказчик не всегда знает, что он хочет. Тем более, если вам предстоит сделать какой-то продукт, которого в том виде, как вы его хотите сделать, ранее не существовало. Поэтому, чтобы получить ответ, насколько правильно и работоспособно то, что вы запланировали, вам нужно быстро проверить свои идеи, мысли, свои подходы путем реализации прототипа. И работающий прототип в этом случае может спасти жизнь – конечно, не разработчику, но проекту точно. Например, какая-то неудачная реализация решения в плане интерфейса или архитектурного подхода может мало того, что вылиться в достаточно крупные вложения по времени и по деньгам, – она потребует больших эмоциональных вложений, потому что при работе над проектами, которые в итоге получаются неудачными, настроение в команде сильно страдает. А в случае быстрого создания прототипа мы получаем возможность вовремя скорректировать свое решение, если что-то идет не так, либо, наоборот, понять и убедиться в том, что действительно все сделано как надо и мы на правильном пути.
  • Плюс к этому прототип дает нам возможность показать продукт заказчику, например, для получения каких-то первоначальных инвестиций для работы над проектом. Как говорится, лучше один раз увидеть, чем 100 раз услышать. Показали заказчику, как это работает – мы сюда щелкаем, оно открывается и т.д. Это здорово, это мотивирует – и заказчика, и саму команду, которая разрабатывает.

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

Классификация мобильных приложений

Давайте коснемся терминологии мобильных приложений. Какими вообще бывают мобильные приложения с технической точки зрения?

Условно – есть три категории: нативные, гибридные и веб.

  • Нативные приложения – это приложения, которые компилируются в установочный файл, а вы их потом устанавливаете из AppStore, GooglePlay и т.д.
    • Применительно к Андроид, например, это приложения, которые написаны на языке Java, на C++, на Go скоро можно будет писать.
    • Применительно к iOs, это приложения, написанные на Objective-C или на Swift.
    • Есть еще другой вариант – это веб-приложения. Это – то же самое, что и сайт. Вы открываете в браузере страницу сайта, и эта страница запускает для вас специальное приложение, организованное определенным образом. Это так называемое SPA-приложение (Single Page Application) - одностраничное приложение, которое написано на JavaScript, с интерфейсом, реализованным посредством HTML и CSS. На текущий момент, за счет появления HTML5, мобильные веб-приложения уже достаточно многое могут. Даже те вещи, которые мы ранее могли реализовать только в нативных приложениях, мы можем сейчас делать и в веб-приложениях. Например, делать снимки, работать с геолокацией и т.д.
    • И, наконец, гибридные приложения. Это, по сути, нативное приложение, внутрь которого упаковано веб-приложение. В плане использования ресурсов мобильных устройств они являются более гибкими, чем просто веб-приложения, потому что одновременно с возможностями веб-приложений вы при таком подходе можете дополнительно пользоваться какими-то функциями платформы (Android, допустим).

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

Почему для быстрого прототипирования особенно подходит технология веб-приложений?

  • Во-первых, приложения получаются кроссплатформенными. Они работают везде, где есть браузер. И на iOs, и на Android, и на Windows Phone, и на Blackberry – где угодно. Можно даже на обычном десктопе их запустить, будут замечательно работать.
  • Второе преимущество – такие приложения не требуют установки. Это очень здорово и в плане разработки, и в плане тестирования, и в плане того, как при разработке показать их конечным пользователям. В частности, такой подход помогает ускорить саму разработку за счет того, что внесли изменения и тут же проверили. Причем проверили, даже не подключая специально для этого телефон к компьютеру. Просто сделали изменения, пошли на обед, за столом достали смартфон, попробовали какую-то функцию. Очень удобно. При использовании веб-технологий у вас к тому же, за счет того что не требуется установка, сокращаются и расходы на обслуживание уже готового продукта.
  • Еще один пункт – это простые инструменты. Нужны только Java Script, HTML и CSS. Плюс к этому, существует много готовых библиотек (фреймворков), которые обеспечивают доступ к дополнительным «плюшкам» при работе с веб-технологиями, позволяя вам разрабатывать еще быстрее.

Конечная цель быстрого прототипирования

Про прототипирование каких приложений я сейчас говорю?

Я не говорю о том, чтобы сделать новый Skype или Photoshop, хотя все это сейчас в веб тоже работает. Я сейчас в первую очередь говорю о приложениях для массового использования, главная ценность которых заключается в том, что они производят какие-то манипуляции с базой 1С. Это может быть, например:

  • Специальное веб-приложение для мобильной торговли, чтобы торговый представитель мог через веб-интерфейс сбрасывать заказы в базу 1С.
  • Или, допустим, управляющая компания, у которой есть жилой комплекс на 1000 квартир, хочет предоставить для своих жильцов личный кабинет, чтобы они могли зайти и посмотреть свою задолженность, распечатать какие-нибудь свои предыдущие или нынешние платежки…  Для такой задачи тоже можно использовать веб-приложение, которое будет подтягивать данные из базы 1С.

Структура работы веб-приложения.
Специальный вариант для прототипирования

Упрощенная структура работы веб-приложений выглядит примерно так, как на этом слайде:

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

Однако для быстрого прототипирования эта структура не очень хорошо подходит, потому что этот сервис все портит. У вас, по факту, появляется еще один элемент, который нужно продумывать, прорабатывать, учитывая сложность обмена данными между предприятием и сервисом. Понятно, что если вы хотите что-то поправить на клиенте, вы это быстро поправите. Но если вам нужно передать какие-то дополнительные данные, то вам приходится дополнительно дорабатывать сам сервис, а это может занять очень продолжительное время. На этапе создания прототипа эти усилия могут оказаться необоснованными, потому что заказчик в любой момент может изменить свое решение. Сначала сказать: «да, нам вот это надо», а потом «без этого можно было и обойтись». Или вы сами посмотрите и скажете: «как-то мы очень сложно все делаем, надо переделать, чтобы было проще».

Отсюда вопрос – можно ли как-то избавиться от этого сервиса? Конечно, можно. Причем для этого есть несколько способов. Как минимум, последняя версия платформы 1С:Предприятие (8.3.5) позволяет использовать доступ по REST-API, что позволяет обращаться к 1С:Предприятию, в принципе, сразу с клиентов, из браузера.

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

  • Например, если у вас достаточно много клиентов (не 50-100, а 1000 или 2000), то откуда взять столько лицензий для доступа к базе данных напрямую (без сервиса)? Это проблема.
  • Что делать с масштабированием? Непонятно.
  • Если очередь нужно поставить? Тоже большая проблема.

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

Возвращаясь к прототипу:

  • Структура, использующая промежуточный сервис, очень удобна для запуска в Production.
  • Но на этапе прототипирования использовать промежуточный сервис неудобно. Лучше напрямую обращаться как из клиента в 1С, так и, соответственно, из 1С в клиент.

Но каким образом? Когда я задумался над этим вопросом, мне пришла в голову одна мысль, которая в последующем воплотилась в некий инструмент, о котором я собираюсь вам рассказать.

Инструментарий и конкретный пример использования быстрого прототипирования веб-приложений

В состав этого инструмента входит:

  • Обработка на 1С, функция которой заключается в том, чтобы обрабатывать удаленные вызовы процедур 1С (RPC), поступающие с клиента, которым является браузер (или мобильное приложение – гибридное или нативное).
  • Также используется промежуточный сервер на node.js, который является буфером, и нужен для того, чтобы передавать вызываемые обработкой запросы с клиента на сервер.
  • И, соответственно, само приложение, представляющее собой обычный файл html

Я продемонстрирую пример.

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

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

Это полный код всего клиента (всего html-файла). С левой стороны – шаблон того, как все это будет выглядеть. Справа – сам код, который вызывает эти процедуры и вставляет эти данные в шаблон, как нужно. Код достаточно простой. Используется библиотека knockout.js. 

И вот что получается в результате – список складов и список товаров на складе.

Используется twitter bootstrap, это позволяет получить адаптивный интерфейс, и если браузер свернуть, у вас тоже получится удобоваримо. Никаких дополнительных настроек под экраны я специально не вносил.

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

Используя такой подход, вы можете очень быстро создавать прототипы приложений, экономя на этом массу усилий и ресурсов. Причем, этот подход вы можете использовать не только с помощью инструмента, который я предлагаю, но и с помощью непосредственно REST-API, который есть у новой платформы 1С.
Собственно, спасибо за внимание. На слайде есть ссылка на инструментарий. Его можно скачать, установить – все очень просто.

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

Приглашаем вас на новую конференцию INFOSTART EVENT 2016 DEVELOPER.

См. также

Подписаться Добавить вознаграждение

Комментарии

1. ivanov660 ivanov660 (ivanov660) 18.03.15 14:14
1. Так и не понял что из себя представляет промежуточный блок "сервис".
2. Порадовала фраза
промежуточный сервер на node.js
, обычно в качестве сервера используется приложение Apache или IIS, а это просто скрипт.
3. Т.е. Вы предлагаете установить сервер в полном варианте, создать вебсайт и использовать набор скриптов для взаимодействия с 1С. В такой конструкции нет пула запросов, поэтому реализация будет практически аналогична картинке с которой подключаются все сервисы напрямую к 1С. В упрощенном же задача просто открыть "stand alone" файл по локальной сети видимо.
4. На самом деле работать с ООП JavaScript совсем не просто в отличии от 1С, а в большинстве фреймворков реализацию необходимо будет допилить. В этом случае рекомендую использовать хотя бы php или perl, что позволит решить вопросы безопасности и реализации заявленного функционала.
2. andy_minsk (andy_minsk) 18.03.15 15:27
Порадовала фраза
промежуточный сервер на node.js
, обычно в качестве сервера используется приложение Apache или IIS, а это просто скрипт.

Node.js - это не совсем скрипт, точнее вообще не скрипт, а платформа, которая может быть и web-сервером в том числе. По мне несколько непривычная после 1С, но весьма популярная в WEB в последнее время.
Согласен с автором в главном - в случае клиентского доступа нужен промежуточный сервис. Методик и средств его построения много, от предложенного Node.js или Wakanda, до BAAS решений типа QuickBlox, Parce. Все определяется задачей.
antonbezrukov; +1 Ответить 1
3. Антон Безруков (antonbezrukov) 18.03.15 16:37
(1) ivanov660,
1) Представьте, что есть связка "1С:УТ" - "Интернет магазин (на базе Битрикс, например)" - "Браузер клиента". В контексте данной публикации "Интернет магазин" это и есть "Сервис".

2) На этот пункт уже ответил (2) andy_minsk. Более подробно можно посмотреть на официальном сайте

3) Если использовать инструментарий, который я предложил, то нет необходимости в установке полноценного веб-сервера и создании сайта. Его можно использовать и в локальной сети и в Интернет. И даже если нужно будет отдавать статические данные (те же index.html и magicrpc.js, например), то это можно будет очень просто добавить.

4) Что касается JavaScript, я согласен, с ООП там пока дела не очень хорошо, но с приходом ES6 ситуация должна улучшиться. Но и 1С не поддерживает полноценный ООП - есть только возможность работы с объектами "унаследованными" от предопределенных платформой.
4. Сергей Филькин (FSerg) 18.03.15 19:34
Хорошо, что появляется все больше и больше статье про использование 1С совместно с какими-то современными web-технологиями.
Спасибо, что поделились!
antonbezrukov; +1 Ответить
5. Антон Безруков (antonbezrukov) 18.03.15 20:25
Если будет интересно, вот ссылка на 13минутное видео, о том как создавался пример, приведенный в публикации.
6. Алексей Бочков (Aleksey.Bochkov) 19.03.15 02:56
(0) Не согласен, что прямой коннект веб-клиента к базе 1С не подходит для массового использования.
На HTTP-сервисах это все прекрасно реализуется. HTTP-соединение как и web-сервис лицензий не требует. А создаваемая нагрузка минимальна даже при полном хостинге контента внутри базы 1С. ИМХО, даже на "очень среднем" сервере вполне смогут комфортно работать сотни пользователей одновременно (если, конечно, в запросах не будет массивных бинарных данных - картинок, файлов и т.д.).

Очень топорный пример тут (с трансфером картинок от мобильных юзеров).
Для авторизации везде вводить имя пользователя user, без пароля.
http://demo.bizzsimple.com/te/ - основная база
http://demo.bizzsimple.com/te/hs/mob/all/ - интерфейс для пользователей телефонов и планшетов на Android и iOS. Продажники делают фото чеков прямо с веб-страницы, добавляют комментарии, сумму, а затем отправляют на проверку менеджеру.
http://demo.bizzsimple.com/te/hs/mng/all/ - аналогичный интерфейс для телефонов и планшетов. Руководители продажников проверяет список документов и утверждает или отклоняет их.

Все шаблоны html и данные при этом хранятся в базе 1С и всегда доступны онлайн.

7. Антон Безруков (antonbezrukov) 19.03.15 11:48
(6) Aleksey.Bochkov,
На HTTP-сервисах это все прекрасно реализуется. HTTP-соединение как и web-сервис лицензий не требует.

А можете поделиться, откуда у такая информация? Все что я в свое время нашел из официальных источников только Ответы на типовые вопросы по лицензированию "1С:Предприятия 8"

59. Организация публикует всем желающим доступ к веб-сервисам, реализованным в "1С:Предприятии 8". Какое количество и каких лицензий необходимо приобрести Организации?

В данном случае на рабочих местах организации осуществляется доступ к информационной базе "1С:Предприятия 8" с использованием веб-сервисов, причем сами веб-сервисы реализуют всего лишь способ доступа к данным "1С:Предприятия 8" и предметом для отдельного лицензирования не являются. В соответствии с Лицензионным Соглашением "1С:Предприятия 8" каждое рабочее место, с которого тем или иным способом осуществляется доступ к данным информационной базы "1С:Предприятия 8", должно быть обеспечено клиентской лицензией. То есть Организации для работы с программами, использующими веб-сервисы, необходимо приобрести клиентские лицензии на такое количество рабочих мест, которое позволит одновременно осуществлять доступ к информационной базе.



58. Организация с помощью продукта "1С:Предприятие 8. Web-расширение" делает веб-витрину для собственной торговой системы, работающей на "1С:Предприятии 8". Предполагается, что к ней одновременно будут подключаться до ста пользователей. Сколько клиентских лицензий должна приобрести Организация для создания веб-витрины?

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


Мне кажется, что проще все же использовать инструменты со свободной лицензией...
8. Алексей Бочков (Aleksey.Bochkov) 19.03.15 12:04
(7)

9.2.3.7. Web-сервис
Для работы Web-сервисов не требуется клиентских лицензий. Однако если информационная база, которая предоставляет Web-сервисы, работает в клиент-серверном варианте, необходимо наличие серверной лицензии для работы сервера «1С:Предприятия».


http://its.1c.ru/db/v83doc#bookmark:adm:TI000000304

Для HTTP-сервисов также справедливо.

Хотя я как-то не задумывался над юридической стороной вопроса.. может быть это только технически лицензии не требуются (платформа не использует их), а юридически они нужны на каждого пользователя?

Что использовать - дело вкуса и опыта конкретного разработчика, а также особенностей конкретного проекта.
Я лишь хотел поспорить с общим утверждением "для массового сервиса не подходит" :).
antonbezrukov; +1 Ответить
9. Антон Безруков (antonbezrukov) 19.03.15 12:11
(6) Aleksey.Bochkov,
Не согласен, что прямой коннект веб-клиента к базе 1С не подходит для массового использования.

Допустим, пишем проект "Корпоративные туду-листы" (по мотивам Basecamp, например). И для каждой компании, хотим иметь отдельную базу данных (например, из соображений безопасности и еще, если нагрузка и/или размер отдельных БД будет большой, чтобы можно было базы клиентов разносить по разным хостам, заодно и резервное копирование можно было бы делать по каждому клиенту отдельно). С прямым коннектом "без костылей", на сколько я понимаю, это сделать не получится?
10. Алексей Бочков (Aleksey.Bochkov) 19.03.15 12:18
(7) похоже, вы правы.
В партнерской конференции немного противоречивая информация, но, вероятнее всего, юридически 1С требует наличия клиентских лицензий по числу одновременных соединений к web и http-сервисам.
11. Алексей Бочков (Aleksey.Bochkov) 19.03.15 12:27
(9) antonbezrukov,
Да, красиво, наверное не получится.
Тут надо, чтобы клиент изначально отправлял запрос на правильный адрес.
Можно конечно и "гибридную" архитектуру сделать: центральный сервер 1С только авторизует пользователей и выдает им html и скрипты с правильными параметрами, а страницы на клиенте через XMLHttpRequest грузят данные с нужного хоста, или отправляют данные куда надо.
Правда тогда не вижу особой разницы с подходом, описанным вами в статье.

12. Антон Безруков (antonbezrukov) 19.03.15 12:32
(10) Aleksey.Bochkov,
Надеюсь, положение дел с лицензированием в будущем прояснится, пока(и уже долгое время) все очень туманно...
13. Денис (din107) 07.11.15 23:36
Доброе время суток!

Для меня так и осталось загадкой, что из себя представляет промежуточный блок "сервис". Что должно в нём содержаться? Как он пишется? Или может быть ссылку дадите, где можно про это почитать, буду очень признателен.
Для написания сообщения необходимо авторизоваться
Прикрепить файл
Дополнительные параметры ответа