App Inventor ile DHT-11 Sensörü Verilerini Telefonda Okumak

App İnventor Uygulama Tasarımı:

1. App Inventor uygulaması ile yeni bir proje oluşturuyoruz.
2. Screen1 ekranı ayarları; AlignHorizontal:Center, BacgroundColor: White
3. Palette -> Connectivity ->BluetoothClient özelliğini projemize dahil ediyoruz.
4. Palette ->Sensors -> Clock özelliğimizi projemize dahil ediyoruz.
5. Palette -> User Interface -> Label özelliğini seçiyoruz ve projemize ekliyoruz. Label1 ayarları; BackgroundColor: White, FontBold: Aktif, FontSize: 18, Text: Bağlantı Yok, TextColor: Black
6. Palette -> Layout -> HorizontalArrangement özelliğini seçiyoruz ve label1’in altına atıyoruz. Ayarları; AlignVertical: Center, BackgroundColor: White, Width: Fill Parent
7. Palette -> User Interface -> Label özelliğini seçiyoruz ve HorizontalArrangement1 tablosunun soluna ekliyoruz. Label2 ayarları; BackgroundColor: White, FontBold: Aktif, FontSize: 18, Text: “Nem: ”, TextColor: Green
8. Palette -> User Interface -> Label özelliğini seçiyoruz ve HorizontalArrangement1 tablosunun sağına ekliyoruz. Nem label’ı ayarları; BackgroundColor: White, FontBold: Aktif, FontSize: 18, TextColor: Orange, Rename: nem
9. Palette -> Layout -> HorizontalArrangement özelliğini seçiyoruz ve HorizontalArrangement1’in altına atıyoruz. Ayarları; AlignVertical: Center, BackgroundColor: White, Width: Fill Parent
10. Palette -> User Interface -> Label özelliğini seçiyoruz ve HorizontalArrangement2 tablosunun soluna ekliyoruz. Label3 ayarları; BackgroundColor: White, FontBold: Aktif, FontSize: 18, Text: “Sıcaklık: ”, TextColor: Green
11. Palette -> User Interface -> Label özelliğini seçiyoruz ve HorizontalArrangement2 tablosunun sağına ekliyoruz. Sıcaklık label’ı ayarları; BackgroundColor: White, FontBold: Aktif, FontSize: 18, TextColor: Orange, Rename: sicaklik
12. Palette -> Layout -> HorizontalArrangement özelliğini seçiyoruz ve HorizontalArrangement2’nin altına atıyoruz. Ayarları; AlignVertical: Center, AlignHorizontal: Center, BackgroundColor: White, Width: Fill Parent
13. Palette -> User Interface -> ListPicker özelliğini seçiyoruz ve HorizontalArrangement3 tablosunun soluna ekliyoruz. ListPicker1 ayarları; BackgroundColor: Magenta, FontBold: Aktif, FontSize: 18, Text: “Bağlan ”, TextColor: White, Shape: rounded
14. Palette -> User Interface -> Button özelliğini seçiyoruz ve HorizontalArrangement3 tablosunun sağına ekliyoruz. Button1 ayarları; BackgroundColor: Magenta, FontBold: Aktif, FontSize: 18, Text: “Bağlantı Kes ”, TextColor: White, Shape: rounded
15. Kodlarımızı yazmak için Blocks ekranına geçiş 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) ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu projemize ekliyoruz:

2. Adım) ListPicker1 modülüne tıklıyoruz ve aşağıdaki kod bloğunu 1.adımın içerisine yerleştiriyoruz.

3. Adım) BluetoothClient1 modülüne tıklıyoruz ve aşağıdaki kod bloğunu 2.adımın sağına ekliyoruz.

4. Adım) ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu projemize ekliyoruz.

5. Adım) Bult-in -> Control içerisinden şu kod bloğunu 4.adımın içerisine ekliyoruz.

6. Adım) BluetoothClient1 modülüne tıklıyoruz ve şu kod bloğunu 5.adımın üst kısmına ekliyoruz.

7. Adım) ListPicker1 modülünü seçiyoruz ve şu kod bloğunu 6.adımın sağına ekliyoruz.

