Отладка кода в App Inventor

Узнайте советы по отладке кода и исправлению ошибок в MIT App Inventor

ЧТО ТАКОЕ ОТЛАДКА?

Отладка Это процесс, с помощью которого кодеры выясняют, почему их код не работает, а затем исправляют его, чтобы он заработал.

Термин "отладка" появился благодаря адмиралу Грейс Хоппер, пионеру в области вычислительной техники. Она работала над компьютером Mark II в Гарвардском университете в 1940-х годах, и в компьютере застряла моль, которая не давала ему работать.

Избавившись от мотылька, она сказала, что они "отлаживают" систему. Сейчас программисты используют этот термин для обозначения "исправления ошибок в моем коде".

Грейс Хоппер

СОВЕТЫ ПО КОДИРОВАНИЮ

собака смотрит на компьютер

Отладка часто бывает самой неприятной и трудоемкой частью кодирования, поэтому очень важно оставлять для нее достаточно времени!

А также набраться терпения!

МАЛЕНЬКИЕ КУСОЧКИ

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

Не поддавайтесь на это искушение!!!

Если что-то работает некорректно, что вполне вероятно, трудно понять, с чего начать, чтобы попытаться исправить ошибку. 

кусочки шоколада

Разбейте кодировку вашего приложения на небольшие фрагменты. 

Прежде чем приступать к следующему, сделайте одну вещь рабочей. 

Немного кода, немного тестирования, подтверждение того, что все работает, затем еще немного кода, еще немного тестирования и т.д. 

Например, если в вашем приложении есть 5 кнопок, которые выполняют разные действия,

  1. Задайте действие для первой кнопки
  2. Затем протестируйте, чтобы убедиться, что все работает.
  3. Перейдите ко второй кнопке
  4. Повторяйте.

Лучше исправить код в одном месте, чем возвращаться и исправлять его в 5 местах, если в нем есть ошибка.

приложение с 5 кнопками

КОНТРОЛЬ ВЕРСИЙ

все началось с ошибки

Допустим, вы следуете правилу "маленьких кусочков" и у вас есть одна часть приложения, которая создана и работает.

Вы добавляете новый код, и вдруг все перестает работать. 

О НЕТ!

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

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

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

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

В App Inventor есть два способа сохранения различных версий: "сохранить как" и "контрольная точка".

The "Контрольная точка" сохранит копию с любым именем, но вы продолжите работу в оригинале. Идея заключается в том, чтобы "поставить контрольную точку" на той версии, которая работает, и продолжить разработку в основной версии проекта.

Меню проекта, выбрана контрольная точка

Сайт "Сохранить проект как" создаст копию кода, над которым вы работаете, и сохранит ее под новым именем. Все внесенные вами правки будут сохранены в новой копии.

меню проекта, сохранить как выбранный

РАЗРУШАЮЩИЕСЯ БЛОКИ

Свертывание блоков - это способ сохранить организованность кода, поскольку рабочее пространство кода начинает переполняться блоками.

Если вы щелкните правой кнопкой мыши на блоке, появится возможность свернуть его.

Чтобы снова развернуть блоки, щелкните на них правой кнопкой мыши и выберите пункт Развернуть блок.

Изобретатель приложения расширяет блок

Сложенные блоки сжимаются до одной полоски на экране.

Они работают так же, как и обычные блоки, просто занимают меньше места. Это может быть полезно, если у вас есть блоки, которые вам больше не нужно редактировать, и вы хотите очистить экран.

разрушенный блок

ОТКЛЮЧИТЬ БЛОКИ

Вы также можете отключить блоки.

Они остаются на экране, но не запускаются в приложении.

С помощью отключенных блоков вы можете протестировать приложение без определенных блоков кода. Позже вы можете включить их, и они будут работать.

Вы также можете отключить блоки, которые вы использовали только для тестирования, например Notifiers.

Есть два способа отключить блоки в App Inventor

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

отключение блока путем перетаскивания из блока событий

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

Чтобы снова включить блоки, просто щелкните правой кнопкой мыши и выберите "Включить блок".

КОММЕНТАРИИ

Программисты часто оставляют комментарии в коде, чтобы объяснить, что он делает. 

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

Комментарии также могут помочь, если вы вернетесь к коду позже и забудете, что в нем происходит.

Чтобы добавить комментарий, щелкните правой кнопкой мыши на блоках и выберите "Добавить комментарий".

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

Лучшие практики: Комментарии - самая полезная вещь в программировании.

Бывали случаи, когда кодер что-то кодировал, а потом ложился спать и возвращался на следующее утро, не имея ни малейшего представления о том, что он делал накануне. Всегда пишите комментарии!

It’s also a great way to check your knowledge, because if your coding blocks are easy to comment on then you must understand them really well! Another thing to be aware of is that <, >, =, ≤, ≥ are hard for students for the first time (and for programmers who are years into their careers). When we set a math statement to < when it should be ≤ this is called an “off by one” error and this is a problem that happens to developers with 20 years of experience 😛 It is a very popular problem so be on the lookout for that. 

Лучший тип отладки - это отладка с помощью резиновой утки! Это когда вы действительно застряли в своем коде, и он не имеет смысла. Вы хотите потратить немного времени на то, чтобы обсудить это с кем-то еще, чтобы увидеть, смогут ли они заметить проблему, но, к сожалению, никого нет рядом! Тогда у вас на столе появляется верная резиновая уточка, и вы вслух объясняете проблему своему другу-утке. Вы должны сделать это очень простым языком, чтобы они поняли, и тогда вы сами найдете проблему! У всех моих коллег есть резиновые уточки на столах, и мы часто так делаем!

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

