Uygulama 18 Ağustos 2021 Altan Topçu 0 Yorum

App Inventor Uygulaması ile Servo Motor Kontrolü

App İnventor Uygulama Tasarımı:

  1. App İnventor uygulamasında yeni bir proje oluşturuyoruz.
  2. Sol tarafta yer alan bölümlerden “Connectivity” seçeneği altından “BluetoothClient” özelliğini projemize sürükleyip bırakıyoruz. Sağ tarafta yer alan Components bölümünde aracımız gözükmüş olacaktır.
  3. Components altındaki Screen1 özelliğinin üstünde tıklıyoruz ve sağ tarafta yer alan Properties bölümünde gerekli düzenlemeleri yapıyoruz. Bu proje için yapılan düzenlemeler şunlardır.
    1. AlignHorizontal ve AlignVertical seçeneklerini center yapıyoruz.
    2. BackgroundColor seçeneğinde arka plan rengini değiştiriyoruz.
  4. Sol tarafta yer alan “Palette” bölümü altında yer alan “User Interface” araçlarından bir adet “Label” alıp projemize sürüklüyoruz. “Components” bölümünden Label1 aracına tıklıyoruz ve “Properties“ bölümü altındaki TEXT seçeneğinde Labelımızın üzerindeki yazıyı “Bağlantı Kurulamadı” olarak değiştiriyoruz. Ardından TextColor seçeneğinden yazı rengimizi red yapıyoruz.
  5. Sol tarafta yer alan “Palette” bölümü altında yer alan “User Interface” araçlarından iki adet “Button” alıp projemize ekliyoruz. “Component” bölümüne gelip butonlarımızın üstüne tıklayıp alt tarafta yer alan “Rename” seçeneğinden isimlerin değiştiriyoruz. “Properties” kısmından BackgroundColor rengini Default olarak tanımlıyoruz. Butonlarımızın yazı renklerini TextColor seçeneğinden Default yapıyoruz.

Projemizin App Inventor Ekran Görüntüsü:

Şimdi App Inventor uygulaması üzerindeki gerekli kodlamalarımızı yapıyoruz. Bunun için sağ üst tarafta yer alan Designer – Blocks sekmelerinden Blocks’a geçiş yapıyoruz.

App Inventor Kodları:

1. Adım) Sol tarafta yer alan Screen1 altındaki ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu seçiyoruz:

2. Adım) ListPicker1 modülüne tıklıyoruz şu kod bloğunu seçiyoruz ve 1.adımdaki bloğumuzun içine yerleştiriyoruz.

3. Adım) BluetoothClient1 modülüne tıklıyoruz şu kod bloğunu seçiyoruz ardından 2.adımdaki bloğun sağ tarafına yerleştiriyoruz.

4. Adım) ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu seçiyoruz:

5. Adım) Label1 modülüne tıklıyoruz ve şu kod bloğunu 4.adımdaki kod bloğunun içerisine yerleştiriyoruz.

6. Adım) Screen1 bölümü altındaki Built-in seçeneğinden Colors bölümü içerisinden yeşil renk bloğunu 5.adındaki bloğun sağına yerleştiriyoruz.

7. Adım) Label1 modülüne tıklıyoruz ve şu kod bloğunu 4. ve 5. adımdaki kod bloğunun altına yerleştiriyoruz.

8. Adım) Screen1 bölümü altındaki Built-in seçeneğinden Text altındaki şu kod bloğunun içerisine “Bağlantı Kuruldu” yazıyoruz. Ardında bu kod bloğunu 7.adımdaki kod bloğunun sağına yerleştiriyoruz.

9. Adım) ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu 7. ve 8. adımda yer alan kod bloklarının altına yerleştiriyoruz.

10. Adım) BluetoothClient1 modülü altında yer alan şu kod bloğunu 9.adımdaki kod bloğunun sağına yerleştiriyoruz.

11. Adım) ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu 10.adımda yer alan kod bloğunu sağına yerleştiriyoruz.

12. Adım) Button1 modülüne tıklıyoruz ve şu kod bloğunu seçiyoruz.

13. Adım) BluetoothClient1 modülüne tıklıyoruz ve şu kod bloğunu 12.adaımdaki kod bloğunun altına yerleştiriyoruz.

14. Adım) Built-in seçeneği altından Math bölümüne tıklıyoruz ve şu kod bloğunun içerisine 1 yazıyoruz.

15. Adım) Oluşturduğumuz kod bloğunun üzerine gelip sağ tık yapıyoruz ve Duplicate seçeneğine tıklıyoruz ve kod bloğumuzun kopyasını oluşturmuş oluyoruz.

16. Adım) Button1 bölümünü Butoon2 olarak değiştiriyoruz ve 1 olan sayıyı 0 yapıyoruz.

17. Adım) Uygulamamızı sitenin üst tarafında yer alan Build seçeneği altındaki App(Provide OR code for apk) seçeneğine tıklıyoruz herhangi bir QR kod okuyucuya ilgili kodu okutuyoruz.

Önemli Not: Chrome web tarayıcısı ile hata yaşıyorsanız başka bir web tarayıcısını kullanmanız gerekmektedir. Bu uygulama yapılırken Mozilla Firefox tarayıcısı kullanıldı.

