Skip to content

Latest commit

 

History

History
236 lines (163 loc) · 11.5 KB

README(Turkish).md

File metadata and controls

236 lines (163 loc) · 11.5 KB
Raw

IWeather Uygulaması ©️

💻 https://iweather-app.vercel.app/

iweather-screenshots

Proje Tanımı

IWeather Uygulaması, kullanıcıların dünya genelindeki hava durumu bilgilerini anlık olarak görmelerini sağlayan bir web uygulamasıdır. Kullanıcılar, istedikleri şehirlerin hava durumu tahminlerini görebilir, çoklu şehir hava durumlarını görüntüleyebilir ve detaylı hava durumu bilgilerine erişebilirler. Uygulama, modern ve kullanıcı dostu bir arayüzle tasarlanmıştır, böylece kullanıcılar hızlı ve kolay bir şekilde istedikleri hava durumu bilgilerine ulaşabilirler.

Proje Çıktısı

iweather-app

Proje Plan ve Yönetimi

Epic Kullanıcı Hikayesi: Hava durumu uygulamasının bir kullanıcısı olarak, çeşitli konumlar için güncel hava durumu bilgilerine zahmetsizce erişmek, sık görüntülenen konumları hızlı erişim için kaydetmek, birden fazla gün için ayrıntılı hava durumu tahminlerini görüntülemek ve uygulamanın farklı bölümleri arasında sorunsuz bir şekilde gezinmek istiyorum. 🌤️

Kullanıcı Hikayeleri:

1️⃣ Güncel Hava Durumu Bilgilerini Görüntüle:

  • 🥇 Kullanıcı olarak şehir adı girerek güncel hava durumu bilgisini görmek istiyorum.

  • 🥈 Hava durumunu uygun simgeler ve arka plan görselleri ile görselleştirmek istiyorum.

    Görev-1 = Kullanıcı arayüzü oluşturun (şehir giriş alanı ve hava durumu görüntüleme alanı)
    Görev-2 = OpenWeatherMap API'sini kullanarak hava durumu bilgilerini getirecek bir fonksiyon yazın.
    Görev-3 = Axios'u kullanarak API çağrısı yapın ve döndürülen verileri işleyin.
    Görev-4 = Belirli URL uç noktasıyla hava durumu bilgilerini kullanıcıya otomatik olarak görüntüleyin.
    Görev-5 = Hava koşullarına göre simgeleri ve arka plan resimlerini değiştirin.

2️⃣ 5 Günlük Hava Durumu Ayrıntılarını Görüntüle:

  • 🥇 Kullanıcı olarak girilen şehrin 5 günlük hava tahminini görmek istiyorum.

  • 🥈 Kullanıcı olarak her gün için minimum ve maksimum sıcaklıklarla birlikte detaylı hava durumu bilgisi istiyorum.

    Görev-1 = Günlük hava durumu ayrıntılarını görüntülemek için bir Forecast componenti oluşturun.
    Görev-2 = OpenWeatherMap API'sini kullanarak 5 günlük hava durumu tahminini almak için bir biçimlendirici fonksiyonu yazın.
    Görev-3 = Biçimlendirilmiş günlük hava durumu tahminini kullanıcıya görüntüleyin.

3️⃣ Responsive Tasarım:

  • 🥇 Bir kullanıcı olarak farklı ekran boyutlarına duyarlı bir tasarım istiyorum.

  • 🥈 Kullanıcı olarak uygulamanın mobil, tablet ve masaüstü cihazlarda kullanılabilir olmasını istiyorum.

    Görev-1 = TailwindCSS kullanarak tasarımı farklı ekran boyutlarına duyarlı hale getirin.
    Görev-2 = Mobil cihazlar, tabletler ve masaüstü cihazlar için TailwindCSS'yi kullanarak uygulamaya stil verin.

4️⃣ Hava Drumu Bilgilerini Favorilere Ekleme/Çıkarma:

  • 🥇 Kullanıcı olarak istediğim hava durum bilgisini favori şehirlerime ekleyip, çıkarabilmeliyim.

  • 🥈 Kullanıcı olarak favorilerim arasından ekleme ve çıkarma yaptığımda bunun gerçekleştiğini iconlardan ve bildirimlerden görmeliyim.

    Görev-1 = Favoriye hava durumu bilgisi eklenildiğin ve çıkarıldığında kalp icon ı dinamik olarak değişmeli.
    Görev-2 = Favori durumları ile alakalı her aşamada kullanıcı bildirim almalı.

