在 App Inventor 中調試代碼

瞭解在 MIT App Inventor 中調試代碼和修復錯誤的提示

什麼是調試?

調試 是編碼人員用來找出他們的代碼不工作的原因,然後修復它以使其正常工作的過程。

“調試”一詞來自海軍上將 Grace Hopper,他是計算領域的先驅。1940 年代,她在哈佛大學使用 Mark II 計算機,一隻飛蛾卡在計算機中並阻止了它的工作。

擺脫飛蛾後,她說他們正在“調試”系統。程式師現在使用這個術語來表示「修復我的代碼中的錯誤」。

格蕾絲·霍珀

編碼提示

狗看著電腦

調試通常是編碼中最令人沮喪和最耗時的部分,因此為調試留出足夠的時間非常重要!

也要有耐心!

小塊

有時,程式師很想一次性編寫整個應用程式,然後進行測試。

不要被這種誘惑所迷惑!!

如果某些東西不能正常工作,這是可能的,甚至很難弄清楚從哪裡開始嘗試修復錯誤。 

大塊的巧克力

將應用的編碼分解為小塊。 

在開始下一件事之前,先讓一件事正常工作。 

編碼一點,測試一點,確認它有效,然後再編碼一點,測試更多,等等。 

例如,如果您的應用有5個按鈕,它們都執行不同的操作,

  1. 對第一個按鈕的操作進行編碼
  2. 然後進行測試以確保其正常工作。
  3. 移至第二個按鈕
  4. 重複。

如果代碼中有錯誤,最好在一個地方修復代碼,而不是返回並在5個地方修復它。

帶有 5 個按鈕的應用程式

版本控制

它開始是一個錯誤

假設您遵循「小塊」規則,並且構建並運行了應用程式的一部分。

你添加了一些新代碼,突然間一切都停止了工作。 

哦不!

您嘗試刪除新代碼,但您的應用仍無法運行。你不確定出了什麼問題,希望你有一個「撤消」按鈕。

為了避免出現這樣的情況,您可以在使部件工作時保存應用 的版本 。 

這樣,如果您犯了錯誤並且不知道如何修復它,您可以返回到您保存的最後一個工作版本。

您還可以使用版本控制來試驗新功能,而不必擔心會破壞您的工作應用程式。

在 App Inventor 中保存不同版本有兩種方法,使用“另存為”和“檢查點”。

檢查點”選項將保存您為其提供的任何名稱的副本,但您將繼續在原始副本中工作。這個想法是「檢查點」那個有效的版本,並在專案的主版本中繼續你的開發。

項目功能表,選中檢查點

將專案另存為” 選項將創建您正在處理的代碼的副本,並將其保存為新名稱。您所做的任何編輯都將顯示在新複本中。

項目功能表,另存為選中狀態

摺疊塊

摺疊塊是保持代碼井井有條的一種方式,因為您的代碼工作區開始被塊擠滿。

如果右鍵按下某個塊,您將看到一個摺疊它的選項。

要再次擴展您的塊,請右鍵按下它們並選擇擴展塊。

App Inventor 擴展塊

摺疊的塊會將其壓縮到螢幕上的一個條形。

它們的工作方式仍然與普通塊相同,只是佔用的空間更少。如果您有不再需要編輯的塊並希望清理螢幕,這會很有説明

坍塌的塊

禁用塊

您也可以禁用阻止。

它們會保留在您的螢幕上,但不會在應用程式中運行。

使用禁用塊,您可以在沒有某些代碼塊的情況下測試您的應用程式。您可以稍後啟用它們,它們將運行。

您還可以禁用僅用於測試的塊,例如通知程式。

有兩種方法可以在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 元件可以説明您找出代碼損壞的原因。 

要在 App Inventor 應用程式中放置通知程式,請將其從使用者介面面板中拖動過來。

ShowAlert 示例

使用通告程式的最簡單方法是添加包含資訊的 ShowAlert 塊,以便您查看某些塊已運行(或未運行)。

除了消息之外,您還可以顯示變數的值或 ImageSprite 的位置等資訊。

您還可以新增 標籤 以顯示應用中的目前的資訊。 

