Занятие № 4. Взаимодействие с онлайн-сервисами

Задачи

Изучить свойства и функции компонента Интернет.
Научится получать текстовую информацию от сервера и преобразовывать её в JSON-формат.
Научится обращаться к элементам переменной-словаря по ключу.
Применить компоненты РаспознаватьРечи, Translator и ТекстВРечь для разработки проектов.

Введение

Задача “Математический калькулятор”

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

Попросим наш телефон посчитать производную функции.

Телефон не умеет считать производные.

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

Но чтобы получить ответ от подобного сервиса…

… нужно правильно сформулировать вопрос.

Программный интерфейс программирования

Взаимодействие со всеми готовыми компонентами App Inventor происходит через их прикладной интерфейс программирования (API). Интерфейс компонента определяет то, как мы будем взаимодействовать с ним и описывается разработчиком.

API - интерфейс для взаимодействия одной системы с другой.

Веб-API

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

Правильный запрос на упрощение выражения…

… даёт нам нужный результат.

Ответ от веб-API передаётся по протоколу HTTPS. Протокол определяет набор правил по которым происходит взаимодействие систем. Формат ответа может быть разным: текст, изображение, файл. Мы будем использовать веб-сервисы, возвращающие ответ в формате JSON.

Данные в JSON формате можно представить в виде словаря - есть ключ и значение, которое с ним связано.

HTTP-протокол

Запрос происходит по HTTP-протоколу.
Ответом сервера будет текст в JSON-формате.
Ответ сервера содержит ряд параметров - Заголовков.
В заголовках указывается Тип ответа.
Вместе с ответом от сервера приходит Код статуса: 200, 404, 418, 501 и т.д.

Пример запроса

viewof operation = Inputs.select(["simplify", "derive", "integrate"], {label: "Выберите действие"})
  
viewof func = Inputs.text({label: "Выражение", placeholder:"Введите выражение", value: "x^2+2x"})

viewof realReq = Inputs.checkbox(["Реальный запрос?"])

operation = "simplify"

func = "x^2+2x"

realReq = Array(0) []

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
    return "%" + c.charCodeAt(0).toString(16);
  });
}

data = {
  let result = {}
  const r = await fetch(`https://newton.now.sh/api/v2/${operation}/${fixedEncodeURIComponent(func)}`).then((response) => response)
  result["code"] = r.status
  result["contentType"] = r.headers.get("Content-Type")
  result["json"] = await r.json()

  return result
}

fixedEncodeURIComponent = ƒ(str)

md`Адрес запроса:

https://newton.now.sh/api/v2/${operation}/${realReq.length == 0 ? func : fixedEncodeURIComponent(func)}

Код ответа: *${data.code}*

Тип ответа: *${data.contentType}*

JSON с ответом от API:

~~~json
${JSON.stringify(data.json, null, 4)}
~~~
`

Обращение к веб-API в App Inventor

Чтобы сделать запрос к веб- API используем компонент Интернет.

Событие ПолученТекст срабатывает после того, как от веб-сервиса получен ответ.

Если ответ хранится в формате JSON, то его можно преобразовать в словарь с помощью указанного блока:

Работа со словарями в App Inventor

Нужны блоки из раздела Dictionaries (Словари).

{
    "operation": "simplify",
    "expression": "x^2+2x",
    "result": "x^2 + 2 x"
}

{
    "error": "Unable to perform calculation" 
}

Задание № 1. Магический шар

Перед началом работы, скачайте по ссылке архив с необходимыми изображениями.

Запустите браузер и нажмите комбинацию клавиш ⌃Ctrl + ⇧Shift + N , чтобы открыть приватное окно. Это необходимо для того, чтобы не сохранять ваш Google-аккаунт в браузере.

Перейдите на сайт App Inventor. Нажмите кнопку . Войдите в ваш Google-аккаунт.

Создадим приложение, которое по нажатию на кнопку выдаёт случайное сообщение. Варианты ответов получим через обращение к веб-API по следующему адресу:

https://simple-api-3rug.onrender.com/api/8ball

Ответ от сервера выглядит следующим образом:

{
  "answer":"Хорошие перспективы"
}

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

Для обращения к веб-API используем компонент Интернет (раздел Каналы).