8. Adım) ListPicker1 modülünü seçiyoruz ve şu kod bloğunu if koşulunun alt kısmına ekliyoruz.

9. Adım) BluetoothClient1 modülünü seçiyoruz ve şu kod bloğunu 8.adımın sağına ekliyoruz.

10. Adım) Button1 modülümüze tıklıyoruz ve şu kod bloğunu projemize ekliyoruz.

11. Adım) BluetoothClient1 modülüne tıklıyoruz ve şu kod bloğunu 10.adımın içerisine ekliyoruz.

12. Adım) Built-in -> Variables bölümünden şu kod bloğunu şeçiyoruz ve içerisine “liste” yazıyoruz.

13. Adım) Built-in -> Lists bölümünden şu kod bloğunu seçiyoruz ve 12.adımın sağına ekliyoruz.

14. Adım) Clock1 modülüne tıklıyoruz ve şu kod bloğunu projemize ekliyoruz.

15. Adım) Built-in -> Controls bölümünde şu kod bloğunu alıyoruz ve 14.adımın içerisine atıyoruz.

16. Adım) BluetoothClient1 modülüne tıklıyoruz ve şu kod bloğunu if kısmına ekliyoruz.

17. Adım) Label1 modülüne tıklıyoruz ve şu kod bloğunu if-then koşulu içerisine ekliyoruz.

18. Adım) Built-in -> Text içerisinde şu kod bloğunu alıyoruz ve içerisine “Bağlandı” yazıyoruz.

19. Adım) Built-in -> Variables bölümünden şu kod bloğunu alıyoruz ve “global liste” özelliğinin içinden seçiyoruz.

20. Adım) Built-in -> Text bölümünden şu kod bloğunu seçiyoruz ve 19.adımın sağına ekliyoruz.

21. Adım) BluetoothClient1 modülüne geliyoruz ve şu kod bloğunu 20.adımın sağ üst kısmına ekliyoruz.

22. Adım) BluetoothClient1 modülüne geliyoruz ve şu kod bloğunu 21.adımın sağ tarafına ekliyoruz.

23. Adım) Built-in -> Text bölümüne geliyoruz ve şu kod bloğunu 20.adımın sağ alt kısmına ekliyoruz. İçerisine “ | (Alt Gr+<)” yazıyoruz.

24. Adım) Built-in -> Controls içerisinden şu kod bloğunu 23.adımın altına ekliyoruz.

25. Adım) Built-in -> Math bölümünden şu kod bloğunu 24. Adımın if kısmına ekliyoruz.

26. Adım) Built-in -> Lists bölümüne tıklıyoruz ve şu kod bloğunu 25.adımın içinin soluna ekliyoruz.

27. Adım) Built-in -> Variables içerisinden şu kod bloğunu seçiyoruz ve 26.adımın sağın ekliyoruz. İçerisinden “global liste” seçeneğini işaretliyoruz.

28. Adım) Built-in -> Math bölümü içerisinden şu kod bloğunu seçiyoruz ve koşul ifadesinin sağına ekliyoruz.

29. Adım) Sicaklik modülümüze tıklıyoruz ve şu kod bloğunu if-thrn kısmına ekliyoruz.

30. Adım) Built-inàLists bölümüne giriyoruz ve şu kod bloğunu 29.adımın sağına ekliyoruz.

31. Adım) Built-in -> Variables bölümüne geliyoruz ve şu kod bloğunu 30.adımın sağ üst kısmına ekliyoruz.

32. Adım) Built-in -> Math bölümüne giriyoruz ve şu kod bloğunu 30.adımın sağ alt kısmına ekliyoruz.

33. Adım) Sicaklik için yaptığımızı nem için de yapacağız. Bunun için sağ tık duplicate diyoruz ve kopyasını çıkarıyoruz.

34. Adım) Label1 modülüne tıklıyoruz ve şu kod bloğunu ilk if-else koşulumuzun else kısmına ekliyoruz.

35. Adım) Built-in -> Text bölümüne geliyoruz ve şu kod bloğunun içerisine “Bağlantı Yok” yazıyoruz.

