App Inventor'da kodunuzu hata ayıklama

MIT App Inventor'da kodunuzu hata ayıklama ve hataları düzeltme ipuçlarını öğrenin

HATA AYIKLAMA NEDİR?

Hata ayıklama , kodlayıcıların kodlarının neden çalışmadığını anlamak ve ardından çalışması için düzeltmek için kullandıkları süreçtir. 

Hata ayıklama terimi, bilgisayar biliminin öncülerinden Amiral Grace Hopper tarafından ortaya atılmıştır. 1940'larda Harvard Üniversitesi'nde Mark II bilgisayar üzerinde çalışırken, bir güve bilgisayara girmiş ve bilgisayarın çalışmasını durdurmuştur.

Güveyi ortadan kaldırarak, sistemi "hata ayıklıyor" olduklarını söyledi. Programcılar artık bu terimi "kodumdaki hataları düzeltmek" anlamında kullanıyor.

Grace Hopper

KODLAMA İPUÇLARI

dog looking at computer

Hata ayıklama, genellikle kodlamanın en sinir bozucu ve zaman alıcı kısmı olabilir, bu yüzden bu iş için bolca zaman ayırmak gerçekten önemlidir!

Ve ayrıca sabırlı olmak!

KÜÇÜK PARÇALAR

Bazen programcılar, uygulamalarının tamamını tek seferde kodlayıp test etmek isterler.

Bu cazibeye kapılmayın!!!

Bir şey düzgün çalışmazsa, ki bu muhtemeldir, hatayı düzeltmek için nereden başlamanız gerektiğini bulmak zor olabilir. 

chunks of chocolate

Uygulamanızın kodlamasını küçük parçalara ayırın. 

Bir şeyi halletmeden diğerine geçme. 

Biraz kod yazın, biraz test edin, çalıştığını onaylayın, sonra biraz daha kod yazın, biraz daha test edin, vb. 

Örneğin, uygulamanızda farklı işlevlere sahip 5 düğme varsa,

  1. İlk düğme için eylemi kodlayın
  2. Ardından çalışıp çalışmadığını test edin.
  3. İkinci düğmeye geçin
  4. Tekrarla.

Kodunuzda bir hata varsa, geri dönüp 5 yerde düzeltmektense, tek bir yerde düzeltmek daha iyidir.

app with 5 buttons

VERSİYON KONTROLÜ

it began as a mistake

Diyelim ki "küçük parçalar" kuralını uyguluyorsunuz ve uygulamanızın bir kısmı oluşturulmuş ve çalışır durumda.

Yeni bir kod ekliyorsunuz ve birdenbire her şey çalışmaz hale geliyor. 

OH HAYIR!

Yeni kodu silmeye çalışıyorsunuz, ancak uygulamanız hala çalışmıyor. Neyin yanlış gittiğinden emin değilsiniz ve bir "geri al" düğmesi olmasını diliyorsunuz.

Bu tür senaryolardan kaçınmak için uygulamanızın sürümlerini kayıt edebilirsiniz. 

Böylece, bir hata yaparsanız ve nasıl düzelteceğinizi bilmiyorsanız, kaydettiğiniz son çalışan sürüme geri dönebilirsiniz.

Ayrıca, sürüm kontrolünü kullanarak, çalışan uygulamanızı bozma endişesi duymadan yeni özellikleri deneyebilirsiniz.

App Inventor'da farklı sürümleri kaydetmenin iki yolu vardır: "farklı kaydet" ve "kontrol noktası".

Kontrol Noktası" seçeneği, verdiğiniz isimle bir kopyasını kaydeder, ancak siz orijinalinde çalışmaya devam edersiniz. Buradaki amaç, çalışan sürümü "kontrol noktası" olarak kaydetmek ve projenin ana sürümünde geliştirmeye devam etmektir.

Project menu, checkpoint selected

"Projeyi farklı kaydet" seçeneği, üzerinde çalıştığınız kodun bir kopyasını oluşturur ve yeni bir adla kaydeder. Yaptığınız tüm düzenlemeler yeni kopyada yer alır.

project menu, save as selected

ÇÖKME BLOKLARI

Blokları daraltmak, kod çalışma alanınız bloklarla dolmaya başladığında kodunuzu düzenli tutmanın bir yoludur.

Bir bloğa sağ tıklarsanız, onu daraltma seçeneği göreceksiniz.

Bloklarınızı tekrar genişletmek için, blokların üzerine sağ tıklayın ve Blok Genişlet'i seçin.

