دليل شامل: إعداد تسجيل الدخول عبر جوجل في تطبيقات React Native باستخدام Firebase

يُعد تسجيل الدخول باستخدام حساب جوجل (Google Sign-in) من الميزات الأساسية والجاذبة التي يمكن تقديمها لمستخدمي تطبيقاتك. فهو لا يسهل عليهم عملية إنشاء الحساب وتسجيل الدخول فحسب، بل يضيف أيضًا طبقة من الثقة والموثوقية. والأروع من ذلك، أن منصة Firebase تجعل دمج هذه الميزة أمرًا يسيرًا للغاية على المطورين. ومع ذلك، قد ينطوي إعداد بيئة React Native على بعض التحديات، والتي سيتناولها هذا الدليل الشامل بالتفصيل.

بفضل قوة React Native وتكاملها السلس مع حزم تطوير البرمجيات (SDK) الخاصة بـ Firebase، يصبح تطبيق ميزة تسجيل الدخول عبر جوجل عملية مباشرة وفعالة. في هذا الدليل، سنقوم ببناء تطبيق بسيط يحتوي على زر واحد لتسجيل الدخول باستخدام جوجل. بمجرد نجاح المستخدم في تسجيل الدخول، سنعرض معلوماته المسترجعة من حسابه على جوجل، بالإضافة إلى زر لتسجيل الخروج.

إذا كنت مهتمًا بتوفير المزيد من خيارات تسجيل الدخول لمستخدميك، يمكنك أيضًا دمج تسجيل الدخول عبر فيسبوك. لمعرفة المزيد حول كيفية إعداد تسجيل الدخول عبر فيسبوك، يمكنك الاطلاع على دليلنا الخاص بذلك في React Native مع Firebase.

لماذا يُعد زر تسجيل الدخول عبر جوجل ضرورة لتطبيقات الجوال؟

يوفر استخدام جوجل أو خدمات الجهات الخارجية الأخرى لتسجيل الدخول العديد من المزايا التي تعزز تجربة المستخدم وتدعم نمو تطبيقك:

• تجربة مصادقة سلسة وودية: يقلل استخدام حسابات جوجل من الحاجة إلى إضاعة الوقت في عمليات التسجيل المطولة، مما يحسن بشكل كبير من معدلات التسجيل والاحتفاظ بالمستخدمين. يمكن للمستخدمين الوصول إلى تطبيقك بسرعة وسهولة.
• أمان وموثوقية عالية: يثق المستخدمون في منصات مثل جوجل وفيسبوك أكثر من أي موقع أو تطبيق غير معروف على الإنترنت. توفر هذه المنصات بنية تحتية أمنية قوية تحمي بيانات المستخدمين، مما يضيف طبقة من الثقة لتطبيقك.
• تحسين تجربة المستخدم (UX): في عالم اليوم سريع الوتيرة، يمتلك المستخدمون صبرًا قليلًا تجاه الإجراءات المعقدة أو المهام الإضافية، خاصة عند تجربة تطبيق جديد. يتيح تسجيل الدخول السريع عبر جوجل للمستخدمين البدء في استخدام تطبيقك فورًا دون عوائق، مما يعزز الرضا العام.

دون مزيد من الإطالة، دعنا ننتقل مباشرة إلى الجزء العملي من هذا الدليل ونبدأ في تطوير التطبيق.

إعداد مشروع Firebase

الخطوة الأولى في رحلتنا هي إعداد مشروع جديد على منصة Firebase. توجه إلى وحدة تحكم Firebase (Firebase Console) وقم بإنشاء مشروع جديد:

في هذه المرحلة، سنحتاج إلى تحديد اسم مشروع Firebase ومعرف التطبيق. ولكن قبل ذلك، دعنا ننشئ تطبيق React Native الخاص بنا.

إنشاء مشروع React Native وتطبيق منطق تسجيل الدخول

لنبدأ بإنشاء مشروع React Native جديد. استخدم الأمر التالي في سطر الأوامر:

react-native init instamobile-google-login-demo

