02.06.2015

Мобильный клиент или Контрольная работа 3.

Как построить клиент-серверное приложение

Введение

В этом уроке мы будем учиться тому, как установить коммуникацию между клиентом и сервером, причем клиент – это мобильное Android-приложение, а сервер – это интернет-сервис, хранящий общие для многих клиентов данные и выполняющий их обработку.
Примеров таких приложений множество:
  • мобильный клиент делает фотосъемку и посылает файлы изображений в общее серверное хранилище, где могут подвергаться обработке и откуда они доступны для других клиентов (инстаграм); 
  • мобильный клиент делает опрос и результат посылает серверу, где данные опросов интегрируются, обратно посылается статистика ответов (участие в телешоу, исследование рынка) ; 
  • координаты мобильного клиента отсылаются на сервер, где наносятся на карту, обратно отсылается карта ближайшего  окружения с выделенными типами мобильных клиентов и их телефонов (например, - передвижные пункты проката, ларьки, такси, попутчики, друзья, игроки…), 
  • результаты мобильной игры передаются на сервер для составления рейтинга игроков
  • и т.п.
В простейшем случае для указанных целей можно использовать веб-приложение, где:
- клиентом является браузер, 
- сервер – это веб-сервер,
- для обмена данными используется http-протокол.
Достоинство такого приложения – простота разработки, так как все подробности обмена данными с сервером уже «упакованы» в браузере. Недостатки: низкое быстродействие, ограниченная функциональность.
Поэтому мы рассмотрим здесь, как разработать мобильный клиент, используя «родной» Java.  Остальные компоненты системы останутся такими же. Пример информационных потоков в приложении показан на рисунке 1.
Таким образом, в систему входят следующие компоненты:

  1. клиентский метод, управляющий обработкой пользовательского интерфейса – ввод данных, нажатие кнопок и т.п. (onCreate)
  2. клиентский метод для обмена информацией с веб-сервером (GetText>),
  3. серверный скрипт для получения данных от клиента и возврата ответа (httppost.php);
  4. клиентский метод для отображения полученных данных (showData).
В зависимости от выбранных технологий на клиенте и сервере все компоненты могут быть реализованы совершенно по-разному.
В данном уроке рассмотрим пример приложения «Голосование», в котором пользователь должен ввести регистрационные данные (имя, email) и выбрать один из предложенных вариантов ответа на вопрос. Затем номер выбранного варианта отсылается на сервер, где хранятся счетчики голосов по каждому варианту, а также БД с регистрационными данными пользователей. К нужному счетчику добавляется 1, а пользователь получает сообщение о приеме данных или отказе сервера, а также значения счетчиков. Если пользователь желает посмотреть статистику голосования, значения счетчиков выводятся в виде диаграммы.
Примечание: пример приложения рассмотрен исключительно в образовательных целях. Не учитываются такие необходимые для реальной жизни компоненты приложения, которые обеспечивают безопасность, надежность и др.

Разработка пользовательского интерфейса

Спланируем интерфейс клиентского приложения (рисунок 2):
Используем табличный макет из 2-х столбцов. В верхней строке - два элемента TextView для подсказки и вывода результатов. Там будет отображаться ответ пользователя и статистика.
Во 2-ой строке – кнопки для работы с сервером (получить статистику и сохранить данные на сервере).
Третья строка – это вопрос и подсказка к нему (текстовые поля). Далее две строки содержат 4 кнопки для выбора ответа.
Наконец, последние 2 строки содержат подсказки и поля для ввода имени и почтового адреса.

Разработка серверной части

Сервер не просто хранит файлы, но и обрабатывает их: анализирует полученные от клиента значения, увеличивает счетчики, посылает их значения клиенту.
В нашем примере все операции будут реализованы на языке PHP.
Все данные будем хранить в базе данных:
-      счетчики голосования в таблице result (code, rating), где  – первый столбец – код ответа, второй – рейтинг ответа (целые числа);
-      список пользователей – в таблице users(name, email).
Алгоритм работы сервера:
1) Вначале проводим разбор http-запроса и записываем в 3 переменные значения: имя пользователя, почту и номер ответа.
2) Затем пользовательское имя и почту с помощью команды выборки ищем в базе данных. Если такой пользователь не найден, то добавляем новую запись в таблицу users.
3) Анализируем код выбранного пользователем ответа codeAnswer:
- делаем выборку в переменную ratingValue из таблицы  result: текущее значение счетчика rating при условии code= codeAnswer.
- если таких ответов еще не было в БД (ratingValue = пустое значение), то добавляем в result новую запись (CodeAnswer, 1);
- иначе: в result заменяем значение rating=ratingValue+1 для записи с code= codeAnswer.
4) Читаем все значения таблицы result и формируем результат, возвращаемый в выходной поток.

Отладка и тестирование сервера

Нам нужен веб-сервер.
Во-первых, вы можете установить на домашнем компьютере web-сервер, php и СУБД, например, MySQL. После того, как приложение будет отлажено, перенести серверную часть приложения на хостинг в интернет и провести тестирование в реальных условиях.
Во-вторых, можно сразу найти хостинг с поддержкой php и СУБД, разобраться, как с ним работать и начать отладку в условиях «живого интернета». Например, на сайте  http://www.hostinger.ru всё это есть - и бесплатно.
Есть достоинства и того и другого метода. Выбирайте сами, учитывая, что обучение работе с веб-сервером не входит в рамки данного курса, а для сдачи контрольной работы достаточно продемонстрировать вариант действующего приложения в любом виде.

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

Текст серверной части см. в файле httpgetpost.php Пример кода отладочной веб-страницы приведен в файле index.html

Разработка клиентской части 

Поскольку обмен данными с сервером – длительная операция, то необходимо создать обработчик этой операции, функционирующий в фоновом режиме, чтобы обеспечить доступность элементов пользовательского интерфейса во время обмена данными. В противном случае приложение «зависает» на время работы с сервером, не реагируя на действия пользователя.
В нашем случае клиентская часть содержит методы:
onCreate – определяются переменные для получения данных с интерфейса,
определяются обработчики всех кнопок. Если пользователь не ввел данные в поля или не выбрал ответ – обращение к серверу не выполняется.
GetText –  обмен данными с сервером: формирует текстовую строку для отсылки имен и значений переменных на сервер, посылает данные и выводит ответ, полученный с сервера, в массив из 4-х значений.
ShowData – массив значений счетчиков выводится в виде диаграммы.
Для отладки клиента сначала убедитесь, что интерфейс работает, а также формируется правильный http-запрос (хотя бы выведите его текст в log ). Только потом можно подключаться к серверу.


Архив проекта клиентской части (без метода вывода диаграммы) можно скачать по ссылке здесь. 

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

О контрольной работе 3

Требуется модернизировать ваш проект по работе 2 так, чтобы он мог что-то сохранять на сервере и выводить некую статистику в виде диаграммы. То есть интерфейс у вас уже есть, только добавьте обмен данными с сервером вместо локальной БД. 
Присылаем отчеты на почту или в форум. Завершить все задания нужно до 20.06. 


2 комментария:

  1. А разработка сайтов https://www.idg.net.ua такого вида у Вас есть? Сколько стоит? Сайт по детским игрушкам сколько стоит?

    ОтветитьУдалить