App Inventor Uygulaması ile RGB Led Yakmak

App İnventor Uygulama Tasarımı:

1. Yeni bir proje oluşturuyoruz.
2. Palette->Connectivity->BluetoothClient modülünü seçiyoruz ve projemize aktarıyoruz.
3. Palette->Layout->TableArrangement modülünü seçiyoruz. Components bölümünden TableArangement1 modülü üzerine tıklıyoruz ve gerekli ayarlamaları yapıyoruz. (Columns: 1, Rows: 2, Height: 60 piksel, Weight: 312 piksel, Visible:aktif)
4. Palette->Layout->TableArrangement modülünü seçiyoruz. Components bölümünden TableArangement2 modülü üzerine tıklıyoruz ve gerekli ayarlamaları yapıyoruz. (Columns: 1, Rows: 7, Height: 330 piksel, Weight: 312 piksel, Visible:aktif )
5. Palette->User Interface->ListPicker modülünü seçiyoruz ve TableArangement1 mdülünün üst satırına yerleştiriyoruz.  Text ismini “Bağlantı Kur” olarak değiştiriyoruz.
6. Palette->User Interfac->àLabel modülünü seçiyoruz ve TableArangement1 modülünün alt satırına yerleştiriyoruz. Text ismini “Bağlantı Yok” olarak değiştiriyoruz. TextColor özelliğini RED yapıyoruz.
7. Palette->Button seçiyoruz ve TableArrangement2 modülünün en üst satırına yerleştiriyoruz. Buton adını “Mavi Led Aç” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Mavi Led Aç, TextColor: Blue)
8. Palette->Button seçiyoruz ve TableArrangement2 modülünün üstten ikinci satırına yerleştiriyoruz. Buton adını “Mavi Led Kapat” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Mavi Led Kapat, TextColor: Blue)
9. Palette->Button seçiyoruz ve TableArrangement2 modülünün üstten üçüncü satırına yerleştiriyoruz. Buton adını “Yeşil Led Aç” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Yeşil Led Aç, TextColor: Green)
10. Palette->Button seçiyoruz ve TableArrangement2 modülünün üstten dördüncü satırına yerleştiriyoruz. Buton adını “Yeşil Led Kapat” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Yeşil Led Kapat, TextColor: Green)
11. Palette->Button seçiyoruz ve TableArrangement2 modülünün üstten beşinci satırına yerleştiriyoruz. Buton adını “Kırmızı Led Aç” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Kırmızı Led Aç, TextColor: Red)
12. Palette->Button seçiyoruz ve TableArrangement2 modülünün üstten altıncı satırına yerleştiriyoruz. Buton adını “Kırmızı Led Kapat” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Kırmızı Led Kapat, TextColor: Red)
13. Palette->Image modülünü seçiyoruz ve TableArrangement2 modülünün yedinci satırına yerleştiriyoruz. Image ayarları(Height: 60 piksel, Weight: 312 piksel, Picture: Arduino logosu)

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ü Buton2 olarak değiştiriyoruz ve 1 olan sayıyı 2 yapıyoruz.

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

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

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

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

21. 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. Yeni bir proje oluşturuyoruz.
2. Palette->Connectivity->BluetoothClient modülünü seçiyoruz ve projemize aktarıyoruz.
3. Palette->Layout->TableArrangement modülünü seçiyoruz. Components bölümünden TableArangement1 modülü üzerine tıklıyoruz ve gerekli ayarlamaları yapıyoruz. (Columns: 1, Rows: 2, Height: 60 piksel, Weight: 312 piksel, Visible:aktif)
4. Palette->Layout->TableArrangement modülünü seçiyoruz. Components bölümünden TableArangement2 modülü üzerine tıklıyoruz ve gerekli ayarlamaları yapıyoruz. (Columns: 1, Rows: 7, Height: 330 piksel, Weight: 312 piksel, Visible:aktif )
5. Palette->User Interface->ListPicker modülünü seçiyoruz ve TableArangement1 mdülünün üst satırına yerleştiriyoruz.  Text ismini “Bağlantı Kur” olarak değiştiriyoruz.
6. Palette->User Interfac->àLabel modülünü seçiyoruz ve TableArangement1 modülünün alt satırına yerleştiriyoruz. Text ismini “Bağlantı Yok” olarak değiştiriyoruz. TextColor özelliğini RED yapıyoruz.
7. Palette->Button seçiyoruz ve TableArrangement2 modülünün en üst satırına yerleştiriyoruz. Buton adını “Mavi Led Aç” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Mavi Led Aç, TextColor: Blue)
8. Palette->Button seçiyoruz ve TableArrangement2 modülünün üstten ikinci satırına yerleştiriyoruz. Buton adını “Mavi Led Kapat” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Mavi Led Kapat, TextColor: Blue)
9. Palette->Button seçiyoruz ve TableArrangement2 modülünün üstten üçüncü satırına yerleştiriyoruz. Buton adını “Yeşil Led Aç” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Yeşil Led Aç, TextColor: Green)
10. Palette->Button seçiyoruz ve TableArrangement2 modülünün üstten dördüncü satırına yerleştiriyoruz. Buton adını “Yeşil Led Kapat” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Yeşil Led Kapat, TextColor: Green)
11. Palette->Button seçiyoruz ve TableArrangement2 modülünün üstten beşinci satırına yerleştiriyoruz. Buton adını “Kırmızı Led Aç” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Kırmızı Led Aç, TextColor: Red)
12. Palette->Button seçiyoruz ve TableArrangement2 modülünün üstten altıncı satırına yerleştiriyoruz. Buton adını “Kırmızı Led Kapat” yapıyoruz. Diğer ayarlar(FontBold: Aktif, Height: 40 piksel, Weight: 312 piksel, Shape: Oval, Text: Kırmızı Led Kapat, TextColor: Red)
13. Palette->Image modülünü seçiyoruz ve TableArrangement2 modülünün yedinci satırına yerleştiriyoruz. Image ayarları(Height: 60 piksel, Weight: 312 piksel, Picture: Arduino logosu)

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ü Buton2 olarak değiştiriyoruz ve 1 olan sayıyı 2 yapıyoruz.

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

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

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

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

21. 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ı.