لقد أطلقنا على المشروع اسم instamobile-google-login-demo. بعد إنشاء المشروع، نحتاج إلى تثبيت حزمة react-native-google-signin التي ستُمكننا من دمج وظائف مصادقة جوجل في تطبيق React Native. قم بتثبيتها باستخدام الأمر التالي:

yarn add react-native-google-signin

الآن، بعد تثبيت الحزمة، حان الوقت لاستيراد الوحدات والمكونات الضرورية منها. أضف السطر التالي إلى ملف App.js الخاص بك:

 import {
  GoogleSignin,
  GoogleSigninButton,
  statusCodes,
} from 'react-native-google-signin';

بعد ذلك، سنقوم بإنشاء حالات (states) في تطبيقنا لإدارة حالة المصادقة ومعلومات المستخدم. سنستخدم الخطاف (hook) useState لهذا الغرض:

 const [loggedIn, setloggedIn] = useState(false);
 const [userInfo, setuserInfo] = useState([]);

الآن، لنقم بإنشاء دالة تسجيل الدخول (_signIn) التي ستتولى عملية المصادقة مع جوجل. هذه الدالة ستتحقق من توفر خدمات جوجل بلاي، ثم تقوم بتسجيل الدخول واسترجاع رمز الوصول (accessToken) ورمز الهوية (idToken):

_signIn = async () => {
  try {
    await GoogleSignin.hasPlayServices();
    const {accessToken, idToken} = await GoogleSignin.signIn();
    setloggedIn(true);
  } catch (error) {
    if (error.code === statusCodes.SIGN_IN_CANCELLED) {
      // user cancelled the login flow
      alert('Cancel');
    } else if (error.code === statusCodes.IN_PROGRESS) {
      alert('Signin in progress');
      // operation (f.e. sign in) is in progress already
    } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
      alert('PLAY_SERVICES_NOT_AVAILABLE');
      // play services not available or outdated
    } else {
      // some other error happened
    }
  }
};

بعد ذلك، نحتاج إلى تهيئة كائن تسجيل الدخول عبر جوجل (Google login object) باستخدام دالة useEffect. هذه الدالة ستضمن تهيئة الإعدادات مرة واحدة عند تحميل المكون:

useEffect(() => {
  GoogleSignin.configure({
    scopes: ['email'], // ما هي واجهات برمجة التطبيقات التي تريد الوصول إليها نيابة عن المستخدم، الافتراضي هو البريد الإلكتروني والملف الشخصي
    webClientId: '418977770929-g9ou7r9eva1u78a3anassxxxxxxx.apps.googleusercontent.com', // معرف العميل من نوع WEB لخادمك (مطلوب للتحقق من معرف المستخدم والوصول دون اتصال)
    offlineAccess: true, // إذا كنت تريد الوصول إلى Google API نيابة عن المستخدم من خادمك
  });
}, []);

أخيرًا، نحتاج إلى دالة للتعامل مع عملية تسجيل الخروج (signOut). ستقوم هذه الدالة بإلغاء الوصول إلى حساب جوجل وتسجيل الخروج منه، ثم تحديث حالة التطبيق:

signOut = async () => {
  try {
    await GoogleSignin.revokeAccess();
    await GoogleSignin.signOut();
    setloggedIn(false);
    setuserInfo([]);
  } catch (error) {
    console.error(error);
  }
};

الآن، حان الوقت لعرض هذه المكونات على الشاشة. سنستخدم مكونات مثل View و Button لإنشاء واجهة مستخدم بسيطة:

 return (
  <>
    
    
      
        

        
          
            
          
          
            {!loggedIn && You are currently logged out}
            {loggedIn && (
              
            )}
          
        
      
    
  >
);

عند تشغيل المشروع في المحاكي، ستحصل على النتيجة التالية:

رائع! لقد أكملنا الآن تنفيذ واجهة المستخدم ومنطق العمل على مستوى React Native في مشروعنا. كما ترى، لدينا زر “Sign in with Google” الذي يتحول إلى زر تسجيل خروج بمجرد اكتمال عملية تسجيل الدخول بنجاح. الخطوة التالية هي إعداد حزمة Google SignIn وتطبيق Firebase على مستوى المشاريع الأصلية (Native Projects).

