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

أصبح React Native من أكثر الخيارات العملية لتطوير تطبيقات الجوال، لأنه يسمح ببناء تطبيق واحد يعمل على أكثر من منصة مع الاستفادة من خبرات مطوري الواجهات الأمامية. وفي الوقت نفسه، تمنحك بنية serverless القدرة على إطلاق تطبيقات حقيقية دون الانشغال بإدارة خادم تقليدي أو إعداد طبقة خلفية معقدة من الصفر.

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

ماذا ستتعلم في هذا الدليل؟

• تهيئة مشروع React Native من البداية.
• بناء شاشة تسجيل دخول وإنشاء حساب قابلة للتطوير.
• ربط التطبيق ببنية serverless باستخدام easybase-react.
• إدارة حالة تسجيل الدخول وتسجيل الخروج بأقل قدر من التعقيد.
• التعرف على تحسينات عملية تجعل تجربة المصادقة أكثر جاهزية للإنتاج.

لماذا ينجح الجمع بين React Native وserverless؟

عندما تبني تطبيق جوال صغيراً أو متوسطاً، فإن أكثر ما يستهلك الوقت ليس الواجهة نفسها، بل إدارة الحسابات، الجلسات، والربط مع قاعدة البيانات. لهذا السبب يكون الاعتماد على خدمة serverless خطوة ذكية، لأنها تختصر عليك أعمال البنية التحتية وتسمح لك بالتركيز على تجربة المستخدم والمنطق التجاري.

• تطوير أسرع لأنك لا تبدأ طبقة المصادقة من الصفر.
• تكلفة تشغيل أقل في المراحل الأولى من المشروع.
• مرونة ممتازة للفرق الصغيرة أو النماذج الأولية.
• سهولة أكبر في توسيع التطبيق لاحقاً عند زيادة عدد المستخدمين.

إعداد مشروع React Native

تثبيت المشروع والمكتبة الأساسية

سنستخدم مكتبة easybase-react لأنها توفر أدوات جاهزة للتعامل مع حسابات المستخدمين وحالة الجلسة داخل تطبيقات React وReact Native. إذا لم يكن لديك مشروع جاهز، يمكنك إنشاؤه ثم تثبيت المكتبة وتشغيل التطبيق على المنصة التي تريد اختبارها.

1. أنشئ مشروعاً جديداً.
2. ثبّت مكتبة easybase-react.
3. شغّل التطبيق على iOS أو Android.

npx create-react-native-app MyNativeApp
cd MyNativeApp
npm install easybase-react
npm run ios
# or
npm run android

بعد تنفيذ الأوامر السابقة، ستحصل على نقطة بداية مناسبة لبناء واجهة المصادقة ثم تطويرها تدريجياً.

بناء شاشة إنشاء الحساب وتسجيل الدخول

إنشاء موجه بسيط بين حالتي الدخول والخروج

قبل ربط التطبيق بالخلفية، نحتاج إلى طريقة واضحة لتحديد ما إذا كان المستخدم قد سجّل دخوله أم لا. سنبدأ بمكون Router بسيط يعيد القيمة false مؤقتاً، ثم نستبدله لاحقاً بالحالة الحقيقية القادمة من الخدمة.

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default function App() {
  return <Router />;
}

function Router() {
  const isUserSignedIn = () => false;

  return isUserSignedIn()
    ? <Text>Congrats! You're signed in.</Text>
    : <Account />;
}

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

بناء مكون Account لالتقاط بيانات المستخدم

سننشئ الآن شاشة بسيطة تحتوي على حقلي اسم المستخدم وكلمة المرور، مع زرين لتسجيل الدخول وإنشاء حساب. ولرفع جودة المثال قليلاً، أضفنا الخاصية secureTextEntry لإخفاء كلمة المرور على الشاشة.

function Account() {
  const [userVal, setUserVal] = useState('');
  const [passVal, setPassVal] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React-flix!</Text>
      <TextInput
        value={userVal}
        onChangeText={setUserVal}
        style={styles.accountInput}
        placeholder='Username'
      />
      <TextInput
        value={passVal}
        onChangeText={setPassVal}
        style={styles.accountInput}
        placeholder='Password'
        secureTextEntry
      />
      <View style={{ display: 'flex', flexDirection: 'row', marginTop: 30 }}>
        <Button title='Sign In' />
        <Button title='Sign Up' />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  accountInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    width: '75%',
    margin: 10,
    fontSize: 22,
    textAlign: 'center'
  },
  title: {
    fontSize: 30,
    fontWeight: '500',
    fontStyle: 'italic',
    marginBottom: 30
  }
});

رغم بساطة هذا النموذج، فإنه يحتوي على العناصر الأساسية التي تحتاجها أي شاشة مصادقة: إدخال واضح، أزرار مباشرة، وحالة جاهزة للربط مع الخدمة الخلفية.

ربط التطبيق بخدمة Easybase بدون خادم

لماذا نستخدم Easybase؟

الفائدة الكبرى من Easybase أنها تقلل العبء المعتاد لبناء المصادقة، مثل تخزين الجلسات، إدارة الرموز، ومزامنة حالة المستخدم داخل التطبيق. بدل أن تكتب كل هذا بنفسك، توفّر لك الخدمة طبقة جاهزة ومباشرة مع مكتبة easybase-react.

• إعداد سريع يعتمد على ملف واحد هو ebconfig.js.
• تكامل مباشر مع المزود EasybaseProvider.
• الوصول إلى دوال جاهزة مثل signIn وsignUp وisUserSignedIn.
• إدارة حسابات المستخدمين من لوحة تحكم سهلة.

