Sensor Monitoring System Dahboard

Click here for English README.

❓ Sensor Monitoring System Dahboard Nedir?

Sensor görüntüleme sistemi kullanıcılara bir merkez nokta belirlemesini ve sonrasında bu merkez noktanın belirli bir yarı çapı içerisinde farklı türlerde sensor tanımlamanıza olanak tanır. Oluşturulan her sensor, sensor oluşturulurken belirtilen raporlama süresine göre düzenli olarak kayıt oluşturup bunu kullanıcıya sunmaktadır. Kullanıcı gerçek zamanı olarak sensordan gelen farklı verileri gözlemleyebilmektedir.

❓ Vue.js 3 Nedir?

Vue, kullanıcı arayüzleri oluşturmak için bir JavaScript çerçevesidir (framework). Standart HTML, CSS ve JavaScript'in üzerine kuruludur ve ister basit ister karmaşık olsun, kullanıcı ara yüzlerini verimli bir şekilde geliştirmenize yardımcı olan bildirime dayalı ve bileşen tabanlı bir programlama modeli sağlar.

❓ Vite Nedir?

Vite modern web projeleri için daha hızlı ve daha yalın bir geliştirme deneyimi sağlamayı amaçlayan bir oluşturma aracıdır. İki ana bölümden oluşur:

• Yerel ES modülleri üzerinde zengin özellik geliştirmeleri sağlayan bir geliştirme sunucusudur.
• Kodunuzu, üretim için yüksek düzeyde optimize edilmiş statik varlıkların çıktısını almak üzere önceden yapılandırılmış, toplama ile bir araya getiren bir derleme komutudur.

Vite fikir sahibidir ve kutudan çıktığı gibi mantıklı varsayılanlarla birlikte gelir, ancak aynı zamanda tam yazma desteğine sahip Eklenti API'si ve JavaScript API'si aracılığıyla oldukça genişletilebilir.

❓ NodeJS Nedir?

Eşzamansız olay güdümlü bir JavaScript çalışma zamanı olarak Node.js, ölçeklenebilir ağ uygulamaları oluşturmak için tasarlanmıştır. Aşağıdaki "merhaba dünya" örneğinde, birçok bağlantı aynı anda ele alınabilir.

❓ MongoDB Nedir?

MongoDB; MongoDB Inc. tarafından ölçeklenebilir, doküman tabanlı, C++ ile geliştirilmiş açık kaynak, NoSQL veritabanı uygulamasıdır. MongoDB, verileri JSON tipinde dokümanlarda saklamaktadır, anlamsal alanları dokümandan dokümana değişir ve veri yapısı zaman içinde değiştirilebilir.

❓ Tailwindcss Nedir?

Tailwind CSS, tüm HTML dosyalarınızı, JavaScript bileşenlerinizi ve diğer tüm şablonları sınıf adları için tarayarak, ilgili stilleri oluşturarak ve ardından bunları statik bir CSS dosyasına yazarak çalışır.

Sıfır çalışma zamanı ile hızlı, esnek ve güvenilirdir.

It's fast, flexible, and reliable — with zero-runtime.

📚 Kullanılan NPM Paketleri:

Client Taraflı Paketler:

• 🔗 Axios
• 🔗 DaisyUI
• 🔗 Pinia
• 🔗 Vue Router
• 🔗 Vue Toastification
• 🔗 Vite
• 🔗 Tailwindcss
• 🔗 Eslint

Server Taraflı Paketler:

• 🔗 Cors
• 🔗 Dotenv
• 🔗 Express
• 🔗 Joi
• 🔗 Http-status
• 🔗 Logger
• 🔗 Mongoose
• 🔗 Winston
• 🔗 Socket.io
• 🔗 Nodemon

💾 Projeye Erişmek İçin

Bu URL ile projeyi yerel makinenize klonlayın : git clone https://github.com/fatihes1/Sensor-Monitoring-Dahborard-w-Vue3-NodeJS.git

Proje dizinine geçin : cd Sensor-Monitoring-Dahborard-w-Vue3-NodeJS

Server dizinine ulaşın: cd server

• ! example_.env dosyasını referans alarak kendinize .env dosyası oluşturun. Proje varsayılan olarak MongoDB Atlas kullanarak bulut üzerinde yapılandırılmıştır. Veri tabanını yerel makinenizden kullanmak için server/v1/src/loaders/db.js dizinindeki dosyaya ulaşın ve await Mongoose.connect(process.env.DB_STRING, . . . satırını yapılandırın.

Gereklilikleri indirmek için : npm install

Sunucu tarafını çalıştırın : npm run dev

Proje dizine geri dönün ve sonrasında client dizinine ulaşın: cd client

Gereklilikleri indirmek için : npm install

Client tarafını çalıştırın: npm run dev

Proje varsayılan olarak şu adreste çalışacaktır. : http://localhost:3000/

🚀 Proje Görselleri

• Proje back-end olarak olabildiğince detaylı bir klasörleme kullanılarak oluşturulmuştur. Böylelikle oluşan bir sorunun bulunduğu dosya kolaylıkla saptanabilir.

• Merkez noktanın oluşturulduğu kısım görselde belirtilmiştir :

• Merkez noktanın listelendiği kısım görselde belirtilmiştir :

• Sensorların oluşturulduğu kısım görselde belirtilmiştir :

• Sensorların listelendiği kısım görselde belirtilmiştir :

• 404 Sayfası

👤 Contact With Me