تهيئة المشاريع الأصلية (Native) لنظامي iOS و Android

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

لأنظمة iOS

في محرر الأكواد VSCode (أو أي طرفية)، قم بتشغيل الأمر التالي للانتقال إلى مجلد ios وتثبيت الحزم (pods) المطلوبة:

cd ios && pod install

بعد ذلك، افتح ملف .xcworkspace في Xcode (من مجلد ios) وتأكد من تضمين الحزم (Pods) بشكل صحيح:

لأنظمة Android

أولاً، نحتاج إلى ربط الوحدة الأصلية (native module). في إصدارات React Native التي تساوي أو تزيد عن 0.60، لا ينبغي أن تحتاج إلى القيام بأي شيء بفضل ميزة الربط التلقائي (auto-linking). أما في إصدارات React Native الأقدم من 0.60، فقم بتشغيل الأمر التالي:

react-native link react-native-google-signin

بعد ذلك، قم بتحديث ملف android/build.gradle بالتكوين التالي. تأكد من استخدام الإصدارات المحددة أو الأحدث منها:

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 26
        supportLibVersion = "27.1.1"
        googlePlayServicesAuthVersion = "16.0.1" // <--- استخدم هذا الإصدار أو الأحدث
    }
    ...
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2' // <--- استخدم هذا الإصدار أو الأحدث
        classpath 'com.google.gms:google-services:4.1.0' // <--- استخدم هذا الإصدار أو الأحدث
    }
    ...
}

allprojects {
    repositories {
        mavenLocal()
        google() // <--- تأكد من تضمين هذا
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

ثم قم بتحديث ملف android/app/build.gradle بالتكوين التالي، مع إضافة التبعية الخاصة بحزمة google-signin:

...
dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:23.0.1"
    implementation "com.facebook.react:react-native:+"
    implementation (project(":react-native-community_google-signin")) // <--- أضف هذه التبعية
}

إذا كنت تستخدم react-native link، فتحقق من أن الوحدة الأصلية قد تم ربطها في ملف android/settings.gradle. يجب أن يحتوي على التكوينات التالية:

...
include ':react-native-google-signin', ':app'
project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/google-signin/android')

بعد ذلك، في ملف MainApplication.java، يجب إضافة حزمة جوجل (Google package) كما هو موضح في مقتطف الكود التالي:

 import co.apptailor.googlesignin.RNGoogleSigninPackage; // <--- استورد
 public class MainApplication extends Application implements ReactApplication {
    ......
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new RNGoogleSigninPackage() // <-- يجب أن يكون هذا في القائمة
        );
    }
    ......
 }

إعداد Firebase للمشاريع الأصلية

الآن، حان الوقت للانتقال إلى إعدادات Firebase. عند إعداد طريقة المصادقة في Firebase، يتم تلقائيًا إنشاء تطبيق سحابي (Google cloud app) خاص بجوجل.

لأنظمة iOS

أولاً، نحتاج إلى إنشاء تطبيق iOS في Firebase للحصول على ملف GoogleService-info.plist، والذي يحتوي على معلومات التكوين الضرورية:

بعد الحصول على الملف، قم بنسخ ملف GoogleService-info.plist إلى مشروع Xcode الخاص بك:

الخطوة التالية هي إضافة معرف العميل المعكوس (reversed client ID) الموجود في ملف GoogleService-info.plist إلى “أنواع عناوين URL” (URL Types) في إعدادات المشروع بـ Xcode:

انتقل إلى Info ← URL Types ثم املأ مخططات URL (URL Schemes) باستخدام معرف العميل المعكوس كما هو موضح:

لأنظمة Android

لإعداد Firebase لتطبيق Android، نحتاج أولاً إلى إنشاء تطبيق Android في Firebase. سيتطلب ذلك اسم الحزمة (package name) ومفتاح شهادة SHA-1 من تطبيقك. بعد ذلك، يمكنك تسجيل تطبيق Firebase الخاص بك:

يمكنك العثور على اسم الحزمة (package name) في ملف MainApplication.java الخاص بمشروعك، كما هو موضح في الصورة:

