App Inventor ile mobil uygulama geliştirme serimize eğlenceli bir uygulamamızla daha devam ediyoruz. Uygulamamızın adı Adım Sayar’dır. Adım Sayar uygulamamız için telefonlarımızda bulunan pedometer sensörünü kullanacağız. Attığımız her adımı artık telefonumuz sayacaktır. Böylece sağlıklı bir yaşam için, etkinliklerimizde ne kadar adım attığımızı kendi geliştirdiğimiz uygulamamız ile kontrol edebiliriz. Önceki örneklerimizde programın temel kullanım mantığını ve becerilerini kavramıştık. O halde hemen uygulamamızı yapmaya başlayalım. Not: Gmail hesabı ile www.appinventor.mit.edu adresi üzerinden giriş sağlayabilirsiniz. İlk olarak ‘Start new project’ butonu ile yeni projemizi oluşturmaya başlıyoruz. ‘Project name’ için istediğiniz ismi verebilirsiniz; biz bu uygulamamızda “Adim_Sayar_Pedometre” ismini kullanacağız. İsmi yazıp ‘OK’ butonuna tıklayabiliriz. (Resim-1)
Tasarım ekranı ile karşılaşacağız. Sağ tarafta bulunan “Properties” menüsü altında bulunan “Align Horizontal” ve “Align Vertical” özelliklerini ayarlıyoruz. “BackgroundColor” özelliğini ise kendi isteğimize gore (bu uygulamamızda mavi rengini seçtik) değiştiriyoruz. (Resim-2)
Align Horizontal: Center: 3
Align Vertical: Center: 2
Background Color: Blue
Tasarımda kullanacağımız bileşenleri ekleyerek devam ediyoruz. Sol tarafta bulunan “Layout” menüsü altından “HorizontalArrangement” bileşenini ekranımıza sürükleyerek bırakıyoruz. Sağ tarafta bulunan “Properties” menüsü altından; Align Horizontal: Center: 3 Align Vertical: Center: 2 Background Color: White özelliklerini seçiyoruz.
Sol tarafta bulunan “User Interface” menüsü altından iki adet “Label” bileşenini oluşturmuş olduğumuz “HorizontalArrangement” alanının içerisine bırakalım. Sağ tarafta bulunan “Properties” menüsü altından; Label 2 FontSize: 24.0 Text: Adım Sayısı Label 1 FontSize: 24.0 Text: 0 alanlarını bu şekilde düzenliyoruz. Not: Label 1 ve Label 2’yi ayrı ayrı düzenlemeyi unutmayınız.
Sol tarafta bulunan “User Interface” menüsü altından iki adet “Button” bileşenini oluşturmuş olduğumuz “HorizontalArrangement” alanının içerisine bırakalım. Ancak butonların en sağa gelmesine dikkat edelim. Sağ tarafta bulunan “Properties” menüsü altından; Say Butonu Background Color: Red Text: Say Text Color: White Sıfırla Butonu Background Color: Green Text: Sıfırla alanlarını bu şekilde düzenliyoruz. Not: “Components” sekmesi altında bulunan bileşenlerin üzerine tıklayıp “Rename” butonuna tıklarsanız bileşenlerin ismini istediğiniz gibi değiştirebilirsiniz.
Sol tarafta bulunan “Sensors” menüsü altından “Pedometer” bileşenini ekranımıza sürükleyip bırakalım.
Sağ üst köşede bulunan “Blocks” butonuna tıklayalım ve kodlama ekranına geçelim. 
Kodlama ekranımızın son görüntüsü Resim-9’daki gibidir. Sol tarafta bulunan “Blocks” sekmesi altından;
- “Say” butonuna tıklıyoruz ve “when Say .Click” bileşenini çalışma ekranımıza sürükleyip bırakıyoruz.
- “Sıfırla” butonuna tıklıyoruz ve “when Sıfırla .Click” bileşenini çalışma ekranımıza sürükleyip bırakıyoruz.
- “Pedometer1” bileşenine tıklıyoruz ve “call Pedometer1 .Start” bileşenini “when Say .Click” blogunun içerisine bırakalım. Böylece pedometer sensörünü çalılştıracağız.
- “Pedometer1” bileşenine tekrar tıklıyoruz ve “call Pedometer1 .Stop” bileşenini “when Sıfırla .Click” blogunun içerisine bırakalım.
- “Label1” bileşeni üzerine tıklayalım ve “set Label1. Text to” bileşenini “when Say .Click” blogunun içerisine bırakalım.
- Aynı şekilde “Label1” bileşeni üzerine tekrar tıklayalım ve “set Label1. Text to” bileşenini bileşenini “when Sıfırla .Click” blogunun içerisine bırakalım.
- Sol tarafta bulunan “Text” menüsü altından “ ” bloğunu “when Sıfırla .Click” blogunun içerisinde bulunan “set Label1. Text to” bileşeni ile birleştiriniz.
- “Pedometer1” bileşenine tıklayalım ve “Pedometer1. WalkSteps” bileşenini “set Label1. Text to” bileşeni ile birleştirelim.
Kodlama işlemini de bitirdiğimize göre, artık programımızı çalıştırabiliriz. “Build” menüsünden “provide QR code for .apk” seçeneğini tıklayarak oluşturmuş olduğumuz mobil uygulamayı telefonunuza indirmek için QR kod oluşturabilirsiniz.
App Inventor Adımsayar Uygulaması Ekran Görüntüsü
