Sürdürülebilir Yaşam İpuçları Üreticisi: Next.js, Flask ve Google Gemini ile Frontend Geliştirme
Merhaba! Bu yazıda, önceki yazımda bahsettiğim sürdürülebilir yaşam ipuçları üreteci projesinin frontend geliştirme aşamasını detaylı olarak ele alacağız. Hatırlatmak gerekirse, projemizde Next.js, Flask ve Google Gemini AI kullanıyoruz. Bu bölümde, Next.js framework’ünün gücünden ve React bileşenlerinin kullanımından faydalanarak kullanıcı arayüzünü nasıl tasarladığımızı göreceksiniz.
Next.js ile Kullanıcı Deneyimini Mükemmelleştirmek
Next.js, React tabanlı bir framework olduğu için, hızlı ve verimli bir geliştirme süreci sağladı. Özellikle, sunucu tarafı oluşturma (SSR) özelliği sayesinde, arama motorları için optimizasyon sağladık. Sonuç olarak, hem kullanıcı deneyimi hem de SEO performansı artırdı. Bunun yanında, Next.js’in yerleşik API routes özelliğini kullanarak, Flask backend’imizle kolayca iletişim kurduk.
API İletişimi ve Veri İşleme
Next.js’in API routes özelliği sayesinde, Flask’te oluşturduğumuz API’ye istek gönderdik ve gelen sürdürülebilir yaşam ipuçlarını görüntüledik. Bu işlem için fetch API’sini kullandık. Elde edilen verileri, React bileşenleri içerisinde kolayca işledik ve kullanıcı arayüzünde görüntüledik. Örneğin, gelen ipuçlarını liste şeklinde gösterdik. Her bir ipucu, ayrıntılı açıklamaları ile birlikte sunuldu. Böylece kullanıcılar, ipuçlarını rahatça okuyabilir ve uygulayabilirler. Aşağıda basit bir örnek veriyoruz:
// pages/api/tips.js
export default async function handler(req, res) {
const response = await fetch('http://localhost:5000/api/tips'); // Flask backend'inize istek gönderin
const data = await response.json();
res.status(200).json(data);
}
Bu kod parçası, Flask backend’imizden gelen verileri alıp, frontend’e iletmek için kullanılan basit bir API route örneğidir. Daha detaylı kod örnekleri için GitHub deposuna göz atabilirsiniz. (GitHub Deposu – Yakında) Bu sayede projenin tamamına erişebilir ve daha fazla ayrıntıya ulaşabilirsiniz.
Google Gemini AI Entegrasyonu
Google Gemini AI’nin gücünden de yararlandık. Kullanıcıların belirli ihtiyaçlarına göre özelleştirilmiş sürdürülebilir yaşam ipuçları üretmek için Gemini API’sini kullandık. Bu sayede kullanıcı deneyimi daha da kişiselleştirildi. Örneğin, kullanıcı “su tasarrufu ipuçları” aradığında, Gemini API’si bu konuya özel ipuçları üretti. Bu entegrasyon, projenin işlevselliğini önemli ölçüde artırdı.
Sonuç ve Gelecek Planlar
Bu makalede, sürdürülebilir yaşam ipuçları üreteci projemizin frontend geliştirme aşamasını detaylı bir şekilde anlattık. Next.js’in sağladığı avantajlardan ve Google Gemini AI entegrasyonundan bahsettik. Gelecekte, projemize daha fazla özellik eklemeyi planlıyoruz. Örneğin, kullanıcıların kendi ipuçlarını ekleyebileceği bir bölüm eklemek veya ipuçlarını kategorilere ayırmak gibi geliştirmeler düşünüyoruz. Projenin gelişimi hakkında daha fazla bilgi için fatihsoysal.com adresini ziyaret edebilirsiniz.
Umarım bu makale faydalı olmuştur. Sorularınız veya önerileriniz varsa lütfen yorumlarda belirtin.
#Etiketler: Next.js, Flask, Google Gemini, Sürdürülebilir Yaşam, Frontend Geliştirme, React, API, AI, Yapay Zeka, Sürdürülebilirlik, Web Geliştirme, Kullanıcı Deneyimi, SEO