بعد ذلك، يمكننا الحصول على مفتاح SHA-1 من ملف Keystore. في دليل android/app، قم بتشغيل الأمر التالي:

cd android/app ; keytool -exportcert -keystore debug.keystore -list -v

سيظهر مفتاح SHA-1 بعد تنفيذ الأمر، كما هو موضح في لقطة الشاشة:

بعد إنشاء تطبيق Firebase بنجاح، يجب عليك تنزيل ملف google-services.json ونسخه إلى مجلد android/app الخاص بمشروعك:

بهذا نكون قد أكملنا الخطوات الأولية لإعداد مكون تسجيل الدخول عبر جوجل في Android.

تثبيت حزمة React Native Firebase

لتثبيت حزمة react-native-firebase (الإصدار 6 أو أحدث)، يجب تشغيل الأمر التالي في سطر أوامر مشروعك. تذكر أن وحدة @react-native-firebase/app يجب أن تُثبت قبل استخدام أي خدمة أخرى من Firebase.

# باستخدام npm
npm install --save @react-native-firebase/app

# باستخدام Yarn
yarn add @react-native-firebase/app

لأنظمة iOS

لقد قمنا بالفعل بإضافة ملف GoogleService-Info.plist إلى مشروع Xcode. ما تبقى هو السماح لـ Firebase على iOS باستخدام هذه الاعتمادات. يجب تهيئة حزمة تطوير البرمجيات (SDK) الخاصة بـ Firebase iOS خلال مرحلة بدء تشغيل تطبيقك (bootstrap phase). للقيام بذلك، افتح ملف /ios/{projectName}/AppDelegate.m الخاص بك، وأضف ما يلي:

في الجزء العلوي من الملف، قم باستيراد حزمة تطوير البرمجيات (SDK) الخاصة بـ Firebase:

#import <Firebase.h>

ثم، ضمن دالة didFinishLaunchingWithOptions الموجودة لديك، أضف الأسطر التالية في بداية الدالة:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // أضفني --- \/
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  // أضفني --- /\
  // ...
}

أخيرًا، نحتاج إلى تشغيل الأمر التالي لإنهاء تثبيت حزم CocoaPods:

cd ios ; pod install

بهذا نكون قد أكملنا تثبيت حزمة Firebase الرئيسية على نظام iOS.

لأنظمة Android

نحتاج إلى تهيئة Firebase باستخدام بيانات اعتماد Android. للسماح لـ Firebase على Android باستخدام هذه الاعتمادات، يجب تمكين إضافة google-services في المشروع. يتطلب هذا تعديل ملفين في دليل Android.

أولاً، أضف إضافة google-services كاعتماد داخل ملف android/build.gradle الخاص بك:

buildscript {
  dependencies {
    // ... تبعيات أخرى
    classpath 'com.google.gms:google-services:4.2.0' // أضفني --- /\
  }
}

أخيرًا، قم بتنفيذ الإضافة عن طريق إضافة السطر التالي في نهاية ملف /android/app/build.gradle الخاص بك:

apply plugin: 'com.google.gms.google-services'

وحدة مصادقة Firebase لـ React Native

بعد اكتمال تثبيت حزمة Firebase الرئيسية، نحتاج إلى تثبيت الوحدة الفرعية الخاصة بالمصادقة (Authentication). للقيام بذلك، افتح الطرفية وقم بتشغيل الأمر التالي:

yarn add @react-native-firebase/auth

لأنظمة iOS

بالنسبة لنظام iOS، نحتاج ببساطة إلى إعادة تثبيت حزم Pods لضمان تضمين وحدة المصادقة الجديدة:

cd ios/ && pod install

لأنظمة Android

بالنسبة لنظام Android، يمكنك اتباع التعليمات الموجودة في الوثائق الرسمية، والتي تكون مطلوبة فقط إذا كنت تستخدم React Native بإصدار 0.59 أو أقدم، أو إذا كنت بحاجة إلى دمج المكتبة يدويًا.

تفعيل تسجيل الدخول عبر جوجل في Firebase

