function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
return "%" + c.charCodeAt(0).toString(16);
});
}
Занятие № 4. Взаимодействие с онлайн-сервисами
Задачи
- Изучить свойства и функции компонента Интернет.
- Научится получать текстовую информацию от сервера и преобразовывать её в JSON-формат.
- Научится обращаться к элементам переменной-словаря по ключу.
- Применить компоненты РаспознаватьРечи, Translator и ТекстВРечь для разработки проектов.
Перед началом работы, скачайте по ссылке архив с необходимыми изображениями.
Задание № 1. Магический шар
Создадим приложение, которое по нажатию на кнопку выдаёт случайное сообщение. Варианты ответов получим через обращение к веб-API по следующему адресу:
https://simple-api-3rug.onrender.com/api/8ball
Ответ от сервера выглядит следующим образом:
По ключу answer
мы получим строку, которую покажем в приложении.
Для обращения к веб-API используем компонент Интернет (раздел Каналы).
Загрузка ответа займет время. Чтобы показать, что загрузка идёт, используем компонент LinearProgress. Будем показывать его, когда отправлен запрос к серверу и скроем, когда получим ответ.
Создайте новый проект под именем ball8.
Загрузка медиа-ресурсов
Настройки проекта
Нажмите кнопку , чтобы открыть настройки приложения. В разделе General (Общие настройки) измените свойство AppName (Название приложения) на текст Магический шар. Это название будет показываться в списке приложений после установки.
Измените свойство Иконка на 8.png.
Нажмите Close, чтобы закрыть окно с настройками проекта.
Проектирование интерфейса
Настройте свойства компонентов согласно следующей таблице:
Компонент | Свойства |
---|---|
Screen1 | ВыровнятьПоГоризонтали=Центр ВыровнятьПоВертикали=Центр TitleVisible=нет галочки |
КнопкаСпросить | Текст=пустая строка Изображение=8.png |
Загрузка | Видимый=нет галочки |
НадписьОтвет | ЖирныйШрифт=есть галочка РазмерШрифта=24 Текст=Ответ |
НадписьJSON | Текст=json |
ИнтернетЗапрос | Timeout=50000 |
Для чего нужно свойство Timeout? (нажмите, чтобы открыть)
Таймаут - это время (в миллисекундах) в течении которого приложение будет ждать ответ от сервера. Если ответ не поступит, соединение закроется. Когда таймаут равен 0, приложение будет бесконечно ожидать ответа.
Программирование компонентов
- Указываем адрес, по которому нужно обратиться за ответом.
- Делаем запрос к серверу.
- Показываем компонент Загрузка, чтобы показать, что запрос отправлен и мы ожидаем ответ от сервера.
Ответ сервера покажем в компоненте НадписьJSON.
Время тестирования!
Сейчас приложение получает простую строку, которую нужно преобразовать в словарь. После этого у нас будет возможность получить текст ответа по ключу answer
.
Время тестирования!
Запустите приложение. Нажмите на кнопку и дождитесь ответа от сервера. Теперь ответ, полученный по ключу answer
покажется в компоненте НадписьОтвет.
Проект готов.
Внимание!
Не используйте приложение для принятия важных решений. Не полагайтесь на случайность.
Задание № 2. Переводчик
Разработаем приложение, с помощью которого переведём озвученную фразу собеседника на выбранный язык. Чтобы распознать произнесённый текст используем компонент РаспознавательРечи (Медиа). Результат распознавания речи передадим компоненту Translator (Медиа). Полученный перевод выведем на экран и озвучим с помощью компонента ТекстВРечь (Медиа).
Взаимодействие всех компонентов при переводе показано на диаграмме:
В приложении предусмотрим две кнопки для двух направлений перевода - с русского на выбранный язык и с выбранного языка на русский.
Перед разработкой выберите иностранный язык, который хотите использовать в приложении:
С русского на английский и обратно.
С русского на испанский и обратно.
С русского на немецкий и обратно.
С русского на французский и обратно.
Создайте новый проект под именем Translator.
Загрузка медиа-ресурсов
Настройки проекта
Нажмите кнопку , чтобы открыть настройки приложения. В разделе General (Общие настройки) измените свойство AppName (Название приложения) на текст Переводчик. Это название будет показываться в списке приложений после установки.
Измените свойство Иконка на icon.png.
Нажмите Close, чтобы закрыть окно с настройками проекта.
Проектирование интерфейса
Настройте свойства компонентов согласно следующей таблице:
Компонент | Свойства |
---|---|
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 | TitleVisible=нет галочки |
Map1 | CenterFromString=53.859,27.982 Высота=Наполнить родительский Ширина=Наполнить родительский ShowZoom=нет галочки ZoomLevel=6 EnablePan=есть галочка EnableZoom=есть галочка |
КнопкаДомой | Ширина=Наполнить родительский Текст=Домой |
Следующий шаг - настроить свойства каждого компонента Marker. Нужно указать широту и долготу, заголовок и описание (Description) маркера. Последовательно измените свойства каждого маркера, согласно таблице1:
Имя | Широта | Долгота | Заголовок | 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+2x\) запишется следующим образом: x^2+2x
.
К примеру, чтобы посчитать производную функции \(x^2\) нужно отправить следующий запрос:
https://newton.now.sh/api/v2/derive/x^2
Ответ выглядит следующим образом:
JSON-ответ содержит ключи operation
(выполненное действие), expression
(исходное выражение) и result
(результат).
Выбор операции в приложении сделаем с помощью компонента ВыборИзСписка. Выражение будем вводит в компонент Текст.
Создайте новый проект под названием Calc.
Загрузка медиа-ресурсов
Настройки проекта
Нажмите кнопку , чтобы открыть настройки приложения. В разделе General (Общие настройки) измените свойство AppName (Название приложения) на текст Калькулятор функций. Это название будет показываться в списке приложений после установки.
Измените свойство Иконка на icon.png.
Нажмите Close, чтобы закрыть окно с настройками проекта.
Проектирование интерфейса
Настройте свойства компонентов согласно следующей таблице:
Компонент | Свойства |
---|---|
Screen1 | ВыровнятьПоГоризонтали=Центр ВыровнятьПоВертикали=Центр TitleVisible=нет галочки |
ГоризонтальноеРасположение | Ширина=Наполнить родительский |
ВыборИзСпискаДействие | Текст=simplify ЭлементыИзЦепочки=simplify,derive,integrate Выбор=simplify |
ТекстВыражение | Ширина=Наполнить родительский Подсказка=Выражение Текст=пустая строка |
КнопкаВычислить | Ширина=Наполнить родительский Текст=Вычислить |
LinearProgress1 | Видимый=нет галочки |
НадписьРезультат | ЖирныйШрифт=есть галочка РазмерШрифта=25 Ширина=Наполнить родительский |
ИнтернетЗапрос | Timeout=10000 |
Программирование компонентов
Составим скрипт для отправки запроса к API. Строка с адресом запроса будет формироваться с помощью сложения (конкатенации) строк:
Для чего нужен блок ЗакодироватьUri? (нажмите, чтобы открыть)
URL может содержать только латинские буквы, цифры и некоторые знаки препинания (-_.~
). Остальные символы необходимо преобразовать в формат %КОД
, где КОД
- шестнадцатеричное число.
Введите строку, которая может появиться в URL:
Составьте скрипт для отправки запроса на выполнение вычислений. Начало адреса скопируйте тут:
Блок соединить находится в категории Текст. По умолчанию, блок даёт возможность сложить две строки. Нажмите на , чтобы добавить ещё два слота для сложения:
- Скрываем индикатор загрузки.
- Проверим, был ли запрос успешно обработан.
- Если кодОтвета равен 200, значит сервер смог успешно обработать наш запрос.
- Выведем в компонент НадписьРезультат результат запроса в JSON-формате.
Время тестирования!
Запустите приложение. В поле для выражения введите (x+5)(4-2x)
. Тип операции - simplify (упростить). Нажмите кнопку Вычислить. На экране должен появиться следующий текст:
Поменяйте тип операции на derive (производная). Нажмите кнопку Вычислить. Ответ от сервера должен выглядеть следующим образом:
Наконец выберите тип операции integrate (интегрирование) и нажмите Вычислить. Ответ от сервера:
Преобразуем ответ от сервера в словарь, чтобы по ключу result
извлечь результат вычислений и показать его пользователю.
Измените блоки в ветви оператора если, когда условие истинно. Добавьте описание локальной переменной результат и сохраните в неё словарь значений с ответом от сервера. Текст компонента НадписьРезультат измените на значение, полученное из словаря результат по ключу result
:
Время тестирования!
Запустите приложение. Проверьте выполнение операций на выражении (x+5)(4-2x)
. Теперь текст ответа должен содержать только выражение. Например, для операции упрощения (simplify), ответ выглядит так:
-2 x^2 - 6x + 20
Проект готов.
Сноски
По материалам сайта belarus.by.↩︎