app inventor expanding a block

Çöken bloklar, ekranınızda bir çubuk boyutuna kadar sıkıştırılır.

Bunlar normal bloklarla aynı şekilde çalışır, sadece daha az yer kaplarlar. Artık düzenlemeniz gerekmeyen bloklarınız varsa ve ekranınızı temizlemek istiyorsanız bu özellik yararlı olabilir.

collapsed block

ENGELLEME ENGELLEME

Engellemeleri de devre dışı bırakabilirsiniz.

Ekranınızda kalırlar ancak uygulamada çalışmazlar.

Engellenen bloklar sayesinde, belirli kod blokları olmadan uygulamanızı test edebilirsiniz. Bunları daha sonra etkinleştirebilirsiniz ve çalışacaklardır.

Notifiers gibi yalnızca test amaçlı kullandığınız blokları da devre dışı bırakabilirsiniz.

App Inventor'da blokları devre dışı bırakmanın iki yolu vardır

Blokları bir olay işleyici bloğundan sürükleyerek çıkarmak, bunları devre dışı bırakır ve çalışmasını engeller. Herhangi bir olayın parçası olmadıkları için, hiçbir şekilde çalıştırılamazlar. Bunları kullanmak için her zaman geri takabilirsiniz.

disabled block by dragging out of event block

Bir bloğa veya blok grubuna sağ tıklayıp "Bloğu Devre Dışı Bırak" seçeneğini de seçebilirsiniz. Bloklar, çalışmayacaklarını göstermek için gri renkte görünecektir. Bu şekilde, bir blok grubunun tamamını devre dışı bırakabilirsiniz.

Bloklarınızı tekrar etkinleştirmek için, sağ tıklayın ve "Bloğu Etkinleştir" seçeneğini seçin.

YORUMLAR

Programcılar genellikle kodlarında ne işe yaradığını açıklamak için yorumlar bırakırlar. 

Yorumlar, takım arkadaşlarınız, mentorlarınız ve jüri üyeleri gibi diğer kişiler kodunuzu incelerken yardımcı olabilir.

Yorumlar, daha sonra kodunuza geri döndüğünüzde ve kodun hangi kısımlarının ne işe yaradığını unuttuğunuzda da yardımcı olabilir.

Yorum eklemek için bloklara sağ tıklayın ve "Yorum Ekle"yi seçin.

Bundan sonra, bloğun köşesinde bir soru işareti görünecek ve metin ekleyebileceksiniz. Soru işaretine tıklayarak yorumu görüntüleyebilirsiniz.

En iyi uygulamalar: Yorumlar, programlamada en yararlı şeydir.

Bir programcı bir şey kodladıktan sonra uykuya dalmış ve ertesi sabah uyandığında önceki gece ne yaptığını hiç hatırlamadığı birçok durum olmuştur. Her zaman yorum yazın!

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. 

En iyi hata ayıklama yöntemi, lastik ördek hata ayıklamadır! Bu, kodunuzda gerçekten takılıp kaldığınız ve hiçbir anlam ifade etmediği durumlarda kullanılır. Bir süre zaman ayırıp başka biriyle konuşarak sorunun ne olduğunu bulmaya çalışmak istersiniz, ama ne yazık ki etrafta kimse yok! Bu durumda masanızda güvenilir lastik ördeğiniz var ve sorunu ördek arkadaşınıza yüksek sesle anlatıyorsunuz. Ancak, onun anlayabilmesi için çok basit terimler kullanmanız gerekiyor ve ardından sorunu kendiniz bulacaksınız! Tüm iş arkadaşlarımın masalarında lastik ördekler var ve bunu sık sık yapıyorlar!

Öğrencilere sorulacak yol gösterici sorular: Deneyimli kodlayıcıların hataları gidermek için ne kadar süreye ihtiyaç duyduklarını düşünüyorsunuz? Bu konuda çok hızlı olduklarını düşünebilirsiniz, ancak her büyük sitenin hataların ne kadar süredir var olduğunu gösteren özel sayfaları vardır (örneğin Facebook) ve ayrıca sayfalarından herhangi birinin çalışmadığını/bozuk olduğunu ve şu anda hata giderme işlemi yaptıklarını da gösterirler (Facebook örneği).

Hataları nasıl buluyorsunuz? (çok çok fazla test yaparak!) Ne kadar test yapmanız gerektiğini düşünüyorsunuz? Başkalarına ne kadar test yaptırmalısınız?