لتمكين تسجيل الدخول عبر جوجل، يجب أن نتوجه إلى وحدة تحكم Firebase. من هناك، انتقل إلى قسم “المصادقة” (Authentication) ثم انقر على خيار “جوجل” (Google):

بعد ذلك، قم بتمكين الإعدادات المطلوبة واحفظ التكوين. ستحتاج إلى تحديد بريد إلكتروني للدعم لمشروعك:

الآن، في ملف App.js الخاص بك، نحتاج إلى استيراد وحدة auth من حزمة Firebase:

 import auth from '@react-native-firebase/auth';

بعد ذلك، سنقوم بدمج تكوين المصادقة مع دالة تسجيل الدخول (_signIn) الخاصة بنا. بعد تسجيل الدخول بنجاح، سنقوم بتخزين رمز الوصول (accessToken) ورمز الهوية (idToken) في Firebase. هذا يربط جلسة تسجيل الدخول مع Firebase:

_signIn = async () => {
  try {
    await GoogleSignin.hasPlayServices();
    const {accessToken, idToken} = await GoogleSignin.signIn();
    setloggedIn(true);
    const credential = auth.GoogleAuthProvider.credential(
      idToken,
      accessToken,
    );
    await auth().signInWithCredential(credential);
  } catch (error) {
    // معالجة الأخطاء كما في الدالة السابقة
  }
};

الآن، لقد أكملنا بنجاح دمج تسجيل الدخول عبر جوجل في تطبيق React Native الخاص بنا. يمكنك تجربة تسجيل الدخول في التطبيق التجريبي:

يمكننا أيضًا رؤية البيانات الجديدة التي تمت إضافتها إلى وحدة تحكم Firebase، والتي تتضمن معلومات المستخدم الذي قام بتسجيل الدخول:

تتبع حالة المستخدم

لمراقبة حالة تسجيل دخول المستخدم بشكل مستمر، نستخدم وحدة المصادقة من Firebase Auth. لهذا الغرض، سنضيف الدالة onAuthStateChanged إلى خطاف useEffect لضمان تشغيلها عند تحميل المكون وفي كل مرة تتغير فيها حالة المصادقة. سنقوم بتمرير دالة استدعاء (callback function) إلى onAuthStateChanged لمعالجة التغييرات:

useEffect(() => {
  // ... إعدادات GoogleSignin.configure
  const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
  return subscriber; // إلغاء الاشتراك عند إلغاء تحميل المكون
}, []);

داخل دالة onAuthStateChanged، نقوم بمعالجة بيانات الحالة المحلية (local state data) بناءً على المستخدم الحالي:

function onAuthStateChanged(user) {
  setUser(user); // تحديث حالة المستخدم في التطبيق
  console.log(user);
  if (user) {
    setloggedIn(true);
  } else {
    setloggedIn(false); // إذا لم يكن هناك مستخدم، فهو غير مسجل الدخول
  }
}

الآن، نحتاج إلى تخزين بيانات المستخدم في حالة التطبيق وعرضها بعد تسجيل الدخول بنجاح. سنقوم بتعديل جزء العرض (render) ليظهر رسالة ترحيب وزر تسجيل خروج عند وجود مستخدم مسجل الدخول:

{!user && You are currently logged out}
{user && (
  
    Welcome {user.displayName}
    
  
)}

عند تشغيل التطبيق في المحاكي، ستحصل على النتيجة التالية، حيث يتم عرض اسم المستخدم وزر تسجيل الخروج:

تسجيل الخروج من Firebase

لإتمام عملية تسجيل الخروج بشكل كامل وآمن، نحتاج إلى إزالة جميع بيانات اعتماد المستخدم وإلغاء رمز تسجيل الدخول الخاص بجوجل. أولاً، ننتظر حتى تقوم وحدة GoogleSignin بإلغاء الوصول وتسجيل الخروج. بعد ذلك، نستدعي الدالة signOut من وحدة Firebase Auth لإتمام عملية تسجيل الخروج بنجاح من Firebase نفسها. إليك التنفيذ الكامل للدالة:

signOut = async () => {
  try {
    await GoogleSignin.revokeAccess(); // إلغاء الوصول من جوجل
    await GoogleSignin.signOut(); // تسجيل الخروج من جوجل
    auth()
      .signOut()
      .then(() => alert('Your are signed out!')); // تسجيل الخروج من Firebase
    setloggedIn(false); // تحديث حالة تسجيل الدخول في التطبيق
    // setuserInfo([]); // يمكن إلغاء التعليق لتفريغ معلومات المستخدم
  } catch (error) {
    console.error(error);
  }
};

ونتيجة لذلك، يمكننا الآن تنفيذ عمليات تسجيل الخروج بسلاسة، كما هو موضح في الصورة المتحركة التالية:

الخلاصة

في هذا الدليل الشامل، تعلمنا كيفية إعداد تسجيل الدخول عبر جوجل (Google Login) وتخزين رمز الوصول (access token) بفعالية، وذلك من خلال دمج Firebase في مشروع React Native الخاص بنا. بدأنا بإنشاء مشروع React Native وتكوين جميع المكونات والدوال اللازمة. ثم انتقلنا إلى كيفية تهيئة تسجيل الدخول عبر جوجل و Firebase لكل من منصتي Android و iOS على حدة. أخيرًا، قمنا بإعداد Firebase في تطبيق React Native باستخدام الحزم المخصصة وعرضنا بيانات المستخدم مع زر تسجيل الخروج.

يمكنك تحميل الكود المصدري الكامل لهذا الدليل من مستودع Github (ملاحظة: الرابط الأصلي غير متوفر، يجب استبداله برابط حقيقي إذا كان موجودًا).

الجدير بالذكر أن Firebase ومصادقة جوجل مدعومتان عبر جميع لغات تطوير تطبيقات الجوال، مثل Flutter و Swift و Kotlin. الخطوات التكوينية والنهج المعماري متشابهة إلى حد كبير، مما يسهل عملية التبني عبر المنصات المختلفة.

الخلاصة التقنية

يُظهر هذا الدليل قوة التكامل بين React Native و Firebase في تبسيط عمليات المصادقة المعقدة. من منظور تقني، فإن استخدام Google Sign-in عبر Firebase Auth SDK لا يوفر فقط تجربة مستخدم محسنة وسلسة، بل يقلل أيضًا من عبء العمل على المطورين فيما يتعلق بإدارة أمان بيانات المستخدمين وتخزينها. إن فصل منطق الواجهة الأمامية (React Native) عن منطق المصادقة الخلفية (Firebase) يساهم في بناء تطبيقات قابلة للتوسع والصيانة. كما أن الاهتمام بالتفاصيل الخاصة بكل منصة (iOS و Android) يضمن استقرار التطبيق وأداءه الأمثل على جميع الأجهزة، مما يعكس أفضل الممارسات في تطوير تطبيقات الجوال الهجينة.

خطوات تالية

الآن بعد أن أتقنت إعداد تسجيل الدخول عبر جوجل باستخدام Firebase في تطبيقات React Native، إليك بعض المواضيع الأخرى التي قد ترغب في استكشافها لتوسيع معرفتك ومهاراتك:

• كيفية بناء تطبيق React Native مع واجهة خلفية (Backend) باستخدام Firebase.
• Firebase و React Native: إشعارات الدفع (Push notifications) وتخزين Firebase (Firebase storage).
• المزيد من طرق المصادقة في React Native و Firebase: تسجيل الدخول عبر جوجل، تسجيل الدخول عبر فيسبوك، والمصادقة باستخدام رمز التحقق لمرة واحدة (OTP) عبر الرسائل النصية القصيرة.

إذا أعجبك هذا الدليل التعليمي حول React Native، نرجو منك إعطاء نجمة لمستودع Github ومشاركته مع مجتمعك. يمكنك أيضًا الاطلاع على المزيد من مشاريع React Native المجانية على منصة Instamobile.

شكرًا لك على القراءة حتى هذه النقطة. إذا وصلت إلى هنا، فهذا يدل على اهتمامك، ونحن نقدر ذلك!

تعلم البرمجة مجانًا. لقد ساعد منهج freeCodeCamp مفتوح المصدر أكثر من 40,000 شخص في الحصول على وظائف كمطورين. ابدأ الآن.