دليل خطوة بخطوة لبناء تطبيق الطقس باستخدام React Native

دليل خطوة بخطوة لبناء تطبيق الطقس باستخدام React Native

في هذا الدرس، سنتعلم كيفية بناء تطبيق طقس بسيط باستخدام React Native. سوف نتعرف على كيفية استخدام API خارجي لجلب بيانات الطقس وعرضها داخل التطبيق.

1. إعداد بيئة العمل

قبل البدء في بناء تطبيق الطقس، تحتاج إلى إعداد بيئة العمل. تأكد من تثبيت Node.js وExpo CLI على جهازك. لتثبيت Expo CLI، قم بتشغيل الأمر التالي في سطر الأوامر:

npm install -g expo-cli

بعد تثبيت Expo، يمكنك إنشاء مشروع جديد باستخدام Expo كالتالي:

expo init WeatherApp
cd WeatherApp
expo start

2. تثبيت المكتبات المطلوبة

نحتاج إلى مكتبة axios لجلب البيانات من API. لتثبيت axios، قم بتشغيل الأمر التالي:

npm install axios

سنستخدم أيضًا مكتبة react-native-elements لتصميم واجهة المستخدم بشكل جذاب. لتثبيتها، قم بتشغيل الأمر التالي:

npm install react-native-elements

3. إنشاء مكون WeatherApp.js

قم بإنشاء ملف جديد في المشروع يسمى WeatherApp.js وأضف الكود التالي لجلب بيانات الطقس من API باستخدام axios:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

const WeatherApp = () => {
  const [weatherData, setWeatherData] = useState(null);

  useEffect(() => {
    axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY`)
      .then(response => {
        setWeatherData(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <View style={{ padding: 20 }}>
      {weatherData ? (
        <View>
          <Text style={{ fontSize: 20 }}>City: {weatherData.name}</Text>
          <Text>Temperature: {weatherData.main.temp}°C</Text>
          <Text>Weather: {weatherData.weather[0].description}</Text>
        </View>
      ) : (
        <Text>Loading...</Text>
      )}
    </View>
  );
};

export default WeatherApp;

4. تعديل ملف App.js لعرض مكون الطقس

الآن سنقوم باستيراد مكون WeatherApp الذي أنشأناه في ملف App.js لعرض بيانات الطقس في التطبيق:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import WeatherApp from './WeatherApp';

export default function App() {
  return (
    <View style={styles.container}>
      <WeatherApp />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

5. تشغيل التطبيق

بعد كتابة الكود، يمكنك تشغيل التطبيق باستخدام Expo من خلال سطر الأوامر. اذهب إلى مجلد المشروع وشغل التطبيق بالأمر التالي:

expo start

6. استبدال مفتاح API

تأكد من استبدال YOUR_API_KEY بمفتاح API الخاص بك من موقع OpenWeatherMap. يمكنك الحصول على مفتاح API من خلال التسجيل في OpenWeatherMap.

7. خاتمة

في هذا الدرس، قمنا ببناء تطبيق طقس بسيط باستخدام React Native. لقد تعلمنا كيفية جلب بيانات الطقس من API خارجي وعرضها داخل التطبيق. يمكنك تحسين التطبيق بإضافة المزيد من الميزات مثل تحديد الموقع الجغرافي لعرض الطقس بناءً على موقع المستخدم الحالي.