Загрузка ответа займет время. Чтобы показать, что загрузка идёт, используем компонент LinearProgress. Будем показывать его, когда отправлен запрос к серверу и скроем, когда получим ответ.

Создайте новый проект под именем ball8.

Загрузка медиа-ресурсов

Из папки ball8 загрузите в проект файл 8.png:

Настройки проекта

Нажмите кнопку , чтобы открыть настройки приложения. В разделе General (Общие настройки) измените свойство AppName (Название приложения) на текст Магический шар. Это название будет показываться в списке приложений после установки.

Измените свойство Иконка на 8.png.

Нажмите Close, чтобы закрыть окно с настройками проекта.

Проектирование интерфейса

Интерфейс экрана Screen1 содержит следующие компоненты:

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
Screen1	ВыровнятьПоГоризонтали=Центр ВыровнятьПоВертикали=Центр TitleVisible=нет галочки
КнопкаСпросить	Текст=пустая строка Изображение=8.png
Загрузка	Видимый=нет галочки
НадписьОтвет	ЖирныйШрифт=есть галочка РазмерШрифта=24 Текст=Ответ
НадписьJSON	Текст=json
ИнтернетЗапрос	Timeout=50000

Для чего нужно свойство Timeout? (нажмите, чтобы открыть)

Таймаут - это время (в миллисекундах) в течении которого приложение будет ждать ответ от сервера. Если ответ не поступит, соединение закроется. Когда таймаут равен 0, приложение будет бесконечно ожидать ответа.

Программирование компонентов

Перейдите в раздел Блоки.

Составьте следующий скрипт для обработчика нажатия кнопки КнопкаСпросить. Адрес запроса скопируйте тут:

https://simple-api-3rug.onrender.com/api/8ball

Указываем адрес, по которому нужно обратиться за ответом.
Делаем запрос к серверу.
Показываем компонент Загрузка, чтобы показать, что запрос отправлен и мы ожидаем ответ от сервера.

Добавьте обработчик события ПолученТекст компонента ИнтернетЗапрос:

Ответ сервера покажем в компоненте НадписьJSON.

Время тестирования!

Запустите приложение. Нажмите на кнопку и дождитесь ответа от сервера. После загрузки, на экране должен появится текст следующего вида:

{"answer":"Хорошие перспективы"}

Текст ответа выбирается случайно после каждого нажатия на кнопку.

Сейчас приложение получает простую строку, которую нужно преобразовать в словарь. После этого у нас будет возможность получить текст ответа по ключу answer.

Добавьте к скрипту ИнтернетЗапрос.ПолученТекст локальную переменную ответ_словарь. С помощью функции ПеревестиJsonТекст компонента ИнтернетЗапрос, сохраним в ней словарь значений из ответа сервера. Чтобы получить значение по ключу, используем блок из раздела Dictionaries (Словари):

Время тестирования!

Запустите приложение. Нажмите на кнопку и дождитесь ответа от сервера. Теперь ответ, полученный по ключу answer покажется в компоненте НадписьОтвет.

Проект готов.

Внимание!

Не используйте приложение для принятия важных решений. Не полагайтесь на случайность.

Задание № 2. Переводчик

Разработаем приложение, с помощью которого переведём озвученную фразу собеседника на выбранный язык. Чтобы распознать произнесённый текст используем компонент РаспознавательРечи (Медиа). Результат распознавания речи передадим компоненту Translator (Медиа). Полученный перевод выведем на экран и озвучим с помощью компонента ТекстВРечь (Медиа).

Взаимодействие всех компонентов при переводе показано на диаграмме:

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

Перед разработкой выберите иностранный язык, который хотите использовать в приложении:

С русского на английский и обратно.

С русского на испанский и обратно.

С русского на немецкий и обратно.

С русского на французский и обратно.

Создайте новый проект под именем Translator.

Загрузка медиа-ресурсов

Из папки translate загрузите в проект все файлы изображений:

Настройки проекта

Нажмите кнопку , чтобы открыть настройки приложения. В разделе General (Общие настройки) измените свойство AppName (Название приложения) на текст Переводчик. Это название будет показываться в списке приложений после установки.

Измените свойство Иконка на icon.png.

