Depanarea codului dvs. în App Inventor

Aflați sfaturi pentru depanarea codului dvs. și remedierea erorilor în MIT App Inventor

CE ESTE DEPANAREA?

Debugging este procesul pe care programatorii îl folosesc pentru a-și da seama de ce codul lor nu funcționează și apoi pentru a-l repara astfel încât să funcționeze.

Termenul "debugging" provine de la amiralul Grace Hopper, un pionier în domeniul informaticii. Ea lucra la computerul Mark II la Universitatea Harvard în anii 1940 și o molie a rămas blocată în computer și l-a împiedicat să funcționeze.

Scapând de molie, ea a spus că „depanau” sistemul. Programatorii folosesc acum termenul pentru a însemna „corectarea erorilor din codul meu”.

Grace Hopper

SFATURI DE CODARE

dog looking at computer

Depanarea poate fi de multe ori cea mai frustrantă și consumatoare de timp parte a programării, așa că este foarte important să lăsați suficient timp pentru aceasta!

Și, de asemenea, să aveți răbdare!

CHUNKS MICI

Uneori, programatorii sunt tentați să codifice întreaga aplicație dintr-o dată, apoi să o testeze.

Nu cădeți în această tentație!!!

Dacă ceva nu funcționează corect, ceea ce este probabil, este greu să vă dați seama de unde să începeți pentru a încerca să remediați eroarea. 

chunks of chocolate

Împărțiți codificarea aplicației dvs. în bucăți mici. 

Puneți în funcțiune un lucru înainte de a începe cu următorul. 

Codificați un pic, testați un pic, confirmați că funcționează, apoi codificați un pic mai mult, testați un pic mai mult etc. 

De exemplu, dacă aplicația dvs. are 5 butoane care fac lucruri diferite,

  1. Codul acțiunii pentru primul buton
  2. Apoi testați pentru a vă asigura că funcționează.
  3. Treceți la al doilea buton
  4. Repetați.

Este mai bine să corectați codul într-un singur loc decât să vă întoarceți și să îl corectați în 5 locuri dacă există o eroare în codul dvs.

app with 5 buttons

CONTROLUL VERSIUNII

it began as a mistake

Să spunem că urmați regula "bucăților mici" și aveți o parte a aplicației dvs. construită și funcțională.

Adăugați un cod nou și dintr-o dată totul nu mai funcționează. 

OH NO!

Încercați să ștergeți noul cod, dar aplicația dvs. tot nu funcționează. Nu sunteți sigur ce a mers prost și v-ați dori să aveți un buton de "anulare".

Pentru a evita astfel de scenarii, puteți salva versiuni ale aplicației dvs. pe măsură ce obțineți părți funcționale. 

În acest fel, dacă faceți o greșeală și nu știți cum să o reparați, vă puteți întoarce la ultima versiune de lucru salvată.

De asemenea, puteți utiliza controlul versiunii pentru a experimenta cu noi caracteristici fără a vă face griji că vă veți strica aplicația funcțională.

Există două modalități de a salva versiuni diferite în App Inventor, utilizând "salvați ca" și "punct de control".

The "Punct de control" va salva o copie cu orice nume îi veți da, dar veți continua să lucrați în versiunea originală. Ideea este să "verificați" acea versiune care funcționează și să continuați dezvoltarea în versiunea principală a proiectului.

Project menu, checkpoint selected

Modul "Salvați proiectul ca" va crea o copie a codului la care lucrați și îl va salva sub un nume nou. Orice modificări pe care le faceți vor fi în noua copie.

project menu, save as selected

BLOCURI DE COLAPS

Colapsarea blocurilor este o modalitate de a vă menține codul organizat, deoarece spațiul de lucru al codului începe să fie aglomerat cu blocuri.

Dacă faceți clic dreapta pe un bloc, veți vedea o opțiune pentru a-l închide.

Pentru a extinde din nou blocurile, faceți clic dreapta pe ele și selectați Expand Block.

