English Time. Час Англійської. Запускаємо Appinvenor. Lesson 25

ROBOCODE
Запускаємо AppInventor
Вводимо емейл та пароль, або обираємо один з облікових записів зі списку
3
Запускаємо AppInventor
Після успішного входу ми повинні побачити наступну сторінку:
3
Натискаємо Close/Закрити
4
LESSON 25

ROBOCODE
Створення нового проекту
Натискаємо на кнопку Start new project/Створити новий проект
1
Відкриється вікно, у якому треба дати назву нашому проекту
2
Називаємо якось наш проект.
Наприклад: FirstApp
3
Назва проекту не може містити пробіли та кирилицю
!
Натискаємо ОК
4
У AppInventor є 2 режими:
Режим “Designer/Дизайнер”
Режим “Blocks/Блоки”
і
Designer
У режимі “Designer” ми будемо налаштовувати зовнішній вигляд нашого додатку. Ми зможемо розташовувати кнопки та інші компоненти на робочому полі.
і
LESSON 25

ROBOCODE
Viewer/Оглядач
Давайте розберемося, що тут до чого:
і
Перше, що кидається в очі - це телефон посеред екрану. Це те, як буде виглядати наш додаток на пристрої.
Саме сюди ми будемо перетягувати компоненти, которі захочемо використовувати
і
На жаль, змінити модель телефона ми не можемо. Але, ми можемо змінити його розміри, щоб, наприклад, побачити, як буде виглядати додаток на планшеті
і
Palette/Палітра
Палітра компонентів - це набір усіх компонентів, котрі ми можемо використовувати у наших додатках. Якщо тут чогось нема, то так вже і буде...
і
LESSON 25

ROBOCODE
Components/Компоненти
Тут будуть відображатися усі компоненти, котрі ми будемо використовувати у додатку.
і
Саме звідси можна буде видалити зайві компоненти та змінити їх ім’я
і
Properties/Властивості
Найцікавіше вікно. Тут можна змінити налаштування будь-якого компоненту.
і
Ми можемо змінити колір, текст, розташування, відображення на смартфоні та багато іншого
і
LESSON 25

ROBOCODE
Найпростіший додаток
Давайте спробуємо зробити так, щоб при натисканні на кнопку, в текстове поле виводилася назва цієї кнопки
і
Перетягуємо на телефон button/кнопку та label/текстове поле:
1
Усі елементи, поки що, будуть розміщуватися один за одним. Та ми можемо зробити так, щоб вони були розміщені по центру. Для цього у властивостях Screen/Екрану треба знайти поле AlignHorizontal/Вирівняти по горизонталі
2
LESSON 25

ROBOCODE
Найпростіший додаток
Тепер, спробуй самостійно зайти у властивості button/кнопки, label/текстового поля та знайти поля, що відповідають за текст на них.
Також, спробуй змінити назву screen/екрану.
3
На цьому дизайн завершено. Але поки що наша кнопка і текстове поле не знають, що їм робити. Ми повинні розповісти їм за допомогою коду. Переходимо у режим Blocks/Блоки
і
Цей режим використовується для написання (складання) коду для компонентів.
і
LESSON 25

ROBOCODE
Найпростіший додаток
Зліва ми бачимо категорії (як у Scratch), а також усі, компоненти, котрі ми додали у режимі Designer
і
Тиснемо лівою кнопкою миші (ЛКМ) на нашу кнопку
4
Зі списку можливих блоків для кнопки, знаходимо блок
when Button1.Click /Коли клікнули по Button1
та переносимо на робочу область
5
Тиснемо лівою кнопкою миші (ЛКМ) на Label1
6
Зі списку можливих блоків для Label, знаходимо блок
set Label1.Text to /встановити текст Label1 у
та переносимо у попередній блок
7
LESSON 25

ROBOCODE
Найпростіший додаток
Тиснемо лівою кнопкою миші (ЛКМ) на Text, беремо найперший блок та прикріпляємо його до попереднього
8
Клацаємо по блоку та вводимо текст, який з’явиться після натискання на кнопку
9
Наш перший додаток завершений, тепер потрібно запустити його на телефоні
i
Запуск додатку на телефоні
AppInventor надає можливість тестувати додатки, не встановлюючи їх на смартфон. Але для цього треба встановити додаток MIT AI2 Companion
i
Заходимо в PlayMarket та встановлюємо додаток
1
Відкриваємо додаток
2
У AppInventor знаходимо connect/з’єднатися та клацаємо на AI Companion
3
LESSON 25

ROBOCODE
Запуск додатку на телефоні
Далі повинно відкритися вікно з QR кодом
4
У додатку натискаємо на scan QR code / відсканувати QR код
5
Скануємо QR код. (Телефон може попросити дозволити доступ до камери - дозволяємо)
6
Після успішного сканування у AppInventor почнеться сборка проекту і завантаження його на телефон:
7
Після цього на смартфоні запуститься наша програма. Якщо ми щось змінимо у AppInventor, то на телефоні теж з’являться ці зміни у реальному часі
8
Тепер можна тестувати додаток!
9
LESSON 25