Нажмите Close, чтобы закрыть окно с настройками проекта.

Проектирование интерфейса

Интерфейс экрана Screen1 содержит следующие компоненты:

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
Screen1	ВыровнятьПоГоризонтали=Центр ВыровнятьПоВертикали=Центр TitleVisible=нет галочки
ГоризонтальноеРасположение	ВыровнятьПоГоризонтали=Центр Ширина=Наполнить родительский
КнопкаРусский	Изображение=ru.png Текст=пустая строка
КнопкаИнЯз	Текст=пустая строка Изображение=см. инструкцию ниже
Загрузка	Видимый=нет галочки
НадписьПеревод	Ширина=Наполнить родительский Текст=Перевод Выравнивание текста=Центр

Изображение для кнопки КнопкаИнЯз - en.png.

Изображение для кнопки КнопкаИнЯз - es.png.

Изображение для кнопки КнопкаИнЯз - de.png.

Изображение для кнопки КнопкаИнЯз - fr.png.

Программирование компонентов

Добавьте глобальную переменную язык_перевода. В ней будем хранить код языка на который нужно перевести текст:

Добавьте обработчик нажатия кнопки КнопкаРусский:

В скрипте задаём язык перевода. Исходный язык будет определён переводчиком автоматически. Устанавливаем язык распознавателя речи, чтобы избежать неправильного автоматического выбора. Запускаем распознавание речи. На телефоне появится окно ожидающее вашей фразы.

Когда текст будет распознан, сработает событие ПослеПолученияТекста компонента РаспознавательРечи1. Запросим перевод распознанной фразы на выбранный язык через онлайн-переводчик. Так как запрос занимает время, показываем компонент Загрузка.

Когда перевод будет получен, сработает событие ПолучитьПеревод компонента Translator1.

Составьте скрипт для вывода на экран текста перевода и его озвучивания:

Скрываем индикатор загрузки.
Если запрос завершился удачно, кодОтвета будет равен 200.
В таком случае, с помощью компоента ТекстВРечь1 произнесём текст перевода на языке заданном в обработчике нажатия кнопки.
Выводим текст перевода в НадписьПеревод.

Время тестирования!

Запустите приложение. Нажмите первую кнопку. Произнесите фразу, которую хотите перевести с русского на выбранный язык. Через некоторое время на экране должен появится текст перевода и он произнесётся синтезатором речи.

Добавьте обработчик нажатия на кнопку КнопкаИнЯз:

Время тестирования!

Запустите приложение. Нажмите вторую кнопку. Процедура перевода аналогична работе первой кнопки.

Проект готов.

Задание № 3. Путеводитель по Беларуси

Разработаем приложение, которое покажет на карте Беларуси её достопримечательности. Нажав на маркер, пользователь увидит название и описание достопримечательности. Долгое нажатие по маркеру приблизит карту к выбранному месту.

Для выполнения задания используем компоненты Map и Marker. Компонент Map использует для своей работы веб-сервис openstreetmap.org.

Создайте новый проект по именем Belarus_guide

Проектирование интерфейса

Интерфейс экрана Screen1 содержит следующие компоненты:

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
Screen1	TitleVisible=нет галочки
Map1	CenterFromString=53.859,27.982 Высота=Наполнить родительский Ширина=Наполнить родительский ShowZoom=нет галочки ZoomLevel=6 EnablePan=есть галочка EnableZoom=есть галочка
КнопкаДомой	Ширина=Наполнить родительский Текст=Домой

Следующий шаг - настроить свойства каждого компонента Marker. Нужно указать широту и долготу, заголовок и описание (Description) маркера. Последовательно измените свойства каждого маркера, согласно таблице¹:

