Клиент, сервер и их взаимодействие, разработка веб и мобильных приложений, Лебедюк Эдуард / Client & server overview & communication between them, how to develop mobile apps based on existing webapp, Eduard Lebedyuk

1. Разработка мобильного
и веб-интерфейса для
InterSystems Caché
Лебедюк Эдуард

2. • Сервер
• Клиент-серверное взаимодействие
• Клиент
План

3. Сервер
Организация API взаимодействия с данными

4. Организация API
Данные
Терминальное API
Web API
Клиент

5. • Взаимодействие с данными
• Данные не должны изменяться иначе, чем через это API
• Возвращают объекты или статус
• Не пишут на устройство
Особенности
Терминальное API

6. • Преобразуют входящий запрос в форму, понимаемую терминальным API
• Вызывают методы терминального API
• Отправка результата выполнения терминального API клиенту
• Не взаимодействуют с данными напрямую
Особенности
Web API

7. • Терминальное API является основой логики приложения
• Функция Web API – преобразование запросов клиента в форму понятную
терминальному API и возврат клиенту результатов исполнения запроса
• Преимущества этого подхода:
– API выполняющие разные функции максимально разделены
– Возможна отладка вне веб-контекста
Преимущества
Разделение API

8. Клиент-серверное взаимодействие
REST, WebSockets, JSON

9. • Серверной генерации статического HTML
О чём не будем говорить
План
• REST
• WebSockets
• JSON
О чём будем говорить

10. • Стиль архитектуры программного обеспечения для распределенных систем,
таких как World Wide Web
• Как правило используется для построения веб-служб
• Любые данные однозначно определяется URL – это значит, что URL по сути
является первичным ключом для единицы данных.
– https://server:80/webapp/book/:bookid
REST

11.  Разделение клиента и сервера
 Независимость от состояния (stateless)
 Кэшируемая и многоуровневая архитектура
 Единый интерфейс
 Все запросы к RESTful web API состоят из корневого URL приложения плюс
частные подзапросы
• CRUD (Create , Read, Update, Delete) через HTTP
Принципы
REST

12.  Независимость от языка/фреймворка/платформы
 Клиентs на Java, JS, .Net и т.д.
 Легкость разработки
 Проще чем SOAP
 Нет необходимости в специальных инструментах
 Соответствует дизайну и принципам Web
 Нет необходимости в дополнительных сообщениях
Преимущества
REST

13. • Стандартная реализация – наследуется от %CSP.REST
• Дополнения – на https://github.com/intersystems-ru/REST
– Поддержка русского языка (любой не-латиницы)
– Полная поддержка JSON
– Валидация запросов
– Поддержка CORS
– Дополнительная поддержка сессий
– Макросы отладки ($$$Debug, $$$Public и т.д.)
Реализация
REST

14. • По сути – соответствие запрашиваемых URL методам Caché
• Стандартный вид пути:
<Route
Url="/path/:param1/:param2"
Method="GET"
Call=“Package.Class:ClassMethod"
/>
• ClassMethod – любой метод класса Caché
REST

15. • Расширения для браузера
• Перехватывающий прокси-сервер
• Анализатор трафика
Отладка
REST
• Использовать curl
• Использовать wget
• Использовать cli инструменты
Не надо

16. • Протокол полнодуплексной связи поверх TCP-соединения, предназначенный для
обмена сообщениями между браузером и веб-сервером в режиме реального
времени
• Устанавливается канал связи между клиентом и сервером, по которому
осуществляется двустороннее взаимодействие
• Не является заменой REST (и наоборот), дополняют друг друга
• В Caché – наследуется от %CSP.WebSocket
WebSockets

17. • Chrome Developer Tools
• Перехватывающий прокси-сервер
Отладка
WebSockets

18.  Наиболее популярный способ передачи данных при работе в REST приложениях
является JSON.
 За счёт своей читабельности и удобству обработки на клиенте, по сравнению
с XML, формат JSON может быть более подходящим для представления сложных
данных.
Формат общения клиента и сервера
JSON
{
"firstName": "Иван",
"lastName": "Иванов",
"address":
{
"street": "Арбузная 177. д 3.",
"city": "Новосибирск",
"postalCode": 101101
},
"phoneNumbers": [ "812 123-1234", "916 123-4567" ]
}

19. • Все JavaScript фреймворки поддерживают json
• Поддержка JSON в Caché начиная с 2014.1
• Начиная 2016.1 поддержка JSON переведена в ядро
• Скорость работы с JSON не хуже чем в node,js
JavaScript Object Notation
JSON

20. Организация приложения
JSON
REST
WebSockets
COS
Extends %PersistentДанные
Терминальное API
Web API
Клиент

21. Клиент (веб-приложение)
Составляющие, мобильная разработка, отладка

22. • Современное веб-приложение
• Отладка
• Построение мобильных приложений
План

23. • CSS фреймворк
• JS фреймворк
• HTML, JS, CSS код приложения
Основа
Современное веб-приложение

24. • Набор готовых компонентов
• Предоставляют дизайн-шаблоны
• Обеспечивают отзывчивость интерфейса
CSS фреймворк

25. • Примеры (Twitter Bootstrap, Material Design Lite)
CSS фреймворки

26. • Упрощение работы с JavaScript (jQuery)
• Работа с DOM (jQuery, AngularJS)
• Получение/передача данных
• Реализация сложных моделей поведения
• Поддержка архитектуры приложения
– MVC (AngularJS, Backbone.js, React)
– MVVM (Kendo UI, Knockoutjs)
– MVP (Ext JS)
Функции
JS фреймворк

27. MVC
-

28. • Консоль браузера
– Chrome Developer Tools
• Фреймворк-специфичные отладчики
– AngularJS Batarang
– React Developer Tools
Отладка веб-приложений

29. • Идея!
– Берём готовое веб приложение
– На его основе генерируем мобильное приложение-браузер с локальной копией сайта
– Предоставляем доступ к своему API, абстрагирующему различные API мобильных
операционных систем
• Преимущества
– Время разработки (в случае современного веб-приложения) стремится к нулю
– Единство кодовой базы
– Не требуется знание JAVA, Objective C, .Net
• Примеры
– Phonegap
– Sencha Touch
– …
Мобильное приложение на основе веб-приложения

30. • Набор API для разработки мобильных приложений
• В сочетании с фреймворками для разработки интерфейсов (JQuery Mobile, Dojo,
Angular Mobile UI), позволяет создавать приложения используя лишь HTML, CSS и
Javascript
• Разработчик получает доступ к родным функциям устройства (камера,
акселерометр и т.д.) через JavaScript методы
Cordova / Phonegap

31. Amazon-FireOS
Android
BlackBerry
FirefoxOS
iOS
Ubuntu
Доступные платформы
Windows
WP8
Bada
Symbian
WebOS
Tizen

32. Для основной разработки:
 Node.js (npm)
 Git client
Для компиляции под Android:
 Android SDK tools
 SDK build-tools, SDK platform-tools, AVD
Набор разработчика

33. DeepSee Mobile cAdmin
Пример мобильного приложения

34. Конец