5️⃣ Favori Hava Durumu Bilgilerini Localde Saklayın:

  • 🥇 Kullanıcı olarak daha önce favorilere eklenen şehirlere ait hava durumu bilgilerinin local olarak saklanabilmesini istiyorum.

  • 🥈 Kullanıcı olarak birden fazla favori şehrin hava durumu bilgisini depolamak istiyorum.

    Görev-1 = Favori hava durumu bilgilerini depolamak ve almak için "Local Storage" kullanın.
    Görev-2 = Birden fazla şehir için depolanan hava durumu bilgilerini "Carousel" formatında görüntüleyin.

6️⃣ Hava Durumu Bilgilerini "Carousel" Stilinde Görüntüleme:

  • 🥇 Kullanıcı olarak, depolanan hava durumu bilgilerini "Carousel" tarzı bir ekranda (Material Tailwind) görüntülemek istiyorum.

  • 🥈 Kullanıcı olarak farklı şehirlerin hava durumu bilgileri arasında kolaylıkla geçiş yapmak istiyorum.

    Görev-1 = Carousel Component ini, Material Tailwind den alarak implemente edin.

7️⃣ Hata ve Başarı Bildirimleri:

  • 🥇 Kullanıcı olarak hava durumu bilgisi alımı başarılı olduğunda bilgilendirilmek istiyorum.

  • 🥈 Bir kullanıcı olarak uygun bildirimlerin hataları göstermesini ve neyin yanlış gittiği konusunda bana yol göstermesini istiyorum.

    Görev-1 = Axios isteklerinin durumuna göre uygun bildirimleri görüntüleyecek fonksiyonları yazın.
    Görev-2 = Bildirimler için React Toastify paketini entegre edin.

8️⃣ React Router'ı Kullanarak Sayfalar Arasında Gezinme:

  • 🥇 Kullanıcı olarak onClick olaylarını kullanarak sayfalar arasında gezinmek istiyorum.

  • 🥈 Kullanıcı olarak sayfa navigasyonu için React Router'ı kullanmak istiyorum.

    Görev-1 = Sayfalar arası navigasyonu sağlamak için React Router yapısını kurun.
    Görev-2 = Uygulamanın farklı bölümleri için ayrı sayfalar/componentler oluşturun (örneğin, ana sayfa, hava durumu ayrıntıları sayfası).
    Görev-3 = Sayfalar arasında gezinmek için onClick olay işleyicilerini uygulayın.

9️⃣ React Context API Kullanarak Global State Yönetimi:

  • 🥇 Kullanıcı olarak state yönetiminin React Context kullanılarak yapılmasını istiyorum.

  • 🥈 Kullanıcı olarak component ler arasında bağlamı kullanarak kesintisiz iletişim sağlamak istiyorum.

    Görev-1 = Uygulama state lerini yönetmek için bir context sağlayıcı (context provider) oluşturun.
    Görev-2 = Context sağlayıcısı içindeki state leri güncellemek için state değişkenlerini ve ilgili fonksiyonları tanımlayın.
    Görev-3 = State lere erişmek ve gerektiğinde onları dinamik olarak güncellemek için ilgili componentleri, context sağlayıcı kapsamına alın.

1️⃣0️⃣ API ile Şehir Önerileri Alın:

  • 🥇 Kullanıcı olarak, şehir ararken filtreleyerek bana şehir önermesini istiyorum.

  • 🥈 Kullanıcı olarak, şehir önerilerini dropdown olarak görmek istiyorum.

    Görev-1 = Kullanıcı şehir girişi yaparken, şehir önerilerini göstermek için bir fonksiyon yazın.
    Görev-2 = Şehir önerilerini almak için Axios kullanarak ücretsiz bir API'yi (AllCities_API_URL) kullanın ve kullanıcıya TailwindCSS ile dropdown tasarlayarak sunun.

Proje İskeleti 🩻