Имя	Широта	Долгота	Заголовок	Description (Описание)
Marker1	52.08816	23.65923	Мемориальный комплекс “Брестская крепость-герой”	В начале Великой Отечественной войны главная цитадель Беларуси первой приняла удар и 28 дней сдерживала натиск немецко-фашистских захватчиков. В честь защитников крепости был возведен грандиозный мемориальный комплекс, в центре которого установлен монумент “Мужество” высотой 33,5 м с изображением воина и знамени.
Marker2	55.48631	28.75858	Софийский собор	Собор Софии Премудрости Божией – один из самых ранних православных храмов в Европе и первый каменный в Беларуси – включен в предварительный Список всемирного наследия ЮНЕСКО. Возведенный в 1044 – 1066 годах по распоряжению князя Всеслава Чародея, он олицетворял независимое и могущественное Полоцкое княжество.
Marker3	53.88723	25.30286	Лидский замок	Главный форпост принеманских земель против набегов крестоносцев в 1323 году приказал заложить великий князь Гедимин. Грандиозный замок построили на искусственном острове высотой более 5 м, отделенном от города глубоким водоемом.
Marker4	51.9747	27.9918	Национальный парк “Припятский”	Уникальный природный резерват в междуречье Припяти, Ствиги и Уборти – единственное место в мире, где сохранились нетронутыми вековые пойменные дубравы и находится крупнейший в Европе массив переходных и верховых болот. Кроме того, национальный парк “Припятский” носит статус ключевой орнитологической территории.
Marker5	53.59637	27.68314	Музей старинных народных ремесел и технологий “Дудутки”	Один из самых посещаемых этнографических музеев Беларуси находится в окрестностях деревни Дудичи, которой на протяжении 130 лет владел знаменитый род Ельских. В конце 1990-х на основе богатой истории здешних мест был создан уникальный комплекс, рассказывающий о жизни белорусского поместья ХIХ века.
Marker6	53.89395	30.34574	Свято-Никольский монастырь	Свято-Никольский монастырь – одно из немногих сохранившихся до наших дней культовых сооружений в стиле белорусского барокко. На территории обители, которая входит в предварительный Список всемирного наследия ЮНЕСКО, расположены Свято-Никольский собор (в реестре наиболее ценных барочных сооружений Европы), храм преподобного Онуфрия Великого, звонница, жилые помещения.

Программирование компонентов

По нажатию на кнопку КнопкаДомой карта должна возвращаться к стартовому положению:

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

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

Чтобы открыть описание нажатого маркера, составьте следующий скрипт:

Обработчик события находится в разделе ДругойMarker:

Независимо от того, какой маркер нажмёт пользователь, обработкой нажатия займётся этот скрипт:

Добавьте скрипт, который после долгого нажатия на маркер центрирует на нём карту и увеличит масштаб:

Время тестирования!

Запустите приложение. Проверьте следующие функции:

можно менять масштаб карты, её положение;
нажатие на КнопкаДомой возвращает карту в исходное положение и к начальному масштабу;
нажатие на маркер открывает описание;
долгое нажатие на маркер центрирует на нём карту и увеличивает масштаб.

Дополнительное задание

✍️ Сделайте самостоятельно

Добавьте на карту достопримечательность из вашего родного города/посёлка/агрогородка/села. Координаты места узнайте с помощью сервиса openstreetmap.org. Добавьте название и описание достопримечательности.

Задание № 4. Калькулятор математических выражений

Разработаем приложение-калькулятор, способный упрощать математические выражения, находить производные и интегралы функций. Для этого используем веб-API newton.now.sh.

Запрос к API в общем виде выглядит так:

https://newton.now.sh/api/v2/операция/выражение

На месте операции может быть три значения:

simplify - упростить выражение;
derive - найти производную;
integrate - интегрировать функцию.

Для записи выражений используются числа, арифметические операции, скобки и буквы. Например выражение $x^{2} + 2 x$ запишется следующим образом: x^2+2x.

К примеру, чтобы посчитать производную функции $x^{2}$ нужно отправить следующий запрос:

https://newton.now.sh/api/v2/derive/x^2

Ответ выглядит следующим образом:

{
  "operation":"derive",
  "expression":"x^2",
  "result":"2 x"
}

JSON-ответ содержит ключи operation (выполненное действие), expression (исходное выражение) и result (результат).

Выбор операции в приложении сделаем с помощью компонента ВыборИзСписка. Выражение будем вводит в компонент Текст.

Создайте новый проект под названием Calc.

Загрузка медиа-ресурсов

Из папки calc загрузите в проект файл icon.png:

Настройки проекта

Нажмите кнопку , чтобы открыть настройки приложения. В разделе General (Общие настройки) измените свойство AppName (Название приложения) на текст Калькулятор функций. Это название будет показываться в списке приложений после установки.