例如,您可能想知道變數的值,因為某些事件在應用運行時發生。 

您可以將 Label.Text 設置為您想知道的任何內容,它將顯示在您的應用程式上。 

調試錯誤后,您可以使標籤不可見,或者將其從應用中完全刪除。

做吧

  “執行”功能是另一個很棒的調試工具。

當您使用手機和 AI Companion 應用程式或使用模擬器即時測試您的應用程式時,您可以存取新命令“Do It”

在您通過「連接」功能表連接到電話或模擬器之前,該命令會顯示為灰色。

Do it 讓您無需與應用程式本身交互即可運行塊,因此您可以查看變數或元素的當前值。 

 

只需拖出一個「獲取全域」變數塊,然後右鍵按兩下即可。從下拉功能表中選擇“Do It”,該代碼塊將執行。

在下拉功能表上進行操作

一個黃色的“Do It”框將出現在包含結果的框上方。這也適用於任何元件屬性!

Do it 阻止結果

您還可以使用“執行”來更改應用中的某些內容。例如,您可能想要更改清單中的項。拖出塊以執行此操作,然後選擇“執行”。您不會看到結果,但清單將在您的應用中更新。

 

使用 Do It 設定清單值

您還可以在應用中運行現有代碼塊。 

例如,此處的 ListView 元素將使用 Do It 進行更新。這將反映在應用程式中。ListView 將顯示使用「執行此操作」命令設置的新元素。

使用 Do It 更新 ListView

使用測試數據

如果應用中要使用大量資訊,則使用測試數據可能會有所説明。測試數據是一組更簡單、更小的數據集,可用於確保應用正常運行。

假設您正在製作一個顯示附近餐館的應用程式。您正在使用 Google 表格來儲存餐廳資訊。

你可以從一兩個測試餐廳開始,然後測試你的應用程式,以確保它能正常工作。

一旦它經過測試並運行,您就可以將完整的餐廳數據集添加到您的 Google 表格中。

更改屬性

如果您正在即時測試您的應用程式,則可以在運行應用程式並查看其效果時在設計器中更改屬性值。

有時,這有助於發現問題。

例如,您可能正在編寫一個遊戲。當Sprite運行時,它的位置在您看來在手機上看起來不對。

在即時測試時,您可以

  1. 轉到設計師
  2. 更改 Sprite 的 X 和 Y 值
  3. 在正在運行的應用程式中,精靈在螢幕上的位置將發生變化。 

使用它來測試和理解螢幕上的座標。

與精靈的遊戲

活動 1:修復 BUG

預計時間:20 分鐘

修復定時器應用中的錯誤

計時器應用程式 其中有幾個錯誤。

  1. 將應用程式載入到 App Inventor 中。
  2. 連接到模擬器或設備以測試應用。
  3. Try pressing Start without typing anything into the textbox. What happens?
  4. 嘗試輸入 0 或負數表示秒數。會發生什麼?
  5. 使用條件塊修復錯誤!

活動二:添加評論

預計時間:10 分鐘

向 App Inventor 專案添加註釋

如果您已啟動Technovation的最後一個應用程式,請使用該應用程式進行此活動。否則,請使用活動 1 中的計時器應用程式。

在您的應用中至少添加一條評論,解釋一組塊的作用。選擇一組你認為最難理解的塊,因為這些塊對其他人(如團隊成員)來說可能是最難理解的。

反射

當您開始為您的 Technovation 專案編寫行動應用程式時,這些提示可以説明您。

但請記住......

照片由 DKJS Franziska Schmitt 提供
編碼並不容易。
您的應用程式可能無法完美運行以啟動!
以小塊為單位編寫代碼。
當您讓應用的一小部分正常工作時,請慶祝一下。
休息一下!有時,只需離開電腦幾分鐘就可以為您提供所需的新視角。

關鍵術語的審查

  • 調試 – 流程編碼人員用來找出他們的代碼不工作的原因並修復它
  • 版本控制 在取得進展時保存應用程式的工作版本
  • 測試數據 – 一組更簡單的數據,可用於確保應用正常運行
  • 註釋 包含在代碼中的文本,用於解釋其功能

其他資源

以下是一些其他 App Inventor 調試資源。