Занятия № 7-8. Совместная разработка мобильного приложения с использованием визуализированной среды программирования

Ваша задача разработать мобильное приложение, которое поможет учащемуся во время решения задач по определённой теме. Отдельный экран приложения будет содержать теорию по выбранной теме.

Выберите тему, связанную с математикой или физикой. Затем модифицируйте шаблон приложения, следуя рекомендациям из раздела Шаблон приложения.

Темы

Математика

Площадь круга: формула площади \(S = \pi r^2\)
Площадь треугольника: формула площади \(S = \frac{1}{2}bh\)
Теорема Пифагора: \(c^2 = a^2 + b^2\)
Квадратное уравнение: формула корней \(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\)
Среднее арифметическое: \(\bar{x} = \frac{1}{n} \sum_{i=1}^{n} x_i\)
Периметр прямоугольника: \(P = 2(a + b)\)
Объем цилиндра: \(V = \pi r^2 h\)
Объем прямоугольного параллелепипеда: \(V = lwh\)
Площадь трапеции: формула площади \(S = \frac{1}{2}(a + b)h\)
Площадь параллелограмма: формула площади \(S = ab \sin \theta\)
Объем конуса: формула объема \(V = \frac{1}{3}\pi r^2 h\)
Площадь ромба: формула площади \(S = \frac{1}{2}d_1 d_2\)
Площадь эллипса: формула площади \(S = \pi ab\)
Площадь сектора круга: формула площади \(S = \frac{1}{2} r^2 \theta\)
Периметр трапеции: формула периметра \(P = a + b + c + d\)
Площадь поверхности цилиндра: формула площади поверхности \(S = 2\pi r (r + h)\)
Площадь поверхности сферы: формула площади поверхности \(S = 4\pi r^2\)

Физика

Законы Ньютона: второй закон Ньютона \(F = ma\)
Ускорение: формула ускорения \(a = \frac{\Delta v}{\Delta t}\)
Сила трения: формула силы трения \(F_{тр} = \mu N\)
Кинетическая энергия: формула кинетической энергии \(E_k = \frac{1}{2}mv^2\)
Потенциальная энергия: формула потенциальной энергии \(E_p = mgh\)
Импульс: формула импульса \(p = mv\)
Работа: формула работы \(A = Fd\)
Мощность: формула мощности \(P = \frac{A}{t}\)
Закон всемирного тяготения: \(F = G\frac{m_1m_2}{r^2}\)
Закон Кулона: \(F = k\frac{q_1q_2}{r^2}\)
Период колебаний: формула периода \(T = 2\pi\sqrt{\frac{l}{g}}\)
Скорость волны: формула скорости волны \(v = \lambda f\)
Закон Ома: \(V = IR\)
Энергия фотона: формула энергии фотона \(E = hf\)
Закон Гука: \(F = -kx\)
Плотность: формула плотности \(\rho = \frac{m}{V}\)
Теплоёмкость: формула теплоёмкости \(Q = cm\Delta T\)
Закон Архимеда: \(F_A = \rho gV\)

Шаблон приложения

Ссылка на шаблон

Скачайте файл с шаблоном проекта по этой ссылке. Импортируйте проект в аккаунт App Inventor:

В этом шаблоне содержится четыре экрана и кнопки для перехода между ними. Скрипты для перехода между экранами уже созданы. Стрелками показаны переходы между экранами:

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

Вам необходимо наполнить шаблон содержанием, подходящим под выбранную тему, настроить визуальное оформление, подобрать название а также иконку приложения.

В каждом разделе вы найдёте чек-лист. Ориентируйтесь на пункты списка, чтобы наполнить приложение необходимыми функциями и содержимым.

ns = Inputs.text().classList[0]

html`<style>

/* 3️⃣ Style using Inputs' namespaced classname 
 * This approach you can pretty much override anything.
 */
.${ns}{
  margin-bottom: 1em;  
}

.${ns} div label {
  margin-bottom: 1em;
  background-color: #f4f4f4;
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
  display: block;
}

.${ns} label:has(input:checked){
  //color: #F9EFDB;
  background-color: #9DBC98;
}

.${ns} div label:hover,
.${ns} div label:active,
.${ns} div label:focus {
  background-color: #EBD9B4;
}
</style>`

Вступительный экран (Screen1)

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

Добавьте название вашего проекта и подходящую иллюстрацию.

viewof introCL = Inputs.checkbox(["Показано название проекта", "Есть подходящая иллюстрация"])

Экран с теорией (ScreenTeoriya)

На этом экране учащийся сможет познакомиться с теоретической информацией.

Добавьте теорию по выбранной вами теме. Сопроводите теоретический материал медиа-контентом: изображениями, озвучкой, видео.

viewof teoryCL = Inputs.checkbox(["Теоретическая информация в форме текста", "Необходимые формулы в форме изображений", "Графические иллюстрации: схемы, диаграммы и др.", "Медиа-контент: озвучка, видео-урок и др.", "Теория соответсвует выбранной теме"])

Экран с калькулятором (ScreenCalculator)

Разместите на этом экране форму для вычислений. Чтобы получить справку по разработке, обратитесь к странице проекта Геометрический калькулятор.

viewof calcCL = Inputs.checkbox(["Из интерфейса понятно, куда и какие значения нужно вводить", "Показан пример вычислений с реальными данными", "Вычисления дают правильный ответ", "Проверяется корректность входных данных"])

Экран с информацией об авторах (ScreenAvtory)

Разместите на этом экране информацию о всех разработчиках, принимавших участие в создании приложения, поиске учебных материалов и выборе дизайна.

viewof devsCL = Inputs.checkbox(["Указаны имена и фамилии разработчиков", "Есть фотографии или аватары разработчиков", "Приведено короткое описание с информацией о каждом разработчике"])

Общие настройки проекта

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

viewof generalCL = Inputs.checkbox(["Указано название приложения, отличающееся от имени по умолчанию", "Выбрана подходящая иконка приложения", "Изменено стандартное цветовое оформление проекта"])

Итоги

Далее показано, сколько пунктов из каждого списка вы отметили.

md`
| Категория | Балл |
|-------|---|
| **Вступительный экран** ${listTasks(introCL)} | ${introCL.length} |
| **Экран с теорией** ${listTasks(teoryCL)} | ${teoryCL.length} |
| **Экран с калькулятором** ${listTasks(calcCL)} | ${calcCL.length} |
| **Экран с информацией об авторах** ${listTasks(devsCL)} | ${devsCL.length} |
| **Общие настройки проекта** ${listTasks(generalCL)} | ${generalCL.length} |
| **Итог** | ${total}/17 |
`

total = {
  return [...introCL, ...teoryCL, ...calcCL, ...devsCL, ...generalCL].length
}

function listTasks(arr){
  return arr.length === 0 ? md`*Нет выполненных задач*` : md`${arr.map(item=>{return md`*${item}*</br>`})}`;
}