📖IWeather App (dosya)
|
├── 📁public
│     └── index.html
├── 📁src
│    ┣ 📂assets
│    ┃       ┗ [resimler ve ikonlar]
│    ┣ 📂components
│    ┃       ┣ Footer.jsx
│    ┃       ┣ Forecast.jsx
│    ┃       ┣ GeneralInfos.jsx
│    ┃       ┣ Messages.jsx
│    ┃       ┣ Navbar.jsx
│    ┃       ┣ Search.jsx
│    ┃       ┗ WeatherDetails.jsx
|    ┃
│    ┣ 📂context
|    ┃    ┗ WeatherProvider.js
|    ┃
│    ┣ 📂helpers
|    ┃    ┗ toastNotify.js
|    ┃
│    ┣ 📂pages
│    ┃       ┣ Home.js
│    ┃       ┣ ShowWeather.js
│    ┃       ┗ WeatherLists.js
│    ┃
│    ┣ 📂router
│    ┃       ┗ AppRouter.js
|    ┃
│    ┣ 📂services
│    ┃       ┣ cityFormatters.js
│    ┃       ┣ cityService.js
│    ┃       ┣ constants.js
│    ┃       ┣ weatherFormatters.js
│    ┃       ┗ weatherService.js
|    ┃
│    ┣ App.js
│    ┣ index.css
│    ┗ index.js
|
├── example.env
├── .gitignore
├── iweather-app.gif
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── tailwind.config.js

Proje Amacı

Bu proje ile ReactJS ve TailwindCSS kullanarak tek sayfalı Hava Durumu Uygulamasının geliştirilecek ve bu vesileyle API kullanımı, asenkron veri işleme ve dinamik içerik yönetimi gibi konularda becerilerin geliştirilmesi amaçlanmaktadır.

Proje sonunda aşağıdaki konular ele alınacaktır; 🎯

  • HTML & CSS & JS & ReactJS

  • TailwindCSS (Material Tailwind)

  • Axios

  • React-Router & React-Context API

Proje sonunda; 💪

  • HTML ve CSS (TailwindCSS) ile JS ve ReactJS kodlama becerileri geliştirilmiş olacak.

  • Git komutlarını (Push, pull, commit, add vb.) ve Versiyon Kontrol Sistemi (Github) etkin bir şekilde kullanılmış olacak.

Adım Adım Proje Kılavuzu

  • Adım 1: Depoyu Localinizde Klonlayın:

    Proje deposunun URL'sini GitHub'dan veya benzer bir platformdan kopyalayın. Terminalinizi veya komut isteminizi açın ve projeyi depolamak istediğiniz dizine gidin. Depoyu klonlamak için aşağıdaki komutu kullanın:

    git clone <repository_url>

    <repository_url> kısmını kopyaladığınız proje deposunun URL'si ile değiştirin.

  • Adım 2: Node Package Manager Yükleyin:

    Terminalinizde veya komut isteminizde projenin kök dizinine gidin. Npm paketlerini yüklemek için aşağıdaki komutu kullanın:

    npm install

    Bu komut, package.json dosyasındaki listeye göre projenin bağımlılıklarını yükleyecektir.

  • Adım 3: https://home.openweathermap.org/users/sign_up adresine kaydolun ve API anahtarını alın. Bundan sonra kişisel API anahtarınızı, proje kök dizininizde oluşturacağınız ".env" dosyanıza (example.env dosyasındaki gibi) yapıştırın. Proje kök dizinindeki "example.env" dosyasını kontrol edebilirsiniz.

    REACT_APP_API_KEY=[YOUR_PERSONAL_OPENWEATHER_API_KEY]

    [YOUR_PERSONAL_OPENWEATHER_API_KEY] öğesini Openweathermap'ten aldığınız kişisel API anahtarınızla değiştirin.

  • Adım 4 : Tüm paketler başarıyla yüklendikten ve API anahtarı yapıştırıldıktan sonra projeyi başlatmak için aşağıdaki komutu kullanın:

    npm start

    Bu komut, geliştirme sunucusunu başlatacak ve varsayılan web tarayıcınızda projenin canlı önizlemesini açacaktır. Tarayıcı otomatik olarak açılmazsa http://localhost:3000 adresine giderek projeyi görüntüleyebilirsiniz.

Ek Veriler 📦

Katkı 🤝

Görüşleriniz ve katkılarınız projelerimi büyük ölçüde zenginleştiriyor! İster yeni proje konseptleriyle dolu olun ister mevcut konseptleri geliştirecek fikirleriniz olsun, katkınız benim çok değerlidir. Düşünceleriniz hakkında bir sohbet başlatmak için bir konu açmaktan çekinmeyin veya önerdiğiniz değişiklikleri içeren bir request isteği gönderin. Her katkı büyümemde ve gelişimimde hayati bir rol oynuyor; Şimdiden teşekkür ederim!

Lisans 🪪

Bu depo MIT Lisansı kapsamında lisanslanmıştır. Ayrıntılar için MIT lisans dosyasına bakın. Daha fazla bilgi için lütfen MIT Lisansını ziyaret edin.

☺ Mutlu Kodlamalar ✍