app inventor expanding a block

Blocurile prăbușite le vor comprima până la o singură bară pe ecran.

Ele funcționează la fel ca blocurile obișnuite, doar că ocupă mai puțin spațiu. Acest lucru poate fi util dacă aveți blocuri pe care nu mai trebuie să le editați și doriți să vă curățați ecranul

collapsed block

DEZACTIVAȚI BLOCURILE

De asemenea, puteți dezactiva blocurile.

Acestea rămân pe ecran, dar nu rulează în aplicație.

Cu blocurile dezactivate, vă puteți testa aplicația fără anumite blocuri de cod. Le puteți activa mai târziu și acestea vor rula.

De asemenea, puteți dezactiva blocurile pe care le-ați folosit doar pentru testare, cum ar fi notificatorii.

Există două moduri de a dezactiva blocurile în App Inventor

Simpla glisare a blocurilor dintr-un bloc manipulator de evenimente le va dezactiva și le va împiedica să se execute. Deoarece nu fac parte din niciun eveniment, nu există nicio șansă ca acestea să se execute vreodată. Puteți oricând să le activați din nou pentru a le utiliza.

disabled block by dragging out of event block

De asemenea, puteți face clic dreapta pe un bloc sau pe un grup de blocuri și puteți alege "Dezactivare bloc". Blocurile vor apărea gri pentru a arăta că nu vor fi executate. În acest fel, puteți dezactiva un întreg set de blocuri.

Pentru a activa din nou blocurile, faceți clic dreapta și alegeți "Activare bloc".

COMENTARII

Programatorii lasă adesea comentarii în codul lor pentru a explica ce face acesta. 

Comentariile pot fi utile atunci când alte persoane analizează codul dvs., cum ar fi colegii de echipă, mentorii și judecătorii.

De asemenea, comentariile vă pot fi de ajutor dacă reveniți mai târziu la codul dvs. și ați uitat ce fac anumite părți ale acestuia.

Pentru a adăuga un comentariu, faceți clic dreapta pe blocuri și selectați "Adaugă comentariu".

După aceea, un semn de întrebare va apărea în colțul blocului și puteți adăuga text. Puteți vizualiza comentariul făcând clic pe semnul de întrebare.

Cele mai bune practici: Comentariile sunt cel mai util lucru în programare.

Au existat multe situații în care un programator a codificat ceva, apoi s-a culcat și s-a întors a doua zi dimineață și nu avea nicio idee despre ceea ce făcuse cu o noapte înainte. Scrieți întotdeauna comentarii!

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. 

Cel mai bun tip de depanare este depanarea cu rață de cauciuc! Aceasta se întâmplă atunci când sunteți blocat în codul dvs. și acesta nu are niciun sens. Doriți să discutați cu altcineva pentru a vedea dacă poate identifica problema, dar, din păcate, nu este nimeni prin preajmă! Așa că ai o rățușcă de cauciuc de încredere la birou și îi explici problema cu voce tare prietenei tale rățuște. Totuși, trebuie să o faci în termeni foarte simpli pentru ca ea să înțeleagă și, după aceea, vei găsi singur problema! Toți colegii mei au rațe de cauciuc la birou și fac asta destul de des!

Întrebări orientative pentru elevi: Cât timp credeți că le ia programatorilor experimentați să depaneze bug-urile? Ați crede că ar putea deveni foarte rapizi la acest lucru, dar fiecare site mare are pagini dedicate pentru a vedea cât timp există bug-uri(Facebook, de exemplu) și vor arăta, de asemenea, dacă oricare dintre paginile lor sunt căzute/rupte și sunt în curs de depanare(exemplu Facebook).

Cum găsiți bug-uri? (multe și multe teste!) Cât de multe teste credeți că ar trebui să faceți? Cât de multe teste ar trebui să cereți altor oameni să facă?