36. 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 Inventor uygulaması ile yeni bir proje oluşturuyoruz.
2. Screen1 ekranı ayarları; AlignHorizontal:Center, BacgroundColor: White
3. Palette -> Connectivity ->BluetoothClient özelliğini projemize dahil ediyoruz.
4. Palette ->Sensors -> Clock özelliğimizi projemize dahil ediyoruz.
5. Palette -> User Interface -> Label özelliğini seçiyoruz ve projemize ekliyoruz. Label1 ayarları; BackgroundColor: White, FontBold: Aktif, FontSize: 18, Text: Bağlantı Yok, TextColor: Black
6. Palette -> Layout -> HorizontalArrangement özelliğini seçiyoruz ve label1’in altına atıyoruz. Ayarları; AlignVertical: Center, BackgroundColor: White, Width: Fill Parent
7. Palette -> User Interface -> Label özelliğini seçiyoruz ve HorizontalArrangement1 tablosunun soluna ekliyoruz. Label2 ayarları; BackgroundColor: White, FontBold: Aktif, FontSize: 18, Text: “Nem: ”, TextColor: Green
8. Palette -> User Interface -> Label özelliğini seçiyoruz ve HorizontalArrangement1 tablosunun sağına ekliyoruz. Nem label’ı ayarları; BackgroundColor: White, FontBold: Aktif, FontSize: 18, TextColor: Orange, Rename: nem
9. Palette -> Layout -> HorizontalArrangement özelliğini seçiyoruz ve HorizontalArrangement1’in altına atıyoruz. Ayarları; AlignVertical: Center, BackgroundColor: White, Width: Fill Parent
10. Palette -> User Interface -> Label özelliğini seçiyoruz ve HorizontalArrangement2 tablosunun soluna ekliyoruz. Label3 ayarları; BackgroundColor: White, FontBold: Aktif, FontSize: 18, Text: “Sıcaklık: ”, TextColor: Green
11. Palette -> User Interface -> Label özelliğini seçiyoruz ve HorizontalArrangement2 tablosunun sağına ekliyoruz. Sıcaklık label’ı ayarları; BackgroundColor: White, FontBold: Aktif, FontSize: 18, TextColor: Orange, Rename: sicaklik
12. Palette -> Layout -> HorizontalArrangement özelliğini seçiyoruz ve HorizontalArrangement2’nin altına atıyoruz. Ayarları; AlignVertical: Center, AlignHorizontal: Center, BackgroundColor: White, Width: Fill Parent
13. Palette -> User Interface -> ListPicker özelliğini seçiyoruz ve HorizontalArrangement3 tablosunun soluna ekliyoruz. ListPicker1 ayarları; BackgroundColor: Magenta, FontBold: Aktif, FontSize: 18, Text: “Bağlan ”, TextColor: White, Shape: rounded
14. Palette -> User Interface -> Button özelliğini seçiyoruz ve HorizontalArrangement3 tablosunun sağına ekliyoruz. Button1 ayarları; BackgroundColor: Magenta, FontBold: Aktif, FontSize: 18, Text: “Bağlantı Kes ”, TextColor: White, Shape: rounded
15. Kodlarımızı yazmak için Blocks ekranına geçiş 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) ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu projemize ekliyoruz:

2. Adım) ListPicker1 modülüne tıklıyoruz ve aşağıdaki kod bloğunu 1.adımın içerisine yerleştiriyoruz.

3. Adım) BluetoothClient1 modülüne tıklıyoruz ve aşağıdaki kod bloğunu 2.adımın sağına ekliyoruz.

4. Adım) ListPicker1 modülüne tıklıyoruz ve şu kod bloğunu projemize ekliyoruz.

5. Adım) Bult-in -> Control içerisinden şu kod bloğunu 4.adımın içerisine ekliyoruz.

6. Adım) BluetoothClient1 modülüne tıklıyoruz ve şu kod bloğunu 5.adımın üst kısmına ekliyoruz.

7. Adım) ListPicker1 modülünü seçiyoruz ve şu kod bloğunu 6.adımın sağına ekliyoruz.

