Инструкция по изучению темы

«Создание мобильного приложения»

Цель: создавать дружественный интерфейс мобильного приложения в конструкторе; разрабатывать
мобильное приложение, используя блоки кода.
Инструкция: задания выполняются по порядку, задания требующие записи
выполняются в тетради, формативное оценивание выполняется в системе он-лайн
тестирования master-test.net, практические задания отправляются учителю на почту
school9pavlinf@mail.ru
1. Запишите тему урока в тетрадь «Создание мобильного приложения» (практика)
2. На прошлом уроке мы рассмотрели 1 этап разработки мобильных приложений, а именно
познакомились с элементами и компонентами окна режима «Дизайнер» программы MIT App
Invertor. Сегодня мы продолжим знакомство с этой программой и его вторым режимом работы
«Блоки». Также установим и выполним первую практическую работу в программе MIT App
Invertor и создадим свое первое мобильное приложение. Для работы нам понадобятся два
устройства: компьютер/ноутбук и телефон/планшет, а также постоянное подключение к сети
Интернет.
3. Рассмотрим режим «Блоки» (создание программного кода – 2 этап разработки мобильных
приложений)
Запишите теорию в тетрадь:
Режим «Блоки» - предназначен для программирования поведения вашего приложения и его
компонентов, каким образом выбранные вами компоненты будут реагировать на различные
действия пользователя.
Рассмотрим элементы окна режима «Блоки»

1. Встроенные блоки управления

2. Переключение режима
3. Копирование блоков между экранами
4. Масштаб
5. Корзина
6. Рабочая область
В режиме «Блоки» представлен набор инструментов для оперирования компонентами и выглядят
они как пазлы, имеющие разную расцветку.
Все используемые блоки это команды языка программирования, с помощью которых мы будем
писать программу. Составленную программу будет исполнять приложение, руководствуясь
действиями пользователя. Логика составления программ для мобильного приложения основана на
событийно - управляемом программировании.
Событийно - управляемое программирование – стиль или технология программирования, при
 котором выполнение блоков программы происходит в ответ на события, а не в заранее
определенном порядке.
«Блоки» условно можно разбить на две большие группы:
 относящиеся к приложению в целом  относящиеся непосредственно к компонентам

Блоки, относящиеся к компонентам также можно разделить на три типа, которые легко различить
по цвету:
1. Блоки-свойства, описывающие свойства компонента.
Свойства – это параметры компонента, его характеристики. Они зеленого цвета и выглядят так:

этот блок обозначает текущее свойство компонента. На данной картинке приведен блок цвета фона
для текстового компонента TextBox1. Он подразумевает получение уже имеющегося значения.

а этот задает требуемое значение компоненту (присвоить TextBox1 фоновый цвет …). «set» —
задать.
2. Блоки-события, то есть, те блоки, которые отслеживают наступления какого-либо события
(когда, что-то произошло) в приложении.
События – то, что может случиться с компонентом. Они окрашены в бронзовый цвет:

Например, при нажатии клавиши запускается блок-команда.

Этот блок, например, выполняет действие при щелчке по кнопке (когда по Button3 кликнули,
сделать …)
3. Блок-команда, этот блок часто называют обработчиком. Блок указывает, что нужно сделать
с компонентом (действие), к которому принадлежит блок:

Итак, пришло время познакомиться с программой MIT App Invertor.

4. Практическая работа «Разработка и установка мобильного приложения»
4.1 1. Войдите в среду визуального программирования MIT App Inventor по ссылке:
http://ai2.appinventor.mit.edu при этом вам будет предложено создать аккаунт Google или
использовать созданный ранее аккаунт. (войдите/создайте в аккаунт и перейдите по ссылке)
 2. В окне «Условия обслуживания» выберите «Я принимаю условия предоставления услуг».

3. В окне «Добро пожаловать в MIT App Inventor» нажмите кнопку «Продолжить»

4. В меню Projects выберите «Start new project»

5. Дайте название проекту (в названии будущего приложения можно использовать только

латиницу). На этом шаге создается файл с именем, которое вы ввели и расширением .apk

4.2 6. В данный момент вы находитесь в режиме «Дизайнер». Рассмотрим создание дизайна

приложения.
6.1. Найдите в палитре Дизайнера компонент Label и перетащите его на Экран (Screen 1) в области
Просмотра. В этот момент, размещенный на экране компонент, появился в разделе Компоненты.
6.2. Давайте изменим параметры компонента. Для этого необходимо выделить его в поле
Компонент и задать нужные свойства на панели Свойств:
 Измените цвет фона (свойство BackgroundColor - None) на зеленый
 Введите в поле Text фразу «Мобильное приложение» (сотрите то, что написано и после
ввода нажмите enter)
 Измените начертание текста (свойства FontBold, FontItalic)
 Установите размер текста (свойство FontSize) 18.0
 Измените цвет текста (свойство TextColor) на синий

7. Добавим на экран изображение. Для этого перейдите в раздел Media и нажмите кнопку «Upload
File…»

