Arduino ESP8266 ve Flutter ile Sıcaklık-Nem Takibi
Başlarken
Flutter, Google tarafından geliştirilen açık kaynak kodlu bir mobil uygulama geliştirme SDK’sıdır. Genel olarak Android ve iOS uygulama geliştirmek için kullanılır.
Bu yazıda Flutter (Google giriş), Nodemcu ve Firebase kullanarak telefondan evinizin, seranızın, iş yerinizin vs. sıcaklık takibini yapabileceğiniz bir uygulama yazacağız.
Hedef ekranımız şu şekilde olacak:
Neler yapacağımızı küçük bir diyagram ile özetleyelim:
Gerekli Programlar
Esp8266 kodlamamız için Arduino IDE kullanacağız.
Arduino: Bir G/Ç kartı ve Processing/Wiring dilinin bir uygulamasını içeren, geliştirme ortamından oluşan fiziksel bir programlama platformudur. Arduino IDE indir
Bu yazımızda Arduino IDE üzerinden nodeMCU kartımızı programlayacağız. Elimizde Arduino Uno, Mega tarzı bir kartımız yok. Şayet bunları kullanmak isteyen arkadaşlar var ise ESP8266(01) Modeli vb. Arduino uyumlu ESP8266 modellerini kullanmaları gerekir.
Flutter uygulamamız için ise Anroid Studio kullanacağız. İsteyen Visual Studio Code kullanabilir.
Uygulamada sıcaklık ve nem değerlerini alabilmemiz için bir adet DHT11 sensörününe, aldığımız verileri Firebase'e taşımak için ise bir adet Esp8266 modülüne ihtiyacımız var. Ayrıca Arduino kütüphanelerinde sorun yaşayan arkadaşlar olabilir diye yazının sonuna kütüphane linkleri koyacağım.
Bir adet Firebase hesabına ihtiyacımız var, hemen girip bir proje oluşturabilirsiniz.
1 - Hadi İşe Koyulalım: Arduino ile başlayalım
Windows için yukarıda verdiğim linkten Arduino IDE'yi yükleyelim. Zaten çok basit bir şekilde siteden indirip kuruyorsunuz.
Arduino IDE yükledikten sonra Dosya>Tercihler>Ek Devre Kartları Yöneticisine>
"http://arduino.esp8266.com/stable/package_esp8266com_index.json"
bunu yapıştıralım. Yoksa ekleyeceğimiz gerekli ESP8266 kartlarımız, kart yöneticisi kısmında görünmez. Bize uygun kartı seçememiş oluruz.
Daha sonra Araçlar>Kart Yöneticisine gelip Esp8266 yazalım ve Esp8266 community'i indirelim. Bu sayede esp8266 modeline sahip tüm kartlarımızı Arduino IDE'ye indirmiş olduk. Kart kısmından size uygun modeli seçin. Aksi takdirde hata alırsınız. Ben NodeMCU kullacağım için NodeMCU seçtim.
Daha sonra projemiz için gerekli kütüphaneleri ekleyelim. Taslak>Library>Kütüphaneleri Yönet kısmından Esp8266 ve Firebase kütüphanelerini aratıp yükleyelim. Library>Kütüphaneleri Yönet kısmından bu kütüphaneleri yükleyebileceğiniz gibi manuel olarak da yükleyebilirsiniz. Yazı sonunda kütüphane linklerini paylaşacağım.
Kullanacağımız gerekli kütüphaneleri ekledikten sonra Firebase için proje linkimizi ve tokenımızı yazacağız. Ayrıca modülden internete bağlanmak için Wifi SSID (ağ adınız) ve internet şifremizi girelim. Ağ ismini yazarken büyük küçük harfe dikkat ederek doğru bir şekilde yazmaya özen gösterelim.
Burada ne yaptık? Yukarıdaki koda şimdi biraz daha yakından bakalım.
#define kaynak dosyada bir değişken ismi yerine başka bir isimin yerleştirilmesini sağlar. Her seferinde wifi şifremizi yazmak yerine. wifi_password tanımlayıp buraya wifi şifremizi yazacağız. Şifreye ihtiyacımız olduğunda wifi şifremizi tekrar girmek yerine wifi_password yazıp uzun işlemlerden kaçınmış olacağız. Firebase tokenleri için de böyle yaptık.
Bu noktada alacağımız ESP8266 sensör verilerini firebase'e besleyeceğiz. Bu nedenle önce Firebase tarafını halledelim.
2 - Firebase Kısmına Geçelim
Firebase adresine gidip yeni bir proje oluşturalım.
Proje oluştur'a tıklayın ve proje adınızı girin. Proje adınızda Türkçe karakterler kullanmayın zaten kullandığınızda hata verecektir.
Bu kısmı aktif etmemize gerek yok. Biz anlık sıcaklık değeri alacağız ama bir istatistik tutacaksanız analiz güzel olabilir.
Proje oluştur diyelim ve yeni projenin oluşmasını bekleyelim.
Şimdi Arduino'da define olarak tanımladığımız FIREBASE_AUTH kısmına tokenimizi gireceğiz bunun için Projeye Genel Bakış > Proje ayarları
Kısmına girelim ve daha sonra hizmet hesapları>Veritabanı gizli anahtarları kısmına giriş yapalım.
Buradaki gizli anahtar kısmını göster diyelim. Bu anahtarı kimseyle paylaşmayın. Bu bizim FIREBASE_AUTH kısmına gireceğimiz tokenimiz.
token işimizi hallettik, son bir aşamamız host kısmımız kaldı. Bunun için Anasayfaya gelip Database menüsüne tıklayalım. Veri tabanı oluştur diyelim.
Sonraki diyip bitireceğiz. Daha sonra, oluşturduğumuz veri tabanında Realtime Database kısmına gelelim.
Buradaki ekranda gördüğümüz "https://proje-adiniz.firebaseio.com/" linki, oluşturduğunuz proje adınıza göre bir link olacaktır. Bu linki de kodumuzda FIREBASE_HOST kısmına gireceğiz. Tüm işlemler bittiğinde kodumuz aşağıdaki şekilde olacak.
Oluşturduğumuz Realtime Databas'e gelip Kurallar'a girelim. Burada false olan kısımlara true yazalım yoksa veri alışverişini gerçekleştiremeyiz.
Veri okunabilirliği daha kolay olsun ve daha hoş görünsün diye /nem_sicaklik adında bir yol yazalım. Verileri Firebase kısmına aktardığımızda datalar bu yol altında çıkacak.
NodeMCU Kodlarken Dikkat Etmemiz Gereken Kısımlar
Baudrate değeri, saniyedeki maximum aktarabileceğiniz bit değeridir. Modelinizin arkasında yazar. Yazılan değerden daha yüksek bir değer girerseniz serial ekranda saçma karakterler çıktığını görürsünüz. Ben kendi modelime uygun 9600 değerini giriyorum. DHT11 sensörümü D4 pinine bağlıyorum. Bunu da setup ile belirtiyorum.
Wifi.begin ile wifi kartımız wifi ağlarını aramaya başlıyor. Yazdığımız ağ ismini bulduktan sonra ağ şifremizi girip belirttiğimiz ağa bağlanacak. Bağlantı doğrulandığında connected: ip adresiniz yazacak.
Sıcaklık ve nem değerlerimizi oluşturduğumuz hum ve temp değişkenlerine atıyoruz.
Serial.print komutu ile aldığımız değerleri ekrana basıyoruz. Firebase öncesi sistemin çalışıp çalışmadığını anlamak için ideal bir yöntem verileri ekrana bastırmaktır.
Aynı işlemi tem değişkenimiz ile yapıp Firebase kısmını bitiyoruz. İsteğe göre duman sensörü ve daha farklı sensörler eklenebilir. Projenin amacına göre.
Sistemi kurduktan sonra wifi kartına gücü verip bir test edelim. Firebase'e verilerim düşüyor mu?
Sıcaklık ve nem değerlerimiz Firebase ekranına realtime olarak düşüyor, herhangi bir problem yok.
3 - Flutter İle Sıcaklık Takibi Uygulamamızı Yazalım
Şimdi sahip olduğumuz verileri okuyabileceğimiz bir uygulama yazalım.
Android Studio'da yeni bir Flutter projesi başlatalım.
Uygulamamızda Google giriş ve Firebase kullanacağız. Hangi eklentilere ihtiyacımız var? Hangi paketleri import etmemiz gerek bunlar için sık sık kullanacağımız pub.dev sitesine girelim. aramaya Firebase auth yazalım. Uygulamada ne yapmak istiyorsak onu yazıp arayacağız. Bu şekilde gerekli eklentileri bulmuş olacağız. Üşenenler için link hizmeti: Firebase auth.
Installing kısmı bize paketi nasıl, nereye import edeceğimizi anlatıyor. pubspec.yaml Dosyamıza gelip dependencies: kısmına "firebase_auth:^0.16.0" ekleyelim.
Readme kısmı daha çok android entegrasyonu ve bu eklentiyi nasıl kullanabileceğimiz hakkında bilgilerini veriyor. Android>app>build.gradle kısmına gelip en alt satıra inelim.
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.android.application' ekleyelim.
Bu şekilde pub.dev sayfamızdan firabase_database ve google_sign_in aramalarını yapalım.
pubspec.yaml sayfamıza;
firebase_database: ^3.1.3
google_sign_in: ^4.4.0
ekleyelim.
Yukarıda bulunan Pub get (sağ üstte) kısmına basalım.
Eğer Visual code kullanıyorsanız terminale flutter pub get yazabilirsiniz. Aynı işlevi gerçekleştirecektir. Pub get de yaptıktan sonra main kısmımıza gelelim. Projede kullanacağımız paketleri import etmekle başlayalım.
Daha sonra StatelessWidget içerisine bir title girelim. Ve tema rengimizi belirleyelim.
Firebase kimlik doğrulama yöntemlerinden Google girişi kullanacağımız için Google oturum açma eklentisini yapılandıracağız. Bunun için Pub.dev sitesinden yardım alalım, nasıl kullanıyor, ne yapmamız gerek bakalım.
currentUser → GoogleSignInAccount Şu anda oturum açmış olan hesap veya kullanıcı.
onCurrentUserChanged → Akış<GoogleSignInAccount>Mevcut kullanıcı değiştiğinde bildirim almak için.
scopes → List<String> bir uygulamanın bir kullanıcının hesabına erişimini sınırlayan bir mekanizmadır.Bir uygulama bir veya daha fazla kapsam isteyebilir, bu bilgi daha sonra onay ekranında kullanıcıya sunulur ve uygulamaya verilen erişim belirteci verilen kapsamlarla sınırlandırılır. Biz telefonumuzdan bir veri almayacağız veya mail hesabımızdan google fotoğraflara ulaşmayacağız. Biz firebase hesabımızın bağlı olduğu maile giriş yapsak yeter. Bu nedenle mail yazıp bıraktık.
GoogleSignIn sınıfı hakkında daha detaylı bilgiye buradan ulaşabilirsiniz.
Uygulamaya girişi Firebase oturumunuzun olduğu hesapla yapmanız gerekmekte. Diğer hesaplarla da giriş yapabilirsiniz ama aşağıda anlatacağım google-services dosyası flutter app içerisinde olmalı. Ben her uygulamaya girdiğimde mail seçmek istemiyorum. Her zaman login olmak istemiyoruz. Bunun için biraz Stack overflow'dan yardım aldım :)
signInSilently -> Uygulamaya ilk girişte seçtiğimiz mail adresi ile ikinci bir girişimizde otomatik olarak girmemizi sağlıyor. Tekrar mail adresi girmiyoruz. Giriş yapmak için:
Pub.dev sitesinde eklentiyi nasıl kullanacağımızla ilgili tekrar yardım alalım.
Giriş başarılı olduğunda terminale giriş başarılı yazdıralım, bu sayede sistemin çalışıp çalışmadığını terminalden kontrol etmiş oluruz. Daha sonra lib klasörüne sağ tıklayıp Dashboard.dart dosyası oluşturup, oluşturduğumuz Dashboard ekranına yönlendirelim.
Kimlik doğrulaması için pub.dev google sign in kısmından yardım alalım.
Ekrana 2 adet buton koydum biri Google giriş, diğeri çıkış butonu. Çıkış butonunu buraya koymak hiç mantıklı değil. Ancak ben buton ile çıkış nasıl yapılır onu göstermek için eklemek istedim.
Giriş kısmı için async iconu veya Android icon tercih ediliyor genelde. Ben Kullanıcıları gülümseme ile karşılamak istedim.
Şimdi güzel hoş ama giriş yapıldıktan sonra ne olacak? Açtığımız Dashboard sayfasına gelip gerekli paketleri import edelim. Services.dart gibi paketlere aslında ihtiyacımız yok, çıkış butonu koyduğumuz için eklemek zorunda kaldık.
Burada en önemli kısımlardan biri
Burası neden önemli: Çünkü yazdıracağımız değeri referans ile alacağız. Hatırlarsanız yukarıda firebase realtime'ı kontrol edelim, veri alabiliyor muyuz acaba demiştik.
Burada ne yazıyor ise referansını gösterip alacağımız değerler olmalı. "nem_sicaklik" başlığı altında Temperature kısmına giriyor ve Data değerini buluyor. Bunu temp değişkenine atıyor. Yani hiyerarşi şeklinde devam ediyor.
Biraz daha açalım: Modül, Firebase Data'ya bağlanıp nasıl sıcaklık değerimizi çekiyor?
İlk olarak referans verdiğimiz nem-sicaklik başlığı altına, daha sonra Temperature başlığımıza ve en sonunda Data kısmına girip Data verilerimizi çekiyoruz. Siz nem-sicaklik yerine başka bir isim verdiyseniz programınıza onu girmelisiniz.
Bu bölüme dikkat ettikten sonra dikkat etmemiz gereken bir diğer nokta da veri tipleri. Arduino kodlarında sıcaklık ve nem değerlerini double attıysanız burada int ile çekmeye çalışmayın, hata verir. Tabi hiyerarşiye ve veri tiplerine dikkat ettikten sonra.
Şimdi yapmamız gereken çok küçük bir işlem var. Firebase hesabımıza tekrardan giriş yapalım. Proje ayarlarına tıklayalım. Aşağıda projenizde uygulama yok diyor. Burada android simgesine tıklayalım.
Projemiz için google services dosyası oluşturmamız gerek. Uygulama paket ismimizi (uygulamayı oluştururken yazmıştık com.flutter gibi genelde com ile başlar) paket isimlerimizi doğru bir şekilde girdikten sonra bizim için oluşturulan google services dosyamızı indirelim. Uygulamamızın Android>app kısmı içerisine atalım. Terminal kısmına flutter pub get yazalım veya pubspec.yaml dosyamıza girip yukarıda anlattığım gibi pub get yapabilirsiniz.
Sıcaklık ve nem değerlerimizi ekrana bastırırken SingleTickerProviderStateMixin (kayan yazı için) ve Animations sayfalarından yardım alacağız.
Aldığımız nem ve sıcaklık değerini ekrana bastıralım. Aynı zamanda derece ve % işaretleri ile biraz estetik katalım.
Uygulamamızın Son Hali
Sonuç olarak Flutter ile işimize yarayacak bir uygulamayı kolayca yazdık. Benim en zorlandığı kısımlardan biri Firebase'den veri çekeceğimiz sırada tanımladığım değerleri gözden kaçırmam oldu. Arduino kısmına int değer verip uygulama ile double çekmeye çalışıyordum. Tiplerin farklı olduğuna dikkat etmemiştim, dikkat etmeden değişken türünü belirlediğim için hatalar almaya başlayınca çaktım köfteyi. Bunun dışında ben Flutter 'ı bayağı sevdim. Bu şekilde yazılara devam etmek istiyorum. Umarım siz de beğenmişsinizdir.
Not: Kütüphaneleri yazımın başında anlattığım gibi Arduino IDE içerisinden yükleyebilirsiniz. Kartınızı görmemesi durumunda veya hata aldığınız durumlarda bu kütüphaneleri kullanabilirsiniz.
Nodemcu kullananlar ve bilgisayarı görmeyenler için: USB Drivers for NodeMCU
Proje Github linkine buradan ulaşabilirsiniz.
Diğer yazılarımızda görüşmek üzere Hoşçakalın.
#arduino #flutter #firebase #ESP8266 #DHT11
0 yorum