8. Adım) ListPicker1 modülünü seçiyoruz ve şu kod bloğunu if koşulunun alt kısmına ekliyoruz.

9. Adım) BluetoothClient1 modülünü seçiyoruz ve şu kod bloğunu 8.adımın sağına ekliyoruz.

10. Adım) Button1 modülümüze tıklıyoruz ve şu kod bloğunu projemize ekliyoruz.

11. Adım) BluetoothClient1 modülüne tıklıyoruz ve şu kod bloğunu 10.adımın içerisine ekliyoruz.

12. Adım) Built-in -> Variables bölümünden şu kod bloğunu şeçiyoruz ve içerisine “liste” yazıyoruz.

13. Adım) Built-in -> Lists bölümünden şu kod bloğunu seçiyoruz ve 12.adımın sağına ekliyoruz.

14. Adım) Clock1 modülüne tıklıyoruz ve şu kod bloğunu projemize ekliyoruz.

15. Adım) Built-in -> Controls bölümünde şu kod bloğunu alıyoruz ve 14.adımın içerisine atıyoruz.

16. Adım) BluetoothClient1 modülüne tıklıyoruz ve şu kod bloğunu if kısmına ekliyoruz.

17. Adım) Label1 modülüne tıklıyoruz ve şu kod bloğunu if-then koşulu içerisine ekliyoruz.

18. Adım) Built-in -> Text içerisinde şu kod bloğunu alıyoruz ve içerisine “Bağlandı” yazıyoruz.

19. Adım) Built-in -> Variables bölümünden şu kod bloğunu alıyoruz ve “global liste” özelliğinin içinden seçiyoruz.

20. Adım) Built-in -> Text bölümünden şu kod bloğunu seçiyoruz ve 19.adımın sağına ekliyoruz.

21. Adım) BluetoothClient1 modülüne geliyoruz ve şu kod bloğunu 20.adımın sağ üst kısmına ekliyoruz.

22. Adım) BluetoothClient1 modülüne geliyoruz ve şu kod bloğunu 21.adımın sağ tarafına ekliyoruz.

23. Adım) Built-in -> Text bölümüne geliyoruz ve şu kod bloğunu 20.adımın sağ alt kısmına ekliyoruz. İçerisine “ | (Alt Gr+<)” yazıyoruz.

24. Adım) Built-in -> Controls içerisinden şu kod bloğunu 23.adımın altına ekliyoruz.

25. Adım) Built-in -> Math bölümünden şu kod bloğunu 24. Adımın if kısmına ekliyoruz.

26. Adım) Built-in -> Lists bölümüne tıklıyoruz ve şu kod bloğunu 25.adımın içinin soluna ekliyoruz.

27. Adım) Built-in -> Variables içerisinden şu kod bloğunu seçiyoruz ve 26.adımın sağın ekliyoruz. İçerisinden “global liste” seçeneğini işaretliyoruz.

28. Adım) Built-in -> Math bölümü içerisinden şu kod bloğunu seçiyoruz ve koşul ifadesinin sağına ekliyoruz.

29. Adım) Sicaklik modülümüze tıklıyoruz ve şu kod bloğunu if-thrn kısmına ekliyoruz.

30. Adım) Built-inàLists bölümüne giriyoruz ve şu kod bloğunu 29.adımın sağına ekliyoruz.

31. Adım) Built-in -> Variables bölümüne geliyoruz ve şu kod bloğunu 30.adımın sağ üst kısmına ekliyoruz.

32. Adım) Built-in -> Math bölümüne giriyoruz ve şu kod bloğunu 30.adımın sağ alt kısmına ekliyoruz.

33. Adım) Sicaklik için yaptığımızı nem için de yapacağız. Bunun için sağ tık duplicate diyoruz ve kopyasını çıkarıyoruz.

34. Adım) Label1 modülüne tıklıyoruz ve şu kod bloğunu ilk if-else koşulumuzun else kısmına ekliyoruz.

35. Adım) Built-in -> Text bölümüne geliyoruz ve şu kod bloğunun içerisine “Bağlantı Yok” yazıyoruz.

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