App İnventor Uygulama Tasarımı:

  1. App İnventor uygulamasında yeni bir proje oluşturuyoruz.
  2. Sol tarafta yer alan bölümlerden “Connectivity” seçeneği altından “BluetoothClient” özelliğini projemize sürükleyip bırakıyoruz. Sağ tarafta yer alan Components bölümünde aracımız gözükmüş olacaktır.
  3. Components altındaki Screen1 özelliğinin üstünde tıklıyoruz ve sağ tarafta yer alan Properties bölümünde gerekli düzenlemeleri yapıyoruz. Bu proje için yapılan düzenlemeler şunlardır.
    1. AlignHorizontal ve AlignVertical seçeneklerini center yapıyoruz.
    2. BackgroundColor seçeneğinde arka plan rengini değiştiriyoruz.
  4. Sol tarafta yer alan “Palette” bölümü altında yer alan “User Interface” araçlarından bir adet “Label” alıp projemize sürüklüyoruz. “Components” bölümünden Label1 aracına tıklıyoruz ve “Properties“ bölümü altındaki TEXT seçeneğinde Labelımızın üzerindeki yazıyı “Bağlantı Kurulamadı” olarak değiştiriyoruz. Ardından TextColor seçeneğinden yazı rengimizi red yapıyoruz.
  5. Sol tarafta yer alan “Palette” bölümü altında yer alan “User Interface” araçlarından iki adet “Button” alıp projemize ekliyoruz. “Component” bölümüne gelip butonlarımızın üstüne tıklayıp alt tarafta yer alan “Rename” seçeneğinden isimlerin değiştiriyoruz. “Properties” kısmından BackgroundColor rengini Default olarak tanımlıyoruz. Butonlarımızın yazı renklerini TextColor seçeneğinden Default yapıyoruz.

Projemizin App Inventor Ekran Görüntüsü:

Şimdi App Inventor uygulaması üzerindeki gerekli kodlamalarımızı yapıyoruz. Bunun için sağ üst tarafta yer alan Designer – Blocks sekmelerinden Blocks’a geçiş yapıyoruz.

App Inventor Kodları:

1. Adım) Sol tarafta yer alan Screen1 altındaki ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu seçiyoruz:

2. Adım) ListPicker1 modülüne tıklıyoruz şu kod bloğunu seçiyoruz ve 1.adımdaki bloğumuzun içine yerleştiriyoruz.

3. Adım) BluetoothClient1 modülüne tıklıyoruz şu kod bloğunu seçiyoruz ardından 2.adımdaki bloğun sağ tarafına yerleştiriyoruz.

4. Adım) ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu seçiyoruz:

5. Adım) Label1 modülüne tıklıyoruz ve şu kod bloğunu 4.adımdaki kod bloğunun içerisine yerleştiriyoruz.

6. Adım) Screen1 bölümü altındaki Built-in seçeneğinden Colors bölümü içerisinden yeşil renk bloğunu 5.adındaki bloğun sağına yerleştiriyoruz.

7. Adım) Label1 modülüne tıklıyoruz ve şu kod bloğunu 4. ve 5. adımdaki kod bloğunun altına yerleştiriyoruz.

8. Adım) Screen1 bölümü altındaki Built-in seçeneğinden Text altındaki şu kod bloğunun içerisine “Bağlantı Kuruldu” yazıyoruz. Ardında bu kod bloğunu 7.adımdaki kod bloğunun sağına yerleştiriyoruz.

9. Adım) ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu 7. ve 8. adımda yer alan kod bloklarının altına yerleştiriyoruz.

10. Adım) BluetoothClient1 modülü altında yer alan şu kod bloğunu 9.adımdaki kod bloğunun sağına yerleştiriyoruz.

11. Adım) ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu 10.adımda yer alan kod bloğunu sağına yerleştiriyoruz.

12. Adım) Button1 modülüne tıklıyoruz ve şu kod bloğunu seçiyoruz.

13. Adım) BluetoothClient1 modülüne tıklıyoruz ve şu kod bloğunu 12.adaımdaki kod bloğunun altına yerleştiriyoruz.

14. Adım) Built-in seçeneği altından Math bölümüne tıklıyoruz ve şu kod bloğunun içerisine 1 yazıyoruz.

15. Adım) Oluşturduğumuz kod bloğunun üzerine gelip sağ tık yapıyoruz ve Duplicate seçeneğine tıklıyoruz ve kod bloğumuzun kopyasını oluşturmuş oluyoruz.

16. Adım) Button1 bölümünü Butoon2 olarak değiştiriyoruz ve 1 olan sayıyı 0 yapıyoruz.

17. Adım) Uygulamamızı sitenin üst tarafında yer alan Build seçeneği altındaki App(Provide OR code for apk) seçeneğine tıklıyoruz herhangi bir QR kod okuyucuya ilgili kodu okutuyoruz.

Önemli Not: Chrome web tarayıcısı ile hata yaşıyorsanız başka bir web tarayıcısını kullanmanız gerekmektedir. Bu uygulama yapılırken Mozilla Firefox tarayıcısı kullanıldı.

0 Yorumlar

Yorum Ekle