Как построить клиент-серверное приложение
Введение
В этом уроке мы будем учиться тому, как установить коммуникацию между клиентом и сервером, причем клиент – это мобильное Android-приложение, а сервер – это интернет-сервис, хранящий общие для многих клиентов данные и выполняющий их обработку.Примеров таких приложений множество:
- мобильный клиент делает фотосъемку и посылает файлы изображений в общее серверное хранилище, где могут подвергаться обработке и откуда они доступны для других клиентов (инстаграм);
- мобильный клиент делает опрос и результат посылает серверу, где данные опросов интегрируются, обратно посылается статистика ответов (участие в телешоу, исследование рынка) ;
- координаты мобильного клиента отсылаются на сервер, где наносятся на карту, обратно отсылается карта ближайшего окружения с выделенными типами мобильных клиентов и их телефонов (например, - передвижные пункты проката, ларьки, такси, попутчики, друзья, игроки…),
- результаты мобильной игры передаются на сервер для составления рейтинга игроков
- и т.п.
- клиентом является браузер,
- сервер – это веб-сервер,
- для обмена данными используется http-протокол.
Достоинство такого приложения – простота разработки, так как все подробности обмена данными с сервером уже «упакованы» в браузере. Недостатки: низкое быстродействие, ограниченная функциональность.
Поэтому мы рассмотрим здесь, как разработать мобильный клиент, используя «родной» Java. Остальные компоненты системы останутся такими же. Пример информационных потоков в приложении показан на рисунке 1.
Таким образом, в систему входят следующие компоненты:
- клиентский метод, управляющий обработкой пользовательского интерфейса – ввод данных, нажатие кнопок и т.п. (onCreate)
- клиентский метод для обмена информацией с веб-сервером (GetText>),
- серверный скрипт для получения данных от клиента и возврата ответа (httppost.php);
- клиентский метод для отображения полученных данных (showData).
В данном уроке рассмотрим пример приложения «Голосование», в котором пользователь должен ввести регистрационные данные (имя, email) и выбрать один из предложенных вариантов ответа на вопрос. Затем номер выбранного варианта отсылается на сервер, где хранятся счетчики голосов по каждому варианту, а также БД с регистрационными данными пользователей. К нужному счетчику добавляется 1, а пользователь получает сообщение о приеме данных или отказе сервера, а также значения счетчиков. Если пользователь желает посмотреть статистику голосования, значения счетчиков выводятся в виде диаграммы.
Примечание: пример приложения
рассмотрен исключительно в образовательных целях. Не учитываются такие
необходимые для реальной жизни компоненты приложения, которые обеспечивают
безопасность, надежность и др.
Разработка пользовательского интерфейса
Спланируем интерфейс клиентского приложения (рисунок 2):Используем табличный макет из 2-х столбцов. В верхней строке - два элемента TextView для подсказки и вывода результатов. Там будет отображаться ответ пользователя и статистика.
Во 2-ой строке – кнопки для работы с сервером (получить статистику и сохранить данные на сервере).
Третья строка – это вопрос и подсказка к нему (текстовые поля). Далее две строки содержат 4 кнопки для выбора ответа.
Наконец, последние 2 строки содержат подсказки и поля для ввода имени и почтового адреса.
Разработка серверной части
Сервер не просто хранит файлы, но и обрабатывает их:
анализирует полученные от клиента значения, увеличивает счетчики, посылает их
значения клиенту.
В нашем примере все операции будут реализованы на языке PHP.
Все данные будем хранить в базе данных:
-
счетчики голосования в таблице result (code, rating), где – первый
столбец – код ответа, второй – рейтинг ответа (целые числа);
-
список пользователей – в таблице users(name, email).
Алгоритм работы сервера:
1) Вначале проводим разбор http-запроса и записываем в 3 переменные
значения: имя пользователя, почту и номер ответа.
2) Затем пользовательское имя и почту с помощью команды
выборки ищем в базе данных. Если такой пользователь не найден, то добавляем
новую запись в таблицу users.
3) Анализируем код выбранного пользователем ответа codeAnswer:
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.
Здравствуйте!
ОтветитьУдалитьА разработка сайтов https://www.idg.net.ua такого вида у Вас есть? Сколько стоит? Сайт по детским игрушкам сколько стоит?
ОтветитьУдалить