Измените свойство Иконка на icon.png.

Нажмите Close, чтобы закрыть окно с настройками проекта.

Проектирование интерфейса

Интерфейс экрана Screen1 содержит следующие компоненты:

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
Screen1	ВыровнятьПоГоризонтали=Центр ВыровнятьПоВертикали=Центр TitleVisible=нет галочки
ГоризонтальноеРасположение	Ширина=Наполнить родительский
ВыборИзСпискаДействие	Текст=simplify ЭлементыИзЦепочки=simplify,derive,integrate Выбор=simplify
ТекстВыражение	Ширина=Наполнить родительский Подсказка=Выражение Текст=пустая строка
КнопкаВычислить	Ширина=Наполнить родительский Текст=Вычислить
LinearProgress1	Видимый=нет галочки
НадписьРезультат	ЖирныйШрифт=есть галочка РазмерШрифта=25 Ширина=Наполнить родительский
ИнтернетЗапрос	Timeout=10000

Программирование компонентов

Добавьте следующий скрипт, чтобы всегда показывать выбранное действие:

Составим скрипт для отправки запроса к API. Строка с адресом запроса будет формироваться с помощью сложения (конкатенации) строк:

Для чего нужен блок ЗакодироватьUri? (нажмите, чтобы открыть)

URL может содержать только латинские буквы, цифры и некоторые знаки препинания (-_.~). Остальные символы необходимо преобразовать в формат %КОД, где КОД - шестнадцатеричное число.

Введите строку, которая может появиться в URL:

viewof textToEncode = Inputs.text({placeholder: "Введите строку", width: 120, maxlength: 16, value: "(x+5)(4-2x)"})

textToEncode = "(x+5)(4-2x)"

md`Cтрока *${textToEncode}* будет преобразована в следующий текст: *${fixedEncodeURIComponent(textToEncode)}*.`

Cтрока (x+5)(4-2x) будет преобразована в следующий текст: %28x%2B5%29%284-2x%29.

Составьте скрипт для отправки запроса на выполнение вычислений. Начало адреса скопируйте тут:

https://newton.now.sh/api/v2/

Блок соединить находится в категории Текст. По умолчанию, блок даёт возможность сложить две строки. Нажмите на , чтобы добавить ещё два слота для сложения:

Готовый скрипт выглядит следующим образом:

Добавим обработчик ПолученТекст, чтобы вывести ответ, полученный от сервера:

Скрываем индикатор загрузки.
Проверим, был ли запрос успешно обработан.
Если кодОтвета равен 200, значит сервер смог успешно обработать наш запрос.
Выведем в компонент НадписьРезультат результат запроса в JSON-формате.

Время тестирования!

Запустите приложение. В поле для выражения введите (x+5)(4-2x). Тип операции - simplify (упростить). Нажмите кнопку Вычислить. На экране должен появиться следующий текст:

{"operation":"simplify","expression":"(x+5)(4-2x)","result":"-2 x^2 - 6x + 20"}

Поменяйте тип операции на derive (производная). Нажмите кнопку Вычислить. Ответ от сервера должен выглядеть следующим образом:

{"operation":"derive","expression":"(x+5)(4-2x)","result":"-4 x - 6"}

Наконец выберите тип операции integrate (интегрирование) и нажмите Вычислить. Ответ от сервера:

{"operation":"integrate","expression":"(x+5)(4-2x)","result":"-2/3 x^3 - 3 x^2 + 20x"}

Преобразуем ответ от сервера в словарь, чтобы по ключу result извлечь результат вычислений и показать его пользователю.

Измените блоки в ветви оператора если, когда условие истинно. Добавьте описание локальной переменной результат и сохраните в неё словарь значений с ответом от сервера. Текст компонента НадписьРезультат измените на значение, полученное из словаря результат по ключу result:

Время тестирования!

Запустите приложение. Проверьте выполнение операций на выражении (x+5)(4-2x). Теперь текст ответа должен содержать только выражение. Например, для операции упрощения (simplify), ответ выглядит так:

-2 x^2 - 6x + 20

Проект готов.

Сноски

По материалам сайта belarus.by.↩︎