Cardus Uygulaması - Açık Kaynaklı Kişisel Envanter Yönetimi Uygulaması

Benim Yaptığım

Cardus, kullanıcıların eşya depolarını oluşturmasına ve yönetmesine olanak tanıyan bir web uygulamasıdır. Kullanıcılar depolarına eşyalar ekleyebilir ve hangi kutunun hangi şeyi sakladığını hızla belirleyebilirler. Kullanıcılar, iş birliği yapabilmeleri için depolarını veya kaplarını diğer kullanıcılarla da paylaşabilirler.

Uygulama Bağlantısı

Web: https://cardus-app.vercel.app/

Play Store: Yakında

Açıklama

Cardus Uygulaması, mobil kullanıcılar için web geliştirme sınırlarını zorlamak amacıyla tasarlanmış bir web uygulama projesidir. Uygulama, bir React çerçevesi olan Next.js ile oluşturulmuş ve Vercel'de dağıtılmıştır. Uygulama ayrıca, mobil cihazlara yüklenebilen bir PWA'dır. Uygulama ayrıca, uygulamanın Android cihazlarına yüklenmesini sağlayan Güvenilir Web Etkinliğini kullanır. Uygulama ayrıca, görüntü depolamak ve TensorFlow.js modellerini çalıştırmak için Google Cloud Platform'u kullanarak eşya resimlerindeki nesneleri otomatik olarak algılar.

Uygulamanın, yerel bir uygulama gibi sorunsuz olmasını istiyorum. Tanıtım ekranları, güzel geçişler ve yumuşak animasyonlar bulunmaktadır. Uygulama ayrıca, her modern uygulama için olmazsa olmaz olan karanlık moda sahiptir.

Kaynak Koduna Bağlantı

Cardus Uygulaması: GitHub Deposu

İzin Veren Lisans

Apache-2.0 lisansı

Arka Plan

⚡ Problem

Depolama kutusunu etiketlemek zor
Depolama kutusunun nerede olduğunu bilmek zor
Hangi depolama alanında hangi eşyaların olduğunu bilmek zor

Kişisel deposu/depolama alanını yönetmek zorlu bir iştir.

💡 Çözüm

Kullanıcıların kendi eşya depolarını oluşturmasına ve yönetmesine olanak tanıyan bir web uygulaması oluşturun
Kullanıcılar depolarına eşyalar ekleyebilir ve hangi kutunun hangi eşyayı sakladığını hızla belirleyebilirler
Kullanıcılar, iş birliği yapabilmeleri için depolarını veya kutularını diğer kullanıcılarla da paylaşabilirler

Nasıl Yapıldı

📚 Teknolojik Yığın

Next.js
React
MongoDB
Google Cloud Platform
TensorFlow.js
PWA
Güvenilir Web Etkinliği

📖 Süreç

Önce bir Next.js uygulaması oluşturduk ve ardından bir MongoDB Atlas kümesi oluşturduk. MongoDB ile kolayca iletişim kurmak istedik, bu nedenle ORM'yi Prisma ile kullandık. Odak noktamız mobil bir web uygulaması olduğundan, bir süre sonra yalnızca masaüstüyle ilgileniyoruz. Bunu bir PWA, alt gezinme çubuğu, üst çubuk ve karanlık moda dönüştürüyoruz. Ayrıca, Android cihazlarına yükleyebilmemiz için Güvenilir Web Etkinliği yapmayı planlıyoruz.

Yolda karşılaştığımız birçok sorun var. Google Cloud Storage API'sini sunucusuz bir işlevle kullanmak iş gerektirir. Bunu kullanarak bile, zaten bir sürü engelle karşılaşıyoruz. Bazıları forum okuyarak çözülebilir; bazılarının ise bir çözüm yolu gerekir. Kullanıcılar zekice şeyler sever, bu nedenle uygulamayı da akıllı hale getirmek istiyoruz. Uygulamanın resimdeki nesneyi algılayabilmesini istiyoruz, bu nedenle bunu yapmak için TensorFlow.js kullanıyoruz. Ayrıca uygulamanın QR kodunu tarayabilmesini istiyoruz, bu nedenle bunu yapmak için ZXing kullanıyoruz.

📝 Öğrendiklerim

Next.js'i web uygulaması oluşturmak için nasıl kullanacağım
MongoDB Atlas'ı veri depolamak için nasıl kullanacağım
Google Cloud Platform'u görüntüleri depolamak için nasıl kullanacağım
TensorFlow.js'yi tarayıcıda modeller çalıştırmak için nasıl kullanacağım
PWA'yı uygulamayı yüklenebilir hale getirmek için nasıl kullanacağım
Güvenilir Web Etkinliği'ni uygulamayı Android cihazlarına yüklenebilir hale getirmek için nasıl kullanacağım