Flutter ve ESP32 CAM ile QR Kod Okuma
Herkese merhabalar,
Öncelikle kendimden bahsedeyim.Ben Emre ARIK. Kocaeli Üniversitesi Elektrik ve Bilgisayar Mühendisliği bölümünde 4.sınıf olarak öğrenim görmekteyim. Aktif olarak Flutter üzerine ve Gömülü Sistemler üzerinde çalışmaktayım. Flutter Students Club’a yeni katılan bir öğrenciyim. Bizi bu oluşumda birleştiren herkese teşekkürler. Şimdi projemize geçelim.
İlk Medium yazımda Flutter ve ESP32 Cam ile QR Kod okuma üzerine biraz konuşacağız. Birazcık uzun bir yazı olabilir ama sıkılmadan okuyacağınıza inanıyorum :)
Öncelikle projede QR kodumuzu okumak amacıyla ESP32 AI Thinker CAM kullandım. ESP32 Modülüne kodumuzu yüklemek amacıyla da PL2303 UART modülü kullandım.
Şimdi Flutter kısmıyla başlayalım.
İlk olarak şekilde gözüken arayüzü tasarlamak için aşağıdaki kodu yazdım.
Öncelikle bir Stateful sayfa oluşturdum. Sayfa içerisinde Form işlemleri için _formKey isimli bir GlobalKey tanımladım. Ardından isim ve soyismi diğer sayfaya göndermek amacıyla iki adet boş string oluşturdum. Bu kısım Provider ve model kullanılarak daha clean bir şekilde yapılabilirdi ama ben göstermek amacıyla vanilla kullanarak yaptım :) Textformfieldlerin validate kısımlarını kontrol ettikten sonra onChanged kısmında value’yi alıp isim ve soyisme eşitledik. Böylece TextFormField içerisine yazılan metinleri aktif bir şekilde aldık.
QR Oluştur butonuyla formun geçerli validate kısmını kontrol ederek veriyi Navigator.push() komutuyla QR Kodumuzun oluşturulacağı sayfaya yolladık.
QR Kodumuz oluşturuldu :) QR Datasını oluşturmak amacıyla qr_flutter isimli eklentiyi kullandım.
Örnek kodlamaları yukarıda görebilirsiniz :)
Flutter kısmını QR Code oluşturarak ve QR Code göstererek aslında bitirmiş oldum. Ama dilerseniz Cloud Firestore kullandığımız bu yazımızda Firebase’yi uygulamanıza entegre ederek Stream ile dinleyip veriyi aktif olarak Flutter ekranında gösterebilirsiniz.
Şimdi Arduino Kısmına geçelim.
Bu kısımda ESP32QRCodeReader ve Firebase_ESP_Client kütüphanelerinden yararlandım.
Öncelikle bu kod biraz karışık gelebilir. Çünkü ben de kütüphaneden örneğe bakarak yazdım :) Firebase konsolumuzdan bir proje oluşturup E-mail Authentication ve Firestore’yi aktif ediyoruz. Burada E-mail Authenticationu ESP kütüphanesi istediğinden dolayı yazıyoruz. Aslında aktif pek fazla bir işlevi yok. Sonrasında ESP32'mizin bağlanacağı WIFI_SSID,WIFI_PASSWORD kısımlı alanları dolduruyoruz.
Firebase uygulamamızdan aldığımız API_KEY, FIREBASE_PROJECT_ID kısımlı yerleri dolduruyoruz. E-Mail kısımlarına herhangi bir test üyeliği verebilirsiniz.
Kodu açıklamaya başlayalım. Loop döngüsü içerisinde eğer QR Kodumuz geçerliyse aşağıdaki işlemlere başlıyor. Öncelikle Firestore’ye içerik yükleyebilmek amacıyla FirebaseJson sınıfından türetilmiş content isimli bir nesne üretiliyor. Ardından bir array tanımladık. Flutter kısmında isim_soyisim şeklinde bir data gönderdiğimiz için veriyi “_” kısmından StringSplitter kısmıyla split ederek isim ve soyisim şeklinde iki farklı string elde ettik. Bu array içerisine bu stringleri gönderdik.
Sonrasında Firestore için bir path belirledik. Burada ben codes ismini verdim. Dilerseniz değiştirebilirsiniz. Veriyi sürekli üzerine yazmaması için de bir count değişkeni oluşturdum. Firebaseye veri gönderildikçe bu count değişkeni artıyor.
Sonrasında Firebase kütüphanemiz yardımıyla content.set komutlarını kullanarak arraylara atadım. Kullanıcı gönderiliyor kısmında da yine kütüphane yardımıyla veriyi Firebase’ye gönderdik.
ESP32 AI Thinker CAM modülümüze kodumuzu yüklemek amacıyla aşağıdaki bağlantıları yapıyoruz. Ben burada UART olarak PL-2303 modülü kullandım. Burada RX ve TX pinlerine özellikle dikkat edin. Hatalı işlemde USB portunuz zarar görebilir :) IO0 ve GND yi kod yüklerken kısa devre yapmayı unutmayın. Ayrıca PlatformIO ayarlarından platformio.ini dosyasını açarak ESP32'nizin bağlı olduğu PL2303 portunu COM4 kısmına yazınız. Kod yüklendikten sonra kısa devreyi kaldırın ve ESP32 AI Thinker CAM üzerindeki reset butonuna basın. ESP32'niz hangi serial porta bağlı ise o portun monitörünü açarak verileri izleyebilirsiniz.
NOT: PL2303 kullanıyorsanız aygıt yöneticinde driver hatası sebebiyle PHASED_OUT hatası alabilirsiniz. Bu hatayı çözmek için aşağıdaki linki inceleyebilirsiniz.
Son aşama olarak ESP32 CAM modülümüze QR kodu okutunuz. Serial ekran üzerinde Found QRCode yazacak ve geçerli olduğunda Flutter uygulamamızdaki verilerimiz ekrana bastırılıp Firebase’ye gönderilecektir.
Örnek olarak verimiz bu şekilde gözükmektedir.
NOT: ESP32 Ayarlamaları yapılırken yazının çok uzun olmaması amacıyla çok fazla detaya giremedim. Ancak detaylı açıklamayı ve resimli gösterimleri https://github.com/mobizt/Firebase-ESP-Client bu linkten inceleyebilirsiniz.
Kaynak Kodlar: https://github.com/emrearik/flutter_esp32_qr_code_scan
