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

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

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

Темы

Математика

Площадь треугольника: формула площади $S = \frac{1}{2} b h$
Теорема Пифагора: $c^{2} = a^{2} + b^{2}$
Периметр прямоугольника: $P = 2 (a + b)$
Объем цилиндра: $V = π r^{2} h$
Объем прямоугольного параллелепипеда: $V = l w h$
Площадь трапеции: формула площади $S = \frac{1}{2} (a + b) h$
Площадь параллелограмма: формула площади $S = a b \sin θ$
Объем конуса: формула объема $V = \frac{1}{3} π r^{2} h$
Площадь ромба: формула площади $S = \frac{1}{2} d_{1} d_{2}$
Площадь эллипса: формула площади $S = π a b$
Площадь сектора круга: формула площади $S = \frac{1}{2} r^{2} θ$
Площадь поверхности цилиндра: формула площади поверхности $S = 2 π r (r + h)$

Физика

Законы Ньютона: второй закон Ньютона $F = m a$
Сила трения: формула силы трения $F_{т р} = μ N$
Кинетическая энергия: формула кинетической энергии $E_{k} = \frac{1}{2} m v^{2}$
Потенциальная энергия: формула потенциальной энергии $E_{p} = m g h$
Мощность: формула мощности $P = \frac{A}{t}$
Закон всемирного тяготения: $F = G \frac{m_{1} m_{2}}{r^{2}}$
Закон Кулона: $F = k \frac{q_{1} q_{2}}{r^{2}}$
Период колебаний: формула периода $T = 2 π \sqrt{\frac{l}{g}}$
Закон Ома: $V = I R$
Плотность: формула плотности $ρ = \frac{m}{V}$
Теплоёмкость: формула теплоёмкости $Q = c m Δ T$
Закон Архимеда: $F_{A} = ρ g V$

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

Запустите браузер и нажмите комбинацию клавиш ⌃Ctrl + ⇧Shift + N , чтобы открыть приватное окно. Это необходимо для того, чтобы не сохранять ваш Google-аккаунт в браузере.

Перейдите на сайт App Inventor. Нажмите кнопку . Войдите в ваш Google-аккаунт.

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

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

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

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

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

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

ns = "oi-3a86ea"

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;
}

.fail{
  font-weight: bold;
  color: #EB5B00;
}

.pass{
  font-weight: bold;
  color: #578E7E;
}
</style>`

function countCatSum(lst){
  let sum = 0;
  const re = /\((\d+)\)/i;
  lst.forEach((el)=>{
    const found = el.match(re);
    sum += Number(found[1]);
  })
  
  return sum;
}

countCatSum = ƒ(lst)

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

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

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

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

introCL = Array(0) []

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

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

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

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

teoryCL = Array(0) []

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

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

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

calcCL = Array(0) []

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

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

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

devsCL = Array(0) []

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

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

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

generalCL = Array(0) []

Итоги

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

md`
| Категория | Балл |
|-------|---|
| **Вступительный экран** ${listTasks(introCL)} | ${countCatSum(introCL)} |
| **Экран с теорией** ${listTasks(teoryCL)} | ${countCatSum(teoryCL)} |
| **Экран с калькулятором** ${listTasks(calcCL)} | ${countCatSum(calcCL)} |
| **Экран с информацией об авторах** ${listTasks(devsCL)} | ${countCatSum(devsCL)} |
| **Общие настройки проекта** ${listTasks(generalCL)} | ${countCatSum(generalCL)} |
| **Итог** | <span class="${total >= 18 ? 'pass' : 'fail'}">${total}/28</span> |
`

Категория	Балл
Вступительный экран Нет выполненных задач	0
Экран с теорией Нет выполненных задач	0
Экран с калькулятором Нет выполненных задач	0
Экран с информацией об авторах Нет выполненных задач	0
Общие настройки проекта Нет выполненных задач	0
Итог	0/28

total = {
  return countCatSum(introCL) + countCatSum(teoryCL) + countCatSum(calcCL) + countCatSum(devsCL) + countCatSum(generalCL)
}

total = 0

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

listTasks = ƒ(arr)