ابدأ بتسجيل الدخول إلى المنصة، ثم أنشئ مشروعاً جديداً كما في الصورة التالية.

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

وضع ملف ebconfig.js في المكان الصحيح

ضع الملف الذي نزّلته بجوار الملف App.js داخل جذر المشروع حتى يتمكن التطبيق من قراءته أثناء التشغيل.

├── android/
├── ios/
├── node_modules/
├── App.js
├── ebconfig.js
├── index.js
└── ...

تغليف التطبيق بالمزود EasybaseProvider

الآن سنستورد ملف الإعداد والمزود الرئيسي، ثم نغلف التطبيق بالكامل داخل EasybaseProvider. بهذه الخطوة يصبح الوصول إلى حالة المستخدم ووظائف المصادقة متاحاً من أي مكون داخلي.

import ebconfig from './ebconfig';
import { EasybaseProvider, useEasybase } from 'easybase-react';

export default function App() {
  return (
    <EasybaseProvider ebconfig={ebconfig}>
      <Router />
    </EasybaseProvider>
  );
}

بعد ذلك يتيح لك الخطاف useEasybase() الوصول إلى أدوات المصادقة الجاهزة دون بناء منطق منخفض المستوى بنفسك.

تفعيل دالتي signIn وsignUp

في هذه المرحلة نعود إلى مكون Account ونربط الأزرار بالدوال التي يوفرها الخطاف useEasybase(). لاحظ أن من الجيد أيضاً تنظيف الحقول بعد انتهاء العملية حتى تبقى الواجهة مرتبة وواضحة للمستخدم.

function Account() {
  const [userVal, setUserVal] = useState('');
  const [passVal, setPassVal] = useState('');
  const { signIn, signUp } = useEasybase();

  const clearInputs = () => {
    setUserVal('');
    setPassVal('');
  };

  const handleSignInPress = async () => {
    await signIn(userVal, passVal);
    clearInputs();
  };

  const handleSignUpPress = async () => {
    const res = await signUp(userVal, passVal, {
      created_at: new Date().toString()
    });

    if (res.success) {
      await signIn(userVal, passVal);
    }

    clearInputs();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React-flix!</Text>
      <TextInput
        value={userVal}
        onChangeText={setUserVal}
        style={styles.accountInput}
        placeholder='Username'
      />
      <TextInput
        value={passVal}
        onChangeText={setPassVal}
        style={styles.accountInput}
        placeholder='Password'
        secureTextEntry
      />
      <View style={{ display: 'flex', flexDirection: 'row', marginTop: 30 }}>
        <Button title='Sign In' onPress={handleSignInPress} />
        <Button title='Sign Up' onPress={handleSignUpPress} />
      </View>
    </View>
  );
}

إظهار الشاشة المناسبة بحسب حالة المستخدم

بقي لدينا استبدال الدالة المؤقتة في مكون Router بالحالة الفعلية القادمة من useEasybase(). بهذه الطريقة سيظهر نموذج الحساب للزائر الجديد، بينما يرى المستخدم المسجل رسالة تأكيد مختلفة.

function Router() {
  const { isUserSignedIn } = useEasybase();

  return isUserSignedIn()
    ? <Text>Congrats! You're signed in.</Text>
    : <Account />;
}

الميزة العملية هنا أن حالة الجلسة تبقى محفوظة حتى بعد إغلاق التطبيق وإعادة فتحه، وهي تجربة يتوقعها المستخدم في أغلب تطبيقات الجوال الحديثة.

إضافة زر تسجيل الخروج

حتى تكتمل دورة المصادقة، يحتاج المستخدم إلى وسيلة واضحة للخروج من حسابه. يوفّر الخطاف useEasybase() الدالة signOut، ويمكن إضافتها بسهولة داخل نفس مكون Router.

function Router() {
  const { isUserSignedIn, signOut } = useEasybase();

  return isUserSignedIn() ? (
    <View style={styles.container}>
      <Text>Congrats! You're signed in.</Text>
      <Button title='Sign Out' onPress={signOut} />
    </View>
  ) : (
    <Account />
  );
}

عند الضغط على الزر، يتم إنهاء الجلسة الحالية وتحديث حالة المزود، فيعود التطبيق تلقائياً إلى شاشة الحساب لأن isUserSignedIn() ستعيد القيمة false.

إدارة المستخدمين وخصائص الحساب

بعد نجاح التسجيل والدخول، يمكنك متابعة المستخدمين من لوحة تحكم Easybase. هناك ستشاهد الحسابات التي أُنشئت، ويمكنك حذفها أو تعديل الخصائص المرتبطة بها من مكان واحد.

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

تحسينات مهمة قبل نشر التطبيق

خطوات ترفع الجودة وتقلل الأخطاء

• اعرض رسالة خطأ مفهومة إذا فشلت دالة signIn أو signUp بدلاً من الصمت التام.
• أضف مؤشراً للتحميل أثناء تنفيذ الطلبات حتى لا يضغط المستخدم الأزرار أكثر من مرة.
• تحقق من طول كلمة المرور وصحة اسم المستخدم قبل إرسال البيانات إلى الخدمة.
• افصل مكونات العرض عن منطق المصادقة عندما يبدأ المشروع في التوسع.
• اختبر سيناريوهات إعادة فتح التطبيق للتأكد من أن الجلسة تستعاد بالطريقة المتوقعة.

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

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

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