Создание приложений с использованием компонентов холст в среде AppInventor

Муниципальное бюджетное образовательное учреждение

дополнительного образования

«Детский технопарк «Кванториум»

Разработка учебного занятия

по дополнительной общеобразовательной общеразвивающей

программе «Разработка мобильных приложений в облачной среде App Inventor»

1 год обучения (11-13 лет)

Раздел № 1 «Создание приложений для мобильных устройств в облачном инструменте App Inventor »

Тема 1.3. «Рисование. Знакомство с компонентом Холст.

Приложение мини Paint.»

Автор - составитель:

Клепцова Наталья Викторовна,

педагог дополнительного образования

МБОУ ДО Кванториум

Комсомольск-на-Амуре, 2020

Тема: Создание приложений с использованием компонентов холст.

Цель: Сформировать у обучающихся базовые знания и умения по созданию и программированию пространства для рисования в среде AppInventor.

Задачи:

образовательные:

- познакомить обучающихся с графическим компонентом Холст для создания приложений в среде MIT App Inventor

- изучить возможности среды визуальной разработки мобильных приложений -MITAppInventor.

- научить проектировать и отлаживать мобильные приложения в среде MIT App Inventor.

развивающие:

- формировать интерес к изучаемой предметной области;

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

- развивать навыки проектной деятельности;

воспитательные:

- развивать познавательный интерес, творческую активность и воображение обучающихся;

 - развивать навыки работы с компьютером и облачным сервисом App Inventor.

Методические рекомендации: Данное занятие рекомендуется начать нестандартным образом, раздать обучающимся чистые листы бумаги и предложить им нарисовать рисунок по настроению. Прием внезапности (для учащихся такое начало занятий будет неожиданным) влияет на повышение мотивации, а также так как это рисование, то оно будет способствовать успокоению и концентрации учащихся. После чего перейти к созданию мобильного приложения по теме занятия. И после задания попробовать нарисовать то, что рисовали в начале занятия.

План занятия:

1.   Организационный момент (5 мин.)

2.   Практическая работа. (10 мин.)

3. Теоретический материал (10 мин.)

- компонент Холст

- координатная плоскость

- Рисование линий, окружностей

4. Практическая работа. (40 мин.)

- Приложение “Рисование”

- Приложение“ Конфетти”

- Приложение “Пишем на холсте”

5. Подведение итогов (5 мин.)

Ход занятия

1.   Организационный момент

Педагог: Добрый день! Ребята, какое у вас сейчас настроение? Нарисуйте на листке бумаги.

Учащиеся: Рисуют смайлик со своим настроением

2.   Практическая работа

Педагог: Роль пространства, или листка для рисования в App Inventor играет компонент Холст, который находится в группе компонент Рисование и анимация. Создайте изображение по алгоритму.

Рис. 1. Образец изображения к заданию

3. Теоретический материал

Холст
- Компонент Холст является дополнительной панелью приложения.
- Холст используется для рисования на нем объектов, размещения: текста и анимации изображений - спрайтов.

- Отображение холста во весь экран требует установки параметров “Наполнить родительский” при задании свойств Высоты и Ширины Холста.

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

- Местоположение объекта на холсте определяется значениями X, Y значение по отношению к левой верхней углу холста. X представляет горизонтальное положение объекта, 0 является левой границей и Х увеличивается, когда объект перемещается вправо. У - вертикальная положение объекта, 0 верхняя граница и Y увеличивается, когда объект перемещается вниз.

Рис. 2. Координатная плоскость в среде App Inventor

Рисование круга/окружности на холсте требует указания параметров координаты X и Y центра круга, а также радиуса в пискелах и параметра заливки (ложь/истина).
- Рисование линий на холсте требует установки параметров X и Y начала и конца линии.
При использовании случайных значений координат и в случае когда ширина холста определяется параметром “Наполнить родительский! , рекомендуется использовать функции определения ширины и высоту холста для устройства, как показано на примере:

Рис. 3. Определение Ширины и Высоты Холста

4.Практическая работа

ЗАДАНИЕ 1 Приложение “Рисование”

Описание. Приложение, позволяющее пользователю рисовать на экране.
Компоненты
-Кнопка
-Холст

Рис. 4. Макет Задания 1 «Приложение «Рисование»

Рис. 5. Программный код к заданию 1

 ЗАДАНИЕ 2 Приложение“ Конфетти”

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

Рис. 6. Макет и программный код для задания 2

ЗАДАНИЕ 3 Приложение “Пишем на холсте”

Описание. Приложение, в котором при нажатии кнопке на холсте под углом отображается текст “Меня нажали”. Попробуйте сами написать программный код.
 

Рис. 7. Макет задания 3

5. Подведение итогов

Ребята по кругу высказываются одним предложением, выбирая начало фразы из рефлексивного экрана на доске:

1.            сегодня я узнал…

2.            было интересно…

3.            было трудно…

4.            я выполнял задания…

5.            я понял, что…

6.            теперь я могу…

7.            я почувствовал, что…

8.            я приобрел…

9.            я научился…

10.        у меня получилось …

11.        я смог…

12.        я попробую…

13.        меня удивило…

14.        урок дал мне для жизни…

15.        мне захотелось…

Спасибо за занятие. Вы молодцы!