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

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

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

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

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

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

Grace Hopper

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

dog looking at computer

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

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

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

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

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

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

chunks of chocolate

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

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

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

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

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

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

app with 5 buttons

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

it began as a mistake

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

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

О НЕТ!

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

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

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

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

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

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

Project menu, checkpoint selected

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

project menu, save as selected

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

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

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

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

app inventor expanding a block

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

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

collapsed block

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

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

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

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

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

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

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

disabled block by dragging out of event block

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

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

КОММЕНТАРИИ

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

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

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

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

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

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

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

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.

stylized A, AmeriCorps logo in navy

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

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

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

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

ShowAlert example

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

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

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

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

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

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

СДЕЛАЙТЕ ЭТО

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

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

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

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

 

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

Do it on pulldown menu

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

Do it block result

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

 

setting a list value with do it

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

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

updating a listview with do it

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

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

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

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

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

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

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

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

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

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

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

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

game with sprites

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

При отладке в MIT App Inventor такие инструменты искусственного интеллекта, как ChatGPT, Gemini и Claude помочь вам быстро обнаружить проблемы, которые легко упустить из виду в среде, основанной на блоках.

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

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

Используйте ИИ в качестве партнера по отладке, который не просто решает проблемы, а помогает понять, почему они возникли!

girls looking at laptop during demo

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

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

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

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

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

Это одно из возможных решений.

block solution to timer app

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

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

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

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

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

РАЗМЫШЛЕНИЕ

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

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

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

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

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