Приложение «Онлайн переводчик»

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

Настройки приложения

Предварительно желательно скачать изображения флагов стран, на языки которых будет осуществляться перевод. В нашем случае их 5: Великобритания, Франция, Германия, Испания, Италия.

Например:

Не забудьте переименовывать картинки для удобства их дальнейшего использования. Картинку с именем fr.png или france.png проще и быстрее найти для использования на кнопке французского языка, нежели картинку kwefgwehfg731413.png.

Название приложения можно сделать «Переводчик». Иконку — выбрать какой-нибудь из загруженных флагов или загрузить что-то ещё.

Дизайн-макет

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

Первый экран

Выглядеть примерно он будет так:

Настроим Экран:

• Выравнивание по горизонтали и вертикали — Центр.
• Цвет фона — по умолчанию (но вы можете сделать любой).
• Отключим показ статус-бара и заголовка экрана.
• Ориентацию можно сделать любой — нам не так принципиально.

Добавим Надпись. Формат её можно сделать любой. Главное, чтобы текст надписи был «На какой язык переводить?». Это просто текстовая подпись к основному функционалу. Для любителей минимализма можно обойтись и без неё.

После надписи добавим Табличное расположение. Зачем оно нужно? Чтобы аккуратно расположить кнопки и подписи к ним. Ещё добавлю, что можно обойтись без подписей, это уже кому как нравится.

В настройках расположения укажем, что нам нужно 2 столбца и 5 строк.

В одну ячейку добавим Кнопку. Изменим название компонента на «английский». Эта кнопка будет отвечать за открытие экрана переводчика на английский. У кнопки установим изображение в виде британского флага. Размер в высоту 50 пикселей, в ширину тоже 50 пикселей (пусть будет квадратная).

В соседнюю ячейку добавим Надпись. Оформление надписи любое, но текст будет «английский». Это подпись к кнопке. Должно получится примерно следующее:

Да, можно обойтись без картинок на кнопках и сделать подписи прямо на них, тогда не придется добавлять лишние надписи. Но это кому как нравится.

Сделаем аналогично для оставшихся 4 языков: добавим 4 кнопки в столбик и 4 надписи в соседние ячейки. У каждой кнопки установим изображение соответствующего флага, размеры и оформление же лучше сделать одинаковым, чтобы смотрелось более гармонично. Примерно должно получится так:

Не забудьте переименовать компоненты кнопок, чтобы было понятно, за какой язык они отвечают. Итого, все компоненты первого экрана:

Итак, макет первого экрана готов.

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

Экран перевода на конкретный язык

Все языковые экраны будут однотипно настроены. Поэтому покажем на примере английского языка. Так должен выглядеть макет:

Настроим Экран:

• Название экрана Eng (понадобится при программировании).
• Выравнивание — Центр, Центр.
• Заголовок экрана- Английский. При этом заголовок пусть показывается, чтобы мы не забили, на каком экране находимся.
• Статус-бар скрыт.

Добавляем Кнопку. Её настройки:

• Высота и ширина — по 100 пикселей.
• Изображение — картинка британского флага.
• Можно добавить текст «Старт», выровнять его по центру. Да, на фоне флага он будет не очень заметен, но можно сделать текст крупнее и выбрать более контрастный цвет.
• Компонент переименуем в «Старт».

Добавим Горизонтальное расположение. Оно будет работать как отступ между кнопкой и текстом. Высота его — 30 пикселей. Остальное можно оставить по умолчанию.

Добавим Надпись. В нее будет выводится переведенный текст, изначально она пустая и не занимает места. Поэтому переименуем компонент в «Текст». Настройки текста можно сделать любые, главное, чтобы он был виден.

Ниже добавляем Кнопку. Она будет отвечать за возвращение на первый экран. Оформление любое, текст кнопки «Назад». Компонент тоже желательно переименовать в «Назад», чтобы не запутаться при программировании.

Добавим невидимые компоненты:

• Распознаватель Речи, чтобы приложение нас слышало и понимало.
• Переводчик (Translator), который будет осуществлять перевод текста.
• Текст в Речь, чтобы приложение могло озвучить переведенный текст.

Настройки у всех трех по умолчанию.

Итого, список компонентов экрана должен выглядеть так:

Программирование

Первый экран

У нас создан пока 1 экран, поэтому с первого экрана мы можем перейти только на экран английского языка. Это и запрограммируем, при нажатии на кнопку с британским флагом открывать новый экран:

Языковой экран

Теперь запрограммируем сам переводчик. Первое, что должно сделать приложение — получить от нас текст. Поэтому при нажатии кнопки «Старт» запустим распознаватель речи:

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

В методе распознавателя речи «После получения текста» распознанный текст хранится в локальной переменной «результат», его-то мы и будем использовать:

Текст переводчик перевел.

Обратите внимание, что компонент переводчика работает только при наличии интернет-соединения!

Теперь нужно, чтобы мы этот переведенный текст увидели и услышали. Для этого возьмем метод «Получить перевод» у компонента переводчика (сам перевод хранится в переменной «перевод»).

Присвоим надписи «Текст» значение перевода. Тогда мы увидим то, что перевел переводчик.

Настроим компонент Текст в речь так, чтобы он говорил с нами на английском языке:

А затем попросим сказать. В итоге, весь блок вывода перевода будет выглядеть так:

Ну и осталась кнопка «Назад», чтобы мы могли вернуться на первый экран.

У нас готов переводчик на английский язык. Осталось сделать другие. Поскольку они аналогичные, вы их сможете сделать сами, отличаются только некоторые настройки.

К сожалению, в Апп Инвентор нет возможности клонирования экранов, поэтому дизайн-макет вам придется делать для каждого экрана с нуля. А вот блоки программирования можно переносить между экранами.

Рюкзак

На вкладке программирования есть рюкзак, он расположен в левой верхней части.

Если кликнуть на него, откроется еще одна вкладка, куда мы можем перетаскивать готовые блоки с нашего экрана:

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

Самостоятельная работа

Доработка приложения

Попробуйте самостоятельно сделать остальные переводы. Для этого вам понадобится:

• Создать 4 экрана по образцу экрана английского языка, только изменить их названия и картинки кнопки «Старт» на соответствующие языку.
• Запрограммировать эти экраны, воспользовавшись рюкзаком и изменить настройки языка в блоках с EN на:
  • DE для немецкого языка,
  • ES для испанского,
  • FR для французского,
  • IT для итальянского.
• Допрограммировать первый экран на открытие соответствующих экранов.

После этого можно создавать apk файл и устанавливать на смартфон.

Продвинутый уровень

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