8. В появившемся окне нажмите кнопку «Выбор файла» и загрузите файл (это может быть любая
картинка на ваш вкус). Имя файла должно быть на латинском языке или цифрами.

После загрузки имя файла появится в разделе Media.

9. Найдите в палитре Дизайнера компонент Image и перетащите его на Экран (Screen 1) в области
Просмотра. Он автоматически появился в разделе Компоненты.
 10. Задаем параметры компонента Image. Перейдите на панель свойств
элемента Image. В свойстве Picture выберите загруженное изображение и
нажмите кнопку OK.

11. Добавьте на Экран (Screen 1) в область Просмотра компонент Button

(кнопка) и переименуйте его на панели свойств в «Кнопка».

12. В группе Media выберите компонент TextToSpeech1 и добавьте его на Экран (Screen 1) в
область Просмотра. Он автоматически появится
ниже, под изображением мобильного телефона с
пояснением невидимый компонент.

13. Установите настройки для компонента

TextToSpeech1: Country – USA, Language - en

Итак, мы создали дизайн будушего приложения!

4.3 Переходим к созданию программного кода для работы этого приложения.

1. Перейдите в режим «Блоки». В панели блоков выберите компонент «Button1». Выберите
событие «When Button1.Click»(когда кнопка нажата) и перенесите его в рабочую область (окно
«Viwer»).
 2. Выберите объект «TextToSpeech1» и перенесите блок «call TextToSpeech1.Speak» (говорить при
звонке) в рабочую область.

3. Наведите мышкой один блок на другой, чтобы

совпал «замок»

4. Выберите объект «Text» и добавьте к

программе новый блок «A text string»

5. Соберите блок как на рисунке и напишите в

нем любую фразу, например, «Hello!»

Таким образом, мы собрали фрагмент

программного кода с указанием: При щелчке по
кнопке говорить Hello!

5. Установка мобильного приложения

Для того чтобы увидеть работу созданного вами приложения и проверить его работоспособность,
вам необходим второй гаджет (телефон, планшет), на нем необходимо установить приложение MIT
AI2 Companion.
MIT AI2 Companion - это приложение-помощник, позволяющее запустить на мобильном
устройстве программу, которую вы создали в MIT App Inventor.

1. В программе MIT App Inventor выберите способ запуска созданного приложения:

Buld – App (provide QR code for .apk)
2. Начнется процесс формирования QR-кода:

3.На мобильном устройстве загрузите и установите из магазина Google Play приложение MIT AI2
Companion

4. Запустите приложение MIT AI2 Companion. Откроется страница, в которой вам будет
предложено ввести QR-код приложения.
 5. Разрешите приложению доступ к фото, мультимедиа и файлам на устройстве

6. Загрузите созданное вами приложение на

устройство.

7. Установите приложение на мобильное

устройство. На предупреждение системы –
соглашаемся.

8. Все равно устанавливаем приложение

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

6. Практическая работа № 2
7. 1. Создадим еще одно мобильное приложение, которое будет спрашивать имя пользователя, а затем
выводить сообщение: «Привет, имя пользователя!»
2. Для этого в меню Projects выберите «Start new project» и задайте имя нового проекта Hello
 3. Поместите на Экран (Screen 1) в область Просмотра следующие
компоненты:
Label1, TextBox

4. Задайте нужные свойства компонентам на панели Свойств.

Для компонента Label1:
свойству FontSize задайте значение 20
в поле Text введите фразу «Введите Ваше имя»
Для компонента TextBox:
свойству FontSize задайте значение 18

5. Для того, чтобы разместить компоненты Button1, Button2 по

горизонтали экрана, перейдите в раздел Layout (Расположение). В этом
разделе выберите компонент HorizontalArrangement(Горизонтальное
расположение) и поместите его в область просмотра.

6. Поместите в него компоненты Button1 и Button2.

7. Задайте свойства компонентам Button1 и Button2.

для компонента Button1:
свойству FontSize задайте значение 18
в поле Text введите фразу «Готово»
для компонента Button2:
свойству FontSize задайте значение 18
в поле Text введите фразу «Очистить»

8. Добавьте в область просмотра компонент Label2.

свойству FontSize задайте значение 18
очистите поле Text

9. У вас должно получиться следующее:

10. Составим программу для нашего приложения (переходим в режим «Блоки»).

Основным событием в приложении будет щелчок по кнопке . Когда

 пользователь щёлкнет по кнопке «Готово» компонент надпись получает новое значение

, составленное (склеенное), с помощью блока , из двух

частей:

первая часть неизменяемая, это слово «Привет» -

вторая часть является значением компонента TextBox -

В итоге получим следующую программу:

При нажатии кнопки «Очистить» компоненты TextBox1 и Label2 должны очищаться.

8. Проверка работы приложения:

Сформируйте QR-код приложения и запустите созданное приложение на телефоне или планшете
(пункт 5 данной инструкции)
9. Формативное оценивание:
Войдите в систему он-лайн тестирования master-test.net
Перейдите в раздел Активные тесты и выполните тесты по теме «ФО_Создание мобильного
приложения»
Внимание! Максимальное время прохождения теста 10 минут.