Tarım Iot için LoRa Tabanlı Görsel İzleme Sistemi - Firebase ve Angular Kullanarak Ön Yüzlü Bir Uygulama Tasarlama: 10 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:16

Önceki bölümde, firebase Realtime veritabanını doldurmak için sensörlerin loRa modülüyle nasıl çalıştığından bahsettik ve tüm projemizin nasıl çalıştığını çok yüksek seviyeli diyagramı gördük. Bu bölümde bu verileri web uygulamasında nasıl doldurabileceğimizden bahsedeceğiz.

Adım 1: Bilgisayarınızda Angular Kurulumu

Angular, arka uç olarak (bir sunucu olarak arka uç) firebase kullandığımızdan, yazılım endüstrisinde çoğunlukla kullanılan en popüler javascript (aslında typescript) tabanlı çerçevelerden biridir. Öyleyse, gerekli olan tüm bunları sıfırdan nasıl kuracağımızı görelim.

Bu öğreticinin tamamının Windows 10 ortamına dayandığını ve açısal ve ateş tabanı hakkında temel bilgilere sahip olduğunuzu umduğunu düşünün.

Windows'a node.js ve NPM'yi yükleyin

Öncelikle Node.js resmi web sitesi node.js'ye gidin ve node.js'nin en son sürümünü indirin, node tüm javascript kodlarını çalıştırmak için bir runtime ortamıdır. NPM, diğer tüm gerekli yazılımları komut satırı aracı aracılığıyla yüklemenize yardımcı olan düğüm paket yöneticisi anlamına gelir; bu, düğüm ve NPM hakkındaki temel fikirdir, daha derine inmek istiyorsanız, daha fazla bilgi edinebileceğiniz tonlarca web sitesi ve video vardır. hakkında node.(node.js'yi bilgisayarınıza global olarak yüklediğinizden emin olun).

lütfen ilerlemeden önce düğümü başarıyla kurup kurmadığınızı kontrol edin.

Angular'ı yükleyin

Komut satırı aracınızı açın ve aşağıdaki komutu çalıştırın, npm install -g @angular/cli

şimdi angular'ı başarıyla yüklediğinizden emin olun, bu eğitim için açısal resmi web sitesi için açısal hakkında daha fazla bilgi edinebilirsiniz.

Adım 2: Proje Yapınızı Kurun

Projenizi oluşturmak istediğiniz yere gidin, benimki için bu konumu D:\Angular-Projects kullandım. Bu konumda komut satırı istemini açın. Aşağıdaki komutu yazın.

yeni tarım izleme sistemi

o zaman açısal, ön ucumuzda olmasını istediğimiz tüm gerekli şeyleri yaratacaktır. ön ucu ve arka ucu birbirine bağlamadan önce. biraz açısal ve firebase hakkında bilgi edinelim.

Açısal

Tipik web mimarisinin nasıl göründüğü hakkında konuşalım, ön uç veya istemci tarafı arka uç veya sunucu tarafı vardır, istemci tarafı tüm HTML, CSS'nin içerdiği yerdir, ancak açısal olarak içeriğimiz için ayrı web sayfaları oluşturmamız gerekmez. gibi, home.html, about.hml, index.html…vb. tüm uygulama için tek bir sayfa vardır, kullanıcı diğer sayfalardan geçtiğinde index.html'dir veya diğerini içerir index.html, belirli sayfanın html ve css görünümü anlamına gelen bu sayfaların içeriği ile oluşturulacaktır. bu nedenle tüm uygulamamız yalnızca tek bir.html sayfası içerir. SPA dediğimiz şey buydu. O halde uygulamamızı oluşturalım. CMD'yi aşağıdaki komutla aynı dizinde açın.

bileşen ana sayfası oluşturun.

bu, ana sayfanızın içeriğini oluşturacaktır, ardından bir home.ts dosyası ve home.html dosyası ve home.html dosyasında ana sayfanızın yapısını ve ana sayfanın nasıl tanımlayacağınızı belirleyeceğiniz home.css göreceksiniz. Ana sayfa için stillerinizi ekleyeceğiniz css ve son olarak da kodlayacağınız home.ts dosyası, backend ile çalışmak için daktilo veya javascript kodu.

Adım 3: Bootstrap 4'ü Yükleme

Bir önceki adımda tartıştığımız gibi, şimdi projemize adım attık ve şimdi açısalın nasıl çalıştığı hakkında net bir fikrimiz var. şimdi stil oluşturma amacıyla, proje yolundaki aşağıdaki komutu kullanarak proje türümüze bootstrap yüklemek için bootstrap 4 kullanacağız.

npm bootstrap@3'ü kurun

Artık web sayfalarımızı nasıl yapılandıracağımız konusunda endişelenmenize gerek yok, her şeyi bootstrap yapacak.

Adım 4: Rotaları Tanımlama

IOT projemizde üstbilgi, altbilgi, sıcaklık, nem, Co2 yüzdesi, toprağın nemini toplayacağız. bu yüzden açısal olarak bu dizinlerin her biri için 4 bileşen oluşturacağımız anlamına gelen 4 web sayfası oluşturacağız.

AppModule bileşeninde açısal yönlendirici modülünü içe aktarın.

yolları ayrı bir dosyada tanımlayın.

const rotalar: Rotalar = [{ yol: 'ilk bileşen', bileşen: HomeComponent}, { yol: 'ikinci bileşen', bileşen: HumiComponent},];

bu kod satırlarını AppMoodule'deki içe aktarma etiketinin içine ekleyin.

@NgModule({ içe aktarma: [RouterModule.forRoot(routes)], dışa aktarma: [RouterModule] })

Header.html dosyamızın içerisine bootstrap navigasyon bar kodunu ekleyelim ve bileşenlerimizi bağlayalım,

Adım 5: Firebase

Firebase, google'ın kullanıcılarına sunduğu en havalı hizmetlerden biridir. Bu projede kullandığımız özelliklerden biri de firebase gerçek zamanlı veritabanı ve barındırmadır. bir firebase hesabı oluşturalım ve projemizi firebase realtime veritabanına bağlayalım.

adım 01: gamil hesabınıza giriş yapın

adım 02: arama çubuğunuza firebase konsolu yazın

adım 03: şimdi bitirdiniz.

6. Adım: Firebase'i Angular'a yükleyin

Firebase ile çalışmak için firebase ve angular'ı birbirine bağlamak için bu yardımcı kitaplığı kurduk veya ekledik. proje yolunuza gidin ve CMD'yi açın ve aşağıdaki kodu yazın.

npm firebase'i kurun @angular/fire --save

Adım 7: Angular Projemizi Firebase ile Bağlama

şimdi projemizi firebase'e eklemeliyiz. firebase hesabınızdaki proje ekle simgesine basın ve beğendiğiniz bir proje adı verin ve diğer ikisine de firebase hesabınızın o mavi güzel panosunu görene kadar devam edin, sol taraftaki sütunda tüm firebase listesini görebildiğimizi görebilirsiniz. servisler, böylece bu servislerin her birini kullanabiliriz. şimdi her şey gitmeye hazır. Başlamak için konsolunuzda bir uygulama ekleyin ve simgesine tıklayın. açısal uygulamamızı firebase hesabıyla bağlamak için tüm yapılandırma ayrıntılarını almak için. Bu detaylar projemize özeldir. şimdi bu ayrıntıları kopyalayın ve açısal projenize gidin, ortamı bulun. ts aşağıdaki kodu ekleyin ve bu ayrıntıları oraya yapıştırın.

dışa aktarma const ortamı = {

üretim: true, firebase: {

yapılandırma ayrıntılarınız burada…

}

};

ve ayrıca app.module.ts içine aşağıdaki kodları ekleyin

içe aktarma: [AngularFireModule.initializeApp(environment.firebase), ….],

Adım 8: Angular Projenizde NgxCharts Kitaplığını Kurma

Önceki adımlarda yaptığımız gibi proje yoluna gidin, CMD'nize aşağıdaki kodu yazın.

npm i @swimlane/ngx-charts --save

NgxChart Resmi sitesi bu siteye gidin ve istediğiniz grafiği alın. Çizgi grafiği ile tercih ettim. bu url'ye gidin ve kodu alın ve ilgili bileşenlere ekleyin.

Adım 9: Bir Hizmet Sınıfı ve Gerçek Zamanlı Veritabanı oluşturun

Proje klasörüne gidin ve CMD'yi açın ve ng oluşturma komutuyla birlikte hizmet için geçerli bir yol ve tercih edilen sınıf adı yazın. Kodlara geçmeden önce firebase gerçek zamanlı veritabanı hakkında biraz fikir vermek istiyorum. Diğer herhangi bir ilişkisel model veritabanına benzemez. Bu Varity veritabanlarında tablo yapısı göremiyoruz, Buna NOSQL veritabanı denir, bir metin tabanı veya belge tabanı veri yapısı görebiliriz. Buna JSON denir, bu yüzden bu tür bir veritabanında veri depolamak istiyorsak, bunları JSON Nesneleri gibi iletmeliyiz. Yukarıdaki resimde görebilirsiniz, Veritabanımızda cihazlar adında bir düğüm veya kenar var ve bu düğümün altında DeviceA adında başka bir düğüm var ve bu düğümün altında nem, sıcaklık..vb gibi indeksleri görebilirsiniz.. Hum düğümü altında, periyodik olarak toplanan senor verilerini görebilirsiniz.

zaman uyumsuz getData() {

this.items = ;

yeni Söz ver((çöz) => {

this.veritabanı. list(`/devices/${this.sessionService.get("DeviceA")}/${"Hum"}`).snapshotChanges().subscribe(snapshot => {

snapshot.forEach(eleman => {

if (!element.key.startsWith('current_hum')) {

this.items.push({

isim: moment(element.payload.val()['tarih'], 'YYYY-A-GG ss:dd:ss').format('YYYY-AA-GG ss:dd'), değer: element.payload.val()['değer']

});

}

});

çöz(this.items);

});

});

}

bu, veritabanındaki hum düğümü altında depolanan verilere erişmek için hizmet sınıfı kodudur, tek yapmanız gereken, grafiğinizi doldurmak istediğiniz bu sınıfı getData() işlevini çağırmak.

zaman uyumsuz ngOnInit() {this.items = this.humService.getData() bekliyor;

this.multi = [{

isim: '%', dizi: this.items

}];

}

Burada, bileşen sınıfımız ngOnInit yönteminin içinde, grafiğin değerlerini geçirmemiz gereken diziyi çoklu diziyi dolduran hizmetimizi çağırdık.

Adım 10: Projenizi Derleyin

Proje klasörünüze gidin ve CMD'yi açın ve sunucu yazın, Ardından tüm Typescript kodu javascript'e dönüştürülecek. ve yukarıdaki proje https://localhost:4200/home için CMD'nin size soracağı url'yi yazın ve işiniz bitti.