Bir hata bulduğunuzu nasıl anlarsınız? Bazen bir resme sonsuza kadar tıklayıp durursunuz, ancak tıklamanız gereken düğmenin resmin altında olduğunu fark edersiniz. Bu bir hata mıdır? Bu, uygulama üreticisinin yaptığı bir tasarım seçimidir ve onlar bunu bir hata olarak görmezler, ancak siz öyle görebilirsiniz.

Mentor ipuçları AmeriCorps'un desteği ile sağlanmaktadır.

stylized A, AmeriCorps logo in navy

HATA AYIKLAMA İPUÇLARI

BİLDİRİCİLER VE ETİKETLER

The Bildirici bileşeni, kodunuzun neden bozuk olduğunu anlamanıza yardımcı olabilir. 

App Inventor uygulamanıza Notifier eklemek için, kullanıcı arayüzü paletinden sürükleyerek taşıyın.

ShowAlert example

Notifier'ı kullanmanın en kolay yolu, belirli blokların çalışıp çalışmadığını görebilmeniz için ShowAlert blokları eklemektir.

Mesajlara ek olarak, bir değişkenin değeri veya ImageSprite'ın konumu gibi bilgileri de görüntüleyebilirsiniz.

Ayrıca şunları da ekleyebilirsiniz Etiketler ekleyerek uygulamanızda güncel bilgileri görüntüleyebilirsiniz. 

Örneğin, uygulama çalışırken belirli olaylar meydana geldiğinde bir değişkenin değerini bilmek isteyebilirsiniz. 

Label.Text'i bilmek istediğiniz herhangi bir değere ayarlayabilirsiniz ve bu değer uygulamanızda görüntülenecektir. 

Hatayı giderdikten sonra, etiketi görünmez hale getirebilir veya uygulamanızdan tamamen silebilirsiniz.

YAPIN

 The Do it özelliği, hata ayıklama için bir başka harika araçtır.

Uygulamanızı canlı olarak test ederken, ister telefon ve AI Companion uygulaması ile ister emülatör ile, yeni bir komut olan "Do It" (Yap) komutuna erişebilirsiniz.

Bağlan menüsü aracılığıyla bir telefona veya emülatöre bağlanana kadar komut gri renkte görünür.

Do it, uygulama ile etkileşime girmeden bir bloğu çalıştırmanıza olanak tanır, böylece bir değişkenin veya öğenin geçerli değerini görebilirsiniz. 

 

"Get global" değişken bloğunu sürükleyip sağ tıklayın. Açılır menüden "Do It" seçeneğini seçin ve kod bloğu çalıştırılacaktır.

Do it on pulldown menu

Sonuçların bulunduğu kutunun üzerinde sarı bir Do It kutusu görünecektir. Bu, herhangi bir bileşen özelliği için de geçerlidir!

Do it block result

Do It'i uygulamanızda bir şeyi değiştirmek için de kullanabilirsiniz. Örneğin, bir listedeki bir öğeyi değiştirmek isteyebilirsiniz. Bunu yapmak için bloğu sürükleyin ve Do It'i seçin. Sonucu görmeyeceksiniz, ancak liste uygulamanızda güncellenecektir.

 

setting a list value with do it

Uygulamanızda mevcut bir kod bloğunu da çalıştırabilirsiniz. 

Örneğin, burada ListView öğeleri Do It kullanılarak güncellenecektir. Bu, uygulamaya yansıtılacaktır. ListView, Do It komutuyla ayarlanan yeni öğeleri gösterecektir.

updating a listview with do it

TEST VERİLERİNİ KULLANIN

Uygulamanızda kullanacağınız çok fazla bilgi varsa, test verilerini kullanmak faydalı olabilir. Test verileri, uygulamanızın doğru çalıştığından emin olmak için kullanabileceğiniz daha basit ve daha küçük bir veri kümesidir.

Diyelim ki, yakınınızdaki restoranları gösteren bir uygulama yapıyorsunuz. Restoran bilgilerini saklamak için Google Sheets kullanıyorsunuz.

Sadece bir veya iki test restoranıyla başlayabilir ve uygulamanızın çalıştığından emin olmak için test edebilirsiniz.

Test edip çalıştığından emin olduktan sonra, restoran verilerinin tamamını Google e-tablosuna ekleyebilirsiniz.

ÖZELLİKLERİ DEĞİŞTİR

Uygulamanızı canlı olarak test ediyorsanız, uygulamayı çalıştırırken Tasarımcı'da bir özellik değerini değiştirebilir ve bunun etkilerini görebilirsiniz.