Как вы находите ошибки? (Много-много тестирования!) Как вы думаете, сколько тестирования вы должны делать? Сколько тестирования нужно поручить другим людям?

Как узнать, что вы нашли ошибку? Иногда вы можете целую вечность щелкать по изображению, а потом понять, что кнопка, которую вы должны были нажать, находится под изображением. Является ли это ошибкой? Это дизайнерский выбор, который сделал создатель приложения, и они не считают это ошибкой, но вы можете подумать.

Советы для менторов предоставлены при поддержке AmeriCorps.

стилизованная буква A, логотип AmeriCorps в морском цвете

СОВЕТЫ ПО УСТРАНЕНИЮ НЕПОЛАДОК

НОТИФИКАТОРЫ И МЕТКИ

Сайт Notifier Компонент Notifier поможет вам выяснить, почему ваш код не работает. 

Чтобы поместить уведомление в приложение App Inventor, перетащите его из палитры пользовательского интерфейса.

Пример ShowAlert

Самый простой способ использовать Notifier - добавить блоки ShowAlert с информацией, чтобы вы могли видеть, что определенные блоки были запущены (или нет).

Помимо сообщений, вы можете отображать такую информацию, как значение переменной или положение ImageSprite.

Вы также можете добавить Ярлыки для отображения текущей информации в вашем приложении. 

Например, вы можете захотеть узнать значение переменной при наступлении определенных событий во время работы приложения. 

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

Отладив ошибку, вы можете либо сделать Label невидимым, либо вообще удалить его из приложения.

СДЕЛАЙТЕ ЭТО

 Сайт Сделать это Функция Do it - еще один отличный инструмент для отладки.

Во время тестирования приложения в реальном времени, либо с помощью телефона и приложения AI Companion, либо с помощью эмулятора, у вас есть доступ к новой команде "Сделать это".

Пока вы не подключитесь к телефону или эмулятору через меню "Подключиться", эта команда не будет отображаться серым цветом.

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

 

Просто перетащите блок переменных "get global" и щелкните правой кнопкой мыши. Выберите "Сделать это" из выпадающего меню, и этот блок кода будет выполнен.

Сделать это в выпадающем меню

Над полем с результатом появится желтое поле Do It. Это может работать и для любого свойства компонента!

Результат блока "Сделай это

Вы также можете использовать Do It, чтобы изменить что-то в своем приложении. Например, вы можете захотеть изменить элемент в списке. Перетащите блок, чтобы сделать это, и выберите Do It. Вы не увидите результата, но список будет обновлен в вашем приложении.

 

установка значения списка с помощью функции do it

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

Например, здесь элементы ListView будут обновляться с помощью Do It. Это будет отражено в приложении. В ListView будут отображаться новые элементы, установленные с помощью команды Do It.

обновление представления списка с помощью

ДАННЫЕ ТЕСТА ИСПОЛЬЗОВАНИЯ

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

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

Вы можете начать с одного или двух тестовых ресторанов и протестировать свое приложение, чтобы убедиться, что оно работает.

После того как все проверено и работает, вы можете добавить полный набор данных о ресторанах в свой лист Google.

ИЗМЕНИТЬ СВОЙСТВА

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

Иногда это помогает выявить проблему.

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

Во время тестирования в реальном времени вы можете

  1. Перейти к конструктору
  2. изменить значения X и Y спрайта
  3. Положение спрайта на экране в запущенном приложении изменится. 

Используйте его для проверки и понимания координат на экране.

игра со спрайтами

ЗАНЯТИЕ 1: ИСПРАВЬТЕ ОШИБКУ

Расчетное время: 20 минут

Исправление ошибок в приложении "Таймер

Это Приложение для таймера в нем есть несколько ошибок.

  1. Загрузите приложение в App Inventor.
  2. Подключитесь к эмулятору или устройству, чтобы протестировать приложение.
  3. Try pressing Start without typing anything into the textbox. What happens?
  4. Попробуйте ввести 0 или отрицательное число для количества секунд. Что произойдет?
  5. Исправьте ошибки с помощью условных блоков!

ЗАДАЧА 2: ДОБАВИТЬ КОММЕНТАРИЙ

Расчетное время: 10 минут

Добавить комментарий к проекту App Inventor

Если вы уже запустили свое финальное приложение для Technovation, используйте его для этого задания. В противном случае используйте приложение "Таймер" из задания 1.

Добавьте в приложение хотя бы один комментарий, объясняющий, что делает та или иная группа блоков. Выберите группу блоков, которую, по вашему мнению, труднее всего понять, потому что эти блоки, вероятно, будет труднее всего понять кому-то другому, например члену команды.

РЕФЛЕКСИЯ

Эти советы помогут вам, когда вы начнете писать мобильное приложение для своего проекта Technovation.

Но помните...

Фото предоставлено DKJS Franziska Schmitt
Кодирование - дело непростое.
Велика вероятность того, что ваше приложение не будет работать идеально с самого начала!
Разбивайте код на небольшие фрагменты.
Отпразднуйте, когда вам удастся заставить работать хотя бы небольшую часть вашего приложения.
Делайте перерывы! Иногда просто отойдите от компьютера на несколько минут, и вы сможете взглянуть на вещи свежим взглядом.

ОБЗОР ОСНОВНЫХ ТЕРМИНОВ

  • Отладка - процесс, с помощью которого кодеры выясняют, почему их код не работает, и исправляют его
  • Контроль версий - сохранение рабочих версий вашего приложения по мере продвижения вперед
  • Тестовые данные - Простой набор данных, который можно использовать, чтобы убедиться, что ваше приложение работает правильно
  • Комментарии - текст, который включается в код, чтобы объяснить, что он делает