Cum vă dați seama când ați găsit o eroare? Uneori vă petreceți o veșnicie făcând clic pe o imagine doar pentru a realiza că butonul pe care ar trebui să faceți clic este sub imagine. Este aceasta o eroare? Este o alegere de design pe care a făcut-o creatorul aplicației și ei nu cred că este un bug, dar tu poate că da.

Sfaturile mentorilor sunt oferite cu sprijinul AmeriCorps.

stylized A, AmeriCorps logo in navy

SFATURI DE DEPANARE

NOTIFICATORI ȘI ETICHETE

Notificatorul Notifier vă poate ajuta să vă dați seama de ce codul dvs. este defect. 

Pentru a plasa un notificator în aplicația dvs. App Inventor, trageți-l din paleta interfeței cu utilizatorul.

ShowAlert example

Cel mai simplu mod de a utiliza notificatorul este să adăugați blocuri ShowAlert cu informații pentru a vedea dacă anumite blocuri au fost executate (sau nu).

În plus față de mesaje, puteți afișa informații precum valoarea unei variabile sau poziția unui ImageSprite.

De asemenea, puteți adăuga Etichete pentru a afișa informații actuale în aplicația dvs. 

De exemplu, ați putea dori să cunoașteți valoarea unei variabile atunci când se întâmplă anumite evenimente în timpul rulării aplicației. 

Puteți seta Label.Text la ceea ce doriți să știți și va fi afișat pe aplicație. 

După ce ați depanat eroarea, puteți fie să faceți eticheta invizibilă, fie să o ștergeți complet din aplicație.

FĂ-O

 The Fă-o este un alt instrument excelent pentru depanare.

În timp ce vă testați aplicația live, fie cu un telefon și aplicația AI Companion, fie cu emulatorul, aveți acces la o nouă comandă, "Fă-o".

Comanda este afișată în gri până când vă conectați la un telefon sau la emulator prin meniul Conectare.

Do it vă permite să rulați un bloc fără a interacționa cu aplicația în sine, astfel încât să puteți vedea valoarea curentă a unei variabile sau a unui element. 

 

Doar trageți un bloc de variabile "get global" și faceți clic dreapta. Selectați "Do It" din meniul derulant și blocul de cod se va executa.

Do it on pulldown menu

O casetă galbenă "Do It" va apărea deasupra casetei cu rezultatul. Acest lucru poate funcționa și pentru orice proprietate componentă!

Do it block result

De asemenea, puteți utiliza opțiunea Do It pentru a modifica ceva în aplicație. De exemplu, ați putea dori să modificați un element dintr-o listă. Trageți blocul pentru a face acest lucru și selectați Do It. Nu veți vedea rezultatul, dar lista va fi actualizată în aplicație.

 

setting a list value with do it

De asemenea, puteți rula un bloc de cod existent în aplicația dvs. 

De exemplu, aici elementele ListView vor fi actualizate utilizând Do It. Acest lucru va fi reflectat în aplicație. ListView va afișa noile elemente stabilite cu ajutorul comenzii Do It.

updating a listview with do it

USE TEST DATA

Dacă aveți o mulțime de informații de utilizat în aplicația dvs., poate fi util să utilizați date de testare. Datele de testare reprezintă un set mai simplu și mai mic de date pe care le puteți utiliza pentru a vă asigura că aplicația dvs. funcționează corect.

Să spunem că creați o aplicație care afișează restaurantele din apropiere. Utilizați Google Sheets pentru a stoca informațiile despre restaurante.

Puteți începe cu doar unul sau două restaurante de testare și vă puteți testa aplicația pentru a vă asigura că funcționează.

După ce este testat și funcționează, puteți adăuga setul complet de date despre restaurante în foaia Google.

MODIFICAREA PROPRIETĂȚILOR

Dacă vă testați aplicația live, puteți modifica valoarea unei proprietăți în Designer în timp ce rulați aplicația și puteți vedea efectele acesteia.

Uneori, acest lucru poate ajuta la descoperirea unei probleme.