Bazen bu, bir sorunu ortaya çıkarmaya yardımcı olabilir.

Örneğin, bir oyun kodluyorsunuz. Sprite'ın konumu, telefonunuzda çalışırken size doğru görünmüyor.

Canlı test sırasında şunları yapabilirsiniz:

  1. Tasarımcıya git
  2. Sprite'ın X ve Y değerlerini değiştirin
  3. Çalışan uygulamada Sprite'ın ekrandaki konumu değişecektir. 

Bunu, ekranınızdaki koordinatları test etmek ve anlamak için kullanın.

game with sprites

AI'YI HATA AYIKLAMADA KULLANMAK

MIT App Inventor'da hata ayıklama yaparken, ChatGPT, Gemini ve Claude gibi yapay zeka araçları, blok tabanlı bir ortamda gözden kaçması kolay sorunları hızlı bir şekilde tespit etmenize yardımcı olabilir.

Örneğin, uygulamanız düğme tıklamalarına yanıt vermiyorsa, olay bloklarınızı yapay zekaya açıklayabilir ve mantığınızın doğru olup olmadığını sorabilirsiniz. Genellikle, yanlış yerleştirilmiş koşullar veya eksik başlatmalar gibi sorunları yakalayacağını göreceksiniz.

Bazı AI araçları için, bloklarınızın ekran görüntüsünü yükleyebilir ve AI'dan mantığın nasıl çalıştığını adım adım açıklamalarını isteyebilirsiniz. Yeni bir bakış açısı, kodunuzu nasıl daha iyi optimize edebileceğiniz konusunda gerçekten fikir verebilir.

AI'yı sadece sorunları çözmekle kalmayıp, bunların neden oluştuğunu anlamanıza da yardımcı olan bir hata ayıklama ortağı olarak kullanın!

girls looking at laptop during demo

AKTİVİTE 1: HATAYI DÜZELTİN

Tahmini süre: 20 dakika

Zamanlayıcı uygulamasındaki hataları düzeltin

Bu Zamanlayıcı Uygulaması içinde birkaç hata var.

  1. Uygulamayı App Inventor'a yükleyin.
  2. Uygulamayı test etmek için emülatöre veya cihaza bağlanın.
  3. Metin kutusuna hiçbir şey yazmadan Başlat düğmesine basmayı deneyin. Ne olur?
  4. Saniye sayısı için 0 veya negatif bir sayı girmeyi deneyin. Ne olur?
  5. Koşullu blokları kullanarak hataları düzeltin!

Bu, olası bir çözümdür.

block solution to timer app

ETKİNLİK 2: YORUM EKLE

Tahmini süre: 10 dakika

App Inventor projenize yorum ekleyin

Technovation için son uygulamanızı başlattıysanız, bu etkinlik için o uygulamayı kullanın. Aksi takdirde, Etkinlik 1'deki Zamanlayıcı Uygulamasını kullanın.

Uygulamanıza, bir grup bloğun ne işe yaradığını açıklayan en az bir yorum ekleyin. Anlaşılması en zor olduğunu düşündüğünüz bir grup bloğu seçin, çünkü bu bloklar muhtemelen bir ekip üyesi gibi başka birinin anlaması en zor olan bloklardır.

YANSIMA

Bu ipuçları, Technovation projeniz için mobil uygulamanızı kodlamaya başlarken size yardımcı olabilir.

Ama unutmayın…

Fotoğraf DKJS Franziska Schmitt'in izniyle kullanılmıştır.
Kodlama kolay değildir.
Uygulamanızın başlangıçta mükemmel şekilde çalışmayacağı ihtimali yüksektir!
Küçük parçalar halinde kodlayın.
Uygulamanızın küçük bir kısmı çalışmaya başladığında bunu kutlayın.
Ara verin! Bazen bilgisayarınızdan birkaç dakika uzaklaşmak bile size ihtiyacınız olan yeni bir bakış açısı kazandırabilir.

ANAHTAR TERİMLERİN GÖZDEN GEÇİRİLMESİ

  • Hata ayıklama – kodlayıcıların kodlarının neden çalışmadığını anlamak ve düzeltmek için kullandıkları süreç
  • Sürüm Kontrolü ilerleme kaydederken uygulamanızın çalışma sürümlerini kaydetme
  • Test verileri – uygulamanızın doğru çalıştığından emin olmak için kullanabileceğiniz daha basit bir veri kümesi
  • Yorumlar kodun ne işe yaradığını açıklamak için koda eklenen metin

EK KAYNAKLAR