De exemplu, ați putea codifica un joc. Poziția unui sprite nu vi se pare corectă pe telefon atunci când rulează.

În timpul testării live, puteți

  1. Mergeți la designer
  2. modifică valorile X și Y ale Sprite-ului
  3. Poziția Sprite-ului pe ecran în aplicația care rulează se va schimba. 

Utilizați această funcție pentru a testa și a înțelege coordonatele de pe ecran.

game with sprites

UTILIZAREA AI PENTRU A AJUTA LA DEPANARE

La depanarea în MIT App Inventor, instrumentele AI precum ChatGPT, Gemini și Claude vă pot ajuta să identificați rapid problemele care sunt ușor de omis într-un mediu bazat pe blocuri.

De exemplu, dacă aplicația dvs. nu răspunde la clicurile pe butoane, puteți descrie AI blocurile dvs. de evenimente și întrebați dacă logica dvs. pare corectă. Deseori, veți constata că aceasta va detecta lucruri precum condiții greșit plasate sau inițializări lipsă.

Pentru unele instrumente AI, puteți chiar să încărcați o captură de ecran a blocurilor dvs. și să cereți AI să vă explice ce face logica. O nouă perspectivă vă poate oferi informații despre cum să vă optimizați mai bine codul.

Utilizați inteligența artificială ca un partener de depanare care nu doar rezolvă problemele, ci vă ajută să înțelegeți de ce s-au întâmplat!

girls looking at laptop during demo

ACTIVITATEA 1: REPARAREA MICROFONULUI

Durată estimată: 20 de minute

Corectarea erorilor în aplicația Timer

Aceasta Aplicație cronometru are câteva erori în el.

  1. Încărcați aplicația în App Inventor.
  2. Conectați-vă la emulator sau la dispozitiv pentru a testa aplicația.
  3. Încercați să apăsați Start fără să tastați nimic în caseta de text. Ce se întâmplă?
  4. Încercați să introduceți 0 sau un număr negativ pentru numărul de secunde. Ce se întâmplă?
  5. Reparați erorile folosind blocuri condiționale!

Aceasta este o soluție posibilă.

block solution to timer app

ACTIVITATEA 2: ADĂUGAȚI UN COMENTARIU

Timp estimat: 10 minute

Adăugați un comentariu la proiectul dumneavoastră App Inventor

Dacă ați început aplicația finală pentru Technovation, utilizați această aplicație pentru această activitate. În caz contrar, utilizați aplicația Timer de la Activitatea 1.

Adăugați cel puțin un comentariu la aplicația dvs. care să explice ce face un grup de blocuri. Alegeți un grup de blocuri care credeți că este cel mai greu de înțeles, deoarece aceste blocuri ar fi probabil cel mai greu de înțeles pentru altcineva, cum ar fi un membru al echipei.

REFLECȚIE

Aceste sfaturi vă pot ajuta atunci când începeți să codificați aplicația dvs. mobilă pentru proiectul Technovation.

Dar nu uitați...

Cu amabilitatea DKJS Franziska Schmitt
Codarea nu este ușoară.
Sunt șanse mari ca aplicația dvs. să nu funcționeze perfect la început!
Codul în bucăți mici.
Sărbătoriți atunci când reușiți să faceți să funcționeze o mică parte a aplicației dvs.
Luați pauze! Uneori, doar îndepărtarea de calculator pentru câteva minute vă poate oferi perspectiva proaspătă de care aveți nevoie.

REVIZUIREA TERMENILOR CHEIE

  • Debugging - procesul folosit de programatori pentru a-și da seama de ce codul lor nu funcționează și pentru a-l repara
  • Controlul versiunii - salvarea versiunilor de lucru ale aplicației dvs. pe măsură ce faceți progrese
  • Date de testare - un set mai simplu de date pe care le puteți utiliza pentru a vă asigura că aplicația dvs. funcționează corect
  • Comentarii - text care este inclus în cod pentru a explica ce face acesta

RESURSE SUPLIMENTARE